Merge pull request #192 from antvis/sprint-0111

feat: add graphin-line edge

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

@@ -0,0 +1,59 @@
+import React, { useEffect } from 'react';
+import Graphin, { Utils, Behaviors, GraphinContext } from '@antv/graphin';
+
+const { ZoomCanvas } = Behaviors;
+
+const EventCenter = () => {
+  const { graph } = React.useContext(GraphinContext);
+  useEffect(() => {
+    graph.on('node:mouseenter', evt => {
+      graph.setItemState(evt.item, 'hover', true);
+    });
+
+    graph.on('node:mouseleave', evt => {
+      graph.setItemState(evt.item, 'hover', false);
+    });
+
+    graph.on('edge:mouseenter', evt => {
+      graph.setItemState(evt.item, 'selected', true);
+    });
+
+    graph.on('edge:mouseleave', evt => {
+      graph.setItemState(evt.item, 'selected', false);
+    });
+  }, []);
+
+  return null;
+};
+
+const data = Utils.mock(10)
+  .circle()
+  .graphin();
+const layout = {
+  type: 'circular',
+};
+
+const defaultEdge = {
+  style: {
+    stroke: '#000',
+  },
+  status: {
+    selected: {
+      stroke: 'red',
+      animation: {
+        repeat: true,
+      },
+    },
+  },
+};
+
+export default () => {
+  return (
+    <div>
+      <Graphin data={data} layout={layout} defaultEdge={defaultEdge}>
+        <ZoomCanvas />
+        <EventCenter />
+      </Graphin>
+    </div>
+  );
+};

packages/graphin/docs/render/element/demos/graphin-circle.tsx → packages/graphin/docs/render/element/demos/index.tsx

@@ -26,6 +26,14 @@ const EventCenter = () => {
     graph.on('node:mouseleave', evt => {
       graph.setItemState(evt.item, 'hover', false);
     });
+
+    graph.on('edge:mouseenter', evt => {
+      graph.setItemState(evt.item, 'selected', true);
+    });
+
+    graph.on('edge:mouseleave', evt => {
+      graph.setItemState(evt.item, 'selected', false);
+    });
   }, []);
 
   return null;
@@ -104,15 +112,28 @@ const defaultBadge = [
 const data = Utils.mock(10)
   .circle()
   .graphinMock(null, defaultIcon as any);
-
 const layout = {
   type: 'circular',
 };
 
+const defaultEdge = {
+  style: {
+    stroke: '#000',
+  },
+  status: {
+    selected: {
+      stroke: 'red',
+      animation: {
+        repeat: true,
+      },
+    },
+  },
+};
+
 export default () => {
   return (
     <div>
-      <Graphin data={data} layout={layout}>
+      <Graphin data={data} layout={layout} defaultEdge={defaultEdge}>
         <ZoomCanvas />
         <EventCenter />
       </Graphin>

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

@@ -0,0 +1,13 @@
+---
+title: 内置边
+group:
+  path: /render
+nav:
+  title: Graphin
+  path: /graphin
+  order: 1
+---
+
+## 基本介绍
+
+<code src='./demos/edge.tsx'>

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

@@ -18,8 +18,8 @@ nav:
 
 ### Graphin Circle
 
-<code src='./demos/default.tsx'>
+<!-- <code src='./demos/default.tsx'> -->
 
 ### Graphin Circle
 
-<!-- <code src='./demos/graphin-circle.tsx'> -->
+<code src='./demos/index.tsx'>

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

@@ -0,0 +1,13 @@
+---
+title: 节点元素
+group:
+  path: /render
+nav:
+  title: Graphin
+  path: /graphin
+  order: 1
+---
+
+## 基本介绍
+
+<code src='./demos/node.tsx'>

packages/graphin/package.json

@@ -55,7 +55,7 @@
   "license": "MIT",
   "dependencies": {
     "@antv/g-canvas": "^0.5.1",
-    "@antv/g6": "^4.1.0",
+    "@antv/g6": "^4.1.1",
     "@antv/util": "^2.0.10",
     "deepmerge": "^4.0.0",
     "lodash": "^4.17.15",

packages/graphin/src/index.ts

@@ -5,7 +5,7 @@ import Layout from './layout';
 import Behaviors from './behaviors';
 import registerGraphinForce from './layout/inner/registerGraphinForce';
 import registerRenderLayout from './layout/inner/registerRenderLayout';
-import { registerGraphinCircle } from './shape';
+import { registerGraphinCircle, registerGraphinLine } from './shape';
 
 /** 注册 Graphin force 布局 */
 registerGraphinForce();
@@ -14,6 +14,9 @@ registerRenderLayout();
 /** 注册 Graphin Circle Node */
 registerGraphinCircle();
 
+/** 注册 Graphin line Edge */
+registerGraphinLine();
+
 /** export */
 export default Graphin;
 export { Utils, Layout, GraphinContext, Behaviors };

packages/graphin/src/shape/graphin-line.ts

@@ -0,0 +1,123 @@
+import G6, { IGroup, IShape, IEdge } from '@antv/g6';
+import { isString } from '@antv/util';
+
+import { IUserEdge } from '../typings/type';
+
+export default () => {
+  G6.registerEdge(
+    'graphin-line',
+    {
+      options: {
+        style: {
+          stroke: 'rgb(239, 244, 255)',
+          opacity: 1,
+          labelCfg: {
+            fill: 'rgb(0, 0, 0)',
+            fontSize: 12,
+          },
+        },
+        status: {
+          selected: {
+            fill: 'rgb(239, 244, 255)',
+          },
+          hover: {
+            fill: 'rgb(239, 244, 255)',
+          },
+        },
+      },
+
+      afterDraw(cfg: IUserEdge, group: IGroup, keyShape: IShape) {
+        const path = keyShape.attr('path');
+        const lineWidth = keyShape.attr('lineWidth');
+        const shape = group.addShape('path', {
+          attrs: {
+            path,
+            lineWidth: lineWidth * 10,
+            // opacity: 0.1,
+            stroke: 'rgb(239, 244, 255)',
+          },
+          name: 'external-shape',
+          visible: false,
+        });
+        shape.toBack();
+      },
+
+      setState(name: string, value: string, item: IEdge) {
+        const keyShape = item.getKeyShape();
+        const group = item.get('group');
+        const model = item.getModel() as IUserEdge;
+        const children = group.get('children');
+        if (!model.status || !model.status[name]) return;
+
+        const shape = children.find((element: any) => element.get('name') === 'external-shape');
+        if (value) {
+          // selected 状态显示边上的 shape
+          if (name === 'selected') {
+            shape.show();
+          }
+
+          // 是否有配置动画
+          const { animation, ...otherAttr } = model.status[name];
+          for (let key in otherAttr) {
+            const value = (otherAttr as any)[key];
+            keyShape.attr(key, value);
+          }
+
+          if (animation) {
+            const { delay = 0, duration = 3000, easing = 'easeLinear', repeat = true } = animation;
+            let index = 0;
+            keyShape.animate(
+              () => {
+                index++;
+                if (index > 9) {
+                  index = 0;
+                }
+
+                const conf = {
+                  lineDash: [3, 3],
+                  lineDashOffset: -index,
+                };
+
+                return conf;
+              },
+              {
+                easing,
+                delay,
+                repeat,
+                duration,
+              },
+            );
+          }
+        } else {
+          shape.hide();
+          keyShape.stopAnimate();
+          keyShape.attr('lineDash', null);
+
+          // 恢复到原来的样式
+          const originStyle = item.getOriginStyle() as any;
+          for (let key in originStyle) {
+            const currentShape = children.find((element: any) => element.get('name') === key);
+            if (currentShape) {
+              for (let value in originStyle[key]) {
+                const currentValue = originStyle[key][value];
+                if (isString(currentValue)) {
+                  currentShape.attr(value, currentValue);
+                }
+              }
+            }
+          }
+        }
+      },
+      afterUpdate(cfg: IUserEdge, item: IEdge) {
+        const keyShape = item.getKeyShape();
+        const group = item.get('group');
+        const shape = group.get('children').find((element: any) => element.get('name') === 'external-shape');
+        if (shape) {
+          shape.attr('path', keyShape.attr('path'));
+        }
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any,
+    'line',
+  );
+};

packages/graphin/src/shape/index.ts

@@ -1 +1,2 @@
 export { default as registerGraphinCircle } from './graphin-circle';
+export { default as registerGraphinLine } from './graphin-line';

packages/graphin/src/typings/index.d.ts

@@ -1,4 +1,4 @@
-import { IG6GraphEvent } from '@antv/g6/es/types';
+import { IG6GraphEvent } from '@antv/g6';
 import { GraphinProps, GraphinState, IUserNode, IUserEdge, IGraphData, ITreeData } from './type';
 
 declare global {