ngx-workflow 0.0.1

package/fesm2022/ngx-workflow.mjs

@@ -0,0 +1,3016 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, signal, computed, Injectable, effect, inject, HostListener, ViewChild, Optional, Inject, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { Subject, animationFrameScheduler, Subscription } from 'rxjs';
+import { v4 } from 'uuid';
+import { throttleTime } from 'rxjs/operators';
+import * as i2$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import ELK from 'elkjs/lib/elk.bundled';
+
+const NGX_WORKFLOW_NODE_TYPES = new InjectionToken('NGX_WORKFLOW_NODE_TYPES');
+
+const NGX_WORKFLOW_EDGE_TYPES = new InjectionToken('NGX_WORKFLOW_EDGE_TYPES');
+
+function getStraightPath(source, target) {
+    return `M ${source.x},${source.y} L ${target.x},${target.y}`;
+}
+function getBezierPath(source, target) {
+    const midX = (source.x + target.x) / 2;
+    return `M ${source.x},${source.y} C ${midX},${source.y} ${midX},${target.y} ${target.x},${target.y}`;
+}
+function getStepPath(source, target) {
+    const midY = (source.y + target.y) / 2;
+    return `M ${source.x},${source.y} L ${source.x},${midY} L ${target.x},${midY} L ${target.x},${target.y}`;
+}
+function getSelfLoopPath(source, handle = 'top', offset = 30) {
+    const { x, y } = source;
+    switch (handle) {
+        case 'top':
+            return `M ${x},${y} C ${x - offset},${y - offset * 2} ${x + offset},${y - offset * 2} ${x},${y}`;
+        case 'right':
+            return `M ${x},${y} C ${x + offset * 2},${y - offset} ${x + offset * 2},${y + offset} ${x},${y}`;
+        case 'bottom':
+            return `M ${x},${y} C ${x + offset},${y + offset * 2} ${x - offset},${y + offset * 2} ${x},${y}`;
+        case 'left':
+            return `M ${x},${y} C ${x - offset * 2},${y + offset} ${x - offset * 2},${y - offset} ${x},${y}`;
+        default:
+            return `M ${x},${y} C ${x - offset},${y - offset * 2} ${x + offset},${y - offset * 2} ${x},${y}`;
+    }
+}
+function getSmartEdgePath(path) {
+    if (path.length === 0)
+        return '';
+    let d = `M ${path[0].x},${path[0].y}`;
+    for (let i = 1; i < path.length; i++) {
+        d += ` L ${path[i].x},${path[i].y}`;
+    }
+    return d;
+}
+function getPolylineMidpoint(points) {
+    if (points.length < 2)
+        return points[0] || { x: 0, y: 0 };
+    // Calculate total length
+    let totalLength = 0;
+    const segments = [];
+    for (let i = 0; i < points.length - 1; i++) {
+        const start = points[i];
+        const end = points[i + 1];
+        const length = Math.sqrt(Math.pow(end.x - start.x, 2) + Math.pow(end.y - start.y, 2));
+        segments.push({ length, start, end });
+        totalLength += length;
+    }
+    // Find midpoint
+    let remainingLength = totalLength / 2;
+    for (const segment of segments) {
+        if (remainingLength <= segment.length) {
+            // Midpoint is on this segment
+            const ratio = remainingLength / segment.length;
+            return {
+                x: segment.start.x + (segment.end.x - segment.start.x) * ratio,
+                y: segment.start.y + (segment.end.y - segment.start.y) * ratio
+            };
+        }
+        remainingLength -= segment.length;
+    }
+    return points[points.length - 1];
+}
+
+class MinHeap {
+    heap = [];
+    push(node) {
+        this.heap.push(node);
+        this.bubbleUp(this.heap.length - 1);
+    }
+    pop() {
+        if (this.heap.length === 0)
+            return undefined;
+        const top = this.heap[0];
+        const bottom = this.heap.pop();
+        if (this.heap.length > 0 && bottom) {
+            this.heap[0] = bottom;
+            this.sinkDown(0);
+        }
+        return top;
+    }
+    size() {
+        return this.heap.length;
+    }
+    bubbleUp(index) {
+        const element = this.heap[index];
+        while (index > 0) {
+            const parentIndex = Math.floor((index - 1) / 2);
+            const parent = this.heap[parentIndex];
+            if (element.f >= parent.f)
+                break;
+            this.heap[parentIndex] = element;
+            this.heap[index] = parent;
+            index = parentIndex;
+        }
+    }
+    sinkDown(index) {
+        const length = this.heap.length;
+        const element = this.heap[index];
+        while (true) {
+            const leftChildIndex = 2 * index + 1;
+            const rightChildIndex = 2 * index + 2;
+            let leftChild, rightChild;
+            let swap = null;
+            if (leftChildIndex < length) {
+                leftChild = this.heap[leftChildIndex];
+                if (leftChild.f < element.f) {
+                    swap = leftChildIndex;
+                }
+            }
+            if (rightChildIndex < length) {
+                rightChild = this.heap[rightChildIndex];
+                if ((swap === null && rightChild.f < element.f) ||
+                    (swap !== null && rightChild.f < leftChild.f)) {
+                    swap = rightChildIndex;
+                }
+            }
+            if (swap === null)
+                break;
+            this.heap[index] = this.heap[swap];
+            this.heap[swap] = element;
+            index = swap;
+        }
+    }
+    rescoreElement(node) {
+        const index = this.heap.indexOf(node);
+        if (index !== -1) {
+            // Since f usually decreases in A*, we bubble up
+            this.bubbleUp(index);
+        }
+    }
+}
+class PathFinder {
+    nodes;
+    graphWidth;
+    graphHeight;
+    gridSize = 20; // Size of each grid cell
+    grid = [];
+    width = 0;
+    height = 0;
+    bounds = { minX: 0, minY: 0, maxX: 0, maxY: 0 };
+    constructor(nodes, graphWidth = 2000, graphHeight = 2000) {
+        this.nodes = nodes;
+        this.graphWidth = graphWidth;
+        this.graphHeight = graphHeight;
+        this.initializeGrid();
+    }
+    initializeGrid() {
+        // Determine bounds based on nodes, with some padding
+        if (this.nodes.length === 0)
+            return;
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        this.nodes.forEach(node => {
+            minX = Math.min(minX, node.x);
+            minY = Math.min(minY, node.y);
+            maxX = Math.max(maxX, node.x + node.width);
+            maxY = Math.max(maxY, node.y + node.height);
+        });
+        // Add padding
+        const padding = 100;
+        this.bounds = {
+            minX: Math.floor((minX - padding) / this.gridSize) * this.gridSize,
+            minY: Math.floor((minY - padding) / this.gridSize) * this.gridSize,
+            maxX: Math.ceil((maxX + padding) / this.gridSize) * this.gridSize,
+            maxY: Math.ceil((maxY + padding) / this.gridSize) * this.gridSize
+        };
+        this.width = Math.ceil((this.bounds.maxX - this.bounds.minX) / this.gridSize);
+        this.height = Math.ceil((this.bounds.maxY - this.bounds.minY) / this.gridSize);
+        // Initialize grid
+        this.grid = [];
+        for (let y = 0; y < this.height; y++) {
+            const row = [];
+            for (let x = 0; x < this.width; x++) {
+                row.push({
+                    x,
+                    y,
+                    walkable: true,
+                    g: 0,
+                    h: 0,
+                    f: 0,
+                    parent: null,
+                    opened: false,
+                    closed: false
+                });
+            }
+            this.grid.push(row);
+        }
+        // Mark obstacles
+        this.nodes.forEach(node => {
+            const startX = Math.floor((node.x - this.bounds.minX) / this.gridSize);
+            const startY = Math.floor((node.y - this.bounds.minY) / this.gridSize);
+            const endX = Math.ceil((node.x + node.width - this.bounds.minX) / this.gridSize);
+            const endY = Math.ceil((node.y + node.height - this.bounds.minY) / this.gridSize);
+            for (let y = Math.max(0, startY); y < Math.min(this.height, endY); y++) {
+                for (let x = Math.max(0, startX); x < Math.min(this.width, endX); x++) {
+                    this.grid[y][x].walkable = false;
+                }
+            }
+        });
+    }
+    findPath(start, end) {
+        const startGridX = Math.floor((start.x - this.bounds.minX) / this.gridSize);
+        const startGridY = Math.floor((start.y - this.bounds.minY) / this.gridSize);
+        const endGridX = Math.floor((end.x - this.bounds.minX) / this.gridSize);
+        const endGridY = Math.floor((end.y - this.bounds.minY) / this.gridSize);
+        // Check if start or end are out of bounds
+        if (!this.isValid(startGridX, startGridY) || !this.isValid(endGridX, endGridY)) {
+            return [start, end]; // Fallback to straight line
+        }
+        // Reset grid state for new search (optimization: use a search ID instead of clearing all?)
+        // For now, simple reset is safer, but O(W*H). 
+        // Optimization: Only reset nodes we touch? 
+        // Let's iterate over the grid to reset. This is slow if grid is huge.
+        // Better: Use a 'visitedToken' on GridNode and increment it per search.
+        // But I can't easily change GridNode interface without touching everything.
+        // Let's stick to resetting for now, but maybe optimize later.
+        // Actually, since we create a NEW PathFinder on drag stop, the grid is fresh.
+        // But findPath is called multiple times (once per edge).
+        // So we MUST reset.
+        // Optimization: Keep a list of visited nodes and reset only them.
+        // We'll use a `resetList` to track modified nodes and reset them at the end.
+        const resetList = [];
+        const startNode = this.grid[startGridY][startGridX];
+        const endNode = this.grid[endGridY][endGridX];
+        // Temporarily make start and end walkable
+        const startWasWalkable = startNode.walkable;
+        const endWasWalkable = endNode.walkable;
+        startNode.walkable = true;
+        endNode.walkable = true;
+        resetList.push(startNode, endNode);
+        const openList = new MinHeap();
+        startNode.g = 0;
+        startNode.h = Math.abs(startNode.x - endNode.x) + Math.abs(startNode.y - endNode.y);
+        startNode.f = startNode.g + startNode.h;
+        startNode.opened = true;
+        openList.push(startNode);
+        resetList.push(startNode);
+        let pathFound = false;
+        while (openList.size() > 0) {
+            const currentNode = openList.pop();
+            currentNode.closed = true;
+            if (currentNode === endNode) {
+                pathFound = true;
+                break;
+            }
+            const neighbors = this.getNeighbors(currentNode);
+            for (const neighbor of neighbors) {
+                if (neighbor.closed || !neighbor.walkable) {
+                    continue;
+                }
+                const gScore = currentNode.g + 1;
+                if (!neighbor.opened || gScore < neighbor.g) {
+                    neighbor.g = gScore;
+                    neighbor.h = Math.abs(neighbor.x - endNode.x) + Math.abs(neighbor.y - endNode.y);
+                    neighbor.f = neighbor.g + neighbor.h;
+                    neighbor.parent = currentNode;
+                    if (!neighbor.opened) {
+                        neighbor.opened = true;
+                        openList.push(neighbor);
+                        resetList.push(neighbor);
+                    }
+                    else {
+                        openList.rescoreElement(neighbor);
+                    }
+                }
+            }
+        }
+        let resultPath = [start, end];
+        if (pathFound) {
+            const path = [];
+            let curr = endNode;
+            while (curr) {
+                path.unshift({
+                    x: curr.x * this.gridSize + this.bounds.minX + this.gridSize / 2,
+                    y: curr.y * this.gridSize + this.bounds.minY + this.gridSize / 2
+                });
+                curr = curr.parent;
+            }
+            path[0] = start;
+            path[path.length - 1] = end;
+            resultPath = this.simplifyPath(path);
+        }
+        // Cleanup
+        startNode.walkable = startWasWalkable;
+        endNode.walkable = endWasWalkable;
+        // Reset modified nodes
+        for (const node of resetList) {
+            node.g = 0;
+            node.h = 0;
+            node.f = 0;
+            node.parent = null;
+            node.opened = false;
+            node.closed = false;
+        }
+        return resultPath;
+    }
+    isValid(x, y) {
+        return x >= 0 && x < this.width && y >= 0 && y < this.height;
+    }
+    getNeighbors(node) {
+        const neighbors = [];
+        const dirs = [[0, 1], [1, 0], [0, -1], [-1, 0]]; // 4-directional
+        for (const [dx, dy] of dirs) {
+            const newX = node.x + dx;
+            const newY = node.y + dy;
+            if (this.isValid(newX, newY)) {
+                neighbors.push(this.grid[newY][newX]);
+            }
+        }
+        return neighbors;
+    }
+    simplifyPath(path) {
+        if (path.length <= 2)
+            return path;
+        const simplified = [path[0]];
+        let direction = {
+            x: Math.sign(path[1].x - path[0].x),
+            y: Math.sign(path[1].y - path[0].y)
+        };
+        for (let i = 1; i < path.length - 1; i++) {
+            const nextPoint = path[i + 1];
+            const currentPoint = path[i];
+            const newDirection = {
+                x: Math.sign(nextPoint.x - currentPoint.x),
+                y: Math.sign(nextPoint.y - currentPoint.y)
+            };
+            // If direction changes, add the turning point
+            if (newDirection.x !== direction.x || newDirection.y !== direction.y) {
+                simplified.push(currentPoint);
+                direction = newDirection;
+            }
+        }
+        simplified.push(path[path.length - 1]);
+        return simplified;
+    }
+}
+
+class ZoomControlsComponent {
+    zoom = 1;
+    minZoom = 0.1;
+    maxZoom = 10;
+    zoomIn = new EventEmitter();
+    zoomOut = new EventEmitter();
+    fitView = new EventEmitter();
+    resetZoom = new EventEmitter();
+    get zoomPercent() {
+        return Math.round(this.zoom * 100);
+    }
+    onZoomIn() {
+        this.zoomIn.emit();
+    }
+    onZoomOut() {
+        this.zoomOut.emit();
+    }
+    onFitView() {
+        this.fitView.emit();
+    }
+    onResetZoom() {
+        this.resetZoom.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ZoomControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: ZoomControlsComponent, isStandalone: true, selector: "ngx-workflow-zoom-controls", inputs: { zoom: "zoom", minZoom: "minZoom", maxZoom: "maxZoom" }, outputs: { zoomIn: "zoomIn", zoomOut: "zoomOut", fitView: "fitView", resetZoom: "resetZoom" }, ngImport: i0, template: "<div class=\"ngx-workflow__zoom-controls\">\r\n  <button class=\"ngx-workflow__zoom-button\" (click)=\"onZoomIn()\" [disabled]=\"zoom >= maxZoom\" title=\"Zoom In\">\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\r\n      <path d=\"M8 3v10M3 8h10\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" />\r\n    </svg>\r\n  </button>\r\n\r\n  <button class=\"ngx-workflow__zoom-button\" (click)=\"onZoomOut()\" [disabled]=\"zoom <= minZoom\" title=\"Zoom Out\">\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\r\n      <path d=\"M3 8h10\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" />\r\n    </svg>\r\n  </button>\r\n\r\n  <button class=\"ngx-workflow__zoom-button\" (click)=\"onFitView()\" title=\"Fit View\">\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\r\n      <rect x=\"2\" y=\"2\" width=\"12\" height=\"12\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" />\r\n      <path d=\"M5 5L11 11M11 5L5 11\" stroke=\"currentColor\" stroke-width=\"1.5\" />\r\n    </svg>\r\n  </button>\r\n\r\n  <button class=\"ngx-workflow__zoom-button\" (click)=\"onResetZoom()\" title=\"Reset Zoom (100%)\">\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\r\n      <text x=\"8\" y=\"12\" text-anchor=\"middle\" font-size=\"10\" fill=\"currentColor\">1:1</text>\r\n    </svg>\r\n  </button>\r\n\r\n  <div class=\"ngx-workflow__zoom-level\">{{ zoomPercent }}%</div>\r\n</div>", styles: [".ngx-workflow__zoom-controls{position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;gap:4px;background:var(--ngx-workflow-zoom-controls-bg, #fff);border:1px solid var(--ngx-workflow-zoom-controls-border, #ddd);border-radius:8px;padding:8px;box-shadow:0 2px 8px #0000001a;z-index:10;-webkit-user-select:none;user-select:none}.ngx-workflow__zoom-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--ngx-workflow-zoom-button-bg, #f5f5f5);border:1px solid var(--ngx-workflow-zoom-button-border, #ddd);border-radius:4px;cursor:pointer;transition:all .2s ease;color:var(--ngx-workflow-zoom-button-color, #333);padding:0}.ngx-workflow__zoom-button:hover:not(:disabled){background:var(--ngx-workflow-zoom-button-hover-bg, #e8e8e8);border-color:var(--ngx-workflow-zoom-button-hover-border, #bbb)}.ngx-workflow__zoom-button:active:not(:disabled){background:var(--ngx-workflow-zoom-button-active-bg, #ddd);transform:scale(.95)}.ngx-workflow__zoom-button:disabled{opacity:.4;cursor:not-allowed}.ngx-workflow__zoom-button svg{display:block}.ngx-workflow__zoom-level{text-align:center;font-size:11px;font-weight:600;color:var(--ngx-workflow-zoom-level-color, #666);padding:4px 0;border-top:1px solid var(--ngx-workflow-zoom-controls-border, #ddd);margin-top:4px;min-width:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ZoomControlsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-workflow-zoom-controls', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngx-workflow__zoom-controls\">\r\n  <button class=\"ngx-workflow__zoom-button\" (click)=\"onZoomIn()\" [disabled]=\"zoom >= maxZoom\" title=\"Zoom In\">\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\r\n      <path d=\"M8 3v10M3 8h10\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" />\r\n    </svg>\r\n  </button>\r\n\r\n  <button class=\"ngx-workflow__zoom-button\" (click)=\"onZoomOut()\" [disabled]=\"zoom <= minZoom\" title=\"Zoom Out\">\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\r\n      <path d=\"M3 8h10\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" />\r\n    </svg>\r\n  </button>\r\n\r\n  <button class=\"ngx-workflow__zoom-button\" (click)=\"onFitView()\" title=\"Fit View\">\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\r\n      <rect x=\"2\" y=\"2\" width=\"12\" height=\"12\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" />\r\n      <path d=\"M5 5L11 11M11 5L5 11\" stroke=\"currentColor\" stroke-width=\"1.5\" />\r\n    </svg>\r\n  </button>\r\n\r\n  <button class=\"ngx-workflow__zoom-button\" (click)=\"onResetZoom()\" title=\"Reset Zoom (100%)\">\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\r\n      <text x=\"8\" y=\"12\" text-anchor=\"middle\" font-size=\"10\" fill=\"currentColor\">1:1</text>\r\n    </svg>\r\n  </button>\r\n\r\n  <div class=\"ngx-workflow__zoom-level\">{{ zoomPercent }}%</div>\r\n</div>", styles: [".ngx-workflow__zoom-controls{position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;gap:4px;background:var(--ngx-workflow-zoom-controls-bg, #fff);border:1px solid var(--ngx-workflow-zoom-controls-border, #ddd);border-radius:8px;padding:8px;box-shadow:0 2px 8px #0000001a;z-index:10;-webkit-user-select:none;user-select:none}.ngx-workflow__zoom-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--ngx-workflow-zoom-button-bg, #f5f5f5);border:1px solid var(--ngx-workflow-zoom-button-border, #ddd);border-radius:4px;cursor:pointer;transition:all .2s ease;color:var(--ngx-workflow-zoom-button-color, #333);padding:0}.ngx-workflow__zoom-button:hover:not(:disabled){background:var(--ngx-workflow-zoom-button-hover-bg, #e8e8e8);border-color:var(--ngx-workflow-zoom-button-hover-border, #bbb)}.ngx-workflow__zoom-button:active:not(:disabled){background:var(--ngx-workflow-zoom-button-active-bg, #ddd);transform:scale(.95)}.ngx-workflow__zoom-button:disabled{opacity:.4;cursor:not-allowed}.ngx-workflow__zoom-button svg{display:block}.ngx-workflow__zoom-level{text-align:center;font-size:11px;font-weight:600;color:var(--ngx-workflow-zoom-level-color, #666);padding:4px 0;border-top:1px solid var(--ngx-workflow-zoom-controls-border, #ddd);margin-top:4px;min-width:40px}\n"] }]
+        }], propDecorators: { zoom: [{
+                type: Input
+            }], minZoom: [{
+                type: Input
+            }], maxZoom: [{
+                type: Input
+            }], zoomIn: [{
+                type: Output
+            }], zoomOut: [{
+                type: Output
+            }], fitView: [{
+                type: Output
+            }], resetZoom: [{
+                type: Output
+            }] } });
+
+class UndoRedoService {
+    undoStack = signal([], ...(ngDevMode ? [{ debugName: "undoStack" }] : []));
+    redoStack = signal([], ...(ngDevMode ? [{ debugName: "redoStack" }] : []));
+    constructor() { }
+    // Saves the current state of the diagram to the undo stack
+    saveState(currentState) {
+        this.undoStack.update((stack) => [...stack, currentState]);
+        this.redoStack.set([]); // Clear redo stack on new action
+        // console.log('State saved');
+        // console.log('Undo Stack size:', this.undoStack().length);
+    }
+    // Undoes the last action
+    undo(currentState) {
+        const previousState = this.undoStack().pop();
+        if (previousState) {
+            this.redoStack.update((stack) => [...stack, currentState]);
+            console.log('Undo performed. Undo Stack size:', this.undoStack().length);
+            console.log('Redo Stack size:', this.redoStack().length);
+            return previousState;
+        }
+        console.log('Nothing to undo.');
+        return undefined;
+    }
+    // Redoes the last undone action
+    redo(currentState) {
+        const nextState = this.redoStack().pop();
+        if (nextState) {
+            this.undoStack.update((stack) => [...stack, currentState]);
+            console.log('Redo performed. Undo Stack size:', this.undoStack().length);
+            console.log('Redo Stack size:', this.redoStack().length);
+            return nextState;
+        }
+        console.log('Nothing to redo.');
+        return undefined;
+    }
+    canUndo = computed(() => this.undoStack().length > 0, ...(ngDevMode ? [{ debugName: "canUndo" }] : []));
+    canRedo = computed(() => this.redoStack().length > 0, ...(ngDevMode ? [{ debugName: "canRedo" }] : []));
+    clearStacks() {
+        this.undoStack.set([]);
+        this.redoStack.set([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: UndoRedoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: UndoRedoService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: UndoRedoService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class DiagramStateService {
+    undoRedoService;
+    nodes = signal([], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
+    edges = signal([], ...(ngDevMode ? [{ debugName: "edges" }] : []));
+    tempEdges = signal([], ...(ngDevMode ? [{ debugName: "tempEdges" }] : []));
+    viewport = signal({ x: 0, y: 0, zoom: 1 }, ...(ngDevMode ? [{ debugName: "viewport" }] : []));
+    alignmentGuides = signal([], ...(ngDevMode ? [{ debugName: "alignmentGuides" }] : []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    filterType = signal(null, ...(ngDevMode ? [{ debugName: "filterType" }] : []));
+    containerDimensions = signal({ width: 0, height: 0 }, ...(ngDevMode ? [{ debugName: "containerDimensions" }] : []));
+    // Computed signals
+    selectedNodes = computed(() => this.nodes().filter((n) => n.selected), ...(ngDevMode ? [{ debugName: "selectedNodes" }] : []));
+    selectedEdges = computed(() => this.edges().filter((e) => e.selected), ...(ngDevMode ? [{ debugName: "selectedEdges" }] : []));
+    viewNodes = computed(() => {
+        const nodes = this.nodes();
+        const query = this.searchQuery().toLowerCase();
+        const type = this.filterType();
+        return nodes.map(node => {
+            const matchesSearch = !query ||
+                (node.label && node.label.toLowerCase().includes(query)) ||
+                (node.data && JSON.stringify(node.data).toLowerCase().includes(query));
+            const matchesType = !type || node.type === type;
+            const isMatch = matchesSearch && matchesType;
+            // If there is a search/filter active, highlight matches and dim non-matches
+            // If no search/filter, reset (no highlight, no dim)
+            const isActive = !!query || !!type;
+            return {
+                ...node,
+                highlighted: isActive && isMatch,
+                dimmed: isActive && !isMatch
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "viewNodes" }] : []));
+    visibleNodes = computed(() => {
+        const nodes = this.viewNodes();
+        const viewport = this.viewport();
+        const dimensions = this.containerDimensions();
+        const buffer = 500; // Buffer in pixels
+        if (dimensions.width === 0 || dimensions.height === 0) {
+            return nodes; // Render all if dimensions not set
+        }
+        const minX = -viewport.x / viewport.zoom - buffer;
+        const maxX = (-viewport.x + dimensions.width) / viewport.zoom + buffer;
+        const minY = -viewport.y / viewport.zoom - buffer;
+        const maxY = (-viewport.y + dimensions.height) / viewport.zoom + buffer;
+        return nodes.filter(node => {
+            const nodeX = node.position.x;
+            const nodeY = node.position.y;
+            const nodeWidth = node.width || 150; // Default width
+            const nodeHeight = node.height || 60; // Default height
+            return (nodeX + nodeWidth >= minX &&
+                nodeX <= maxX &&
+                nodeY + nodeHeight >= minY &&
+                nodeY <= maxY);
+        });
+    }, ...(ngDevMode ? [{ debugName: "visibleNodes" }] : []));
+    lodLevel = computed(() => {
+        const zoom = this.viewport().zoom;
+        if (zoom < 0.4)
+            return 'low';
+        if (zoom < 0.8)
+            return 'medium';
+        return 'high';
+    }, ...(ngDevMode ? [{ debugName: "lodLevel" }] : []));
+    // Reference to the main SVG element, set by DiagramComponent
+    el;
+    dragEnd = new EventEmitter();
+    nodesChange = new EventEmitter();
+    edgesChange = new EventEmitter();
+    viewportChange = new EventEmitter();
+    nodeClick = new EventEmitter();
+    edgeClick = new EventEmitter();
+    connect = new EventEmitter();
+    dragStart = new EventEmitter();
+    // Internal subjects for batched updates
+    nodeUpdates$ = new Subject();
+    edgeUpdates$ = new Subject();
+    viewportUpdates$ = new Subject();
+    constructor(undoRedoService) {
+        this.undoRedoService = undoRedoService;
+        // Sync internal subjects to signals (for batched updates)
+        this.nodeUpdates$
+            .pipe(throttleTime(0, animationFrameScheduler, { leading: true, trailing: true }))
+            .subscribe((nodes) => {
+            this.nodes.set(nodes);
+        });
+        this.edgeUpdates$
+            .pipe(throttleTime(0, animationFrameScheduler, { leading: true, trailing: true }))
+            .subscribe((edges) => {
+            this.edges.set(edges);
+        });
+        this.viewportUpdates$
+            .pipe(throttleTime(0, animationFrameScheduler, { leading: true, trailing: true }))
+            .subscribe((viewport) => {
+            this.viewport.set(viewport);
+        });
+        // Emit changes whenever signals update
+        effect(() => {
+            this.nodesChange.emit(this.nodes());
+        });
+        effect(() => {
+            this.edgesChange.emit(this.edges());
+        });
+        effect(() => {
+            this.viewportChange.emit(this.viewport());
+        });
+    }
+    // Helper to get current state for undo/redo
+    getCurrentState() {
+        return {
+            nodes: [...this.nodes()],
+            edges: [...this.edges()],
+            viewport: { ...this.viewport() },
+        };
+    }
+    // Public method to retrieve the current diagram state (for export)
+    getDiagramState() {
+        return this.getCurrentState();
+    }
+    /**
+     * Replace the entire diagram state (nodes, edges, viewport) with the given state.
+     * Used for importing diagram JSON.
+     */
+    setDiagramState(state) {
+        // Save current state for undo
+        this.undoRedoService.saveState(this.getCurrentState());
+        // Replace signals
+        this.nodes.set(state.nodes.map(n => ({ ...n, selected: false, dragging: false, draggable: true })));
+        this.edges.set(state.edges.map(e => ({ ...e, selected: false })));
+        this.viewport.set(state.viewport);
+        // Emit changes
+        this.nodesChange.emit(this.nodes());
+        this.edgesChange.emit(this.edges());
+        this.viewportChange.emit(this.viewport());
+    }
+    // Apply state from undo/redo service
+    applyState(state) {
+        this.nodes.set(state.nodes);
+        this.edges.set(state.edges);
+        this.viewport.set(state.viewport);
+    }
+    undo() {
+        const currentState = this.getCurrentState();
+        const previousState = this.undoRedoService.undo(currentState);
+        if (previousState) {
+            this.applyState(previousState);
+        }
+    }
+    redo() {
+        const currentState = this.getCurrentState();
+        const nextState = this.undoRedoService.redo(currentState);
+        if (nextState) {
+            this.applyState(nextState);
+        }
+    }
+    onResizeStart(node) {
+        this.undoRedoService.saveState(this.getCurrentState());
+    }
+    onResizeEnd(node) {
+        // Optional: emit resize end event if needed in the future
+    }
+    // --- Edge Management ---
+    addEdge(edge) {
+        console.log('DiagramStateService.addEdge: start', edge);
+        this.undoRedoService.saveState(this.getCurrentState());
+        this.edges.update((currentEdges) => [...currentEdges, { ...edge, selected: false }]);
+        this.connect.emit({
+            source: edge.source,
+            sourceHandle: edge.sourceHandle,
+            target: edge.target,
+            targetHandle: edge.targetHandle,
+        });
+        console.log('DiagramStateService.addEdge: end');
+    }
+    updateEdge(id, changes) {
+        this.undoRedoService.saveState(this.getCurrentState());
+        this.edges.update((currentEdges) => currentEdges.map((edge) => {
+            if (edge.id === id) {
+                return { ...edge, ...changes };
+            }
+            return edge;
+        }));
+    }
+    removeEdge(id) {
+        this.undoRedoService.saveState(this.getCurrentState());
+        this.edges.update((currentEdges) => currentEdges.filter((edge) => edge.id !== id));
+        this.tempEdges.update((currentTempEdges) => currentTempEdges.filter((edge) => edge.id !== id)); // Remove from tempEdges as well
+    }
+    // --- Temporary Edge (Preview Edge) Management ---
+    addTempEdge(edge) {
+        this.tempEdges.update((currentTempEdges) => [...currentTempEdges, edge]);
+    }
+    updateTempEdgeTarget(id, targetPosition) {
+        this.tempEdges.update((currentTempEdges) => currentTempEdges.map((edge) => edge.id === id ? { ...edge, targetX: targetPosition.x, targetY: targetPosition.y } : edge));
+    }
+    // --- Viewport Management ---
+    setViewport(viewport) {
+        this.viewport.update((currentViewport) => ({ ...currentViewport, ...viewport }));
+    }
+    // --- Selection Management ---
+    selectNodes(nodeIds, multi = false) {
+        this.nodes.update((currentNodes) => currentNodes.map((node) => ({
+            ...node,
+            selected: multi
+                ? nodeIds.includes(node.id)
+                    ? !node.selected
+                    : node.selected
+                : nodeIds.includes(node.id),
+        })));
+    }
+    clearSelection() {
+        this.nodes.update((currentNodes) => currentNodes.map((node) => ({ ...node, selected: false })));
+        this.edges.update((currentEdges) => currentEdges.map((edge) => ({ ...edge, selected: false })));
+    }
+    selectAll() {
+        this.nodes.update((currentNodes) => currentNodes.map((node) => ({ ...node, selected: true })));
+    }
+    multiSelect(nodeId) {
+        this.nodes.update((currentNodes) => currentNodes.map((node) => ({
+            ...node,
+            selected: node.id === nodeId ? !node.selected : node.selected,
+        })));
+    }
+    deleteSelectedElements() {
+        this.undoRedoService.saveState(this.getCurrentState());
+        const nodesToDelete = this.selectedNodes().map((node) => node.id);
+        const edgesToDelete = this.selectedEdges().map((edge) => edge.id);
+        // Remove nodes and associated edges
+        this.nodes.update((currentNodes) => currentNodes.filter((node) => !nodesToDelete.includes(node.id)));
+        this.edges.update((currentEdges) => currentEdges.filter((edge) => !edgesToDelete.includes(edge.id) &&
+            !nodesToDelete.includes(edge.source) &&
+            !nodesToDelete.includes(edge.target)));
+        // Clear selection after deletion
+        this.clearSelection();
+        console.log('Selected elements deleted');
+    }
+    // --- Alignment & Distribution ---
+    alignNodes(alignment) {
+        const selectedNodes = this.selectedNodes();
+        if (selectedNodes.length < 2)
+            return;
+        this.undoRedoService.saveState(this.getCurrentState());
+        let targetValue;
+        switch (alignment) {
+            case 'left':
+                targetValue = Math.min(...selectedNodes.map((n) => n.position.x));
+                break;
+            case 'center': {
+                const minX = Math.min(...selectedNodes.map((n) => n.position.x));
+                const maxX = Math.max(...selectedNodes.map((n) => n.position.x + (n.width || 170)));
+                targetValue = minX + (maxX - minX) / 2;
+                break;
+            }
+            case 'right':
+                targetValue = Math.max(...selectedNodes.map((n) => n.position.x + (n.width || 170)));
+                break;
+            case 'top':
+                targetValue = Math.min(...selectedNodes.map((n) => n.position.y));
+                break;
+            case 'middle': {
+                const minY = Math.min(...selectedNodes.map((n) => n.position.y));
+                const maxY = Math.max(...selectedNodes.map((n) => n.position.y + (n.height || 60)));
+                targetValue = minY + (maxY - minY) / 2;
+                break;
+            }
+            case 'bottom':
+                targetValue = Math.max(...selectedNodes.map((n) => n.position.y + (n.height || 60)));
+                break;
+        }
+        this.nodes.update((currentNodes) => currentNodes.map((node) => {
+            if (!node.selected)
+                return node;
+            const newPos = { ...node.position };
+            const width = node.width || 170;
+            const height = node.height || 60;
+            switch (alignment) {
+                case 'left':
+                    newPos.x = targetValue;
+                    break;
+                case 'center':
+                    newPos.x = targetValue - width / 2;
+                    break;
+                case 'right':
+                    newPos.x = targetValue - width;
+                    break;
+                case 'top':
+                    newPos.y = targetValue;
+                    break;
+                case 'middle':
+                    newPos.y = targetValue - height / 2;
+                    break;
+                case 'bottom':
+                    newPos.y = targetValue - height;
+                    break;
+            }
+            return { ...node, position: newPos };
+        }));
+    }
+    distributeNodes(distribution) {
+        const selectedNodes = this.selectedNodes();
+        if (selectedNodes.length < 3)
+            return;
+        this.undoRedoService.saveState(this.getCurrentState());
+        // Sort nodes by position
+        const sortedNodes = [...selectedNodes].sort((a, b) => {
+            return distribution === 'horizontal' ? a.position.x - b.position.x : a.position.y - b.position.y;
+        });
+        const firstNode = sortedNodes[0];
+        const lastNode = sortedNodes[sortedNodes.length - 1];
+        if (distribution === 'horizontal') {
+            const totalSpan = lastNode.position.x - firstNode.position.x;
+            const step = totalSpan / (sortedNodes.length - 1);
+            this.nodes.update(nodes => nodes.map(node => {
+                const index = sortedNodes.findIndex(n => n.id === node.id);
+                if (index === -1)
+                    return node;
+                return {
+                    ...node,
+                    position: {
+                        ...node.position,
+                        x: firstNode.position.x + (step * index)
+                    }
+                };
+            }));
+        }
+        else {
+            const totalSpan = lastNode.position.y - firstNode.position.y;
+            const step = totalSpan / (sortedNodes.length - 1);
+            this.nodes.update(nodes => nodes.map(node => {
+                const index = sortedNodes.findIndex(n => n.id === node.id);
+                if (index === -1)
+                    return node;
+                return {
+                    ...node,
+                    position: {
+                        ...node.position,
+                        y: firstNode.position.y + (step * index)
+                    }
+                };
+            }));
+        }
+    }
+    // --- Internal batching methods for components to use ---
+    batchUpdateNodes(updatedNodes) {
+        this.nodeUpdates$.next(updatedNodes);
+    }
+    batchUpdateEdges(updatedEdges) {
+        this.edgeUpdates$.next(updatedEdges);
+    }
+    batchUpdateViewport(updatedViewport) {
+        this.viewportUpdates$.next(updatedViewport);
+    }
+    // --- Event Emitters triggered by components ---
+    onNodeClick(node) {
+        this.nodeClick.emit(node);
+    }
+    onEdgeClick(edge) {
+        this.edgeClick.emit(edge);
+    }
+    onDragStart(node) {
+        this.undoRedoService.saveState(this.getCurrentState()); // Save state before drag starts
+        this.dragStart.emit(node);
+        this.updateNode(node.id, { dragging: true });
+    }
+    onDragEnd(node) {
+        this.dragEnd.emit(node);
+        this.updateNode(node.id, { dragging: false });
+        this.alignmentGuides.set([]); // Clear alignment guides
+        // State is already saved at dragStart, so no need to save again here unless
+        // a single drag operation is considered a single undoable action.
+        // If multiple small state changes during drag need to be undone as one,
+        // then the saveState logic here would be different (e.g., debounced save).
+    }
+    // --- Clipboard Operations ---
+    clipboard = { nodes: [], edges: [] };
+    copy() {
+        const selectedNodes = this.selectedNodes();
+        if (selectedNodes.length === 0)
+            return;
+        const selectedNodeIds = new Set(selectedNodes.map((n) => n.id));
+        // Find edges that are connected ONLY to selected nodes
+        const internalEdges = this.edges().filter((edge) => selectedNodeIds.has(edge.source) && selectedNodeIds.has(edge.target));
+        // Deep copy to avoid reference issues
+        this.clipboard = {
+            nodes: JSON.parse(JSON.stringify(selectedNodes)),
+            edges: JSON.parse(JSON.stringify(internalEdges)),
+        };
+        console.log('Copied to clipboard:', this.clipboard);
+    }
+    paste() {
+        if (this.clipboard.nodes.length === 0)
+            return;
+        this.undoRedoService.saveState(this.getCurrentState());
+        const idMap = new Map();
+        const newNodes = [];
+        const newEdges = [];
+        // Create new nodes with new IDs and offset position
+        this.clipboard.nodes.forEach((node) => {
+            const newId = v4();
+            idMap.set(node.id, newId);
+            newNodes.push({
+                ...node,
+                id: newId,
+                position: { x: node.position.x + 20, y: node.position.y + 20 },
+                selected: true, // Select pasted nodes
+            });
+        });
+        // Create new edges with updated source/target IDs
+        this.clipboard.edges.forEach((edge) => {
+            const newSource = idMap.get(edge.source);
+            const newTarget = idMap.get(edge.target);
+            if (newSource && newTarget) {
+                newEdges.push({
+                    ...edge,
+                    id: v4(),
+                    source: newSource,
+                    target: newTarget,
+                    selected: true, // Select pasted edges
+                });
+            }
+        });
+        // Deselect existing elements
+        this.clearSelection();
+        // Add new elements
+        this.nodes.update((nodes) => [...nodes, ...newNodes]);
+        this.edges.update((edges) => [...edges, ...newEdges]);
+    }
+    cut() {
+        this.copy();
+        this.deleteSelectedElements();
+    }
+    duplicate() {
+        this.copy();
+        this.paste();
+    }
+    // --- Grouping Operations ---
+    groupNodes(nodeIds) {
+        if (nodeIds.length < 2)
+            return;
+        this.undoRedoService.saveState(this.getCurrentState());
+        const nodesToGroup = this.nodes().filter((n) => nodeIds.includes(n.id));
+        if (nodesToGroup.length === 0)
+            return;
+        // Calculate bounding box
+        const minX = Math.min(...nodesToGroup.map((n) => n.position.x));
+        const minY = Math.min(...nodesToGroup.map((n) => n.position.y));
+        const maxX = Math.max(...nodesToGroup.map((n) => n.position.x + (n.width || 150)));
+        const maxY = Math.max(...nodesToGroup.map((n) => n.position.y + (n.height || 60)));
+        const padding = 20;
+        const groupNode = {
+            id: v4(),
+            type: 'group',
+            position: { x: minX - padding, y: minY - padding },
+            width: maxX - minX + padding * 2,
+            height: maxY - minY + padding * 2,
+            data: { label: 'Group' },
+            expanded: true,
+            selected: true,
+        };
+        // Update children to point to parent
+        // Note: We are keeping absolute coordinates for now, so no position update needed for children
+        const updatedChildren = nodesToGroup.map((n) => ({ ...n, parentId: groupNode.id, selected: false }));
+        const otherNodes = this.nodes().filter((n) => !nodeIds.includes(n.id));
+        this.nodes.set([...otherNodes, groupNode, ...updatedChildren]);
+        this.clearSelection();
+        this.selectNodes([groupNode.id]);
+    }
+    ungroupNodes(groupId) {
+        const groupNode = this.nodes().find((n) => n.id === groupId);
+        if (!groupNode || groupNode.type !== 'group')
+            return;
+        this.undoRedoService.saveState(this.getCurrentState());
+        // Remove parentId from children
+        const updatedNodes = this.nodes().map((n) => {
+            if (n.parentId === groupId) {
+                const { parentId, ...rest } = n;
+                return { ...rest, selected: true };
+            }
+            return n;
+        });
+        // Remove group node
+        this.nodes.set(updatedNodes.filter((n) => n.id !== groupId));
+    }
+    addNode(node) {
+        this.undoRedoService.saveState(this.getCurrentState());
+        this.nodes.update((nodes) => [...nodes, { ...node, selected: false }]);
+    }
+    removeNode(id) {
+        this.undoRedoService.saveState(this.getCurrentState());
+        this.nodes.update((nodes) => nodes.filter((n) => n.id !== id));
+        this.edges.update((edges) => edges.filter((e) => e.source !== id && e.target !== id));
+    }
+    updateNode(id, changes) {
+        if (!changes.dragging && !changes.position) {
+            this.undoRedoService.saveState(this.getCurrentState());
+        }
+        this.nodes.update((nodes) => nodes.map((n) => {
+            if (n.id === id) {
+                return { ...n, ...changes };
+            }
+            return n;
+        }));
+    }
+    resizeNode(id, width, height, position) {
+        this.nodes.update((nodes) => nodes.map((n) => {
+            if (n.id === id) {
+                return { ...n, width, height, ...(position ? { position } : {}) };
+            }
+            return n;
+        }));
+    }
+    toggleGroup(groupId) {
+        this.nodes.update((nodes) => nodes.map((n) => {
+            if (n.id === groupId) {
+                return { ...n, expanded: !n.expanded };
+            }
+            return n;
+        }));
+    }
+    // Move node and handle group children
+    moveNode(id, newPosition) {
+        // console.log('moveNode', id, newPosition);
+        const node = this.nodes().find((n) => n.id === id);
+        if (!node)
+            return;
+        // Snapping Logic
+        let snappedX = newPosition.x;
+        let snappedY = newPosition.y;
+        const guides = [];
+        const SNAP_DISTANCE = 5;
+        const GRID_SIZE = 20;
+        // 1. Snap to Grid (lower priority)
+        snappedX = Math.round(snappedX / GRID_SIZE) * GRID_SIZE;
+        snappedY = Math.round(snappedY / GRID_SIZE) * GRID_SIZE;
+        // 2. Snap to Nodes (higher priority)
+        // Only snap if dragging a single node (for simplicity for now)
+        const otherNodes = this.nodes().filter(n => n.id !== id && n.parentId === node.parentId && !n.selected);
+        let snappedXNode = false;
+        let snappedYNode = false;
+        // Horizontal Alignment (aligning Y coordinates)
+        // Check Top, Center, Bottom
+        const myHeight = node.height || 150; // Default height
+        const myCenterY = newPosition.y + myHeight / 2;
+        const myBottomY = newPosition.y + myHeight;
+        for (const other of otherNodes) {
+            const otherHeight = other.height || 150;
+            const otherY = other.position.y;
+            const otherCenterY = otherY + otherHeight / 2;
+            const otherBottomY = otherY + otherHeight;
+            // Top to Top
+            if (Math.abs(newPosition.y - otherY) < SNAP_DISTANCE) {
+                snappedY = otherY;
+                snappedYNode = true;
+                guides.push({ type: 'horizontal', position: otherY, start: Math.min(newPosition.x, other.position.x), end: Math.max(newPosition.x + (node.width || 150), other.position.x + (other.width || 150)) });
+            }
+            // Top to Bottom
+            else if (Math.abs(newPosition.y - otherBottomY) < SNAP_DISTANCE) {
+                snappedY = otherBottomY;
+                snappedYNode = true;
+                guides.push({ type: 'horizontal', position: otherBottomY, start: Math.min(newPosition.x, other.position.x), end: Math.max(newPosition.x + (node.width || 150), other.position.x + (other.width || 150)) });
+            }
+            // Center to Center
+            else if (Math.abs(myCenterY - otherCenterY) < SNAP_DISTANCE) {
+                snappedY = otherCenterY - myHeight / 2;
+                snappedYNode = true;
+                guides.push({ type: 'horizontal', position: otherCenterY, start: Math.min(newPosition.x, other.position.x), end: Math.max(newPosition.x + (node.width || 150), other.position.x + (other.width || 150)) });
+            }
+            // Bottom to Top
+            else if (Math.abs(myBottomY - otherY) < SNAP_DISTANCE) {
+                snappedY = otherY - myHeight;
+                snappedYNode = true;
+                guides.push({ type: 'horizontal', position: otherY, start: Math.min(newPosition.x, other.position.x), end: Math.max(newPosition.x + (node.width || 150), other.position.x + (other.width || 150)) });
+            }
+            // Bottom to Bottom
+            else if (Math.abs(myBottomY - otherBottomY) < SNAP_DISTANCE) {
+                snappedY = otherBottomY - myHeight;
+                snappedYNode = true;
+                guides.push({ type: 'horizontal', position: otherBottomY, start: Math.min(newPosition.x, other.position.x), end: Math.max(newPosition.x + (node.width || 150), other.position.x + (other.width || 150)) });
+            }
+            if (snappedYNode)
+                break; // Snap to first match
+        }
+        // Vertical Alignment (aligning X coordinates)
+        // Check Left, Center, Right
+        const myWidth = node.width || 150; // Default width
+        const myCenterX = newPosition.x + myWidth / 2;
+        const myRightX = newPosition.x + myWidth;
+        for (const other of otherNodes) {
+            const otherWidth = other.width || 150;
+            const otherX = other.position.x;
+            const otherCenterX = otherX + otherWidth / 2;
+            const otherRightX = otherX + otherWidth;
+            // Left to Left
+            if (Math.abs(newPosition.x - otherX) < SNAP_DISTANCE) {
+                snappedX = otherX;
+                snappedXNode = true;
+                guides.push({ type: 'vertical', position: otherX, start: Math.min(newPosition.y, other.position.y), end: Math.max(newPosition.y + (node.height || 60), other.position.y + (other.height || 60)) });
+            }
+            // Left to Right
+            else if (Math.abs(newPosition.x - otherRightX) < SNAP_DISTANCE) {
+                snappedX = otherRightX;
+                snappedXNode = true;
+                guides.push({ type: 'vertical', position: otherRightX, start: Math.min(newPosition.y, other.position.y), end: Math.max(newPosition.y + (node.height || 60), other.position.y + (other.height || 60)) });
+            }
+            // Center to Center
+            else if (Math.abs(myCenterX - otherCenterX) < SNAP_DISTANCE) {
+                snappedX = otherCenterX - myWidth / 2;
+                snappedXNode = true;
+                guides.push({ type: 'vertical', position: otherCenterX, start: Math.min(newPosition.y, other.position.y), end: Math.max(newPosition.y + (node.height || 60), other.position.y + (other.height || 60)) });
+            }
+            // Right to Left
+            else if (Math.abs(myRightX - otherX) < SNAP_DISTANCE) {
+                snappedX = otherX - myWidth;
+                snappedXNode = true;
+                guides.push({ type: 'vertical', position: otherX, start: Math.min(newPosition.y, other.position.y), end: Math.max(newPosition.y + (node.height || 60), other.position.y + (other.height || 60)) });
+            }
+            // Right to Right
+            else if (Math.abs(myRightX - otherRightX) < SNAP_DISTANCE) {
+                snappedX = otherRightX - myWidth;
+                snappedXNode = true;
+                guides.push({ type: 'vertical', position: otherRightX, start: Math.min(newPosition.y, other.position.y), end: Math.max(newPosition.y + (node.height || 60), other.position.y + (other.height || 60)) });
+            }
+            if (snappedXNode)
+                break;
+        }
+        this.alignmentGuides.set(guides);
+        const finalPosition = { x: snappedX, y: snappedY };
+        const dx = finalPosition.x - node.position.x;
+        const dy = finalPosition.y - node.position.y;
+        if (dx === 0 && dy === 0)
+            return;
+        // Update the moved node
+        const updatedNodes = this.nodes().map((n) => {
+            if (n.id === id) {
+                return { ...n, position: finalPosition };
+            }
+            return n;
+        });
+        // If it's a group, move all children recursively
+        if (node.type === 'group') {
+            this.moveChildren(id, dx, dy, updatedNodes);
+        }
+        this.nodes.set(updatedNodes);
+    }
+    moveChildren(parentId, dx, dy, nodes, visited = new Set()) {
+        if (visited.has(parentId)) {
+            console.warn('Cycle detected in group hierarchy, stopping recursion for', parentId);
+            return;
+        }
+        visited.add(parentId);
+        for (let i = 0; i < nodes.length; i++) {
+            if (nodes[i].parentId === parentId) {
+                nodes[i] = {
+                    ...nodes[i],
+                    position: {
+                        x: nodes[i].position.x + dx,
+                        y: nodes[i].position.y + dy,
+                    },
+                };
+                // Recursively move children of children (nested groups)
+                if (nodes[i].type === 'group') {
+                    this.moveChildren(nodes[i].id, dx, dy, nodes, visited);
+                }
+            }
+        }
+    }
+    // Move multiple nodes (batch movement)
+    moveNodes(moves) {
+        console.log('moveNodes', moves.length);
+        const GRID_SIZE = 20;
+        let currentNodes = [...this.nodes()];
+        this.alignmentGuides.set([]); // Clear guides during batch move for now
+        moves.forEach(move => {
+            const node = currentNodes.find(n => n.id === move.id);
+            if (!node)
+                return;
+            // Simple grid snap for batch move
+            const snappedX = Math.round(move.position.x / GRID_SIZE) * GRID_SIZE;
+            const snappedY = Math.round(move.position.y / GRID_SIZE) * GRID_SIZE;
+            const finalPosition = { x: snappedX, y: snappedY };
+            const dx = finalPosition.x - node.position.x;
+            const dy = finalPosition.y - node.position.y;
+            // Update parent node
+            currentNodes = currentNodes.map(n => n.id === move.id ? { ...n, position: finalPosition } : n);
+            // If group, move children
+            if (node.type === 'group') {
+                this.moveChildren(node.id, dx, dy, currentNodes);
+            }
+        });
+        this.nodes.set(currentNodes);
+    }
+    setSearchQuery(query) {
+        this.searchQuery.set(query);
+    }
+    setFilterType(type) {
+        this.filterType.set(type);
+    }
+    setZoom(zoom) {
+        this.viewport.update(v => ({ ...v, zoom }));
+    }
+    setContainerDimensions(dimensions) {
+        this.containerDimensions.set(dimensions);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DiagramStateService, deps: [{ token: UndoRedoService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DiagramStateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DiagramStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: UndoRedoService }] });
+
+class MinimapComponent {
+    diagramStateService;
+    nodeColor = '#e2e2e2';
+    nodeClass = '';
+    // Initialize signals from service
+    nodes;
+    viewport;
+    // Minimap dimensions
+    width = 200;
+    height = 150;
+    constructor(diagramStateService) {
+        this.diagramStateService = diagramStateService;
+        this.nodes = this.diagramStateService.nodes;
+        this.viewport = this.diagramStateService.viewport;
+    }
+    // Computed properties for rendering
+    viewBox = computed(() => {
+        const nodes = this.nodes();
+        if (nodes.length === 0)
+            return '0 0 100 100';
+        const bounds = this.getBounds(nodes);
+        const padding = 50;
+        return `${bounds.minX - padding} ${bounds.minY - padding} ${bounds.width + padding * 2} ${bounds.height + padding * 2}`;
+    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : []));
+    viewportIndicator = computed(() => {
+        const v = this.viewport();
+        const nodes = this.nodes();
+        if (nodes.length === 0)
+            return { x: 0, y: 0, width: 0, height: 0 };
+        // We need to map the current viewport to the minimap coordinate system
+        // This is a bit complex because the viewport transform is applied to the main diagram
+        // and we need to show which part of the diagram is currently visible.
+        // For now, let's just return a placeholder. 
+        // Real implementation requires knowing the diagram container size which we might need to get from service
+        return { x: -v.x / v.zoom, y: -v.y / v.zoom, width: 1000 / v.zoom, height: 800 / v.zoom };
+    }, ...(ngDevMode ? [{ debugName: "viewportIndicator" }] : []));
+    getBounds(nodes) {
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        nodes.forEach(node => {
+            minX = Math.min(minX, node.position.x);
+            minY = Math.min(minY, node.position.y);
+            maxX = Math.max(maxX, node.position.x + (node.width || 170));
+            maxY = Math.max(maxY, node.position.y + (node.height || 60));
+        });
+        return {
+            minX,
+            minY,
+            width: maxX - minX,
+            height: maxY - minY
+        };
+    }
+    onMinimapClick(event) {
+        const svg = event.currentTarget;
+        const rect = svg.getBoundingClientRect();
+        // Click position relative to minimap
+        const clickX = event.clientX - rect.left;
+        const clickY = event.clientY - rect.top;
+        // Convert to SVG coordinates
+        // We need to parse the viewBox to know the scale
+        const vb = this.viewBox().split(' ').map(parseFloat);
+        const vbX = vb[0];
+        const vbY = vb[1];
+        const vbW = vb[2];
+        const vbH = vb[3];
+        const scaleX = vbW / rect.width;
+        const scaleY = vbH / rect.height;
+        const svgX = vbX + clickX * scaleX;
+        const svgY = vbY + clickY * scaleY;
+        // Center the viewport on this point
+        // New viewport x = -svgX * zoom + viewportWidth / 2
+        // We need the diagram dimensions to center perfectly, but for now we can approximate
+        // or just move the top-left to this point.
+        // Let's try to center.
+        const currentZoom = this.viewport().zoom;
+        // Assuming a default diagram size or getting it from service would be better
+        // For now, let's just move to that position
+        const newX = -svgX * currentZoom + 400; // 400 is approx half width
+        const newY = -svgY * currentZoom + 300; // 300 is approx half height
+        this.diagramStateService.setViewport({
+            x: newX,
+            y: newY,
+            zoom: currentZoom
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: MinimapComponent, deps: [{ token: DiagramStateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: MinimapComponent, isStandalone: true, selector: "ngx-workflow-minimap", inputs: { nodeColor: "nodeColor", nodeClass: "nodeClass" }, ngImport: i0, template: "<div class=\"ngx-workflow__minimap\">\r\n  <svg [attr.viewBox]=\"viewBox()\" class=\"ngx-workflow__minimap-svg\" (click)=\"onMinimapClick($event)\">\r\n    <rect *ngFor=\"let node of nodes()\" [attr.x]=\"node.position.x\" [attr.y]=\"node.position.y\"\r\n      [attr.width]=\"node.width || 170\" [attr.height]=\"node.height || 60\" [attr.fill]=\"nodeColor\" [class]=\"nodeClass\"\r\n      class=\"ngx-workflow__minimap-node\" />\r\n    <rect class=\"ngx-workflow__minimap-viewport\" [attr.x]=\"viewportIndicator().x\" [attr.y]=\"viewportIndicator().y\"\r\n      [attr.width]=\"viewportIndicator().width\" [attr.height]=\"viewportIndicator().height\" />\r\n  </svg>\r\n</div>", styles: [".ngx-workflow__minimap{position:absolute;bottom:20px;right:20px;width:200px;height:150px;background-color:#fff;border:1px solid #e2e2e2;border-radius:4px;box-shadow:0 2px 4px #0000001a;overflow:hidden;z-index:5}.ngx-workflow__minimap-svg{width:100%;height:100%;display:block}.ngx-workflow__minimap-node{stroke:none}.ngx-workflow__minimap-viewport{fill:#0000ff1a;stroke:#00f;stroke-width:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: MinimapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-workflow-minimap', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngx-workflow__minimap\">\r\n  <svg [attr.viewBox]=\"viewBox()\" class=\"ngx-workflow__minimap-svg\" (click)=\"onMinimapClick($event)\">\r\n    <rect *ngFor=\"let node of nodes()\" [attr.x]=\"node.position.x\" [attr.y]=\"node.position.y\"\r\n      [attr.width]=\"node.width || 170\" [attr.height]=\"node.height || 60\" [attr.fill]=\"nodeColor\" [class]=\"nodeClass\"\r\n      class=\"ngx-workflow__minimap-node\" />\r\n    <rect class=\"ngx-workflow__minimap-viewport\" [attr.x]=\"viewportIndicator().x\" [attr.y]=\"viewportIndicator().y\"\r\n      [attr.width]=\"viewportIndicator().width\" [attr.height]=\"viewportIndicator().height\" />\r\n  </svg>\r\n</div>", styles: [".ngx-workflow__minimap{position:absolute;bottom:20px;right:20px;width:200px;height:150px;background-color:#fff;border:1px solid #e2e2e2;border-radius:4px;box-shadow:0 2px 4px #0000001a;overflow:hidden;z-index:5}.ngx-workflow__minimap-svg{width:100%;height:100%;display:block}.ngx-workflow__minimap-node{stroke:none}.ngx-workflow__minimap-viewport{fill:#0000ff1a;stroke:#00f;stroke-width:1px}\n"] }]
+        }], ctorParameters: () => [{ type: DiagramStateService }], propDecorators: { nodeColor: [{
+                type: Input
+            }], nodeClass: [{
+                type: Input
+            }] } });
+
+class BackgroundComponent {
+    variant = 'dots';
+    gap = 20;
+    size = 1;
+    color = '#81818a';
+    backgroundColor = '#f0f0f0';
+    diagramStateService = inject(DiagramStateService);
+    // Computed property for pattern transform based on viewport
+    patternTransform = computed(() => {
+        const viewport = this.diagramStateService.viewport();
+        return `translate(${viewport.x}, ${viewport.y}) scale(${viewport.zoom})`;
+    }, ...(ngDevMode ? [{ debugName: "patternTransform" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: BackgroundComponent, isStandalone: true, selector: "ngx-workflow-background", inputs: { variant: "variant", gap: "gap", size: "size", color: "color", backgroundColor: "backgroundColor" }, ngImport: i0, template: "<svg class=\"ngx-workflow__background\" [attr.width]=\"'100%'\" [attr.height]=\"'100%'\">\r\n  <defs>\r\n    <!-- Dots Pattern -->\r\n    <pattern *ngIf=\"variant === 'dots'\" id=\"ngx-workflow__pattern-dots\" [attr.x]=\"0\" [attr.y]=\"0\" [attr.width]=\"gap\"\r\n      [attr.height]=\"gap\" patternUnits=\"userSpaceOnUse\" [attr.patternTransform]=\"patternTransform()\">\r\n      <circle [attr.cx]=\"size\" [attr.cy]=\"size\" [attr.r]=\"size\" [attr.fill]=\"color\" />\r\n    </pattern>\r\n\r\n    <!-- Lines Pattern -->\r\n    <pattern *ngIf=\"variant === 'lines'\" id=\"ngx-workflow__pattern-lines\" [attr.x]=\"0\" [attr.y]=\"0\" [attr.width]=\"gap\"\r\n      [attr.height]=\"gap\" patternUnits=\"userSpaceOnUse\" [attr.patternTransform]=\"patternTransform()\">\r\n      <path [attr.d]=\"'M ' + gap + ' 0 L 0 0 0 ' + gap\" [attr.fill]=\"'none'\" [attr.stroke]=\"color\"\r\n        [attr.stroke-width]=\"size\" />\r\n    </pattern>\r\n\r\n    <!-- Cross Pattern -->\r\n    <pattern *ngIf=\"variant === 'cross'\" id=\"ngx-workflow__pattern-cross\" [attr.x]=\"0\" [attr.y]=\"0\" [attr.width]=\"gap\"\r\n      [attr.height]=\"gap\" patternUnits=\"userSpaceOnUse\" [attr.patternTransform]=\"patternTransform()\">\r\n      <path [attr.d]=\"'M ' + gap + ' 0 L 0 0 0 ' + gap\" [attr.fill]=\"'none'\" [attr.stroke]=\"color\"\r\n        [attr.stroke-width]=\"size\" />\r\n      <path [attr.d]=\"'M 0 ' + (gap/2) + ' L ' + gap + ' ' + (gap/2) + ' M ' + (gap/2) + ' 0 L ' + (gap/2) + ' ' + gap\"\r\n        [attr.fill]=\"'none'\" [attr.stroke]=\"color\" [attr.stroke-width]=\"size\" />\r\n    </pattern>\r\n  </defs>\r\n\r\n  <rect width=\"100%\" height=\"100%\" [attr.fill]=\"backgroundColor\" />\r\n  <rect width=\"100%\" height=\"100%\" [attr.fill]=\"'url(#ngx-workflow__pattern-' + variant + ')'\" />\r\n</svg>", styles: [".ngx-workflow__background{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BackgroundComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-workflow-background', standalone: true, imports: [CommonModule], template: "<svg class=\"ngx-workflow__background\" [attr.width]=\"'100%'\" [attr.height]=\"'100%'\">\r\n  <defs>\r\n    <!-- Dots Pattern -->\r\n    <pattern *ngIf=\"variant === 'dots'\" id=\"ngx-workflow__pattern-dots\" [attr.x]=\"0\" [attr.y]=\"0\" [attr.width]=\"gap\"\r\n      [attr.height]=\"gap\" patternUnits=\"userSpaceOnUse\" [attr.patternTransform]=\"patternTransform()\">\r\n      <circle [attr.cx]=\"size\" [attr.cy]=\"size\" [attr.r]=\"size\" [attr.fill]=\"color\" />\r\n    </pattern>\r\n\r\n    <!-- Lines Pattern -->\r\n    <pattern *ngIf=\"variant === 'lines'\" id=\"ngx-workflow__pattern-lines\" [attr.x]=\"0\" [attr.y]=\"0\" [attr.width]=\"gap\"\r\n      [attr.height]=\"gap\" patternUnits=\"userSpaceOnUse\" [attr.patternTransform]=\"patternTransform()\">\r\n      <path [attr.d]=\"'M ' + gap + ' 0 L 0 0 0 ' + gap\" [attr.fill]=\"'none'\" [attr.stroke]=\"color\"\r\n        [attr.stroke-width]=\"size\" />\r\n    </pattern>\r\n\r\n    <!-- Cross Pattern -->\r\n    <pattern *ngIf=\"variant === 'cross'\" id=\"ngx-workflow__pattern-cross\" [attr.x]=\"0\" [attr.y]=\"0\" [attr.width]=\"gap\"\r\n      [attr.height]=\"gap\" patternUnits=\"userSpaceOnUse\" [attr.patternTransform]=\"patternTransform()\">\r\n      <path [attr.d]=\"'M ' + gap + ' 0 L 0 0 0 ' + gap\" [attr.fill]=\"'none'\" [attr.stroke]=\"color\"\r\n        [attr.stroke-width]=\"size\" />\r\n      <path [attr.d]=\"'M 0 ' + (gap/2) + ' L ' + gap + ' ' + (gap/2) + ' M ' + (gap/2) + ' 0 L ' + (gap/2) + ' ' + gap\"\r\n        [attr.fill]=\"'none'\" [attr.stroke]=\"color\" [attr.stroke-width]=\"size\" />\r\n    </pattern>\r\n  </defs>\r\n\r\n  <rect width=\"100%\" height=\"100%\" [attr.fill]=\"backgroundColor\" />\r\n  <rect width=\"100%\" height=\"100%\" [attr.fill]=\"'url(#ngx-workflow__pattern-' + variant + ')'\" />\r\n</svg>", styles: [".ngx-workflow__background{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }] } });
+
+class AlignmentControlsComponent {
+    diagramStateService;
+    // Only show controls if more than 1 node is selected
+    showControls = computed(() => this.diagramStateService.selectedNodes().length > 1, ...(ngDevMode ? [{ debugName: "showControls" }] : []));
+    // Only show distribution controls if more than 2 nodes are selected
+    showDistribution = computed(() => this.diagramStateService.selectedNodes().length > 2, ...(ngDevMode ? [{ debugName: "showDistribution" }] : []));
+    constructor(diagramStateService) {
+        this.diagramStateService = diagramStateService;
+    }
+    align(alignment) {
+        this.diagramStateService.alignNodes(alignment);
+    }
+    distribute(distribution) {
+        this.diagramStateService.distributeNodes(distribution);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AlignmentControlsComponent, deps: [{ token: DiagramStateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: AlignmentControlsComponent, isStandalone: true, selector: "ngx-workflow-alignment-controls", ngImport: i0, template: "<div class=\"ngx-workflow__alignment-controls\" *ngIf=\"showControls()\">\r\n  <div class=\"ngx-workflow__alignment-group\">\r\n    <button (click)=\"align('left')\" title=\"Align Left\">Left</button>\r\n    <button (click)=\"align('center')\" title=\"Align Center\">Center</button>\r\n    <button (click)=\"align('right')\" title=\"Align Right\">Right</button>\r\n  </div>\r\n  <div class=\"ngx-workflow__alignment-group\">\r\n    <button (click)=\"align('top')\" title=\"Align Top\">Top</button>\r\n    <button (click)=\"align('middle')\" title=\"Align Middle\">Middle</button>\r\n    <button (click)=\"align('bottom')\" title=\"Align Bottom\">Bottom</button>\r\n  </div>\r\n  <div class=\"ngx-workflow__alignment-group\" *ngIf=\"showDistribution()\">\r\n    <button (click)=\"distribute('horizontal')\" title=\"Distribute Horizontally\">Dist H</button>\r\n    <button (click)=\"distribute('vertical')\" title=\"Distribute Vertically\">Dist V</button>\r\n  </div>\r\n</div>", styles: [".ngx-workflow__alignment-controls{position:absolute;top:20px;left:50%;transform:translate(-50%);background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:8px;display:flex;gap:12px;box-shadow:0 4px 6px #0000001a;z-index:10}.ngx-workflow__alignment-group{display:flex;gap:4px;align-items:center}.ngx-workflow__alignment-group:not(:last-child){padding-right:12px;border-right:1px solid #e0e0e0}button{background:none;border:1px solid transparent;border-radius:4px;padding:4px 8px;font-size:12px;cursor:pointer;color:#555;transition:all .2s}button:hover{background:#f5f5f5;border-color:#ddd;color:#333}button:active{background:#e0e0e0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AlignmentControlsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-workflow-alignment-controls', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngx-workflow__alignment-controls\" *ngIf=\"showControls()\">\r\n  <div class=\"ngx-workflow__alignment-group\">\r\n    <button (click)=\"align('left')\" title=\"Align Left\">Left</button>\r\n    <button (click)=\"align('center')\" title=\"Align Center\">Center</button>\r\n    <button (click)=\"align('right')\" title=\"Align Right\">Right</button>\r\n  </div>\r\n  <div class=\"ngx-workflow__alignment-group\">\r\n    <button (click)=\"align('top')\" title=\"Align Top\">Top</button>\r\n    <button (click)=\"align('middle')\" title=\"Align Middle\">Middle</button>\r\n    <button (click)=\"align('bottom')\" title=\"Align Bottom\">Bottom</button>\r\n  </div>\r\n  <div class=\"ngx-workflow__alignment-group\" *ngIf=\"showDistribution()\">\r\n    <button (click)=\"distribute('horizontal')\" title=\"Distribute Horizontally\">Dist H</button>\r\n    <button (click)=\"distribute('vertical')\" title=\"Distribute Vertically\">Dist V</button>\r\n  </div>\r\n</div>", styles: [".ngx-workflow__alignment-controls{position:absolute;top:20px;left:50%;transform:translate(-50%);background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:8px;display:flex;gap:12px;box-shadow:0 4px 6px #0000001a;z-index:10}.ngx-workflow__alignment-group{display:flex;gap:4px;align-items:center}.ngx-workflow__alignment-group:not(:last-child){padding-right:12px;border-right:1px solid #e0e0e0}button{background:none;border:1px solid transparent;border-radius:4px;padding:4px 8px;font-size:12px;cursor:pointer;color:#555;transition:all .2s}button:hover{background:#f5f5f5;border-color:#ddd;color:#333}button:active{background:#e0e0e0}\n"] }]
+        }], ctorParameters: () => [{ type: DiagramStateService }] });
+
+class PropertiesSidebarComponent {
+    node = null;
+    close = new EventEmitter();
+    change = new EventEmitter();
+    updateLabel(label) {
+        if (!this.node)
+            return;
+        this.change.emit({ label });
+    }
+    updateWidth(width) {
+        this.change.emit({ width });
+    }
+    updateHeight(height) {
+        this.change.emit({ height });
+    }
+    updateX(x) {
+        if (!this.node)
+            return;
+        this.change.emit({ position: { x, y: this.node.position.y } });
+    }
+    updateY(y) {
+        if (!this.node)
+            return;
+        this.change.emit({ position: { x: this.node.position.x, y } });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: PropertiesSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: PropertiesSidebarComponent, isStandalone: true, selector: "ngx-workflow-properties-sidebar", inputs: { node: "node" }, outputs: { close: "close", change: "change" }, ngImport: i0, template: "<div class=\"ngx-workflow__sidebar\" [class.open]=\"!!node\">\r\n    <div class=\"ngx-workflow__sidebar-header\">\r\n        <h3>Node Properties</h3>\r\n        <button class=\"ngx-workflow__close-btn\" (click)=\"close.emit()\">\u00D7</button>\r\n    </div>\r\n\r\n    <div class=\"ngx-workflow__sidebar-content\" *ngIf=\"node\">\r\n        <div class=\"ngx-workflow__form-group\">\r\n            <label>ID</label>\r\n            <input type=\"text\" [value]=\"node.id\" disabled class=\"ngx-workflow__input disabled\">\r\n        </div>\r\n\r\n        <div class=\"ngx-workflow__form-group\">\r\n            <label>Label</label>\r\n            <input type=\"text\" [ngModel]=\"node.label\" (ngModelChange)=\"updateLabel($event)\" class=\"ngx-workflow__input\">\r\n        </div>\r\n\r\n        <div class=\"ngx-workflow__form-row\">\r\n            <div class=\"ngx-workflow__form-group\">\r\n                <label>X</label>\r\n                <input type=\"number\" [ngModel]=\"node.position.x\" (ngModelChange)=\"updateX($event)\"\r\n                    class=\"ngx-workflow__input\">\r\n            </div>\r\n            <div class=\"ngx-workflow__form-group\">\r\n                <label>Y</label>\r\n                <input type=\"number\" [ngModel]=\"node.position.y\" (ngModelChange)=\"updateY($event)\"\r\n                    class=\"ngx-workflow__input\">\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"ngx-workflow__form-row\">\r\n            <div class=\"ngx-workflow__form-group\">\r\n                <label>Width</label>\r\n                <input type=\"number\" [ngModel]=\"node.width || 170\" (ngModelChange)=\"updateWidth($event)\"\r\n                    class=\"ngx-workflow__input\">\r\n            </div>\r\n            <div class=\"ngx-workflow__form-group\">\r\n                <label>Height</label>\r\n                <input type=\"number\" [ngModel]=\"node.height || 60\" (ngModelChange)=\"updateHeight($event)\"\r\n                    class=\"ngx-workflow__input\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".ngx-workflow__sidebar{position:absolute;top:20px;right:20px;width:300px;background:var(--ngx-workflow-glass-bg);-webkit-backdrop-filter:var(--ngx-workflow-glass-blur);backdrop-filter:var(--ngx-workflow-glass-blur);border:1px solid var(--ngx-workflow-border);border-radius:12px;box-shadow:var(--ngx-workflow-shadow-lg);padding:0;transform:translate(120%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:50;overflow:hidden}.ngx-workflow__sidebar.open{transform:translate(0)}.ngx-workflow__sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--ngx-workflow-border);background:#ffffff80}.ngx-workflow__sidebar-header h3{margin:0;font-size:16px;font-weight:600;color:var(--ngx-workflow-text-primary)}.ngx-workflow__sidebar-content{padding:16px;display:flex;flex-direction:column;gap:16px}.ngx-workflow__close-btn{background:none;border:none;font-size:20px;color:var(--ngx-workflow-text-secondary);cursor:pointer;padding:4px;border-radius:4px;line-height:1}.ngx-workflow__close-btn:hover{background:#0000000d;color:var(--ngx-workflow-text-primary)}.ngx-workflow__form-group{display:flex;flex-direction:column;gap:6px}.ngx-workflow__form-group label{font-size:12px;font-weight:500;color:var(--ngx-workflow-text-secondary)}.ngx-workflow__form-row{display:flex;gap:12px}.ngx-workflow__form-row .ngx-workflow__form-group{flex:1}.ngx-workflow__input{padding:8px 12px;border-radius:6px;border:1px solid var(--ngx-workflow-border);background:var(--ngx-workflow-surface);color:var(--ngx-workflow-text-primary);font-size:14px;outline:none;transition:all .2s ease;width:100%;box-sizing:border-box}.ngx-workflow__input:focus{border-color:var(--ngx-workflow-primary);box-shadow:0 0 0 2px #3b82f61a}.ngx-workflow__input.disabled{background:#00000005;color:var(--ngx-workflow-text-secondary);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: PropertiesSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-workflow-properties-sidebar', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"ngx-workflow__sidebar\" [class.open]=\"!!node\">\r\n    <div class=\"ngx-workflow__sidebar-header\">\r\n        <h3>Node Properties</h3>\r\n        <button class=\"ngx-workflow__close-btn\" (click)=\"close.emit()\">\u00D7</button>\r\n    </div>\r\n\r\n    <div class=\"ngx-workflow__sidebar-content\" *ngIf=\"node\">\r\n        <div class=\"ngx-workflow__form-group\">\r\n            <label>ID</label>\r\n            <input type=\"text\" [value]=\"node.id\" disabled class=\"ngx-workflow__input disabled\">\r\n        </div>\r\n\r\n        <div class=\"ngx-workflow__form-group\">\r\n            <label>Label</label>\r\n            <input type=\"text\" [ngModel]=\"node.label\" (ngModelChange)=\"updateLabel($event)\" class=\"ngx-workflow__input\">\r\n        </div>\r\n\r\n        <div class=\"ngx-workflow__form-row\">\r\n            <div class=\"ngx-workflow__form-group\">\r\n                <label>X</label>\r\n                <input type=\"number\" [ngModel]=\"node.position.x\" (ngModelChange)=\"updateX($event)\"\r\n                    class=\"ngx-workflow__input\">\r\n            </div>\r\n            <div class=\"ngx-workflow__form-group\">\r\n                <label>Y</label>\r\n                <input type=\"number\" [ngModel]=\"node.position.y\" (ngModelChange)=\"updateY($event)\"\r\n                    class=\"ngx-workflow__input\">\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"ngx-workflow__form-row\">\r\n            <div class=\"ngx-workflow__form-group\">\r\n                <label>Width</label>\r\n                <input type=\"number\" [ngModel]=\"node.width || 170\" (ngModelChange)=\"updateWidth($event)\"\r\n                    class=\"ngx-workflow__input\">\r\n            </div>\r\n            <div class=\"ngx-workflow__form-group\">\r\n                <label>Height</label>\r\n                <input type=\"number\" [ngModel]=\"node.height || 60\" (ngModelChange)=\"updateHeight($event)\"\r\n                    class=\"ngx-workflow__input\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".ngx-workflow__sidebar{position:absolute;top:20px;right:20px;width:300px;background:var(--ngx-workflow-glass-bg);-webkit-backdrop-filter:var(--ngx-workflow-glass-blur);backdrop-filter:var(--ngx-workflow-glass-blur);border:1px solid var(--ngx-workflow-border);border-radius:12px;box-shadow:var(--ngx-workflow-shadow-lg);padding:0;transform:translate(120%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:50;overflow:hidden}.ngx-workflow__sidebar.open{transform:translate(0)}.ngx-workflow__sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--ngx-workflow-border);background:#ffffff80}.ngx-workflow__sidebar-header h3{margin:0;font-size:16px;font-weight:600;color:var(--ngx-workflow-text-primary)}.ngx-workflow__sidebar-content{padding:16px;display:flex;flex-direction:column;gap:16px}.ngx-workflow__close-btn{background:none;border:none;font-size:20px;color:var(--ngx-workflow-text-secondary);cursor:pointer;padding:4px;border-radius:4px;line-height:1}.ngx-workflow__close-btn:hover{background:#0000000d;color:var(--ngx-workflow-text-primary)}.ngx-workflow__form-group{display:flex;flex-direction:column;gap:6px}.ngx-workflow__form-group label{font-size:12px;font-weight:500;color:var(--ngx-workflow-text-secondary)}.ngx-workflow__form-row{display:flex;gap:12px}.ngx-workflow__form-row .ngx-workflow__form-group{flex:1}.ngx-workflow__input{padding:8px 12px;border-radius:6px;border:1px solid var(--ngx-workflow-border);background:var(--ngx-workflow-surface);color:var(--ngx-workflow-text-primary);font-size:14px;outline:none;transition:all .2s ease;width:100%;box-sizing:border-box}.ngx-workflow__input:focus{border-color:var(--ngx-workflow-primary);box-shadow:0 0 0 2px #3b82f61a}.ngx-workflow__input.disabled{background:#00000005;color:var(--ngx-workflow-text-secondary);cursor:not-allowed}\n"] }]
+        }], propDecorators: { node: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }] } });
+
+// Helper function to get a node from the array
+function getNode(id, nodes) {
+    return nodes.find(n => n.id === id);
+}
+// Helper function to determine handle position based on node and handle id/type
+function getHandleAbsolutePosition(node, handleId) {
+    const nodeWidth = node.width || 170;
+    const nodeHeight = node.height || 60;
+    let offsetX = 0;
+    let offsetY = 0;
+    switch (handleId) {
+        case 'top':
+            offsetX = nodeWidth / 2;
+            offsetY = 0;
+            break;
+        case 'right':
+            offsetX = nodeWidth;
+            offsetY = nodeHeight / 2;
+            break;
+        case 'bottom':
+            offsetX = nodeWidth / 2;
+            offsetY = nodeHeight;
+            break;
+        case 'left':
+            offsetX = 0;
+            offsetY = nodeHeight / 2;
+            break;
+        default: // Center of the node if no specific handle
+            offsetX = nodeWidth / 2;
+            offsetY = nodeHeight / 2;
+    }
+    return {
+        x: node.position.x + offsetX,
+        y: node.position.y + offsetY
+    };
+}
+class DiagramComponent {
+    el;
+    renderer;
+    ngZone;
+    cdRef;
+    diagramStateService;
+    nodeTypes;
+    // Trigger rebuild
+    svgRef;
+    // Input properties for declarative usage
+    initialNodes = [];
+    initialEdges = [];
+    initialViewport;
+    showZoomControls = true;
+    // Input for showing/hiding minimap
+    showMinimap = true;
+    // Input for background configuration
+    showBackground = true;
+    backgroundVariant = 'dots';
+    backgroundGap = 20;
+    backgroundSize = 1;
+    backgroundColor = '#81818a';
+    backgroundBgColor = '#f0f0f0';
+    // Output events
+    nodeClick = new EventEmitter();
+    edgeClick = new EventEmitter();
+    connect = new EventEmitter();
+    nodesChange = new EventEmitter();
+    edgesChange = new EventEmitter();
+    nodeDoubleClick = new EventEmitter();
+    // Sidebar State
+    selectedNodeForEditing = null;
+    viewport;
+    nodes;
+    viewNodes;
+    filteredNodes;
+    edges;
+    tempEdges;
+    alignmentGuides;
+    // Expose Math to the template
+    Math = Math;
+    _pathFinder = null;
+    pathCache = new Map();
+    dragAnimationFrameId = null;
+    unlistenPointerMove = null;
+    unlistenPointerUp = null;
+    unlistenPointerLeave = null;
+    pathPointsCache = new Map();
+    isPanning = false;
+    lastPanPosition = { x: 0, y: 0 };
+    subscriptions = new Subscription();
+    // Lasso selection properties
+    isSelecting = false;
+    selectionStart = { x: 0, y: 0 };
+    selectionEnd = { x: 0, y: 0 };
+    // Node Dragging
+    isDraggingNode = false;
+    draggingNode = null;
+    draggingNodes = []; // All nodes being dragged (for multi-select)
+    startNodePosition = { x: 0, y: 0 };
+    startNodePositions = new Map(); // Initial positions for multi-drag
+    startPointerPosition = { x: 0, y: 0 };
+    // Connection (Handle)
+    isConnecting = false;
+    currentPreviewEdgeId = null;
+    currentTargetHandle = null;
+    connectingSourceNodeId = null;
+    connectingSourceHandleId = undefined;
+    // Resizing
+    isResizing = false;
+    resizingNode = null;
+    resizeHandle = null;
+    startResizePosition = { x: 0, y: 0 };
+    startNodeDimensions = { width: 0, height: 0, x: 0, y: 0 };
+    // Edge Updating
+    isUpdatingEdge = false;
+    updatingEdge = null;
+    updatingEdgeHandle = null;
+    // Edge Label Editing
+    editingEdgeId = null;
+    updatePathFinder(nodes) {
+        this.pathCache.clear();
+        this.pathPointsCache.clear();
+        this._pathFinder = new PathFinder(nodes.map(n => ({
+            id: n.id,
+            x: n.position.x,
+            y: n.position.y,
+            width: n.width || this.defaultNodeWidth,
+            height: n.height || this.defaultNodeHeight
+        })));
+    }
+    onEdgeDoubleClick(event, edge) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.editingEdgeId = edge.id;
+    }
+    onNodeDoubleClick(event, node) {
+        console.log('Node double clicked:', node);
+        event.stopPropagation();
+        this.selectedNodeForEditing = node;
+        this.nodeDoubleClick.emit(node);
+        this.cdRef.detectChanges();
+    }
+    onDiagramDoubleClick(event) {
+        let target = event.target;
+        // If target is SVG (likely due to capture), find the actual element under cursor
+        if (target === this.svgRef.nativeElement || target.classList.contains('ngx-workflow__background')) {
+            const element = document.elementFromPoint(event.clientX, event.clientY);
+            if (element) {
+                target = element;
+            }
+        }
+        const nodeElement = target.closest('.ngx-workflow__node');
+        if (nodeElement) {
+            const nodeId = nodeElement.dataset['id'];
+            const node = this.nodes().find(n => n.id === nodeId);
+            if (node) {
+                this.onNodeDoubleClick(event, node);
+            }
+        }
+    }
+    closeSidebar() {
+        this.selectedNodeForEditing = null;
+    }
+    onPropertiesChange(changes) {
+        if (this.selectedNodeForEditing) {
+            this.diagramStateService.updateNode(this.selectedNodeForEditing.id, changes);
+            // Update local reference to keep sidebar in sync
+            this.selectedNodeForEditing = { ...this.selectedNodeForEditing, ...changes };
+        }
+    }
+    updateEdgeLabel(edge, newLabel) {
+        this.diagramStateService.updateEdge(edge.id, { label: newLabel });
+        this.editingEdgeId = null;
+    }
+    onEdgeLabelBlur() {
+        this.editingEdgeId = null;
+    }
+    // Default node dimensions
+    defaultNodeWidth = 170;
+    defaultNodeHeight = 60;
+    // Input for custom connection validation (optional)
+    connectionValidator;
+    // Input for node resizing (global toggle)
+    nodesResizable = true;
+    // Helper to check if a connection is allowed
+    isValidConnection(sourceId, targetId) {
+        // console.log('isValidConnection checking:', sourceId, targetId);
+        // Prevent duplicate edges between same source and target
+        const existing = this.edges().some(e => e.source === sourceId && e.target === targetId);
+        if (existing) {
+            // console.log('isValidConnection: existing edge found');
+            return false;
+        }
+        // Use custom validator if provided
+        if (this.connectionValidator) {
+            return this.connectionValidator(sourceId, targetId);
+        }
+        return true;
+    }
+    constructor(el, // Host element
+    renderer, ngZone, cdRef, diagramStateService, nodeTypes) {
+        this.el = el;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.cdRef = cdRef;
+        this.diagramStateService = diagramStateService;
+        this.nodeTypes = nodeTypes;
+        this.nodes$ = toObservable(this.diagramStateService.nodes);
+    }
+    get nodeTypeKeys() {
+        return this.nodeTypes ? Object.keys(this.nodeTypes) : [];
+    }
+    nodes$;
+    resizeObserver;
+    ngOnInit() {
+        this.diagramStateService.el = this.svgRef;
+        this.viewport = this.diagramStateService.viewport;
+        this.nodes = this.diagramStateService.nodes;
+        this.filteredNodes = this.diagramStateService.visibleNodes; // Use visibleNodes for rendering
+        this.edges = this.diagramStateService.edges;
+        this.tempEdges = this.diagramStateService.tempEdges;
+        this.alignmentGuides = this.diagramStateService.alignmentGuides;
+        if (this.initialNodes.length > 0) {
+            this.initialNodes.forEach(node => this.diagramStateService.addNode(node));
+        }
+        if (this.initialEdges.length > 0) {
+            // Add initial edges directly to the signal without triggering connect events
+            this.diagramStateService.edges.set([...this.initialEdges]);
+        }
+        if (this.initialViewport) {
+            this.diagramStateService.setViewport(this.initialViewport);
+        }
+        // Subscribe to state changes and emit events
+        this.subscriptions.add(this.diagramStateService.nodeClick.subscribe((node) => this.nodeClick.emit(node)));
+        this.subscriptions.add(this.diagramStateService.edgeClick.subscribe((edge) => this.edgeClick.emit(edge)));
+        this.subscriptions.add(this.diagramStateService.connect.subscribe((connection) => this.connect.emit(connection)));
+        this.subscriptions.add(this.nodes$.subscribe(nodes => {
+            this.nodes.set(nodes);
+            if (!this.isDraggingNode) {
+                this.updatePathFinder(nodes);
+                this.nodesChange.emit(nodes);
+            }
+        }));
+        this.subscriptions.add(this.diagramStateService.edgesChange.subscribe((edges) => this.edgesChange.emit(edges)));
+        // Initialize ResizeObserver
+        this.resizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                const { width, height } = entry.contentRect;
+                this.diagramStateService.setContainerDimensions({ width, height });
+            }
+        });
+        // We need to observe the container, but we only have el (host) or svgRef.
+        // Let's observe the host element.
+        this.resizeObserver.observe(this.el.nativeElement);
+        this.ngZone.runOutsideAngular(() => {
+            this.unlistenPointerMove = this.renderer.listen(this.svgRef.nativeElement, 'pointermove', (event) => {
+                this.onPointerMove(event);
+            });
+            this.unlistenPointerUp = this.renderer.listen(this.svgRef.nativeElement, 'pointerup', (event) => {
+                this.onPointerUp(event);
+            });
+            this.unlistenPointerLeave = this.renderer.listen(this.svgRef.nativeElement, 'pointerleave', (event) => {
+                this.onPointerLeave(event);
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.unlistenPointerMove)
+            this.unlistenPointerMove();
+        if (this.unlistenPointerUp)
+            this.unlistenPointerUp();
+        if (this.unlistenPointerLeave)
+            this.unlistenPointerLeave();
+    }
+    get lodLevel() {
+        return this.diagramStateService.lodLevel();
+    }
+    ngOnChanges(changes) {
+        // Handle changes to input properties after initialization
+        if (changes['initialNodes'] && !changes['initialNodes'].firstChange) {
+            if (this.isDraggingNode || this.draggingNode) {
+                return;
+            }
+            const currentNodes = this.nodes();
+            if (this.initialNodes === currentNodes) {
+                return;
+            }
+            const currentNodeIds = new Set(currentNodes.map(n => n.id));
+            const newNodeIds = new Set(this.initialNodes.map(n => n.id));
+            currentNodes.forEach(node => {
+                if (!newNodeIds.has(node.id)) {
+                    this.diagramStateService.removeNode(node.id);
+                }
+            });
+            this.initialNodes.forEach(node => {
+                if (!currentNodeIds.has(node.id)) {
+                    this.diagramStateService.addNode(node);
+                }
+                else {
+                    const currentNode = currentNodes.find(n => n.id === node.id);
+                    if (currentNode && JSON.stringify(currentNode) !== JSON.stringify(node)) {
+                        this.diagramStateService.updateNode(node.id, node);
+                    }
+                }
+            });
+        }
+        if (changes['initialEdges'] && !changes['initialEdges'].firstChange) {
+            const currentEdges = this.edges();
+            if (this.initialEdges === currentEdges)
+                return;
+            if (JSON.stringify(this.initialEdges) !== JSON.stringify(currentEdges)) {
+                this.diagramStateService.edges.set([...this.initialEdges]);
+            }
+        }
+        if (changes['initialViewport'] && !changes['initialViewport'].firstChange && this.initialViewport) {
+            const currentViewport = this.viewport();
+            if (JSON.stringify(this.initialViewport) !== JSON.stringify(currentViewport)) {
+                this.diagramStateService.setViewport(this.initialViewport);
+            }
+        }
+    }
+    get transform() {
+        const v = this.viewport();
+        return `translate(${v.x}, ${v.y}) scale(${v.zoom})`;
+    }
+    trackByNodeId(index, node) {
+        return node.id;
+    }
+    trackByEdgeId(index, edge) {
+        return edge.id;
+    }
+    onDeleteKeyPress(event) {
+        this.diagramStateService.deleteSelectedElements();
+    }
+    onUndoKeyPress(event) {
+        event.preventDefault(); // Prevent browser undo
+        this.diagramStateService.undo();
+    }
+    onRedoKeyPress(event) {
+        event.preventDefault(); // Prevent browser redo
+        this.diagramStateService.redo();
+    }
+    onCopyKeyPress(event) {
+        // Don't prevent default if user is typing in an input
+        if (this.isInputActive(event))
+            return;
+        this.diagramStateService.copy();
+    }
+    onPasteKeyPress(event) {
+        if (this.isInputActive(event))
+            return;
+        this.diagramStateService.paste();
+    }
+    onCutKeyPress(event) {
+        if (this.isInputActive(event))
+            return;
+        this.diagramStateService.cut();
+    }
+    onDuplicateKeyPress(event) {
+        if (this.isInputActive(event))
+            return;
+        event.preventDefault(); // Prevent browser bookmark
+        this.diagramStateService.duplicate();
+    }
+    onGroupKeyPress(event) {
+        if (this.isInputActive(event))
+            return;
+        event.preventDefault(); // Prevent browser find
+        const selectedNodes = this.diagramStateService.selectedNodes();
+        if (selectedNodes.length > 1) {
+            this.diagramStateService.groupNodes(selectedNodes.map(n => n.id));
+        }
+    }
+    onUngroupKeyPress(event) {
+        if (this.isInputActive(event))
+            return;
+        event.preventDefault();
+        const selectedNodes = this.diagramStateService.selectedNodes();
+        if (selectedNodes.length === 1 && selectedNodes[0].type === 'group') {
+            this.diagramStateService.ungroupNodes(selectedNodes[0].id);
+        }
+    }
+    toggleGroup(event, node) {
+        event.stopPropagation();
+        this.diagramStateService.toggleGroup(node.id);
+    }
+    isInputActive(event) {
+        const target = event.target;
+        return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
+    }
+    onWheel(event) {
+        event.preventDefault();
+        this.ngZone.runOutsideAngular(() => {
+            const svgRect = this.svgRef.nativeElement.getBoundingClientRect();
+            const clientX = event.clientX;
+            const clientY = event.clientY;
+            const viewportBefore = this.viewport();
+            const pointX = (clientX - svgRect.left - viewportBefore.x) / viewportBefore.zoom;
+            const pointY = (clientY - svgRect.top - viewportBefore.y) / viewportBefore.zoom;
+            const scaleFactor = 1.05;
+            const newZoom = event.deltaY < 0 ? viewportBefore.zoom * scaleFactor : viewportBefore.zoom / scaleFactor;
+            const clampedZoom = Math.max(0.1, Math.min(10, newZoom));
+            const newX = clientX - svgRect.left - pointX * clampedZoom;
+            const newY = clientY - svgRect.top - pointY * clampedZoom;
+            this.diagramStateService.setViewport({ x: newX, y: newY, zoom: clampedZoom });
+        });
+    }
+    onPointerDown(event) {
+        let targetElement = event.target;
+        // Check for resize handle first (highest priority)
+        const resizeHandleElement = targetElement.closest('.ngx-workflow__resize-handle');
+        if (resizeHandleElement) {
+            const nodeElement = resizeHandleElement.closest('.ngx-workflow__node');
+            if (nodeElement) {
+                const nodeId = nodeElement.dataset['id'];
+                const node = this.nodes().find(n => n.id === nodeId);
+                const handle = resizeHandleElement.dataset['handle'];
+                if (node && handle && (node.resizable !== false) && this.nodesResizable) {
+                    this.startResizing(event, node, handle);
+                    return;
+                }
+            }
+        }
+        let handleElement = targetElement.closest('.ngx-workflow__handle');
+        const nodeElement = targetElement.closest('.ngx-workflow__node');
+        if (event.button !== 0)
+            return;
+        if (handleElement && handleElement.dataset['type'] === 'source') {
+            // Start Connecting
+            this.startConnecting(event, handleElement);
+        }
+        else if (nodeElement) {
+            // Start Dragging Node
+            const nodeId = nodeElement.dataset['id'];
+            const node = this.nodes().find(n => n.id === nodeId);
+            if (node && node.draggable) {
+                this.startDraggingNode(event, node);
+            }
+            // Select Node
+            if (node) {
+                this.diagramStateService.onNodeClick(node);
+                this.diagramStateService.selectNodes([node.id], event.ctrlKey || event.metaKey || event.shiftKey);
+            }
+        }
+        else {
+            // Pan or Select
+            const isClickingOnCanvas = targetElement === this.svgRef.nativeElement || targetElement.classList.contains('ngx-workflow__background');
+            if (isClickingOnCanvas) {
+                if (event.shiftKey) {
+                    this.startSelecting(event);
+                }
+                else {
+                    this.startPanning(event);
+                }
+            }
+        }
+    }
+    onPointerMove(event) {
+        // console.log('onPointerMove', { dragging: this.isDraggingNode, connecting: this.isConnecting, resizing: this.isResizing });
+        if (this.isResizing) {
+            this.resize(event);
+        }
+        else if (this.isUpdatingEdge) {
+            this.updateEdge(event);
+        }
+        else if (this.isConnecting) {
+            this.updateConnection(event);
+        }
+        else if (this.isDraggingNode) {
+            this.dragNode(event);
+        }
+        else if (this.isPanning) {
+            this.pan(event);
+        }
+        else if (this.isSelecting) {
+            this.updateSelection(event);
+        }
+    }
+    onPointerUp(event) {
+        if (this.isResizing) {
+            this.stopResizing(event);
+        }
+        else if (this.isUpdatingEdge) {
+            this.stopUpdatingEdge(event);
+        }
+        else if (this.isConnecting) {
+            this.finishConnecting(event);
+        }
+        else if (this.isDraggingNode) {
+            this.stopDraggingNode(event);
+        }
+        else if (this.isPanning) {
+            this.stopPanning(event);
+        }
+        else if (this.isSelecting) {
+            this.stopSelecting(event);
+        }
+    }
+    onPointerLeave(event) {
+        if (this.isResizing || this.isUpdatingEdge || this.isPanning || this.isSelecting || this.isDraggingNode || this.isConnecting) {
+            this.onPointerUp(event);
+        }
+    }
+    // --- Connecting Logic ---
+    startConnecting(event, handleElement) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.isConnecting = true;
+        this.svgRef.nativeElement.setPointerCapture(event.pointerId);
+        const nodeId = handleElement.dataset['nodeid'];
+        const handleId = handleElement.dataset['handleid'];
+        if (!nodeId)
+            return;
+        this.connectingSourceNodeId = nodeId;
+        this.connectingSourceHandleId = handleId;
+        const previewEdgeId = `preview-${v4()}`;
+        this.currentPreviewEdgeId = previewEdgeId;
+        const viewport = this.viewport();
+        const diagramSvgEl = this.svgRef.nativeElement;
+        const handleScreenCoords = handleElement.getBoundingClientRect();
+        const diagramScreenCoords = diagramSvgEl.getBoundingClientRect();
+        const sourceX = (handleScreenCoords.x + handleScreenCoords.width / 2 - diagramScreenCoords.x - viewport.x) / viewport.zoom;
+        const sourceY = (handleScreenCoords.y + handleScreenCoords.height / 2 - diagramScreenCoords.y - viewport.y) / viewport.zoom;
+        const newTempEdge = {
+            id: previewEdgeId,
+            source: nodeId,
+            sourceHandle: handleId,
+            target: 'preview-target',
+            targetHandle: undefined,
+            type: 'straight',
+            animated: true,
+            style: { stroke: 'blue', strokeWidth: '2' },
+            sourceX: sourceX,
+            sourceY: sourceY,
+            targetX: sourceX,
+            targetY: sourceY,
+        };
+        this.diagramStateService.addTempEdge(newTempEdge);
+    }
+    updateConnection(event) {
+        if (!this.currentPreviewEdgeId)
+            return;
+        this.ngZone.runOutsideAngular(() => {
+            const diagramSvgEl = this.svgRef.nativeElement;
+            const diagramScreenCoords = diagramSvgEl.getBoundingClientRect();
+            const viewport = this.viewport();
+            const currentPointerX = (event.clientX - diagramScreenCoords.x - viewport.x) / viewport.zoom;
+            const currentPointerY = (event.clientY - diagramScreenCoords.y - viewport.y) / viewport.zoom;
+            this.diagramStateService.updateTempEdgeTarget(this.currentPreviewEdgeId, { x: currentPointerX, y: currentPointerY });
+            // Use geometric distance check instead of elementFromPoint to avoid pointer capture issues
+            let closestHandle = null;
+            let minDistance = 20; // Detection radius
+            const nodes = this.nodes();
+            for (const node of nodes) {
+                const handles = ['top', 'right', 'bottom', 'left'];
+                for (const handleId of handles) {
+                    const handlePos = getHandleAbsolutePosition(node, handleId);
+                    const dist = Math.hypot(handlePos.x - currentPointerX, handlePos.y - currentPointerY);
+                    if (dist < minDistance) {
+                        minDistance = dist;
+                        closestHandle = { nodeId: node.id, handleId: handleId };
+                    }
+                }
+            }
+            this.clearTargetHandleHighlight();
+            if (closestHandle) {
+                const targetNodeId = closestHandle.nodeId;
+                const targetHandleId = closestHandle.handleId;
+                // Allow connecting to any handle on a different node OR same node (self-loop)
+                // console.log('updateConnection: handle found', targetNodeId, this.connectingSourceNodeId);
+                if (targetNodeId && this.isValidConnection(this.connectingSourceNodeId, targetNodeId)) {
+                    this.currentTargetHandle = { nodeId: targetNodeId, handleId: targetHandleId, type: 'target' };
+                    // We need to find the handle element to highlight it
+                    // This is a bit expensive but necessary for visual feedback
+                    const handleEl = this.el.nativeElement.querySelector(`.ngx-workflow__handle[data-nodeid="${targetNodeId}"][data-handleid="${targetHandleId}"]`);
+                    if (handleEl) {
+                        this.renderer.addClass(handleEl, 'ngx-workflow__handle--valid-target');
+                    }
+                }
+                else {
+                    this.currentTargetHandle = null;
+                }
+            }
+            else {
+                this.currentTargetHandle = null;
+            }
+        });
+    }
+    finishConnecting(event) {
+        console.log('finishConnecting: start');
+        event.stopPropagation();
+        event.preventDefault();
+        this.isConnecting = false;
+        this.svgRef.nativeElement.releasePointerCapture(event.pointerId);
+        this.clearTargetHandleHighlight();
+        if (this.currentPreviewEdgeId) {
+            console.log('finishConnecting: removing preview edge');
+            this.diagramStateService.removeEdge(this.currentPreviewEdgeId);
+        }
+        if (this.currentTargetHandle && this.connectingSourceNodeId) {
+            const sourceId = this.connectingSourceNodeId;
+            const targetId = this.currentTargetHandle.nodeId;
+            console.log('finishConnecting: attempting connection', { sourceId, targetId });
+            if (this.isValidConnection(sourceId, targetId)) {
+                const newEdge = {
+                    id: v4(),
+                    source: sourceId,
+                    sourceHandle: this.connectingSourceHandleId,
+                    target: targetId,
+                    targetHandle: this.currentTargetHandle.handleId,
+                    // type: 'bezier', // Removed to use default smart routing
+                };
+                console.log('finishConnecting: adding edge', newEdge);
+                this.diagramStateService.addEdge(newEdge);
+            }
+            else {
+                console.log('finishConnecting: invalid connection');
+                // Visual feedback for invalid connection: flash source node
+                const sourceNodeEl = this.el.nativeElement.querySelector(`[data-nodeid="${sourceId}"]`);
+                if (sourceNodeEl) {
+                    this.renderer.addClass(sourceNodeEl, 'invalid-connection');
+                    setTimeout(() => this.renderer.removeClass(sourceNodeEl, 'invalid-connection'), 1000);
+                }
+            }
+        }
+        this.currentPreviewEdgeId = null;
+        this.currentTargetHandle = null;
+        this.connectingSourceNodeId = null;
+        this.connectingSourceHandleId = undefined;
+        console.log('finishConnecting: end');
+    }
+    clearTargetHandleHighlight() {
+        const activeHighlights = document.querySelectorAll('.ngx-workflow__handle--valid-target');
+        activeHighlights.forEach(el => this.renderer.removeClass(el, 'ngx-workflow__handle--valid-target'));
+    }
+    // --- Dragging Logic ---
+    startDraggingNode(event, node) {
+        event.stopPropagation();
+        this.isDraggingNode = true;
+        this.draggingNode = node;
+        this.startNodePosition = { x: node.position.x, y: node.position.y };
+        this.startPointerPosition = { x: event.clientX, y: event.clientY };
+        this.svgRef.nativeElement.setPointerCapture(event.pointerId);
+        // Check if this node is part of a multi-selection
+        const selectedNodes = this.nodes().filter(n => n.selected);
+        if (selectedNodes.length > 1 && node.selected) {
+            // Multi-node drag: store all selected nodes and their positions
+            this.draggingNodes = selectedNodes;
+            this.startNodePositions.clear();
+            selectedNodes.forEach(n => {
+                this.startNodePositions.set(n.id, { x: n.position.x, y: n.position.y });
+            });
+        }
+        else {
+            // Single node drag
+            this.draggingNodes = [node];
+            this.startNodePositions.clear();
+            this.startNodePositions.set(node.id, { x: node.position.x, y: node.position.y });
+        }
+        this.diagramStateService.onDragStart(node);
+        console.log('startDraggingNode: started for', node.id);
+    }
+    dragNode(event) {
+        if (!this.draggingNode)
+            return;
+        event.stopPropagation();
+        if (this.dragAnimationFrameId) {
+            cancelAnimationFrame(this.dragAnimationFrameId);
+        }
+        this.dragAnimationFrameId = requestAnimationFrame(() => {
+            if (!this.draggingNode)
+                return;
+            const zoom = this.viewport().zoom;
+            const deltaX = (event.clientX - this.startPointerPosition.x) / zoom;
+            const deltaY = (event.clientY - this.startPointerPosition.y) / zoom;
+            if (this.draggingNodes.length > 1) {
+                // Multi-node drag: move all selected nodes by the same delta
+                const moves = this.draggingNodes.map(node => {
+                    const startPos = this.startNodePositions.get(node.id);
+                    return {
+                        id: node.id,
+                        position: {
+                            x: startPos.x + deltaX,
+                            y: startPos.y + deltaY
+                        }
+                    };
+                });
+                this.diagramStateService.moveNodes(moves);
+            }
+            else {
+                // Single node drag
+                const newPosition = {
+                    x: this.startNodePosition.x + deltaX,
+                    y: this.startNodePosition.y + deltaY,
+                };
+                this.diagramStateService.moveNode(this.draggingNode.id, newPosition);
+            }
+            this.cdRef.detectChanges();
+            this.dragAnimationFrameId = null;
+        });
+    }
+    stopDraggingNode(event) {
+        if (!this.draggingNode)
+            return;
+        event.stopPropagation();
+        this.isDraggingNode = false;
+        this.updatePathFinder(this.nodes());
+        if (this.dragAnimationFrameId) {
+            cancelAnimationFrame(this.dragAnimationFrameId);
+            this.dragAnimationFrameId = null;
+        }
+        this.svgRef.nativeElement.releasePointerCapture(event.pointerId);
+        // Trigger onDragEnd for all dragged nodes
+        this.draggingNodes.forEach(node => {
+            this.diagramStateService.onDragEnd(node);
+        });
+        console.log('stopDraggingNode: stopped');
+        this.draggingNode = null;
+        this.draggingNodes = [];
+        this.startNodePositions.clear();
+        // Emit the final state after drag is complete
+        this.nodesChange.emit(this.nodes());
+    }
+    // --- Resizing Logic ---
+    startResizing(event, node, handle) {
+        event.stopPropagation();
+        this.isResizing = true;
+        this.resizingNode = node;
+        this.resizeHandle = handle;
+        this.startResizePosition = { x: event.clientX, y: event.clientY };
+        this.startNodeDimensions = {
+            width: node.width || this.defaultNodeWidth,
+            height: node.height || this.defaultNodeHeight,
+            x: node.position.x,
+            y: node.position.y
+        };
+        this.svgRef.nativeElement.setPointerCapture(event.pointerId);
+        this.diagramStateService.onResizeStart(node);
+    }
+    resize(event) {
+        if (!this.resizingNode || !this.resizeHandle)
+            return;
+        event.stopPropagation();
+        const resizingNode = this.resizingNode;
+        const resizeHandle = this.resizeHandle;
+        this.ngZone.runOutsideAngular(() => {
+            const zoom = this.viewport().zoom;
+            const deltaX = (event.clientX - this.startResizePosition.x) / zoom;
+            const deltaY = (event.clientY - this.startResizePosition.y) / zoom;
+            let newWidth = this.startNodeDimensions.width;
+            let newHeight = this.startNodeDimensions.height;
+            let newX = this.startNodeDimensions.x;
+            let newY = this.startNodeDimensions.y;
+            // Calculate new dimensions based on handle
+            switch (resizeHandle) {
+                case 'se': // Southeast - resize from bottom-right
+                    newWidth = this.startNodeDimensions.width + deltaX;
+                    newHeight = this.startNodeDimensions.height + deltaY;
+                    break;
+                case 'sw': // Southwest - resize from bottom-left
+                    newWidth = this.startNodeDimensions.width - deltaX;
+                    newHeight = this.startNodeDimensions.height + deltaY;
+                    newX = this.startNodeDimensions.x + deltaX;
+                    break;
+                case 'ne': // Northeast - resize from top-right
+                    newWidth = this.startNodeDimensions.width + deltaX;
+                    newHeight = this.startNodeDimensions.height - deltaY;
+                    newY = this.startNodeDimensions.y + deltaY;
+                    break;
+                case 'nw': // Northwest - resize from top-left
+                    newWidth = this.startNodeDimensions.width - deltaX;
+                    newHeight = this.startNodeDimensions.height - deltaY;
+                    newX = this.startNodeDimensions.x + deltaX;
+                    newY = this.startNodeDimensions.y + deltaY;
+                    break;
+            }
+            // Apply constraints
+            const minWidth = resizingNode.minWidth || 50;
+            const minHeight = resizingNode.minHeight || 30;
+            const maxWidth = resizingNode.maxWidth || 500;
+            const maxHeight = resizingNode.maxHeight || 500;
+            newWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
+            newHeight = Math.max(minHeight, Math.min(maxHeight, newHeight));
+            // Adjust position if constrained (for nw, ne, sw handles)
+            if (resizeHandle === 'nw' || resizeHandle === 'sw') {
+                const widthDiff = newWidth - (this.startNodeDimensions.width - deltaX);
+                newX = this.startNodeDimensions.x + deltaX - widthDiff;
+            }
+            if (resizeHandle === 'nw' || resizeHandle === 'ne') {
+                const heightDiff = newHeight - (this.startNodeDimensions.height - deltaY);
+                newY = this.startNodeDimensions.y + deltaY - heightDiff;
+            }
+            // Update node
+            this.diagramStateService.resizeNode(resizingNode.id, newWidth, newHeight, { x: newX, y: newY });
+        });
+    }
+    stopResizing(event) {
+        if (!this.resizingNode)
+            return;
+        event.stopPropagation();
+        this.isResizing = false;
+        this.svgRef.nativeElement.releasePointerCapture(event.pointerId);
+        this.diagramStateService.onResizeEnd(this.resizingNode);
+        this.resizingNode = null;
+        this.resizeHandle = null;
+    }
+    // --- Edge Updating Logic ---
+    startUpdatingEdge(event, edge, handleType) {
+        event.stopPropagation();
+        this.isUpdatingEdge = true;
+        this.updatingEdge = edge;
+        this.updatingEdgeHandle = handleType;
+        this.svgRef.nativeElement.setPointerCapture(event.pointerId);
+        const tempEdgeId = `temp-update-${edge.id}`;
+        this.currentPreviewEdgeId = tempEdgeId;
+        const sourceNode = this.nodes().find(n => n.id === edge.source);
+        const targetNode = this.nodes().find(n => n.id === edge.target);
+        if (!sourceNode || !targetNode)
+            return;
+        const sourcePos = getHandleAbsolutePosition(sourceNode, edge.sourceHandle);
+        const targetPos = getHandleAbsolutePosition(targetNode, edge.targetHandle);
+        let startX, startY, endX, endY;
+        if (handleType === 'source') {
+            startX = targetPos.x;
+            startY = targetPos.y;
+            endX = sourcePos.x;
+            endY = sourcePos.y;
+        }
+        else {
+            startX = sourcePos.x;
+            startY = sourcePos.y;
+            endX = targetPos.x;
+            endY = targetPos.y;
+        }
+        this.diagramStateService.addTempEdge({
+            id: tempEdgeId,
+            source: edge.source,
+            sourceHandle: edge.sourceHandle,
+            target: edge.target,
+            targetHandle: edge.targetHandle,
+            type: edge.type || 'bezier',
+            animated: edge.animated,
+            sourceX: startX,
+            sourceY: startY,
+            targetX: endX,
+            targetY: endY,
+            style: edge.style,
+            markerEnd: edge.markerEnd
+        });
+    }
+    updateEdge(event) {
+        if (!this.updatingEdge || !this.currentPreviewEdgeId)
+            return;
+        event.stopPropagation();
+        this.ngZone.runOutsideAngular(() => {
+            const diagramRect = this.svgRef.nativeElement.getBoundingClientRect();
+            const viewport = this.viewport();
+            const point = {
+                x: (event.clientX - diagramRect.left - viewport.x) / viewport.zoom,
+                y: (event.clientY - diagramRect.top - viewport.y) / viewport.zoom
+            };
+            this.diagramStateService.updateTempEdgeTarget(this.currentPreviewEdgeId, point);
+            const element = document.elementFromPoint(event.clientX, event.clientY);
+            const handle = element?.closest('.ngx-workflow__handle');
+            if (handle) {
+                const nodeId = handle.getAttribute('data-nodeid');
+                const handleId = handle.getAttribute('data-handleid');
+                const type = handle.getAttribute('data-type');
+                if (nodeId && type) {
+                    this.currentTargetHandle = { nodeId, handleId: handleId || undefined, type: type };
+                }
+            }
+            else {
+                this.currentTargetHandle = null;
+            }
+        });
+    }
+    stopUpdatingEdge(event) {
+        if (!this.updatingEdge)
+            return;
+        event.stopPropagation();
+        this.isUpdatingEdge = false;
+        this.svgRef.nativeElement.releasePointerCapture(event.pointerId);
+        if (this.currentPreviewEdgeId) {
+            this.diagramStateService.removeEdge(this.currentPreviewEdgeId);
+            this.currentPreviewEdgeId = null;
+        }
+    }
+    // --- Panning Logic ---
+    startPanning(event) {
+        this.isPanning = true;
+        this.lastPanPosition = { x: event.clientX, y: event.clientY };
+        this.renderer.setStyle(this.svgRef.nativeElement, 'cursor', 'grabbing');
+        this.svgRef.nativeElement.setPointerCapture(event.pointerId);
+        this.diagramStateService.clearSelection();
+    }
+    pan(event) {
+        this.ngZone.runOutsideAngular(() => {
+            const deltaX = event.clientX - this.lastPanPosition.x;
+            const deltaY = event.clientY - this.lastPanPosition.y;
+            const currentViewport = this.viewport();
+            this.diagramStateService.setViewport({
+                x: currentViewport.x + deltaX,
+                y: currentViewport.y + deltaY,
+                zoom: currentViewport.zoom,
+            });
+            this.lastPanPosition = { x: event.clientX, y: event.clientY };
+        });
+    }
+    stopPanning(event) {
+        this.isPanning = false;
+        this.renderer.setStyle(this.svgRef.nativeElement, 'cursor', 'grab');
+        this.svgRef.nativeElement.releasePointerCapture(event.pointerId);
+    }
+    // --- Selection Logic ---
+    startSelecting(event) {
+        this.isSelecting = true;
+        this.selectionStart = this.getDiagramCoordinates(event.clientX, event.clientY);
+        this.selectionEnd = { ...this.selectionStart };
+        this.svgRef.nativeElement.setPointerCapture(event.pointerId);
+    }
+    updateSelection(event) {
+        this.ngZone.runOutsideAngular(() => {
+            this.selectionEnd = this.getDiagramCoordinates(event.clientX, event.clientY);
+        });
+    }
+    stopSelecting(event) {
+        this.isSelecting = false;
+        this.svgRef.nativeElement.releasePointerCapture(event.pointerId);
+        this.performLassoSelection();
+    }
+    getDiagramCoordinates(clientX, clientY) {
+        const svgRect = this.svgRef.nativeElement.getBoundingClientRect();
+        const viewport = this.viewport();
+        const x = (clientX - svgRect.left - viewport.x) / viewport.zoom;
+        const y = (clientY - svgRect.top - viewport.y) / viewport.zoom;
+        return { x, y };
+    }
+    performLassoSelection() {
+        const minX = Math.min(this.selectionStart.x, this.selectionEnd.x);
+        const maxX = Math.max(this.selectionStart.x, this.selectionEnd.x);
+        const minY = Math.min(this.selectionStart.y, this.selectionEnd.y);
+        const maxY = Math.max(this.selectionStart.y, this.selectionEnd.y);
+        const selectedNodeIds = [];
+        this.nodes().forEach((node) => {
+            const nodeX = node.position.x;
+            const nodeY = node.position.y;
+            const nodeWidth = node.width || this.defaultNodeWidth;
+            const nodeHeight = node.height || this.defaultNodeHeight;
+            if (nodeX < maxX &&
+                nodeX + nodeWidth > minX &&
+                nodeY < maxY &&
+                nodeY + nodeHeight > minY) {
+                selectedNodeIds.push(node.id);
+            }
+        });
+        this.diagramStateService.clearSelection();
+        this.diagramStateService.selectNodes(selectedNodeIds, false);
+    }
+    // --- Edge Logic ---
+    getEdgePath(edge, isTemporary = false) {
+        const nodes = this.nodes();
+        let sourcePos;
+        let targetPos;
+        if (isTemporary && 'sourceX' in edge && 'sourceY' in edge && 'targetX' in edge && 'targetY' in edge) {
+            sourcePos = { x: edge.sourceX, y: edge.sourceY };
+            targetPos = { x: edge.targetX, y: edge.targetY };
+        }
+        else {
+            const sourceNode = getNode(edge.source, nodes);
+            const targetNode = getNode(edge.target, nodes);
+            if (!sourceNode || !targetNode) {
+                return 'M 0 0';
+            }
+            sourcePos = getHandleAbsolutePosition(sourceNode, edge.sourceHandle);
+            targetPos = getHandleAbsolutePosition(targetNode, edge.targetHandle);
+            if (sourceNode.id === targetNode.id) {
+                return getSelfLoopPath(sourcePos, edge.sourceHandle);
+            }
+        }
+        // Use smart routing if type is 'smart' or not specified (default)
+        // But respect explicit 'straight' type if user wants simple straight line
+        if ((edge.type === 'smart' || !edge.type) && !isTemporary) {
+            const cacheKey = `${edge.id}-${sourcePos.x},${sourcePos.y}-${targetPos.x},${targetPos.y}`;
+            if (this.pathCache.has(cacheKey)) {
+                return this.pathCache.get(cacheKey);
+            }
+            try {
+                if (!this._pathFinder) {
+                    this.updatePathFinder(this.nodes());
+                }
+                const path = this._pathFinder.findPath(sourcePos, targetPos);
+                const d = getSmartEdgePath(path);
+                this.pathCache.set(cacheKey, d);
+                return d;
+            }
+            catch (e) {
+                console.warn('Pathfinding failed, falling back to straight path', e);
+                return getStraightPath(sourcePos, targetPos);
+            }
+        }
+        switch (edge.type) {
+            case 'bezier': return getBezierPath(sourcePos, targetPos);
+            case 'step': return getStepPath(sourcePos, targetPos);
+            case 'straight': return getStraightPath(sourcePos, targetPos);
+            default: return getStraightPath(sourcePos, targetPos);
+        }
+    }
+    getMarkerUrl(marker) {
+        if (!marker)
+            return null;
+        // Support built-in markers or custom marker IDs
+        if (marker === 'arrow' || marker === 'arrowclosed' || marker === 'dot') {
+            return `url(#ngx-workflow__${marker})`;
+        }
+        return `url(#${marker})`;
+    }
+    getEdgeLabelPosition(edge) {
+        const nodes = this.nodes();
+        const sourceNode = getNode(edge.source, nodes);
+        const targetNode = getNode(edge.target, nodes);
+        if (!sourceNode || !targetNode) {
+            return { x: 0, y: 0 };
+        }
+        const sourcePos = getHandleAbsolutePosition(sourceNode, edge.sourceHandle);
+        const targetPos = getHandleAbsolutePosition(targetNode, edge.targetHandle);
+        if (edge.type === 'smart' || !edge.type) {
+            try {
+                // For label position, we can re-use the cached path if available, 
+                // but we need the points, not the string. 
+                // For now, let's just re-calculate or maybe cache points too?
+                // Re-calculating for label might be okay if getEdgePath is cached, 
+                // but ideally we cache the points.
+                // Let's optimize this later if needed, or cache points instead of string.
+                // Optimization: Cache points instead of string
+                const cacheKey = `${edge.id}-${sourcePos.x},${sourcePos.y}-${targetPos.x},${targetPos.y}-points`;
+                let path;
+                if (this.pathPointsCache.has(cacheKey)) {
+                    path = this.pathPointsCache.get(cacheKey);
+                }
+                else {
+                    if (!this._pathFinder) {
+                        this.updatePathFinder(this.nodes());
+                    }
+                    path = this._pathFinder.findPath(sourcePos, targetPos);
+                    this.pathPointsCache.set(cacheKey, path);
+                }
+                return getPolylineMidpoint(path);
+            }
+            catch (e) {
+                console.warn('Pathfinding failed for label position', e);
+            }
+        }
+        // Return midpoint of the edge
+        return {
+            x: (sourcePos.x + targetPos.x) / 2,
+            y: (sourcePos.y + targetPos.y) / 2
+        };
+    }
+    onEdgeClick(event, edge) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.diagramStateService.onEdgeClick(edge);
+        const isMultiSelect = event.ctrlKey || event.metaKey || event.shiftKey;
+        // Clear node selection when selecting edges
+        this.diagramStateService.nodes.update(nodes => nodes.map(n => ({ ...n, selected: false })));
+        // Toggle edge selection
+        this.diagramStateService.edges.update(edges => edges.map(e => ({
+            ...e,
+            selected: e.id === edge.id
+                ? !e.selected
+                : (isMultiSelect ? e.selected : false)
+        })));
+    }
+    // --- Node Logic ---
+    getCustomNodeComponent(type) {
+        if (type && this.nodeTypes && this.nodeTypes[type]) {
+            return this.nodeTypes[type];
+        }
+        return null;
+    }
+    zoomIn() {
+        const currentViewport = this.viewport();
+        const newZoom = Math.min(currentViewport.zoom * 1.2, 10);
+        this.diagramStateService.setViewport({
+            ...currentViewport,
+            zoom: newZoom
+        });
+    }
+    zoomOut() {
+        const currentViewport = this.viewport();
+        const newZoom = Math.max(currentViewport.zoom / 1.2, 0.1);
+        this.diagramStateService.setViewport({
+            ...currentViewport,
+            zoom: newZoom
+        });
+    }
+    resetZoom() {
+        const currentViewport = this.viewport();
+        this.diagramStateService.setViewport({
+            ...currentViewport,
+            zoom: 1
+        });
+    }
+    fitView() {
+        const nodes = this.nodes();
+        if (nodes.length === 0)
+            return;
+        // Calculate bounds of all nodes
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        nodes.forEach(node => {
+            const width = node.width || this.defaultNodeWidth;
+            const height = node.height || this.defaultNodeHeight;
+            minX = Math.min(minX, node.position.x);
+            minY = Math.min(minY, node.position.y);
+            maxX = Math.max(maxX, node.position.x + width);
+            maxY = Math.max(maxY, node.position.y + height);
+        });
+        const boundsWidth = maxX - minX;
+        const boundsHeight = maxY - minY;
+        // Get SVG dimensions
+        const svgRect = this.svgRef.nativeElement.getBoundingClientRect();
+        const padding = 50; // Padding around nodes
+        // Calculate zoom to fit
+        const zoomX = (svgRect.width - padding * 2) / boundsWidth;
+        const zoomY = (svgRect.height - padding * 2) / boundsHeight;
+        const zoom = Math.min(zoomX, zoomY, 2); // Max zoom of 2x for fit view
+        // Calculate center position
+        const x = (svgRect.width - boundsWidth * zoom) / 2 - minX * zoom;
+        const y = (svgRect.height - boundsHeight * zoom) / 2 - minY * zoom;
+        this.diagramStateService.setViewport({ x, y, zoom });
+    }
+    /**
+     * Returns the current state of the diagram (nodes, edges, viewport).
+     */
+    getDiagramState() {
+        return this.diagramStateService.getDiagramState();
+    }
+    /**
+     * Sets the state of the diagram.
+     */
+    setDiagramState(state) {
+        this.diagramStateService.setDiagramState(state);
+    }
+    /**
+     * Exports the diagram as an SVG file.
+     * @param fileName The name of the file to download (default: 'diagram.svg')
+     * @param download Whether to trigger a download (default: true)
+     * @returns The SVG string
+     */
+    exportToSVG(fileName = 'diagram.svg', download = true) {
+        const svgElement = this.svgRef.nativeElement;
+        // Clone the SVG to avoid modifying the live diagram
+        const clone = svgElement.cloneNode(true);
+        // Get the bounding box of the content (nodes and edges)
+        // We need to calculate this manually because getBBox() on the clone won't work if it's not in the DOM
+        const nodes = this.nodes();
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        if (nodes.length > 0) {
+            nodes.forEach(node => {
+                minX = Math.min(minX, node.position.x);
+                minY = Math.min(minY, node.position.y);
+                maxX = Math.max(maxX, node.position.x + (node.width || this.defaultNodeWidth));
+                maxY = Math.max(maxY, node.position.y + (node.height || this.defaultNodeHeight));
+            });
+        }
+        else {
+            minX = 0;
+            minY = 0;
+            maxX = 100;
+            maxY = 100;
+        }
+        // Add some padding
+        const padding = 20;
+        minX -= padding;
+        minY -= padding;
+        maxX += padding;
+        maxY += padding;
+        const width = maxX - minX;
+        const height = maxY - minY;
+        // Set the viewBox to the content bounds
+        clone.setAttribute('viewBox', `${minX} ${minY} ${width} ${height}`);
+        clone.setAttribute('width', `${width}`);
+        clone.setAttribute('height', `${height}`);
+        // Remove the transform from the viewport group in the clone to reset zoom/pan
+        // The viewport group is the first child g element
+        const viewportGroup = clone.querySelector('.ngx-workflow__viewport');
+        if (viewportGroup) {
+            viewportGroup.removeAttribute('transform');
+        }
+        // Serialize the SVG
+        const serializer = new XMLSerializer();
+        let svgString = serializer.serializeToString(clone);
+        // Add XML declaration
+        if (!svgString.match(/^<xml/)) {
+            svgString = '<?xml version="1.0" encoding="utf-8"?>\n' + svgString;
+        }
+        if (download) {
+            const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+            const url = URL.createObjectURL(blob);
+            this.downloadFile(url, fileName);
+            URL.revokeObjectURL(url);
+        }
+        return svgString;
+    }
+    /**
+     * Exports the diagram as a PNG image.
+     * @param fileName The name of the file to download (default: 'diagram.png')
+     * @param download Whether to trigger a download (default: true)
+     * @returns A promise that resolves to the data URL of the PNG
+     */
+    async exportToPNG(fileName = 'diagram.png', download = true) {
+        const svgString = this.exportToSVG(fileName, false);
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+            const url = URL.createObjectURL(svgBlob);
+            img.onload = () => {
+                const canvas = document.createElement('canvas');
+                canvas.width = img.width;
+                canvas.height = img.height;
+                const ctx = canvas.getContext('2d');
+                if (!ctx) {
+                    reject(new Error('Could not get canvas context'));
+                    return;
+                }
+                // Draw white background
+                ctx.fillStyle = '#ffffff';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                ctx.drawImage(img, 0, 0);
+                const pngUrl = canvas.toDataURL('image/png');
+                if (download) {
+                    this.downloadFile(pngUrl, fileName);
+                }
+                URL.revokeObjectURL(url);
+                resolve(pngUrl);
+            };
+            img.onerror = (e) => {
+                URL.revokeObjectURL(url);
+                reject(e);
+            };
+            img.src = url;
+        });
+    }
+    /**
+     * Exports the diagram state as a JSON file.
+     * @param fileName The name of the file to download (default: 'diagram.json')
+     */
+    exportToJSON(fileName = 'diagram.json') {
+        const state = this.getDiagramState();
+        const jsonString = JSON.stringify(state, null, 2);
+        const blob = new Blob([jsonString], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        this.downloadFile(url, fileName);
+        URL.revokeObjectURL(url);
+    }
+    /**
+     * Triggers the file input to select a JSON file for import.
+     */
+    triggerImport() {
+        const fileInput = document.createElement('input');
+        fileInput.type = 'file';
+        fileInput.accept = '.json';
+        fileInput.style.display = 'none';
+        fileInput.onchange = (e) => this.onFileSelected(e);
+        document.body.appendChild(fileInput);
+        fileInput.click();
+        document.body.removeChild(fileInput);
+    }
+    /**
+     * Handles the file selection for import.
+     */
+    onFileSelected(event) {
+        const input = event.target;
+        if (!input.files || input.files.length === 0)
+            return;
+        const file = input.files[0];
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            try {
+                const jsonString = e.target?.result;
+                const state = JSON.parse(jsonString);
+                // Basic validation
+                if (state.nodes && state.edges && state.viewport) {
+                    this.setDiagramState(state);
+                }
+                else {
+                    console.error('Invalid diagram JSON format');
+                    // TODO: Show user notification
+                }
+            }
+            catch (error) {
+                console.error('Error parsing JSON', error);
+                // TODO: Show user notification
+            }
+        };
+        reader.readAsText(file);
+    }
+    downloadFile(url, fileName) {
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = fileName;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        document.body.removeChild(link);
+    }
+    onSearch(event) {
+        const input = event.target;
+        this.diagramStateService.setSearchQuery(input.value);
+    }
+    onFilterType(event) {
+        const select = event.target;
+        this.diagramStateService.setFilterType(select.value || null);
+    }
+    onZoomChange(zoom) {
+        this.diagramStateService.setZoom(zoom);
+    }
+    onMinimapViewportChange(viewport) {
+        this.diagramStateService.setViewport(viewport);
+    }
+    getEdgeHandlePosition(edge, type) {
+        const nodes = this.nodes();
+        const nodeId = type === 'source' ? edge.source : edge.target;
+        const handleId = type === 'source' ? edge.sourceHandle : edge.targetHandle;
+        const node = nodes.find(n => n.id === nodeId);
+        if (!node)
+            return { x: 0, y: 0 };
+        const pos = getHandleAbsolutePosition(node, handleId);
+        return {
+            x: isFinite(pos.x) ? pos.x : 0,
+            y: isFinite(pos.y) ? pos.y : 0
+        };
+    }
+    onKeyDown(event) {
+        const target = event.target;
+        // Ignore if focus is on an input or textarea
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+            return;
+        }
+        // Delete or Backspace to remove selected elements
+        if (event.key === 'Delete' || event.key === 'Backspace') {
+            this.diagramStateService.deleteSelectedElements();
+        }
+        // Ctrl+A or Cmd+A to select all
+        if ((event.ctrlKey || event.metaKey) && event.key === 'a') {
+            event.preventDefault(); // Prevent default browser select all
+            this.diagramStateService.selectAll();
+        }
+        // Undo (Ctrl+Z) and Redo (Ctrl+Y or Ctrl+Shift+Z)
+        if (event.ctrlKey || event.metaKey) {
+            if (event.key === 'z') {
+                event.preventDefault();
+                this.diagramStateService.undo();
+            }
+            else if (event.key === 'y' || (event.shiftKey && event.key === 'Z')) {
+                event.preventDefault();
+                this.diagramStateService.redo();
+            }
+            // Clipboard Operations
+            if (event.key === 'c') {
+                // Handled by onCopyKeyPress
+            }
+            else if (event.key === 'v') {
+                // Handled by onPasteKeyPress
+            }
+            else if (event.key === 'x') {
+                // Handled by onCutKeyPress
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DiagramComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DiagramStateService }, { token: NGX_WORKFLOW_NODE_TYPES, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: DiagramComponent, isStandalone: true, selector: "ngx-workflow-diagram", inputs: { initialNodes: "initialNodes", initialEdges: "initialEdges", initialViewport: "initialViewport", showZoomControls: "showZoomControls", showMinimap: "showMinimap", showBackground: "showBackground", backgroundVariant: "backgroundVariant", backgroundGap: "backgroundGap", backgroundSize: "backgroundSize", backgroundColor: "backgroundColor", backgroundBgColor: "backgroundBgColor", connectionValidator: "connectionValidator", nodesResizable: "nodesResizable" }, outputs: { nodeClick: "nodeClick", edgeClick: "edgeClick", connect: "connect", nodesChange: "nodesChange", edgesChange: "edgesChange", nodeDoubleClick: "nodeDoubleClick" }, host: { listeners: { "window:keydown.delete": "onDeleteKeyPress($event)", "window:keydown.control.z": "onUndoKeyPress($event)", "window:keydown.meta.z": "onUndoKeyPress($event)", "window:keydown.control.shift.z": "onRedoKeyPress($event)", "window:keydown.meta.shift.z": "onRedoKeyPress($event)", "window:keydown.control.c": "onCopyKeyPress($event)", "window:keydown.meta.c": "onCopyKeyPress($event)", "window:keydown.control.v": "onPasteKeyPress($event)", "window:keydown.meta.v": "onPasteKeyPress($event)", "window:keydown.control.x": "onCutKeyPress($event)", "window:keydown.meta.x": "onCutKeyPress($event)", "window:keydown.control.d": "onDuplicateKeyPress($event)", "window:keydown.meta.d": "onDuplicateKeyPress($event)", "window:keydown.control.g": "onGroupKeyPress($event)", "window:keydown.meta.g": "onGroupKeyPress($event)", "window:keydown.control.shift.g": "onUngroupKeyPress($event)", "window:keydown.meta.shift.g": "onUngroupKeyPress($event)", "window:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "svgRef", first: true, predicate: ["svg"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-workflow__container\" [attr.data-lod]=\"lodLevel\">\r\n  <ngx-workflow-background *ngIf=\"showBackground\" [variant]=\"backgroundVariant\" [gap]=\"backgroundGap\"\r\n    [size]=\"backgroundSize\" [color]=\"backgroundColor\" [backgroundColor]=\"backgroundBgColor\"></ngx-workflow-background>\r\n  <svg #svg class=\"ngx-workflow__diagram\" (wheel)=\"onWheel($event)\" (pointerdown)=\"onPointerDown($event)\"\r\n    (dblclick)=\"onDiagramDoubleClick($event)\">\r\n    <defs>\r\n      <pattern id=\"ngx-workflow__grid-pattern\" x=\"0\" y=\"0\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\">\r\n        <circle cx=\"0.5\" cy=\"0.5\" r=\"0.5\" fill=\"#ccc\" />\r\n      </pattern>\r\n\r\n      <!-- Arrow marker -->\r\n      <marker id=\"ngx-workflow__arrow\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\"\r\n        orient=\"auto-start-reverse\">\r\n        <path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"context-stroke\" />\r\n      </marker>\r\n\r\n      <!-- Arrowclosed marker (filled) -->\r\n      <marker id=\"ngx-workflow__arrowclosed\" viewBox=\"0 0 10 10\" refX=\"10\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\"\r\n        orient=\"auto-start-reverse\">\r\n        <path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"context-stroke\" stroke=\"context-stroke\" />\r\n      </marker>\r\n\r\n      <!-- Dot marker -->\r\n      <marker id=\"ngx-workflow__dot\" viewBox=\"0 0 10 10\" refX=\"5\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\">\r\n        <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"context-stroke\" />\r\n      </marker>\r\n    </defs>\r\n\r\n    <rect width=\"100%\" height=\"100%\" fill=\"url(#ngx-workflow__grid-pattern)\" class=\"ngx-workflow__background\" />\r\n\r\n    <g class=\"ngx-workflow__viewport\" [attr.transform]=\"transform\">\r\n      <!-- Edges -->\r\n      <g *ngFor=\"let edge of edges(); trackBy: trackByEdgeId\" [class.selected]=\"edge.selected\"\r\n        [class.animated]=\"edge.animated\" class=\"ngx-workflow__edge\" (click)=\"onEdgeClick($event, edge)\"\r\n        (dblclick)=\"onEdgeDoubleClick($event, edge)\">\r\n        <!-- Edge path with markers -->\r\n        <path [attr.d]=\"getEdgePath(edge)\" class=\"ngx-workflow__edge-path\" [style]=\"edge.style\"\r\n          [attr.marker-start]=\"getMarkerUrl(edge.markerStart)\" [attr.marker-end]=\"getMarkerUrl(edge.markerEnd)\">\r\n        </path>\r\n        <!-- Invisible hitbox for easier clicking -->\r\n        <path [attr.d]=\"getEdgePath(edge)\" class=\"ngx-workflow__edge-hitbox\"></path>\r\n\r\n        <!-- Edge label -->\r\n        <g *ngIf=\"edge.label || editingEdgeId === edge.id\" class=\"ngx-workflow__edge-label\">\r\n          <foreignObject *ngIf=\"editingEdgeId === edge.id\" [attr.x]=\"getEdgeLabelPosition(edge).x - 50\"\r\n            [attr.y]=\"getEdgeLabelPosition(edge).y - 15\" width=\"100\" height=\"30\">\r\n            <input #edgeLabelInput type=\"text\" [value]=\"edge.label || ''\" (blur)=\"onEdgeLabelBlur()\"\r\n              (keydown.enter)=\"updateEdgeLabel(edge, edgeLabelInput.value)\" class=\"ngx-workflow__edge-label-input\"\r\n              autofocus>\r\n          </foreignObject>\r\n\r\n          <text *ngIf=\"editingEdgeId !== edge.id\" [attr.x]=\"getEdgeLabelPosition(edge).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(edge).y\" text-anchor=\"middle\" dominant-baseline=\"middle\"\r\n            class=\"ngx-workflow__edge-label-text\" [style]=\"edge.labelStyle\">\r\n            <!-- Label background -->\r\n            <tspan *ngIf=\"edge.labelBgStyle\" class=\"ngx-workflow__edge-label-bg\" [style]=\"edge.labelBgStyle\"></tspan>\r\n            {{ edge.label }}\r\n          </text>\r\n        </g>\r\n\r\n        <!-- Edge Update Handles -->\r\n        <g *ngIf=\"edge.selected\">\r\n          <!-- Source Handle -->\r\n          <circle class=\"ngx-workflow__edge-handle\" [attr.cx]=\"getEdgeHandlePosition(edge, 'source').x\"\r\n            [attr.cy]=\"getEdgeHandlePosition(edge, 'source').y\" r=\"4\"\r\n            (pointerdown)=\"startUpdatingEdge($event, edge, 'source')\"></circle>\r\n          <!-- Target Handle -->\r\n          <circle class=\"ngx-workflow__edge-handle\" [attr.cx]=\"getEdgeHandlePosition(edge, 'target').x\"\r\n            [attr.cy]=\"getEdgeHandlePosition(edge, 'target').y\" r=\"4\"\r\n            (pointerdown)=\"startUpdatingEdge($event, edge, 'target')\"></circle>\r\n        </g>\r\n      </g>\r\n\r\n      <!-- Render temporary edges (previews) -->\r\n      <g *ngFor=\"let tempEdge of tempEdges(); trackBy: trackByEdgeId\" [class.animated]=\"tempEdge.animated\"\r\n        class=\"ngx-workflow__edge\">\r\n        <path [attr.d]=\"getEdgePath(tempEdge, true)\" class=\"ngx-workflow__edge-path\" [style]=\"tempEdge.style\"></path>\r\n      </g>\r\n\r\n      <!-- Nodes -->\r\n      <g *ngFor=\"let node of filteredNodes(); trackBy: trackByNodeId\" class=\"ngx-workflow__node\"\r\n        [attr.data-id]=\"node.id\" [class.selected]=\"node.selected\" [class.dragging]=\"node.dragging\"\r\n        [attr.transform]=\"'translate(' + node.position.x + ',' + node.position.y + ')'\"\r\n        (dblclick)=\"onNodeDoubleClick($event, node)\">\r\n\r\n        <!-- Node outline and background (visual + dragging) -->\r\n        <rect [attr.width]=\"node.width || defaultNodeWidth\" [attr.height]=\"node.height || defaultNodeHeight\" rx=\"3\"\r\n          ry=\"3\" class=\"ngx-workflow__node-rect\"></rect>\r\n\r\n        <!-- Node Label -->\r\n        <text *ngIf=\"node.type !== 'group'\" [attr.x]=\"(node.width || defaultNodeWidth) / 2\"\r\n          [attr.y]=\"(node.height || defaultNodeHeight) / 2\" text-anchor=\"middle\" dominant-baseline=\"middle\"\r\n          class=\"ngx-workflow__node-label\">\r\n          {{ node.label }}\r\n        </text>\r\n\r\n        <!-- Hit area -->\r\n        <circle [attr.cx]=\"(node.width || defaultNodeWidth) / 2\" cy=\"-10\" r=\"20\" fill=\"transparent\"\r\n          pointer-events=\"all\"></circle>\r\n        <!-- Visual -->\r\n        <circle [attr.cx]=\"(node.width || defaultNodeWidth) / 2\" [attr.cy]=\"0\" r=\"6\"\r\n          class=\"ngx-workflow__handle-circle\">\r\n        </circle>\r\n\r\n        <!-- Top Handle -->\r\n        <g class=\"ngx-workflow__handle ngx-workflow__handle--source ngx-workflow__handle--target\"\r\n          [attr.data-nodeid]=\"node.id\" data-handleid=\"top\" [attr.data-type]=\"'source'\">\r\n          <!-- Hit area -->\r\n          <circle [attr.cx]=\"(node.width || defaultNodeWidth) / 2\" cy=\"-10\" r=\"20\" fill=\"transparent\"\r\n            pointer-events=\"all\"></circle>\r\n          <!-- Visual -->\r\n          <circle [attr.cx]=\"(node.width || defaultNodeWidth) / 2\" [attr.cy]=\"0\" r=\"6\"\r\n            class=\"ngx-workflow__handle-circle\">\r\n          </circle>\r\n        </g>\r\n\r\n        <!-- Right Handle -->\r\n        <g class=\"ngx-workflow__handle ngx-workflow__handle--source ngx-workflow__handle--target\"\r\n          [attr.data-nodeid]=\"node.id\" data-handleid=\"right\" [attr.data-type]=\"'source'\">\r\n          <!-- Hit area -->\r\n          <circle [attr.cx]=\"(node.width || defaultNodeWidth) + 10\" [attr.cy]=\"(node.height || defaultNodeHeight) / 2\"\r\n            r=\"20\" fill=\"transparent\" pointer-events=\"all\">\r\n          </circle>\r\n          <!-- Visual -->\r\n          <circle [attr.cx]=\"(node.width || defaultNodeWidth)\" [attr.cy]=\"(node.height || defaultNodeHeight) / 2\" r=\"6\"\r\n            class=\"ngx-workflow__handle-circle\"></circle>\r\n        </g>\r\n        <!-- Bottom Handle -->\r\n        <g class=\"ngx-workflow__handle ngx-workflow__handle--source ngx-workflow__handle--target\"\r\n          [attr.data-nodeid]=\"node.id\" data-handleid=\"bottom\" [attr.data-type]=\"'source'\">\r\n          <!-- Hit area -->\r\n          <circle [attr.cx]=\"(node.width || defaultNodeWidth) / 2\" [attr.cy]=\"(node.height || defaultNodeHeight) + 10\"\r\n            r=\"20\" fill=\"transparent\" pointer-events=\"all\">\r\n          </circle>\r\n          <!-- Visual -->\r\n          <circle [attr.cx]=\"(node.width || defaultNodeWidth) / 2\" [attr.cy]=\"(node.height || defaultNodeHeight)\" r=\"6\"\r\n            class=\"ngx-workflow__handle-circle\"></circle>\r\n        </g>\r\n        <!-- Left Handle -->\r\n        <g class=\"ngx-workflow__handle ngx-workflow__handle--source ngx-workflow__handle--target\"\r\n          [attr.data-nodeid]=\"node.id\" data-handleid=\"left\" [attr.data-type]=\"'source'\">\r\n          <!-- Hit area -->\r\n          <circle cx=\"-10\" [attr.cy]=\"(node.height || defaultNodeHeight) / 2\" r=\"20\" fill=\"transparent\"\r\n            pointer-events=\"all\"></circle>\r\n          <!-- Visual -->\r\n          <circle [attr.cx]=\"0\" [attr.cy]=\"(node.height || defaultNodeHeight) / 2\" r=\"6\"\r\n            class=\"ngx-workflow__handle-circle\">\r\n          </circle>\r\n        </g>\r\n\r\n        <!-- Resize Handles -->\r\n        <g *ngIf=\"node.selected && (node.resizable !== false) && nodesResizable\">\r\n          <!-- NW Handle -->\r\n          <rect class=\"ngx-workflow__resize-handle\" data-handle=\"nw\" [attr.x]=\"-5\" [attr.y]=\"-5\" width=\"10\" height=\"10\">\r\n          </rect>\r\n          <!-- NE Handle -->\r\n          <rect class=\"ngx-workflow__resize-handle\" data-handle=\"ne\" [attr.x]=\"(node.width || defaultNodeWidth) - 5\"\r\n            [attr.y]=\"-5\" width=\"10\" height=\"10\"></rect>\r\n          <!-- SW Handle -->\r\n          <rect class=\"ngx-workflow__resize-handle\" data-handle=\"sw\" [attr.x]=\"-5\"\r\n            [attr.y]=\"(node.height || defaultNodeHeight) - 5\" width=\"10\" height=\"10\"></rect>\r\n          <!-- SE Handle -->\r\n          <rect class=\"ngx-workflow__resize-handle\" data-handle=\"se\" [attr.x]=\"(node.width || defaultNodeWidth) - 5\"\r\n            [attr.y]=\"(node.height || defaultNodeHeight) - 5\" width=\"10\" height=\"10\"></rect>\r\n        </g>\r\n\r\n        <!-- Group Node Template -->\r\n        <g *ngIf=\"node.type === 'group'\" class=\"ngx-workflow__group-node\">\r\n          <!-- Header -->\r\n          <rect [attr.width]=\"node.width\" height=\"30\" class=\"ngx-workflow__group-header\"></rect>\r\n          <text [attr.x]=\"10\" [attr.y]=\"20\" class=\"ngx-workflow__group-label\">{{ node.label }}</text>\r\n\r\n          <!-- Expand/Collapse Toggle -->\r\n          <g class=\"ngx-workflow__group-toggle\" [attr.transform]=\"'translate(' + (node.width! - 25) + ', 5)'\"\r\n            (click)=\"toggleGroup($event, node)\">\r\n            <rect width=\"20\" height=\"20\" rx=\"4\" class=\"ngx-workflow__group-toggle-bg\"></rect>\r\n            <path [attr.d]=\"node.expanded ? 'M 5 10 L 15 10' : 'M 5 10 L 15 10 M 10 5 L 10 15'\"\r\n              class=\"ngx-workflow__group-toggle-icon\"></path>\r\n          </g>\r\n        </g>\r\n      </g>\r\n\r\n      <!-- Alignment Guides -->\r\n      <g *ngFor=\"let guide of alignmentGuides()\" class=\"ngx-workflow__alignment-guide\">\r\n        <line *ngIf=\"guide.type === 'horizontal'\" [attr.x1]=\"guide.start\" [attr.y1]=\"guide.position\"\r\n          [attr.x2]=\"guide.end\" [attr.y2]=\"guide.position\" />\r\n        <line *ngIf=\"guide.type === 'vertical'\" [attr.x1]=\"guide.position\" [attr.y1]=\"guide.start\"\r\n          [attr.x2]=\"guide.position\" [attr.y2]=\"guide.end\" />\r\n      </g>\r\n    </g>\r\n\r\n  </svg>\r\n\r\n  <!-- IO Controls -->\r\n  <div class=\"ngx-workflow__io-controls\">\r\n    <input type=\"text\" placeholder=\"Search...\" (input)=\"onSearch($event)\">\r\n    <select (change)=\"onFilterType($event)\">\r\n      <option value=\"\">All Types</option>\r\n      <option *ngFor=\"let type of nodeTypeKeys\" [value]=\"type\">{{ type }}</option>\r\n    </select>\r\n    <div class=\"ngx-workflow__separator\"></div>\r\n    <button (click)=\"exportToJSON()\">Export JSON</button>\r\n    <button (click)=\"triggerImport()\">Import JSON</button>\r\n    <button (click)=\"exportToPNG()\">Export PNG</button>\r\n    <button (click)=\"exportToSVG()\">Export SVG</button>\r\n  </div>\r\n\r\n  <ngx-workflow-zoom-controls *ngIf=\"showZoomControls\" [zoom]=\"viewport().zoom\" [minZoom]=\"0.1\" [maxZoom]=\"4\"\r\n    (zoomIn)=\"onZoomChange(viewport().zoom + 0.1)\" (zoomOut)=\"onZoomChange(viewport().zoom - 0.1)\"\r\n    (fitView)=\"onZoomChange(1)\" (resetZoom)=\"onZoomChange(1)\"></ngx-workflow-zoom-controls>\r\n\r\n  <ngx-workflow-alignment-controls></ngx-workflow-alignment-controls>\r\n\r\n  <ngx-workflow-minimap *ngIf=\"showMinimap\"></ngx-workflow-minimap>\r\n\r\n  <ngx-workflow-properties-sidebar [node]=\"selectedNodeForEditing\" (close)=\"closeSidebar()\"\r\n    (change)=\"onPropertiesChange($event)\"></ngx-workflow-properties-sidebar>\r\n</div>", styles: [":host{--ngx-workflow-primary: #3b82f6;--ngx-workflow-primary-hover: #2563eb;--ngx-workflow-bg: #f8fafc;--ngx-workflow-surface: #ffffff;--ngx-workflow-border: #e2e8f0;--ngx-workflow-text-primary: #1e293b;--ngx-workflow-text-secondary: #64748b;--ngx-workflow-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--ngx-workflow-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ngx-workflow-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ngx-workflow-glass-bg: rgba(255, 255, 255, .8);--ngx-workflow-glass-border: rgba(255, 255, 255, .5);--ngx-workflow-glass-blur: blur(12px);display:block;width:100%;height:100%;font-family:Inter,system-ui,-apple-system,sans-serif}.ngx-workflow__container{position:relative;width:100%;height:100%;overflow:hidden;background-color:var(--ngx-workflow-bg)}.ngx-workflow__diagram{width:100%;height:100%;cursor:grab;position:relative;z-index:1}.ngx-workflow__diagram:active{cursor:grabbing}.ngx-workflow__background{fill:url(#ngx-workflow__grid-pattern);opacity:.6}.ngx-workflow__viewport{transform-origin:0 0}.ngx-workflow__node{cursor:grab;transition:transform .1s ease,opacity .2s ease}.ngx-workflow__node .ngx-workflow__node-rect{fill:var(--ngx-workflow-surface);stroke:var(--ngx-workflow-border);stroke-width:1.5px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.05));transition:all .2s cubic-bezier(.4,0,.2,1);pointer-events:all}.ngx-workflow__node .ngx-workflow__node-label{font-size:12px;font-weight:500;fill:var(--ngx-workflow-text-primary);pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-workflow__node:hover .ngx-workflow__node-rect{stroke:var(--ngx-workflow-primary);filter:drop-shadow(0 4px 6px rgba(0,0,0,.08));transform:translateY(-1px)}.ngx-workflow__node.selected .ngx-workflow__node-rect{stroke:var(--ngx-workflow-primary);stroke-width:2px;filter:drop-shadow(0 0 0 2px rgba(59,130,246,.2))}.ngx-workflow__node.dragging{cursor:grabbing;opacity:.9}.ngx-workflow__node.dragging .ngx-workflow__node-rect{filter:drop-shadow(0 10px 15px rgba(0,0,0,.1));transform:scale(1.02)}.ngx-workflow__node.dimmed{opacity:.4}foreignObject{overflow:visible;pointer-events:none}foreignObject *{pointer-events:auto}.ngx-workflow__edge{pointer-events:none}.ngx-workflow__edge-path{fill:none;stroke:#94a3b8;stroke-width:2;transition:stroke .2s ease,stroke-width .2s ease;pointer-events:stroke;cursor:pointer}.ngx-workflow__edge-hitbox{fill:none;stroke:transparent;stroke-width:20;pointer-events:stroke;cursor:pointer}.ngx-workflow__edge:hover .ngx-workflow__edge-path{stroke:var(--ngx-workflow-primary)}.ngx-workflow__edge.selected .ngx-workflow__edge-path{stroke:var(--ngx-workflow-primary);stroke-width:3;filter:drop-shadow(0 1px 2px rgba(59,130,246,.3))}.ngx-workflow__edge.animated .ngx-workflow__edge-path{stroke-dasharray:10;animation:flowAnimation 1s linear infinite}@keyframes flowAnimation{0%{stroke-dashoffset:20}to{stroke-dashoffset:0}}.ngx-workflow__edge-label{pointer-events:none}.ngx-workflow__edge-label-text{font-family:Inter,sans-serif;font-size:12px;font-weight:500;fill:var(--ngx-workflow-text-secondary);text-anchor:middle;dominant-baseline:middle}.ngx-workflow__edge-label-bg{fill:var(--ngx-workflow-surface);rx:4;ry:4;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}.ngx-workflow__edge-label-input{width:100%;height:100%;border:1px solid var(--ngx-workflow-primary);border-radius:4px;padding:2px 6px;font-size:12px;text-align:center;background:var(--ngx-workflow-surface);pointer-events:all;outline:none;box-shadow:var(--ngx-workflow-shadow-sm)}.ngx-workflow__handle{opacity:1;transition:transform .2s cubic-bezier(.34,1.56,.64,1);pointer-events:all}.ngx-workflow__handle-circle{fill:var(--ngx-workflow-surface);stroke:var(--ngx-workflow-text-secondary);stroke-width:1.5;transition:all .2s ease}.ngx-workflow__handle-circle:hover{fill:var(--ngx-workflow-primary);stroke:var(--ngx-workflow-primary);r:7}.ngx-workflow__handle.ngx-workflow__handle--valid-target .ngx-workflow__handle-circle{fill:#10b981!important;stroke:#059669!important;r:8;stroke-width:2}.ngx-workflow__io-controls{position:absolute;top:16px;left:16px;z-index:10;display:flex;gap:8px;padding:8px;background:var(--ngx-workflow-glass-bg);-webkit-backdrop-filter:var(--ngx-workflow-glass-blur);backdrop-filter:var(--ngx-workflow-glass-blur);border:1px solid var(--ngx-workflow-glass-border);border-radius:12px;box-shadow:var(--ngx-workflow-shadow-md);align-items:center}.ngx-workflow__io-controls input[type=text]{padding:6px 12px;border:1px solid transparent;border-radius:8px;font-size:13px;background:#0000000d;transition:all .2s ease;width:160px}.ngx-workflow__io-controls input[type=text]:focus{background:#fff;border-color:var(--ngx-workflow-primary);outline:none;box-shadow:0 0 0 2px #3b82f61a}.ngx-workflow__io-controls select{padding:6px 12px;border:1px solid transparent;border-radius:8px;font-size:13px;background:#0000000d;cursor:pointer;transition:all .2s ease}.ngx-workflow__io-controls select:hover{background:#00000014}.ngx-workflow__io-controls select:focus{outline:none;border-color:var(--ngx-workflow-primary)}.ngx-workflow__io-controls .ngx-workflow__separator{width:1px;height:24px;background:#0000001a;margin:0 4px}.ngx-workflow__io-controls button{padding:6px 12px;background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--ngx-workflow-text-primary);transition:all .2s ease}.ngx-workflow__io-controls button:hover{background:#0000000d;color:var(--ngx-workflow-primary)}.ngx-workflow__io-controls button:active{transform:translateY(1px)}.ngx-workflow__group-node .ngx-workflow__group-header{fill:#00000008;stroke:none}.ngx-workflow__group-node .ngx-workflow__group-label{font-family:Inter,sans-serif;font-size:11px;font-weight:600;fill:var(--ngx-workflow-text-secondary);text-transform:uppercase;letter-spacing:.5px}.ngx-workflow__group-node .ngx-workflow__group-toggle{cursor:pointer;opacity:.6;transition:opacity .2s}.ngx-workflow__group-node .ngx-workflow__group-toggle:hover{opacity:1}.ngx-workflow__group-node .ngx-workflow__group-toggle-bg{fill:#0000001a}.ngx-workflow__group-node .ngx-workflow__group-toggle-icon{stroke:var(--ngx-workflow-text-secondary);stroke-width:1.5;fill:none}.ngx-workflow__alignment-guide{pointer-events:none}.ngx-workflow__alignment-guide line{stroke:#ec4899;stroke-width:1;stroke-dasharray:4 4;opacity:.8}.ngx-workflow__resize-handle{fill:var(--ngx-workflow-surface);stroke:var(--ngx-workflow-primary);stroke-width:1.5;width:8px;height:8px;transition:transform .2s ease;transform-box:fill-box;transform-origin:center}.ngx-workflow__resize-handle:hover{fill:var(--ngx-workflow-primary);transform:scale(1.2)}.ngx-workflow__resize-handle[data-handle=nw]{cursor:nw-resize}.ngx-workflow__resize-handle[data-handle=ne]{cursor:ne-resize}.ngx-workflow__resize-handle[data-handle=sw]{cursor:sw-resize}.ngx-workflow__resize-handle[data-handle=se]{cursor:se-resize}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ZoomControlsComponent, selector: "ngx-workflow-zoom-controls", inputs: ["zoom", "minZoom", "maxZoom"], outputs: ["zoomIn", "zoomOut", "fitView", "resetZoom"] }, { kind: "component", type: MinimapComponent, selector: "ngx-workflow-minimap", inputs: ["nodeColor", "nodeClass"] }, { kind: "component", type: BackgroundComponent, selector: "ngx-workflow-background", inputs: ["variant", "gap", "size", "color", "backgroundColor"] }, { kind: "component", type: AlignmentControlsComponent, selector: "ngx-workflow-alignment-controls" }, { kind: "component", type: PropertiesSidebarComponent, selector: "ngx-workflow-properties-sidebar", inputs: ["node"], outputs: ["close", "change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DiagramComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-workflow-diagram', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, ZoomControlsComponent, MinimapComponent, BackgroundComponent, AlignmentControlsComponent, PropertiesSidebarComponent], template: "<div class=\"ngx-workflow__container\" [attr.data-lod]=\"lodLevel\">\r\n  <ngx-workflow-background *ngIf=\"showBackground\" [variant]=\"backgroundVariant\" [gap]=\"backgroundGap\"\r\n    [size]=\"backgroundSize\" [color]=\"backgroundColor\" [backgroundColor]=\"backgroundBgColor\"></ngx-workflow-background>\r\n  <svg #svg class=\"ngx-workflow__diagram\" (wheel)=\"onWheel($event)\" (pointerdown)=\"onPointerDown($event)\"\r\n    (dblclick)=\"onDiagramDoubleClick($event)\">\r\n    <defs>\r\n      <pattern id=\"ngx-workflow__grid-pattern\" x=\"0\" y=\"0\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\">\r\n        <circle cx=\"0.5\" cy=\"0.5\" r=\"0.5\" fill=\"#ccc\" />\r\n      </pattern>\r\n\r\n      <!-- Arrow marker -->\r\n      <marker id=\"ngx-workflow__arrow\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\"\r\n        orient=\"auto-start-reverse\">\r\n        <path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"context-stroke\" />\r\n      </marker>\r\n\r\n      <!-- Arrowclosed marker (filled) -->\r\n      <marker id=\"ngx-workflow__arrowclosed\" viewBox=\"0 0 10 10\" refX=\"10\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\"\r\n        orient=\"auto-start-reverse\">\r\n        <path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"context-stroke\" stroke=\"context-stroke\" />\r\n      </marker>\r\n\r\n      <!-- Dot marker -->\r\n      <marker id=\"ngx-workflow__dot\" viewBox=\"0 0 10 10\" refX=\"5\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\">\r\n        <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"context-stroke\" />\r\n      </marker>\r\n    </defs>\r\n\r\n    <rect width=\"100%\" height=\"100%\" fill=\"url(#ngx-workflow__grid-pattern)\" class=\"ngx-workflow__background\" />\r\n\r\n    <g class=\"ngx-workflow__viewport\" [attr.transform]=\"transform\">\r\n      <!-- Edges -->\r\n      <g *ngFor=\"let edge of edges(); trackBy: trackByEdgeId\" [class.selected]=\"edge.selected\"\r\n        [class.animated]=\"edge.animated\" class=\"ngx-workflow__edge\" (click)=\"onEdgeClick($event, edge)\"\r\n        (dblclick)=\"onEdgeDoubleClick($event, edge)\">\r\n        <!-- Edge path with markers -->\r\n        <path [attr.d]=\"getEdgePath(edge)\" class=\"ngx-workflow__edge-path\" [style]=\"edge.style\"\r\n          [attr.marker-start]=\"getMarkerUrl(edge.markerStart)\" [attr.marker-end]=\"getMarkerUrl(edge.markerEnd)\">\r\n        </path>\r\n        <!-- Invisible hitbox for easier clicking -->\r\n        <path [attr.d]=\"getEdgePath(edge)\" class=\"ngx-workflow__edge-hitbox\"></path>\r\n\r\n        <!-- Edge label -->\r\n        <g *ngIf=\"edge.label || editingEdgeId === edge.id\" class=\"ngx-workflow__edge-label\">\r\n          <foreignObject *ngIf=\"editingEdgeId === edge.id\" [attr.x]=\"getEdgeLabelPosition(edge).x - 50\"\r\n            [attr.y]=\"getEdgeLabelPosition(edge).y - 15\" width=\"100\" height=\"30\">\r\n            <input #edgeLabelInput type=\"text\" [value]=\"edge.label || ''\" (blur)=\"onEdgeLabelBlur()\"\r\n              (keydown.enter)=\"updateEdgeLabel(edge, edgeLabelInput.value)\" class=\"ngx-workflow__edge-label-input\"\r\n              autofocus>\r\n          </foreignObject>\r\n\r\n          <text *ngIf=\"editingEdgeId !== edge.id\" [attr.x]=\"getEdgeLabelPosition(edge).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(edge).y\" text-anchor=\"middle\" dominant-baseline=\"middle\"\r\n            class=\"ngx-workflow__edge-label-text\" [style]=\"edge.labelStyle\">\r\n            <!-- Label background -->\r\n            <tspan *ngIf=\"edge.labelBgStyle\" class=\"ngx-workflow__edge-label-bg\" [style]=\"edge.labelBgStyle\"></tspan>\r\n            {{ edge.label }}\r\n          </text>\r\n        </g>\r\n\r\n        <!-- Edge Update Handles -->\r\n        <g *ngIf=\"edge.selected\">\r\n          <!-- Source Handle -->\r\n          <circle class=\"ngx-workflow__edge-handle\" [attr.cx]=\"getEdgeHandlePosition(edge, 'source').x\"\r\n            [attr.cy]=\"getEdgeHandlePosition(edge, 'source').y\" r=\"4\"\r\n            (pointerdown)=\"startUpdatingEdge($event, edge, 'source')\"></circle>\r\n          <!-- Target Handle -->\r\n          <circle class=\"ngx-workflow__edge-handle\" [attr.cx]=\"getEdgeHandlePosition(edge, 'target').x\"\r\n            [attr.cy]=\"getEdgeHandlePosition(edge, 'target').y\" r=\"4\"\r\n            (pointerdown)=\"startUpdatingEdge($event, edge, 'target')\"></circle>\r\n        </g>\r\n      </g>\r\n\r\n      <!-- Render temporary edges (previews) -->\r\n      <g *ngFor=\"let tempEdge of tempEdges(); trackBy: trackByEdgeId\" [class.animated]=\"tempEdge.animated\"\r\n        class=\"ngx-workflow__edge\">\r\n        <path [attr.d]=\"getEdgePath(tempEdge, true)\" class=\"ngx-workflow__edge-path\" [style]=\"tempEdge.style\"></path>\r\n      </g>\r\n\r\n      <!-- Nodes -->\r\n      <g *ngFor=\"let node of filteredNodes(); trackBy: trackByNodeId\" class=\"ngx-workflow__node\"\r\n        [attr.data-id]=\"node.id\" [class.selected]=\"node.selected\" [class.dragging]=\"node.dragging\"\r\n        [attr.transform]=\"'translate(' + node.position.x + ',' + node.position.y + ')'\"\r\n        (dblclick)=\"onNodeDoubleClick($event, node)\">\r\n\r\n        <!-- Node outline and background (visual + dragging) -->\r\n        <rect [attr.width]=\"node.width || defaultNodeWidth\" [attr.height]=\"node.height || defaultNodeHeight\" rx=\"3\"\r\n          ry=\"3\" class=\"ngx-workflow__node-rect\"></rect>\r\n\r\n        <!-- Node Label -->\r\n        <text *ngIf=\"node.type !== 'group'\" [attr.x]=\"(node.width || defaultNodeWidth) / 2\"\r\n          [attr.y]=\"(node.height || defaultNodeHeight) / 2\" text-anchor=\"middle\" dominant-baseline=\"middle\"\r\n          class=\"ngx-workflow__node-label\">\r\n          {{ node.label }}\r\n        </text>\r\n\r\n        <!-- Hit area -->\r\n        <circle [attr.cx]=\"(node.width || defaultNodeWidth) / 2\" cy=\"-10\" r=\"20\" fill=\"transparent\"\r\n          pointer-events=\"all\"></circle>\r\n        <!-- Visual -->\r\n        <circle [attr.cx]=\"(node.width || defaultNodeWidth) / 2\" [attr.cy]=\"0\" r=\"6\"\r\n          class=\"ngx-workflow__handle-circle\">\r\n        </circle>\r\n\r\n        <!-- Top Handle -->\r\n        <g class=\"ngx-workflow__handle ngx-workflow__handle--source ngx-workflow__handle--target\"\r\n          [attr.data-nodeid]=\"node.id\" data-handleid=\"top\" [attr.data-type]=\"'source'\">\r\n          <!-- Hit area -->\r\n          <circle [attr.cx]=\"(node.width || defaultNodeWidth) / 2\" cy=\"-10\" r=\"20\" fill=\"transparent\"\r\n            pointer-events=\"all\"></circle>\r\n          <!-- Visual -->\r\n          <circle [attr.cx]=\"(node.width || defaultNodeWidth) / 2\" [attr.cy]=\"0\" r=\"6\"\r\n            class=\"ngx-workflow__handle-circle\">\r\n          </circle>\r\n        </g>\r\n\r\n        <!-- Right Handle -->\r\n        <g class=\"ngx-workflow__handle ngx-workflow__handle--source ngx-workflow__handle--target\"\r\n          [attr.data-nodeid]=\"node.id\" data-handleid=\"right\" [attr.data-type]=\"'source'\">\r\n          <!-- Hit area -->\r\n          <circle [attr.cx]=\"(node.width || defaultNodeWidth) + 10\" [attr.cy]=\"(node.height || defaultNodeHeight) / 2\"\r\n            r=\"20\" fill=\"transparent\" pointer-events=\"all\">\r\n          </circle>\r\n          <!-- Visual -->\r\n          <circle [attr.cx]=\"(node.width || defaultNodeWidth)\" [attr.cy]=\"(node.height || defaultNodeHeight) / 2\" r=\"6\"\r\n            class=\"ngx-workflow__handle-circle\"></circle>\r\n        </g>\r\n        <!-- Bottom Handle -->\r\n        <g class=\"ngx-workflow__handle ngx-workflow__handle--source ngx-workflow__handle--target\"\r\n          [attr.data-nodeid]=\"node.id\" data-handleid=\"bottom\" [attr.data-type]=\"'source'\">\r\n          <!-- Hit area -->\r\n          <circle [attr.cx]=\"(node.width || defaultNodeWidth) / 2\" [attr.cy]=\"(node.height || defaultNodeHeight) + 10\"\r\n            r=\"20\" fill=\"transparent\" pointer-events=\"all\">\r\n          </circle>\r\n          <!-- Visual -->\r\n          <circle [attr.cx]=\"(node.width || defaultNodeWidth) / 2\" [attr.cy]=\"(node.height || defaultNodeHeight)\" r=\"6\"\r\n            class=\"ngx-workflow__handle-circle\"></circle>\r\n        </g>\r\n        <!-- Left Handle -->\r\n        <g class=\"ngx-workflow__handle ngx-workflow__handle--source ngx-workflow__handle--target\"\r\n          [attr.data-nodeid]=\"node.id\" data-handleid=\"left\" [attr.data-type]=\"'source'\">\r\n          <!-- Hit area -->\r\n          <circle cx=\"-10\" [attr.cy]=\"(node.height || defaultNodeHeight) / 2\" r=\"20\" fill=\"transparent\"\r\n            pointer-events=\"all\"></circle>\r\n          <!-- Visual -->\r\n          <circle [attr.cx]=\"0\" [attr.cy]=\"(node.height || defaultNodeHeight) / 2\" r=\"6\"\r\n            class=\"ngx-workflow__handle-circle\">\r\n          </circle>\r\n        </g>\r\n\r\n        <!-- Resize Handles -->\r\n        <g *ngIf=\"node.selected && (node.resizable !== false) && nodesResizable\">\r\n          <!-- NW Handle -->\r\n          <rect class=\"ngx-workflow__resize-handle\" data-handle=\"nw\" [attr.x]=\"-5\" [attr.y]=\"-5\" width=\"10\" height=\"10\">\r\n          </rect>\r\n          <!-- NE Handle -->\r\n          <rect class=\"ngx-workflow__resize-handle\" data-handle=\"ne\" [attr.x]=\"(node.width || defaultNodeWidth) - 5\"\r\n            [attr.y]=\"-5\" width=\"10\" height=\"10\"></rect>\r\n          <!-- SW Handle -->\r\n          <rect class=\"ngx-workflow__resize-handle\" data-handle=\"sw\" [attr.x]=\"-5\"\r\n            [attr.y]=\"(node.height || defaultNodeHeight) - 5\" width=\"10\" height=\"10\"></rect>\r\n          <!-- SE Handle -->\r\n          <rect class=\"ngx-workflow__resize-handle\" data-handle=\"se\" [attr.x]=\"(node.width || defaultNodeWidth) - 5\"\r\n            [attr.y]=\"(node.height || defaultNodeHeight) - 5\" width=\"10\" height=\"10\"></rect>\r\n        </g>\r\n\r\n        <!-- Group Node Template -->\r\n        <g *ngIf=\"node.type === 'group'\" class=\"ngx-workflow__group-node\">\r\n          <!-- Header -->\r\n          <rect [attr.width]=\"node.width\" height=\"30\" class=\"ngx-workflow__group-header\"></rect>\r\n          <text [attr.x]=\"10\" [attr.y]=\"20\" class=\"ngx-workflow__group-label\">{{ node.label }}</text>\r\n\r\n          <!-- Expand/Collapse Toggle -->\r\n          <g class=\"ngx-workflow__group-toggle\" [attr.transform]=\"'translate(' + (node.width! - 25) + ', 5)'\"\r\n            (click)=\"toggleGroup($event, node)\">\r\n            <rect width=\"20\" height=\"20\" rx=\"4\" class=\"ngx-workflow__group-toggle-bg\"></rect>\r\n            <path [attr.d]=\"node.expanded ? 'M 5 10 L 15 10' : 'M 5 10 L 15 10 M 10 5 L 10 15'\"\r\n              class=\"ngx-workflow__group-toggle-icon\"></path>\r\n          </g>\r\n        </g>\r\n      </g>\r\n\r\n      <!-- Alignment Guides -->\r\n      <g *ngFor=\"let guide of alignmentGuides()\" class=\"ngx-workflow__alignment-guide\">\r\n        <line *ngIf=\"guide.type === 'horizontal'\" [attr.x1]=\"guide.start\" [attr.y1]=\"guide.position\"\r\n          [attr.x2]=\"guide.end\" [attr.y2]=\"guide.position\" />\r\n        <line *ngIf=\"guide.type === 'vertical'\" [attr.x1]=\"guide.position\" [attr.y1]=\"guide.start\"\r\n          [attr.x2]=\"guide.position\" [attr.y2]=\"guide.end\" />\r\n      </g>\r\n    </g>\r\n\r\n  </svg>\r\n\r\n  <!-- IO Controls -->\r\n  <div class=\"ngx-workflow__io-controls\">\r\n    <input type=\"text\" placeholder=\"Search...\" (input)=\"onSearch($event)\">\r\n    <select (change)=\"onFilterType($event)\">\r\n      <option value=\"\">All Types</option>\r\n      <option *ngFor=\"let type of nodeTypeKeys\" [value]=\"type\">{{ type }}</option>\r\n    </select>\r\n    <div class=\"ngx-workflow__separator\"></div>\r\n    <button (click)=\"exportToJSON()\">Export JSON</button>\r\n    <button (click)=\"triggerImport()\">Import JSON</button>\r\n    <button (click)=\"exportToPNG()\">Export PNG</button>\r\n    <button (click)=\"exportToSVG()\">Export SVG</button>\r\n  </div>\r\n\r\n  <ngx-workflow-zoom-controls *ngIf=\"showZoomControls\" [zoom]=\"viewport().zoom\" [minZoom]=\"0.1\" [maxZoom]=\"4\"\r\n    (zoomIn)=\"onZoomChange(viewport().zoom + 0.1)\" (zoomOut)=\"onZoomChange(viewport().zoom - 0.1)\"\r\n    (fitView)=\"onZoomChange(1)\" (resetZoom)=\"onZoomChange(1)\"></ngx-workflow-zoom-controls>\r\n\r\n  <ngx-workflow-alignment-controls></ngx-workflow-alignment-controls>\r\n\r\n  <ngx-workflow-minimap *ngIf=\"showMinimap\"></ngx-workflow-minimap>\r\n\r\n  <ngx-workflow-properties-sidebar [node]=\"selectedNodeForEditing\" (close)=\"closeSidebar()\"\r\n    (change)=\"onPropertiesChange($event)\"></ngx-workflow-properties-sidebar>\r\n</div>", styles: [":host{--ngx-workflow-primary: #3b82f6;--ngx-workflow-primary-hover: #2563eb;--ngx-workflow-bg: #f8fafc;--ngx-workflow-surface: #ffffff;--ngx-workflow-border: #e2e8f0;--ngx-workflow-text-primary: #1e293b;--ngx-workflow-text-secondary: #64748b;--ngx-workflow-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--ngx-workflow-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ngx-workflow-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ngx-workflow-glass-bg: rgba(255, 255, 255, .8);--ngx-workflow-glass-border: rgba(255, 255, 255, .5);--ngx-workflow-glass-blur: blur(12px);display:block;width:100%;height:100%;font-family:Inter,system-ui,-apple-system,sans-serif}.ngx-workflow__container{position:relative;width:100%;height:100%;overflow:hidden;background-color:var(--ngx-workflow-bg)}.ngx-workflow__diagram{width:100%;height:100%;cursor:grab;position:relative;z-index:1}.ngx-workflow__diagram:active{cursor:grabbing}.ngx-workflow__background{fill:url(#ngx-workflow__grid-pattern);opacity:.6}.ngx-workflow__viewport{transform-origin:0 0}.ngx-workflow__node{cursor:grab;transition:transform .1s ease,opacity .2s ease}.ngx-workflow__node .ngx-workflow__node-rect{fill:var(--ngx-workflow-surface);stroke:var(--ngx-workflow-border);stroke-width:1.5px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.05));transition:all .2s cubic-bezier(.4,0,.2,1);pointer-events:all}.ngx-workflow__node .ngx-workflow__node-label{font-size:12px;font-weight:500;fill:var(--ngx-workflow-text-primary);pointer-events:none;-webkit-user-select:none;user-select:none}.ngx-workflow__node:hover .ngx-workflow__node-rect{stroke:var(--ngx-workflow-primary);filter:drop-shadow(0 4px 6px rgba(0,0,0,.08));transform:translateY(-1px)}.ngx-workflow__node.selected .ngx-workflow__node-rect{stroke:var(--ngx-workflow-primary);stroke-width:2px;filter:drop-shadow(0 0 0 2px rgba(59,130,246,.2))}.ngx-workflow__node.dragging{cursor:grabbing;opacity:.9}.ngx-workflow__node.dragging .ngx-workflow__node-rect{filter:drop-shadow(0 10px 15px rgba(0,0,0,.1));transform:scale(1.02)}.ngx-workflow__node.dimmed{opacity:.4}foreignObject{overflow:visible;pointer-events:none}foreignObject *{pointer-events:auto}.ngx-workflow__edge{pointer-events:none}.ngx-workflow__edge-path{fill:none;stroke:#94a3b8;stroke-width:2;transition:stroke .2s ease,stroke-width .2s ease;pointer-events:stroke;cursor:pointer}.ngx-workflow__edge-hitbox{fill:none;stroke:transparent;stroke-width:20;pointer-events:stroke;cursor:pointer}.ngx-workflow__edge:hover .ngx-workflow__edge-path{stroke:var(--ngx-workflow-primary)}.ngx-workflow__edge.selected .ngx-workflow__edge-path{stroke:var(--ngx-workflow-primary);stroke-width:3;filter:drop-shadow(0 1px 2px rgba(59,130,246,.3))}.ngx-workflow__edge.animated .ngx-workflow__edge-path{stroke-dasharray:10;animation:flowAnimation 1s linear infinite}@keyframes flowAnimation{0%{stroke-dashoffset:20}to{stroke-dashoffset:0}}.ngx-workflow__edge-label{pointer-events:none}.ngx-workflow__edge-label-text{font-family:Inter,sans-serif;font-size:12px;font-weight:500;fill:var(--ngx-workflow-text-secondary);text-anchor:middle;dominant-baseline:middle}.ngx-workflow__edge-label-bg{fill:var(--ngx-workflow-surface);rx:4;ry:4;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}.ngx-workflow__edge-label-input{width:100%;height:100%;border:1px solid var(--ngx-workflow-primary);border-radius:4px;padding:2px 6px;font-size:12px;text-align:center;background:var(--ngx-workflow-surface);pointer-events:all;outline:none;box-shadow:var(--ngx-workflow-shadow-sm)}.ngx-workflow__handle{opacity:1;transition:transform .2s cubic-bezier(.34,1.56,.64,1);pointer-events:all}.ngx-workflow__handle-circle{fill:var(--ngx-workflow-surface);stroke:var(--ngx-workflow-text-secondary);stroke-width:1.5;transition:all .2s ease}.ngx-workflow__handle-circle:hover{fill:var(--ngx-workflow-primary);stroke:var(--ngx-workflow-primary);r:7}.ngx-workflow__handle.ngx-workflow__handle--valid-target .ngx-workflow__handle-circle{fill:#10b981!important;stroke:#059669!important;r:8;stroke-width:2}.ngx-workflow__io-controls{position:absolute;top:16px;left:16px;z-index:10;display:flex;gap:8px;padding:8px;background:var(--ngx-workflow-glass-bg);-webkit-backdrop-filter:var(--ngx-workflow-glass-blur);backdrop-filter:var(--ngx-workflow-glass-blur);border:1px solid var(--ngx-workflow-glass-border);border-radius:12px;box-shadow:var(--ngx-workflow-shadow-md);align-items:center}.ngx-workflow__io-controls input[type=text]{padding:6px 12px;border:1px solid transparent;border-radius:8px;font-size:13px;background:#0000000d;transition:all .2s ease;width:160px}.ngx-workflow__io-controls input[type=text]:focus{background:#fff;border-color:var(--ngx-workflow-primary);outline:none;box-shadow:0 0 0 2px #3b82f61a}.ngx-workflow__io-controls select{padding:6px 12px;border:1px solid transparent;border-radius:8px;font-size:13px;background:#0000000d;cursor:pointer;transition:all .2s ease}.ngx-workflow__io-controls select:hover{background:#00000014}.ngx-workflow__io-controls select:focus{outline:none;border-color:var(--ngx-workflow-primary)}.ngx-workflow__io-controls .ngx-workflow__separator{width:1px;height:24px;background:#0000001a;margin:0 4px}.ngx-workflow__io-controls button{padding:6px 12px;background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--ngx-workflow-text-primary);transition:all .2s ease}.ngx-workflow__io-controls button:hover{background:#0000000d;color:var(--ngx-workflow-primary)}.ngx-workflow__io-controls button:active{transform:translateY(1px)}.ngx-workflow__group-node .ngx-workflow__group-header{fill:#00000008;stroke:none}.ngx-workflow__group-node .ngx-workflow__group-label{font-family:Inter,sans-serif;font-size:11px;font-weight:600;fill:var(--ngx-workflow-text-secondary);text-transform:uppercase;letter-spacing:.5px}.ngx-workflow__group-node .ngx-workflow__group-toggle{cursor:pointer;opacity:.6;transition:opacity .2s}.ngx-workflow__group-node .ngx-workflow__group-toggle:hover{opacity:1}.ngx-workflow__group-node .ngx-workflow__group-toggle-bg{fill:#0000001a}.ngx-workflow__group-node .ngx-workflow__group-toggle-icon{stroke:var(--ngx-workflow-text-secondary);stroke-width:1.5;fill:none}.ngx-workflow__alignment-guide{pointer-events:none}.ngx-workflow__alignment-guide line{stroke:#ec4899;stroke-width:1;stroke-dasharray:4 4;opacity:.8}.ngx-workflow__resize-handle{fill:var(--ngx-workflow-surface);stroke:var(--ngx-workflow-primary);stroke-width:1.5;width:8px;height:8px;transition:transform .2s ease;transform-box:fill-box;transform-origin:center}.ngx-workflow__resize-handle:hover{fill:var(--ngx-workflow-primary);transform:scale(1.2)}.ngx-workflow__resize-handle[data-handle=nw]{cursor:nw-resize}.ngx-workflow__resize-handle[data-handle=ne]{cursor:ne-resize}.ngx-workflow__resize-handle[data-handle=sw]{cursor:sw-resize}.ngx-workflow__resize-handle[data-handle=se]{cursor:se-resize}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: DiagramStateService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NGX_WORKFLOW_NODE_TYPES]
+                }] }], propDecorators: { svgRef: [{
+                type: ViewChild,
+                args: ['svg', { static: true }]
+            }], initialNodes: [{
+                type: Input
+            }], initialEdges: [{
+                type: Input
+            }], initialViewport: [{
+                type: Input
+            }], showZoomControls: [{
+                type: Input
+            }], showMinimap: [{
+                type: Input
+            }], showBackground: [{
+                type: Input
+            }], backgroundVariant: [{
+                type: Input
+            }], backgroundGap: [{
+                type: Input
+            }], backgroundSize: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], backgroundBgColor: [{
+                type: Input
+            }], nodeClick: [{
+                type: Output
+            }], edgeClick: [{
+                type: Output
+            }], connect: [{
+                type: Output
+            }], nodesChange: [{
+                type: Output
+            }], edgesChange: [{
+                type: Output
+            }], nodeDoubleClick: [{
+                type: Output
+            }], connectionValidator: [{
+                type: Input
+            }], nodesResizable: [{
+                type: Input
+            }], onDeleteKeyPress: [{
+                type: HostListener,
+                args: ['window:keydown.delete', ['$event']]
+            }], onUndoKeyPress: [{
+                type: HostListener,
+                args: ['window:keydown.control.z', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:keydown.meta.z', ['$event']]
+            }], onRedoKeyPress: [{
+                type: HostListener,
+                args: ['window:keydown.control.shift.z', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:keydown.meta.shift.z', ['$event']]
+            }], onCopyKeyPress: [{
+                type: HostListener,
+                args: ['window:keydown.control.c', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:keydown.meta.c', ['$event']]
+            }], onPasteKeyPress: [{
+                type: HostListener,
+                args: ['window:keydown.control.v', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:keydown.meta.v', ['$event']]
+            }], onCutKeyPress: [{
+                type: HostListener,
+                args: ['window:keydown.control.x', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:keydown.meta.x', ['$event']]
+            }], onDuplicateKeyPress: [{
+                type: HostListener,
+                args: ['window:keydown.control.d', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:keydown.meta.d', ['$event']]
+            }], onGroupKeyPress: [{
+                type: HostListener,
+                args: ['window:keydown.control.g', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:keydown.meta.g', ['$event']]
+            }], onUngroupKeyPress: [{
+                type: HostListener,
+                args: ['window:keydown.control.shift.g', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:keydown.meta.shift.g', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['window:keydown', ['$event']]
+            }] } });
+
+class RoundedRectNodeComponent {
+    node;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RoundedRectNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: RoundedRectNodeComponent, isStandalone: true, selector: "ngx-workflow-rounded-rect-node", inputs: { node: "node" }, ngImport: i0, template: `
+    <svg:g class="ngx-workflow__custom-node ngx-workflow__rounded-rect-node">
+      <rect
+        [attr.x]="0"
+        [attr.y]="0"
+        [attr.width]="node.width || 170"
+        [attr.height]="node.height || 60"
+        rx="10"
+        ry="10"
+        fill="#a7f3d0"
+        stroke="#065f46"
+        stroke-width="1.5"
+      ></rect>
+      <text
+        [attr.x]="(node.width || 170) / 2"
+        [attr.y]="(node.height || 60) / 2"
+        text-anchor="middle"
+        alignment-baseline="middle"
+        fill="#065f46"
+        font-size="14px"
+        font-family="sans-serif"
+      >
+        {{ node.data?.label || 'Custom Node' }}
+      </text>
+    </svg:g>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RoundedRectNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-workflow-rounded-rect-node', template: `
+    <svg:g class="ngx-workflow__custom-node ngx-workflow__rounded-rect-node">
+      <rect
+        [attr.x]="0"
+        [attr.y]="0"
+        [attr.width]="node.width || 170"
+        [attr.height]="node.height || 60"
+        rx="10"
+        ry="10"
+        fill="#a7f3d0"
+        stroke="#065f46"
+        stroke-width="1.5"
+      ></rect>
+      <text
+        [attr.x]="(node.width || 170) / 2"
+        [attr.y]="(node.height || 60) / 2"
+        text-anchor="middle"
+        alignment-baseline="middle"
+        fill="#065f46"
+        font-size="14px"
+        font-family="sans-serif"
+      >
+        {{ node.data?.label || 'Custom Node' }}
+      </text>
+    </svg:g>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule] }]
+        }], propDecorators: { node: [{
+                type: Input
+            }] } });
+
+class LayoutService {
+    elk;
+    constructor() {
+        this.elk = new ELK();
+    }
+    // --- ELK Layout ---
+    async applyElkLayout(nodes, edges, options) {
+        const elkGraph = {
+            id: 'root',
+            layoutOptions: {
+                'elk.algorithm': 'layered',
+                'elk.direction': 'DOWN',
+                'elk.spacing.nodeNode': '75',
+                'elk.layered.nodePlacement.strategy': 'BRANDES_KOLLER',
+                ...options
+            },
+            children: nodes.map(node => ({
+                id: node.id,
+                width: node.width || 170,
+                height: node.height || 60,
+            })),
+            edges: edges.map(edge => ({
+                id: edge.id,
+                sources: [edge.source],
+                targets: [edge.target],
+            })),
+        };
+        try {
+            const result = await this.elk.layout(elkGraph);
+            const laidOutNodes = nodes.map(node => {
+                const elkNode = result.children?.find((n) => n.id === node.id);
+                if (elkNode && elkNode.x !== undefined && elkNode.y !== undefined) {
+                    return {
+                        ...node,
+                        position: {
+                            x: elkNode.x,
+                            y: elkNode.y,
+                        },
+                    };
+                }
+                return node; // Return original if not found or no position
+            });
+            return laidOutNodes;
+        }
+        catch (error) {
+            console.error('ELK layout failed:', error);
+            return nodes; // Return original nodes on error
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LayoutService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LayoutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class NgxWorkflowModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NgxWorkflowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: NgxWorkflowModule, imports: [CommonModule,
+            DiagramComponent,
+            RoundedRectNodeComponent], exports: [DiagramComponent,
+            RoundedRectNodeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NgxWorkflowModule, providers: [
+            DiagramStateService,
+            LayoutService,
+            UndoRedoService,
+            {
+                provide: NGX_WORKFLOW_NODE_TYPES,
+                useValue: {
+                    'rounded-rect': RoundedRectNodeComponent,
+                    // Add other custom node types here
+                },
+            },
+        ], imports: [CommonModule,
+            DiagramComponent,
+            RoundedRectNodeComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NgxWorkflowModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        DiagramComponent,
+                        RoundedRectNodeComponent, // Import custom node component if it's standalone
+                    ],
+                    declarations: [
+                    // Standalone components are imported, not declared.
+                    // If a non-standalone component was needed, it would go here.
+                    ],
+                    providers: [
+                        DiagramStateService,
+                        LayoutService,
+                        UndoRedoService,
+                        {
+                            provide: NGX_WORKFLOW_NODE_TYPES,
+                            useValue: {
+                                'rounded-rect': RoundedRectNodeComponent,
+                                // Add other custom node types here
+                            },
+                        },
+                    ],
+                    exports: [
+                        DiagramComponent,
+                        RoundedRectNodeComponent,
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of ngx-workflow
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DiagramComponent, DiagramStateService, LayoutService, NGX_WORKFLOW_EDGE_TYPES, NGX_WORKFLOW_NODE_TYPES, NgxWorkflowModule, RoundedRectNodeComponent, UndoRedoService, getBezierPath, getPolylineMidpoint, getSelfLoopPath, getSmartEdgePath, getStepPath, getStraightPath };
+//# sourceMappingURL=ngx-workflow.mjs.map