@mx-sose-front/mx-sose-graph 1.2.9 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +94373 -1365
- package/dist/index.esm.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/src/components/InteractionLayer.vue.d.ts.map +1 -1
- package/dist/src/components/Matrix/Matrix.vue.d.ts.map +1 -1
- package/dist/src/hooks/useConnectionPreview.d.ts +500 -0
- package/dist/src/hooks/useConnectionPreview.d.ts.map +1 -0
- package/dist/src/store/graphStore.d.ts +5 -1
- package/dist/src/store/graphStore.d.ts.map +1 -1
- package/dist/src/utils/autoLayout.d.ts +44 -0
- package/dist/src/utils/autoLayout.d.ts.map +1 -0
- package/dist/src/utils/pinUtils.d.ts +2 -0
- package/dist/src/utils/pinUtils.d.ts.map +1 -1
- package/dist/src/utils/shapeInitialBounds.d.ts +10 -0
- package/dist/src/utils/shapeInitialBounds.d.ts.map +1 -0
- package/dist/src/view/graph.vue.d.ts.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +2 -1
- package/src/components/InteractionLayer.vue +34 -406
- package/src/components/Matrix/Matrix.vue +71 -5
- package/src/hooks/useConnectionPreview.ts +405 -0
- package/src/store/graphStore.ts +24 -0
- package/src/utils/autoLayout.ts +388 -0
- package/src/utils/pinUtils.ts +5 -0
- package/src/utils/shapeInitialBounds.ts +42 -0
- package/src/view/graph.vue +2 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"graph.vue.d.ts","sourceRoot":"","sources":["../../../src/view/graph.vue"],"names":[],"mappings":"AA8CA;AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;;
|
|
1
|
+
{"version":3,"file":"graph.vue.d.ts","sourceRoot":"","sources":["../../../src/view/graph.vue"],"names":[],"mappings":"AA8CA;AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;;kBAmuBpC,KAAK;sBACD,KAAK;WAChB,MAAM,EAAE;cACL,MAAM,EAAE;aACT,MAAM,EAAE;uBACE,MAAM,EAAE;;oBAEX,MAAM,EAAE;eACb,OAAO;UACZ,MAAM,EAAE;+BACa,MAAM,EAAE;WAC5B,MAAM,EAAE;gBACH,OAAO;;0BAEG,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAdf,KAAK;sBACD,KAAK;WAChB,MAAM,EAAE;cACL,MAAM,EAAE;aACT,MAAM,EAAE;uBACE,MAAM,EAAE;;oBAEX,MAAM,EAAE;eACb,OAAO;UACZ,MAAM,EAAE;+BACa,MAAM,EAAE;WAC5B,MAAM,EAAE;gBACH,OAAO;;0BAEG,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AArB/B,wBAwBG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
|
package/dist/style.css
CHANGED
|
@@ -1 +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-1e65a7fa]{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-1e65a7fa]{animation:fadeIn-1e65a7fa .2s ease forwards}@keyframes fadeIn-1e65a7fa{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu[data-v-1e65a7fa]::-webkit-scrollbar{width:6px}.context-menu[data-v-1e65a7fa]::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:3px}.context-menu[data-v-1e65a7fa]::-webkit-scrollbar-track{background-color:#f5f5f5}.menu-item[data-v-1e65a7fa]{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-1e65a7fa]:hover{background-color:#f5f7fa;color:#303133}.menu-disabled[data-v-1e65a7fa]{color:#c0c4cc!important;cursor:not-allowed!important;pointer-events:none}.menu-disabled[data-v-1e65a7fa]:hover{background-color:transparent!important}.menu-disabled img[data-v-1e65a7fa]{opacity:.5}.context-menu[style*="--edge-hint: left"][data-v-1e65a7fa]{border-top-left-radius:0}.context-menu[style*="--edge-hint: right"][data-v-1e65a7fa]{border-top-right-radius:0}.context-menu[style*="--edge-hint: top"][data-v-1e65a7fa]{border-top-left-radius:0;border-top-right-radius:0}.context-menu[style*="--edge-hint: bottom"][data-v-1e65a7fa]{border-bottom-left-radius:0;border-bottom-right-radius:0}.display-tooltip[data-v-1e65a7fa]{background-color:#fff;border:1px solid #ebeef5;border-radius:6px;box-shadow:0 2px 12px #0000001a;padding:6px 0;min-width:120px;animation:tooltipFadeIn-1e65a7fa .2s ease forwards}.tooltip-content[data-v-1e65a7fa]{overflow:hidden}.tooltip-item[data-v-1e65a7fa]{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-1e65a7fa]:hover{background-color:#f5f7fa;color:#303133}.tooltip-item span[data-v-1e65a7fa]{display:block}@keyframes tooltipFadeIn-1e65a7fa{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-07df083a]{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;transform:scale(var(--55742cb7));pointer-events:all;z-index:999}.hover-container-outline[data-v-07df083a]{position:absolute;pointer-events:none;padding:6px;top:6px}.hover-container-outline-svg[data-v-07df083a]{position:absolute;pointer-events:none}.hover-container-outline-svg .outline-path[data-v-07df083a]{fill:transparent;stroke-width:2px;stroke-linejoin:round}.hover-container-outline.is-valid[data-v-07df083a]{border:2px solid #0000ff}.hover-container-outline-svg.is-valid .outline-path[data-v-07df083a]{stroke:#00f}.hover-container-outline.is-invalid[data-v-07df083a]{border:2px solid #f1eded;background:rgba(240,237,237,.842)}.hover-container-outline-svg.is-invalid .outline-path[data-v-07df083a]{stroke:#f1eded;fill:#f0eded59}.resize-ghost[data-v-07df083a]{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-07df083a]{position:absolute;pointer-events:none;z-index:1000}.connect-dot-direct[data-v-07df083a],.connect-dot-target[data-v-07df083a]{width:8px;height:8px;background-color:#000;border-radius:50%;border:1px solid #fff;box-shadow:0 0 4px #0000004d}.connection-line[data-v-07df083a]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}.highlight-overlay[data-v-07df083a]{position:absolute;pointer-events:none;box-sizing:border-box;z-index:1001;border-radius:2px}.highlight-overlay-svg[data-v-07df083a]{position:absolute;pointer-events:none}.highlight-overlay-svg .outline-path[data-v-07df083a]{fill:transparent;stroke-width:3px;stroke-linejoin:round}.highlight-overlay.blue[data-v-07df083a]{border:3px solid #1890ff}.highlight-overlay-svg.blue .outline-path[data-v-07df083a]{stroke:#1890ff}.highlight-overlay.red[data-v-07df083a]{border:3px solid #f56c6c}.highlight-overlay-svg.red .outline-path[data-v-07df083a]{stroke:#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-d0030e67]{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-d0030e67]{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-49b887dd]{display:inline-block;position:relative;overflow:visible;box-sizing:content-box}[data-v-49b887dd] .name-text-svg{text-align:left}[data-v-49b887dd] .shape-name-svg{text-align:center}[data-v-49b887dd] .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-49b887dd] .content-item{margin-bottom:4px;word-break:break-word;white-space:normal;overflow:visible;width:100%;box-sizing:border-box}[data-v-49b887dd] .content-item:last-child{margin-bottom:0}.edge-component[data-v-c885b93d]{position:absolute;pointer-events:all;cursor:pointer}.edge-svg[data-v-c885b93d]{width:100%;height:100%;overflow:visible}.edge-svg polyline[data-v-c885b93d]{pointer-events:all;stroke-linecap:round;stroke-linejoin:round}.edge-svg circle[data-v-c885b93d]{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}.gantt-context-menu[data-v-4efbe149]{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}.gantt-context-menu[style*="display: block"][data-v-4efbe149]{animation:fadeIn-4efbe149 .2s ease forwards}@keyframes fadeIn-4efbe149{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.gantt-context-menu[data-v-4efbe149]::-webkit-scrollbar{width:6px}.gantt-context-menu[data-v-4efbe149]::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:3px}.gantt-context-menu[data-v-4efbe149]::-webkit-scrollbar-track{background-color:#f5f5f5}.menu-item[data-v-4efbe149]{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-4efbe149]:hover:not(.menu-disabled){background-color:#f5f7fa;color:#303133}.menu-disabled[data-v-4efbe149]{color:#c0c4cc!important;cursor:not-allowed!important;pointer-events:none}.menu-disabled[data-v-4efbe149]:hover{background-color:transparent!important}.menu-disabled img[data-v-4efbe149]{opacity:.5}.gantt-container[data-v-365c49d0]{--header-row-h: 28px;--data-row-h: 32px;display:flex;box-sizing:border-box;border:1px solid #dcdfe6;background:#fff;overflow:hidden;font-size:12px;font-family:Source Han Sans SC,Microsoft YaHei,PingFang SC,Arial,sans-serif}.gantt-search-bar[data-v-365c49d0]{position:absolute;top:0;left:0;right:0;height:36px;background:#f5f7fa;border-bottom:1px solid #dcdfe6;display:flex;align-items:center;padding:0 12px;gap:8px;z-index:10;box-sizing:border-box}.search-input[data-v-365c49d0]{flex:1;height:24px;padding:0 8px;border:1px solid #dcdfe6;border-radius:3px;font-size:12px;outline:none;transition:border-color .2s}.search-input[data-v-365c49d0]:focus{border-color:#409eff}.search-result-info[data-v-365c49d0]{font-size:12px;color:#606266;white-space:nowrap;min-width:60px;text-align:center}.search-nav-btn[data-v-365c49d0]{width:24px;height:24px;border:1px solid #dcdfe6;border-radius:3px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#606266;transition:all .2s}.search-nav-btn[data-v-365c49d0]:hover:not(:disabled){border-color:#409eff;color:#409eff}.search-nav-btn[data-v-365c49d0]:disabled{cursor:not-allowed;opacity:.4}.search-close-btn[data-v-365c49d0]{width:24px;height:24px;border:1px solid #dcdfe6;border-radius:3px;background:#fff;cursor:pointer;font-size:18px;line-height:1;color:#909399;transition:all .2s;display:flex;align-items:center;justify-content:center}.search-close-btn[data-v-365c49d0]:hover{border-color:#f56c6c;color:#f56c6c}.gantt-left[data-v-365c49d0]{width:var(--8a4ac306);min-width:180px;flex-shrink:0;border-right:1px solid #dcdfe6;overflow-x:auto;overflow-y:auto;margin-top:var(--5ba84210)}.gantt-left[data-v-365c49d0]::-webkit-scrollbar{width:0;height:8px}.gantt-left[data-v-365c49d0]::-webkit-scrollbar-track{background:#f1f1f1}.gantt-left[data-v-365c49d0]::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.gantt-left[data-v-365c49d0]::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.gantt-table[data-v-365c49d0]{width:-moz-max-content;width:max-content;min-width:100%;border-collapse:separate;border-spacing:0}.gantt-table th[data-v-365c49d0],.gantt-table td[data-v-365c49d0]{box-sizing:border-box;border:none;border-bottom:1px solid #ebeef5;border-right:1px solid #ebeef5;padding:0 8px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.gantt-table th[data-v-365c49d0]:first-child,.gantt-table td[data-v-365c49d0]:first-child{border-left:1px solid #ebeef5}.header-row-1 th[data-v-365c49d0]{height:var(--header-row-h);background:#f5f7fa;position:sticky;top:0;z-index:1;border-top:1px solid #ebeef5;border-bottom-color:#dcdfe6}.header-row-2 th[data-v-365c49d0]{height:var(--header-row-h);background:#f5f7fa;font-weight:500;color:#606266;position:sticky;top:var(--header-row-h);z-index:1;border-bottom-color:#dcdfe6;padding:0}.th-content[data-v-365c49d0]{position:relative;width:100%;height:100%;display:flex;align-items:center;padding:0 8px}.th-label[data-v-365c49d0]{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.col-resizer[data-v-365c49d0]{position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;-webkit-user-select:none;-moz-user-select:none;user-select:none}.col-resizer[data-v-365c49d0]:hover{background-color:#409eff1a}.gantt-table td[data-v-365c49d0]{height:var(--data-row-h)}.gantt-spacer-row td[data-v-365c49d0]{height:0;padding:0;border:none!important}.gantt-spacer[data-v-365c49d0]{width:1px}.gantt-row[data-v-365c49d0]:has(.col-date>div){position:relative;z-index:10}.col-name[data-v-365c49d0]{max-width:none}.col-date[data-v-365c49d0]{width:auto;font-size:11px;color:#909399;text-align:center;position:relative;cursor:default}.col-date[data-v-365c49d0]:has(div){overflow:visible!important}.col-date>div[data-v-365c49d0]{position:relative;z-index:100}.col-date[data-v-365c49d0] .el-date-editor{width:100%!important}.col-date[data-v-365c49d0] .el-input__wrapper{padding:0 4px;height:26px;font-size:11px}.col-date[data-v-365c49d0] .el-picker__popper{z-index:1000!important}.expand-icon[data-v-365c49d0]{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.item-name[data-v-365c49d0]{overflow:hidden;text-overflow:ellipsis}.cell-input[data-v-365c49d0]{width:100%;height:24px;padding:0 4px;border:1px solid #409eff;border-radius:2px;font-size:12px;outline:none;box-sizing:border-box;background:#fff}.cell-input[data-v-365c49d0]:focus{border-color:#409eff;box-shadow:0 0 0 2px #409eff33}.gantt-divider[data-v-365c49d0]{width:4px;cursor:col-resize;background:#dcdfe6;flex-shrink:0}.gantt-divider[data-v-365c49d0]:hover{background:#409eff}.gantt-timeline[data-v-365c49d0]{flex:1;overflow:auto;position:relative;margin-top:var(--5ba84210)}.gantt-left[data-v-365c49d0],.gantt-timeline[data-v-365c49d0]{padding-bottom:var(--gantt-bottom-compensation, 0px)}.gantt-timeline[data-v-365c49d0]::-webkit-scrollbar{width:8px;height:8px}.gantt-timeline[data-v-365c49d0]::-webkit-scrollbar-track{background:#f1f1f1}.gantt-timeline[data-v-365c49d0]::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.gantt-timeline[data-v-365c49d0]::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.timeline-header[data-v-365c49d0]{position:sticky;top:0;z-index:2;background:#f5f7fa}.year-row[data-v-365c49d0]{display:flex;height:var(--header-row-h);border-bottom:1px solid #dcdfe6;box-sizing:border-box}.year-cell[data-v-365c49d0]{text-align:center;font-weight:500;line-height:calc(var(--header-row-h) - 1px);color:#303133;border-right:1px solid #ebeef5;flex-shrink:0;box-sizing:border-box}.month-row[data-v-365c49d0]{display:flex;height:var(--header-row-h);border-bottom:1px solid #dcdfe6;box-sizing:border-box}.month-cell[data-v-365c49d0]{text-align:center;line-height:calc(var(--header-row-h) - 1px);color:#606266;border-right:1px solid #ebeef5;flex-shrink:0;box-sizing:border-box}.timeline-body[data-v-365c49d0]{position:relative}.timeline-spacer[data-v-365c49d0]{width:100%;pointer-events:none}.grid-lines[data-v-365c49d0]{position:absolute;inset:0;pointer-events:none}.grid-line[data-v-365c49d0]{position:absolute;top:0;bottom:0;width:1px;border-left:1px dashed #e4e7ed}.bar-row[data-v-365c49d0]{height:var(--data-row-h);position:relative;border-bottom:1px solid #ebeef5;box-sizing:border-box}.gantt-bar[data-v-365c49d0]{position:absolute;top:6px;height:20px;border-radius:3px;background:#409eff;opacity:.85}.row-selected[data-v-365c49d0]{background-color:#ecf5ff!important}.gantt-row.row-selected td[data-v-365c49d0]{background-color:#ecf5ff}.gantt-milestone[data-v-365c49d0]{position:absolute;top:8px;width:14px;height:14px;background:#e6a23c;transform:rotate(45deg);margin-left:-7px}.diagram-list-tooltip[data-v-25147cf1]{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-25147cf1]{padding:0 12px}.diagram-item{&[data-v-25147cf1]{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-25147cf1]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}}.diagram-item[data-v-25147cf1]:hover{background-color:#f0f3f6}.diagram-icon[data-v-25147cf1]{width:24px;height:24px;margin-right:6px}.gantt-container[data-v-1186ebb0]{--header-row-h: 28px;--data-row-h: 32px;position:relative;display:flex;width:100%;height:100%;border:1px solid #dcdfe6;background:#fff;overflow:hidden;font-size:12px;font-family:Source Han Sans SC,Microsoft YaHei,PingFang SC,Arial,sans-serif}.gantt-left[data-v-1186ebb0]{width:100%;overflow:auto}.gantt-left.with-search-bar[data-v-1186ebb0]{margin-top:36px}.table-spacer-row td[data-v-1186ebb0]{height:0;padding:0;border:none!important}.table-spacer[data-v-1186ebb0]{width:1px}.gantt-table[data-v-1186ebb0]{border-collapse:separate;border-spacing:0;table-layout:fixed}.th-content[data-v-1186ebb0]{position:relative;display:flex;align-items:center;width:100%;height:100%;min-width:0;box-sizing:border-box}.th-content[data-v-1186ebb0]>:nth-child(1){margin-left:4px}.gantt-table th[data-v-1186ebb0],.gantt-table td[data-v-1186ebb0]{box-sizing:border-box;padding:0 8px;border:none;border-bottom:1px solid #ebeef5;border-right:1px solid #ebeef5;text-align:left;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gantt-table th[data-v-1186ebb0]:first-child,.gantt-table td[data-v-1186ebb0]:first-child{border-left:1px solid #ebeef5;width:50px;min-width:50px;max-width:50px}.header-row-2 th[data-v-1186ebb0]{position:sticky;z-index:1;height:var(--header-row-h);background:#f5f7fa;border-bottom-color:#dcdfe6;font-weight:500;color:#606266}.gantt-table td[data-v-1186ebb0]{height:var(--data-row-h)}.col-name[data-v-1186ebb0]{text-align:left}.col-td[data-v-1186ebb0]{text-align:center}.col-index[data-v-1186ebb0]{width:60px!important}.th-label[data-v-1186ebb0]{font-weight:600}.cell-text[data-v-1186ebb0]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.expand-icon[data-v-1186ebb0]{display:inline-block;margin-right:4px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.item-name[data-v-1186ebb0]{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;display:flex;align-items:center;min-width:0}.expand-icon[data-v-1186ebb0]{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;margin-right:5px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.item-index[data-v-1186ebb0]{text-align:center}.cell-input[data-v-1186ebb0]{width:100%}.cell-input[data-v-1186ebb0] .el-input__wrapper{padding:0 6px;height:24px;box-shadow:0 0 0 1px #409eff inset;border-radius:3px}.cell-select[data-v-1186ebb0]{width:100%}.cell-select[data-v-1186ebb0] .el-input__wrapper{min-height:24px;height:24px;padding:0 6px;border-radius:3px}.cell-boolean-display[data-v-1186ebb0]{overflow:visible}.cell-boolean-group[data-v-1186ebb0]{display:inline-flex;align-items:center;height:24px}.cell-boolean-group[data-v-1186ebb0] .el-radio{align-items:center;margin-right:10px;margin-bottom:0}.cell-boolean-group[data-v-1186ebb0] .el-radio:last-child{margin-right:0}.cell-boolean-group[data-v-1186ebb0] .el-radio__label{padding-left:4px}.cell-date[data-v-1186ebb0]{width:100%}.cell-date[data-v-1186ebb0] .el-input__wrapper{min-height:24px;height:24px;padding:0 6px;border-radius:3px}.cell-textarea[data-v-1186ebb0]{width:100%}.cell-textarea[data-v-1186ebb0] .el-textarea__inner{font-size:12px;line-height:18px;padding:4px 6px}.col-resizer[data-v-1186ebb0]{position:absolute;right:-8px;top:0;bottom:0;width:5px;cursor:col-resize;-webkit-user-select:none;-moz-user-select:none;user-select:none}.col-resizer[data-v-1186ebb0]:hover{background-color:#409eff1a}.row-selected[data-v-1186ebb0]{background-color:#ecf5ff!important}.gantt-row.row-selected td[data-v-1186ebb0]{background-color:#ecf5ff}.matrix-context-menu[data-v-e51e812e]{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}.matrix-context-menu[style*="display: block"][data-v-e51e812e]{animation:fadeIn-e51e812e .2s ease forwards}@keyframes fadeIn-e51e812e{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.matrix-context-menu[data-v-e51e812e]::-webkit-scrollbar{width:6px}.matrix-context-menu[data-v-e51e812e]::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:3px}.matrix-context-menu[data-v-e51e812e]::-webkit-scrollbar-track{background-color:#f5f5f5}.menu-item[data-v-e51e812e]{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-e51e812e]:hover{background-color:#f5f7fa;color:#303133}.matrix[data-v-3961ece7]{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#fff}.matrix-header[data-v-3961ece7]{padding:8px 12px;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;gap:8px}.matrix-header .matrix-header-left[data-v-3961ece7]{display:flex;align-items:center;gap:6px}.matrix-header .matrix-header-title[data-v-3961ece7]{font-weight:600;font-size:14px}.matrix-header .matrix-header-icon[data-v-3961ece7]{display:inline-flex;align-items:center;cursor:pointer;color:#606266;font-size:14px;padding:2px 4px;border:1px solid #dcdfe6;border-radius:4px}.matrix-header .matrix-header-icon .icon-grids[data-v-3961ece7]{margin-right:2px}.matrix-header .matrix-header-icon .icon-arrow[data-v-3961ece7]{font-size:10px;opacity:.8}.matrix-toolbar[data-v-3961ece7]{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #e8e8e8;flex-shrink:0}.matrix-criteria[data-v-3961ece7]{display:flex;align-items:center;gap:8px}.matrix-criteria .criteria-label[data-v-3961ece7]{font-size:12px;color:#666}.matrix-criteria .criteria-select[data-v-3961ece7]{width:120px}.matrix-criteria .find-input[data-v-3961ece7]{width:160px}.matrix-criteria .criteria-checkbox[data-v-3961ece7]{font-size:12px;color:#606266}.matrix-table-wrap[data-v-3961ece7]{flex:1;overflow:auto;padding:12px}.matrix-table[data-v-3961ece7]{border-collapse:collapse;min-width:100%;font-size:12px}.matrix-table th[data-v-3961ece7],.matrix-table td[data-v-3961ece7]{border:none;padding:6px 8px;vertical-align:middle}.matrix-table .matrix-corner[data-v-3961ece7]{min-width:140px;width:140px;background:#fff;border-right:1px solid #d0d0d0;border-bottom:1px solid #d0d0d0;vertical-align:middle}.matrix-table .matrix-corner .matrix-corner__header[data-v-3961ece7]{display:inline-flex;align-items:center;gap:6px;padding:4px 0}.matrix-table .matrix-corner .matrix-corner__icon-img[data-v-3961ece7]{width:16px;height:16px;display:block;flex-shrink:0}.matrix-table .matrix-corner .matrix-corner__icon[data-v-3961ece7]{width:18px;height:18px;border-radius:50%;background:#f0c000;color:#333;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}.matrix-table .matrix-corner .matrix-corner__name[data-v-3961ece7]{font-size:12px;color:#303133;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.matrix-table .matrix-col-header[data-v-3961ece7]{min-width:48px;text-align:left;background:#fff;font-weight:500;font-size:12px;color:#303133;vertical-align:middle;cursor:pointer}.matrix-table .matrix-col-header .matrix-col-header__inner[data-v-3961ece7]{display:inline-flex;align-items:center;gap:6px;min-height:28px}.matrix-table .matrix-col-header.matrix-col-header--parent[data-v-3961ece7]{border-bottom:1px dashed #999}.matrix-table .matrix-col-header.matrix-col-header--parent .col-expand--square[data-v-3961ece7]{width:16px;height:16px;border:1px solid #c0c4cc;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:#606266;flex-shrink:0}.matrix-table .matrix-col-header.matrix-col-header--parent .col-node-icon--folder[data-v-3961ece7]{flex-shrink:0;font-size:14px}.matrix-table .matrix-col-header .col-node-icon--img[data-v-3961ece7]{width:16px;height:16px;display:block;flex-shrink:0}.matrix-table .matrix-col-header .col-node-icon--circle[data-v-3961ece7]{width:18px;height:18px;border-radius:50%;background:#f0c000;color:#333;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}.matrix-table .matrix-col-header.matrix-col-header--leaf[data-v-3961ece7]{text-align:center;position:relative;padding-top:14px;border-bottom:1px solid #d0d0d0}.matrix-table .matrix-col-header.matrix-col-header--leaf .matrix-col-header__inner[data-v-3961ece7]{justify-content:center;margin:0 auto}.matrix-table .matrix-col-header.matrix-col-header--leaf[data-v-3961ece7]:before{content:"";position:absolute;left:50%;top:0;height:14px;width:0;border-left:1px dashed #333}.matrix-table .matrix-col-header.matrix-col-header--spanning[data-v-3961ece7]{vertical-align:bottom;text-align:center;position:relative;padding-top:14px;border-bottom:1px solid #d0d0d0}.matrix-table .matrix-col-header.matrix-col-header--spanning[data-v-3961ece7]:before{content:"";position:absolute;left:50%;top:0;height:calc(100% - 30px);width:0;border-left:1px dashed #333}.matrix-table .matrix-col-header.matrix-col-header--root-vline[data-v-3961ece7]{padding:0;border-bottom:1px solid #d0d0d0;position:relative}.matrix-table .matrix-col-header.matrix-col-header--root-vline[data-v-3961ece7]:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:0;border-left:1px dashed #333}.matrix-table .matrix-col-header .col-node-label[data-v-3961ece7]{color:#303133}.matrix-table .matrix-row-header[data-v-3961ece7]{min-width:200px;background:#fff;padding:0 10px;vertical-align:middle;border-right:1px solid #d0d0d0;cursor:pointer}.matrix-table .matrix-row-header.matrix-row-header--selected[data-v-3961ece7],.matrix-table tr.matrix-row--selected .matrix-cell[data-v-3961ece7],.matrix-table .matrix-col-header.matrix-col-header--selected[data-v-3961ece7]{background:#e6f7ff}.matrix-table .matrix-cell.matrix-cell--selected[data-v-3961ece7]{background:#bae7ff}.matrix-table .matrix-row-header .row-tree-cell[data-v-3961ece7]{position:relative;display:flex;align-items:center;min-height:28px;font-size:12px;gap:6px}.matrix-table .row-conn-vline[data-v-3961ece7]{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed #999;pointer-events:none}.matrix-table .row-conn-branch[data-v-3961ece7]{position:absolute;top:0;bottom:0;pointer-events:none}.matrix-table .row-conn-branch[data-v-3961ece7]:before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1px dashed #999}.matrix-table .row-conn-branch[data-v-3961ece7]:after{content:"";position:absolute;left:0;top:50%;right:0;border-top:1px dashed #999}.matrix-table .row-conn-branch.row-conn-branch--last[data-v-3961ece7]:before{bottom:50%}.matrix-table .row-expand[data-v-3961ece7]{width:16px;height:16px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;line-height:1}.matrix-table .row-expand.row-expand--square[data-v-3961ece7]{border:1px solid #c0c4cc;border-radius:2px;font-size:12px;color:#606266;background:#fff}.matrix-table .row-expand-placeholder[data-v-3961ece7]{width:16px;flex-shrink:0}.matrix-table .row-node-icon--folder[data-v-3961ece7]{flex-shrink:0;font-size:14px}.matrix-table .row-node-icon--img[data-v-3961ece7]{width:16px;height:16px;display:block;flex-shrink:0}.matrix-table .row-node-icon--circle[data-v-3961ece7]{width:18px;height:18px;border-radius:50%;background:#e6a23c;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}.matrix-table .row-node-label[data-v-3961ece7]{color:#303133}.matrix-table .matrix-cell[data-v-3961ece7]{min-width:48px;text-align:center;color:#303133;background:#fff;border:1px solid #d0d0d0;cursor:pointer}.matrix-table .matrix-cell.matrix-cell--has-value[data-v-3961ece7]{background:#e6f7ff}.matrix-table .matrix-cell.matrix-cell--disabled[data-v-3961ece7]{background:#f5f5f5;color:#c0c4cc;cursor:not-allowed}.matrix-table .matrix-cell .cell-dependency[data-v-3961ece7]{color:#1890ff;font-weight:700;font-size:14px}.matrix-table .matrix-cell .cell-dependency.cell-arrow--up[data-v-3961ece7],.matrix-table .matrix-cell .cell-dependency.cell-arrow--down[data-v-3961ece7]{font-size:16px;font-weight:700}.matrix-table .matrix-cell .cell-value[data-v-3961ece7]{font-weight:500}.graph-view[data-v-9074f03d]{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-9074f03d]{position:absolute;inset:10px 0 10px 10px;overflow:auto;touch-action:none}.shapes-container[data-v-9074f03d]{position:relative;width:100%;height:100%;min-height:600px;transform-origin:0 0;transform:scale(var(--df80ced4))}.shapes-container[data-v-9074f03d]>*{position:absolute;will-change:transform}.zoom-level[data-v-9074f03d]{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-9074f03d]{position:absolute;top:0;left:0;pointer-events:none;z-index:998}
|
|
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-1e65a7fa]{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-1e65a7fa]{animation:fadeIn-1e65a7fa .2s ease forwards}@keyframes fadeIn-1e65a7fa{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu[data-v-1e65a7fa]::-webkit-scrollbar{width:6px}.context-menu[data-v-1e65a7fa]::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:3px}.context-menu[data-v-1e65a7fa]::-webkit-scrollbar-track{background-color:#f5f5f5}.menu-item[data-v-1e65a7fa]{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-1e65a7fa]:hover{background-color:#f5f7fa;color:#303133}.menu-disabled[data-v-1e65a7fa]{color:#c0c4cc!important;cursor:not-allowed!important;pointer-events:none}.menu-disabled[data-v-1e65a7fa]:hover{background-color:transparent!important}.menu-disabled img[data-v-1e65a7fa]{opacity:.5}.context-menu[style*="--edge-hint: left"][data-v-1e65a7fa]{border-top-left-radius:0}.context-menu[style*="--edge-hint: right"][data-v-1e65a7fa]{border-top-right-radius:0}.context-menu[style*="--edge-hint: top"][data-v-1e65a7fa]{border-top-left-radius:0;border-top-right-radius:0}.context-menu[style*="--edge-hint: bottom"][data-v-1e65a7fa]{border-bottom-left-radius:0;border-bottom-right-radius:0}.display-tooltip[data-v-1e65a7fa]{background-color:#fff;border:1px solid #ebeef5;border-radius:6px;box-shadow:0 2px 12px #0000001a;padding:6px 0;min-width:120px;animation:tooltipFadeIn-1e65a7fa .2s ease forwards}.tooltip-content[data-v-1e65a7fa]{overflow:hidden}.tooltip-item[data-v-1e65a7fa]{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-1e65a7fa]:hover{background-color:#f5f7fa;color:#303133}.tooltip-item span[data-v-1e65a7fa]{display:block}@keyframes tooltipFadeIn-1e65a7fa{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-c84fcc1b]{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;transform:scale(var(--6fce269e));pointer-events:all;z-index:999}.hover-container-outline[data-v-c84fcc1b]{position:absolute;pointer-events:none;padding:6px;top:6px}.hover-container-outline-svg[data-v-c84fcc1b]{position:absolute;pointer-events:none}.hover-container-outline-svg .outline-path[data-v-c84fcc1b]{fill:transparent;stroke-width:2px;stroke-linejoin:round}.hover-container-outline.is-valid[data-v-c84fcc1b]{border:2px solid #0000ff}.hover-container-outline-svg.is-valid .outline-path[data-v-c84fcc1b]{stroke:#00f}.hover-container-outline.is-invalid[data-v-c84fcc1b]{border:2px solid #f1eded;background:rgba(240,237,237,.842)}.hover-container-outline-svg.is-invalid .outline-path[data-v-c84fcc1b]{stroke:#f1eded;fill:#f0eded59}.resize-ghost[data-v-c84fcc1b]{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-c84fcc1b]{position:absolute;pointer-events:none;z-index:1000}.connect-dot-direct[data-v-c84fcc1b],.connect-dot-target[data-v-c84fcc1b]{width:8px;height:8px;background-color:#000;border-radius:50%;border:1px solid #fff;box-shadow:0 0 4px #0000004d}.connection-line[data-v-c84fcc1b]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}.highlight-overlay[data-v-c84fcc1b]{position:absolute;pointer-events:none;box-sizing:border-box;z-index:1001;border-radius:2px}.highlight-overlay-svg[data-v-c84fcc1b]{position:absolute;pointer-events:none}.highlight-overlay-svg .outline-path[data-v-c84fcc1b]{fill:transparent;stroke-width:3px;stroke-linejoin:round}.highlight-overlay.blue[data-v-c84fcc1b]{border:3px solid #1890ff}.highlight-overlay-svg.blue .outline-path[data-v-c84fcc1b]{stroke:#1890ff}.highlight-overlay.red[data-v-c84fcc1b]{border:3px solid #f56c6c}.highlight-overlay-svg.red .outline-path[data-v-c84fcc1b]{stroke:#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-d0030e67]{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-d0030e67]{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-49b887dd]{display:inline-block;position:relative;overflow:visible;box-sizing:content-box}[data-v-49b887dd] .name-text-svg{text-align:left}[data-v-49b887dd] .shape-name-svg{text-align:center}[data-v-49b887dd] .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-49b887dd] .content-item{margin-bottom:4px;word-break:break-word;white-space:normal;overflow:visible;width:100%;box-sizing:border-box}[data-v-49b887dd] .content-item:last-child{margin-bottom:0}.edge-component[data-v-c885b93d]{position:absolute;pointer-events:all;cursor:pointer}.edge-svg[data-v-c885b93d]{width:100%;height:100%;overflow:visible}.edge-svg polyline[data-v-c885b93d]{pointer-events:all;stroke-linecap:round;stroke-linejoin:round}.edge-svg circle[data-v-c885b93d]{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}.gantt-context-menu[data-v-4efbe149]{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}.gantt-context-menu[style*="display: block"][data-v-4efbe149]{animation:fadeIn-4efbe149 .2s ease forwards}@keyframes fadeIn-4efbe149{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.gantt-context-menu[data-v-4efbe149]::-webkit-scrollbar{width:6px}.gantt-context-menu[data-v-4efbe149]::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:3px}.gantt-context-menu[data-v-4efbe149]::-webkit-scrollbar-track{background-color:#f5f5f5}.menu-item[data-v-4efbe149]{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-4efbe149]:hover:not(.menu-disabled){background-color:#f5f7fa;color:#303133}.menu-disabled[data-v-4efbe149]{color:#c0c4cc!important;cursor:not-allowed!important;pointer-events:none}.menu-disabled[data-v-4efbe149]:hover{background-color:transparent!important}.menu-disabled img[data-v-4efbe149]{opacity:.5}.gantt-container[data-v-365c49d0]{--header-row-h: 28px;--data-row-h: 32px;display:flex;box-sizing:border-box;border:1px solid #dcdfe6;background:#fff;overflow:hidden;font-size:12px;font-family:Source Han Sans SC,Microsoft YaHei,PingFang SC,Arial,sans-serif}.gantt-search-bar[data-v-365c49d0]{position:absolute;top:0;left:0;right:0;height:36px;background:#f5f7fa;border-bottom:1px solid #dcdfe6;display:flex;align-items:center;padding:0 12px;gap:8px;z-index:10;box-sizing:border-box}.search-input[data-v-365c49d0]{flex:1;height:24px;padding:0 8px;border:1px solid #dcdfe6;border-radius:3px;font-size:12px;outline:none;transition:border-color .2s}.search-input[data-v-365c49d0]:focus{border-color:#409eff}.search-result-info[data-v-365c49d0]{font-size:12px;color:#606266;white-space:nowrap;min-width:60px;text-align:center}.search-nav-btn[data-v-365c49d0]{width:24px;height:24px;border:1px solid #dcdfe6;border-radius:3px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#606266;transition:all .2s}.search-nav-btn[data-v-365c49d0]:hover:not(:disabled){border-color:#409eff;color:#409eff}.search-nav-btn[data-v-365c49d0]:disabled{cursor:not-allowed;opacity:.4}.search-close-btn[data-v-365c49d0]{width:24px;height:24px;border:1px solid #dcdfe6;border-radius:3px;background:#fff;cursor:pointer;font-size:18px;line-height:1;color:#909399;transition:all .2s;display:flex;align-items:center;justify-content:center}.search-close-btn[data-v-365c49d0]:hover{border-color:#f56c6c;color:#f56c6c}.gantt-left[data-v-365c49d0]{width:var(--8a4ac306);min-width:180px;flex-shrink:0;border-right:1px solid #dcdfe6;overflow-x:auto;overflow-y:auto;margin-top:var(--5ba84210)}.gantt-left[data-v-365c49d0]::-webkit-scrollbar{width:0;height:8px}.gantt-left[data-v-365c49d0]::-webkit-scrollbar-track{background:#f1f1f1}.gantt-left[data-v-365c49d0]::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.gantt-left[data-v-365c49d0]::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.gantt-table[data-v-365c49d0]{width:-moz-max-content;width:max-content;min-width:100%;border-collapse:separate;border-spacing:0}.gantt-table th[data-v-365c49d0],.gantt-table td[data-v-365c49d0]{box-sizing:border-box;border:none;border-bottom:1px solid #ebeef5;border-right:1px solid #ebeef5;padding:0 8px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.gantt-table th[data-v-365c49d0]:first-child,.gantt-table td[data-v-365c49d0]:first-child{border-left:1px solid #ebeef5}.header-row-1 th[data-v-365c49d0]{height:var(--header-row-h);background:#f5f7fa;position:sticky;top:0;z-index:1;border-top:1px solid #ebeef5;border-bottom-color:#dcdfe6}.header-row-2 th[data-v-365c49d0]{height:var(--header-row-h);background:#f5f7fa;font-weight:500;color:#606266;position:sticky;top:var(--header-row-h);z-index:1;border-bottom-color:#dcdfe6;padding:0}.th-content[data-v-365c49d0]{position:relative;width:100%;height:100%;display:flex;align-items:center;padding:0 8px}.th-label[data-v-365c49d0]{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.col-resizer[data-v-365c49d0]{position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;-webkit-user-select:none;-moz-user-select:none;user-select:none}.col-resizer[data-v-365c49d0]:hover{background-color:#409eff1a}.gantt-table td[data-v-365c49d0]{height:var(--data-row-h)}.gantt-spacer-row td[data-v-365c49d0]{height:0;padding:0;border:none!important}.gantt-spacer[data-v-365c49d0]{width:1px}.gantt-row[data-v-365c49d0]:has(.col-date>div){position:relative;z-index:10}.col-name[data-v-365c49d0]{max-width:none}.col-date[data-v-365c49d0]{width:auto;font-size:11px;color:#909399;text-align:center;position:relative;cursor:default}.col-date[data-v-365c49d0]:has(div){overflow:visible!important}.col-date>div[data-v-365c49d0]{position:relative;z-index:100}.col-date[data-v-365c49d0] .el-date-editor{width:100%!important}.col-date[data-v-365c49d0] .el-input__wrapper{padding:0 4px;height:26px;font-size:11px}.col-date[data-v-365c49d0] .el-picker__popper{z-index:1000!important}.expand-icon[data-v-365c49d0]{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.item-name[data-v-365c49d0]{overflow:hidden;text-overflow:ellipsis}.cell-input[data-v-365c49d0]{width:100%;height:24px;padding:0 4px;border:1px solid #409eff;border-radius:2px;font-size:12px;outline:none;box-sizing:border-box;background:#fff}.cell-input[data-v-365c49d0]:focus{border-color:#409eff;box-shadow:0 0 0 2px #409eff33}.gantt-divider[data-v-365c49d0]{width:4px;cursor:col-resize;background:#dcdfe6;flex-shrink:0}.gantt-divider[data-v-365c49d0]:hover{background:#409eff}.gantt-timeline[data-v-365c49d0]{flex:1;overflow:auto;position:relative;margin-top:var(--5ba84210)}.gantt-left[data-v-365c49d0],.gantt-timeline[data-v-365c49d0]{padding-bottom:var(--gantt-bottom-compensation, 0px)}.gantt-timeline[data-v-365c49d0]::-webkit-scrollbar{width:8px;height:8px}.gantt-timeline[data-v-365c49d0]::-webkit-scrollbar-track{background:#f1f1f1}.gantt-timeline[data-v-365c49d0]::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.gantt-timeline[data-v-365c49d0]::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.timeline-header[data-v-365c49d0]{position:sticky;top:0;z-index:2;background:#f5f7fa}.year-row[data-v-365c49d0]{display:flex;height:var(--header-row-h);border-bottom:1px solid #dcdfe6;box-sizing:border-box}.year-cell[data-v-365c49d0]{text-align:center;font-weight:500;line-height:calc(var(--header-row-h) - 1px);color:#303133;border-right:1px solid #ebeef5;flex-shrink:0;box-sizing:border-box}.month-row[data-v-365c49d0]{display:flex;height:var(--header-row-h);border-bottom:1px solid #dcdfe6;box-sizing:border-box}.month-cell[data-v-365c49d0]{text-align:center;line-height:calc(var(--header-row-h) - 1px);color:#606266;border-right:1px solid #ebeef5;flex-shrink:0;box-sizing:border-box}.timeline-body[data-v-365c49d0]{position:relative}.timeline-spacer[data-v-365c49d0]{width:100%;pointer-events:none}.grid-lines[data-v-365c49d0]{position:absolute;inset:0;pointer-events:none}.grid-line[data-v-365c49d0]{position:absolute;top:0;bottom:0;width:1px;border-left:1px dashed #e4e7ed}.bar-row[data-v-365c49d0]{height:var(--data-row-h);position:relative;border-bottom:1px solid #ebeef5;box-sizing:border-box}.gantt-bar[data-v-365c49d0]{position:absolute;top:6px;height:20px;border-radius:3px;background:#409eff;opacity:.85}.row-selected[data-v-365c49d0]{background-color:#ecf5ff!important}.gantt-row.row-selected td[data-v-365c49d0]{background-color:#ecf5ff}.gantt-milestone[data-v-365c49d0]{position:absolute;top:8px;width:14px;height:14px;background:#e6a23c;transform:rotate(45deg);margin-left:-7px}.diagram-list-tooltip[data-v-25147cf1]{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-25147cf1]{padding:0 12px}.diagram-item{&[data-v-25147cf1]{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-25147cf1]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}}.diagram-item[data-v-25147cf1]:hover{background-color:#f0f3f6}.diagram-icon[data-v-25147cf1]{width:24px;height:24px;margin-right:6px}.gantt-container[data-v-1186ebb0]{--header-row-h: 28px;--data-row-h: 32px;position:relative;display:flex;width:100%;height:100%;border:1px solid #dcdfe6;background:#fff;overflow:hidden;font-size:12px;font-family:Source Han Sans SC,Microsoft YaHei,PingFang SC,Arial,sans-serif}.gantt-left[data-v-1186ebb0]{width:100%;overflow:auto}.gantt-left.with-search-bar[data-v-1186ebb0]{margin-top:36px}.table-spacer-row td[data-v-1186ebb0]{height:0;padding:0;border:none!important}.table-spacer[data-v-1186ebb0]{width:1px}.gantt-table[data-v-1186ebb0]{border-collapse:separate;border-spacing:0;table-layout:fixed}.th-content[data-v-1186ebb0]{position:relative;display:flex;align-items:center;width:100%;height:100%;min-width:0;box-sizing:border-box}.th-content[data-v-1186ebb0]>:nth-child(1){margin-left:4px}.gantt-table th[data-v-1186ebb0],.gantt-table td[data-v-1186ebb0]{box-sizing:border-box;padding:0 8px;border:none;border-bottom:1px solid #ebeef5;border-right:1px solid #ebeef5;text-align:left;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gantt-table th[data-v-1186ebb0]:first-child,.gantt-table td[data-v-1186ebb0]:first-child{border-left:1px solid #ebeef5;width:50px;min-width:50px;max-width:50px}.header-row-2 th[data-v-1186ebb0]{position:sticky;z-index:1;height:var(--header-row-h);background:#f5f7fa;border-bottom-color:#dcdfe6;font-weight:500;color:#606266}.gantt-table td[data-v-1186ebb0]{height:var(--data-row-h)}.col-name[data-v-1186ebb0]{text-align:left}.col-td[data-v-1186ebb0]{text-align:center}.col-index[data-v-1186ebb0]{width:60px!important}.th-label[data-v-1186ebb0]{font-weight:600}.cell-text[data-v-1186ebb0]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.expand-icon[data-v-1186ebb0]{display:inline-block;margin-right:4px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.item-name[data-v-1186ebb0]{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;display:flex;align-items:center;min-width:0}.expand-icon[data-v-1186ebb0]{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;margin-right:5px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.item-index[data-v-1186ebb0]{text-align:center}.cell-input[data-v-1186ebb0]{width:100%}.cell-input[data-v-1186ebb0] .el-input__wrapper{padding:0 6px;height:24px;box-shadow:0 0 0 1px #409eff inset;border-radius:3px}.cell-select[data-v-1186ebb0]{width:100%}.cell-select[data-v-1186ebb0] .el-input__wrapper{min-height:24px;height:24px;padding:0 6px;border-radius:3px}.cell-boolean-display[data-v-1186ebb0]{overflow:visible}.cell-boolean-group[data-v-1186ebb0]{display:inline-flex;align-items:center;height:24px}.cell-boolean-group[data-v-1186ebb0] .el-radio{align-items:center;margin-right:10px;margin-bottom:0}.cell-boolean-group[data-v-1186ebb0] .el-radio:last-child{margin-right:0}.cell-boolean-group[data-v-1186ebb0] .el-radio__label{padding-left:4px}.cell-date[data-v-1186ebb0]{width:100%}.cell-date[data-v-1186ebb0] .el-input__wrapper{min-height:24px;height:24px;padding:0 6px;border-radius:3px}.cell-textarea[data-v-1186ebb0]{width:100%}.cell-textarea[data-v-1186ebb0] .el-textarea__inner{font-size:12px;line-height:18px;padding:4px 6px}.col-resizer[data-v-1186ebb0]{position:absolute;right:-8px;top:0;bottom:0;width:5px;cursor:col-resize;-webkit-user-select:none;-moz-user-select:none;user-select:none}.col-resizer[data-v-1186ebb0]:hover{background-color:#409eff1a}.row-selected[data-v-1186ebb0]{background-color:#ecf5ff!important}.gantt-row.row-selected td[data-v-1186ebb0]{background-color:#ecf5ff}.matrix-context-menu[data-v-e51e812e]{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}.matrix-context-menu[style*="display: block"][data-v-e51e812e]{animation:fadeIn-e51e812e .2s ease forwards}@keyframes fadeIn-e51e812e{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.matrix-context-menu[data-v-e51e812e]::-webkit-scrollbar{width:6px}.matrix-context-menu[data-v-e51e812e]::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:3px}.matrix-context-menu[data-v-e51e812e]::-webkit-scrollbar-track{background-color:#f5f5f5}.menu-item[data-v-e51e812e]{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-e51e812e]:hover{background-color:#f5f7fa;color:#303133}.matrix[data-v-72ccb14e]{width:100%;height:100%;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#fff}.matrix-header[data-v-72ccb14e]{padding:8px 12px;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;gap:8px}.matrix-header .matrix-header-left[data-v-72ccb14e]{display:flex;align-items:center;gap:6px}.matrix-header .matrix-header-title[data-v-72ccb14e]{font-weight:600;font-size:14px}.matrix-header .matrix-header-icon[data-v-72ccb14e]{display:inline-flex;align-items:center;cursor:pointer;color:#606266;font-size:14px;padding:2px 4px;border:1px solid #dcdfe6;border-radius:4px}.matrix-header .matrix-header-icon .icon-grids[data-v-72ccb14e]{margin-right:2px}.matrix-header .matrix-header-icon .icon-arrow[data-v-72ccb14e]{font-size:10px;opacity:.8}.matrix-toolbar[data-v-72ccb14e]{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #e8e8e8;flex-shrink:0}.matrix-criteria[data-v-72ccb14e]{display:flex;align-items:center;gap:8px}.matrix-criteria .criteria-label[data-v-72ccb14e]{font-size:12px;color:#666}.matrix-criteria .criteria-select[data-v-72ccb14e]{width:120px}.matrix-criteria .find-input[data-v-72ccb14e]{width:160px}.matrix-criteria .criteria-checkbox[data-v-72ccb14e]{font-size:12px;color:#606266}.matrix-table-wrap[data-v-72ccb14e]{flex:0 0 auto;width:100%;min-width:0;overflow-x:auto;overflow-y:auto;padding:12px;box-sizing:border-box}.matrix-table-scroll[data-v-72ccb14e]{display:inline-block;min-width:100%;vertical-align:top}.matrix-table[data-v-72ccb14e]{border-collapse:collapse;width:-moz-max-content;width:max-content;min-width:100%;font-size:12px}.matrix-table th[data-v-72ccb14e],.matrix-table td[data-v-72ccb14e]{border:none;padding:6px 8px;vertical-align:middle}.matrix-table .matrix-corner[data-v-72ccb14e]{min-width:140px;width:140px;background:#fff;border-right:1px solid #d0d0d0;border-bottom:1px solid #d0d0d0;vertical-align:middle}.matrix-table .matrix-corner .matrix-corner__header[data-v-72ccb14e]{display:inline-flex;align-items:center;gap:6px;padding:4px 0}.matrix-table .matrix-corner .matrix-corner__icon-img[data-v-72ccb14e]{width:16px;height:16px;display:block;flex-shrink:0}.matrix-table .matrix-corner .matrix-corner__icon[data-v-72ccb14e]{width:18px;height:18px;border-radius:50%;background:#f0c000;color:#333;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}.matrix-table .matrix-corner .matrix-corner__name[data-v-72ccb14e]{font-size:12px;color:#303133;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.matrix-table .matrix-col-header[data-v-72ccb14e]{min-width:48px;text-align:left;background:#fff;font-weight:500;font-size:12px;color:#303133;vertical-align:middle;cursor:pointer}.matrix-table .matrix-col-header .matrix-col-header__inner[data-v-72ccb14e]{display:inline-flex;align-items:center;gap:6px;min-height:28px}.matrix-table .matrix-col-header.matrix-col-header--parent[data-v-72ccb14e]{border-bottom:1px dashed #999}.matrix-table .matrix-col-header.matrix-col-header--parent .col-expand--square[data-v-72ccb14e]{width:16px;height:16px;border:1px solid #c0c4cc;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:#606266;flex-shrink:0}.matrix-table .matrix-col-header.matrix-col-header--parent .col-node-icon--folder[data-v-72ccb14e]{flex-shrink:0;font-size:14px}.matrix-table .matrix-col-header .col-node-icon--img[data-v-72ccb14e]{width:16px;height:16px;display:block;flex-shrink:0}.matrix-table .matrix-col-header .col-node-icon--circle[data-v-72ccb14e]{width:18px;height:18px;border-radius:50%;background:#f0c000;color:#333;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}.matrix-table .matrix-col-header.matrix-col-header--leaf[data-v-72ccb14e]{text-align:center;position:relative;padding-top:14px;border-bottom:1px solid #d0d0d0}.matrix-table .matrix-col-header.matrix-col-header--leaf .matrix-col-header__inner[data-v-72ccb14e]{justify-content:center;margin:0 auto}.matrix-table .matrix-col-header.matrix-col-header--leaf[data-v-72ccb14e]:before{content:"";position:absolute;left:50%;top:0;height:14px;width:0;border-left:1px dashed #333}.matrix-table .matrix-col-header.matrix-col-header--spanning[data-v-72ccb14e]{vertical-align:bottom;text-align:center;position:relative;padding-top:14px;border-bottom:1px solid #d0d0d0}.matrix-table .matrix-col-header.matrix-col-header--spanning[data-v-72ccb14e]:before{content:"";position:absolute;left:50%;top:0;height:calc(100% - 30px);width:0;border-left:1px dashed #333}.matrix-table .matrix-col-header.matrix-col-header--root-vline[data-v-72ccb14e]{padding:0;border-bottom:1px solid #d0d0d0;position:relative}.matrix-table .matrix-col-header.matrix-col-header--root-vline[data-v-72ccb14e]:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:0;border-left:1px dashed #333}.matrix-table .matrix-col-header .col-node-label[data-v-72ccb14e]{color:#303133}.matrix-table .matrix-row-header[data-v-72ccb14e]{min-width:200px;background:#fff;padding:0 10px;vertical-align:middle;border-right:1px solid #d0d0d0;cursor:pointer}.matrix-table .matrix-row-header.matrix-row-header--selected[data-v-72ccb14e],.matrix-table tr.matrix-row--selected .matrix-cell[data-v-72ccb14e],.matrix-table .matrix-col-header.matrix-col-header--selected[data-v-72ccb14e]{background:#e6f7ff}.matrix-table .matrix-cell.matrix-cell--selected[data-v-72ccb14e]{background:#bae7ff}.matrix-table .matrix-row-header .row-tree-cell[data-v-72ccb14e]{position:relative;display:flex;align-items:center;min-height:28px;font-size:12px;gap:6px}.matrix-table .row-conn-vline[data-v-72ccb14e]{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed #999;pointer-events:none}.matrix-table .row-conn-branch[data-v-72ccb14e]{position:absolute;top:0;bottom:0;pointer-events:none}.matrix-table .row-conn-branch[data-v-72ccb14e]:before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1px dashed #999}.matrix-table .row-conn-branch[data-v-72ccb14e]:after{content:"";position:absolute;left:0;top:50%;right:0;border-top:1px dashed #999}.matrix-table .row-conn-branch.row-conn-branch--last[data-v-72ccb14e]:before{bottom:50%}.matrix-table .row-expand[data-v-72ccb14e]{width:16px;height:16px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;line-height:1}.matrix-table .row-expand.row-expand--square[data-v-72ccb14e]{border:1px solid #c0c4cc;border-radius:2px;font-size:12px;color:#606266;background:#fff}.matrix-table .row-expand-placeholder[data-v-72ccb14e]{width:16px;flex-shrink:0}.matrix-table .row-node-icon--folder[data-v-72ccb14e]{flex-shrink:0;font-size:14px}.matrix-table .row-node-icon--img[data-v-72ccb14e]{width:16px;height:16px;display:block;flex-shrink:0}.matrix-table .row-node-icon--circle[data-v-72ccb14e]{width:18px;height:18px;border-radius:50%;background:#e6a23c;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}.matrix-table .row-node-label[data-v-72ccb14e]{color:#303133}.matrix-table .matrix-cell[data-v-72ccb14e]{min-width:48px;text-align:center;color:#303133;background:#fff;border:1px solid #d0d0d0;cursor:pointer}.matrix-table .matrix-cell.matrix-cell--has-value[data-v-72ccb14e]{background:#e6f7ff}.matrix-table .matrix-cell.matrix-cell--disabled[data-v-72ccb14e]{background:#f5f5f5;color:#c0c4cc;cursor:not-allowed}.matrix-table .matrix-cell .cell-dependency[data-v-72ccb14e]{color:#1890ff;font-weight:700;font-size:14px}.matrix-table .matrix-cell .cell-dependency.cell-arrow--up[data-v-72ccb14e],.matrix-table .matrix-cell .cell-dependency.cell-arrow--down[data-v-72ccb14e]{font-size:16px;font-weight:700}.matrix-table .matrix-cell .cell-value[data-v-72ccb14e]{font-weight:500}.graph-view[data-v-72e2001d]{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-72e2001d]{position:absolute;inset:10px 0 10px 10px;overflow:auto;touch-action:none}.shapes-container[data-v-72e2001d]{position:relative;width:100%;height:100%;min-height:600px;transform-origin:0 0;transform:scale(var(--969996bc))}.shapes-container[data-v-72e2001d]>*{position:absolute;will-change:transform}.zoom-level[data-v-72e2001d]{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-72e2001d]{position:absolute;top:0;left:0;transform-origin:0 0;transform:scale(var(--969996bc));pointer-events:none;z-index:998}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mx-sose-front/mx-sose-graph",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "A Vue3 graph visualization plugin library",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -79,6 +79,7 @@
|
|
|
79
79
|
"node": ">=16.0.0"
|
|
80
80
|
},
|
|
81
81
|
"dependencies": {
|
|
82
|
+
"elkjs": "^0.9.3",
|
|
82
83
|
"lodash": "^4.17.21"
|
|
83
84
|
}
|
|
84
85
|
}
|
|
@@ -107,7 +107,6 @@ import NameEditor from "./NameEditor/NameEditor.vue";
|
|
|
107
107
|
// 工具:几何/命中/样式/拖拽
|
|
108
108
|
import {
|
|
109
109
|
toLocalPoint,
|
|
110
|
-
inBounds,
|
|
111
110
|
getBounds,
|
|
112
111
|
getDiagramRect,
|
|
113
112
|
rectFromPoints,
|
|
@@ -118,11 +117,7 @@ import {
|
|
|
118
117
|
isInsideCanvasClient,
|
|
119
118
|
} from "../utils/geom";
|
|
120
119
|
import { pickTarget } from "../utils/hittest";
|
|
121
|
-
import {
|
|
122
|
-
actionButtonsStyle,
|
|
123
|
-
getMarqueeStyle,
|
|
124
|
-
getLayerStyle,
|
|
125
|
-
} from "../utils/diagram";
|
|
120
|
+
import { actionButtonsStyle, getMarqueeStyle } from "../utils/diagram";
|
|
126
121
|
import { withDrag } from "../utils/dom";
|
|
127
122
|
import { checkNestViaFront } from "../utils/policy";
|
|
128
123
|
import { getShapeComponent, getShapeStyle } from "../render/shape-renderer";
|
|
@@ -143,6 +138,7 @@ import { useNameEdit } from "../hooks/useNameEdit";
|
|
|
143
138
|
import { guardOperate } from "../utils/license-guard";
|
|
144
139
|
import { useResize } from "../hooks/useResize";
|
|
145
140
|
import { useHighlight, type IHighlightUtils } from "../hooks/useHighlight";
|
|
141
|
+
import { useConnectionPreview } from "../hooks/useConnectionPreview";
|
|
146
142
|
import { createRAFThrottle, createRAFDebounce } from "../utils/rafThrottle";
|
|
147
143
|
import {
|
|
148
144
|
buildPackageOutlineOverlay,
|
|
@@ -312,14 +308,6 @@ const marqueeAnchor = ref<{ x: number; y: number } | null>(null);
|
|
|
312
308
|
// 是否多选
|
|
313
309
|
const isMultiSelected = computed(() => graphStore.selectedIds.length > 1);
|
|
314
310
|
|
|
315
|
-
// 连接层相关状态
|
|
316
|
-
const mousePosition = ref({ x: 0, y: 0 });
|
|
317
|
-
const showLine = ref(false);
|
|
318
|
-
const currentConnectPoint = ref({ x: 0, y: 0 });
|
|
319
|
-
const isConnecting = ref(false); // 是否正在连接状态
|
|
320
|
-
const targetConnectPoint = ref({ x: 0, y: 0 }); // 目标连接点
|
|
321
|
-
const targetShape = ref<Shape | null>(null); // 目标图形
|
|
322
|
-
|
|
323
311
|
// 高亮相关 - 使用 Composable
|
|
324
312
|
const {
|
|
325
313
|
overlayBounds: highlightOverlayBounds,
|
|
@@ -336,12 +324,42 @@ const highlightUtils: IHighlightUtils = {
|
|
|
336
324
|
clearHighlightTimeout,
|
|
337
325
|
};
|
|
338
326
|
|
|
339
|
-
// 保持兼容性:highlightedShape 计算属性
|
|
340
327
|
const highlightedShape = computed(() => {
|
|
341
328
|
if (!highlightedShapeId.value) return null;
|
|
342
329
|
return graphStore.shapeMap.get(highlightedShapeId.value) ?? null;
|
|
343
330
|
});
|
|
344
331
|
|
|
332
|
+
const pendingActionButton = ref(false);
|
|
333
|
+
|
|
334
|
+
const {
|
|
335
|
+
mousePosition,
|
|
336
|
+
showLine,
|
|
337
|
+
currentConnectPoint,
|
|
338
|
+
isConnecting,
|
|
339
|
+
targetConnectPoint,
|
|
340
|
+
targetShape,
|
|
341
|
+
recordClickPoint,
|
|
342
|
+
isConnectAllowed,
|
|
343
|
+
dotStyle,
|
|
344
|
+
svgStyle,
|
|
345
|
+
linePoints,
|
|
346
|
+
layerStyle,
|
|
347
|
+
cancelConnection,
|
|
348
|
+
initializeConnectPoint,
|
|
349
|
+
getCurrentTargetModels,
|
|
350
|
+
resolveConnectTargetAtPoint,
|
|
351
|
+
handleMouseMove,
|
|
352
|
+
handleMouseLeave,
|
|
353
|
+
} = useConnectionPreview({
|
|
354
|
+
props,
|
|
355
|
+
graphStore,
|
|
356
|
+
highlightUtils,
|
|
357
|
+
connectMode,
|
|
358
|
+
layerRef,
|
|
359
|
+
highlightedShape,
|
|
360
|
+
pendingActionButton,
|
|
361
|
+
});
|
|
362
|
+
|
|
345
363
|
// 包图元使用“文件夹轮廓”高亮,其他图元继续沿用默认矩形覆盖层。
|
|
346
364
|
const isPackageShape = (shape: Shape | null | undefined) => {
|
|
347
365
|
return !!shape?.shapeKey && !!props.packages?.includes(shape.shapeKey);
|
|
@@ -375,59 +393,8 @@ const highlightPackageOutline = computed(() =>
|
|
|
375
393
|
}),
|
|
376
394
|
);
|
|
377
395
|
|
|
378
|
-
const getCurrentTargetModels = () => {
|
|
379
|
-
if (connectMode.value === "action") {
|
|
380
|
-
return (
|
|
381
|
-
props.connectShapeData?.scenarioMenus?.find(
|
|
382
|
-
(menu) => menu.code === props.connectShapeData?.shapeKey
|
|
383
|
-
)?.targetModels ?? props.connectShapeData?.targetModels
|
|
384
|
-
);
|
|
385
|
-
}
|
|
386
|
-
|
|
387
|
-
return props.connectShapeData?.targetModels;
|
|
388
|
-
};
|
|
389
|
-
|
|
390
|
-
const resolveConnectTargetAtPoint = (pt: { x: number; y: number }) => {
|
|
391
|
-
const hit = pickTarget(graphStore.shapes, pt);
|
|
392
|
-
|
|
393
|
-
if (
|
|
394
|
-
["shape", "pin"].includes(hit.kind) &&
|
|
395
|
-
hit.shape?.id &&
|
|
396
|
-
hit.shape.id !== props.connectShapeData?.sourceId
|
|
397
|
-
) {
|
|
398
|
-
return hit.shape;
|
|
399
|
-
}
|
|
400
|
-
|
|
401
|
-
const hoveredShape = highlightedShape.value;
|
|
402
|
-
if (
|
|
403
|
-
!hoveredShape?.id ||
|
|
404
|
-
hoveredShape.id === props.connectShapeData?.sourceId
|
|
405
|
-
) {
|
|
406
|
-
return null;
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
const bounds = getBounds(hoveredShape);
|
|
410
|
-
const minSide = Math.min(bounds.width, bounds.height);
|
|
411
|
-
const padding = minSide <= 30 ? 8 : minSide <= 40 ? 6 : 0;
|
|
412
|
-
|
|
413
|
-
if (
|
|
414
|
-
inBounds(pt, {
|
|
415
|
-
x: bounds.x - padding,
|
|
416
|
-
y: bounds.y - padding,
|
|
417
|
-
width: bounds.width + padding * 2,
|
|
418
|
-
height: bounds.height + padding * 2,
|
|
419
|
-
})
|
|
420
|
-
) {
|
|
421
|
-
return hoveredShape;
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
return null;
|
|
425
|
-
};
|
|
426
|
-
|
|
427
396
|
const sourceShape = ref<Shape | null>(null);
|
|
428
|
-
|
|
429
|
-
// 等待后端创建图元中,冻结连线预览
|
|
430
|
-
const pendingActionButton = ref(false);
|
|
397
|
+
// 等待后端创建图元中,冻结连线预览(pendingActionButton 见 useConnectionPreview)
|
|
431
398
|
|
|
432
399
|
// 正在交互:缩放中 或 元素拖动中
|
|
433
400
|
const isBusy = computed(
|
|
@@ -868,9 +835,6 @@ const showContextMenu = ref(false);
|
|
|
868
835
|
const contextMenuPosition = ref({ x: 0, y: 0 });
|
|
869
836
|
const contextMenuTarget = ref<Shape | null>(null);
|
|
870
837
|
|
|
871
|
-
// 是否允许连接当前高亮的图元
|
|
872
|
-
const isConnectAllowed = ref(false);
|
|
873
|
-
|
|
874
838
|
// 处理右键点击事件
|
|
875
839
|
const handleContextMenu = (event: MouseEvent) => {
|
|
876
840
|
return guardOperate(async () => {
|
|
@@ -975,206 +939,6 @@ watch(
|
|
|
975
939
|
}
|
|
976
940
|
);
|
|
977
941
|
|
|
978
|
-
// 鼠标移动事件处理 - 使用 RAF 节流优化
|
|
979
|
-
const handleMouseMove = (event: MouseEvent) => {
|
|
980
|
-
// 使用 RAF 节流,同一帧内多次调用会合并为最后一次
|
|
981
|
-
connectMouseMoveThrottle.throttle((evt: MouseEvent) => {
|
|
982
|
-
const { clientX, clientY } = evt;
|
|
983
|
-
const localPoint = toLocalPoint(evt, layerRef.value);
|
|
984
|
-
// 使用工具类检查是否在画布内
|
|
985
|
-
if (EdgeUtils.isWithinCanvas(clientX, clientY)) {
|
|
986
|
-
mousePosition.value = { x: localPoint.x, y: localPoint.y };
|
|
987
|
-
|
|
988
|
-
// 只有在连接状态下才显示线条
|
|
989
|
-
if (isConnecting.value && !pendingActionButton.value) {
|
|
990
|
-
showLine.value = true;
|
|
991
|
-
updateConnectPointToNearest(localPoint.x, localPoint.y);
|
|
992
|
-
checkHoverTarget(localPoint.x, localPoint.y);
|
|
993
|
-
}
|
|
994
|
-
} else {
|
|
995
|
-
if (isConnecting.value) {
|
|
996
|
-
showLine.value = false;
|
|
997
|
-
}
|
|
998
|
-
highlightShape(null, false); // 使用highlightShape函数取消高亮,恢复原始样式
|
|
999
|
-
}
|
|
1000
|
-
})(event);
|
|
1001
|
-
};
|
|
1002
|
-
|
|
1003
|
-
// 用于跟踪上一次的hoverShape,避免重复发射事件
|
|
1004
|
-
let lastHoverShapeId: string | null = null;
|
|
1005
|
-
|
|
1006
|
-
// 创建 RAF 节流实例用于连线时的鼠标移动
|
|
1007
|
-
const connectMouseMoveThrottle = createRAFThrottle();
|
|
1008
|
-
|
|
1009
|
-
// 用于防抖 edge-check 事件和高亮,只有鼠标停留一段时间后才触发
|
|
1010
|
-
let edgeCheckDebounceTimer: ReturnType<typeof setTimeout> | null = null;
|
|
1011
|
-
const EDGE_CHECK_DEBOUNCE_DELAY = 150; // 150ms 防抖延迟
|
|
1012
|
-
|
|
1013
|
-
const checkHoverTarget = (x: number, y: number) => {
|
|
1014
|
-
if (!props.diagramBounds) return;
|
|
1015
|
-
|
|
1016
|
-
// 使用工具类检查悬停目标
|
|
1017
|
-
const hoverShape = EdgeUtils.checkHoverTarget(
|
|
1018
|
-
x,
|
|
1019
|
-
y,
|
|
1020
|
-
graphStore.shapes,
|
|
1021
|
-
props.diagramBounds,
|
|
1022
|
-
props.connectShapeData?.sourceId
|
|
1023
|
-
);
|
|
1024
|
-
clearHighlightTimeout();
|
|
1025
|
-
|
|
1026
|
-
if (hoverShape) {
|
|
1027
|
-
// 检查连接有效性
|
|
1028
|
-
const targetModels = getCurrentTargetModels();
|
|
1029
|
-
let isAllowed = true;
|
|
1030
|
-
if (
|
|
1031
|
-
targetModels &&
|
|
1032
|
-
Array.isArray(targetModels) &&
|
|
1033
|
-
targetModels.length > 0
|
|
1034
|
-
) {
|
|
1035
|
-
const hoverShapeType = hoverShape.shapeKey || "";
|
|
1036
|
-
isAllowed = targetModels.includes(hoverShapeType);
|
|
1037
|
-
}
|
|
1038
|
-
// 检查parenShapeId是否匹配(无论hoverShape是否改变都要检查)
|
|
1039
|
-
if (props.connectShapeData?.sourceId) {
|
|
1040
|
-
const sourceShape = graphStore.shapeMap.get(
|
|
1041
|
-
props.connectShapeData.sourceId
|
|
1042
|
-
);
|
|
1043
|
-
if (
|
|
1044
|
-
sourceShape &&
|
|
1045
|
-
sourceShape.parenShapeId !== hoverShape.parenShapeId &&
|
|
1046
|
-
hoverShape.shapeType !== "pin" &&
|
|
1047
|
-
sourceShape.shapeType !== "pin"
|
|
1048
|
-
) {
|
|
1049
|
-
isAllowed = false;
|
|
1050
|
-
}
|
|
1051
|
-
}
|
|
1052
|
-
|
|
1053
|
-
// 当 hoverShape 改变时,清除之前的防抖定时器
|
|
1054
|
-
if (lastHoverShapeId !== hoverShape.id) {
|
|
1055
|
-
// 清除旧的防抖定时器
|
|
1056
|
-
if (edgeCheckDebounceTimer) {
|
|
1057
|
-
clearTimeout(edgeCheckDebounceTimer);
|
|
1058
|
-
edgeCheckDebounceTimer = null;
|
|
1059
|
-
}
|
|
1060
|
-
|
|
1061
|
-
// 立即取消之前图元的高亮(如果有)
|
|
1062
|
-
highlightShape(null, false);
|
|
1063
|
-
isConnectAllowed.value = false;
|
|
1064
|
-
|
|
1065
|
-
lastHoverShapeId = hoverShape.id;
|
|
1066
|
-
|
|
1067
|
-
// 只有当 connectShapeData 存在时才设置防抖定时器
|
|
1068
|
-
if (props.connectShapeData) {
|
|
1069
|
-
// 使用防抖:只有鼠标停留一段时间后才发射 edge-check 事件和高亮
|
|
1070
|
-
edgeCheckDebounceTimer = setTimeout(() => {
|
|
1071
|
-
// 使用更严格的优先级判断逻辑,确保只要有一个属性有实际值就使用它
|
|
1072
|
-
let sourceModelId;
|
|
1073
|
-
// 如果modelId是有效字符串或数字,使用modelId
|
|
1074
|
-
if (
|
|
1075
|
-
props.connectShapeData?.modelId &&
|
|
1076
|
-
props.connectShapeData.modelId.toString().trim() !== ""
|
|
1077
|
-
) {
|
|
1078
|
-
sourceModelId = props.connectShapeData.modelId;
|
|
1079
|
-
}
|
|
1080
|
-
// 否则,如果sourceModelId是有效字符串或数字,使用sourceModelId
|
|
1081
|
-
else if (
|
|
1082
|
-
props.connectShapeData?.sourceModelId &&
|
|
1083
|
-
props.connectShapeData.sourceModelId.toString().trim() !== ""
|
|
1084
|
-
) {
|
|
1085
|
-
sourceModelId = props.connectShapeData.sourceModelId;
|
|
1086
|
-
}
|
|
1087
|
-
// 只有当sourceModelId有值时就发射事件,并将isAllowed的值一并传递
|
|
1088
|
-
if (sourceModelId) {
|
|
1089
|
-
eventBus.emit("edge-check", {
|
|
1090
|
-
sourceModelId: sourceModelId, // 显式指定键值对,避免属性简写可能带来的混淆
|
|
1091
|
-
targetModelId: hoverShape.modelId,
|
|
1092
|
-
isAllowed: isAllowed, // 将验证结果一并发射
|
|
1093
|
-
});
|
|
1094
|
-
}
|
|
1095
|
-
|
|
1096
|
-
// 高亮目标图元 - 根据isAllowed决定高亮颜色
|
|
1097
|
-
highlightShape(hoverShape, true, isAllowed);
|
|
1098
|
-
isConnectAllowed.value = isAllowed;
|
|
1099
|
-
}, EDGE_CHECK_DEBOUNCE_DELAY);
|
|
1100
|
-
}
|
|
1101
|
-
}
|
|
1102
|
-
} else {
|
|
1103
|
-
// 如果没有悬停在目标上
|
|
1104
|
-
// 清除防抖定时器
|
|
1105
|
-
if (edgeCheckDebounceTimer) {
|
|
1106
|
-
clearTimeout(edgeCheckDebounceTimer);
|
|
1107
|
-
edgeCheckDebounceTimer = null;
|
|
1108
|
-
}
|
|
1109
|
-
// 重置lastHoverShapeId
|
|
1110
|
-
lastHoverShapeId = null;
|
|
1111
|
-
// 立即取消高亮(无需延迟,因为高亮本身已有防抖)
|
|
1112
|
-
clearHighlightTimeout();
|
|
1113
|
-
highlightShape(null, false);
|
|
1114
|
-
isConnectAllowed.value = false;
|
|
1115
|
-
}
|
|
1116
|
-
};
|
|
1117
|
-
|
|
1118
|
-
// 更新连接点到最近的点
|
|
1119
|
-
const updateConnectPointToNearest = (mouseX: number, mouseY: number) => {
|
|
1120
|
-
if (!props.connectShapeData?.sourceId || !props.diagramBounds) return;
|
|
1121
|
-
|
|
1122
|
-
const sourceShape = props.connectShapeData?.sourceId
|
|
1123
|
-
? graphStore.shapeMap.get(props.connectShapeData.sourceId)
|
|
1124
|
-
: undefined;
|
|
1125
|
-
|
|
1126
|
-
// 使用同步版本,避免 Worker 异步延迟导致连线跟不上鼠标
|
|
1127
|
-
const nearestPoint = EdgeUtils.findNearestConnectPoint(
|
|
1128
|
-
{ x: mouseX, y: mouseY },
|
|
1129
|
-
sourceShape
|
|
1130
|
-
);
|
|
1131
|
-
|
|
1132
|
-
if (
|
|
1133
|
-
nearestPoint &&
|
|
1134
|
-
nearestPoint.x !== undefined &&
|
|
1135
|
-
nearestPoint.y !== undefined
|
|
1136
|
-
) {
|
|
1137
|
-
currentConnectPoint.value = {
|
|
1138
|
-
x: nearestPoint.x,
|
|
1139
|
-
y: nearestPoint.y,
|
|
1140
|
-
};
|
|
1141
|
-
}
|
|
1142
|
-
};
|
|
1143
|
-
|
|
1144
|
-
// 监听isConnecting变化,重置连接状态
|
|
1145
|
-
watch(
|
|
1146
|
-
() => isConnecting.value,
|
|
1147
|
-
(newVal) => {
|
|
1148
|
-
if (!newVal) {
|
|
1149
|
-
// 清除防抖定时器
|
|
1150
|
-
if (edgeCheckDebounceTimer) {
|
|
1151
|
-
clearTimeout(edgeCheckDebounceTimer);
|
|
1152
|
-
edgeCheckDebounceTimer = null;
|
|
1153
|
-
}
|
|
1154
|
-
// 重置 lastHoverShapeId
|
|
1155
|
-
lastHoverShapeId = null;
|
|
1156
|
-
isConnectAllowed.value = false;
|
|
1157
|
-
highlightShape(null, false); // 取消图元高亮
|
|
1158
|
-
}
|
|
1159
|
-
}
|
|
1160
|
-
);
|
|
1161
|
-
|
|
1162
|
-
// 监听edgeCheck变化,当后端验证结果返回后更新高亮颜色
|
|
1163
|
-
watch(
|
|
1164
|
-
() => props.edgeCheck,
|
|
1165
|
-
(newEdgeCheck) => {
|
|
1166
|
-
// 只有在连接状态下且有高亮图元时才更新
|
|
1167
|
-
if (
|
|
1168
|
-
isConnecting.value &&
|
|
1169
|
-
highlightedShape.value &&
|
|
1170
|
-
newEdgeCheck !== undefined
|
|
1171
|
-
) {
|
|
1172
|
-
// 使用后端验证结果更新高亮颜色
|
|
1173
|
-
highlightShape(highlightedShape.value, true, newEdgeCheck);
|
|
1174
|
-
}
|
|
1175
|
-
}
|
|
1176
|
-
);
|
|
1177
|
-
|
|
1178
942
|
// 处理连接层点击事件
|
|
1179
943
|
const handleConnectLayerClick = (
|
|
1180
944
|
event: MouseEvent,
|
|
@@ -1312,142 +1076,6 @@ const completeConnection = async (
|
|
|
1312
1076
|
clearHighlightTimeout();
|
|
1313
1077
|
}
|
|
1314
1078
|
};
|
|
1315
|
-
// 鼠标离开事件处理
|
|
1316
|
-
const handleMouseLeave = () => {
|
|
1317
|
-
if (isConnecting.value) {
|
|
1318
|
-
showLine.value = false;
|
|
1319
|
-
}
|
|
1320
|
-
highlightShape(null, false); // 取消图元高亮
|
|
1321
|
-
clearHighlightTimeout();
|
|
1322
|
-
};
|
|
1323
|
-
|
|
1324
|
-
// 初始化连接点位置
|
|
1325
|
-
const initializeConnectPoint = () => {
|
|
1326
|
-
if (props.connectShapeData?.sourceId && props.diagramBounds) {
|
|
1327
|
-
const sourceShape = props.connectShapeData?.sourceId
|
|
1328
|
-
? graphStore.shapeMap.get(props.connectShapeData.sourceId)
|
|
1329
|
-
: undefined;
|
|
1330
|
-
|
|
1331
|
-
// 使用工具类初始化连接点,传递当前鼠标位置和diagramBounds
|
|
1332
|
-
// 这样可以确保即使是第一次连线,也能计算出图元边界上的合适连接点,而不是使用中心点
|
|
1333
|
-
const initialPoint = EdgeUtils.initializeConnectPoint(
|
|
1334
|
-
sourceShape,
|
|
1335
|
-
recordClickPoint.value, // 传递鼠标点击位置
|
|
1336
|
-
props.diagramBounds // 传递图表边界
|
|
1337
|
-
);
|
|
1338
|
-
|
|
1339
|
-
if (initialPoint && sourceShape) {
|
|
1340
|
-
// 确保sourceShape存在,防止从工具栏拖拽时错误初始化
|
|
1341
|
-
currentConnectPoint.value = initialPoint;
|
|
1342
|
-
|
|
1343
|
-
if (!isConnecting.value) {
|
|
1344
|
-
// 进入连线状态前清空选中状态
|
|
1345
|
-
graphStore.clearSelection();
|
|
1346
|
-
isConnecting.value = true;
|
|
1347
|
-
showLine.value = true;
|
|
1348
|
-
}
|
|
1349
|
-
} else {
|
|
1350
|
-
// 如果没有找到sourceShape,重置连接状态
|
|
1351
|
-
isConnecting.value = false;
|
|
1352
|
-
showLine.value = false;
|
|
1353
|
-
}
|
|
1354
|
-
}
|
|
1355
|
-
};
|
|
1356
|
-
|
|
1357
|
-
// 直接计算黑点样式 - 使用动态连接点
|
|
1358
|
-
const dotStyle = computed(() => {
|
|
1359
|
-
if (!props.connectShapeData || !props.diagramBounds) {
|
|
1360
|
-
return { display: "none" };
|
|
1361
|
-
}
|
|
1362
|
-
|
|
1363
|
-
// 使用动态连接点位置
|
|
1364
|
-
const { x, y } = currentConnectPoint.value;
|
|
1365
|
-
|
|
1366
|
-
return {
|
|
1367
|
-
position: "absolute" as const,
|
|
1368
|
-
left: `${x}px`,
|
|
1369
|
-
top: `${y}px`,
|
|
1370
|
-
width: "8px",
|
|
1371
|
-
height: "8px",
|
|
1372
|
-
pointerEvents: "none" as const,
|
|
1373
|
-
zIndex: 1001,
|
|
1374
|
-
transform: "translate(-50%, -50%)",
|
|
1375
|
-
};
|
|
1376
|
-
});
|
|
1377
|
-
|
|
1378
|
-
// SVG 样式
|
|
1379
|
-
const svgStyle = computed(() => {
|
|
1380
|
-
if (
|
|
1381
|
-
!props.connectShapeData ||
|
|
1382
|
-
!props.connectShapeData.bounds ||
|
|
1383
|
-
!props.diagramBounds
|
|
1384
|
-
) {
|
|
1385
|
-
return { display: "none" };
|
|
1386
|
-
}
|
|
1387
|
-
|
|
1388
|
-
return {
|
|
1389
|
-
position: "absolute" as const,
|
|
1390
|
-
left: "0px",
|
|
1391
|
-
top: "0px",
|
|
1392
|
-
width: "100%",
|
|
1393
|
-
height: "100%",
|
|
1394
|
-
pointerEvents: "none" as const,
|
|
1395
|
-
zIndex: 1000,
|
|
1396
|
-
};
|
|
1397
|
-
});
|
|
1398
|
-
|
|
1399
|
-
// 计算直角线路径点(增加状态有效性判断)
|
|
1400
|
-
const linePoints = computed(() => {
|
|
1401
|
-
// 新增:若未处于连线状态 / 线条未显示 / 无有效连接点,直接返回空值
|
|
1402
|
-
if (
|
|
1403
|
-
!isConnecting.value ||
|
|
1404
|
-
!showLine.value ||
|
|
1405
|
-
!props.connectShapeData ||
|
|
1406
|
-
!props.diagramBounds ||
|
|
1407
|
-
currentConnectPoint.value.x === 0 || // 排除无效默认值
|
|
1408
|
-
currentConnectPoint.value.y === 0
|
|
1409
|
-
) {
|
|
1410
|
-
return ""; // 返回空字符串,SVG 不会渲染任何线条
|
|
1411
|
-
}
|
|
1412
|
-
|
|
1413
|
-
const { x: startX, y: startY } = currentConnectPoint.value;
|
|
1414
|
-
|
|
1415
|
-
let endX, endY;
|
|
1416
|
-
// 仅在连线状态下计算终点(避免无效值)
|
|
1417
|
-
if (isConnecting.value) {
|
|
1418
|
-
endX = mousePosition.value.x;
|
|
1419
|
-
endY = mousePosition.value.y;
|
|
1420
|
-
} else if (targetConnectPoint.value) {
|
|
1421
|
-
endX = targetConnectPoint.value.x;
|
|
1422
|
-
endY = targetConnectPoint.value.y;
|
|
1423
|
-
} else {
|
|
1424
|
-
return "";
|
|
1425
|
-
}
|
|
1426
|
-
|
|
1427
|
-
// 使用工具类计算线路径
|
|
1428
|
-
return EdgeUtils.calculateLinePoints(
|
|
1429
|
-
{ x: startX, y: startY },
|
|
1430
|
-
{ x: endX, y: endY }
|
|
1431
|
-
);
|
|
1432
|
-
});
|
|
1433
|
-
|
|
1434
|
-
// 连接层样式 - 定位到 diagramBounds 位置,确保在最顶层
|
|
1435
|
-
const layerStyle = computed(() => getLayerStyle(props.diagramBounds));
|
|
1436
|
-
|
|
1437
|
-
// 取消连线的方法(完全重置所有相关状态)
|
|
1438
|
-
const cancelConnection = () => {
|
|
1439
|
-
EdgeUtils.cancelConnection(
|
|
1440
|
-
{
|
|
1441
|
-
isConnecting,
|
|
1442
|
-
currentConnectPoint,
|
|
1443
|
-
mousePosition,
|
|
1444
|
-
targetConnectPoint,
|
|
1445
|
-
targetShape,
|
|
1446
|
-
showLine,
|
|
1447
|
-
},
|
|
1448
|
-
highlightUtils
|
|
1449
|
-
);
|
|
1450
|
-
};
|
|
1451
1079
|
|
|
1452
1080
|
// 监听 connectShapeData 变化,重新初始化连接点
|
|
1453
1081
|
watch(
|