feat: 修复外部指针文字不跟随指针旋转的问题

src/Model/modelConstructor.ts

@@ -189,7 +189,6 @@ export class ModelConstructor {
             pointerNames = Object.keys(pointerOptions);
 
         pointerNames.forEach(name => {
-            
             for(let i = 0; i < elements.length; i++) {
                 let element = elements[i],
                     pointerData = element[name];

src/Model/modelData.ts

@@ -106,10 +106,6 @@ export class Model {
             return;
         }
 
-        if(this.props[attr] === undefined) {
-            return;
-        }
-
         if(this.props[attr] === value) {
             return;
         }
@@ -129,7 +125,8 @@ export class Model {
             const matrix = Util.calcRotateMatrix(this.getMatrix(), value);
             this.set('style', { matrix });
         }
-        else if(attr === 'x' || attr === 'y') {
+        
+        if(attr === 'x' || attr === 'y') {
             this.G6Item.updatePosition({
                 [attr]: value
             });
@@ -202,7 +199,7 @@ export class Element extends Model {
             y: 0,
             rotation: option.rotation || 0,
             type: option.type,
-            size: option.size,
+            size: option.size || [60, 30],
             anchorPoints: option.anchorPoints,
             label: option.label,
             style: Util.objectClone<Style>(option.style),
@@ -280,7 +277,7 @@ export class Pointer extends Model {
             y: 0,
             rotation: 0,
             type: option.type || 'external-pointer',
-            size: option.size,
+            size: option.size || [8, 45],
             anchorPoints: option.anchorPoints,
             label: typeof this.label === 'string'? this.label: this.label.join(', '),
             style: Util.objectClone<Style>(option.style),

src/RegisteredShape/binaryTreeNode.ts

@@ -3,7 +3,7 @@ import * as G6 from "./../Lib/g6.js";
 
 export default G6.registerNode('binary-tree-node', {
     draw(cfg, group) {
-        cfg.size = cfg.size || [60, 30];
+        cfg.size = cfg.size;
 
         const width = cfg.size[0],
               height = cfg.size[1];

src/RegisteredShape/externalPointer.ts

@@ -3,8 +3,6 @@ import * as G6 from "./../Lib/g6.js";
 
 export default G6.registerNode('external-pointer', {
     draw(cfg, group) {
-        cfg.size = cfg.size || [8, 35];
-
         const keyShape = group.addShape('path', {
             attrs: {
                 path: this.getPath(cfg),
@@ -16,18 +14,34 @@ export default G6.registerNode('external-pointer', {
 
         if (cfg.label) {
             const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
-            group.addShape('text', {
+            const text = group.addShape('text', {
                 attrs: {
-                    x: cfg.size[0] + 2, // 居中
+                    x: 0, 
-                    y: -cfg.size[1],
+                    y: 0,
                     textAlign: 'left',
                     textBaseline: 'middle',
                     text: cfg.label,
                     fill: style.fill || '#000',
-                    fontSize: style.fontSize || 16
+                    fontSize: style.fontSize || 16,
+                    stroke: '#fff',
+                    lineWidth: 6
                 },
                 name: 'pointer-text-shape'
             });
+
+            const { width: textWidth } = text.getBBox();
+
+            // 旋转文字
+            const pointerEndPosition = cfg.pointerEndPosition;
+            if(pointerEndPosition) {
+                let textX = pointerEndPosition[0] - textWidth / 2,
+                    textY = pointerEndPosition[1];
+
+                text.attr({ 
+                    x: textX,
+                    y: textY
+                });
+            }
         }
 
         return keyShape;
@@ -51,5 +65,5 @@ export default G6.registerNode('external-pointer', {
         ];
 
         return path;
-    },
+    }
 });

src/View/layouter.ts

@@ -45,21 +45,34 @@ export class Layouter {
                 targetBound: BoundingRect = target.getBound(),
                 anchorPosition = item.target.G6Item.getAnchorPoints()[anchor],
                 center: [number, number] = [targetBound.x + targetBound.width / 2, targetBound.y + targetBound.height / 2],
-                pointerPosition: [number, number];
+                pointerPosition: [number, number],
+                pointerEndPosition: [number, number];
 
             anchorPosition = [anchorPosition.x, anchorPosition.y];
 
             let anchorVector = Vector.subtract(anchorPosition, center),
-                angle = anchorVector[0] === 0? 0: (Math.PI / 2 - Math.atan(anchorVector[1] / anchorVector[0])),
+                angle = 0,
                 len = Vector.length(anchorVector) + offset;
 
+            if(anchorVector[0] === 0) {
+                angle = anchorVector[1] > 0? -Math.PI: 0;
+            }
+            else {
+                angle = Math.sign(anchorVector[0]) * (Math.PI / 2 - Math.atan(anchorVector[1] / anchorVector[0]));
+            }
+
+            const pointerHeight = item.get('size')[1];
+
             anchorVector = Vector.normalize(anchorVector);
             pointerPosition = Vector.location(center, anchorVector, len);
+            pointerEndPosition = Vector.location(center, anchorVector, pointerHeight + len);
+            pointerEndPosition = Vector.subtract(pointerEndPosition, pointerPosition);
 
             item.set({
                 x: pointerPosition[0],
                 y: pointerPosition[1],
-                rotation: Math.sign(anchorVector[0]) * angle
+                rotation: angle,
+                pointerEndPosition
             });
         });
     }   
@@ -171,9 +184,9 @@ export class Layouter {
             });
         });
 
-        const modelGroupList: Group[] = this.layoutModels(layoutGroupTable),
+        const modelGroupList: Group[] = this.layoutModels(layoutGroupTable);
-              wrapperGroup: Group = this.layoutGroups(container, modelGroupList);
 
+        const wrapperGroup: Group = this.layoutGroups(container, modelGroupList);
         this.fitCenter(container, wrapperGroup);
 
         layoutGroupTable.forEach(item => {