连线样式

src/views/workflow/chart/index.vue

@@ -8,7 +8,7 @@
 
 <script setup lang="ts">
 import {createVNode, getCurrentInstance, nextTick, onMounted, reactive, ref, render, watch} from "vue";
-import {Graph, Shape} from '@antv/x6'
+import {Graph, Path, Shape} from '@antv/x6'
 import {getNodeDefault, lineStyle} from "@/views/workflow/config";
 import nodeAdd from './node-add.vue'
 import {register} from "@antv/x6-vue-shape";
@@ -69,6 +69,26 @@ Graph.registerPortLayout('more', (portsPositionArgs, elemBBox) => {
     }
   })
 })
+Graph.registerConnector(
+  'algo-connector',
+  (s, e) => {
+    const offset = 6
+    const deltaX = Math.abs(e.x - s.x)
+    const control = Math.floor((deltaX / 3) * 2)
+
+    const v1 = { x: s.x + offset + control, y: s.y }
+    const v2 = { x: e.x - offset - control, y: e.y }
+
+    return Path.normalize(
+      `M ${s.x} ${s.y}
+       L ${s.x} ${s.y}
+       C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${e.x} ${e.y}
+       L ${e.x} ${e.y}
+      `,
+    )
+  },
+  true,
+)
 Graph.registerNodeTool('contextmenu', ContextMenuTool, true)
 Graph.registerEdgeTool('contextmenu', ContextMenuTool, true)
 const WorkflowStore = useWorkflowStore()
@@ -124,12 +144,13 @@ const initChart = () => {
           endDirections: ['left'],
         },
       },
-      connector: {
-        name: 'rounded',
-        args: {
-          radius: 20,
-        },
-      },
+      connector: 'algo-connector',
+      // connector: {
+      //   name: 'rounded',
+      //   args: {
+      //     radius: 20,
+      //   },
+      // },
       createEdge: () => new Shape.Edge({
         attrs: lineStyle
       })

src/views/workflow/config.ts

@@ -9,6 +9,7 @@ export const lineStyle = {
   line: {
     stroke: '#8f8f8f',
     strokeWidth: 1,
+    targetMarker: null
   },
 }