@ship-ui/core 0.15.19 → 0.15.22

package/fesm2022/ship-ui-core.mjs

@@ -477,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,
@@ -501,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);
@@ -511,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() {
@@ -535,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' }); }
@@ -716,6 +727,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 +748,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 +1397,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 +1464,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">
@@ -1527,7 +1557,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">