@ship-ui/core 0.15.18 → 0.15.22

package/fesm2022/ship-ui-core.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, ChangeDetectionStrategy, Component, signal, DestroyRef, InjectionToken, input, computed, viewChild, effect, HostListener, NgModule, Injectable, DOCUMENT, model, output, ApplicationRef, createComponent, isSignal, OutputEmitterRef, contentChild, contentChildren, afterNextRender, assertInInjectionContext, Injector, HostBinding, TemplateRef, runInInjectionContext, Directive, ChangeDetectorRef, viewChildren, ViewContainerRef, EnvironmentInjector } from '@angular/core';
-import { DatePipe, NgTemplateOutlet } from '@angular/common';
+import { inject, ElementRef, Renderer2, ChangeDetectionStrategy, Component, signal, DestroyRef, InjectionToken, input, computed, viewChild, effect, HostListener, NgModule, Injectable, DOCUMENT, model, output, ApplicationRef, createComponent, isSignal, OutputEmitterRef, PLATFORM_ID, ViewChild, contentChild, contentChildren, afterNextRender, assertInInjectionContext, Injector, HostBinding, TemplateRef, runInInjectionContext, Directive, ChangeDetectorRef, viewChildren, ViewContainerRef, EnvironmentInjector } from '@angular/core';
+import { isPlatformBrowser, JsonPipe, DatePipe, NgTemplateOutlet } from '@angular/common';
+import { ShipCardComponent as ShipCardComponent$1, ShipIconComponent as ShipIconComponent$1, ShipButtonComponent as ShipButtonComponent$1 } from 'ship-ui';
 import { NgModel } from '@angular/forms';
 import { SIGNAL } from '@angular/core/primitives/signals';
 
@@ -35,8 +36,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
-function classMutationSignal() {
-    const element = inject(ElementRef).nativeElement;
+function classMutationSignal(_element = null) {
+    const element = _element ?? inject(ElementRef).nativeElement;
     if (!element)
         return signal('');
     const classListSignal = signal(element.className, ...(ngDevMode ? [{ debugName: "classListSignal" }] : []));
@@ -476,9 +477,10 @@ class ShipDialogService {
     open(component, options) {
         const environmentInjector = this.#appRef.injector;
         const hostElement = this.#createEl();
+        let closingCalled = false;
         const { data, closed, ...rest } = options || {};
         if (this.compRef) {
-            this.#cleanupRefs();
+            this.#cleanupRefs(true);
         }
         this.insertedCompRef = createComponent(component, {
             environmentInjector,
@@ -500,8 +502,12 @@ class ShipDialogService {
         }
         if (closedField instanceof OutputEmitterRef) {
             this.closedFieldSub = closedField.subscribe((...args) => {
-                closed?.(...args);
                 this.#cleanupRefs();
+                if (closingCalled)
+                    return;
+                closingCalled = true;
+                closed?.(...args);
+                this.compRef?.instance.closed.emit(...args);
             });
         }
         this.#appRef.attachView(this.insertedCompRef.hostView);
@@ -510,20 +516,22 @@ class ShipDialogService {
         this.compRef.changeDetectorRef.detectChanges();
         this.compRef.instance.isOpen.set(true);
         this.compRef.setInput('options', rest);
-        this.compRef.instance.closed.subscribe(() => closeAction());
+        this.compClosedSub = this.compRef.instance.closed.subscribe(() => closeAction());
         const _self = this;
-        function closeAction() {
+        function closeAction(arg = undefined) {
+            _self.#cleanupRefs();
+            if (closingCalled)
+                return;
+            closingCalled = true;
             if (closedField && closedField instanceof OutputEmitterRef) {
-                closedField.emit(false);
-            }
-            else {
-                closed?.(undefined);
+                closedField.emit(arg);
             }
-            _self.#cleanupRefs();
+            closed?.(arg);
         }
         return {
             component: this.insertedCompRef.instance,
             close: closeAction,
+            closed: this.compRef.instance.closed,
         };
     }
     #createEl() {
@@ -534,20 +542,24 @@ class ShipDialogService {
         }
         return this.#document.getElementById('sh-dialog-ref');
     }
-    #cleanupRefs() {
-        if (this.insertedCompRef) {
-            this.#appRef.detachView(this.insertedCompRef.hostView);
-            this.closedFieldSub?.unsubscribe();
-            this.insertedCompRef.destroy();
+    #cleanupRefs(instant = false) {
+        const _self = this;
+        instant ? cleanup : queueMicrotask(() => cleanup());
+        function cleanup() {
+            if (_self.insertedCompRef) {
+                _self.#appRef.detachView(_self.insertedCompRef.hostView);
+                _self.closedFieldSub?.unsubscribe();
+                _self.insertedCompRef.destroy();
+            }
+            if (!_self.compRef)
+                return;
+            _self.#appRef.detachView(_self.compRef.hostView);
+            _self.compClosedSub?.unsubscribe();
+            _self.compRef.destroy();
         }
-        if (!this.compRef)
-            return;
-        this.#appRef.detachView(this.compRef.hostView);
-        this.compClosedSub?.unsubscribe();
-        this.compRef.destroy();
     }
     ngOnDestroy() {
-        this.#cleanupRefs();
+        this.#cleanupRefs(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDialogService, providedIn: 'root' }); }
@@ -559,6 +571,1060 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
+function layoutNodes(nodes) {
+    if (!nodes || nodes.length === 0)
+        return nodes;
+    const layoutedNodes = structuredClone(nodes);
+    const visited = new Set();
+    const unconnectedNodes = [];
+    const connectedGraphs = [];
+    const allToNodes = new Set(layoutedNodes.flatMap((node) => node.connections).map((conn) => conn.toNode));
+    const rootNodes = layoutedNodes.filter((node) => !allToNodes.has(node.id));
+    for (const node of layoutedNodes) {
+        if (!node.connections.length) {
+            unconnectedNodes.push(node);
+        }
+    }
+    for (const root of rootNodes) {
+        if (!visited.has(root.id)) {
+            const graph = [];
+            traverseGraph(root, graph, visited, layoutedNodes);
+            if (graph.length > 0) {
+                connectedGraphs.push(graph);
+            }
+        }
+    }
+    positionUnconnectedNodes(unconnectedNodes);
+    let currentX = 20;
+    let currentY = 20;
+    connectedGraphs.forEach((graph) => {
+        const layoutedGraph = traverseAndLayout(graph);
+        positionGraph(layoutedGraph, currentX, currentY);
+        currentY += getGraphHeight(layoutedGraph) + 200;
+    });
+    return layoutedNodes;
+}
+function traverseGraph(startNode, graph, visited, allNodes) {
+    const queue = [startNode];
+    visited.add(startNode.id);
+    let head = 0;
+    while (head < queue.length) {
+        const node = queue[head++];
+        graph.push(node);
+        node.connections.forEach((conn) => {
+            const toNode = allNodes.find((n) => n.id === conn.toNode);
+            if (toNode && !visited.has(toNode.id)) {
+                visited.add(toNode.id);
+                queue.push(toNode);
+            }
+        });
+    }
+}
+function positionUnconnectedNodes(nodes) {
+    nodes.forEach((node, index) => {
+        node.coordinates[0] = 20 + index * 200;
+        node.coordinates[1] = 20;
+    });
+}
+function traverseAndLayout(graph) {
+    const graphNodeMap = new Map(graph.map((n) => [n.id, n]));
+    const incomingConnectionCount = new Map();
+    graph.forEach((node) => {
+        incomingConnectionCount.set(node.id, 0);
+    });
+    graph
+        .flatMap((n) => n.connections)
+        .forEach((conn) => {
+        if (graphNodeMap.has(conn.toNode)) {
+            incomingConnectionCount.set(conn.toNode, (incomingConnectionCount.get(conn.toNode) || 0) + 1);
+        }
+    });
+    const roots = graph.filter((node) => (incomingConnectionCount.get(node.id) || 0) === 0);
+    const layoutedNodes = new Set();
+    const queue = [...roots];
+    let head = 0;
+    while (head < queue.length) {
+        const currentNode = queue[head++];
+        layoutedNodes.add(currentNode.id);
+        let outputConnectionIndex = 0;
+        const connectedNodes = [];
+        currentNode.connections.forEach((conn) => {
+            const toNode = graphNodeMap.get(conn.toNode);
+            if (toNode && !layoutedNodes.has(toNode.id)) {
+                connectedNodes.push(toNode);
+            }
+        });
+        connectedNodes.forEach((toNode) => {
+            toNode.coordinates[0] = currentNode.coordinates[0] + 200;
+            if (connectedNodes.length > 1) {
+                const verticalOffset = (outputConnectionIndex - (connectedNodes.length - 1) / 2) * 200;
+                toNode.coordinates[1] = currentNode.coordinates[1] + verticalOffset;
+            }
+            else {
+                toNode.coordinates[1] = currentNode.coordinates[1];
+            }
+            queue.push(toNode);
+            outputConnectionIndex++;
+        });
+    }
+    return graph;
+}
+function positionGraph(graph, startX, startY) {
+    const minX = Math.min(...graph.map((n) => n.coordinates[0]));
+    const minY = Math.min(...graph.map((n) => n.coordinates[1]));
+    graph.forEach((node) => {
+        node.coordinates[0] += startX - minX;
+        node.coordinates[1] += startY - minY;
+    });
+}
+function getGraphHeight(graph) {
+    if (!graph.length)
+        return 0;
+    const maxY = Math.max(...graph.map((n) => n.coordinates[1]));
+    const minY = Math.min(...graph.map((n) => n.coordinates[1]));
+    return maxY - minY;
+}
+
+function findDuplicatePortIDs(nodes) {
+    const errors = [];
+    for (const node of nodes) {
+        const portIdCounts = new Map();
+        const allPorts = [...node.inputs, ...node.outputs];
+        for (const port of allPorts) {
+            const count = portIdCounts.get(port.id) || 0;
+            portIdCounts.set(port.id, count + 1);
+        }
+        const duplicatePortIds = [];
+        for (const [id, count] of portIdCounts.entries()) {
+            if (count > 1) {
+                duplicatePortIds.push(id);
+            }
+        }
+        if (duplicatePortIds.length > 0) {
+            errors.push({
+                nodeId: node.id,
+                duplicatePortIds: duplicatePortIds,
+            });
+        }
+    }
+    return errors;
+}
+function findDuplicateNodeIDs(nodes) {
+    const nodeIdCounts = new Map();
+    for (const node of nodes) {
+        const count = nodeIdCounts.get(node.id) || 0;
+        nodeIdCounts.set(node.id, count + 1);
+    }
+    const duplicateNodeIds = [];
+    for (const [id, count] of nodeIdCounts.entries()) {
+        if (count > 1) {
+            duplicateNodeIds.push(id);
+        }
+    }
+    return duplicateNodeIds;
+}
+
+const TEST_NODES = [
+    {
+        id: 'a1',
+        name: 'hello a1',
+        coordinates: [0, 0],
+        inputs: [],
+        outputs: [{ id: 'out-1', name: 'Start Output' }],
+        connections: [{ fromNode: 'a1', fromPort: 'out-1', toNode: 'b1', toPort: 'in-1' }],
+    },
+    {
+        id: 'b1',
+        coordinates: [0, 0],
+        inputs: [
+            { id: 'in-1', name: 'Input A' },
+            { id: 'in-1', name: 'Another Input A' },
+        ],
+        outputs: [{ id: 'out-1', name: 'Output B' }],
+        connections: [
+            { fromNode: 'b1', fromPort: 'out-1', toNode: 'c6', toPort: 'in-1' },
+            { fromNode: 'a1', fromPort: 'out-1', toNode: 'b1', toPort: 'in-1' },
+        ],
+    },
+    {
+        id: 'c6',
+        name: 'hello c6',
+        coordinates: [0, 0],
+        inputs: [{ id: 'in-1', name: 'Input C' }],
+        outputs: [{ id: 'out-1', name: 'Output D' }],
+        connections: [{ fromNode: 'b1', fromPort: 'out-1', toNode: 'c6', toPort: 'in-1' }],
+    },
+];
+class ShipBlueprintComponent {
+    #ZOOM_SPEED;
+    #MAX_ZOOM;
+    #MIN_ZOOM;
+    #document;
+    #platformId;
+    #selfRef;
+    #currentClass;
+    #htmlClass;
+    #currentGridColor;
+    #draggingNodeCoordinates;
+    #isDragging;
+    #lastMouseX;
+    #lastMouseY;
+    #initialPinchDistance;
+    #isNodeDragging;
+    #draggedNodeId;
+    #dragOffset;
+    #connections;
+    #ctx;
+    #resizeObserver;
+    constructor() {
+        this.#ZOOM_SPEED = 0.01;
+        this.#MAX_ZOOM = 1.5;
+        this.#MIN_ZOOM = 0.5;
+        this.#document = inject(DOCUMENT);
+        this.#platformId = inject(PLATFORM_ID);
+        this.#selfRef = inject((ElementRef));
+        this.#currentClass = classMutationSignal();
+        this.#htmlClass = classMutationSignal(this.#document.documentElement);
+        this.asDots = computed(() => this.#currentClass().includes('dots'), ...(ngDevMode ? [{ debugName: "asDots" }] : []));
+        this.lightMode = computed(() => this.#htmlClass().includes('light'), ...(ngDevMode ? [{ debugName: "lightMode" }] : []));
+        this.forceUnique = input(true, ...(ngDevMode ? [{ debugName: "forceUnique" }] : []));
+        this.autoLayout = input(false, ...(ngDevMode ? [{ debugName: "autoLayout" }] : []));
+        this.gridSize = input(20, ...(ngDevMode ? [{ debugName: "gridSize" }] : []));
+        this.snapToGrid = input(true, ...(ngDevMode ? [{ debugName: "snapToGrid" }] : []));
+        this.gridColor = input(['#d8d8d8', '#2c2c2c'], ...(ngDevMode ? [{ debugName: "gridColor" }] : []));
+        this.nodes = model([], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
+        this.#currentGridColor = computed(() => this.gridColor()[this.lightMode() ? 0 : 1], ...(ngDevMode ? [{ debugName: "#currentGridColor" }] : []));
+        this.panX = signal(0, ...(ngDevMode ? [{ debugName: "panX" }] : []));
+        this.panY = signal(0, ...(ngDevMode ? [{ debugName: "panY" }] : []));
+        this.zoomLevel = signal(1, ...(ngDevMode ? [{ debugName: "zoomLevel" }] : []));
+        this.gridSnapSize = signal(20, ...(ngDevMode ? [{ debugName: "gridSnapSize" }] : []));
+        this.isHoveringNode = signal(false, ...(ngDevMode ? [{ debugName: "isHoveringNode" }] : []));
+        this.midpointDivPosition = signal(null, ...(ngDevMode ? [{ debugName: "midpointDivPosition" }] : []));
+        this.showMidpointDiv = signal(false, ...(ngDevMode ? [{ debugName: "showMidpointDiv" }] : []));
+        this.isLocked = signal(false, ...(ngDevMode ? [{ debugName: "isLocked" }] : []));
+        this.draggingConnection = signal(null, ...(ngDevMode ? [{ debugName: "draggingConnection" }] : []));
+        this.validationErrors = signal(null, ...(ngDevMode ? [{ debugName: "validationErrors" }] : []));
+        this.highlightedConnection = signal(null, ...(ngDevMode ? [{ debugName: "highlightedConnection" }] : []));
+        this.#draggingNodeCoordinates = signal(null, ...(ngDevMode ? [{ debugName: "#draggingNodeCoordinates" }] : []));
+        this.#isDragging = signal(false, ...(ngDevMode ? [{ debugName: "#isDragging" }] : []));
+        this.#lastMouseX = signal(0, ...(ngDevMode ? [{ debugName: "#lastMouseX" }] : []));
+        this.#lastMouseY = signal(0, ...(ngDevMode ? [{ debugName: "#lastMouseY" }] : []));
+        this.#initialPinchDistance = signal(0, ...(ngDevMode ? [{ debugName: "#initialPinchDistance" }] : []));
+        this.#isNodeDragging = signal(false, ...(ngDevMode ? [{ debugName: "#isNodeDragging" }] : []));
+        this.#draggedNodeId = signal(null, ...(ngDevMode ? [{ debugName: "#draggedNodeId" }] : []));
+        this.#dragOffset = signal(null, ...(ngDevMode ? [{ debugName: "#dragOffset" }] : []));
+        this.#connections = signal([], ...(ngDevMode ? [{ debugName: "#connections" }] : []));
+        if (isPlatformBrowser(this.#platformId)) {
+            effect(() => {
+                this.asDots();
+                this.panX();
+                this.panY();
+                this.zoomLevel();
+                this.nodes();
+                this.#connections();
+                this.draggingConnection();
+                this.#currentGridColor();
+                this.highlightedConnection();
+                this.#draggingNodeCoordinates();
+                requestAnimationFrame(() => this.drawCanvas());
+            });
+            effect(() => {
+                const nodes = this.nodes();
+                const connectionsFromNodes = nodes.flatMap((node) => node.connections);
+                const uniqueConnections = connectionsFromNodes.filter((conn, index, self) => index ===
+                    self.findIndex((c) => c.fromNode === conn.fromNode &&
+                        c.fromPort === conn.fromPort &&
+                        c.toNode === conn.toNode &&
+                        c.toPort === conn.toPort));
+                this.#connections.set(uniqueConnections);
+            });
+        }
+    }
+    ngAfterViewInit() {
+        if (isPlatformBrowser(this.#platformId)) {
+            const canvas = this.canvasRef.nativeElement;
+            this.#ctx = canvas.getContext('2d');
+            this.#resizeObserver = new ResizeObserver(() => this.updateCanvasSize());
+            this.#resizeObserver.observe(this.#selfRef.nativeElement);
+            this.updateCanvasSize();
+            if (this.autoLayout()) {
+                this.applyAutolayout();
+            }
+            if (this.forceUnique()) {
+                this.#removeDuplicatesAndReinitiate();
+            }
+            else {
+                this.#validateNodes();
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.#resizeObserver) {
+            this.#resizeObserver.disconnect();
+        }
+    }
+    #validateNodes() {
+        const duplicatePortIds = findDuplicatePortIDs(this.nodes());
+        const duplicateNodeIds = findDuplicateNodeIDs(this.nodes());
+        this.validationErrors.set({
+            duplicateNodeIds,
+            duplicatePortIds,
+        });
+    }
+    applyAutolayout() {
+        const newNodes = layoutNodes(this.nodes());
+        this.nodes.set(newNodes);
+    }
+    updateCanvasSize() {
+        const canvas = this.canvasRef.nativeElement;
+        const rect = this.#selfRef.nativeElement.getBoundingClientRect();
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = rect.width * dpr;
+        canvas.height = rect.height * dpr;
+        this.#ctx.scale(dpr, dpr);
+        canvas.style.width = `${rect.width}px`;
+        canvas.style.height = `${rect.height}px`;
+        this.drawCanvas();
+    }
+    drawCanvas() {
+        if (!this.#ctx)
+            return;
+        const ctx = this.#ctx;
+        const { width, height } = this.canvasRef.nativeElement;
+        const dpr = window.devicePixelRatio || 1;
+        ctx.clearRect(0, 0, width / dpr, height / dpr);
+        ctx.save();
+        ctx.translate(this.panX(), this.panY());
+        ctx.scale(this.zoomLevel(), this.zoomLevel());
+        this.drawGrid(ctx);
+        this.drawConnections(ctx);
+        if (this.draggingConnection()) {
+            this.drawDraggingPath(ctx);
+        }
+        ctx.restore();
+    }
+    drawGrid(ctx) {
+        const { width, height } = this.canvasRef.nativeElement;
+        const dpr = window.devicePixelRatio || 1;
+        const zoom = this.zoomLevel();
+        const panX = this.panX();
+        const panY = this.panY();
+        const gridSize = this.gridSize();
+        const gridColor = this.#currentGridColor();
+        const scaledGridSize = gridSize * zoom;
+        const dynamicGridSize = scaledGridSize < 20 ? gridSize * 4 : gridSize;
+        const startX = Math.floor(-panX / zoom / dynamicGridSize) * dynamicGridSize;
+        const startY = Math.floor(-panY / zoom / dynamicGridSize) * dynamicGridSize;
+        const endX = startX + width / dpr / zoom + dynamicGridSize;
+        const endY = startY + height / dpr / zoom + dynamicGridSize;
+        if (this.asDots()) {
+            const dotRadius = 1 / zoom;
+            ctx.fillStyle = gridColor;
+            for (let x = startX; x < endX; x += dynamicGridSize) {
+                for (let y = startY; y < endY; y += dynamicGridSize) {
+                    ctx.beginPath();
+                    ctx.arc(x, y, dotRadius, 0, 2 * Math.PI);
+                    ctx.fill();
+                }
+            }
+        }
+        else {
+            ctx.beginPath();
+            ctx.strokeStyle = gridColor;
+            ctx.lineWidth = 1 / zoom;
+            for (let x = startX; x < endX; x += dynamicGridSize) {
+                ctx.moveTo(x, startY);
+                ctx.lineTo(x, endY);
+            }
+            for (let y = startY; y < endY; y += dynamicGridSize) {
+                ctx.moveTo(startX, y);
+                ctx.lineTo(endX, y);
+            }
+            ctx.stroke();
+        }
+    }
+    drawConnections(ctx) {
+        const highlighted = this.highlightedConnection();
+        ctx.lineWidth = 2 / this.zoomLevel();
+        for (const conn of this.#connections()) {
+            const isHighlighted = highlighted?.fromNode === conn.fromNode &&
+                highlighted?.fromPort === conn.fromPort &&
+                highlighted?.toNode === conn.toNode &&
+                highlighted?.toPort === conn.toPort;
+            ctx.strokeStyle = isHighlighted ? '#ffc107' : '#888';
+            ctx.beginPath();
+            const startPos = this.getNodePortPosition(conn.fromNode, conn.fromPort);
+            const endPos = this.getNodePortPosition(conn.toNode, conn.toPort);
+            this.drawCurvedPath(ctx, startPos, endPos);
+            ctx.stroke();
+        }
+    }
+    drawDraggingPath(ctx) {
+        const conn = this.draggingConnection();
+        const startPos = this.getNodePortPosition(conn.fromNode, conn.fromPort);
+        const endPos = [conn.x2, conn.y2];
+        ctx.strokeStyle = '#5a9cf8';
+        ctx.lineWidth = 2 / this.zoomLevel();
+        ctx.beginPath();
+        this.drawCurvedPath(ctx, startPos, endPos);
+        ctx.stroke();
+    }
+    drawCurvedPath(ctx, start, end) {
+        const [x1, y1] = start;
+        const [x2, y2] = end;
+        const dx = Math.abs(x1 - x2) * 0.7;
+        ctx.moveTo(x1, y1);
+        ctx.bezierCurveTo(x1 + dx, y1, x2 - dx, y2, x2, y2);
+    }
+    onMouseUp(event) {
+        if (this.isLocked())
+            return;
+        this.endPan();
+        this.endNodeDrag();
+    }
+    onClick(event) {
+        const target = event.target;
+        if (this.draggingConnection()) {
+            if (!target.closest('.port')) {
+                this.cancelPortDrag();
+            }
+        }
+        else if (this.isLocked() && !target.closest('.midpoint-div')) {
+            this.closeMidpointDiv();
+        }
+        else {
+            this.#handleConnectionClick(event);
+        }
+    }
+    onEscape(event) {
+        if (this.draggingConnection()) {
+            this.cancelPortDrag();
+        }
+        else if (this.isLocked()) {
+            this.closeMidpointDiv();
+        }
+    }
+    onMouseMove(event) {
+        if (this.isLocked())
+            return;
+        if (this.#isNodeDragging()) {
+            this.nodeDrag(event);
+        }
+        else if (this.draggingConnection()) {
+            this.updatePathOnMove(event);
+        }
+        else {
+            this.pan(event);
+            if (this.isHoveringNode()) {
+                this.highlightedConnection.set(null);
+            }
+            else {
+                this.#checkConnectionHover(event);
+            }
+        }
+    }
+    onTouchMove(event) {
+        if (this.isLocked())
+            return;
+        if (this.#isNodeDragging()) {
+            this.nodeDrag(event.touches[0]);
+        }
+        else if (this.draggingConnection()) {
+            this.updatePathOnMove(event.touches[0]);
+        }
+        else {
+            this.handleTouchMove(event);
+        }
+    }
+    startNodeDrag(event, nodeId) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.#isNodeDragging.set(true);
+        this.#draggedNodeId.set(nodeId);
+        const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
+        const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
+        const blueprintRect = this.#selfRef.nativeElement.getBoundingClientRect();
+        const worldX = (clientX - blueprintRect.left - this.panX()) / this.zoomLevel();
+        const worldY = (clientY - blueprintRect.top - this.panY()) / this.zoomLevel();
+        const draggedNode = this.nodes().find((n) => n.id === nodeId);
+        if (draggedNode) {
+            this.#dragOffset.set([worldX - draggedNode.coordinates[0], worldY - draggedNode.coordinates[1]]);
+        }
+        this.#lastMouseX.set(clientX);
+        this.#lastMouseY.set(clientY);
+    }
+    endNodeDrag() {
+        const draggedId = this.#draggedNodeId();
+        const finalCoords = this.#draggingNodeCoordinates();
+        if (draggedId && finalCoords) {
+            this.nodes.update((nodes) => {
+                const node = nodes.find((n) => n.id === draggedId);
+                if (node) {
+                    node.coordinates = finalCoords;
+                }
+                return [...nodes];
+            });
+        }
+        this.#isNodeDragging.set(false);
+        this.#draggedNodeId.set(null);
+        this.#dragOffset.set(null);
+        this.#draggingNodeCoordinates.set(null);
+    }
+    nodeDrag(event) {
+        const draggedId = this.#draggedNodeId();
+        if (!this.#isNodeDragging() || !draggedId)
+            return;
+        const { clientX, clientY } = event;
+        const blueprintRect = this.#selfRef.nativeElement.getBoundingClientRect();
+        const worldX = (clientX - blueprintRect.left - this.panX()) / this.zoomLevel();
+        const worldY = (clientY - blueprintRect.top - this.panY()) / this.zoomLevel();
+        let newX = worldX - this.#dragOffset()[0];
+        let newY = worldY - this.#dragOffset()[1];
+        if (this.snapToGrid() || (event instanceof MouseEvent && event.shiftKey)) {
+            const grid = this.gridSnapSize();
+            newX = Math.round(newX / grid) * grid;
+            newY = Math.round(newY / grid) * grid;
+        }
+        this.#draggingNodeCoordinates.set([newX, newY]);
+        this.#lastMouseX.set(clientX);
+        this.#lastMouseY.set(clientY);
+    }
+    startPortDrag(event, nodeId, portId) {
+        event.stopPropagation();
+        if (this.draggingConnection())
+            this.cancelPortDrag();
+        const node = this.nodes().find((n) => n.id === nodeId);
+        if (node) {
+            this.draggingConnection.set({
+                fromNode: nodeId,
+                fromPort: portId,
+                x2: node.coordinates[0],
+                y2: node.coordinates[1],
+            });
+        }
+        this.updatePathOnMove(event);
+    }
+    endPortDrag(_, toNodeId, toPortId) {
+        if (!this.draggingConnection())
+            return;
+        const from = this.draggingConnection();
+        if (from.fromNode === toNodeId) {
+            this.cancelPortDrag();
+            return;
+        }
+        const newConnection = {
+            fromNode: from.fromNode,
+            fromPort: from.fromPort,
+            toNode: toNodeId,
+            toPort: toPortId,
+        };
+        this.nodes.update((nodes) => {
+            const fromNode = nodes.find((n) => n.id === newConnection.fromNode);
+            const toNode = nodes.find((n) => n.id === newConnection.toNode);
+            if (fromNode && toNode) {
+                const isDuplicateFrom = fromNode.connections.some((c) => c.fromNode === newConnection.fromNode &&
+                    c.fromPort === newConnection.fromPort &&
+                    c.toNode === newConnection.toNode &&
+                    c.toPort === newConnection.toPort);
+                if (!isDuplicateFrom) {
+                    fromNode.connections = [...fromNode.connections, newConnection];
+                }
+                const isDuplicateTo = toNode.connections.some((c) => c.fromNode === newConnection.fromNode &&
+                    c.fromPort === newConnection.fromPort &&
+                    c.toNode === newConnection.toNode &&
+                    c.toPort === newConnection.toPort);
+                if (!isDuplicateTo) {
+                    toNode.connections = [...toNode.connections, newConnection];
+                }
+            }
+            return [...nodes];
+        });
+        this.cancelPortDrag();
+    }
+    cancelPortDrag() {
+        this.draggingConnection.set(null);
+    }
+    updatePathOnMove(event) {
+        if (!this.draggingConnection())
+            return;
+        const blueprintRect = this.#selfRef.nativeElement.getBoundingClientRect();
+        const x2 = (event.clientX - blueprintRect.left - this.panX()) / this.zoomLevel();
+        const y2 = (event.clientY - blueprintRect.top - this.panY()) / this.zoomLevel();
+        this.draggingConnection.update((conn) => (conn ? { ...conn, x2, y2 } : conn));
+    }
+    getNodePortPosition(nodeId, portId) {
+        const node = this.nodes().find((n) => n.id === nodeId);
+        if (!node)
+            return [0, 0];
+        const portEl = this.#selfRef.nativeElement.querySelector(`[data-node-id="${nodeId}"][data-port-id="${portId}"]`);
+        if (!portEl)
+            return node.coordinates;
+        const nodeWrapper = this.#selfRef.nativeElement.querySelector('.nodes-wrapper');
+        const wrapperRect = nodeWrapper.getBoundingClientRect();
+        const portRect = portEl.getBoundingClientRect();
+        const portCenterX = portRect.left + portRect.width / 2;
+        const portCenterY = portRect.top + portRect.height / 2;
+        const worldX = (portCenterX - wrapperRect.left) / this.zoomLevel();
+        const worldY = (portCenterY - wrapperRect.top) / this.zoomLevel();
+        return [worldX, worldY];
+    }
+    startPan(event) {
+        if (this.isLocked())
+            return;
+        if (event.target instanceof HTMLElement && event.target.closest('.node'))
+            return;
+        event.preventDefault();
+        this.#isDragging.set(true);
+        this.#lastMouseX.set(event.clientX);
+        this.#lastMouseY.set(event.clientY);
+    }
+    endPan() {
+        this.#isDragging.set(false);
+    }
+    pan(event) {
+        if (!this.#isDragging() || this.isLocked())
+            return;
+        const dx = event.clientX - this.#lastMouseX();
+        const dy = event.clientY - this.#lastMouseY();
+        this.panX.update((x) => x + dx);
+        this.panY.update((y) => y + dy);
+        this.#lastMouseX.set(event.clientX);
+        this.#lastMouseY.set(event.clientY);
+    }
+    zoom(event) {
+        event.preventDefault();
+        const oldZoom = this.zoomLevel();
+        const newZoom = this.#clamp(oldZoom * (1 - event.deltaY * this.#ZOOM_SPEED), this.#MIN_ZOOM, this.#MAX_ZOOM);
+        const panRatio = newZoom / oldZoom;
+        const newPanX = event.clientX - (event.clientX - this.panX()) * panRatio;
+        const newPanY = event.clientY - (event.clientY - this.panY()) * panRatio;
+        this.zoomLevel.set(newZoom);
+        this.panX.set(newPanX);
+        this.panY.set(newPanY);
+    }
+    handleTouchStart(event) {
+        if (event.target instanceof HTMLElement && event.target.closest('.node'))
+            return;
+        event.preventDefault();
+        if (event.touches.length === 1) {
+            this.#isDragging.set(true);
+            this.#lastMouseX.set(event.touches[0].clientX);
+            this.#lastMouseY.set(event.touches[0].clientY);
+        }
+        else if (event.touches.length === 2) {
+            this.#isDragging.set(false);
+            this.#initialPinchDistance.set(this.#getDistance(event.touches[0], event.touches[1]));
+        }
+    }
+    handleTouchMove(event) {
+        if (event.touches.length === 1 && this.#isDragging()) {
+            const dx = event.touches[0].clientX - this.#lastMouseX();
+            const dy = event.touches[0].clientY - this.#lastMouseY();
+            this.panX.update((x) => x + dx);
+            this.panY.update((y) => y + dy);
+            this.#lastMouseX.set(event.touches[0].clientX);
+            this.#lastMouseY.set(event.touches[0].clientY);
+        }
+        else if (event.touches.length === 2) {
+            const newPinchDistance = this.#getDistance(event.touches[0], event.touches[1]);
+            const pinchRatio = newPinchDistance / this.#initialPinchDistance();
+            const oldZoom = this.zoomLevel();
+            const newZoom = this.#clamp(oldZoom * pinchRatio, this.#MIN_ZOOM, this.#MAX_ZOOM);
+            const pinchCenterX = (event.touches[0].clientX + event.touches[1].clientX) / 2;
+            const pinchCenterY = (event.touches[0].clientY + event.touches[1].clientY) / 2;
+            const panRatio = newZoom / oldZoom;
+            const newPanX = pinchCenterX - (pinchCenterX - this.panX()) * panRatio;
+            const newPanY = pinchCenterY - (pinchCenterY - this.panY()) * panRatio;
+            this.zoomLevel.set(newZoom);
+            this.panX.set(newPanX);
+            this.panY.set(newPanY);
+            this.#initialPinchDistance.set(newPinchDistance);
+        }
+    }
+    handleTouchEnd() {
+        this.#isDragging.set(false);
+    }
+    closeMidpointDiv() {
+        this.showMidpointDiv.set(false);
+        this.midpointDivPosition.set(null);
+        this.isLocked.set(false);
+    }
+    getDisplayCoordinates(node) {
+        const draggedId = this.#draggedNodeId();
+        const draggingCoords = this.#draggingNodeCoordinates();
+        if (draggedId === node.id && draggingCoords) {
+            return `translate(${draggingCoords[0]}px, ${draggingCoords[1]}px)`;
+        }
+        return `translate(${node.coordinates[0]}px, ${node.coordinates[1]}px)`;
+    }
+    removeConnection() {
+        const conn = this.highlightedConnection();
+        if (!conn)
+            return;
+        this.#connections.update((conns) => conns.filter((c) => !(c.fromNode === conn.fromNode &&
+            c.fromPort === conn.fromPort &&
+            c.toNode === conn.toNode &&
+            c.toPort === conn.toPort)));
+        this.nodes.update((nodes) => nodes.map((n) => ({
+            ...n,
+            connections: n.connections.filter((c) => !(c.fromNode === conn.fromNode &&
+                c.fromPort === conn.fromPort &&
+                c.toNode === conn.toNode &&
+                c.toPort === conn.toPort)),
+        })));
+        this.highlightedConnection.set(null);
+        this.closeMidpointDiv();
+    }
+    #removeDuplicatesAndReinitiate() {
+        const nodes = this.nodes();
+        const uniqueNodesMap = new Map();
+        const uniqueNodes = [];
+        for (const node of nodes) {
+            if (!uniqueNodesMap.has(node.id)) {
+                uniqueNodesMap.set(node.id, node);
+                uniqueNodes.push(node);
+            }
+        }
+        const nodesWithUniquePorts = uniqueNodes.map((node) => {
+            const uniqueInputs = new Map();
+            const uniqueOutputs = new Map();
+            const uniqueNodeInputs = node.inputs.filter((port) => {
+                if (!uniqueInputs.has(port.id)) {
+                    uniqueInputs.set(port.id, port);
+                    return true;
+                }
+                return false;
+            });
+            const uniqueNodeOutputs = node.outputs.filter((port) => {
+                if (!uniqueOutputs.has(port.id)) {
+                    uniqueOutputs.set(port.id, port);
+                    return true;
+                }
+                return false;
+            });
+            return {
+                ...node,
+                inputs: uniqueNodeInputs,
+                outputs: uniqueNodeOutputs,
+            };
+        });
+        const finalNodes = nodesWithUniquePorts.map((node) => {
+            const validConnections = node.connections.filter((conn) => {
+                const fromNodeExists = nodesWithUniquePorts.some((n) => n.id === conn.fromNode);
+                const toNodeExists = nodesWithUniquePorts.some((n) => n.id === conn.toNode);
+                const fromPortExists = nodesWithUniquePorts
+                    .find((n) => n.id === conn.fromNode)
+                    ?.outputs.some((p) => p.id === conn.fromPort);
+                const toPortExists = nodesWithUniquePorts
+                    .find((n) => n.id === conn.toNode)
+                    ?.inputs.some((p) => p.id === conn.toPort);
+                return fromNodeExists && toNodeExists && fromPortExists && toPortExists;
+            });
+            return { ...node, connections: validConnections };
+        });
+        this.nodes.set(finalNodes);
+    }
+    #handleConnectionClick(event) {
+        if (this.highlightedConnection()) {
+            const conn = this.highlightedConnection();
+            const startPos = this.getNodePortPosition(conn.fromNode, conn.fromPort);
+            const endPos = this.getNodePortPosition(conn.toNode, conn.toPort);
+            const midpoint = this.#getBezierMidpoint(startPos, endPos);
+            this.midpointDivPosition.set({ x: midpoint[0], y: midpoint[1] });
+            this.showMidpointDiv.set(true);
+            this.isLocked.set(true);
+        }
+    }
+    #getBezierMidpoint(start, end) {
+        const t = 0.5;
+        const [x1, y1] = start;
+        const [x2, y2] = end;
+        const dx = Math.abs(x1 - x2) * 0.7;
+        const cp1x = x1 + dx;
+        const cp1y = y1;
+        const cp2x = x2 - dx;
+        const cp2y = y2;
+        const mx = Math.pow(1 - t, 3) * x1 +
+            3 * Math.pow(1 - t, 2) * t * cp1x +
+            3 * (1 - t) * Math.pow(t, 2) * cp2x +
+            Math.pow(t, 3) * x2;
+        const my = Math.pow(1 - t, 3) * y1 +
+            3 * Math.pow(1 - t, 2) * t * cp1y +
+            3 * (1 - t) * Math.pow(t, 2) * cp2y +
+            Math.pow(t, 3) * y2;
+        return [mx, my];
+    }
+    #checkConnectionHover(event) {
+        const blueprintRect = this.#selfRef.nativeElement.getBoundingClientRect();
+        const worldX = (event.clientX - blueprintRect.left - this.panX()) / this.zoomLevel();
+        const worldY = (event.clientY - blueprintRect.top - this.panY()) / this.zoomLevel();
+        const cursorPoint = [worldX, worldY];
+        let hoveredConn = null;
+        const tolerance = 10 / this.zoomLevel();
+        for (const conn of this.#connections()) {
+            const startPos = this.getNodePortPosition(conn.fromNode, conn.fromPort);
+            const endPos = this.getNodePortPosition(conn.toNode, conn.toPort);
+            if (this.#isPointNearBezierCurve(cursorPoint, startPos, endPos, tolerance)) {
+                hoveredConn = conn;
+                break;
+            }
+        }
+        this.highlightedConnection.set(hoveredConn);
+    }
+    #isPointNearBezierCurve(point, start, end, tolerance = 10) {
+        const [x1, y1] = start;
+        const [x2, y2] = end;
+        const dx = Math.abs(x1 - x2) * 0.7;
+        const cp1x = x1 + dx;
+        const cp1y = y1;
+        const cp2x = x2 - dx;
+        const cp2y = y2;
+        const steps = 20;
+        for (let i = 0; i <= steps; i++) {
+            const t = i / steps;
+            const x = Math.pow(1 - t, 3) * x1 +
+                3 * Math.pow(1 - t, 2) * t * cp1x +
+                3 * (1 - t) * Math.pow(t, 2) * cp2x +
+                Math.pow(t, 3) * x2;
+            const y = Math.pow(1 - t, 3) * y1 +
+                3 * Math.pow(1 - t, 2) * t * cp1y +
+                3 * (1 - t) * Math.pow(t, 2) * cp2y +
+                Math.pow(t, 3) * y2;
+            const distance = Math.sqrt(Math.pow(point[0] - x, 2) + Math.pow(point[1] - y, 2));
+            if (distance < tolerance) {
+                return true;
+            }
+        }
+        return false;
+    }
+    getNewNodeCoordinates(panToCoordinates = false) {
+        let lowestY = 0;
+        if (this.nodes().length > 0) {
+            lowestY = this.nodes().reduce((max, node) => Math.max(max, node.coordinates[1]), 0);
+        }
+        const newCoordinates = [20, lowestY + 200];
+        if (panToCoordinates) {
+            this.#panToCoordinates(newCoordinates);
+        }
+        return newCoordinates;
+    }
+    #panToCoordinates(coords) {
+        const [x, y] = coords;
+        const rect = this.#selfRef.nativeElement.getBoundingClientRect();
+        this.panX.set(rect.width / 2 - x * this.zoomLevel());
+        this.panY.set(rect.height / 2 - y * this.zoomLevel());
+    }
+    #getDistance(touch1, touch2) {
+        const dx = touch1.clientX - touch2.clientX;
+        const dy = touch1.clientY - touch2.clientY;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+    #clamp(value, min, max) {
+        return Math.max(min, Math.min(max, value));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipBlueprintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipBlueprintComponent, isStandalone: true, selector: "sh-blueprint", inputs: { forceUnique: { classPropertyName: "forceUnique", publicName: "forceUnique", isSignal: true, isRequired: false, transformFunction: null }, autoLayout: { classPropertyName: "autoLayout", publicName: "autoLayout", isSignal: true, isRequired: false, transformFunction: null }, gridSize: { classPropertyName: "gridSize", publicName: "gridSize", isSignal: true, isRequired: false, transformFunction: null }, snapToGrid: { classPropertyName: "snapToGrid", publicName: "snapToGrid", isSignal: true, isRequired: false, transformFunction: null }, gridColor: { classPropertyName: "gridColor", publicName: "gridColor", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodes: "nodesChange" }, host: { listeners: { "document:mouseup": "onMouseUp($event)", "document:click": "onClick($event)", "document:keydown.escape": "onEscape($event)", "document:mousemove": "onMouseMove($event)", "document:touchmove": "onTouchMove($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["blueprintCanvas"], descendants: true, static: true }], ngImport: i0, template: `
+    <div
+      class="canvas-container"
+      [class.locked]="isLocked()"
+      [class.hovering-connection]="highlightedConnection()"
+      (mousedown)="startPan($event)"
+      (mousemove)="pan($event)"
+      (wheel)="zoom($event)"
+      (touchstart)="handleTouchStart($event)"
+      (touchmove)="handleTouchMove($event)"
+      (touchend)="handleTouchEnd()">
+      <div class="action-panel">
+        <button shButton (click)="applyAutolayout()" class="small">
+          Autolayout
+          <sh-icon>tree-structure</sh-icon>
+        </button>
+
+        <ng-content />
+      </div>
+
+      <canvas #blueprintCanvas></canvas>
+
+      @if (validationErrors()) {
+        <sh-card class="validation-errors type-c">
+          Something went wrong you have
+          <br />
+          duplicate node IDs or port IDs
+          <pre>{{ validationErrors() | json }}</pre>
+        </sh-card>
+      } @else {
+        <div
+          class="nodes-wrapper"
+          [style.transform]="'translate(' + panX() + 'px, ' + panY() + 'px) scale(' + zoomLevel() + ')'"
+          [style.transform-origin]="'0 0'">
+          @for (node of nodes(); track node.id) {
+            <sh-card
+              class="node type-c"
+              [style.transform]="getDisplayCoordinates(node)"
+              (mouseenter)="isHoveringNode.set(true)"
+              (mouseleave)="isHoveringNode.set(false)">
+              <header (mousedown)="startNodeDrag($event, node.id)" (touchstart)="startNodeDrag($event, node.id)">
+                <span class="node-title">{{ node.name ? node.name : node.id }}</span>
+                <sh-icon>list</sh-icon>
+              </header>
+              <div class="ports">
+                <div class="inputs">
+                  @for (inputPort of node.inputs; track inputPort.id) {
+                    <div class="port-wrap">
+                      <div
+                        class="port input-port"
+                        [attr.data-node-id]="node.id"
+                        [attr.data-port-id]="inputPort.id"
+                        (click)="endPortDrag($event, node.id, inputPort.id)"></div>
+                      <span class="port-name">{{ inputPort.name }}</span>
+                    </div>
+                  }
+                </div>
+                <div class="outputs">
+                  @for (outputPort of node.outputs; track outputPort.id) {
+                    <div class="port-wrap">
+                      <span class="port-name">{{ outputPort.name }}</span>
+                      <div
+                        class="port output-port"
+                        [attr.data-node-id]="node.id"
+                        [attr.data-port-id]="outputPort.id"
+                        (click)="startPortDrag($event, node.id, outputPort.id)"></div>
+                    </div>
+                  }
+                </div>
+              </div>
+            </sh-card>
+          }
+
+          @if (showMidpointDiv()) {
+            <div
+              class="midpoint-div"
+              (click)="removeConnection()"
+              [style.left.px]="midpointDivPosition()?.x"
+              [style.top.px]="midpointDivPosition()?.y">
+              Remove connection
+              <sh-icon>trash</sh-icon>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipCardComponent$1, selector: "sh-card" }, { kind: "component", type: ShipIconComponent$1, selector: "sh-icon" }, { kind: "component", type: ShipButtonComponent$1, selector: "[shButton]" }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipBlueprintComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sh-blueprint',
+                    imports: [ShipCardComponent$1, ShipIconComponent$1, JsonPipe, ShipButtonComponent$1],
+                    template: `
+    <div
+      class="canvas-container"
+      [class.locked]="isLocked()"
+      [class.hovering-connection]="highlightedConnection()"
+      (mousedown)="startPan($event)"
+      (mousemove)="pan($event)"
+      (wheel)="zoom($event)"
+      (touchstart)="handleTouchStart($event)"
+      (touchmove)="handleTouchMove($event)"
+      (touchend)="handleTouchEnd()">
+      <div class="action-panel">
+        <button shButton (click)="applyAutolayout()" class="small">
+          Autolayout
+          <sh-icon>tree-structure</sh-icon>
+        </button>
+
+        <ng-content />
+      </div>
+
+      <canvas #blueprintCanvas></canvas>
+
+      @if (validationErrors()) {
+        <sh-card class="validation-errors type-c">
+          Something went wrong you have
+          <br />
+          duplicate node IDs or port IDs
+          <pre>{{ validationErrors() | json }}</pre>
+        </sh-card>
+      } @else {
+        <div
+          class="nodes-wrapper"
+          [style.transform]="'translate(' + panX() + 'px, ' + panY() + 'px) scale(' + zoomLevel() + ')'"
+          [style.transform-origin]="'0 0'">
+          @for (node of nodes(); track node.id) {
+            <sh-card
+              class="node type-c"
+              [style.transform]="getDisplayCoordinates(node)"
+              (mouseenter)="isHoveringNode.set(true)"
+              (mouseleave)="isHoveringNode.set(false)">
+              <header (mousedown)="startNodeDrag($event, node.id)" (touchstart)="startNodeDrag($event, node.id)">
+                <span class="node-title">{{ node.name ? node.name : node.id }}</span>
+                <sh-icon>list</sh-icon>
+              </header>
+              <div class="ports">
+                <div class="inputs">
+                  @for (inputPort of node.inputs; track inputPort.id) {
+                    <div class="port-wrap">
+                      <div
+                        class="port input-port"
+                        [attr.data-node-id]="node.id"
+                        [attr.data-port-id]="inputPort.id"
+                        (click)="endPortDrag($event, node.id, inputPort.id)"></div>
+                      <span class="port-name">{{ inputPort.name }}</span>
+                    </div>
+                  }
+                </div>
+                <div class="outputs">
+                  @for (outputPort of node.outputs; track outputPort.id) {
+                    <div class="port-wrap">
+                      <span class="port-name">{{ outputPort.name }}</span>
+                      <div
+                        class="port output-port"
+                        [attr.data-node-id]="node.id"
+                        [attr.data-port-id]="outputPort.id"
+                        (click)="startPortDrag($event, node.id, outputPort.id)"></div>
+                    </div>
+                  }
+                </div>
+              </div>
+            </sh-card>
+          }
+
+          @if (showMidpointDiv()) {
+            <div
+              class="midpoint-div"
+              (click)="removeConnection()"
+              [style.left.px]="midpointDivPosition()?.x"
+              [style.top.px]="midpointDivPosition()?.y">
+              Remove connection
+              <sh-icon>trash</sh-icon>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { canvasRef: [{
+                type: ViewChild,
+                args: ['blueprintCanvas', { static: true }]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['document:mouseup', ['$event']]
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], onTouchMove: [{
+                type: HostListener,
+                args: ['document:touchmove', ['$event']]
+            }] } });
+
 class ShipButtonGroupComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipButtonGroupComponent, isStandalone: true, selector: "sh-button-group", ngImport: i0, template: `
@@ -5696,5 +6762,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GridSortableDirective, SHIP_CONFIG, ShipAlertComponent, ShipAlertContainerComponent, ShipAlertModule, ShipAlertService, ShipButtonComponent, ShipButtonGroupComponent, ShipCardComponent, ShipCheckboxComponent, ShipChipComponent, ShipColorPickerComponent, ShipDatepickerComponent, ShipDatepickerInputComponent, ShipDaterangeInputComponent, ShipDialogComponent, ShipDialogService, ShipDividerComponent, ShipEventCardComponent, ShipFileDragDropDirective, ShipFileUploadComponent, ShipFormFieldComponent, ShipIconComponent, ShipListComponent, ShipMenuComponent, ShipPopoverComponent, ShipPreventWheelDirective, ShipProgressBarComponent, ShipRadioComponent, ShipRangeSliderComponent, ShipResizeDirective, ShipSelectComponent, ShipSidenavComponent, ShipSortDirective, ShipSortableComponent, ShipSortableDirective, ShipSpinnerComponent, ShipStepperComponent, ShipStickyColumnsDirective, ShipTableComponent, ShipTabsComponent, ShipToggleCardComponent, ShipToggleComponent, ShipTooltipComponent, ShipTooltipDirective, ShipTooltipWrapper, ShipVirtualScrollComponent, moveIndex, watchHostClass };
+export { GridSortableDirective, SHIP_CONFIG, ShipAlertComponent, ShipAlertContainerComponent, ShipAlertModule, ShipAlertService, ShipBlueprintComponent, ShipButtonComponent, ShipButtonGroupComponent, ShipCardComponent, ShipCheckboxComponent, ShipChipComponent, ShipColorPickerComponent, ShipDatepickerComponent, ShipDatepickerInputComponent, ShipDaterangeInputComponent, ShipDialogComponent, ShipDialogService, ShipDividerComponent, ShipEventCardComponent, ShipFileDragDropDirective, ShipFileUploadComponent, ShipFormFieldComponent, ShipIconComponent, ShipListComponent, ShipMenuComponent, ShipPopoverComponent, ShipPreventWheelDirective, ShipProgressBarComponent, ShipRadioComponent, ShipRangeSliderComponent, ShipResizeDirective, ShipSelectComponent, ShipSidenavComponent, ShipSortDirective, ShipSortableComponent, ShipSortableDirective, ShipSpinnerComponent, ShipStepperComponent, ShipStickyColumnsDirective, ShipTableComponent, ShipTabsComponent, ShipToggleCardComponent, ShipToggleComponent, ShipTooltipComponent, ShipTooltipDirective, ShipTooltipWrapper, ShipVirtualScrollComponent, TEST_NODES, moveIndex, watchHostClass };
 //# sourceMappingURL=ship-ui-core.mjs.map