perf: improve flowChart logic

build/generate/generateModifyVars.ts

@@ -32,5 +32,6 @@ export function generateModifyVars(dark = false) {
     'font-size-base': '14px', //  Main font size
     'border-radius-base': '2px', //  Component/float fillet
     'link-color': primary, //   Link color
+    'content-background': '#fafafa', //   Link color
   };
 }

build/vite/plugin/theme.ts

@@ -53,6 +53,7 @@ export function configThemePlugin(isBuild: boolean): Plugin[] {
         'border-color-base': '#303030',
         // 'border-color-split': '#30363d',
         'item-active-bg': '#111b26',
+        'content-background': '#ffffff0a', //   Link color
       },
     }),
   ];

package.json

@@ -101,7 +101,7 @@
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
     "rimraf": "^3.0.2",
-    "rollup-plugin-visualizer": "5.3.6",
+    "rollup-plugin-visualizer": "5.3.4",
     "stylelint": "^13.12.0",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^21.0.0",

src/components/FlowChart/index.ts

@@ -1,17 +1,10 @@
 import { App } from 'vue';
-import control from './src/Control.vue';
-import nodePanel from './src/NodePanel.vue';
 import dataDialog from './src/DataDialog.vue';
+import flowChart from './src/index.vue';
 
-export const Control = Object.assign(control, {
+export const FlowChart = Object.assign(flowChart, {
   install(app: App) {
-    app.component(control.name, control);
-  },
-});
-
-export const NodePanel = Object.assign(nodePanel, {
-  install(app: App) {
-    app.component(nodePanel.name, nodePanel);
+    app.component(flowChart.name, flowChart);
   },
 });
 

src/components/FlowChart/src/DataDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <vue-json-pretty :path="'res'" :deep="3" :showLength="true" :data="graphData" />
+  <vue-json-pretty :path="'res'" :deep="3" :showLength="true" :data="data" />
 </template>
 
 <script lang="ts">
@@ -12,7 +12,7 @@
       VueJsonPretty,
     },
     props: {
-      graphData: Object,
+      data: Object,
     },
   });
 </script>

src/components/FlowChart/src/FlowChartToolbar.vue

@@ -0,0 +1,156 @@
+<template>
+  <div :class="`${prefixCls}-toolbar`" class="flex items-center px-2 py-1">
+    <template v-for="(item, index) in toolbarItemList" :key="item.type || index">
+      <Tooltip placement="bottom" v-bind="item.disabled ? { visible: false } : {}">
+        <template #title>{{ item.tooltip }}</template>
+        <span :class="`${prefixCls}-toolbar__icon`" v-if="item.icon" @click="onControl(item)">
+          <Icon
+            :icon="item.icon"
+            :class="item.disabled ? 'cursor-not-allowed disabeld' : 'cursor-pointer'"
+          />
+        </span>
+      </Tooltip>
+      <Divider v-if="item.separate" type="vertical" />
+    </template>
+  </div>
+</template>
+<script lang="ts">
+  import type { ToolbarConfig } from './types';
+
+  import { defineComponent, ref, onUnmounted, unref, nextTick, watchEffect } from 'vue';
+  import { Divider, Tooltip } from 'ant-design-vue';
+  import { Icon } from '/@/components/Icon';
+
+  import { useFlowChartContext } from './useFlowContext';
+  import { ToolbarTypeEnum } from './enum';
+
+  export default defineComponent({
+    name: 'FlowChartToolbar',
+    components: { Icon, Divider, Tooltip },
+    props: {
+      prefixCls: String,
+    },
+    setup(_, { emit }) {
+      const toolbarItemList = ref<ToolbarConfig[]>([
+        {
+          type: ToolbarTypeEnum.ZOOM_IN,
+          icon: 'codicon:zoom-out',
+          tooltip: '缩小',
+        },
+        {
+          type: ToolbarTypeEnum.ZOOM_OUT,
+          icon: 'codicon:zoom-in',
+          tooltip: '放大',
+        },
+        {
+          type: ToolbarTypeEnum.RESET_ZOOM,
+          icon: 'codicon:screen-normal',
+          tooltip: '重置比例',
+        },
+        { separate: true },
+        {
+          type: ToolbarTypeEnum.UNDO,
+          icon: 'ion:arrow-undo-outline',
+          tooltip: '后退',
+          disabled: true,
+        },
+        {
+          type: ToolbarTypeEnum.REDO,
+          icon: 'ion:arrow-redo-outline',
+          tooltip: '前进',
+          disabled: true,
+        },
+        { separate: true },
+        {
+          type: ToolbarTypeEnum.SNAPSHOT,
+          icon: 'ion:download-outline',
+          tooltip: '下载',
+        },
+        {
+          type: ToolbarTypeEnum.VIEW_DATA,
+          icon: 'carbon:document-view',
+          tooltip: '查看数据',
+        },
+      ]);
+
+      const { logicFlow } = useFlowChartContext();
+
+      function onHistoryChange({ data: { undoAble, redoAble } }) {
+        const itemsList = unref(toolbarItemList);
+        const undoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.UNDO);
+        const redoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.REDO);
+        if (undoIndex !== -1) {
+          unref(toolbarItemList)[undoIndex].disabled = !undoAble;
+        }
+        if (redoIndex !== -1) {
+          unref(toolbarItemList)[redoIndex].disabled = !redoAble;
+        }
+      }
+
+      const onControl = (item) => {
+        const lf = unref(logicFlow);
+        if (!lf) {
+          return;
+        }
+        switch (item.type) {
+          case ToolbarTypeEnum.ZOOM_IN:
+            lf.zoom();
+            break;
+          case ToolbarTypeEnum.ZOOM_OUT:
+            lf.zoom(true);
+            break;
+          case ToolbarTypeEnum.RESET_ZOOM:
+            lf.resetZoom();
+            break;
+          case ToolbarTypeEnum.UNDO:
+            lf.undo();
+            break;
+          case ToolbarTypeEnum.REDO:
+            lf.redo();
+            break;
+          case ToolbarTypeEnum.SNAPSHOT:
+            lf.getSnapshot();
+            break;
+          case ToolbarTypeEnum.VIEW_DATA:
+            emit('catData');
+            break;
+        }
+      };
+
+      watchEffect(async () => {
+        if (unref(logicFlow)) {
+          await nextTick();
+          unref(logicFlow)?.on('history:change', onHistoryChange);
+        }
+      });
+
+      onUnmounted(() => {
+        unref(logicFlow)?.off('history:change', onHistoryChange);
+      });
+      return { toolbarItemList, onControl };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-flow-chart-toolbar';
+
+  .@{prefix-cls} {
+    height: 36px;
+    background: @content-background;
+    border-bottom: 1px solid @border-color-base;
+
+    .disabeld {
+      color: @disabled-color;
+    }
+
+    &__icon {
+      display: inline-block;
+      padding: 2px 4px;
+      margin-right: 10px;
+
+      &:hover {
+        color: @primary-color;
+      }
+    }
+  }
+</style>