数据同步问题

src/stores/modules/workflow.ts

@@ -28,8 +28,8 @@ export const useWorkflowStore = defineStore('workflow', {
     },
     layoutPort(nodeId: string, portId: string) {
       const dom = document.getElementById(portId)
-      if (dom) {
-        const node = this.graph.getCellById(nodeId)
+      const node = this.graph.getCellById(nodeId)
+      if (dom && node) {
         node.portProp(portId, ['args', 'dy'], dom.offsetTop + 17)
       }
     },

src/views/workflow/chart/index.vue

@@ -12,7 +12,7 @@
               <SvgIcon name="zoom-"/>
             </div>
           </el-tooltip>
-          <el-dropdown :teleported="false" :popper-options="{
+          <el-dropdown :teleported="false" placement="top" :popper-options="{
             modifiers: [
               {
                 name: 'offset',
@@ -44,18 +44,29 @@
         </div>
         <div class="history">
           <el-tooltip content="撤销" effect="light" placement="top" :show-arrow="false">
-            <div class="__hover-bg" :class="{__disabled: !state.history.canUndo}" @click="onUndo">
+            <div class="__hover-bg" :class="{__disabled: !state.history.canUndo}" @click="onUndo(1)">
               <SvgIcon name="back"/>
             </div>
           </el-tooltip>
           <el-tooltip content="重做" effect="light" placement="top" :show-arrow="false">
-            <div class="__hover-bg" :class="{__disabled: !state.history.canRedo}" @click="onRedo">
+            <div class="__hover-bg" :class="{__disabled: !state.history.canRedo}" @click="onRedo(1)">
               <SvgIcon name="back" rotate="180"/>
             </div>
           </el-tooltip>
-<!--          <div class="__hover-bg">-->
-<!--            <SvgIcon name="history"/>-->
-<!--          </div>-->
+          <el-popover :show-arrow="false">
+            <template #reference>
+              <div class="__hover-bg">
+                <SvgIcon name="history"/>
+              </div>
+            </template>
+            <div class="history">
+              <div>变更历史</div>
+              <div>
+
+              </div>
+              变更心事
+            </div>
+          </el-popover>
         </div>
       </div>
     </div>
@@ -161,9 +172,9 @@ const state: any = reactive({
   isInitEdges: false,
   zoom: 1,
   history: {
-    isInit: false,
     canUndo: false,
     canRedo: false,
+
   }
 })
 const ref_chart = ref()
@@ -283,8 +294,10 @@ const initWatch = () => {
   state.graph.on('scale', ({ sx, sy, ox, oy }) => {
     state.zoom = sx
   })
-  state.graph.on('history:change', () => {
+  state.graph.on('history:change', (p) => {
     if (state.isInitEdges) {
+      console.log(123)
+      console.log(p)
       state.history.canRedo = state.graph.canRedo()
       state.history.canUndo = state.graph.canUndo()
     }
@@ -318,14 +331,18 @@ const graphZoom = (z) => {
     state.graph.zoomToFit({ maxScale: 1 })
   }
 }
-const onUndo = () => {
-  if (state.history.canUndo) {
-    state.graph.undo()
+const onUndo = (step) => {
+  for (let i = 1; i <= step; i++) {
+    if (state.history.canUndo) {
+      state.graph.undo()
+    }
   }
 }
-const onRedo = () => {
-  if (state.history.canRedo) {
-    state.graph.redo()
+const onRedo = (step) => {
+  for (let i = 1; i <= step; i++) {
+    if (state.history.canRedo) {
+      state.graph.redo()
+    }
   }
 }
 watch(() => props.data, (n) => {

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

@@ -76,8 +76,12 @@ const onAddNode = (type) => {
   } else {
     node.data.edgeSource = `${props.node.id}_end`
   }
+  props.graph.startBatch('custom-batch-name')
   props.graph.addNode(handleNode(node))
   props.graph.addEdge(handleEdge(edge))
+  setTimeout(() => {
+    props.graph.stopBatch('custom-batch-name')
+  }, 100)
 }
 </script>
 

src/views/workflow/config.ts

@@ -33,7 +33,7 @@ export const nodeDefault = {
       id: v4(),
       title: '测试节点',
       subTitle: '',
-      ...testNodeDefault.defaultValue
+      ...testNodeDefault.defaultValue()
     }
   }),
   [NodeType.Root]: () => (<NodeStruct>{
@@ -43,7 +43,7 @@ export const nodeDefault = {
       id: v4(),
       title: '开始',
       subTitle: '',
-      ...rootNodeDefault.defaultValue,
+      ...rootNodeDefault.defaultValue(),
     }
   }),
   [NodeType.Answer]: () => (<NodeStruct>{
@@ -53,7 +53,7 @@ export const nodeDefault = {
       id: v4(),
       title: '直接回复',
       subTitle: '',
-      ...answerNodeDefault.defaultValue,
+      ...answerNodeDefault.defaultValue(),
     }
   }),
   [NodeType.IfElse]: () => (<NodeStruct>{
@@ -63,7 +63,7 @@ export const nodeDefault = {
       id: v4(),
       title: '条件分支',
       subTitle: '',
-      ...ifElseNodeDefault.defaultValue,
+      ...ifElseNodeDefault.defaultValue(),
       ports: <NodePortStruct[]>[
         {
           id: v4(),

src/views/workflow/instance/answer/default.ts

@@ -1,7 +1,7 @@
 const nodeDefault = {
-  defaultValue: {
+  defaultValue: () => ({
     inVars: [],
-  }
+  })
 }
 
 export default nodeDefault

src/views/workflow/instance/if-else/default.ts

@@ -1,13 +1,13 @@
 import {ConditionMode} from "@/views/workflow/types";
 
 const nodeDefault = {
-  defaultValue: {
+  defaultValue: () => ({
     inVars: [],
-  },
-  caseValue: {
+  }),
+  caseValue: () => ({
     mode: ConditionMode.And,
     cases: []
-  },
+  }),
 }
 
 export default nodeDefault

src/views/workflow/instance/if-else/panel/index.vue

@@ -66,7 +66,7 @@ watch(() => state.nodeData, (n) => {
 const onAddCase = () => {
   const data = {
     id: v4(),
-    ...ifElseNodeDefault.caseValue
+    ...ifElseNodeDefault.caseValue()
   }
   props.node.addPort({
     id: data.id,

src/views/workflow/instance/root/default.ts

@@ -1,7 +1,7 @@
 const nodeDefault = {
-  defaultValue: {
+  defaultValue: () => ({
     outVars: []
-  }
+  })
 }
 
 export default nodeDefault

src/views/workflow/instance/test/default.ts

@@ -1,11 +1,11 @@
 const nodeDefault = {
-  defaultValue: {
+  defaultValue: () => ({
     inVars: [],
     outVars: [
       {label: '参数1', key: 'param1', type: 'String'},
       {label: '参数2', key: 'param2', type: 'Number'},
     ],
-  }
+  })
 }
 
 export default nodeDefault