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

package/dist/index.esm.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { toRaw, computed, isRef, isReactive, toRef, hasInjectionContext, inject, getCurrentInstance, ref, watch, reactive, markRaw, effectScope, nextTick, getCurrentScope, onScopeDispose, toRefs, shallowReactive, defineComponent, openBlock, createElementBlock, createElementVNode, onMounted, onUnmounted, resolveComponent, Fragment, createBlock, Teleport as Teleport$1, normalizeStyle, withModifiers, unref, normalizeClass, createVNode, withCtx, createCommentVNode, shallowRef, watchEffect, readonly, customRef, warn, provide, renderSlot, mergeProps, useSlots, Transition, withDirectives, resolveDynamicComponent, createTextVNode, toDisplayString, vShow, useAttrs as useAttrs$1, onBeforeUnmount, onActivated, onUpdated, cloneVNode, Comment, Text as Text$1, onBeforeMount, onDeactivated, renderList, createSlots, normalizeProps, guardReactiveProps, isVNode, h as h$1, triggerRef, vModelCheckbox, vModelRadio, onBeforeUpdate, withKeys, vModelText, toHandlers, TransitionGroup, resolveDirective, toHandlerKey, render, createApp, useCssVars } from "vue";
+import { toRaw, computed, isRef, isReactive, toRef, hasInjectionContext, inject, getCurrentInstance, ref, watch, reactive, markRaw, effectScope, nextTick, getCurrentScope, onScopeDispose, toRefs, shallowReactive, defineComponent, openBlock, createElementBlock, normalizeStyle, withDirectives, createElementVNode, Fragment, renderList, unref, normalizeClass, withModifiers, vShow, createCommentVNode, withKeys, vModelText, onMounted, onUnmounted, resolveComponent, createBlock, Teleport as Teleport$1, createVNode, withCtx, shallowRef, watchEffect, readonly, customRef, warn, provide, renderSlot, mergeProps, useSlots, Transition, resolveDynamicComponent, createTextVNode, toDisplayString, useAttrs as useAttrs$1, onBeforeUnmount, onActivated, onUpdated, cloneVNode, Comment, Text as Text$1, onBeforeMount, onDeactivated, createSlots, normalizeProps, guardReactiveProps, isVNode, h as h$1, triggerRef, vModelCheckbox, vModelRadio, onBeforeUpdate, toHandlers, TransitionGroup, resolveDirective, toHandlerKey, render, createApp, useCssVars } from "vue";
 var v = false, o, f, s, u, d, N$1, l, p, m, w, D, x, E$1, M, F;
 function a() {
   if (!v) {
@@ -97,7 +97,6 @@ var Y = T;
 * @internal
 * @license Modernizr 3.0.0pre (Custom Build) | MIT
 */
-const _imports_0$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAACbSURBVGiB7dfRCYAwDEXRVhxIcRJncC5ncBLRjXQCaSRS9eWeb4VeAqFNCQAAoJLs+fmYxuO5o/jleSn2NHWO8h0EqyNYnWtLe1xteMum9Qg3YYLVEayOYHXhglvLR10/FJ+B+7a+dom5I9yECVZHsDqC1YULNl08/nKpsAg3YYLVEayO56E6gtURrI5gdeGCeR6qCxcMAABQzQn/mxU1UF28jAAAAABJRU5ErkJggg==";
 const InteractionLayerEmits = [
   "propertyPanel",
   "editName",
@@ -8796,12 +8795,14 @@ const nameInputStyle = (shape) => {
 };
 const nameEditorContainerStyle = (shape) => {
   var _a2;
-  const b2 = shape.bounds ?? {};
-  const nb = shape.nameBounds ?? {};
-  const ns = shape.nameStyle ?? {};
-  if (shape.shapeType === "pin" && nb.x != null && nb.y != null) {
+  const graphStore = useGraphStore();
+  const latestShape = graphStore.shapes.find((s2) => s2.id === shape.id) || shape;
+  const b2 = latestShape.bounds ?? {};
+  const nb = latestShape.nameBounds ?? {};
+  const ns = latestShape.nameStyle ?? {};
+  if (latestShape.shapeType === "pin" && nb.x != null && nb.y != null) {
     const fontSize = Number(ns.fontSize || nb.height || 12);
-    const textLen = ((_a2 = shape.name) == null ? void 0 : _a2.length) || 0;
+    const textLen = ((_a2 = latestShape.name) == null ? void 0 : _a2.length) || 0;
     const textWidth = Math.max(10, textLen * fontSize * 0.6);
     const boxW = Math.min(300, Math.max(40, textWidth + 14));
     const boxH = Math.max(22, fontSize + 10);
@@ -8833,8 +8834,8 @@ const nameEditorContainerStyle = (shape) => {
       zIndex: "1001"
     };
   }
-  const shapeBounds = shape.bounds ?? {};
-  const nameBounds = shape.nameBounds ?? {};
+  const shapeBounds = latestShape.bounds ?? {};
+  const nameBounds = latestShape.nameBounds ?? {};
   const absoluteY = (shapeBounds.y ?? 0) + (nameBounds.y ?? 0);
   return {
     position: "absolute",
@@ -9791,6 +9792,7 @@ const useGraphStore = /* @__PURE__ */ defineStore(
     }
   }
 );
+const _imports_0$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAACbSURBVGiB7dfRCYAwDEXRVhxIcRJncC5ncBLRjXQCaSRS9eWeb4VeAqFNCQAAoJLs+fmYxuO5o/jleSn2NHWO8h0EqyNYnWtLe1xteMum9Qg3YYLVEayOYHXhglvLR10/FJ+B+7a+dom5I9yECVZHsDqC1YULNl08/nKpsAg3YYLVEayO56E6gtURrI5gdeGCeR6qCxcMAABQzQn/mxU1UF28jAAAAABJRU5ErkJggg==";
 const BlockKeyMap = {
   "ArchitecturalDescription": "Package",
   //体系架构
@@ -10215,8 +10217,12 @@ const BlockKeyMap = {
   //定向关系
   "OperationalControlFlow": "Edge",
   //业务控制流
+  "OperationalObjectFlow": "Edge",
+  //业务对象流
   "FunctionControlFlow": "Edge",
   //功能控制流
+  "FunctionObjectFlow": "Edge",
+  // 功能对象流
   "ServiceConnector": "Edge",
   //服务连接器
   "ServiceControlFlow": "Edge",
@@ -10622,111 +10628,6 @@ const PinKeyMap = {
   //输入引脚
   "OperationalPort": "Port"
 };
-const withDrag = (onMove, onUp) => {
-  const move = (e) => onMove(e);
-  const up = (e) => {
-    try {
-      onUp(e);
-    } finally {
-      window.removeEventListener("mousemove", move);
-      window.removeEventListener("mouseup", up);
-    }
-  };
-  window.addEventListener("mousemove", move);
-  window.addEventListener("mouseup", up);
-  return () => {
-    window.removeEventListener("mousemove", move);
-    window.removeEventListener("mouseup", up);
-  };
-};
-let registry = {};
-function registerShapes(map2) {
-  registry = { ...registry, ...map2 };
-}
-function getShapeComponentByKey(key) {
-  if (!key)
-    return null;
-  return registry[key] ?? null;
-}
-function getComponentByShapeKey(shapeKey) {
-  const componentName2 = BlockKeyMap[shapeKey] || shapeKey;
-  return getShapeComponentByKey(componentName2) || componentName2;
-}
-function getComponentByPinKey(shapeKey) {
-  const componentName2 = PinKeyMap[shapeKey] || shapeKey;
-  return getShapeComponentByKey(componentName2) || componentName2;
-}
-function getComponentByDiagramKey(shapeKey) {
-  const componentName2 = DiagramKeyMap[shapeKey] || shapeKey;
-  return getShapeComponentByKey(componentName2) || componentName2;
-}
-const getShapeComponent = (shape) => {
-  const { shapeType, shapeKey } = shape;
-  switch (shapeType) {
-    case "pin":
-      return getComponentByPinKey(shapeKey);
-    case "shape":
-      return getComponentByShapeKey(shapeKey);
-    case "diagram":
-      return getComponentByDiagramKey(shapeKey);
-    case "edge":
-      return getComponentByShapeKey(shapeKey);
-    default:
-      return "ShapeComponent";
-  }
-};
-const getShapeStyle = (shape) => {
-  const { bounds, shapeType } = shape;
-  if (shapeType === "edge") {
-    let waypoints = [];
-    if (shape.waypointId) {
-      if (typeof shape.waypointId === "string") {
-        try {
-          waypoints = JSON.parse(shape.waypointId);
-        } catch (error) {
-          console.error("解析waypointId失败:", error);
-          waypoints = [];
-        }
-      } else if (Array.isArray(shape.waypointId)) {
-        waypoints = shape.waypointId;
-      }
-    }
-    if (waypoints.length === 0) {
-      return {
-        position: "absolute",
-        left: "0px",
-        top: "0px",
-        width: "100px",
-        height: "50px",
-        opacity: 0
-        // 初始时隐藏
-      };
-    }
-    const xs = waypoints.map((wp) => wp.x);
-    const ys = waypoints.map((wp) => wp.y);
-    const minX = Math.min(...xs);
-    const maxX = Math.max(...xs);
-    const minY = Math.min(...ys);
-    const maxY = Math.max(...ys);
-    const padding2 = 10;
-    const width = Math.max(maxX - minX + padding2 * 2, 20);
-    const height = maxY - minY + padding2 * 2;
-    return {
-      position: "absolute",
-      left: `${minX - padding2}px`,
-      top: `${minY - padding2}px`,
-      width: `${width}px`,
-      height: `${height}px`
-    };
-  }
-  return {
-    position: "absolute",
-    left: `${(bounds == null ? void 0 : bounds.x) || 0}px`,
-    top: `${(bounds == null ? void 0 : bounds.y) || 0}px`,
-    width: `${(bounds == null ? void 0 : bounds.width) || 100}px`,
-    height: `${(bounds == null ? void 0 : bounds.height) || 50}px`
-  };
-};
 const __vite_glob_3_0 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAZ9SURBVHic7ZtPTNtWHMd/79lp0rWjoWVbp6rANFZNmkRSytB6AA6NtFsrZXcqbcdJHJg0VdOUrhGquJQDEschlXsjsTM7pGjaWtGWcGKFaQHRdX9ol3VdG7D9fjvENi8h9nvPo5Cs/pxix89+/vr3+76fn22CiBqEeEL3uwONTiiQgFAgAaFAAkKBBIQCCdCDNkyn0/H19V/Om4x17m6XdheNkNLJkyemc7lcKUj7wAIV19YzyNhw0PZ7hVnpawIAPgnSPnCKIWPng7bda5CxC0HbkiCVdDqdjv9cXNtwd0JpNmgHXiR2hMcBAI4djb89Ozu7qrqPQCn24MFvCec3ASjcnb/dkAL19Lw/iICDAABPnvyTBABlgQKlGGOmKxBQuhBkH3sCJQXnp8mshP/GHrsI0shCdA+mke1ONBo61fLuAqtEkiqBBELG3IPpB6N5/633Dy0WKTq/EXBvIiidTscBwKl9St/fvNmwEWT3zal/4mcHBpRFUhaoxqCVTW+vIbBtAVbZUC5qlUexGoOWTq9kdnnIRLyAgHEAgIMRbWT+iy6p6Ou9upIoG2yqskQWKIH868esb2Y/fVdcHVNScPzHZNYgAMzI9hmCCGQh5z8SI1hydPmCYeK17bQkAADw3LDGAeCczDHLBssggn1hMGEhXHz4By0mR5c/W/jyHd8T1qmWN5yKn6n7kHKKIXeQaMth3wjqvnI/Y5h4g/MsF41o0leSkrqR2mmYeKP7yv2MX9uWlkPuRQxi1EqVdE0FXbp3d77Na9tkdnnIYDjFrSoSAtNRDfOtrViQSg+O/rG1jr/NzaRpYQIR3AoZACCik4/8Iul0T++Gs33s8CtnVAYWpRRbX3/ophdvfrWkJpfiBqPj7rYECq3RWHruUntgU7fbrgLATP/Y2vU/N8s5J+0ME6+lJpfyXqITIAWnoraNWlogpRSzTc5u6S3Q74/oEHeFS/9VnFrmLrWvtkZjaQBw6pzOjUea980zJW6KVp2DBIoehB3OLz+DthDdu2dCYGI3xXGYu9S+GqHEvQc0kF302lan2vbFVDRqpRRDrlz3NWgkrpCxCN3hDd3ZlWGLsQzvIwJKGqXZxUzXBL9S10nB2MIdx6ylpeXQwqPHlexTNWrpCOpPpTr4tJnznzpwR634EXPHdqxytWXFAQCIW3Um52rqKM8i0J7mcNJRqaKWFmjzyVMpg7ZxzbL0l77jylJCr8se10EjMF27rvfqCn+ixdr/eQgNVlFLp5jJWNJd8DHoSm+wAEgq1auJidpRw06VCc/2kmyZXLoQFPgcKQBUvFGlopY3ac7cqqYR6hDhIsRgmOkfW/P0h6CkJpfiFkO3SCRA/PukRfipj91PMd7colx1Wo9XD0Tz/BD8ePP5VGpyScVzfOkfW+v4dYN+zc8qHG9jvhF54sQbbhSrGLVUJd2fSnU8fVz6yemMXwXtYI9U49yqokZh4oBO8/Ej5qpqJQ0AcGb0x0GDkYTFYJg3ZY3SkdoRrh6ne3pXnHayFbVUBFUZNPUPZYfFTNeERoCfq+60GIw/32J3Hv5BN5Kjy9JPGrqzK8PvfXXfLJvkW4vBeJU4BHYM/15UG/WWVBRJCVRl0OIRzGXx8qmsRukIP6q5+7RwSHY/jJtB4ChqlI4sXj6l8MCAn6Pmz8kbOQ+qNmilGcTFTNfEm6+xLo3CCCEwY9+0FmIR+UdFukambU8rAsF8hJKPj8Zi52QjxyGIUUt5EH83/FZne1vQx7j7Te3zvHt354VljjCC7KrTGYGKzSoOAEAulysRriaTqaiFAvFmRkQFYjNAiVtxyxi1UCDezLT6M3tNBX8OJqtr/lWITZrbCaV600dQ1TlIjGS+AqXT6TgCuLcJfDXarFRX1CBMMd9R7OzAQKL89Nkde3Ejouuf71ZH9xPTNK8iwHEAgAOR6Llbt77ztA7fYc54Vv6QW2wzTHPKZ/OmxH7O5ymQb4oxgNgL6VUDYSH63kSrTLkWSCO/6qIAVsxZqpKWFohQOtOoL0qp0tPbl0HGdu9m9WUmFEhAKJCAUCABoUACQoEEhAIJCAUSEAokIBRIQCiQgFAgAaFAAuSnOxgO9vT2+b5y2zQofNgiLRACDgb9YqaZ8U0xnVLft7b+D4jOUfjoua/vg6FG/7I5KDqlxdu3f9jxah9PoG9WXybCUUxAKJCAUCABoUACQoEEhAIJCAUSEAokIBRIwL9jGpoMstHI7QAAAABJRU5ErkJggg==";
 const __vite_glob_3_1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAJhSURBVHic7ds9SgNBGIfxV9FCIRKwMjZWSSts0nsAI55CBY9gIR5CEE+xmAOYPllIq1UaP0pJoYVFLCQSP5JNnNlnh+z/V62w2YwPw/j6tTQcDocmmVvOewFFodAQhYYoNEShIQoNUWiIQkMUGqLQEIWGKDREoSEKDVFoiEJDFBqi0BCFhig0RKEhCg1RaIhCQ1Z8POSm1bLHx6d/v75S2bKDZtPHUn4JZW3OoW9aLTs/v3BeiJl5jx3S2pyPDpfdksVzsnimj+d4OTpG6lFkUT2a+f6km1g3SXwuYaK81+Y1dFSP7OT4aOb7r+waC5332jR1QLzuaBdJN7Eru/b+zFAEE7qbcOd1HnR0QILZ0fNOBbMgp5o0wYSedyqYBTnVpNHRAfG6o+edHMipIO+1OYculUpf1y6TQ6Wy5bqUX0Jam/PRcdDct1q16vSMWrVq9cjvF0ILbG1Lvv7P8Lbdtru7+7lfV6t9fiLju8+3ENbmLbRMp6kDotAQhYYoNKSwoePewOLeAHu/YH7WQYp7AzuLn78+PtzdyPw9C7mjH17e/7zOUiFD50GhIQoNUWiIQkMUGrKQc3TcG0wd2zr912/Xl+3Jz9our3qZsxcu9M9vRtJ0+m/W6b+l3ucaW0cHZOF29GjnpR0do13c2Fmzxs76xHt1dEyRFuaybWOh1+10bzPzNenogCg0RKEhCg1RaIhCQwoZeru8+ud1lhZyjk4zPmcTvy80/UkYp5BHRx4UGqLQEIWGKDREoSEKDVFoiEJDFBqi0BCFhig0RKEhCg1RaIhCQxQaotAQhYYoNOQDM128k0dpjyAAAAAASUVORK5CYII=";
 const __vite_glob_3_2 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAALxSURBVHic7Zsxb9NQEMf/Z4PERpDYKQyUZuHSZGIh3ZhoUT8AfIR2R01b2MM3oGVgQ2o3mFoWFqjykFCjMqCwAANSwwz2MSRN06rxOY6fVdD9Jr/o+d7LT362fL4HGIZhGIbxn0JFDcTMJSCsA8JFjXk2dAjQR+c+7Kbq7X9CAHOtDpLnAKaKGC8VhA3E0bJzrpvULfQ9D2aeAlELQMn3WGPCCMJLP75/e5PUyfsVxJXqDoB6v+kgsu17zEQCugbBo0Fbgopz792o7hcKmNLxPUeiB865TgFjJsJc64JkqdeK7wIYKSgoYD6DpXUe5PSIfx0fy5WknkUI+qcxQQomSMEEKZggBROkYIIUTJCCCVIwQQomSCHVyyozTyEImxDUs6YtoulFlO+/bJ14ec2Gk1g2209uPZswTirUK4i5ugAKWxAsZJXz+85jRNOLyEEOADAF1JxpfN7JIZZKoqBesgvNSZJd0Y17kKvlrKePhCD18kp7NffAp1CWWMhDadIOJKpoKcrTnFhWEq/tr89M9KfKK+1VUNAAAFAwD8CrJGWJDSXYRTbHldNnEGNSOWfE8P4BwJ5iCiZIwQQpmCAFE6RgghRMkIIJUjBBCiZIwQQpmCAFE6RgghRMkEIRggbFSXlkAE/FGFn4NApmLoHo4fEvlBjDf4WZxNugoJfYoqBRbhw08godfnrBXKnKBCE6QJQoyPsVtL8+syqgVCW340A/9xF+eT1JiC4Ey1rVWyH3oPbazTmJZTnLkjgDFx68wsV3T7Oe3wVhq5df39vSOhdRxAkA6H/HyuVb1vCycq09r5W69hRTMEEKJkjBBCmYIAUTpGCCFEyQgglSMEEKJkhBEUSHQ10ve59NCph5eN9rlnqlsVBeVoO3QNw7JFni2WoJsXz1PalEiOaHWnlkB5KH0zrwbK0JOdq+eM6Q6LrvXYz6PSj+swbChs9JZKADobkitnimzqUw1+qA3Nb2ePqHHBDtZqyXNAzDMAzDOOIvySvHLTagE98AAAAASUVORK5CYII=";
@@ -11352,6 +11253,322 @@ class IconLoader {
 }
 __publicField(IconLoader, "iconMaps", /* @__PURE__ */ new Map());
 const getIcon = (iconPath, iconName) => IconLoader.getIcon(iconPath, iconName);
+const _hoisted_1$i = { class: "resize-handles" };
+const _hoisted_2$h = ["onMousedown"];
+const _hoisted_3$f = { class: "border-btn" };
+const _hoisted_4$e = ["onMousedown", "title"];
+const _hoisted_5$c = ["src"];
+const _sfc_main$2Q = /* @__PURE__ */ defineComponent({
+  __name: "SelectionBox",
+  props: {
+    shape: {},
+    isBusy: { type: Boolean },
+    isMultiSelected: { type: Boolean }
+  },
+  emits: ["resize-start", "action-button-click", "model-type-property-id-click"],
+  setup(__props, { emit: __emit }) {
+    const props2 = __props;
+    const shouldShowActionButtons = computed(() => {
+      return !props2.isMultiSelected && props2.shape.scenarioMenus && props2.shape.scenarioMenus.length > 0 && props2.shape.shapeType != ShapeConfig.SHAPE_TYPE;
+    });
+    const emit = __emit;
+    const getSelectionBoxStyle = (shape) => selectionBoxStyle(shape);
+    const getHandleStyle = (h2, shape) => handleStyle(h2.position, shape);
+    const onHandleMouseDown = (event, position) => {
+      emit("resize-start", event, position, props2.shape);
+    };
+    const onActionButtonClick = (code) => {
+      emit("action-button-click", code, props2.shape);
+    };
+    const onModelTypePropertyIdClick = () => {
+      if (props2.shape.modelTypePropertyId) {
+        emit(
+          "model-type-property-id-click",
+          props2.shape.modelTypePropertyId,
+          props2.shape
+        );
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "selection-box",
+        style: normalizeStyle(getSelectionBoxStyle(_ctx.shape))
+      }, [
+        withDirectives(createElementVNode("div", _hoisted_1$i, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(resizeHandles), (h2) => {
+            return openBlock(), createElementBlock("div", {
+              key: h2.position,
+              class: normalizeClass(["resize-handle", [`resize-${h2.position}`, { "is-disabled": _ctx.isMultiSelected }]]),
+              style: normalizeStyle(getHandleStyle(h2, _ctx.shape)),
+              onMousedown: withModifiers(($event) => onHandleMouseDown($event, h2.position), ["stop", "prevent"])
+            }, null, 46, _hoisted_2$h);
+          }), 128))
+        ], 512), [
+          [vShow, !_ctx.isBusy && _ctx.shape.shapeType !== "edge"]
+        ]),
+        withDirectives(createElementVNode("div", {
+          class: "action-buttons",
+          style: normalizeStyle(unref(actionButtonsStyle)(_ctx.shape))
+        }, [
+          withDirectives(createElementVNode("div", _hoisted_3$f, [
+            createElementVNode("button", {
+              class: "action-btn edit-btn",
+              onMousedown: withModifiers(onModelTypePropertyIdClick, ["stop", "prevent"]),
+              title: "设置类型"
+            }, [..._cache[1] || (_cache[1] = [
+              createElementVNode("img", {
+                src: _imports_0$1,
+                alt: "设置类型"
+              }, null, -1)
+            ])], 32)
+          ], 512), [
+            [vShow, _ctx.shape.modelTypePropertyId]
+          ]),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.shape.scenarioMenus, (value) => {
+            return openBlock(), createElementBlock("button", {
+              key: value.code,
+              class: "action-btn edit-btn",
+              onMousedown: withModifiers(($event) => onActionButtonClick(value.code), ["stop", "prevent"]),
+              onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+              }, ["stop", "prevent"])),
+              title: value.name
+            }, [
+              createElementVNode("img", {
+                src: unref(getIcon)("childIcons", value.icon || "")
+              }, null, 8, _hoisted_5$c)
+            ], 40, _hoisted_4$e);
+          }), 128))
+        ], 4), [
+          [vShow, shouldShowActionButtons.value]
+        ])
+      ], 4);
+    };
+  }
+});
+const SelectionBox_vue_vue_type_style_index_0_scoped_1a892f84_lang = "";
+const _export_sfc$1 = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const SelectionBox = /* @__PURE__ */ _export_sfc$1(_sfc_main$2Q, [["__scopeId", "data-v-1a892f84"]]);
+const _sfc_main$2P = /* @__PURE__ */ defineComponent({
+  __name: "NameEditor",
+  props: {
+    selectedShape: {},
+    canEdit: { type: Boolean },
+    isEditingName: { type: Boolean },
+    editingName: {},
+    nameEditManager: {}
+  },
+  emits: ["editName"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props2 = __props;
+    const nameInput = ref(null);
+    const localEditingName = ref(props2.editingName);
+    watch(() => props2.editingName, (newValue) => {
+      localEditingName.value = newValue;
+    });
+    watch(() => nameInput.value, (newValue) => {
+      if (newValue) {
+        props2.nameEditManager.setNameInput(newValue);
+      }
+    });
+    watch(() => localEditingName.value, (newValue) => {
+      props2.nameEditManager.editingName.value = newValue;
+    });
+    watch(() => props2.selectedShape, (newShape) => {
+      var _a2;
+      if (props2.isEditingName && (!newShape || newShape.id !== ((_a2 = props2.selectedShape) == null ? void 0 : _a2.id))) {
+        props2.nameEditManager.cancelEdit();
+      }
+    });
+    const computedNameTextBoxContainerStyle = computed(() => {
+      if (!props2.selectedShape)
+        return {};
+      return nameTextBoxContainerStyle(props2.selectedShape.id);
+    });
+    const computedNameTextBoxStyle = computed(() => {
+      if (!props2.selectedShape)
+        return {};
+      return nameTextBoxStyle(props2.selectedShape);
+    });
+    const computedNameEditorContainerStyle = computed(() => {
+      if (!props2.selectedShape)
+        return {};
+      return nameEditorContainerStyle(props2.selectedShape);
+    });
+    const computedNameInputStyle = computed(() => {
+      if (!props2.selectedShape)
+        return {};
+      return nameInputStyle(props2.selectedShape);
+    });
+    const handleNameTextBoxClick = () => {
+      if (props2.canEdit && props2.nameEditManager.canEdit(props2.selectedShape)) {
+        startEditName();
+      }
+    };
+    const startEditName = async () => {
+      await props2.nameEditManager.startEdit(props2.selectedShape);
+    };
+    const handleBlur = () => {
+      props2.nameEditManager.handleBlur(props2.selectedShape);
+    };
+    const handleKeyUp = (event) => {
+      props2.nameEditManager.handleKeyUp(event, props2.selectedShape);
+    };
+    __expose({
+      startEditName,
+      canEdit: (shape) => props2.nameEditManager.canEdit(shape),
+      cancelEdit: () => props2.nameEditManager.cancelEdit()
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        _ctx.selectedShape && _ctx.selectedShape.nameBounds && !_ctx.isEditingName && _ctx.selectedShape.shapeKey !== "ConceptRole" ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "name-text-box-container",
+          style: normalizeStyle(computedNameTextBoxContainerStyle.value)
+        }, [
+          createElementVNode("div", {
+            class: "name-text-box",
+            style: normalizeStyle(computedNameTextBoxStyle.value),
+            title: "点击编辑名称",
+            onClick: handleNameTextBoxClick
+          }, null, 4)
+        ], 4)) : createCommentVNode("", true),
+        _ctx.isEditingName && _ctx.selectedShape && _ctx.selectedShape.shapeKey !== "ConceptRole" ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "name-editor-container",
+          style: normalizeStyle(computedNameEditorContainerStyle.value)
+        }, [
+          withDirectives(createElementVNode("input", {
+            ref_key: "nameInput",
+            ref: nameInput,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => localEditingName.value = $event),
+            class: "name-input",
+            style: normalizeStyle(computedNameInputStyle.value),
+            onBlur: handleBlur,
+            onKeyup: [
+              _cache[1] || (_cache[1] = withKeys(($event) => handleKeyUp($event), ["enter"])),
+              _cache[2] || (_cache[2] = withKeys(($event) => handleKeyUp($event), ["escape"]))
+            ]
+          }, null, 36), [
+            [vModelText, localEditingName.value]
+          ])
+        ], 4)) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+const NameEditor_vue_vue_type_style_index_0_scoped_b5d95dd5_lang = "";
+const NameEditor = /* @__PURE__ */ _export_sfc$1(_sfc_main$2P, [["__scopeId", "data-v-b5d95dd5"]]);
+const withDrag = (onMove, onUp) => {
+  const move = (e) => onMove(e);
+  const up = (e) => {
+    try {
+      onUp(e);
+    } finally {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+    }
+  };
+  window.addEventListener("mousemove", move);
+  window.addEventListener("mouseup", up);
+  return () => {
+    window.removeEventListener("mousemove", move);
+    window.removeEventListener("mouseup", up);
+  };
+};
+let registry = {};
+function registerShapes(map2) {
+  registry = { ...registry, ...map2 };
+}
+function getShapeComponentByKey(key) {
+  if (!key)
+    return null;
+  return registry[key] ?? null;
+}
+function getComponentByShapeKey(shapeKey) {
+  const componentName2 = BlockKeyMap[shapeKey] || shapeKey;
+  return getShapeComponentByKey(componentName2) || componentName2;
+}
+function getComponentByPinKey(shapeKey) {
+  const componentName2 = PinKeyMap[shapeKey] || shapeKey;
+  return getShapeComponentByKey(componentName2) || componentName2;
+}
+function getComponentByDiagramKey(shapeKey) {
+  const componentName2 = DiagramKeyMap[shapeKey] || shapeKey;
+  return getShapeComponentByKey(componentName2) || componentName2;
+}
+const getShapeComponent = (shape) => {
+  const { shapeType, shapeKey } = shape;
+  switch (shapeType) {
+    case "pin":
+      return getComponentByPinKey(shapeKey);
+    case "shape":
+      return getComponentByShapeKey(shapeKey);
+    case "diagram":
+      return getComponentByDiagramKey(shapeKey);
+    case "edge":
+      return getComponentByShapeKey(shapeKey);
+    default:
+      return "ShapeComponent";
+  }
+};
+const getShapeStyle = (shape) => {
+  const { bounds, shapeType } = shape;
+  if (shapeType === "edge") {
+    let waypoints = [];
+    if (shape.waypointId) {
+      if (typeof shape.waypointId === "string") {
+        try {
+          waypoints = JSON.parse(shape.waypointId);
+        } catch (error) {
+          console.error("解析waypointId失败:", error);
+          waypoints = [];
+        }
+      } else if (Array.isArray(shape.waypointId)) {
+        waypoints = shape.waypointId;
+      }
+    }
+    if (waypoints.length === 0) {
+      return {
+        position: "absolute",
+        left: "0px",
+        top: "0px",
+        width: "100px",
+        height: "50px",
+        opacity: 0
+        // 初始时隐藏
+      };
+    }
+    const xs = waypoints.map((wp) => wp.x);
+    const ys = waypoints.map((wp) => wp.y);
+    const minX = Math.min(...xs);
+    const maxX = Math.max(...xs);
+    const minY = Math.min(...ys);
+    const maxY = Math.max(...ys);
+    const padding2 = 10;
+    const width = Math.max(maxX - minX + padding2 * 2, 20);
+    const height = maxY - minY + padding2 * 2;
+    return {
+      position: "absolute",
+      left: `${minX - padding2}px`,
+      top: `${minY - padding2}px`,
+      width: `${width}px`,
+      height: `${height}px`
+    };
+  }
+  return {
+    position: "absolute",
+    left: `${(bounds == null ? void 0 : bounds.x) || 0}px`,
+    top: `${(bounds == null ? void 0 : bounds.y) || 0}px`,
+    width: `${(bounds == null ? void 0 : bounds.width) || 100}px`,
+    height: `${(bounds == null ? void 0 : bounds.height) || 50}px`
+  };
+};
 /*! Element Plus Icons Vue v2.3.2 */
 var _sfc_main6 = /* @__PURE__ */ defineComponent({
   name: "ArrowDown",
@@ -12007,12 +12224,172 @@ var _sfc_main293 = /* @__PURE__ */ defineComponent({
     ]));
   }
 }), zoom_out_default = _sfc_main293;
-const _hoisted_1$i = { class: "flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]" };
-const _hoisted_2$h = ["src"];
-const _hoisted_3$f = { class: "flex items-center" };
-const _hoisted_4$e = ["src"];
-const _hoisted_5$c = { class: "flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]" };
-const _hoisted_6$b = ["src"];
+const _ContextMenuUtils = class _ContextMenuUtils {
+  /**
+   * 处理右键菜单点击事件
+   * @param event 鼠标事件
+   * @param layerRef 图层引用
+   * @param pickTarget 命中测试函数
+   * @param shapes 图元列表
+   * @param selectShape 选中图元函数
+   * @param isDragging 是否正在拖拽
+   * @param isResizing 是否正在缩放
+   * @returns 命中的图元（如果有）
+   */
+  static handleContextMenuClick(event, layerRef, pickTarget2, shapes, selectShape, isDragging2, isResizing) {
+    if (isDragging2 || isResizing) {
+      return null;
+    }
+    event.preventDefault();
+    const point = _ContextMenuUtils.toLocalPoint(event, layerRef.value);
+    const hit = pickTarget2(shapes, point);
+    if ((hit.kind === "shape" || hit.kind === "pin") && hit.shape) {
+      if (selectShape) {
+        selectShape(hit.shape);
+      }
+      return hit.shape;
+    }
+    return null;
+  }
+  /**
+   * 将鼠标事件坐标转换为本地坐标
+   */
+  static toLocalPoint(event, layerRef) {
+    if (!layerRef) {
+      return { x: event.clientX, y: event.clientY };
+    }
+    const rect = layerRef.getBoundingClientRect();
+    return {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top
+    };
+  }
+  /**
+   * 检查点击是否在菜单外部
+   */
+  static isClickOutsideMenu(event, menuSelector = ".context-menu") {
+    const menuElement = document.querySelector(menuSelector);
+    return !menuElement || !menuElement.contains(event.target);
+  }
+  /**
+   * 计算菜单位置（避免超出屏幕边界）
+   */
+  static calculateMenuPosition(x2, y, menuWidth = 180, menuHeight = 300, safeMargin = 10) {
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    let left = x2;
+    let top = y;
+    if (left + menuWidth > viewportWidth) {
+      left = viewportWidth - menuWidth - safeMargin;
+    }
+    left = Math.max(safeMargin, left);
+    if (top + menuHeight > viewportHeight) {
+      top = viewportHeight - menuHeight - safeMargin;
+    }
+    top = Math.max(safeMargin, top);
+    return { x: left, y: top };
+  }
+  /**
+   * 处理删除操作
+   */
+  static handleDelete(target) {
+    if (target) {
+      eventBus.emit("shapes-delete", target);
+    }
+  }
+  /**
+   * 处理属性配置  (暂时不用)
+   */
+  static handleShowPropertyPanel(target) {
+    if (target) {
+      eventBus.emit("show-property-panel", target);
+    }
+  }
+  /**
+   * 处理树上高亮
+   */
+  static handleHighlight(target) {
+    if (target) {
+      eventBus.emit("highlight-shape", target);
+    }
+  }
+  /**
+   * 处理所在图表
+   */
+  static handleLocateChart(target) {
+    if (target) {
+      eventBus.emit("locate-chart", target);
+    }
+  }
+  /**
+   * 设置复制的图元
+   */
+  static setCopiedShapes(shapes) {
+    this.copiedShapes = _.cloneDeep(shapes);
+    console.log("已复制的图元:", this.copiedShapes);
+  }
+  /**
+   * 获取复制的图元
+   */
+  static getCopiedShapes() {
+    return this.copiedShapes;
+  }
+  /**
+   * 处理复制
+   */
+  static handleCopy(target) {
+    if (target) {
+      this.setCopiedShapes([target]);
+      eventBus.emit("copy-shape", target);
+    }
+  }
+  /**
+   * 处理粘贴
+   */
+  static handlePaste(target) {
+    if (this.copiedShapes.length === 0) {
+      return;
+    }
+    const pasteX = 50;
+    const pasteY = 50;
+    const pastedShapes = [];
+    this.copiedShapes.forEach((shape) => {
+      const newShape = _.cloneDeep(shape);
+      newShape.id = getUuid();
+      if (newShape.bounds) {
+        newShape.bounds.x = pasteX;
+        newShape.bounds.y = pasteY;
+      }
+      pastedShapes.push(newShape);
+    });
+    eventBus.emit("paste-shapes", pastedShapes);
+    eventBus.emit("select-shapes", pastedShapes.map((s2) => s2.id));
+    console.log("已粘贴的图元:", pastedShapes);
+  }
+  /**
+   * 处理剪切
+   */
+  static handleCut(target) {
+    if (target) {
+      eventBus.emit("cut-shape", target);
+    }
+  }
+  /**
+   * 记录日志
+   */
+  static logSelectedShape(target) {
+    console.log("当前选中的图元:", target);
+  }
+};
+// 用于存储复制的图元
+__publicField(_ContextMenuUtils, "copiedShapes", []);
+let ContextMenuUtils = _ContextMenuUtils;
+const _hoisted_1$h = { class: "flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]" };
+const _hoisted_2$g = ["src"];
+const _hoisted_3$e = { class: "flex items-center" };
+const _hoisted_4$d = ["src"];
+const _hoisted_5$b = { class: "flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]" };
+const _hoisted_6$a = ["src"];
 const _hoisted_7$9 = { class: "flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]" };
 const _hoisted_8$9 = ["src"];
 const _hoisted_9$7 = { class: "flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]" };
@@ -12224,12 +12601,19 @@ const _sfc_main$2O = /* @__PURE__ */ defineComponent({
     };
     const handleCopy = () => {
       logSelectedShape();
-      emit("copy", props2.selectedShape);
+      const graphStore = useGraphStore();
+      const selectedShapes = graphStore.selectedIds.map((id) => graphStore.shapes.find((s2) => s2.id === id)).filter(Boolean);
+      if (selectedShapes.length === 0) {
+        closeMenu();
+        return;
+      }
+      ContextMenuUtils.setCopiedShapes(selectedShapes);
       closeMenu();
     };
     const handlePaste = () => {
       logSelectedShape();
-      emit("paste", props2.selectedShape);
+      const graphStore = useGraphStore();
+      ContextMenuUtils.handlePaste(graphStore.selectedShape);
       closeMenu();
     };
     const handleCut = () => {
@@ -12278,12 +12662,12 @@ const _sfc_main$2O = /* @__PURE__ */ defineComponent({
               class: "menu-item",
               onClick: handleShowPropertyPanel
             }, [
-              createElementVNode("div", _hoisted_1$i, [
+              createElementVNode("div", _hoisted_1$h, [
                 createElementVNode("img", {
                   src: unref(getIcon)("createMenu", "config"),
                   class: "w-[18px] h-[18px] mr-[10px] ml-[2px]",
                   alt: "属性配置"
-                }, null, 8, _hoisted_2$h),
+                }, null, 8, _hoisted_2$g),
                 _cache[2] || (_cache[2] = createElementVNode("span", null, "属性配置", -1))
               ])
             ]),
@@ -12291,12 +12675,12 @@ const _sfc_main$2O = /* @__PURE__ */ defineComponent({
               class: "menu-item",
               onClick: handleHighlight
             }, [
-              createElementVNode("div", _hoisted_3$f, [
+              createElementVNode("div", _hoisted_3$e, [
                 createElementVNode("img", {
                   src: unref(getIcon)("createMenu", "delete"),
                   class: "w-[18px] h-[18px] mr-[10px] ml-[2px]",
                   alt: "树上高亮"
-                }, null, 8, _hoisted_4$e),
+                }, null, 8, _hoisted_4$d),
                 _cache[3] || (_cache[3] = createElementVNode("span", null, "树上高亮", -1))
               ])
             ]),
@@ -12305,12 +12689,12 @@ const _sfc_main$2O = /* @__PURE__ */ defineComponent({
               class: normalizeClass(["menu-item", { "menu-disabled": false }]),
               onClick: handleLocateChart
             }, [
-              createElementVNode("div", _hoisted_5$c, [
+              createElementVNode("div", _hoisted_5$b, [
                 createElementVNode("img", {
                   src: unref(getIcon)("createMenu", "locateChart"),
                   class: "w-[18px] h-[18px] mr-[10px] ml-[2px]",
                   alt: "所在图表"
-                }, null, 8, _hoisted_6$b),
+                }, null, 8, _hoisted_6$a),
                 _cache[4] || (_cache[4] = createElementVNode("div", { class: "flex-[1] flex justify-between items-center" }, [
                   createElementVNode("span", null, "所在图表")
                 ], -1))
@@ -12353,7 +12737,7 @@ const _sfc_main$2O = /* @__PURE__ */ defineComponent({
               ])
             ], 544),
             createElementVNode("div", {
-              class: normalizeClass(["menu-item", { "menu-disabled": true }]),
+              class: normalizeClass(["menu-item", { "menu-disabled": false }]),
               onClick: handleCopy
             }, [
               createElementVNode("div", _hoisted_12$3, [
@@ -12366,7 +12750,7 @@ const _sfc_main$2O = /* @__PURE__ */ defineComponent({
               ])
             ]),
             createElementVNode("div", {
-              class: normalizeClass(["menu-item", { "menu-disabled": true }]),
+              class: normalizeClass(["menu-item", { "menu-disabled": false }]),
               onClick: handlePaste
             }, [
               createElementVNode("div", _hoisted_14$1, [
@@ -12444,15 +12828,8 @@ const _sfc_main$2O = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ContextMenu_vue_vue_type_style_index_0_scoped_7371f77c_lang = "";
-const _export_sfc$1 = (sfc, props2) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props2) {
-    target[key] = val;
-  }
-  return target;
-};
-const ContextMenu = /* @__PURE__ */ _export_sfc$1(_sfc_main$2O, [["__scopeId", "data-v-7371f77c"]]);
+const ContextMenu_vue_vue_type_style_index_0_scoped_b67bbdb9_lang = "";
+const ContextMenu = /* @__PURE__ */ _export_sfc$1(_sfc_main$2O, [["__scopeId", "data-v-b67bbdb9"]]);
 const EDGE_TYPE = {
   /** 定向聚合：带菱形起点和空心箭头终点 */
   DIRECTED_AGGREGATION: "DirectedAggregation",
@@ -12503,12 +12880,12 @@ const DIAMOND_MARKER_SHAPES = [
 const SPECIAL_END_POINT_SHAPES = [
   EDGE_TYPE.GENERALIZATION
 ];
-const _hoisted_1$h = { key: 0 };
-const _hoisted_2$g = ["id"];
-const _hoisted_3$e = ["id"];
-const _hoisted_4$d = ["id"];
-const _hoisted_5$b = ["id"];
-const _hoisted_6$a = ["id"];
+const _hoisted_1$g = { key: 0 };
+const _hoisted_2$f = ["id"];
+const _hoisted_3$d = ["id"];
+const _hoisted_4$c = ["id"];
+const _hoisted_5$a = ["id"];
+const _hoisted_6$9 = ["id"];
 const _hoisted_7$8 = ["id"];
 const _hoisted_8$8 = ["id"];
 const _hoisted_9$6 = ["id"];
@@ -12522,7 +12899,7 @@ const _sfc_main$2N = /* @__PURE__ */ defineComponent({
     const props2 = __props;
     const shapeKey = computed(() => props2.shapeKey || EDGE_TYPE.ASSOCIATION);
     return (_ctx, _cache) => {
-      return shapeKey.value ? (openBlock(), createElementBlock("defs", _hoisted_1$h, [
+      return shapeKey.value ? (openBlock(), createElementBlock("defs", _hoisted_1$g, [
         shapeKey.value === unref(EDGE_TYPE).DIRECTED_AGGREGATION ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createElementVNode("marker", {
             id: `arrowhead-${shapeKey.value}`,
@@ -12539,7 +12916,7 @@ const _sfc_main$2N = /* @__PURE__ */ defineComponent({
               "stroke-width": "1",
               "stroke-linejoin": "round"
             }, null, -1)
-          ])], 8, _hoisted_2$g),
+          ])], 8, _hoisted_2$f),
           createElementVNode("marker", {
             id: `diamond-${shapeKey.value}`,
             markerWidth: "12",
@@ -12555,7 +12932,7 @@ const _sfc_main$2N = /* @__PURE__ */ defineComponent({
               stroke: "#5E5E5E",
               "stroke-width": "1"
             }, null, -1)
-          ])], 8, _hoisted_3$e)
+          ])], 8, _hoisted_3$d)
         ], 64)) : shapeKey.value === unref(EDGE_TYPE).AGGREGATION ? (openBlock(), createElementBlock("marker", {
           key: 1,
           id: `diamond-${shapeKey.value}`,
@@ -12572,7 +12949,7 @@ const _sfc_main$2N = /* @__PURE__ */ defineComponent({
             stroke: "#5E5E5E",
             "stroke-width": "1"
           }, null, -1)
-        ])], 8, _hoisted_4$d)) : shapeKey.value === unref(EDGE_TYPE).GENERALIZATION ? (openBlock(), createElementBlock("marker", {
+        ])], 8, _hoisted_4$c)) : shapeKey.value === unref(EDGE_TYPE).GENERALIZATION ? (openBlock(), createElementBlock("marker", {
           key: 2,
           id: `diamond-${shapeKey.value}`,
           markerWidth: "10",
@@ -12587,7 +12964,7 @@ const _sfc_main$2N = /* @__PURE__ */ defineComponent({
             stroke: "#5E5E5E",
             "stroke-width": "1"
           }, null, -1)
-        ])], 8, _hoisted_5$b)) : shapeKey.value === unref(EDGE_TYPE).DIRECTED_COMPOSITION ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+        ])], 8, _hoisted_5$a)) : shapeKey.value === unref(EDGE_TYPE).DIRECTED_COMPOSITION ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
           createElementVNode("marker", {
             id: `arrowhead-${shapeKey.value}`,
             markerWidth: "7",
@@ -12603,7 +12980,7 @@ const _sfc_main$2N = /* @__PURE__ */ defineComponent({
               "stroke-width": "1",
               "stroke-linejoin": "round"
             }, null, -1)
-          ])], 8, _hoisted_6$a),
+          ])], 8, _hoisted_6$9),
           createElementVNode("marker", {
             id: `diamond-${shapeKey.value}`,
             markerWidth: "12",
@@ -12673,7 +13050,7 @@ const _sfc_main$2N = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$g = ["points", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin", "stroke-dasharray", "marker-start", "marker-end"];
+const _hoisted_1$f = ["points", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin", "stroke-dasharray", "marker-start", "marker-end"];
 const _sfc_main$2M = /* @__PURE__ */ defineComponent({
   __name: "ConnectionLine",
   props: {
@@ -12749,7 +13126,7 @@ const _sfc_main$2M = /* @__PURE__ */ defineComponent({
           "stroke-dasharray": lineStyle.value.strokeDasharray,
           "marker-start": getMarkerStart(),
           "marker-end": getMarkerEnd()
-        }, null, 8, _hoisted_1$g)
+        }, null, 8, _hoisted_1$f)
       ], 4)) : createCommentVNode("", true);
     };
   }
@@ -12871,134 +13248,6 @@ class HighlightUtils {
     this.originalShapeStyles.clear();
   }
 }
-class ContextMenuUtils {
-  /**
-   * 处理右键菜单点击事件
-   * @param event 鼠标事件
-   * @param layerRef 图层引用
-   * @param pickTarget 命中测试函数
-   * @param shapes 图元列表
-   * @param selectShape 选中图元函数
-   * @param isDragging 是否正在拖拽
-   * @param isResizing 是否正在缩放
-   * @returns 命中的图元（如果有）
-   */
-  static handleContextMenuClick(event, layerRef, pickTarget2, shapes, selectShape, isDragging2, isResizing) {
-    if (isDragging2 || isResizing) {
-      return null;
-    }
-    event.preventDefault();
-    const point = ContextMenuUtils.toLocalPoint(event, layerRef.value);
-    const hit = pickTarget2(shapes, point);
-    if (hit.kind === "shape" && hit.shape) {
-      if (selectShape) {
-        selectShape(hit.shape);
-      }
-      return hit.shape;
-    }
-    return null;
-  }
-  /**
-   * 将鼠标事件坐标转换为本地坐标
-   */
-  static toLocalPoint(event, layerRef) {
-    if (!layerRef) {
-      return { x: event.clientX, y: event.clientY };
-    }
-    const rect = layerRef.getBoundingClientRect();
-    return {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top
-    };
-  }
-  /**
-   * 检查点击是否在菜单外部
-   */
-  static isClickOutsideMenu(event, menuSelector = ".context-menu") {
-    const menuElement = document.querySelector(menuSelector);
-    return !menuElement || !menuElement.contains(event.target);
-  }
-  /**
-   * 计算菜单位置（避免超出屏幕边界）
-   */
-  static calculateMenuPosition(x2, y, menuWidth = 180, menuHeight = 300, safeMargin = 10) {
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    let left = x2;
-    let top = y;
-    if (left + menuWidth > viewportWidth) {
-      left = viewportWidth - menuWidth - safeMargin;
-    }
-    left = Math.max(safeMargin, left);
-    if (top + menuHeight > viewportHeight) {
-      top = viewportHeight - menuHeight - safeMargin;
-    }
-    top = Math.max(safeMargin, top);
-    return { x: left, y: top };
-  }
-  /**
-   * 处理删除操作
-   */
-  static handleDelete(target) {
-    if (target) {
-      eventBus.emit("shapes-delete", target);
-    }
-  }
-  /**
-   * 处理属性配置  (暂时不用)
-   */
-  static handleShowPropertyPanel(target) {
-    if (target) {
-      eventBus.emit("show-property-panel", target);
-    }
-  }
-  /**
-   * 处理树上高亮
-   */
-  static handleHighlight(target) {
-    if (target) {
-      eventBus.emit("highlight-shape", target);
-    }
-  }
-  /**
-   * 处理所在图表
-   */
-  static handleLocateChart(target) {
-    if (target) {
-      eventBus.emit("locate-chart", target);
-    }
-  }
-  /**
-   * 处理复制
-   */
-  static handleCopy(target) {
-    if (target) {
-      eventBus.emit("copy-shape", target);
-    }
-  }
-  /**
-   * 处理粘贴
-   */
-  static handlePaste(target) {
-    if (target) {
-      eventBus.emit("paste-shape", target);
-    }
-  }
-  /**
-   * 处理剪切
-   */
-  static handleCut(target) {
-    if (target) {
-      eventBus.emit("cut-shape", target);
-    }
-  }
-  /**
-   * 记录日志
-   */
-  static logSelectedShape(target) {
-    console.log("当前选中的图元:", target);
-  }
-}
 const version = "2.11.5";
 const INSTALLED_KEY = Symbol("INSTALLED_KEY");
 const configProviderContextKey = Symbol();
@@ -70561,6 +70810,24 @@ const createKeyboardHandler = (config) => {
         }
       }
     }
+    if ((e.ctrlKey || e.metaKey) && e.key === "c" && graphStore.museInGraphView && !isInputElement) {
+      if (config.isEditingName && config.isEditingName()) {
+        return;
+      }
+      e.preventDefault();
+      if (config.onCopy) {
+        config.onCopy();
+      }
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "v" && graphStore.museInGraphView && !isInputElement) {
+      if (config.isEditingName && config.isEditingName()) {
+        return;
+      }
+      e.preventDefault();
+      if (config.onPaste) {
+        config.onPaste();
+      }
+    }
     if ((e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") && graphStore.museInGraphView && !isInputElement) {
       if (config.isEditingName && config.isEditingName()) {
         return;
@@ -70657,6 +70924,10 @@ class NameEditManager {
       nameInput: this.nameInput
     };
   }
+  // 设置名称输入框引用
+  setNameInput(input) {
+    this.nameInput.value = input;
+  }
   // 开始编辑名称
   async startEdit(shape) {
     var _a2, _b, _c, _d;
@@ -70945,15 +71216,6 @@ function createResizeUtils(layerRef, config, callbacks = {}) {
     getMinDimensions
   };
 }
-const _hoisted_1$f = { class: "resize-handles" };
-const _hoisted_2$f = ["onMousedown"];
-const _hoisted_3$d = {
-  key: 0,
-  class: "border-btn"
-};
-const _hoisted_4$c = ["onMousedown"];
-const _hoisted_5$a = ["onMousedown", "title"];
-const _hoisted_6$9 = ["src"];
 const DRAG_THRESHOLD = 4;
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "InteractionLayer",
@@ -70971,7 +71233,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   emits: InteractionLayerEmits,
   setup(__props, { expose: __expose, emit: __emit }) {
     useCssVars((_ctx) => ({
-      "913dd20e": unref(graphStore).currentScale
+      "798bf767": unref(graphStore).currentScale
     }));
     const props2 = __props;
     const emit = __emit;
@@ -71033,26 +71295,32 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         }
       }
     });
-    const resizeUtils = createResizeUtils(layerRef, {
-      packages: props2.packages,
-      diagram: props2.diagram,
-      taggedValueLabels: props2.taggedValueLabels
-    }, {
-      onResizeStart: (target) => {
-        eventBus.emit("resize-start", { target });
-      },
-      onResizeEnd: (target) => {
-        eventBus.emit("resize-end", { target });
+    const resizeUtils = createResizeUtils(
+      layerRef,
+      {
+        packages: props2.packages,
+        diagram: props2.diagram,
+        taggedValueLabels: props2.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 nameInput = ref(null);
+    watchEffect(() => {
+      if (nameInput.value) {
+        nameEditManager.setNameInput(nameInput.value);
       }
     });
-    const {
-      isResizing,
-      groupGhost,
-      startResize
-    } = resizeUtils;
     const { isEditingName, editingName } = nameEditManager.editingState;
     const isMouseInside = ref(false);
     let rafId = null;
@@ -71117,9 +71385,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const shouldCloseMenu = computed(() => {
       return graphStore.isDragging || isResizing.value || isEditingName.value;
     });
-    const clickActionButton = (event, value, shape) => {
-      event.stopPropagation();
-      event.preventDefault();
+    const clickActionButton = (value, shape) => {
       if (isEditingName.value) {
         nameEditManager.handleBlur(graphStore.selectedShape);
       }
@@ -71133,11 +71399,6 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       }
       emit("modelTypePropertyIdButtonClick", value, shape);
     };
-    const getSelectionBoxStyle = (shape) => selectionBoxStyle(shape);
-    const getHandleStyle = (h2, shape) => handleStyle(h2.position, shape);
-    const startEditName = async () => {
-      await nameEditManager.startEdit(graphStore.selectedShape);
-    };
     const onLayerDblClick = (payload) => {
       emit("propertyPanel", payload);
     };
@@ -71152,9 +71413,6 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         showContextMenu.value = false;
       }
       if (target.classList.contains("name-text-box")) {
-        if (nameEditManager.canEdit(graphStore.selectedShape)) {
-          startEditName();
-        }
         return;
       }
       if (isConnecting.value && props2.connectShapeData && props2.diagramBounds) {
@@ -71179,7 +71437,10 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         const localPoint = toLocalPoint(evt, layerRef.value);
         const clickX = localPoint.x;
         const clickY = localPoint.y;
-        const hasShapeAtPoint = EdgeUtils.isEndPointInShape(graphStore.shapes, { x: clickX, y: clickY });
+        const hasShapeAtPoint = EdgeUtils.isEndPointInShape(graphStore.shapes, {
+          x: clickX,
+          y: clickY
+        });
         if (!hasShapeAtPoint) {
           if (!!((_a2 = sourceShape.value) == null ? void 0 : _a2.parenShapeId)) {
             isConnecting.value = false;
@@ -71213,7 +71474,12 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             height: defaultHeight,
             modelId: ""
           };
-          emit("actionButtonAdd", { shapeKey: newShape.shapeKey, x: newShapeX, y: newShapeY, diagramId });
+          emit("actionButtonAdd", {
+            shapeKey: newShape.shapeKey,
+            x: newShapeX,
+            y: newShapeY,
+            diagramId
+          });
           return;
         } else {
           handleConnectLayerClick(evt);
@@ -71272,7 +71538,10 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         }
         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);
           if (isMulti && clickedInSelection)
@@ -71296,11 +71565,20 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               if (started) {
                 let targetPt = curr;
                 if (ids.length === 1) {
-                  const draggedShape = graphStore.shapes.find((x2) => x2.id === ids[0]);
+                  const draggedShape = graphStore.shapes.find(
+                    (x2) => x2.id === ids[0]
+                  );
                   if (draggedShape && draggedShape.shapeType === "pin" && draggedShape.parenShapeId) {
-                    const parentShape = graphStore.shapes.find((x2) => x2.id === draggedShape.parenShapeId);
+                    const parentShape = graphStore.shapes.find(
+                      (x2) => x2.id === draggedShape.parenShapeId
+                    );
                     if (parentShape) {
-                      targetPt = snapPinPointerOnMove(curr, parentShape, draggedShape, graphStore.dragOffset || void 0);
+                      targetPt = snapPinPointerOnMove(
+                        curr,
+                        parentShape,
+                        draggedShape,
+                        graphStore.dragOffset || void 0
+                      );
                     }
                   }
                 }
@@ -71414,32 +71692,35 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         closeMenu();
       }
     });
-    watch(() => props2.actionButtonShapeDataId, (newVal) => {
-      if (newVal) {
-        const foundShape = graphStore.shapes.find((x2) => x2.id === newVal);
-        if (foundShape) {
-          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(
+      () => props2.actionButtonShapeDataId,
+      (newVal) => {
+        if (newVal) {
+          const foundShape = graphStore.shapes.find((x2) => x2.id === newVal);
+          if (foundShape) {
+            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;
+                }
               }
             }
           }
         }
       }
-    });
+    );
     const handleMouseMove = (event) => {
       const { clientX, clientY } = event;
       const localPoint = toLocalPoint(event, layerRef.value);
@@ -71486,11 +71767,13 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           isAllowed = targetModels.includes(hoverShapeType);
         }
         if ((_f = props2.connectShapeData) == null ? void 0 : _f.sourceId) {
-          const sourceShape2 = graphStore.shapes.find((it2) => {
-            var _a3;
-            return it2.id === ((_a3 = props2.connectShapeData) == null ? void 0 : _a3.sourceId);
-          });
-          if (sourceShape2 && sourceShape2.parenShapeId !== hoverShape.parenShapeId && (hoverShape.shapeType !== "pin" && sourceShape2.shapeType !== "pin")) {
+          const sourceShape2 = graphStore.shapes.find(
+            (it2) => {
+              var _a3;
+              return it2.id === ((_a3 = props2.connectShapeData) == null ? void 0 : _a3.sourceId);
+            }
+          );
+          if (sourceShape2 && sourceShape2.parenShapeId !== hoverShape.parenShapeId && hoverShape.shapeType !== "pin" && sourceShape2.shapeType !== "pin") {
             isAllowed = false;
           }
         }
@@ -71573,7 +71856,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       }
     };
     const completeConnection = (clickedShape, clickPoint) => {
-      var _a2, _b;
+      var _a2, _b, _c;
       const sourceShape2 = graphStore.shapes.find(
         (shape) => {
           var _a3;
@@ -71588,7 +71871,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         ElMessage.error("当前目标图元类型不符合连接要求");
         return;
       }
-      if (sourceShape2 && clickedShape && sourceShape2.parenShapeId !== clickedShape.parenShapeId && (clickedShape.shapeType !== "pin" && sourceShape2.shapeType !== "pin")) {
+      if (sourceShape2 && clickedShape && sourceShape2.parenShapeId !== clickedShape.parenShapeId && clickedShape.shapeType !== "pin" && sourceShape2.shapeType !== "pin") {
         isConnecting.value = false;
         highlightShape(null, false);
         highlightUtils.clearHighlightTimeout();
@@ -71627,7 +71910,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         graphStore.shapes
       );
       if (connectionData) {
-        if (((_b = props2.connectShapeData) == null ? void 0 : _b.shapeKey) === "ServiceObjectFlow" && sourceShape2 && connectionData.sourcePoint && connectionData.targetPoint) {
+        if (((_c = (_b = props2.connectShapeData) == null ? void 0 : _b.shapeKey) == null ? void 0 : _c.toLowerCase().includes("objectflow")) && sourceShape2 && connectionData.sourcePoint && connectionData.targetPoint) {
           const result = EdgeUtils.handleServiceObjectFlowConnection(
             sourceShape2,
             clickedShape,
@@ -71783,7 +72066,11 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       var _a2, _b;
       externalCreateDragState.isDragging = true;
       isExternalCreateDragging.value = true;
-      const pt2 = clientToLocalPoint(payload.clientX, payload.clientY, layerRef.value);
+      const pt2 = clientToLocalPoint(
+        payload.clientX,
+        payload.clientY,
+        layerRef.value
+      );
       if (payload.shapeData) {
         const s22 = payload.shapeData;
         const isCmp = isCompartment(s22);
@@ -71813,12 +72100,20 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       if (!externalCreateDragState.creatingId)
         return;
       let targetPt = pt2;
-      const s2 = graphStore.shapes.find((x2) => x2.id === externalCreateDragState.creatingId);
+      const s2 = graphStore.shapes.find(
+        (x2) => x2.id === externalCreateDragState.creatingId
+      );
       if (s2 && s2.shapeType === "pin") {
         if (graphStore.hoverContainerId && graphStore.hoverNestable !== false) {
-          const parent2 = graphStore.shapes.find((x2) => x2.id === graphStore.hoverContainerId);
+          const parent2 = graphStore.shapes.find(
+            (x2) => x2.id === graphStore.hoverContainerId
+          );
           if (parent2) {
-            const { x: adjustedX, y: adjustedY } = snapPinToParentEdge(pt2, parent2, s2);
+            const { x: adjustedX, y: adjustedY } = snapPinToParentEdge(
+              pt2,
+              parent2,
+              s2
+            );
             targetPt = { x: adjustedX, y: adjustedY };
           }
         }
@@ -71829,11 +72124,17 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       try {
         if (!externalCreateDragState.creatingId)
           return;
-        const pt2 = clientToLocalPoint(payload.clientX, payload.clientY, layerRef.value);
+        const pt2 = clientToLocalPoint(
+          payload.clientX,
+          payload.clientY,
+          layerRef.value
+        );
         if (isInsideCanvasClient(payload.clientX, payload.clientY, layerRef.value)) {
           graphStore.moveDraggedShape(pt2);
           await nextTick();
-          const s2 = (graphStore.shapes || []).find((x2) => x2.id == externalCreateDragState.creatingId);
+          const s2 = (graphStore.shapes || []).find(
+            (x2) => x2.id == externalCreateDragState.creatingId
+          );
           if (s2 && s2.shapeType == "shape" || s2.shapeType == "pin") {
             const pure = _.omit(s2, ["inert"]);
             pure.bounds = {
@@ -71849,14 +72150,22 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               ) || null;
             }
             if (pure.shapeType === "pin" && parent2) {
-              const { x: adjustedX, y: adjustedY } = snapPinToParentEdge(pt2, parent2, pure);
+              const { x: adjustedX, y: adjustedY } = snapPinToParentEdge(
+                pt2,
+                parent2,
+                pure
+              );
               pure.bounds.x = adjustedX;
               pure.bounds.y = adjustedY;
               pure.parenShapeId = parent2.id;
               graphStore.moveDraggedShape({ x: adjustedX, y: adjustedY });
             }
             try {
-              const { ok } = await checkNestViaFront(pure, parent2, graphStore.shapes[0]);
+              const { ok } = await checkNestViaFront(
+                pure,
+                parent2,
+                graphStore.shapes[0]
+              );
               if (!ok) {
                 graphStore.setHoverState(null, false);
                 await cleanupInertShapes();
@@ -71880,7 +72189,11 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               icon: s2.icon
             };
             if (pure.shapeType === "pin" && parent2) {
-              const adjustedClientPt = localToClientPoint(pure.bounds.x, pure.bounds.y, layerRef.value);
+              const adjustedClientPt = localToClientPoint(
+                pure.bounds.x,
+                pure.bounds.y,
+                layerRef.value
+              );
               payloadData.coordinate.clientX = adjustedClientPt.clientX;
               payloadData.coordinate.clientY = adjustedClientPt.clientY;
             }
@@ -71931,7 +72244,17 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       },
       onEditProperty: () => onLayerDblClick(true),
       onCancelConnection: cancelConnection,
-      isEditingName: () => isEditingName.value
+      isEditingName: () => isEditingName.value,
+      onCopy: () => {
+        const selectedShapes = graphStore.selectedIds.map((id) => graphStore.shapes.find((s2) => s2.id === id)).filter(Boolean);
+        if (selectedShapes.length === 0) {
+          return;
+        }
+        ContextMenuUtils.setCopiedShapes(selectedShapes);
+      },
+      onPaste: () => {
+        ContextMenuUtils.handlePaste(graphStore.selectedShape);
+      }
     });
     onMounted(() => {
       window.addEventListener("keydown", keyboardHandler);
@@ -71941,6 +72264,15 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         initializeConnectPoint();
       }
       eventBus.on("shape-drag-end-updateScenarioMenu", actionButtonsStyle);
+      eventBus.on("paste-shapes", (shapes) => {
+        shapes.forEach((shape) => {
+          graphStore.addShape(shape);
+        });
+      });
+      eventBus.on("select-shapes", (ids) => {
+        graphStore.clearSelection();
+        graphStore.selectMany(ids);
+      });
     });
     onUnmounted(() => {
       offDrag == null ? void 0 : offDrag();
@@ -71964,7 +72296,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      var _a2;
+      var _a2, _b;
       return openBlock(), createElementBlock("div", {
         onMouseenter: onMouseEnter,
         onMouseleave: onMouseLeave,
@@ -71981,56 +72313,15 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         onContextmenu: withModifiers(handleContextMenu, ["prevent"])
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(graphStore).marqueeShapes, (s2) => {
-          return openBlock(), createElementBlock("div", {
+          return openBlock(), createBlock(SelectionBox, {
             key: s2.id,
-            class: "selection-box",
-            style: normalizeStyle(getSelectionBoxStyle(s2))
-          }, [
-            withDirectives(createElementVNode("div", _hoisted_1$f, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(resizeHandles), (h2) => {
-                return openBlock(), createElementBlock("div", {
-                  key: h2.position,
-                  class: normalizeClass(["resize-handle", [`resize-${h2.position}`, { "is-disabled": isMultiSelected.value }]]),
-                  style: normalizeStyle(getHandleStyle(h2, s2)),
-                  onMousedown: withModifiers(($event) => unref(startResize)($event, h2.position, s2), ["stop", "prevent"])
-                }, null, 46, _hoisted_2$f);
-              }), 128))
-            ], 512), [
-              [vShow, !isBusy.value && s2.shapeType !== "edge"]
-            ]),
-            withDirectives(createElementVNode("div", {
-              class: "action-buttons",
-              style: normalizeStyle(unref(actionButtonsStyle)(s2))
-            }, [
-              s2.modelTypePropertyId ? (openBlock(), createElementBlock("div", _hoisted_3$d, [
-                createElementVNode("button", {
-                  class: "action-btn edit-btn",
-                  onMousedown: withModifiers(($event) => clickModelTypePropertyIdButton(s2.modelTypePropertyId, s2), ["stop", "prevent"]),
-                  title: "设置类型"
-                }, [..._cache[8] || (_cache[8] = [
-                  createElementVNode("img", {
-                    src: _imports_0$1,
-                    alt: "设置类型"
-                  }, null, -1)
-                ])], 40, _hoisted_4$c)
-              ])) : createCommentVNode("", true),
-              (openBlock(true), createElementBlock(Fragment, null, renderList(s2.scenarioMenus, (value) => {
-                return openBlock(), createElementBlock("button", {
-                  class: "action-btn edit-btn",
-                  onMousedown: withModifiers(($event) => clickActionButton($event, value.code, s2), ["stop", "prevent"]),
-                  onClick: _cache[0] || (_cache[0] = withModifiers(() => {
-                  }, ["stop", "prevent"])),
-                  title: value.name
-                }, [
-                  createElementVNode("img", {
-                    src: unref(getIcon)("childIcons", value.icon || "")
-                  }, null, 8, _hoisted_6$9)
-                ], 40, _hoisted_5$a);
-              }), 256))
-            ], 4), [
-              [vShow, !isMultiSelected.value && s2.scenarioMenus && s2.scenarioMenus.length > 0 && s2.shapeType != unref(ShapeConfig).SHAPE_TYPE]
-            ])
-          ], 4);
+            shape: s2,
+            "is-busy": isBusy.value,
+            "is-multi-selected": isMultiSelected.value,
+            onResizeStart: unref(startResize),
+            onActionButtonClick: clickActionButton,
+            onModelTypePropertyIdClick: clickModelTypePropertyIdButton
+          }, null, 8, ["shape", "is-busy", "is-multi-selected", "onResizeStart"]);
         }), 128)),
         hoverRect.value ? (openBlock(), createElementBlock("div", {
           key: 0,
@@ -72061,49 +72352,25 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(getGhostShapeStyle(g))
           }, null, 8, ["shape", "style"]);
         }), 128)),
-        unref(graphStore).selectedShape && unref(graphStore).selectedShape.nameBounds && !unref(isEditingName) && unref(graphStore).selectedShape.shapeKey !== "ConceptRole" && !unref(graphStore).pendingNestedIds.includes(unref(graphStore).selectedShape.id) ? (openBlock(), createElementBlock("div", {
-          key: 2,
-          class: "name-text-box-container",
-          style: normalizeStyle(unref(nameTextBoxContainerStyle)(unref(graphStore).selectedShape.id))
-        }, [
-          createElementVNode("div", {
-            class: "name-text-box",
-            style: normalizeStyle(unref(nameTextBoxStyle)(unref(graphStore).selectedShape)),
-            title: "点击编辑名称"
-          }, null, 4)
-        ], 4)) : createCommentVNode("", true),
-        unref(isEditingName) && unref(graphStore).selectedShape && unref(graphStore).selectedShape.shapeKey !== "ConceptRole" ? (openBlock(), createElementBlock("div", {
-          key: 3,
-          class: "name-editor-container",
-          style: normalizeStyle(unref(nameEditorContainerStyle)(unref(graphStore).selectedShape))
-        }, [
-          withDirectives(createElementVNode("input", {
-            ref: "nameInput",
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(editingName) ? editingName.value = $event : null),
-            class: "name-input",
-            style: normalizeStyle(unref(nameInputStyle)(unref(graphStore).selectedShape)),
-            onBlur: _cache[2] || (_cache[2] = ($event) => unref(nameEditManager).handleBlur(unref(graphStore).selectedShape)),
-            onKeyup: [
-              _cache[3] || (_cache[3] = withKeys(($event) => unref(nameEditManager).handleKeyUp($event, unref(graphStore).selectedShape), ["enter"])),
-              _cache[4] || (_cache[4] = withKeys(($event) => unref(nameEditManager).cancelEdit(), ["escape"]))
-            ]
-          }, null, 36), [
-            [vModelText, unref(editingName)]
-          ])
-        ], 4)) : createCommentVNode("", true),
+        createVNode(NameEditor, {
+          "selected-shape": unref(graphStore).selectedShape,
+          "can-edit": !unref(graphStore).pendingNestedIds.includes(
+            ((_a2 = unref(graphStore).selectedShape) == null ? void 0 : _a2.id) || ""
+          ),
+          "is-editing-name": unref(isEditingName),
+          "editing-name": unref(editingName),
+          "name-edit-manager": unref(nameEditManager)
+        }, null, 8, ["selected-shape", "can-edit", "is-editing-name", "editing-name", "name-edit-manager"]),
         unref(selectedShape) && !isMultiSelected.value ? (openBlock(), createBlock(ContextMenu, {
-          key: 4,
+          key: 2,
           visible: showContextMenu.value,
           "selected-shape": unref(selectedShape),
           position: contextMenuPosition.value,
-          "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => showContextMenu.value = $event),
-          onDelete: _cache[6] || (_cache[6] = ($event) => unref(ContextMenuUtils).handleDelete(contextMenuTarget.value)),
-          onShowPropertyPanel: _cache[7] || (_cache[7] = ($event) => {
-            onLayerDblClick(true);
-          })
+          "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => showContextMenu.value = $event),
+          onShowPropertyPanel: _cache[1] || (_cache[1] = ($event) => onLayerDblClick(true))
         }, null, 8, ["visible", "selected-shape", "position"])) : createCommentVNode("", true),
         _ctx.connectShapeData && _ctx.diagramBounds ? (openBlock(), createElementBlock("div", {
-          key: 5,
+          key: 3,
           class: "connect-layer",
           style: normalizeStyle(layerStyle.value)
         }, [
@@ -72116,7 +72383,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             key: 1,
             "show-line": showLine.value,
             points: linePoints.value,
-            "shape-key": (_a2 = _ctx.connectShapeData) == null ? void 0 : _a2.shapeKey,
+            "shape-key": (_b = _ctx.connectShapeData) == null ? void 0 : _b.shapeKey,
             style: normalizeStyle(svgStyle.value)
           }, null, 8, ["show-line", "points", "shape-key", "style"])) : createCommentVNode("", true)
         ], 4)) : createCommentVNode("", true)
@@ -72124,8 +72391,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const InteractionLayer_vue_vue_type_style_index_0_scoped_cdfa3994_lang = "";
-const InteractionLayer = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["__scopeId", "data-v-cdfa3994"]]);
+const InteractionLayer_vue_vue_type_style_index_0_scoped_62816583_lang = "";
+const InteractionLayer = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["__scopeId", "data-v-62816583"]]);
 const _hoisted_1$e = { class: "diagram-header" };
 const _hoisted_2$e = { class: "diagram-title" };
 const _sfc_main$e = /* @__PURE__ */ defineComponent({