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

package/src/components/InteractionLayer.vue

@@ -5,28 +5,11 @@
     @mousedown="onLayerMouseDown" @mouseup="onLayerMouseUp" @click="onLayerClick"
     @contextmenu.prevent="handleContextMenu">
     <!-- 只在"选中对象是画布(diagram)"时显示四个角手柄 -->
-    <div v-for="s in graphStore.marqueeShapes" :key="s.id" class="selection-box" :style="getSelectionBoxStyle(s)">
-      <!-- 只有当shapeType不是edge且不是conceptualRole时才渲染四个角手柄 -->
-      <div class="resize-handles" v-show="!isBusy && s.shapeType !== 'edge'">
-        <div v-for="h in resizeHandles" :key="h.position" class="resize-handle"
-          :class="[`resize-${h.position}`, { 'is-disabled': isMultiSelected }]" :style="getHandleStyle(h, s)"
-          @mousedown.stop.prevent="startResize($event, h.position, s)" />
-      </div>
-      <div class="action-buttons"
-        v-show="!isMultiSelected && s.scenarioMenus && s.scenarioMenus.length > 0 && s.shapeType != ShapeConfig.SHAPE_TYPE"
-        :style="actionButtonsStyle(s)">
-        <div v-if="s.modelTypePropertyId" class="border-btn">
-          <button class="action-btn edit-btn"
-            @mousedown.stop.prevent="clickModelTypePropertyIdButton(s.modelTypePropertyId, s)" title="设置类型">
-            <img src="../statics/icons/childIcons/设置类型.png" alt="设置类型">
-          </button>
-        </div>
-        <button v-for="value in s.scenarioMenus" class="action-btn edit-btn"
-          @mousedown.stop.prevent="clickActionButton($event, value.code, s)" @click.stop.prevent :title="value.name">
-          <img :src="getIcon('childIcons', value.icon || '')" />
-        </button>
-      </div>
-    </div>
+    <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',
@@ -41,43 +24,39 @@
       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)" />
-    <!-- 名称虚线框（选中时显示） -->
-    <div v-if="
-      graphStore.selectedShape &&
-      graphStore.selectedShape.nameBounds &&
-      !isEditingName && graphStore.selectedShape.shapeKey !== 'ConceptRole'
-      && !graphStore.pendingNestedIds.includes(graphStore.selectedShape.id)
-    " class="name-text-box-container" :style="nameTextBoxContainerStyle(graphStore.selectedShape.id)">
-      <div class="name-text-box" :style="nameTextBoxStyle(graphStore.selectedShape)" title="点击编辑名称"></div>
-    </div>
-
-    <!-- 名称编辑输入框 -->
-    <div v-if="isEditingName && graphStore.selectedShape && graphStore.selectedShape.shapeKey !== 'ConceptRole'"
-      class="name-editor-container" :style="nameEditorContainerStyle(graphStore.selectedShape)">
-      <input ref="nameInput" v-model="editingName" class="name-input" :style="nameInputStyle(graphStore.selectedShape)"
-        @blur="nameEditManager.handleBlur(graphStore.selectedShape)"
-        @keyup.enter="nameEditManager.handleKeyUp($event, graphStore.selectedShape)"
-        @keyup.escape="nameEditManager.cancelEdit()" />
-    </div>
+    <!-- 名称编辑组件 -->
+    <NameEditor :selected-shape="graphStore.selectedShape" :can-edit="!graphStore.pendingNestedIds.includes(
+      graphStore.selectedShape?.id || ''
+    )
+      " :is-editing-name="isEditingName" :editing-name="editingName" :name-edit-manager="nameEditManager" />
 
     <!-- 使用右键菜单组件 -->
     <ContextMenu v-if="selectedShape && !isMultiSelected" :visible="showContextMenu" :selected-shape="selectedShape"
       :position="contextMenuPosition" @update:visible="showContextMenu = $event"
-      @delete="ContextMenuUtils.handleDelete(contextMenuTarget)" @show-property-panel="onLayerDblClick(true);" />
+      @show-property-panel="onLayerDblClick(true)" />
 
     <!-- 连接层逻辑 - 当 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>
 
@@ -90,12 +69,17 @@ import {
   onMounted,
   type CSSProperties,
   watch,
+  watchEffect,
 } from "vue";
 import type { Shape } from "../types";
 import { InteractionLayerEmits } from "../types/interactionLayer";
-import type { InteractionLayerProps, ExternalCreateDragState } from "../types/interactionLayer";
+import type {
+  InteractionLayerProps,
+  ExternalCreateDragState,
+} from "../types/interactionLayer";
 import { useGraphStore } from "../store/graphStore";
-import { resizeHandles } from "../constants/index";
+import SelectionBox from "./SelectionBox/SelectionBox.vue";
+import NameEditor from "./NameEditor/NameEditor.vue";
 
 // 工具：几何/命中/样式/拖拽
 import {
@@ -111,17 +95,10 @@ import {
 } from "../utils/geom";
 import { pickTarget } from "../utils/hittest";
 import {
-  ShapeConfig,
-  selectionBoxStyle,
-  handleStyle,
   adjustCanvasToFitAllShapes,
   actionButtonsStyle,
-  nameTextBoxContainerStyle,
-  nameTextBoxStyle,
-  nameEditorContainerStyle,
-  nameInputStyle,
   getMarqueeStyle,
-  getLayerStyle
+  getLayerStyle,
 } from "../utils/diagram";
 import { withDrag } from "../utils/dom";
 import { checkNestViaFront } from "../utils/policy";
@@ -133,17 +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 { getIcon } from "../utils/iconLoader";
 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 { guardOperate } from "../utils/license-guard"
-import { createResizeUtils } from "../utils/resizeUtils";
+import { snapPinToParentEdge, snapPinPointerOnMove } from "../utils/pinUtils";
+import { createKeyboardHandler } from "../utils/keyboardUtils";
+import { useNameEdit } from "../hooks/useNameEdit";
+import { guardOperate } from "../utils/license-guard";
+import { useResize } from "../hooks/useResize";
+import { useHighlight, type IHighlightUtils } from "../hooks/useHighlight";
 
 const props = defineProps<InteractionLayerProps>();
 
@@ -155,7 +131,7 @@ const graphStore = useGraphStore();
 const { selectedShape, connectMode } = storeToRefs(graphStore);
 
 // 是否正在“外部创建拖拽”（
-const isExternalCreateDragging = ref(false)
+const isExternalCreateDragging = ref(false);
 // 光标样式（仅在按下时切换）
 const cursorStyle = ref<"default" | "pointer">("default");
 // 缩放时使用的预览框
@@ -186,7 +162,7 @@ const allGhosts = computed<Shape[]>(() => {
   const byId = new Map<string, Shape>();
   // 收集所有Ghost形状
   if (!isExternalCreateDragging.value) {
-    graphStore.ghostShadow.forEach(g => byId.set(g.id, g))
+    graphStore.ghostShadow.forEach((g) => byId.set(g.id, g));
   }
   // 缩放时的预览
   resizeGhostShadow.value.forEach((g) => byId.set(g.id, g));
@@ -212,41 +188,38 @@ 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(layerRef, {
-  packages: props.packages,
-  diagram: props.diagram,
-  taggedValueLabels: props.taggedValueLabels,
-}, {
-  onResizeStart: (target) => {
-    eventBus.emit('resize-start', { target });
-  },
-  onResizeEnd: (target) => {
-    eventBus.emit('resize-end', { target });
+// 解构名称编辑状态（方便在组件内使用）
+const { isEditingName, editingName } = nameEditManager;
+
+// 缩放 - 使用 Composable
+const { isResizing, groupGhost, startResize } = useResize(
+  layerRef,
+  {
+    packages: props.packages,
+    diagram: props.diagram,
+    taggedValueLabels: props.taggedValueLabels,
   },
-  onShapeUpdate: (id, updates) => {
-    graphStore.updateShape(id, updates);
+  {
+    onResizeStart: (target) => {
+      eventBus.emit("resize-start", { target });
+    },
+    onResizeEnd: (target) => {
+      eventBus.emit("resize-end", { target });
+    },
+    onShapeUpdate: (id, updates) => {
+      graphStore.updateShape(id, updates);
+    },
   }
-});
-
-// 解构缩放相关的变量
-const {
-  isResizing,
-  groupGhost,
-  startResize,
-} = resizeUtils;
+);
 
-// 从名称编辑管理器获取响应式状态
-const { isEditingName, editingName } = nameEditManager.editingState;
 // 是否在画布内
 const isMouseInside = ref(false);
 // 记录最近一次 mousemove（用于 rAF 合并）
@@ -314,20 +287,36 @@ 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());
-const sourceShape = ref<Shape | null>(null)
-const recordClickPoint = ref({ x: 0, y: 0 })
-// 高亮相关状态
-const highlightTimeout = ref<ReturnType<typeof setTimeout> | null>(null); // 高亮定时器
+// 保持兼容性：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 isBusy = computed(() =>
-  isResizing.value || (graphStore.isDragging && graphStore.ghostShadow.length > 0)
-)
+const isBusy = computed(
+  () =>
+    isResizing.value ||
+    (graphStore.isDragging && graphStore.ghostShadow.length > 0)
+);
 
 // 监听所有可能影响菜单显示的操作状态
 const shouldCloseMenu = computed(() => {
@@ -337,12 +326,7 @@ const shouldCloseMenu = computed(() => {
 // 预览框（ghost）的 bounds，仅在缩放时存在
 type Rect = { x: number; y: number; width: number; height: number };
 
-
-const clickActionButton = (event: MouseEvent, value: string, shape: Shape) => {
-  // 阻止事件冒泡，避免触发 onLayerClick
-  event.stopPropagation();
-  event.preventDefault();
-
+const clickActionButton = (value: string, shape: Shape) => {
   // 如果正在编辑名称，先触发失焦以保存当前编辑的内容
   if (isEditingName.value) {
     nameEditManager.handleBlur(graphStore.selectedShape);
@@ -351,9 +335,9 @@ const clickActionButton = (event: MouseEvent, value: string, shape: Shape) => {
   // 清除选中状态，避免第一次点击时取消选中导致需要点击两次
   graphStore.clearSelection();
 
-  graphStore.setConnectMode('action')
-  emit('actionButtonClick', value, shape);
-}
+  graphStore.setConnectMode("action");
+  emit("actionButtonClick", value, shape);
+};
 
 const clickModelTypePropertyIdButton = (value: string, shape: Shape) => {
   // 如果正在编辑名称，先触发失焦以保存当前编辑的内容
@@ -361,16 +345,12 @@ const clickModelTypePropertyIdButton = (value: string, shape: Shape) => {
     nameEditManager.handleBlur(graphStore.selectedShape);
   }
 
-  emit('modelTypePropertyIdButtonClick', value, shape);
-}
-
-// 计算样式：调用 utils（保持单一职责）
-const getSelectionBoxStyle = (shape: Shape) => selectionBoxStyle(shape);
-const getHandleStyle = (h: any, shape: Shape) => handleStyle(h.position, shape);
+  emit("modelTypePropertyIdButtonClick", value, shape);
+};
 
-// 名称编辑
-const startEditName = async () => {
-  await nameEditManager.startEdit(graphStore.selectedShape);
+// 名称编辑处理
+const handleEditName = (shape: Shape, newName: string, oldName: string) => {
+  emit("editName", shape, newName, oldName);
 };
 
 // 属性面板
@@ -394,11 +374,8 @@ const onLayerClick = (evt: MouseEvent) => {
     showContextMenu.value = false;
   }
 
-  // 检查是否点击了name-text-box
+  // 检查是否点击了name-text-box（由NameEditor组件内部处理）
   if (target.classList.contains("name-text-box")) {
-    if (nameEditManager.canEdit(graphStore.selectedShape)) {
-      startEditName();
-    }
     return;
   }
 
@@ -428,18 +405,21 @@ const onLayerClick = (evt: MouseEvent) => {
     const clickY = localPoint.y;
 
     // 判断点击位置是否有图形
-    const hasShapeAtPoint = EdgeUtils.isEndPointInShape(graphStore.shapes, { x: clickX, y: clickY });
+    const hasShapeAtPoint = EdgeUtils.isEndPointInShape(graphStore.shapes, {
+      x: clickX,
+      y: clickY,
+    });
 
     // 修改：无论是否在action模式下，只要在连接状态且点击空白处，都创建新图元
     if (!hasShapeAtPoint) {
       // 使用 cloneDeep 克隆 sourceShape
       if (!!sourceShape.value?.parenShapeId) {
         isConnecting.value = false;
-        graphStore.setConnectMode('connect')
+        graphStore.setConnectMode("connect");
         highlightShape(null, false); // 取消图元高亮
-        highlightUtils.clearHighlightTimeout();
+        clearHighlightTimeout();
         return;
-      };
+      }
       const newShape = _.cloneDeep(foundSourceShape);
 
       // 修改 id（使用 getUuid）
@@ -451,8 +431,9 @@ const onLayerClick = (evt: MouseEvent) => {
         (menu) => menu.code === props.connectShapeData?.shapeKey
       );
       // 获取 targetModels，优先使用 currentMenu 中的值
-      const targetModels = currentMenu?.targetCreateModel?.split(',')
-        || props.connectShapeData?.targetCreateModel?.split(',');
+      const targetModels =
+        currentMenu?.targetCreateModel?.split(",") ||
+        props.connectShapeData?.targetCreateModel?.split(",");
 
       // 如果只有一个 targetModel，使用它作为 shapeKey
       if (targetModels?.length === 1) {
@@ -474,11 +455,16 @@ const onLayerClick = (evt: MouseEvent) => {
         y: newShapeY,
         width: defaultWidth,
         height: defaultHeight,
-        modelId: '',
+        modelId: "",
       };
 
       // 添加新 shape 到画布，只传递 shapeKey 和 x, y 坐标
-      emit('actionButtonAdd', { shapeKey: newShape.shapeKey, x: newShapeX, y: newShapeY, diagramId: diagramId });
+      emit("actionButtonAdd", {
+        shapeKey: newShape.shapeKey,
+        x: newShapeX,
+        y: newShapeY,
+        diagramId: diagramId,
+      });
       return;
     } else {
       handleConnectLayerClick(evt);
@@ -489,7 +475,7 @@ const onLayerClick = (evt: MouseEvent) => {
 
 // 处理线条点击事件
 const handleEdgeClick = (shape: Shape, event: MouseEvent) => {
-  console.log('通过edge-click事件选中的线条数据:', shape);
+  console.log("通过edge-click事件选中的线条数据:", shape);
   graphStore.selectShape(shape);
   event.stopPropagation();
 };
@@ -499,12 +485,16 @@ const DRAG_THRESHOLD = 4;
 const onLayerMouseDown = (evt: MouseEvent) => {
   return guardOperate(async () => {
     // 若点击的是名称虚线框/容器，避免触发清选或框选（Pin 的名称可能在外部）
-    const t = evt.target as HTMLElement | null
-    if (t && (t.classList?.contains('name-text-box') || t.closest('.name-text-box-container'))) {
+    const t = evt.target as HTMLElement | null;
+    if (
+      t &&
+      (t.classList?.contains("name-text-box") ||
+        t.closest(".name-text-box-container"))
+    ) {
       // 不改变当前选中；让后续 click 事件去触发 startEditName
-      evt.stopPropagation()
-      evt.preventDefault()
-      return
+      evt.stopPropagation();
+      evt.preventDefault();
+      return;
     }
     if (isResizing.value || isEditingName.value) return;
     if (graphStore.isDragging) graphStore.endDragShape();
@@ -528,12 +518,24 @@ const onLayerMouseDown = (evt: MouseEvent) => {
       showContextMenu.value = false;
     }
 
-    cursorStyle.value = (hit.kind === "shape" || hit.kind === "edge" || hit.kind === "pin") ? "pointer" : "default";
+    cursorStyle.value =
+      hit.kind === "shape" || hit.kind === "edge" || hit.kind === "pin"
+        ? "pointer"
+        : "default";
     // 进入“框选”的条件：
-    const wantMarquee = evt.shiftKey || hit.kind !== "shape" && hit.kind !== "edge" && hit.kind !== "pin";
+    const wantMarquee =
+      evt.shiftKey ||
+      (hit.kind !== "shape" && hit.kind !== "edge" && hit.kind !== "pin");
     if (wantMarquee) {
-      if ((hit.kind !== "shape" && hit.kind !== "edge" && hit.kind !== "pin") && !evt.shiftKey) {
+      if (
+        hit.kind !== "shape" &&
+        hit.kind !== "edge" &&
+        hit.kind !== "pin" &&
+        !evt.shiftKey
+      ) {
         graphStore.clearSelection();
+        // 点击空白处时，清除剪切状态
+        ContextMenuUtils.clearCutState();
       }
       startMarquee(pt);
       evt.preventDefault();
@@ -542,13 +544,17 @@ const onLayerMouseDown = (evt: MouseEvent) => {
     // 双击触发不同逻辑
     if (evt.detail === 2 && graphStore.marqueeShapes.length == 1) {
       const selectedShape = graphStore.selectedShape;
-      console.log('双击选中的图元:', selectedShape);
+      console.log("双击选中的图元:", selectedShape);
 
       // 判断是否为Diagram组件
-      if (selectedShape && selectedShape.shapeType !== 'edge' && props.diagram?.includes(selectedShape.shapeKey)) {
+      if (
+        selectedShape &&
+        selectedShape.shapeType !== "edge" &&
+        props.diagram?.includes(selectedShape.shapeKey)
+      ) {
         // Diagram组件的特殊双击逻辑
         // 这里可以添加你想要的其他逻辑，例如发射自定义事件
-        emit('diagramDoubleClick', selectedShape);
+        emit("diagramDoubleClick", selectedShape);
         // console.log(selectedShape,'Diagram组件双击事件');
         // 不打开属性面板
       } else {
@@ -563,7 +569,12 @@ const onLayerMouseDown = (evt: MouseEvent) => {
       const { shape } = hit;
 
       // 打印选中元素的数据信息 - 确保每次点击都能看到
-      console.log('点击选中的' + (hit.kind === 'edge' ? '线条' : hit.kind === 'pin' ? 'Pin' : '图元') + '数据信息:', shape);
+      console.log(
+        "点击选中的" +
+        (hit.kind === "edge" ? "线条" : hit.kind === "pin" ? "Pin" : "图元") +
+        "数据信息:",
+        shape
+      );
 
       const isMulti = graphStore.selectedIds.length > 1;
       const clickedInSelection = graphStore.selectedIds.includes(shape.id);
@@ -574,6 +585,8 @@ const onLayerMouseDown = (evt: MouseEvent) => {
         // 其他情况：单选当前元素
         graphStore.clearSelection();
         graphStore.selectShape(shape);
+        // 选中其他图元时，清除剪切状态
+        ContextMenuUtils.clearCutState();
       }
       // 选区此时已是“正确”的：要么多选集合，要么当前单选
       const ids = graphStore.selectedIds.length
@@ -598,21 +611,37 @@ const onLayerMouseDown = (evt: MouseEvent) => {
             // 如果是 pin 类型，需要在移动过程中将“指针位置”校正为吸附后的指针坐标
             let targetPt = curr;
             if (ids.length === 1) {
-              const draggedShape = graphStore.shapes.find(x => x.id === ids[0]);
-              if (draggedShape && draggedShape.shapeType === 'pin' && draggedShape.parenShapeId) {
-                const parentShape = graphStore.shapes.find(x => x.id === draggedShape.parenShapeId);
+              const draggedShape = graphStore.shapes.find(
+                (x) => x.id === ids[0]
+              );
+              if (
+                draggedShape &&
+                draggedShape.shapeType === "pin" &&
+                draggedShape.parenShapeId
+              ) {
+                const parentShape = graphStore.shapes.find(
+                  (x) => x.id === draggedShape.parenShapeId
+                );
                 if (parentShape) {
                   // 使用移动专用的吸附方法：根据 dragOffset 计算应传入 moveDraggedShape 的指针坐标
-                  targetPt = snapPinPointerOnMove(curr, parentShape, draggedShape, graphStore.dragOffset || undefined);
+                  targetPt = snapPinPointerOnMove(
+                    curr,
+                    parentShape,
+                    draggedShape,
+                    graphStore.dragOffset || undefined
+                  );
                 }
               }
             }
-            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
@@ -623,7 +652,7 @@ const onLayerMouseDown = (evt: MouseEvent) => {
         }
       );
     }
-  })
+  });
 };
 // 框选部分
 const startMarquee = (anchor: { x: number; y: number }) => {
@@ -646,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;
@@ -655,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;
     }
   );
 };
@@ -694,11 +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 () => {
@@ -714,7 +775,8 @@ const handleContextMenu = (event: MouseEvent) => {
       graphStore.shapes,
       graphStore.selectShape,
       graphStore.isDragging,
-      isResizing.value
+      isResizing.value,
+      graphStore.currentScale // 传入当前缩放比例
     );
 
     if (hitShape) {
@@ -724,7 +786,7 @@ const handleContextMenu = (event: MouseEvent) => {
     } else {
       showContextMenu.value = false;
     }
-  })
+  });
 };
 
 // 关闭右键菜单
@@ -747,35 +809,56 @@ watch(shouldCloseMenu, (shouldClose) => {
     closeMenu();
   }
 });
-watch(() => props.actionButtonShapeDataId, (newVal) => {
-  if (newVal) {
-    const foundShape = graphStore.shapes.find((x) => x.id === newVal);
-    if (foundShape) {
-      // 连接 sourceShape 和新 shape
-      if (sourceShape.value) {
-        const connectionData = EdgeUtils.completeConnection(
-          sourceShape.value,
-          foundShape,
-          { x: recordClickPoint.value.x, y: recordClickPoint.value.y },
-          currentConnectPoint.value,
-          graphStore.shapes
-        );
-
-        if (connectionData) {
-          emit("connectEnd", connectionData);
-          graphStore.setConnectMode('connect')
-          isConnecting.value = false;
-          highlightUtils.clearHighlightTimeout();
-          if (highlightTimeout.value) {
-            clearTimeout(highlightTimeout.value);
-            highlightTimeout.value = null;
+watch(
+  () => props.actionButtonShapeDataId,
+  (newVal) => {
+    if (newVal) {
+      const foundShape = graphStore.shapes.find((x) => x.id === newVal);
+      if (foundShape) {
+        // 连接 sourceShape 和新 shape
+        if (sourceShape.value) {
+          const connectionData = EdgeUtils.completeConnection(
+            sourceShape.value,
+            foundShape,
+            { x: recordClickPoint.value.x, y: recordClickPoint.value.y },
+            currentConnectPoint.value,
+            graphStore.shapes
+          );
+
+          if (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;
+            clearHighlightTimeout();
           }
         }
       }
+      // 处理 actionButtonShapeData 的逻辑
     }
-    // 处理 actionButtonShapeData 的逻辑
   }
-});
+);
 
 // 鼠标移动事件处理
 const handleMouseMove = (event: MouseEvent) => {
@@ -802,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;
 
@@ -813,66 +900,102 @@ const checkHoverTarget = (x: number, y: number) => {
     props.diagramBounds,
     props.connectShapeData?.sourceId
   );
-  highlightUtils.clearHighlightTimeout();
+  clearHighlightTimeout();
 
   if (hoverShape) {
     // 检查连接有效性
     let targetModels = props.connectShapeData?.targetModels;
-    if (connectMode.value === 'action') {
+    if (connectMode.value === "action") {
       targetModels = props.connectShapeData?.scenarioMenus?.find(
         (menu) => menu.code === props.connectShapeData?.shapeKey
       )?.targetModels;
     }
     let isAllowed = true;
-    if (targetModels && Array.isArray(targetModels) && targetModels.length > 0) {
-      const hoverShapeType = hoverShape.shapeKey || '';
+    if (
+      targetModels &&
+      Array.isArray(targetModels) &&
+      targetModels.length > 0
+    ) {
+      const hoverShapeType = hoverShape.shapeKey || "";
       isAllowed = targetModels.includes(hoverShapeType);
     }
     // 检查parenShapeId是否匹配（无论hoverShape是否改变都要检查）
     if (props.connectShapeData?.sourceId) {
-      const sourceShape = graphStore.shapes.find(it => it.id === props.connectShapeData?.sourceId)
-      if (sourceShape && sourceShape.parenShapeId !== hoverShape.parenShapeId && (hoverShape.shapeType !== 'pin' && sourceShape.shapeType !== 'pin')) {
-        isAllowed = false
+      const sourceShape = graphStore.shapes.find(
+        (it) => it.id === props.connectShapeData?.sourceId
+      );
+      if (
+        sourceShape &&
+        sourceShape.parenShapeId !== hoverShape.parenShapeId &&
+        hoverShape.shapeType !== "pin" &&
+        sourceShape.shapeType !== "pin"
+      ) {
+        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;
   }
 };
 
@@ -908,6 +1031,13 @@ watch(
   () => isConnecting.value,
   (newVal) => {
     if (!newVal) {
+      // 清除防抖定时器
+      if (edgeCheckDebounceTimer) {
+        clearTimeout(edgeCheckDebounceTimer);
+        edgeCheckDebounceTimer = null;
+      }
+      // 重置 lastHoverShapeId
+      lastHoverShapeId = null;
       isConnectAllowed.value = false;
       highlightShape(null, false); // 取消图元高亮
     }
@@ -919,7 +1049,11 @@ watch(
   () => props.edgeCheck,
   (newEdgeCheck) => {
     // 只有在连接状态下且有高亮图元时才更新
-    if (isConnecting.value && highlightedShape.value && newEdgeCheck !== undefined) {
+    if (
+      isConnecting.value &&
+      highlightedShape.value &&
+      newEdgeCheck !== undefined
+    ) {
       // 使用后端验证结果更新高亮颜色
       highlightShape(highlightedShape.value, true, newEdgeCheck);
     }
@@ -933,7 +1067,7 @@ const handleConnectLayerClick = (event: MouseEvent) => {
   const hit = pickTarget(graphStore.shapes, localPoint);
 
   if (
-    ['shape', 'pin'].includes(hit.kind) &&
+    ["shape", "pin"].includes(hit.kind) &&
     hit.shape?.id &&
     props.connectShapeData?.sourceId &&
     hit.shape?.id !== props.connectShapeData.sourceId
@@ -956,51 +1090,56 @@ const completeConnection = (
   if (!isConnectAllowed.value) {
     isConnecting.value = false;
     highlightShape(null, false); // 取消图元高亮
-    graphStore.setConnectMode('connect')
-    highlightUtils.clearHighlightTimeout();
-    ElMessage.error('当前目标图元类型不符合连接要求');
+    graphStore.setConnectMode("connect");
+    clearHighlightTimeout();
+    ElMessage.error("当前目标图元类型不符合连接要求");
     return;
   }
 
   // 嵌套情况下只能连接同一个父图元
-  if (sourceShape && clickedShape && sourceShape.parenShapeId !== clickedShape.parenShapeId && (clickedShape.shapeType !== 'pin' && sourceShape.shapeType !== 'pin')) {
+  if (
+    sourceShape &&
+    clickedShape &&
+    sourceShape.parenShapeId !== clickedShape.parenShapeId &&
+    clickedShape.shapeType !== "pin" &&
+    sourceShape.shapeType !== "pin"
+  ) {
     isConnecting.value = false;
     highlightShape(null, false); // 取消图元高亮
-    highlightUtils.clearHighlightTimeout();
+    clearHighlightTimeout();
     return;
   }
   // 检查目标图元类型是否符合targetModels要求
   const targetModels = props.connectShapeData?.targetModels;
   if (targetModels && Array.isArray(targetModels) && targetModels.length > 0) {
-
-    const clickedShapeType = clickedShape.shapeKey || '';
+    const clickedShapeType = clickedShape.shapeKey || "";
     if (!targetModels.includes(clickedShapeType)) {
       isConnecting.value = false;
       highlightShape(null, false); // 取消图元高亮
-      highlightUtils.clearHighlightTimeout();
+      clearHighlightTimeout();
       // alert('当前目标图元类型不符合连接要求');
-      ElMessage.error('当前目标图元类型不符合连接要求');
+      ElMessage.error("当前目标图元类型不符合连接要求");
       return;
     }
   }
 
   // 检查是否已存在相同类型的边
-  const existingEdge = graphStore.shapes.find((shape: Shape) =>
-    shape.shapeType === 'edge' &&
-    shape.sourceId === props.connectShapeData?.sourceId &&
-    shape.targetId === clickedShape.id &&
-    shape.shapeKey === props.connectShapeData?.shapeKey
+  const existingEdge = graphStore.shapes.find(
+    (shape: Shape) =>
+      shape.shapeType === "edge" &&
+      shape.sourceId === props.connectShapeData?.sourceId &&
+      shape.targetId === clickedShape.id &&
+      shape.shapeKey === props.connectShapeData?.shapeKey
   );
 
-
   // 如果边已存在，错误提示并返回
   if (existingEdge) {
     // alert('同类型的边已经存在，不能重复添加');
-    ElMessage.error('同类型的边已经存在，不能重复添加');
+    ElMessage.error("同类型的边已经存在，不能重复添加");
     isConnecting.value = false;
-    graphStore.setConnectMode('connect')
+    graphStore.setConnectMode("connect");
     highlightShape(null, false); // 取消图元高亮
-    highlightUtils.clearHighlightTimeout();
+    clearHighlightTimeout();
     return;
   }
   // 使用工具类完成连接，传递当前的shapes列表以支持差异化路由
@@ -1013,25 +1152,30 @@ const completeConnection = (
   );
   if (connectionData) {
     // ServiceObjectFlow 特殊处理：需要在 sourcePoint 和 targetPoint 创建 pin
-    if (props.connectShapeData?.shapeKey === 'ServiceObjectFlow' && sourceShape && connectionData.sourcePoint && connectionData.targetPoint) {
+    if (
+      props.connectShapeData?.shapeKey?.toLowerCase().includes("objectflow") &&
+      sourceShape &&
+      connectionData.sourcePoint &&
+      connectionData.targetPoint
+    ) {
       const result = EdgeUtils.handleServiceObjectFlowConnection(
         sourceShape,
         clickedShape,
         connectionData
       );
-      emit('objectFlowConnectEnd', {
+      emit("objectFlowConnectEnd", {
         connectionData: result.connectionData,
         outputPinBounds: result.outputPinBounds,
-        inputPinBounds: result.inputPinBounds
+        inputPinBounds: result.inputPinBounds,
       });
     } else {
-      (connectionData as any).sourceShape = sourceShape
-      emit('connectEnd', connectionData);
+      (connectionData as any).sourceShape = sourceShape;
+      emit("connectEnd", connectionData);
     }
-    graphStore.setConnectMode('connect')
+    graphStore.setConnectMode("connect");
     isConnecting.value = false;
     highlightShape(null, false); // 取消图元高亮
-    highlightUtils.clearHighlightTimeout();
+    clearHighlightTimeout();
   }
 };
 // 鼠标离开事件处理
@@ -1040,7 +1184,7 @@ const handleMouseLeave = () => {
     showLine.value = false;
   }
   highlightShape(null, false); // 取消图元高亮
-  highlightUtils.clearHighlightTimeout();
+  clearHighlightTimeout();
 };
 
 // 初始化连接点位置
@@ -1058,7 +1202,8 @@ const initializeConnectPoint = () => {
       props.diagramBounds // 传递图表边界
     );
 
-    if (initialPoint && sourceShape) { // 确保sourceShape存在，防止从工具栏拖拽时错误初始化
+    if (initialPoint && sourceShape) {
+      // 确保sourceShape存在，防止从工具栏拖拽时错误初始化
       currentConnectPoint.value = initialPoint;
 
       if (!isConnecting.value) {
@@ -1164,7 +1309,7 @@ const cancelConnection = () => {
       mousePosition,
       targetConnectPoint,
       targetShape,
-      showLine
+      showLine,
     },
     highlightUtils
   );
@@ -1173,7 +1318,10 @@ const cancelConnection = () => {
 // 监听 connectShapeData 变化，重新初始化连接点
 watch(
   () => props.connectShapeData,
-  () => {
+  (newVal) => {
+    if (newVal && !newVal.scenarioMenus) {
+      graphStore.setConnectMode('connect');
+    }
     initializeConnectPoint();
   },
   { deep: true }
@@ -1183,7 +1331,7 @@ const externalCreateDragState: ExternalCreateDragState = {
   creatingId: null,
   pendingShape: null,
   isDragging: false,
-  isCheckInFlight: false
+  isCheckInFlight: false,
 };
 
 const resetExternalCreateDragState = () => {
@@ -1198,7 +1346,7 @@ const resetExternalCreateDragState = () => {
 const cleanupInertShapes = async () => {
   const arr = graphStore.shapes as any[];
   for (let i = arr.length - 1; i >= 0; i--) {
-    if ('inert' in arr[i]) {
+    if ("inert" in arr[i]) {
       arr.splice(i, 1);
     }
   }
@@ -1206,99 +1354,151 @@ const cleanupInertShapes = async () => {
 };
 
 //拖动中添加元素并触发嵌套逻辑，
-const continueExternalCreateDrag = async (payload: { clientX: number; clientY: number; shapeData?: any }) => {
-  externalCreateDragState.isDragging = true
-  isExternalCreateDragging.value = true
-  const pt = clientToLocalPoint(payload.clientX, payload.clientY, layerRef.value)
+const continueExternalCreateDrag = async (payload: {
+  clientX: number;
+  clientY: number;
+  shapeData?: any;
+}) => {
+  externalCreateDragState.isDragging = true;
+  isExternalCreateDragging.value = true;
+  const pt = clientToLocalPoint(
+    payload.clientX,
+    payload.clientY,
+    layerRef.value
+  );
   if (payload.shapeData) {
-    const s = payload.shapeData
-    const isCmp = isCompartment(s as Shape)
+    const s = payload.shapeData;
+    const isCmp = isCompartment(s as Shape);
     externalCreateDragState.pendingShape = {
       ...s,
       bounds: {
         x: pt.x,
         y: pt.y,
         width: s.bounds?.width ?? 180,
-        height: isCmp ? 120 : (s.bounds?.height ?? 80),
+        height: isCmp ? 120 : s.bounds?.height ?? 80,
       },
       inert: false,
-    }
+    };
   }
-  if (!externalCreateDragState.creatingId && externalCreateDragState.pendingShape && isInsideCanvasClient(payload.clientX, payload.clientY, layerRef.value)) {
-    const draft = externalCreateDragState.pendingShape
+  if (
+    !externalCreateDragState.creatingId &&
+    externalCreateDragState.pendingShape &&
+    isInsideCanvasClient(payload.clientX, payload.clientY, layerRef.value)
+  ) {
+    const draft = externalCreateDragState.pendingShape;
     try {
-      graphStore.addShape(draft)
-      graphStore.startDrag([draft.id], pt)
-      externalCreateDragState.creatingId = draft.id
-      externalCreateDragState.pendingShape = null
+      graphStore.addShape(draft);
+      graphStore.startDrag([draft.id], pt);
+      externalCreateDragState.creatingId = draft.id;
+      externalCreateDragState.pendingShape = null;
     } finally {
-      externalCreateDragState.isCheckInFlight = false
+      externalCreateDragState.isCheckInFlight = false;
     }
   }
-  externalCreateDragState.pendingShape = null
+  externalCreateDragState.pendingShape = null;
 
-  if (!externalCreateDragState.creatingId) return
+  if (!externalCreateDragState.creatingId) return;
 
-  let targetPt = pt
-  const s = graphStore.shapes.find(x => x.id === externalCreateDragState.creatingId)
-  if (s && s.shapeType === 'pin') {
+  let targetPt = pt;
+  const s = graphStore.shapes.find(
+    (x) => x.id === 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.shapes.find(
+        (x) => x.id === graphStore.hoverContainerId
+      );
       if (parent) {
-        const { x: adjustedX, y: adjustedY } = snapPinToParentEdge(pt, parent, s)
-        targetPt = { x: adjustedX, y: adjustedY }
+        const { x: adjustedX, y: adjustedY } = snapPinToParentEdge(
+          pt,
+          parent,
+          s
+        );
+        targetPt = { x: adjustedX, y: adjustedY };
       }
     }
   }
-
-  graphStore.moveDraggedShape(targetPt)
-}
+  // 外部创建 pin：targetPt 是期望的最终落位，但 hover 命中仍用真实鼠标 pt，避免闪动
+  // graphStore.moveDraggedShape(targetPt, { hitPointer: pt });
+  scheduleMoveDraggedShape(targetPt, { hitPointer: pt });
+};
 
 //拖拽结束后重新发送事件到front中调用接口
-const finishExternalCreateDrag = async (payload: { clientX: number; clientY: number }) => {
+const finishExternalCreateDrag = async (payload: {
+  clientX: number;
+  clientY: number;
+}) => {
   try {
-    if (!externalCreateDragState.creatingId) return
-    const pt = clientToLocalPoint(payload.clientX, payload.clientY, layerRef.value)
-    if (isInsideCanvasClient(payload.clientX, payload.clientY, layerRef.value)) {
-      graphStore.moveDraggedShape(pt)
-      await nextTick()
-      const s: any = (graphStore.shapes || []).find((x: any) => x.id == externalCreateDragState.creatingId)
-      if (s && s.shapeType == 'shape' || s.shapeType == 'pin') {
-        const pure = _.omit(s, ['inert'])
-        pure.bounds = {                 // 覆盖为新的 bounds
-          ...(pure.bounds),
-          x: pt.x,
-          y: pt.y,
-        }
-        // 先推断这次 drop 的“候选父节点”
-        let parent: Shape | null = null
-        if (graphStore.hoverContainerId && graphStore.hoverNestable !== false) {
-          parent = (graphStore.shapes as any[]).find(
+    if (!externalCreateDragState.creatingId) return;
+    const pt = clientToLocalPoint(
+      payload.clientX,
+      payload.clientY,
+      layerRef.value
+    );
+    if (
+      isInsideCanvasClient(payload.clientX, payload.clientY, layerRef.value)
+    ) {
+      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
-        }
+          ) || 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
+      );
+      if ((s && s.shapeType == "shape") || s.shapeType == "pin") {
+        const pure = _.omit(s, ["inert"]);
+        pure.bounds = {
+          // 覆盖为新的 bounds
+          ...pure.bounds,
+          x: targetPt.x,
+          y: targetPt.y,
+        };
         // 如果是 pin 类型，调整位置吸附到父图元最近的边
-        if (pure.shapeType === 'pin' && parent) {
-          const { x: adjustedX, y: adjustedY } = snapPinToParentEdge(pt, parent, pure)
-          pure.bounds.x = adjustedX
-          pure.bounds.y = adjustedY
+        if (pure.shapeType === "pin" && parent) {
+          // 这里直接沿用上面计算出的 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(pure as Shape, parent, graphStore.shapes[0])
+          const { ok } = await checkNestViaFront(
+            pure as Shape,
+            parent,
+            graphStore.shapes[0]
+          );
           if (!ok) {
-            graphStore.setHoverState(null, false)
-            await cleanupInertShapes()
-            resetExternalCreateDragState()
-            return
+            graphStore.setHoverState(null, false);
+            await cleanupInertShapes();
+            resetExternalCreateDragState();
+            return;
           } else {
-            graphStore.canDropOnCanvas = true
+            graphStore.canDropOnCanvas = true;
           }
         } catch (error) {
-          await cleanupInertShapes()
-          resetExternalCreateDragState()
+          await cleanupInertShapes();
+          resetExternalCreateDragState();
         }
         // 同步对外通知
         // 先构造基础数据
@@ -1311,70 +1511,140 @@ const finishExternalCreateDrag = async (payload: { clientX: number; clientY: num
           type: s.type,
           nodeType: s.shapeKey,
           icon: s.icon,
-        }
+        };
         // 如果是 pin 类型，更新 coordinate 为吸附后的 client 坐标
-        if (pure.shapeType === 'pin' && parent) {
-          const adjustedClientPt = localToClientPoint(pure.bounds.x, pure.bounds.y, layerRef.value)
-          payloadData.coordinate.clientX = adjustedClientPt.clientX
-          payloadData.coordinate.clientY = adjustedClientPt.clientY
+        if (pure.shapeType === "pin" && parent) {
+          const adjustedClientPt = localToClientPoint(
+            pure.bounds.x,
+            pure.bounds.y,
+            layerRef.value
+          );
+          payloadData.coordinate.clientX = adjustedClientPt.clientX;
+          payloadData.coordinate.clientY = adjustedClientPt.clientY;
         }
         // 如果当前图元的shapeKey存在于ownerRequiredShapeKeys当中，再补 ownerId 字段
         // @todo OperationalPort合并到ownerRequiredShapeKeys
         if (graphStore.ownerRequiredShapeKeys.includes(pure.shapeKey)) {
-          payloadData.ownerId = parent?.modelId
+          payloadData.ownerId = parent?.modelId;
         }
         // 发送事件
         await new Promise<void>((resolve, reject) => {
-          eventBus.emit('addShape', {
+          eventBus.emit("addShape", {
             ...payloadData,
             resolve,
             reject,
-          })
-        })
-        if (pure.shapeType === 'pin') {
-          graphStore.endDragShape('pinDrop')
+          });
+        });
+        if (pure.shapeType === "pin") {
+          graphStore.endDragShape("pinDrop");
         } else {
-          graphStore.endDragShape('addEntity')    // 提交拖拽（触发嵌套/吸附等 finalize）
+          graphStore.endDragShape("addEntity"); // 提交拖拽（触发嵌套/吸附等 finalize）
         }
       }
     }
   } catch (error) {
-    graphStore.setHoverState(null, false)
-    await cleanupInertShapes()
+    graphStore.setHoverState(null, false);
+    await cleanupInertShapes();
   } finally {
-    await nextTick()
-    await cleanupInertShapes()
-    graphStore.setHoverState(null, false)
-    resetExternalCreateDragState()
+    await nextTick();
+    await cleanupInertShapes();
+    graphStore.setHoverState(null, false);
+    resetExternalCreateDragState();
   }
-}
+};
 // 根据 graphStore.canDropOnCanvas 决定是否显示禁用放置图标
 const onCanvasDragOver = (e: DragEvent) => {
-  e.preventDefault()                       // 必须，否则不会触发 drop
-  if (!e.dataTransfer) return
+  e.preventDefault(); // 必须，否则不会触发 drop
+  if (!e.dataTransfer) return;
   if (graphStore.canDropOnCanvas) {
-    e.dataTransfer.dropEffect = 'copy'     //  显示带 + 的复制光标
+    e.dataTransfer.dropEffect = "copy"; //  显示带 + 的复制光标
   } else {
-    e.dataTransfer.dropEffect = 'none'     //显示禁止的圈圈光标
+    e.dataTransfer.dropEffect = "none"; //显示禁止的圈圈光标
   }
-}
+};
 
 const onCanvasDrop = (e: DragEvent) => {
   if (!graphStore.canDropOnCanvas) {
     // 不允许丢，直接 return
-    return
+    return;
   }
-}
+};
+
 // 创建键盘事件处理器
 const keyboardHandler = createKeyboardHandler({
   onDelete: () => { },
   onEditProperty: () => onLayerDblClick(true),
   onCancelConnection: cancelConnection,
-  isEditingName: () => isEditingName.value
+  isEditingName: () => isEditingName.value,
+  isTextareaDialogOpen: () => props.isTextareaDialogOpen || false, // 传递对话框状态
+  onCopy: () => {
+    // 获取当前选中的图元
+    const selectedShapes = graphStore.selectedIds
+      .map((id) => graphStore.shapes.find((s) => s.id === id))
+      .filter(Boolean) as Shape[];
+
+    if (selectedShapes.length === 0) {
+      return;
+    }
+
+    // 使用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);
+  window.addEventListener("keydown", keyboardHandler);
   // 添加连接层相关的事件监听
   if (props.connectShapeData) {
     document.addEventListener("mousemove", handleMouseMove);
@@ -1383,28 +1653,32 @@ onMounted(() => {
   }
 
   //拖动结束后更新情景菜单
-  eventBus.on('shape-drag-end-updateScenarioMenu', actionButtonsStyle)
+  eventBus.on("shape-drag-end-updateScenarioMenu", actionButtonsStyle);
+
+  // 监听选择图元事件
+  eventBus.on("select-shapes", (ids: string[]) => {
+    graphStore.clearSelection();
+    graphStore.selectMany(ids);
+  });
 });
 onUnmounted(() => {
   offDrag?.();
   // 清理连接层相关的事件监听
   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();
+  window.removeEventListener("keydown", keyboardHandler);
+  eventBus.off("shape-drag-end-updateScenarioMenu", actionButtonsStyle);
   if (rafId) cancelAnimationFrame(rafId);
+  if (dragMoveRafId) cancelAnimationFrame(dragMoveRafId);
+  dragMoveRafId = null;
+  latestDragMove = null;
 });
 defineExpose({
   continueExternalCreateDrag,
   finishExternalCreateDrag,
   handleEdgeClick,
   getBoundingClientRect: () => layerRef.value?.getBoundingClientRect(),
-})
+});
 </script>
 
 <style scoped>
@@ -1416,22 +1690,11 @@ defineExpose({
   height: 100%;
   /* 应用与画布相同的缩放变换 */
   transform-origin: 0 0;
-  transform: scale(v-bind('graphStore.currentScale'));
+  transform: scale(v-bind("graphStore.currentScale"));
   pointer-events: all;
   z-index: 999;
 }
 
-.selection-box {
-  pointer-events: none;
-  background: transparent;
-}
-
-.resize-handles {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
 .hover-container-outline {
   position: absolute;
   pointer-events: none;
@@ -1450,122 +1713,7 @@ defineExpose({
   background: rgba(240, 237, 237, 0.842);
 }
 
-.resize-handle {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background-color: #007bff;
-  border: 2px solid #fff;
-  border-radius: 50%;
-  pointer-events: all;
-  transition: all 0.2s ease;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-  z-index: 999;
-}
-
-.resize-handle.is-disabled {
-  cursor: default !important;
-}
-
-.resize-handle:hover {
-  background-color: #0056b3;
-  transform: scale(1.2);
-}
-
-.action-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  pointer-events: all;
-  background: rgba(255, 255, 255, 0.95);
-  padding: 6px;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  border: 1px solid #e0e0e0;
-  backdrop-filter: blur(2px);
-}
-
-.action-btn {
-  width: 28px;
-  height: 28px;
-  border: 1px solid #d0d0d0;
-  border-radius: 3px;
-  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: bold;
-  font-family: "Arial", sans-serif;
-  color: #495057;
-  transition: all 0.2s ease;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.action-btn:hover {
-  background: linear-gradient(to bottom, #e3f2fd, #bbdefb);
-  border-color: #90caf9;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
-  color: #1976d2;
-}
-
-.edit-btn:hover {
-  background: #e3f2fd;
-}
-
-.delete-btn:hover {
-  background: #ffebee;
-  border-color: #f44336;
-}
-
-.name-editor-container {
-  pointer-events: all;
-}
-
-.name-input {
-  width: calc(100% - 20px);
-  padding: 2px 4px;
-  border: 2px solid #007bff;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 600;
-  background: #fff;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  outline: none;
-  text-align: center;
-}
-
-.name-input:focus {
-  border-color: #0056b3;
-  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
-}
-
-.name-text-box-container {
-  pointer-events: all;
-}
-
-.name-text-box {
-  border: 1px dashed #007bff;
-  background: rgba(255, 255, 255, 0.2);
-  cursor: pointer;
-  pointer-events: all;
-  transition: all 0.2s ease;
-  border-radius: 4px;
-  box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.1);
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.name-text-box:hover {
-  border-color: #0056b3;
-  background: rgba(0, 123, 255, 0.05);
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
-  transform: scale(1.02);
-}
+/* 删除了选择框、调整大小手柄和操作按钮相关的样式，这些样式已经移到了 SelectionBox 组件中 */
 
 .resize-ghost {
   position: absolute;
@@ -1611,8 +1759,20 @@ defineExpose({
   z-index: 1000;
 }
 
-.border-btn {
-  padding-bottom: 4px;
-  border-bottom: 1px solid #e0e0e0;
+/* 高亮覆盖层样式 - 性能优化方案 */
+.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>