@mx-sose-front/mx-sose-graph 1.1.3 → 1.1.4

package/src/components/InteractionLayer.vue

@@ -5,9 +5,11 @@
     @mousedown="onLayerMouseDown" @mouseup="onLayerMouseUp" @click="onLayerClick"
     @contextmenu.prevent="handleContextMenu">
     <!-- 只在"选中对象是画布(diagram)"时显示四个角手柄 -->
-    <SelectionBox v-for="s in graphStore.marqueeShapes" :key="s.id" :shape="s" :is-busy="isBusy"
-      :is-multi-selected="isMultiSelected" @resize-start="startResize" @action-button-click="clickActionButton"
-      @model-type-property-id-click="clickModelTypePropertyIdButton" />
+    <template v-if="!marqueeRect">
+      <SelectionBox v-for="s in graphStore.marqueeShapes" :key="s.id" :shape="s" :is-busy="isBusy"
+        :is-multi-selected="isMultiSelected" @resize-start="startResize" @action-button-click="clickActionButton"
+        @model-type-property-id-click="clickModelTypePropertyIdButton" />
+    </template>
     <!-- 命中容器的高亮矩形（虚线框） -->
     <div v-if="hoverRect" :class="[
       'hover-container-outline',
@@ -16,13 +18,14 @@
         'is-valid': graphStore.hoverNestable === true,
       },
     ]" :style="{
-        left: hoverRect.x - 5 + 'px',
-        top: hoverRect.y - 5 + 'px',
-        width: hoverRect.width + 10 + 'px',
-        height: hoverRect.height + 10 + 'px',
-      }" />
+      left: hoverRect.x - 5 + 'px',
+      top: hoverRect.y - 5 + 'px',
+      width: hoverRect.width + 10 + 'px',
+      height: hoverRect.height + 10 + 'px',
+    }" />
     <!-- 框选预览矩形 -->
-    <div v-if="marqueeRect" class="marquee-rect" :style="getMarqueeStyle(marqueeRect)" />
+    <div v-show="marqueeRect" class="marquee-rect"
+      :style="getMarqueeStyle(marqueeRect || { x: 0, y: 0, width: 0, height: 0 })" />
     <!-- 拖动和缩放的预览框 -->
     <component v-for="g in allGhosts" :key="g.id" class="ghost-shape" :is="getShapeComponent(g)" :shape="g"
       :style="getGhostShapeStyle(g)" />
@@ -40,12 +43,20 @@
     <!-- 连接层逻辑 - 当 connectShapeData 存在时显示 -->
     <div v-if="connectShapeData && diagramBounds" class="connect-layer" :style="layerStyle">
       <!-- 连线起点的黑点 - 只在连接时显示 -->
-      <div v-if="isConnecting" class="connect-dot-direct" :style="dotStyle"></div>
+      <div v-show="isConnecting" class="connect-dot-direct" :style="dotStyle"></div>
 
       <!-- 连线 -->
-      <ConnectionLine v-if="showLine" :show-line="showLine" :points="linePoints" :shape-key="connectShapeData?.shapeKey"
-        :style="svgStyle" />
+      <ConnectionLine v-show="showLine" :show-line="showLine" :points="linePoints"
+        :shape-key="connectShapeData?.shapeKey" :style="svgStyle" />
     </div>
+
+    <!-- 高亮覆盖层 - 独立于 connect-layer，支持连线模式和拖拽模式 -->
+    <div v-if="highlightOverlayBounds" class="highlight-overlay" :class="highlightOverlayColor" :style="{
+      left: highlightOverlayBounds.x + 'px',
+      top: highlightOverlayBounds.y + 'px',
+      width: highlightOverlayBounds.width + 'px',
+      height: highlightOverlayBounds.height + 'px',
+    }" />
   </div>
 </template>
 
@@ -67,8 +78,8 @@ import type {
   ExternalCreateDragState,
 } from "../types/interactionLayer";
 import { useGraphStore } from "../store/graphStore";
-import SelectionBox from "./SelectionBox.vue";
-import NameEditor from "./NameEditor.vue";
+import SelectionBox from "./SelectionBox/SelectionBox.vue";
+import NameEditor from "./NameEditor/NameEditor.vue";
 
 // 工具：几何/命中/样式/拖拽
 import {
@@ -99,16 +110,16 @@ import { storeToRefs } from "pinia";
 import { EdgeUtils } from "../utils/edgeUtils";
 import ConnectionLine from "./LineStyle/ConnectionLine.vue";
 import { isCompartment } from "../utils/compartment";
-import { HighlightUtils } from "../utils/highlightUtils";
 import { ContextMenuUtils } from "../utils/contextMenuUtils";
 // 静态导入图片资源
 import { getUuid } from "../utils/index";
 import { ElMessage } from "element-plus";
 import { snapPinToParentEdge, snapPinPointerOnMove } from "../utils/pinUtils";
 import { createKeyboardHandler } from "../utils/keyboardUtils";
-import { NameEditManager } from "../utils/nameEditUtils";
+import { useNameEdit } from "../hooks/useNameEdit";
 import { guardOperate } from "../utils/license-guard";
-import { createResizeUtils } from "../utils/resizeUtils";
+import { useResize } from "../hooks/useResize";
+import { useHighlight, type IHighlightUtils } from "../hooks/useHighlight";
 
 const props = defineProps<InteractionLayerProps>();
 
@@ -177,17 +188,19 @@ const getGhostShapeStyle = (shape: Shape): CSSProperties => {
 // 根层引用：用于本地坐标换算
 const layerRef = ref<HTMLDivElement | null>(null);
 
-// 名称编辑管理器
-const nameEditManager = new NameEditManager({
-  onNameChange: (oldName, newName) => {
-    if (graphStore.selectedShape) {
-      emit("editName", graphStore.selectedShape, newName, oldName);
-    }
+// 名称编辑 - 使用 Composable
+const nameEditManager = useNameEdit({
+  getSelectedShape: () => graphStore.selectedShape,
+  onNameChange: (shape, oldName, newName) => {
+    emit("editName", shape, newName, oldName);
   },
 });
 
-// 缩放工具实例
-const resizeUtils = createResizeUtils(
+// 解构名称编辑状态（方便在组件内使用）
+const { isEditingName, editingName } = nameEditManager;
+
+// 缩放 - 使用 Composable
+const { isResizing, groupGhost, startResize } = useResize(
   layerRef,
   {
     packages: props.packages,
@@ -207,21 +220,6 @@ const resizeUtils = createResizeUtils(
   }
 );
 
-// 解构缩放相关的变量
-const { isResizing, groupGhost, startResize } = resizeUtils;
-
-// 名称输入框引用
-const nameInput = ref<HTMLInputElement | null>(null);
-
-// 监听nameInput ref变化，将其传递给NameEditManager
-watchEffect(() => {
-  if (nameInput.value) {
-    nameEditManager.setNameInput(nameInput.value);
-  }
-});
-
-// 从名称编辑管理器获取响应式状态
-const { isEditingName, editingName } = nameEditManager.editingState;
 // 是否在画布内
 const isMouseInside = ref(false);
 // 记录最近一次 mousemove（用于 rAF 合并）
@@ -289,15 +287,29 @@ const isConnecting = ref(false); // 是否正在连接状态
 const targetConnectPoint = ref({ x: 0, y: 0 }); // 目标连接点
 const targetShape = ref<Shape | null>(null); // 目标图形
 
-// 高亮工具实例
-const highlightUtils = new HighlightUtils(graphStore);
+// 高亮相关 - 使用 Composable
+const {
+  overlayBounds: highlightOverlayBounds,
+  overlayColor: highlightOverlayColor,
+  highlightedShapeId,
+  highlightShape,
+  setHighlightTimeout,
+  clearHighlightTimeout,
+} = useHighlight();
+
+// 创建 highlightUtils 对象供 EdgeUtils.cancelConnection 使用
+const highlightUtils: IHighlightUtils = {
+  highlightShape,
+  clearHighlightTimeout,
+};
 
-// 高亮相关状态 - 使用计算属性从工具类获取
-const highlightedShape = computed(() => highlightUtils.getHighlightedShape());
+// 保持兼容性：highlightedShape 计算属性
+const highlightedShape = computed(() => {
+  if (!highlightedShapeId.value) return null;
+  return graphStore.shapes.find(s => s.id === highlightedShapeId.value) || null;
+});
 const sourceShape = ref<Shape | null>(null);
 const recordClickPoint = ref({ x: 0, y: 0 });
-// 高亮相关状态
-const highlightTimeout = ref<ReturnType<typeof setTimeout> | null>(null); // 高亮定时器
 
 // 正在交互：缩放中 或 元素拖动中
 const isBusy = computed(
@@ -405,7 +417,7 @@ const onLayerClick = (evt: MouseEvent) => {
         isConnecting.value = false;
         graphStore.setConnectMode("connect");
         highlightShape(null, false); // 取消图元高亮
-        highlightUtils.clearHighlightTimeout();
+        clearHighlightTimeout();
         return;
       }
       const newShape = _.cloneDeep(foundSourceShape);
@@ -522,6 +534,8 @@ const onLayerMouseDown = (evt: MouseEvent) => {
         !evt.shiftKey
       ) {
         graphStore.clearSelection();
+        // 点击空白处时，清除剪切状态
+        ContextMenuUtils.clearCutState();
       }
       startMarquee(pt);
       evt.preventDefault();
@@ -571,6 +585,8 @@ const onLayerMouseDown = (evt: MouseEvent) => {
         // 其他情况：单选当前元素
         graphStore.clearSelection();
         graphStore.selectShape(shape);
+        // 选中其他图元时，清除剪切状态
+        ContextMenuUtils.clearCutState();
       }
       // 选区此时已是“正确”的：要么多选集合，要么当前单选
       const ids = graphStore.selectedIds.length
@@ -617,12 +633,15 @@ const onLayerMouseDown = (evt: MouseEvent) => {
                 }
               }
             }
-            graphStore.moveDraggedShape(targetPt);
+            // pin 拖动：targetPt 用于落位/ghost，hover 命中用真实鼠标点，避免 hoverContainerId 来回切换闪动
+            // graphStore.moveDraggedShape(targetPt, { hitPointer: curr });
+            scheduleMoveDraggedShape(targetPt, { hitPointer: curr });
           }
         },
         () => {
           // 只有在“真的开始拖拽”后，才结束拖拽
           if (started) {
+            flushMoveDraggedShape();
             graphStore.endDragShape();
           } else {
             // 纯点击：啥也不做（已完成选中），避免误触发 reparent/zIndex
@@ -656,6 +675,22 @@ const startMarquee = (anchor: { x: number; y: number }) => {
     width: 0,
     height: 0,
   };
+  // 预先缓存“可被框选的图元”及其 bounds（避免 move 时重复 getBounds）
+  const candidates = graphStore.shapes
+    .filter((s) => s.shapeType?.toLowerCase?.() !== "diagram")
+    .map((s) => ({
+      id: s.id,
+      //缓存 bounds，避免 move 中每次 getBounds(s)
+      b: getBounds(s),
+    }));
+  // rAF 合并高频 move（只更新 marqueeRect，避免过多响应式刷新）
+  let raf = 0;
+  let latestPoint = anchorClamped;
+  const updateRect = () => {
+    raf = 0;
+    // 根据“锚点 & 当前点”得到框选矩形
+    marqueeRect.value = rectFromPoints(marqueeAnchor.value!, latestPoint);
+  };
   // 拖拽生命周期
   offDrag?.();
   offDrag = null;
@@ -665,28 +700,49 @@ const startMarquee = (anchor: { x: number; y: number }) => {
       // 当前指针的本地坐标
       const currRaw = toLocalPoint(e, layerRef.value);
       // 只对左/上做夹取（右/下不限制）
-      const currClamped = clampPointToRect(
+      latestPoint = clampPointToRect(
         currRaw,
         { x: 0, y: 0, width: 0, height: 0 },
         container,
         edges
       );
+
       // 根据“锚点 & 当前点”得到框选矩形（会自动处理反向拖拽）
-      const rect = rectFromPoints(marqueeAnchor.value!, currClamped);
-      marqueeRect.value = rect;
-      // 只选“完全位于框内”的图元（排除 diagram）
-      const ids = graphStore.shapes
-        .filter((s) => s.shapeType?.toLowerCase?.() !== "diagram")
-        .filter((s) => rectContainsRect(rect, getBounds(s)))
-        .map((s) => s.id);
-      // 多选：所有被框中的图元都进入选中态
-      graphStore.selectMany(ids);
+      // 用 rAF 合并更新，避免 mousemove 触发过多响应式刷新
+      if (raf) return;
+      raf = requestAnimationFrame(updateRect);
     },
     // 结束框选，清理预览
     () => {
+      // 结束时确保最后一次 rect 已更新
+      if (raf) cancelAnimationFrame(raf);
+      updateRect();
+
+      const rect = marqueeRect.value!;
+      const right = rect.x + rect.width;
+      const bottom = rect.y + rect.height;
+      // 松手时一次性计算选中 ids（只做一次 O(N)）
+      const ids: string[] = [];
+      for (let i = 0; i < candidates.length; i++) {
+        const c = candidates[i];
+        const b = c.b;
+        // 避免函数调用/对象创建
+        if (
+          b.x >= rect.x &&
+          b.y >= rect.y &&
+          b.x + b.width <= right &&
+          b.y + b.height <= bottom
+        ) {
+          ids.push(c.id);
+        }
+      }
+      // 一次性更新选中态（不会在拖动中疯狂更新 store）
+      graphStore.selectMany(ids);
+      // 清理预览
       marqueeAnchor.value = null;
       marqueeRect.value = null;
       cursorStyle.value = "default";
+      offDrag = null;
     }
   );
 };
@@ -704,15 +760,6 @@ const contextMenuTarget = ref<Shape | null>(null);
 // 是否允许连接当前高亮的图元
 const isConnectAllowed = ref(false);
 
-// 高亮图元的边框样式 - 使用工具类实现
-const highlightShape = (
-  shape: Shape | null,
-  isHighlight: boolean,
-  isValidSource: boolean = true
-) => {
-  highlightUtils.highlightShape(shape, isHighlight, isValidSource);
-};
-
 // 处理右键点击事件
 const handleContextMenu = (event: MouseEvent) => {
   return guardOperate(async () => {
@@ -728,7 +775,8 @@ const handleContextMenu = (event: MouseEvent) => {
       graphStore.shapes,
       graphStore.selectShape,
       graphStore.isDragging,
-      isResizing.value
+      isResizing.value,
+      graphStore.currentScale // 传入当前缩放比例
     );
 
     if (hitShape) {
@@ -778,14 +826,32 @@ watch(
           );
 
           if (connectionData) {
-            emit("connectEnd", connectionData);
+            // ServiceObjectFlow 特殊处理：需要在 sourcePoint 和 targetPoint 创建 pin
+            if (
+              props.connectShapeData?.shapeKey
+                ?.toLowerCase()
+                .includes("objectflow") &&
+              sourceShape.value &&
+              connectionData.sourcePoint &&
+              connectionData.targetPoint
+            ) {
+              const result = EdgeUtils.handleServiceObjectFlowConnection(
+                sourceShape.value,
+                foundShape,
+                connectionData
+              );
+              emit("objectFlowConnectEnd", {
+                connectionData: result.connectionData,
+                outputPinBounds: result.outputPinBounds,
+                inputPinBounds: result.inputPinBounds,
+              });
+            } else {
+              (connectionData as any).sourceShape = sourceShape.value;
+              emit("connectEnd", connectionData);
+            }
             graphStore.setConnectMode("connect");
             isConnecting.value = false;
-            highlightUtils.clearHighlightTimeout();
-            if (highlightTimeout.value) {
-              clearTimeout(highlightTimeout.value);
-              highlightTimeout.value = null;
-            }
+            clearHighlightTimeout();
           }
         }
       }
@@ -819,6 +885,10 @@ const handleMouseMove = (event: MouseEvent) => {
 // 用于跟踪上一次的hoverShape，避免重复发射事件
 let lastHoverShapeId: string | null = null;
 
+// 用于防抖 edge-check 事件和高亮，只有鼠标停留一段时间后才触发
+let edgeCheckDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+const EDGE_CHECK_DEBOUNCE_DELAY = 150; // 150ms 防抖延迟
+
 const checkHoverTarget = (x: number, y: number) => {
   if (!props.diagramBounds) return;
 
@@ -830,7 +900,7 @@ const checkHoverTarget = (x: number, y: number) => {
     props.diagramBounds,
     props.connectShapeData?.sourceId
   );
-  highlightUtils.clearHighlightTimeout();
+  clearHighlightTimeout();
 
   if (hoverShape) {
     // 检查连接有效性
@@ -863,50 +933,69 @@ const checkHoverTarget = (x: number, y: number) => {
         isAllowed = false;
       }
     }
-    // 只有当hoverShape改变且connectShapeData存在时才发射事件
-    if (lastHoverShapeId !== hoverShape.id && props.connectShapeData) {
-      lastHoverShapeId = hoverShape.id;
-      // 使用更严格的优先级判断逻辑，确保只要有一个属性有实际值就使用它
-      let sourceModelId;
-      // 如果modelId是有效字符串或数字，使用modelId
-      if (
-        props.connectShapeData.modelId &&
-        props.connectShapeData.modelId.toString().trim() !== ""
-      ) {
-        sourceModelId = props.connectShapeData.modelId;
-      }
-      // 否则，如果sourceModelId是有效字符串或数字，使用sourceModelId
-      else if (
-        props.connectShapeData.sourceModelId &&
-        props.connectShapeData.sourceModelId.toString().trim() !== ""
-      ) {
-        sourceModelId = props.connectShapeData.sourceModelId;
+
+    // 当 hoverShape 改变时，清除之前的防抖定时器
+    if (lastHoverShapeId !== hoverShape.id) {
+      // 清除旧的防抖定时器
+      if (edgeCheckDebounceTimer) {
+        clearTimeout(edgeCheckDebounceTimer);
+        edgeCheckDebounceTimer = null;
       }
-      // 只有当sourceModelId有值时就发射事件，并将isAllowed的值一并传递
-      if (sourceModelId) {
-        eventBus.emit("edge-check", {
-          sourceModelId: sourceModelId, // 显式指定键值对，避免属性简写可能带来的混淆
-          targetModelId: hoverShape.modelId,
-          isAllowed: isAllowed, // 将验证结果一并发射
-        });
+
+      // 立即取消之前图元的高亮（如果有）
+      highlightShape(null, false);
+      isConnectAllowed.value = false;
+
+      lastHoverShapeId = hoverShape.id;
+
+      // 只有当 connectShapeData 存在时才设置防抖定时器
+      if (props.connectShapeData) {
+        // 使用防抖：只有鼠标停留一段时间后才发射 edge-check 事件和高亮
+        edgeCheckDebounceTimer = setTimeout(() => {
+          // 使用更严格的优先级判断逻辑，确保只要有一个属性有实际值就使用它
+          let sourceModelId;
+          // 如果modelId是有效字符串或数字，使用modelId
+          if (
+            props.connectShapeData?.modelId &&
+            props.connectShapeData.modelId.toString().trim() !== ""
+          ) {
+            sourceModelId = props.connectShapeData.modelId;
+          }
+          // 否则，如果sourceModelId是有效字符串或数字，使用sourceModelId
+          else if (
+            props.connectShapeData?.sourceModelId &&
+            props.connectShapeData.sourceModelId.toString().trim() !== ""
+          ) {
+            sourceModelId = props.connectShapeData.sourceModelId;
+          }
+          // 只有当sourceModelId有值时就发射事件，并将isAllowed的值一并传递
+          if (sourceModelId) {
+            eventBus.emit("edge-check", {
+              sourceModelId: sourceModelId, // 显式指定键值对，避免属性简写可能带来的混淆
+              targetModelId: hoverShape.modelId,
+              isAllowed: isAllowed, // 将验证结果一并发射
+            });
+          }
+
+          // 高亮目标图元 - 根据isAllowed决定高亮颜色
+          highlightShape(hoverShape, true, isAllowed);
+          isConnectAllowed.value = isAllowed;
+        }, EDGE_CHECK_DEBOUNCE_DELAY);
       }
     }
-    // 高亮目标图元 - 根据isAllowed决定高亮颜色（实时计算，不依赖异步更新的props.edgeCheck）
-    // true为蓝色，false为红色
-    // 直接使用isAllowed（前端实时验证结果），确保快速移动时颜色能立即更新
-    // 如果后端验证结果不同，会在props.edgeCheck更新后通过watch或其他机制再次更新
-    highlightUtils.setHighlightTimeout(() => {
-      highlightShape(hoverShape, true, isAllowed);
-      isConnectAllowed.value = isAllowed;
-    }, 10);
   } else {
-    // 如果没有悬停在目标上，重置lastHoverShapeId
+    // 如果没有悬停在目标上
+    // 清除防抖定时器
+    if (edgeCheckDebounceTimer) {
+      clearTimeout(edgeCheckDebounceTimer);
+      edgeCheckDebounceTimer = null;
+    }
+    // 重置lastHoverShapeId
     lastHoverShapeId = null;
-    // 延迟取消高亮
-    highlightUtils.setHighlightTimeout(() => {
-      highlightShape(null, false);
-      isConnectAllowed.value = false;
-    }, 60);
+    // 立即取消高亮（无需延迟，因为高亮本身已有防抖）
+    clearHighlightTimeout();
+    highlightShape(null, false);
+    isConnectAllowed.value = false;
   }
 };
 
@@ -942,6 +1031,13 @@ watch(
   () => isConnecting.value,
   (newVal) => {
     if (!newVal) {
+      // 清除防抖定时器
+      if (edgeCheckDebounceTimer) {
+        clearTimeout(edgeCheckDebounceTimer);
+        edgeCheckDebounceTimer = null;
+      }
+      // 重置 lastHoverShapeId
+      lastHoverShapeId = null;
       isConnectAllowed.value = false;
       highlightShape(null, false); // 取消图元高亮
     }
@@ -995,7 +1091,7 @@ const completeConnection = (
     isConnecting.value = false;
     highlightShape(null, false); // 取消图元高亮
     graphStore.setConnectMode("connect");
-    highlightUtils.clearHighlightTimeout();
+    clearHighlightTimeout();
     ElMessage.error("当前目标图元类型不符合连接要求");
     return;
   }
@@ -1010,7 +1106,7 @@ const completeConnection = (
   ) {
     isConnecting.value = false;
     highlightShape(null, false); // 取消图元高亮
-    highlightUtils.clearHighlightTimeout();
+    clearHighlightTimeout();
     return;
   }
   // 检查目标图元类型是否符合targetModels要求
@@ -1020,7 +1116,7 @@ const completeConnection = (
     if (!targetModels.includes(clickedShapeType)) {
       isConnecting.value = false;
       highlightShape(null, false); // 取消图元高亮
-      highlightUtils.clearHighlightTimeout();
+      clearHighlightTimeout();
       // alert('当前目标图元类型不符合连接要求');
       ElMessage.error("当前目标图元类型不符合连接要求");
       return;
@@ -1043,7 +1139,7 @@ const completeConnection = (
     isConnecting.value = false;
     graphStore.setConnectMode("connect");
     highlightShape(null, false); // 取消图元高亮
-    highlightUtils.clearHighlightTimeout();
+    clearHighlightTimeout();
     return;
   }
   // 使用工具类完成连接，传递当前的shapes列表以支持差异化路由
@@ -1079,7 +1175,7 @@ const completeConnection = (
     graphStore.setConnectMode("connect");
     isConnecting.value = false;
     highlightShape(null, false); // 取消图元高亮
-    highlightUtils.clearHighlightTimeout();
+    clearHighlightTimeout();
   }
 };
 // 鼠标离开事件处理
@@ -1088,7 +1184,7 @@ const handleMouseLeave = () => {
     showLine.value = false;
   }
   highlightShape(null, false); // 取消图元高亮
-  highlightUtils.clearHighlightTimeout();
+  clearHighlightTimeout();
 };
 
 // 初始化连接点位置
@@ -1222,7 +1318,10 @@ const cancelConnection = () => {
 // 监听 connectShapeData 变化，重新初始化连接点
 watch(
   () => props.connectShapeData,
-  () => {
+  (newVal) => {
+    if (newVal && !newVal.scenarioMenus) {
+      graphStore.setConnectMode('connect');
+    }
     initializeConnectPoint();
   },
   { deep: true }
@@ -1319,8 +1418,9 @@ const continueExternalCreateDrag = async (payload: {
       }
     }
   }
-
-  graphStore.moveDraggedShape(targetPt);
+  // 外部创建 pin：targetPt 是期望的最终落位，但 hover 命中仍用真实鼠标 pt，避免闪动
+  // graphStore.moveDraggedShape(targetPt, { hitPointer: pt });
+  scheduleMoveDraggedShape(targetPt, { hitPointer: pt });
 };
 
 //拖拽结束后重新发送事件到front中调用接口
@@ -1338,7 +1438,29 @@ const finishExternalCreateDrag = async (payload: {
     if (
       isInsideCanvasClient(payload.clientX, payload.clientY, layerRef.value)
     ) {
-      graphStore.moveDraggedShape(pt);
+      let targetPt = pt;
+      const s0 = (graphStore.shapes || []).find(
+        (x: any) => x.id == externalCreateDragState.creatingId
+      ) as any;
+      // 推断这次 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;
+      }
+      // pin：松手瞬间就先算好最终吸附坐标
+      if (s0 && s0.shapeType === "pin" && parent) {
+        const { x: adjustedX, y: adjustedY } = snapPinToParentEdge(
+          pt,
+          parent,
+          s0
+        );
+        targetPt = { x: adjustedX, y: adjustedY };
+      }
+
+      graphStore.moveDraggedShape(targetPt, { hitPointer: pt });
       await nextTick();
       const s: any = (graphStore.shapes || []).find(
         (x: any) => x.id == externalCreateDragState.creatingId
@@ -1348,29 +1470,17 @@ const finishExternalCreateDrag = async (payload: {
         pure.bounds = {
           // 覆盖为新的 bounds
           ...pure.bounds,
-          x: pt.x,
-          y: pt.y,
+          x: targetPt.x,
+          y: targetPt.y,
         };
-        // 先推断这次 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;
-        }
         // 如果是 pin 类型，调整位置吸附到父图元最近的边
         if (pure.shapeType === "pin" && parent) {
-          const { x: adjustedX, y: adjustedY } = snapPinToParentEdge(
-            pt,
-            parent,
-            pure
-          );
-          pure.bounds.x = adjustedX;
-          pure.bounds.y = adjustedY;
+          // 这里直接沿用上面计算出的 targetPt，避免再次出现“先 pt 后吸附”的一帧回跳
+          pure.bounds.x = targetPt.x;
+          pure.bounds.y = targetPt.y;
           pure.parenShapeId = parent.id;
-          // 将吸附后的坐标同步回 ghost
-          graphStore.moveDraggedShape({ x: adjustedX, y: adjustedY });
+          // 将吸附后的坐标同步回 ghost（hover 命中仍用真实鼠标点）
+          graphStore.moveDraggedShape(targetPt, { hitPointer: pt });
         }
         try {
           const { ok } = await checkNestViaFront(
@@ -1466,6 +1576,7 @@ const keyboardHandler = createKeyboardHandler({
   onEditProperty: () => onLayerDblClick(true),
   onCancelConnection: cancelConnection,
   isEditingName: () => isEditingName.value,
+  isTextareaDialogOpen: () => props.isTextareaDialogOpen || false, // 传递对话框状态
   onCopy: () => {
     // 获取当前选中的图元
     const selectedShapes = graphStore.selectedIds
@@ -1476,14 +1587,61 @@ const keyboardHandler = createKeyboardHandler({
       return;
     }
 
-    // 使用ContextMenuUtils存储复制的图元
-    ContextMenuUtils.setCopiedShapes(selectedShapes);
+    // 使用ContextMenuUtils处理复制
+    ContextMenuUtils.handleCopy(selectedShapes);
+  },
+  onCut: () => {
+    // 获取当前选中的图元
+    const selectedShapes = graphStore.selectedIds
+      .map((id) => graphStore.shapes.find((s) => s.id === id))
+      .filter(Boolean) as Shape[];
+
+    if (selectedShapes.length === 0) {
+      return;
+    }
+
+    // 使用ContextMenuUtils处理剪切
+    ContextMenuUtils.handleCut(selectedShapes);
   },
   onPaste: () => {
     // 使用ContextMenuUtils处理粘贴
     ContextMenuUtils.handlePaste(graphStore.selectedShape);
   },
 });
+// 拖动 move 的 rAF 节流器（只合并 move，不影响 mouseup 的最终落位）
+let dragMoveRafId: number | null = null;
+let latestDragMove:
+  | { pointer: { x: number; y: number }; options?: { hitPointer?: { x: number; y: number } } }
+  | null = null;
+
+/** 安排一次 move（同一帧内多次调用会合并为最后一次） */
+const scheduleMoveDraggedShape = (
+  pointer: { x: number; y: number },
+  options?: { hitPointer?: { x: number; y: number } }
+) => {
+  latestDragMove = { pointer, options };
+  if (dragMoveRafId) return;
+
+  dragMoveRafId = requestAnimationFrame(() => {
+    dragMoveRafId = null;
+    if (!latestDragMove) return;
+
+    graphStore.moveDraggedShape(latestDragMove.pointer, latestDragMove.options);
+    latestDragMove = null;
+  });
+};
+
+/** 在 mouseup/drag end 前强制把最后一次 move 刷进去，避免“最后一帧没跟上” */
+const flushMoveDraggedShape = () => {
+  if (dragMoveRafId) {
+    cancelAnimationFrame(dragMoveRafId);
+    dragMoveRafId = null;
+  }
+  if (latestDragMove) {
+    graphStore.moveDraggedShape(latestDragMove.pointer, latestDragMove.options);
+    latestDragMove = null;
+  }
+};
 
 onMounted(() => {
   window.addEventListener("keydown", keyboardHandler);
@@ -1497,13 +1655,6 @@ onMounted(() => {
   //拖动结束后更新情景菜单
   eventBus.on("shape-drag-end-updateScenarioMenu", actionButtonsStyle);
 
-  // 监听粘贴图元事件
-  eventBus.on("paste-shapes", (shapes: Shape[]) => {
-    shapes.forEach((shape) => {
-      graphStore.addShape(shape);
-    });
-  });
-
   // 监听选择图元事件
   eventBus.on("select-shapes", (ids: string[]) => {
     graphStore.clearSelection();
@@ -1516,13 +1667,11 @@ onUnmounted(() => {
   document.removeEventListener("mousemove", handleMouseMove);
   document.removeEventListener("mouseleave", handleMouseLeave);
   window.removeEventListener("keydown", keyboardHandler);
-  // 重置名称编辑状态
-  nameEditManager.reset();
   eventBus.off("shape-drag-end-updateScenarioMenu", actionButtonsStyle);
-  highlightUtils.clearHighlightTimeout();
-  // 清理高亮工具实例
-  highlightUtils.dispose();
   if (rafId) cancelAnimationFrame(rafId);
+  if (dragMoveRafId) cancelAnimationFrame(dragMoveRafId);
+  dragMoveRafId = null;
+  latestDragMove = null;
 });
 defineExpose({
   continueExternalCreateDrag,
@@ -1609,4 +1758,21 @@ defineExpose({
   pointer-events: none;
   z-index: 1000;
 }
+
+/* 高亮覆盖层样式 - 性能优化方案 */
+.highlight-overlay {
+  position: absolute;
+  pointer-events: none;
+  box-sizing: border-box;
+  z-index: 1001;
+  border-radius: 2px;
+}
+
+.highlight-overlay.blue {
+  border: 3px solid #1890ff;
+}
+
+.highlight-overlay.red {
+  border: 3px solid #f56c6c;
+}
 </style>