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

package/src/components/InteractionLayer.vue

@@ -1,7 +1,8 @@
 <template>
   <!-- 交互层：放在图元之上，统一接管交互与鼠标样式 -->
-  <div class="interaction-layer" ref="layerRef" @dragover="onCanvasDragOver" @drop="onCanvasDrop"
-    :style="{ cursor: cursorStyle }" @mousedown="onLayerMouseDown" @mouseup="onLayerMouseUp" @click="onLayerClick"
+  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousemove="onMouseMove" class="interaction-layer"
+    ref="layerRef" @dragover="onCanvasDragOver" @drop="onCanvasDrop" :style="{ cursor: cursorStyle }"
+    @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)">
@@ -13,7 +14,7 @@
       </div>
       <div class="action-buttons"
         v-show="!isMultiSelected && s.scenarioMenus && s.scenarioMenus.length > 0 && s.shapeType != ShapeConfig.SHAPE_TYPE"
-        :style="getActionButtonsStyle(s, s.id)" :ref="(el) => setActionButtonsRef(el, s.id)">
+        :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="设置类型">
@@ -57,14 +58,16 @@
     <!-- 名称编辑输入框 -->
     <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" @blur="finishEditName"
-        @keyup.enter="finishEditName" @keyup.escape="cancelEditName" />
+      <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>
 
     <!-- 使用右键菜单组件 -->
     <ContextMenu v-if="selectedShape && !isMultiSelected" :visible="showContextMenu" :selected-shape="selectedShape"
-      :position="contextMenuPosition" @update:visible="showContextMenu = $event" @delete="handleMenuDelete"
-      @show-property-panel="onLayerDblClick(true)" />
+      :position="contextMenuPosition" @update:visible="showContextMenu = $event"
+      @delete="ContextMenuUtils.handleDelete(contextMenuTarget)" @show-property-panel="onLayerDblClick(true);" />
 
     <!-- 连接层逻辑 - 当 connectShapeData 存在时显示 -->
     <div v-if="connectShapeData && diagramBounds" class="connect-layer" :style="layerStyle">
@@ -87,87 +90,69 @@ import {
   onMounted,
   type CSSProperties,
   watch,
-  onBeforeUnmount,
-  type ComponentPublicInstance,
 } from "vue";
 import type { Shape } from "../types";
+import { InteractionLayerEmits } from "../types/interactionLayer";
+import type { InteractionLayerProps, ExternalCreateDragState } from "../types/interactionLayer";
 import { useGraphStore } from "../store/graphStore";
+import { resizeHandles } from "../constants/index";
 
 // 工具：几何/命中/样式/拖拽
 import {
   toLocalPoint,
   getBounds,
   getDiagramRect,
-  ghostResizeStep,
   rectFromPoints,
   rectContainsRect,
   clampPointToRect,
+  clientToLocalPoint,
+  localToClientPoint,
+  isInsideCanvasClient,
 } from "../utils/geom";
 import { pickTarget } from "../utils/hittest";
 import {
+  ShapeConfig,
   selectionBoxStyle,
   handleStyle,
   adjustCanvasToFitAllShapes,
   actionButtonsStyle,
   nameTextBoxContainerStyle,
   nameTextBoxStyle,
-  nameEditorContainerStyle
+  nameEditorContainerStyle,
+  nameInputStyle,
+  getMarqueeStyle,
+  getLayerStyle
 } from "../utils/diagram";
 import { withDrag } from "../utils/dom";
-import { checkNestViaFront, getPolicy } from "../utils/policy";
+import { checkNestViaFront } from "../utils/policy";
 import { getShapeComponent, getShapeStyle } from "../render/shape-renderer";
 import _ from "lodash";
 import { eventBus } from "../store";
-import { ShapeConfig } from "../utils/diagram";
-import ContextMenu from "./ContextMenu.vue";
-import { finalizeAfterTransform } from "../utils/drag";
-import { normalizeZOrder } from "../utils/zorder";
-import { clampParentRectToChildrenGap } from "../utils/containers";
+import ContextMenu from "./ContextMenu/ContextMenu.vue";
 import { storeToRefs } from "pinia";
 import { EdgeUtils } from "../utils/edgeUtils";
 import ConnectionLine from "./LineStyle/ConnectionLine.vue";
-import { addChildShapeToCompartment, clampCompartmentResize, isCompartment } from "../utils/compartment";
-import { collectDescendantIds } from "../utils/containers";
+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';
-const emit = defineEmits([
-  "propertyPanel",
-  "editName",
-  "update-shape",
-  "connectEnd",
-  "actionButtonClick",
-  "diagramDoubleClick",
-  "modelTypePropertyIdButtonClick",
-  "edge-click",
-  "property-panel",
-  "actionButtonAdd"
-]);
-
-// Props
-interface Props {
-  connectShapeData?: Shape;
-  diagramBounds?: any;
-  resShape: Shape;
-  lines?: String[];
-  packages?: String[];
-  diagram?: String[];
-  taggedValueLabels?: String[];
-  actionButtonShapeDataId?: string;
-  edgeCheck?: boolean;
-}
-const props = defineProps<Props>();
+import { createKeyboardHandler } from '../utils/keyboardUtils';
+import { NameEditManager } from "../utils/nameEditUtils";
+import { guardOperate } from "../utils/license-guard"
+import { createResizeUtils } from "../utils/resizeUtils";
+
+const props = defineProps<InteractionLayerProps>();
 
-//情景菜单dom实例
-const actionButtonsRefs = ref<Record<string, Element | null>>({});
+const emit = defineEmits(InteractionLayerEmits);
 
 // 取得 graphStore 实例
 const graphStore = useGraphStore();
 
-const { selectedShape } = storeToRefs(graphStore);
+const { selectedShape, connectMode } = storeToRefs(graphStore);
 
 // 是否正在“外部创建拖拽”（
 const isExternalCreateDragging = ref(false)
@@ -227,38 +212,94 @@ const getGhostShapeStyle = (shape: Shape): CSSProperties => {
 // 根层引用：用于本地坐标换算
 const layerRef = ref<HTMLDivElement | null>(null);
 
-// 名称编辑状态
-const isEditingName = ref(false);
-const editingName = ref("");
-const nameInput = ref<HTMLInputElement>();
-
-// Pin 名称编辑输入框样式（放大，随字体自适应），非 Pin 返回空由 CSS 控制
-const nameInputStyle = computed(() => {
-  const s = graphStore.selectedShape as any
-  if (!s) return {}
-  const isPin = String(s?.shapeType || '').toLowerCase() === 'pin'
-  const ns = s?.nameStyle || {}
-  const nb = s?.nameBounds || {}
-  const fs = Number(ns.fontSize || nb.height || 12)
-  if (!isPin) return {}
-  return {
-    width: '100%',
-    height: '100%',
-    fontSize: `${fs}px`,
-    lineHeight: `${Math.ceil(fs + 8)}px`,
-    padding: '4px 6px',
-    boxSizing: 'border-box' as const,
+// 名称编辑管理器
+const nameEditManager = new NameEditManager({
+  onNameChange: (oldName, newName) => {
+    if (graphStore.selectedShape) {
+      emit("editName", graphStore.selectedShape, 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 });
+  },
+  onShapeUpdate: (id, updates) => {
+    graphStore.updateShape(id, updates);
+  }
+});
+
+// 解构缩放相关的变量
+const {
+  isResizing,
+  groupGhost,
+  startResize,
+} = resizeUtils;
+
+// 从名称编辑管理器获取响应式状态
+const { isEditingName, editingName } = nameEditManager.editingState;
+// 是否在画布内
+const isMouseInside = ref(false);
+// 记录最近一次 mousemove（用于 rAF 合并）
+let rafId: number | null = null;
+let latestEvt: MouseEvent | null = null;
+// 拖拽清理函数
+let offDrag: (() => void) | null = null;
+
+const emitMouse = (evt: MouseEvent, inside: boolean) => {
+  if (!layerRef.value) return;
+  // 把鼠标 client 坐标转为画布本地坐标
+  const pt = toLocalPoint(evt, layerRef.value);
+
+  const payload = {
+    x: pt.x,
+    y: pt.y,
+    clientX: evt.clientX,
+    clientY: evt.clientY,
+    inside,
+  };
+
+  //  对外抛出
+  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;
+  // 通知外部隐藏坐标
+  eventBus.emit("canvas-mouse-leave", { inside: false });
+};
+// 鼠标移动过程中
+const onMouseMove = (evt: MouseEvent) => {
+  if (!isMouseInside.value) return;
+  latestEvt = evt;
+  // rAF 合并高频 mousemove
+  if (rafId) return;
+  rafId = requestAnimationFrame(() => {
+    rafId = null;
+    if (!latestEvt) return;
+    emitMouse(latestEvt, true);
+    latestEvt = null;
+  });
+};
 
-// 缩放状态
-const isResizing = ref(false);
-// 点击情景菜单状态
-const actionButtonMode = ref(false);
-const resizeDirection = ref<"nw" | "ne" | "sw" | "se" | "">("");
-const startPos = ref({ x: 0, y: 0 });
-const startBounds = ref({ x: 0, y: 0, width: 0, height: 0 });
-let offDrag: null | (() => void) = null;
 // 框选状态
 const marqueeRect = ref<Rect | null>(null);
 const marqueeAnchor = ref<{ x: number; y: number } | null>(null);
@@ -283,33 +324,10 @@ const recordClickPoint = ref({ x: 0, y: 0 })
 // 高亮相关状态
 const highlightTimeout = ref<ReturnType<typeof setTimeout> | null>(null); // 高亮定时器
 
-// 组拖拽的预览
-const groupBase = ref<Record<string, Rect>>({}); // 按下时各 shape 的快照
-const groupGhost = ref<Record<string, Rect>>({}); // 拖动中的预览矩形
-const resizingTarget = ref<Shape | null>(null);
-// 框选矩形的样式
-const getMarqueeStyle = (r: Rect): CSSProperties => ({
-  position: "absolute",
-  left: `${r.x}px`,
-  top: `${r.y}px`,
-  width: `${r.width}px`,
-  height: `${r.height}px`,
-  // background: 'rgba(52,152,219,0.12)',
-  border: "2px dashed #a6ddff",
-  pointerEvents: "none",
-  zIndex: 20,
-});
 // 正在交互：缩放中 或 元素拖动中
 const isBusy = computed(() =>
   isResizing.value || (graphStore.isDragging && graphStore.ghostShadow.length > 0)
 )
-// 四个角手柄（常量）
-const resizeHandles: { position: "nw" | "ne" | "sw" | "se" }[] = [
-  { position: "nw" },
-  { position: "ne" },
-  { position: "sw" },
-  { position: "se" },
-];
 
 // 监听所有可能影响菜单显示的操作状态
 const shouldCloseMenu = computed(() => {
@@ -319,75 +337,30 @@ const shouldCloseMenu = computed(() => {
 // 预览框（ghost）的 bounds，仅在缩放时存在
 type Rect = { x: number; y: number; width: number; height: number };
 
-//动态绑定ref
-const setActionButtonsRef = (el: Element | ComponentPublicInstance | null, shapeId: string) => {
-  // 只存储 DOM 元素（过滤掉组件实例）
-  // 当el为null时（元素销毁），清空对应引用
-  if (el === null) {
-    actionButtonsRefs.value[shapeId] = null;
-    return;
-  }
-  // 只存储DOM元素，过滤组件实例
-  if (el instanceof Element) {
-    actionButtonsRefs.value[shapeId] = el;
-  } else {
-    actionButtonsRefs.value[shapeId] = null;
-  }
-};
-
-
-// 计算操作按钮的位置样式
-const getActionButtonsStyle = (shape: Shape, shapeId: string): CSSProperties => {
-  // 前置校验：shapeId不存在/元素已销毁，直接返回空样式
-  if (!shapeId || !actionButtonsRefs.value[shapeId] || !layerRef.value) {
-    return {
-      position: "absolute",
-      left: `${(shape.bounds?.width ?? 100) + 15}px`,
-      top: '0px',
-      zIndex: 1000,
-    };
-  }
-
-  const shapeBounds = shape.bounds ?? {};
-  const shapeWidth = shapeBounds.width ?? 100;
-  const shapeHeight = shapeBounds.height ?? 40;
-  if (!shape.scenarioMenus) {
-    return {}
-  }
-  // 按钮宽度：28px，间距4px，共5个按钮 (根据接口动态替换)
-  const hasTypeButton = !!shape.modelTypePropertyId;
-  const totalButtons = (shape.scenarioMenus ? shape.scenarioMenus!.length : 0) + (hasTypeButton ? 1 : 0);
-  const buttonsHeight = 28 * totalButtons + 4 * (totalButtons - (totalButtons > 0 ? 1 : 0));
-  const shapeTop = shape.bounds?.y ?? 0;
-  if (shapeTop < 10) { // 固定阈值，不受按钮DOM样式修改影响
-    return {
-      position: "absolute",
-      left: `${shapeWidth + 15}px`, // 紧贴形状右侧，间距5px
-      top: `10px`, // 顶部对齐
-      zIndex: 1000,
-    };
-  }
-  return {
-    position: "absolute",
-    left: `${shapeWidth + 15}px`, // 紧贴形状右侧，间距5px
-    top: `${(shapeHeight - buttonsHeight) / 2}px`, // 垂直居中
-    zIndex: 1000,
-  };
-};
 
 const clickActionButton = (event: MouseEvent, value: string, shape: Shape) => {
   // 阻止事件冒泡，避免触发 onLayerClick
   event.stopPropagation();
   event.preventDefault();
 
+  // 如果正在编辑名称，先触发失焦以保存当前编辑的内容
+  if (isEditingName.value) {
+    nameEditManager.handleBlur(graphStore.selectedShape);
+  }
+
   // 清除选中状态，避免第一次点击时取消选中导致需要点击两次
   graphStore.clearSelection();
 
-  actionButtonMode.value = true
+  graphStore.setConnectMode('action')
   emit('actionButtonClick', value, shape);
 }
 
 const clickModelTypePropertyIdButton = (value: string, shape: Shape) => {
+  // 如果正在编辑名称，先触发失焦以保存当前编辑的内容
+  if (isEditingName.value) {
+    nameEditManager.handleBlur(graphStore.selectedShape);
+  }
+
   emit('modelTypePropertyIdButtonClick', value, shape);
 }
 
@@ -395,31 +368,9 @@ const clickModelTypePropertyIdButton = (value: string, shape: Shape) => {
 const getSelectionBoxStyle = (shape: Shape) => selectionBoxStyle(shape);
 const getHandleStyle = (h: any, shape: Shape) => handleStyle(h.position, shape);
 
-
-
 // 名称编辑
 const startEditName = async () => {
-  if (!graphStore.selectedShape) return;
-  isEditingName.value = true;
-  editingName.value = graphStore.selectedShape.name;
-  await nextTick();
-  nameInput.value?.focus();
-  nameInput.value?.select();
-};
-
-const finishEditName = () => {
-  if (!graphStore.selectedShape || !isEditingName.value) return;
-  const next = editingName.value.trim();
-  if (next && next !== graphStore.selectedShape.name) {
-    emit("editName", graphStore.selectedShape, next);
-    graphStore.updateShape(graphStore.selectedShape.id, { name: next });
-  }
-  isEditingName.value = false;
-};
-
-const cancelEditName = () => {
-  isEditingName.value = false;
-  editingName.value = "";
+  await nameEditManager.startEdit(graphStore.selectedShape);
 };
 
 // 属性面板
@@ -438,25 +389,16 @@ const onLayerClick = (evt: MouseEvent) => {
     return;
   }
 
-  // 检查目标元素本身或其父元素是否是text元素
-  let currentElement: HTMLElement | null = target;
-  while (currentElement && currentElement !== layerRef.value) {
-    if (currentElement.tagName === "text") {
-      // 如果是text元素，不处理点击事件，让事件穿透到Capability组件
-      // 不调用stopPropagation，让事件继续冒泡
-      return;
-    }
-    currentElement = currentElement.parentElement;
-  }
-
   // 如果点击了非菜单区域，关闭菜单
-  if (showContextMenu.value) {
+  if (ContextMenuUtils.isClickOutsideMenu(evt)) {
     showContextMenu.value = false;
   }
 
   // 检查是否点击了name-text-box
   if (target.classList.contains("name-text-box")) {
-    startEditName();
+    if (nameEditManager.canEdit(graphStore.selectedShape)) {
+      startEditName();
+    }
     return;
   }
 
@@ -488,11 +430,16 @@ const onLayerClick = (evt: MouseEvent) => {
     // 判断点击位置是否有图形
     const hasShapeAtPoint = EdgeUtils.isEndPointInShape(graphStore.shapes, { x: clickX, y: clickY });
 
-    // 修改：无论是否在actionButtonMode模式下，只要在连接状态且点击空白处，都创建新图元
+    // 修改：无论是否在action模式下，只要在连接状态且点击空白处，都创建新图元
     if (!hasShapeAtPoint) {
       // 使用 cloneDeep 克隆 sourceShape
-      console.log(props.connectShapeData, 'props.connectShapeData');
-      console.log(props.connectShapeData.scenarioMenus, 'scenarioMenus');
+      if (!!sourceShape.value?.parenShapeId) {
+        isConnecting.value = false;
+        graphStore.setConnectMode('connect')
+        highlightShape(null, false); // 取消图元高亮
+        highlightUtils.clearHighlightTimeout();
+        return;
+      };
       const newShape = _.cloneDeep(foundSourceShape);
 
       // 修改 id（使用 getUuid）
@@ -539,292 +486,6 @@ const onLayerClick = (evt: MouseEvent) => {
     }
   }
 };
-// 开始拖拽改变图元大小
-const startResize = (
-  e: MouseEvent,
-  dir: "nw" | "ne" | "sw" | "se",
-  target: Shape
-) => {
-  // 为conceptualRole禁用拖拽放大功能
-  if (target.shapeKey === 'ConceptRole') {
-    e.preventDefault();
-    e.stopPropagation();
-    return;
-  }
-
-  if (graphStore.selectedIds.length > 1) {
-    // 阻止事件冒泡到外层，避免触发拖拽或框选
-    e.preventDefault();
-    e.stopPropagation();
-    return;
-  }
-  // const s = graphStore.selectedShape;
-  e.preventDefault();
-  e.stopPropagation();
-
-  isResizing.value = true;
-  resizingTarget.value = target;
-  resizeDirection.value = dir;
-
-  // 发送缩放开始事件
-  eventBus.emit('resize-start', { target });
-  // 记录 anchor（按下时的指针位置）
-  const anchor = toLocalPoint(e, layerRef.value);
-  startPos.value = { x: anchor.x, y: anchor.y };
-  // 记录基准 bounds（按下那一刻）
-  const b = target.bounds ?? {};
-  startBounds.value = {
-    x: b.x ?? 0,
-    y: b.y ?? 0,
-    width: b.width ?? 100,
-    height: b.height ?? 50,
-  };
-  // 初始 ghost = 起始尺寸
-  groupBase.value = { [target.id]: { ...startBounds.value } };
-  groupGhost.value = { [target.id]: { ...startBounds.value } };
-  offDrag = withDrag(handleResize, stopResize);
-};
-
-// 最小尺寸
-const minW = 50,
-  minH = 30;
-
-// 计算文本所需最小宽度 - 应用于所有图形类型
-const calculateTextMinWidth = (shape: Shape): number => {
-  // 对于所有图形类型，使用与Block.vue中相同的宽度计算逻辑
-  // 获取字体大小（与Block.vue中逻辑一致）
-  const nameStyle = shape.nameStyle || {};
-  const nameBounds = shape.nameBounds || {};
-  const fontSize = nameStyle.fontSize || nameBounds.height || 12;
-  // 假设每个字符的平均宽度是字体大小的0.6倍
-  const charWidth = fontSize * 1;
-
-  // 计算名称文本的宽度
-  const nameTextWidth = (shape.name?.length || 0) * charWidth;
-  // 计算关键词文本的宽度
-  const keywordsTextWidth = (shape.keywords?.length || 0) * charWidth;
-
-  // 返回较大的宽度，并添加一些边距（左右各10px）
-  const maxTextWidth = Math.max(nameTextWidth, keywordsTextWidth);
-  const estimatedTextWidth = maxTextWidth + 60; // 左右各10px边距
-
-  // 确保最小宽度不小于minW
-  return Math.max(minW, estimatedTextWidth);
-};
-
-/**
- * 缩放过程中：只更新 ghostBounds（预览框），不直接改实体。
- * 松开鼠标时在方法里 里一次性把 ghost 落盘到元素上。
- */
-const handleResize = (e: MouseEvent) => {
-  // 没在缩放 or 没有有效的缩放目标 => 不处理
-  if (!isResizing.value || !resizingTarget.value) return;
-  // 当前指针在交互层的本地坐标
-  const curr = toLocalPoint(e, layerRef.value);
-  //  按下那一刻的元素矩形（作为缩放基准）
-  const base = startBounds.value;
-  // 当前激活的手柄方向
-  const handle = resizeDirection.value as "nw" | "ne" | "sw" | "se";
-  // 当前被缩放的 shape
-  const shape = resizingTarget.value;
-  // 容器（画布）的约束：只限制left和top不小于0，不限制right和bottom以允许无限放大
-  const container = {
-    left: 0,
-    top: 0,
-    right: Infinity,
-    bottom: Infinity,
-  };
-  // 通过策略读取本图元需要约束的边（left/top/right/bottom）
-  const edges = getPolicy(shape).constrainToDiagram;
-
-  // 计算基于文本内容的最小宽度
-  const dynamicMinW = calculateTextMinWidth(shape);
-
-  // 关键修复：在缩放过程中，我们需要区分当前是在放大还是缩小
-  // 对于缩小操作，使用基于文本内容的最小宽度约束
-  // 对于放大操作，暂时使用更小的最小宽度约束，允许用户自由放大
-  const dx = curr.x - startPos.value.x;
-  const isEnlarging = (handle === 'ne' || handle === 'se') ? dx > 0 : dx < 0;
-
-  // 如果是放大操作，使用一个很小的值作为临时最小宽度
-  // 这样可以允许用户从任何宽度开始自由放大
-  let effectiveMinW = isEnlarging ? minW / 2 : Math.max(minW, dynamicMinW);
-
-  // 根据shapeKey确定最小高度
-  let effectiveMinH = 70; // 默认block组件的最小高度
-  if (shape.shapeKey) {
-    if (props.packages && props.packages.includes(shape.shapeKey)) {
-      effectiveMinH = 85;
-    } else if (props.diagram && props.diagram.includes(shape.shapeKey)) {
-      effectiveMinH = 80;
-    } else if (props.taggedValueLabels && props.taggedValueLabels.includes(shape.shapeKey)) {
-      effectiveMinH = 125;
-    } else if (graphStore.pinsTypes.includes(shape.shapeKey)) {
-      effectiveMinH = 22;
-      effectiveMinW = 22
-    } else if (graphStore.portsTypes.includes(shape.shapeKey)) {
-      effectiveMinH = 22;
-      effectiveMinW = 22
-    }
-  }
-
-  // 判断是否为diagram组件
-  const isDiagramComponent = shape.shapeKey && props.diagram && props.diagram.includes(shape.shapeKey);
-
-  // 用通用几何函数计算“下一帧的ghost矩形”
-  //    - anchor 用按下时的指针坐标 startPos
-  //    - 使用最小可能的约束以允许自由缩放
-  let next = ghostResizeStep(
-    { x: base.x, y: base.y, width: base.width, height: base.height },
-    handle,
-    { x: startPos.value.x, y: startPos.value.y },
-    curr,
-    container,
-    // 只限制left和top，不限制right和bottom，允许自由放大
-    { left: edges.left, top: edges.top, right: false, bottom: false },
-    effectiveMinW,
-    effectiveMinH
-  );
-
-  // 对于diagram组件，保持高度不变
-  if (isDiagramComponent && shape.shapeType === 'shape') {
-    next = { ...next, height: base.height };
-  }
-
-  // 移除额外的宽度调整，因为ghostResizeStep已经处理了最小宽度约束
-  // 这样可以避免重复调整导致的预览框闪烁
-  // 兼容旧逻辑：如果是「画布」图元，缩放时不移动其 (x,y)
-  const isDiagram = (shape as any).shapeType?.toLowerCase?.() === "diagram";
-  if (isDiagram) {
-    next = { ...next, x: base.x, y: base.y };
-    next.x = Math.max(0, next.x);
-    next.y = Math.max(0, next.y);
-  }
-  // 判断是否是隔间组件
-  if (isCompartment(shape)) {
-    next = clampCompartmentResize(
-      graphStore.shapes,   // 所有图元，用于找子
-      shape,               // 正在缩放的父
-      next,                // ghost 下一帧
-      resizeDirection.value as "nw" | "ne" | "sw" | "se"
-    )
-  }
-
-  next = clampParentRectToChildrenGap(
-    graphStore.shapes,
-    shape, // 正在被缩放的父
-    next,
-    resizeDirection.value as any,
-    0, // gap
-    effectiveMinW, // 使用effectiveMinW而不是minW
-    minH,
-    groupGhost.value // 若有子也在 ghost，用它保证更准确
-  );
-
-  // 写到统一的 groupGhost（与拖动预览共用一条通路）
-  groupGhost.value = {
-    ...groupGhost.value,
-    [shape.id]: next,
-  };
-};
-// 停止缩放：复位状态并清理监听
-const stopResize = () => {
-  if (!isResizing.value || !resizingTarget.value) return;
-  const id = resizingTarget.value.id;
-  const shape = resizingTarget.value;
-  const final = groupGhost.value[id] ?? startBounds.value;
-
-  // 计算基于文本内容的最小宽度
-  let dynamicMinW = calculateTextMinWidth(shape);
-
-  // 根据shapeKey确定最小高度
-  // 如果shapeKey属于packages数组，最小高度为90
-  // 如果shapeKey属于diagram数组，最小高度为50
-  // 其他情况（block组件）最小高度为70
-  let minHeight = 70; // 默认block组件的最小高度
-  if (shape.shapeKey) {
-    if (props.packages && props.packages.includes(shape.shapeKey)) {
-      minHeight = 90;
-    } else if (props.diagram && props.diagram.includes(shape.shapeKey)) {
-      minHeight = 50;
-    } else if (graphStore.pinsTypes.includes(shape.shapeKey)) {
-      minHeight = 22;
-      dynamicMinW = 22
-    } else if (graphStore.portsTypes.includes(shape.shapeKey)) {
-      minHeight = 22;
-      dynamicMinW = 22
-    }
-  }
-
-  // 判断是否为diagram组件
-  const isDiagramComponent = shape.shapeKey && props.diagram && props.diagram.includes(shape.shapeKey);
-
-  // 确保宽度不小于文本所需最小宽度，高度不小于对应组件的最小高度
-  let finalBounds = { ...final };
-  if (final.width < dynamicMinW) {
-    finalBounds.width = dynamicMinW;
-  }
-
-  // 对于非diagram组件，保持最小高度限制
-  if (!isDiagramComponent && final.height < minHeight) {
-    finalBounds.height = minHeight;
-  }
-
-  // 对于diagram组件，确保最终应用时保持原始高度
-  if (isDiagramComponent && shape.shapeType === 'shape') {
-    finalBounds = { ...finalBounds, height: startBounds.value.height };
-  }
-
-  // 移除任何可能的容器约束限制，允许图元无限放大
-
-  // 获取原始形状以检查是否真的有变化
-  const shapeBefore = graphStore.shapes.find((s) => s.id === id);
-  const changed = shapeBefore && !_.isEqual(shapeBefore.bounds, finalBounds);
-
-  if (changed) {
-    // 只有确实有变化时才更新
-    graphStore.updateShape(id, { bounds: finalBounds });
-
-    // 统一收尾并检查是否有重新父子关系
-    const containerForFinalize =
-      graphStore.hoverContainerId && graphStore.hoverNestable ? graphStore.hoverContainerId : null;
-
-    const didReparent = finalizeAfterTransform(
-      graphStore.shapes,
-      [id],
-      { [id]: finalBounds },
-      [id],
-      graphStore.currentDiagramId,
-      containerForFinalize,
-      graphStore.updateShape
-    );
-
-    if (didReparent) {
-      normalizeZOrder(
-        graphStore.shapes,
-        graphStore.currentDiagramId,
-        graphStore.updateShape,
-        1,
-        1
-      );
-    }
-
-    // 调用graphStore中的方法处理缩放结束后的事件发射
-    graphStore.endResizeShape(id);
-  }
-
-  // 发送缩放结束事件
-  eventBus.emit('resize-end', { target: resizingTarget.value });
-
-  // 清理状态
-  isResizing.value = false;
-  resizeDirection.value = "";
-  resizingTarget.value = null;
-  groupBase.value = {};
-  groupGhost.value = {};
-  offDrag?.();
-  offDrag = null;
-};
 
 // 处理线条点击事件
 const handleEdgeClick = (shape: Shape, event: MouseEvent) => {
@@ -836,131 +497,133 @@ const handleEdgeClick = (shape: Shape, event: MouseEvent) => {
 // 根层按下：命中测试 + 选中 + 切换光标
 const DRAG_THRESHOLD = 4;
 const onLayerMouseDown = (evt: MouseEvent) => {
-  // 若点击的是名称虚线框/容器，避免触发清选或框选（Pin 的名称可能在外部）
-  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
-  }
-  if (isResizing.value || isEditingName.value) return;
-  if (graphStore.isDragging) graphStore.endDragShape();
-  if (offDrag) {
-    offDrag();
-    offDrag = null;
-  }
-  const pt = toLocalPoint(evt, layerRef.value);
-  // 添加详细的点击位置日志
-  // console.log('鼠标点击位置:', pt);
-
-  // 执行命中测试
-  const hit = pickTarget(graphStore.shapes, pt);
-  // console.log('命中测试结果:', hit.kind, hit.shape?.id, hit.shape?.shapeType);
-  // 如果右键菜单已显示且点击了其他图元，关闭菜单
-  if (
-    showContextMenu.value &&
-    (hit.kind === "shape" || hit.kind === "pin") &&
-    (!contextMenuTarget.value || hit.shape.id !== contextMenuTarget.value.id)
-  ) {
-    showContextMenu.value = false;
-  }
+  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'))) {
+      // 不改变当前选中；让后续 click 事件去触发 startEditName
+      evt.stopPropagation()
+      evt.preventDefault()
+      return
+    }
+    if (isResizing.value || isEditingName.value) return;
+    if (graphStore.isDragging) graphStore.endDragShape();
+    if (offDrag) {
+      offDrag();
+      offDrag = null;
+    }
+    const pt = toLocalPoint(evt, layerRef.value);
+    // 添加详细的点击位置日志
+    // console.log('鼠标点击位置:', pt);
+
+    // 执行命中测试
+    const hit = pickTarget(graphStore.shapes, pt);
+    // console.log('命中测试结果:', hit.kind, hit.shape?.id, hit.shape?.shapeType);
+    // 如果右键菜单已显示且点击了其他图元，关闭菜单
+    if (
+      showContextMenu.value &&
+      (hit.kind === "shape" || hit.kind === "pin") &&
+      (!contextMenuTarget.value || hit.shape.id !== contextMenuTarget.value.id)
+    ) {
+      showContextMenu.value = false;
+    }
 
-  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";
-  if (wantMarquee) {
-    if ((hit.kind !== "shape" && hit.kind !== "edge" && hit.kind !== "pin") && !evt.shiftKey) {
-      graphStore.clearSelection();
+    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";
+    if (wantMarquee) {
+      if ((hit.kind !== "shape" && hit.kind !== "edge" && hit.kind !== "pin") && !evt.shiftKey) {
+        graphStore.clearSelection();
+      }
+      startMarquee(pt);
+      evt.preventDefault();
+      return;
     }
-    startMarquee(pt);
-    evt.preventDefault();
-    return;
-  }
-  // 双击触发不同逻辑
-  if (evt.detail === 2 && graphStore.marqueeShapes.length == 1) {
-    const selectedShape = graphStore.selectedShape;
-    console.log('双击选中的图元:', selectedShape);
-
-    // 判断是否为Diagram组件
-    if (selectedShape && selectedShape.shapeType !== 'edge' && props.diagram?.includes(selectedShape.shapeKey)) {
-      // Diagram组件的特殊双击逻辑
-      // 这里可以添加你想要的其他逻辑，例如发射自定义事件
-      emit('diagramDoubleClick', selectedShape);
-      // console.log(selectedShape,'Diagram组件双击事件');
-      // 不打开属性面板
-    } else {
-      // 所有其他组件（包括连线）都打开属性面板
-      onLayerDblClick(true);
+    // 双击触发不同逻辑
+    if (evt.detail === 2 && graphStore.marqueeShapes.length == 1) {
+      const selectedShape = graphStore.selectedShape;
+      console.log('双击选中的图元:', selectedShape);
+
+      // 判断是否为Diagram组件
+      if (selectedShape && selectedShape.shapeType !== 'edge' && props.diagram?.includes(selectedShape.shapeKey)) {
+        // Diagram组件的特殊双击逻辑
+        // 这里可以添加你想要的其他逻辑，例如发射自定义事件
+        emit('diagramDoubleClick', selectedShape);
+        // console.log(selectedShape,'Diagram组件双击事件');
+        // 不打开属性面板
+      } else {
+        // 所有其他组件（包括连线）都打开属性面板
+        onLayerDblClick(true);
+      }
+      evt.preventDefault();
+      evt.stopPropagation();
+      return;
     }
-    evt.preventDefault();
-    evt.stopPropagation();
-    return;
-  }
-  if (hit.kind === "shape" || hit.kind === "edge" || hit.kind === "pin") {
-    const { shape } = hit;
+    if (hit.kind === "shape" || hit.kind === "edge" || hit.kind === "pin") {
+      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);
+      const isMulti = graphStore.selectedIds.length > 1;
+      const clickedInSelection = graphStore.selectedIds.includes(shape.id);
 
-    if (isMulti && clickedInSelection) {
-      // 多选状态下点击已选中元素，保持现状
-    } else {
-      // 其他情况：单选当前元素
-      graphStore.clearSelection();
-      graphStore.selectShape(shape);
-    }
-    // 选区此时已是“正确”的：要么多选集合，要么当前单选
-    const ids = graphStore.selectedIds.length
-      ? graphStore.selectedIds.slice()
-      : [hit.shape.id];
-    // 准备“潜在拖拽”，但先不触发 store.startDrag
-    let started = false;
-    // 绑定拖拽生命周期，把 move/up 转发给 store
-    offDrag = withDrag(
-      (e) => {
-        const curr = toLocalPoint(e, layerRef.value);
-        const dx = curr.x - pt.x;
-        const dy = curr.y - pt.y;
-        const dist2 = dx * dx + dy * dy;
-
-        if (!started && dist2 >= DRAG_THRESHOLD * DRAG_THRESHOLD) {
-          // 真正超过阈值，再启动 store 的拖拽生命周期
-          started = true;
-          graphStore.startDrag(ids, pt);
-        }
-        if (started) {
-          // 如果是 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);
-              if (parentShape) {
-                // 使用移动专用的吸附方法：根据 dragOffset 计算应传入 moveDraggedShape 的指针坐标
-                targetPt = snapPinPointerOnMove(curr, parentShape, draggedShape, graphStore.dragOffset || undefined);
+      if (isMulti && clickedInSelection) {
+        // 多选状态下点击已选中元素，保持现状
+      } else {
+        // 其他情况：单选当前元素
+        graphStore.clearSelection();
+        graphStore.selectShape(shape);
+      }
+      // 选区此时已是“正确”的：要么多选集合，要么当前单选
+      const ids = graphStore.selectedIds.length
+        ? graphStore.selectedIds.slice()
+        : [hit.shape.id];
+      // 准备“潜在拖拽”，但先不触发 store.startDrag
+      let started = false;
+      // 绑定拖拽生命周期，把 move/up 转发给 store
+      offDrag = withDrag(
+        (e) => {
+          const curr = toLocalPoint(e, layerRef.value);
+          const dx = curr.x - pt.x;
+          const dy = curr.y - pt.y;
+          const dist2 = dx * dx + dy * dy;
+
+          if (!started && dist2 >= DRAG_THRESHOLD * DRAG_THRESHOLD) {
+            // 真正超过阈值，再启动 store 的拖拽生命周期
+            started = true;
+            graphStore.startDrag(ids, pt);
+          }
+          if (started) {
+            // 如果是 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);
+                if (parentShape) {
+                  // 使用移动专用的吸附方法：根据 dragOffset 计算应传入 moveDraggedShape 的指针坐标
+                  targetPt = snapPinPointerOnMove(curr, parentShape, draggedShape, graphStore.dragOffset || undefined);
+                }
               }
             }
+            graphStore.moveDraggedShape(targetPt);
           }
-          graphStore.moveDraggedShape(targetPt);
-        }
-      },
-      () => {
-        // 只有在“真的开始拖拽”后，才结束拖拽
-        if (started) {
-          graphStore.endDragShape();
-        } else {
-          // 纯点击：啥也不做（已完成选中），避免误触发 reparent/zIndex
-          cursorStyle.value = "default";
-          emit("property-panel", false);
+        },
+        () => {
+          // 只有在“真的开始拖拽”后，才结束拖拽
+          if (started) {
+            graphStore.endDragShape();
+          } else {
+            // 纯点击：啥也不做（已完成选中），避免误触发 reparent/zIndex
+            cursorStyle.value = "default";
+            emit("property-panel", false);
+          }
+          offDrag = null;
         }
-        offDrag = null;
-      }
-    );
-  }
+      );
+    }
+  })
 };
 // 框选部分
 const startMarquee = (anchor: { x: number; y: number }) => {
@@ -1038,41 +701,30 @@ const highlightShape = (shape: Shape | null, isHighlight: boolean, isValidSource
 
 // 处理右键点击事件
 const handleContextMenu = (event: MouseEvent) => {
-  // 如果图元正在移动或缩放，则不显示菜单
-  if (graphStore.isDragging || isResizing.value) {
-    return;
-  }
-
-  event.preventDefault();
-
-  // 获取点击位置
-  const point = toLocalPoint(event, layerRef.value);
-
-  // 使用命中测试找到点击的图元
-  const hit = pickTarget(graphStore.shapes, point);
+  return guardOperate(async () => {
+    // 如果图元正在移动或缩放，则不显示菜单
+    if (graphStore.isDragging || isResizing.value) {
+      return;
+    }
 
-  if (hit.kind === "shape") {
-    // 显示右键菜单
-    showContextMenu.value = true;
-    contextMenuPosition.value = {
-      x: event.clientX,
-      y: event.clientY,
-    };
-    contextMenuTarget.value = hit.shape;
-    graphStore.selectShape(hit.shape);
-  } else {
-    // 如果没有点击图元，隐藏菜单
-    showContextMenu.value = false;
-  }
-};
+    const hitShape = ContextMenuUtils.handleContextMenuClick(
+      event,
+      layerRef,
+      pickTarget,
+      graphStore.shapes,
+      graphStore.selectShape,
+      graphStore.isDragging,
+      isResizing.value
+    );
 
-// 菜单项处理函数
-const handleMenuDelete = () => {
-  if (contextMenuTarget.value) {
-    // removeSelected();
-    graphStore.removeSelected();
-  }
-  showContextMenu.value = false;
+    if (hitShape) {
+      showContextMenu.value = true;
+      contextMenuPosition.value = { x: event.clientX, y: event.clientY };
+      contextMenuTarget.value = hitShape;
+    } else {
+      showContextMenu.value = false;
+    }
+  })
 };
 
 // 关闭右键菜单
@@ -1111,9 +763,9 @@ watch(() => props.actionButtonShapeDataId, (newVal) => {
 
         if (connectionData) {
           emit("connectEnd", connectionData);
+          graphStore.setConnectMode('connect')
           isConnecting.value = false;
           highlightUtils.clearHighlightTimeout();
-          actionButtonMode.value = false;
           if (highlightTimeout.value) {
             clearTimeout(highlightTimeout.value);
             highlightTimeout.value = null;
@@ -1124,47 +776,11 @@ watch(() => props.actionButtonShapeDataId, (newVal) => {
     // 处理 actionButtonShapeData 的逻辑
   }
 });
-// 监听delete键移除图元
-const onKeyDownDelete = (e: KeyboardEvent) => {
-  const target = e.target as HTMLElement | null
-  if (target) {
-    const tag = target.tagName
-    // 如果在原生输入类控件里（input / textarea）
-    if (tag === 'INPUT' || tag === 'TEXTAREA') {
-      return // 让浏览器自己处理 Delete，删文字，不动图元
-    }
-  }
-  // 仅处理 Delete；
-  if (e.key !== "Delete") return;
-  e.preventDefault(); // 避免浏览器默认行为
-  //选中的图元中如果有画布(diagram)，则不允许删除
-  const selectedShapes = graphStore.marqueeShapes ?? []
-  // 判断是否包含画布
-  const hasDiagram = selectedShapes.some(s =>
-    s.shapeType?.toLowerCase?.() === 'diagram'
-  )
-  if (hasDiagram) {
-    // 选中了画布，直接不处理删除
-    return
-  }
-  const items = selectedShapes
-    .map(s => ({
-      modelId: s.modelId,
-      shapeId: s.id,           // 图元 id
-      shapeType: s.shapeType,  // 图元类型
-      isRemoveModelTree: false
-    }))
-
-  if (!items.length) return;
-  eventBus.emit('shapes-remove', items);
-};
 
-// 鼠标移动事件处理
 // 鼠标移动事件处理
 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 };
@@ -1202,7 +818,7 @@ const checkHoverTarget = (x: number, y: number) => {
   if (hoverShape) {
     // 检查连接有效性
     let targetModels = props.connectShapeData?.targetModels;
-    if (actionButtonMode.value) {
+    if (connectMode.value === 'action') {
       targetModels = props.connectShapeData?.scenarioMenus?.find(
         (menu) => menu.code === props.connectShapeData?.shapeKey
       )?.targetModels;
@@ -1212,6 +828,13 @@ const checkHoverTarget = (x: number, y: number) => {
       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
+      }
+    }
     // 只有当hoverShape改变且connectShapeData存在时才发射事件
     if (lastHoverShapeId !== hoverShape.id && props.connectShapeData) {
       lastHoverShapeId = hoverShape.id;
@@ -1225,7 +848,6 @@ const checkHoverTarget = (x: number, y: number) => {
       else if (props.connectShapeData.sourceModelId && props.connectShapeData.sourceModelId.toString().trim() !== '') {
         sourceModelId = props.connectShapeData.sourceModelId;
       }
-
       // 只有当sourceModelId有值时就发射事件，并将isAllowed的值一并传递
       if (sourceModelId) {
         eventBus.emit('edge-check', {
@@ -1235,10 +857,12 @@ const checkHoverTarget = (x: number, y: number) => {
         });
       }
     }
-    // 高亮目标图元 - 根据edgeCheck属性决定高亮颜色
+    // 高亮目标图元 - 根据isAllowed决定高亮颜色（实时计算，不依赖异步更新的props.edgeCheck）
     // true为蓝色，false为红色
+    // 直接使用isAllowed（前端实时验证结果），确保快速移动时颜色能立即更新
+    // 如果后端验证结果不同，会在props.edgeCheck更新后通过watch或其他机制再次更新
     highlightUtils.setHighlightTimeout(() => {
-      highlightShape(hoverShape, true, props.edgeCheck);
+      highlightShape(hoverShape, true, isAllowed);
       isConnectAllowed.value = isAllowed;
     }, 10);
   } else {
@@ -1290,6 +914,18 @@ watch(
   }
 );
 
+// 监听edgeCheck变化，当后端验证结果返回后更新高亮颜色
+watch(
+  () => props.edgeCheck,
+  (newEdgeCheck) => {
+    // 只有在连接状态下且有高亮图元时才更新
+    if (isConnecting.value && highlightedShape.value && newEdgeCheck !== undefined) {
+      // 使用后端验证结果更新高亮颜色
+      highlightShape(highlightedShape.value, true, newEdgeCheck);
+    }
+  }
+);
+
 // 处理连接层点击事件
 const handleConnectLayerClick = (event: MouseEvent) => {
   const localPoint = toLocalPoint(event, layerRef.value);
@@ -1297,10 +933,10 @@ const handleConnectLayerClick = (event: MouseEvent) => {
   const hit = pickTarget(graphStore.shapes, localPoint);
 
   if (
-    hit.kind === "shape" &&
-    hit.shape.id &&
+    ['shape', 'pin'].includes(hit.kind) &&
+    hit.shape?.id &&
     props.connectShapeData?.sourceId &&
-    hit.shape.id !== props.connectShapeData.sourceId
+    hit.shape?.id !== props.connectShapeData.sourceId
   ) {
     event.stopPropagation();
     completeConnection(hit.shape, localPoint);
@@ -1316,6 +952,23 @@ const completeConnection = (
     (shape: { id: string }) => shape.id === props.connectShapeData?.sourceId
   );
 
+  // 如果高亮是红色的情况直接返回
+  if (!isConnectAllowed.value) {
+    isConnecting.value = false;
+    highlightShape(null, false); // 取消图元高亮
+    graphStore.setConnectMode('connect')
+    highlightUtils.clearHighlightTimeout();
+    ElMessage.error('当前目标图元类型不符合连接要求');
+    return;
+  }
+
+  // 嵌套情况下只能连接同一个父图元
+  if (sourceShape && clickedShape && sourceShape.parenShapeId !== clickedShape.parenShapeId && (clickedShape.shapeType !== 'pin' && sourceShape.shapeType !== 'pin')) {
+    isConnecting.value = false;
+    highlightShape(null, false); // 取消图元高亮
+    highlightUtils.clearHighlightTimeout();
+    return;
+  }
   // 检查目标图元类型是否符合targetModels要求
   const targetModels = props.connectShapeData?.targetModels;
   if (targetModels && Array.isArray(targetModels) && targetModels.length > 0) {
@@ -1345,11 +998,11 @@ const completeConnection = (
     // alert('同类型的边已经存在，不能重复添加');
     ElMessage.error('同类型的边已经存在，不能重复添加');
     isConnecting.value = false;
+    graphStore.setConnectMode('connect')
     highlightShape(null, false); // 取消图元高亮
     highlightUtils.clearHighlightTimeout();
     return;
   }
-
   // 使用工具类完成连接，传递当前的shapes列表以支持差异化路由
   const connectionData = EdgeUtils.completeConnection(
     sourceShape,
@@ -1358,14 +1011,27 @@ const completeConnection = (
     currentConnectPoint.value,
     graphStore.shapes
   );
-
   if (connectionData) {
-    emit("connectEnd", connectionData);
+    // ServiceObjectFlow 特殊处理：需要在 sourcePoint 和 targetPoint 创建 pin
+    if (props.connectShapeData?.shapeKey === 'ServiceObjectFlow' && sourceShape && connectionData.sourcePoint && connectionData.targetPoint) {
+      const result = EdgeUtils.handleServiceObjectFlowConnection(
+        sourceShape,
+        clickedShape,
+        connectionData
+      );
+      emit('objectFlowConnectEnd', {
+        connectionData: result.connectionData,
+        outputPinBounds: result.outputPinBounds,
+        inputPinBounds: result.inputPinBounds
+      });
+    } else {
+      (connectionData as any).sourceShape = sourceShape
+      emit('connectEnd', connectionData);
+    }
+    graphStore.setConnectMode('connect')
     isConnecting.value = false;
     highlightShape(null, false); // 取消图元高亮
     highlightUtils.clearHighlightTimeout();
-    actionButtonMode.value = false;
-
   }
 };
 // 鼠标离开事件处理
@@ -1487,55 +1153,21 @@ const linePoints = computed(() => {
 });
 
 // 连接层样式 - 定位到 diagramBounds 位置，确保在最顶层
-const layerStyle = computed(() => {
-  if (!props.diagramBounds) {
-    return { display: "none" };
-  }
-
-  return {
-    position: "absolute" as const,
-    left: `${props.diagramBounds.x}px`,
-    top: `${props.diagramBounds.y}px`,
-    width: `${props.diagramBounds.width}px`,
-    height: `${props.diagramBounds.height}px`,
-    pointerEvents: "none" as const,
-    // zIndex: 10000, // 确保在最顶层
-  };
-});
-
-// 处理键盘按键事件
-const handleKeyDown = (e: KeyboardEvent) => {
-  // 按下Esc且正在连线时，取消连线（增加 event.preventDefault 避免浏览器默认行为）
-  if (e.key === 'Escape' && isConnecting.value) {
-    e.preventDefault(); // 阻止浏览器默认的Esc行为（如关闭弹窗）
-    cancelConnection();
-  }
-};
-
-// 组件卸载时清理高亮工具
-onUnmounted(() => {
-  // 清理高亮工具实例
-  highlightUtils.dispose();
-});
-
+const layerStyle = computed(() => getLayerStyle(props.diagramBounds));
 
 // 取消连线的方法（完全重置所有相关状态）
 const cancelConnection = () => {
-  // 1. 先停止连线状态，避免后续计算触发
-  isConnecting.value = false;
-
-  // 2. 重置关键坐标状态（核心：清空无效坐标，让 linePoints 无值可算）
-  currentConnectPoint.value = { x: 0, y: 0 }; // 重置为无效默认值
-  mousePosition.value = { x: 0, y: 0 };       // 重置鼠标位置
-  targetConnectPoint.value = { x: 0, y: 0 };  // 重置目标连接点
-  targetShape.value = null;                  // 清空目标图元
-
-  // 3. 清除高亮状态和定时器
-  highlightShape(null, false); // 取消图元高亮，恢复原始样式
-  highlightUtils.clearHighlightTimeout();
-
-  // 4. 最后隐藏线条（确保状态重置后再隐藏，避免延迟渲染）
-  showLine.value = false;
+  EdgeUtils.cancelConnection(
+    {
+      isConnecting,
+      currentConnectPoint,
+      mousePosition,
+      targetConnectPoint,
+      targetShape,
+      showLine
+    },
+    highlightUtils
+  );
 };
 
 // 监听 connectShapeData 变化，重新初始化连接点
@@ -1546,115 +1178,92 @@ watch(
   },
   { deep: true }
 );
-let externalCreatingId: string | null        // 当前正在拖拽的（已加入画布的）元素 id
-let externalPendingShape: any | null         // 首帧/未入画布时的草稿（等待进入画布再 add）
-let entranceCheckInFlight = false   // 是否正在做第一次进画布的校验
-let entranceDeniedInThisDrag = false      // 本次拖拽是否已经被判定为“不允许进入画布”
-// 转换坐标
-const clientToLocalPoint = ({ clientX, clientY }: { clientX: number; clientY: number }) => {
-  const el = layerRef.value
-  if (!el) return { x: clientX, y: clientY }        // 若还没挂载，直接用屏幕坐标兜底
-  const rect = el.getBoundingClientRect()
-  // 获取当前缩放比例
-  const scale = graphStore.getScale() || 1
-  // 计算本地坐标并除以缩放比例
-  return {
-    x: (clientX - rect.left) / scale,
-    y: (clientY - rect.top) / scale
-  } // 屏幕坐标转画布本地坐标
-}
-// 本地坐标转 client 坐标
-const localToClientPoint = ({ x, y }: { x: number; y: number }) => {
-  const el = layerRef.value
-  if (!el) return { clientX: x, clientY: y }  // 兜底
-  const rect = el.getBoundingClientRect()
-  const scale = graphStore.getScale() || 1
-  return {
-    clientX: rect.left + x * scale,
-    clientY: rect.top + y * scale,
+
+const externalCreateDragState: ExternalCreateDragState = {
+  creatingId: null,
+  pendingShape: null,
+  isDragging: false,
+  isCheckInFlight: false
+};
+
+const resetExternalCreateDragState = () => {
+  externalCreateDragState.creatingId = null;
+  externalCreateDragState.pendingShape = null;
+  externalCreateDragState.isDragging = false;
+  externalCreateDragState.isCheckInFlight = false;
+  isExternalCreateDragging.value = false;
+  graphStore.canDropOnCanvas = false;
+};
+
+const cleanupInertShapes = async () => {
+  const arr = graphStore.shapes as any[];
+  for (let i = arr.length - 1; i >= 0; i--) {
+    if ('inert' in arr[i]) {
+      arr.splice(i, 1);
+    }
   }
-}
-// 判断当前指针是否在画布（交互层）范围内
-const isInsideCanvasClient = (p: { clientX: number; clientY: number }) => {
-  const el = layerRef.value
-  if (!el) return false
-  const r = el.getBoundingClientRect()
-  return (
-    p.clientX >= r.left &&
-    p.clientX <= r.right &&
-    p.clientY >= r.top &&
-    p.clientY <= r.bottom
-  )
-}
+  await nextTick();
+};
+
 //拖动中添加元素并触发嵌套逻辑，
 const continueExternalCreateDrag = async (payload: { clientX: number; clientY: number; shapeData?: any }) => {
+  externalCreateDragState.isDragging = true
   isExternalCreateDragging.value = true
-  const pt = clientToLocalPoint(payload)
+  const pt = clientToLocalPoint(payload.clientX, payload.clientY, layerRef.value)
   if (payload.shapeData) {
     const s = payload.shapeData
     const isCmp = isCompartment(s as Shape)
-    externalPendingShape = {
+    externalCreateDragState.pendingShape = {
       ...s,
       bounds: {
-        // 坐标始终用当前指针位置
         x: pt.x,
         y: pt.y,
-        // 宽度优先用传入的，否则给个默认
         width: s.bounds?.width ?? 180,
-        // 隔间组件固定高度 120；否则用原值或默认 80
         height: isCmp ? 120 : (s.bounds?.height ?? 80),
       },
       inert: false,
     }
   }
-  if (!externalCreatingId && externalPendingShape && isInsideCanvasClient(payload)) {
-    // entranceCheckInFlight = true
-    const draft = externalPendingShape
+  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)
-      externalCreatingId = draft.id
-      externalPendingShape = null
+      externalCreateDragState.creatingId = draft.id
+      externalCreateDragState.pendingShape = null
     } finally {
-      // entranceCheckInFlight = false
+      externalCreateDragState.isCheckInFlight = false
     }
-    externalPendingShape = null     // 草稿已用完，清空
   }
-  externalPendingShape = null
+  externalCreateDragState.pendingShape = null
 
-  if (!externalCreatingId) return   // 还没开始拖拽（不在画布内），直接返回
+  if (!externalCreateDragState.creatingId) return
 
-  // 如果是pin类型，需要计算吸附位置
   let targetPt = pt
-  if (externalCreatingId) {
-    const s = graphStore.shapes.find(x => x.id === externalCreatingId)
-    if (s && s.shapeType === 'pin') {
-      // 检查是否有父容器
-      if (graphStore.hoverContainerId && graphStore.hoverNestable !== false) {
-        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 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)
+      if (parent) {
+        const { x: adjustedX, y: adjustedY } = snapPinToParentEdge(pt, parent, s)
+        targetPt = { x: adjustedX, y: adjustedY }
       }
     }
   }
 
-  graphStore.moveDraggedShape(targetPt)   // 已在拖拽：更新位置
+  graphStore.moveDraggedShape(targetPt)
 }
 
 //拖拽结束后重新发送事件到front中调用接口
 const finishExternalCreateDrag = async (payload: { clientX: number; clientY: number }) => {
   try {
-    if (!externalCreatingId) return   // 未开始则无事可做
-    const pt = clientToLocalPoint(payload)
-    if (isInsideCanvasClient(payload)) {
-      graphStore.moveDraggedShape(pt)   // 补最后一次位置
+    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()
-      // 结束后，把该元素标记为 inert=true（仅对 shapeType==='shape' 生效）
-      const s: any = (graphStore.shapes || []).find((x: any) => x.id == externalCreatingId)
+      const s: any = (graphStore.shapes || []).find((x: any) => x.id == externalCreateDragState.creatingId)
       if (s && s.shapeType == 'shape' || s.shapeType == 'pin') {
-        // s.inert = true                  // 直接改对象属性（Vue3 响应式）
         const pure = _.omit(s, ['inert'])
         pure.bounds = {                 // 覆盖为新的 bounds
           ...(pure.bounds),
@@ -1680,23 +1289,16 @@ const finishExternalCreateDrag = async (payload: { clientX: number; clientY: num
         try {
           const { ok } = await checkNestViaFront(pure as Shape, parent, graphStore.shapes[0])
           if (!ok) {
-            graphStore.setHoverState(null, false)   // 根不高亮就行
-            //立即删除临时数据，避免后续重复 
-            await sweepShapesWithInert()
-            externalCreatingId = null         // 清理状态
-            isExternalCreateDragging.value = false
-            graphStore.canDropOnCanvas = false
+            graphStore.setHoverState(null, false)
+            await cleanupInertShapes()
+            resetExternalCreateDragState()
             return
           } else {
             graphStore.canDropOnCanvas = true
           }
         } catch (error) {
-          //立即删除临时数据，避免后续重复 
-          await sweepShapesWithInert()
-          // await graphStore.removeShape(externalCreatingId as string)
-          // graphStore.clearSelection()
-          externalCreatingId = null         // 清理状态
-          isExternalCreateDragging.value = false
+          await cleanupInertShapes()
+          resetExternalCreateDragState()
         }
         // 同步对外通知
         // 先构造基础数据
@@ -1712,7 +1314,7 @@ const finishExternalCreateDrag = async (payload: { clientX: number; clientY: num
         }
         // 如果是 pin 类型，更新 coordinate 为吸附后的 client 坐标
         if (pure.shapeType === 'pin' && parent) {
-          const adjustedClientPt = localToClientPoint({ x: pure.bounds.x, y: pure.bounds.y })
+          const adjustedClientPt = localToClientPoint(pure.bounds.x, pure.bounds.y, layerRef.value)
           payloadData.coordinate.clientX = adjustedClientPt.clientX
           payloadData.coordinate.clientY = adjustedClientPt.clientY
         }
@@ -1738,17 +1340,12 @@ const finishExternalCreateDrag = async (payload: { clientX: number; clientY: num
     }
   } catch (error) {
     graphStore.setHoverState(null, false)
-    //立即删除临时数据，避免后续重复 
-    await sweepShapesWithInert()
+    await cleanupInertShapes()
   } finally {
     await nextTick()
-    //立即删除临时数据，避免后续重复 
-    await sweepShapesWithInert()
+    await cleanupInertShapes()
     graphStore.setHoverState(null, false)
-    // await graphStore.removeShape(externalCreatingId as string)
-    // graphStore.clearSelection()
-    externalCreatingId = null         // 清理状态
-    isExternalCreateDragging.value = false
+    resetExternalCreateDragState()
   }
 }
 // 根据 graphStore.canDropOnCanvas 决定是否显示禁用放置图标
@@ -1768,21 +1365,16 @@ const onCanvasDrop = (e: DragEvent) => {
     return
   }
 }
-//清掉前端存的脏数据
-function sweepShapesWithInert() {
-  const arr = graphStore.shapes as any[]
-  let removed = 0
-  for (let i = arr.length - 1; i >= 0; i--) {
-    if ('inert' in arr[i]) {
-      arr.splice(i, 1);     // 直接删，避免 removeShape 的事件/副作用导致回填
-      removed++
-    }
-  }
-}
+// 创建键盘事件处理器
+const keyboardHandler = createKeyboardHandler({
+  onDelete: () => { },
+  onEditProperty: () => onLayerDblClick(true),
+  onCancelConnection: cancelConnection,
+  isEditingName: () => isEditingName.value
+});
+
 onMounted(() => {
-  // 监听delete键移除图元
-  document.addEventListener("keydown", onKeyDownDelete, { capture: true });
-  window.addEventListener('keydown', handleKeyDown);
+  window.addEventListener('keydown', keyboardHandler);
   // 添加连接层相关的事件监听
   if (props.connectShapeData) {
     document.addEventListener("mousemove", handleMouseMove);
@@ -1791,20 +1383,22 @@ onMounted(() => {
   }
 
   //拖动结束后更新情景菜单
-  eventBus.on('shape-drag-end-updateScenarioMenu', getActionButtonsStyle)
+  eventBus.on('shape-drag-end-updateScenarioMenu', actionButtonsStyle)
 });
 onUnmounted(() => {
   offDrag?.();
-  // 监听delete键移除图元
-  document.removeEventListener("keydown", onKeyDownDelete, { capture: true });
   // 清理连接层相关的事件监听
   document.removeEventListener("mousemove", handleMouseMove);
   document.removeEventListener("mouseleave", handleMouseLeave);
-  window.removeEventListener('keydown', handleKeyDown);
-  eventBus.off('shape-drag-end-updateScenarioMenu', getActionButtonsStyle)
+  window.removeEventListener('keydown', keyboardHandler);
+  // 重置名称编辑状态
+  nameEditManager.reset();
+  eventBus.off('shape-drag-end-updateScenarioMenu', actionButtonsStyle)
   highlightUtils.clearHighlightTimeout();
+  // 清理高亮工具实例
+  highlightUtils.dispose();
+  if (rafId) cancelAnimationFrame(rafId);
 });
-
 defineExpose({
   continueExternalCreateDrag,
   finishExternalCreateDrag,