@ship-ui/core 0.15.32 → 0.15.35

package/fesm2022/ship-ui-core.mjs

@@ -758,6 +758,9 @@ class ShipBlueprintComponent {
     #ZOOM_SPEED;
     #MAX_ZOOM;
     #MIN_ZOOM;
+    #NODE_WIDTH;
+    #NODE_HEADER_HEIGHT;
+    #PORT_ROW_HEIGHT;
     #document;
     #platformId;
     #selfRef;
@@ -773,12 +776,17 @@ class ShipBlueprintComponent {
     #draggedNodeId;
     #dragOffset;
     #connections;
+    #canvasWidth;
+    #canvasHeight;
     #ctx;
     #resizeObserver;
     constructor() {
         this.#ZOOM_SPEED = 0.01;
         this.#MAX_ZOOM = 1.5;
         this.#MIN_ZOOM = 0.5;
+        this.#NODE_WIDTH = 180;
+        this.#NODE_HEADER_HEIGHT = 40;
+        this.#PORT_ROW_HEIGHT = 28;
         this.#document = inject(DOCUMENT);
         this.#platformId = inject(PLATFORM_ID);
         this.#selfRef = inject((ElementRef));
@@ -813,6 +821,31 @@ class ShipBlueprintComponent {
         this.#draggedNodeId = signal(null, ...(ngDevMode ? [{ debugName: "#draggedNodeId" }] : []));
         this.#dragOffset = signal(null, ...(ngDevMode ? [{ debugName: "#dragOffset" }] : []));
         this.#connections = signal([], ...(ngDevMode ? [{ debugName: "#connections" }] : []));
+        this.#canvasWidth = signal(0, ...(ngDevMode ? [{ debugName: "#canvasWidth" }] : []));
+        this.#canvasHeight = signal(0, ...(ngDevMode ? [{ debugName: "#canvasHeight" }] : []));
+        this.visibleNodes = computed(() => {
+            const nodes = this.nodes();
+            const panX = this.panX();
+            const panY = this.panY();
+            const zoom = this.zoomLevel();
+            const width = this.#canvasWidth();
+            const height = this.#canvasHeight();
+            if (width === 0 || height === 0) {
+                return nodes;
+            }
+            const bufferX = width / zoom;
+            const bufferY = height / zoom;
+            const viewbox = {
+                x1: -panX / zoom - bufferX,
+                y1: -panY / zoom - bufferY,
+                x2: (-panX + width) / zoom + bufferX,
+                y2: (-panY + height) / zoom + bufferY,
+            };
+            return nodes.filter((node) => {
+                const [x, y] = node.coordinates;
+                return x > viewbox.x1 && x < viewbox.x2 && y > viewbox.y1 && y < viewbox.y2;
+            });
+        }, ...(ngDevMode ? [{ debugName: "visibleNodes" }] : []));
         if (isPlatformBrowser(this.#platformId)) {
             effect(() => {
                 this.asDots();
@@ -862,13 +895,71 @@ class ShipBlueprintComponent {
             this.#resizeObserver.disconnect();
         }
     }
-    #validateNodes() {
-        const duplicatePortIds = findDuplicatePortIDs(this.nodes());
-        const duplicateNodeIds = findDuplicateNodeIDs(this.nodes());
-        this.validationErrors.set({
-            duplicateNodeIds,
-            duplicatePortIds,
-        });
+    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) {
+        event.preventDefault();
+        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);
+        }
+    }
+    onDocumentTouchEnd(event) {
+        if (this.isLocked())
+            return;
+        this.handleTouchEnd();
     }
     applyAutolayout() {
         const newNodes = layoutNodes(this.nodes());
@@ -883,6 +974,8 @@ class ShipBlueprintComponent {
         this.#ctx.scale(dpr, dpr);
         canvas.style.width = `${rect.width}px`;
         canvas.style.height = `${rect.height}px`;
+        this.#canvasWidth.set(rect.width);
+        this.#canvasHeight.set(rect.height);
         this.drawCanvas();
     }
     drawCanvas() {
@@ -975,72 +1068,6 @@ class ShipBlueprintComponent {
         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) {
-        event.preventDefault();
-        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);
-        }
-    }
-    onDocumentTouchEnd(event) {
-        if (this.isLocked())
-            return;
-        this.handleTouchEnd();
-    }
     startNodeDrag(event, nodeId) {
         event.stopPropagation();
         event.preventDefault();
@@ -1163,16 +1190,25 @@ class ShipBlueprintComponent {
         if (!node)
             return [0, 0];
         const portEl = this.#selfRef.nativeElement.querySelector(`[data-node-id="${nodeId}"][data-port-id="${portId}"]`);
-        if (!portEl)
+        if (portEl) {
+            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];
+        }
+        const isInput = node.inputs.some((p) => p.id === portId);
+        const portIndex = isInput
+            ? node.inputs.findIndex((p) => p.id === portId)
+            : node.outputs.findIndex((p) => p.id === portId);
+        if (portIndex === -1)
             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];
+        const portYOffset = this.#NODE_HEADER_HEIGHT + portIndex * this.#PORT_ROW_HEIGHT + this.#PORT_ROW_HEIGHT / 2;
+        const portXOffset = isInput ? 0 : this.#NODE_WIDTH;
+        return [node.coordinates[0] + portXOffset, node.coordinates[1] + portYOffset];
     }
     startPan(event) {
         if (this.isLocked())
@@ -1419,6 +1455,14 @@ class ShipBlueprintComponent {
         }
         return newCoordinates;
     }
+    #validateNodes() {
+        const duplicatePortIds = findDuplicatePortIDs(this.nodes());
+        const duplicateNodeIds = findDuplicateNodeIDs(this.nodes());
+        this.validationErrors.set({
+            duplicateNodeIds,
+            duplicatePortIds,
+        });
+    }
     #panToCoordinates(coords) {
         const [x, y] = coords;
         const rect = this.#selfRef.nativeElement.getBoundingClientRect();
@@ -1468,7 +1512,7 @@ class ShipBlueprintComponent {
           class="nodes-wrapper"
           [style.transform]="'translate(' + panX() + 'px, ' + panY() + 'px) scale(' + zoomLevel() + ')'"
           [style.transform-origin]="'0 0'">
-          @for (node of nodes(); track node.id) {
+          @for (node of visibleNodes(); track node.id) {
             <sh-card
               class="node type-c"
               [style.transform]="getDisplayCoordinates(node)"
@@ -1561,7 +1605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
           class="nodes-wrapper"
           [style.transform]="'translate(' + panX() + 'px, ' + panY() + 'px) scale(' + zoomLevel() + ')'"
           [style.transform-origin]="'0 0'">
-          @for (node of nodes(); track node.id) {
+          @for (node of visibleNodes(); track node.id) {
             <sh-card
               class="node type-c"
               [style.transform]="getDisplayCoordinates(node)"
@@ -1717,7 +1761,9 @@ class ShipCheckboxComponent {
       <sh-icon class="inherit indeterminate-indicator">minus-bold</sh-icon>
     </div>
 
-    <ng-content />
+    <div class="label">
+      <ng-content />
+    </div>
   `, isInline: true, dependencies: [{ kind: "component", type: ShipIconComponent, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipCheckboxComponent, decorators: [{
@@ -1731,7 +1777,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
       <sh-icon class="inherit indeterminate-indicator">minus-bold</sh-icon>
     </div>
 
-    <ng-content />
+    <div class="label">
+      <ng-content />
+    </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]