Merge pull request #630 from antvis/daily_0226

Daily 0226

src/graph/controller/item.js

@@ -29,6 +29,7 @@ class ItemController {
         model,
         source,
         target,
+        linkCenter: graph.get('linkCenter'),
         group: parent.addGroup()
       });
     } else {

src/graph/graph.js

@@ -103,7 +103,12 @@ class Graph extends EventEmitter {
        * all the instances indexed by id
        * @type object
        */
-      itemMap: {}
+      itemMap: {},
+      /**
+       * 边直接连接到节点的中心，不再考虑锚点
+       * @type {Boolean}
+       */
+      linkCenter: false
     };
   }
 

src/item/edge.js

@@ -16,8 +16,8 @@ class Edge extends Item {
       sourceNode: null,
       targetNode: null,
       startPoint: null,
-      endPoint: null/* ,
-      linkCenter: false*/ // 参数名暂时没想好，是连接节点的中心，还是直接连接 x,y
+      endPoint: null,
+      linkCenter: false // 参数名暂时没想好，是连接节点的中心，还是直接连接 x,y
     };
   }
 
@@ -114,12 +114,32 @@ class Edge extends Item {
     return this.get(pointName);
   }
 
+  _getEndCenter(name) {
+    const itemName = name + ITEM_NAME_SUFFIX;
+    const pointName = END_MAP[name] + POINT_NAME_SUFFIX;
+    const item = this.get(itemName);
+      // 如果有端点，直接使用 model
+    if (item) {
+      const bbox = item.getBBox();
+      return {
+        x: bbox.centerX,
+        y: bbox.centerY
+      };
+    }  // 否则直接使用点
+    return this.get(pointName);
+  }
+
   getShapeCfg(model) {
-    const controlPoints = model.controlPoints || this._getControlPointsByCenter(model);
-    const cfg = {
-      startPoint: this._getLinkPoint('source', model, controlPoints),
-      endPoint: this._getLinkPoint('target', model, controlPoints)
-    };
+    const linkCenter = this.get('linkCenter'); // 如果连接到中心，忽视锚点、忽视控制点
+    const cfg = {};
+    if (linkCenter) {
+      cfg.startPoint = this._getEndCenter('source');
+      cfg.endPoint = this._getEndCenter('target');
+    } else {
+      const controlPoints = model.controlPoints || this._getControlPointsByCenter(model);
+      cfg.startPoint = this._getLinkPoint('source', model, controlPoints);
+      cfg.endPoint = this._getLinkPoint('target', model, controlPoints);
+    }
     Util.mix(cfg, model);
     return cfg;
   }

test/unit/graph/graph-spec.js

@@ -241,4 +241,42 @@ describe('graph', () => {
     expect(point.x).to.equal(bbox.left + 200);
     expect(point.y).to.equal(bbox.top + 200);
   });
+  it('clear', () => {
+    graph.destroy();
+    expect(graph.destroyed).eql(true);
+  });
+});
+
+describe('all node link center', () => {
+  const graph = new G6.Graph({
+    container: div,
+    width: 500,
+    height: 500,
+    pixelRatio: 2,
+    linkCenter: true
+  });
+  it('init', () => {
+    expect(graph.get('linkCenter')).equal(true);
+    graph.data({
+      nodes: [{
+        id: '1',
+        x: 10,
+        y: 10
+      }, {
+        id: '2',
+        x: 100,
+        y: 100
+      }],
+      edges: [
+        { id: 'e1', source: '1', target: '2' }
+      ]
+    });
+    graph.render();
+    const edge = graph.findById('e1');
+    expect(edge.get('keyShape').attr('path')).eqls([[ 'M', 10, 10 ], [ 'L', 100, 100 ]]);
+  });
+  it('clear', () => {
+    graph.destroy();
+    expect(graph.destroyed).eql(true);
+  });
 });

test/unit/item/edge-spec.js

@@ -239,9 +239,87 @@ describe('edge test, with ellipse', () => {
     expect(shape.attr('path')[0]).eqls([ 'M', intersectPoint.x, intersectPoint.y ]);
     canvas.draw();
   });
+});
 
-  it('clear', () => {
+describe('edge test, direct link', () => {
+  const aNode = new Node({
+    id: 'a',
+    model: {
+      x: 150,
+      y: 150,
+      size: [ 20, 40 ],
+      shape: 'ellipse',
+      style: {
+        fill: 'white'
+      }
+    },
+    group: canvas.addGroup()
+  });
 
+  const bNode = new Node({
+    id: 'b',
+    model: {
+      x: 250,
+      y: 250,
+      size: [ 20, 40 ],
+      shape: 'circle'
+    },
+    group: canvas.addGroup()
+  });
+
+  it('line', () => {
+    const group = canvas.addGroup();
+    const edge = new Edge({
+      model: {
+
+      },
+      source: aNode,
+      target: bNode,
+      linkCenter: true,
+      group
+    });
+    const shape = edge.get('keyShape');
+    const path = shape.attr('path');
+    expect(path[0]).eqls([ 'M', 150, 150 ]);
+    expect(path[1]).eqls([ 'L', 250, 250 ]);
+    edge.destroy();
+    canvas.draw();
+  });
+  it('quad', () => {
+    const edge = new Edge({
+      model: {
+        shape: 'quadratic'
+      },
+      source: aNode,
+      target: bNode,
+      linkCenter: true,
+      group: canvas.addGroup()
+    });
+
+    const shape = edge.get('keyShape');
+    const path = shape.attr('path');
+    expect(path[0][1]).eqls(150);
+    expect(path[0][2]).eqls(150);
+    expect(path[1][3]).eql(250);
+    expect(path[1][4]).eql(250);
+    canvas.draw();
+  });
+  it('point', () => {
+    const group = canvas.addGroup();
+    const edge = new Edge({
+      model: {
+
+      },
+      source: { x: 10, y: 20 },
+      target: { x: 120, y: 40 },
+      linkCenter: true,
+      group
+    });
+    const shape = edge.get('keyShape');
+    const path = shape.attr('path');
+    expect(path[0]).eqls([ 'M', 10, 20 ]);
+    expect(path[1]).eqls([ 'L', 120, 40 ]);
+    edge.destroy();
   });
 });