新桩新增问题

src/views/workflow/chart/index.vue

@@ -71,16 +71,16 @@ Graph.registerPortLayout('more', (portsPositionArgs, elemBBox) => {
     }
   })
 })
-const emits = defineEmits([])
+const emits = defineEmits(['init'])
 const props = defineProps({
   data: <any>{}
 })
 const {proxy}: any = getCurrentInstance()
 const state: any = reactive({
   graph: null,
-  isPort: false
+  isPort: false,
+  isInitEdges: false
 })
-provide('graph', state.graph)
 const ref_chart = ref()
 const workflowFuncInject = inject('workflowFunc', {} as WorkflowFunc)
 const initChart = () => {
@@ -150,21 +150,25 @@ const initChart = () => {
   state.graph.zoomToFit({ maxScale: 1 })
   state.graph.centerContent() // 居中显示
   initWatch()
-  // positionPort()
+  emits('init', state.graph)
 }
 const initNodes = () => {
   props.data.nodes.forEach(v => {
     state.graph.addNode(handleNode(v))
   })
+
 }
 const initEdges = () => {
-  props.data.edges.forEach(v => {
-    const targetNode = state.graph.getCellById(v.target)
-    targetNode.setData({
-      edgeSource: v.port || v.source
+  if (!state.isInitEdges) {
+    props.data.edges.forEach(v => {
+      const targetNode = state.graph.getCellById(v.target)
+      targetNode.setData({
+        edgeSource: v.port || v.source
+      }, {deep: false})
+      state.graph.addEdge(handleEdge(v))
     })
-    state.graph.addEdge(handleEdge(v))
-  })
+    state.isInitEdges = true
+  }
 }
 const initWatch = () => {
   state.graph.on('node:click', ({ e, x, y, node, view, port }) => {

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

@@ -43,10 +43,10 @@ const state: any = reactive({})
 const onAddNode = (type) => {
   const node = getNodeDefault(type)
   const sons = props.graph.getSuccessors(props.node, {breadthFirst: true, deep: false, distance: 1}).filter(v => v.data.edgeSource === props.port.id)
+  console.log(sons)
   const diff = 100
   let X = 0
   let Y = 0
-  console.log(sons)
   if (sons.length > 0) {
     sons.forEach(s => {
       const {x, y} = s.position()
@@ -69,12 +69,15 @@ const onAddNode = (type) => {
     source: props.port.args.nodeId,
     port: '',
   }
+  console.log(props.port)
   if (props.port.args.type === 'more') {
     edge.port = props.port.id
     node.data.edgeSource = props.port.id
   } else {
     node.data.edgeSource = `${props.node.id}_end`
   }
+  console.log(node)
+  console.log(edge)
   props.graph.addNode(handleNode(node))
   props.graph.addEdge(handleEdge(edge))
 }

src/views/workflow/index.vue

@@ -3,7 +3,7 @@
     <TeleportContainer/>
     <el-button style="position: absolute; top: 0;left: 0; z-index: 2" type="primary" @click="getJsonData">保存配置</el-button>
     <div class="workflow-chart">
-      <workflowChart :data="state.workflowData" ref="ref_workflow"/>
+      <workflowChart :data="state.workflowData" ref="ref_workflow" @init="graph => graphRef = graph"/>
     </div>
     <workflowPanel v-model:show="state.showPanel" :node="state.currentNode"/>
   </div>
@@ -25,7 +25,9 @@ const state: any = reactive({
   workflowData: null,
   showPanel: false,
   currentNode: null,
+  graph: null
 })
+const graphRef = ref(null)
 const ref_workflow = ref()
 provide('workflowFunc', <WorkflowFunc>{
   nodeClick: (node) => {
@@ -33,6 +35,8 @@ provide('workflowFunc', <WorkflowFunc>{
     state.showPanel = true
   }
 })
+provide('graph', graphRef)
+
 const getJsonData = () => {
   const data = ref_workflow.value.toJSON()
   console.log(data)

src/views/workflow/mockJson.ts

@@ -25,10 +25,16 @@ export const data = {
             }
           },
           {
-            "id": "7171167d-873b-4621-9ce1-dd45f9f4c9c3",
+            "id": "a4d6eebf-3327-4e73-8ddf-4d3d822ecfa4",
             "data": {
               "p1": "条件分支1的桩2"
             }
+          },
+          {
+            "id": "7171167d-873b-4621-9ce1-dd45f9f4c9c3",
+            "data": {
+              "p1": "条件分支1的桩3"
+            }
           }
         ],
         "p1": "条件分支1的的参数1",
@@ -64,11 +70,11 @@ export const data = {
       "target": "676e9ade-d857-4fea-b2d4-ff9484dcebb8",
       "source": "3ba412bb-3772-4f61-85de-095f4017858c"
     },
-    {
-      "target": "b39b1a2f-8474-456b-8859-ce0b6597dd47",
-      "source": "676e9ade-d857-4fea-b2d4-ff9484dcebb8",
-      "port": "7171167d-873b-4621-9ce1-dd45f9f4c9c3"
-    }
+    // {
+    //   "target": "b39b1a2f-8474-456b-8859-ce0b6597dd47",
+    //   "source": "676e9ade-d857-4fea-b2d4-ff9484dcebb8",
+    //   "port": "7171167d-873b-4621-9ce1-dd45f9f4c9c3"
+    // }
   ]
 }
 

src/views/workflow/nodes/index.vue

@@ -27,7 +27,6 @@ const state: any = reactive({
 })
 const ref_node = ref()
 onMounted(() => {
-  console.log(123)
   state.node = getNode()
   state.nodeData = state.node.data
   nextTick(() => {

src/views/workflow/panel/is-else/index.vue

@@ -44,6 +44,7 @@ const onAddPort = () => {
     id: data.id,
     group: 'more',
     args: {
+      type: 'more',
       portId: data.id,
       nodeId: props.node.id,
       dy: 0