@utisha/graph-editor 1.0.2 → 1.0.4

package/fesm2022/utisha-graph-editor.mjs

@@ -187,6 +187,11 @@ class GraphEditorComponent {
     isBoxSelecting = false;
     boxSelectStart = { x: 0, y: 0 };
     selectionBox = signal(null);
+    // Resize state (hand tool)
+    resizingNode = null;
+    resizeStartSize = { width: 0, height: 0 };
+    resizeStartMousePos = { x: 0, y: 0 };
+    resizeMinSize = { width: 0, height: 0 };
     // Computed
     transform = computed(() => `translate(${this.panX()}, ${this.panY()}) scale(${this.scale()})`);
     gridBounds = computed(() => {
@@ -699,6 +704,40 @@ class GraphEditorComponent {
             const height = Math.abs(mouseY - this.boxSelectStart.y);
             this.selectionBox.set({ x, y, width, height });
         }
+        else if (this.resizingNode) {
+            // Node resize - calculate new size based on mouse delta
+            const dx = (event.clientX - this.resizeStartMousePos.x) / this.scale();
+            const dy = (event.clientY - this.resizeStartMousePos.y) / this.scale();
+            // Calculate new size, enforcing minimum
+            const newWidth = Math.max(this.resizeMinSize.width, this.resizeStartSize.width + dx);
+            const newHeight = Math.max(this.resizeMinSize.height, this.resizeStartSize.height + dy);
+            // Update node size
+            const graph = this.internalGraph();
+            const nodeIndex = graph.nodes.findIndex(n => n.id === this.resizingNode.id);
+            if (nodeIndex !== -1) {
+                const updatedNodes = [...graph.nodes];
+                updatedNodes[nodeIndex] = {
+                    ...updatedNodes[nodeIndex],
+                    size: { width: newWidth, height: newHeight }
+                };
+                // Recalculate edge ports for edges connected to this node
+                const updatedEdges = graph.edges.map(edge => {
+                    if (edge.source !== this.resizingNode.id && edge.target !== this.resizingNode.id)
+                        return edge;
+                    const sourceNode = updatedNodes.find(n => n.id === edge.source);
+                    const targetNode = updatedNodes.find(n => n.id === edge.target);
+                    if (!sourceNode || !targetNode)
+                        return edge;
+                    const newSourcePort = this.findClosestPortForEdge(sourceNode, targetNode, 'source');
+                    const newTargetPort = this.findClosestPortForEdge(targetNode, sourceNode, 'target');
+                    if (edge.sourcePort === newSourcePort && edge.targetPort === newTargetPort)
+                        return edge;
+                    return { ...edge, sourcePort: newSourcePort, targetPort: newTargetPort };
+                });
+                this.internalGraph.set({ ...graph, nodes: updatedNodes, edges: updatedEdges });
+                this.emitGraphChange();
+            }
+        }
         else if (this.isPanning) {
             const dx = event.clientX - this.lastMousePos.x;
             const dy = event.clientY - this.lastMousePos.y;
@@ -908,6 +947,7 @@ class GraphEditorComponent {
         this.hoveredNodeId = null;
         this.hoveredPort = null;
         this.showAttachmentPoints.set(null);
+        this.resizingNode = null;
     }
     onNodeMouseDown(event, node) {
         if (this.readonly)
@@ -1056,6 +1096,17 @@ class GraphEditorComponent {
         event.stopPropagation();
         this.draggedEdge = { edge, endpoint };
     }
+    onResizeHandleMouseDown(event, node) {
+        if (this.readonly)
+            return;
+        event.stopPropagation();
+        this.resizingNode = node;
+        const currentSize = this.getNodeSize(node);
+        this.resizeStartSize = { ...currentSize };
+        this.resizeStartMousePos = { x: event.clientX, y: event.clientY };
+        // Use current size as minimum (from config or existing node.size)
+        this.resizeMinSize = { ...currentSize };
+    }
     onWheel(event) {
         const zoomConfig = this.config.canvas?.zoom;
         if (!zoomConfig?.wheelEnabled)
@@ -1176,6 +1227,9 @@ class GraphEditorComponent {
         }
     }
     getNodeSize(node) {
+        // Check instance-level size override first (from resize)
+        if (node.size)
+            return node.size;
         const nodeConfig = this.config.nodes.types.find(t => t.type === node.type);
         return nodeConfig?.size || this.config.nodes.defaultSize || { width: 220, height: 100 };
     }
@@ -1374,6 +1428,155 @@ class GraphEditorComponent {
         };
         return labelPositions[pos] || labelPositions['top-left'];
     }
+    /**
+     * Get the bounding box for label text within a node.
+     * This box avoids the icon area and has proper padding.
+     */
+    getLabelBounds(node) {
+        const size = this.getNodeSize(node);
+        const iconPos = this.config.nodes.iconPosition || 'top-left';
+        const padding = 12; // Padding from node edges
+        const iconAreaSize = Math.max(this.getImageSize(node), size.height * 0.35) + 8; // Icon + gap
+        // Default: full node minus padding
+        let x = padding;
+        let y = padding;
+        let width = size.width - padding * 2;
+        let height = size.height - padding * 2;
+        // Adjust based on icon position
+        switch (iconPos) {
+            case 'top-left':
+            case 'left':
+            case 'bottom-left':
+                // Icon on left - text area starts after icon
+                x = iconAreaSize + padding / 2;
+                width = size.width - iconAreaSize - padding - padding / 2;
+                break;
+            case 'top-right':
+            case 'right':
+            case 'bottom-right':
+                // Icon on right - text area ends before icon
+                width = size.width - iconAreaSize - padding - padding / 2;
+                break;
+            case 'top':
+                // Icon on top - text area below icon
+                y = iconAreaSize + padding / 2;
+                height = size.height - iconAreaSize - padding - padding / 2;
+                break;
+            case 'bottom':
+                // Icon on bottom - text area above icon
+                height = size.height - iconAreaSize - padding - padding / 2;
+                break;
+        }
+        return { x, y, width: Math.max(width, 20), height: Math.max(height, 20) };
+    }
+    /**
+     * Get wrapped text lines and font size for a node label.
+     * Uses text wrapping first, then font downsizing if needed.
+     */
+    getWrappedLabel(node) {
+        const text = (node.data['name'] || node.type);
+        const bounds = this.getLabelBounds(node);
+        const baseFontSize = 14;
+        const minFontSize = 9;
+        const lineHeightRatio = 1.3;
+        // Try wrapping at current font size, then reduce if needed
+        for (let fontSize = baseFontSize; fontSize >= minFontSize; fontSize -= 1) {
+            const charWidth = fontSize * 0.6; // Approximate character width
+            const lineHeight = fontSize * lineHeightRatio;
+            const maxCharsPerLine = Math.floor(bounds.width / charWidth);
+            const maxLines = Math.floor(bounds.height / lineHeight);
+            if (maxCharsPerLine < 3 || maxLines < 1)
+                continue;
+            const lines = this.wrapText(text, maxCharsPerLine);
+            // Check if text fits
+            if (lines.length <= maxLines) {
+                return { lines, fontSize, lineHeight };
+            }
+            // If at minimum font size, truncate
+            if (fontSize === minFontSize) {
+                const truncatedLines = lines.slice(0, maxLines);
+                if (lines.length > maxLines && truncatedLines.length > 0) {
+                    // Add ellipsis to last line
+                    const lastLine = truncatedLines[truncatedLines.length - 1];
+                    if (lastLine.length > 3) {
+                        truncatedLines[truncatedLines.length - 1] = lastLine.slice(0, -3) + '...';
+                    }
+                }
+                return { lines: truncatedLines, fontSize, lineHeight };
+            }
+        }
+        // Fallback
+        return { lines: [text], fontSize: minFontSize, lineHeight: minFontSize * lineHeightRatio };
+    }
+    /**
+     * Wrap text into lines respecting max characters per line.
+     * Tries to break at word boundaries.
+     */
+    wrapText(text, maxCharsPerLine) {
+        if (text.length <= maxCharsPerLine) {
+            return [text];
+        }
+        const words = text.split(/\s+/);
+        const lines = [];
+        let currentLine = '';
+        for (const word of words) {
+            if (currentLine.length === 0) {
+                // First word on line
+                if (word.length > maxCharsPerLine) {
+                    // Word too long, break it
+                    let remaining = word;
+                    while (remaining.length > maxCharsPerLine) {
+                        lines.push(remaining.slice(0, maxCharsPerLine - 1) + '-');
+                        remaining = remaining.slice(maxCharsPerLine - 1);
+                    }
+                    currentLine = remaining;
+                }
+                else {
+                    currentLine = word;
+                }
+            }
+            else if (currentLine.length + 1 + word.length <= maxCharsPerLine) {
+                // Word fits on current line
+                currentLine += ' ' + word;
+            }
+            else {
+                // Start new line
+                lines.push(currentLine);
+                if (word.length > maxCharsPerLine) {
+                    // Word too long, break it
+                    let remaining = word;
+                    while (remaining.length > maxCharsPerLine) {
+                        lines.push(remaining.slice(0, maxCharsPerLine - 1) + '-');
+                        remaining = remaining.slice(maxCharsPerLine - 1);
+                    }
+                    currentLine = remaining;
+                }
+                else {
+                    currentLine = word;
+                }
+            }
+        }
+        if (currentLine.length > 0) {
+            lines.push(currentLine);
+        }
+        return lines;
+    }
+    /**
+     * Get the Y position for each line of wrapped text (centered vertically).
+     */
+    getLabelLineY(node, lineIndex, totalLines, lineHeight) {
+        const bounds = this.getLabelBounds(node);
+        const totalTextHeight = totalLines * lineHeight;
+        const startY = bounds.y + (bounds.height - totalTextHeight) / 2 + lineHeight / 2;
+        return startY + lineIndex * lineHeight;
+    }
+    /**
+     * Get the X position for label text (centered in bounds).
+     */
+    getLabelLineX(node) {
+        const bounds = this.getLabelBounds(node);
+        return bounds.x + bounds.width / 2;
+    }
     findNodeAtPosition(pos) {
         for (const node of this.internalGraph().nodes) {
             const size = this.getNodeSize(node);
@@ -1483,7 +1686,7 @@ class GraphEditorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: GraphEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: GraphEditorComponent, isStandalone: true, selector: "graph-editor", inputs: { config: "config", graph: "graph", readonly: "readonly", visualizationMode: "visualizationMode", overlayData: "overlayData" }, outputs: { graphChange: "graphChange", nodeAdded: "nodeAdded", nodeUpdated: "nodeUpdated", nodeRemoved: "nodeRemoved", edgeAdded: "edgeAdded", edgeUpdated: "edgeUpdated", edgeRemoved: "edgeRemoved", selectionChange: "selectionChange", validationChange: "validationChange", nodeClick: "nodeClick", nodeDoubleClick: "nodeDoubleClick", edgeClick: "edgeClick", edgeDoubleClick: "edgeDoubleClick", canvasClick: "canvasClick", contextMenu: "contextMenu" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)" }, styleAttribute: "outline: none;" }, providers: [GraphHistoryService], viewQueries: [{ propertyName: "canvasSvgRef", first: true, predicate: ["canvasSvg"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"graph-editor-container\">\n  <!-- Canvas with overlaid palette -->\n  <div class=\"graph-canvas-wrapper\">\n    <!-- Top-left horizontal palette overlay -->\n    @if (config.palette?.enabled !== false) {\n      <div class=\"graph-palette-overlay\">\n        <!-- Tools -->\n        <button\n          class=\"palette-item tool-item\"\n          [class.active]=\"activeTool() === 'hand'\"\n          title=\"Hand tool (move nodes)\"\n          (click)=\"switchTool('hand')\"\n        >\n          <span class=\"icon\">\u270B</span>\n        </button>\n        <button\n          class=\"palette-item tool-item\"\n          [class.active]=\"activeTool() === 'line'\"\n          title=\"Line tool (draw connections)\"\n          (click)=\"switchTool('line')\"\n        >\n          <span class=\"icon\">\u2215</span>\n        </button>\n\n        <!-- Divider -->\n        <div class=\"palette-divider\"></div>\n\n        <!-- Node types -->\n        @for (nodeType of config.nodes.types; track nodeType.type) {\n          <button\n            class=\"palette-item\"\n            [attr.data-node-type]=\"nodeType.type\"\n            [attr.title]=\"nodeType.label || nodeType.type\"\n            (click)=\"addNode(nodeType.type)\"\n          >\n            @if (nodeType.iconSvg) {\n              <svg\n                class=\"palette-icon-svg\"\n                [attr.viewBox]=\"nodeType.iconSvg.viewBox || '0 0 24 24'\"\n                [attr.fill]=\"nodeType.iconSvg.fill || 'none'\"\n                [attr.stroke]=\"nodeType.iconSvg.stroke || '#1D6A96'\"\n                [attr.stroke-width]=\"nodeType.iconSvg.strokeWidth || 2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                @for (pathData of splitIconPaths(nodeType.iconSvg.path); track $index) {\n                  <path [attr.d]=\"pathData\"/>\n                }\n              </svg>\n            } @else if (nodeType.defaultData['imageUrl']) {\n              <img\n                class=\"palette-icon-img\"\n                [src]=\"nodeType.defaultData['imageUrl']\"\n                [alt]=\"nodeType.label || nodeType.type\"\n              />\n            } @else {\n              <span class=\"icon\">{{ nodeType.icon || '\u25CF' }}</span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    <svg\n      #canvasSvg\n      [class.tool-line]=\"activeTool() === 'line'\"\n      [attr.width]=\"'100%'\"\n      [attr.height]=\"'100%'\"\n      (mousedown)=\"onCanvasMouseDown($event)\"\n      (mousemove)=\"onCanvasMouseMove($event)\"\n      (mouseup)=\"onCanvasMouseUp($event)\"\n      (wheel)=\"onWheel($event)\"\n      (contextmenu)=\"onContextMenu($event)\"\n    >\n      <!-- Arrow marker definitions -->\n      <defs>\n        <marker id=\"arrow-end\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 0 1 L 8 5 L 0 9 z\" fill=\"#94a3b8\"/>\n        </marker>\n        <marker id=\"arrow-end-selected\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 0 1 L 8 5 L 0 9 z\" fill=\"#3b82f6\"/>\n        </marker>\n        <marker id=\"arrow-start\" viewBox=\"0 0 10 10\" refX=\"1\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 10 1 L 2 5 L 10 9 z\" fill=\"#94a3b8\"/>\n        </marker>\n        <marker id=\"arrow-start-selected\" viewBox=\"0 0 10 10\" refX=\"1\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 10 1 L 2 5 L 10 9 z\" fill=\"#3b82f6\"/>\n        </marker>\n      </defs>\n\n      <!-- Main transform group (pan + zoom) -->\n      <g [attr.transform]=\"transform()\">\n        <!-- Grid (if enabled) -->\n        <!-- Grid (if enabled) - extended to cover viewport during pan -->\n        @if (config.canvas?.grid?.enabled) {\n          <defs>\n            <pattern\n              id=\"grid\"\n              [attr.width]=\"config.canvas!.grid!.size\"\n              [attr.height]=\"config.canvas!.grid!.size\"\n              patternUnits=\"userSpaceOnUse\"\n            >\n              <path\n                [attr.d]=\"'M ' + config.canvas!.grid!.size + ' 0 L 0 0 0 ' + config.canvas!.grid!.size\"\n                fill=\"none\"\n                [attr.stroke]=\"config.canvas!.grid!.color || '#e0e0e0'\"\n                stroke-width=\"1\"\n              />\n            </pattern>\n          </defs>\n          <!-- Extended grid background covering viewport + pan offset -->\n          <rect\n            [attr.x]=\"gridBounds().x\"\n            [attr.y]=\"gridBounds().y\"\n            [attr.width]=\"gridBounds().width\"\n            [attr.height]=\"gridBounds().height\"\n            fill=\"url(#grid)\"\n          />\n        }\n\n        <!-- Layer 0.5: Preview line for line tool (rubber-band) -->\n        @if (previewLine()) {\n          <line\n            class=\"preview-line\"\n            [attr.x1]=\"previewLine()!.source.x\"\n            [attr.y1]=\"previewLine()!.source.y\"\n            [attr.x2]=\"previewLine()!.target.x\"\n            [attr.y2]=\"previewLine()!.target.y\"\n            stroke=\"#3b82f6\"\n            stroke-width=\"2.5\"\n            stroke-dasharray=\"8,6\"\n            stroke-linecap=\"round\"\n            opacity=\"0.7\"\n          />\n        }\n\n        <!-- Layer 1: Edge paths (behind everything) -->\n        @for (edge of internalGraph().edges; track edge.id) {\n          <!-- Edge shadow for depth (optional) -->\n          @if (shadowsEnabled()) {\n            <path\n              class=\"edge-shadow\"\n              [attr.d]=\"getEdgePath(edge)\"\n              stroke=\"rgba(0,0,0,0.06)\"\n              stroke-width=\"6\"\n              fill=\"none\"\n              stroke-linecap=\"round\"\n              [attr.transform]=\"'translate(1, 2)'\"\n            />\n          }\n          <!-- Invisible wide hit-area for easier clicking (hand tool only) -->\n          <path\n            [attr.d]=\"getEdgePath(edge)\"\n            stroke=\"transparent\"\n            [attr.stroke-width]=\"20\"\n            fill=\"none\"\n            class=\"edge-hit-area\"\n            [attr.pointer-events]=\"activeTool() === 'hand' ? 'stroke' : 'none'\"\n            (click)=\"onEdgeClick($event, edge)\"\n            (dblclick)=\"onEdgeDoubleClick($event, edge)\"\n          />\n          <!-- Visible edge line -->\n          <path\n            class=\"edge-line\"\n            [attr.d]=\"getEdgePath(edge)\"\n            [attr.stroke]=\"selection().edges.includes(edge.id) ? '#3b82f6' : '#94a3b8'\"\n            [attr.stroke-width]=\"selection().edges.includes(edge.id) ? 2.5 : 2\"\n            fill=\"none\"\n            stroke-linecap=\"round\"\n            [class.selected]=\"selection().edges.includes(edge.id)\"\n            [attr.marker-end]=\"getEdgeMarkerEnd(edge)\"\n            [attr.marker-start]=\"getEdgeMarkerStart(edge)\"\n            pointer-events=\"none\"\n          />\n        }\n\n        <!-- Layer 2: Nodes -->\n        @for (node of internalGraph().nodes; track node.id) {\n          <g\n            [attr.transform]=\"'translate(' + node.position.x + ',' + node.position.y + ')'\"\n            class=\"graph-node\"\n            [class.selected]=\"selection().nodes.includes(node.id)\"\n            [attr.data-node-id]=\"node.id\"\n            (mousedown)=\"onNodeMouseDown($event, node)\"\n            (click)=\"onNodeClick($event, node)\"\n            (dblclick)=\"nodeDoubleClick.emit(node)\"\n          >\n            <!-- Node shadow (optional) -->\n            @if (shadowsEnabled()) {\n              <rect\n                class=\"node-shadow\"\n                [attr.width]=\"getNodeSize(node).width\"\n                [attr.height]=\"getNodeSize(node).height\"\n                fill=\"rgba(0,0,0,0.08)\"\n                rx=\"12\"\n                transform=\"translate(2, 3)\"\n                style=\"filter: blur(4px);\"\n              />\n            }\n            <!-- Node background -->\n            <rect\n              class=\"node-bg\"\n              [attr.width]=\"getNodeSize(node).width\"\n              [attr.height]=\"getNodeSize(node).height\"\n              fill=\"white\"\n              [attr.stroke]=\"selection().nodes.includes(node.id) ? '#3b82f6' : '#e2e8f0'\"\n              [attr.stroke-width]=\"selection().nodes.includes(node.id) ? 2.5 : 1.5\"\n              rx=\"12\"\n            />\n\n            <!-- Node type icon (text/emoji) or custom image -->\n            @if (getNodeImage(node)) {\n              <image\n                class=\"node-image\"\n                [attr.href]=\"getNodeImage(node)\"\n                [attr.xlink:href]=\"getNodeImage(node)\"\n                [attr.x]=\"getImagePosition(node).x\"\n                [attr.y]=\"getImagePosition(node).y\"\n                [attr.width]=\"getImageSize(node)\"\n                [attr.height]=\"getImageSize(node)\"\n                preserveAspectRatio=\"xMidYMid meet\"\n              />\n            } @else {\n              <text\n                class=\"node-icon\"\n                [attr.x]=\"getIconPosition(node).x\"\n                [attr.y]=\"getIconPosition(node).y\"\n                text-anchor=\"middle\"\n                dominant-baseline=\"middle\"\n                [attr.font-size]=\"getNodeSize(node).height * 0.28\"\n              >\n                {{ getNodeTypeIcon(node) }}\n              </text>\n            }\n\n            <!-- Node label -->\n            <text\n              class=\"node-label\"\n              [attr.x]=\"getLabelPosition(node).x\"\n              [attr.y]=\"getLabelPosition(node).y\"\n              text-anchor=\"middle\"\n              dominant-baseline=\"middle\"\n              font-size=\"14\"\n              font-weight=\"500\"\n              fill=\"#1e293b\"\n            >\n              {{ node.data['name'] || node.type }}\n            </text>\n          </g>\n        }\n\n        <!-- Layer 3: Attachment points (on top of nodes) -->\n        @for (node of internalGraph().nodes; track node.id) {\n          @if (showAttachmentPoints() === node.id) {\n            <g [attr.transform]=\"'translate(' + node.position.x + ',' + node.position.y + ')'\">\n              @for (port of getNodePorts(node); track port.position) {\n                <circle\n                  [attr.cx]=\"port.x\"\n                  [attr.cy]=\"port.y\"\n                  [attr.r]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? 8 : 6\"\n                  [attr.fill]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? '#2563eb' : '#94a3b8'\"\n                  stroke=\"white\"\n                  stroke-width=\"2\"\n                  class=\"attachment-point\"\n                  [class.hovered]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position\"\n                  (mousedown)=\"$event.stopPropagation()\"\n                  (click)=\"onAttachmentPointClick($event, node, port.position)\"\n                />\n              }\n            </g>\n          }\n        }\n\n        <!-- Layer 4: Edge endpoints (only visible when edge is selected) -->\n        @for (edge of internalGraph().edges; track edge.id) {\n          @if (selection().edges.includes(edge.id)) {\n            <g>\n              <!-- Source endpoint -->\n              <circle\n                [attr.cx]=\"getEdgeSourcePoint(edge).x\"\n                [attr.cy]=\"getEdgeSourcePoint(edge).y\"\n                r=\"6\"\n                fill=\"#3b82f6\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                class=\"edge-endpoint selected\"\n                (mousedown)=\"onEdgeEndpointMouseDown($event, edge, 'source')\"\n              />\n\n              <!-- Target endpoint -->\n              <circle\n                [attr.cx]=\"getEdgeTargetPoint(edge).x\"\n                [attr.cy]=\"getEdgeTargetPoint(edge).y\"\n                r=\"6\"\n                fill=\"#3b82f6\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                class=\"edge-endpoint selected\"\n                (mousedown)=\"onEdgeEndpointMouseDown($event, edge, 'target')\"\n              />\n            </g>\n          }\n        }\n\n        <!-- Layer 5: Selection box (Shift+drag) -->\n        @if (selectionBox()) {\n          <rect\n            class=\"selection-box\"\n            [attr.x]=\"selectionBox()!.x\"\n            [attr.y]=\"selectionBox()!.y\"\n            [attr.width]=\"selectionBox()!.width\"\n            [attr.height]=\"selectionBox()!.height\"\n            fill=\"rgba(59, 130, 246, 0.1)\"\n            stroke=\"#3b82f6\"\n            stroke-width=\"1\"\n            stroke-dasharray=\"4,2\"\n          />\n        }\n      </g>\n    </svg>\n  </div>\n\n  <!-- Edge direction selector overlay -->\n  @if (selectedEdgeMidpoint()) {\n    <div\n      class=\"edge-direction-selector\"\n      [style.left.px]=\"selectedEdgeMidpoint()!.x\"\n      [style.top.px]=\"selectedEdgeMidpoint()!.y\"\n    >\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"selectedEdgeMidpoint()!.edge.direction === 'backward'\"\n        title=\"Backward\"\n        (click)=\"setEdgeDirection('backward')\"\n      >\u2190</button>\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"selectedEdgeMidpoint()!.edge.direction === 'bidirectional'\"\n        title=\"Bidirectional\"\n        (click)=\"setEdgeDirection('bidirectional')\"\n      >\u2194</button>\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"!selectedEdgeMidpoint()!.edge.direction || selectedEdgeMidpoint()!.edge.direction === 'forward'\"\n        title=\"Forward\"\n        (click)=\"setEdgeDirection('forward')\"\n      >\u2192</button>\n    </div>\n  }\n  <!-- Validation errors -->\n  @if (validationResult() && !validationResult()!.valid) {\n    <div class=\"validation-panel\">\n      <h4>Validation Errors</h4>\n      @for (error of validationResult()!.errors; track error.rule) {\n        <div class=\"error-item\" [class.warning]=\"error.severity === 'warning'\">\n          {{ error.message }}\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".graph-editor-container{display:flex;width:100%;height:100%;position:relative;background:var(--graph-editor-canvas-bg, #f8f9fa)}.graph-palette-overlay{position:absolute;top:16px;left:16px;display:flex;gap:4px;z-index:10;background:#fffffff2;padding:6px;border-radius:var(--radius-md, 8px);box-shadow:0 2px 8px #0000001a;backdrop-filter:blur(4px)}.palette-item{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1.5px solid var(--neutral-200, #e5e7eb);border-radius:var(--radius-md, 8px);background:var(--white, #fff);color:var(--neutral-600, #4b5563);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease;font-size:20px}.palette-icon-img{width:24px;height:24px;object-fit:contain}.palette-icon-svg{width:22px;height:22px;flex-shrink:0}.palette-item:focus-visible{outline:2px solid var(--indigo-400, #818cf8);outline-offset:2px}.palette-item:hover{background:var(--neutral-50, #f9fafb);border-color:var(--interactive, #3b82f6);color:var(--interactive, #3b82f6);transform:translateY(-1px);box-shadow:0 2px 6px #00000014}.palette-item:active{transform:translateY(0);box-shadow:none}.palette-item.tool-item.active{background:var(--interactive, #3b82f6);border-color:var(--interactive, #3b82f6);color:#fff}.palette-item.tool-item.active:hover{background:var(--interactive-hover, #2563eb);border-color:var(--interactive-hover, #2563eb);color:#fff}.palette-divider{width:1px;background:var(--neutral-200, #e5e7eb);align-self:stretch;margin:4px 2px}.graph-canvas-wrapper{flex:1;position:relative;overflow:hidden}.graph-canvas{width:100%;height:100%;cursor:grab}.graph-canvas:active{cursor:grabbing}.graph-canvas.tool-line,.graph-canvas.tool-line .graph-node{cursor:crosshair}.graph-node{cursor:move;user-select:none;-webkit-user-select:none;transition:transform .1s ease-out}.graph-node:hover .node-bg{stroke:#cbd5e1}.graph-node text{pointer-events:none}.graph-node .node-label{font-family:system-ui,-apple-system,sans-serif}.graph-node.selected .node-bg{stroke:#3b82f6;filter:drop-shadow(0 4px 12px rgba(59,130,246,.25))}.edge-line{transition:stroke .15s,stroke-width .15s}.edge-line.selected{filter:drop-shadow(0 2px 4px rgba(59,130,246,.3))}.edge-hit-area{cursor:pointer}.edge-endpoint{cursor:pointer;transition:r .2s,fill .2s}.edge-endpoint:hover{r:8;fill:#2563eb}.edge-endpoint.selected{fill:#2563eb}.attachment-point{cursor:crosshair;transition:all .2s}.attachment-point.hovered{filter:drop-shadow(0 0 4px rgba(37,99,235,.6))}.validation-panel{position:absolute;bottom:0;left:0;right:0;max-height:200px;overflow-y:auto;background:#fff;border-top:1px solid #e5e7eb;padding:16px}.error-item{padding:8px 12px;margin-bottom:8px;background:#fee2e2;border-left:3px solid #ef4444;border-radius:4px;font-size:14px}.error-item.warning{background:#fef3c7;border-left-color:#f59e0b}.edge-direction-selector{position:absolute;transform:translate(-50%,-100%);margin-top:-12px;display:flex;gap:2px;background:#fffffff2;padding:4px;border-radius:6px;box-shadow:0 2px 8px #00000026;backdrop-filter:blur(4px);z-index:20;pointer-events:auto}.direction-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid #e5e7eb;border-radius:4px;background:#fff;cursor:pointer;font-size:16px;transition:all .15s;color:#6b7280}.direction-btn:hover{background:#f3f4f6;border-color:#3b82f6;color:#3b82f6}.direction-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: GraphEditorComponent, isStandalone: true, selector: "graph-editor", inputs: { config: "config", graph: "graph", readonly: "readonly", visualizationMode: "visualizationMode", overlayData: "overlayData" }, outputs: { graphChange: "graphChange", nodeAdded: "nodeAdded", nodeUpdated: "nodeUpdated", nodeRemoved: "nodeRemoved", edgeAdded: "edgeAdded", edgeUpdated: "edgeUpdated", edgeRemoved: "edgeRemoved", selectionChange: "selectionChange", validationChange: "validationChange", nodeClick: "nodeClick", nodeDoubleClick: "nodeDoubleClick", edgeClick: "edgeClick", edgeDoubleClick: "edgeDoubleClick", canvasClick: "canvasClick", contextMenu: "contextMenu" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)" }, styleAttribute: "outline: none;" }, providers: [GraphHistoryService], viewQueries: [{ propertyName: "canvasSvgRef", first: true, predicate: ["canvasSvg"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"graph-editor-container\">\n  <!-- Canvas with overlaid palette -->\n  <div class=\"graph-canvas-wrapper\">\n    <!-- Top-left horizontal palette overlay -->\n    @if (config.palette?.enabled !== false) {\n      <div class=\"graph-palette-overlay\">\n        <!-- Tools -->\n        <button\n          class=\"palette-item tool-item\"\n          [class.active]=\"activeTool() === 'hand'\"\n          title=\"Hand tool (move nodes)\"\n          (click)=\"switchTool('hand')\"\n        >\n          <span class=\"icon\">\u270B</span>\n        </button>\n        <button\n          class=\"palette-item tool-item\"\n          [class.active]=\"activeTool() === 'line'\"\n          title=\"Line tool (draw connections)\"\n          (click)=\"switchTool('line')\"\n        >\n          <span class=\"icon\">\u2215</span>\n        </button>\n\n        <!-- Divider -->\n        <div class=\"palette-divider\"></div>\n\n        <!-- Node types -->\n        @for (nodeType of config.nodes.types; track nodeType.type) {\n          <button\n            class=\"palette-item\"\n            [attr.data-node-type]=\"nodeType.type\"\n            [attr.title]=\"nodeType.label || nodeType.type\"\n            (click)=\"addNode(nodeType.type)\"\n          >\n            @if (nodeType.iconSvg) {\n              <svg\n                class=\"palette-icon-svg\"\n                [attr.viewBox]=\"nodeType.iconSvg.viewBox || '0 0 24 24'\"\n                [attr.fill]=\"nodeType.iconSvg.fill || 'none'\"\n                [attr.stroke]=\"nodeType.iconSvg.stroke || '#1D6A96'\"\n                [attr.stroke-width]=\"nodeType.iconSvg.strokeWidth || 2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                @for (pathData of splitIconPaths(nodeType.iconSvg.path); track $index) {\n                  <path [attr.d]=\"pathData\"/>\n                }\n              </svg>\n            } @else if (nodeType.defaultData['imageUrl']) {\n              <img\n                class=\"palette-icon-img\"\n                [src]=\"nodeType.defaultData['imageUrl']\"\n                [alt]=\"nodeType.label || nodeType.type\"\n              />\n            } @else {\n              <span class=\"icon\">{{ nodeType.icon || '\u25CF' }}</span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    <svg\n      #canvasSvg\n      [class.tool-line]=\"activeTool() === 'line'\"\n      [attr.width]=\"'100%'\"\n      [attr.height]=\"'100%'\"\n      (mousedown)=\"onCanvasMouseDown($event)\"\n      (mousemove)=\"onCanvasMouseMove($event)\"\n      (mouseup)=\"onCanvasMouseUp($event)\"\n      (wheel)=\"onWheel($event)\"\n      (contextmenu)=\"onContextMenu($event)\"\n    >\n      <!-- Arrow marker definitions -->\n      <defs>\n        <marker id=\"arrow-end\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 0 1 L 8 5 L 0 9 z\" fill=\"#94a3b8\"/>\n        </marker>\n        <marker id=\"arrow-end-selected\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 0 1 L 8 5 L 0 9 z\" fill=\"#3b82f6\"/>\n        </marker>\n        <marker id=\"arrow-start\" viewBox=\"0 0 10 10\" refX=\"1\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 10 1 L 2 5 L 10 9 z\" fill=\"#94a3b8\"/>\n        </marker>\n        <marker id=\"arrow-start-selected\" viewBox=\"0 0 10 10\" refX=\"1\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 10 1 L 2 5 L 10 9 z\" fill=\"#3b82f6\"/>\n        </marker>\n      </defs>\n\n      <!-- Main transform group (pan + zoom) -->\n      <g [attr.transform]=\"transform()\">\n        <!-- Grid (if enabled) -->\n        <!-- Grid (if enabled) - extended to cover viewport during pan -->\n        @if (config.canvas?.grid?.enabled) {\n          <defs>\n            <pattern\n              id=\"grid\"\n              [attr.width]=\"config.canvas!.grid!.size\"\n              [attr.height]=\"config.canvas!.grid!.size\"\n              patternUnits=\"userSpaceOnUse\"\n            >\n              <path\n                [attr.d]=\"'M ' + config.canvas!.grid!.size + ' 0 L 0 0 0 ' + config.canvas!.grid!.size\"\n                fill=\"none\"\n                [attr.stroke]=\"config.canvas!.grid!.color || '#e0e0e0'\"\n                stroke-width=\"1\"\n              />\n            </pattern>\n          </defs>\n          <!-- Extended grid background covering viewport + pan offset -->\n          <rect\n            [attr.x]=\"gridBounds().x\"\n            [attr.y]=\"gridBounds().y\"\n            [attr.width]=\"gridBounds().width\"\n            [attr.height]=\"gridBounds().height\"\n            fill=\"url(#grid)\"\n          />\n        }\n\n        <!-- Layer 0.5: Preview line for line tool (rubber-band) -->\n        @if (previewLine()) {\n          <line\n            class=\"preview-line\"\n            [attr.x1]=\"previewLine()!.source.x\"\n            [attr.y1]=\"previewLine()!.source.y\"\n            [attr.x2]=\"previewLine()!.target.x\"\n            [attr.y2]=\"previewLine()!.target.y\"\n            stroke=\"#3b82f6\"\n            stroke-width=\"2.5\"\n            stroke-dasharray=\"8,6\"\n            stroke-linecap=\"round\"\n            opacity=\"0.7\"\n          />\n        }\n\n        <!-- Layer 1: Edge paths (behind everything) -->\n        @for (edge of internalGraph().edges; track edge.id) {\n          <!-- Edge shadow for depth (optional) -->\n          @if (shadowsEnabled()) {\n            <path\n              class=\"edge-shadow\"\n              [attr.d]=\"getEdgePath(edge)\"\n              stroke=\"rgba(0,0,0,0.06)\"\n              stroke-width=\"6\"\n              fill=\"none\"\n              stroke-linecap=\"round\"\n              [attr.transform]=\"'translate(1, 2)'\"\n            />\n          }\n          <!-- Invisible wide hit-area for easier clicking (hand tool only) -->\n          <path\n            [attr.d]=\"getEdgePath(edge)\"\n            stroke=\"transparent\"\n            [attr.stroke-width]=\"20\"\n            fill=\"none\"\n            class=\"edge-hit-area\"\n            [attr.pointer-events]=\"activeTool() === 'hand' ? 'stroke' : 'none'\"\n            (click)=\"onEdgeClick($event, edge)\"\n            (dblclick)=\"onEdgeDoubleClick($event, edge)\"\n          />\n          <!-- Visible edge line -->\n          <path\n            class=\"edge-line\"\n            [attr.d]=\"getEdgePath(edge)\"\n            [attr.stroke]=\"selection().edges.includes(edge.id) ? '#3b82f6' : '#94a3b8'\"\n            [attr.stroke-width]=\"selection().edges.includes(edge.id) ? 2.5 : 2\"\n            fill=\"none\"\n            stroke-linecap=\"round\"\n            [class.selected]=\"selection().edges.includes(edge.id)\"\n            [attr.marker-end]=\"getEdgeMarkerEnd(edge)\"\n            [attr.marker-start]=\"getEdgeMarkerStart(edge)\"\n            pointer-events=\"none\"\n          />\n        }\n\n        <!-- Layer 2: Nodes -->\n        @for (node of internalGraph().nodes; track node.id) {\n          <g\n            [attr.transform]=\"'translate(' + node.position.x + ',' + node.position.y + ')'\"\n            class=\"graph-node\"\n            [class.selected]=\"selection().nodes.includes(node.id)\"\n            [attr.data-node-id]=\"node.id\"\n            (mousedown)=\"onNodeMouseDown($event, node)\"\n            (click)=\"onNodeClick($event, node)\"\n            (dblclick)=\"nodeDoubleClick.emit(node)\"\n          >\n            <!-- Node shadow (optional) -->\n            @if (shadowsEnabled()) {\n              <rect\n                class=\"node-shadow\"\n                [attr.width]=\"getNodeSize(node).width\"\n                [attr.height]=\"getNodeSize(node).height\"\n                fill=\"rgba(0,0,0,0.08)\"\n                rx=\"12\"\n                transform=\"translate(2, 3)\"\n                style=\"filter: blur(4px);\"\n              />\n            }\n            <!-- Node background -->\n            <rect\n              class=\"node-bg\"\n              [attr.width]=\"getNodeSize(node).width\"\n              [attr.height]=\"getNodeSize(node).height\"\n              fill=\"white\"\n              [attr.stroke]=\"selection().nodes.includes(node.id) ? '#3b82f6' : '#e2e8f0'\"\n              [attr.stroke-width]=\"selection().nodes.includes(node.id) ? 2.5 : 1.5\"\n              rx=\"12\"\n            />\n\n            <!-- Node type icon (text/emoji) or custom image -->\n            @if (getNodeImage(node)) {\n              <image\n                class=\"node-image\"\n                [attr.href]=\"getNodeImage(node)\"\n                [attr.xlink:href]=\"getNodeImage(node)\"\n                [attr.x]=\"getImagePosition(node).x\"\n                [attr.y]=\"getImagePosition(node).y\"\n                [attr.width]=\"getImageSize(node)\"\n                [attr.height]=\"getImageSize(node)\"\n                preserveAspectRatio=\"xMidYMid meet\"\n              />\n            } @else {\n              <text\n                class=\"node-icon\"\n                [attr.x]=\"getIconPosition(node).x\"\n                [attr.y]=\"getIconPosition(node).y\"\n                text-anchor=\"middle\"\n                dominant-baseline=\"middle\"\n                [attr.font-size]=\"getNodeSize(node).height * 0.28\"\n              >\n                {{ getNodeTypeIcon(node) }}\n              </text>\n            }\n\n            <!-- Node label (wrapped and auto-sized) -->\n            <text\n              class=\"node-label\"\n              [attr.x]=\"getLabelLineX(node)\"\n              text-anchor=\"middle\"\n              [attr.font-size]=\"getWrappedLabel(node).fontSize\"\n              font-weight=\"500\"\n              fill=\"#1e293b\"\n            >\n              @for (line of getWrappedLabel(node).lines; track $index) {\n                <tspan\n                  [attr.x]=\"getLabelLineX(node)\"\n                  [attr.y]=\"getLabelLineY(node, $index, getWrappedLabel(node).lines.length, getWrappedLabel(node).lineHeight)\"\n                >{{ line }}</tspan>\n              }\n            </text>\n\n            <!-- Resize handle (SE corner, visible when selected + hand tool) -->\n            @if (selection().nodes.includes(node.id) && activeTool() === 'hand' && selection().nodes.length === 1) {\n              <rect\n                class=\"resize-handle resize-handle-se\"\n                [attr.x]=\"getNodeSize(node).width - 8\"\n                [attr.y]=\"getNodeSize(node).height - 8\"\n                width=\"10\"\n                height=\"10\"\n                fill=\"#3b82f6\"\n                rx=\"2\"\n                cursor=\"se-resize\"\n                (mousedown)=\"onResizeHandleMouseDown($event, node)\"\n              />\n            }\n          </g>\n        }\n\n        <!-- Layer 3: Attachment points (on top of nodes) -->\n        @for (node of internalGraph().nodes; track node.id) {\n          @if (showAttachmentPoints() === node.id) {\n            <g [attr.transform]=\"'translate(' + node.position.x + ',' + node.position.y + ')'\">\n              @for (port of getNodePorts(node); track port.position) {\n                <circle\n                  [attr.cx]=\"port.x\"\n                  [attr.cy]=\"port.y\"\n                  [attr.r]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? 8 : 6\"\n                  [attr.fill]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? '#2563eb' : '#94a3b8'\"\n                  stroke=\"white\"\n                  stroke-width=\"2\"\n                  class=\"attachment-point\"\n                  [class.hovered]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position\"\n                  (mousedown)=\"$event.stopPropagation()\"\n                  (click)=\"onAttachmentPointClick($event, node, port.position)\"\n                />\n              }\n            </g>\n          }\n        }\n\n        <!-- Layer 4: Edge endpoints (only visible when edge is selected) -->\n        @for (edge of internalGraph().edges; track edge.id) {\n          @if (selection().edges.includes(edge.id)) {\n            <g>\n              <!-- Source endpoint -->\n              <circle\n                [attr.cx]=\"getEdgeSourcePoint(edge).x\"\n                [attr.cy]=\"getEdgeSourcePoint(edge).y\"\n                r=\"6\"\n                fill=\"#3b82f6\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                class=\"edge-endpoint selected\"\n                (mousedown)=\"onEdgeEndpointMouseDown($event, edge, 'source')\"\n              />\n\n              <!-- Target endpoint -->\n              <circle\n                [attr.cx]=\"getEdgeTargetPoint(edge).x\"\n                [attr.cy]=\"getEdgeTargetPoint(edge).y\"\n                r=\"6\"\n                fill=\"#3b82f6\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                class=\"edge-endpoint selected\"\n                (mousedown)=\"onEdgeEndpointMouseDown($event, edge, 'target')\"\n              />\n            </g>\n          }\n        }\n\n        <!-- Layer 5: Selection box (Shift+drag) -->\n        @if (selectionBox()) {\n          <rect\n            class=\"selection-box\"\n            [attr.x]=\"selectionBox()!.x\"\n            [attr.y]=\"selectionBox()!.y\"\n            [attr.width]=\"selectionBox()!.width\"\n            [attr.height]=\"selectionBox()!.height\"\n            fill=\"rgba(59, 130, 246, 0.1)\"\n            stroke=\"#3b82f6\"\n            stroke-width=\"1\"\n            stroke-dasharray=\"4,2\"\n          />\n        }\n      </g>\n    </svg>\n  </div>\n\n  <!-- Edge direction selector overlay -->\n  @if (selectedEdgeMidpoint()) {\n    <div\n      class=\"edge-direction-selector\"\n      [style.left.px]=\"selectedEdgeMidpoint()!.x\"\n      [style.top.px]=\"selectedEdgeMidpoint()!.y\"\n    >\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"selectedEdgeMidpoint()!.edge.direction === 'backward'\"\n        title=\"Backward\"\n        (click)=\"setEdgeDirection('backward')\"\n      >\u2190</button>\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"selectedEdgeMidpoint()!.edge.direction === 'bidirectional'\"\n        title=\"Bidirectional\"\n        (click)=\"setEdgeDirection('bidirectional')\"\n      >\u2194</button>\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"!selectedEdgeMidpoint()!.edge.direction || selectedEdgeMidpoint()!.edge.direction === 'forward'\"\n        title=\"Forward\"\n        (click)=\"setEdgeDirection('forward')\"\n      >\u2192</button>\n    </div>\n  }\n</div>\n", styles: [".graph-editor-container{display:flex;width:100%;height:100%;position:relative;background:var(--graph-editor-canvas-bg, #f8f9fa)}.graph-palette-overlay{position:absolute;top:16px;left:16px;display:flex;gap:4px;z-index:10;background:#fffffff2;padding:6px;border-radius:var(--radius-md, 8px);box-shadow:0 2px 8px #0000001a;backdrop-filter:blur(4px)}.palette-item{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1.5px solid var(--neutral-200, #e5e7eb);border-radius:var(--radius-md, 8px);background:var(--white, #fff);color:var(--neutral-600, #4b5563);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease;font-size:20px}.palette-icon-img{width:24px;height:24px;object-fit:contain}.palette-icon-svg{width:22px;height:22px;flex-shrink:0}.palette-item:focus-visible{outline:2px solid var(--indigo-400, #818cf8);outline-offset:2px}.palette-item:hover{background:var(--neutral-50, #f9fafb);border-color:var(--interactive, #3b82f6);color:var(--interactive, #3b82f6);transform:translateY(-1px);box-shadow:0 2px 6px #00000014}.palette-item:active{transform:translateY(0);box-shadow:none}.palette-item.tool-item.active{background:var(--interactive, #3b82f6);border-color:var(--interactive, #3b82f6);color:#fff}.palette-item.tool-item.active:hover{background:var(--interactive-hover, #2563eb);border-color:var(--interactive-hover, #2563eb);color:#fff}.palette-divider{width:1px;background:var(--neutral-200, #e5e7eb);align-self:stretch;margin:4px 2px}.graph-canvas-wrapper{flex:1;position:relative;overflow:hidden}.graph-canvas{width:100%;height:100%;cursor:grab}.graph-canvas:active{cursor:grabbing}.graph-canvas.tool-line,.graph-canvas.tool-line .graph-node{cursor:crosshair}.graph-node{cursor:move;user-select:none;-webkit-user-select:none;transition:transform .1s ease-out}.graph-node:hover .node-bg{stroke:#cbd5e1}.graph-node text{pointer-events:none}.graph-node .node-label{font-family:system-ui,-apple-system,sans-serif}.graph-node.selected .node-bg{stroke:#3b82f6;filter:drop-shadow(0 4px 12px rgba(59,130,246,.25))}.edge-line{transition:stroke .15s,stroke-width .15s}.edge-line.selected{filter:drop-shadow(0 2px 4px rgba(59,130,246,.3))}.edge-hit-area{cursor:pointer}.edge-endpoint{cursor:pointer;transition:r .2s,fill .2s}.edge-endpoint:hover{r:8;fill:#2563eb}.edge-endpoint.selected{fill:#2563eb}.attachment-point{cursor:crosshair;transition:all .2s}.attachment-point.hovered{filter:drop-shadow(0 0 4px rgba(37,99,235,.6))}.validation-panel{position:absolute;bottom:0;left:0;right:0;max-height:200px;overflow-y:auto;background:#fff;border-top:1px solid #e5e7eb;padding:16px}.error-item{padding:8px 12px;margin-bottom:8px;background:#fee2e2;border-left:3px solid #ef4444;border-radius:4px;font-size:14px}.error-item.warning{background:#fef3c7;border-left-color:#f59e0b}.edge-direction-selector{position:absolute;transform:translate(-50%,-100%);margin-top:-12px;display:flex;gap:2px;background:#fffffff2;padding:4px;border-radius:6px;box-shadow:0 2px 8px #00000026;backdrop-filter:blur(4px);z-index:20;pointer-events:auto}.direction-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid #e5e7eb;border-radius:4px;background:#fff;cursor:pointer;font-size:16px;transition:all .15s;color:#6b7280}.direction-btn:hover{background:#f3f4f6;border-color:#3b82f6;color:#3b82f6}.direction-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff}.resize-handle{cursor:se-resize;opacity:.8;transition:opacity .15s,fill .15s}.resize-handle:hover{opacity:1;fill:#2563eb}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: GraphEditorComponent, decorators: [{
             type: Component,
@@ -1491,7 +1694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                         'tabindex': '0',
                         'style': 'outline: none;',
                         '(keydown)': 'onKeyDown($event)'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"graph-editor-container\">\n  <!-- Canvas with overlaid palette -->\n  <div class=\"graph-canvas-wrapper\">\n    <!-- Top-left horizontal palette overlay -->\n    @if (config.palette?.enabled !== false) {\n      <div class=\"graph-palette-overlay\">\n        <!-- Tools -->\n        <button\n          class=\"palette-item tool-item\"\n          [class.active]=\"activeTool() === 'hand'\"\n          title=\"Hand tool (move nodes)\"\n          (click)=\"switchTool('hand')\"\n        >\n          <span class=\"icon\">\u270B</span>\n        </button>\n        <button\n          class=\"palette-item tool-item\"\n          [class.active]=\"activeTool() === 'line'\"\n          title=\"Line tool (draw connections)\"\n          (click)=\"switchTool('line')\"\n        >\n          <span class=\"icon\">\u2215</span>\n        </button>\n\n        <!-- Divider -->\n        <div class=\"palette-divider\"></div>\n\n        <!-- Node types -->\n        @for (nodeType of config.nodes.types; track nodeType.type) {\n          <button\n            class=\"palette-item\"\n            [attr.data-node-type]=\"nodeType.type\"\n            [attr.title]=\"nodeType.label || nodeType.type\"\n            (click)=\"addNode(nodeType.type)\"\n          >\n            @if (nodeType.iconSvg) {\n              <svg\n                class=\"palette-icon-svg\"\n                [attr.viewBox]=\"nodeType.iconSvg.viewBox || '0 0 24 24'\"\n                [attr.fill]=\"nodeType.iconSvg.fill || 'none'\"\n                [attr.stroke]=\"nodeType.iconSvg.stroke || '#1D6A96'\"\n                [attr.stroke-width]=\"nodeType.iconSvg.strokeWidth || 2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                @for (pathData of splitIconPaths(nodeType.iconSvg.path); track $index) {\n                  <path [attr.d]=\"pathData\"/>\n                }\n              </svg>\n            } @else if (nodeType.defaultData['imageUrl']) {\n              <img\n                class=\"palette-icon-img\"\n                [src]=\"nodeType.defaultData['imageUrl']\"\n                [alt]=\"nodeType.label || nodeType.type\"\n              />\n            } @else {\n              <span class=\"icon\">{{ nodeType.icon || '\u25CF' }}</span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    <svg\n      #canvasSvg\n      [class.tool-line]=\"activeTool() === 'line'\"\n      [attr.width]=\"'100%'\"\n      [attr.height]=\"'100%'\"\n      (mousedown)=\"onCanvasMouseDown($event)\"\n      (mousemove)=\"onCanvasMouseMove($event)\"\n      (mouseup)=\"onCanvasMouseUp($event)\"\n      (wheel)=\"onWheel($event)\"\n      (contextmenu)=\"onContextMenu($event)\"\n    >\n      <!-- Arrow marker definitions -->\n      <defs>\n        <marker id=\"arrow-end\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 0 1 L 8 5 L 0 9 z\" fill=\"#94a3b8\"/>\n        </marker>\n        <marker id=\"arrow-end-selected\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 0 1 L 8 5 L 0 9 z\" fill=\"#3b82f6\"/>\n        </marker>\n        <marker id=\"arrow-start\" viewBox=\"0 0 10 10\" refX=\"1\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 10 1 L 2 5 L 10 9 z\" fill=\"#94a3b8\"/>\n        </marker>\n        <marker id=\"arrow-start-selected\" viewBox=\"0 0 10 10\" refX=\"1\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 10 1 L 2 5 L 10 9 z\" fill=\"#3b82f6\"/>\n        </marker>\n      </defs>\n\n      <!-- Main transform group (pan + zoom) -->\n      <g [attr.transform]=\"transform()\">\n        <!-- Grid (if enabled) -->\n        <!-- Grid (if enabled) - extended to cover viewport during pan -->\n        @if (config.canvas?.grid?.enabled) {\n          <defs>\n            <pattern\n              id=\"grid\"\n              [attr.width]=\"config.canvas!.grid!.size\"\n              [attr.height]=\"config.canvas!.grid!.size\"\n              patternUnits=\"userSpaceOnUse\"\n            >\n              <path\n                [attr.d]=\"'M ' + config.canvas!.grid!.size + ' 0 L 0 0 0 ' + config.canvas!.grid!.size\"\n                fill=\"none\"\n                [attr.stroke]=\"config.canvas!.grid!.color || '#e0e0e0'\"\n                stroke-width=\"1\"\n              />\n            </pattern>\n          </defs>\n          <!-- Extended grid background covering viewport + pan offset -->\n          <rect\n            [attr.x]=\"gridBounds().x\"\n            [attr.y]=\"gridBounds().y\"\n            [attr.width]=\"gridBounds().width\"\n            [attr.height]=\"gridBounds().height\"\n            fill=\"url(#grid)\"\n          />\n        }\n\n        <!-- Layer 0.5: Preview line for line tool (rubber-band) -->\n        @if (previewLine()) {\n          <line\n            class=\"preview-line\"\n            [attr.x1]=\"previewLine()!.source.x\"\n            [attr.y1]=\"previewLine()!.source.y\"\n            [attr.x2]=\"previewLine()!.target.x\"\n            [attr.y2]=\"previewLine()!.target.y\"\n            stroke=\"#3b82f6\"\n            stroke-width=\"2.5\"\n            stroke-dasharray=\"8,6\"\n            stroke-linecap=\"round\"\n            opacity=\"0.7\"\n          />\n        }\n\n        <!-- Layer 1: Edge paths (behind everything) -->\n        @for (edge of internalGraph().edges; track edge.id) {\n          <!-- Edge shadow for depth (optional) -->\n          @if (shadowsEnabled()) {\n            <path\n              class=\"edge-shadow\"\n              [attr.d]=\"getEdgePath(edge)\"\n              stroke=\"rgba(0,0,0,0.06)\"\n              stroke-width=\"6\"\n              fill=\"none\"\n              stroke-linecap=\"round\"\n              [attr.transform]=\"'translate(1, 2)'\"\n            />\n          }\n          <!-- Invisible wide hit-area for easier clicking (hand tool only) -->\n          <path\n            [attr.d]=\"getEdgePath(edge)\"\n            stroke=\"transparent\"\n            [attr.stroke-width]=\"20\"\n            fill=\"none\"\n            class=\"edge-hit-area\"\n            [attr.pointer-events]=\"activeTool() === 'hand' ? 'stroke' : 'none'\"\n            (click)=\"onEdgeClick($event, edge)\"\n            (dblclick)=\"onEdgeDoubleClick($event, edge)\"\n          />\n          <!-- Visible edge line -->\n          <path\n            class=\"edge-line\"\n            [attr.d]=\"getEdgePath(edge)\"\n            [attr.stroke]=\"selection().edges.includes(edge.id) ? '#3b82f6' : '#94a3b8'\"\n            [attr.stroke-width]=\"selection().edges.includes(edge.id) ? 2.5 : 2\"\n            fill=\"none\"\n            stroke-linecap=\"round\"\n            [class.selected]=\"selection().edges.includes(edge.id)\"\n            [attr.marker-end]=\"getEdgeMarkerEnd(edge)\"\n            [attr.marker-start]=\"getEdgeMarkerStart(edge)\"\n            pointer-events=\"none\"\n          />\n        }\n\n        <!-- Layer 2: Nodes -->\n        @for (node of internalGraph().nodes; track node.id) {\n          <g\n            [attr.transform]=\"'translate(' + node.position.x + ',' + node.position.y + ')'\"\n            class=\"graph-node\"\n            [class.selected]=\"selection().nodes.includes(node.id)\"\n            [attr.data-node-id]=\"node.id\"\n            (mousedown)=\"onNodeMouseDown($event, node)\"\n            (click)=\"onNodeClick($event, node)\"\n            (dblclick)=\"nodeDoubleClick.emit(node)\"\n          >\n            <!-- Node shadow (optional) -->\n            @if (shadowsEnabled()) {\n              <rect\n                class=\"node-shadow\"\n                [attr.width]=\"getNodeSize(node).width\"\n                [attr.height]=\"getNodeSize(node).height\"\n                fill=\"rgba(0,0,0,0.08)\"\n                rx=\"12\"\n                transform=\"translate(2, 3)\"\n                style=\"filter: blur(4px);\"\n              />\n            }\n            <!-- Node background -->\n            <rect\n              class=\"node-bg\"\n              [attr.width]=\"getNodeSize(node).width\"\n              [attr.height]=\"getNodeSize(node).height\"\n              fill=\"white\"\n              [attr.stroke]=\"selection().nodes.includes(node.id) ? '#3b82f6' : '#e2e8f0'\"\n              [attr.stroke-width]=\"selection().nodes.includes(node.id) ? 2.5 : 1.5\"\n              rx=\"12\"\n            />\n\n            <!-- Node type icon (text/emoji) or custom image -->\n            @if (getNodeImage(node)) {\n              <image\n                class=\"node-image\"\n                [attr.href]=\"getNodeImage(node)\"\n                [attr.xlink:href]=\"getNodeImage(node)\"\n                [attr.x]=\"getImagePosition(node).x\"\n                [attr.y]=\"getImagePosition(node).y\"\n                [attr.width]=\"getImageSize(node)\"\n                [attr.height]=\"getImageSize(node)\"\n                preserveAspectRatio=\"xMidYMid meet\"\n              />\n            } @else {\n              <text\n                class=\"node-icon\"\n                [attr.x]=\"getIconPosition(node).x\"\n                [attr.y]=\"getIconPosition(node).y\"\n                text-anchor=\"middle\"\n                dominant-baseline=\"middle\"\n                [attr.font-size]=\"getNodeSize(node).height * 0.28\"\n              >\n                {{ getNodeTypeIcon(node) }}\n              </text>\n            }\n\n            <!-- Node label -->\n            <text\n              class=\"node-label\"\n              [attr.x]=\"getLabelPosition(node).x\"\n              [attr.y]=\"getLabelPosition(node).y\"\n              text-anchor=\"middle\"\n              dominant-baseline=\"middle\"\n              font-size=\"14\"\n              font-weight=\"500\"\n              fill=\"#1e293b\"\n            >\n              {{ node.data['name'] || node.type }}\n            </text>\n          </g>\n        }\n\n        <!-- Layer 3: Attachment points (on top of nodes) -->\n        @for (node of internalGraph().nodes; track node.id) {\n          @if (showAttachmentPoints() === node.id) {\n            <g [attr.transform]=\"'translate(' + node.position.x + ',' + node.position.y + ')'\">\n              @for (port of getNodePorts(node); track port.position) {\n                <circle\n                  [attr.cx]=\"port.x\"\n                  [attr.cy]=\"port.y\"\n                  [attr.r]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? 8 : 6\"\n                  [attr.fill]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? '#2563eb' : '#94a3b8'\"\n                  stroke=\"white\"\n                  stroke-width=\"2\"\n                  class=\"attachment-point\"\n                  [class.hovered]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position\"\n                  (mousedown)=\"$event.stopPropagation()\"\n                  (click)=\"onAttachmentPointClick($event, node, port.position)\"\n                />\n              }\n            </g>\n          }\n        }\n\n        <!-- Layer 4: Edge endpoints (only visible when edge is selected) -->\n        @for (edge of internalGraph().edges; track edge.id) {\n          @if (selection().edges.includes(edge.id)) {\n            <g>\n              <!-- Source endpoint -->\n              <circle\n                [attr.cx]=\"getEdgeSourcePoint(edge).x\"\n                [attr.cy]=\"getEdgeSourcePoint(edge).y\"\n                r=\"6\"\n                fill=\"#3b82f6\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                class=\"edge-endpoint selected\"\n                (mousedown)=\"onEdgeEndpointMouseDown($event, edge, 'source')\"\n              />\n\n              <!-- Target endpoint -->\n              <circle\n                [attr.cx]=\"getEdgeTargetPoint(edge).x\"\n                [attr.cy]=\"getEdgeTargetPoint(edge).y\"\n                r=\"6\"\n                fill=\"#3b82f6\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                class=\"edge-endpoint selected\"\n                (mousedown)=\"onEdgeEndpointMouseDown($event, edge, 'target')\"\n              />\n            </g>\n          }\n        }\n\n        <!-- Layer 5: Selection box (Shift+drag) -->\n        @if (selectionBox()) {\n          <rect\n            class=\"selection-box\"\n            [attr.x]=\"selectionBox()!.x\"\n            [attr.y]=\"selectionBox()!.y\"\n            [attr.width]=\"selectionBox()!.width\"\n            [attr.height]=\"selectionBox()!.height\"\n            fill=\"rgba(59, 130, 246, 0.1)\"\n            stroke=\"#3b82f6\"\n            stroke-width=\"1\"\n            stroke-dasharray=\"4,2\"\n          />\n        }\n      </g>\n    </svg>\n  </div>\n\n  <!-- Edge direction selector overlay -->\n  @if (selectedEdgeMidpoint()) {\n    <div\n      class=\"edge-direction-selector\"\n      [style.left.px]=\"selectedEdgeMidpoint()!.x\"\n      [style.top.px]=\"selectedEdgeMidpoint()!.y\"\n    >\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"selectedEdgeMidpoint()!.edge.direction === 'backward'\"\n        title=\"Backward\"\n        (click)=\"setEdgeDirection('backward')\"\n      >\u2190</button>\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"selectedEdgeMidpoint()!.edge.direction === 'bidirectional'\"\n        title=\"Bidirectional\"\n        (click)=\"setEdgeDirection('bidirectional')\"\n      >\u2194</button>\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"!selectedEdgeMidpoint()!.edge.direction || selectedEdgeMidpoint()!.edge.direction === 'forward'\"\n        title=\"Forward\"\n        (click)=\"setEdgeDirection('forward')\"\n      >\u2192</button>\n    </div>\n  }\n  <!-- Validation errors -->\n  @if (validationResult() && !validationResult()!.valid) {\n    <div class=\"validation-panel\">\n      <h4>Validation Errors</h4>\n      @for (error of validationResult()!.errors; track error.rule) {\n        <div class=\"error-item\" [class.warning]=\"error.severity === 'warning'\">\n          {{ error.message }}\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".graph-editor-container{display:flex;width:100%;height:100%;position:relative;background:var(--graph-editor-canvas-bg, #f8f9fa)}.graph-palette-overlay{position:absolute;top:16px;left:16px;display:flex;gap:4px;z-index:10;background:#fffffff2;padding:6px;border-radius:var(--radius-md, 8px);box-shadow:0 2px 8px #0000001a;backdrop-filter:blur(4px)}.palette-item{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1.5px solid var(--neutral-200, #e5e7eb);border-radius:var(--radius-md, 8px);background:var(--white, #fff);color:var(--neutral-600, #4b5563);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease;font-size:20px}.palette-icon-img{width:24px;height:24px;object-fit:contain}.palette-icon-svg{width:22px;height:22px;flex-shrink:0}.palette-item:focus-visible{outline:2px solid var(--indigo-400, #818cf8);outline-offset:2px}.palette-item:hover{background:var(--neutral-50, #f9fafb);border-color:var(--interactive, #3b82f6);color:var(--interactive, #3b82f6);transform:translateY(-1px);box-shadow:0 2px 6px #00000014}.palette-item:active{transform:translateY(0);box-shadow:none}.palette-item.tool-item.active{background:var(--interactive, #3b82f6);border-color:var(--interactive, #3b82f6);color:#fff}.palette-item.tool-item.active:hover{background:var(--interactive-hover, #2563eb);border-color:var(--interactive-hover, #2563eb);color:#fff}.palette-divider{width:1px;background:var(--neutral-200, #e5e7eb);align-self:stretch;margin:4px 2px}.graph-canvas-wrapper{flex:1;position:relative;overflow:hidden}.graph-canvas{width:100%;height:100%;cursor:grab}.graph-canvas:active{cursor:grabbing}.graph-canvas.tool-line,.graph-canvas.tool-line .graph-node{cursor:crosshair}.graph-node{cursor:move;user-select:none;-webkit-user-select:none;transition:transform .1s ease-out}.graph-node:hover .node-bg{stroke:#cbd5e1}.graph-node text{pointer-events:none}.graph-node .node-label{font-family:system-ui,-apple-system,sans-serif}.graph-node.selected .node-bg{stroke:#3b82f6;filter:drop-shadow(0 4px 12px rgba(59,130,246,.25))}.edge-line{transition:stroke .15s,stroke-width .15s}.edge-line.selected{filter:drop-shadow(0 2px 4px rgba(59,130,246,.3))}.edge-hit-area{cursor:pointer}.edge-endpoint{cursor:pointer;transition:r .2s,fill .2s}.edge-endpoint:hover{r:8;fill:#2563eb}.edge-endpoint.selected{fill:#2563eb}.attachment-point{cursor:crosshair;transition:all .2s}.attachment-point.hovered{filter:drop-shadow(0 0 4px rgba(37,99,235,.6))}.validation-panel{position:absolute;bottom:0;left:0;right:0;max-height:200px;overflow-y:auto;background:#fff;border-top:1px solid #e5e7eb;padding:16px}.error-item{padding:8px 12px;margin-bottom:8px;background:#fee2e2;border-left:3px solid #ef4444;border-radius:4px;font-size:14px}.error-item.warning{background:#fef3c7;border-left-color:#f59e0b}.edge-direction-selector{position:absolute;transform:translate(-50%,-100%);margin-top:-12px;display:flex;gap:2px;background:#fffffff2;padding:4px;border-radius:6px;box-shadow:0 2px 8px #00000026;backdrop-filter:blur(4px);z-index:20;pointer-events:auto}.direction-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid #e5e7eb;border-radius:4px;background:#fff;cursor:pointer;font-size:16px;transition:all .15s;color:#6b7280}.direction-btn:hover{background:#f3f4f6;border-color:#3b82f6;color:#3b82f6}.direction-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"graph-editor-container\">\n  <!-- Canvas with overlaid palette -->\n  <div class=\"graph-canvas-wrapper\">\n    <!-- Top-left horizontal palette overlay -->\n    @if (config.palette?.enabled !== false) {\n      <div class=\"graph-palette-overlay\">\n        <!-- Tools -->\n        <button\n          class=\"palette-item tool-item\"\n          [class.active]=\"activeTool() === 'hand'\"\n          title=\"Hand tool (move nodes)\"\n          (click)=\"switchTool('hand')\"\n        >\n          <span class=\"icon\">\u270B</span>\n        </button>\n        <button\n          class=\"palette-item tool-item\"\n          [class.active]=\"activeTool() === 'line'\"\n          title=\"Line tool (draw connections)\"\n          (click)=\"switchTool('line')\"\n        >\n          <span class=\"icon\">\u2215</span>\n        </button>\n\n        <!-- Divider -->\n        <div class=\"palette-divider\"></div>\n\n        <!-- Node types -->\n        @for (nodeType of config.nodes.types; track nodeType.type) {\n          <button\n            class=\"palette-item\"\n            [attr.data-node-type]=\"nodeType.type\"\n            [attr.title]=\"nodeType.label || nodeType.type\"\n            (click)=\"addNode(nodeType.type)\"\n          >\n            @if (nodeType.iconSvg) {\n              <svg\n                class=\"palette-icon-svg\"\n                [attr.viewBox]=\"nodeType.iconSvg.viewBox || '0 0 24 24'\"\n                [attr.fill]=\"nodeType.iconSvg.fill || 'none'\"\n                [attr.stroke]=\"nodeType.iconSvg.stroke || '#1D6A96'\"\n                [attr.stroke-width]=\"nodeType.iconSvg.strokeWidth || 2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                @for (pathData of splitIconPaths(nodeType.iconSvg.path); track $index) {\n                  <path [attr.d]=\"pathData\"/>\n                }\n              </svg>\n            } @else if (nodeType.defaultData['imageUrl']) {\n              <img\n                class=\"palette-icon-img\"\n                [src]=\"nodeType.defaultData['imageUrl']\"\n                [alt]=\"nodeType.label || nodeType.type\"\n              />\n            } @else {\n              <span class=\"icon\">{{ nodeType.icon || '\u25CF' }}</span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    <svg\n      #canvasSvg\n      [class.tool-line]=\"activeTool() === 'line'\"\n      [attr.width]=\"'100%'\"\n      [attr.height]=\"'100%'\"\n      (mousedown)=\"onCanvasMouseDown($event)\"\n      (mousemove)=\"onCanvasMouseMove($event)\"\n      (mouseup)=\"onCanvasMouseUp($event)\"\n      (wheel)=\"onWheel($event)\"\n      (contextmenu)=\"onContextMenu($event)\"\n    >\n      <!-- Arrow marker definitions -->\n      <defs>\n        <marker id=\"arrow-end\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 0 1 L 8 5 L 0 9 z\" fill=\"#94a3b8\"/>\n        </marker>\n        <marker id=\"arrow-end-selected\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 0 1 L 8 5 L 0 9 z\" fill=\"#3b82f6\"/>\n        </marker>\n        <marker id=\"arrow-start\" viewBox=\"0 0 10 10\" refX=\"1\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 10 1 L 2 5 L 10 9 z\" fill=\"#94a3b8\"/>\n        </marker>\n        <marker id=\"arrow-start-selected\" viewBox=\"0 0 10 10\" refX=\"1\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 10 1 L 2 5 L 10 9 z\" fill=\"#3b82f6\"/>\n        </marker>\n      </defs>\n\n      <!-- Main transform group (pan + zoom) -->\n      <g [attr.transform]=\"transform()\">\n        <!-- Grid (if enabled) -->\n        <!-- Grid (if enabled) - extended to cover viewport during pan -->\n        @if (config.canvas?.grid?.enabled) {\n          <defs>\n            <pattern\n              id=\"grid\"\n              [attr.width]=\"config.canvas!.grid!.size\"\n              [attr.height]=\"config.canvas!.grid!.size\"\n              patternUnits=\"userSpaceOnUse\"\n            >\n              <path\n                [attr.d]=\"'M ' + config.canvas!.grid!.size + ' 0 L 0 0 0 ' + config.canvas!.grid!.size\"\n                fill=\"none\"\n                [attr.stroke]=\"config.canvas!.grid!.color || '#e0e0e0'\"\n                stroke-width=\"1\"\n              />\n            </pattern>\n          </defs>\n          <!-- Extended grid background covering viewport + pan offset -->\n          <rect\n            [attr.x]=\"gridBounds().x\"\n            [attr.y]=\"gridBounds().y\"\n            [attr.width]=\"gridBounds().width\"\n            [attr.height]=\"gridBounds().height\"\n            fill=\"url(#grid)\"\n          />\n        }\n\n        <!-- Layer 0.5: Preview line for line tool (rubber-band) -->\n        @if (previewLine()) {\n          <line\n            class=\"preview-line\"\n            [attr.x1]=\"previewLine()!.source.x\"\n            [attr.y1]=\"previewLine()!.source.y\"\n            [attr.x2]=\"previewLine()!.target.x\"\n            [attr.y2]=\"previewLine()!.target.y\"\n            stroke=\"#3b82f6\"\n            stroke-width=\"2.5\"\n            stroke-dasharray=\"8,6\"\n            stroke-linecap=\"round\"\n            opacity=\"0.7\"\n          />\n        }\n\n        <!-- Layer 1: Edge paths (behind everything) -->\n        @for (edge of internalGraph().edges; track edge.id) {\n          <!-- Edge shadow for depth (optional) -->\n          @if (shadowsEnabled()) {\n            <path\n              class=\"edge-shadow\"\n              [attr.d]=\"getEdgePath(edge)\"\n              stroke=\"rgba(0,0,0,0.06)\"\n              stroke-width=\"6\"\n              fill=\"none\"\n              stroke-linecap=\"round\"\n              [attr.transform]=\"'translate(1, 2)'\"\n            />\n          }\n          <!-- Invisible wide hit-area for easier clicking (hand tool only) -->\n          <path\n            [attr.d]=\"getEdgePath(edge)\"\n            stroke=\"transparent\"\n            [attr.stroke-width]=\"20\"\n            fill=\"none\"\n            class=\"edge-hit-area\"\n            [attr.pointer-events]=\"activeTool() === 'hand' ? 'stroke' : 'none'\"\n            (click)=\"onEdgeClick($event, edge)\"\n            (dblclick)=\"onEdgeDoubleClick($event, edge)\"\n          />\n          <!-- Visible edge line -->\n          <path\n            class=\"edge-line\"\n            [attr.d]=\"getEdgePath(edge)\"\n            [attr.stroke]=\"selection().edges.includes(edge.id) ? '#3b82f6' : '#94a3b8'\"\n            [attr.stroke-width]=\"selection().edges.includes(edge.id) ? 2.5 : 2\"\n            fill=\"none\"\n            stroke-linecap=\"round\"\n            [class.selected]=\"selection().edges.includes(edge.id)\"\n            [attr.marker-end]=\"getEdgeMarkerEnd(edge)\"\n            [attr.marker-start]=\"getEdgeMarkerStart(edge)\"\n            pointer-events=\"none\"\n          />\n        }\n\n        <!-- Layer 2: Nodes -->\n        @for (node of internalGraph().nodes; track node.id) {\n          <g\n            [attr.transform]=\"'translate(' + node.position.x + ',' + node.position.y + ')'\"\n            class=\"graph-node\"\n            [class.selected]=\"selection().nodes.includes(node.id)\"\n            [attr.data-node-id]=\"node.id\"\n            (mousedown)=\"onNodeMouseDown($event, node)\"\n            (click)=\"onNodeClick($event, node)\"\n            (dblclick)=\"nodeDoubleClick.emit(node)\"\n          >\n            <!-- Node shadow (optional) -->\n            @if (shadowsEnabled()) {\n              <rect\n                class=\"node-shadow\"\n                [attr.width]=\"getNodeSize(node).width\"\n                [attr.height]=\"getNodeSize(node).height\"\n                fill=\"rgba(0,0,0,0.08)\"\n                rx=\"12\"\n                transform=\"translate(2, 3)\"\n                style=\"filter: blur(4px);\"\n              />\n            }\n            <!-- Node background -->\n            <rect\n              class=\"node-bg\"\n              [attr.width]=\"getNodeSize(node).width\"\n              [attr.height]=\"getNodeSize(node).height\"\n              fill=\"white\"\n              [attr.stroke]=\"selection().nodes.includes(node.id) ? '#3b82f6' : '#e2e8f0'\"\n              [attr.stroke-width]=\"selection().nodes.includes(node.id) ? 2.5 : 1.5\"\n              rx=\"12\"\n            />\n\n            <!-- Node type icon (text/emoji) or custom image -->\n            @if (getNodeImage(node)) {\n              <image\n                class=\"node-image\"\n                [attr.href]=\"getNodeImage(node)\"\n                [attr.xlink:href]=\"getNodeImage(node)\"\n                [attr.x]=\"getImagePosition(node).x\"\n                [attr.y]=\"getImagePosition(node).y\"\n                [attr.width]=\"getImageSize(node)\"\n                [attr.height]=\"getImageSize(node)\"\n                preserveAspectRatio=\"xMidYMid meet\"\n              />\n            } @else {\n              <text\n                class=\"node-icon\"\n                [attr.x]=\"getIconPosition(node).x\"\n                [attr.y]=\"getIconPosition(node).y\"\n                text-anchor=\"middle\"\n                dominant-baseline=\"middle\"\n                [attr.font-size]=\"getNodeSize(node).height * 0.28\"\n              >\n                {{ getNodeTypeIcon(node) }}\n              </text>\n            }\n\n            <!-- Node label (wrapped and auto-sized) -->\n            <text\n              class=\"node-label\"\n              [attr.x]=\"getLabelLineX(node)\"\n              text-anchor=\"middle\"\n              [attr.font-size]=\"getWrappedLabel(node).fontSize\"\n              font-weight=\"500\"\n              fill=\"#1e293b\"\n            >\n              @for (line of getWrappedLabel(node).lines; track $index) {\n                <tspan\n                  [attr.x]=\"getLabelLineX(node)\"\n                  [attr.y]=\"getLabelLineY(node, $index, getWrappedLabel(node).lines.length, getWrappedLabel(node).lineHeight)\"\n                >{{ line }}</tspan>\n              }\n            </text>\n\n            <!-- Resize handle (SE corner, visible when selected + hand tool) -->\n            @if (selection().nodes.includes(node.id) && activeTool() === 'hand' && selection().nodes.length === 1) {\n              <rect\n                class=\"resize-handle resize-handle-se\"\n                [attr.x]=\"getNodeSize(node).width - 8\"\n                [attr.y]=\"getNodeSize(node).height - 8\"\n                width=\"10\"\n                height=\"10\"\n                fill=\"#3b82f6\"\n                rx=\"2\"\n                cursor=\"se-resize\"\n                (mousedown)=\"onResizeHandleMouseDown($event, node)\"\n              />\n            }\n          </g>\n        }\n\n        <!-- Layer 3: Attachment points (on top of nodes) -->\n        @for (node of internalGraph().nodes; track node.id) {\n          @if (showAttachmentPoints() === node.id) {\n            <g [attr.transform]=\"'translate(' + node.position.x + ',' + node.position.y + ')'\">\n              @for (port of getNodePorts(node); track port.position) {\n                <circle\n                  [attr.cx]=\"port.x\"\n                  [attr.cy]=\"port.y\"\n                  [attr.r]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? 8 : 6\"\n                  [attr.fill]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? '#2563eb' : '#94a3b8'\"\n                  stroke=\"white\"\n                  stroke-width=\"2\"\n                  class=\"attachment-point\"\n                  [class.hovered]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position\"\n                  (mousedown)=\"$event.stopPropagation()\"\n                  (click)=\"onAttachmentPointClick($event, node, port.position)\"\n                />\n              }\n            </g>\n          }\n        }\n\n        <!-- Layer 4: Edge endpoints (only visible when edge is selected) -->\n        @for (edge of internalGraph().edges; track edge.id) {\n          @if (selection().edges.includes(edge.id)) {\n            <g>\n              <!-- Source endpoint -->\n              <circle\n                [attr.cx]=\"getEdgeSourcePoint(edge).x\"\n                [attr.cy]=\"getEdgeSourcePoint(edge).y\"\n                r=\"6\"\n                fill=\"#3b82f6\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                class=\"edge-endpoint selected\"\n                (mousedown)=\"onEdgeEndpointMouseDown($event, edge, 'source')\"\n              />\n\n              <!-- Target endpoint -->\n              <circle\n                [attr.cx]=\"getEdgeTargetPoint(edge).x\"\n                [attr.cy]=\"getEdgeTargetPoint(edge).y\"\n                r=\"6\"\n                fill=\"#3b82f6\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                class=\"edge-endpoint selected\"\n                (mousedown)=\"onEdgeEndpointMouseDown($event, edge, 'target')\"\n              />\n            </g>\n          }\n        }\n\n        <!-- Layer 5: Selection box (Shift+drag) -->\n        @if (selectionBox()) {\n          <rect\n            class=\"selection-box\"\n            [attr.x]=\"selectionBox()!.x\"\n            [attr.y]=\"selectionBox()!.y\"\n            [attr.width]=\"selectionBox()!.width\"\n            [attr.height]=\"selectionBox()!.height\"\n            fill=\"rgba(59, 130, 246, 0.1)\"\n            stroke=\"#3b82f6\"\n            stroke-width=\"1\"\n            stroke-dasharray=\"4,2\"\n          />\n        }\n      </g>\n    </svg>\n  </div>\n\n  <!-- Edge direction selector overlay -->\n  @if (selectedEdgeMidpoint()) {\n    <div\n      class=\"edge-direction-selector\"\n      [style.left.px]=\"selectedEdgeMidpoint()!.x\"\n      [style.top.px]=\"selectedEdgeMidpoint()!.y\"\n    >\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"selectedEdgeMidpoint()!.edge.direction === 'backward'\"\n        title=\"Backward\"\n        (click)=\"setEdgeDirection('backward')\"\n      >\u2190</button>\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"selectedEdgeMidpoint()!.edge.direction === 'bidirectional'\"\n        title=\"Bidirectional\"\n        (click)=\"setEdgeDirection('bidirectional')\"\n      >\u2194</button>\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"!selectedEdgeMidpoint()!.edge.direction || selectedEdgeMidpoint()!.edge.direction === 'forward'\"\n        title=\"Forward\"\n        (click)=\"setEdgeDirection('forward')\"\n      >\u2192</button>\n    </div>\n  }\n</div>\n", styles: [".graph-editor-container{display:flex;width:100%;height:100%;position:relative;background:var(--graph-editor-canvas-bg, #f8f9fa)}.graph-palette-overlay{position:absolute;top:16px;left:16px;display:flex;gap:4px;z-index:10;background:#fffffff2;padding:6px;border-radius:var(--radius-md, 8px);box-shadow:0 2px 8px #0000001a;backdrop-filter:blur(4px)}.palette-item{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1.5px solid var(--neutral-200, #e5e7eb);border-radius:var(--radius-md, 8px);background:var(--white, #fff);color:var(--neutral-600, #4b5563);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease;font-size:20px}.palette-icon-img{width:24px;height:24px;object-fit:contain}.palette-icon-svg{width:22px;height:22px;flex-shrink:0}.palette-item:focus-visible{outline:2px solid var(--indigo-400, #818cf8);outline-offset:2px}.palette-item:hover{background:var(--neutral-50, #f9fafb);border-color:var(--interactive, #3b82f6);color:var(--interactive, #3b82f6);transform:translateY(-1px);box-shadow:0 2px 6px #00000014}.palette-item:active{transform:translateY(0);box-shadow:none}.palette-item.tool-item.active{background:var(--interactive, #3b82f6);border-color:var(--interactive, #3b82f6);color:#fff}.palette-item.tool-item.active:hover{background:var(--interactive-hover, #2563eb);border-color:var(--interactive-hover, #2563eb);color:#fff}.palette-divider{width:1px;background:var(--neutral-200, #e5e7eb);align-self:stretch;margin:4px 2px}.graph-canvas-wrapper{flex:1;position:relative;overflow:hidden}.graph-canvas{width:100%;height:100%;cursor:grab}.graph-canvas:active{cursor:grabbing}.graph-canvas.tool-line,.graph-canvas.tool-line .graph-node{cursor:crosshair}.graph-node{cursor:move;user-select:none;-webkit-user-select:none;transition:transform .1s ease-out}.graph-node:hover .node-bg{stroke:#cbd5e1}.graph-node text{pointer-events:none}.graph-node .node-label{font-family:system-ui,-apple-system,sans-serif}.graph-node.selected .node-bg{stroke:#3b82f6;filter:drop-shadow(0 4px 12px rgba(59,130,246,.25))}.edge-line{transition:stroke .15s,stroke-width .15s}.edge-line.selected{filter:drop-shadow(0 2px 4px rgba(59,130,246,.3))}.edge-hit-area{cursor:pointer}.edge-endpoint{cursor:pointer;transition:r .2s,fill .2s}.edge-endpoint:hover{r:8;fill:#2563eb}.edge-endpoint.selected{fill:#2563eb}.attachment-point{cursor:crosshair;transition:all .2s}.attachment-point.hovered{filter:drop-shadow(0 0 4px rgba(37,99,235,.6))}.validation-panel{position:absolute;bottom:0;left:0;right:0;max-height:200px;overflow-y:auto;background:#fff;border-top:1px solid #e5e7eb;padding:16px}.error-item{padding:8px 12px;margin-bottom:8px;background:#fee2e2;border-left:3px solid #ef4444;border-radius:4px;font-size:14px}.error-item.warning{background:#fef3c7;border-left-color:#f59e0b}.edge-direction-selector{position:absolute;transform:translate(-50%,-100%);margin-top:-12px;display:flex;gap:2px;background:#fffffff2;padding:4px;border-radius:6px;box-shadow:0 2px 8px #00000026;backdrop-filter:blur(4px);z-index:20;pointer-events:auto}.direction-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid #e5e7eb;border-radius:4px;background:#fff;cursor:pointer;font-size:16px;transition:all .15s;color:#6b7280}.direction-btn:hover{background:#f3f4f6;border-color:#3b82f6;color:#3b82f6}.direction-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff}.resize-handle{cursor:se-resize;opacity:.8;transition:opacity .15s,fill .15s}.resize-handle:hover{opacity:1;fill:#2563eb}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]