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

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";.context-menu[data-v-3f0901d5]{background-color:#fff;border:1px solid #ebeef5;border-radius:6px;box-shadow:0 2px 12px #0000001a;padding:6px 0;overflow-y:auto;box-sizing:border-box;transition:opacity .2s ease,transform .2s ease;transform-origin:top left}.context-menu[style*="display: block"][data-v-3f0901d5]{animation:fadeIn-3f0901d5 .2s ease forwards}@keyframes fadeIn-3f0901d5{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu[data-v-3f0901d5]::-webkit-scrollbar{width:6px}.context-menu[data-v-3f0901d5]::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:3px}.context-menu[data-v-3f0901d5]::-webkit-scrollbar-track{background-color:#f5f5f5}.menu-item[data-v-3f0901d5]{padding:0 15px;cursor:pointer;font-size:14px;color:#606266;border-radius:4px;height:36px;line-height:36px;box-sizing:border-box}.menu-item[data-v-3f0901d5]:hover{background-color:#f5f7fa;color:#303133}.menu-disabled[data-v-3f0901d5]{color:#c0c4cc!important;cursor:not-allowed!important;pointer-events:none}.menu-disabled[data-v-3f0901d5]:hover{background-color:transparent!important}.menu-disabled img[data-v-3f0901d5]{opacity:.5}.context-menu[style*="--edge-hint: left"][data-v-3f0901d5]{border-top-left-radius:0}.context-menu[style*="--edge-hint: right"][data-v-3f0901d5]{border-top-right-radius:0}.context-menu[style*="--edge-hint: top"][data-v-3f0901d5]{border-top-left-radius:0;border-top-right-radius:0}.context-menu[style*="--edge-hint: bottom"][data-v-3f0901d5]{border-bottom-left-radius:0;border-bottom-right-radius:0}.connection-line[data-v-c4c3e8c0]{position:absolute;pointer-events:none;z-index:10}.interaction-layer[data-v-914902a3]{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;transform:scale(var(--672c44c5));pointer-events:all;z-index:999}.selection-box[data-v-914902a3]{pointer-events:none;background:transparent}.resize-handles[data-v-914902a3]{position:relative;width:100%;height:100%}.hover-container-outline[data-v-914902a3]{position:absolute;pointer-events:none;padding:6px;top:6px}.hover-container-outline.is-valid[data-v-914902a3]{border:2px solid #0000ff}.hover-container-outline.is-invalid[data-v-914902a3]{border:2px solid #f1eded;background:rgba(240,237,237,.842)}.resize-handle[data-v-914902a3]{position:absolute;width:10px;height:10px;background-color:#007bff;border:2px solid #fff;border-radius:50%;pointer-events:all;transition:all .2s ease;box-shadow:0 2px 4px #0000004d;z-index:999}.resize-handle.is-disabled[data-v-914902a3]{cursor:default!important}.resize-handle[data-v-914902a3]:hover{background-color:#0056b3;transform:scale(1.2)}.action-buttons[data-v-914902a3]{display:flex;flex-direction:column;gap:4px;pointer-events:all;background:rgba(255,255,255,.95);padding:6px;border-radius:4px;box-shadow:0 2px 8px #00000026;border:1px solid #e0e0e0;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.action-btn[data-v-914902a3]{width:28px;height:28px;border:1px solid #d0d0d0;border-radius:3px;background:linear-gradient(to bottom,#f8f9fa,#e9ecef);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:Arial,sans-serif;color:#495057;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.action-btn[data-v-914902a3]:hover{background:linear-gradient(to bottom,#e3f2fd,#bbdefb);border-color:#90caf9;transform:translateY(-1px);box-shadow:0 2px 4px #2196f34d;color:#1976d2}.edit-btn[data-v-914902a3]:hover{background:#e3f2fd}.delete-btn[data-v-914902a3]:hover{background:#ffebee;border-color:#f44336}.name-editor-container[data-v-914902a3]{pointer-events:all}.name-input[data-v-914902a3]{width:calc(100% - 20px);padding:2px 4px;border:2px solid #007bff;border-radius:6px;font-size:12px;font-weight:600;background:#fff;box-shadow:0 4px 12px #00000026;outline:none;text-align:center}.name-input[data-v-914902a3]:focus{border-color:#0056b3;box-shadow:0 0 0 3px #007bff40}.name-text-box-container[data-v-914902a3]{pointer-events:all}.name-text-box[data-v-914902a3]{border:1px dashed #007bff;background:rgba(255,255,255,.2);cursor:pointer;pointer-events:all;transition:all .2s ease;border-radius:4px;box-shadow:0 0 0 1px #007bff1a;height:100%;display:flex;align-items:center;justify-content:center}.name-text-box[data-v-914902a3]:hover{border-color:#0056b3;background:rgba(0,123,255,.05);box-shadow:0 0 0 2px #007bff33;transform:scale(1.02)}.resize-ghost[data-v-914902a3]{position:absolute;border:2px solid #8a6d3b;background:transparent;box-shadow:0 0 0 2px #8a6d3b26 inset;pointer-events:none;z-index:9999}.connect-layer[data-v-914902a3]{position:absolute;pointer-events:none;z-index:1000}.connect-dot-direct[data-v-914902a3],.connect-dot-target[data-v-914902a3]{width:8px;height:8px;background-color:#000;border-radius:50%;border:1px solid #fff;box-shadow:0 0 4px #0000004d}.connection-line[data-v-914902a3]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}.border-btn[data-v-914902a3]{padding-bottom:4px;border-bottom:1px solid #e0e0e0}.diagram-shape[data-v-1f4cb409]{background:#e5ecf0;border-radius:10px;box-shadow:0 2px 8px #0000001a;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;margin:0;padding:0;border:var(--bw) var(--bs) var(--bc)}.hit-edge[data-v-1f4cb409]{position:absolute;background:transparent;z-index:999;pointer-events:auto}.hit-top[data-v-1f4cb409]{left:0;right:0;top:0;height:var(--bw)}.hit-right[data-v-1f4cb409]{top:0;right:0;bottom:0;width:var(--bw)}.hit-bottom[data-v-1f4cb409]{left:0;right:0;bottom:0;height:var(--bw)}.hit-left[data-v-1f4cb409]{top:0;left:0;bottom:0;width:var(--bw)}.diagram-header[data-v-1f4cb409]{background:rgba(255,255,255,.5);padding:3px 16px 3px 5px;display:inline-flex;align-items:center;position:relative;white-space:nowrap;align-self:flex-start}.diagram-header[data-v-1f4cb409]:after{content:"";position:absolute;bottom:-12px;right:-12px;width:20px;height:20px;background-color:var(--5113555a);transform:rotate(45deg);z-index:0}.diagram-title[data-v-1f4cb409]{font-family:var(--name-ff);font-size:var(--name-fs);font-weight:400;line-height:normal;letter-spacing:0em;font-variation-settings:"opsz" auto;font-feature-settings:"kern" on;color:var(--name-color);position:relative;z-index:2}.diagram-shape[data-v-05edf0d1]{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:auto;touch-action:none;-webkit-touch-action:none;-ms-touch-action:none;zoom:1;transform:none!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important}.diagram-svg[data-v-05edf0d1]{width:100%;height:100%;transform:none!important;-webkit-transform:none!important}.capability-shape[data-v-66d2551a]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-66d2551a]{display:block}.capability-shape[data-v-8e8054b6]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-8e8054b6]{display:block}.capability-shape[data-v-27d34586]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-27d34586]{display:block}.capability-shape[data-v-5f0b14f5]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-5f0b14f5]{display:block}.capability-shape[data-v-4f0bb734]{display:inline-block;position:relative;overflow:visible;box-sizing:content-box}[data-v-4f0bb734] .name-text-svg{text-align:left}[data-v-4f0bb734] .shape-name-svg{text-align:center}[data-v-4f0bb734] .content-text-svg{font-size:13px;line-height:1.4;color:#000;font-family:Arial,sans-serif;min-height:20px;overflow:visible;width:100%;box-sizing:border-box}[data-v-4f0bb734] .content-item{margin-bottom:4px;word-break:break-word;white-space:normal;overflow:visible;width:100%;box-sizing:border-box}[data-v-4f0bb734] .content-item:last-child{margin-bottom:0}.edge-component[data-v-aa953435]{position:absolute;pointer-events:all;cursor:pointer}.edge-svg[data-v-aa953435]{width:100%;height:100%;overflow:visible}.edge-svg polyline[data-v-aa953435]{pointer-events:all;stroke-linecap:round;stroke-linejoin:round}.edge-svg circle[data-v-aa953435]{pointer-events:none}.diagram-shape[data-v-daf180ad]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.diagram-svg[data-v-daf180ad]{width:100%;height:100%}.capability-shape[data-v-ec8f07ea]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-ec8f07ea]{display:block}.output-pin-shape[data-v-2081b7c7]{display:flex;align-items:center;justify-content:center;overflow:visible}.output-pin-svg[data-v-2081b7c7]{display:block;overflow:visible}.port-shape[data-v-4aa98dd6]{display:flex;align-items:center;justify-content:center;overflow:visible}.port-svg[data-v-4aa98dd6]{display:block;overflow:visible}.graph-view[data-v-38aa7b74]{width:100%;height:100%;background-color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none}.diagram-content[data-v-38aa7b74]{position:absolute;top:10px;left:10px;right:0;bottom:30px;overflow:auto;touch-action:none}.shapes-container[data-v-38aa7b74]{position:relative;width:100%;height:100%;min-height:600px}.shapes-container[data-v-38aa7b74]>*{position:absolute}.zoom-bar[data-v-38aa7b74]{position:absolute;bottom:0;right:0;left:0;width:100%;height:24px;display:flex;align-items:center;justify-content:flex-end;background:white;border-top:1px solid #e0e0e0;box-shadow:0 -2px 8px #0000000d;z-index:1000;gap:6px;padding:0 10px}.zoom-level[data-v-38aa7b74]{font-size:10px;font-weight:500;min-width:35px;text-align:center;color:#333}.zoom-slider[data-v-38aa7b74]{width:150px;height:100%;display:flex;align-items:center;justify-content:center}.zoom-slider input[type=range][data-v-38aa7b74]{width:100%;height:2px;border-radius:1px;background:#e0e0e0;outline:none;-webkit-appearance:none;margin:0}.zoom-slider input[type=range][data-v-38aa7b74]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:#1890ff;cursor:pointer;-webkit-transition:all .2s;transition:all .2s}.zoom-slider input[type=range][data-v-38aa7b74]::-webkit-slider-thumb:hover{background:#40a9ff;transform:scale(1.1)}.zoom-slider input[type=range][data-v-38aa7b74]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#1890ff;cursor:pointer;border:none;-moz-transition:all .2s;transition:all .2s}.zoom-slider input[type=range][data-v-38aa7b74]::-moz-range-thumb:hover{background:#40a9ff;transform:scale(1.1)}.zoom-button[data-v-38aa7b74]{width:18px;height:18px;display:flex;align-items:center;justify-content:center;border:1px solid #e0e0e0;border-radius:2px;background:white;cursor:pointer;font-size:10px;font-weight:600;color:#333;transition:all .2s}.zoom-button[data-v-38aa7b74]:hover{background:#f5f5f5;border-color:#1890ff;color:#1890ff}.zoom-button[data-v-38aa7b74]:active{background:#e6f7ff}
+@charset "UTF-8";.context-menu[data-v-3f0901d5]{background-color:#fff;border:1px solid #ebeef5;border-radius:6px;box-shadow:0 2px 12px #0000001a;padding:6px 0;overflow-y:auto;box-sizing:border-box;transition:opacity .2s ease,transform .2s ease;transform-origin:top left}.context-menu[style*="display: block"][data-v-3f0901d5]{animation:fadeIn-3f0901d5 .2s ease forwards}@keyframes fadeIn-3f0901d5{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu[data-v-3f0901d5]::-webkit-scrollbar{width:6px}.context-menu[data-v-3f0901d5]::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:3px}.context-menu[data-v-3f0901d5]::-webkit-scrollbar-track{background-color:#f5f5f5}.menu-item[data-v-3f0901d5]{padding:0 15px;cursor:pointer;font-size:14px;color:#606266;border-radius:4px;height:36px;line-height:36px;box-sizing:border-box}.menu-item[data-v-3f0901d5]:hover{background-color:#f5f7fa;color:#303133}.menu-disabled[data-v-3f0901d5]{color:#c0c4cc!important;cursor:not-allowed!important;pointer-events:none}.menu-disabled[data-v-3f0901d5]:hover{background-color:transparent!important}.menu-disabled img[data-v-3f0901d5]{opacity:.5}.context-menu[style*="--edge-hint: left"][data-v-3f0901d5]{border-top-left-radius:0}.context-menu[style*="--edge-hint: right"][data-v-3f0901d5]{border-top-right-radius:0}.context-menu[style*="--edge-hint: top"][data-v-3f0901d5]{border-top-left-radius:0;border-top-right-radius:0}.context-menu[style*="--edge-hint: bottom"][data-v-3f0901d5]{border-bottom-left-radius:0;border-bottom-right-radius:0}.connection-line[data-v-c4c3e8c0]{position:absolute;pointer-events:none;z-index:10}.interaction-layer[data-v-cf54d360]{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;transform:scale(var(--26f2f4ea));pointer-events:all;z-index:999}.selection-box[data-v-cf54d360]{pointer-events:none;background:transparent}.resize-handles[data-v-cf54d360]{position:relative;width:100%;height:100%}.hover-container-outline[data-v-cf54d360]{position:absolute;pointer-events:none;padding:6px;top:6px}.hover-container-outline.is-valid[data-v-cf54d360]{border:2px solid #0000ff}.hover-container-outline.is-invalid[data-v-cf54d360]{border:2px solid #f1eded;background:rgba(240,237,237,.842)}.resize-handle[data-v-cf54d360]{position:absolute;width:10px;height:10px;background-color:#007bff;border:2px solid #fff;border-radius:50%;pointer-events:all;transition:all .2s ease;box-shadow:0 2px 4px #0000004d;z-index:999}.resize-handle.is-disabled[data-v-cf54d360]{cursor:default!important}.resize-handle[data-v-cf54d360]:hover{background-color:#0056b3;transform:scale(1.2)}.action-buttons[data-v-cf54d360]{display:flex;flex-direction:column;gap:4px;pointer-events:all;background:rgba(255,255,255,.95);padding:6px;border-radius:4px;box-shadow:0 2px 8px #00000026;border:1px solid #e0e0e0;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.action-btn[data-v-cf54d360]{width:28px;height:28px;border:1px solid #d0d0d0;border-radius:3px;background:linear-gradient(to bottom,#f8f9fa,#e9ecef);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:Arial,sans-serif;color:#495057;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.action-btn[data-v-cf54d360]:hover{background:linear-gradient(to bottom,#e3f2fd,#bbdefb);border-color:#90caf9;transform:translateY(-1px);box-shadow:0 2px 4px #2196f34d;color:#1976d2}.edit-btn[data-v-cf54d360]:hover{background:#e3f2fd}.delete-btn[data-v-cf54d360]:hover{background:#ffebee;border-color:#f44336}.name-editor-container[data-v-cf54d360]{pointer-events:all}.name-input[data-v-cf54d360]{width:calc(100% - 20px);padding:2px 4px;border:2px solid #007bff;border-radius:6px;font-size:12px;font-weight:600;background:#fff;box-shadow:0 4px 12px #00000026;outline:none;text-align:center}.name-input[data-v-cf54d360]:focus{border-color:#0056b3;box-shadow:0 0 0 3px #007bff40}.name-text-box-container[data-v-cf54d360]{pointer-events:all}.name-text-box[data-v-cf54d360]{border:1px dashed #007bff;background:rgba(255,255,255,.2);cursor:pointer;pointer-events:all;transition:all .2s ease;border-radius:4px;box-shadow:0 0 0 1px #007bff1a;height:100%;display:flex;align-items:center;justify-content:center}.name-text-box[data-v-cf54d360]:hover{border-color:#0056b3;background:rgba(0,123,255,.05);box-shadow:0 0 0 2px #007bff33;transform:scale(1.02)}.resize-ghost[data-v-cf54d360]{position:absolute;border:2px solid #8a6d3b;background:transparent;box-shadow:0 0 0 2px #8a6d3b26 inset;pointer-events:none;z-index:9999}.connect-layer[data-v-cf54d360]{position:absolute;pointer-events:none;z-index:1000}.connect-dot-direct[data-v-cf54d360],.connect-dot-target[data-v-cf54d360]{width:8px;height:8px;background-color:#000;border-radius:50%;border:1px solid #fff;box-shadow:0 0 4px #0000004d}.connection-line[data-v-cf54d360]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}.border-btn[data-v-cf54d360]{padding-bottom:4px;border-bottom:1px solid #e0e0e0}.diagram-shape[data-v-1f4cb409]{background:#e5ecf0;border-radius:10px;box-shadow:0 2px 8px #0000001a;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;margin:0;padding:0;border:var(--bw) var(--bs) var(--bc)}.hit-edge[data-v-1f4cb409]{position:absolute;background:transparent;z-index:999;pointer-events:auto}.hit-top[data-v-1f4cb409]{left:0;right:0;top:0;height:var(--bw)}.hit-right[data-v-1f4cb409]{top:0;right:0;bottom:0;width:var(--bw)}.hit-bottom[data-v-1f4cb409]{left:0;right:0;bottom:0;height:var(--bw)}.hit-left[data-v-1f4cb409]{top:0;left:0;bottom:0;width:var(--bw)}.diagram-header[data-v-1f4cb409]{background:rgba(255,255,255,.5);padding:3px 16px 3px 5px;display:inline-flex;align-items:center;position:relative;white-space:nowrap;align-self:flex-start}.diagram-header[data-v-1f4cb409]:after{content:"";position:absolute;bottom:-12px;right:-12px;width:20px;height:20px;background-color:var(--5113555a);transform:rotate(45deg);z-index:0}.diagram-title[data-v-1f4cb409]{font-family:var(--name-ff);font-size:var(--name-fs);font-weight:400;line-height:normal;letter-spacing:0em;font-variation-settings:"opsz" auto;font-feature-settings:"kern" on;color:var(--name-color);position:relative;z-index:2}.diagram-shape[data-v-05edf0d1]{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:auto;touch-action:none;-webkit-touch-action:none;-ms-touch-action:none;zoom:1;transform:none!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important}.diagram-svg[data-v-05edf0d1]{width:100%;height:100%;transform:none!important;-webkit-transform:none!important}.capability-shape[data-v-66d2551a]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-66d2551a]{display:block}.capability-shape[data-v-8e8054b6]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-8e8054b6]{display:block}.capability-shape[data-v-27d34586]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-27d34586]{display:block}.capability-shape[data-v-5f0b14f5]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-5f0b14f5]{display:block}.capability-shape[data-v-4f0bb734]{display:inline-block;position:relative;overflow:visible;box-sizing:content-box}[data-v-4f0bb734] .name-text-svg{text-align:left}[data-v-4f0bb734] .shape-name-svg{text-align:center}[data-v-4f0bb734] .content-text-svg{font-size:13px;line-height:1.4;color:#000;font-family:Arial,sans-serif;min-height:20px;overflow:visible;width:100%;box-sizing:border-box}[data-v-4f0bb734] .content-item{margin-bottom:4px;word-break:break-word;white-space:normal;overflow:visible;width:100%;box-sizing:border-box}[data-v-4f0bb734] .content-item:last-child{margin-bottom:0}.edge-component[data-v-aa953435]{position:absolute;pointer-events:all;cursor:pointer}.edge-svg[data-v-aa953435]{width:100%;height:100%;overflow:visible}.edge-svg polyline[data-v-aa953435]{pointer-events:all;stroke-linecap:round;stroke-linejoin:round}.edge-svg circle[data-v-aa953435]{pointer-events:none}.diagram-shape[data-v-daf180ad]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.diagram-svg[data-v-daf180ad]{width:100%;height:100%}.capability-shape[data-v-ec8f07ea]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-ec8f07ea]{display:block}.output-pin-shape[data-v-2081b7c7]{display:flex;align-items:center;justify-content:center;overflow:visible}.output-pin-svg[data-v-2081b7c7]{display:block;overflow:visible}.port-shape[data-v-4aa98dd6]{display:flex;align-items:center;justify-content:center;overflow:visible}.port-svg[data-v-4aa98dd6]{display:block;overflow:visible}.graph-view[data-v-436bf5ea]{width:100%;height:100%;background-color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none}.diagram-content[data-v-436bf5ea]{position:absolute;top:10px;left:10px;right:0;bottom:30px;overflow:auto;touch-action:none}.shapes-container[data-v-436bf5ea]{position:relative;width:100%;height:100%;min-height:600px;transform-origin:0 0;transform:scale(var(--401af0dd))}.shapes-container[data-v-436bf5ea]>*{position:absolute}.zoom-bar[data-v-436bf5ea]{position:absolute;bottom:0;right:0;left:0;width:100%;height:24px;display:flex;align-items:center;justify-content:flex-end;background:white;border-top:1px solid #e0e0e0;box-shadow:0 -2px 8px #0000000d;z-index:1000;gap:6px;padding:0 10px}.zoom-level[data-v-436bf5ea]{font-size:10px;font-weight:500;min-width:35px;text-align:center;color:#333}.zoom-slider[data-v-436bf5ea]{width:150px;height:100%;display:flex;align-items:center;justify-content:center}.zoom-slider input[type=range][data-v-436bf5ea]{width:100%;height:2px;border-radius:1px;background:#e0e0e0;outline:none;-webkit-appearance:none;margin:0}.zoom-slider input[type=range][data-v-436bf5ea]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:#1890ff;cursor:pointer;-webkit-transition:all .2s;transition:all .2s}.zoom-slider input[type=range][data-v-436bf5ea]::-webkit-slider-thumb:hover{background:#40a9ff;transform:scale(1.1)}.zoom-slider input[type=range][data-v-436bf5ea]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#1890ff;cursor:pointer;border:none;-moz-transition:all .2s;transition:all .2s}.zoom-slider input[type=range][data-v-436bf5ea]::-moz-range-thumb:hover{background:#40a9ff;transform:scale(1.1)}.zoom-button[data-v-436bf5ea]{width:18px;height:18px;display:flex;align-items:center;justify-content:center;border:1px solid #e0e0e0;border-radius:2px;background:white;cursor:pointer;font-size:10px;font-weight:600;color:#333;transition:all .2s}.zoom-button[data-v-436bf5ea]:hover{background:#f5f5f5;border-color:#1890ff;color:#1890ff}.zoom-button[data-v-436bf5ea]:active{background:#e6f7ff}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-sose-front/mx-sose-graph",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "A Vue3 graph visualization plugin library",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/InteractionLayer.vue

@@ -467,7 +467,7 @@ const onLayerClick = (evt: MouseEvent) => {
       handleConnectLayerClick(evt);
       return;
     }
-    recordClickPoint.value = { x: evt.clientX, y: evt.clientY };
+    recordClickPoint.value = toLocalPoint(evt, layerRef.value);
     // 获取 sourceShape（先获取，确保存在）
     const foundSourceShape = graphStore.shapes.find(
       (shape) => shape.id === props.connectShapeData?.sourceId
@@ -481,9 +481,9 @@ const onLayerClick = (evt: MouseEvent) => {
     // 确保连接点已初始化
     initializeConnectPoint();
 
-    const canvasRect = canvas.getBoundingClientRect();
-    const clickX = evt.clientX - canvasRect.left - (props.diagramBounds?.x || 0);
-    const clickY = evt.clientY - canvasRect.top - (props.diagramBounds?.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 });
@@ -1159,19 +1159,21 @@ const onKeyDownDelete = (e: KeyboardEvent) => {
   eventBus.emit('shapes-remove', items);
 };
 
+// 鼠标移动事件处理
 // 鼠标移动事件处理
 const handleMouseMove = (event: MouseEvent) => {
   const { clientX, clientY } = event;
+  const localPoint = toLocalPoint(event, layerRef.value);
 
   // 使用工具类检查是否在画布内
   if (EdgeUtils.isWithinCanvas(clientX, clientY)) {
-    mousePosition.value = { x: 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) {
@@ -1184,13 +1186,13 @@ const handleMouseMove = (event: MouseEvent) => {
 // 用于跟踪上一次的hoverShape，避免重复发射事件
 let lastHoverShapeId: string | null = null;
 
-const checkHoverTarget = (clientX: number, clientY: number) => {
+const checkHoverTarget = (x: number, y: number) => {
   if (!props.diagramBounds) return;
 
   // 使用工具类检查悬停目标
   const hoverShape = EdgeUtils.checkHoverTarget(
-    clientX,
-    clientY,
+    x,
+    y,
     graphStore.shapes,
     props.diagramBounds,
     props.connectShapeData?.sourceId
@@ -1290,16 +1292,9 @@ watch(
 
 // 处理连接层点击事件
 const handleConnectLayerClick = (event: MouseEvent) => {
-  const { clientX, clientY } = event;
-
-  const canvas = document.querySelector(".diagram-content");
-  if (!canvas || !props.diagramBounds) return;
+  const localPoint = toLocalPoint(event, layerRef.value);
 
-  const canvasRect = canvas.getBoundingClientRect();
-  const clickX = clientX - canvasRect.left - (props.diagramBounds?.x || 0);
-  const clickY = clientY - canvasRect.top - (props.diagramBounds?.y || 0);
-
-  const hit = pickTarget(graphStore.shapes, { x: clickX, y: clickY });
+  const hit = pickTarget(graphStore.shapes, localPoint);
 
   if (
     hit.kind === "shape" &&
@@ -1308,7 +1303,7 @@ const handleConnectLayerClick = (event: MouseEvent) => {
     hit.shape.id !== props.connectShapeData.sourceId
   ) {
     event.stopPropagation();
-    completeConnection(hit.shape, { x: clickX, y: clickY });
+    completeConnection(hit.shape, localPoint);
   }
 };
 
@@ -1470,17 +1465,13 @@ const linePoints = computed(() => {
     return ""; // 返回空字符串，SVG 不会渲染任何线条
   }
 
-  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 - props.diagramBounds.x;
-    endY = mousePosition.value.y - canvasRect.top - props.diagramBounds.y;
+    endX = mousePosition.value.x;
+    endY = mousePosition.value.y;
   } else if (targetConnectPoint.value) {
     endX = targetConnectPoint.value.x;
     endY = targetConnectPoint.value.y;

package/src/index.ts

@@ -22,14 +22,14 @@ export interface MxSoseGraphOptions {
 // 注意：这里给 Plugin 加了一个 [MxSoseGraphOptions?] 的泛型，方便 TS 类型推断
 export const MxSoseGraphPlugin: Plugin<[MxSoseGraphOptions?]> = {
   install(app: App, options?: MxSoseGraphOptions) {
-    // 1️⃣ 尝试获取外部应用里的 pinia 实例
+    // 1尝试获取外部应用里的 pinia 实例
     const externalPinia =
       options?.pinia || // 优先使用显式传入的
       (app._context.provides.pinia as Pinia | undefined) || // Vue3 内部提供的
       (app.config.globalProperties.$pinia as Pinia | undefined) // 部分写法下可用
 
     if (externalPinia) {
-      // 2️⃣ 用「库这份 pinia 模块」设置 activePinia
+      // 2 用「库这份 pinia 模块」设置 activePinia
       setActivePinia(externalPinia)
     } else {
       if (import.meta.env.DEV) {
@@ -40,10 +40,10 @@ export const MxSoseGraphPlugin: Plugin<[MxSoseGraphOptions?]> = {
       }
     }
 
-    // 3️⃣ 注册组件
+    //  注册组件
     app.component('GraphView', GraphView)
 
-    // 4️⃣ 安装 ElementPlus（如果你希望由宿主项目自己安装，也可以删掉这行）
+    // 安装 ElementPlus（如果你希望由宿主项目自己安装，也可以删掉这行）
     app.use(ElementPlus)
   },
 }

package/src/utils/edgeUtils.ts

@@ -214,12 +214,8 @@ export class EdgeUtils {
   ) {
     if (!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 = 0, y = 0, width = 0, height = 0 } = shape.bounds;
 
@@ -568,14 +564,7 @@ export class EdgeUtils {
     diagramBounds: any,
     sourceId?: string
   ) {
-    const canvas = document.querySelector(".diagram-content");
-    if (!canvas) return null;
-
-    const canvasRect = canvas.getBoundingClientRect();
-    const clickX = x - canvasRect.left - (diagramBounds?.x || 0);
-    const clickY = y - canvasRect.top - (diagramBounds?.y || 0);
-
-    const hit = pickTarget(shapes, { x: clickX, y: clickY });
+    const hit = pickTarget(shapes, { x, y });
     
     if (["shape","pin"].includes(hit.kind) && hit.shape?.id && sourceId && hit.shape.id !== sourceId) {
       return hit.shape;

package/src/view/graph.vue

@@ -19,7 +19,7 @@
           left: `${diagramBounds.x}px`,
           top: `${diagramBounds.y}px`
         }" :resShape="resShape" :edgeCheck="edgeCheck" @property-panel="handlePropertyPanel"
-        :actionButtonShapeId="actionButtonShapeId" @edit-name="handleEditName"
+        :actionButtonShapeDataId="actionButtonShapeId" @edit-name="handleEditName"
         @update-shape="handleUpdateConnectShape" @diagramDoubleClick="handleDiagramDoubleClick"
         @connect-end="handleConnectEnd" @action-button-click="handleActionButtonClick"
         @model-type-property-id-button-click="handleModelTypePropertyIdButtonClick" :lines="props.lines"
@@ -28,14 +28,14 @@
     </div>
     
     <!-- 缩放条 -->
-    <!-- <div class="zoom-bar">
+    <div class="zoom-bar">
       <button @click="handleZoomOut" class="zoom-button zoom-out">-</button>
       <div class="zoom-slider">
         <input type="range" min="0.1" max="3" step="0.1" v-model="zoomValue" @input="handleZoomChange" />
       </div>
       <button @click="handleZoomIn" class="zoom-button zoom-in">+</button>
       <div class="zoom-level">{{ Math.round(currentScale * 100) }}%</div>
-    </div> -->
+    </div>
   </div>
 </template>
 
@@ -446,8 +446,8 @@ defineExpose({
   height: 100%;
   min-height: 600px;
   /* 应用缩放变换 */
-  /*transform-origin: 0 0;
-  transform: scale(v-bind('currentScale'));*/
+  transform-origin: 0 0;
+  transform: scale(v-bind('currentScale'));
 }
 
 /* 所有 shape 组件都使用绝对定位 */