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

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";.selection-box[data-v-98567c09]{pointer-events:none;background:transparent}.resize-handles[data-v-98567c09]{position:relative;width:100%;height:100%}.resize-handle[data-v-98567c09]{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-98567c09]{cursor:default!important}.resize-handle[data-v-98567c09]:hover{background-color:#0056b3;transform:scale(1.2)}.action-buttons[data-v-98567c09]{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;backdrop-filter:blur(2px)}.action-btn[data-v-98567c09]{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-98567c09]: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-98567c09]:hover{background:#e3f2fd}.border-btn[data-v-98567c09]{padding-bottom:4px;border-bottom:1px solid #e0e0e0}.name-text-box-container[data-v-f0d3e2ba]{position:absolute;z-index:1001;pointer-events:all}.name-text-box[data-v-f0d3e2ba]{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-f0d3e2ba]:hover{border-color:#0056b3;background:rgba(0,123,255,.05);box-shadow:0 0 0 2px #007bff33;transform:scale(1.02)}.name-editor-container[data-v-f0d3e2ba]{position:absolute;z-index:1002;display:flex;justify-content:center;align-items:center;pointer-events:all}.name-input[data-v-f0d3e2ba]{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;font-family:inherit;resize:none;overflow:hidden}.name-input[data-v-f0d3e2ba]:focus{border-color:#0056b3;box-shadow:0 0 0 3px #007bff40}.context-menu[data-v-0f7f66ba]{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-0f7f66ba]{animation:fadeIn-0f7f66ba .2s ease forwards}@keyframes fadeIn-0f7f66ba{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu[data-v-0f7f66ba]::-webkit-scrollbar{width:6px}.context-menu[data-v-0f7f66ba]::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:3px}.context-menu[data-v-0f7f66ba]::-webkit-scrollbar-track{background-color:#f5f5f5}.menu-item[data-v-0f7f66ba]{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-0f7f66ba]:hover{background-color:#f5f7fa;color:#303133}.menu-disabled[data-v-0f7f66ba]{color:#c0c4cc!important;cursor:not-allowed!important;pointer-events:none}.menu-disabled[data-v-0f7f66ba]:hover{background-color:transparent!important}.menu-disabled img[data-v-0f7f66ba]{opacity:.5}.context-menu[style*="--edge-hint: left"][data-v-0f7f66ba]{border-top-left-radius:0}.context-menu[style*="--edge-hint: right"][data-v-0f7f66ba]{border-top-right-radius:0}.context-menu[style*="--edge-hint: top"][data-v-0f7f66ba]{border-top-left-radius:0;border-top-right-radius:0}.context-menu[style*="--edge-hint: bottom"][data-v-0f7f66ba]{border-bottom-left-radius:0;border-bottom-right-radius:0}.display-tooltip[data-v-0f7f66ba]{background-color:#fff;border:1px solid #ebeef5;border-radius:6px;box-shadow:0 2px 12px #0000001a;padding:6px 0;min-width:120px;animation:tooltipFadeIn-0f7f66ba .2s ease forwards}.tooltip-content[data-v-0f7f66ba]{overflow:hidden}.tooltip-item[data-v-0f7f66ba]{padding:8px 16px;cursor:pointer;font-size:14px;color:#606266;border-radius:4px;transition:background-color .2s ease;display:flex;align-items:center}.tooltip-item[data-v-0f7f66ba]:hover{background-color:#f5f7fa;color:#303133}.tooltip-item span[data-v-0f7f66ba]{display:block}@keyframes tooltipFadeIn-0f7f66ba{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.connection-line[data-v-c4c3e8c0]{position:absolute;pointer-events:none;z-index:10}.interaction-layer[data-v-24a22c8c]{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;transform:scale(var(--65f24407));pointer-events:all;z-index:999}.hover-container-outline[data-v-24a22c8c]{position:absolute;pointer-events:none;padding:6px;top:6px}.hover-container-outline.is-valid[data-v-24a22c8c]{border:2px solid #0000ff}.hover-container-outline.is-invalid[data-v-24a22c8c]{border:2px solid #f1eded;background:rgba(240,237,237,.842)}.resize-ghost[data-v-24a22c8c]{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-24a22c8c]{position:absolute;pointer-events:none;z-index:1000}.connect-dot-direct[data-v-24a22c8c],.connect-dot-target[data-v-24a22c8c]{width:8px;height:8px;background-color:#000;border-radius:50%;border:1px solid #fff;box-shadow:0 0 4px #0000004d}.connection-line[data-v-24a22c8c]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}.highlight-overlay[data-v-24a22c8c]{position:absolute;pointer-events:none;box-sizing:border-box;z-index:1001;border-radius:2px}.highlight-overlay.blue[data-v-24a22c8c]{border:3px solid #1890ff}.highlight-overlay.red[data-v-24a22c8c]{border:3px solid #f56c6c}.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-5ba17051]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-5ba17051]{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-8ed11c37]{position:absolute;pointer-events:all;cursor:pointer}.edge-svg[data-v-8ed11c37]{width:100%;height:100%;overflow:visible}.edge-svg polyline[data-v-8ed11c37]{pointer-events:all;stroke-linecap:round;stroke-linejoin:round}.edge-svg circle[data-v-8ed11c37]{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}.diagram-list-tooltip[data-v-57913d2d]{position:fixed;background:#ffffff;border:1px solid #e5e7eb;border-radius:6px;padding:10px 6px;box-shadow:0 4px 12px #00000026;z-index:9999;width:180px;max-width:300px}.tooltip-title[data-v-57913d2d]{padding:0 12px}.diagram-item{&[data-v-57913d2d]{display:flex;align-items:center;padding:0 12px;cursor:pointer;border-radius:4px;height:36px;line-height:36px;transition:background-color .2s}.diagram-name[data-v-57913d2d]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}}.diagram-item[data-v-57913d2d]:hover{background-color:#f0f3f6}.diagram-icon[data-v-57913d2d]{width:24px;height:24px;margin-right:6px}.graph-view[data-v-d4982c78]{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-d4982c78]{position:absolute;inset:10px 0 10px 10px;overflow:auto;touch-action:none}.shapes-container[data-v-d4982c78]{position:relative;width:100%;height:100%;min-height:600px;transform-origin:0 0;transform:scale(var(--18ea7fc8))}.shapes-container[data-v-d4982c78]>*{position:absolute;will-change:transform}.zoom-level[data-v-d4982c78]{position:absolute;bottom:30px;right:15px;font-size:10px;font-weight:500;min-width:35px;text-align:center;color:#333;background:rgba(255,255,255,.9);padding:2px 6px;border-radius:3px;box-shadow:0 1px 3px #0000001a}.cut-overlay-svg[data-v-d4982c78]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:998}
+@charset "UTF-8";.selection-box[data-v-98567c09]{pointer-events:none;background:transparent}.resize-handles[data-v-98567c09]{position:relative;width:100%;height:100%}.resize-handle[data-v-98567c09]{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-98567c09]{cursor:default!important}.resize-handle[data-v-98567c09]:hover{background-color:#0056b3;transform:scale(1.2)}.action-buttons[data-v-98567c09]{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;backdrop-filter:blur(2px)}.action-btn[data-v-98567c09]{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-98567c09]: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-98567c09]:hover{background:#e3f2fd}.border-btn[data-v-98567c09]{padding-bottom:4px;border-bottom:1px solid #e0e0e0}.name-text-box-container[data-v-f0d3e2ba]{position:absolute;z-index:1001;pointer-events:all}.name-text-box[data-v-f0d3e2ba]{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-f0d3e2ba]:hover{border-color:#0056b3;background:rgba(0,123,255,.05);box-shadow:0 0 0 2px #007bff33;transform:scale(1.02)}.name-editor-container[data-v-f0d3e2ba]{position:absolute;z-index:1002;display:flex;justify-content:center;align-items:center;pointer-events:all}.name-input[data-v-f0d3e2ba]{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;font-family:inherit;resize:none;overflow:hidden}.name-input[data-v-f0d3e2ba]:focus{border-color:#0056b3;box-shadow:0 0 0 3px #007bff40}.context-menu[data-v-0f7f66ba]{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-0f7f66ba]{animation:fadeIn-0f7f66ba .2s ease forwards}@keyframes fadeIn-0f7f66ba{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu[data-v-0f7f66ba]::-webkit-scrollbar{width:6px}.context-menu[data-v-0f7f66ba]::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:3px}.context-menu[data-v-0f7f66ba]::-webkit-scrollbar-track{background-color:#f5f5f5}.menu-item[data-v-0f7f66ba]{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-0f7f66ba]:hover{background-color:#f5f7fa;color:#303133}.menu-disabled[data-v-0f7f66ba]{color:#c0c4cc!important;cursor:not-allowed!important;pointer-events:none}.menu-disabled[data-v-0f7f66ba]:hover{background-color:transparent!important}.menu-disabled img[data-v-0f7f66ba]{opacity:.5}.context-menu[style*="--edge-hint: left"][data-v-0f7f66ba]{border-top-left-radius:0}.context-menu[style*="--edge-hint: right"][data-v-0f7f66ba]{border-top-right-radius:0}.context-menu[style*="--edge-hint: top"][data-v-0f7f66ba]{border-top-left-radius:0;border-top-right-radius:0}.context-menu[style*="--edge-hint: bottom"][data-v-0f7f66ba]{border-bottom-left-radius:0;border-bottom-right-radius:0}.display-tooltip[data-v-0f7f66ba]{background-color:#fff;border:1px solid #ebeef5;border-radius:6px;box-shadow:0 2px 12px #0000001a;padding:6px 0;min-width:120px;animation:tooltipFadeIn-0f7f66ba .2s ease forwards}.tooltip-content[data-v-0f7f66ba]{overflow:hidden}.tooltip-item[data-v-0f7f66ba]{padding:8px 16px;cursor:pointer;font-size:14px;color:#606266;border-radius:4px;transition:background-color .2s ease;display:flex;align-items:center}.tooltip-item[data-v-0f7f66ba]:hover{background-color:#f5f7fa;color:#303133}.tooltip-item span[data-v-0f7f66ba]{display:block}@keyframes tooltipFadeIn-0f7f66ba{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.connection-line[data-v-c4c3e8c0]{position:absolute;pointer-events:none;z-index:10}.interaction-layer[data-v-a7475c72]{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;transform:scale(var(--c994dcd8));pointer-events:all;z-index:999}.hover-container-outline[data-v-a7475c72]{position:absolute;pointer-events:none;padding:6px;top:6px}.hover-container-outline.is-valid[data-v-a7475c72]{border:2px solid #0000ff}.hover-container-outline.is-invalid[data-v-a7475c72]{border:2px solid #f1eded;background:rgba(240,237,237,.842)}.resize-ghost[data-v-a7475c72]{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-a7475c72]{position:absolute;pointer-events:none;z-index:1000}.connect-dot-direct[data-v-a7475c72],.connect-dot-target[data-v-a7475c72]{width:8px;height:8px;background-color:#000;border-radius:50%;border:1px solid #fff;box-shadow:0 0 4px #0000004d}.connection-line[data-v-a7475c72]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}.highlight-overlay[data-v-a7475c72]{position:absolute;pointer-events:none;box-sizing:border-box;z-index:1001;border-radius:2px}.highlight-overlay.blue[data-v-a7475c72]{border:3px solid #1890ff}.highlight-overlay.red[data-v-a7475c72]{border:3px solid #f56c6c}.ghost-outline[data-v-a7475c72]{position:absolute;border:4px solid #8a6d3b;background:transparent;pointer-events:none;border-radius:4px;z-index:9998;box-sizing:border-box}.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-5ba17051]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-5ba17051]{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-8ed11c37]{position:absolute;pointer-events:all;cursor:pointer}.edge-svg[data-v-8ed11c37]{width:100%;height:100%;overflow:visible}.edge-svg polyline[data-v-8ed11c37]{pointer-events:all;stroke-linecap:round;stroke-linejoin:round}.edge-svg circle[data-v-8ed11c37]{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}.diagram-list-tooltip[data-v-4e4791fa]{position:fixed;background:#ffffff;border:1px solid #e5e7eb;border-radius:6px;padding:10px 6px;box-shadow:0 4px 12px #00000026;z-index:9999;width:180px;max-width:300px}.tooltip-title[data-v-4e4791fa]{padding:0 12px}.diagram-item{&[data-v-4e4791fa]{display:flex;align-items:center;padding:0 12px;cursor:pointer;border-radius:4px;height:36px;line-height:36px;transition:background-color .2s}.diagram-name[data-v-4e4791fa]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}}.diagram-item[data-v-4e4791fa]:hover{background-color:#f0f3f6}.diagram-icon[data-v-4e4791fa]{width:24px;height:24px;margin-right:6px}.graph-view[data-v-f90f1704]{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-f90f1704]{position:absolute;inset:10px 0 10px 10px;overflow:auto;touch-action:none}.shapes-container[data-v-f90f1704]{position:relative;width:100%;height:100%;min-height:600px;transform-origin:0 0;transform:scale(var(--478247fa))}.shapes-container[data-v-f90f1704]>*{position:absolute;will-change:transform}.zoom-level[data-v-f90f1704]{position:absolute;bottom:30px;right:15px;font-size:10px;font-weight:500;min-width:35px;text-align:center;color:#333;background:rgba(255,255,255,.9);padding:2px 6px;border-radius:3px;box-shadow:0 1px 3px #0000001a}.cut-overlay-svg[data-v-f90f1704]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:998}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-sose-front/mx-sose-graph",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "A Vue3 graph visualization plugin library",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -16,7 +16,7 @@
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./style.css": "./dist/style.css"
+    "./dist/style.css": "./dist/style.css"
   },
   "scripts": {
     "dev": "vite",

package/src/components/DiagramListTooltip/DiagramListTooltip.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import {  ref, onMounted, onUnmounted, watch } from 'vue'
+import { defineProps, defineEmits, ref, onMounted, onUnmounted, watch } from 'vue'
 import { eventBus } from "../../store";
 import { getIcon } from "../../utils/iconLoader";
 import type { Diagram, locationChart } from '../../types'

package/src/components/InteractionLayer.vue

@@ -26,9 +26,24 @@
     <!-- 框选预览矩形 -->
     <div v-show="marqueeRect" class="marquee-rect"
       :style="getMarqueeStyle(marqueeRect || { x: 0, y: 0, width: 0, height: 0 })" />
-    <!-- 拖动和缩放的预览框 -->
-    <component v-for="g in allGhosts" :key="g.id" class="ghost-shape" :is="getShapeComponent(g)" :shape="g"
+    <!-- 拖动和缩放的预览框 - 使用简化的 div 轮廓框，性能更好 -->
+    <div 
+      v-for="g in dragGhostRects" 
+      :key="g.id" 
+      class="ghost-outline"
+      :style="{
+        left: g.x + 'px',
+        top: g.y + 'px',
+        width: g.width + 'px',
+        height: g.height + 'px',
+      }" 
+    />
+    <!-- 缩放预览框仍使用完整组件（数量少，需要看到内容变化） -->
+    <component v-for="g in resizeGhosts" :key="g.id" class="ghost-shape" :is="getShapeComponent(g)" :shape="g"
       :style="getGhostShapeStyle(g)" />
+    <!-- 高亮图元 -->
+    <component v-if="highlightedGhost" :key="highlightedGhost.id" class="ghost-shape" :is="getShapeComponent(highlightedGhost)" :shape="highlightedGhost"
+      :style="getGhostShapeStyle(highlightedGhost)" />
     <!-- 名称编辑组件 -->
     <NameEditor :selected-shape="graphStore.selectedShape" :can-edit="!graphStore.pendingNestedIds.includes(
       graphStore.selectedShape?.id || ''
@@ -157,7 +172,71 @@ const hoverRect = computed(() => {
   const b = getBounds(s);
   return { x: b.x, y: b.y, width: b.width, height: b.height };
 });
-// 把拖动缩放预览框合并，
+
+// 拖动预览框 - 只返回简单的矩形数据，用于渲染轻量级 div
+type GhostRect = { id: string; x: number; y: number; width: number; height: number };
+
+const dragGhostRects = computed<GhostRect[]>(() => {
+  if (!graphStore.isDragging || isExternalCreateDragging.value) return [];
+  
+  const rects: GhostRect[] = [];
+  const dragBase = graphStore.dragBase;
+  const descendantsSnapshot = graphStore.dragDescendantsSnapshot;
+  
+  for (const ghost of graphStore.ghostShadow) {
+    if (!ghost.bounds) continue;
+    
+    // 从 dragBase 获取拖动开始时的坐标（而不是实时坐标）
+    const baseBounds = dragBase[ghost.id];
+    if (!baseBounds) continue;
+    
+    // 计算位移量
+    const dx = (ghost.bounds.x ?? 0) - baseBounds.x;
+    const dy = (ghost.bounds.y ?? 0) - baseBounds.y;
+    
+    // 添加父元素预览框
+    rects.push({
+      id: ghost.id,
+      x: ghost.bounds.x ?? 0,
+      y: ghost.bounds.y ?? 0,
+      width: ghost.bounds.width ?? 0,
+      height: ghost.bounds.height ?? 0,
+    });
+    
+    // 从快照中获取后代，应用位移（不需要每帧递归收集）
+    const cachedDescendants = descendantsSnapshot.get(ghost.id);
+    if (cachedDescendants && cachedDescendants.length > 0) {
+      for (const desc of cachedDescendants) {
+        rects.push({
+          id: desc.id,
+          x: desc.x + dx,
+          y: desc.y + dy,
+          width: desc.width,
+          height: desc.height,
+        });
+      }
+    }
+  }
+  return rects;
+});
+
+// 缩放预览框 - 需要完整渲染组件
+const resizeGhosts = computed<Shape[]>(() => resizeGhostShadow.value);
+
+// 高亮图元的 ghost
+const highlightedGhost = computed<Shape | null>(() => {
+  if (!highlightedShape.value) return null;
+  return {
+    ...highlightedShape.value,
+    meta: {
+      ...(highlightedShape.value as any).meta,
+      isHighlighted: true,
+      isGhost: true,
+    },
+  } as Shape;
+});
+
+// 保留 allGhosts 用于兼容（如果其他地方用到）
 const allGhosts = computed<Shape[]>(() => {
   const byId = new Map<string, Shape>();
   // 收集所有Ghost形状
@@ -1775,4 +1854,15 @@ defineExpose({
 .highlight-overlay.red {
   border: 3px solid #f56c6c;
 }
+
+/* 拖动预览框 - 简化的轮廓框，性能更好 */
+.ghost-outline {
+  position: absolute;
+  border: 4px solid #8a6d3b;
+  background: transparent;
+  pointer-events: none;
+  border-radius: 4px;
+  z-index: 9998;
+  box-sizing: border-box;
+}
 </style>

package/src/constants/edgeShapeKeys.ts

@@ -53,7 +53,8 @@ export const DASHED_EDGE_SHAPES = [
   'Mitigates',
   'Protects',
   'MapsToCapability',
-  'ActualResourceRelationship'
+  'ActualResourceRelationship',
+  'ProjectSequence'
 ];
 
 /**
@@ -87,7 +88,8 @@ export const EDGES_WITH_KEYWORDS = [
   'Mitigates',
   'Protects',
   'MapsToCapability',
-  'Exhibits'
+  'Exhibits',
+  'ProjectSequence'
 ];
 
 /**