ngx-vflow 0.12.0 → 0.13.0

package/fesm2022/ngx-vflow.mjs

@@ -1,11 +1,11 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, EventEmitter, Output, DestroyRef, Input, runInInjectionContext, Injector, Component, ChangeDetectionStrategy, HostListener, ViewChild, NgZone, HostBinding, ContentChild, NgModule } from '@angular/core';
+import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, EventEmitter, Output, DestroyRef, Input, runInInjectionContext, Injector, Component, ChangeDetectionStrategy, HostListener, ViewChild, NgZone, ContentChild, NgModule } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
-import { Subject, tap, merge, observeOn, animationFrameScheduler, switchMap, skip, map, pairwise, filter, distinctUntilChanged, asyncScheduler, zip, fromEvent, share, Observable, startWith } from 'rxjs';
-import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { switchMap, merge, fromEvent, tap, Subject, observeOn, animationFrameScheduler, skip, map, pairwise, filter, distinctUntilChanged, asyncScheduler, zip, share, Observable, startWith } from 'rxjs';
+import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { drag } from 'd3-drag';
 import { path } from 'd3-path';
 import { __decorate } from 'tslib';
@@ -249,9 +249,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+function getOS() {
+    const userAgent = window.navigator.userAgent.toLowerCase();
+    const macosPlatforms = /(macintosh|macintel|macppc|mac68k|macos)/i;
+    const windowsPlatforms = /(win32|win64|windows|wince)/i;
+    const iosPlatforms = /(iphone|ipad|ipod)/i;
+    let os = null;
+    if (macosPlatforms.test(userAgent)) {
+        os = "macos";
+    }
+    else if (iosPlatforms.test(userAgent)) {
+        os = "ios";
+    }
+    else if (windowsPlatforms.test(userAgent)) {
+        os = "windows";
+    }
+    else if (/android/.test(userAgent)) {
+        os = "android";
+    }
+    else if (!os && /linux/.test(userAgent)) {
+        os = "linux";
+    }
+    return os;
+}
+
+class KeyboardService {
+    constructor() {
+        this.actions = signal({
+            multiSelection: [
+                getOS() === 'macos' ? 'MetaLeft' : 'ControlLeft',
+                getOS() === 'macos' ? 'MetaRight' : 'ControlRight',
+            ]
+        });
+        this.actionsActive = {
+            multiSelection: false
+        };
+        toObservable(this.actions).pipe(switchMap(() => merge(fromEvent(document, 'keydown').pipe(tap(event => {
+            for (const action in this.actions()) {
+                const keyCodes = this.actions()[action] ?? [];
+                if (keyCodes.includes(event.code)) {
+                    this.actionsActive[action] = true;
+                }
+            }
+        })), fromEvent(document, 'keyup').pipe(tap(event => {
+            for (const action in this.actions()) {
+                const keyCodes = this.actions()[action] ?? [];
+                if (keyCodes.includes(event.code)) {
+                    this.actionsActive[action] = false;
+                }
+            }
+        })))), takeUntilDestroyed()).subscribe();
+    }
+    setShortcuts(newActions) {
+        this.actions.update((actions) => ({ ...actions, ...newActions }));
+    }
+    isActiveAction(action) {
+        return this.actionsActive[action];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KeyboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KeyboardService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KeyboardService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
 class SelectionService {
     constructor() {
         this.flowEntitiesService = inject(FlowEntitiesService);
+        this.keyboardService = inject(KeyboardService);
         this.viewport$ = new Subject();
         this.resetSelection = this.viewport$.pipe(tap(({ start, end, target }) => {
             if (start && end && target) {
@@ -273,10 +338,15 @@ class SelectionService {
         this.viewport$.next(viewport);
     }
     select(entity) {
-        // undo select for previously selected nodes
-        this.flowEntitiesService.entities()
-            .filter(n => n.selected)
-            .forEach(n => n.selected.set(false));
+        // ? May be not a responsibility of this method
+        // if entity already selected - do nothing
+        if (entity?.selected()) {
+            return;
+        }
+        if (!this.keyboardService.isActiveAction('multiSelection')) {
+            // undo select for previously selected nodes
+            this.flowEntitiesService.entities().forEach(n => n.selected.set(false));
+        }
         if (entity) {
             // select passed entity
             entity.selected.set(true);
@@ -377,6 +447,9 @@ const evTarget = (anyEvent) => {
 const round = (num) => Math.round(num * 100) / 100;
 
 class DraggableService {
+    constructor() {
+        this.entitiesService = inject(FlowEntitiesService);
+    }
     /**
      * Enable draggable behavior for element.
      *
@@ -412,27 +485,24 @@ class DraggableService {
      * @returns
      */
     getDragBehavior(model) {
-        let deltaX;
-        let deltaY;
+        let dragNodes = [];
+        let initialPositions = [];
         return drag()
             .on('start', (event) => {
-            deltaX = model.point().x - event.x;
-            deltaY = model.point().y - event.y;
+            dragNodes = this.getDragNodes(model);
+            initialPositions = dragNodes.map(node => ({
+                x: node.point().x - event.x,
+                y: node.point().y - event.y
+            }));
         })
             .on('drag', (event) => {
-            let point = {
-                x: round(event.x + deltaX),
-                y: round(event.y + deltaY)
-            };
-            const parent = model.parent();
-            // keep node in bounds of parent
-            if (parent) {
-                point.x = Math.min(parent.size().width - model.size().width, point.x);
-                point.x = Math.max(0, point.x);
-                point.y = Math.min(parent.size().height - model.size().height, point.y);
-                point.y = Math.max(0, point.y);
-            }
-            model.setPoint(point, true);
+            dragNodes.forEach((model, index) => {
+                let point = {
+                    x: round(event.x + initialPositions[index].x),
+                    y: round(event.y + initialPositions[index].y)
+                };
+                moveNode(model, point);
+            });
         });
     }
     /**
@@ -445,12 +515,32 @@ class DraggableService {
             event.sourceEvent.stopPropagation();
         });
     }
+    getDragNodes(model) {
+        return model.selected()
+            ? this.entitiesService
+                .nodes()
+                // selected draggable nodes (with current node)
+                .filter(node => node.selected() && node.draggable())
+            // we only can move current node if it's not selected
+            : [model];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableService, decorators: [{
             type: Injectable
         }] });
+function moveNode(model, point) {
+    const parent = model.parent();
+    // keep node in bounds of parent
+    if (parent) {
+        point.x = Math.min(parent.size().width - model.size().width, point.x);
+        point.x = Math.max(0, point.x);
+        point.y = Math.min(parent.size().height - model.size().height, point.y);
+        point.y = Math.max(0, point.y);
+    }
+    model.setPoint(point, true);
+}
 
 class EdgeTemplateDirective {
     constructor() {
@@ -734,7 +824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class CustomNodeBaseComponent {
     constructor() {
-        this.eventBus = inject(ComponentEventBusService);
+        this.eventBus = inject(ComponentEventBusService, { optional: true });
         this.destroyRef = inject(DestroyRef);
         /**
          * Signal with selected state of node
@@ -746,7 +836,11 @@ class CustomNodeBaseComponent {
         this.selected.set(value);
     }
     ngOnInit() {
-        this.trackEvents().pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
+        if (this.eventBus) {
+            this.trackEvents()
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe();
+        }
     }
     trackEvents() {
         const props = Object.getOwnPropertyNames(this);
@@ -1243,12 +1337,11 @@ class NodesChangeService {
         // Check for nodes list change and watch for specific node from this list change its position
         switchMap((nodes) => merge(...nodes.map(node => node.point$.pipe(
         // skip initial position from signal
-        skip(1), map(() => node))))), 
-        // For now it's a single node, later this list will also be filled
-        // with child node position changes
-        map(changedNode => [
-            { type: 'position', id: changedNode.node.id, point: changedNode.point() }
-        ]));
+        skip(1), map(() => node))))), map((changedNode) => {
+            return this.entitiesService.nodes()
+                .filter(node => node === changedNode || node.selected())
+                .map(node => ({ type: 'position', id: node.node.id, point: node.point() }));
+        }));
         this.nodeSizeChange$ = toObservable(this.entitiesService.nodes)
             .pipe(switchMap((nodes) => merge(...nodes.map(node => node.size$.pipe(skip(1), map(() => node))))), map(changedNode => [
             { type: 'size', id: changedNode.node.id, size: changedNode.size() }
@@ -1874,6 +1967,7 @@ class ResizableComponent {
         this.nodeAccessor = inject(NodeAccessorService);
         this.rootPointer = inject(RootPointerDirective);
         this.viewportService = inject(ViewportService);
+        this.spacePointContext = inject(SpacePointContextDirective);
         this.hostRef = inject(ElementRef);
         this.resizerColor = '#2e414c';
         this.gap = 1.5;
@@ -1885,7 +1979,7 @@ class ResizableComponent {
         this.minHeight = 0;
         // TODO: allow reszie beside the flow
         this.resizeOnGlobalMouseMove = this.rootPointer.pointerMovement$
-            .pipe(filter(() => this.resizeSide !== null), tap((event) => this.resize(event)), takeUntilDestroyed())
+            .pipe(filter(() => this.resizeSide !== null), filter((event) => event.movementX !== 0 || event.movementY !== 0), tap((event) => this.resize(event)), takeUntilDestroyed())
             .subscribe();
         this.endResizeOnGlobalMouseUp = this.rootPointer.documentPointerEnd$
             .pipe(tap(() => this.endResize()), takeUntilDestroyed())
@@ -1914,193 +2008,55 @@ class ResizableComponent {
         this.resizeSide = side;
         this.model.resizing.set(true);
     }
-    resize({ movementX, movementY }) {
-        const offsetX = round(movementX / this.zoom());
-        const offsetY = round(movementY / this.zoom());
-        switch (this.resizeSide) {
-            case 'left':
-                let x = this.model.point().x + offsetX;
-                x = Math.max(x, this.getMinX());
-                x = Math.min(x, this.getMaxX());
-                // TODO this fixes increasing width when current node hits the parent
-                if (x === this.getMinX() || x === this.getMaxX()) {
-                    return;
-                }
-                this.model.setPoint({ x, y: this.model.point().y }, false);
-                this.model.size.update(({ height, width }) => {
-                    width -= offsetX;
-                    width = Math.max(width, this.minWidth);
-                    width = Math.min(width, this.getMaxWidth());
-                    return { height, width: width };
-                });
-                return;
-            case 'right':
-                this.model.size.update(({ height, width }) => {
-                    width += offsetX;
-                    width = Math.max(width, this.minWidth);
-                    width = Math.min(width, this.getMaxWidth());
-                    const bounds = getNodesBounds(this.model.children());
-                    width = Math.max(width, bounds.x + bounds.width);
-                    return { height, width };
-                });
-                return;
-            case 'top':
-                let y = this.model.point().y + offsetY;
-                y = Math.max(y, this.getMinY());
-                y = Math.min(y, this.getMaxY());
-                if (y === this.getMinY() || y === this.getMaxY()) {
-                    return;
-                }
-                this.model.setPoint({ x: this.model.point().x, y }, false);
-                this.model.size.update(({ height, width }) => {
-                    height -= offsetY;
-                    height = Math.max(height, this.minHeight);
-                    height = Math.min(height, this.getMaxHeight());
-                    return { width, height };
-                });
-                return;
-            case 'bottom':
-                this.model.size.update(({ height, width }) => {
-                    height += offsetY;
-                    height = Math.max(height, this.minHeight);
-                    height = Math.min(height, this.getMaxHeight());
-                    const bounds = getNodesBounds(this.model.children());
-                    height = Math.max(height, bounds.y + bounds.height);
-                    return { width, height };
-                });
-                return;
-            case 'top-left': {
-                let x = this.model.point().x + offsetX;
-                x = Math.max(x, this.getMinX());
-                x = Math.min(x, this.getMaxX());
-                let y = this.model.point().y + offsetY;
-                y = Math.max(y, this.getMinY());
-                y = Math.min(y, this.getMaxY());
-                if (x === this.getMinX() || y === this.getMinY() ||
-                    x === this.getMaxX() || y === this.getMaxY()) {
-                    return;
-                }
-                this.model.setPoint({ x, y }, false);
-                this.model.size.update(({ height, width }) => {
-                    width -= offsetX;
-                    width = Math.max(width, this.minWidth);
-                    width = Math.min(width, this.getMaxWidth());
-                    height -= offsetY;
-                    height = Math.max(height, this.minHeight);
-                    height = Math.min(height, this.getMaxHeight());
-                    return { height, width };
-                });
-                return;
-            }
-            case 'top-right': {
-                let y = this.model.point().y + offsetY;
-                y = Math.max(y, this.getMinY());
-                y = Math.min(y, this.getMaxY());
-                if (y === this.getMinX() || y === this.getMaxY()) {
-                    return;
-                }
-                this.model.setPoint({ x: this.model.point().x, y }, false);
-                this.model.size.update(({ height, width }) => {
-                    const bounds = getNodesBounds(this.model.children());
-                    width += offsetX;
-                    width = Math.max(width, this.minWidth);
-                    width = Math.min(width, this.getMaxWidth());
-                    width = Math.max(width, bounds.x + bounds.width);
-                    height -= offsetY;
-                    height = Math.max(height, this.minHeight);
-                    height = Math.min(height, this.getMaxHeight());
-                    return { height, width };
-                });
-                return;
-            }
-            case 'bottom-left': {
-                let x = this.model.point().x + offsetX;
-                x = Math.max(x, this.getMinX());
-                x = Math.min(x, this.getMaxX());
-                if (x === this.getMinX() || x === this.getMaxX()) {
-                    return;
-                }
-                this.model.setPoint({ x, y: this.model.point().y }, false);
-                this.model.size.update(({ height, width }) => {
-                    width -= offsetX;
-                    width = Math.max(width, this.minWidth);
-                    width = Math.min(width, this.getMaxWidth());
-                    height += offsetY;
-                    height = Math.max(height, this.minHeight);
-                    height = Math.min(height, this.getMaxHeight());
-                    const bounds = getNodesBounds(this.model.children());
-                    height = Math.max(height, bounds.y + bounds.height);
-                    return { height, width };
-                });
-                return;
-            }
-            case 'bottom-right': {
-                this.model.size.update(({ height, width }) => {
-                    const bounds = getNodesBounds(this.model.children());
-                    width += offsetX;
-                    width = Math.max(width, this.minWidth);
-                    width = Math.min(width, this.getMaxWidth());
-                    width = Math.max(width, bounds.x + bounds.width);
-                    height += offsetY;
-                    height = Math.max(height, this.minHeight);
-                    height = Math.min(height, this.getMaxHeight());
-                    height = Math.max(height, bounds.y + bounds.height);
-                    return { height, width };
-                });
-            }
-        }
+    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);
+        this.model.setPoint({ x, y }, false);
+        this.model.size.set({ width, height });
     }
     endResize() {
         this.resizeSide = null;
         this.model.resizing.set(false);
     }
-    getMaxWidth() {
-        const parent = this.model.parent();
-        if (parent) {
-            return parent.size().width - this.model.point().x;
-        }
-        return Infinity;
-    }
-    getMaxHeight() {
-        const parent = this.model.parent();
-        if (parent) {
-            return parent.size().height - this.model.point().y;
-        }
-        return Infinity;
-    }
-    getMinX() {
-        const parent = this.model.parent();
-        if (parent) {
-            return 0;
+    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;
+            }
         }
-        return -Infinity;
-    }
-    getMinY() {
-        const parent = this.model.parent();
-        if (parent) {
-            return 0;
+        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;
+            }
         }
-        return -Infinity;
-    }
-    getMaxX() {
-        const x = this.model.point().x;
-        const width = this.model.size().width;
-        const children = this.model.children();
-        if (children) {
-            const bounds = getNodesBounds(children);
-            return x + (bounds.x + bounds.width) >= x + width ? x : (width - this.minWidth) + x;
+        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;
+            }
         }
-        return (width - this.minWidth) + x;
-    }
-    getMaxY() {
-        const y = this.model.point().y;
-        const height = this.model.size().height;
-        const children = this.model.children();
-        if (children) {
-            const bounds = getNodesBounds(children);
-            return y + (bounds.y + bounds.height) >= y + height ? y : (height - this.minHeight) + y;
+        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 (height - this.minHeight) + y;
+        return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResizableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResizableComponent, selector: "[resizable]", inputs: { resizable: "resizable", resizerColor: "resizerColor", gap: "gap" }, viewQueries: [{ propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #resizer>\n  <svg:g>\n    <!-- top line -->\n    <svg:line\n      class=\"top\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"-gap\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"-gap\"\n      [attr.stroke]=\"resizerColor\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('top', $event)\"\n    />\n    <!-- Left line -->\n    <svg:line\n      class=\"left\"\n      [attr.x1]=\"-gap\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"-gap\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('left', $event)\"\n    />\n    <!-- Bottom line -->\n    <svg:line\n      class=\"bottom\"\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      stroke-width=\"2\"\n      (pointerStart)=\"startResize('bottom', $event)\"\n    />\n    <!-- Right line -->\n    <svg:line\n      class=\"right\"\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      stroke-width=\"2\"\n      (pointerStart)=\"startResize('right', $event)\"\n    />\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\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\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\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    />\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"] }] }); }
@@ -2121,6 +2077,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: ViewChild,
                 args: ['resizer', { static: true }]
             }], ngAfterViewInit: [] } });
+function calcOffset(movementX, movementY, zoom) {
+    return {
+        offsetX: round(movementX / zoom),
+        offsetY: round(movementY / zoom)
+    };
+}
+function applyResize(side, model, offset) {
+    const { offsetX, offsetY } = offset;
+    const { x, y } = model.point();
+    const { width, height } = model.size();
+    // Handle each case of resizing (top, bottom, left, right, corners)
+    switch (side) {
+        case 'left':
+            return { x: x + offsetX, y, width: width - offsetX, height };
+        case 'right':
+            return { x, y, width: width + offsetX, height };
+        case 'top':
+            return { x, y: y + offsetY, width, height: height - offsetY };
+        case 'bottom':
+            return { x, y, width, height: height + offsetY };
+        case 'top-left':
+            return { x: x + offsetX, y: y + offsetY, width: width - offsetX, height: height - offsetY };
+        case 'top-right':
+            return { x, y: y + offsetY, width: width + offsetX, height: height - offsetY };
+        case 'bottom-left':
+            return { x: x + offsetX, y, width: width - offsetX, height: height + offsetY };
+        case 'bottom-right':
+            return { x, y, width: width + offsetX, height: height + offsetY };
+    }
+}
+function constrainRect(rect, model, side, minWidth, minHeight) {
+    let { x, y, width, height } = rect;
+    // 1. Prevent negative dimensions
+    width = Math.max(width, 0);
+    height = Math.max(height, 0);
+    // 2. Apply minimum size constraints
+    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);
+    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;
+        }
+        if (y === 0) {
+            height = model.point().y + model.size().height;
+        }
+        width = Math.min(width, parent.size().width - model.point().x);
+        height = Math.min(height, parent.size().height - model.point().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));
+            width = Math.max(width, bounds.x + bounds.width);
+        }
+        if (side.includes('right')) {
+            width = Math.max(width, bounds.x + bounds.width);
+        }
+        if (side.includes('bottom')) {
+            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));
+            height = Math.max(height, bounds.y + bounds.height);
+        }
+    }
+    return {
+        x,
+        y,
+        width,
+        height
+    };
+}
 
 class HandleSizeControllerDirective {
     constructor() {
@@ -2232,7 +2268,7 @@ class NodeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "g[node]", inputs: { nodeModel: "nodeModel", nodeTemplate: "nodeTemplate", groupNodeTemplate: "groupNodeTemplate" }, providers: [HandleService, NodeAccessorService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], ngImport: i0, template: "<!-- Default node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n  >\n    <div [outerHTML]=\"nodeModel.text()\"></div>\n\n    <handle type=\"source\" [position]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </div>\n</svg:foreignObject>\n\n<!-- Template node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"wrapper\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"nodeTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Component node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"wrapper\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n  >\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Default group node -->\n<svg:rect\n  *ngIf=\"nodeModel.node.type === 'default-group'\"\n  [resizable]=\"nodeModel.resizable()\"\n  [gap]=\"3\"\n  [resizerColor]=\"nodeModel.color()\"\n  class=\"default-group-node\"\n  rx=\"5\"\n  ry=\"5\"\n  [class.default-group-node_selected]=\"nodeModel.selected()\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  [style.stroke]=\"nodeModel.color()\"\n  [style.fill]=\"nodeModel.color()\"\n  (mousedown)=\"pullNode(); selectNode()\"\n/>\n\n<!-- Template group node  -->\n<svg:g\n  *ngIf=\"nodeModel.node.type === 'template-group' && groupNodeTemplate\"\n  class=\"selectable\"\n  (mousedown)=\"pullNode()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"groupNodeTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected, width: nodeModel.width, height: nodeModel.height } }\"\n    [ngTemplateOutletInjector]=\"injector\"\n  />\n</svg:g>\n\n<!-- Resizer -->\n<ng-container *ngIf=\"nodeModel.resizerTemplate() as template\">\n  <ng-container *ngIf=\"nodeModel.resizable()\">\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  </ng-container>\n</ng-container>\n\n<!-- Handles -->\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n    (pointerOver)=\"validateConnection(handle)\"\n    (pointerOut)=\"resetValidateConnection(handle)\"\n  />\n</ng-container>\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template"] }, { kind: "component", type: ResizableComponent, selector: "[resizable]", inputs: ["resizable", "resizerColor", "gap"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "g[node]", inputs: { nodeModel: "nodeModel", nodeTemplate: "nodeTemplate", groupNodeTemplate: "groupNodeTemplate" }, providers: [HandleService, NodeAccessorService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], ngImport: i0, template: "<!-- Default node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (pointerStart)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n  >\n    <div [outerHTML]=\"nodeModel.text()\"></div>\n\n    <handle type=\"source\" [position]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </div>\n</svg:foreignObject>\n\n<!-- Template node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (pointerStart)=\"pullNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"wrapper\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"nodeTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Component node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (pointerStart)=\"pullNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"wrapper\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n  >\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Default group node -->\n<svg:rect\n  *ngIf=\"nodeModel.node.type === 'default-group'\"\n  [resizable]=\"nodeModel.resizable()\"\n  [gap]=\"3\"\n  [resizerColor]=\"nodeModel.color()\"\n  class=\"default-group-node\"\n  rx=\"5\"\n  ry=\"5\"\n  [class.default-group-node_selected]=\"nodeModel.selected()\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  [style.stroke]=\"nodeModel.color()\"\n  [style.fill]=\"nodeModel.color()\"\n  (pointerStart)=\"pullNode(); selectNode()\"\n/>\n\n<!-- Template group node  -->\n<svg:g\n  *ngIf=\"nodeModel.node.type === 'template-group' && groupNodeTemplate\"\n  class=\"selectable\"\n  (pointerStart)=\"pullNode()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"groupNodeTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected, width: nodeModel.width, height: nodeModel.height } }\"\n    [ngTemplateOutletInjector]=\"injector\"\n  />\n</svg:g>\n\n<!-- Resizer -->\n<ng-container *ngIf=\"nodeModel.resizerTemplate() as template\">\n  <ng-container *ngIf=\"nodeModel.resizable()\">\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  </ng-container>\n</ng-container>\n\n<!-- Handles -->\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n    (pointerOver)=\"validateConnection(handle)\"\n    (pointerOut)=\"resetValidateConnection(handle)\"\n  />\n</ng-container>\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template"] }, { kind: "component", type: ResizableComponent, selector: "[resizable]", inputs: ["resizable", "resizerColor", "gap"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     InjectionContext
@@ -2242,7 +2278,7 @@ __decorate([
 ], NodeComponent.prototype, "ngAfterViewInit", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService, NodeAccessorService], template: "<!-- Default node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n  >\n    <div [outerHTML]=\"nodeModel.text()\"></div>\n\n    <handle type=\"source\" [position]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </div>\n</svg:foreignObject>\n\n<!-- Template node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"wrapper\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"nodeTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Component node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"wrapper\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n  >\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Default group node -->\n<svg:rect\n  *ngIf=\"nodeModel.node.type === 'default-group'\"\n  [resizable]=\"nodeModel.resizable()\"\n  [gap]=\"3\"\n  [resizerColor]=\"nodeModel.color()\"\n  class=\"default-group-node\"\n  rx=\"5\"\n  ry=\"5\"\n  [class.default-group-node_selected]=\"nodeModel.selected()\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  [style.stroke]=\"nodeModel.color()\"\n  [style.fill]=\"nodeModel.color()\"\n  (mousedown)=\"pullNode(); selectNode()\"\n/>\n\n<!-- Template group node  -->\n<svg:g\n  *ngIf=\"nodeModel.node.type === 'template-group' && groupNodeTemplate\"\n  class=\"selectable\"\n  (mousedown)=\"pullNode()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"groupNodeTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected, width: nodeModel.width, height: nodeModel.height } }\"\n    [ngTemplateOutletInjector]=\"injector\"\n  />\n</svg:g>\n\n<!-- Resizer -->\n<ng-container *ngIf=\"nodeModel.resizerTemplate() as template\">\n  <ng-container *ngIf=\"nodeModel.resizable()\">\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  </ng-container>\n</ng-container>\n\n<!-- Handles -->\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n    (pointerOver)=\"validateConnection(handle)\"\n    (pointerOut)=\"resetValidateConnection(handle)\"\n  />\n</ng-container>\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
+            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService, NodeAccessorService], template: "<!-- Default node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (pointerStart)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n  >\n    <div [outerHTML]=\"nodeModel.text()\"></div>\n\n    <handle type=\"source\" [position]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </div>\n</svg:foreignObject>\n\n<!-- Template node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (pointerStart)=\"pullNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"wrapper\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"nodeTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Component node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (pointerStart)=\"pullNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"wrapper\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n  >\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Default group node -->\n<svg:rect\n  *ngIf=\"nodeModel.node.type === 'default-group'\"\n  [resizable]=\"nodeModel.resizable()\"\n  [gap]=\"3\"\n  [resizerColor]=\"nodeModel.color()\"\n  class=\"default-group-node\"\n  rx=\"5\"\n  ry=\"5\"\n  [class.default-group-node_selected]=\"nodeModel.selected()\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  [style.stroke]=\"nodeModel.color()\"\n  [style.fill]=\"nodeModel.color()\"\n  (pointerStart)=\"pullNode(); selectNode()\"\n/>\n\n<!-- Template group node  -->\n<svg:g\n  *ngIf=\"nodeModel.node.type === 'template-group' && groupNodeTemplate\"\n  class=\"selectable\"\n  (pointerStart)=\"pullNode()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"groupNodeTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected, width: nodeModel.width, height: nodeModel.height } }\"\n    [ngTemplateOutletInjector]=\"injector\"\n  />\n</svg:g>\n\n<!-- Resizer -->\n<ng-container *ngIf=\"nodeModel.resizerTemplate() as template\">\n  <ng-container *ngIf=\"nodeModel.resizable()\">\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  </ng-container>\n</ng-container>\n\n<!-- Handles -->\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n    (pointerOver)=\"validateConnection(handle)\"\n    (pointerOut)=\"resetValidateConnection(handle)\"\n  />\n</ng-container>\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
         }], propDecorators: { nodeModel: [{
                 type: Input
             }], nodeTemplate: [{
@@ -2583,12 +2619,13 @@ class FlowSizeControllerDirective {
     constructor() {
         this.host = inject(ElementRef);
         this.flowSettingsService = inject(FlowSettingsService);
-        this.flowWidth = 0;
-        this.flowHeight = 0;
-        effect(() => {
+        this.flowWidth = computed(() => {
             const view = this.flowSettingsService.view();
-            this.flowWidth = view === 'auto' ? '100%' : view[0];
-            this.flowHeight = view === 'auto' ? '100%' : view[1];
+            return view === 'auto' ? '100%' : view[0];
+        });
+        this.flowHeight = computed(() => {
+            const view = this.flowSettingsService.view();
+            return view === 'auto' ? '100%' : view[1];
         });
         resizable([this.host.nativeElement], inject(NgZone)).pipe(tap(([entry]) => {
             this.flowSettingsService.computedFlowWidth.set(entry.contentRect.width);
@@ -2596,18 +2633,18 @@ class FlowSizeControllerDirective {
         }), takeUntilDestroyed()).subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]", host: { properties: { "attr.width": "this.flowWidth", "attr.height": "this.flowHeight" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]", host: { properties: { "attr.width": "flowWidth()", "attr.height": "flowHeight()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSizeControllerDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'svg[flowSizeController]' }]
-        }], ctorParameters: function () { return []; }, propDecorators: { flowWidth: [{
-                type: HostBinding,
-                args: ['attr.width']
-            }], flowHeight: [{
-                type: HostBinding,
-                args: ['attr.height']
-            }] } });
+            args: [{
+                    selector: 'svg[flowSizeController]',
+                    host: {
+                        '[attr.width]': 'flowWidth()',
+                        '[attr.height]': 'flowHeight()'
+                    }
+                }]
+        }], ctorParameters: function () { return []; } });
 
 const connectionControllerHostDirective = {
     directive: ConnectionControllerDirective,
@@ -2657,6 +2694,7 @@ class VflowComponent {
         this.nodeRenderingService = inject(NodeRenderingService);
         this.flowSettingsService = inject(FlowSettingsService);
         this.componentEventBusService = inject(ComponentEventBusService);
+        this.keyboardService = inject(KeyboardService);
         this.injector = inject(Injector);
         /**
          * Background for flow
@@ -2748,6 +2786,9 @@ class VflowComponent {
     set entitiesSelectable(value) {
         this.flowSettingsService.entitiesSelectable.set(value);
     }
+    set keyboardShortcuts(value) {
+        this.keyboardService.setShortcuts(value);
+    }
     /**
      * Settings for connection (it renders when user tries to create edge between nodes)
      *
@@ -2846,7 +2887,7 @@ class VflowComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: VflowComponent, selector: "vflow", inputs: { view: "view", minZoom: "minZoom", maxZoom: "maxZoom", handlePositions: "handlePositions", background: "background", optimization: "optimization", entitiesSelectable: "entitiesSelectable", connection: ["connection", "connection", (settings) => new ConnectionModel(settings)], nodes: "nodes", edges: "edges" }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: VflowComponent, selector: "vflow", inputs: { view: "view", minZoom: "minZoom", maxZoom: "maxZoom", handlePositions: "handlePositions", background: "background", optimization: "optimization", entitiesSelectable: "entitiesSelectable", keyboardShortcuts: "keyboardShortcuts", connection: ["connection", "connection", (settings) => new ConnectionModel(settings)], nodes: "nodes", edges: "edges" }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, providers: [
             DraggableService,
             ViewportService,
             FlowStatusService,
@@ -2856,7 +2897,8 @@ class VflowComponent {
             NodeRenderingService,
             SelectionService,
             FlowSettingsService,
-            ComponentEventBusService
+            ComponentEventBusService,
+            KeyboardService
         ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true }], hostDirectives: [{ directive: ConnectionControllerDirective, outputs: ["onConnect", "onConnect"] }, { directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.size", "onNodesChange.size", "onNodesChange.size.single", "onNodesChange.size.single", "onNodesChange.size.many", "onNodesChange.size.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  flowSizeController\n  class=\"root-svg\"\n  #flow\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g [background]=\"background\"/>\n\n  <svg:g\n    mapContext\n    spacePointContext\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <!-- Edges  -->\n    <svg:g\n      *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n      edge\n      [model]=\"model\"\n      [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n      [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n    />\n\n    <!-- Nodes -->\n    <svg:g\n      *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n      node\n      [nodeModel]=\"model\"\n      [nodeTemplate]=\"nodeTemplateDirective?.templateRef\"\n      [groupNodeTemplate]=\"groupNodeTemplateDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["nodeModel", "nodeTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]", inputs: ["background"] }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { kind: "directive", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }, { kind: "directive", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowComponent, decorators: [{
@@ -2871,7 +2913,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NodeRenderingService,
                         SelectionService,
                         FlowSettingsService,
-                        ComponentEventBusService
+                        ComponentEventBusService,
+                        KeyboardService
                     ], hostDirectives: [
                         connectionControllerHostDirective,
                         changesControllerHostDirective
@@ -2890,6 +2933,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], entitiesSelectable: [{
                 type: Input
+            }], keyboardShortcuts: [{
+                type: Input
             }], connection: [{
                 type: Input,
                 args: [{ transform: (settings) => new ConnectionModel(settings) }]
@@ -2946,7 +2991,7 @@ class SelectableDirective {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectableDirective, selector: "[selectable]", host: { listeners: { "mousedown": "onMousedown()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectableDirective, selector: "[selectable]", host: { listeners: { "mousedown": "onMousedown()", "touchstart": "onMousedown()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, decorators: [{
             type: Directive,
@@ -2954,6 +2999,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], propDecorators: { onMousedown: [{
                 type: HostListener,
                 args: ['mousedown']
+            }, {
+                type: HostListener,
+                args: ['touchstart']
             }] } });
 
 const components = [