@mx-sose-front/mx-sose-graph 1.0.0

package/src/utils/edgeUtils.ts

@@ -0,0 +1,787 @@
+// edge-utils.ts
+import type { Shape } from "../types";
+import { pickTarget } from "./hittest";
+import { useGraphStore } from '../store/graphStore';
+
+export class EdgeUtils {
+  /**
+   * 更新与指定图元相关的连线端点
+   * @param shapes 所有图元
+   * @param changedIds 发生变化的图元ID列表
+   * @param updateShape 更新图元的回调函数
+   */
+  static updateRelatedEdges(
+    shapes: Shape[],
+    changedIds: string[],
+    updateShape: (shape: Shape) => void
+  ) {
+    const edges = shapes.filter((shape) => shape.shapeType === "edge");
+
+    // 按源-目标对分组，为每组中的线条生成不同的偏移
+    // 同时处理反向连接（A→B 和 B→A）的情况
+    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}` 
+          : `${edge.targetId}-${edge.sourceId}`;
+          
+        if (!edgeGroups.has(groupKey)) {
+          edgeGroups.set(groupKey, []);
+        }
+        edgeGroups.get(groupKey)!.push(edge);
+      }
+    });
+
+    // 处理每个分组
+    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);
+
+          if (sourceChanged || targetChanged) {
+            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 sourceChanged = edge.sourceId && changedIds.includes(edge.sourceId);
+        const targetChanged = edge.targetId && changedIds.includes(edge.targetId);
+
+        if (sourceChanged || targetChanged) {
+          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;
+
+            // 确定连接点
+            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 updatedEdge = {
+              ...edge,
+              waypointId: JSON.stringify([sourcePoint, targetPoint]),
+            };
+
+            updateShape(updatedEdge);
+          }
+        }
+      }
+    });
+  }
+
+  /**
+   * 获取图形的四个中心点（上下左右）
+   */
+  static getShapeCenterPoints(bounds: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  }) {
+    const { x, y, width, height } = bounds;
+    return {
+      top: { x: x + width / 2, y: y },
+      bottom: { x: x + width / 2, y: y + height },
+      left: { x: x, y: y + height / 2 },
+      right: { x: x + width, y: y + height / 2 },
+    };
+  }
+
+  /**
+   * 计算两点之间的距离
+   */
+  static getDistance(
+    point1: { x: number; y: number },
+    point2: { x: number; y: number }
+  ) {
+    const dx = point1.x - point2.x;
+    const dy = point1.y - point2.y;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+
+  /**
+   * 找到距离鼠标位置最近的连接点
+   */
+  static findNearestConnectPoint(
+    mousePos: { x: number; y: number },
+    shape: Shape | undefined,
+    diagramBounds: any
+  ) {
+    if (!shape?.bounds || !diagramBounds) return null;
+
+    const canvas = document.querySelector(".diagram-content");
+    if (!canvas) return null;
+
+    const canvasRect = canvas.getBoundingClientRect();
+    const mouseX = mousePos.x - canvasRect.left - diagramBounds.x;
+    const mouseY = mousePos.y - canvasRect.top - diagramBounds.y;
+
+    const { x = 0, y = 0, width = 0, height = 0 } = shape.bounds;
+
+    const left = x;
+    const right = x + width;
+    const top = y;
+    const bottom = y + height;
+
+    const relativeX = mouseX - x;
+    const relativeY = mouseY - y;
+
+    const isInTopArea = relativeY < 0;
+    const isInBottomArea = relativeY > height;
+    const isInLeftArea = relativeX < 0;
+    const isInRightArea = relativeX > width;
+
+    const connectPoints = this.getShapeCenterPoints({
+      x: shape.bounds.x ?? 0,
+      y: shape.bounds.y ?? 0,
+      width: shape.bounds.width ?? 0,
+      height: shape.bounds.height ?? 0,
+    });
+
+    const mousePoint = { x: mouseX, y: mouseY };
+
+    // 计算最近的连接点
+    if (isInTopArea || isInBottomArea || isInLeftArea || isInRightArea) {
+      const distances = {
+        top: this.getDistance(mousePoint, connectPoints.top),
+        bottom: this.getDistance(mousePoint, connectPoints.bottom),
+        left: this.getDistance(mousePoint, connectPoints.left),
+        right: this.getDistance(mousePoint, connectPoints.right),
+      };
+
+      const nearestPoint = Object.entries(distances).reduce(
+        (min, [key, distance]) =>
+          distance < min.distance ? { key, distance } : min,
+        { key: "top", distance: Infinity }
+      );
+
+      return connectPoints[nearestPoint.key as keyof typeof connectPoints];
+    }
+
+    // 鼠标在图形内部，使用最近的边
+    const distances = {
+      top: Math.abs(mouseY - top),
+      bottom: Math.abs(mouseY - bottom),
+      left: Math.abs(mouseX - left),
+      right: Math.abs(mouseX - 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":
+        return { x: mouseX, y: top };
+      case "bottom":
+        return { x: mouseX, y: bottom };
+      case "left":
+        return { x: left, y: mouseY };
+      case "right":
+        return { x: right, y: mouseY };
+      default:
+        return connectPoints.top;
+    }
+  }
+
+  /**
+   * 完成连接操作，计算最终连接点
+   */
+  static completeConnection(
+    sourceShape: Shape | undefined,
+    targetShape: Shape,
+    clickPoint: { x: number; y: number },
+    currentConnectPoint: { x: number; y: number },
+    shapes: Shape[] = [] // 添加shapes参数，避免在静态方法中使用组合式函数
+  ) {
+    // 如果源图元和目标图元是同一个，直接返回 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);
+    */
+
+    return {
+      sourceId: sourceShape?.id,
+      sourceModelId: sourceShape?.modelId,
+      targetId: targetShape.id,
+      targetModelId: targetShape.modelId,
+      sourcePoint: adjustedStartPoint,
+      targetPoint: adjustedEndPoint,
+      waypoints,
+    };
+  }
+
+  /**
+   * 计算线路径点
+   * 当前实现：直接返回两点连线，暂时不添加转折点
+   * 保留转折点计算逻辑以备后续使用
+   */
+  static calculateLinePoints(
+    startPoint: { x: number; y: number },
+    endPoint: { x: number; y: number }
+  ) {
+    // 当前实现：直接返回两点连线
+    return `${startPoint.x},${startPoint.y} ${endPoint.x},${endPoint.y}`;
+    
+    /* 保留转折点计算逻辑以备后续使用
+    const deltaX = Math.abs(endPoint.x - startPoint.x);
+    const deltaY = Math.abs(endPoint.y - startPoint.y);
+
+    let midX, midY;
+    if (deltaX <= deltaY) {
+      midX = endPoint.x;
+      midY = startPoint.y;
+    } else {
+      midX = startPoint.x;
+      midY = endPoint.y;
+    }
+
+    return `${startPoint.x},${startPoint.y} ${midX},${midY} ${endPoint.x},${endPoint.y}`;
+    */
+  }
+
+  /**
+   * 检查鼠标是否在画布内
+   */
+  static isWithinCanvas(x: number, y: number) {
+    const canvas = document.querySelector(".diagram-content");
+    if (!canvas) return false;
+
+    const rect = canvas.getBoundingClientRect();
+    return (
+      x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
+    );
+  }
+
+  /**
+   * 检查鼠标悬停的目标图形
+   */
+  static checkHoverTarget(
+    x: number,
+    y: number,
+    shapes: Shape[],
+    diagramBounds: any,
+    sourceId?: string
+  ) {
+    const canvas = document.querySelector(".diagram-content");
+    if (!canvas) return null;
+
+    const canvasRect = canvas.getBoundingClientRect();
+    const clickX = x - canvasRect.left - (diagramBounds?.x || 0);
+    const clickY = y - canvasRect.top - (diagramBounds?.y || 0);
+
+    const hit = pickTarget(shapes, { x: clickX, y: clickY });
+    
+    if (["shape","pin"].includes(hit.kind) && hit.shape?.id && sourceId && hit.shape.id !== sourceId) {
+      return hit.shape;
+    }
+    return null;
+  }
+
+  /**
+   * 初始化连接点位置
+   */
+  static initializeConnectPoint(sourceShape: Shape | undefined, initialMousePos?: { x: number; y: number }, diagramBounds?: any) {
+    if (!sourceShape?.bounds) return null;
+
+    // 如果提供了鼠标位置，使用findNearestConnectPoint计算初始连接点
+    if (initialMousePos && diagramBounds) {
+      // 直接使用传入的鼠标位置（屏幕坐标）调用findNearestConnectPoint
+      // findNearestConnectPoint方法内部会进行坐标转换
+      const nearestPoint = this.findNearestConnectPoint(initialMousePos, sourceShape, diagramBounds);
+      if (nearestPoint) {
+        return nearestPoint;
+      }
+    }
+
+    // 如果没有鼠标位置，或者findNearestConnectPoint返回null，使用中心点作为后备方案
+    const { x = 0, y = 0, width = 0, height = 0 } = sourceShape.bounds;
+
+    return {
+      x: x + width / 2,
+      y: y + height / 2,
+    };
+  }
+
+  static isEndPointInShape(shapes: Shape[], endPoint: { x: number; y: number }) {
+    for (const shape of shapes) {
+      // 排除 diagram 类型的图形
+      if (shape.shapeType === 'diagram') continue;
+      
+      if (!shape.bounds) continue;
+      
+      const { x = 0, y = 0, width = 0, height = 0 } = shape.bounds;
+      
+      // 判断点是否在矩形内
+      if (
+        endPoint.x >= x &&
+        endPoint.x <= x + width &&
+        endPoint.y >= y &&
+        endPoint.y <= y + height
+      ) {
+        return true;
+      }
+    }
+    
+    return false;
+  }
+
+  /**
+   * 初始化所有连线的端点
+   * 用于在初始加载后端数据后，自动计算所有连线的合适端点，避免线横跨图元
+   * @param shapes 所有图元列表
+   * @param updateShape 更新图元的回调函数
+   */
+  static initializeAllEdgeEndpoints(shapes: Shape[], updateShape: (shape: Shape) => void) {
+    const edges = shapes.filter((shape) => shape.shapeType === "edge");
+
+    // 按源-目标对分组，为每组中的线条生成不同的偏移
+    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}` 
+          : `${edge.targetId}-${edge.sourceId}`;
+          
+        if (!edgeGroups.has(groupKey)) {
+          edgeGroups.set(groupKey, []);
+        }
+        edgeGroups.get(groupKey)!.push(edge);
+      }
+    });
+
+    // 处理每个分组
+    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);
+
+        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 updatedEdge = {
+            ...edge,
+            waypointId: JSON.stringify([sourcePoint, targetPoint]),
+          };
+
+          updateShape(updatedEdge);
+        }
+      }
+    });
+  }
+}