延时处理

src/stores/modules/workflow.ts

@@ -10,9 +10,7 @@ export const useWorkflowStore = defineStore('workflow', {
       node: <any>null,
       show: false
     },
-    nodeSize: {
-
-    }
+    nodeSize: {}
   }),
   getters: {
   },

src/views/workflow/chart/index.vue

@@ -491,7 +491,7 @@ const initWatch = () => {
       }
       if (options.name === GraphHistoryStep.Dnd) {
         const nodeId = cmds[0].data.id
-        state.graph.getCellById(nodeId).data.workflowData.ports.forEach(p => {
+        state.graph.getCellById(nodeId).data.workflowData.ports?.forEach(p => {
           WorkflowStore.layoutPort(nodeId, p.id)
         })
       }
@@ -567,7 +567,6 @@ const onHistoryClear = (first = '') => {
 }
 const onAddNode = ({type, e}) => {
   const node = state.graph.createNode(handleNode(getNodeDefault(type)))
-  console.log(node.id)
   state.dnd.start(node, e)
 }
 watch(() => props.data, (n) => {

src/views/workflow/chart/node-port.vue

@@ -14,7 +14,7 @@
       }">
       <template #reference>
         <div class="w-full h-full">
-          <div class="node-port-operation" v-show="state.active">
+          <div class="node-port-operation" v-show="state.active && !state.isDelay">
             <ElTooltip
               placement="top"
               effect="light"
@@ -26,7 +26,7 @@
               </div>
             </ElTooltip>
           </div>
-          <div class="node-port-operation-normal" v-show="!state.active">
+          <div class="node-port-operation-normal" v-show="!state.active && !state.isDelay">
             <div/>
           </div>
         </div>
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import {getCurrentInstance, inject, onMounted, reactive, ref, watch} from "vue";
+import {getCurrentInstance, inject, nextTick, onMounted, reactive, ref, watch} from "vue";
 import { ElPopover, ElTooltip } from 'element-plus';
 import {getNodeDefault} from "@/views/workflow/config";
 import {GraphHistoryStep, NodeType, NodeTypeObj} from "@/views/workflow/types";
@@ -53,7 +53,8 @@ const props = defineProps({
 })
 const {proxy}: any = getCurrentInstance()
 const state: any = reactive({
-  active: false
+  active: false,
+  isDelay: true
 })
 const onAddNode = ({type}) => {
   const node = getNodeDefault(type)
@@ -105,6 +106,10 @@ onMounted(() => {
   props.node.on('change:attrs', () => {
     state.active = props.node.getAttrByPath('hover') || props.node.getAttrByPath('select')
   })
+  // 新增的时候，添加延时，避免初始化后自适应位置时的明显拖尾效果
+  setTimeout(() => {
+    state.isDelay = false
+  }, 100)
 })
 </script>