fix: 改进可视化效果

src/Model/modelConstructor.ts

@@ -59,7 +59,7 @@ export class ModelConstructor {
             }
         
             const options: LayoutGroupOptions = optionsTable[layouterName],
-                  sourceData = layouter.sourcesPreprocess(sourceGroup.data),
+                  sourceData = layouter.sourcesPreprocess(sourceGroup.data, options),
                   elementOptions = options.element || { },
                   pointerOptions = options.pointer || { };
                 

src/Model/modelData.ts

@@ -193,10 +193,6 @@ export class Element extends Model {
         this.pointers = { };
     }
 
-    getPointer(pointerType: string): Pointer {
-        return this.pointers[pointerType] || null;
-    }
-
     protected defineProps(option: ElementOption): G6NodeModel {
         return {
             ...this.sourceElement,
@@ -278,12 +274,8 @@ export class Pointer extends Model {
         this.target.pointers[type] = this;
     }
 
-    setAnchor(anchor: number) {
-        this.anchor = anchor;
-    };
-
     protected defineProps(option: PointerOption): G6NodeModel {
-        this.setAnchor(option.anchor);
+        this.anchor = option.anchor;
 
         return {
             id: this.id,

src/RegisteredShape/externalPointer.ts

@@ -14,6 +14,18 @@ export default G6.registerNode('external-pointer', {
 
         if (cfg.label) {
             const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
+
+            const bgRect = group.addShape('rect', {
+                attrs: {
+                    x: 0, 
+                    y: 0,
+                    text: cfg.label,
+                    fill: style.fill || '#fafafa',
+                    radius: 2
+                },
+                name: 'bgRect'
+            });
+
             const text = group.addShape('text', {
                 attrs: {
                     x: 0, 
@@ -21,26 +33,35 @@ export default G6.registerNode('external-pointer', {
                     textAlign: 'left',
                     textBaseline: 'middle',
                     text: cfg.label,
-                    fill: style.fill || '#000',
-                    fontSize: style.fontSize || 16,
-                    stroke: '#fff',
-                    lineWidth: 6
+                    fill: style.fill || '#999',
+                    fontSize: style.fontSize || 16
                 },
                 name: 'pointer-text-shape'
             });
 
-            const { width: textWidth } = text.getBBox();
+            const { width: textWidth, height: textHeight } = text.getBBox();
+            bgRect.attr({ 
+                width: textWidth + 6,
+                height: textHeight + 6
+            });
 
             // 旋转文字
             const pointerEndPosition = cfg.pointerEndPosition;
             if(pointerEndPosition) {
                 let textX = pointerEndPosition[0] - textWidth / 2,
-                    textY = pointerEndPosition[1];
+                    textY = pointerEndPosition[1],
+                    rectWidth = bgRect.attr('width'),
+                    rectHeight = bgRect.attr('height');
 
                 text.attr({ 
                     x: textX,
                     y: textY
                 });
+
+                bgRect.attr({ 
+                    x: pointerEndPosition[0] - rectWidth / 2,
+                    y: pointerEndPosition[1] - rectHeight / 2
+                });
             }
         }
 

src/RegisteredShape/indexedNode.ts

@@ -39,10 +39,22 @@ export default G6.registerNode('indexed-node', {
         }
 
         if(cfg.index !== undefined) {
+            const offset = 20,
+                  indexPosition = cfg.indexPosition || 'bottom',
+                  indexPositionMap: { [key: string]: (width: number, height: number) => { x: number, y: number } } = {
+                    top: (width: number, height: number) => ({ x: width, y: height / 2 - offset }),
+                    right: (width: number, height: number) => ({ x: width * 1.5 + offset, y: height }),
+                    bottom: (width: number, height: number) => ({ x: width, y: height * 1.5 + offset }),
+                    left: (width: number, height: number) => ({ x: width / 2 - offset, y: height })
+                  };
+
+            const { x: indexX, y: indexY } = indexPositionMap[indexPosition](width, height);
+
+            
             group.addShape('text', {
                 attrs: {
-                    x: width, 
-                    y: height + 30,
+                    x: indexX, 
+                    y: indexY,
                     textAlign: 'center',
                     textBaseline: 'middle',
                     text: cfg.index.toString(),
@@ -55,5 +67,14 @@ export default G6.registerNode('indexed-node', {
         }
 
         return rect;
+    },
+
+    getAnchorPoints() {
+        return [
+            [0.5, 0],
+            [1, 0.5],
+            [0.5, 1],
+            [0, 0.5]
+        ];
     }
 });

src/View/layouter.ts

@@ -51,8 +51,7 @@ export class Layouter {
             anchorPosition = [anchorPosition.x, anchorPosition.y];
 
             let anchorVector = Vector.subtract(anchorPosition, center),
-                angle = 0,
-                len = Vector.length(anchorVector) + offset;
+                angle = 0, len = Vector.length(anchorVector) + offset;
 
             if(anchorVector[0] === 0) {
                 angle = anchorVector[1] > 0? -Math.PI: 0;

src/engine.ts

@@ -36,7 +36,7 @@ export class Engine {
 
         this.animationOptions = Object.assign({
             enable: true,
-            duration: 1000,
+            duration: 900,
             timingFunction: 'easePolyOut'
         }, engineOptions.animation);
 

src/options.ts

@@ -117,7 +117,7 @@ export interface EngineOptions {
 
 export interface Layouter {
     defineOptions(): LayoutGroupOptions;
-    sourcesPreprocess?(sources: SourceElement[]): SourceElement[];
+    sourcesPreprocess?(sources: SourceElement[], options: LayoutGroupOptions): SourceElement[];
     defineLeakRule?(elements: Element[]): Element[];
     layout(elements: Element[], layoutOptions: LayoutOptions);
     [key: string]: any;