feat: 拓扑编辑数据存储功能

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

@@ -0,0 +1,169 @@
+import { message, Form } from 'ant-design-vue/lib';
+import { reactive, watch } from 'vue';
+import useI18n from '@/hooks/useI18n';
+import { graphG6 } from './useGraph';
+
+/**图边内置边类型 */
+export const edgeTypeOptions = [
+  {
+    value: 'line',
+    label: '直线，连接两个节点的直线',
+  },
+  {
+    value: 'polyline',
+    label: '折线，多段线段构成的折线，连接两个端点',
+  },
+  {
+    value: 'arc',
+    label: '圆弧线，连接两个节点的一段圆弧',
+  },
+  {
+    value: 'quadratic',
+    label: '二阶贝塞尔曲线，只有一个控制点的曲线',
+  },
+  {
+    value: 'cubic',
+    label: '三阶贝塞尔曲线，有两个控制点的曲线',
+  },
+  {
+    value: 'cubic-vertical',
+    label: '垂直方向的三阶贝塞尔曲线',
+  },
+  {
+    value: 'cubic-horizontal',
+    label: '水平方向的三阶贝塞尔曲线',
+  },
+  {
+    value: 'loop',
+    label: '自环',
+  },
+];
+
+/**图边标签文本位置 */
+export const edgePositionOptions = [
+  {
+    value: 'start',
+    label: '开头',
+  },
+  {
+    value: 'middle',
+    label: '中间',
+  },
+  {
+    value: 'end',
+    label: '末尾',
+  },
+];
+
+export default function useEdge() {
+  const { t } = useI18n();
+
+  /**图边信息状态类型 */
+  type EdgeStateType = {
+    /**图边原始数据 */
+    origin: Record<string, any>;
+    /**图边表单数据 */
+    form: Record<string, any>;
+  };
+
+  /**图边信息状态 */
+  let edgeState: EdgeStateType = reactive({
+    origin: {},
+    form: {
+      id: '',
+      source: '',
+      target: '',
+      type: 'polyline',
+      style: {
+        offset: 20,
+        radius: 2,
+        stroke: '#ffffff',
+        lineWidth: 1,
+        cursor: 'pointer',
+      },
+      label: '',
+      labelCfg: {
+        refX: 0,
+        refY: 0,
+        position: 'middle',
+        autoRotate: false,
+        style: {
+          fill: '#ffffff',
+          fontSize: 12,
+          fontWeight: 500,
+        },
+      },
+    },
+  });
+
+  /**图边对话框内表单属性和校验规则 */
+  const edgeStateForm = Form.useForm(
+    edgeState.form,
+    reactive({
+      id: [{ required: true, message: '边唯一 ID' }],
+      source: [{ required: true, message: '起始点 id' }],
+      target: [{ required: true, message: '结束点 id' }],
+      type: [{ required: true, message: 'line' }],
+    })
+  );
+
+  /**图边编辑监听更新视图 */
+  watch(edgeState.form, edge => {
+    const info = JSON.parse(JSON.stringify(edge));
+    // 新增id是#不监听变化
+    const edgeId = info.id;
+    if (edgeId && edgeId !== '#') {
+      graphG6.value.clearItemStates(edgeId, 'selected');
+      graphG6.value.updateItem(edgeId, info);
+    }
+  });
+
+  /**图边新增或更新 */
+  function handleOkEdge() {
+    return edgeStateForm
+      .validate()
+      .then(e => {
+        const edge = JSON.parse(JSON.stringify(edgeState.form));
+        if (!edge.id) {
+          message.warn({
+            content: `边元素ID错误`,
+            duration: 2,
+          });
+          return false;
+        }
+
+        // 存在更新，新增id是#不监听变化
+        const item = graphG6.value.findById(edge.id);
+        if (item) {
+          graphG6.value.updateItem(item, edge);
+        } else {
+          edge.id = `${edge.source}~${Date.now()}~${edge.target}`;
+          graphG6.value.addItem('edge', edge);
+        }
+
+        edgeStateForm.resetFields();
+        edgeState.origin = {};
+        return true;
+      })
+      .catch(e => {
+        message.error(
+          t('common.errorFields', { num: e.errorFields.length }),
+          3
+        );
+        return false;
+      });
+  }
+
+  /**图边取消还原 */
+  function handleCancelEdge() {
+    // 新增无原始数据
+    const origin = JSON.parse(JSON.stringify(edgeState.origin));
+    if (origin.id) {
+      graphG6.value.updateItem(origin.id, origin);
+    }
+    edgeStateForm.resetFields();
+    edgeState.origin = {};
+  }
+
+  return { edgeState, edgeStateForm, handleOkEdge, handleCancelEdge };
+}