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

package/dist/index.esm.js

@@ -7596,12 +7596,8 @@ class EdgeUtils {
   static findNearestConnectPoint(mousePos, shape, diagramBounds) {
     if (!(shape == null ? void 0 : shape.bounds) || !diagramBounds)
       return null;
-    const canvas = document.querySelector(".diagram-content");
-    if (!canvas)
-      return null;
-    const canvasRect = canvas.getBoundingClientRect();
-    const mouseX = mousePos.x - canvasRect.left - diagramBounds.x;
-    const mouseY = mousePos.y - canvasRect.top - diagramBounds.y;
+    const mouseX = mousePos.x;
+    const mouseY = mousePos.y;
     const { x: x2 = 0, y = 0, width = 0, height = 0 } = shape.bounds;
     const left = x2;
     const right = x2 + width;
@@ -7753,13 +7749,7 @@ class EdgeUtils {
    */
   static checkHoverTarget(x2, y, shapes, diagramBounds, sourceId) {
     var _a2;
-    const canvas = document.querySelector(".diagram-content");
-    if (!canvas)
-      return null;
-    const canvasRect = canvas.getBoundingClientRect();
-    const clickX = x2 - canvasRect.left - ((diagramBounds == null ? void 0 : diagramBounds.x) || 0);
-    const clickY = y - canvasRect.top - ((diagramBounds == null ? void 0 : diagramBounds.y) || 0);
-    const hit = pickTarget(shapes, { x: clickX, y: clickY });
+    const hit = pickTarget(shapes, { x: x2, y });
     if (["shape", "pin"].includes(hit.kind) && ((_a2 = hit.shape) == null ? void 0 : _a2.id) && sourceId && hit.shape.id !== sourceId) {
       return hit.shape;
     }
@@ -10609,9 +10599,9 @@ __publicField(IconLoader, "iconMaps", /* @__PURE__ */ new Map());
 const getIcon = (iconPath, iconName) => IconLoader.getIcon(iconPath, iconName);
 const _hoisted_1$g = { class: "flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]" };
 const _hoisted_2$f = ["src"];
-const _hoisted_3$d = { class: "flex items-center" };
-const _hoisted_4$d = ["src"];
-const _hoisted_5$c = { class: "flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]" };
+const _hoisted_3$e = { class: "flex items-center" };
+const _hoisted_4$e = ["src"];
+const _hoisted_5$d = { class: "flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]" };
 const _hoisted_6$b = ["src"];
 const _hoisted_7$9 = { class: "flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]" };
 const _hoisted_8$9 = ["src"];
@@ -10805,12 +10795,12 @@ const _sfc_main$2M = /* @__PURE__ */ defineComponent({
             class: "menu-item",
             onClick: handleHighlight
           }, [
-            createElementVNode("div", _hoisted_3$d, [
+            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$d),
+              }, null, 8, _hoisted_4$e),
               _cache[3] || (_cache[3] = createElementVNode("span", null, "树上高亮", -1))
             ])
           ]),
@@ -10818,7 +10808,7 @@ const _sfc_main$2M = /* @__PURE__ */ defineComponent({
             class: normalizeClass(["menu-item", { "menu-disabled": true }]),
             onClick: handleLocateChart
           }, [
-            createElementVNode("div", _hoisted_5$c, [
+            createElementVNode("div", _hoisted_5$d, [
               createElementVNode("img", {
                 src: unref(getIcon)("createMenu", "locateChart"),
                 class: "w-[18px] h-[18px] mr-[10px] ml-[2px]",
@@ -10957,9 +10947,9 @@ const SPECIAL_END_POINT_SHAPES = [
 ];
 const _hoisted_1$f = { key: 0 };
 const _hoisted_2$e = ["id"];
-const _hoisted_3$c = ["id"];
-const _hoisted_4$c = ["id"];
-const _hoisted_5$b = ["id"];
+const _hoisted_3$d = ["id"];
+const _hoisted_4$d = ["id"];
+const _hoisted_5$c = ["id"];
 const _hoisted_6$a = ["id"];
 const _hoisted_7$8 = ["id"];
 const _hoisted_8$8 = ["id"];
@@ -11007,7 +10997,7 @@ const _sfc_main$2L = /* @__PURE__ */ defineComponent({
               stroke: "#5E5E5E",
               "stroke-width": "1"
             }, null, -1)
-          ])], 8, _hoisted_3$c)
+          ])], 8, _hoisted_3$d)
         ], 64)) : shapeKey.value === unref(EDGE_TYPE).AGGREGATION ? (openBlock(), createElementBlock("marker", {
           key: 1,
           id: `diamond-${shapeKey.value}`,
@@ -11024,7 +11014,7 @@ const _sfc_main$2L = /* @__PURE__ */ defineComponent({
             stroke: "#5E5E5E",
             "stroke-width": "1"
           }, null, -1)
-        ])], 8, _hoisted_4$c)) : shapeKey.value === unref(EDGE_TYPE).GENERALIZATION ? (openBlock(), createElementBlock("marker", {
+        ])], 8, _hoisted_4$d)) : shapeKey.value === unref(EDGE_TYPE).GENERALIZATION ? (openBlock(), createElementBlock("marker", {
           key: 2,
           id: `diamond-${shapeKey.value}`,
           markerWidth: "10",
@@ -11039,7 +11029,7 @@ const _sfc_main$2L = /* @__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$c)) : shapeKey.value === unref(EDGE_TYPE).DIRECTED_COMPOSITION ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
           createElementVNode("marker", {
             id: `arrowhead-${shapeKey.value}`,
             markerWidth: "7",
@@ -69851,12 +69841,12 @@ function snapPinPointerOnMove(pointer, parentShape, pinShape, dragOffset) {
 }
 const _hoisted_1$d = { class: "resize-handles" };
 const _hoisted_2$d = ["onMousedown"];
-const _hoisted_3$b = {
+const _hoisted_3$c = {
   key: 0,
   class: "border-btn"
 };
-const _hoisted_4$b = ["onMousedown"];
-const _hoisted_5$a = ["onMousedown", "title"];
+const _hoisted_4$c = ["onMousedown"];
+const _hoisted_5$b = ["onMousedown", "title"];
 const _hoisted_6$9 = ["src"];
 const minW = 50, minH = 30;
 const DRAG_THRESHOLD = 4;
@@ -69887,7 +69877,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ],
   setup(__props, { expose: __expose, emit: __emit }) {
     useCssVars((_ctx) => ({
-      "672c44c5": unref(graphStore).currentScale
+      "26f2f4ea": unref(graphStore).currentScale
     }));
     const emit = __emit;
     const props2 = __props;
@@ -70101,7 +70091,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       emit("propertyPanel", payload);
     };
     const onLayerClick = (evt) => {
-      var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
+      var _a2, _b, _c, _d, _e, _f, _g;
       const target = evt.target;
       const contextMenu = document.querySelector(".context-menu");
       if (contextMenu && contextMenu.contains(target)) {
@@ -70127,7 +70117,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           handleConnectLayerClick(evt);
           return;
         }
-        recordClickPoint.value = { x: evt.clientX, y: evt.clientY };
+        recordClickPoint.value = toLocalPoint(evt, layerRef.value);
         const foundSourceShape = graphStore.shapes.find(
           (shape) => {
             var _a3;
@@ -70140,27 +70130,27 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         }
         sourceShape.value = foundSourceShape;
         initializeConnectPoint();
-        const canvasRect = canvas.getBoundingClientRect();
-        const clickX = evt.clientX - canvasRect.left - (((_a2 = props2.diagramBounds) == null ? void 0 : _a2.x) || 0);
-        const clickY = evt.clientY - canvasRect.top - (((_b = props2.diagramBounds) == null ? void 0 : _b.y) || 0);
+        const localPoint = toLocalPoint(evt, layerRef.value);
+        const clickX = localPoint.x;
+        const clickY = localPoint.y;
         const hasShapeAtPoint = EdgeUtils.isEndPointInShape(graphStore.shapes, { x: clickX, y: clickY });
         if (!hasShapeAtPoint) {
           console.log(props2.connectShapeData, "props.connectShapeData");
           console.log(props2.connectShapeData.scenarioMenus, "scenarioMenus");
           const newShape = _.cloneDeep(foundSourceShape);
           newShape.id = getUuid();
-          const currentMenu = (_d = (_c = props2.connectShapeData) == null ? void 0 : _c.scenarioMenus) == null ? void 0 : _d.find(
+          const currentMenu = (_b = (_a2 = props2.connectShapeData) == null ? void 0 : _a2.scenarioMenus) == null ? void 0 : _b.find(
             (menu) => {
               var _a3;
               return menu.code === ((_a3 = props2.connectShapeData) == null ? void 0 : _a3.shapeKey);
             }
           );
-          const targetModels = ((_e = currentMenu == null ? void 0 : currentMenu.targetCreateModel) == null ? void 0 : _e.split(",")) || ((_g = (_f = props2.connectShapeData) == null ? void 0 : _f.targetCreateModel) == null ? void 0 : _g.split(","));
+          const targetModels = ((_c = currentMenu == null ? void 0 : currentMenu.targetCreateModel) == null ? void 0 : _c.split(",")) || ((_e = (_d = props2.connectShapeData) == null ? void 0 : _d.targetCreateModel) == null ? void 0 : _e.split(","));
           if ((targetModels == null ? void 0 : targetModels.length) === 1) {
             newShape.shapeKey = targetModels[0];
           }
-          const defaultWidth = ((_h = foundSourceShape.bounds) == null ? void 0 : _h.width) || 100;
-          const defaultHeight = ((_i = foundSourceShape.bounds) == null ? void 0 : _i.height) || 50;
+          const defaultWidth = ((_f = foundSourceShape.bounds) == null ? void 0 : _f.width) || 100;
+          const defaultHeight = ((_g = foundSourceShape.bounds) == null ? void 0 : _g.height) || 50;
           const newShapeX = clickX;
           const newShapeY = clickY - defaultHeight / 2;
           const diagramId = newShape.diagramId;
@@ -70628,12 +70618,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
     const handleMouseMove = (event) => {
       const { clientX, clientY } = event;
+      const localPoint = toLocalPoint(event, layerRef.value);
       if (EdgeUtils.isWithinCanvas(clientX, clientY)) {
-        mousePosition.value = { x: clientX, y: clientY };
+        mousePosition.value = { x: localPoint.x, y: localPoint.y };
         if (isConnecting.value) {
           showLine.value = true;
-          updateConnectPointToNearest(clientX, clientY);
-          checkHoverTarget(clientX, clientY);
+          updateConnectPointToNearest(localPoint.x, localPoint.y);
+          checkHoverTarget(localPoint.x, localPoint.y);
         }
       } else {
         if (isConnecting.value) {
@@ -70643,13 +70634,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       }
     };
     let lastHoverShapeId = null;
-    const checkHoverTarget = (clientX, clientY) => {
+    const checkHoverTarget = (x2, y) => {
       var _a2, _b, _c, _d, _e;
       if (!props2.diagramBounds)
         return;
       const hoverShape = EdgeUtils.checkHoverTarget(
-        clientX,
-        clientY,
+        x2,
+        y,
         graphStore.shapes,
         props2.diagramBounds,
         (_a2 = props2.connectShapeData) == null ? void 0 : _a2.sourceId
@@ -70732,18 +70723,12 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       }
     );
     const handleConnectLayerClick = (event) => {
-      var _a2, _b, _c;
-      const { clientX, clientY } = event;
-      const canvas = document.querySelector(".diagram-content");
-      if (!canvas || !props2.diagramBounds)
-        return;
-      const canvasRect = canvas.getBoundingClientRect();
-      const clickX = clientX - canvasRect.left - (((_a2 = props2.diagramBounds) == null ? void 0 : _a2.x) || 0);
-      const clickY = clientY - canvasRect.top - (((_b = props2.diagramBounds) == null ? void 0 : _b.y) || 0);
-      const hit = pickTarget(graphStore.shapes, { x: clickX, y: clickY });
-      if (hit.kind === "shape" && hit.shape.id && ((_c = props2.connectShapeData) == null ? void 0 : _c.sourceId) && hit.shape.id !== props2.connectShapeData.sourceId) {
+      var _a2;
+      const localPoint = toLocalPoint(event, layerRef.value);
+      const hit = pickTarget(graphStore.shapes, localPoint);
+      if (hit.kind === "shape" && hit.shape.id && ((_a2 = props2.connectShapeData) == null ? void 0 : _a2.sourceId) && hit.shape.id !== props2.connectShapeData.sourceId) {
         event.stopPropagation();
-        completeConnection(hit.shape, { x: clickX, y: clickY });
+        completeConnection(hit.shape, localPoint);
       }
     };
     const completeConnection = (clickedShape, clickPoint) => {
@@ -70864,15 +70849,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       currentConnectPoint.value.y === 0) {
         return "";
       }
-      const canvas = document.querySelector(".diagram-content");
-      if (!canvas)
-        return "";
-      const canvasRect = canvas.getBoundingClientRect();
       const { x: startX, y: startY } = currentConnectPoint.value;
       let endX, endY;
       if (isConnecting.value) {
-        endX = mousePosition.value.x - canvasRect.left - props2.diagramBounds.x;
-        endY = mousePosition.value.y - canvasRect.top - props2.diagramBounds.y;
+        endX = mousePosition.value.x;
+        endY = mousePosition.value.y;
       } else if (targetConnectPoint.value) {
         endX = targetConnectPoint.value.x;
         endY = targetConnectPoint.value.y;
@@ -71184,7 +71165,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               ref_for: true,
               ref: (el) => setActionButtonsRef(el, s2.id)
             }, [
-              s2.modelTypePropertyId ? (openBlock(), createElementBlock("div", _hoisted_3$b, [
+              s2.modelTypePropertyId ? (openBlock(), createElementBlock("div", _hoisted_3$c, [
                 createElementVNode("button", {
                   class: "action-btn edit-btn",
                   onMousedown: withModifiers(($event) => clickModelTypePropertyIdButton(s2.modelTypePropertyId, s2), ["stop", "prevent"]),
@@ -71194,7 +71175,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                     src: _imports_0,
                     alt: "设置类型"
                   }, null, -1)
-                ])], 40, _hoisted_4$b)
+                ])], 40, _hoisted_4$c)
               ])) : createCommentVNode("", true),
               (openBlock(true), createElementBlock(Fragment, null, renderList(s2.scenarioMenus, (value) => {
                 return openBlock(), createElementBlock("button", {
@@ -71207,7 +71188,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                   createElementVNode("img", {
                     src: unref(getIcon)("childIcons", value.icon || "")
                   }, null, 8, _hoisted_6$9)
-                ], 40, _hoisted_5$a);
+                ], 40, _hoisted_5$b);
               }), 256))
             ], 4), [
               [vShow, !isMultiSelected.value && s2.scenarioMenus && s2.scenarioMenus.length > 0 && s2.shapeType != unref(ShapeConfig).SHAPE_TYPE]
@@ -71305,8 +71286,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const InteractionLayer_vue_vue_type_style_index_0_scoped_914902a3_lang = "";
-const InteractionLayer = /* @__PURE__ */ _export_sfc$1(_sfc_main$d, [["__scopeId", "data-v-914902a3"]]);
+const InteractionLayer_vue_vue_type_style_index_0_scoped_cf54d360_lang = "";
+const InteractionLayer = /* @__PURE__ */ _export_sfc$1(_sfc_main$d, [["__scopeId", "data-v-cf54d360"]]);
 const _hoisted_1$c = { class: "diagram-header" };
 const _hoisted_2$c = { class: "diagram-title" };
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
@@ -71382,8 +71363,8 @@ const StrategicTaxonomyDiagram_vue_vue_type_style_index_0_scoped_1f4cb409_lang =
 const StrategicTaxonomyDiagram = /* @__PURE__ */ _export_sfc$1(_sfc_main$c, [["__scopeId", "data-v-1f4cb409"]]);
 const _hoisted_1$b = ["width", "height", "viewBox"];
 const _hoisted_2$b = ["x", "y", "width", "height", "stroke", "stroke-width"];
-const _hoisted_3$a = { key: 0 };
-const _hoisted_4$a = ["x", "y", "width", "height", "href"];
+const _hoisted_3$b = { key: 0 };
+const _hoisted_4$b = ["x", "y", "width", "height", "href"];
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "ConceptualRole",
   props: {
@@ -71541,7 +71522,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             "stroke-alignment": "outer",
             rx: "2"
           }, null, 8, _hoisted_2$b),
-          !isGhost.value ? (openBlock(), createElementBlock("g", _hoisted_3$a, [
+          !isGhost.value ? (openBlock(), createElementBlock("g", _hoisted_3$b, [
             showIcon.value ? (openBlock(), createElementBlock("g", {
               key: 0,
               onClick: onImageClick
@@ -71553,7 +71534,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                 height: imageHeight.value,
                 href: unref(getIcon)("childIcons", _ctx.shape.icon || ""),
                 style: { "cursor": "pointer" }
-              }, null, 8, _hoisted_4$a)
+              }, null, 8, _hoisted_4$b)
             ])) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
         ], 8, _hoisted_1$b))
@@ -71655,9 +71636,9 @@ function hslToRgb(h2, s2, l2) {
 }
 const _hoisted_1$a = ["width", "height", "viewBox"];
 const _hoisted_2$a = ["id"];
-const _hoisted_3$9 = ["stop-color"];
-const _hoisted_4$9 = ["stop-color"];
-const _hoisted_5$9 = ["stop-color"];
+const _hoisted_3$a = ["stop-color"];
+const _hoisted_4$a = ["stop-color"];
+const _hoisted_5$a = ["stop-color"];
 const _hoisted_6$8 = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"];
 const _hoisted_7$7 = { key: 0 };
 const _hoisted_8$7 = ["x", "y", "font-family", "font-size", "font-weight", "fill"];
@@ -71842,15 +71823,15 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               createElementVNode("stop", {
                 offset: "0%",
                 "stop-color": gradientLeftColor.value
-              }, null, 8, _hoisted_3$9),
+              }, null, 8, _hoisted_3$a),
               createElementVNode("stop", {
                 offset: "75%",
                 "stop-color": gradientMiddleColor.value
-              }, null, 8, _hoisted_4$9),
+              }, null, 8, _hoisted_4$a),
               createElementVNode("stop", {
                 offset: "100%",
                 "stop-color": gradientRightColor.value
-              }, null, 8, _hoisted_5$9)
+              }, null, 8, _hoisted_5$a)
             ], 8, _hoisted_2$a)
           ]),
           createElementVNode("rect", {
@@ -71911,9 +71892,9 @@ const Block_vue_vue_type_style_index_0_scoped_66d2551a_lang = "";
 const Block = /* @__PURE__ */ _export_sfc$1(_sfc_main$a, [["__scopeId", "data-v-66d2551a"]]);
 const _hoisted_1$9 = ["width", "height", "viewBox"];
 const _hoisted_2$9 = ["id"];
-const _hoisted_3$8 = ["stop-color"];
-const _hoisted_4$8 = ["stop-color"];
-const _hoisted_5$8 = ["id"];
+const _hoisted_3$9 = ["stop-color"];
+const _hoisted_4$9 = ["stop-color"];
+const _hoisted_5$9 = ["id"];
 const _hoisted_6$7 = ["stop-color"];
 const _hoisted_7$6 = ["stop-color"];
 const _hoisted_8$6 = ["d", "fill", "stroke", "stroke-width"];
@@ -72062,11 +72043,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
               createElementVNode("stop", {
                 offset: "0%",
                 "stop-color": gradientLeftColor.value
-              }, null, 8, _hoisted_3$8),
+              }, null, 8, _hoisted_3$9),
               createElementVNode("stop", {
                 offset: "100%",
                 "stop-color": gradientRightColor.value
-              }, null, 8, _hoisted_4$8)
+              }, null, 8, _hoisted_4$9)
             ], 8, _hoisted_2$9),
             createElementVNode("linearGradient", {
               id: `foldGradient-${_ctx.shape.id}`,
@@ -72083,7 +72064,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 offset: "100%",
                 "stop-color": foldColor2.value
               }, null, 8, _hoisted_7$6)
-            ], 8, _hoisted_5$8)
+            ], 8, _hoisted_5$9)
           ]),
           createElementVNode("path", {
             d: shapePath.value,
@@ -72136,9 +72117,9 @@ const DogEar_vue_vue_type_style_index_0_scoped_8e8054b6_lang = "";
 const DogEar = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["__scopeId", "data-v-8e8054b6"]]);
 const _hoisted_1$8 = ["width", "height", "viewBox"];
 const _hoisted_2$8 = ["id"];
-const _hoisted_3$7 = ["stop-color"];
-const _hoisted_4$7 = ["stop-color"];
-const _hoisted_5$7 = ["stop-color"];
+const _hoisted_3$8 = ["stop-color"];
+const _hoisted_4$8 = ["stop-color"];
+const _hoisted_5$8 = ["stop-color"];
 const _hoisted_6$6 = ["fill", "stroke", "stroke-width"];
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "Action",
@@ -72221,15 +72202,15 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               createElementVNode("stop", {
                 offset: "0%",
                 "stop-color": gradientLeftColor.value
-              }, null, 8, _hoisted_3$7),
+              }, null, 8, _hoisted_3$8),
               createElementVNode("stop", {
                 offset: "75%",
                 "stop-color": gradientMiddleColor.value
-              }, null, 8, _hoisted_4$7),
+              }, null, 8, _hoisted_4$8),
               createElementVNode("stop", {
                 offset: "100%",
                 "stop-color": gradientRightColor.value
-              }, null, 8, _hoisted_5$7)
+              }, null, 8, _hoisted_5$8)
             ], 8, _hoisted_2$8)
           ]),
           createElementVNode("rect", {
@@ -72251,9 +72232,9 @@ const Action_vue_vue_type_style_index_0_scoped_27d34586_lang = "";
 const Action = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["__scopeId", "data-v-27d34586"]]);
 const _hoisted_1$7 = ["width", "height", "viewBox"];
 const _hoisted_2$7 = ["id"];
-const _hoisted_3$6 = ["stop-color"];
-const _hoisted_4$6 = ["stop-color"];
-const _hoisted_5$6 = ["stop-color"];
+const _hoisted_3$7 = ["stop-color"];
+const _hoisted_4$7 = ["stop-color"];
+const _hoisted_5$7 = ["stop-color"];
 const _hoisted_6$5 = ["id"];
 const _hoisted_7$5 = ["stop-color"];
 const _hoisted_8$5 = ["stop-color"];
@@ -72467,15 +72448,15 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               createElementVNode("stop", {
                 offset: "0%",
                 "stop-color": gradientLeftColor.value
-              }, null, 8, _hoisted_3$6),
+              }, null, 8, _hoisted_3$7),
               createElementVNode("stop", {
                 offset: "75%",
                 "stop-color": gradientMiddleColor.value
-              }, null, 8, _hoisted_4$6),
+              }, null, 8, _hoisted_4$7),
               createElementVNode("stop", {
                 offset: "100%",
                 "stop-color": gradientRightColor.value
-              }, null, 8, _hoisted_5$6)
+              }, null, 8, _hoisted_5$7)
             ], 8, _hoisted_2$7),
             createElementVNode("linearGradient", {
               id: `topGradient-${_ctx.shape.id}`,
@@ -72577,9 +72558,9 @@ const Package_vue_vue_type_style_index_0_scoped_5f0b14f5_lang = "";
 const Package = /* @__PURE__ */ _export_sfc$1(_sfc_main$7, [["__scopeId", "data-v-5f0b14f5"]]);
 const _hoisted_1$6 = ["width", "height"];
 const _hoisted_2$6 = ["id"];
-const _hoisted_3$5 = ["stop-color"];
-const _hoisted_4$5 = ["stop-color"];
-const _hoisted_5$5 = ["stop-color"];
+const _hoisted_3$6 = ["stop-color"];
+const _hoisted_4$6 = ["stop-color"];
+const _hoisted_5$6 = ["stop-color"];
 const _hoisted_6$4 = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"];
 const _hoisted_7$4 = ["stroke"];
 const _hoisted_8$4 = ["width", "height"];
@@ -72943,15 +72924,15 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               createElementVNode("stop", {
                 offset: "0%",
                 "stop-color": gradientLeftColor.value
-              }, null, 8, _hoisted_3$5),
+              }, null, 8, _hoisted_3$6),
               createElementVNode("stop", {
                 offset: "75%",
                 "stop-color": gradientMiddleColor.value
-              }, null, 8, _hoisted_4$5),
+              }, null, 8, _hoisted_4$6),
               createElementVNode("stop", {
                 offset: "100%",
                 "stop-color": gradientRightColor.value
-              }, null, 8, _hoisted_5$5)
+              }, null, 8, _hoisted_5$6)
             ], 8, _hoisted_2$6)
           ]),
           createElementVNode("rect", {
@@ -73057,9 +73038,9 @@ const DividingLine_vue_vue_type_style_index_0_scoped_4f0bb734_lang = "";
 const DividingLine = /* @__PURE__ */ _export_sfc$1(_sfc_main$6, [["__scopeId", "data-v-4f0bb734"]]);
 const _hoisted_1$5 = ["viewBox", "width", "height"];
 const _hoisted_2$5 = ["points", "stroke", "stroke-width", "stroke-dasharray", "marker-start", "marker-end"];
-const _hoisted_3$4 = { key: 0 };
-const _hoisted_4$4 = ["cx", "cy"];
-const _hoisted_5$4 = ["cx", "cy"];
+const _hoisted_3$5 = { key: 0 };
+const _hoisted_4$5 = ["cx", "cy"];
+const _hoisted_5$5 = ["cx", "cy"];
 const _hoisted_6$3 = ["x", "y"];
 const _hoisted_7$3 = ["x", "y"];
 const _hoisted_8$3 = ["x", "y"];
@@ -73275,7 +73256,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             "marker-start": getMarkerStart(),
             "marker-end": getMarkerEnd()
           }, null, 8, _hoisted_2$5),
-          props2.isSelected ? (openBlock(), createElementBlock("g", _hoisted_3$4, [
+          props2.isSelected ? (openBlock(), createElementBlock("g", _hoisted_3$5, [
             waypoints.value.length > 0 ? (openBlock(), createElementBlock("circle", {
               key: 0,
               cx: waypoints.value[0].x - bounds.value.minX + padding,
@@ -73284,7 +73265,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               fill: "#000000",
               stroke: "#FFFFFF",
               "stroke-width": "1"
-            }, null, 8, _hoisted_4$4)) : createCommentVNode("", true),
+            }, null, 8, _hoisted_4$5)) : createCommentVNode("", true),
             waypoints.value.length > 1 ? (openBlock(), createElementBlock("circle", {
               key: 1,
               cx: waypoints.value[waypoints.value.length - 1].x - bounds.value.minX + padding,
@@ -73293,7 +73274,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               fill: "#000000",
               stroke: "#FFFFFF",
               "stroke-width": "1"
-            }, null, 8, _hoisted_5$4)) : createCommentVNode("", true)
+            }, null, 8, _hoisted_5$5)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true),
           lineName.value && lineName.value !== "" && unref(EDGES_WITH_KEYWORDS).includes(shapeKey.value) ? (openBlock(), createElementBlock("text", {
             key: 1,
@@ -73335,9 +73316,9 @@ const Edge_vue_vue_type_style_index_0_scoped_aa953435_lang = "";
 const Edge = /* @__PURE__ */ _export_sfc$1(_sfc_main$5, [["__scopeId", "data-v-aa953435"]]);
 const _hoisted_1$4 = ["width", "height", "viewBox"];
 const _hoisted_2$4 = ["x", "y", "width", "height", "stroke", "stroke-width"];
-const _hoisted_3$3 = { key: 1 };
-const _hoisted_4$3 = ["x", "y", "width", "height", "href"];
-const _hoisted_5$3 = ["y", "font-family", "font-size", "font-weight", "fill"];
+const _hoisted_3$4 = { key: 1 };
+const _hoisted_4$4 = ["x", "y", "width", "height", "href"];
+const _hoisted_5$4 = ["y", "font-family", "font-size", "font-weight", "fill"];
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "Diagram",
   props: {
@@ -73473,7 +73454,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             "stroke-alignment": "outer",
             rx: "2"
           }, null, 8, _hoisted_2$4)) : createCommentVNode("", true),
-          !isGhost.value ? (openBlock(), createElementBlock("g", _hoisted_3$3, [
+          !isGhost.value ? (openBlock(), createElementBlock("g", _hoisted_3$4, [
             showIcon.value ? (openBlock(), createElementBlock("g", {
               key: 0,
               onClick: onImageClick
@@ -73485,7 +73466,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 height: imageHeight.value,
                 href: unref(getIcon)("childIcons", _ctx.shape.icon || ""),
                 style: { "cursor": "pointer" }
-              }, null, 8, _hoisted_4$3)
+              }, null, 8, _hoisted_4$4)
             ])) : createCommentVNode("", true),
             createElementVNode("text", {
               x: "50%",
@@ -73497,7 +73478,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               fill: nameStyle.value.color || "#000000",
               style: { "cursor": "pointer" },
               onClick: onNameClick
-            }, toDisplayString(_ctx.shape.name), 9, _hoisted_5$3)
+            }, toDisplayString(_ctx.shape.name), 9, _hoisted_5$4)
           ])) : createCommentVNode("", true)
         ], 8, _hoisted_1$4))
       ], 4);
@@ -73508,9 +73489,9 @@ const Diagram_vue_vue_type_style_index_0_scoped_daf180ad_lang = "";
 const Diagram = /* @__PURE__ */ _export_sfc$1(_sfc_main$4, [["__scopeId", "data-v-daf180ad"]]);
 const _hoisted_1$3 = ["width", "height", "viewBox"];
 const _hoisted_2$3 = ["id"];
-const _hoisted_3$2 = ["stop-color"];
-const _hoisted_4$2 = ["stop-color"];
-const _hoisted_5$2 = ["stop-color"];
+const _hoisted_3$3 = ["stop-color"];
+const _hoisted_4$3 = ["stop-color"];
+const _hoisted_5$3 = ["stop-color"];
 const _hoisted_6$2 = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"];
 const _hoisted_7$2 = { key: 0 };
 const _hoisted_8$2 = ["x", "y", "font-family", "font-size", "font-weight", "fill"];
@@ -73607,15 +73588,15 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               createElementVNode("stop", {
                 offset: "0%",
                 "stop-color": gradientLeftColor.value
-              }, null, 8, _hoisted_3$2),
+              }, null, 8, _hoisted_3$3),
               createElementVNode("stop", {
                 offset: "75%",
                 "stop-color": gradientMiddleColor.value
-              }, null, 8, _hoisted_4$2),
+              }, null, 8, _hoisted_4$3),
               createElementVNode("stop", {
                 offset: "100%",
                 "stop-color": gradientRightColor.value
-              }, null, 8, _hoisted_5$2)
+              }, null, 8, _hoisted_5$3)
             ], 8, _hoisted_2$3)
           ]),
           createElementVNode("rect", {
@@ -73667,9 +73648,9 @@ const ActivityAction_vue_vue_type_style_index_0_scoped_ec8f07ea_lang = "";
 const ActivityAction = /* @__PURE__ */ _export_sfc$1(_sfc_main$3, [["__scopeId", "data-v-ec8f07ea"]]);
 const _hoisted_1$2 = ["width", "height", "viewBox"];
 const _hoisted_2$2 = ["id"];
-const _hoisted_3$1 = ["stop-color"];
-const _hoisted_4$1 = ["stop-color"];
-const _hoisted_5$1 = ["stop-color"];
+const _hoisted_3$2 = ["stop-color"];
+const _hoisted_4$2 = ["stop-color"];
+const _hoisted_5$2 = ["stop-color"];
 const _hoisted_6$1 = ["width", "height", "fill", "stroke", "stroke-width", "rx"];
 const _hoisted_7$1 = { key: 0 };
 const _hoisted_8$1 = ["transform"];
@@ -73812,15 +73793,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               createElementVNode("stop", {
                 offset: "0%",
                 "stop-color": gradientLeftColor.value
-              }, null, 8, _hoisted_3$1),
+              }, null, 8, _hoisted_3$2),
               createElementVNode("stop", {
                 offset: "75%",
                 "stop-color": gradientMiddleColor.value
-              }, null, 8, _hoisted_4$1),
+              }, null, 8, _hoisted_4$2),
               createElementVNode("stop", {
                 offset: "100%",
                 "stop-color": gradientRightColor.value
-              }, null, 8, _hoisted_5$1)
+              }, null, 8, _hoisted_5$2)
             ], 8, _hoisted_2$2)
           ]),
           createElementVNode("rect", {
@@ -73870,9 +73851,9 @@ const Pin_vue_vue_type_style_index_0_scoped_2081b7c7_lang = "";
 const Pin = /* @__PURE__ */ _export_sfc$1(_sfc_main$2, [["__scopeId", "data-v-2081b7c7"]]);
 const _hoisted_1$1 = ["width", "height", "viewBox"];
 const _hoisted_2$1 = ["id"];
-const _hoisted_3 = ["stop-color"];
-const _hoisted_4 = ["stop-color"];
-const _hoisted_5 = ["stop-color"];
+const _hoisted_3$1 = ["stop-color"];
+const _hoisted_4$1 = ["stop-color"];
+const _hoisted_5$1 = ["stop-color"];
 const _hoisted_6 = ["width", "height", "fill", "stroke", "stroke-width", "rx"];
 const _hoisted_7 = { key: 0 };
 const _hoisted_8 = ["x", "y", "text-anchor", "dominant-baseline", "font-family", "font-size", "font-weight", "fill"];
@@ -73993,15 +73974,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               createElementVNode("stop", {
                 offset: "0%",
                 "stop-color": gradientLeftColor.value
-              }, null, 8, _hoisted_3),
+              }, null, 8, _hoisted_3$1),
               createElementVNode("stop", {
                 offset: "75%",
                 "stop-color": gradientMiddleColor.value
-              }, null, 8, _hoisted_4),
+              }, null, 8, _hoisted_4$1),
               createElementVNode("stop", {
                 offset: "100%",
                 "stop-color": gradientRightColor.value
-              }, null, 8, _hoisted_5)
+              }, null, 8, _hoisted_5$1)
             ], 8, _hoisted_2$1)
           ]),
           createElementVNode("rect", {
@@ -74039,6 +74020,9 @@ const _hoisted_2 = {
   key: 0,
   class: "shapes-container"
 };
+const _hoisted_3 = { class: "zoom-bar" };
+const _hoisted_4 = { class: "zoom-slider" };
+const _hoisted_5 = { class: "zoom-level" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "graph",
   props: {
@@ -74057,6 +74041,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["shapes-property", "shapes-edit-name", "connect-end", "action-button-click", "diagramDoubleClick", "model-type-property-id-button-click", "action-button-add", "scale-changed"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "69d8909a": currentScale.value
+    }));
     registerShapes({
       StrategicTaxonomyDiagram,
       ConceptualRole,
@@ -74075,14 +74062,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props2 = __props;
     const emit = __emit;
     const graphStore = useGraphStore();
-    const diagramContentRef = ref(null);
-    const shapeComponents = ref([]);
     const resShape = ref({});
     const currentScale = computed(() => graphStore.getScale());
     const zoomValue = ref(currentScale.value);
     watch(currentScale, (newScale) => {
       zoomValue.value = newScale;
     });
+    const handleZoomChange = () => {
+      graphStore.setScale(zoomValue.value);
+      emit("scale-changed", zoomValue.value);
+    };
+    const handleZoomIn = () => {
+      const newScale = Math.min(currentScale.value + 0.1, 3);
+      graphStore.setScale(newScale);
+      emit("scale-changed", newScale);
+    };
+    const handleZoomOut = () => {
+      const newScale = Math.max(currentScale.value - 0.1, 0.1);
+      graphStore.setScale(newScale);
+      emit("scale-changed", newScale);
+    };
     const shapes = computed(
       () => (graphStore.visibleShapes || []).filter((s2) => {
         if (graphStore.externalCreatingId && s2.id === graphStore.externalCreatingId) {
@@ -74293,8 +74292,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", {
           class: "diagram-content",
-          ref_key: "diagramContentRef",
-          ref: diagramContentRef,
+          ref: "diagramContentRef",
           onWheel: handleWheel
         }, [
           shapes.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [
@@ -74309,8 +74307,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 onEdgeClick: handleEdgeClick,
                 "is-selected": ((_a3 = unref(graphStore).selectedShape) == null ? void 0 : _a3.id) === shape.id && shape.shapeType === "edge",
                 ref_for: true,
-                ref_key: "shapeComponents",
-                ref: shapeComponents,
+                ref: "shapeComponents",
                 class: "shape-element",
                 "data-shape-id": shape.id,
                 onCompartmentMetrics: (m2, shape2) => onCompartmentMetrics(m2, shape2)
@@ -74332,7 +74329,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             resShape: resShape.value,
             edgeCheck: _ctx.edgeCheck,
             onPropertyPanel: handlePropertyPanel,
-            actionButtonShapeId: _ctx.actionButtonShapeId,
+            actionButtonShapeDataId: _ctx.actionButtonShapeId,
             onEditName: handleEditName,
             onUpdateShape: handleUpdateConnectShape,
             onDiagramDoubleClick: handleDiagramDoubleClick,
@@ -74344,14 +74341,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             diagram: props2.diagram,
             "tagged-value-labels": props2.taggedValueLabels,
             onActionButtonAdd: handleActionButtonAdd
-          }, null, 8, ["connect-shape-data", "diagram-bounds", "style", "resShape", "edgeCheck", "actionButtonShapeId", "lines", "packages", "diagram", "tagged-value-labels"])) : createCommentVNode("", true)
-        ], 544)
+          }, null, 8, ["connect-shape-data", "diagram-bounds", "style", "resShape", "edgeCheck", "actionButtonShapeDataId", "lines", "packages", "diagram", "tagged-value-labels"])) : createCommentVNode("", true)
+        ], 544),
+        createElementVNode("div", _hoisted_3, [
+          createElementVNode("button", {
+            onClick: handleZoomOut,
+            class: "zoom-button zoom-out"
+          }, "-"),
+          createElementVNode("div", _hoisted_4, [
+            withDirectives(createElementVNode("input", {
+              type: "range",
+              min: "0.1",
+              max: "3",
+              step: "0.1",
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => zoomValue.value = $event),
+              onInput: handleZoomChange
+            }, null, 544), [
+              [vModelText, zoomValue.value]
+            ])
+          ]),
+          createElementVNode("button", {
+            onClick: handleZoomIn,
+            class: "zoom-button zoom-in"
+          }, "+"),
+          createElementVNode("div", _hoisted_5, toDisplayString(Math.round(currentScale.value * 100)) + "%", 1)
+        ])
       ]);
     };
   }
 });
-const graph_vue_vue_type_style_index_0_scoped_38aa7b74_lang = "";
-const GraphView = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["__scopeId", "data-v-38aa7b74"]]);
+const graph_vue_vue_type_style_index_0_scoped_6c90b4da_lang = "";
+const GraphView = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["__scopeId", "data-v-6c90b4da"]]);
 const MxSoseGraphPlugin = {
   install(app, options) {
     const externalPinia = (options == null ? void 0 : options.pinia) || // 优先使用显式传入的