新增节点

src/views/process/chart/context-menu-tool.vue

@@ -26,32 +26,61 @@ const { proxy }: any = getCurrentInstance()
 
 const state: any = reactive({})
 const onAdd = () => {
-  console.log(props.data)
   ProcessStore.graph.startBatch(GraphHistoryStep.NodeAdd)
-  const currentNode = ProcessStore.graph.getCellById(props.data.id)
-  const nextNode = ProcessStore.graph.getCellById(props.data.data.edgeTarget[0])
-  const currentEdge = ProcessStore.graph.getOutgoingEdges(currentNode)[0]
-  const approvalNode = getNodeDefault(NodeType.Approval)
-  currentNode.data.workflowData.edgeTarget = [approvalNode.id]
-  nextNode.data.workflowData.edgeSource = [approvalNode.id]
-  approvalNode.data.edgeTarget = [nextNode.id]
-  approvalNode.data.edgeSource = [currentNode.id]
-  ProcessStore.graph.removeEdge(currentEdge)
-  ProcessStore.graph.addNode(handleNode(approvalNode))
-  ProcessStore.graph.addEdge(
-    handleEdge({
-      id: v4(),
-      source: props.data.id,
-      target: approvalNode.id,
-    }),
-  )
-  ProcessStore.graph.addEdge(
-    handleEdge({
-      id: v4(),
-      source: approvalNode.id,
-      target: props.data.data.edgeTarget[0],
-    }),
-  )
+  const cell = ProcessStore.graph.getCellById(props.data.id)
+  if (cell.isNode()) {
+    const currentNode = cell
+    const nextNode = ProcessStore.graph.getCellById(
+      currentNode.data.workflowData.edgeTarget[0],
+    )
+    const currentEdge = ProcessStore.graph.getOutgoingEdges(currentNode)[0]
+    const approvalNode = getNodeDefault(NodeType.Approval)
+    currentNode.data.workflowData.edgeTarget = [approvalNode.id]
+    nextNode.data.workflowData.edgeSource = [approvalNode.id]
+    approvalNode.data.edgeTarget = [nextNode.id]
+    approvalNode.data.edgeSource = [currentNode.id]
+    ProcessStore.graph.removeEdge(currentEdge)
+    ProcessStore.graph.addNode(handleNode(approvalNode))
+    ProcessStore.graph.addEdge(
+      handleEdge({
+        id: v4(),
+        source: currentNode.id,
+        target: approvalNode.id,
+      }),
+    )
+    ProcessStore.graph.addEdge(
+      handleEdge({
+        id: v4(),
+        source: approvalNode.id,
+        target: nextNode.id,
+      }),
+    )
+  } else {
+    const currentNode = ProcessStore.graph.getCellById(cell.source.cell)
+    const nextNode = ProcessStore.graph.getCellById(cell.target.cell)
+    const currentEdge = cell
+    const approvalNode = getNodeDefault(NodeType.Approval)
+    currentNode.data.workflowData.edgeTarget = [approvalNode.id]
+    nextNode.data.workflowData.edgeSource = [approvalNode.id]
+    approvalNode.data.edgeTarget = [nextNode.id]
+    approvalNode.data.edgeSource = [currentNode.id]
+    ProcessStore.graph.removeEdge(currentEdge)
+    ProcessStore.graph.addNode(handleNode(approvalNode))
+    ProcessStore.graph.addEdge(
+      handleEdge({
+        id: v4(),
+        source: currentNode.id,
+        target: approvalNode.id,
+      }),
+    )
+    ProcessStore.graph.addEdge(
+      handleEdge({
+        id: v4(),
+        source: approvalNode.id,
+        target: nextNode.id,
+      }),
+    )
+  }
   setTimeout(() => {
     ProcessStore.onAutoFix()
     ProcessStore.graph.stopBatch(GraphHistoryStep.NodeAdd)

src/views/process/chart/index.vue

@@ -226,6 +226,7 @@ register({
   component: ProcessNodeApproval,
 })
 Graph.registerNodeTool('contextmenu', ContextMenuTool, true)
+Graph.registerEdgeTool('contextmenu', ContextMenuTool, true)
 
 const ProcessStore = useProcessStore()
 const emit = defineEmits(['save'])

src/views/process/chart/nodes/approval.vue

@@ -8,9 +8,6 @@
     }"
   >
     {{ state.nodeData?.title }}
-    <div class="text-black">edgeSource：{{ state.nodeData.edgeSource }}</div>
-    <div class="text-black">id：{{ state.nodeData.id }}</div>
-    <div class="text-black">edgeTarget：{{ state.nodeData.edgeTarget }}</div>
   </div>
 </template>
 

src/views/process/chart/nodes/end.vue

@@ -11,9 +11,6 @@
       class="flex size-full items-center justify-center rounded-full bg-[#A7ADB9] text-base font-bold text-[#ffffff]"
     >
       {{ state.nodeData?.title }}
-      <div class="text-black">edgeSource：{{ state.nodeData.edgeSource }}</div>
-      <div class="text-black">id：{{ state.nodeData.id }}</div>
-      <div class="text-black">edgeTarget：{{ state.nodeData.edgeTarget }}</div>
     </div>
   </div>
 </template>

src/views/process/chart/nodes/start.vue

@@ -11,9 +11,6 @@
       class="flex size-full items-center justify-center rounded-full bg-[var(--czr-main-color)] text-base font-bold text-[#ffffff]"
     >
       {{ state.nodeData?.title }}
-      <div class="text-black">edgeSource：{{ state.nodeData.edgeSource }}</div>
-      <div class="text-black">id：{{ state.nodeData.id }}</div>
-      <div class="text-black">edgeTarget：{{ state.nodeData.edgeTarget }}</div>
     </div>
   </div>
 </template>

src/views/process/handle.ts

@@ -65,6 +65,14 @@ export const handleEdge = (ed) => {
       line: lineStyle,
     },
     zIndex: -1,
+    tools: [
+      {
+        name: 'contextmenu',
+        args: {
+          data: ed,
+        },
+      },
+    ],
   }
   return edge
 }