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

package/src/utils/edgeWorker.ts

@@ -0,0 +1,471 @@
+// edgeWorker.ts - Web Worker for handling complex edge calculations
+
+interface Shape {
+  id: string;
+  shapeType: string;
+  bounds?: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  sourceId?: string;
+  targetId?: string;
+  modelId?: string;
+  shapeKey?: string;
+  direction?: string;
+  parenShapeId?: string;
+  [key: string]: any;
+}
+
+interface WorkerMessage {
+  type: string;
+  data: any;
+  id?: number;
+}
+
+interface WorkerResponse {
+  id: number;
+  result: any;
+  error?: string;
+}
+
+class EdgeWorkerUtils {
+  /**
+   * 获取图形的四个中心点（上下左右）
+   */
+  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(p1: { x: number; y: number }, p2: { x: number; y: number }) {
+    const dx = p1.x - p2.x;
+    const dy = p1.y - p2.y;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+
+  /**
+   * 生成图元自连接时使用的半环路径。
+   * Worker 和主线程保持同一套正交折线规则，避免异步回填后形态不一致。
+   */
+  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: Array<{ x: number; y: number }>;
+  } {
+    const { x, y, width, height } = bounds;
+    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: Array<{ x: number; y: number }>;
+  } {
+    if (isSelfLoop) {
+      return this.buildSelfLoopWaypoints(sBounds, groupIndex);
+    }
+
+    const { sourcePoint, targetPoint } = this.calcBestEndpoints(
+      sBounds,
+      tBounds,
+      groupIndex
+    );
+
+    return {
+      sourcePoint,
+      targetPoint,
+      waypoints: [sourcePoint, targetPoint],
+    };
+  }
+
+  /**
+   * 计算两个图元之间的最佳连接端点（共用算法，与主线程 EdgeUtils.calcBestEndpoints 一致）
+   */
+  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 sourcePoints = this.getShapeCenterPoints(sBounds);
+    const targetPoints = this.getShapeCenterPoints(tBounds);
+
+    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 = (tBounds.x + tBounds.width / 2) - (sBounds.x + sBounds.width / 2);
+      const dy = (tBounds.y + tBounds.height / 2) - (sBounds.y + sBounds.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 updateRelatedEdges(
+    shapes: Shape[],
+    changedIds: string[],
+    edgeIndex?: Map<string, Shape[]>,
+    shapeMapIndex?: Map<string, Shape>
+  ): Shape[] {
+    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 {
+      relatedEdges = 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[]>();
+    relatedEdges.forEach((edge) => {
+      if (edge.sourceId && edge.targetId) {
+        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);
+      }
+    });
+
+    const changedSet = new Set(changedIds);
+    const updatedEdges: Shape[] = [];
+
+    edgeGroups.forEach((groupEdges) => {
+      groupEdges.forEach((edge, index) => {
+        const sourceChanged = edge.sourceId && changedSet.has(edge.sourceId);
+        const targetChanged = edge.targetId && changedSet.has(edge.targetId);
+
+        if (sourceChanged || targetChanged) {
+          const sourceShape = edge.sourceId ? findShape(edge.sourceId) : null;
+          const targetShape = edge.targetId ? findShape(edge.targetId) : null;
+
+          if (sourceShape && targetShape && sourceShape.bounds && targetShape.bounds) {
+            const groupIndex = groupEdges.length > 1 ? index : 0;
+            const { waypoints } = this.buildEdgeWaypoints(
+              sourceShape.bounds,
+              targetShape.bounds,
+              groupIndex,
+              sourceShape.id === targetShape.id
+            );
+            updatedEdges.push({
+              ...edge,
+              waypointId: JSON.stringify(waypoints),
+            });
+          }
+        }
+      });
+    });
+
+    return updatedEdges;
+  }
+
+  /**
+   * 初始化所有连线的端点
+   */
+  static initializeAllEdgeEndpoints(
+    shapes: Shape[],
+    shapeMapIndex?: Map<string, Shape>
+  ): 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) {
+        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);
+      }
+    });
+
+    const updatedEdges: Shape[] = [];
+
+    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 groupIndex = groupEdges.length > 1 ? index : 0;
+          const { waypoints } = this.buildEdgeWaypoints(
+            sourceShape.bounds,
+            targetShape.bounds,
+            groupIndex,
+            sourceShape.id === targetShape.id
+          );
+          updatedEdges.push({
+            ...edge,
+            waypointId: JSON.stringify(waypoints),
+          });
+        }
+      });
+    });
+
+    return updatedEdges;
+  }
+
+  /**
+   * 完成连接操作，计算最终连接点
+   */
+  static completeConnection(
+    sourceShape: Shape | undefined,
+    targetShape: Shape,
+    clickPoint: { x: number; y: number },
+    currentConnectPoint: { x: number; y: number },
+    shapes: Shape[] = []
+  ) {
+    if (!targetShape.bounds || !sourceShape?.bounds) return null;
+
+    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 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,
+      targetPoint,
+      waypoints,
+    };
+  }
+
+  /**
+   * 找到距离鼠标位置最近的连接点
+   */
+  static findNearestConnectPoint(
+    mousePos: { x: number; y: number },
+    shape: Shape | undefined
+  ) {
+    if (!shape?.bounds) return null;
+
+    const mouseX = mousePos.x;
+    const mouseY = mousePos.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;
+    }
+  }
+}
+
+// 监听主线程消息
+self.addEventListener('message', (event: MessageEvent<WorkerMessage>) => {
+  const { type, data, id } = event.data;
+
+  try {
+    let result;
+
+    switch (type) {
+      case 'updateRelatedEdges': {
+        const { shapes, changedIds, edgeIndex: edgeIndexData, shapeMapIndex: shapeMapData } = data;
+        const edgeIndex = edgeIndexData ? new Map(Object.entries(edgeIndexData)) : undefined;
+        const shapeMapIndex = shapeMapData ? new Map(Object.entries(shapeMapData)) : undefined;
+        result = EdgeWorkerUtils.updateRelatedEdges(
+          shapes, changedIds,
+          edgeIndex as Map<string, Shape[]> | undefined,
+          shapeMapIndex as Map<string, Shape> | undefined
+        );
+        break;
+      }
+      case 'initializeAllEdgeEndpoints': {
+        const { shapes: initShapes, shapeMapIndex: initShapeMapData } = data;
+        const initShapeMapIndex = initShapeMapData ? new Map(Object.entries(initShapeMapData)) : undefined;
+        result = EdgeWorkerUtils.initializeAllEdgeEndpoints(
+          initShapes,
+          initShapeMapIndex as Map<string, Shape> | undefined
+        );
+        break;
+      }
+      case 'completeConnection':
+        result = EdgeWorkerUtils.completeConnection(
+          data.sourceShape, data.targetShape,
+          data.clickPoint, data.currentConnectPoint, data.shapes
+        );
+        break;
+      case 'findNearestConnectPoint':
+        result = EdgeWorkerUtils.findNearestConnectPoint(data.mousePos, data.shape);
+        break;
+      default:
+        throw new Error(`Unknown message type: ${type}`);
+    }
+
+    self.postMessage({ id, result } as WorkerResponse);
+  } catch (error) {
+    self.postMessage({
+      id,
+      error: error instanceof Error ? error.message : String(error)
+    } as WorkerResponse);
+  }
+});
+
+// Worker 文件不需要 export，由 self.addEventListener 驱动

package/src/utils/hittest.ts

@@ -88,48 +88,47 @@ function isPointNearEdge(pt: { x: number; y: number }, edge: Shape, threshold: n
 }
 
 export function pickTarget(shapes: readonly Shape[], pt: { x: number; y: number }): HitResult {
-  // 首先检查 pin 类型（优先级最高，因为 pin 通常在其他图元之上）
-  const pinsOrdered = shapes
-    .map((s, i) => ({ s, i }))
-    .filter(x => isPin(x.s))
-    .sort((a, b) => {
-      const dz = getZ(b.s) - getZ(a.s)
-      return dz !== 0 ? dz : (b.i - a.i)
-    })
+  // 单次遍历：对每种类型只保留"最上层命中"的那个（zIndex 最大、索引最大）
+  let bestPin:   Shape | null = null, bestPinZ  = -Infinity, bestPinI  = -1
+  let bestShape: Shape | null = null, bestShapeZ = -Infinity, bestShapeI = -1
+  let bestEdge:  Shape | null = null, bestEdgeZ = -Infinity, bestEdgeI = -1
+  let diagram:   Shape | null = null
 
-  for (const { s } of pinsOrdered) {
-    if (inBounds(pt, getBounds(s))) return { kind: 'pin', shape: s }
-  }
-
-  // 然后检查普通图形（shape类型）
-  const shapesOrdered = shapes
-    .map((s, i) => ({ s, i }))
-    .filter(x => isShape(x.s))
-    .sort((a, b) => {
-      const dz = getZ(b.s) - getZ(a.s)
-      return dz !== 0 ? dz : (b.i - a.i)
-    })
+  for (let i = 0; i < shapes.length; i++) {
+    const s = shapes[i]
+    const type = String(s?.shapeType).trim().toLowerCase()
 
-  for (const { s } of shapesOrdered) {
-    if (inBounds(pt, getBounds(s))) return { kind: 'shape', shape: s }
+    if (type === 'pin') {
+      if (inBounds(pt, getBounds(s))) {
+        const z = getZ(s)
+        if (z > bestPinZ || (z === bestPinZ && i > bestPinI)) {
+          bestPin = s; bestPinZ = z; bestPinI = i
+        }
+      }
+    } else if (type === 'shape') {
+      if (inBounds(pt, getBounds(s))) {
+        const z = getZ(s)
+        if (z > bestShapeZ || (z === bestShapeZ && i > bestShapeI)) {
+          bestShape = s; bestShapeZ = z; bestShapeI = i
+        }
+      }
+    } else if (type === 'edge') {
+      if (isPointNearEdge(pt, s)) {
+        const z = getZ(s)
+        if (z > bestEdgeZ || (z === bestEdgeZ && i > bestEdgeI)) {
+          bestEdge = s; bestEdgeZ = z; bestEdgeI = i
+        }
+      }
+    } else if (type === 'diagram') {
+      diagram = s
+    }
   }
-  
-  // 然后检查线条（edge类型）
-  const edgesOrdered = shapes
-    .map((s, i) => ({ s, i }))
-    .filter(x => isEdge(x.s))
-    .sort((a, b) => {
-      const dz = getZ(b.s) - getZ(a.s)
-      return dz !== 0 ? dz : (b.i - a.i)
-    })
 
-  for (const { s } of edgesOrdered) {
-    if (isPointNearEdge(pt, s)) return { kind: 'edge', shape: s }
-  }
-  
-  // 最后检查画布（diagram类型）
-  const diagram = shapes.find(isDiagram)
+  // 优先级：pin > shape > edge > diagram
+  if (bestPin)   return { kind: 'pin',   shape: bestPin }
+  if (bestShape) return { kind: 'shape', shape: bestShape }
+  if (bestEdge)  return { kind: 'edge',  shape: bestEdge }
   if (diagram && inBounds(pt, getBounds(diagram))) return { kind: 'diagram', shape: diagram }
-  
+
   return { kind: 'none', shape: null }
 }

package/src/utils/index.ts

@@ -18,3 +18,6 @@ export function getUuid(): string {
     
     return `${timeLow}${timeMid}${timeHigh}${clockSeqHex}${nodeHex}`
 }
+
+// 导出日期工具类
+export { DateUtils } from './dateUtils'

package/src/utils/keyboardUtils.ts

@@ -35,7 +35,7 @@ const collectAffectedShapeIds = (graphStore: any, movedIds: Set<string>): Set<st
   movedIds.forEach(id => {
     affectedIds.add(id);
 
-    const shape = graphStore.shapes.find((s: any) => s.id === id);
+    const shape = graphStore.shapeMap.get(id);
     if (!shape) return;
 
     // 添加父元素
@@ -58,7 +58,7 @@ const collectAffectedShapeIds = (graphStore: any, movedIds: Set<string>): Set<st
     let guard = 0;
     while (currentParentId && guard++ < 100) {
       affectedIds.add(currentParentId);
-      const parent = graphStore.shapes.find((s: any) => s.id === currentParentId);
+      const parent = graphStore.shapeMap.get(currentParentId);
       currentParentId = parent?.parenShapeId;
     }
   });
@@ -77,7 +77,7 @@ const emitKeyboardMoveEnd = (graphStore: any) => {
 
   // 组装 payloads(深拷贝)
   const payloads = Array.from(affectedIds)
-    .map(id => graphStore.shapes.find((s: any) => s.id === id))
+    .map(id => graphStore.shapeMap.get(id))
     .filter(Boolean)
     .map(s => _.cloneDeep(s));
 
@@ -301,7 +301,7 @@ export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHand
 
       // 获取所有选中的图元
       const selectedShapes = graphStore.selectedIds
-        .map(id => graphStore.shapes.find(s => s.id === id))
+        .map(id => graphStore.shapeMap.get(id))
         .filter((shape): shape is NonNullable<typeof shape> => shape != null);
 
       // ==================== 防抖机制:记录初始状态 ====================
@@ -362,7 +362,7 @@ export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHand
           // 查找并计算所有子图元的新位置
           const childIds = graphStore.parentChildMap.get(shape.id) || [];
           childIds.forEach(childId => {
-            const child = graphStore.shapes.find(s => s.id === childId);
+            const child = graphStore.shapeMap.get(childId);
             if (child && child.bounds) {
               // 如果子图元也在选中列表中,跳过它
               // 因为它会在遍历 selectedShapes 时被单独处理

package/src/utils/packageOutline.ts

@@ -0,0 +1,96 @@
+import type { CSSProperties } from "vue";
+import type { Rect } from "../types";
+
+/**
+ * 描述包轮廓覆盖层所需的几何输入。
+ */
+export interface PackageOutlineOverlayOptions {
+  bounds: Rect | null | undefined;
+  strokeWidth: number;
+  padding?: number;
+  zIndex: number;
+}
+
+/**
+ * 供交互层直接消费的包轮廓覆盖层结果。
+ */
+export interface PackageOutlineOverlay {
+  width: number;
+  height: number;
+  path: string;
+  style: CSSProperties;
+}
+
+// 与 Package 组件保持一致的“标签页”高度。
+export const PACKAGE_OUTLINE_TAB_HEIGHT = 18;
+
+// hover 轮廓会略微向外扩一圈，避免描边显得过于贴边。
+export const PACKAGE_OUTLINE_PADDING = 5;
+
+/**
+ * 根据给定宽高生成包形状的 SVG 外轮廓路径。
+ */
+export const buildPackageOutlinePath = (
+  width: number,
+  height: number,
+  strokeWidth: number,
+) => {
+  // 兜底，避免图形过小导致轮廓塌陷。
+  const safeWidth = Math.max(width, strokeWidth + 1);
+  const safeHeight = Math.max(height, strokeWidth + 1);
+
+  // SVG 描边是压在线两侧的，所以路径需要向内缩半个描边宽度。
+  const halfStroke = strokeWidth / 2;
+
+  // 标签页高度优先固定，但当图形过小时需要自动收缩。
+  const tabHeight = Math.max(
+    strokeWidth,
+    Math.min(PACKAGE_OUTLINE_TAB_HEIGHT, safeHeight - strokeWidth),
+  );
+
+  // 标签页宽度大致取整体宽度的 40%，同时保证不会越界或过窄。
+  const tabWidth = Math.max(
+    tabHeight + strokeWidth,
+    Math.min(safeWidth - strokeWidth, Math.round(safeWidth * 0.4)),
+  );
+
+  return `M${halfStroke},${halfStroke} H${tabWidth - halfStroke} V${tabHeight - halfStroke} H${safeWidth - halfStroke} V${safeHeight - halfStroke} H${halfStroke} Z`;
+};
+
+/**
+ * 一次性计算包轮廓覆盖层需要的尺寸、路径和绝对定位样式。
+ */
+export const buildPackageOutlineOverlay = ({
+  bounds,
+  strokeWidth,
+  padding = 0,
+  zIndex,
+}: PackageOutlineOverlayOptions): PackageOutlineOverlay => {
+  if (!bounds) {
+    return {
+      width: 0,
+      height: 0,
+      path: "",
+      style: { display: "none" },
+    };
+  }
+
+  const width = bounds.width + padding * 2;
+  const height = bounds.height + padding * 2;
+
+  return {
+    width,
+    height,
+    path: buildPackageOutlinePath(width, height, strokeWidth),
+    style: {
+      position: "absolute",
+      left: `${bounds.x - padding}px`,
+      top: `${bounds.y - padding}px`,
+      width: `${width}px`,
+      height: `${height}px`,
+      pointerEvents: "none",
+      zIndex,
+      overflow: "visible",
+    },
+  };
+};