@mx-sose-front/mx-sose-graph 1.1.8 → 1.2.1

package/src/utils/edgeUtils.ts

@@ -1,30 +1,59 @@
 // edge-utils.ts
-import type { Shape } from "../types";
+import type { Shape, Waypoint } from "../types";
 import { pickTarget } from "./hittest";
 import { useGraphStore } from '../store/graphStore';
 import { snapPinToParentEdge } from './pinUtils';
 import type { IHighlightUtils } from "../hooks/useHighlight";
+import { workerManager } from './workerManager';
 
 
 export class EdgeUtils {
   /**
-   * 更新与指定图元相关的连线端点
+   * 更新与指定图元相关的连线端点（同步版本）
    * @param shapes 所有图元
    * @param changedIds 发生变化的图元ID列表
    * @param updateShape 更新图元的回调函数
+   * @param edgeIndex 可选，nodeId → 关联 edges 的索引（来自 graphStore.edgesByNodeId）
+   * @param shapeMapIndex 可选，id → Shape 的索引（来自 graphStore.shapeMap）
    */
   static updateRelatedEdges(
     shapes: Shape[],
     changedIds: string[],
-    updateShape: (shape: Shape) => void
+    updateShape: (shape: Shape) => void,
+    edgeIndex?: Map<string, Shape[]>,
+    shapeMapIndex?: Map<string, Shape>
   ) {
-    const edges = shapes.filter((shape) => shape.shapeType === "edge");
+    // 收集与 changedIds 相关的所有 edge（去重）
+    let relatedEdges: Shape[]
+    if (edgeIndex) {
+      const seen = new Set<string>()
+      relatedEdges = []
+      for (const id of changedIds) {
+        const edges = edgeIndex.get(id)
+        if (edges) {
+          for (const e of edges) {
+            if (!seen.has(e.id)) {
+              seen.add(e.id)
+              relatedEdges.push(e)
+            }
+          }
+        }
+      }
+    } else {
+      // 回退：全量 filter
+      relatedEdges = shapes.filter((shape) => shape.shapeType === "edge")
+    }
+
+    // 用于 O(1) 查找 source/target shape
+    const findShape = shapeMapIndex
+      ? (id: string) => shapeMapIndex.get(id) ?? null
+      : (id: string) => shapes.find(s => s.id === id) ?? null
 
     // 按源-目标对分组，为每组中的线条生成不同的偏移
     // 同时处理反向连接（A→B 和 B→A）的情况
     const edgeGroups = new Map<string, Shape[]>();
     
-    edges.forEach((edge) => {
+    relatedEdges.forEach((edge) => {
       if (edge.sourceId && edge.targetId) {
         // 创建源-目标对的规范化键（确保 A-B 和 B-A 使用相同的键）
         const isForward = edge.sourceId.localeCompare(edge.targetId) <= 0;
@@ -39,76 +68,28 @@ export class EdgeUtils {
       }
     });
 
+    const changedSet = new Set(changedIds)
+
     // 处理每个分组
     edgeGroups.forEach((groupEdges, groupKey) => {
       if (groupEdges.length > 1) {
         // 如果同一源-目标对有多个线条，为每条线生成不同的偏移
         groupEdges.forEach((edge, index) => {
-          const sourceChanged = edge.sourceId && changedIds.includes(edge.sourceId);
-          const targetChanged = edge.targetId && changedIds.includes(edge.targetId);
+          const sourceChanged = edge.sourceId && changedSet.has(edge.sourceId);
+          const targetChanged = edge.targetId && changedSet.has(edge.targetId);
 
           if (sourceChanged || targetChanged) {
-            const sourceShape = shapes.find((s) => s.id === edge.sourceId);
-            const targetShape = shapes.find((s) => s.id === edge.targetId);
+            const sourceShape = edge.sourceId ? findShape(edge.sourceId) : null;
+            const targetShape = edge.targetId ? findShape(edge.targetId) : null;
 
             if (sourceShape && targetShape && sourceShape.bounds && targetShape.bounds) {
-              // 计算基本连接点
-              const { x: sx = 0, y: sy = 0, width: sw = 0, height: sh = 0 } = sourceShape.bounds;
-              const { x: tx = 0, y: ty = 0, width: tw = 0, height: th = 0 } = targetShape.bounds;
-
-              // 计算中心点
-              const sourceCenter = { x: sx + sw / 2, y: sy + sh / 2 };
-              const targetCenter = { x: tx + tw / 2, y: ty + th / 2 };
-
-              // 计算连接方向
-              const dx = targetCenter.x - sourceCenter.x;
-              const dy = targetCenter.y - sourceCenter.y;
-
-              // 生成基于索引的偏移量（小到不会明显影响，但足以分开线条）
-              const offsetDistance = 5 * (index + 1);
-              
-              // 根据方向计算偏移方向
-              let offsetX = 0, offsetY = 0;
-              if (Math.abs(dx) > Math.abs(dy)) {
-                // 水平方向为主，垂直偏移
-                offsetY = offsetDistance;
-              } else {
-                // 垂直方向为主，水平偏移
-                offsetX = offsetDistance;
-              }
-              
-              // 确保线条交替偏移方向，避免全部偏向一侧
-              if (index % 2 === 1) {
-                offsetX = -offsetX;
-                offsetY = -offsetY;
-              }
-
-              // 确定连接点，添加偏移
-              let sourcePoint, targetPoint;
-
-              if (Math.abs(dx) > Math.abs(dy)) {
-                // 水平方向
-                sourcePoint = dx > 0
-                  ? { x: sx + sw, y: sourceCenter.y + offsetY }
-                  : { x: sx, y: sourceCenter.y + offsetY };
-
-                targetPoint = dx > 0
-                  ? { x: tx, y: targetCenter.y + offsetY }
-                  : { x: tx + tw, y: targetCenter.y + offsetY };
-              } else {
-                // 垂直方向
-                sourcePoint = dy > 0
-                  ? { x: sourceCenter.x + offsetX, y: sy + sh }
-                  : { x: sourceCenter.x + offsetX, y: sy };
-
-                targetPoint = dy > 0
-                  ? { x: targetCenter.x + offsetX, y: ty }
-                  : { x: targetCenter.x + offsetX, y: ty + th };
-              }
-
-              // 更新连线，只使用源点和目标点确保线条保持直线
-              // 通过调整端点位置而不是添加中间点来避免线条重叠
-              const waypoints = [sourcePoint, targetPoint];
+              // 使用最短距离边中点算法（与 completeConnection 一致）
+              const { waypoints } = this.buildEdgeWaypoints(
+                sourceShape.bounds,
+                targetShape.bounds,
+                index,
+                sourceShape.id === targetShape.id
+              );
 
               const updatedEdge = {
                 ...edge,
@@ -120,54 +101,27 @@ export class EdgeUtils {
           }
         });
       } else {
-        // 单线条情况，使用原有的逻辑
+        // 单线条情况
         const edge = groupEdges[0];
-        const sourceChanged = edge.sourceId && changedIds.includes(edge.sourceId);
-        const targetChanged = edge.targetId && changedIds.includes(edge.targetId);
+        const sourceChanged = edge.sourceId && changedSet.has(edge.sourceId);
+        const targetChanged = edge.targetId && changedSet.has(edge.targetId);
 
         if (sourceChanged || targetChanged) {
-          const sourceShape = shapes.find((s) => s.id === edge.sourceId);
-          const targetShape = shapes.find((s) => s.id === edge.targetId);
+          const sourceShape = edge.sourceId ? findShape(edge.sourceId) : null;
+          const targetShape = edge.targetId ? findShape(edge.targetId) : null;
 
           if (sourceShape && targetShape && sourceShape.bounds && targetShape.bounds) {
-            const { x: sx = 0, y: sy = 0, width: sw = 0, height: sh = 0 } = sourceShape.bounds;
-            const { x: tx = 0, y: ty = 0, width: tw = 0, height: th = 0 } = targetShape.bounds;
-
-            // 计算中心点
-            const sourceCenter = { x: sx + sw / 2, y: sy + sh / 2 };
-            const targetCenter = { x: tx + tw / 2, y: ty + th / 2 };
-
-            // 计算连接方向
-            const dx = targetCenter.x - sourceCenter.x;
-            const dy = targetCenter.y - sourceCenter.y;
-
-            // 确定连接点
-            let sourcePoint, targetPoint;
-
-            if (Math.abs(dx) > Math.abs(dy)) {
-              // 水平方向
-              sourcePoint = dx > 0
-                ? { x: sx + sw, y: sourceCenter.y }
-                : { x: sx, y: sourceCenter.y };
-
-              targetPoint = dx > 0
-                ? { x: tx, y: targetCenter.y }
-                : { x: tx + tw, y: targetCenter.y };
-            } else {
-              // 垂直方向
-              sourcePoint = dy > 0
-                ? { x: sourceCenter.x, y: sy + sh }
-                : { x: sourceCenter.x, y: sy };
-
-              targetPoint = dy > 0
-                ? { x: targetCenter.x, y: ty }
-                : { x: targetCenter.x, y: ty + th };
-            }
+            // 使用最短距离边中点算法（与 completeConnection 一致），index=0 无偏移
+            const { waypoints } = this.buildEdgeWaypoints(
+              sourceShape.bounds,
+              targetShape.bounds,
+              0,
+              sourceShape.id === targetShape.id
+            );
 
-            // 更新连线
             const updatedEdge = {
               ...edge,
-              waypointId: JSON.stringify([sourcePoint, targetPoint]),
+              waypointId: JSON.stringify(waypoints),
             };
 
             updateShape(updatedEdge);
@@ -177,6 +131,46 @@ export class EdgeUtils {
     });
   }
 
+  /**
+   * 更新与指定图元相关的连线端点（异步版本，使用 Web Worker）
+   * 内置竞态控制：如果在 Worker 返回前又发起了新的调用，旧结果会被丢弃。
+   * @param shapes 所有图元
+   * @param changedIds 发生变化的图元ID列表
+   * @param updateShape 更新图元的回调函数
+   * @param edgeIndex 可选，nodeId → 关联 edges 的索引（来自 graphStore.edgesByNodeId）
+   * @param shapeMapIndex 可选，id → Shape 的索引（来自 graphStore.shapeMap）
+   */
+  static async updateRelatedEdgesAsync(
+    shapes: Shape[],
+    changedIds: string[],
+    updateShape: (shape: Shape) => void,
+    edgeIndex?: Map<string, Shape[]>,
+    shapeMapIndex?: Map<string, Shape>
+  ): Promise<void> {
+    try {
+      const { version, result: updatedEdges } = await workerManager.updateRelatedEdges(
+        shapes,
+        changedIds,
+        edgeIndex,
+        shapeMapIndex
+      );
+
+      // 竞态保护：只采纳最新版本的结果，丢弃过期计算
+      if (!workerManager.isLatestVersion('updateRelatedEdges', version)) {
+        return;
+      }
+
+      // 更新所有返回的边缘
+      updatedEdges.forEach((edge: Shape) => {
+        updateShape(edge);
+      });
+    } catch (error) {
+      console.error('Error in updateRelatedEdgesAsync:', error);
+      // 回退到同步版本
+      this.updateRelatedEdges(shapes, changedIds, updateShape, edgeIndex, shapeMapIndex);
+    }
+  }
+
   /**
    * 获取图形的四个中心点（上下左右）
    */
@@ -208,14 +202,153 @@ export class EdgeUtils {
   }
 
   /**
-   * 找到距离鼠标位置最近的连接点
+   * 生成图元自连接时使用的半环路径。
+   * 路径使用正交折线，从图元上边中点出发，沿右侧绕到下边中点，
+   * 让自连接的观感更接近矩形转角线。
+   */
+  static buildSelfLoopWaypoints(
+    bounds: { x?: number; y?: number; width?: number; height?: number },
+    groupIndex: number = 0
+  ): {
+    sourcePoint: { x: number; y: number };
+    targetPoint: { x: number; y: number };
+    waypoints: Waypoint[];
+  } {
+    const safeBounds = {
+      x: bounds.x ?? 0,
+      y: bounds.y ?? 0,
+      width: bounds.width ?? 0,
+      height: bounds.height ?? 0,
+    };
+
+    const { x, y, width, height } = safeBounds;
+    const centerX = x + width / 2;
+    const sourcePoint = { x: centerX, y };
+    const targetPoint = { x: centerX, y: y + height };
+
+    // 保持上下抬升高度不变，只缩短右侧外扩距离，让右边那段线更贴近图元。
+    const outwardOffset = Math.max(width * 0.24, 20) + groupIndex * 12;
+    const verticalPadding = Math.max(height * 0.45, 26) + groupIndex * 10;
+    const upperPoint = {
+      x: centerX,
+      y: y - verticalPadding,
+    };
+    const upperRightPoint = {
+      x: x + width + outwardOffset,
+      y: y - verticalPadding,
+    };
+    const lowerRightPoint = {
+      x: x + width + outwardOffset,
+      y: y + height + verticalPadding,
+    };
+    const lowerPoint = {
+      x: centerX,
+      y: y + height + verticalPadding,
+    };
+
+    return {
+      sourcePoint,
+      targetPoint,
+      waypoints: [sourcePoint, upperPoint, upperRightPoint, lowerRightPoint, lowerPoint, targetPoint],
+    };
+  }
+
+  /**
+   * 统一生成边的折点数据。
+   * 普通连线仍使用最近边中点，自连接则走专用半环路径。
+   */
+  static buildEdgeWaypoints(
+    sBounds: { x?: number; y?: number; width?: number; height?: number },
+    tBounds: { x?: number; y?: number; width?: number; height?: number },
+    groupIndex: number,
+    isSelfLoop: boolean
+  ): {
+    sourcePoint: { x: number; y: number };
+    targetPoint: { x: number; y: number };
+    waypoints: Waypoint[];
+  } {
+    if (isSelfLoop) {
+      return this.buildSelfLoopWaypoints(sBounds, groupIndex);
+    }
+
+    const { sourcePoint, targetPoint } = this.calcBestEndpoints(
+      sBounds,
+      tBounds,
+      groupIndex
+    );
+
+    return {
+      sourcePoint,
+      targetPoint,
+      waypoints: [sourcePoint, targetPoint],
+    };
+  }
+
+  /**
+   * 计算两个图元之间的最佳连接端点（共用算法）
+   * 使用 4×4 边中点最短距离组合，与 completeConnection 保持一致。
+   * @param sBounds 源图元 bounds
+   * @param tBounds 目标图元 bounds
+   * @param groupIndex 同源-目标对中的索引，0 表示无偏移
+   */
+  static calcBestEndpoints(
+    sBounds: { x?: number; y?: number; width?: number; height?: number },
+    tBounds: { x?: number; y?: number; width?: number; height?: number },
+    groupIndex: number
+  ): { sourcePoint: { x: number; y: number }; targetPoint: { x: number; y: number } } {
+    const sb = { x: sBounds.x ?? 0, y: sBounds.y ?? 0, width: sBounds.width ?? 0, height: sBounds.height ?? 0 };
+    const tb = { x: tBounds.x ?? 0, y: tBounds.y ?? 0, width: tBounds.width ?? 0, height: tBounds.height ?? 0 };
+    const sourcePoints = this.getShapeCenterPoints(sb);
+    const targetPoints = this.getShapeCenterPoints(tb);
+
+    // 4×4 组合取最短距离
+    let minDist = Infinity;
+    let bestSrc = sourcePoints.top;
+    let bestTgt = targetPoints.top;
+    for (const sp of Object.values(sourcePoints)) {
+      for (const tp of Object.values(targetPoints)) {
+        const d = this.getDistance(sp, tp);
+        if (d < minDist) {
+          minDist = d;
+          bestSrc = sp;
+          bestTgt = tp;
+        }
+      }
+    }
+
+    // 多线偏移
+    if (groupIndex > 0) {
+      const dx = (tb.x + tb.width / 2) - (sb.x + sb.width / 2);
+      const dy = (tb.y + tb.height / 2) - (sb.y + sb.height / 2);
+      const offsetDistance = 5 * (groupIndex + 1);
+      let offsetX = 0, offsetY = 0;
+      if (Math.abs(dx) > Math.abs(dy)) {
+        offsetY = offsetDistance;
+      } else {
+        offsetX = offsetDistance;
+      }
+      if (groupIndex % 2 === 1) {
+        offsetX = -offsetX;
+        offsetY = -offsetY;
+      }
+      return {
+        sourcePoint: { x: bestSrc.x + offsetX, y: bestSrc.y + offsetY },
+        targetPoint: { x: bestTgt.x + offsetX, y: bestTgt.y + offsetY },
+      };
+    }
+
+    return { sourcePoint: bestSrc, targetPoint: bestTgt };
+  }
+
+  /**
+   * 找到距离鼠标位置最近的连接点（同步版本）
    */
   static findNearestConnectPoint(
     mousePos: { x: number; y: number },
     shape: Shape | undefined,
-    diagramBounds: any
+    diagramBounds?: any
   ) {
-    if (!shape?.bounds || !diagramBounds) return null;
+    if (!shape?.bounds) return null;
 
     const mouseX = mousePos.x;
     const mouseY = mousePos.y;
@@ -290,6 +423,22 @@ export class EdgeUtils {
     }
   }
 
+  /**
+   * 找到距离鼠标位置最近的连接点（异步版本，使用 Web Worker）
+   */
+  static async findNearestConnectPointAsync(
+    mousePos: { x: number; y: number },
+    shape: Shape | undefined
+  ): Promise<any> {
+    try {
+      return await workerManager.findNearestConnectPoint(mousePos, shape);
+    } catch (error) {
+      console.error('Error in findNearestConnectPointAsync:', error);
+      // 回退到同步版本（这里简化处理，不传递 diagramBounds）
+      return this.findNearestConnectPoint(mousePos, shape, null);
+    }
+  }
+
   /**
    * 完成连接操作，计算最终连接点
    */
@@ -298,223 +447,63 @@ export class EdgeUtils {
     targetShape: Shape,
     clickPoint: { x: number; y: number },
     currentConnectPoint: { x: number; y: number },
-    shapes: Shape[] = [] // 添加shapes参数，避免在静态方法中使用组合式函数
+    shapes: Shape[] = []
   ) {
-    // 如果源图元和目标图元是同一个，直接返回 null
-    if (sourceShape?.id && targetShape.id && sourceShape.id === targetShape.id) {
-      return null;
-    }
-
+    // 自连接不再直接拦截，而是交给专用的半环路径逻辑处理。
     if (!targetShape.bounds || !sourceShape?.bounds) return null;
 
-    // 计算源图元和目标图元的中心
-    const { x: sx = 0, y: sy = 0, width: sw = 0, height: sh = 0 } = sourceShape.bounds;
-    const { x: tx = 0, y: ty = 0, width: tw = 0, height: th = 0 } = targetShape.bounds;
-    
-    const sourceCenter = { x: sx + sw / 2, y: sy + sh / 2 };
-    const targetCenter = { x: tx + tw / 2, y: ty + th / 2 };
-
-    // 获取两个图元的所有边中点
-    const sourcePoints = this.getShapeCenterPoints({
-      x: sourceShape.bounds.x ?? 0,
-      y: sourceShape.bounds.y ?? 0,
-      width: sourceShape.bounds.width ?? 0,
-      height: sourceShape.bounds.height ?? 0,
-    });
-    const targetPoints = this.getShapeCenterPoints({
-      x: targetShape.bounds.x ?? 0,
-      y: targetShape.bounds.y ?? 0,
-      width: targetShape.bounds.width ?? 0,
-      height: targetShape.bounds.height ?? 0,
-    });
-    
-    // 找出源图元和目标图元之间距离最短的边中点组合
-    let minDistance = Infinity;
-    let bestSourcePoint = sourcePoints.top; // 默认值
-    let bestTargetPoint = targetPoints.top; // 默认值
-    
-    // 遍历所有可能的源点和目标点组合
-    Object.values(sourcePoints).forEach(sourcePoint => {
-      Object.values(targetPoints).forEach(targetPoint => {
-        const distance = this.getDistance(sourcePoint, targetPoint);
-        if (distance < minDistance) {
-          minDistance = distance;
-          bestSourcePoint = sourcePoint;
-          bestTargetPoint = targetPoint;
-        }
-      });
-    });
-    
-    // 使用最短距离的点作为连接点
-    const startPoint = bestSourcePoint;
-    let targetPoint = bestTargetPoint;
-    
-    // 以下是原始代码，保留以处理特殊情况（如果需要的话）
-    /*
-    const { x = 0, y = 0, width = 0, height = 0 } = targetShape.bounds;
-
-    const left = x;
-    const right = x + width;
-    const top = y;
-    const bottom = y + height;
-
-    const relativeX = clickPoint.x - x;
-    const relativeY = clickPoint.y - y;
-
-    const isInTopArea = relativeY < 0;
-    const isInBottomArea = relativeY > height;
-    const isInLeftArea = relativeX < 0;
-    const isInRightArea = relativeX > width;
-
-    if (isInTopArea) {
-      const constrainedX = Math.max(left, Math.min(right, clickPoint.x));
-      targetPoint = { x: constrainedX, y: top };
-    } else if (isInBottomArea) {
-      const constrainedX = Math.max(left, Math.min(right, clickPoint.x));
-      targetPoint = { x: constrainedX, y: bottom };
-    } else if (isInLeftArea) {
-      const constrainedY = Math.max(top, Math.min(bottom, clickPoint.y));
-      targetPoint = { x: left, y: constrainedY };
-    } else if (isInRightArea) {
-      const constrainedY = Math.max(top, Math.min(bottom, clickPoint.y));
-      targetPoint = { x: right, y: constrainedY };
-    } else {
-      const distances = {
-        top: Math.abs(clickPoint.y - top),
-        bottom: Math.abs(clickPoint.y - bottom),
-        left: Math.abs(clickPoint.x - left),
-        right: Math.abs(clickPoint.x - right),
-      };
-
-      const nearestEdge = Object.entries(distances).reduce(
-        (min, [key, distance]) =>
-          distance < min.distance ? { key, distance } : min,
-        { key: "top", distance: Infinity }
-      );
-
-      switch (nearestEdge.key) {
-        case "top":
-          targetPoint = { x: clickPoint.x, y: top };
-          break;
-        case "bottom":
-          targetPoint = { x: clickPoint.x, y: bottom };
-          break;
-        case "left":
-          targetPoint = { x: left, y: clickPoint.y };
-          break;
-        case "right":
-          targetPoint = { x: right, y: clickPoint.y };
-          break;
-        default:
-          targetPoint = { x: x + width / 2, y: y + height / 2 };
-      }
-    }
-    */
-
-    // 计算路径点 - 直接返回两点连线，保留转折逻辑作为注释
-    
-    // 检查是否已存在相同源和目标的边，以及反向连接的边，为新边添加偏移以避免重合
+    // 检查是否已存在相同源和目标的边，以及反向连接的边
     const existingEdges = shapes.filter(
       shape => shape.shapeType === 'edge' &&
       ((shape.sourceId === sourceShape?.id && shape.targetId === targetShape.id) || 
        (shape.sourceId === targetShape.id && shape.targetId === sourceShape?.id))
     );
-    
-    // 计算连接方向
-    const dx = targetCenter.x - sourceCenter.x;
-    const dy = targetCenter.y - sourceCenter.y;
-    
-    // 为新连线添加偏移量，避免与已存在的连线重叠
-    let adjustedStartPoint = { ...startPoint };
-    let adjustedEndPoint = { ...targetPoint };
-    
-    if (existingEdges.length > 0) {
-      // 新连线的索引（从0开始）
-      const index = existingEdges.length;
-      
-      // 生成基于索引的偏移量
-      const offsetDistance = 5 * (index + 1);
-      
-      // 根据方向计算偏移方向
-      let offsetX = 0, offsetY = 0;
-      if (Math.abs(dx) > Math.abs(dy)) {
-        // 水平方向为主，垂直偏移
-        offsetY = offsetDistance;
-      } else {
-        // 垂直方向为主，水平偏移
-        offsetX = offsetDistance;
-      }
-      
-      // 确保线条交替偏移方向，避免全部偏向一侧
-      if (index % 2 === 1) {
-        offsetX = -offsetX;
-        offsetY = -offsetY;
-      }
-      
-      // 应用偏移量到连接点
-      adjustedStartPoint = { x: startPoint.x + offsetX, y: startPoint.y + offsetY };
-      adjustedEndPoint = { x: targetPoint.x + offsetX, y: targetPoint.y + offsetY };
-    }
-    
-    // 使用调整后的点作为waypoints
-    const waypoints = [adjustedStartPoint, adjustedEndPoint];
-    
-    /* 保留转折逻辑以备后续使用
-    const deltaX = Math.abs(endPoint.x - startPoint.x);
-    const deltaY = Math.abs(endPoint.y - startPoint.y);
-    
-    // 计算偏移量，每条现有边增加15px的偏移
-    const offsetAmount = existingEdges.length * 15;
-    
-    waypoints = [startPoint];
-    if (deltaX > 0 || deltaY > 0) {
-      let midPoint;
-      
-      // 如果有现有边，使用偏移的路径以避免重合
-      if (existingEdges.length > 0) {
-        // 根据连接方向决定偏移方向
-        if (deltaX <= deltaY) {
-          // 垂直方向为主，水平偏移
-          const offsetDir = existingEdges.length % 2 === 0 ? 1 : -1; // 交替偏移方向
-          midPoint = {
-            x: endPoint.x + offsetDir * offsetAmount,
-            y: startPoint.y
-          };
-        } else {
-          // 水平方向为主，垂直偏移
-          const offsetDir = existingEdges.length % 2 === 0 ? 1 : -1; // 交替偏移方向
-          midPoint = {
-            x: startPoint.x,
-            y: endPoint.y + offsetDir * offsetAmount
-          };
-        }
-      } else {
-        // 没有现有边，使用标准直角路径
-        midPoint = deltaX <= deltaY
-          ? { x: endPoint.x, y: startPoint.y }
-          : { x: startPoint.x, y: endPoint.y };
-      }
 
-      if (midPoint.x !== startPoint.x || midPoint.y !== startPoint.y) {
-        if (midPoint.x !== endPoint.x || midPoint.y !== endPoint.y) {
-          waypoints.push(midPoint);
-        }
-      }
-    }
-    waypoints.push(endPoint);
-    */
+    // groupIndex 用来区分同一对图元之间的多条边，自环也复用这一层偏移。
+    const groupIndex = existingEdges.length;
+    const { sourcePoint, targetPoint, waypoints } = this.buildEdgeWaypoints(
+      sourceShape.bounds,
+      targetShape.bounds,
+      groupIndex,
+      sourceShape.id === targetShape.id
+    );
 
     return {
       sourceId: sourceShape?.id,
       sourceModelId: sourceShape?.modelId,
       targetId: targetShape.id,
       targetModelId: targetShape.modelId,
-      sourcePoint: adjustedStartPoint,
-      targetPoint: adjustedEndPoint,
+      sourcePoint,
+      targetPoint,
       waypoints,
     };
   }
 
+  /**
+   * 完成连接操作，计算最终连接点（异步版本，使用 Web Worker）
+   */
+  static async completeConnectionAsync(
+    sourceShape: Shape | undefined,
+    targetShape: Shape,
+    clickPoint: { x: number; y: number },
+    currentConnectPoint: { x: number; y: number },
+    shapes: Shape[] = []
+  ): Promise<any> {
+    try {
+      return await workerManager.completeConnection(
+        sourceShape,
+        targetShape,
+        clickPoint,
+        currentConnectPoint,
+        shapes
+      );
+    } catch (error) {
+      console.error('Error in completeConnectionAsync:', error);
+      // 回退到同步版本
+      return this.completeConnection(sourceShape, targetShape, clickPoint, currentConnectPoint, shapes);
+    }
+  }
+
   /**
    * 计算线路径点
    * 当前实现：直接返回两点连线，暂时不添加转折点
@@ -582,7 +571,7 @@ export class EdgeUtils {
     if (!sourceShape?.bounds) return null;
 
     // 如果提供了鼠标位置，使用findNearestConnectPoint计算初始连接点
-    if (initialMousePos && diagramBounds) {
+    if (initialMousePos) {
       // 直接使用传入的鼠标位置（屏幕坐标）调用findNearestConnectPoint
       // findNearestConnectPoint方法内部会进行坐标转换
       const nearestPoint = this.findNearestConnectPoint(initialMousePos, sourceShape, diagramBounds);
@@ -655,20 +644,24 @@ export class EdgeUtils {
   }
 
   /**
-   * 初始化所有连线的端点
+   * 初始化所有连线的端点（同步版本）
    * 用于在初始加载后端数据后，自动计算所有连线的合适端点，避免线横跨图元
    * @param shapes 所有图元列表
    * @param updateShape 更新图元的回调函数
+   * @param shapeMapIndex 可选，id → Shape 的索引（来自 graphStore.shapeMap）
    */
-  static initializeAllEdgeEndpoints(shapes: Shape[], updateShape: (shape: Shape) => void) {
+  static initializeAllEdgeEndpoints(shapes: Shape[], updateShape: (shape: Shape) => void, shapeMapIndex?: Map<string, Shape>) {
     const edges = shapes.filter((shape) => shape.shapeType === "edge");
 
-    // 按源-目标对分组，为每组中的线条生成不同的偏移
+    const findShape = shapeMapIndex
+      ? (id: string) => shapeMapIndex.get(id) ?? null
+      : (id: string) => shapes.find(s => s.id === id) ?? null
+
+    // 按源-目标对分组
     const edgeGroups = new Map<string, Shape[]>();
     
     edges.forEach((edge) => {
       if (edge.sourceId && edge.targetId) {
-        // 创建源-目标对的规范化键（确保 A-B 和 B-A 使用相同的键）
         const isForward = edge.sourceId.localeCompare(edge.targetId) <= 0;
         const groupKey = isForward 
           ? `${edge.sourceId}-${edge.targetId}` 
@@ -681,133 +674,57 @@ export class EdgeUtils {
       }
     });
 
-    // 处理每个分组
-    edgeGroups.forEach((groupEdges, groupKey) => {
-      if (groupEdges.length > 1) {
-        // 如果同一源-目标对有多个线条，为每条线生成不同的偏移
-        groupEdges.forEach((edge, index) => {
-          const sourceShape = shapes.find((s) => s.id === edge.sourceId);
-          const targetShape = shapes.find((s) => s.id === edge.targetId);
-
-          if (sourceShape && targetShape && sourceShape.bounds && targetShape.bounds) {
-            // 计算基本连接点
-            const { x: sx = 0, y: sy = 0, width: sw = 0, height: sh = 0 } = sourceShape.bounds;
-            const { x: tx = 0, y: ty = 0, width: tw = 0, height: th = 0 } = targetShape.bounds;
-
-            // 计算中心点
-            const sourceCenter = { x: sx + sw / 2, y: sy + sh / 2 };
-            const targetCenter = { x: tx + tw / 2, y: ty + th / 2 };
-
-            // 计算连接方向
-            const dx = targetCenter.x - sourceCenter.x;
-            const dy = targetCenter.y - sourceCenter.y;
-
-            // 生成基于索引的偏移量（小到不会明显影响，但足以分开线条）
-            const offsetDistance = 5 * (index + 1);
-            
-            // 根据方向计算偏移方向
-            let offsetX = 0, offsetY = 0;
-            if (Math.abs(dx) > Math.abs(dy)) {
-              // 水平方向为主，垂直偏移
-              offsetY = offsetDistance;
-            } else {
-              // 垂直方向为主，水平偏移
-              offsetX = offsetDistance;
-            }
-            
-            // 确保线条交替偏移方向，避免全部偏向一侧
-            if (index % 2 === 1) {
-              offsetX = -offsetX;
-              offsetY = -offsetY;
-            }
-
-            // 确定连接点，添加偏移
-            let sourcePoint, targetPoint;
-
-            if (Math.abs(dx) > Math.abs(dy)) {
-              // 水平方向
-              sourcePoint = dx > 0
-                ? { x: sx + sw, y: sourceCenter.y + offsetY }
-                : { x: sx, y: sourceCenter.y + offsetY };
-
-              targetPoint = dx > 0
-                ? { x: tx, y: targetCenter.y + offsetY }
-                : { x: tx + tw, y: targetCenter.y + offsetY };
-            } else {
-              // 垂直方向
-              sourcePoint = dy > 0
-                ? { x: sourceCenter.x + offsetX, y: sy + sh }
-                : { x: sourceCenter.x + offsetX, y: sy };
-
-              targetPoint = dy > 0
-                ? { x: targetCenter.x + offsetX, y: ty }
-                : { x: targetCenter.x + offsetX, y: ty + th };
-            }
-
-            // 更新连线，只使用源点和目标点确保线条保持直线
-            const waypoints = [sourcePoint, targetPoint];
-
-            const updatedEdge = {
-              ...edge,
-              waypointId: JSON.stringify(waypoints),
-            };
-
-            updateShape(updatedEdge);
-          }
-        });
-      } else {
-        // 单线条情况
-        const edge = groupEdges[0];
-        const sourceShape = shapes.find((s) => s.id === edge.sourceId);
-        const targetShape = shapes.find((s) => s.id === edge.targetId);
+    // 处理每个分组，使用 calcBestEndpoints 共用算法
+    edgeGroups.forEach((groupEdges) => {
+      groupEdges.forEach((edge, index) => {
+        const sourceShape = edge.sourceId ? findShape(edge.sourceId) : null;
+        const targetShape = edge.targetId ? findShape(edge.targetId) : null;
 
         if (sourceShape && targetShape && sourceShape.bounds && targetShape.bounds) {
-          const { x: sx = 0, y: sy = 0, width: sw = 0, height: sh = 0 } = sourceShape.bounds;
-          const { x: tx = 0, y: ty = 0, width: tw = 0, height: th = 0 } = targetShape.bounds;
-
-          // 计算中心点
-          const sourceCenter = { x: sx + sw / 2, y: sy + sh / 2 };
-          const targetCenter = { x: tx + tw / 2, y: ty + th / 2 };
-
-          // 计算连接方向
-          const dx = targetCenter.x - sourceCenter.x;
-          const dy = targetCenter.y - sourceCenter.y;
-
-          // 确定连接点
-          let sourcePoint, targetPoint;
-
-          if (Math.abs(dx) > Math.abs(dy)) {
-            // 水平方向
-            sourcePoint = dx > 0
-              ? { x: sx + sw, y: sourceCenter.y }
-              : { x: sx, y: sourceCenter.y };
-
-            targetPoint = dx > 0
-              ? { x: tx, y: targetCenter.y }
-              : { x: tx + tw, y: targetCenter.y };
-          } else {
-            // 垂直方向
-            sourcePoint = dy > 0
-              ? { x: sourceCenter.x, y: sy + sh }
-              : { x: sourceCenter.x, y: sy };
-
-            targetPoint = dy > 0
-              ? { x: targetCenter.x, y: ty }
-              : { x: targetCenter.x, y: ty + th };
-          }
+          const groupIndex = groupEdges.length > 1 ? index : 0;
+          const { waypoints } = this.buildEdgeWaypoints(
+            sourceShape.bounds,
+            targetShape.bounds,
+            groupIndex,
+            sourceShape.id === targetShape.id
+          );
 
-          // 更新连线
           const updatedEdge = {
             ...edge,
-            waypointId: JSON.stringify([sourcePoint, targetPoint]),
+            waypointId: JSON.stringify(waypoints),
           };
 
           updateShape(updatedEdge);
         }
-      }
+      });
     });
   }
 
+  /**
+   * 初始化所有连线的端点（异步版本，使用 Web Worker）
+   * 用于在初始加载后端数据后，自动计算所有连线的合适端点，避免线横跨图元
+   * @param shapes 所有图元列表
+   * @param updateShape 更新图元的回调函数
+   * @param shapeMapIndex 可选，id → Shape 的索引（来自 graphStore.shapeMap）
+   */
+  static async initializeAllEdgeEndpointsAsync(shapes: Shape[], updateShape: (shape: Shape) => void, shapeMapIndex?: Map<string, Shape>): Promise<void> {
+    try {
+      const updatedEdges = await workerManager.initializeAllEdgeEndpoints(
+        shapes,
+        shapeMapIndex
+      );
+
+      // 更新所有返回的边缘
+      updatedEdges.forEach(edge => {
+        updateShape(edge);
+      });
+    } catch (error) {
+      console.error('Error in initializeAllEdgeEndpointsAsync:', error);
+      // 回退到同步版本
+      this.initializeAllEdgeEndpoints(shapes, updateShape, shapeMapIndex);
+    }
+  }
+
   /**
    * 根据 pin 的方向和位置计算连接点
    * 连接点位于 pin 的外侧边缘（远离父图元的一侧）：