连线删除

src/views/workflow/chart/context-menu-tool.tsx

@@ -25,9 +25,10 @@ class ContextMenuTool extends ToolsView.ToolItem {
     document.removeEventListener('mousedown', this.onMouseDown)
 
     if (visible && pos) {
-      const { data }: any = this.options
+      const { data, delFlag }: any = this.options
       app = createApp(contextMenuTool, {
         data,
+        delFlag,
         onClose: this.onMouseDown
       })
       // 减去本身元素的宽高
@@ -70,6 +71,7 @@ ContextMenuTool.config({
   tagName: 'div',
   isSVGElement: false,
   data: {},
+  delFlag: ''
 })
 
 export {

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

@@ -13,6 +13,7 @@ const WorkflowStore = useWorkflowStore()
 const emits = defineEmits([])
 const props = defineProps({
   data: <any>{},
+  delFlag: <any>{},
   onClose: <any>{},
 })
 const {proxy}: any = getCurrentInstance()
@@ -20,13 +21,16 @@ const {proxy}: any = getCurrentInstance()
 const state: any = reactive({
 })
 const onDel = () => {
-  WorkflowStore.graph.startBatch(GraphHistoryStep.NodeDel)
-  WorkflowStore.graph.removeEdge(props.data.id)
-  WorkflowStore.graph.removeNode(props.data.id)
-  setTimeout(() => {
-    WorkflowStore.graph.stopBatch(GraphHistoryStep.NodeDel)
-  }, 100)
-  props.onClose(null, true)
+  if (props.delFlag) {
+    WorkflowStore.graph.startBatch(props.delFlag)
+    WorkflowStore.graph.removeEdge(props.data.id)
+    WorkflowStore.graph.removeNode(props.data.id)
+    setTimeout(() => {
+      WorkflowStore.graph.stopBatch(props.delFlag)
+    }, 100)
+    props.onClose(null, true)
+  }
+
 }
 </script>
 

src/views/workflow/chart/index.vue

@@ -93,9 +93,10 @@ import {handleEdge, handleNode} from "@/views/workflow/handle";
 import {Snapline} from '@antv/x6-plugin-snapline'
 import {ContextMenuTool} from "./context-menu-tool";
 import {useWorkflowStore} from "@/stores/modules/workflow";
-import {NodeType} from "@/views/workflow/types";
+import {GraphHistoryStep, NodeType} from "@/views/workflow/types";
 import { MiniMap } from '@antv/x6-plugin-minimap'
 import { History } from '@antv/x6-plugin-history'
+import {v4} from "uuid";
 
 register({
   shape: 'workflow-node',
@@ -242,14 +243,16 @@ const initChart = () => {
       //   },
       // },
       createEdge: (args) => {
-        console.log(args)
+        const id = v4()
         return new Shape.Edge({
+          id,
           attrs: lineStyle,
           tools: [
             {
               name: 'contextmenu',
               args: {
-                data: {aaa: 123},
+                delFlag: GraphHistoryStep.EdgeDel,
+                data: {id},
               }
             }
           ]

src/views/workflow/handle.ts

@@ -3,7 +3,7 @@ import {merge} from "lodash";
 import {lineStyle, portStyle} from "@/views/workflow/config";
 import { v4 } from "uuid";
 import {useWorkflowStore} from "@/stores";
-import {NodeType} from "@/views/workflow/types";
+import {GraphHistoryStep, NodeType} from "@/views/workflow/types";
 
 const WorkflowStore = useWorkflowStore()
 export const handleNode = (no) => {
@@ -35,6 +35,7 @@ export const handleNode = (no) => {
       {
         name: 'contextmenu',
         args: {
+          delFlag: GraphHistoryStep.NodeDel,
           data: no,
         }
       }
@@ -114,6 +115,7 @@ export const handleEdge = (ed) => {
       {
         name: 'contextmenu',
         args: {
+          delFlag: GraphHistoryStep.EdgeDel,
           data: ed,
         }
       }

src/views/workflow/index.vue

@@ -14,7 +14,7 @@ import {getCurrentInstance, onMounted, provide, reactive, ref} from "vue";
 import workflowChart from './chart/index.vue'
 import workflowPanel from './chart/panel-index.vue'
 import { getTeleport } from '@antv/x6-vue-shape'
-import {data0, data1, data2} from './mockJson'
+import {data0, data1, data2, data3} from './mockJson'
 const TeleportContainer = getTeleport()
 
 const emits = defineEmits([])
@@ -55,7 +55,7 @@ const getJsonData = () => {
   console.log(res)
 }
 const initData = () => {
-  state.workflowData = data1
+  state.workflowData = data3
 }
 onMounted(() => {
   initData()

src/views/workflow/mockJson.ts

@@ -924,3 +924,57 @@ export const data2 = {
     }
   ]
 }
+
+export const data3 = {
+  "nodes": [
+    {
+      "id": "3ba412bb-3772-4f61-85de-095f4017858c",
+      "x": -650,
+      "y": -250,
+      "data": {
+        "id": "3ba412bb-3772-4f61-85de-095f4017858c",
+        "title": "开始",
+        "type": "root",
+        "outVars": [
+          {
+            "label": "参数1",
+            "key": "key1",
+            "type": "String",
+            "length": "10"
+          },
+          {
+            "label": "参数2",
+            "key": "key2",
+            "type": "Number"
+          }
+        ],
+        "sysVars": [
+          {
+            "label": "查询内容",
+            "key": "sys.query",
+            "type": "String"
+          },
+          {
+            "label": "用户ID",
+            "key": "sys.user_id",
+            "type": "String"
+          }
+        ]
+      }
+    },
+    {
+      "id": "081e032b-312e-4ebc-b663-73ce5615a3bf",
+      "x": -310,
+      "y": -250,
+      "data": {
+        "id": "081e032b-312e-4ebc-b663-73ce5615a3bf",
+        "title": "直接回复",
+        "inVars": [],
+        "outVars": [],
+        "type": "answer",
+        "edgeSource": "3ba412bb-3772-4f61-85de-095f4017858c_end"
+      }
+    }
+  ],
+  "edges": []
+}