@meshmakers/octo-process-diagrams 3.5.110 → 3.5.140
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.
|
@@ -22,7 +22,7 @@ import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
|
|
|
22
22
|
import * as i3 from '@progress/kendo-angular-dialog';
|
|
23
23
|
import { DialogsModule } from '@progress/kendo-angular-dialog';
|
|
24
24
|
import { PROPERTY_KEYS_DOCKVIEW, createDockview } from 'dockview-core';
|
|
25
|
-
import { SaveAsDialogService, DataSourceBase, ListViewComponent, FetchResultBase, ConfirmationService, InputService, MM_ACTION_ICONS, RowActionsComponent, HAS_UNSAVED_CHANGES } from '@meshmakers/shared-ui';
|
|
25
|
+
import { MmDialogActionsDirective, SaveAsDialogService, DataSourceBase, ListViewComponent, FetchResultBase, ConfirmationService, InputService, MM_ACTION_ICONS, RowActionsComponent, HAS_UNSAVED_CHANGES } from '@meshmakers/shared-ui';
|
|
26
26
|
import { Router, ActivatedRoute } from '@angular/router';
|
|
27
27
|
import { NotificationService } from '@progress/kendo-angular-notification';
|
|
28
28
|
import { map, catchError } from 'rxjs/operators';
|
|
@@ -11571,11 +11571,11 @@ class BindingEditorDialogComponent {
|
|
|
11571
11571
|
</kendo-dialog-actions>
|
|
11572
11572
|
</kendo-dialog>
|
|
11573
11573
|
}
|
|
11574
|
-
`, isInline: true, styles: [".binding-editor-content{display:flex;flex-direction:column;height:100%;min-height:300px}.bindings-list{flex:1;overflow-y:auto}.list-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid #e0e0e0;margin-bottom:.5rem;font-weight:500;font-size:13px}.empty-state{padding:1.5rem;text-align:center;color:#666;background:#f9f9f9;border-radius:8px}.hint{font-size:12px;color:#999;margin-top:.5rem}.binding-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-bottom:.5rem;overflow:hidden}.binding-card.expanded{border-color:#1976d2}.binding-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem;cursor:pointer;background:#fafafa}.binding-header:hover{background:#f5f5f5}.binding-summary{display:flex;align-items:center;gap:.5rem}.target-name{font-weight:500;font-size:13px}.effect-badge{display:inline-block;padding:.125rem .5rem;background:#e8f5e9;border-radius:4px;font-size:10px;color:#2e7d32}.binding-actions{display:flex;gap:.25rem}.binding-form{padding:.75rem;border-top:1px solid #e0e0e0;display:flex;flex-direction:column;gap:.75rem}.form-row{display:flex;align-items:flex-start;gap:.5rem}.form-row label{flex:0 0 90px;font-size:11px;color:#666;padding-top:.5rem}.form-row select,.form-row input[type=text],.form-row input[type=number]{flex:1;padding:.375rem .5rem;border:1px solid #e0e0e0;border-radius:4px;font-size:12px}.form-row select:focus,.form-row input:focus{outline:none;border-color:#1976d2}.expression-row{flex-direction:column;align-items:stretch}.expression-row label{flex:none;padding-top:0;margin-bottom:.25rem}.expression-input{width:100%}.expression-input input{width:100%;font-family:Consolas,Monaco,monospace}.expression-hint{font-size:10px;color:#999;margin-top:.25rem}.expression-hint code{background:#f5f5f5;padding:.125rem .25rem;border-radius:3px;font-family:Consolas,Monaco,monospace}.expression-preview{background:#f9f9f9;border-radius:6px;padding:.75rem}.expression-preview>label{display:block;font-size:11px;color:#666;margin-bottom:.5rem}.preview-content{display:flex;align-items:center;gap:.75rem}.preview-input,.preview-output{display:flex;align-items:center;gap:.5rem;font-size:12px}.preview-input input[type=number]{width:80px;padding:.25rem .5rem;border:1px solid #e0e0e0;border-radius:4px;font-size:12px}.boolean-toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer}.boolean-toggle input[type=checkbox]{width:16px;height:16px;cursor:pointer}.boolean-label{font-family:monospace;font-size:12px;color:#333}.preview-arrow{color:#666;font-size:16px}.preview-output .output-value{font-weight:500;color:#1976d2;font-family:Consolas,Monaco,monospace}.preview-output.error .output-value{color:#d32f2f}.anchor-row{align-items:flex-start}.anchor-selector{display:flex;align-items:center;gap:.75rem}.anchor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:54px;height:54px;background:#e0e0e0;border-radius:4px;padding:2px}.anchor-point{display:flex;align-items:center;justify-content:center;background:#fff;border:none;cursor:pointer;padding:0;border-radius:2px}.anchor-point:hover{background:#e3f2fd}.anchor-point.selected{background:#1976d2}.anchor-dot{width:6px;height:6px;border-radius:50%;background:#999}.anchor-point.selected .anchor-dot{background:#fff}.anchor-point:hover .anchor-dot{background:#1976d2}.anchor-point.selected:hover .anchor-dot{background:#fff}.anchor-label{font-size:11px;color:#666}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "ngmodule", type: DropDownsModule }, { kind: "ngmodule", type: DialogsModule }, { kind: "component", type: i3.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i3.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
11574
|
+
`, isInline: true, styles: [".binding-editor-content{display:flex;flex-direction:column;height:100%;min-height:300px}.bindings-list{flex:1;overflow-y:auto}.list-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid #e0e0e0;margin-bottom:.5rem;font-weight:500;font-size:13px}.empty-state{padding:1.5rem;text-align:center;color:#666;background:#f9f9f9;border-radius:8px}.hint{font-size:12px;color:#999;margin-top:.5rem}.binding-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-bottom:.5rem;overflow:hidden}.binding-card.expanded{border-color:#1976d2}.binding-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem;cursor:pointer;background:#fafafa}.binding-header:hover{background:#f5f5f5}.binding-summary{display:flex;align-items:center;gap:.5rem}.target-name{font-weight:500;font-size:13px}.effect-badge{display:inline-block;padding:.125rem .5rem;background:#e8f5e9;border-radius:4px;font-size:10px;color:#2e7d32}.binding-actions{display:flex;gap:.25rem}.binding-form{padding:.75rem;border-top:1px solid #e0e0e0;display:flex;flex-direction:column;gap:.75rem}.form-row{display:flex;align-items:flex-start;gap:.5rem}.form-row label{flex:0 0 90px;font-size:11px;color:#666;padding-top:.5rem}.form-row select,.form-row input[type=text],.form-row input[type=number]{flex:1;padding:.375rem .5rem;border:1px solid #e0e0e0;border-radius:4px;font-size:12px}.form-row select:focus,.form-row input:focus{outline:none;border-color:#1976d2}.expression-row{flex-direction:column;align-items:stretch}.expression-row label{flex:none;padding-top:0;margin-bottom:.25rem}.expression-input{width:100%}.expression-input input{width:100%;font-family:Consolas,Monaco,monospace}.expression-hint{font-size:10px;color:#999;margin-top:.25rem}.expression-hint code{background:#f5f5f5;padding:.125rem .25rem;border-radius:3px;font-family:Consolas,Monaco,monospace}.expression-preview{background:#f9f9f9;border-radius:6px;padding:.75rem}.expression-preview>label{display:block;font-size:11px;color:#666;margin-bottom:.5rem}.preview-content{display:flex;align-items:center;gap:.75rem}.preview-input,.preview-output{display:flex;align-items:center;gap:.5rem;font-size:12px}.preview-input input[type=number]{width:80px;padding:.25rem .5rem;border:1px solid #e0e0e0;border-radius:4px;font-size:12px}.boolean-toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer}.boolean-toggle input[type=checkbox]{width:16px;height:16px;cursor:pointer}.boolean-label{font-family:monospace;font-size:12px;color:#333}.preview-arrow{color:#666;font-size:16px}.preview-output .output-value{font-weight:500;color:#1976d2;font-family:Consolas,Monaco,monospace}.preview-output.error .output-value{color:#d32f2f}.anchor-row{align-items:flex-start}.anchor-selector{display:flex;align-items:center;gap:.75rem}.anchor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:54px;height:54px;background:#e0e0e0;border-radius:4px;padding:2px}.anchor-point{display:flex;align-items:center;justify-content:center;background:#fff;border:none;cursor:pointer;padding:0;border-radius:2px}.anchor-point:hover{background:#e3f2fd}.anchor-point.selected{background:#1976d2}.anchor-dot{width:6px;height:6px;border-radius:50%;background:#999}.anchor-point.selected .anchor-dot{background:#fff}.anchor-point:hover .anchor-dot{background:#1976d2}.anchor-point.selected:hover .anchor-dot{background:#fff}.anchor-label{font-size:11px;color:#666}\n"], dependencies: [{ kind: "directive", type: MmDialogActionsDirective, selector: "kendo-dialog-actions" }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "ngmodule", type: DropDownsModule }, { kind: "ngmodule", type: DialogsModule }, { kind: "component", type: i3.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i3.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
11575
11575
|
}
|
|
11576
11576
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BindingEditorDialogComponent, decorators: [{
|
|
11577
11577
|
type: Component,
|
|
11578
|
-
args: [{ selector: 'mm-binding-editor-dialog', standalone: true, imports: [CommonModule, FormsModule, ButtonsModule, InputsModule, DropDownsModule, DialogsModule], template: `
|
|
11578
|
+
args: [{ selector: 'mm-binding-editor-dialog', standalone: true, imports: [MmDialogActionsDirective, CommonModule, FormsModule, ButtonsModule, InputsModule, DropDownsModule, DialogsModule], template: `
|
|
11579
11579
|
@if (visible()) {
|
|
11580
11580
|
<kendo-dialog title="Bindings for: {{ currentProperty()?.name }}"
|
|
11581
11581
|
[width]="550"
|
|
@@ -27539,11 +27539,12 @@ class ProcessDesignerComponent {
|
|
|
27539
27539
|
DesignerBoundsService,
|
|
27540
27540
|
DesignerAlignmentService,
|
|
27541
27541
|
DesignerAlignmentGuideService
|
|
27542
|
-
], viewQueries: [{ propertyName: "canvasContainerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "svgFileInputRef", first: true, predicate: ["svgFileInput"], descendants: true }], ngImport: i0, template: "<div class=\"process-designer\" tabindex=\"0\" data-testid=\"process-designer\">\n <!-- Toolbar -->\n <kendo-toolbar class=\"designer-toolbar\">\n @if (showSaveButtons) {\n <kendo-toolbar-buttongroup>\n <kendo-toolbar-button [svgIcon]=\"saveIcon\" (click)=\"save()\" title=\"Save (Ctrl+S)\" [disabled]=\"!hasChanges()\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"fileTxtIcon\" (click)=\"saveAs()\" title=\"Save As...\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"pencilIcon\" (click)=\"rename()\" title=\"Rename...\"></kendo-toolbar-button>\n </kendo-toolbar-buttongroup>\n <kendo-toolbar-separator></kendo-toolbar-separator>\n }\n\n <kendo-toolbar-buttongroup>\n <kendo-toolbar-button [svgIcon]=\"undoIcon\" (click)=\"undo()\" title=\"Undo (Ctrl+Z)\" [disabled]=\"!canUndo()\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"redoIcon\" (click)=\"redo()\" title=\"Redo (Ctrl+Shift+Z)\" [disabled]=\"!canRedo()\"></kendo-toolbar-button>\n </kendo-toolbar-buttongroup>\n\n <kendo-toolbar-separator></kendo-toolbar-separator>\n\n <kendo-toolbar-buttongroup>\n <kendo-toolbar-button [svgIcon]=\"arrowsNoRepeatIcon\"\n [toggleable]=\"true\"\n [selected]=\"mode() === 'select'\"\n (click)=\"setMode('select')\"\n title=\"Select tool (V)\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"handIcon\"\n [toggleable]=\"true\"\n [selected]=\"mode() === 'pan'\"\n (click)=\"setMode('pan')\"\n title=\"Pan tool (H)\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"linkIcon\"\n [toggleable]=\"true\"\n [selected]=\"mode() === 'connect'\"\n (click)=\"setMode('connect')\"\n title=\"Connect tool (C)\"></kendo-toolbar-button>\n </kendo-toolbar-buttongroup>\n\n <kendo-toolbar-separator></kendo-toolbar-separator>\n\n <kendo-toolbar-buttongroup>\n <kendo-toolbar-button [svgIcon]=\"zoomInIcon\" (click)=\"zoomIn()\" title=\"Zoom in\"></kendo-toolbar-button>\n <span class=\"zoom-level\">{{ zoomPercentage() }}%</span>\n <kendo-toolbar-button [svgIcon]=\"zoomOutIcon\" (click)=\"zoomOut()\" title=\"Zoom out\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"zoomBestFitIcon\" (click)=\"fitToView()\" title=\"Fit content to view\"></kendo-toolbar-button>\n </kendo-toolbar-buttongroup>\n\n <kendo-toolbar-separator></kendo-toolbar-separator>\n\n <kendo-toolbar-buttongroup>\n <kendo-toolbar-button [svgIcon]=\"gridIcon\"\n [toggleable]=\"true\"\n [selected]=\"showGrid()\"\n (selectedChange)=\"toggleGrid()\"\n title=\"Show/hide grid\"></kendo-toolbar-button>\n <kendo-toolbar-button text=\"\u2316\"\n [toggleable]=\"true\"\n [selected]=\"snapToGrid()\"\n (selectedChange)=\"toggleSnapToGrid()\"\n title=\"Snap to grid\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"eyeIcon\"\n [toggleable]=\"true\"\n [selected]=\"showElementNames()\"\n (selectedChange)=\"toggleElementNames()\"\n title=\"Show element names\"></kendo-toolbar-button>\n </kendo-toolbar-buttongroup>\n\n <kendo-toolbar-separator></kendo-toolbar-separator>\n\n <kendo-toolbar-button [svgIcon]=\"uploadIcon\" (click)=\"onImportSvgClick()\" title=\"Import SVG file\"></kendo-toolbar-button>\n <input #svgFileInput\n type=\"file\"\n accept=\".svg,image/svg+xml\"\n style=\"display: none\"\n (change)=\"onSvgFileSelected($event)\"/>\n\n <kendo-toolbar-spacer></kendo-toolbar-spacer>\n\n <kendo-toolbar-buttongroup>\n <kendo-toolbar-button [svgIcon]=\"groupIcon\" (click)=\"groupSelected()\" title=\"Group (Ctrl+G)\"\n [disabled]=\"!canGroup()\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"ungroupIcon\" (click)=\"ungroupSelected()\" title=\"Ungroup (Ctrl+Shift+G)\"\n [disabled]=\"!canUngroup()\"></kendo-toolbar-button>\n </kendo-toolbar-buttongroup>\n\n <kendo-toolbar-separator></kendo-toolbar-separator>\n\n <kendo-toolbar-button [svgIcon]=\"trashIcon\" (click)=\"deleteSelected()\" title=\"Delete selected\"\n [disabled]=\"!hasSelection()\"></kendo-toolbar-button>\n\n <kendo-toolbar-separator></kendo-toolbar-separator>\n\n @if (useDockview) {\n <!-- View menu for dockview panel controls -->\n <kendo-toolbar-dropdownbutton\n [svgIcon]=\"eyeIcon\"\n [data]=\"viewMenuItems()\"\n title=\"View panels\"\n (itemClick)=\"onViewMenuItemClick($event)\">\n </kendo-toolbar-dropdownbutton>\n } @else {\n <!-- Legacy panel toggle buttons -->\n <kendo-toolbar-buttongroup>\n <kendo-toolbar-button [svgIcon]=\"menuIcon\"\n [toggleable]=\"true\"\n [selected]=\"showLeftPanel()\"\n (selectedChange)=\"toggleLeftPanel()\"\n title=\"Toggle element palette (Alt+1)\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"gearsIcon\"\n [toggleable]=\"true\"\n [selected]=\"showRightPanel()\"\n (selectedChange)=\"toggleRightPanel()\"\n title=\"Toggle property inspector (Alt+2)\"></kendo-toolbar-button>\n </kendo-toolbar-buttongroup>\n }\n </kendo-toolbar>\n\n <!-- Main content area -->\n <div class=\"designer-content\" [class.dockview-enabled]=\"useDockview\"\n [style.display]=\"useDockview ? 'flex' : null\"\n [style.height]=\"useDockview ? '100%' : null\"\n [style.minHeight]=\"useDockview ? '0' : null\">\n <!-- Dockview panels container (when dockview enabled) -->\n @if (useDockview) {\n <div class=\"dockview-panels-container\"\n [style.width.px]=\"dockviewPanelWidth()\"\n [style.flex]=\"'0 0 ' + dockviewPanelWidth() + 'px'\">\n <mm-dockview\n class=\"designer-dockview\"\n [components]=\"panelComponents\"\n (ready)=\"onDockviewReady($event)\">\n </mm-dockview>\n </div>\n <!-- Resize handle for dockview panels -->\n <div class=\"dockview-resize-handle\"\n (mousedown)=\"onDockviewResizeStart($event)\"\n title=\"Drag to resize panels\">\n </div>\n }\n\n <!-- Legacy left sidebar (when dockview disabled) -->\n @if (!useDockview) {\n @if (showLeftPanel()) {\n <div class=\"designer-sidebar\">\n <div class=\"sidebar-header\">\n <div class=\"sidebar-tabs\">\n <button class=\"sidebar-tab\"\n [class.active]=\"activeSidebarTab() === 'elements'\"\n (click)=\"setActiveSidebarTab('elements')\">\n {{ editorMode === 'symbol' ? 'Primitives' : 'Elements' }}\n </button>\n <button class=\"sidebar-tab\"\n [class.active]=\"activeSidebarTab() === 'symbols'\"\n (click)=\"setActiveSidebarTab('symbols')\">\n Symbols\n </button>\n </div>\n <button class=\"sidebar-close\" (click)=\"toggleLeftPanel()\" title=\"Close panel\">\u00D7</button>\n </div>\n <div class=\"sidebar-content\">\n @if (activeSidebarTab() === 'elements') {\n <mm-element-palette\n (elementDragStart)=\"onPaletteDragStart($event)\"\n (elementDragEnd)=\"onPaletteDragEnd($event)\">\n </mm-element-palette>\n } @else {\n <mm-symbol-library-panel\n (symbolDragStart)=\"onSymbolDragStart($event)\"\n (symbolDragEnd)=\"onSymbolDragEnd()\">\n </mm-symbol-library-panel>\n }\n </div>\n </div>\n } @else {\n <div class=\"sidebar-collapsed left\" (click)=\"toggleLeftPanel()\" title=\"Show element palette\">\n <span class=\"collapsed-icon\">\u2630</span>\n </div>\n }\n } <!-- End of legacy left sidebar -->\n\n <!-- Canvas area (always visible) -->\n <div class=\"designer-canvas-container\"\n #canvasContainer\n data-testid=\"designer-canvas-container\"\n (mousedown)=\"onCanvasMouseDown($event)\"\n (mousemove)=\"onCanvasMouseMove($event)\"\n (mouseup)=\"onCanvasMouseUp($event)\"\n (wheel)=\"onCanvasWheel($event)\"\n (dragover)=\"onCanvasDragOver($event)\"\n (drop)=\"onCanvasDrop($event)\"\n (contextmenu)=\"onCanvasContextMenu($event)\">\n <svg class=\"designer-canvas\"\n data-testid=\"designer-canvas\"\n [attr.width]=\"scaledCanvasWidth()\"\n [attr.height]=\"scaledCanvasHeight()\"\n [attr.viewBox]=\"viewBox()\"\n preserveAspectRatio=\"xMinYMin meet\"\n [style.cursor]=\"canvasCursor()\"\n (mousedown)=\"onSvgMouseDown($event)\">\n\n <!-- Background (rendered first, behind everything) -->\n <!-- Canvas background color is set via CSS variable --designer-canvas-color for theme support -->\n <rect x=\"0\" y=\"0\"\n [attr.width]=\"canvasConfig().width\"\n [attr.height]=\"canvasConfig().height\"\n class=\"canvas-background\"\n pointer-events=\"none\"/>\n\n <!-- Grid (on top of background) -->\n <!-- Grid color is set via CSS variable --designer-grid-color for theme support -->\n @if (showGrid()) {\n <defs>\n <pattern id=\"designerGrid\" [attr.width]=\"gridSize()\" [attr.height]=\"gridSize()\"\n patternUnits=\"userSpaceOnUse\">\n <path [attr.d]=\"'M ' + gridSize() + ' 0 L 0 0 0 ' + gridSize()\"\n fill=\"none\" class=\"designer-grid-line\" stroke-width=\"0.5\"/>\n </pattern>\n </defs>\n <rect x=\"0\" y=\"0\"\n [attr.width]=\"canvasConfig().width\"\n [attr.height]=\"canvasConfig().height\"\n fill=\"url(#designerGrid)\"\n pointer-events=\"none\"/>\n }\n\n <!-- Invisible click capture layer (for clicking on empty canvas) -->\n <rect x=\"0\" y=\"0\"\n [attr.width]=\"canvasConfig().width\"\n [attr.height]=\"canvasConfig().height\"\n fill=\"transparent\"\n class=\"canvas-click-layer\"/>\n\n <!-- Connections (only in diagram mode) -->\n @if (editorMode === 'diagram') {\n @for (connection of diagram().connections; track connection.id) {\n <g class=\"connection\"\n [class.selected]=\"isConnectionSelected(connection.id)\"\n (mousedown)=\"onConnectionClick($event, connection)\">\n <path [attr.d]=\"getConnectionPath(connection)\"\n [attr.stroke]=\"connection.style.strokeColor\"\n [attr.stroke-width]=\"isConnectionSelected(connection.id) ? connection.style.strokeWidth + 2 : connection.style.strokeWidth\"\n fill=\"none\"\n stroke-linecap=\"round\"/>\n </g>\n }\n\n <!-- Elements in their actual z-order -->\n @for (element of orderedElements(); track element.id) {\n <g class=\"element\"\n [class.selected]=\"isElementSelected(element.id)\"\n [class.dragging]=\"dragState().isDragging && dragState().elementId === element.id\"\n [attr.transform]=\"getElementTransform(element)\"\n (mousedown)=\"onElementMouseDown($event, element)\"\n (contextmenu)=\"onElementContextMenu($event, element)\">\n\n <!-- Invisible hit area (larger than visual for easier clicking) -->\n <rect x=\"-4\" y=\"-4\"\n [attr.width]=\"element.size.width + 8\"\n [attr.height]=\"element.size.height + 8\"\n fill=\"transparent\"\n class=\"element-hit-area\"/>\n\n <!-- Element visual (simplified for designer) -->\n <rect x=\"0\" y=\"0\"\n [attr.width]=\"element.size.width\"\n [attr.height]=\"element.size.height\"\n [attr.fill]=\"getElementFill(element)\"\n [attr.stroke]=\"isElementSelected(element.id) ? '#1976d2' : getElementStroke(element)\"\n [attr.stroke-width]=\"isElementSelected(element.id) ? 2 : (element.style?.strokeWidth ?? 1)\"\n [attr.rx]=\"getElementRadius(element)\"\n [attr.opacity]=\"element.style?.opacity ?? 1\"\n pointer-events=\"none\"/>\n\n <!-- Element type icon/label -->\n <text class=\"element-label\"\n [attr.x]=\"element.size.width / 2\"\n [attr.y]=\"element.size.height / 2\"\n text-anchor=\"middle\"\n dominant-baseline=\"middle\"\n font-size=\"10\"\n fill=\"#666\">\n {{ getElementTypeLabel(element) }}\n </text>\n\n <!-- Element name -->\n @if (showElementNames()) {\n <text class=\"element-label\"\n [attr.x]=\"element.size.width / 2\"\n [attr.y]=\"element.size.height + 10\"\n text-anchor=\"middle\">\n {{ element.name }}\n </text>\n }\n\n <!-- Selection handles (zoom-scaled) -->\n @if (isElementSelected(element.id)) {\n <!-- Corner resize handles -->\n <rect class=\"resize-handle nw\" [attr.x]=\"-handleOffset()\" [attr.y]=\"-handleOffset()\" [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onResizeHandleMouseDown($event, element, 'nw')\"/>\n <rect class=\"resize-handle ne\" [attr.x]=\"element.size.width - handleOffset()\" [attr.y]=\"-handleOffset()\" [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onResizeHandleMouseDown($event, element, 'ne')\"/>\n <rect class=\"resize-handle sw\" [attr.x]=\"-handleOffset()\" [attr.y]=\"element.size.height - handleOffset()\" [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onResizeHandleMouseDown($event, element, 'sw')\"/>\n <rect class=\"resize-handle se\" [attr.x]=\"element.size.width - handleOffset()\" [attr.y]=\"element.size.height - handleOffset()\" [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onResizeHandleMouseDown($event, element, 'se')\"/>\n\n <!-- Connection ports -->\n <circle class=\"connection-port\" [attr.cx]=\"element.size.width / 2\" cy=\"0\" [attr.r]=\"portRadius()\" fill=\"#4caf50\"/>\n <circle class=\"connection-port\" [attr.cx]=\"element.size.width / 2\" [attr.cy]=\"element.size.height\" [attr.r]=\"portRadius()\" fill=\"#4caf50\"/>\n <circle class=\"connection-port\" cx=\"0\" [attr.cy]=\"element.size.height / 2\" [attr.r]=\"portRadius()\" fill=\"#4caf50\"/>\n <circle class=\"connection-port\" [attr.cx]=\"element.size.width\" [attr.cy]=\"element.size.height / 2\" [attr.r]=\"portRadius()\" fill=\"#4caf50\"/>\n }\n </g>\n }\n }\n\n <!-- Primitives in their actual z-order -->\n @for (primitive of orderedPrimitives(); track primitive.id) {\n <g class=\"primitive\"\n [attr.data-testid]=\"'primitive-' + primitive.type + '-' + primitive.id\"\n [class.selected]=\"isPrimitiveSelected(primitive.id)\"\n [class.dragging]=\"dragState().isDragging && dragState().elementId === primitive.id\"\n [attr.transform]=\"getPrimitiveTransform(primitive)\"\n (mousedown)=\"onPrimitiveMouseDown($event, primitive)\"\n (dblclick)=\"onPrimitiveDoubleClick(primitive)\"\n (contextmenu)=\"onPrimitiveContextMenu($event, primitive)\">\n\n <!-- Render based on primitive type -->\n <!-- Resolve style once for this primitive (class + inline merged) -->\n @let rs = resolveStyle(primitive);\n\n @switch (primitive.type) {\n @case ('rectangle') {\n @if (primitiveHasAnimations(primitive) || hasFillLevel(primitive)) {\n <!-- Rectangle with animations or fillLevel - use innerHTML for clip-path support -->\n <g [innerHTML]=\"getPrimitiveWithAnimationsSvg(primitive)\"></g>\n } @else {\n <rect [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config.width\"\n [attr.height]=\"$any(primitive).config.height\"\n [attr.fill]=\"rs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"rs.fill?.opacity ?? 1\"\n [attr.stroke]=\"isPrimitiveSelected(primitive.id) ? '#1976d2' : (rs.stroke?.color ?? 'none')\"\n [attr.stroke-opacity]=\"rs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"isPrimitiveSelected(primitive.id) ? selectionHighlightWidth() : (rs.stroke?.width ?? 1)\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(rs.stroke?.dashArray))\"\n [attr.rx]=\"$any(primitive).config.cornerRadiusX ?? $any(primitive).config.cornerRadius ?? 0\"\n [attr.ry]=\"$any(primitive).config.cornerRadiusY ?? $any(primitive).config.cornerRadius ?? 0\"/>\n }\n }\n @case ('ellipse') {\n @if (primitiveHasAnimations(primitive)) {\n <!-- Ellipse with animations -->\n <g [innerHTML]=\"getPrimitiveWithAnimationsSvg(primitive)\"></g>\n } @else {\n <ellipse [attr.cx]=\"primitive.position.x\"\n [attr.cy]=\"primitive.position.y\"\n [attr.rx]=\"$any(primitive).config.radiusX\"\n [attr.ry]=\"$any(primitive).config.radiusY\"\n [attr.fill]=\"rs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"rs.fill?.opacity ?? 1\"\n [attr.stroke]=\"isPrimitiveSelected(primitive.id) ? '#1976d2' : (rs.stroke?.color ?? 'none')\"\n [attr.stroke-opacity]=\"rs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"isPrimitiveSelected(primitive.id) ? selectionHighlightWidth() : (rs.stroke?.width ?? 1)\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(rs.stroke?.dashArray))\"/>\n }\n }\n @case ('line') {\n @if (primitiveHasAnimations(primitive)) {\n <!-- Line with animations -->\n <g [innerHTML]=\"getPrimitiveWithAnimationsSvg(primitive)\"></g>\n } @else {\n <line [attr.x1]=\"$any(primitive).config.start.x + primitive.position.x\"\n [attr.y1]=\"$any(primitive).config.start.y + primitive.position.y\"\n [attr.x2]=\"$any(primitive).config.end.x + primitive.position.x\"\n [attr.y2]=\"$any(primitive).config.end.y + primitive.position.y\"\n [attr.stroke]=\"isPrimitiveSelected(primitive.id) ? '#1976d2' : (rs.stroke?.color ?? 'none')\"\n [attr.stroke-opacity]=\"rs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"isPrimitiveSelected(primitive.id) ? 3 : (rs.stroke?.width ?? 2)\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(rs.stroke?.dashArray))\"/>\n }\n }\n @case ('path') {\n @if (primitiveHasAnimations(primitive)) {\n <!-- Path with animations -->\n <g [innerHTML]=\"getPrimitiveWithAnimationsSvg(primitive)\"></g>\n } @else {\n <path [attr.d]=\"$any(primitive).config.d\"\n [attr.transform]=\"'translate(' + primitive.position.x + ',' + primitive.position.y + ')'\"\n [attr.fill]=\"rs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"rs.fill?.opacity ?? 1\"\n [attr.fill-rule]=\"$any(primitive).config.fillRule\"\n [attr.stroke]=\"isPrimitiveSelected(primitive.id) ? '#1976d2' : (rs.stroke?.color ?? 'none')\"\n [attr.stroke-opacity]=\"rs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"isPrimitiveSelected(primitive.id) ? selectionHighlightWidth() : (rs.stroke?.width ?? 1)\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(rs.stroke?.dashArray))\"/>\n }\n }\n @case ('polygon') {\n @if (primitiveHasAnimations(primitive)) {\n <!-- Polygon with animations -->\n <g [innerHTML]=\"getPrimitiveWithAnimationsSvg(primitive)\"></g>\n } @else {\n <polygon [attr.points]=\"getPolygonPoints($any(primitive))\"\n [attr.fill]=\"rs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"rs.fill?.opacity ?? 1\"\n [attr.stroke]=\"isPrimitiveSelected(primitive.id) ? '#1976d2' : (rs.stroke?.color ?? 'none')\"\n [attr.stroke-opacity]=\"rs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"isPrimitiveSelected(primitive.id) ? selectionHighlightWidth() : (rs.stroke?.width ?? 1)\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(rs.stroke?.dashArray))\"/>\n }\n }\n @case ('polyline') {\n @if (primitiveHasAnimations(primitive)) {\n <!-- Polyline with animations -->\n <g [innerHTML]=\"getPrimitiveWithAnimationsSvg(primitive)\"></g>\n } @else {\n <polyline [attr.points]=\"getPolylinePoints($any(primitive))\"\n fill=\"none\"\n [attr.stroke]=\"isPrimitiveSelected(primitive.id) ? '#1976d2' : (rs.stroke?.color ?? '#333')\"\n [attr.stroke-opacity]=\"rs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"isPrimitiveSelected(primitive.id) ? 3 : (rs.stroke?.width ?? 2)\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(rs.stroke?.dashArray))\"/>\n }\n }\n @case ('text') {\n <text [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.fill]=\"$any(primitive).config.textStyle?.color ?? '#333'\"\n [attr.font-size]=\"$any(primitive).config.textStyle?.fontSize ?? 14\"\n [attr.font-family]=\"$any(primitive).config.textStyle?.fontFamily ?? 'Arial, sans-serif'\">\n {{ $any(primitive).config.content }}\n </text>\n }\n @case ('image') {\n @if ($any(primitive).config.src) {\n <!-- Render actual image when src is available -->\n <image [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config.width\"\n [attr.height]=\"$any(primitive).config.height\"\n [attr.href]=\"$any(primitive).config.src\"\n [attr.preserveAspectRatio]=\"$any(primitive).config.preserveAspectRatio !== false ? 'xMidYMid meet' : 'none'\"/>\n <!-- Selection border overlay -->\n @if (isPrimitiveSelected(primitive.id)) {\n <rect [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config.width\"\n [attr.height]=\"$any(primitive).config.height\"\n fill=\"none\"\n stroke=\"#1976d2\"\n [attr.stroke-width]=\"selectionHighlightWidth()\"\n stroke-dasharray=\"4 2\"/>\n }\n } @else {\n <!-- Placeholder when no src -->\n <rect [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config.width\"\n [attr.height]=\"$any(primitive).config.height\"\n fill=\"#f5f5f5\"\n [attr.stroke]=\"isPrimitiveSelected(primitive.id) ? '#1976d2' : '#ccc'\"\n [attr.stroke-width]=\"isPrimitiveSelected(primitive.id) ? selectionHighlightWidth() : 1\"\n stroke-dasharray=\"4 2\"/>\n <text class=\"primitive-label\"\n [attr.x]=\"primitive.position.x + $any(primitive).config.width / 2\"\n [attr.y]=\"primitive.position.y + $any(primitive).config.height / 2\"\n text-anchor=\"middle\"\n dominant-baseline=\"middle\"\n font-size=\"10\"\n fill=\"#999\">Image</text>\n }\n }\n @case ('group') {\n <!-- Groups render their fill/stroke if defined, children render separately -->\n @if (primitiveHasAnimations(primitive)) {\n <!-- Group with animations -->\n <g [innerHTML]=\"getPrimitiveWithAnimationsSvg(primitive)\"></g>\n } @else {\n @let groupBounds = getPrimitiveBoundingBox(primitive);\n <rect [attr.x]=\"groupBounds.x\"\n [attr.y]=\"groupBounds.y\"\n [attr.width]=\"groupBounds.width\"\n [attr.height]=\"groupBounds.height\"\n [attr.fill]=\"rs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"rs.fill?.opacity ?? 1\"\n [attr.stroke]=\"isPrimitiveSelected(primitive.id) ? '#1976d2' : (rs.stroke?.color ?? 'none')\"\n [attr.stroke-opacity]=\"rs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"isPrimitiveSelected(primitive.id) ? 1.5 : (rs.stroke?.width ?? 0)\"\n [attr.stroke-dasharray]=\"isPrimitiveSelected(primitive.id) ? '6 3' : (getStrokeDashArray($safeNavigationMigration(rs.stroke?.dashArray)))\"\n pointer-events=\"all\"/>\n }\n }\n }\n\n <!-- Primitive name label -->\n @if (showElementNames() && primitive.name) {\n <text class=\"primitive-label\"\n [attr.x]=\"getPrimitiveBoundingBox(primitive).x + getPrimitiveBoundingBox(primitive).width / 2\"\n [attr.y]=\"getPrimitiveBoundingBox(primitive).y + getPrimitiveBoundingBox(primitive).height + 10\"\n text-anchor=\"middle\">\n {{ primitive.name }}\n </text>\n }\n\n <!-- Selection handles for primitives -->\n @if (isPrimitiveSelected(primitive.id)) {\n @let bbox = getPrimitiveBoundingBox(primitive);\n @if (primitive.type === 'line') {\n <!-- Line-specific endpoint handles -->\n @let lineConfig = $any(primitive).config;\n <!-- Start endpoint handle (zoom-scaled) -->\n <circle class=\"endpoint-handle\"\n [attr.cx]=\"lineConfig.start.x + primitive.position.x\"\n [attr.cy]=\"lineConfig.start.y + primitive.position.y\"\n [attr.r]=\"portRadius() + 1\"\n fill=\"#1976d2\"\n stroke=\"white\"\n [attr.stroke-width]=\"selectionHighlightWidth()\"\n (mousedown)=\"onLineEndpointMouseDown($event, primitive, 'start')\"/>\n <!-- End endpoint handle (zoom-scaled) -->\n <circle class=\"endpoint-handle\"\n [attr.cx]=\"lineConfig.end.x + primitive.position.x\"\n [attr.cy]=\"lineConfig.end.y + primitive.position.y\"\n [attr.r]=\"portRadius() + 1\"\n fill=\"#1976d2\"\n stroke=\"white\"\n [attr.stroke-width]=\"selectionHighlightWidth()\"\n (mousedown)=\"onLineEndpointMouseDown($event, primitive, 'end')\"/>\n } @else if (primitive.type === 'polyline' || primitive.type === 'polygon') {\n <!-- Polyline/Polygon point handles (zoom-scaled) -->\n @for (point of getPolyPoints(primitive); track point.index) {\n <circle class=\"endpoint-handle\"\n [class.selected]=\"isPolyPointSelected(primitive.id, point.index)\"\n [attr.cx]=\"point.x\"\n [attr.cy]=\"point.y\"\n [attr.r]=\"portRadius()\"\n [attr.fill]=\"isPolyPointSelected(primitive.id, point.index) ? '#ff5722' : '#1976d2'\"\n stroke=\"white\"\n [attr.stroke-width]=\"selectionHighlightWidth()\"\n (mousedown)=\"onPolyPointMouseDown($event, primitive, point.index)\"/>\n }\n } @else {\n <!-- Selection outline (zoom-scaled) -->\n <rect [attr.x]=\"bbox.x - selectionPadding()\"\n [attr.y]=\"bbox.y - selectionPadding()\"\n [attr.width]=\"bbox.width + selectionPadding() * 2\"\n [attr.height]=\"bbox.height + selectionPadding() * 2\"\n fill=\"none\"\n stroke=\"#1976d2\"\n [attr.stroke-width]=\"selectionStrokeWidth()\"\n [attr.stroke-dasharray]=\"selectionDashArray()\"\n pointer-events=\"none\"/>\n <!-- Corner handles (zoom-scaled) -->\n <rect class=\"resize-handle nw\" [attr.x]=\"bbox.x - handleOffset()\" [attr.y]=\"bbox.y - handleOffset()\" [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onPrimitiveResizeHandleMouseDown($event, primitive, 'nw')\"/>\n <rect class=\"resize-handle ne\" [attr.x]=\"bbox.x + bbox.width - handleOffset()\" [attr.y]=\"bbox.y - handleOffset()\" [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onPrimitiveResizeHandleMouseDown($event, primitive, 'ne')\"/>\n <rect class=\"resize-handle sw\" [attr.x]=\"bbox.x - handleOffset()\" [attr.y]=\"bbox.y + bbox.height - handleOffset()\" [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onPrimitiveResizeHandleMouseDown($event, primitive, 'sw')\"/>\n <rect class=\"resize-handle se\" [attr.x]=\"bbox.x + bbox.width - handleOffset()\" [attr.y]=\"bbox.y + bbox.height - handleOffset()\" [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onPrimitiveResizeHandleMouseDown($event, primitive, 'se')\"/>\n\n <!-- Animation origin indicator (crosshair, zoom-scaled) -->\n @if (primitiveHasAnimations(primitive)) {\n @let origin = getAnimationOrigin(primitive);\n @if (origin) {\n <g class=\"animation-origin-indicator\" pointer-events=\"none\">\n <!-- Outer circle -->\n <circle [attr.cx]=\"origin.x\" [attr.cy]=\"origin.y\" [attr.r]=\"handleSize()\"\n fill=\"none\" stroke=\"#ff5722\" [attr.stroke-width]=\"selectionHighlightWidth()\" opacity=\"0.8\"/>\n <!-- Inner dot -->\n <circle [attr.cx]=\"origin.x\" [attr.cy]=\"origin.y\" [attr.r]=\"selectionPadding()\"\n fill=\"#ff5722\" opacity=\"0.9\"/>\n <!-- Crosshair lines -->\n <line [attr.x1]=\"origin.x - handleSize() * 1.5\" [attr.y1]=\"origin.y\"\n [attr.x2]=\"origin.x - portRadius()\" [attr.y2]=\"origin.y\"\n stroke=\"#ff5722\" [attr.stroke-width]=\"selectionHighlightWidth()\" opacity=\"0.8\"/>\n <line [attr.x1]=\"origin.x + portRadius()\" [attr.y1]=\"origin.y\"\n [attr.x2]=\"origin.x + handleSize() * 1.5\" [attr.y2]=\"origin.y\"\n stroke=\"#ff5722\" [attr.stroke-width]=\"selectionHighlightWidth()\" opacity=\"0.8\"/>\n <line [attr.x1]=\"origin.x\" [attr.y1]=\"origin.y - handleSize() * 1.5\"\n [attr.x2]=\"origin.x\" [attr.y2]=\"origin.y - portRadius()\"\n stroke=\"#ff5722\" [attr.stroke-width]=\"selectionHighlightWidth()\" opacity=\"0.8\"/>\n <line [attr.x1]=\"origin.x\" [attr.y1]=\"origin.y + portRadius()\"\n [attr.x2]=\"origin.x\" [attr.y2]=\"origin.y + handleSize() * 1.5\"\n stroke=\"#ff5722\" [attr.stroke-width]=\"selectionHighlightWidth()\" opacity=\"0.8\"/>\n </g>\n }\n }\n }\n }\n </g>\n }\n\n <!-- Symbol Instances -->\n @for (symbolInstance of orderedSymbols(); track symbolInstance.id) {\n @let symbolDef = getSymbolDefinition(symbolInstance);\n @let instanceDirectEffects = symbolInstanceDirectEffects().get(symbolInstance.id);\n @if (symbolDef) {\n <g class=\"symbol-instance\"\n [class.selected]=\"isSymbolSelected(symbolInstance.id)\"\n [class.dragging]=\"dragState().isDragging && dragState().elementId === symbolInstance.id\"\n [attr.transform]=\"getSymbolTransform(symbolInstance, symbolDef)\"\n [attr.opacity]=\"instanceDirectEffects?.['style.opacity'] ?? 1\"\n (mousedown)=\"onSymbolMouseDown($event, symbolInstance)\"\n (contextmenu)=\"onSymbolContextMenu($event, symbolInstance)\">\n\n <!-- Invisible hit area for easier selection -->\n <rect x=\"-4\" y=\"-4\"\n [attr.width]=\"symbolDef.bounds.width + 8\"\n [attr.height]=\"symbolDef.bounds.height + 8\"\n fill=\"transparent\"\n class=\"symbol-hit-area\"/>\n\n <!-- Render symbol primitives (including nested symbol instances) with direct effects applied -->\n @let symPropValues = symbolInstancePropertyValues().get(symbolInstance.id) ?? symbolInstance.propertyValues ?? {};\n @let symPrimitives = getSymbolPrimitivesWithDirectEffects(symbolInstance, symbolDef, symPropValues);\n @let animatedGroupChildIds = getAnimatedGroupChildIds(symbolDef);\n @for (primitive of symPrimitives; track primitive.id) {\n <!-- Skip invisible primitives and children of animated groups (rendered inside their group) -->\n @if (primitive.visible !== false && !animatedGroupChildIds.has(primitive.id)) {\n <!-- Check if primitive has animations - use innerHTML binding for animated primitives -->\n @if (symbolPrimitiveHasAnimations(primitive) || (primitive.fillLevel !== undefined && primitive.fillLevel >= 0 && primitive.fillLevel <= 1)) {\n <!-- Primitive with animations or fillLevel - use innerHTML for SVG animation support -->\n <g [attr.transform]=\"getPrimitiveTransform(primitive)\"\n [attr.opacity]=\"primitive.style?.opacity ?? 1\"\n [innerHTML]=\"getSymbolPrimitiveWithAnimationsSvg(primitive, symbolDef, symPropValues, symbolDef.styleClasses, symPrimitives)\"></g>\n } @else {\n <!-- Static primitive without animations -->\n <!-- Resolve style using symbol's styleClasses -->\n @let srs = resolveStyleWithClasses(primitive, symbolDef.styleClasses);\n <!-- Wrapper group for transform effects and overall opacity -->\n <g [attr.transform]=\"getPrimitiveTransform(primitive)\"\n [attr.opacity]=\"primitive.style?.opacity ?? 1\">\n @switch (primitive.type) {\n @case ('rectangle') {\n <!-- Standard rectangle without fillLevel -->\n <rect [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config.width\"\n [attr.height]=\"$any(primitive).config.height\"\n [attr.fill]=\"srs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"srs.fill?.opacity ?? 1\"\n [attr.stroke]=\"srs.stroke?.color ?? 'none'\"\n [attr.stroke-opacity]=\"srs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"srs.stroke?.width ?? 1\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(srs.stroke?.dashArray))\"\n [attr.rx]=\"$any(primitive).config.cornerRadiusX ?? $any(primitive).config.cornerRadius ?? 0\"\n [attr.ry]=\"$any(primitive).config.cornerRadiusY ?? $any(primitive).config.cornerRadius ?? 0\"/>\n }\n @case ('ellipse') {\n <ellipse [attr.cx]=\"primitive.position.x\"\n [attr.cy]=\"primitive.position.y\"\n [attr.rx]=\"$any(primitive).config.radiusX\"\n [attr.ry]=\"$any(primitive).config.radiusY\"\n [attr.fill]=\"srs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"srs.fill?.opacity ?? 1\"\n [attr.stroke]=\"srs.stroke?.color ?? 'none'\"\n [attr.stroke-opacity]=\"srs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"srs.stroke?.width ?? 1\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(srs.stroke?.dashArray))\"/>\n }\n @case ('line') {\n <line [attr.x1]=\"$any(primitive).config.start.x + primitive.position.x\"\n [attr.y1]=\"$any(primitive).config.start.y + primitive.position.y\"\n [attr.x2]=\"$any(primitive).config.end.x + primitive.position.x\"\n [attr.y2]=\"$any(primitive).config.end.y + primitive.position.y\"\n [attr.stroke]=\"srs.stroke?.color ?? 'none'\"\n [attr.stroke-opacity]=\"srs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"srs.stroke?.width ?? 2\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(srs.stroke?.dashArray))\"/>\n }\n @case ('path') {\n <path [attr.d]=\"$any(primitive).config.d\"\n [attr.transform]=\"'translate(' + primitive.position.x + ',' + primitive.position.y + ')'\"\n [attr.fill]=\"srs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"srs.fill?.opacity ?? 1\"\n [attr.fill-rule]=\"$any(primitive).config.fillRule\"\n [attr.stroke]=\"srs.stroke?.color ?? 'none'\"\n [attr.stroke-opacity]=\"srs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"srs.stroke?.width ?? 1\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(srs.stroke?.dashArray))\"/>\n }\n @case ('polygon') {\n <polygon [attr.points]=\"getPolygonPoints($any(primitive))\"\n [attr.fill]=\"srs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"srs.fill?.opacity ?? 1\"\n [attr.stroke]=\"srs.stroke?.color ?? 'none'\"\n [attr.stroke-opacity]=\"srs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"srs.stroke?.width ?? 1\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(srs.stroke?.dashArray))\"/>\n }\n @case ('polyline') {\n <polyline [attr.points]=\"getPolylinePoints($any(primitive))\"\n fill=\"none\"\n [attr.stroke]=\"srs.stroke?.color ?? 'none'\"\n [attr.stroke-opacity]=\"srs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"srs.stroke?.width ?? 2\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(srs.stroke?.dashArray))\"/>\n }\n @case ('text') {\n <text [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.fill]=\"$any(primitive).config.textStyle?.color ?? '#333'\"\n [attr.font-size]=\"$any(primitive).config.textStyle?.fontSize ?? 14\"\n [attr.font-family]=\"$any(primitive).config.textStyle?.fontFamily ?? 'Arial, sans-serif'\">\n {{ $any(primitive).config.content }}\n </text>\n }\n @case ('image') {\n @if ($any(primitive).config.src) {\n @if ($any(primitive).config.sourceType === 'svg') {\n <!-- SVG content embedded via foreignObject -->\n <foreignObject [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config.width\"\n [attr.height]=\"$any(primitive).config.height\"\n [innerHTML]=\"getSafeHtml($any(primitive).config.src)\"></foreignObject>\n } @else {\n <!-- URL or data URL image -->\n <image [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config.width\"\n [attr.height]=\"$any(primitive).config.height\"\n [attr.href]=\"$any(primitive).config.src\"\n [attr.preserveAspectRatio]=\"$any(primitive).config.preserveAspectRatio !== false ? 'xMidYMid meet' : 'none'\"/>\n }\n } @else {\n <!-- Placeholder when no src -->\n <rect [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config.width\"\n [attr.height]=\"$any(primitive).config.height\"\n fill=\"#f5f5f5\"\n stroke=\"#ccc\"\n stroke-width=\"1\"\n stroke-dasharray=\"4 2\"/>\n <text [attr.x]=\"primitive.position.x + $any(primitive).config.width / 2\"\n [attr.y]=\"primitive.position.y + $any(primitive).config.height / 2\"\n text-anchor=\"middle\"\n dominant-baseline=\"middle\"\n font-size=\"10\"\n fill=\"#999\">Image</text>\n }\n }\n }\n </g>\n }\n }\n }\n\n <!-- Symbol name label -->\n @if (showElementNames() && symbolInstance.name) {\n <text class=\"symbol-label\"\n [attr.x]=\"symbolDef.bounds.width / 2\"\n [attr.y]=\"symbolDef.bounds.height + 10\"\n text-anchor=\"middle\">\n {{ symbolInstance.name }}\n </text>\n }\n\n <!-- Selection handles for symbols (zoom-scaled) -->\n @if (isSymbolSelected(symbolInstance.id)) {\n <!-- Selection outline -->\n <rect [attr.x]=\"-selectionPadding()\" [attr.y]=\"-selectionPadding()\"\n [attr.width]=\"symbolDef.bounds.width + selectionPadding() * 2\"\n [attr.height]=\"symbolDef.bounds.height + selectionPadding() * 2\"\n fill=\"none\"\n stroke=\"#1976d2\"\n [attr.stroke-width]=\"selectionHighlightWidth()\"\n [attr.stroke-dasharray]=\"selectionDashArray()\"\n pointer-events=\"none\"/>\n <!-- Corner handles -->\n <rect class=\"resize-handle nw\" [attr.x]=\"-handleOffset()\" [attr.y]=\"-handleOffset()\"\n [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onSymbolResizeHandleMouseDown($event, symbolInstance, 'nw')\"/>\n <rect class=\"resize-handle ne\" [attr.x]=\"symbolDef.bounds.width - handleOffset()\" [attr.y]=\"-handleOffset()\"\n [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onSymbolResizeHandleMouseDown($event, symbolInstance, 'ne')\"/>\n <rect class=\"resize-handle sw\" [attr.x]=\"-handleOffset()\" [attr.y]=\"symbolDef.bounds.height - handleOffset()\"\n [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onSymbolResizeHandleMouseDown($event, symbolInstance, 'sw')\"/>\n <rect class=\"resize-handle se\" [attr.x]=\"symbolDef.bounds.width - handleOffset()\" [attr.y]=\"symbolDef.bounds.height - handleOffset()\"\n [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onSymbolResizeHandleMouseDown($event, symbolInstance, 'se')\"/>\n }\n </g>\n }\n }\n\n <!-- Selection Overlay Layer (always on top for visual feedback, zoom-scaled) -->\n <g class=\"selection-overlay\" pointer-events=\"none\">\n <!-- Element selection indicators (only in diagram mode) -->\n @if (editorMode === 'diagram') {\n @for (element of selectedElements(); track element.id) {\n <rect [attr.x]=\"element.position.x - selectionPadding()\"\n [attr.y]=\"element.position.y - selectionPadding()\"\n [attr.width]=\"element.size.width + selectionPadding() * 2\"\n [attr.height]=\"element.size.height + selectionPadding() * 2\"\n fill=\"none\"\n stroke=\"#1976d2\"\n [attr.stroke-width]=\"selectionStrokeWidth()\"\n [attr.stroke-dasharray]=\"selectionDashArray()\"\n class=\"selection-indicator\"/>\n }\n }\n <!-- Primitive selection indicators -->\n @for (primitive of selectedPrimitives(); track primitive.id) {\n @let bbox = getPrimitiveBoundingBox(primitive);\n <rect [attr.x]=\"bbox.x - selectionPadding()\"\n [attr.y]=\"bbox.y - selectionPadding()\"\n [attr.width]=\"bbox.width + selectionPadding() * 2\"\n [attr.height]=\"bbox.height + selectionPadding() * 2\"\n fill=\"none\"\n stroke=\"#1976d2\"\n [attr.stroke-width]=\"selectionStrokeWidth()\"\n [attr.stroke-dasharray]=\"selectionDashArray()\"\n class=\"selection-indicator\"/>\n }\n <!-- Symbol selection indicators -->\n @for (symbolInstance of selectedSymbols(); track symbolInstance.id) {\n @let symbolDef = getSymbolDefinition(symbolInstance);\n @if (symbolDef) {\n @let bbox = getSymbolBoundingBox(symbolInstance, symbolDef);\n <rect [attr.x]=\"bbox.x - selectionPadding()\"\n [attr.y]=\"bbox.y - selectionPadding()\"\n [attr.width]=\"bbox.width + selectionPadding() * 2\"\n [attr.height]=\"bbox.height + selectionPadding() * 2\"\n fill=\"none\"\n stroke=\"#1976d2\"\n [attr.stroke-width]=\"selectionStrokeWidth()\"\n [attr.stroke-dasharray]=\"selectionDashArray()\"\n class=\"selection-indicator\"/>\n }\n }\n </g>\n\n <!-- Selection rectangle (for marquee selection, zoom-scaled) -->\n @if (selectionRect()) {\n <rect [attr.x]=\"selectionRect()!.x\"\n [attr.y]=\"selectionRect()!.y\"\n [attr.width]=\"selectionRect()!.width\"\n [attr.height]=\"selectionRect()!.height\"\n fill=\"rgba(25, 118, 210, 0.1)\"\n stroke=\"#1976d2\"\n [attr.stroke-width]=\"selectionStrokeWidth()\"\n [attr.stroke-dasharray]=\"selectionDashArray()\"/>\n }\n\n <!-- Alignment Guides (shown during drag) -->\n @for (guide of alignmentGuides(); track $index) {\n @if (guide.type === 'horizontal') {\n <line [attr.x1]=\"guide.start\"\n [attr.y1]=\"guide.position\"\n [attr.x2]=\"guide.end\"\n [attr.y2]=\"guide.position\"\n stroke=\"#ff4081\"\n [attr.stroke-width]=\"guideStrokeWidth()\"\n pointer-events=\"none\"/>\n } @else {\n <line [attr.x1]=\"guide.position\"\n [attr.y1]=\"guide.start\"\n [attr.x2]=\"guide.position\"\n [attr.y2]=\"guide.end\"\n stroke=\"#ff4081\"\n [attr.stroke-width]=\"guideStrokeWidth()\"\n pointer-events=\"none\"/>\n }\n }\n </svg>\n </div>\n\n <!-- Property Inspector (right sidebar - legacy mode only) -->\n @if (!useDockview) {\n @if (showRightPanel()) {\n <div class=\"designer-inspector-container\">\n <div class=\"inspector-header\">\n <span class=\"inspector-title\">Properties</span>\n <button class=\"sidebar-close\" (click)=\"toggleRightPanel()\" title=\"Close panel\">\u00D7</button>\n </div>\n <mm-property-inspector\n class=\"designer-inspector\"\n [selectedElements]=\"selectedElements()\"\n [selectedConnections]=\"selectedConnections()\"\n [selectedPrimitives]=\"selectedPrimitives()\"\n [selectedSymbolInstances]=\"selectedSymbols()\"\n [symbolDefinitions]=\"symbolDefinitionsMap()\"\n [availableStyleClasses]=\"styleClasses\"\n (propertyChange)=\"onPropertyChange($event)\">\n </mm-property-inspector>\n </div>\n } @else {\n <div class=\"sidebar-collapsed right\" (click)=\"toggleRightPanel()\" title=\"Show properties\">\n <span class=\"collapsed-icon\">\u2699</span>\n </div>\n }\n }\n </div>\n\n <!-- Context Menu -->\n @if (contextMenu().visible) {\n <mm-context-menu\n [position]=\"contextMenu().position\"\n [items]=\"contextMenuItems()\"\n (action)=\"onContextMenuAction($event)\"\n (closed)=\"closeContextMenu()\">\n </mm-context-menu>\n }\n\n <!-- Path Editor Dialog -->\n @if (pathEditorVisible()) {\n <kendo-dialog\n title=\"Edit Path\"\n [width]=\"500\"\n [height]=\"500\"\n (close)=\"closePathEditor()\">\n <mm-path-editor\n [pathData]=\"editingPathData()\"\n [width]=\"460\"\n [height]=\"280\"\n (pathChange)=\"onPathEditorChange($event)\">\n </mm-path-editor>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"closePathEditor()\">Done</button>\n </kendo-dialog-actions>\n </kendo-dialog>\n }\n\n <!-- Binding Editor Dialog -->\n <mm-binding-editor-dialog\n [show]=\"showBindingEditor()\"\n [property]=\"editingBindingProperty()\"\n [existingBindings]=\"effectivePropertyBindings()\"\n [primitives]=\"diagram().primitives ?? []\"\n [symbolInstances]=\"diagram().symbolInstances ?? []\"\n [symbolDefinitions]=\"symbolDefinitionsMap()\"\n (closed)=\"closeBindingEditor()\"\n (saved)=\"onBindingsSaved($event)\">\n </mm-binding-editor-dialog>\n\n <!-- Status bar -->\n <div class=\"designer-statusbar\">\n <span class=\"diagram-name\" title=\"Diagram name\">{{ diagram().name }}</span>\n <span class=\"statusbar-divider\">|</span>\n <span>Primitives: {{ (diagram().primitives ?? []).length }}</span>\n <span>Symbols: {{ (diagram().symbolInstances ?? []).length }}</span>\n @if (editorMode === 'diagram') {\n <span>Elements: {{ diagram().elements.length }}</span>\n <span>Connections: {{ diagram().connections.length }}</span>\n }\n <span>Selected: {{ selection().elements.size + selection().connections.size }}</span>\n @if (hasChanges()) {\n <span class=\"unsaved-indicator\">* Unsaved</span>\n }\n </div>\n</div>\n", styles: [":host{--designer-bg: #f5f5f5;--designer-surface: #ffffff;--designer-surface-alt: #f5f5f5;--designer-border: #e0e0e0;--designer-text: #333333;--designer-text-muted: #666666;--designer-accent: #1976d2;--designer-accent-secondary: #1565c0;--designer-canvas-bg: #e8e8e8;--designer-hover-bg: #eeeeee;--designer-canvas-color: #fafafa;--designer-grid-color: #e0e0e0;display:flex;flex-direction:column;flex:1;width:100%;height:100%;min-height:0;overflow:hidden}.process-designer{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;background:var(--designer-bg);outline:none;overflow:hidden}.designer-toolbar{flex-shrink:0;border-bottom:1px solid var(--designer-border)}.zoom-level{min-width:40px;text-align:center;font-size:12px;padding:0 .25rem;color:var(--designer-text)}.k-menu-separator{height:1px;margin:4px 0;background-color:var(--designer-border)}.designer-content{display:flex;flex:1;height:100%;min-height:0;overflow:hidden}.designer-sidebar{width:220px;display:flex;flex-direction:column;border-right:1px solid var(--designer-border);background:var(--designer-surface)}.sidebar-header{display:flex;align-items:stretch;border-bottom:1px solid var(--designer-border)}.sidebar-tabs{display:flex;flex:1}.sidebar-tab{flex:1;padding:.5rem;background:var(--designer-surface-alt);border:none;border-bottom:2px solid transparent;font-size:12px;font-weight:500;color:var(--designer-text-muted);cursor:pointer;transition:all .15s ease}.sidebar-tab:hover{background:var(--designer-hover-bg);color:var(--designer-text)}.sidebar-tab.active{background:var(--designer-surface);border-bottom-color:var(--designer-accent);color:var(--designer-accent)}.sidebar-content{flex:1;overflow-y:auto}.sidebar-close{width:28px;background:transparent;border:none;border-left:1px solid var(--designer-border);cursor:pointer;font-size:16px;color:var(--designer-text-muted);display:flex;align-items:center;justify-content:center}.sidebar-close:hover{background:var(--designer-hover-bg);color:var(--designer-accent)}.sidebar-collapsed{width:28px;background:var(--designer-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease;writing-mode:vertical-rl;text-orientation:mixed}.sidebar-collapsed.left{border-right:1px solid var(--designer-border)}.sidebar-collapsed.right{border-left:1px solid var(--designer-border)}.sidebar-collapsed:hover{background:var(--designer-surface-alt)}.sidebar-collapsed .collapsed-icon{font-size:14px;color:var(--designer-text-muted)}.designer-inspector-container{width:280px;display:flex;flex-direction:column;border-left:1px solid var(--designer-border);background:var(--designer-surface)}.inspector-header{display:flex;align-items:center;padding:0 .5rem;height:32px;border-bottom:1px solid var(--designer-border);background:var(--designer-surface-alt)}.inspector-header .inspector-title{flex:1;font-size:12px;font-weight:500;color:var(--designer-text)}.designer-canvas-container{flex:1 1 auto;min-width:0;min-height:0;height:100%;overflow:auto;background:var(--designer-canvas-bg);position:relative;box-sizing:border-box;display:flex;padding:20px}.designer-canvas{display:block;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;box-shadow:0 2px 8px #0000001a;margin:auto;flex-shrink:0}.designer-canvas .element-label,.designer-canvas .primitive-label,.designer-canvas .symbol-label{user-select:none;-webkit-user-select:none;pointer-events:none;fill:#aaa;font-size:8px}.canvas-background{cursor:default;fill:var(--designer-canvas-color)}.designer-grid-line{stroke:var(--designer-grid-color)}.designer-inspector{flex:1;overflow-y:auto}.element,.element.selected{cursor:move}.element.dragging{opacity:.7}.element.dragging .element-hit-area{cursor:grabbing}.element-hit-area,.primitive,.primitive.selected{cursor:move}.primitive.dragging{opacity:.7}.symbol-instance,.symbol-instance.selected{cursor:move}.symbol-instance.dragging{opacity:.7}.symbol-instance.dragging .symbol-hit-area{cursor:grabbing}.symbol-hit-area{cursor:move}.resize-handle{cursor:pointer}.resize-handle.nw,.resize-handle.se{cursor:nwse-resize}.resize-handle.ne,.resize-handle.sw{cursor:nesw-resize}.endpoint-handle{cursor:move;transition:r .15s ease,fill .15s ease}.endpoint-handle:hover{r:8}.endpoint-handle.selected{r:7}.connection-port{cursor:crosshair;opacity:.7}.connection-port:hover{opacity:1}.connection{cursor:pointer}.connection.selected path{stroke:#1976d2!important}.selection-overlay .selection-indicator{animation:marching-ants .5s linear infinite}@keyframes marching-ants{0%{stroke-dashoffset:0}to{stroke-dashoffset:6}}.designer-statusbar{flex-shrink:0;display:flex;gap:1rem;padding:.25rem .5rem;background:var(--designer-surface);border-top:1px solid var(--designer-border);font-size:11px;color:var(--designer-text-muted)}.diagram-name{font-weight:500;color:var(--designer-text)}.statusbar-divider{color:var(--designer-border)}.unsaved-indicator{color:#f57c00;font-weight:500}:host{--dv-background-color: var(--designer-bg, #f5f5f5);--dv-pane-background-color: var(--designer-surface, #ffffff);--dv-activegroup-visiblepanel-tab-background-color: var(--designer-surface, #ffffff);--dv-activegroup-hiddenpanel-tab-background-color: var(--designer-surface-alt, #f0f0f0);--dv-inactivegroup-visiblepanel-tab-background-color: var(--designer-surface-alt, #f5f5f5);--dv-inactivegroup-hiddenpanel-tab-background-color: #e8e8e8;--dv-activegroup-visiblepanel-tab-color: var(--designer-accent, #1976d2);--dv-activegroup-hiddenpanel-tab-color: var(--designer-text-muted, #666666);--dv-inactivegroup-visiblepanel-tab-color: var(--designer-text, #333333);--dv-inactivegroup-hiddenpanel-tab-color: #888888;--dv-separator-border: 1px solid var(--designer-border, #e0e0e0);--dv-tabs-and-actions-container-background-color: var(--designer-surface-alt, #f5f5f5);--dv-group-view-background-color: var(--designer-surface, #ffffff);--dv-tab-active-border-bottom: 2px solid var(--designer-accent, #1976d2);--dv-drag-over-background-color: rgba(25, 118, 210, .15);--dv-drag-over-border-color: var(--designer-accent, #1976d2);--dv-sash-color: var(--designer-border, #e0e0e0);--dv-sash-hover-color: var(--designer-accent, #1976d2)}.designer-content.dockview-enabled{display:flex;position:relative;height:100%;min-height:0}.dockview-panels-container{width:400px;min-width:280px;max-width:600px;flex:0 0 400px;height:100%;border-right:1px solid var(--designer-border);position:relative;overflow:hidden}.designer-dockview{position:absolute;inset:0;width:100%;height:100%}.dockview-resize-handle{width:6px;height:100%;cursor:ew-resize;background:transparent;position:relative;flex-shrink:0;z-index:10;transition:background-color .2s ease}.dockview-resize-handle:before{content:\"\";position:absolute;top:0;left:50%;transform:translate(-50%);width:2px;height:100%;background:var(--designer-border, rgba(100, 206, 185, .3));transition:background-color .2s ease,width .2s ease}.dockview-resize-handle:hover{background:#64ceb91a}.dockview-resize-handle:hover:before{width:4px;background:var(--octo-mint, #64ceb9)}.dockview-resize-handle:active{background:#64ceb926}.dockview-resize-handle:active:before{width:4px;background:var(--octo-mint, #64ceb9)}::ng-deep mm-elements-panel,::ng-deep mm-symbols-panel,::ng-deep mm-properties-panel,::ng-deep mm-transform-panel,::ng-deep mm-animations-panel,::ng-deep mm-styles-panel,::ng-deep mm-settings-panel,::ng-deep mm-simulation-panel-wrapper{display:block;height:100%;overflow:hidden}::ng-deep mm-elements-panel .panel-container,::ng-deep mm-symbols-panel .panel-container,::ng-deep mm-properties-panel .panel-container,::ng-deep mm-transform-panel .panel-container,::ng-deep mm-animations-panel .panel-container,::ng-deep mm-styles-panel .panel-container,::ng-deep mm-settings-panel .panel-container,::ng-deep mm-simulation-panel-wrapper .panel-container{height:100%;overflow:auto;background:var(--dv-pane-background-color, var(--designer-surface, #ffffff));color:var(--designer-text, #333333)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i2$2.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: i2$2.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: i2$2.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "fillMode", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "component", type: i2$2.ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: ["arrowIcon", "title", "showText", "showIcon", "text", "icon", "svgIcon", "iconClass", "imageUrl", "popupSettings", "look", "primary", "fillMode", "themeColor", "buttonClass", "textField", "disabled", "data"], outputs: ["itemClick", "open", "close"], exportAs: ["kendoToolBarDropDownButton"] }, { kind: "component", type: i2$2.ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { kind: "component", type: i2$2.ToolBarSpacerComponent, selector: "kendo-toolbar-spacer", exportAs: ["kendoToolBarSpacer"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "ngmodule", type: InputsModule }, { kind: "ngmodule", type: DropDownsModule }, { kind: "ngmodule", type: DialogsModule }, { kind: "component", type: i3.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i3.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ElementPaletteComponent, selector: "mm-element-palette", outputs: ["elementDragStart", "elementDragEnd"] }, { kind: "component", type: SymbolLibraryPanelComponent, selector: "mm-symbol-library-panel", outputs: ["symbolDragStart", "symbolDragEnd"] }, { kind: "component", type: PropertyInspectorComponent, selector: "mm-property-inspector", inputs: ["selectedElements", "selectedConnections", "selectedPrimitives", "selectedSymbolInstances", "symbolDefinitions", "availableStyleClasses"], outputs: ["propertyChange"] }, { kind: "component", type: ContextMenuComponent, selector: "mm-context-menu", inputs: ["position", "items"], outputs: ["action", "closed"] }, { kind: "component", type: PathEditorComponent, selector: "mm-path-editor", inputs: ["pathData", "width", "height", "gridSize", "snapToGrid"], outputs: ["pathChange"] }, { kind: "component", type: DockviewComponent, selector: "mm-dockview", inputs: ["components", "tabComponents", "watermarkComponent", "defaultTabComponent", "leftHeaderActionsComponent", "rightHeaderActionsComponent", "prefixHeaderActionsComponent", "className", "hideBorders", "locked", "disableAutoResizing", "disableFloatingGroups"], outputs: ["ready", "didDrop", "willDrop"] }, { kind: "component", type: BindingEditorDialogComponent, selector: "mm-binding-editor-dialog", inputs: ["show", "property", "existingBindings", "primitives", "symbolInstances", "symbolDefinitions"], outputs: ["closed", "saved"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
27542
|
+
], viewQueries: [{ propertyName: "canvasContainerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "svgFileInputRef", first: true, predicate: ["svgFileInput"], descendants: true }], ngImport: i0, template: "<div class=\"process-designer\" tabindex=\"0\" data-testid=\"process-designer\">\n <!-- Toolbar -->\n <kendo-toolbar class=\"designer-toolbar\">\n @if (showSaveButtons) {\n <kendo-toolbar-buttongroup>\n <kendo-toolbar-button [svgIcon]=\"saveIcon\" (click)=\"save()\" title=\"Save (Ctrl+S)\" [disabled]=\"!hasChanges()\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"fileTxtIcon\" (click)=\"saveAs()\" title=\"Save As...\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"pencilIcon\" (click)=\"rename()\" title=\"Rename...\"></kendo-toolbar-button>\n </kendo-toolbar-buttongroup>\n <kendo-toolbar-separator></kendo-toolbar-separator>\n }\n\n <kendo-toolbar-buttongroup>\n <kendo-toolbar-button [svgIcon]=\"undoIcon\" (click)=\"undo()\" title=\"Undo (Ctrl+Z)\" [disabled]=\"!canUndo()\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"redoIcon\" (click)=\"redo()\" title=\"Redo (Ctrl+Shift+Z)\" [disabled]=\"!canRedo()\"></kendo-toolbar-button>\n </kendo-toolbar-buttongroup>\n\n <kendo-toolbar-separator></kendo-toolbar-separator>\n\n <kendo-toolbar-buttongroup>\n <kendo-toolbar-button [svgIcon]=\"arrowsNoRepeatIcon\"\n [toggleable]=\"true\"\n [selected]=\"mode() === 'select'\"\n (click)=\"setMode('select')\"\n title=\"Select tool (V)\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"handIcon\"\n [toggleable]=\"true\"\n [selected]=\"mode() === 'pan'\"\n (click)=\"setMode('pan')\"\n title=\"Pan tool (H)\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"linkIcon\"\n [toggleable]=\"true\"\n [selected]=\"mode() === 'connect'\"\n (click)=\"setMode('connect')\"\n title=\"Connect tool (C)\"></kendo-toolbar-button>\n </kendo-toolbar-buttongroup>\n\n <kendo-toolbar-separator></kendo-toolbar-separator>\n\n <kendo-toolbar-buttongroup>\n <kendo-toolbar-button [svgIcon]=\"zoomInIcon\" (click)=\"zoomIn()\" title=\"Zoom in\"></kendo-toolbar-button>\n <span class=\"zoom-level\">{{ zoomPercentage() }}%</span>\n <kendo-toolbar-button [svgIcon]=\"zoomOutIcon\" (click)=\"zoomOut()\" title=\"Zoom out\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"zoomBestFitIcon\" (click)=\"fitToView()\" title=\"Fit content to view\"></kendo-toolbar-button>\n </kendo-toolbar-buttongroup>\n\n <kendo-toolbar-separator></kendo-toolbar-separator>\n\n <kendo-toolbar-buttongroup>\n <kendo-toolbar-button [svgIcon]=\"gridIcon\"\n [toggleable]=\"true\"\n [selected]=\"showGrid()\"\n (selectedChange)=\"toggleGrid()\"\n title=\"Show/hide grid\"></kendo-toolbar-button>\n <kendo-toolbar-button text=\"\u2316\"\n [toggleable]=\"true\"\n [selected]=\"snapToGrid()\"\n (selectedChange)=\"toggleSnapToGrid()\"\n title=\"Snap to grid\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"eyeIcon\"\n [toggleable]=\"true\"\n [selected]=\"showElementNames()\"\n (selectedChange)=\"toggleElementNames()\"\n title=\"Show element names\"></kendo-toolbar-button>\n </kendo-toolbar-buttongroup>\n\n <kendo-toolbar-separator></kendo-toolbar-separator>\n\n <kendo-toolbar-button [svgIcon]=\"uploadIcon\" (click)=\"onImportSvgClick()\" title=\"Import SVG file\"></kendo-toolbar-button>\n <input #svgFileInput\n type=\"file\"\n accept=\".svg,image/svg+xml\"\n style=\"display: none\"\n (change)=\"onSvgFileSelected($event)\"/>\n\n <kendo-toolbar-spacer></kendo-toolbar-spacer>\n\n <kendo-toolbar-buttongroup>\n <kendo-toolbar-button [svgIcon]=\"groupIcon\" (click)=\"groupSelected()\" title=\"Group (Ctrl+G)\"\n [disabled]=\"!canGroup()\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"ungroupIcon\" (click)=\"ungroupSelected()\" title=\"Ungroup (Ctrl+Shift+G)\"\n [disabled]=\"!canUngroup()\"></kendo-toolbar-button>\n </kendo-toolbar-buttongroup>\n\n <kendo-toolbar-separator></kendo-toolbar-separator>\n\n <kendo-toolbar-button [svgIcon]=\"trashIcon\" (click)=\"deleteSelected()\" title=\"Delete selected\"\n [disabled]=\"!hasSelection()\"></kendo-toolbar-button>\n\n <kendo-toolbar-separator></kendo-toolbar-separator>\n\n @if (useDockview) {\n <!-- View menu for dockview panel controls -->\n <kendo-toolbar-dropdownbutton\n [svgIcon]=\"eyeIcon\"\n [data]=\"viewMenuItems()\"\n title=\"View panels\"\n (itemClick)=\"onViewMenuItemClick($event)\">\n </kendo-toolbar-dropdownbutton>\n } @else {\n <!-- Legacy panel toggle buttons -->\n <kendo-toolbar-buttongroup>\n <kendo-toolbar-button [svgIcon]=\"menuIcon\"\n [toggleable]=\"true\"\n [selected]=\"showLeftPanel()\"\n (selectedChange)=\"toggleLeftPanel()\"\n title=\"Toggle element palette (Alt+1)\"></kendo-toolbar-button>\n <kendo-toolbar-button [svgIcon]=\"gearsIcon\"\n [toggleable]=\"true\"\n [selected]=\"showRightPanel()\"\n (selectedChange)=\"toggleRightPanel()\"\n title=\"Toggle property inspector (Alt+2)\"></kendo-toolbar-button>\n </kendo-toolbar-buttongroup>\n }\n </kendo-toolbar>\n\n <!-- Main content area -->\n <div class=\"designer-content\" [class.dockview-enabled]=\"useDockview\"\n [style.display]=\"useDockview ? 'flex' : null\"\n [style.height]=\"useDockview ? '100%' : null\"\n [style.minHeight]=\"useDockview ? '0' : null\">\n <!-- Dockview panels container (when dockview enabled) -->\n @if (useDockview) {\n <div class=\"dockview-panels-container\"\n [style.width.px]=\"dockviewPanelWidth()\"\n [style.flex]=\"'0 0 ' + dockviewPanelWidth() + 'px'\">\n <mm-dockview\n class=\"designer-dockview\"\n [components]=\"panelComponents\"\n (ready)=\"onDockviewReady($event)\">\n </mm-dockview>\n </div>\n <!-- Resize handle for dockview panels -->\n <div class=\"dockview-resize-handle\"\n (mousedown)=\"onDockviewResizeStart($event)\"\n title=\"Drag to resize panels\">\n </div>\n }\n\n <!-- Legacy left sidebar (when dockview disabled) -->\n @if (!useDockview) {\n @if (showLeftPanel()) {\n <div class=\"designer-sidebar\">\n <div class=\"sidebar-header\">\n <div class=\"sidebar-tabs\">\n <button class=\"sidebar-tab\"\n [class.active]=\"activeSidebarTab() === 'elements'\"\n (click)=\"setActiveSidebarTab('elements')\">\n {{ editorMode === 'symbol' ? 'Primitives' : 'Elements' }}\n </button>\n <button class=\"sidebar-tab\"\n [class.active]=\"activeSidebarTab() === 'symbols'\"\n (click)=\"setActiveSidebarTab('symbols')\">\n Symbols\n </button>\n </div>\n <button class=\"sidebar-close\" (click)=\"toggleLeftPanel()\" title=\"Close panel\">\u00D7</button>\n </div>\n <div class=\"sidebar-content\">\n @if (activeSidebarTab() === 'elements') {\n <mm-element-palette\n (elementDragStart)=\"onPaletteDragStart($event)\"\n (elementDragEnd)=\"onPaletteDragEnd($event)\">\n </mm-element-palette>\n } @else {\n <mm-symbol-library-panel\n (symbolDragStart)=\"onSymbolDragStart($event)\"\n (symbolDragEnd)=\"onSymbolDragEnd()\">\n </mm-symbol-library-panel>\n }\n </div>\n </div>\n } @else {\n <div class=\"sidebar-collapsed left\" (click)=\"toggleLeftPanel()\" title=\"Show element palette\">\n <span class=\"collapsed-icon\">\u2630</span>\n </div>\n }\n } <!-- End of legacy left sidebar -->\n\n <!-- Canvas area (always visible) -->\n <div class=\"designer-canvas-container\"\n #canvasContainer\n data-testid=\"designer-canvas-container\"\n (mousedown)=\"onCanvasMouseDown($event)\"\n (mousemove)=\"onCanvasMouseMove($event)\"\n (mouseup)=\"onCanvasMouseUp($event)\"\n (wheel)=\"onCanvasWheel($event)\"\n (dragover)=\"onCanvasDragOver($event)\"\n (drop)=\"onCanvasDrop($event)\"\n (contextmenu)=\"onCanvasContextMenu($event)\">\n <svg class=\"designer-canvas\"\n data-testid=\"designer-canvas\"\n [attr.width]=\"scaledCanvasWidth()\"\n [attr.height]=\"scaledCanvasHeight()\"\n [attr.viewBox]=\"viewBox()\"\n preserveAspectRatio=\"xMinYMin meet\"\n [style.cursor]=\"canvasCursor()\"\n (mousedown)=\"onSvgMouseDown($event)\">\n\n <!-- Background (rendered first, behind everything) -->\n <!-- Canvas background color is set via CSS variable --designer-canvas-color for theme support -->\n <rect x=\"0\" y=\"0\"\n [attr.width]=\"canvasConfig().width\"\n [attr.height]=\"canvasConfig().height\"\n class=\"canvas-background\"\n pointer-events=\"none\"/>\n\n <!-- Grid (on top of background) -->\n <!-- Grid color is set via CSS variable --designer-grid-color for theme support -->\n @if (showGrid()) {\n <defs>\n <pattern id=\"designerGrid\" [attr.width]=\"gridSize()\" [attr.height]=\"gridSize()\"\n patternUnits=\"userSpaceOnUse\">\n <path [attr.d]=\"'M ' + gridSize() + ' 0 L 0 0 0 ' + gridSize()\"\n fill=\"none\" class=\"designer-grid-line\" stroke-width=\"0.5\"/>\n </pattern>\n </defs>\n <rect x=\"0\" y=\"0\"\n [attr.width]=\"canvasConfig().width\"\n [attr.height]=\"canvasConfig().height\"\n fill=\"url(#designerGrid)\"\n pointer-events=\"none\"/>\n }\n\n <!-- Invisible click capture layer (for clicking on empty canvas) -->\n <rect x=\"0\" y=\"0\"\n [attr.width]=\"canvasConfig().width\"\n [attr.height]=\"canvasConfig().height\"\n fill=\"transparent\"\n class=\"canvas-click-layer\"/>\n\n <!-- Connections (only in diagram mode) -->\n @if (editorMode === 'diagram') {\n @for (connection of diagram().connections; track connection.id) {\n <g class=\"connection\"\n [class.selected]=\"isConnectionSelected(connection.id)\"\n (mousedown)=\"onConnectionClick($event, connection)\">\n <path [attr.d]=\"getConnectionPath(connection)\"\n [attr.stroke]=\"connection.style.strokeColor\"\n [attr.stroke-width]=\"isConnectionSelected(connection.id) ? connection.style.strokeWidth + 2 : connection.style.strokeWidth\"\n fill=\"none\"\n stroke-linecap=\"round\"/>\n </g>\n }\n\n <!-- Elements in their actual z-order -->\n @for (element of orderedElements(); track element.id) {\n <g class=\"element\"\n [class.selected]=\"isElementSelected(element.id)\"\n [class.dragging]=\"dragState().isDragging && dragState().elementId === element.id\"\n [attr.transform]=\"getElementTransform(element)\"\n (mousedown)=\"onElementMouseDown($event, element)\"\n (contextmenu)=\"onElementContextMenu($event, element)\">\n\n <!-- Invisible hit area (larger than visual for easier clicking) -->\n <rect x=\"-4\" y=\"-4\"\n [attr.width]=\"element.size.width + 8\"\n [attr.height]=\"element.size.height + 8\"\n fill=\"transparent\"\n class=\"element-hit-area\"/>\n\n <!-- Element visual (simplified for designer) -->\n <rect x=\"0\" y=\"0\"\n [attr.width]=\"element.size.width\"\n [attr.height]=\"element.size.height\"\n [attr.fill]=\"getElementFill(element)\"\n [attr.stroke]=\"isElementSelected(element.id) ? '#1976d2' : getElementStroke(element)\"\n [attr.stroke-width]=\"isElementSelected(element.id) ? 2 : (element.style?.strokeWidth ?? 1)\"\n [attr.rx]=\"getElementRadius(element)\"\n [attr.opacity]=\"element.style?.opacity ?? 1\"\n pointer-events=\"none\"/>\n\n <!-- Element type icon/label -->\n <text class=\"element-label\"\n [attr.x]=\"element.size.width / 2\"\n [attr.y]=\"element.size.height / 2\"\n text-anchor=\"middle\"\n dominant-baseline=\"middle\"\n font-size=\"10\"\n fill=\"#666\">\n {{ getElementTypeLabel(element) }}\n </text>\n\n <!-- Element name -->\n @if (showElementNames()) {\n <text class=\"element-label\"\n [attr.x]=\"element.size.width / 2\"\n [attr.y]=\"element.size.height + 10\"\n text-anchor=\"middle\">\n {{ element.name }}\n </text>\n }\n\n <!-- Selection handles (zoom-scaled) -->\n @if (isElementSelected(element.id)) {\n <!-- Corner resize handles -->\n <rect class=\"resize-handle nw\" [attr.x]=\"-handleOffset()\" [attr.y]=\"-handleOffset()\" [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onResizeHandleMouseDown($event, element, 'nw')\"/>\n <rect class=\"resize-handle ne\" [attr.x]=\"element.size.width - handleOffset()\" [attr.y]=\"-handleOffset()\" [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onResizeHandleMouseDown($event, element, 'ne')\"/>\n <rect class=\"resize-handle sw\" [attr.x]=\"-handleOffset()\" [attr.y]=\"element.size.height - handleOffset()\" [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onResizeHandleMouseDown($event, element, 'sw')\"/>\n <rect class=\"resize-handle se\" [attr.x]=\"element.size.width - handleOffset()\" [attr.y]=\"element.size.height - handleOffset()\" [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onResizeHandleMouseDown($event, element, 'se')\"/>\n\n <!-- Connection ports -->\n <circle class=\"connection-port\" [attr.cx]=\"element.size.width / 2\" cy=\"0\" [attr.r]=\"portRadius()\" fill=\"#4caf50\"/>\n <circle class=\"connection-port\" [attr.cx]=\"element.size.width / 2\" [attr.cy]=\"element.size.height\" [attr.r]=\"portRadius()\" fill=\"#4caf50\"/>\n <circle class=\"connection-port\" cx=\"0\" [attr.cy]=\"element.size.height / 2\" [attr.r]=\"portRadius()\" fill=\"#4caf50\"/>\n <circle class=\"connection-port\" [attr.cx]=\"element.size.width\" [attr.cy]=\"element.size.height / 2\" [attr.r]=\"portRadius()\" fill=\"#4caf50\"/>\n }\n </g>\n }\n }\n\n <!-- Primitives in their actual z-order -->\n @for (primitive of orderedPrimitives(); track primitive.id) {\n <g class=\"primitive\"\n [attr.data-testid]=\"'primitive-' + primitive.type + '-' + primitive.id\"\n [class.selected]=\"isPrimitiveSelected(primitive.id)\"\n [class.dragging]=\"dragState().isDragging && dragState().elementId === primitive.id\"\n [attr.transform]=\"getPrimitiveTransform(primitive)\"\n (mousedown)=\"onPrimitiveMouseDown($event, primitive)\"\n (dblclick)=\"onPrimitiveDoubleClick(primitive)\"\n (contextmenu)=\"onPrimitiveContextMenu($event, primitive)\">\n\n <!-- Render based on primitive type -->\n <!-- Resolve style once for this primitive (class + inline merged) -->\n @let rs = resolveStyle(primitive);\n\n @switch (primitive.type) {\n @case ('rectangle') {\n @if (primitiveHasAnimations(primitive) || hasFillLevel(primitive)) {\n <!-- Rectangle with animations or fillLevel - use innerHTML for clip-path support -->\n <g [innerHTML]=\"getPrimitiveWithAnimationsSvg(primitive)\"></g>\n } @else {\n <rect [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config.width\"\n [attr.height]=\"$any(primitive).config.height\"\n [attr.fill]=\"rs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"rs.fill?.opacity ?? 1\"\n [attr.stroke]=\"isPrimitiveSelected(primitive.id) ? '#1976d2' : (rs.stroke?.color ?? 'none')\"\n [attr.stroke-opacity]=\"rs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"isPrimitiveSelected(primitive.id) ? selectionHighlightWidth() : (rs.stroke?.width ?? 1)\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(rs.stroke?.dashArray))\"\n [attr.rx]=\"$any(primitive).config.cornerRadiusX ?? $any(primitive).config.cornerRadius ?? 0\"\n [attr.ry]=\"$any(primitive).config.cornerRadiusY ?? $any(primitive).config.cornerRadius ?? 0\"/>\n }\n }\n @case ('ellipse') {\n @if (primitiveHasAnimations(primitive)) {\n <!-- Ellipse with animations -->\n <g [innerHTML]=\"getPrimitiveWithAnimationsSvg(primitive)\"></g>\n } @else {\n <ellipse [attr.cx]=\"primitive.position.x\"\n [attr.cy]=\"primitive.position.y\"\n [attr.rx]=\"$any(primitive).config.radiusX\"\n [attr.ry]=\"$any(primitive).config.radiusY\"\n [attr.fill]=\"rs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"rs.fill?.opacity ?? 1\"\n [attr.stroke]=\"isPrimitiveSelected(primitive.id) ? '#1976d2' : (rs.stroke?.color ?? 'none')\"\n [attr.stroke-opacity]=\"rs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"isPrimitiveSelected(primitive.id) ? selectionHighlightWidth() : (rs.stroke?.width ?? 1)\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(rs.stroke?.dashArray))\"/>\n }\n }\n @case ('line') {\n @if (primitiveHasAnimations(primitive)) {\n <!-- Line with animations -->\n <g [innerHTML]=\"getPrimitiveWithAnimationsSvg(primitive)\"></g>\n } @else {\n <line [attr.x1]=\"$any(primitive).config.start.x + primitive.position.x\"\n [attr.y1]=\"$any(primitive).config.start.y + primitive.position.y\"\n [attr.x2]=\"$any(primitive).config.end.x + primitive.position.x\"\n [attr.y2]=\"$any(primitive).config.end.y + primitive.position.y\"\n [attr.stroke]=\"isPrimitiveSelected(primitive.id) ? '#1976d2' : (rs.stroke?.color ?? 'none')\"\n [attr.stroke-opacity]=\"rs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"isPrimitiveSelected(primitive.id) ? 3 : (rs.stroke?.width ?? 2)\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(rs.stroke?.dashArray))\"/>\n }\n }\n @case ('path') {\n @if (primitiveHasAnimations(primitive)) {\n <!-- Path with animations -->\n <g [innerHTML]=\"getPrimitiveWithAnimationsSvg(primitive)\"></g>\n } @else {\n <path [attr.d]=\"$any(primitive).config.d\"\n [attr.transform]=\"'translate(' + primitive.position.x + ',' + primitive.position.y + ')'\"\n [attr.fill]=\"rs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"rs.fill?.opacity ?? 1\"\n [attr.fill-rule]=\"$any(primitive).config.fillRule\"\n [attr.stroke]=\"isPrimitiveSelected(primitive.id) ? '#1976d2' : (rs.stroke?.color ?? 'none')\"\n [attr.stroke-opacity]=\"rs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"isPrimitiveSelected(primitive.id) ? selectionHighlightWidth() : (rs.stroke?.width ?? 1)\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(rs.stroke?.dashArray))\"/>\n }\n }\n @case ('polygon') {\n @if (primitiveHasAnimations(primitive)) {\n <!-- Polygon with animations -->\n <g [innerHTML]=\"getPrimitiveWithAnimationsSvg(primitive)\"></g>\n } @else {\n <polygon [attr.points]=\"getPolygonPoints($any(primitive))\"\n [attr.fill]=\"rs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"rs.fill?.opacity ?? 1\"\n [attr.stroke]=\"isPrimitiveSelected(primitive.id) ? '#1976d2' : (rs.stroke?.color ?? 'none')\"\n [attr.stroke-opacity]=\"rs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"isPrimitiveSelected(primitive.id) ? selectionHighlightWidth() : (rs.stroke?.width ?? 1)\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(rs.stroke?.dashArray))\"/>\n }\n }\n @case ('polyline') {\n @if (primitiveHasAnimations(primitive)) {\n <!-- Polyline with animations -->\n <g [innerHTML]=\"getPrimitiveWithAnimationsSvg(primitive)\"></g>\n } @else {\n <polyline [attr.points]=\"getPolylinePoints($any(primitive))\"\n fill=\"none\"\n [attr.stroke]=\"isPrimitiveSelected(primitive.id) ? '#1976d2' : (rs.stroke?.color ?? '#333')\"\n [attr.stroke-opacity]=\"rs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"isPrimitiveSelected(primitive.id) ? 3 : (rs.stroke?.width ?? 2)\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(rs.stroke?.dashArray))\"/>\n }\n }\n @case ('text') {\n <text [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.fill]=\"$any(primitive).config.textStyle?.color ?? '#333'\"\n [attr.font-size]=\"$any(primitive).config.textStyle?.fontSize ?? 14\"\n [attr.font-family]=\"$any(primitive).config.textStyle?.fontFamily ?? 'Arial, sans-serif'\">\n {{ $any(primitive).config.content }}\n </text>\n }\n @case ('image') {\n @if ($any(primitive).config.src) {\n <!-- Render actual image when src is available -->\n <image [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config.width\"\n [attr.height]=\"$any(primitive).config.height\"\n [attr.href]=\"$any(primitive).config.src\"\n [attr.preserveAspectRatio]=\"$any(primitive).config.preserveAspectRatio !== false ? 'xMidYMid meet' : 'none'\"/>\n <!-- Selection border overlay -->\n @if (isPrimitiveSelected(primitive.id)) {\n <rect [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config.width\"\n [attr.height]=\"$any(primitive).config.height\"\n fill=\"none\"\n stroke=\"#1976d2\"\n [attr.stroke-width]=\"selectionHighlightWidth()\"\n stroke-dasharray=\"4 2\"/>\n }\n } @else {\n <!-- Placeholder when no src -->\n <rect [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config.width\"\n [attr.height]=\"$any(primitive).config.height\"\n fill=\"#f5f5f5\"\n [attr.stroke]=\"isPrimitiveSelected(primitive.id) ? '#1976d2' : '#ccc'\"\n [attr.stroke-width]=\"isPrimitiveSelected(primitive.id) ? selectionHighlightWidth() : 1\"\n stroke-dasharray=\"4 2\"/>\n <text class=\"primitive-label\"\n [attr.x]=\"primitive.position.x + $any(primitive).config.width / 2\"\n [attr.y]=\"primitive.position.y + $any(primitive).config.height / 2\"\n text-anchor=\"middle\"\n dominant-baseline=\"middle\"\n font-size=\"10\"\n fill=\"#999\">Image</text>\n }\n }\n @case ('group') {\n <!-- Groups render their fill/stroke if defined, children render separately -->\n @if (primitiveHasAnimations(primitive)) {\n <!-- Group with animations -->\n <g [innerHTML]=\"getPrimitiveWithAnimationsSvg(primitive)\"></g>\n } @else {\n @let groupBounds = getPrimitiveBoundingBox(primitive);\n <rect [attr.x]=\"groupBounds.x\"\n [attr.y]=\"groupBounds.y\"\n [attr.width]=\"groupBounds.width\"\n [attr.height]=\"groupBounds.height\"\n [attr.fill]=\"rs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"rs.fill?.opacity ?? 1\"\n [attr.stroke]=\"isPrimitiveSelected(primitive.id) ? '#1976d2' : (rs.stroke?.color ?? 'none')\"\n [attr.stroke-opacity]=\"rs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"isPrimitiveSelected(primitive.id) ? 1.5 : (rs.stroke?.width ?? 0)\"\n [attr.stroke-dasharray]=\"isPrimitiveSelected(primitive.id) ? '6 3' : (getStrokeDashArray($safeNavigationMigration(rs.stroke?.dashArray)))\"\n pointer-events=\"all\"/>\n }\n }\n }\n\n <!-- Primitive name label -->\n @if (showElementNames() && primitive.name) {\n <text class=\"primitive-label\"\n [attr.x]=\"getPrimitiveBoundingBox(primitive).x + getPrimitiveBoundingBox(primitive).width / 2\"\n [attr.y]=\"getPrimitiveBoundingBox(primitive).y + getPrimitiveBoundingBox(primitive).height + 10\"\n text-anchor=\"middle\">\n {{ primitive.name }}\n </text>\n }\n\n <!-- Selection handles for primitives -->\n @if (isPrimitiveSelected(primitive.id)) {\n @let bbox = getPrimitiveBoundingBox(primitive);\n @if (primitive.type === 'line') {\n <!-- Line-specific endpoint handles -->\n @let lineConfig = $any(primitive).config;\n <!-- Start endpoint handle (zoom-scaled) -->\n <circle class=\"endpoint-handle\"\n [attr.cx]=\"lineConfig.start.x + primitive.position.x\"\n [attr.cy]=\"lineConfig.start.y + primitive.position.y\"\n [attr.r]=\"portRadius() + 1\"\n fill=\"#1976d2\"\n stroke=\"white\"\n [attr.stroke-width]=\"selectionHighlightWidth()\"\n (mousedown)=\"onLineEndpointMouseDown($event, primitive, 'start')\"/>\n <!-- End endpoint handle (zoom-scaled) -->\n <circle class=\"endpoint-handle\"\n [attr.cx]=\"lineConfig.end.x + primitive.position.x\"\n [attr.cy]=\"lineConfig.end.y + primitive.position.y\"\n [attr.r]=\"portRadius() + 1\"\n fill=\"#1976d2\"\n stroke=\"white\"\n [attr.stroke-width]=\"selectionHighlightWidth()\"\n (mousedown)=\"onLineEndpointMouseDown($event, primitive, 'end')\"/>\n } @else if (primitive.type === 'polyline' || primitive.type === 'polygon') {\n <!-- Polyline/Polygon point handles (zoom-scaled) -->\n @for (point of getPolyPoints(primitive); track point.index) {\n <circle class=\"endpoint-handle\"\n [class.selected]=\"isPolyPointSelected(primitive.id, point.index)\"\n [attr.cx]=\"point.x\"\n [attr.cy]=\"point.y\"\n [attr.r]=\"portRadius()\"\n [attr.fill]=\"isPolyPointSelected(primitive.id, point.index) ? '#ff5722' : '#1976d2'\"\n stroke=\"white\"\n [attr.stroke-width]=\"selectionHighlightWidth()\"\n (mousedown)=\"onPolyPointMouseDown($event, primitive, point.index)\"/>\n }\n } @else {\n <!-- Selection outline (zoom-scaled) -->\n <rect [attr.x]=\"bbox.x - selectionPadding()\"\n [attr.y]=\"bbox.y - selectionPadding()\"\n [attr.width]=\"bbox.width + selectionPadding() * 2\"\n [attr.height]=\"bbox.height + selectionPadding() * 2\"\n fill=\"none\"\n stroke=\"#1976d2\"\n [attr.stroke-width]=\"selectionStrokeWidth()\"\n [attr.stroke-dasharray]=\"selectionDashArray()\"\n pointer-events=\"none\"/>\n <!-- Corner handles (zoom-scaled) -->\n <rect class=\"resize-handle nw\" [attr.x]=\"bbox.x - handleOffset()\" [attr.y]=\"bbox.y - handleOffset()\" [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onPrimitiveResizeHandleMouseDown($event, primitive, 'nw')\"/>\n <rect class=\"resize-handle ne\" [attr.x]=\"bbox.x + bbox.width - handleOffset()\" [attr.y]=\"bbox.y - handleOffset()\" [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onPrimitiveResizeHandleMouseDown($event, primitive, 'ne')\"/>\n <rect class=\"resize-handle sw\" [attr.x]=\"bbox.x - handleOffset()\" [attr.y]=\"bbox.y + bbox.height - handleOffset()\" [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onPrimitiveResizeHandleMouseDown($event, primitive, 'sw')\"/>\n <rect class=\"resize-handle se\" [attr.x]=\"bbox.x + bbox.width - handleOffset()\" [attr.y]=\"bbox.y + bbox.height - handleOffset()\" [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onPrimitiveResizeHandleMouseDown($event, primitive, 'se')\"/>\n\n <!-- Animation origin indicator (crosshair, zoom-scaled) -->\n @if (primitiveHasAnimations(primitive)) {\n @let origin = getAnimationOrigin(primitive);\n @if (origin) {\n <g class=\"animation-origin-indicator\" pointer-events=\"none\">\n <!-- Outer circle -->\n <circle [attr.cx]=\"origin.x\" [attr.cy]=\"origin.y\" [attr.r]=\"handleSize()\"\n fill=\"none\" stroke=\"#ff5722\" [attr.stroke-width]=\"selectionHighlightWidth()\" opacity=\"0.8\"/>\n <!-- Inner dot -->\n <circle [attr.cx]=\"origin.x\" [attr.cy]=\"origin.y\" [attr.r]=\"selectionPadding()\"\n fill=\"#ff5722\" opacity=\"0.9\"/>\n <!-- Crosshair lines -->\n <line [attr.x1]=\"origin.x - handleSize() * 1.5\" [attr.y1]=\"origin.y\"\n [attr.x2]=\"origin.x - portRadius()\" [attr.y2]=\"origin.y\"\n stroke=\"#ff5722\" [attr.stroke-width]=\"selectionHighlightWidth()\" opacity=\"0.8\"/>\n <line [attr.x1]=\"origin.x + portRadius()\" [attr.y1]=\"origin.y\"\n [attr.x2]=\"origin.x + handleSize() * 1.5\" [attr.y2]=\"origin.y\"\n stroke=\"#ff5722\" [attr.stroke-width]=\"selectionHighlightWidth()\" opacity=\"0.8\"/>\n <line [attr.x1]=\"origin.x\" [attr.y1]=\"origin.y - handleSize() * 1.5\"\n [attr.x2]=\"origin.x\" [attr.y2]=\"origin.y - portRadius()\"\n stroke=\"#ff5722\" [attr.stroke-width]=\"selectionHighlightWidth()\" opacity=\"0.8\"/>\n <line [attr.x1]=\"origin.x\" [attr.y1]=\"origin.y + portRadius()\"\n [attr.x2]=\"origin.x\" [attr.y2]=\"origin.y + handleSize() * 1.5\"\n stroke=\"#ff5722\" [attr.stroke-width]=\"selectionHighlightWidth()\" opacity=\"0.8\"/>\n </g>\n }\n }\n }\n }\n </g>\n }\n\n <!-- Symbol Instances -->\n @for (symbolInstance of orderedSymbols(); track symbolInstance.id) {\n @let symbolDef = getSymbolDefinition(symbolInstance);\n @let instanceDirectEffects = symbolInstanceDirectEffects().get(symbolInstance.id);\n @if (symbolDef) {\n <g class=\"symbol-instance\"\n [class.selected]=\"isSymbolSelected(symbolInstance.id)\"\n [class.dragging]=\"dragState().isDragging && dragState().elementId === symbolInstance.id\"\n [attr.transform]=\"getSymbolTransform(symbolInstance, symbolDef)\"\n [attr.opacity]=\"instanceDirectEffects?.['style.opacity'] ?? 1\"\n (mousedown)=\"onSymbolMouseDown($event, symbolInstance)\"\n (contextmenu)=\"onSymbolContextMenu($event, symbolInstance)\">\n\n <!-- Invisible hit area for easier selection -->\n <rect x=\"-4\" y=\"-4\"\n [attr.width]=\"symbolDef.bounds.width + 8\"\n [attr.height]=\"symbolDef.bounds.height + 8\"\n fill=\"transparent\"\n class=\"symbol-hit-area\"/>\n\n <!-- Render symbol primitives (including nested symbol instances) with direct effects applied -->\n @let symPropValues = symbolInstancePropertyValues().get(symbolInstance.id) ?? symbolInstance.propertyValues ?? {};\n @let symPrimitives = getSymbolPrimitivesWithDirectEffects(symbolInstance, symbolDef, symPropValues);\n @let animatedGroupChildIds = getAnimatedGroupChildIds(symbolDef);\n @for (primitive of symPrimitives; track primitive.id) {\n <!-- Skip invisible primitives and children of animated groups (rendered inside their group) -->\n @if (primitive.visible !== false && !animatedGroupChildIds.has(primitive.id)) {\n <!-- Check if primitive has animations - use innerHTML binding for animated primitives -->\n @if (symbolPrimitiveHasAnimations(primitive) || (primitive.fillLevel !== undefined && primitive.fillLevel >= 0 && primitive.fillLevel <= 1)) {\n <!-- Primitive with animations or fillLevel - use innerHTML for SVG animation support -->\n <g [attr.transform]=\"getPrimitiveTransform(primitive)\"\n [attr.opacity]=\"primitive.style?.opacity ?? 1\"\n [innerHTML]=\"getSymbolPrimitiveWithAnimationsSvg(primitive, symbolDef, symPropValues, symbolDef.styleClasses, symPrimitives)\"></g>\n } @else {\n <!-- Static primitive without animations -->\n <!-- Resolve style using symbol's styleClasses -->\n @let srs = resolveStyleWithClasses(primitive, symbolDef.styleClasses);\n <!-- Wrapper group for transform effects and overall opacity -->\n <g [attr.transform]=\"getPrimitiveTransform(primitive)\"\n [attr.opacity]=\"primitive.style?.opacity ?? 1\">\n @switch (primitive.type) {\n @case ('rectangle') {\n <!-- Standard rectangle without fillLevel -->\n <rect [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config.width\"\n [attr.height]=\"$any(primitive).config.height\"\n [attr.fill]=\"srs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"srs.fill?.opacity ?? 1\"\n [attr.stroke]=\"srs.stroke?.color ?? 'none'\"\n [attr.stroke-opacity]=\"srs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"srs.stroke?.width ?? 1\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(srs.stroke?.dashArray))\"\n [attr.rx]=\"$any(primitive).config.cornerRadiusX ?? $any(primitive).config.cornerRadius ?? 0\"\n [attr.ry]=\"$any(primitive).config.cornerRadiusY ?? $any(primitive).config.cornerRadius ?? 0\"/>\n }\n @case ('ellipse') {\n <ellipse [attr.cx]=\"primitive.position.x\"\n [attr.cy]=\"primitive.position.y\"\n [attr.rx]=\"$any(primitive).config.radiusX\"\n [attr.ry]=\"$any(primitive).config.radiusY\"\n [attr.fill]=\"srs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"srs.fill?.opacity ?? 1\"\n [attr.stroke]=\"srs.stroke?.color ?? 'none'\"\n [attr.stroke-opacity]=\"srs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"srs.stroke?.width ?? 1\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(srs.stroke?.dashArray))\"/>\n }\n @case ('line') {\n <line [attr.x1]=\"$any(primitive).config.start.x + primitive.position.x\"\n [attr.y1]=\"$any(primitive).config.start.y + primitive.position.y\"\n [attr.x2]=\"$any(primitive).config.end.x + primitive.position.x\"\n [attr.y2]=\"$any(primitive).config.end.y + primitive.position.y\"\n [attr.stroke]=\"srs.stroke?.color ?? 'none'\"\n [attr.stroke-opacity]=\"srs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"srs.stroke?.width ?? 2\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(srs.stroke?.dashArray))\"/>\n }\n @case ('path') {\n <path [attr.d]=\"$any(primitive).config.d\"\n [attr.transform]=\"'translate(' + primitive.position.x + ',' + primitive.position.y + ')'\"\n [attr.fill]=\"srs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"srs.fill?.opacity ?? 1\"\n [attr.fill-rule]=\"$any(primitive).config.fillRule\"\n [attr.stroke]=\"srs.stroke?.color ?? 'none'\"\n [attr.stroke-opacity]=\"srs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"srs.stroke?.width ?? 1\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(srs.stroke?.dashArray))\"/>\n }\n @case ('polygon') {\n <polygon [attr.points]=\"getPolygonPoints($any(primitive))\"\n [attr.fill]=\"srs.fill?.color ?? 'none'\"\n [attr.fill-opacity]=\"srs.fill?.opacity ?? 1\"\n [attr.stroke]=\"srs.stroke?.color ?? 'none'\"\n [attr.stroke-opacity]=\"srs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"srs.stroke?.width ?? 1\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(srs.stroke?.dashArray))\"/>\n }\n @case ('polyline') {\n <polyline [attr.points]=\"getPolylinePoints($any(primitive))\"\n fill=\"none\"\n [attr.stroke]=\"srs.stroke?.color ?? 'none'\"\n [attr.stroke-opacity]=\"srs.stroke?.opacity ?? 1\"\n [attr.stroke-width]=\"srs.stroke?.width ?? 2\"\n [attr.stroke-dasharray]=\"getStrokeDashArray($safeNavigationMigration(srs.stroke?.dashArray))\"/>\n }\n @case ('text') {\n <text [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.fill]=\"$any(primitive).config.textStyle?.color ?? '#333'\"\n [attr.font-size]=\"$any(primitive).config.textStyle?.fontSize ?? 14\"\n [attr.font-family]=\"$any(primitive).config.textStyle?.fontFamily ?? 'Arial, sans-serif'\">\n {{ $any(primitive).config.content }}\n </text>\n }\n @case ('image') {\n @if ($any(primitive).config.src) {\n @if ($any(primitive).config.sourceType === 'svg') {\n <!-- SVG content embedded via foreignObject -->\n <foreignObject [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config.width\"\n [attr.height]=\"$any(primitive).config.height\"\n [innerHTML]=\"getSafeHtml($any(primitive).config.src)\"></foreignObject>\n } @else {\n <!-- URL or data URL image -->\n <image [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config.width\"\n [attr.height]=\"$any(primitive).config.height\"\n [attr.href]=\"$any(primitive).config.src\"\n [attr.preserveAspectRatio]=\"$any(primitive).config.preserveAspectRatio !== false ? 'xMidYMid meet' : 'none'\"/>\n }\n } @else {\n <!-- Placeholder when no src -->\n <rect [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config.width\"\n [attr.height]=\"$any(primitive).config.height\"\n fill=\"#f5f5f5\"\n stroke=\"#ccc\"\n stroke-width=\"1\"\n stroke-dasharray=\"4 2\"/>\n <text [attr.x]=\"primitive.position.x + $any(primitive).config.width / 2\"\n [attr.y]=\"primitive.position.y + $any(primitive).config.height / 2\"\n text-anchor=\"middle\"\n dominant-baseline=\"middle\"\n font-size=\"10\"\n fill=\"#999\">Image</text>\n }\n }\n }\n </g>\n }\n }\n }\n\n <!-- Symbol name label -->\n @if (showElementNames() && symbolInstance.name) {\n <text class=\"symbol-label\"\n [attr.x]=\"symbolDef.bounds.width / 2\"\n [attr.y]=\"symbolDef.bounds.height + 10\"\n text-anchor=\"middle\">\n {{ symbolInstance.name }}\n </text>\n }\n\n <!-- Selection handles for symbols (zoom-scaled) -->\n @if (isSymbolSelected(symbolInstance.id)) {\n <!-- Selection outline -->\n <rect [attr.x]=\"-selectionPadding()\" [attr.y]=\"-selectionPadding()\"\n [attr.width]=\"symbolDef.bounds.width + selectionPadding() * 2\"\n [attr.height]=\"symbolDef.bounds.height + selectionPadding() * 2\"\n fill=\"none\"\n stroke=\"#1976d2\"\n [attr.stroke-width]=\"selectionHighlightWidth()\"\n [attr.stroke-dasharray]=\"selectionDashArray()\"\n pointer-events=\"none\"/>\n <!-- Corner handles -->\n <rect class=\"resize-handle nw\" [attr.x]=\"-handleOffset()\" [attr.y]=\"-handleOffset()\"\n [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onSymbolResizeHandleMouseDown($event, symbolInstance, 'nw')\"/>\n <rect class=\"resize-handle ne\" [attr.x]=\"symbolDef.bounds.width - handleOffset()\" [attr.y]=\"-handleOffset()\"\n [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onSymbolResizeHandleMouseDown($event, symbolInstance, 'ne')\"/>\n <rect class=\"resize-handle sw\" [attr.x]=\"-handleOffset()\" [attr.y]=\"symbolDef.bounds.height - handleOffset()\"\n [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onSymbolResizeHandleMouseDown($event, symbolInstance, 'sw')\"/>\n <rect class=\"resize-handle se\" [attr.x]=\"symbolDef.bounds.width - handleOffset()\" [attr.y]=\"symbolDef.bounds.height - handleOffset()\"\n [attr.width]=\"handleSize()\" [attr.height]=\"handleSize()\" fill=\"#1976d2\"\n (mousedown)=\"onSymbolResizeHandleMouseDown($event, symbolInstance, 'se')\"/>\n }\n </g>\n }\n }\n\n <!-- Selection Overlay Layer (always on top for visual feedback, zoom-scaled) -->\n <g class=\"selection-overlay\" pointer-events=\"none\">\n <!-- Element selection indicators (only in diagram mode) -->\n @if (editorMode === 'diagram') {\n @for (element of selectedElements(); track element.id) {\n <rect [attr.x]=\"element.position.x - selectionPadding()\"\n [attr.y]=\"element.position.y - selectionPadding()\"\n [attr.width]=\"element.size.width + selectionPadding() * 2\"\n [attr.height]=\"element.size.height + selectionPadding() * 2\"\n fill=\"none\"\n stroke=\"#1976d2\"\n [attr.stroke-width]=\"selectionStrokeWidth()\"\n [attr.stroke-dasharray]=\"selectionDashArray()\"\n class=\"selection-indicator\"/>\n }\n }\n <!-- Primitive selection indicators -->\n @for (primitive of selectedPrimitives(); track primitive.id) {\n @let bbox = getPrimitiveBoundingBox(primitive);\n <rect [attr.x]=\"bbox.x - selectionPadding()\"\n [attr.y]=\"bbox.y - selectionPadding()\"\n [attr.width]=\"bbox.width + selectionPadding() * 2\"\n [attr.height]=\"bbox.height + selectionPadding() * 2\"\n fill=\"none\"\n stroke=\"#1976d2\"\n [attr.stroke-width]=\"selectionStrokeWidth()\"\n [attr.stroke-dasharray]=\"selectionDashArray()\"\n class=\"selection-indicator\"/>\n }\n <!-- Symbol selection indicators -->\n @for (symbolInstance of selectedSymbols(); track symbolInstance.id) {\n @let symbolDef = getSymbolDefinition(symbolInstance);\n @if (symbolDef) {\n @let bbox = getSymbolBoundingBox(symbolInstance, symbolDef);\n <rect [attr.x]=\"bbox.x - selectionPadding()\"\n [attr.y]=\"bbox.y - selectionPadding()\"\n [attr.width]=\"bbox.width + selectionPadding() * 2\"\n [attr.height]=\"bbox.height + selectionPadding() * 2\"\n fill=\"none\"\n stroke=\"#1976d2\"\n [attr.stroke-width]=\"selectionStrokeWidth()\"\n [attr.stroke-dasharray]=\"selectionDashArray()\"\n class=\"selection-indicator\"/>\n }\n }\n </g>\n\n <!-- Selection rectangle (for marquee selection, zoom-scaled) -->\n @if (selectionRect()) {\n <rect [attr.x]=\"selectionRect()!.x\"\n [attr.y]=\"selectionRect()!.y\"\n [attr.width]=\"selectionRect()!.width\"\n [attr.height]=\"selectionRect()!.height\"\n fill=\"rgba(25, 118, 210, 0.1)\"\n stroke=\"#1976d2\"\n [attr.stroke-width]=\"selectionStrokeWidth()\"\n [attr.stroke-dasharray]=\"selectionDashArray()\"/>\n }\n\n <!-- Alignment Guides (shown during drag) -->\n @for (guide of alignmentGuides(); track $index) {\n @if (guide.type === 'horizontal') {\n <line [attr.x1]=\"guide.start\"\n [attr.y1]=\"guide.position\"\n [attr.x2]=\"guide.end\"\n [attr.y2]=\"guide.position\"\n stroke=\"#ff4081\"\n [attr.stroke-width]=\"guideStrokeWidth()\"\n pointer-events=\"none\"/>\n } @else {\n <line [attr.x1]=\"guide.position\"\n [attr.y1]=\"guide.start\"\n [attr.x2]=\"guide.position\"\n [attr.y2]=\"guide.end\"\n stroke=\"#ff4081\"\n [attr.stroke-width]=\"guideStrokeWidth()\"\n pointer-events=\"none\"/>\n }\n }\n </svg>\n </div>\n\n <!-- Property Inspector (right sidebar - legacy mode only) -->\n @if (!useDockview) {\n @if (showRightPanel()) {\n <div class=\"designer-inspector-container\">\n <div class=\"inspector-header\">\n <span class=\"inspector-title\">Properties</span>\n <button class=\"sidebar-close\" (click)=\"toggleRightPanel()\" title=\"Close panel\">\u00D7</button>\n </div>\n <mm-property-inspector\n class=\"designer-inspector\"\n [selectedElements]=\"selectedElements()\"\n [selectedConnections]=\"selectedConnections()\"\n [selectedPrimitives]=\"selectedPrimitives()\"\n [selectedSymbolInstances]=\"selectedSymbols()\"\n [symbolDefinitions]=\"symbolDefinitionsMap()\"\n [availableStyleClasses]=\"styleClasses\"\n (propertyChange)=\"onPropertyChange($event)\">\n </mm-property-inspector>\n </div>\n } @else {\n <div class=\"sidebar-collapsed right\" (click)=\"toggleRightPanel()\" title=\"Show properties\">\n <span class=\"collapsed-icon\">\u2699</span>\n </div>\n }\n }\n </div>\n\n <!-- Context Menu -->\n @if (contextMenu().visible) {\n <mm-context-menu\n [position]=\"contextMenu().position\"\n [items]=\"contextMenuItems()\"\n (action)=\"onContextMenuAction($event)\"\n (closed)=\"closeContextMenu()\">\n </mm-context-menu>\n }\n\n <!-- Path Editor Dialog -->\n @if (pathEditorVisible()) {\n <kendo-dialog\n title=\"Edit Path\"\n [width]=\"500\"\n [height]=\"500\"\n (close)=\"closePathEditor()\">\n <mm-path-editor\n [pathData]=\"editingPathData()\"\n [width]=\"460\"\n [height]=\"280\"\n (pathChange)=\"onPathEditorChange($event)\">\n </mm-path-editor>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"closePathEditor()\">Done</button>\n </kendo-dialog-actions>\n </kendo-dialog>\n }\n\n <!-- Binding Editor Dialog -->\n <mm-binding-editor-dialog\n [show]=\"showBindingEditor()\"\n [property]=\"editingBindingProperty()\"\n [existingBindings]=\"effectivePropertyBindings()\"\n [primitives]=\"diagram().primitives ?? []\"\n [symbolInstances]=\"diagram().symbolInstances ?? []\"\n [symbolDefinitions]=\"symbolDefinitionsMap()\"\n (closed)=\"closeBindingEditor()\"\n (saved)=\"onBindingsSaved($event)\">\n </mm-binding-editor-dialog>\n\n <!-- Status bar -->\n <div class=\"designer-statusbar\">\n <span class=\"diagram-name\" title=\"Diagram name\">{{ diagram().name }}</span>\n <span class=\"statusbar-divider\">|</span>\n <span>Primitives: {{ (diagram().primitives ?? []).length }}</span>\n <span>Symbols: {{ (diagram().symbolInstances ?? []).length }}</span>\n @if (editorMode === 'diagram') {\n <span>Elements: {{ diagram().elements.length }}</span>\n <span>Connections: {{ diagram().connections.length }}</span>\n }\n <span>Selected: {{ selection().elements.size + selection().connections.size }}</span>\n @if (hasChanges()) {\n <span class=\"unsaved-indicator\">* Unsaved</span>\n }\n </div>\n</div>\n", styles: [":host{--designer-bg: #f5f5f5;--designer-surface: #ffffff;--designer-surface-alt: #f5f5f5;--designer-border: #e0e0e0;--designer-text: #333333;--designer-text-muted: #666666;--designer-accent: #1976d2;--designer-accent-secondary: #1565c0;--designer-canvas-bg: #e8e8e8;--designer-hover-bg: #eeeeee;--designer-canvas-color: #fafafa;--designer-grid-color: #e0e0e0;display:flex;flex-direction:column;flex:1;width:100%;height:100%;min-height:0;overflow:hidden}.process-designer{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;background:var(--designer-bg);outline:none;overflow:hidden}.designer-toolbar{flex-shrink:0;border-bottom:1px solid var(--designer-border)}.zoom-level{min-width:40px;text-align:center;font-size:12px;padding:0 .25rem;color:var(--designer-text)}.k-menu-separator{height:1px;margin:4px 0;background-color:var(--designer-border)}.designer-content{display:flex;flex:1;height:100%;min-height:0;overflow:hidden}.designer-sidebar{width:220px;display:flex;flex-direction:column;border-right:1px solid var(--designer-border);background:var(--designer-surface)}.sidebar-header{display:flex;align-items:stretch;border-bottom:1px solid var(--designer-border)}.sidebar-tabs{display:flex;flex:1}.sidebar-tab{flex:1;padding:.5rem;background:var(--designer-surface-alt);border:none;border-bottom:2px solid transparent;font-size:12px;font-weight:500;color:var(--designer-text-muted);cursor:pointer;transition:all .15s ease}.sidebar-tab:hover{background:var(--designer-hover-bg);color:var(--designer-text)}.sidebar-tab.active{background:var(--designer-surface);border-bottom-color:var(--designer-accent);color:var(--designer-accent)}.sidebar-content{flex:1;overflow-y:auto}.sidebar-close{width:28px;background:transparent;border:none;border-left:1px solid var(--designer-border);cursor:pointer;font-size:16px;color:var(--designer-text-muted);display:flex;align-items:center;justify-content:center}.sidebar-close:hover{background:var(--designer-hover-bg);color:var(--designer-accent)}.sidebar-collapsed{width:28px;background:var(--designer-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease;writing-mode:vertical-rl;text-orientation:mixed}.sidebar-collapsed.left{border-right:1px solid var(--designer-border)}.sidebar-collapsed.right{border-left:1px solid var(--designer-border)}.sidebar-collapsed:hover{background:var(--designer-surface-alt)}.sidebar-collapsed .collapsed-icon{font-size:14px;color:var(--designer-text-muted)}.designer-inspector-container{width:280px;display:flex;flex-direction:column;border-left:1px solid var(--designer-border);background:var(--designer-surface)}.inspector-header{display:flex;align-items:center;padding:0 .5rem;height:32px;border-bottom:1px solid var(--designer-border);background:var(--designer-surface-alt)}.inspector-header .inspector-title{flex:1;font-size:12px;font-weight:500;color:var(--designer-text)}.designer-canvas-container{flex:1 1 auto;min-width:0;min-height:0;height:100%;overflow:auto;background:var(--designer-canvas-bg);position:relative;box-sizing:border-box;display:flex;padding:20px}.designer-canvas{display:block;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;box-shadow:0 2px 8px #0000001a;margin:auto;flex-shrink:0}.designer-canvas .element-label,.designer-canvas .primitive-label,.designer-canvas .symbol-label{user-select:none;-webkit-user-select:none;pointer-events:none;fill:#aaa;font-size:8px}.canvas-background{cursor:default;fill:var(--designer-canvas-color)}.designer-grid-line{stroke:var(--designer-grid-color)}.designer-inspector{flex:1;overflow-y:auto}.element,.element.selected{cursor:move}.element.dragging{opacity:.7}.element.dragging .element-hit-area{cursor:grabbing}.element-hit-area,.primitive,.primitive.selected{cursor:move}.primitive.dragging{opacity:.7}.symbol-instance,.symbol-instance.selected{cursor:move}.symbol-instance.dragging{opacity:.7}.symbol-instance.dragging .symbol-hit-area{cursor:grabbing}.symbol-hit-area{cursor:move}.resize-handle{cursor:pointer}.resize-handle.nw,.resize-handle.se{cursor:nwse-resize}.resize-handle.ne,.resize-handle.sw{cursor:nesw-resize}.endpoint-handle{cursor:move;transition:r .15s ease,fill .15s ease}.endpoint-handle:hover{r:8}.endpoint-handle.selected{r:7}.connection-port{cursor:crosshair;opacity:.7}.connection-port:hover{opacity:1}.connection{cursor:pointer}.connection.selected path{stroke:#1976d2!important}.selection-overlay .selection-indicator{animation:marching-ants .5s linear infinite}@keyframes marching-ants{0%{stroke-dashoffset:0}to{stroke-dashoffset:6}}.designer-statusbar{flex-shrink:0;display:flex;gap:1rem;padding:.25rem .5rem;background:var(--designer-surface);border-top:1px solid var(--designer-border);font-size:11px;color:var(--designer-text-muted)}.diagram-name{font-weight:500;color:var(--designer-text)}.statusbar-divider{color:var(--designer-border)}.unsaved-indicator{color:#f57c00;font-weight:500}:host{--dv-background-color: var(--designer-bg, #f5f5f5);--dv-pane-background-color: var(--designer-surface, #ffffff);--dv-activegroup-visiblepanel-tab-background-color: var(--designer-surface, #ffffff);--dv-activegroup-hiddenpanel-tab-background-color: var(--designer-surface-alt, #f0f0f0);--dv-inactivegroup-visiblepanel-tab-background-color: var(--designer-surface-alt, #f5f5f5);--dv-inactivegroup-hiddenpanel-tab-background-color: #e8e8e8;--dv-activegroup-visiblepanel-tab-color: var(--designer-accent, #1976d2);--dv-activegroup-hiddenpanel-tab-color: var(--designer-text-muted, #666666);--dv-inactivegroup-visiblepanel-tab-color: var(--designer-text, #333333);--dv-inactivegroup-hiddenpanel-tab-color: #888888;--dv-separator-border: 1px solid var(--designer-border, #e0e0e0);--dv-tabs-and-actions-container-background-color: var(--designer-surface-alt, #f5f5f5);--dv-group-view-background-color: var(--designer-surface, #ffffff);--dv-tab-active-border-bottom: 2px solid var(--designer-accent, #1976d2);--dv-drag-over-background-color: rgba(25, 118, 210, .15);--dv-drag-over-border-color: var(--designer-accent, #1976d2);--dv-sash-color: var(--designer-border, #e0e0e0);--dv-sash-hover-color: var(--designer-accent, #1976d2)}.designer-content.dockview-enabled{display:flex;position:relative;height:100%;min-height:0}.dockview-panels-container{width:400px;min-width:280px;max-width:600px;flex:0 0 400px;height:100%;border-right:1px solid var(--designer-border);position:relative;overflow:hidden}.designer-dockview{position:absolute;inset:0;width:100%;height:100%}.dockview-resize-handle{width:6px;height:100%;cursor:ew-resize;background:transparent;position:relative;flex-shrink:0;z-index:10;transition:background-color .2s ease}.dockview-resize-handle:before{content:\"\";position:absolute;top:0;left:50%;transform:translate(-50%);width:2px;height:100%;background:var(--designer-border, rgba(100, 206, 185, .3));transition:background-color .2s ease,width .2s ease}.dockview-resize-handle:hover{background:#64ceb91a}.dockview-resize-handle:hover:before{width:4px;background:var(--octo-mint, #64ceb9)}.dockview-resize-handle:active{background:#64ceb926}.dockview-resize-handle:active:before{width:4px;background:var(--octo-mint, #64ceb9)}::ng-deep mm-elements-panel,::ng-deep mm-symbols-panel,::ng-deep mm-properties-panel,::ng-deep mm-transform-panel,::ng-deep mm-animations-panel,::ng-deep mm-styles-panel,::ng-deep mm-settings-panel,::ng-deep mm-simulation-panel-wrapper{display:block;height:100%;overflow:hidden}::ng-deep mm-elements-panel .panel-container,::ng-deep mm-symbols-panel .panel-container,::ng-deep mm-properties-panel .panel-container,::ng-deep mm-transform-panel .panel-container,::ng-deep mm-animations-panel .panel-container,::ng-deep mm-styles-panel .panel-container,::ng-deep mm-settings-panel .panel-container,::ng-deep mm-simulation-panel-wrapper .panel-container{height:100%;overflow:auto;background:var(--dv-pane-background-color, var(--designer-surface, #ffffff));color:var(--designer-text, #333333)}\n"], dependencies: [{ kind: "directive", type: MmDialogActionsDirective, selector: "kendo-dialog-actions" }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i2$2.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: i2$2.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: i2$2.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "fillMode", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "component", type: i2$2.ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: ["arrowIcon", "title", "showText", "showIcon", "text", "icon", "svgIcon", "iconClass", "imageUrl", "popupSettings", "look", "primary", "fillMode", "themeColor", "buttonClass", "textField", "disabled", "data"], outputs: ["itemClick", "open", "close"], exportAs: ["kendoToolBarDropDownButton"] }, { kind: "component", type: i2$2.ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { kind: "component", type: i2$2.ToolBarSpacerComponent, selector: "kendo-toolbar-spacer", exportAs: ["kendoToolBarSpacer"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "ngmodule", type: InputsModule }, { kind: "ngmodule", type: DropDownsModule }, { kind: "ngmodule", type: DialogsModule }, { kind: "component", type: i3.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i3.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ElementPaletteComponent, selector: "mm-element-palette", outputs: ["elementDragStart", "elementDragEnd"] }, { kind: "component", type: SymbolLibraryPanelComponent, selector: "mm-symbol-library-panel", outputs: ["symbolDragStart", "symbolDragEnd"] }, { kind: "component", type: PropertyInspectorComponent, selector: "mm-property-inspector", inputs: ["selectedElements", "selectedConnections", "selectedPrimitives", "selectedSymbolInstances", "symbolDefinitions", "availableStyleClasses"], outputs: ["propertyChange"] }, { kind: "component", type: ContextMenuComponent, selector: "mm-context-menu", inputs: ["position", "items"], outputs: ["action", "closed"] }, { kind: "component", type: PathEditorComponent, selector: "mm-path-editor", inputs: ["pathData", "width", "height", "gridSize", "snapToGrid"], outputs: ["pathChange"] }, { kind: "component", type: DockviewComponent, selector: "mm-dockview", inputs: ["components", "tabComponents", "watermarkComponent", "defaultTabComponent", "leftHeaderActionsComponent", "rightHeaderActionsComponent", "prefixHeaderActionsComponent", "className", "hideBorders", "locked", "disableAutoResizing", "disableFloatingGroups"], outputs: ["ready", "didDrop", "willDrop"] }, { kind: "component", type: BindingEditorDialogComponent, selector: "mm-binding-editor-dialog", inputs: ["show", "property", "existingBindings", "primitives", "symbolInstances", "symbolDefinitions"], outputs: ["closed", "saved"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
27543
27543
|
}
|
|
27544
27544
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ProcessDesignerComponent, decorators: [{
|
|
27545
27545
|
type: Component,
|
|
27546
27546
|
args: [{ selector: 'mm-process-designer', standalone: true, imports: [
|
|
27547
|
+
MmDialogActionsDirective,
|
|
27547
27548
|
CommonModule,
|
|
27548
27549
|
FormsModule,
|
|
27549
27550
|
ButtonsModule,
|
|
@@ -30242,17 +30243,18 @@ class SymbolLibraryAdminComponent {
|
|
|
30242
30243
|
<kendo-dialog-actions>
|
|
30243
30244
|
<button kendoButton (click)="closeDeleteDialog()">Cancel</button>
|
|
30244
30245
|
<button kendoButton themeColor="error" (click)="deleteSymbol()" [disabled]="isDeleting()">
|
|
30245
|
-
{{ isDeleting() ? 'Deleting...' : 'Delete' }}
|
|
30246
|
+
{{ isDeleting() ? 'Deleting...' : 'Delete symbol' }}
|
|
30246
30247
|
</button>
|
|
30247
30248
|
</kendo-dialog-actions>
|
|
30248
30249
|
</kendo-dialog>
|
|
30249
30250
|
}
|
|
30250
30251
|
</div>
|
|
30251
|
-
`, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:hidden}.symbol-admin{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:hidden;background:#f5f5f5}.admin-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:1rem;background:#fff;border-bottom:1px solid #e0e0e0}.admin-header h2{margin:0;font-size:18px;font-weight:500}.header-actions{display:flex;align-items:center;gap:.75rem}.edit-label{font-size:14px;color:#666;margin-right:.5rem}.admin-content{display:flex;flex:1;overflow:hidden;gap:1px;background:#e0e0e0}.edit-mode-container{display:flex;flex:1;height:100%;min-height:0;overflow:hidden}.edit-settings{width:220px;background:#fff;border-right:1px solid #e0e0e0;overflow-y:auto;flex-shrink:0}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:#f5f5f5;border-bottom:1px solid #e0e0e0;font-size:12px;font-weight:600;color:#333}.settings-close{width:20px;height:20px;background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:0;display:flex;align-items:center;justify-content:center;border-radius:2px}.settings-close:hover{background:#e0e0e0;color:#333}.settings-collapsed{width:28px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;align-items:center;padding:.5rem 0;cursor:pointer;flex-shrink:0;writing-mode:vertical-rl;text-orientation:mixed}.settings-collapsed:hover{background:#f0f0f0}.settings-collapsed .collapsed-icon{font-size:14px;color:#666;margin-bottom:.5rem}.settings-collapsed .collapsed-label{font-size:11px;color:#666;font-weight:500}.settings-section{margin-bottom:1rem;padding:0 .75rem .75rem;border-bottom:1px solid #f0f0f0}.settings-section:first-of-type{padding-top:.75rem}.settings-section:last-child{border-bottom:none;margin-bottom:0}.settings-section h4{margin:0 0 .5rem;font-size:12px;font-weight:600;color:#666}.editor-container{flex:1;display:flex;height:100%;min-width:0;min-height:0}.libraries-panel,.symbols-panel,.editor-panel{display:flex;flex-direction:column;background:#fff}.libraries-panel{width:250px}.symbols-panel{width:300px}.editor-panel{flex:1}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem;border-bottom:1px solid #e0e0e0;background:#fafafa}.panel-header h3{margin:0;font-size:14px;font-weight:500}.panel-content{flex:1;overflow-y:auto;padding:.5rem}.loading,.empty-state{padding:2rem 1rem;text-align:center;color:#999;font-size:13px}.library-item{padding:.75rem;border:1px solid #e0e0e0;border-radius:4px;margin-bottom:.5rem;cursor:pointer;transition:all .15s ease}.library-item:hover{border-color:#1976d2;background:#f5f5f5}.library-item.selected{border-color:#1976d2;background:#e3f2fd}.library-name{font-weight:500;margin-bottom:.25rem}.library-info{font-size:11px;color:#666}.symbol-item{display:flex;align-items:center;gap:.75rem;padding:.5rem;border:1px solid #e0e0e0;border-radius:4px;margin-bottom:.5rem;cursor:pointer;transition:all .15s ease}.symbol-item:hover,.symbol-item.selected{border-color:#9c27b0;background:#f3e5f5}.symbol-preview{width:48px;height:48px;background:#fafafa;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}.symbol-preview img{max-width:100%;max-height:100%;object-fit:contain}.preview-svg{width:100%;height:100%}.symbol-info{flex:1}.symbol-name{font-weight:500;margin-bottom:.25rem}.symbol-size{font-size:11px;color:#666}.symbol-details{margin-bottom:1rem}.detail-row{display:flex;padding:.5rem 0;border-bottom:1px solid #f0f0f0}.detail-row label{width:100px;color:#666;font-size:12px}.detail-row span{flex:1;font-size:13px}.symbol-preview-large{background:#fafafa;border:1px solid #e0e0e0;border-radius:4px;padding:1rem;display:flex;align-items:center;justify-content:center;min-height:200px}.symbol-preview-large svg{max-width:100%;max-height:300px}.edit-form{display:flex;flex-direction:column;gap:.5rem}.dialog-content{padding:1rem}.form-group{margin-bottom:.75rem}.form-group label{display:block;margin-bottom:.25rem;font-size:12px;font-weight:500;color:#666}.form-group input,.form-group textarea,.form-group select{width:100%;box-sizing:border-box}.form-group textarea{min-height:40px}.form-row{display:flex;gap:.5rem}.form-row .form-group{flex:1}.template-select{padding:.5rem;border:1px solid #e0e0e0;border-radius:4px;font-size:14px}.svg-import-group{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:#f5f5f5;border-radius:4px;margin-top:.5rem}.svg-filename{font-weight:500;color:#1976d2}.svg-info{font-size:12px;color:#666}.svg-scale-group{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:#e3f2fd;border-radius:4px;margin-top:.25rem}.svg-scale-group label{font-weight:500;margin:0}.scale-info{font-size:12px;color:#666;flex:1}.warning-text{color:#d32f2f;font-size:14px;margin-top:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i3$1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: i3$1.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { kind: "ngmodule", type: NumericTextBoxModule }, { kind: "ngmodule", type: DialogsModule }, { kind: "component", type: i3.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i3.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: SymbolEditorComponent, selector: "mm-symbol-editor", inputs: ["symbol", "canvasWidth", "canvasHeight", "gridSize", "showPropertyEditorPanel", "useDockview", "symbolSettings"], outputs: ["symbolChange", "saveRequest", "symbolSettingsChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
30252
|
+
`, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:hidden}.symbol-admin{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:hidden;background:#f5f5f5}.admin-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:1rem;background:#fff;border-bottom:1px solid #e0e0e0}.admin-header h2{margin:0;font-size:18px;font-weight:500}.header-actions{display:flex;align-items:center;gap:.75rem}.edit-label{font-size:14px;color:#666;margin-right:.5rem}.admin-content{display:flex;flex:1;overflow:hidden;gap:1px;background:#e0e0e0}.edit-mode-container{display:flex;flex:1;height:100%;min-height:0;overflow:hidden}.edit-settings{width:220px;background:#fff;border-right:1px solid #e0e0e0;overflow-y:auto;flex-shrink:0}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:#f5f5f5;border-bottom:1px solid #e0e0e0;font-size:12px;font-weight:600;color:#333}.settings-close{width:20px;height:20px;background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:0;display:flex;align-items:center;justify-content:center;border-radius:2px}.settings-close:hover{background:#e0e0e0;color:#333}.settings-collapsed{width:28px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;align-items:center;padding:.5rem 0;cursor:pointer;flex-shrink:0;writing-mode:vertical-rl;text-orientation:mixed}.settings-collapsed:hover{background:#f0f0f0}.settings-collapsed .collapsed-icon{font-size:14px;color:#666;margin-bottom:.5rem}.settings-collapsed .collapsed-label{font-size:11px;color:#666;font-weight:500}.settings-section{margin-bottom:1rem;padding:0 .75rem .75rem;border-bottom:1px solid #f0f0f0}.settings-section:first-of-type{padding-top:.75rem}.settings-section:last-child{border-bottom:none;margin-bottom:0}.settings-section h4{margin:0 0 .5rem;font-size:12px;font-weight:600;color:#666}.editor-container{flex:1;display:flex;height:100%;min-width:0;min-height:0}.libraries-panel,.symbols-panel,.editor-panel{display:flex;flex-direction:column;background:#fff}.libraries-panel{width:250px}.symbols-panel{width:300px}.editor-panel{flex:1}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem;border-bottom:1px solid #e0e0e0;background:#fafafa}.panel-header h3{margin:0;font-size:14px;font-weight:500}.panel-content{flex:1;overflow-y:auto;padding:.5rem}.loading,.empty-state{padding:2rem 1rem;text-align:center;color:#999;font-size:13px}.library-item{padding:.75rem;border:1px solid #e0e0e0;border-radius:4px;margin-bottom:.5rem;cursor:pointer;transition:all .15s ease}.library-item:hover{border-color:#1976d2;background:#f5f5f5}.library-item.selected{border-color:#1976d2;background:#e3f2fd}.library-name{font-weight:500;margin-bottom:.25rem}.library-info{font-size:11px;color:#666}.symbol-item{display:flex;align-items:center;gap:.75rem;padding:.5rem;border:1px solid #e0e0e0;border-radius:4px;margin-bottom:.5rem;cursor:pointer;transition:all .15s ease}.symbol-item:hover,.symbol-item.selected{border-color:#9c27b0;background:#f3e5f5}.symbol-preview{width:48px;height:48px;background:#fafafa;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}.symbol-preview img{max-width:100%;max-height:100%;object-fit:contain}.preview-svg{width:100%;height:100%}.symbol-info{flex:1}.symbol-name{font-weight:500;margin-bottom:.25rem}.symbol-size{font-size:11px;color:#666}.symbol-details{margin-bottom:1rem}.detail-row{display:flex;padding:.5rem 0;border-bottom:1px solid #f0f0f0}.detail-row label{width:100px;color:#666;font-size:12px}.detail-row span{flex:1;font-size:13px}.symbol-preview-large{background:#fafafa;border:1px solid #e0e0e0;border-radius:4px;padding:1rem;display:flex;align-items:center;justify-content:center;min-height:200px}.symbol-preview-large svg{max-width:100%;max-height:300px}.edit-form{display:flex;flex-direction:column;gap:.5rem}.dialog-content{padding:1rem}.form-group{margin-bottom:.75rem}.form-group label{display:block;margin-bottom:.25rem;font-size:12px;font-weight:500;color:#666}.form-group input,.form-group textarea,.form-group select{width:100%;box-sizing:border-box}.form-group textarea{min-height:40px}.form-row{display:flex;gap:.5rem}.form-row .form-group{flex:1}.template-select{padding:.5rem;border:1px solid #e0e0e0;border-radius:4px;font-size:14px}.svg-import-group{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:#f5f5f5;border-radius:4px;margin-top:.5rem}.svg-filename{font-weight:500;color:#1976d2}.svg-info{font-size:12px;color:#666}.svg-scale-group{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:#e3f2fd;border-radius:4px;margin-top:.25rem}.svg-scale-group label{font-weight:500;margin:0}.scale-info{font-size:12px;color:#666;flex:1}.warning-text{color:#d32f2f;font-size:14px;margin-top:.5rem}\n"], dependencies: [{ kind: "directive", type: MmDialogActionsDirective, selector: "kendo-dialog-actions" }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i3$1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: i3$1.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { kind: "ngmodule", type: NumericTextBoxModule }, { kind: "ngmodule", type: DialogsModule }, { kind: "component", type: i3.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i3.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: SymbolEditorComponent, selector: "mm-symbol-editor", inputs: ["symbol", "canvasWidth", "canvasHeight", "gridSize", "showPropertyEditorPanel", "useDockview", "symbolSettings"], outputs: ["symbolChange", "saveRequest", "symbolSettingsChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
30252
30253
|
}
|
|
30253
30254
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SymbolLibraryAdminComponent, decorators: [{
|
|
30254
30255
|
type: Component,
|
|
30255
30256
|
args: [{ selector: 'mm-symbol-library-admin', standalone: true, imports: [
|
|
30257
|
+
MmDialogActionsDirective,
|
|
30256
30258
|
CommonModule,
|
|
30257
30259
|
FormsModule,
|
|
30258
30260
|
ButtonsModule,
|
|
@@ -30739,7 +30741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
30739
30741
|
<kendo-dialog-actions>
|
|
30740
30742
|
<button kendoButton (click)="closeDeleteDialog()">Cancel</button>
|
|
30741
30743
|
<button kendoButton themeColor="error" (click)="deleteSymbol()" [disabled]="isDeleting()">
|
|
30742
|
-
{{ isDeleting() ? 'Deleting...' : 'Delete' }}
|
|
30744
|
+
{{ isDeleting() ? 'Deleting...' : 'Delete symbol' }}
|
|
30743
30745
|
</button>
|
|
30744
30746
|
</kendo-dialog-actions>
|
|
30745
30747
|
</kendo-dialog>
|
|
@@ -31512,11 +31514,12 @@ class SymbolLibraryDetailComponent {
|
|
|
31512
31514
|
return style.stroke?.opacity ?? defaultOpacity;
|
|
31513
31515
|
}
|
|
31514
31516
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SymbolLibraryDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
31515
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: SymbolLibraryDetailComponent, isStandalone: true, selector: "mm-symbol-library-detail", viewQueries: [{ propertyName: "svgFileInputRef", first: true, predicate: ["svgFileInput"], descendants: true }], ngImport: i0, template: "<div class=\"symbol-library-detail-container\">\n @if (isLoading()) {\n <div class=\"loading-container\">\n <div class=\"loading-spinner\"></div>\n <span>Loading library...</span>\n </div>\n } @else if (library()) {\n <!-- Header -->\n <div class=\"detail-header\">\n <div class=\"header-left\">\n <button kendoButton\n [svgIcon]=\"backIcon\"\n fillMode=\"flat\"\n title=\"Back to library list\"\n aria-label=\"Back to library list\"\n (click)=\"navigateBack()\">\n </button>\n <h2 class=\"library-title\">{{ libraryName() }}</h2>\n @if (library()?.isReadOnly) {\n <span class=\"readonly-badge\">Read Only</span>\n }\n </div>\n <div class=\"header-right\">\n <button kendoButton\n [svgIcon]=\"uploadIcon\"\n fillMode=\"outline\"\n title=\"Import SVG\"\n aria-label=\"Import SVG\"\n (click)=\"showSvgImportDialogFn()\"\n [disabled]=\"!!library()?.isReadOnly\">\n </button>\n <button kendoButton\n [svgIcon]=\"plusIcon\"\n themeColor=\"primary\"\n title=\"New Symbol\"\n aria-label=\"New Symbol\"\n (click)=\"showCreateSymbolDialog()\"\n [disabled]=\"!!library()?.isReadOnly\">\n </button>\n </div>\n </div>\n\n <!-- Symbols Grid -->\n <div class=\"symbols-grid\">\n @for (symbol of symbols(); track symbol.rtId) {\n <div class=\"symbol-card\"\n [class.selected]=\"selectedSymbol()?.rtId === symbol.rtId\"\n (click)=\"selectSymbol(symbol)\">\n <div class=\"symbol-preview\">\n <svg [attr.viewBox]=\"'0 0 ' + symbol.bounds.width + ' ' + symbol.bounds.height\" preserveAspectRatio=\"xMidYMid meet\">\n @for (primitive of symbol.primitives; track primitive.id) {\n @switch (primitive.type) {\n @case ('rectangle') {\n <rect\n [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config?.width\"\n [attr.height]=\"$any(primitive).config?.height\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n [attr.rx]=\"$any(primitive).config?.cornerRadius || 0\"\n [attr.ry]=\"$any(primitive).config?.cornerRadius || 0\"\n />\n }\n @case ('ellipse') {\n <ellipse\n [attr.cx]=\"primitive.position.x + ($any(primitive).config?.radiusX || 0)\"\n [attr.cy]=\"primitive.position.y + ($any(primitive).config?.radiusY || 0)\"\n [attr.rx]=\"$any(primitive).config?.radiusX\"\n [attr.ry]=\"$any(primitive).config?.radiusY\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('line') {\n <line\n [attr.x1]=\"$any(primitive).config?.start?.x\"\n [attr.y1]=\"$any(primitive).config?.start?.y\"\n [attr.x2]=\"$any(primitive).config?.end?.x\"\n [attr.y2]=\"$any(primitive).config?.end?.y\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('path') {\n <path\n [attr.d]=\"$any(primitive).config?.d\"\n [attr.transform]=\"'translate(' + primitive.position.x + ',' + primitive.position.y + ')'\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, 'none')\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('text') {\n <text\n [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, '#333333')\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.font-size]=\"$any(primitive).config?.fontSize || 12\"\n [attr.font-family]=\"$any(primitive).config?.fontFamily || 'sans-serif'\"\n >{{ $any(primitive).config?.text }}</text>\n }\n @case ('polyline') {\n <polyline\n [attr.points]=\"getPointsWithOffset(primitive)\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, 'none')\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('polygon') {\n <polygon\n [attr.points]=\"getPointsWithOffset(primitive)\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n }\n }\n </svg>\n </div>\n <div class=\"symbol-info\">\n <span class=\"symbol-name\">{{ symbol.name }}</span>\n <!-- AB#5580: shared row actions (icon buttons with tooltip + accessible name, danger delete) -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div class=\"symbol-actions\" (click)=\"$event.stopPropagation()\">\n <mm-row-actions [actions]=\"symbolActions()\" [rowLabel]=\"symbol.name\" (triggered)=\"onSymbolAction($event.id, symbol)\" />\n </div>\n </div>\n </div>\n } @empty {\n <div class=\"no-symbols\">\n <p>No symbols in this library</p>\n <button kendoButton [svgIcon]=\"plusIcon\" themeColor=\"primary\" (click)=\"showCreateSymbolDialog()\" [disabled]=\"!!library()?.isReadOnly\">\n Create First Symbol\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"error-container\">\n <p>Library not found</p>\n <button kendoButton (click)=\"navigateBack()\">Go Back</button>\n </div>\n }\n</div>\n\n<!-- Create Symbol Dialog -->\n@if (showSymbolDialog()) {\n <kendo-dialog title=\"Create Symbol\" (close)=\"closeSymbolDialog()\" [width]=\"450\">\n <div class=\"dialog-content\">\n <div class=\"form-group\">\n <label>Name *</label>\n <input kendoTextBox [(ngModel)]=\"newSymbol.name\" placeholder=\"Symbol name\"/>\n </div>\n <div class=\"form-group\">\n <label>Description</label>\n <textarea kendoTextArea [(ngModel)]=\"newSymbol.description\" placeholder=\"Optional description\" rows=\"2\"></textarea>\n </div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Width</label>\n <kendo-numerictextbox [(ngModel)]=\"newSymbol.width\" [min]=\"10\" [max]=\"2000\" [step]=\"10\" [format]=\"'n0'\"></kendo-numerictextbox>\n </div>\n <div class=\"form-group\">\n <label>Height</label>\n <kendo-numerictextbox [(ngModel)]=\"newSymbol.height\" [min]=\"10\" [max]=\"2000\" [step]=\"10\" [format]=\"'n0'\"></kendo-numerictextbox>\n </div>\n </div>\n <div class=\"form-group\">\n <label>Category</label>\n <input kendoTextBox [(ngModel)]=\"newSymbol.category\" placeholder=\"e.g., Basic, Flow, Equipment\"/>\n </div>\n </div>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"closeSymbolDialog()\">Cancel</button>\n <button kendoButton themeColor=\"primary\" (click)=\"createSymbol()\" [disabled]=\"!newSymbol.name\">\n Create\n </button>\n </kendo-dialog-actions>\n </kendo-dialog>\n}\n\n<!-- Import SVG Dialog -->\n@if (showSvgImportDialog()) {\n <kendo-dialog title=\"Import Symbol from SVG\" (close)=\"closeSvgImportDialog()\" [width]=\"500\">\n <div class=\"dialog-content\">\n <!-- Hidden file input -->\n <input #svgFileInput\n type=\"file\"\n accept=\".svg,image/svg+xml\"\n style=\"display: none\"\n (change)=\"onSvgFileSelected($event)\"/>\n\n <!-- File Selection -->\n <div class=\"form-group svg-file-group\">\n <button kendoButton (click)=\"svgFileInputRef.nativeElement.click()\">\n {{ svgImport.svgFileName ? 'Change SVG file...' : 'Select SVG file...' }}\n </button>\n @if (svgImport.svgFileName) {\n <div class=\"svg-file-info\">\n <span class=\"svg-filename\">{{ svgImport.svgFileName }}</span>\n <span class=\"svg-stats\">\n {{ svgImport.svgPrimitives?.length || 0 }} elements\n @if (svgImport.styleClasses && svgImport.styleClasses.length > 0) {\n , {{ svgImport.styleClasses.length }} style(s)\n }\n </span>\n </div>\n }\n </div>\n\n @if (svgImport.svgPrimitives) {\n <!-- Scale Control -->\n <div class=\"form-group svg-scale-group\">\n <label>Scale:</label>\n <kendo-numerictextbox\n [(ngModel)]=\"svgImport.svgScale\"\n [min]=\"0.1\"\n [max]=\"10\"\n [step]=\"0.1\"\n [decimals]=\"1\"\n [format]=\"'n1'\"\n (valueChange)=\"onSvgScaleChange($event)\"\n style=\"width: 100px\">\n </kendo-numerictextbox>\n <span class=\"scale-info\">\n Original: {{ svgImport.svgOriginalWidth }}\u00D7{{ svgImport.svgOriginalHeight }}px\n \u2192 {{ svgImport.width }}\u00D7{{ svgImport.height }}px\n </span>\n <button kendoButton look=\"flat\" (click)=\"resetSvgScale()\" title=\"Reset to 1x\">\n Reset\n </button>\n </div>\n\n <!-- Symbol Properties -->\n <div class=\"form-group\">\n <label>Name *</label>\n <input kendoTextBox [(ngModel)]=\"svgImport.name\" placeholder=\"Symbol name\"/>\n </div>\n <div class=\"form-group\">\n <label>Description</label>\n <textarea kendoTextArea [(ngModel)]=\"svgImport.description\" placeholder=\"Optional description\" rows=\"2\"></textarea>\n </div>\n <div class=\"form-group\">\n <label>Category</label>\n <input kendoTextBox [(ngModel)]=\"svgImport.category\" placeholder=\"e.g., Basic, Flow, Equipment\"/>\n </div>\n }\n </div>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"closeSvgImportDialog()\">Cancel</button>\n <button kendoButton themeColor=\"primary\"\n (click)=\"createSymbolFromSvg()\"\n [disabled]=\"!svgImport.name || !svgImport.svgPrimitives?.length\">\n Import\n </button>\n </kendo-dialog-actions>\n </kendo-dialog>\n}\n", styles: [":host{--card-bg: var(--symbol-card-bg, #1a2332);--card-border: var(--symbol-card-border, rgba(100, 206, 185, .3));--card-hover-border: var(--symbol-card-hover-border, #64ceb9);--card-preview-bg: var(--symbol-card-preview-bg, #394555);--card-info-border: var(--symbol-card-info-border, rgba(100, 206, 185, .2));--text-primary: var(--symbol-text-primary, #e0e0e0);--text-secondary: var(--symbol-text-secondary, #999);--accent-color: var(--symbol-accent-color, #64ceb9)}.symbol-library-detail-container{display:flex;flex-direction:column;height:100%;padding:12px 16px;gap:12px}.loading-container,.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:16px}.loading-spinner{width:40px;height:40px;border:3px solid var(--card-border);border-top-color:var(--accent-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.detail-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--card-border)}.header-left{display:flex;align-items:center;gap:8px}.library-title{margin:0;font-size:1.25rem;font-weight:500;color:var(--text-primary)}.readonly-badge{padding:4px 8px;font-size:.75rem;background:var(--card-preview-bg);border:1px solid var(--card-border);border-radius:4px;color:var(--text-secondary)}.symbols-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;flex:1;overflow-y:auto;padding:4px;align-content:start}.symbol-card{display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--card-border);border-radius:8px;overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s}.symbol-card:hover{border-color:var(--card-hover-border);box-shadow:0 2px 8px #0000004d}.symbol-card.selected{border-color:var(--accent-color);box-shadow:0 0 0 2px #64ceb94d}.symbol-preview{display:flex;align-items:center;justify-content:center;height:120px;padding:12px;background:var(--card-preview-bg)}.symbol-preview svg{width:100%;height:100%;max-width:120px;max-height:100px}.symbol-info{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:1px solid var(--card-info-border)}.symbol-name{font-size:.875rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)}.symbol-actions{display:flex;gap:4px}.no-symbols{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;gap:16px;color:var(--text-secondary)}.header-right{display:flex;gap:4px}.dialog-content{padding:16px 0}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-size:13px;font-weight:500;color:#333}.form-group input,.form-group textarea,.form-group kendo-numerictextbox{width:100%}.form-row{display:flex;gap:16px}.form-row .form-group{flex:1}.svg-file-group{display:flex;flex-direction:column;gap:8px;padding:16px;background:#f5f5f5;border-radius:6px;margin-bottom:16px}.svg-file-info{display:flex;flex-direction:column;gap:4px}.svg-filename{font-weight:500;color:#1976d2}.svg-stats{font-size:12px;color:#666}.svg-scale-group{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#e3f2fd;border-radius:6px;margin-bottom:16px}.svg-scale-group label{font-weight:500;margin:0;white-space:nowrap}.svg-scale-group kendo-numerictextbox{width:100px}.svg-scale-group .scale-info{flex:1;font-size:12px;color:#666}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i3$1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: i3$1.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { kind: "ngmodule", type: NumericTextBoxModule }, { kind: "ngmodule", type: DialogsModule }, { kind: "component", type: i3.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i3.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: RowActionsComponent, selector: "mm-row-actions", inputs: ["actions", "rowLabel", "maxInline", "messages"], outputs: ["triggered"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
31517
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: SymbolLibraryDetailComponent, isStandalone: true, selector: "mm-symbol-library-detail", viewQueries: [{ propertyName: "svgFileInputRef", first: true, predicate: ["svgFileInput"], descendants: true }], ngImport: i0, template: "<div class=\"symbol-library-detail-container\">\n @if (isLoading()) {\n <div class=\"loading-container\">\n <div class=\"loading-spinner\"></div>\n <span>Loading library...</span>\n </div>\n } @else if (library()) {\n <!-- Header -->\n <div class=\"detail-header\">\n <div class=\"header-left\">\n <button kendoButton\n [svgIcon]=\"backIcon\"\n fillMode=\"flat\"\n title=\"Back to library list\"\n aria-label=\"Back to library list\"\n (click)=\"navigateBack()\">\n </button>\n <h2 class=\"library-title\">{{ libraryName() }}</h2>\n @if (library()?.isReadOnly) {\n <span class=\"readonly-badge\">Read Only</span>\n }\n </div>\n <div class=\"header-right\">\n <button kendoButton\n [svgIcon]=\"uploadIcon\"\n fillMode=\"outline\"\n title=\"Import SVG\"\n aria-label=\"Import SVG\"\n (click)=\"showSvgImportDialogFn()\"\n [disabled]=\"!!library()?.isReadOnly\">\n </button>\n <button kendoButton\n [svgIcon]=\"plusIcon\"\n themeColor=\"primary\"\n title=\"New Symbol\"\n aria-label=\"New Symbol\"\n (click)=\"showCreateSymbolDialog()\"\n [disabled]=\"!!library()?.isReadOnly\">\n </button>\n </div>\n </div>\n\n <!-- Symbols Grid -->\n <div class=\"symbols-grid\">\n @for (symbol of symbols(); track symbol.rtId) {\n <div class=\"symbol-card\"\n [class.selected]=\"selectedSymbol()?.rtId === symbol.rtId\"\n (click)=\"selectSymbol(symbol)\">\n <div class=\"symbol-preview\">\n <svg [attr.viewBox]=\"'0 0 ' + symbol.bounds.width + ' ' + symbol.bounds.height\" preserveAspectRatio=\"xMidYMid meet\">\n @for (primitive of symbol.primitives; track primitive.id) {\n @switch (primitive.type) {\n @case ('rectangle') {\n <rect\n [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config?.width\"\n [attr.height]=\"$any(primitive).config?.height\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n [attr.rx]=\"$any(primitive).config?.cornerRadius || 0\"\n [attr.ry]=\"$any(primitive).config?.cornerRadius || 0\"\n />\n }\n @case ('ellipse') {\n <ellipse\n [attr.cx]=\"primitive.position.x + ($any(primitive).config?.radiusX || 0)\"\n [attr.cy]=\"primitive.position.y + ($any(primitive).config?.radiusY || 0)\"\n [attr.rx]=\"$any(primitive).config?.radiusX\"\n [attr.ry]=\"$any(primitive).config?.radiusY\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('line') {\n <line\n [attr.x1]=\"$any(primitive).config?.start?.x\"\n [attr.y1]=\"$any(primitive).config?.start?.y\"\n [attr.x2]=\"$any(primitive).config?.end?.x\"\n [attr.y2]=\"$any(primitive).config?.end?.y\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('path') {\n <path\n [attr.d]=\"$any(primitive).config?.d\"\n [attr.transform]=\"'translate(' + primitive.position.x + ',' + primitive.position.y + ')'\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, 'none')\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('text') {\n <text\n [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, '#333333')\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.font-size]=\"$any(primitive).config?.fontSize || 12\"\n [attr.font-family]=\"$any(primitive).config?.fontFamily || 'sans-serif'\"\n >{{ $any(primitive).config?.text }}</text>\n }\n @case ('polyline') {\n <polyline\n [attr.points]=\"getPointsWithOffset(primitive)\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, 'none')\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('polygon') {\n <polygon\n [attr.points]=\"getPointsWithOffset(primitive)\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n }\n }\n </svg>\n </div>\n <div class=\"symbol-info\">\n <span class=\"symbol-name\">{{ symbol.name }}</span>\n <!-- AB#5580: shared row actions (icon buttons with tooltip + accessible name, danger delete) -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div class=\"symbol-actions\" (click)=\"$event.stopPropagation()\">\n <mm-row-actions [actions]=\"symbolActions()\" [rowLabel]=\"symbol.name\" (triggered)=\"onSymbolAction($event.id, symbol)\" />\n </div>\n </div>\n </div>\n } @empty {\n <div class=\"no-symbols\">\n <p>No symbols in this library</p>\n <button kendoButton [svgIcon]=\"plusIcon\" themeColor=\"primary\" (click)=\"showCreateSymbolDialog()\" [disabled]=\"!!library()?.isReadOnly\">\n Create First Symbol\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"error-container\">\n <p>Library not found</p>\n <button kendoButton (click)=\"navigateBack()\">Go Back</button>\n </div>\n }\n</div>\n\n<!-- Create Symbol Dialog -->\n@if (showSymbolDialog()) {\n <kendo-dialog title=\"Create Symbol\" (close)=\"closeSymbolDialog()\" [width]=\"450\">\n <div class=\"dialog-content\">\n <div class=\"form-group\">\n <label>Name *</label>\n <input kendoTextBox [(ngModel)]=\"newSymbol.name\" placeholder=\"Symbol name\"/>\n </div>\n <div class=\"form-group\">\n <label>Description</label>\n <textarea kendoTextArea [(ngModel)]=\"newSymbol.description\" placeholder=\"Optional description\" rows=\"2\"></textarea>\n </div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Width</label>\n <kendo-numerictextbox [(ngModel)]=\"newSymbol.width\" [min]=\"10\" [max]=\"2000\" [step]=\"10\" [format]=\"'n0'\"></kendo-numerictextbox>\n </div>\n <div class=\"form-group\">\n <label>Height</label>\n <kendo-numerictextbox [(ngModel)]=\"newSymbol.height\" [min]=\"10\" [max]=\"2000\" [step]=\"10\" [format]=\"'n0'\"></kendo-numerictextbox>\n </div>\n </div>\n <div class=\"form-group\">\n <label>Category</label>\n <input kendoTextBox [(ngModel)]=\"newSymbol.category\" placeholder=\"e.g., Basic, Flow, Equipment\"/>\n </div>\n </div>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"closeSymbolDialog()\">Cancel</button>\n <button kendoButton themeColor=\"primary\" (click)=\"createSymbol()\" [disabled]=\"!newSymbol.name\">\n Create\n </button>\n </kendo-dialog-actions>\n </kendo-dialog>\n}\n\n<!-- Import SVG Dialog -->\n@if (showSvgImportDialog()) {\n <kendo-dialog title=\"Import Symbol from SVG\" (close)=\"closeSvgImportDialog()\" [width]=\"500\">\n <div class=\"dialog-content\">\n <!-- Hidden file input -->\n <input #svgFileInput\n type=\"file\"\n accept=\".svg,image/svg+xml\"\n style=\"display: none\"\n (change)=\"onSvgFileSelected($event)\"/>\n\n <!-- File Selection -->\n <div class=\"form-group svg-file-group\">\n <button kendoButton (click)=\"svgFileInputRef.nativeElement.click()\">\n {{ svgImport.svgFileName ? 'Change SVG file...' : 'Select SVG file...' }}\n </button>\n @if (svgImport.svgFileName) {\n <div class=\"svg-file-info\">\n <span class=\"svg-filename\">{{ svgImport.svgFileName }}</span>\n <span class=\"svg-stats\">\n {{ svgImport.svgPrimitives?.length || 0 }} elements\n @if (svgImport.styleClasses && svgImport.styleClasses.length > 0) {\n , {{ svgImport.styleClasses.length }} style(s)\n }\n </span>\n </div>\n }\n </div>\n\n @if (svgImport.svgPrimitives) {\n <!-- Scale Control -->\n <div class=\"form-group svg-scale-group\">\n <label>Scale:</label>\n <kendo-numerictextbox\n [(ngModel)]=\"svgImport.svgScale\"\n [min]=\"0.1\"\n [max]=\"10\"\n [step]=\"0.1\"\n [decimals]=\"1\"\n [format]=\"'n1'\"\n (valueChange)=\"onSvgScaleChange($event)\"\n style=\"width: 100px\">\n </kendo-numerictextbox>\n <span class=\"scale-info\">\n Original: {{ svgImport.svgOriginalWidth }}\u00D7{{ svgImport.svgOriginalHeight }}px\n \u2192 {{ svgImport.width }}\u00D7{{ svgImport.height }}px\n </span>\n <button kendoButton look=\"flat\" (click)=\"resetSvgScale()\" title=\"Reset to 1x\">\n Reset\n </button>\n </div>\n\n <!-- Symbol Properties -->\n <div class=\"form-group\">\n <label>Name *</label>\n <input kendoTextBox [(ngModel)]=\"svgImport.name\" placeholder=\"Symbol name\"/>\n </div>\n <div class=\"form-group\">\n <label>Description</label>\n <textarea kendoTextArea [(ngModel)]=\"svgImport.description\" placeholder=\"Optional description\" rows=\"2\"></textarea>\n </div>\n <div class=\"form-group\">\n <label>Category</label>\n <input kendoTextBox [(ngModel)]=\"svgImport.category\" placeholder=\"e.g., Basic, Flow, Equipment\"/>\n </div>\n }\n </div>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"closeSvgImportDialog()\">Cancel</button>\n <button kendoButton themeColor=\"primary\"\n (click)=\"createSymbolFromSvg()\"\n [disabled]=\"!svgImport.name || !svgImport.svgPrimitives?.length\">\n Import\n </button>\n </kendo-dialog-actions>\n </kendo-dialog>\n}\n", styles: [":host{--card-bg: var(--symbol-card-bg, #1a2332);--card-border: var(--symbol-card-border, rgba(100, 206, 185, .3));--card-hover-border: var(--symbol-card-hover-border, #64ceb9);--card-preview-bg: var(--symbol-card-preview-bg, #394555);--card-info-border: var(--symbol-card-info-border, rgba(100, 206, 185, .2));--text-primary: var(--symbol-text-primary, #e0e0e0);--text-secondary: var(--symbol-text-secondary, #999);--accent-color: var(--symbol-accent-color, #64ceb9)}.symbol-library-detail-container{display:flex;flex-direction:column;height:100%;padding:12px 16px;gap:12px}.loading-container,.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:16px}.loading-spinner{width:40px;height:40px;border:3px solid var(--card-border);border-top-color:var(--accent-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.detail-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--card-border)}.header-left{display:flex;align-items:center;gap:8px}.library-title{margin:0;font-size:1.25rem;font-weight:500;color:var(--text-primary)}.readonly-badge{padding:4px 8px;font-size:.75rem;background:var(--card-preview-bg);border:1px solid var(--card-border);border-radius:4px;color:var(--text-secondary)}.symbols-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;flex:1;overflow-y:auto;padding:4px;align-content:start}.symbol-card{display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--card-border);border-radius:8px;overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s}.symbol-card:hover{border-color:var(--card-hover-border);box-shadow:0 2px 8px #0000004d}.symbol-card.selected{border-color:var(--accent-color);box-shadow:0 0 0 2px #64ceb94d}.symbol-preview{display:flex;align-items:center;justify-content:center;height:120px;padding:12px;background:var(--card-preview-bg)}.symbol-preview svg{width:100%;height:100%;max-width:120px;max-height:100px}.symbol-info{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:1px solid var(--card-info-border)}.symbol-name{font-size:.875rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)}.symbol-actions{display:flex;gap:4px}.no-symbols{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;gap:16px;color:var(--text-secondary)}.header-right{display:flex;gap:4px}.dialog-content{padding:16px 0}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-size:13px;font-weight:500;color:#333}.form-group input,.form-group textarea,.form-group kendo-numerictextbox{width:100%}.form-row{display:flex;gap:16px}.form-row .form-group{flex:1}.svg-file-group{display:flex;flex-direction:column;gap:8px;padding:16px;background:#f5f5f5;border-radius:6px;margin-bottom:16px}.svg-file-info{display:flex;flex-direction:column;gap:4px}.svg-filename{font-weight:500;color:#1976d2}.svg-stats{font-size:12px;color:#666}.svg-scale-group{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#e3f2fd;border-radius:6px;margin-bottom:16px}.svg-scale-group label{font-weight:500;margin:0;white-space:nowrap}.svg-scale-group kendo-numerictextbox{width:100px}.svg-scale-group .scale-info{flex:1;font-size:12px;color:#666}\n"], dependencies: [{ kind: "directive", type: MmDialogActionsDirective, selector: "kendo-dialog-actions" }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i3$1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: i3$1.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { kind: "ngmodule", type: NumericTextBoxModule }, { kind: "ngmodule", type: DialogsModule }, { kind: "component", type: i3.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i3.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: RowActionsComponent, selector: "mm-row-actions", inputs: ["actions", "rowLabel", "maxInline", "messages"], outputs: ["triggered"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
31516
31518
|
}
|
|
31517
31519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SymbolLibraryDetailComponent, decorators: [{
|
|
31518
31520
|
type: Component,
|
|
31519
31521
|
args: [{ selector: 'mm-symbol-library-detail', standalone: true, imports: [
|
|
31522
|
+
MmDialogActionsDirective,
|
|
31520
31523
|
CommonModule,
|
|
31521
31524
|
FormsModule,
|
|
31522
31525
|
ButtonsModule,
|