ngx-vflow 1.3.1 → 1.4.1

package/fesm2022/ngx-vflow.mjs

@@ -150,6 +150,7 @@ function clamp(value, min = 0, max = 1) {
 class FlowSettingsService {
     constructor() {
         this.entitiesSelectable = signal(true);
+        this.elevateNodesOnSelect = signal(true);
         /**
          * @see {VflowComponent.view}
          */
@@ -1613,14 +1614,15 @@ class NodeRenderingService {
         });
     }
     pullNode(node) {
-        // TODO do not pull when the node is already on top
+        const isAlreadyOnTop = node.renderOrder() !== 0 && this.maxOrder() === node.renderOrder();
+        // TODO: does not work for group nodes
+        if (isAlreadyOnTop) {
+            return;
+        }
         // pull node
         node.renderOrder.set(this.maxOrder() + 1);
         // pull children
-        this.flowEntitiesService
-            .nodes()
-            .filter((n) => n.parent() === node)
-            .forEach((n) => this.pullNode(n));
+        node.children().forEach((n) => this.pullNode(n));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeRenderingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeRenderingService }); }
@@ -2241,10 +2243,9 @@ class ResizableComponent {
     resize(event) {
         if (!this.resizeSide)
             return;
-        if (this.isResizeConstrained(event))
-            return;
         const offset = calcOffset(event.movementX, event.movementY, this.zoom());
-        const { x, y, width, height } = constrainRect(applyResize(this.resizeSide, this.model, offset), this.model, this.resizeSide, this.minWidth, this.minHeight);
+        const resized = applyResize(this.resizeSide, this.model, offset, this.getDistanceToEdge(event));
+        const { x, y, width, height } = constrainRect(resized, this.model, this.resizeSide, this.minWidth, this.minHeight);
         this.model.setPoint({ x, y });
         this.model.width.set(width);
         this.model.height.set(height);
@@ -2253,41 +2254,15 @@ class ResizableComponent {
         this.resizeSide = null;
         this.model.resizing.set(false);
     }
-    isResizeConstrained({ x, y, movementX, movementY }) {
-        const flowPoint = this.spacePointContext.documentPointToFlowPoint({ x, y });
-        if (this.resizeSide?.includes('right')) {
-            if (movementX > 0 && flowPoint.x < this.model.point().x + this.model.size().width) {
-                return true;
-            }
-            if (movementX < 0 && flowPoint.x > this.model.point().x + this.model.size().width) {
-                return true;
-            }
-        }
-        if (this.resizeSide?.includes('left')) {
-            if (movementX < 0 && flowPoint.x > this.model.point().x) {
-                return true;
-            }
-            if (movementX > 0 && flowPoint.x < this.model.point().x) {
-                return true;
-            }
-        }
-        if (this.resizeSide?.includes('bottom')) {
-            if (movementY > 0 && flowPoint.y < this.model.point().y + this.model.size().height) {
-                return true;
-            }
-            if (movementY < 0 && flowPoint.y > this.model.point().y + this.model.size().height) {
-                return true;
-            }
-        }
-        if (this.resizeSide?.includes('top')) {
-            if (movementY < 0 && flowPoint.y > this.model.point().y) {
-                return true;
-            }
-            if (movementY > 0 && flowPoint.y < this.model.point().y) {
-                return true;
-            }
-        }
-        return false;
+    getDistanceToEdge(event) {
+        const flowPoint = this.spacePointContext.documentPointToFlowPoint({ x: event.x, y: event.y });
+        const { x, y } = this.model.globalPoint();
+        return {
+            left: flowPoint.x - x,
+            right: flowPoint.x - (x + this.model.width()),
+            top: flowPoint.y - y,
+            bottom: flowPoint.y - (y + this.model.height()),
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResizableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: ResizableComponent, isStandalone: true, selector: "[resizable]", inputs: { resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resizerColor: { classPropertyName: "resizerColor", publicName: "resizerColor", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #resizer>\n  <svg:g>\n    <!-- top line -->\n    <svg:line\n      class=\"top\"\n      stroke-width=\"2\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"-gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"-gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top', $event)\" />\n    <!-- Left line -->\n    <svg:line\n      class=\"left\"\n      stroke-width=\"2\"\n      [attr.x1]=\"-gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"-gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('left', $event)\" />\n    <!-- Bottom line -->\n    <svg:line\n      class=\"bottom\"\n      stroke-width=\"2\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"model.size().height + gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"model.size().height + gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom', $event)\" />\n    <!-- Right line -->\n    <svg:line\n      class=\"right\"\n      stroke-width=\"2\"\n      [attr.x1]=\"model.size().width + gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"model.size().width + gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('right', $event)\" />\n\n    <!-- Top Left -->\n    <svg:rect\n      class=\"top-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-left', $event)\" />\n\n    <!-- Top right -->\n    <svg:rect\n      class=\"top-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-right', $event)\" />\n\n    <!-- Bottom left -->\n    <svg:rect\n      class=\"bottom-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-left', $event)\" />\n\n    <!-- Bottom right -->\n    <svg:rect\n      class=\"bottom-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-right', $event)\" />\n  </svg:g>\n</ng-template>\n\n<ng-content />\n", styles: [".top{cursor:n-resize}.left{cursor:w-resize}.right{cursor:e-resize}.bottom{cursor:s-resize}.top-left{cursor:nw-resize}.top-right{cursor:ne-resize}.bottom-left{cursor:sw-resize}.bottom-right{cursor:se-resize}\n"], dependencies: [{ kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -2305,43 +2280,44 @@ function calcOffset(movementX, movementY, zoom) {
         offsetY: round(movementY / zoom),
     };
 }
-function applyResize(side, model, offset) {
+function applyResize(side, model, offset, distanceToEdge) {
     const { offsetX, offsetY } = offset;
     const { x, y } = model.point();
-    const { width, height } = model.size();
+    const width = model.width();
+    const height = model.height();
     // Handle each case of resizing (top, bottom, left, right, corners)
     switch (side) {
         case 'left':
-            return { x: x + offsetX, y, width: width - offsetX, height };
+            return { x: x + offsetX + distanceToEdge.left, y, width: width - offsetX - distanceToEdge.left, height };
         case 'right':
-            return { x, y, width: width + offsetX, height };
+            return { x, y, width: width + offsetX + distanceToEdge.right, height };
         case 'top':
-            return { x, y: y + offsetY, width, height: height - offsetY };
+            return { x, y: y + offsetY + distanceToEdge.top, width, height: height - offsetY - distanceToEdge.top };
         case 'bottom':
-            return { x, y, width, height: height + offsetY };
+            return { x, y, width, height: height + offsetY + distanceToEdge.bottom };
         case 'top-left':
             return {
-                x: x + offsetX,
-                y: y + offsetY,
-                width: width - offsetX,
-                height: height - offsetY,
+                x: x + offsetX + distanceToEdge.left,
+                y: y + offsetY + distanceToEdge.top,
+                width: width - offsetX - distanceToEdge.left,
+                height: height - offsetY - distanceToEdge.top,
             };
         case 'top-right':
             return {
                 x,
-                y: y + offsetY,
-                width: width + offsetX,
-                height: height - offsetY,
+                y: y + offsetY + distanceToEdge.top,
+                width: width + offsetX + distanceToEdge.right,
+                height: height - offsetY - distanceToEdge.top,
             };
         case 'bottom-left':
             return {
-                x: x + offsetX,
+                x: x + offsetX + distanceToEdge.left,
                 y,
-                width: width - offsetX,
-                height: height + offsetY,
+                width: width - offsetX - distanceToEdge.left,
+                height: height + offsetY + distanceToEdge.bottom,
             };
         case 'bottom-right':
-            return { x, y, width: width + offsetX, height: height + offsetY };
+            return { x, y, width: width + offsetX + distanceToEdge.right, height: height + offsetY + distanceToEdge.bottom };
     }
 }
 function constrainRect(rect, model, side, minWidth, minHeight) {
@@ -2353,27 +2329,33 @@ function constrainRect(rect, model, side, minWidth, minHeight) {
     width = Math.max(minWidth, width);
     height = Math.max(minHeight, height);
     // Apply left/top constraints based on minimum size
-    x = Math.min(x, model.point().x + model.size().width - minWidth);
-    y = Math.min(y, model.point().y + model.size().height - minHeight);
+    x = Math.min(x, model.point().x + model.width() - minWidth);
+    y = Math.min(y, model.point().y + model.height() - minHeight);
     const parent = model.parent();
     // 3. Apply maximum size constraints based on parent size (if exists)
     if (parent) {
-        x = Math.max(x, 0); // Left boundary of the parent
-        y = Math.max(y, 0); // Top boundary of the parent
-        if (x === 0) {
-            width = model.point().x + model.size().width;
+        const parentWidth = parent.width();
+        const parentHeight = parent.height();
+        const modelX = model.point().x;
+        const modelY = model.point().y;
+        x = Math.max(x, 0);
+        y = Math.max(y, 0);
+        // Stop resizing when hitting left or top boundary
+        if (side.includes('left') && x === 0) {
+            width = Math.min(width, modelX + model.width());
         }
-        if (y === 0) {
-            height = model.point().y + model.size().height;
+        if (side.includes('top') && y === 0) {
+            height = Math.min(height, modelY + model.height());
         }
-        width = Math.min(width, parent.size().width - model.point().x);
-        height = Math.min(height, parent.size().height - model.point().y);
+        // Allow right/bottom resizing without being blocked
+        width = Math.min(width, parentWidth - x);
+        height = Math.min(height, parentHeight - y);
     }
     const bounds = getNodesBounds(model.children());
     // 4. Apply child node constraints (if children exist)
     if (bounds) {
         if (side.includes('left')) {
-            x = Math.min(x, model.point().x + model.size().width - (bounds.x + bounds.width));
+            x = Math.min(x, model.point().x + model.width() - (bounds.x + bounds.width));
             width = Math.max(width, bounds.x + bounds.width);
         }
         if (side.includes('right')) {
@@ -2383,7 +2365,7 @@ function constrainRect(rect, model, side, minWidth, minHeight) {
             height = Math.max(height, bounds.y + bounds.height);
         }
         if (side.includes('top')) {
-            y = Math.min(y, model.point().y + model.size().height - (bounds.y + bounds.height));
+            y = Math.min(y, model.point().y + model.height() - (bounds.y + bounds.height));
             height = Math.max(height, bounds.y + bounds.height);
         }
     }
@@ -2658,7 +2640,9 @@ class NodeComponent {
         this.connectionController?.endConnection();
     }
     pullNode() {
-        this.nodeRenderingService.pullNode(this.model());
+        if (this.flowSettingsService.elevateNodesOnSelect()) {
+            this.nodeRenderingService.pullNode(this.model());
+        }
     }
     selectNode() {
         if (this.flowSettingsService.entitiesSelectable()) {
@@ -3172,6 +3156,12 @@ class VflowComponent {
     set snapGrid(value) {
         this.flowSettingsService.snapGrid.set(value);
     }
+    /**
+     * Raizing z-index for selected node
+     */
+    set elevateNodesOnSelect(value) {
+        this.flowSettingsService.elevateNodesOnSelect.set(value);
+    }
     // #endregion
     // #region MAIN_INPUTS
     /**
@@ -3273,7 +3263,7 @@ class VflowComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VflowComponent, isStandalone: true, selector: "vflow", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: false, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: false, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: false, isRequired: false, transformFunction: null }, optimization: { classPropertyName: "optimization", publicName: "optimization", isSignal: true, isRequired: false, transformFunction: null }, entitiesSelectable: { classPropertyName: "entitiesSelectable", publicName: "entitiesSelectable", isSignal: false, isRequired: false, transformFunction: null }, keyboardShortcuts: { classPropertyName: "keyboardShortcuts", publicName: "keyboardShortcuts", isSignal: false, isRequired: false, transformFunction: null }, connection: { classPropertyName: "connection", publicName: "connection", isSignal: false, isRequired: false, transformFunction: (settings) => new ConnectionModel(settings) }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: false, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: false, isRequired: true, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VflowComponent, isStandalone: true, selector: "vflow", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: false, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: false, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: false, isRequired: false, transformFunction: null }, optimization: { classPropertyName: "optimization", publicName: "optimization", isSignal: true, isRequired: false, transformFunction: null }, entitiesSelectable: { classPropertyName: "entitiesSelectable", publicName: "entitiesSelectable", isSignal: false, isRequired: false, transformFunction: null }, keyboardShortcuts: { classPropertyName: "keyboardShortcuts", publicName: "keyboardShortcuts", isSignal: false, isRequired: false, transformFunction: null }, connection: { classPropertyName: "connection", publicName: "connection", isSignal: false, isRequired: false, transformFunction: (settings) => new ConnectionModel(settings) }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: false, isRequired: false, transformFunction: null }, elevateNodesOnSelect: { classPropertyName: "elevateNodesOnSelect", publicName: "elevateNodesOnSelect", isSignal: false, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: false, isRequired: true, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, providers: [
             DraggableService,
             ViewportService,
             FlowStatusService,
@@ -3336,6 +3326,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     }]
             }], snapGrid: [{
                 type: Input
+            }], elevateNodesOnSelect: [{
+                type: Input
             }], nodes: [{
                 type: Input,
                 args: [{ required: true }]