fix: conflict

examples/shape/customEdge/demo/customPolyline.js

@@ -0,0 +1,101 @@
+import G6 from '@antv/g6';
+
+/**
+ * 该案例演示如何通过继承line，复写getPath和getShapeStyle方法自定义折线。
+ * by siogo 提供的 issue（https://github.com/antvis/g6/issues/814）
+ *
+ * 如果要适应所有拖动情况，则需要根据拖动的位置来动态改变锚点
+ *
+ */
+
+const data = {
+  nodes: [{
+    id: '7',
+    x: 150,
+    y: 100,
+    size: 40,
+    anchorPoints: [[ 1, 0.5 ], [ 1, 0 ]]
+  }, {
+    id: '8',
+    x: 300,
+    y: 200,
+    size: 40,
+    anchorPoints: [[ 0, 0.5 ], [ 0, 1 ]]
+  }],
+  edges: [{
+    source: '7',
+    target: '8',
+    sourceAnchor: 0,
+    targetAnchor: 0
+  }]
+};
+
+const graph = new G6.Graph({
+  container: 'container',
+  width: 500,
+  height: 500,
+  modes: {
+    // 支持的 behavior
+    default: [ 'drag-node', 'drag-canvas' ]
+  },
+  defaultNode: {
+    shape: 'circle',
+    style: {
+      fill: '#40a9ff'
+    },
+    linkPoints: {
+      left: true,
+      right: true,
+      fill: '#fff',
+      size: 3
+    }
+  },
+  defaultEdge: {
+    shape: 'line-arrow',
+    style: {
+      stroke: '#bae7ff'
+    }
+  }
+});
+
+G6.registerEdge('line-arrow', {
+  getPath(points) {
+    const startPoint = points[0];
+    const endPoint = points[1];
+    return [
+      [ 'M', startPoint.x, startPoint.y ],
+      [ 'L', endPoint.x / 3 + 2 / 3 * startPoint.x, startPoint.y ],
+      [ 'L', endPoint.x / 3 + 2 / 3 * startPoint.x, endPoint.y ],
+      [ 'L', endPoint.x, endPoint.y ]];
+  },
+  getShapeStyle(cfg) {
+    const startPoint = cfg.startPoint;
+    const endPoint = cfg.endPoint;
+    const controlPoints = this.getControlPoints(cfg);
+    let points = [ startPoint ]; // 添加起始点
+    // 添加控制点
+    if (controlPoints) {
+      points = points.concat(controlPoints);
+    }
+    // 添加结束点
+    points.push(endPoint);
+    const path = this.getPath(points);
+    const style = G6.Util.mix({}, G6.Global.defaultEdge.style, {
+      stroke: '#BBB',
+      lineWidth: 1,
+      path,
+      startArrow: {
+        path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z',
+        d: 6
+      },
+      endArrow: {
+        path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z',
+        d: 6
+      }
+    }, cfg.style);
+    return style;
+  }
+}, 'line');
+
+graph.data(data);
+graph.render();

examples/shape/customEdge/demo/customPolyline2.js

@@ -0,0 +1,92 @@
+import G6 from '@antv/g6';
+
+/**
+ * 该案例演示如何通过复写复写draw方法自定义折线。
+ * by siogo 提供的 issue（https://github.com/antvis/g6/issues/814）
+ *
+ * 如果要适应所有拖动情况，则需要根据拖动的位置来动态改变锚点
+ */
+G6.registerEdge('line-arrow', {
+  options: {
+    style: {
+      stroke: '#ccc'
+    }
+  },
+  draw: function draw(cfg, group) {
+    const startPoint = cfg.startPoint;
+    const endPoint = cfg.endPoint;
+
+    const stroke = cfg.style && cfg.style.stroke || this.options.style.stroke;
+
+    const keyShape = group.addShape('path', {
+      attrs: {
+        path: [[ 'M', startPoint.x, startPoint.y ], [ 'L', endPoint.x / 3 + 2 / 3 * startPoint.x, startPoint.y ], [ 'L', endPoint.x / 3 + 2 / 3 * startPoint.x, endPoint.y ], [ 'L', endPoint.x, endPoint.y ]],
+        stroke,
+        lineWidth: 1,
+        startArrow: {
+          path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z',
+          d: 6
+        },
+        endArrow: {
+          path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z',
+          d: 6
+        },
+        className: 'edge-shape'
+      }
+    });
+    return keyShape;
+  }
+});
+
+const data = {
+  nodes: [{
+    id: '7',
+    x: 150,
+    y: 100,
+    size: 40,
+    anchorPoints: [[ 1, 0.5 ], [ 1, 0 ]]
+  }, {
+    id: '8',
+    x: 300,
+    y: 200,
+    size: 40,
+    anchorPoints: [[ 0, 0.5 ], [ 0, 1 ]]
+  }],
+  edges: [{
+    source: '7',
+    target: '8',
+    sourceAnchor: 0,
+    targetAnchor: 0
+  }]
+};
+
+const graph = new G6.Graph({
+  container: 'container',
+  width: 500,
+  height: 300,
+  modes: {
+    // 支持的 behavior
+    default: [ 'drag-node', 'drag-canvas' ]
+  },
+  defaultNode: {
+    shape: 'circle',
+    style: {
+      fill: '#40a9ff'
+    },
+    linkPoints: {
+      left: true,
+      right: true,
+      fill: '#fff',
+      size: 3
+    }
+  },
+  defaultEdge: {
+    shape: 'line-arrow',
+    style: {
+      stroke: '#bae7ff'
+    }
+  }
+});
+
+graph.data(data);
+graph.render();

examples/shape/customEdge/demo/edgeMulLabel.js

@@ -0,0 +1,115 @@
+import G6 from '@antv/g6';
+
+/**
+ * 自定义边示例
+ * 演示自定义边上绘制多个label
+ * by 长哲
+ */
+
+// 注册自定义边
+G6.registerEdge('multipleLabelsEdge', {
+  options: {
+    style: {
+      stroke: '#000'
+    }
+  },
+  labelAutoRotate: true,
+  draw(cfg, group) {
+    const startPoint = cfg.startPoint,
+      endPoint = cfg.endPoint;
+    const stroke = cfg.style && cfg.style.stroke || this.options.style.stroke;
+
+    const shape = group.addShape('path', {
+      attrs: {
+        stroke,
+        path: [
+          [ 'M', startPoint.x, startPoint.y ],
+          [ 'L', endPoint.x, endPoint.y ]]
+      }
+    });
+    if (cfg.label && cfg.label.length) {
+      // 绘制左边的label
+      group.addShape('text', {
+        attrs: {
+          text: cfg.label[0],
+          fill: '#595959',
+          textAlign: 'start',
+          textBaseline: 'middle',
+          x: startPoint.x,
+          y: startPoint.y - 10
+        }
+      });
+      if (cfg.label.length > 1) {
+        // 绘制右边的label
+        group.addShape('text', {
+          attrs: {
+            text: cfg.label[1],
+            fill: '#595959',
+            textAlign: 'end',
+            textBaseline: 'middle',
+            x: endPoint.x,
+            y: endPoint.y - 10
+          }
+        });
+      }
+    }
+    // 返回边的keyShape
+    return shape;
+  }
+});
+
+const data = {
+  nodes: [{
+    id: 'node1',
+    x: 100,
+    y: 100,
+    label: 'node1'
+  }, {
+    id: 'node2',
+    x: 300,
+    y: 100,
+    label: 'node2'
+  }],
+  edges: [{
+    source: 'node1',
+    target: 'node2',
+    // 定义边左侧和右侧的label
+    label: [ 'hello', 'world' ]
+  }]
+};
+
+const graph = new G6.Graph({
+  container: 'container',
+  width: 500,
+  height: 500,
+  modes: {
+    default: [{
+      type: 'drag-node',
+      delegate: false
+    }, 'drag-canvas', {
+      type: 'zoom-canvas',
+      sensitivity: 0.5
+    }]
+  },
+  defaultNode: {
+    shape: 'circle',
+    size: [ 50 ],
+    style: {
+      fill: '#40a9ff'
+    },
+    linkPoints: {
+      left: true,
+      right: true,
+      fill: '#fff',
+      size: 3
+    }
+  },
+  defaultEdge: {
+    shape: 'multipleLabelsEdge',
+    style: {
+      stroke: '#bae7ff'
+    }
+  }
+});
+graph.data(data);
+graph.render();

examples/shape/customEdge/demo/meta.json

@@ -0,0 +1,23 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "customPolyline.js",
+      "title": "折线图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*xrz9QLtS3-IAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "customPolyline2.js",
+      "title": "折线图2",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*xrz9QLtS3-IAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "edgeMulLabel.js",
+      "title": "边上多label",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*xrz9QLtS3-IAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/shape/customEdge/index.zh.md

@@ -0,0 +1,17 @@
+---
+title: 自定义边
+order: 3
+redirect_from:
+  - /zh/examples
+---
+
+自定义边。
+
+## 何时使用
+
+内置的边不能满足需求时，可以使用自定义边来实现。
+两种自定义折线的区别，主要在于实现方式不同。
+- 第一种方式是通过继承line，复写getPath和getShapeStyle方法自定义折线；
+- 第二种方式是通过复写复写draw方法自定义折线。
+
+如果在拖动过程中，需要让边链接到节点正确的问题，则需要动态改变节点的锚点。对于折线，建议使用 G6 内置的 `polyline` ，内置的 `polyline` 会自动处理锚点的位置。

examples/shape/defaultEdges/demo/arc.js

@@ -0,0 +1,70 @@
+import G6 from '@antv/g6';
+
+/**
+ * 该案例演示如何使用内置折线 arc
+ * by 十吾
+ */
+
+const data = {
+  nodes: [{
+    id: '0',
+    x: 150,
+    y: 50
+  }, {
+    id: '1',
+    x: 350,
+    y: 250
+  }],
+  edges: [
+// 内置弧线
+    {
+      id: 'edge0',
+      source: '0',
+      target: '1',
+      label: 'curveOffset = 20',
+      curveOffset: 20
+    },
+// 配置内置折线的弯折弧度、端点最小距离
+    {
+      id: 'edge1',
+      source: '0',
+      target: '1',
+      label: 'curveOffset = 50',
+      curveOffset: 50
+    },
+// // 带有 controlPoints，则按照给定控制点弯折
+    {
+      id: 'edge2',
+      source: '0',
+      target: '1',
+      label: 'curveOffset = -50',
+      curveOffset: -50
+    }]
+};
+
+const graph = new G6.Graph({
+  container: 'container',
+  width: 500,
+  height: 500,
+  linkCenter: true,
+  defaultNode: {
+    size: 45
+  },
+  defaultEdge: {
+    shape: 'arc',
+    style: {
+      stroke: '#bae7ff'
+    },
+    labelCfg: {
+      autoRotate: true,
+      refY: -10
+    }
+  },
+  modes: {
+    // 支持的 behavior
+    default: [ 'drag-node' ]
+  }
+});
+
+graph.data(data);
+graph.render();

examples/shape/defaultEdges/demo/cubic1.js

@@ -0,0 +1,75 @@
+import G6 from '@antv/g6';
+
+/**
+ * 演示贝塞尔曲线的用法
+ *
+ *  **/
+
+G6.registerNode('my-rect', {
+  getAnchorPoints: function getAnchorPoints() {
+    return [[ 0.5, 0 ], [ 0.5, 1 ]];
+  }
+}, 'rect');
+
+const data = {
+  nodes: [{
+    id: 'node0',
+    x: 200,
+    y: 10,
+    size: 20
+  }, {
+    id: 'node1',
+    x: 200,
+    y: 50,
+    label: '1222',
+    shape: 'my-rect'
+  }, {
+    id: 'node2',
+    x: 150,
+    y: 150,
+    shape: 'my-rect'
+  }, {
+    id: 'node3',
+    x: 250,
+    y: 150,
+    shape: 'my-rect'
+  }, {
+    id: 'node4',
+    x: 200,
+    y: 250,
+    shape: 'my-rect'
+  }],
+  edges: [{
+    source: 'node0',
+    target: 'node1'
+  }, {
+    source: 'node1',
+    target: 'node2'
+  }, {
+    source: 'node1',
+    target: 'node3'
+  }, {
+    source: 'node2',
+    target: 'node4'
+  }, {
+    source: 'node3',
+    target: 'node4'
+  }]
+};
+
+const graph = new G6.Graph({
+  container: 'container',
+  width: 500,
+  height: 500,
+  modes: {
+    default: [ 'drag-canvas' ]
+  },
+  defaultEdge: {
+    shape: 'cubic-vertical',
+    style: {
+      stroke: '#bae7ff'
+    }
+  }
+});
+graph.data(data);
+graph.render();

examples/shape/defaultEdges/demo/cubic2.js

@@ -0,0 +1,53 @@
+import G6 from '@antv/g6';
+
+/**
+ * 演示贝塞尔曲线的用法
+ *
+ *  **/
+const data = {
+  nodes: [{
+    id: 'node5',
+    x: 150,
+    y: 200,
+    label: '5',
+    anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]]
+  }, {
+    id: 'node6',
+    x: 300,
+    y: 150,
+    label: '6',
+    anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]]
+  }, {
+    id: 'node7',
+    x: 300,
+    y: 250,
+    label: '7',
+    anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]]
+  }],
+  edges: [{
+    source: 'node5',
+    target: 'node6',
+    shape: 'cubic-horizontal'
+  }, {
+    source: 'node5',
+    target: 'node7',
+    shape: 'cubic-horizontal'
+  }]
+};
+
+const graph = new G6.Graph({
+  container: 'container',
+  width: 500,
+  height: 500,
+  modes: {
+    default: [ 'drag-canvas' ]
+  },
+  defaultEdge: {
+    shape: 'cubic-horizontal',
+    style: {
+      stroke: '#bae7ff'
+    }
+  }
+});
+graph.data(data);
+graph.render();

examples/shape/defaultEdges/demo/loop.js

@@ -0,0 +1,51 @@
+import G6 from '@antv/g6';
+
+const data = {
+  nodes: [{
+    id: '0',
+    x: 150,
+    y: 150
+  }, {
+    id: '1',
+    x: 350,
+    y: 150
+  }],
+  edges: [
+  // 内置 loop
+    {
+      source: '0',
+      target: '0'
+    },
+    {
+      source: '1',
+      target: '1'
+    }
+  ]
+};
+
+const graph = new G6.Graph({
+  container: 'container',
+  width: 500,
+  height: 500,
+  defaultEdge: {
+    shape: 'loop',
+    style: {
+      stroke: '#bae7ff',
+      endArrow: {
+        path: 'M 10,0 L -10,-10 L -10,10 Z',
+        d: 10
+      }
+    },
+    // 更多关于 loop 的配置请参考http://antv.alipay.com/zh/docs/manual/middle/elements/edges/loop/#%E8%87%AA%E7%8E%AF%E7%89%B9%E6%AE%8A%E9%85%8D%E7%BD%AE-loopcfg
+    loopCfg: {
+      position: 'top'
+    }
+  },
+  modes: {
+      // 支持的 behavior
+    default: [ 'drag-node' ]
+  }
+});
+
+graph.data(data);
+graph.render();

examples/shape/defaultEdges/demo/meta.json

@@ -0,0 +1,44 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "polyline1.js",
+      "title": "折线图1",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*o3pVSY_kwjQAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "polyline2.js",
+      "title": "折线图2",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*t2daQ7LuDRYAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "polyline3.js",
+      "title": "折线图3",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*kalOTZVOah4AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "cubic1.js",
+      "title": "三次贝塞尔曲线-垂直",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*E1n9QbVczJ0AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "cubic2.js",
+      "title": "三次贝塞尔曲线-水平",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*2IDXQ7JSRU0AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "arc.js",
+      "title": "弧线",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*U6DRTLE9EFIAAAAAAAAAAABkARQnAQ"
+    }
+    ,
+    {
+      "filename": "loop.js",
+      "title": "自环边",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ln_wQqOV118AAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/shape/defaultEdges/demo/polyline1.js

@@ -0,0 +1,43 @@
+import G6 from '@antv/g6';
+
+/**
+   * 该案例演示如何使用内置折线 polyline。
+   * by 十吾
+   */
+
+const data = {
+  nodes: [{
+    id: '0',
+    x: 150,
+    y: 100
+  }, {
+    id: '1',
+    x: 350,
+    y: 300
+  }],
+  edges: [
+  // 内置折线
+    {
+      source: '0',
+      target: '1'
+    }]
+};
+
+const graph = new G6.Graph({
+  container: 'container',
+  width: 500,
+  height: 500,
+  defaultEdge: {
+    shape: 'polyline',
+    style: {
+      stroke: '#bae7ff'
+    }
+  },
+  modes: {
+      // 支持的 behavior
+    default: [ 'drag-node' ]
+  }
+});
+
+graph.data(data);
+graph.render();

examples/shape/defaultEdges/demo/polyline2.js

@@ -0,0 +1,46 @@
+import G6 from '@antv/g6';
+
+/**
+   * 该案例演示如何使用内置折线 polyline。
+   * by 十吾
+   */
+
+const data = {
+  nodes: [{
+    id: '2',
+    x: 150,
+    y: 150
+  }, {
+    id: '3',
+    x: 350,
+    y: 250
+  }],
+  edges: [
+  // 配置内置折线的弯折弧度、端点最小距离
+    {
+      source: '2',
+      target: '3'
+    }]
+};
+
+const graph = new G6.Graph({
+  container: 'container',
+  width: 500,
+  height: 500,
+  defaultEdge: {
+    shape: 'polyline',
+    style: {
+      radius: 10,
+      offset: 30,
+      endArrow: true,
+      stroke: '#bae7ff'
+    }
+  },
+  modes: {
+      // 支持的 behavior
+    default: [ 'drag-node' ]
+  }
+});
+
+graph.data(data);
+graph.render();

examples/shape/defaultEdges/demo/polyline3.js

@@ -0,0 +1,59 @@
+import G6 from '@antv/g6';
+
+/**
+   * 该案例演示如何使用内置折线 polyline。
+   * by 十吾
+   */
+
+const data = {
+  nodes: [{
+    id: '4',
+    x: 150,
+    y: 100
+  }, {
+    id: '5',
+    x: 350,
+    y: 250
+  }],
+  edges: [
+  // 带有 controlPoints，则按照给定控制点弯折
+    {
+      source: '4',
+      target: '5',
+      controlPoints: [{
+        x: 260,
+        y: 80
+      }, {
+        x: 320,
+        y: 50
+      }, {
+        x: 390,
+        y: 110
+      }, {
+        x: 420,
+        y: 110
+      }, {
+        x: 420,
+        y: 140
+      }]
+    }]
+};
+
+const graph = new G6.Graph({
+  container: 'container',
+  width: 500,
+  height: 500,
+  defaultEdge: {
+    shape: 'polyline',
+    style: {
+      stroke: '#bae7ff'
+    }
+  },
+  modes: {
+      // 支持的 behavior
+    default: [ 'drag-node' ]
+  }
+});
+
+graph.data(data);
+graph.render();

examples/shape/defaultEdges/index.zh.md

@@ -5,8 +5,8 @@ redirect_from:
   - /zh/examples
 ---
 
-图表的基本描述。
+G6 内置的边类型。
 
 ## 何时使用
 
-何时使用何时使用何时使用何时使用何时使用何时使用何时使用何时使用何时使用。
+G6 内置了直线、折线、自环等多种边类型，具体的可参考[《 G6 内置的边》](/zh/docs/manual/middle/elements/defaultEdge)，这里只演示了配置起来稍微麻烦的几种类型：`polyline`、`cubic`、`arc` 和 `loop`。

package.json

@@ -36,7 +36,7 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@antv/gatsby-theme-antv": "^0.9.32",
+    "@antv/gatsby-theme-antv": "^0.9.41",
     "@antv/torch": "^1.0.5",
     "@babel/cli": "^7.0.0",
     "@babel/core": "^7.0.0",