@ship-ui/core 0.15.29 → 0.15.31

package/fesm2022/ship-ui-core.mjs

@@ -1023,6 +1023,7 @@ class ShipBlueprintComponent {
         }
     }
     onTouchMove(event) {
+        event.preventDefault();
         if (this.isLocked())
             return;
         if (this.#isNodeDragging()) {
@@ -1035,6 +1036,11 @@ class ShipBlueprintComponent {
             this.handleTouchMove(event);
         }
     }
+    onDocumentTouchEnd(event) {
+        if (this.isLocked())
+            return;
+        this.handleTouchEnd();
+    }
     startNodeDrag(event, nodeId) {
         event.stopPropagation();
         event.preventDefault();
@@ -1089,6 +1095,7 @@ class ShipBlueprintComponent {
         this.#lastMouseY.set(clientY);
     }
     startPortDrag(event, nodeId, portId) {
+        event.preventDefault();
         event.stopPropagation();
         if (this.draggingConnection())
             this.cancelPortDrag();
@@ -1216,6 +1223,7 @@ class ShipBlueprintComponent {
         }
     }
     handleTouchMove(event) {
+        event.preventDefault();
         if (event.touches.length === 1 && this.#isDragging()) {
             const dx = event.touches[0].clientX - this.#lastMouseX();
             const dy = event.touches[0].clientY - this.#lastMouseY();
@@ -1242,6 +1250,10 @@ class ShipBlueprintComponent {
     }
     handleTouchEnd() {
         this.#isDragging.set(false);
+        this.endNodeDrag();
+        if (this.draggingConnection()) {
+            this.cancelPortDrag();
+        }
     }
     closeMidpointDiv() {
         this.showMidpointDiv.set(false);
@@ -1422,7 +1434,7 @@ class ShipBlueprintComponent {
         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: `
+    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)", "document:touchend": "onDocumentTouchEnd($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["blueprintCanvas"], descendants: true, static: true }], ngImport: i0, template: `
     <div
       class="canvas-container"
       [class.locked]="isLocked()"
@@ -1469,25 +1481,25 @@ class ShipBlueprintComponent {
               <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>
+                    <div
+                      class="port-wrap"
+                      [attr.data-node-id]="node.id"
+                      [attr.data-port-id]="inputPort.id"
+                      (click)="endPortDrag($event, node.id, inputPort.id)">
+                      <div class="port input-port"></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">
+                    <div
+                      class="port-wrap"
+                      [attr.data-node-id]="node.id"
+                      [attr.data-port-id]="outputPort.id"
+                      (click)="startPortDrag($event, node.id, outputPort.id)">
                       <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 class="port output-port"></div>
                     </div>
                   }
                 </div>
@@ -1562,25 +1574,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
               <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>
+                    <div
+                      class="port-wrap"
+                      [attr.data-node-id]="node.id"
+                      [attr.data-port-id]="inputPort.id"
+                      (click)="endPortDrag($event, node.id, inputPort.id)">
+                      <div class="port input-port"></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">
+                    <div
+                      class="port-wrap"
+                      [attr.data-node-id]="node.id"
+                      [attr.data-port-id]="outputPort.id"
+                      (click)="startPortDrag($event, node.id, outputPort.id)">
                       <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 class="port output-port"></div>
                     </div>
                   }
                 </div>
@@ -1622,6 +1634,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }], onTouchMove: [{
                 type: HostListener,
                 args: ['document:touchmove', ['$event']]
+            }], onDocumentTouchEnd: [{
+                type: HostListener,
+                args: ['document:touchend', ['$event']]
             }] } });
 
 class ShipButtonGroupComponent {