@ship-ui/core 0.15.19 → 0.15.23

package/fesm2022/ship-ui-core.mjs

@@ -1,7 +1,6 @@
 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, 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';
 
@@ -477,9 +476,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,
@@ -501,8 +501,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);
@@ -511,20 +515,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() {
@@ -535,20 +541,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' }); }
@@ -716,6 +726,7 @@ function findDuplicateNodeIDs(nodes) {
 const TEST_NODES = [
     {
         id: 'a1',
+        name: 'hello a1',
         coordinates: [0, 0],
         inputs: [],
         outputs: [{ id: 'out-1', name: 'Start Output' }],
@@ -736,6 +747,7 @@ const TEST_NODES = [
     },
     {
         id: 'c6',
+        name: 'hello c6',
         coordinates: [0, 0],
         inputs: [{ id: 'in-1', name: 'Input C' }],
         outputs: [{ id: 'out-1', name: 'Output D' }],
@@ -1384,6 +1396,23 @@ class ShipBlueprintComponent {
         }
         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;
@@ -1434,7 +1463,7 @@ class ShipBlueprintComponent {
               (mouseenter)="isHoveringNode.set(true)"
               (mouseleave)="isHoveringNode.set(false)">
               <header (mousedown)="startNodeDrag($event, node.id)" (touchstart)="startNodeDrag($event, node.id)">
-                <span class="node-title">{{ node.id }}</span>
+                <span class="node-title">{{ node.name ? node.name : node.id }}</span>
                 <sh-icon>list</sh-icon>
               </header>
               <div class="ports">
@@ -1479,13 +1508,13 @@ class ShipBlueprintComponent {
         </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 }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipCardComponent, selector: "sh-card" }, { kind: "component", type: ShipIconComponent, selector: "sh-icon" }, { kind: "component", type: ShipButtonComponent, 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],
+                    imports: [ShipCardComponent, ShipIconComponent, JsonPipe, ShipButtonComponent],
                     template: `
     <div
       class="canvas-container"
@@ -1527,7 +1556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
               (mouseenter)="isHoveringNode.set(true)"
               (mouseleave)="isHoveringNode.set(false)">
               <header (mousedown)="startNodeDrag($event, node.id)" (touchstart)="startNodeDrag($event, node.id)">
-                <span class="node-title">{{ node.id }}</span>
+                <span class="node-title">{{ node.name ? node.name : node.id }}</span>
                 <sh-icon>list</sh-icon>
               </header>
               <div class="ports">