feat:add poly and loop edge demos

packages/graphin/docs/render/element/demos/edge-default.tsx

@@ -1,97 +1,64 @@
-import React, { useEffect } from 'react';
-import Graphin, { Utils, Behaviors, GraphinContext } from '@antv/graphin';
+import React from 'react';
+import Graphin, { Utils } from '@antv/graphin';
 
-const { ZoomCanvas } = Behaviors;
+const nodes = [
+  {
+    id: 'node-0',
+    x: 100,
+    y: 200,
+  },
+  {
+    id: 'node-1',
+    x: 600,
+    y: 200,
+  },
+];
 
-const EventCenter = () => {
-  const { graph } = React.useContext(GraphinContext);
-  useEffect(() => {
-    // graph.on('edge:mouseenter', evt => {
-    //   graph.setItemState(evt.item, 'selected', true);
-    // });
-
-    // graph.on('edge:mouseleave', evt => {
-    //   graph.setItemState(evt.item, 'selected', false);
-    // });
-
-    graph.on('edge:click', evt => {
-      graph.setItemState(evt.item, 'selected', true);
-      graph.updateItem(evt.item, {
-        keyshape: {
-          lineWidth: 15,
-          stroke: 'red',
-        },
-      });
-    });
-  }, []);
-
-  return null;
-};
-
-const data = Utils.mock(10)
-  .circle()
-  .graphin();
 const layout = {
-  type: 'circular',
+  type: 'preset',
 };
 
-// const edgeStateStyles = {
-//   status: {
-//     selected: {
-//       stroke: 'red',
-//       animation: {
-//         repeat: true,
-//       },
-//     },
-//   },
-// };
+const edges1 = Array.from({ length: 5 }).map(() => {
+  return {
+    source: 'node-0',
+    target: 'node-1',
+  };
+});
+
+const edges2 = Array.from({ length: 6 }).map(() => {
+  return {
+    source: 'node-1',
+    target: 'node-0',
+  };
+});
 
-// const defaultEdge = {
-//   type: 'graphin-edge',
-//   style: {
-//     keyshape: {
-//       stroke: '#000',
-//       lineWidth: 2,
-//     },
-//     status: {
-//       selected: {
-//         halo: {
-//           visible: true,
-//         },
-//         keyshape: {
-//           stroke: '#1890ff',
-//           opacity: 1,
-//         },
-//       },
-//       hover: {
-//         halo: {
-//           visible: true,
-//         },
-//       },
-//     },
-//   },
-// };
+const edgesLoop1 = Array.from({ length: 2 }).map(() => {
+  return {
+    source: 'node-0',
+    target: 'node-0',
+  };
+});
+const edgesLoop2 = Array.from({ length: 3 }).map(() => {
+  return {
+    source: 'node-1',
+    target: 'node-1',
+  };
+});
 
-data.edges.forEach(edge => {
-  edge.type = 'graphin-edge';
-  edge.style = {
-    label: {
-      value: `${edge.source} - ${edge.target} `,
-    },
+const edges = Utils.processEdges([...edges1, ...edges2, ...edgesLoop1, ...edgesLoop2], { poly: 50, loop: 10 });
+edges.forEach((edge, index) => {
+  const { source, target } = edge;
+  edge.style.label = {
+    value: `${index}th:${source}-${target}`,
   };
 });
+
+const data = { nodes, edges };
+
 export default () => {
   return (
     <div>
-      <Graphin
-        data={data}
-        layout={layout}
-        // defaultEdge={defaultEdge}
-        // edgeStateStyles={edgeStateStyles}
-      >
-        <ZoomCanvas />
-        <EventCenter />
-      </Graphin>
+      <Graphin data={data} layout={layout} fitView />
     </div>
   );
 };

packages/graphin/docs/render/element/edge.md

@@ -1,5 +1,6 @@
 ---
 title: 边的样式
+order: 3
 group:
   path: /render
 nav:
@@ -20,6 +21,19 @@ Graphin 官网内置了 边类型`graphin-line`.作为默认的边类型，你
 
 <code src='./demos/edge.tsx'>
 
-## 02.`graphin-line` 样式接口文档
+## 02.使用工具快速处理多边
+
+Graphin 内置了 `Utils.processEdges` 方法，专门处理多边的情况，无论是同方向还是反方向边，亦或是自环边，通过该工具函数都能快速处理
+
+<code src='./demos/edge-default.tsx'>
+
+### API: Graphin.Utils.processEdges(params1,params2)
+
+| 函数参数 | 说明       | 类型                        | 默认值              |
+| -------- | ---------- | --------------------------- | ------------------- |
+| params1  | 边的集合   | `GraphinData['edges']`      | -                   |
+| params2  | 多边配置项 | `{poly:number,loop:number}` | `{poly:50,loop:10}` |
+
+## 03.`graphin-line` 样式接口文档
 
 <API   src='../../interface/edge-style.ts'>

packages/graphin/docs/render/element/node.md

@@ -1,7 +1,9 @@
 ---
 title: 节点样式
+order: 2
 group:
   path: /render
+
 nav:
   title: Graphin
   path: /graphin