feat: 添加逻辑节点

src/views/graph/index.ts

@@ -3,10 +3,7 @@ import ContextMenu from '@imengyu/vue3-context-menu'
 
 import insertCss from 'insert-css'
 import './shape'
-import { customPorts } from './ports'
 import graphData from './data/data'
-import { getImageUrl } from '@/utils'
-import { text } from 'stream/consumers'
 ;(insertCss as any)(`
   @keyframes ant-line {
     to {
@@ -328,6 +325,9 @@ export default class FlowGraph {
         },
         text: {
           text: '测试xx流程'
+        },
+        lip: {
+          transform: 'scale(0.01)'
         }
       }
     })
@@ -343,8 +343,8 @@ export default class FlowGraph {
     const s5 = graph.createNode({
       shape: 'sub-flow-rect'
     })
-    const s6 = graph.createNode({
-      shape: 'sub-flow-rect'
+    const L1 = graph.createNode({
+      shape: 'logic-flow-path'
     })
 
     // 组合节点
@@ -372,6 +372,7 @@ 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([c1, c2, c3], 'combination')
     this.stencil.load([g1], 'group')
   }

src/views/graph/shape.ts

@@ -1,6 +1,5 @@
 import { Graph, Dom, Node } from '@antv/x6'
 import { basicPorts, customPorts } from './ports'
-import ContextMenu from '@imengyu/vue3-context-menu'
 
 // 基础节点
 export const FlowChartRect = Graph.registerNode('flow-chart-rect', {
@@ -74,9 +73,21 @@ export const SubRect = Graph.registerNode('sub-flow-rect', {
       fontSize: 12,
       fill: 'rgba(0,0,0,0.6)',
       'text-anchor': 'start'
+    },
+    lip: {
+      fill: '#d4237a',
+      refX: 10
+      // transform: 'scale(0.02)'
     }
   },
   markup: [
+    {
+      tagName: 'path',
+      selector: 'lip',
+      attrs: {
+        d: 'M366.336 270.506667c20.736 19.029333 21.333333 49.493333 1.536 68.949333l-1.536 1.536L131.84 554.666667l234.496 213.674666c20.736 18.944 21.333333 49.322667 1.536 68.864l-1.536 1.536a58.538667 58.538667 0 0 1-75.605333 1.450667l-1.706667-1.450667-273.066667-248.917333a46.677333 46.677333 0 0 1-1.536-68.864l1.536-1.450667 273.066667-248.917333a58.453333 58.453333 0 0 1 77.312 0z m593.92 425.216c35.242667 0 63.744 26.709333 63.744 59.733333 0 32.256-27.306667 58.624-61.525333 59.733333H509.696c-35.157333 0-63.658667-26.794667-63.658667-59.733333 0-32.341333 27.306667-58.624 61.44-59.733333h452.778667z m0-398.250667c35.242667 0 63.744 26.794667 63.744 59.733333 0 32.341333-27.306667 58.624-61.525333 59.733334H509.696c-35.157333 0-63.658667-26.709333-63.658667-59.733334 0-32.256 27.306667-58.624 61.44-59.733333h452.778667z'
+      }
+    },
     {
       tagName: 'rect',
       selector: 'body'
@@ -92,6 +103,46 @@ export const SubRect = Graph.registerNode('sub-flow-rect', {
   ],
   ports: { ...basicPorts }
 })
+
+// 逻辑节点
+export const logicPath = Graph.registerNode('logic-flow-path', {
+  inherit: 'rect',
+  width: 80,
+  height: 42,
+  attrs: {
+    body: {
+      stroke: '#5F95FF',
+      strokeWidth: 1,
+      fill: '#ffffff'
+    },
+    text: {
+      fontSize: 12,
+      fill: '#080808'
+    },
+    lip: {
+      fill: '#d4237a',
+      transform: 'scale(0.02)'
+    }
+  },
+  markup: [
+    {
+      tagName: 'rect',
+      selector: 'body'
+    },
+    {
+      tagName: 'text',
+      selector: 'text'
+    },
+    {
+      tagName: 'path',
+      selector: 'lip',
+      attrs: {
+        d: 'M366.336 270.506667c20.736 19.029333 21.333333 49.493333 1.536 68.949333l-1.536 1.536L131.84 554.666667l234.496 213.674666c20.736 18.944 21.333333 49.322667 1.536 68.864l-1.536 1.536a58.538667 58.538667 0 0 1-75.605333 1.450667l-1.706667-1.450667-273.066667-248.917333a46.677333 46.677333 0 0 1-1.536-68.864l1.536-1.450667 273.066667-248.917333a58.453333 58.453333 0 0 1 77.312 0z m593.92 425.216c35.242667 0 63.744 26.709333 63.744 59.733333 0 32.256-27.306667 58.624-61.525333 59.733333H509.696c-35.157333 0-63.658667-26.794667-63.658667-59.733333 0-32.341333 27.306667-58.624 61.44-59.733333h452.778667z m0-398.250667c35.242667 0 63.744 26.794667 63.744 59.733333 0 32.341333-27.306667 58.624-61.525333 59.733334H509.696c-35.157333 0-63.658667-26.709333-63.658667-59.733334 0-32.256 27.306667-58.624 61.44-59.733333h452.778667z'
+      }
+    }
+  ],
+  ports: { ...basicPorts }
+})
 // 组合节点
 export const FlowChartImageRect = Graph.registerNode('flow-chart-image-rect', {
   inherit: 'rect',

src/views/test/index.scss

@@ -21,7 +21,6 @@
   width: 69%;
   height: 100%;
 }
-
 .panel .toolbar {
   width: 100%;
   height: 38px;