feat: 动态自定义节点-1

src/views/components/ConfigPanel/ConfigNode/index.vue

@@ -349,7 +349,7 @@ let nodeType = computed({
 watch(
   () => props.id,
   () => {
-    curCel = nodeOpt(props.id) as Cell
+    curCel = nodeOpt(props.id) as unknown as Cell
     if (curCel) {
       ZIndex.value = curCel.getZIndex() || 0
       isNodeFill.value = false

src/views/graph/index.ts

@@ -12,7 +12,7 @@ import './shape'
 
 export default class FlowGraph {
   public static graph: Graph
-  private static stencil: Addon.Stencil
+  public static stencil: Addon.Stencil
 
   /**
    * 初始化方法
@@ -172,8 +172,7 @@ export default class FlowGraph {
       return this.graph
     }
     this.initStencil()
-    this.initShape()
-    // this.initGraphShape()
+    // this.initShape()
     this.initEvent()
     return this.graph
   }
@@ -231,7 +230,7 @@ export default class FlowGraph {
     stencilContainer?.appendChild(this.stencil.container)
   }
   // 初始化具体每个根节点下不同类型节点
-  private static initShape() {
+  public static initShape() {
     const { graph } = this
     // 基础节点
     const r1 = graph.createNode({
@@ -314,35 +313,26 @@ export default class FlowGraph {
     })
 
     // 子流程节点
-    const s1 = graph.createNode({
-      shape: 'sub-flow-rect',
-      attrs: {
-        title: {
-          text: 'XX子流程'
-        },
-        text: {
-          text: '测试xx流程'
-        },
-        lip: {
-          transform: 'scale(0.01)'
-        }
-      }
-    })
-    const s2 = graph.createNode({
-      shape: 'sub-flow-rect'
-    })
-    const s3 = graph.createNode({
-      shape: 'sub-flow-rect'
-    })
-    const s4 = graph.createNode({
-      shape: 'sub-flow-rect'
-    })
-    const s5 = graph.createNode({
-      shape: 'sub-flow-rect'
-    })
-    const L1 = graph.createNode({
-      shape: 'logic-flow-path'
-    })
+    // const s1 = graph.createNode({
+    //   shape: 'sub-flow-rect',
+    //   attrs: {
+    //     title: {
+    //       text: 'XX子流程'
+    //     },
+    //     text: {
+    //       text: '测试xx流程'
+    //     },
+    //     lip: {
+    //       transform: 'scale(0.01)'
+    //     }
+    //   }
+    // })
+    // const s2 = graph.createNode({
+    //   shape: 'sub-flow-rect'
+    // })
+    // const L1 = graph.createNode({
+    //   shape: 'logic-flow-path'
+    // })
 
     // 组合节点
     const c1 = graph.createNode({
@@ -368,8 +358,8 @@ export default class FlowGraph {
     })
 
     this.stencil.load([r1, r2, r3, r4], 'basic')
-    this.stencil.load([s1, s2, s3, s4, s5], 's-pro')
-    this.stencil.load([L1], 'logic')
+    // this.stencil.load([s1, s2], 's-pro')
+    // this.stencil.load([L1], 'logic')
     this.stencil.load([c1, c2, c3], 'combination')
     this.stencil.load([g1], 'group')
   }

src/views/graph/shape.ts

@@ -87,6 +87,10 @@ export const SubRect = Graph.registerNode('sub-flow-rect', {
     {
       tagName: 'text',
       selector: 'text'
+    },
+    {
+      tagName: 'flowId',
+      selector: 'flowId'
     }
   ],
   ports: { ...basicPorts }

src/views/test/detail.vue

@@ -18,11 +18,11 @@
 <script setup lang="ts">
 import { Graph } from '@antv/x6'
 import FlowGraph from '../graph'
-// import { Edit } from '@element-plus/icons-vue'
-
+import graphData from '../graph/data/data'
 import { $, getContainerSize } from '@/utils'
 
 const router = useRouter()
+const route = useRoute()
 
 let graph: Graph
 
@@ -41,7 +41,8 @@ onUnmounted(() => {
 const getFlowJson = () => {
   // 使用setTimeout模拟一下
   setTimeout(() => {
-    const graphJson = JSON.parse(window.localStorage.getItem('graphJson') || '{}')
+    const id = route.params.id as string
+    const graphJson = graphData[id].cells || '{}'
     if (graphJson && JSON.stringify(graphJson) !== '{}') {
       initFlowImage(graphJson)
     } else {

src/views/test/flow.vue

@@ -47,6 +47,54 @@ const initGraph = () => {
     $('#container').getBoundingClientRect().width,
     $('#container').getBoundingClientRect().height
   )
+  FlowGraph.initShape()
+  const id = route.params.id as string
+  Object.keys(graphData).forEach(item => {
+    if (item != id) {
+      const s1 = graph.value.createNode({
+        shape: 'sub-flow-rect',
+        attrs: {
+          title: {
+            text: 'XX子流程'
+          },
+          text: {
+            text: '测试xx流程'
+          },
+          lip: {
+            transform: 'scale(0.01)'
+          }
+        }
+      })
+      FlowGraph.stencil.load([s1], 's-pro')
+    }
+    console.log('key', item)
+  })
+  // 子流程节点
+  // const s1 = graph.value.createNode({
+  //   id: id,
+  //   shape: 'sub-flow-rect',
+  //   attrs: {
+  //     title: {
+  //       text: 'XX子流程'
+  //     },
+  //     text: {
+  //       text: '测试xx流程'
+  //     },
+  //     lip: {
+  //       transform: 'scale(0.01)'
+  //     }
+  //   }
+  // })
+  // const s2 = graph.value.createNode({
+  //   shape: 'sub-flow-rect'
+  // })
+  const L1 = graph.value.createNode({
+    shape: 'logic-flow-path'
+  })
+
+  // FlowGraph.stencil.load([s1, s2], 's-pro')
+  FlowGraph.stencil.load([L1], 'logic')
+
   graph.value?.on('node:contextmenu', ({ e, x, y, cell, view }) => {
     const cells = graph.value?.getSelectedCells() || []
     if (!cells.length) {
@@ -54,7 +102,7 @@ const initGraph = () => {
     }
     handleContextmenu(e, cell)
   })
-  const id = route.params.id as string
+
   FlowGraph.initGraphShape(graphData[id].cells)
   isReady.value = true
   const resizeFn = () => {