Merge pull request #628 from antvis/daily_0225

fix(edge):fixed bug of link point

src/item/edge.js

@@ -16,7 +16,8 @@ class Edge extends Item {
       sourceNode: null,
       targetNode: null,
       startPoint: null,
-      endPoint: null
+      endPoint: null/* ,
+      linkCenter: false*/ // 参数名暂时没想好，是连接节点的中心，还是直接连接 x,y
     };
   }
 
@@ -62,14 +63,14 @@ class Edge extends Item {
   }
 
   // 获取与端点相交的节点
-  _getLinkPoint(name, model) {
+  _getLinkPoint(name, model, controlPoints) {
     const pointName = END_MAP[name] + POINT_NAME_SUFFIX;
     const itemName = name + ITEM_NAME_SUFFIX;
     let point = this.get(pointName);
     if (!point) {
       const item = this.get(itemName);
       const anchorName = name + ANCHOR_NAME_SUFFIX;
-      const prePoint = this._getPrePoint(name);
+      const prePoint = this._getPrePoint(name, controlPoints);
       const anchorIndex = model[anchorName];
       if (!Util.isNil(anchorIndex)) { // 如果有锚点，则使用锚点索引获取连接点
         point = item.getLinkPointByAnchor(anchorIndex);
@@ -81,8 +82,7 @@ class Edge extends Item {
   }
 
   // 获取同端点进行连接的点，计算交汇点
-  _getPrePoint(name) {
-    const controlPoints = this.get('model').controlPoints;
+  _getPrePoint(name, controlPoints) {
     if (controlPoints && controlPoints.length) {
       const index = name === 'source' ? 0 : controlPoints.length - 1;
       return controlPoints[index];
@@ -91,6 +91,17 @@ class Edge extends Item {
     return this._getEndPoint(oppositeName);
   }
 
+  // 通过端点的中心获取控制点
+  _getControlPointsByCenter(model) {
+    const sourcePoint = this._getEndPoint('source');
+    const targetPoint = this._getEndPoint('target');
+    const shapeFactory = this.get('shapeFactory');
+    return shapeFactory.getControlPoints(model.shape, {
+      startPoint: sourcePoint,
+      endPoint: targetPoint
+    });
+  }
+
   // 获取端点的位置
   _getEndPoint(name) {
     const itemName = name + ITEM_NAME_SUFFIX;
@@ -104,9 +115,10 @@ class Edge extends Item {
   }
 
   getShapeCfg(model) {
+    const controlPoints = model.controlPoints || this._getControlPointsByCenter(model);
     const cfg = {
-      startPoint: this._getLinkPoint('source', model),
-      endPoint: this._getLinkPoint('target', model)
+      startPoint: this._getLinkPoint('source', model, controlPoints),
+      endPoint: this._getLinkPoint('target', model, controlPoints)
     };
     Util.mix(cfg, model);
     return cfg;

src/item/item.js

@@ -5,6 +5,7 @@
 
 const Util = require('../util/');
 const Shape = require('../shape');
+const CACHE_BBOX = 'bboxCache';
 
 class Item {
   constructor(cfg) {
@@ -306,7 +307,8 @@ class Item {
         this.draw();
       }
     }
-    this.afterUpdate();
+    this.set(CACHE_BBOX, null); // 清理缓存的 bbox
+    this.afterUpdate(); // 子类可以清理自己的要清理的内容
   }
 
   /**
@@ -344,7 +346,12 @@ class Item {
    * @return {Object} 包含 x,y,width,height, centerX, centerY
    */
   getBBox() {
-    return this.bbox || this._calculateBBox();
+    let bbox = this.get(CACHE_BBOX);
+    if (!bbox) { // 计算 bbox 开销有些大，缓存
+      bbox = this._calculateBBox();
+      this.set(CACHE_BBOX, bbox);
+    }
+    return bbox;
   }
 
   /**

test/unit/item/edge-spec.js

@@ -245,6 +245,65 @@ describe('edge test, with ellipse', () => {
   });
 });
 
+describe('edge test, with custom controlPoints', () => {
+  let aNode;
+  let bNode;
+  // 延迟绘制节点，避免冲突
+  it('init', () => {
+    aNode = new Node({
+      id: 'a',
+      model: {
+        x: 300,
+        y: 300,
+        size: 20,
+        shape: 'circle'
+      },
+      group: canvas.addGroup()
+    });
+
+    bNode = new Node({
+      id: 'b',
+      model: {
+        x: 400,
+        y: 400,
+        size: 20,
+        shape: 'circle'
+      },
+      group: canvas.addGroup()
+    });
+  });
+  it('quad', () => {
+    const group = canvas.addGroup();
+    const edge = new Edge({
+      model: {
+        shape: 'quadratic'
+      },
+      source: aNode,
+      target: bNode,
+      group
+    });
+    const cfg = edge.getShapeCfg(edge.get('model'));
+    // 如果不使用控制点计算时，两者会相等
+    expect(cfg.startPoint.x).not.eql(cfg.startPoint.y);
+
+  });
+  it('cubic', () => {
+    const group = canvas.addGroup();
+    const edge = new Edge({
+      model: {
+        shape: 'cubic-horizontal'
+      },
+      source: aNode,
+      target: bNode,
+      group
+    });
+    const cfg = edge.getShapeCfg(edge.get('model'));
+    expect(cfg.startPoint).eqls({ x: 310.5, y: 300 });
+    expect(cfg.endPoint).eqls({ x: 389.5, y: 400 });
+    canvas.draw();
+  });
+});
+
 describe('edge test, anchors', () => {
 
   let edge;