删除

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

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

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

@@ -9,8 +9,8 @@ import {getCurrentInstance, reactive} from "vue";
 
 const emits = defineEmits([])
 const props = defineProps({
-  data: {},
-  graph: {},
+  data: <any>{},
+  graph: <any>{},
   onClose: <any>{},
 })
 const {proxy}: any = getCurrentInstance()
@@ -18,8 +18,8 @@ const {proxy}: any = getCurrentInstance()
 const state: any = reactive({
 })
 const onDel = () => {
-  console.log(props.data)
-  console.log(props.graph)
+  props.graph.removeEdge(props.data.id)
+  props.graph.removeNode(props.data.id)
   props.onClose(null, true)
 }
 </script>

src/views/workflow/chart/index.vue

@@ -159,7 +159,7 @@ const initChart = () => {
 }
 const initNodes = () => {
   props.data.nodes.forEach(v => {
-    state.graph.addNode(handleNode(v))
+    state.graph.addNode(handleNode(v, state.graph))
   })
 
 }
@@ -170,7 +170,7 @@ const initEdges = () => {
       targetNode.setData({
         edgeSource: v.port || v.source
       }, {deep: false})
-      state.graph.addEdge(handleEdge(v))
+      state.graph.addEdge(handleEdge(v, state.graph))
     })
     state.isInitEdges = true
   }

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

@@ -74,8 +74,8 @@ const onAddNode = (type) => {
   } else {
     node.data.edgeSource = `${props.node.id}_end`
   }
-  props.graph.addNode(handleNode(node))
-  props.graph.addEdge(handleEdge(edge))
+  props.graph.addNode(handleNode(node, props.graph))
+  props.graph.addEdge(handleEdge(edge, props.graph))
 }
 </script>
 

src/views/workflow/handle.ts

@@ -1,8 +1,13 @@
 import {Markup} from "@antv/x6";
 import {merge} from "lodash";
 import {lineStyle, portStyle} from "@/views/workflow/config";
+import { v4 } from "uuid";
 
-export const handleNode = (data) => {
+export const handleNode = (data, graph) => {
+  const id = v4()
+  if (!data.id) {
+    data.id = id
+  }
   const node: any = {
     ...data,
     shape: 'workflow-node',
@@ -19,7 +24,8 @@ export const handleNode = (data) => {
       {
         name: 'contextmenu',
         args: {
-          data
+          data,
+          graph,
         }
       }
     ]
@@ -61,7 +67,11 @@ export const handleNode = (data) => {
   return node
 }
 
-export const handleEdge = (data) => {
+export const handleEdge = (data, graph) => {
+  const id = v4()
+  if (!data.id) {
+    data.id = id
+  }
   const edge = {
     ...data,
     shape: 'edge',
@@ -77,11 +87,13 @@ export const handleEdge = (data) => {
       {
         name: 'contextmenu',
         args: {
-          data
+          data,
+          graph,
         }
       }
     ]
   }
+  edge.id = data.id
   edge.source = {
     cell: data.source,
     port: data.port || `${data.source}_end`