Merge pull request #640 from antvis/daily-190307

chore(edge): adjust default curve control points

demos/tree-graph.html

@@ -67,26 +67,19 @@
   const data = {
     isRoot: true,
     id: 'Root',
+    style: {
+      fill: 'red'
+    },
     children: [
       {
         id: 'SubTreeNode1',
+        raw: {},
         children: [
           {
             id: 'SubTreeNode1.1'
           },
           {
-            id: 'SubTreeNode1.2'
-          }
-        ]
-      },
-      {
-        id: 'SubTreeNode2',
-        children: [
-          {
-            id: 'SubTreeNode2.1'
-          },
-          {
-            id: 'SubTreeNode2.2',
+            id: 'SubTreeNode1.2',
             children: [
               {
                 id: 'SubTreeNode1.2.1'
@@ -100,6 +93,17 @@
             ]
           }
         ]
+      },
+      {
+        id: 'SubTreeNode2',
+        children: [
+          {
+            id: 'SubTreeNode2.1'
+          },
+          {
+            id: 'SubTreeNode2.2'
+          }
+        ]
       }, {
         id: 'SubTreeNode3'
       }, {
@@ -132,8 +136,16 @@
       }
     ]
   };
+  G6.Global.defaultNode.size = 16;
   graph.data(data);
   graph.render();
+  graph.getNodes().forEach(node => {
+    node.get('model').anchorPoints = [[0,0.5], [1,0.5]];
+  });
+  graph.getEdges().forEach((edge) => {
+    edge.get('model').shape = 'cubic-horizontal';
+  });
+  graph.refresh();
   graph.fitView();
   graph.getNodes().forEach((node) => {
     node.get('model').anchorPoints = [ [0, 0.5], [1, 0.5] ];

src/behavior/collapse-expand.js

@@ -24,6 +24,11 @@ module.exports = {
   },
   onNodeClick(e) {
     const item = e.item;
+    const children = item.get('model').children;
+    // 叶子节点的收缩和展开没有意义
+    if (!children || children.length === 0) {
+      return;
+    }
     const collapsed = !item.hasState('collapsed');
     if (!this.shouldBegin(e, collapsed)) {
       return;
@@ -33,6 +38,7 @@ module.exports = {
     if (!this.shouldUpdate(e, collapsed)) {
       return;
     }
+
     const autoPaint = this.graph.get('autoPaint');
     this.graph.setAutoPaint(false);
     this.updateLayout(item, collapsed);

src/shape/edge.js

@@ -93,6 +93,13 @@ const singleEdgeDefinition = Util.mix({}, SingleShapeMixin, {
       pointPercent = 0.5;
     }
     const point = pathShape.getPoint(pointPercent);
+    const { refX, refY } = labelCfg; // 默认的偏移量
+    // 如果两个节点重叠，线就变成了一个点，这时候label的位置，就是这个点 + 绝对偏移
+    if (cfg.startPoint.x === cfg.endPoint.x && cfg.startPoint.y === cfg.endPoint.y) {
+      style.x = cfg.startPoint.x + refX ? refX : 0;
+      style.y = cfg.endPoint.y + refY ? refY : 0;
+      return style;
+    }
     let firstPoint;
     let nextPoint;
     if (pointPercent === 1) {
@@ -105,7 +112,6 @@ const singleEdgeDefinition = Util.mix({}, SingleShapeMixin, {
     const autoRotate = Util.isNil(labelCfg.autoRotate) ? this.labelAutoRotate : labelCfg.autoRotate;
     const tangent = [];
     vec2.normalize(tangent, [ nextPoint.x - firstPoint.x, nextPoint.y - firstPoint.y ]); // 求切线
-    const { refX, refY } = labelCfg; // 默认的偏移量
     if (refX || refY) { // 进行偏移时，求偏移向量
       const offset = this._getOffset(refX, refY, tangent);
       style.x = point.x + offset[0];
@@ -235,7 +241,7 @@ Shape.registerEdge('quadratic', {
 }, 'single-line');
 
 Shape.registerEdge('cubic', {
-  curvePosition: [ 1 / 3, 2 / 3 ],
+  curvePosition: [ 1 / 2, 1 / 2 ],
   curveOffset: [ -20, 20 ],
   getControlPoints(cfg) {
     let controlPoints = cfg.controlPoints; // 指定controlPoints
@@ -257,7 +263,7 @@ Shape.registerEdge('cubic', {
 
 // 垂直方向的三阶贝塞尔曲线，不再考虑用户外部传入的控制点
 Shape.registerEdge('cubic-vertical', {
-  curvePosition: [ 1 / 3, 2 / 3 ],
+  curvePosition: [ 1 / 2, 1 / 2 ],
   getControlPoints(cfg) {
     const { startPoint, endPoint } = cfg;
     const innerPoint1 = {
@@ -275,7 +281,7 @@ Shape.registerEdge('cubic-vertical', {
 
 // 水平方向的三阶贝塞尔曲线，不再考虑用户外部传入的控制点
 Shape.registerEdge('cubic-horizontal', {
-  curvePosition: [ 1 / 3, 2 / 3 ],
+  curvePosition: [ 1 / 2, 1 / 2 ],
   getControlPoints(cfg) {
     const { startPoint, endPoint } = cfg;
     const innerPoint1 = {

test/unit/shape/edge-spec.js

@@ -196,7 +196,7 @@ describe('shape edge test', () => {
         color: 'red'
       }, group);
 
-      expect(shape.attr('path')[1]).eql([ 'C', 0, 50, 150, 100, 150, 150 ]);
+      expect(shape.attr('path')[1]).eql([ 'C', 0, 75, 150, 75, 150, 150 ]);
       canvas.draw();
     });
 
@@ -208,7 +208,7 @@ describe('shape edge test', () => {
         color: 'red'
       }, group);
 
-      expect(shape.attr('path')[1]).eql([ 'C', 50, 0, 100, 150, 150, 150 ]);
+      expect(shape.attr('path')[1]).eql([ 'C', 75, 0, 75, 150, 150, 150 ]);
       canvas.draw();
     });