Initial commit

modeler/src/views/decision/builder/graph.ts

@@ -7,9 +7,10 @@
  * that was distributed with this source code.
  */
 
-import { Clipboard, Edge, Graph, History, Keyboard, Path, Selection, Snapline, Transform } from '@antv/x6';
-import type { BaseElement } from '../types';
+import { Edge, Graph, Path, Selection } from '@antv/x6';
+import type { ModelElement } from './element';
 import type { Connecting } from '@antv/x6/lib/graph/options';
+import {createLineOptions} from './line'
 
 Graph.registerConnector(
   'sequenceFlowConnector',
@@ -33,30 +34,30 @@ Graph.registerConnector(
   true,
 );
 
-
 export const createGraphConnectingAttributes = (): Partial<Connecting> => {
+  const lineOptions = createLineOptions();
   return {
     snap: true, // 当 snap 设置为 true 时连线的过程中距离节点或者连接桩 50px 时会触发自动吸附
     allowBlank: false,  // 是否允许连接到画布空白位置的点，默认为 true
     allowLoop: false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 true
     highlight: true,  // 当连接到节点时，通过 sourceAnchor 来指定源节点的锚点。
-    connector: 'sequenceFlowConnector',
-    connectionPoint: 'boundary',  // 指定连接点，默认值为 boundary。
+    connector: 'smooth',
+    connectionPoint: 'anchor',  // 指定连接点，默认值为 boundary。
     anchor: 'center',
-
-    router: 'manhattan',
-    // connector: {
-    //   name: 'rounded',
-    //   args: {
-    //     radius: 8,
-    //   },
-    // },
-    // connectionPoint: 'anchor',
-
     // validateMagnet({ magnet }) {
     //   return magnet.getAttribute('port-group') !== 'top'
     // },
     // 验证连接
+    createEdge(this: Graph) {
+      const edge: Edge = this.createEdge({
+        shape: 'edge',
+        ...lineOptions, // 应用动画配置
+        attrs: lineOptions.attrs,
+        animation: lineOptions.animation,
+        markup: lineOptions.markup,
+      })
+      return edge;
+    },
     validateConnection(this: Graph, { sourceCell, targetCell }) {
       console.error('validateConnection');
       if (!sourceCell || !targetCell) return false;
@@ -67,21 +68,28 @@ export const createGraphConnectingAttributes = (): Partial<Connecting> => {
       }
 
       // const sourceData = sourceCell.getData() as GraphElement;
-      const targetData = targetCell.getData() as BaseElement;
+      const targetData = targetCell.getData() as ModelElement;
 
       // 根节点不能作为子节点
-      if (targetData.type === 'root') {
+      if (targetData.type === 'startEvent') {
         return false;
       }
 
-      // 检查是否已存在相同连接（保留原有逻辑）
-      const edges: Edge[] = this.getEdges();
-      const existingConnection = edges.find(edge =>
-        edge.getSourceCell() === sourceCell &&
-        edge.getTargetCell() === targetCell,
-      );
+      // 4. 新增核心逻辑：检查源节点是否已有出边（已连接其他节点）
+      // const hasOutgoingEdge = this.getOutgoingEdges(sourceCell);
+      // if (hasOutgoingEdge && hasOutgoingEdge.length > 1) {
+      //   return false;
+      // }
 
-      return !existingConnection;
+      // 检查是否已存在相同连接
+      // const edges: Edge[] = this.getEdges();
+      // const existingConnection = edges.find(edge =>
+      //   edge.getSourceCell() === sourceCell &&
+      //   edge.getTargetCell() === targetCell,
+      // );
+      //
+      // return !existingConnection;
+      return true;
     },
   };
 };
@@ -103,10 +111,10 @@ export const createGraphCanvas = (container: HTMLDivElement, readonly: boolean =
     },
     mousewheel: {
       enabled: true,
-      zoomAtMousePosition: true,
       modifiers: 'ctrl',
+      factor: 1.1,
+      maxScale: 1.5,
       minScale: 0.5,
-      maxScale: 3,
     },
     highlighting: {
       magnetAdsorbed: {
@@ -162,16 +170,7 @@ export const createGraphCanvas = (container: HTMLDivElement, readonly: boolean =
       modifiers: 'shift',
       rubberband: true,
     }),
-  ).use(
-    new Transform({
-      resizing: false,
-      rotating: false,
-    }),
-  )
-    .use(new Snapline())
-    .use(new Keyboard())
-    .use(new Clipboard())
-    .use(new History());
+  );
 
   return graph;