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

package/src/components/InteractionLayer.vue

@@ -11,7 +11,21 @@
         @model-type-property-id-click="clickModelTypePropertyIdButton" />
     </template>
     <!-- 命中容器的高亮矩形（虚线框） -->
-    <div v-if="hoverRect" :class="[
+    <svg
+      v-if="hoverRect && hoverOutlineIsPackage"
+      :class="[
+        'hover-container-outline-svg',
+        {
+          'is-invalid': graphStore.hoverNestable === false,
+          'is-valid': graphStore.hoverNestable === true,
+        },
+      ]"
+      :style="hoverPackageOutline.style"
+      :viewBox="`0 0 ${hoverPackageOutline.width} ${hoverPackageOutline.height}`"
+    >
+      <path class="outline-path" :d="hoverPackageOutline.path" />
+    </svg>
+    <div v-else-if="hoverRect" :class="[
       'hover-container-outline',
       {
         'is-invalid': graphStore.hoverNestable === false,
@@ -51,7 +65,16 @@
     </div>
 
     <!-- 高亮覆盖层 - 独立于 connect-layer，支持连线模式和拖拽模式 -->
-    <div v-if="highlightOverlayBounds" class="highlight-overlay" :class="highlightOverlayColor" :style="{
+    <svg
+      v-if="highlightOverlayBounds && highlightOverlayIsPackage"
+      class="highlight-overlay-svg"
+      :class="highlightOverlayColor"
+      :style="highlightPackageOutline.style"
+      :viewBox="`0 0 ${highlightPackageOutline.width} ${highlightPackageOutline.height}`"
+    >
+      <path class="outline-path" :d="highlightPackageOutline.path" />
+    </svg>
+    <div v-else-if="highlightOverlayBounds" class="highlight-overlay" :class="highlightOverlayColor" :style="{
       left: highlightOverlayBounds.x + 'px',
       top: highlightOverlayBounds.y + 'px',
       width: highlightOverlayBounds.width + 'px',
@@ -84,6 +107,7 @@ import NameEditor from "./NameEditor/NameEditor.vue";
 // 工具：几何/命中/样式/拖拽
 import {
   toLocalPoint,
+  inBounds,
   getBounds,
   getDiagramRect,
   rectFromPoints,
@@ -95,7 +119,6 @@ import {
 } from "../utils/geom";
 import { pickTarget } from "../utils/hittest";
 import {
-  adjustCanvasToFitAllShapes,
   actionButtonsStyle,
   getMarqueeStyle,
   getLayerStyle,
@@ -120,6 +143,11 @@ import { useNameEdit } from "../hooks/useNameEdit";
 import { guardOperate } from "../utils/license-guard";
 import { useResize } from "../hooks/useResize";
 import { useHighlight, type IHighlightUtils } from "../hooks/useHighlight";
+import { createRAFThrottle, createRAFDebounce } from "../utils/rafThrottle";
+import {
+  buildPackageOutlineOverlay,
+  PACKAGE_OUTLINE_PADDING,
+} from "../utils/packageOutline";
 
 const props = defineProps<InteractionLayerProps>();
 
@@ -138,7 +166,7 @@ const cursorStyle = ref<"default" | "pointer">("default");
 const resizeGhostShadow = computed<Shape[]>(() => {
   const out: Shape[] = [];
   for (const id in groupGhost.value) {
-    const s = graphStore.shapes.find((x) => x.id === id);
+    const s = graphStore.shapeMap.get(id);
     if (!s) continue;
     out.push({
       ...s,
@@ -152,11 +180,18 @@ const resizeGhostShadow = computed<Shape[]>(() => {
 const hoverRect = computed(() => {
   const id = graphStore.hoverContainerId;
   if (!id) return null;
-  const s = graphStore.shapes.find((x) => x.id === id);
+  const s = graphStore.shapeMap.get(id);
   if (!s) return null;
   const b = getBounds(s);
   return { x: b.x, y: b.y, width: b.width, height: b.height };
 });
+
+// 当前 hover 到的原始容器图元，用来判断是否需要切换成包轮廓覆盖层。
+const hoverOutlineShape = computed(() => {
+  const id = graphStore.hoverContainerId;
+  if (!id) return null;
+  return graphStore.shapeMap.get(id) ?? null;
+});
 // 把拖动缩放预览框合并，
 const allGhosts = computed<Shape[]>(() => {
   const byId = new Map<string, Shape>();
@@ -222,9 +257,10 @@ const { isResizing, groupGhost, startResize } = useResize(
 
 // 是否在画布内
 const isMouseInside = ref(false);
-// 记录最近一次 mousemove（用于 rAF 合并）
-let rafId: number | null = null;
-let latestEvt: MouseEvent | null = null;
+
+// 创建 RAF 节流实例用于鼠标移动事件
+const mouseMoveThrottle = createRAFThrottle();
+
 // 拖拽清理函数
 let offDrag: (() => void) | null = null;
 
@@ -244,33 +280,30 @@ const emitMouse = (evt: MouseEvent, inside: boolean) => {
   //  对外抛出
   eventBus.emit("canvas-mouse-move", payload);
 };
+
 // 鼠标进入画布
 const onMouseEnter = () => {
   isMouseInside.value = true;
   eventBus.emit("canvas-mouse-enter", { inside: true });
 };
+
 // 鼠标离开画布区域
 const onMouseLeave = () => {
   isMouseInside.value = false;
-  // 停止 rAF
-  if (rafId) cancelAnimationFrame(rafId);
-  rafId = null;
-  latestEvt = null;
+  // 取消待执行的 RAF
+  mouseMoveThrottle.cancel();
   // 通知外部隐藏坐标
   eventBus.emit("canvas-mouse-leave", { inside: false });
 };
-// 鼠标移动过程中
+
+// 鼠标移动过程中 - 使用 RAF 节流优化
 const onMouseMove = (evt: MouseEvent) => {
   if (!isMouseInside.value) return;
-  latestEvt = evt;
-  // rAF 合并高频 mousemove
-  if (rafId) return;
-  rafId = requestAnimationFrame(() => {
-    rafId = null;
+  // 使用 RAF 节流，同一帧内多次调用会合并为最后一次
+  mouseMoveThrottle.throttle((latestEvt: MouseEvent) => {
     if (!latestEvt) return;
     emitMouse(latestEvt, true);
-    latestEvt = null;
-  });
+  })(evt);
 };
 
 // 框选状态
@@ -306,10 +339,95 @@ const highlightUtils: IHighlightUtils = {
 // 保持兼容性：highlightedShape 计算属性
 const highlightedShape = computed(() => {
   if (!highlightedShapeId.value) return null;
-  return graphStore.shapes.find(s => s.id === highlightedShapeId.value) || null;
+  return graphStore.shapeMap.get(highlightedShapeId.value) ?? null;
 });
+
+// 包图元使用“文件夹轮廓”高亮，其他图元继续沿用默认矩形覆盖层。
+const isPackageShape = (shape: Shape | null | undefined) => {
+  return !!shape?.shapeKey && !!props.packages?.includes(shape.shapeKey);
+};
+
+// 拖拽嵌套时，只有命中的容器是包图元才切换到 SVG 轮廓。
+const hoverOutlineIsPackage = computed(() =>
+  isPackageShape(hoverOutlineShape.value),
+);
+
+// hover 覆盖层会额外向外扩一点，尽量保持和原矩形框接近的视觉反馈。
+const hoverPackageOutline = computed(() =>
+  buildPackageOutlineOverlay({
+    bounds: hoverRect.value,
+    strokeWidth: 2,
+    padding: PACKAGE_OUTLINE_PADDING,
+    zIndex: 999,
+  }),
+);
+
+const highlightOverlayIsPackage = computed(() =>
+  isPackageShape(highlightedShape.value),
+);
+
+// 连线目标高亮复用同一套几何工具，只是描边更粗，且不额外外扩。
+const highlightPackageOutline = computed(() =>
+  buildPackageOutlineOverlay({
+    bounds: highlightOverlayBounds.value,
+    strokeWidth: 3,
+    zIndex: 1001,
+  }),
+);
+
+const getCurrentTargetModels = () => {
+  if (connectMode.value === "action") {
+    return (
+      props.connectShapeData?.scenarioMenus?.find(
+        (menu) => menu.code === props.connectShapeData?.shapeKey
+      )?.targetModels ?? props.connectShapeData?.targetModels
+    );
+  }
+
+  return props.connectShapeData?.targetModels;
+};
+
+const resolveConnectTargetAtPoint = (pt: { x: number; y: number }) => {
+  const hit = pickTarget(graphStore.shapes, pt);
+
+  if (
+    ["shape", "pin"].includes(hit.kind) &&
+    hit.shape?.id &&
+    hit.shape.id !== props.connectShapeData?.sourceId
+  ) {
+    return hit.shape;
+  }
+
+  const hoveredShape = highlightedShape.value;
+  if (
+    !hoveredShape?.id ||
+    hoveredShape.id === props.connectShapeData?.sourceId
+  ) {
+    return null;
+  }
+
+  const bounds = getBounds(hoveredShape);
+  const minSide = Math.min(bounds.width, bounds.height);
+  const padding = minSide <= 30 ? 8 : minSide <= 40 ? 6 : 0;
+
+  if (
+    inBounds(pt, {
+      x: bounds.x - padding,
+      y: bounds.y - padding,
+      width: bounds.width + padding * 2,
+      height: bounds.height + padding * 2,
+    })
+  ) {
+    return hoveredShape;
+  }
+
+  return null;
+};
+
 const sourceShape = ref<Shape | null>(null);
 const recordClickPoint = ref({ x: 0, y: 0 });
+// 等待后端创建图元中，冻结连线预览
+const pendingActionButton = ref(false);
 
 // 正在交互：缩放中 或 元素拖动中
 const isBusy = computed(
@@ -388,9 +506,9 @@ const onLayerClick = (evt: MouseEvent) => {
     }
     recordClickPoint.value = toLocalPoint(evt, layerRef.value);
     // 获取 sourceShape（先获取，确保存在）
-    const foundSourceShape = graphStore.shapes.find(
-      (shape) => shape.id === props.connectShapeData?.sourceId
-    );
+    const foundSourceShape = props.connectShapeData?.sourceId
+      ? graphStore.shapeMap.get(props.connectShapeData.sourceId)
+      : undefined;
     if (!foundSourceShape) {
       // 如果找不到 sourceShape，不处理
       handleConnectLayerClick(evt);
@@ -404,11 +522,8 @@ const onLayerClick = (evt: MouseEvent) => {
     const clickX = localPoint.x;
     const clickY = localPoint.y;
 
-    // 判断点击位置是否有图形
-    const hasShapeAtPoint = EdgeUtils.isEndPointInShape(graphStore.shapes, {
-      x: clickX,
-      y: clickY,
-    });
+    const clickedTargetShape = resolveConnectTargetAtPoint(localPoint);
+    const hasShapeAtPoint = !!clickedTargetShape;
 
     // 修改：无论是否在action模式下，只要在连接状态且点击空白处，都创建新图元
     if (!hasShapeAtPoint) {
@@ -465,9 +580,12 @@ const onLayerClick = (evt: MouseEvent) => {
         y: newShapeY,
         diagramId: diagramId,
       });
+      // 冻结连线预览，避免等待后端返回期间预览线跟着鼠标走
+      pendingActionButton.value = true;
+      showLine.value = false;
       return;
     } else {
-      handleConnectLayerClick(evt);
+      handleConnectLayerClick(evt, clickedTargetShape, localPoint);
       return;
     }
   }
@@ -611,16 +729,14 @@ const onLayerMouseDown = (evt: MouseEvent) => {
             // 如果是 pin 类型，需要在移动过程中将“指针位置”校正为吸附后的指针坐标
             let targetPt = curr;
             if (ids.length === 1) {
-              const draggedShape = graphStore.shapes.find(
-                (x) => x.id === ids[0]
-              );
+              const draggedShape = graphStore.shapeMap.get(ids[0]);
               if (
                 draggedShape &&
                 draggedShape.shapeType === "pin" &&
                 draggedShape.parenShapeId
               ) {
-                const parentShape = graphStore.shapes.find(
-                  (x) => x.id === draggedShape.parenShapeId
+                const parentShape = graphStore.shapeMap.get(
+                  draggedShape.parenShapeId
                 );
                 if (parentShape) {
                   // 使用移动专用的吸附方法：根据 dragOffset 计算应传入 moveDraggedShape 的指针坐标
@@ -683,14 +799,9 @@ const startMarquee = (anchor: { x: number; y: number }) => {
       //缓存 bounds，避免 move 中每次 getBounds(s)
       b: getBounds(s),
     }));
-  // rAF 合并高频 move（只更新 marqueeRect，避免过多响应式刷新）
-  let raf = 0;
+  // 创建 RAF 节流实例用于框选
+  const marqueeThrottle = createRAFThrottle();
   let latestPoint = anchorClamped;
-  const updateRect = () => {
-    raf = 0;
-    // 根据“锚点 & 当前点”得到框选矩形
-    marqueeRect.value = rectFromPoints(marqueeAnchor.value!, latestPoint);
-  };
   // 拖拽生命周期
   offDrag?.();
   offDrag = null;
@@ -707,16 +818,16 @@ const startMarquee = (anchor: { x: number; y: number }) => {
         edges
       );
 
-      // 根据“锚点 & 当前点”得到框选矩形（会自动处理反向拖拽）
-      // 用 rAF 合并更新，避免 mousemove 触发过多响应式刷新
-      if (raf) return;
-      raf = requestAnimationFrame(updateRect);
+      // 根据"锚点 & 当前点"得到框选矩形（会自动处理反向拖拽）
+      // 使用 RAF 节流更新，避免 mousemove 触发过多响应式刷新
+      marqueeThrottle.throttle(() => {
+        marqueeRect.value = rectFromPoints(marqueeAnchor.value!, latestPoint);
+      })();
     },
     // 结束框选，清理预览
     () => {
-      // 结束时确保最后一次 rect 已更新
-      if (raf) cancelAnimationFrame(raf);
-      updateRect();
+      // 刷新最后一次更新
+      marqueeThrottle.flush();
 
       const rect = marqueeRect.value!;
       const right = rect.x + rect.width;
@@ -763,6 +874,10 @@ const isConnectAllowed = ref(false);
 // 处理右键点击事件
 const handleContextMenu = (event: MouseEvent) => {
   return guardOperate(async () => {
+    // 连线状态下不允许出现右键菜单
+    if (isConnecting.value) {
+      return;
+    }
     // 如果图元正在移动或缩放，则不显示菜单
     if (graphStore.isDragging || isResizing.value) {
       return;
@@ -795,14 +910,6 @@ const closeMenu = () => {
   contextMenuTarget.value = null;
 };
 
-watch(
-  () => graphStore.shapes,
-  () => {
-    nextTick(adjustCanvasToFitAllShapes);
-  },
-  { deep: true, immediate: true }
-);
-
 // 监听图元状态
 watch(shouldCloseMenu, (shouldClose) => {
   if (shouldClose && showContextMenu.value) {
@@ -811,13 +918,13 @@ watch(shouldCloseMenu, (shouldClose) => {
 });
 watch(
   () => props.actionButtonShapeDataId,
-  (newVal) => {
+  async (newVal) => {
     if (newVal) {
-      const foundShape = graphStore.shapes.find((x) => x.id === newVal);
+      const foundShape = graphStore.shapeMap.get(newVal);
       if (foundShape) {
         // 连接 sourceShape 和新 shape
         if (sourceShape.value) {
-          const connectionData = EdgeUtils.completeConnection(
+          const connectionData = await EdgeUtils.completeConnectionAsync(
             sourceShape.value,
             foundShape,
             { x: recordClickPoint.value.x, y: recordClickPoint.value.y },
@@ -851,40 +958,54 @@ watch(
             }
             graphStore.setConnectMode("connect");
             isConnecting.value = false;
+            pendingActionButton.value = false;
             clearHighlightTimeout();
+          } else {
+            // connectionData 为 null（如源和目标相同），也需要重置
+            pendingActionButton.value = false;
           }
+        } else {
+          pendingActionButton.value = false;
         }
+      } else {
+        pendingActionButton.value = false;
       }
       // 处理 actionButtonShapeData 的逻辑
     }
   }
 );
 
-// 鼠标移动事件处理
+// 鼠标移动事件处理 - 使用 RAF 节流优化
 const handleMouseMove = (event: MouseEvent) => {
-  const { clientX, clientY } = event;
-  const localPoint = toLocalPoint(event, layerRef.value);
-  // 使用工具类检查是否在画布内
-  if (EdgeUtils.isWithinCanvas(clientX, clientY)) {
-    mousePosition.value = { x: localPoint.x, y: localPoint.y };
+  // 使用 RAF 节流，同一帧内多次调用会合并为最后一次
+  connectMouseMoveThrottle.throttle((evt: MouseEvent) => {
+    const { clientX, clientY } = evt;
+    const localPoint = toLocalPoint(evt, layerRef.value);
+    // 使用工具类检查是否在画布内
+    if (EdgeUtils.isWithinCanvas(clientX, clientY)) {
+      mousePosition.value = { x: localPoint.x, y: localPoint.y };
 
-    // 只有在连接状态下才显示线条
-    if (isConnecting.value) {
-      showLine.value = true;
-      updateConnectPointToNearest(localPoint.x, localPoint.y);
-      checkHoverTarget(localPoint.x, localPoint.y);
-    }
-  } else {
-    if (isConnecting.value) {
-      showLine.value = false;
+      // 只有在连接状态下才显示线条
+      if (isConnecting.value && !pendingActionButton.value) {
+        showLine.value = true;
+        updateConnectPointToNearest(localPoint.x, localPoint.y);
+        checkHoverTarget(localPoint.x, localPoint.y);
+      }
+    } else {
+      if (isConnecting.value) {
+        showLine.value = false;
+      }
+      highlightShape(null, false); // 使用highlightShape函数取消高亮，恢复原始样式
     }
-    highlightShape(null, false); // 使用highlightShape函数取消高亮，恢复原始样式
-  }
+  })(event);
 };
 
 // 用于跟踪上一次的hoverShape，避免重复发射事件
 let lastHoverShapeId: string | null = null;
 
+// 创建 RAF 节流实例用于连线时的鼠标移动
+const connectMouseMoveThrottle = createRAFThrottle();
+
 // 用于防抖 edge-check 事件和高亮，只有鼠标停留一段时间后才触发
 let edgeCheckDebounceTimer: ReturnType<typeof setTimeout> | null = null;
 const EDGE_CHECK_DEBOUNCE_DELAY = 150; // 150ms 防抖延迟
@@ -904,12 +1025,7 @@ const checkHoverTarget = (x: number, y: number) => {
 
   if (hoverShape) {
     // 检查连接有效性
-    let targetModels = props.connectShapeData?.targetModels;
-    if (connectMode.value === "action") {
-      targetModels = props.connectShapeData?.scenarioMenus?.find(
-        (menu) => menu.code === props.connectShapeData?.shapeKey
-      )?.targetModels;
-    }
+    const targetModels = getCurrentTargetModels();
     let isAllowed = true;
     if (
       targetModels &&
@@ -921,8 +1037,8 @@ const checkHoverTarget = (x: number, y: number) => {
     }
     // 检查parenShapeId是否匹配（无论hoverShape是否改变都要检查）
     if (props.connectShapeData?.sourceId) {
-      const sourceShape = graphStore.shapes.find(
-        (it) => it.id === props.connectShapeData?.sourceId
+      const sourceShape = graphStore.shapeMap.get(
+        props.connectShapeData.sourceId
       );
       if (
         sourceShape &&
@@ -1003,15 +1119,14 @@ const checkHoverTarget = (x: number, y: number) => {
 const updateConnectPointToNearest = (mouseX: number, mouseY: number) => {
   if (!props.connectShapeData?.sourceId || !props.diagramBounds) return;
 
-  const sourceShape = graphStore.shapes.find(
-    (shape) => shape.id === props.connectShapeData?.sourceId
-  );
+  const sourceShape = props.connectShapeData?.sourceId
+    ? graphStore.shapeMap.get(props.connectShapeData.sourceId)
+    : undefined;
 
-  // 使用工具类找到最近连接点
+  // 使用同步版本，避免 Worker 异步延迟导致连线跟不上鼠标
   const nearestPoint = EdgeUtils.findNearestConnectPoint(
     { x: mouseX, y: mouseY },
-    sourceShape,
-    props.diagramBounds
+    sourceShape
   );
 
   if (
@@ -1061,30 +1176,47 @@ watch(
 );
 
 // 处理连接层点击事件
-const handleConnectLayerClick = (event: MouseEvent) => {
-  const localPoint = toLocalPoint(event, layerRef.value);
-
-  const hit = pickTarget(graphStore.shapes, localPoint);
+const handleConnectLayerClick = (
+  event: MouseEvent,
+  resolvedShape?: Shape | null,
+  localPointArg?: { x: number; y: number }
+) => {
+  const localPoint = localPointArg ?? toLocalPoint(event, layerRef.value);
+  const clickedShape = resolvedShape ?? resolveConnectTargetAtPoint(localPoint);
 
-  if (
-    ["shape", "pin"].includes(hit.kind) &&
-    hit.shape?.id &&
-    props.connectShapeData?.sourceId &&
-    hit.shape?.id !== props.connectShapeData.sourceId
-  ) {
+  if (clickedShape?.id && props.connectShapeData?.sourceId) {
     event.stopPropagation();
-    completeConnection(hit.shape, localPoint);
+    completeConnection(clickedShape, localPoint);
+  }
+};
+
+const tryCompleteConnectionFromShapeClick = (shape: Shape) => {
+  if (!isConnecting.value || !props.connectShapeData?.sourceId) {
+    return false;
+  }
+
+  if (!shape?.id || shape.id === props.connectShapeData.sourceId) {
+    return false;
   }
+
+  const bounds = getBounds(shape);
+  const clickPoint = {
+    x: bounds.x + bounds.width / 2,
+    y: bounds.y + bounds.height / 2,
+  };
+
+  completeConnection(shape, clickPoint);
+  return true;
 };
 
 // 完成连接
-const completeConnection = (
+const completeConnection = async (
   clickedShape: Shape,
   clickPoint: { x: number; y: number }
 ) => {
-  const sourceShape = graphStore.shapes.find(
-    (shape: { id: string }) => shape.id === props.connectShapeData?.sourceId
-  );
+  const sourceShape = props.connectShapeData?.sourceId
+    ? graphStore.shapeMap.get(props.connectShapeData.sourceId)
+    : undefined;
 
   // 如果高亮是红色的情况直接返回
   if (!isConnectAllowed.value) {
@@ -1110,7 +1242,7 @@ const completeConnection = (
     return;
   }
   // 检查目标图元类型是否符合targetModels要求
-  const targetModels = props.connectShapeData?.targetModels;
+  const targetModels = getCurrentTargetModels();
   if (targetModels && Array.isArray(targetModels) && targetModels.length > 0) {
     const clickedShapeType = clickedShape.shapeKey || "";
     if (!targetModels.includes(clickedShapeType)) {
@@ -1123,13 +1255,15 @@ const completeConnection = (
     }
   }
 
-  // 检查是否已存在相同类型的边
-  const existingEdge = graphStore.shapes.find(
-    (shape: Shape) =>
-      shape.shapeType === "edge" &&
-      shape.sourceId === props.connectShapeData?.sourceId &&
-      shape.targetId === clickedShape.id &&
-      shape.shapeKey === props.connectShapeData?.shapeKey
+  // 检查是否已存在相同类型的边（通过 edgesByNodeId 索引快速查找）
+  const candidateEdges = props.connectShapeData?.sourceId
+    ? (graphStore.edgesByNodeId.get(props.connectShapeData.sourceId) ?? [])
+    : [];
+  const existingEdge = candidateEdges.find(
+    (edge) =>
+      edge.sourceId === props.connectShapeData?.sourceId &&
+      edge.targetId === clickedShape.id &&
+      edge.shapeKey === props.connectShapeData?.shapeKey
   );
 
   // 如果边已存在，错误提示并返回
@@ -1143,7 +1277,7 @@ const completeConnection = (
     return;
   }
   // 使用工具类完成连接，传递当前的shapes列表以支持差异化路由
-  const connectionData = EdgeUtils.completeConnection(
+  const connectionData = await EdgeUtils.completeConnectionAsync(
     sourceShape,
     clickedShape,
     clickPoint,
@@ -1190,9 +1324,9 @@ const handleMouseLeave = () => {
 // 初始化连接点位置
 const initializeConnectPoint = () => {
   if (props.connectShapeData?.sourceId && props.diagramBounds) {
-    const sourceShape = graphStore.shapes.find(
-      (shape) => shape.id === props.connectShapeData?.sourceId
-    );
+    const sourceShape = props.connectShapeData?.sourceId
+      ? graphStore.shapeMap.get(props.connectShapeData.sourceId)
+      : undefined;
 
     // 使用工具类初始化连接点，传递当前鼠标位置和diagramBounds
     // 这样可以确保即使是第一次连线，也能计算出图元边界上的合适连接点，而不是使用中心点
@@ -1400,13 +1534,13 @@ const continueExternalCreateDrag = async (payload: {
   if (!externalCreateDragState.creatingId) return;
 
   let targetPt = pt;
-  const s = graphStore.shapes.find(
-    (x) => x.id === externalCreateDragState.creatingId
+  const s = graphStore.shapeMap.get(
+    externalCreateDragState.creatingId!
   );
   if (s && s.shapeType === "pin") {
     if (graphStore.hoverContainerId && graphStore.hoverNestable !== false) {
-      const parent = graphStore.shapes.find(
-        (x) => x.id === graphStore.hoverContainerId
+      const parent = graphStore.shapeMap.get(
+        graphStore.hoverContainerId
       );
       if (parent) {
         const { x: adjustedX, y: adjustedY } = snapPinToParentEdge(
@@ -1439,16 +1573,13 @@ const finishExternalCreateDrag = async (payload: {
       isInsideCanvasClient(payload.clientX, payload.clientY, layerRef.value)
     ) {
       let targetPt = pt;
-      const s0 = (graphStore.shapes || []).find(
-        (x: any) => x.id == externalCreateDragState.creatingId
-      ) as any;
+      const s0: any = externalCreateDragState.creatingId
+        ? graphStore.shapeMap.get(externalCreateDragState.creatingId)
+        : undefined;
       // 推断这次 drop 的“候选父节点”
       let parent: Shape | null = null;
       if (graphStore.hoverContainerId && graphStore.hoverNestable !== false) {
-        parent =
-          (graphStore.shapes as any[]).find(
-            (x: any) => x.id === graphStore.hoverContainerId
-          ) || null;
+        parent = graphStore.shapeMap.get(graphStore.hoverContainerId) ?? null;
       }
       // pin：松手瞬间就先算好最终吸附坐标
       if (s0 && s0.shapeType === "pin" && parent) {
@@ -1462,9 +1593,9 @@ const finishExternalCreateDrag = async (payload: {
 
       graphStore.moveDraggedShape(targetPt, { hitPointer: pt });
       await nextTick();
-      const s: any = (graphStore.shapes || []).find(
-        (x: any) => x.id == externalCreateDragState.creatingId
-      );
+      const s: any = externalCreateDragState.creatingId
+        ? graphStore.shapeMap.get(externalCreateDragState.creatingId)
+        : undefined;
       if ((s && s.shapeType == "shape") || s.shapeType == "pin") {
         const pure = _.omit(s, ["inert"]);
         pure.bounds = {
@@ -1580,7 +1711,7 @@ const keyboardHandler = createKeyboardHandler({
   onCopy: () => {
     // 获取当前选中的图元
     const selectedShapes = graphStore.selectedIds
-      .map((id) => graphStore.shapes.find((s) => s.id === id))
+      .map((id) => graphStore.shapeMap.get(id))
       .filter(Boolean) as Shape[];
 
     if (selectedShapes.length === 0) {
@@ -1593,7 +1724,7 @@ const keyboardHandler = createKeyboardHandler({
   onCut: () => {
     // 获取当前选中的图元
     const selectedShapes = graphStore.selectedIds
-      .map((id) => graphStore.shapes.find((s) => s.id === id))
+      .map((id) => graphStore.shapeMap.get(id))
       .filter(Boolean) as Shape[];
 
     if (selectedShapes.length === 0) {
@@ -1643,32 +1774,57 @@ const flushMoveDraggedShape = () => {
   }
 };
 
+type InteractionCleanup = () => void;
+
+const interactionCleanups: InteractionCleanup[] = [];
+
+const registerWindowListener = <K extends keyof WindowEventMap>(
+  event: K,
+  handler: (event: WindowEventMap[K]) => void,
+) => {
+  window.addEventListener(event, handler as EventListener);
+  interactionCleanups.push(() => window.removeEventListener(event, handler as EventListener));
+};
+
+const registerDocumentListener = <K extends keyof DocumentEventMap>(
+  event: K,
+  handler: (event: DocumentEventMap[K]) => void,
+) => {
+  document.addEventListener(event, handler as EventListener);
+  interactionCleanups.push(() => document.removeEventListener(event, handler as EventListener));
+};
+
+const registerEventBusListener = (event: string, handler: (...args: any[]) => void) => {
+  eventBus.on(event, handler);
+  interactionCleanups.push(() => eventBus.off(event, handler));
+};
+
+const handleSelectShapes = (ids: string[]) => {
+  graphStore.clearSelection();
+  graphStore.selectMany(ids);
+};
+
 onMounted(() => {
-  window.addEventListener("keydown", keyboardHandler);
+  registerWindowListener("keydown", keyboardHandler);
   // 添加连接层相关的事件监听
   if (props.connectShapeData) {
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseleave", handleMouseLeave);
+    registerDocumentListener("mousemove", handleMouseMove);
+    registerDocumentListener("mouseleave", handleMouseLeave);
     initializeConnectPoint();
   }
 
   //拖动结束后更新情景菜单
-  eventBus.on("shape-drag-end-updateScenarioMenu", actionButtonsStyle);
+  registerEventBusListener("shape-drag-end-updateScenarioMenu", actionButtonsStyle);
 
   // 监听选择图元事件
-  eventBus.on("select-shapes", (ids: string[]) => {
-    graphStore.clearSelection();
-    graphStore.selectMany(ids);
-  });
+  registerEventBusListener("select-shapes", handleSelectShapes);
 });
 onUnmounted(() => {
   offDrag?.();
+  while (interactionCleanups.length > 0) {
+    interactionCleanups.pop()?.();
+  }
   // 清理连接层相关的事件监听
-  document.removeEventListener("mousemove", handleMouseMove);
-  document.removeEventListener("mouseleave", handleMouseLeave);
-  window.removeEventListener("keydown", keyboardHandler);
-  eventBus.off("shape-drag-end-updateScenarioMenu", actionButtonsStyle);
-  if (rafId) cancelAnimationFrame(rafId);
   if (dragMoveRafId) cancelAnimationFrame(dragMoveRafId);
   dragMoveRafId = null;
   latestDragMove = null;
@@ -1677,6 +1833,7 @@ defineExpose({
   continueExternalCreateDrag,
   finishExternalCreateDrag,
   handleEdgeClick,
+  tryCompleteConnectionFromShapeClick,
   getBoundingClientRect: () => layerRef.value?.getBoundingClientRect(),
 });
 </script>
@@ -1702,17 +1859,37 @@ defineExpose({
   top: 6px;
 }
 
+.hover-container-outline-svg {
+  position: absolute;
+  pointer-events: none;
+}
+
+.hover-container-outline-svg .outline-path {
+  fill: transparent;
+  stroke-width: 2px;
+  stroke-linejoin: round;
+}
+
 /* 允许嵌套（后端 ok） */
 .hover-container-outline.is-valid {
   border: 2px solid #0000ff;
 }
 
+.hover-container-outline-svg.is-valid .outline-path {
+  stroke: #0000ff;
+}
+
 /* 不允许嵌套（后端 false） */
 .hover-container-outline.is-invalid {
   border: 2px solid #f1eded;
   background: rgba(240, 237, 237, 0.842);
 }
 
+.hover-container-outline-svg.is-invalid .outline-path {
+  stroke: #f1eded;
+  fill: rgba(240, 237, 237, 0.35);
+}
+
 /* 删除了选择框、调整大小手柄和操作按钮相关的样式，这些样式已经移到了 SelectionBox 组件中 */
 
 .resize-ghost {
@@ -1768,11 +1945,30 @@ defineExpose({
   border-radius: 2px;
 }
 
+.highlight-overlay-svg {
+  position: absolute;
+  pointer-events: none;
+}
+
+.highlight-overlay-svg .outline-path {
+  fill: transparent;
+  stroke-width: 3px;
+  stroke-linejoin: round;
+}
+
 .highlight-overlay.blue {
   border: 3px solid #1890ff;
 }
 
+.highlight-overlay-svg.blue .outline-path {
+  stroke: #1890ff;
+}
+
 .highlight-overlay.red {
   border: 3px solid #f56c6c;
 }
+
+.highlight-overlay-svg.red .outline-path {
+  stroke: #f56c6c;
+}
 </style>