docs: update arrow demos.

docs/manual/middle/elements/edges/arrow.en.md

@@ -6,7 +6,8 @@ order: 1
 
 No matter built-in edges or [custom edges](/en/docs/manual/advanced/custom-edge), arrows can be assigned to the end or begin position of an edge. There are three kinds of arrows in G6: default arrow, built-in arrow, and custom arrow.
 
-<br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*05otS53ezugAAAAAAAAAAABkARQnAQ' width=250 alt='img'/>
+
+<br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*mGusTo9FcCYAAAAAAAAAAABkARQnAQ' width=250 alt='img'/>
 
 
 ## Default Arrow

docs/manual/middle/elements/edges/arrow.zh.md

@@ -5,7 +5,7 @@ order: 1
 
 无论是内置边还是[自定义边](/zh/docs/manual/advanced/custom-edge)，都可以为其配置起始端箭头与结束端箭头。G6 中的箭头分为默认箭头、内置箭头、自定义箭头。
 
-<br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*05otS53ezugAAAAAAAAAAABkARQnAQ' width=250 alt='img'/>
+<br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*mGusTo9FcCYAAAAAAAAAAABkARQnAQ' width=250 alt='img'/>
 
 
 ## 默认箭头

examples/item/arrows/demo/built-in-arrows.js

@@ -0,0 +1,212 @@
+import G6 from '@antv/g6';
+
+/**
+ * The usage of arrows
+ * by Shiwu
+ */
+
+const data = {
+  nodes: [
+    {
+      id: '0',
+      x: 150,
+      y: 50,
+    },
+    {
+      id: '1',
+      x: 350,
+      y: 50,
+    },
+    {
+      id: '2',
+      x: 150,
+      y: 100,
+    },
+    {
+      id: '3',
+      x: 350,
+      y: 100,
+    },
+    {
+      id: '4',
+      x: 150,
+      y: 150,
+    },
+    {
+      id: '5',
+      x: 350,
+      y: 150,
+    },
+    {
+      id: '6',
+      x: 150,
+      y: 200,
+    },
+    {
+      id: '7',
+      x: 350,
+      y: 200,
+    },
+    {
+      id: '8',
+      x: 150,
+      y: 250,
+    },
+    {
+      id: '9',
+      x: 350,
+      y: 250,
+    },
+    {
+      id: '10',
+      x: 150,
+      y: 300,
+    },
+    {
+      id: '11',
+      x: 350,
+      y: 300,
+    },
+    {
+      id: '12',
+      x: 150,
+      y: 350,
+    },
+    {
+      id: '13',
+      x: 350,
+      y: 350,
+    },
+    {
+      id: '14',
+      x: 150,
+      y: 400,
+    },
+    {
+      id: '15',
+      x: 350,
+      y: 400,
+    },
+  ],
+  edges: [
+    {
+      id: 'edge0',
+      source: '0',
+      target: '1',
+      label: 'default arrow',
+      style: {
+        endArrow: true
+      }
+    },
+    {
+      id: 'edge1',
+      source: '2',
+      target: '3',
+      label: 'triangle arrow',
+      style: {
+        endArrow: {
+          path: G6.Arrow.triangle()
+        }
+      }
+    },
+    {
+      id: 'edge2',
+      source: '4',
+      target: '5',
+      label: 'vee arrow',
+      style: {
+        endArrow: {
+          path: G6.Arrow.vee()
+        }
+      }
+    },
+    {
+      id: 'edge3',
+      source: '6',
+      target: '7',
+      label: 'circle arrow',
+      style: {
+        endArrow: {
+          path: G6.Arrow.circle(5, 3),
+          d: 3
+        }
+      }
+    },
+    {
+      id: 'edge4',
+      source: '8',
+      target: '9',
+      label: 'diamond arrow',
+      style: {
+        endArrow: {
+          path: G6.Arrow.diamond(10, 10, 3),
+          d: 3
+        }
+      }
+    },
+    {
+      id: 'edge5',
+      source: '10',
+      target: '11',
+      label: 'rect arrow',
+      style: {
+        endArrow: {
+          path: G6.Arrow.rect(10, 10, 3),
+          d: 3
+        }
+      }
+    },
+    {
+      id: 'edge6',
+      source: '12',
+      target: '13',
+      label: 'rect arrow 2',
+      style: {
+        endArrow: {
+          path: G6.Arrow.rect(10, 2, 5),
+          d: 5
+        }
+      }
+    },
+    {
+      id: 'edge7',
+      source: '14',
+      target: '15',
+      label: 'triangleRect arrow',
+      style: {
+        endArrow: {
+          path: G6.Arrow.triangleRect(10, 10, 10, 2, 4)
+        }
+      }
+    },
+  ],
+};
+
+const width = document.getElementById('container').scrollWidth;
+const height = document.getElementById('container').scrollHeight || 500;
+data.edges.forEach(edge => {
+  edge.style.stroke = '#F6BD16';
+  console.log(edge.style.endArrow);
+  if (edge.id !== 'edge0') edge.style.endArrow.fill = '#F6BD16';
+});
+const graph = new G6.Graph({
+  container: 'container',
+  width,
+  height,
+  // translate the graph to align the canvas's center, support by v3.5.1
+  fitCenter: true,
+  defaultNode: {
+    size: 15,
+    style: {
+      fill: '#DEE9FF',
+      stroke: '#5B8FF9',
+    },
+  },
+  modes: {
+    // behaviors
+    default: ['drag-node'],
+  },
+});
+
+graph.data(data);
+graph.render();

examples/item/arrows/demo/custom-arrows.js

@@ -0,0 +1,84 @@
+import G6 from '@antv/g6';
+
+/**
+ * The usage of arrows
+ * by Shiwu
+ */
+
+const data = {
+  nodes: [
+    {
+      id: '0',
+      x: 150,
+      y: 50,
+    },
+    {
+      id: '1',
+      x: 350,
+      y: 50,
+    },
+    {
+      id: '2',
+      x: 150,
+      y: 100,
+    },
+    {
+      id: '3',
+      x: 350,
+      y: 100,
+    },
+  ],
+  edges: [
+    {
+      id: 'edge0',
+      source: '0',
+      target: '1',
+      label: 'custom arrow 1',
+      style: {
+        endArrow: {
+          path: 'M 3,-5 L 3,5 L 15,10 L 15,-10 Z',
+        }
+      }
+    },
+    {
+      id: 'edge1',
+      source: '2',
+      target: '3',
+      label: 'custom arrow 2',
+      style: {
+        endArrow: {
+          path: 'M0,0 L10,4 L14,14 L18,4 L28,0 L18,-4 L14,-14 L10,-4 Z',
+        }
+      }
+    },
+  ],
+};
+
+const width = document.getElementById('container').scrollWidth;
+const height = document.getElementById('container').scrollHeight || 500;
+data.edges.forEach(edge => {
+  edge.style.stroke = '#F6BD16';
+  console.log(edge.style.endArrow);
+  edge.style.endArrow.fill = '#F6BD16';
+});
+const graph = new G6.Graph({
+  container: 'container',
+  width,
+  height,
+  // translate the graph to align the canvas's center, support by v3.5.1
+  fitCenter: true,
+  defaultNode: {
+    size: 15,
+    style: {
+      fill: '#DEE9FF',
+      stroke: '#5B8FF9',
+    },
+  },
+  modes: {
+    // behaviors
+    default: ['drag-node'],
+  },
+});
+
+graph.data(data);
+graph.render();

examples/item/arrows/demo/meta.json

@@ -0,0 +1,24 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "built-in-arrows.js",
+      "title": {
+        "zh": "默认和内置箭头",
+        "en": "Default and Built-in Arrows"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*mGusTo9FcCYAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "custom-arrows.js",
+      "title": {
+        "zh": "自定义箭头",
+        "en": "Custom Arrows"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*C2ODRb7E9mwAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/item/arrows/index.en.md

@@ -0,0 +1,10 @@
+---
+title: Arrow of Edge
+order: 3
+---
+
+G6 provids [default arrow and built-in arrows](/en/docs/manual/middle/elements/edges/arrow). If these arrows do not meet your requirements, you can [custom arrow](/en/docs/manual/advanced/custom-edge).
+
+## Usage
+
+Configure the start and end arrows for a built-in or custom edge.

examples/item/arrows/index.zh.md

@@ -0,0 +1,10 @@
+---
+title: 边的箭头
+order: 3
+---
+
+G6 提供了[默认箭头和内置箭头](/zh/docs/manual/middle/elements/edges/arrow)。当这些箭头不满足条件时，可以[自定义箭头](/zh/docs/manual/advanced/custom-edge#4-自定义箭头)。
+
+## 何时使用
+
+为内置边和自定义边配置起始端箭头和结束端箭头。

examples/item/customCombo/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Custom Combo
-order: 5
+order: 6
 ---
 
 The custom combo mechanism in G6 allows users to design their own node by extending the built-in combo types when there are no appropriate built-in nodes for their scenario.

examples/item/customCombo/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 自定义 Combo
-order: 5
+order: 6
 ---
 
 当 G6 的内置 Combo 不能满足需求时，G6 的自定义 Combo 机制允许用户通过扩展内置 Combo 来设计和定制新的节点类型。

examples/item/customEdge/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Custom Edge
-order: 4
+order: 5
 ---
 
 The custom edge mechanism in G6 allows users to design their own edge when there are no appropriate built-in edges for their scenario.

examples/item/customEdge/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 自定义边
-order: 4
+order: 5
 ---
 
 当 G6 的内置边不能满足需求时，G6 的自定义边机制允许用户设计和定制新的边类型。

examples/item/customNode/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Custom Node
-order: 3
+order: 4
 ---
 
 The custom node mechanism in G6 allows users to design their own node when there are no appropriate built-in nodes for their scenario.

examples/item/customNode/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 自定义节点
-order: 3
+order: 4
 ---
 
 当 G6 的内置节点不能满足需求时，G6 的自定义节点机制允许用户设计和定制新的节点类型。

examples/item/label/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Long Label
-order: 6
+order: 7
 ---
 
 Proccess the long label in G6.

examples/item/label/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 超长文本
-order: 6
+order: 7
 ---
 
 G6 中文本的处理。

examples/item/labelBg/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Label Background
-order: 7
+order: 8
 ---
 
 Set the background of the label on Node or Edge.

examples/item/labelBg/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 设置文本背景
-order: 7
+order: 8
 ---
 
 设置 Node 或 Edge label 的背景。

examples/item/multiEdge/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Multiple Edges Between 2 Nodes
-order: 8
+order: 9
 ---
 
 There are more than two edges between 2 end nodes.

examples/item/multiEdge/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 两节点间存在多条边
-order: 8
+order: 9
 ---
 
 两节点间存在多条边的处理。