feat: 拓扑图组编辑页补充节点逻辑

2024-01-09 11:20:18 +08:00
parent 299808ce29
commit 3142069051
5 changed files with 31 additions and 28 deletions
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -1173,6 +1173,7 @@ export default {
        nodeTypeCircleAnimateShapeR: "Circle, node zoom in and out animation",
        nodeTypeCircleAnimateShapeStroke: "Circular, node edge spread animation",
        nodeTypeRectAnimateState: "Rectangle with state animations",
+        nodeTypeImageAnimateState: "Image with status animation",
        nodeLabelPositionTop: "Top",
        nodeLabelPositionLeft: "Left",
        nodeLabelPositionRight: "Right",
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -1173,6 +1173,7 @@ export default {
        nodeTypeCircleAnimateShapeR: "圆形，节点放大缩小动画",
        nodeTypeCircleAnimateShapeStroke: "圆形，节点边缘扩散动画",
        nodeTypeRectAnimateState: "矩形，含有状态动画",
+        nodeTypeImageAnimateState: "图片，含有状态动画",
        nodeLabelPositionTop: "上",
        nodeLabelPositionLeft: "左",
        nodeLabelPositionRight: "右",
--- a/src/views/monitor/topologyBuild/components/GraphEditModal.vue
+++ b/src/views/monitor/topologyBuild/components/GraphEditModal.vue
@@ -238,7 +238,7 @@ function fnModalCancel() {
      </a-form-item>

      <!-- 圆形尺寸 -->
-      <a-row :gutter="16" v-if="comboState.form.type === 'circle'">
+      <a-row :gutter="16" v-if="comboState.form.type.startsWith('circle') ">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.comboFormSize')"
@@ -267,7 +267,7 @@ function fnModalCancel() {
      </a-row>

      <!-- 矩形尺寸 -->
-      <a-row :gutter="16" v-if="comboState.form.type === 'rect'">
+      <a-row :gutter="16" v-if="comboState.form.type.startsWith('rect')  ">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.comboFormSize')"
@@ -650,7 +650,7 @@ function fnModalCancel() {
        </a-col>
      </a-row>

-      <template v-if="nodeState.form.type !== 'image'">
+      <template v-if="!nodeState.form.type.startsWith('image')">
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
@@ -784,7 +784,7 @@ function fnModalCancel() {
        </a-col>
      </a-row>

-      <template v-if="nodeState.form.type === 'image'">
+      <template v-if="nodeState.form.type.startsWith('image')">
        <a-divider orientation="left">
          {{ t('views.monitor.topologyBuild.nodeFormTypeImage') }}
        </a-divider>
@@ -849,7 +849,7 @@ function fnModalCancel() {
          </a-row>

          <!-- 剪裁圆形 -->
-          <a-row :gutter="16" v-if="nodeState.form.clipCfg.type === 'circle'">
+          <a-row :gutter="16" v-if="nodeState.form.clipCfg.type.startsWith('circle') ">
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item
                :label="t('views.monitor.topologyBuild.nodeFormClipTypeCircle')"
@@ -867,7 +867,7 @@ function fnModalCancel() {
          </a-row>

          <!-- 剪裁矩形 -->
-          <a-row :gutter="16" v-if="nodeState.form.clipCfg.type === 'rect'">
+          <a-row :gutter="16" v-if="nodeState.form.clipCfg.type.startsWith('rect')">
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item
                :label="
@@ -976,8 +976,8 @@ function fnModalCancel() {
      <template
        v-if="
          nodeState.form.icon &&
-          nodeState.form.type !== 'rect' &&
-          nodeState.form.type !== 'image'
+          !nodeState.form.type.startsWith('rect')   &&
+          !nodeState.form.type.startsWith('image')
        "
      >
        <a-divider orientation="left">
--- a/src/views/monitor/topologyBuild/hooks/useGraph.ts
+++ b/src/views/monitor/topologyBuild/hooks/useGraph.ts
@@ -17,6 +17,7 @@ import {
 import {
  nodeCircleAnimateShapeR,
  nodeCircleAnimateShapeStroke,
+  nodeImageAnimateState,
  nodeRectAnimateState,
 } from './registerNode';

@@ -443,6 +444,7 @@ export default function useGraph() {
    nodeCircleAnimateShapeR();
    nodeCircleAnimateShapeStroke();
    nodeRectAnimateState();
+    nodeImageAnimateState();
  }

  /**图数据渲染 */
@@ -493,12 +495,6 @@ export default function useGraph() {
        ],
      },
      groupByTypes: false,
-      // layout: {
-      //   type: 'dagre',
-      //   sortByCombo: false,
-      //   ranksep: 10,
-      //   nodesep: 10,
-      // },
      // 全局节点
      defaultNode: {
        type: 'rect',
--- a/src/views/monitor/topologyBuild/hooks/useNode.ts
+++ b/src/views/monitor/topologyBuild/hooks/useNode.ts
@@ -52,6 +52,10 @@ export default function useNode() {
      value: 'rect-animate-state',
      label: t('views.monitor.topologyBuild.nodeTypeRectAnimateState'),
    },
+    {
+      value: 'image-animate-state',
+      label: t('views.monitor.topologyBuild.nodeTypeImageAnimateState'),
+    },
  ];

  /**图节点标签文本位置 */
@@ -190,7 +194,7 @@ export default function useNode() {
    const nodeId = info.id;
    if (nodeId && nodeId === nodeOriginId) {
      // 图片类型需要移除style属性，避免填充
-      if (info.type === 'image') {
+      if (info.type.startsWith('image')) {
        Reflect.deleteProperty(info, 'style');
      }
      graphG6.value.clearItemStates(nodeId, 'selected');
@@ -198,7 +202,7 @@ export default function useNode() {
      // 三角和图片的样式变更需要重绘才生效
      if (
        info.type === 'triangle' ||
-        info.type === 'image' ||
+        info.type.startsWith('image') ||
        info.comboId !== nodeState.origin.comboId
      ) {
        graphG6.value.read(graphG6.value.save());
@@ -261,7 +265,7 @@ export default function useNode() {
      }
    }
    // 设置图片属性
-    if (type === 'image') {
+    if (type.startsWith('image')) {
      const origin = nodeState.origin;
      if (origin.img) {
        nodeState.form = Object.assign(nodeState.form, {
@@ -281,17 +285,12 @@ export default function useNode() {
          },
        });
      }
-      Reflect.deleteProperty(nodeState.form, 'style');
+      nodeState.form.style.fill = 'transparent';
+      // Reflect.deleteProperty(nodeState.form.style, 'fill');
    } else {
      // 当切换非图片时补充style属性
-      if (!Reflect.has(nodeState.form, 'style')) {
-        nodeState.form = Object.assign(nodeState.form, {
-          style: {
-            fill: '#ffffff',
-            stroke: '#ffffff',
-            lineWidth: 1,
-          },
-        });
+      if (!nodeState.form.style.fill) {
+        nodeState.form.style.fill = '#ffffff';
      }
    }
    // 设置矩形大小
@@ -316,6 +315,12 @@ export default function useNode() {
          return false;
        }

+        // 图片需要删除style属性，避免填充色问题
+        if (node.type.startsWith('image')) {
+          node.style.fill = 'transparent';
+          // Reflect.deleteProperty(node.style, 'fill');
+        }
+
        // 存在更新，新增不监听变化
        const item = graphG6.value.findById(node.id);
        if (item) {
@@ -327,7 +332,7 @@ export default function useNode() {
        // 三角和图片的样式变更需要重绘才生效
        if (
          node.type === 'triangle' ||
-          node.type === 'image' ||
+          node.type.startsWith('image') ||
          node.comboId !== nodeState.origin.comboId
        ) {
          graphG6.value.read(graphG6.value.save());
@@ -356,7 +361,7 @@ export default function useNode() {
      // 三角和图片的样式变更需要重绘才生效
      if (
        origin.type === 'triangle' ||
-        origin.type === 'image' ||
+        origin.type.startsWith('image') ||
        origin.comboId !== nodeState.form.comboId
      ) {
        graphG6.value.read(graphG6.value.save());