feat: 新增三个自定义边/三个自定义节点

src/views/monitor/topologyBuild/hooks/registerEdge.ts

@@ -0,0 +1,183 @@
+import { registerEdge } from '@antv/g6';
+
+/**
+ * cubic 三阶贝塞尔曲线，虚线运动
+ * @key cubic-animate-line-dash
+ */
+export function edgeCubicAnimateLineDash() {
+  registerEdge(
+    'cubic-animate-line-dash',
+    {
+      afterDraw(cfg, group) {
+        if (!group) return;
+        // 获取组中的第一个形状
+        const shape = group.get('children')[0];
+        // 定义动画
+        let index = 0;
+        shape.animate(
+          () => {
+            index++;
+            if (index > 8) {
+              index = 0;
+            }
+            return {
+              lineDash: [4, 2, 1, 2],
+              lineDashOffset: -index,
+            };
+          },
+          {
+            repeat: true, // 是否重复执行动画
+            duration: 3000, // 执行一次的持续时间
+          }
+        );
+      },
+    },
+    'cubic' // 扩展内置边
+  );
+}
+
+/**
+ * cubic 三阶贝塞尔曲线，圆点沿边运动
+ * @key cubic-animate-circle-move
+ */
+export function edgeCubicAnimateCircleMove() {
+  registerEdge(
+    'cubic-animate-circle-move',
+    {
+      afterDraw(cfg, group) {
+        if (!group) return;
+        // 获取组中的第一个形状
+        const shape = group.get('children')[0];
+        // 边缘路径的起始位置
+        const startPoint = shape.getPoint(0);
+        const fillColor = cfg?.labelCfg?.style?.fill || '#1890ff';
+        // 添加圆圈形状
+        const circle = group.addShape('circle', {
+          attrs: {
+            x: startPoint.x,
+            y: startPoint.y,
+            fill: fillColor,
+            r: 3,
+          },
+          // 在 G6 3.3 及更高版本中必须指定。它可以是你想要的任何字符串，但在自定义项目类型中应该是唯一的
+          name: 'circle-shape',
+        });
+
+        // 定义动画
+        circle.animate(
+          (ratio: any) => {
+            // 每帧中的操作。比率范围从 0 到 1，表示动画的进度。返回修改后的配置
+            // 根据比率获取边缘上的位置
+            const tmpPoint = shape.getPoint(ratio);
+            // 在此处返回修改后的配置，在此处返回 x 和 y
+            return {
+              x: tmpPoint.x,
+              y: tmpPoint.y,
+            };
+          },
+          {
+            repeat: true, // 是否重复执行动画
+            duration: 3000, // 执行一次的持续时间
+          }
+        );
+      },
+    },
+    'cubic' // 扩展内置边
+  );
+}
+
+/**
+ * line 直线，含有状态动画
+ * @key line-animate-state
+ * @name line-dash 虚线运动
+ * @name line-path 线路径加载运动
+ */
+export function edgeLineAnimateState() {
+  registerEdge(
+    'line-animate-state',
+    {
+      setState: (name, value, item: any) => {
+        const group = item.get('group');
+        const model = item.getModel();
+        const keyShape = group.find(
+          (ele: any) => ele.get('name') === 'edge-shape'
+        );
+        // line-dash 虚线运动
+        if (name === 'line-dash') {
+          if (value) {
+            let index = 0;
+            keyShape.animate(
+              () => {
+                index++;
+                if (index > 8) {
+                  index = 0;
+                }
+                return {
+                  lineDash: [4, 2, 1, 2],
+                  lineDashOffset: -index,
+                };
+              },
+              {
+                repeat: true, // 是否重复执行动画
+                duration: 3000, // 执行一次的持续时间
+              }
+            );
+          } else {
+            keyShape.stopAnimate();
+            keyShape.attr({
+              lineDash: null,
+              lineDashOffset: null,
+            });
+          }
+          return;
+        }
+        // line-path 线路径加载运动
+        if (name === 'line-path') {
+          // 线路径
+          let back = group.find((ele: any) => ele.get('name') === 'line-path');
+          if (back) {
+            back.remove();
+            back.destroy();
+          }
+          const { path, stroke, lineWidth } = keyShape.attr();
+          back = group.addShape('path', {
+            attrs: {
+              path,
+              stroke,
+              lineWidth,
+              opacity: 0.2,
+            },
+            name: 'line-path',
+          });
+          back.toBack(); // 置于底层
+
+          if (value) {
+            // 直线加载
+            const length = keyShape.getTotalLength();
+            keyShape.animate(
+              (ratio: any) => {
+                const startLen = ratio * length;
+                return {
+                  lineDash: [startLen, length - startLen],
+                };
+              },
+              {
+                repeat: true,
+                duration: 2000,
+              }
+            );
+          } else {
+            keyShape.stopAnimate();
+            keyShape.attr({
+              lineDash: null,
+            });
+            back.remove();
+            back.destroy();
+          }
+          return;
+        }
+      },
+    },
+    'line' // 扩展内置边
+  );
+}