ngx-vflow 0.13.0-0 → 0.14.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, ContentChild, NgModule } from '@angular/core';
+import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, EventEmitter, Output, DestroyRef, Input, runInInjectionContext, Component, Injector, 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';
@@ -94,6 +94,10 @@ class FlowEntitiesService {
             // empty arrays considered equal, other arrays may not be equal
             equal: (a, b) => !a.length && !b.length ? true : a === b
         });
+        this.validEdges = computed(() => {
+            const nodes = this.nodes();
+            return this.edges().filter(e => nodes.includes(e.source()) && nodes.includes(e.target()));
+        });
         this.connection = signal(new ConnectionModel({}));
         this.markers = computed(() => {
             const markersMap = new Map();
@@ -114,14 +118,11 @@ class FlowEntitiesService {
             }
             return markersMap;
         });
-        this.validEdges = computed(() => {
-            const nodes = this.nodes();
-            return this.edges().filter(e => nodes.includes(e.source()) && nodes.includes(e.target()));
-        });
         this.entities = computed(() => [
             ...this.nodes(),
             ...this.edges()
         ]);
+        this.minimap = signal(null);
     }
     getNode(id) {
         return this.nodes().find(({ node }) => node.id === id);
@@ -174,6 +175,7 @@ class FlowSettingsService {
         this.computedFlowHeight = signal(0);
         this.minZoom = signal(0.5);
         this.maxZoom = signal(3);
+        this.background = signal({ type: 'solid', color: '#fff' });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService }); }
@@ -249,9 +251,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 +340,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 +449,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 +487,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 +517,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() {
@@ -1247,12 +1339,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() }
@@ -1587,6 +1678,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{ selector: 'g[spacePointContext]' }]
         }] });
 
+function transformBackground(background) {
+    return typeof background === 'string'
+        ? { type: 'solid', color: background }
+        : background;
+}
+
 function Microtask(target, key, descriptor) {
     const originalMethod = descriptor.value;
     descriptor.value = function (...args) {
@@ -1665,6 +1762,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+class DefaultNodeComponent {
+    constructor() {
+        this.selected = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DefaultNodeComponent, selector: "default-node", inputs: { selected: "selected" }, host: { properties: { "class.selected": "selected" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'default-node', host: {
+                        '[class.selected]': 'selected'
+                    }, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"] }]
+        }], propDecorators: { selected: [{
+                type: Input
+            }] } });
+
 class HandleModel {
     constructor(rawHandle, parentNode) {
         this.rawHandle = rawHandle;
@@ -1878,6 +1991,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;
@@ -1889,7 +2003,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())
@@ -1918,193 +2032,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"] }] }); }
@@ -2125,6 +2101,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() {
@@ -2236,7 +2292,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  <default-node\n    #htmlWrapper\n    [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  </default-node>\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-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: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }, { 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
@@ -2246,7 +2302,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  <default-node\n    #htmlWrapper\n    [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  </default-node>\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-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: [{
@@ -2502,13 +2558,11 @@ const defaultGap = 20;
 const defaultDotSize = 2;
 const defaultDotColor = 'rgb(177, 177, 183)';
 class BackgroundComponent {
-    set background(value) {
-        this.backgroundSignal.set(value);
-    }
     constructor() {
         this.viewportService = inject(ViewportService);
         this.rootSvg = inject(RootSvgReferenceDirective).element;
-        this.backgroundSignal = signal({ type: 'solid', color: defaultBg });
+        this.settingsService = inject(FlowSettingsService);
+        this.backgroundSignal = this.settingsService.background;
         this.scaledGap = computed(() => {
             const background = this.backgroundSignal();
             if (background.type === 'dots') {
@@ -2542,20 +2596,12 @@ class BackgroundComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: BackgroundComponent, selector: "g[background]", inputs: { background: ["background", "background", transform] }, ngImport: i0, template: "<ng-container *ngIf=\"backgroundSignal().type === 'dots'\">\n  <svg:pattern\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n  >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n    />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n  />\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BackgroundComponent, selector: "g[background]", ngImport: i0, template: "<ng-container *ngIf=\"backgroundSignal().type === 'dots'\">\n  <svg:pattern\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n  >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n    />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n  />\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackgroundComponent, decorators: [{
             type: Component,
             args: [{ selector: 'g[background]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"backgroundSignal().type === 'dots'\">\n  <svg:pattern\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n  >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n    />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n  />\n</ng-container>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { background: [{
-                type: Input,
-                args: [{ required: true, transform }]
-            }] } });
-function transform(background) {
-    return typeof background === 'string'
-        ? { type: 'solid', color: background }
-        : background;
-}
+        }], ctorParameters: function () { return []; } });
 
 // TODO: too general purpose nane
 class RootSvgContextDirective {
@@ -2662,11 +2708,8 @@ 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
-         */
-        this.background = '#fff';
         this.optimization = {
             computeLayersOnInit: true
         };
@@ -2711,6 +2754,7 @@ class VflowComponent {
         this.edgesChange$ = this.edgesChangeService.changes$;
         // #endregion
         this.markers = this.flowEntitiesService.markers;
+        this.minimap = this.flowEntitiesService.minimap;
     }
     // #endregion
     // #region SETTINGS
@@ -2747,12 +2791,21 @@ class VflowComponent {
     set handlePositions(handlePositions) {
         this.flowSettingsService.handlePositions.set(handlePositions);
     }
+    /**
+     * Background for flow
+     */
+    set background(value) {
+        this.flowSettingsService.background.set(transformBackground(value));
+    }
     /**
      * Global rule if you can or can't select entities
      */
     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)
      *
@@ -2851,7 +2904,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,
@@ -2861,8 +2914,9 @@ class VflowComponent {
             NodeRenderingService,
             SelectionService,
             FlowSettingsService,
-            ComponentEventBusService
-        ], 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 }); }
+            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 />\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  <!-- Minimap -->\n  <ng-container *ngIf=\"minimap() as minimap\">\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  </ng-container>\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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]" }, { 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: [{
             type: Component,
@@ -2876,11 +2930,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NodeRenderingService,
                         SelectionService,
                         FlowSettingsService,
-                        ComponentEventBusService
+                        ComponentEventBusService,
+                        KeyboardService
                     ], hostDirectives: [
                         connectionControllerHostDirective,
                         changesControllerHostDirective
-                    ], 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"] }]
+                    ], 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 />\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  <!-- Minimap -->\n  <ng-container *ngIf=\"minimap() as minimap\">\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  </ng-container>\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"] }]
         }], propDecorators: { view: [{
                 type: Input
             }], minZoom: [{
@@ -2895,6 +2950,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) }]
@@ -2951,7 +3008,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,
@@ -2959,11 +3016,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], propDecorators: { onMousedown: [{
                 type: HostListener,
                 args: ['mousedown']
+            }, {
+                type: HostListener,
+                args: ['touchstart']
+            }] } });
+
+class MinimapModel {
+    constructor() {
+        this.template = signal(null);
+    }
+}
+
+class MiniMapComponent {
+    constructor() {
+        this.entitiesService = inject(FlowEntitiesService);
+        this.flowSettingsService = inject(FlowSettingsService);
+        this.viewportService = inject(ViewportService);
+        this.injector = inject(Injector);
+        /**
+         * The color outside the viewport (invisible area)
+         */
+        this.maskColor = `rgba(215, 215, 215, 0.6)`;
+        /**
+         * The minimap stroke color
+         */
+        this.strokeColor = `rgb(200, 200, 200)`;
+        this.minimapOffset = 10;
+        this.minimapScale = computed(() => {
+            if (this.scaleOnHoverSignal()) {
+                return this.hovered() ? 0.4 : 0.2;
+            }
+            return 0.2;
+        });
+        this.viewportColor = computed(() => this.flowSettingsService.background().color ?? '#fff');
+        this.hovered = signal(false);
+        this.minimapPoint = computed(() => {
+            switch (this.minimapPosition()) {
+                case 'top-left':
+                    return { x: this.minimapOffset, y: this.minimapOffset };
+                case 'top-right':
+                    return {
+                        x: this.flowSettingsService.computedFlowWidth() - this.minimapWidth() - this.minimapOffset,
+                        y: this.minimapOffset
+                    };
+                case 'bottom-left':
+                    return {
+                        x: this.minimapOffset,
+                        y: this.flowSettingsService.computedFlowHeight() - this.minimapHeight() - this.minimapOffset
+                    };
+                case 'bottom-right':
+                    return {
+                        x: this.flowSettingsService.computedFlowWidth() - this.minimapWidth() - this.minimapOffset,
+                        y: this.flowSettingsService.computedFlowHeight() - this.minimapHeight() - this.minimapOffset
+                    };
+            }
+        });
+        this.minimapWidth = computed(() => this.flowSettingsService.computedFlowWidth() * this.minimapScale());
+        this.minimapHeight = computed(() => this.flowSettingsService.computedFlowHeight() * this.minimapScale());
+        this.viewportTransform = computed(() => {
+            const viewport = this.viewportService.readableViewport();
+            let scale = 1 / viewport.zoom;
+            let x = -(viewport.x * this.minimapScale()) * scale;
+            x /= this.minimapScale();
+            let y = -(viewport.y * this.minimapScale()) * scale;
+            y /= this.minimapScale();
+            scale /= this.minimapScale();
+            return `translate(${x}, ${y}) scale(${scale})`;
+        });
+        this.boundsViewport = computed(() => {
+            const nodes = this.entitiesService.nodes();
+            return getViewportForBounds(getNodesBounds(nodes), this.flowSettingsService.computedFlowWidth(), this.flowSettingsService.computedFlowHeight(), -Infinity, 1.5, 0);
+        });
+        this.minimapTransform = computed(() => {
+            const vport = this.boundsViewport();
+            const x = vport.x * this.minimapScale();
+            const y = vport.y * this.minimapScale();
+            const scale = vport.zoom * this.minimapScale();
+            return `translate(${x} ${y}) scale(${scale})`;
+        });
+        this.minimapPosition = signal('bottom-right');
+        this.scaleOnHoverSignal = signal(false);
+    }
+    /**
+     * The corner of the flow where to render a mini-map
+     */
+    set position(value) {
+        this.minimapPosition.set(value);
+    }
+    /**
+     * Make a minimap bigger on hover
+     */
+    set scaleOnHover(value) {
+        this.scaleOnHoverSignal.set(value);
+    }
+    ngOnInit() {
+        const model = new MinimapModel();
+        model.template.set(this.minimap);
+        this.entitiesService.minimap.set(model);
+    }
+    trackNodes(idx, { node }) {
+        return node;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MiniMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MiniMapComponent, selector: "mini-map", inputs: { position: "position", maskColor: "maskColor", strokeColor: "strokeColor", scaleOnHover: "scaleOnHover" }, viewQueries: [{ propertyName: "minimap", first: true, predicate: ["minimap"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #minimap>\n  <svg:rect\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    [attr.stroke]=\"strokeColor\"\n    fill=\"none\"\n  />\n\n  <svg:svg\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    (mouseover)=\"hovered.set(true)\"\n    (mouseleave)=\"hovered.set(false)\"\n  >\n    <svg:rect\n      [attr.width]=\"minimapWidth()\"\n      [attr.height]=\"minimapHeight()\"\n      [attr.fill]=\"maskColor\"\n    />\n\n    <svg:g [attr.transform]=\"minimapTransform()\">\n      <svg:rect\n        [attr.fill]=\"viewportColor()\"\n        [attr.transform]=\"viewportTransform()\"\n        [attr.width]=\"minimapWidth()\"\n        [attr.height]=\"minimapHeight()\"\n      />\n\n      <ng-container\n        *ngFor=\"let model of entitiesService.nodes(); trackBy: trackNodes\"\n      >\n        <svg:foreignObject\n          *ngIf=\"model.node.type === 'default' || model.node.type === 'html-template' || model.isComponentType\"\n          [attr.transform]=\"model.pointTransform()\"\n          [attr.width]=\"model.size().width\"\n          [attr.height]=\"model.size().height\"\n        >\n          <default-node\n            [selected]=\"model.selected()\"\n            [style.width.px]=\"model.size().width\"\n            [style.height.px]=\"model.size().height\"\n            [style.max-width.px]=\"model.size().width\"\n            [style.max-height.px]=\"model.size().height\"\n          >\n            <div [outerHTML]=\"model.text()\"></div>\n          </default-node>\n        </svg:foreignObject>\n\n        <svg:rect\n          *ngIf=\"model.node.type === 'default-group' || model.node.type === 'template-group'\"\n          class=\"default-group-node\"\n          rx=\"5\"\n          ry=\"5\"\n          [attr.transform]=\"model.pointTransform()\"\n          [class.default-group-node_selected]=\"model.selected()\"\n          [attr.width]=\"model.size().width\"\n          [attr.height]=\"model.size().height\"\n          [style.stroke]=\"model.color()\"\n          [style.fill]=\"model.color()\"\n        />\n\n      </ng-container>\n    </svg:g>\n  </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MiniMapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mini-map', template: "<ng-template #minimap>\n  <svg:rect\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    [attr.stroke]=\"strokeColor\"\n    fill=\"none\"\n  />\n\n  <svg:svg\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    (mouseover)=\"hovered.set(true)\"\n    (mouseleave)=\"hovered.set(false)\"\n  >\n    <svg:rect\n      [attr.width]=\"minimapWidth()\"\n      [attr.height]=\"minimapHeight()\"\n      [attr.fill]=\"maskColor\"\n    />\n\n    <svg:g [attr.transform]=\"minimapTransform()\">\n      <svg:rect\n        [attr.fill]=\"viewportColor()\"\n        [attr.transform]=\"viewportTransform()\"\n        [attr.width]=\"minimapWidth()\"\n        [attr.height]=\"minimapHeight()\"\n      />\n\n      <ng-container\n        *ngFor=\"let model of entitiesService.nodes(); trackBy: trackNodes\"\n      >\n        <svg:foreignObject\n          *ngIf=\"model.node.type === 'default' || model.node.type === 'html-template' || model.isComponentType\"\n          [attr.transform]=\"model.pointTransform()\"\n          [attr.width]=\"model.size().width\"\n          [attr.height]=\"model.size().height\"\n        >\n          <default-node\n            [selected]=\"model.selected()\"\n            [style.width.px]=\"model.size().width\"\n            [style.height.px]=\"model.size().height\"\n            [style.max-width.px]=\"model.size().width\"\n            [style.max-height.px]=\"model.size().height\"\n          >\n            <div [outerHTML]=\"model.text()\"></div>\n          </default-node>\n        </svg:foreignObject>\n\n        <svg:rect\n          *ngIf=\"model.node.type === 'default-group' || model.node.type === 'template-group'\"\n          class=\"default-group-node\"\n          rx=\"5\"\n          ry=\"5\"\n          [attr.transform]=\"model.pointTransform()\"\n          [class.default-group-node_selected]=\"model.selected()\"\n          [attr.width]=\"model.size().width\"\n          [attr.height]=\"model.size().height\"\n          [style.stroke]=\"model.color()\"\n          [style.fill]=\"model.color()\"\n        />\n\n      </ng-container>\n    </svg:g>\n  </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"] }]
+        }], propDecorators: { position: [{
+                type: Input
+            }], maskColor: [{
+                type: Input
+            }], strokeColor: [{
+                type: Input
+            }], scaleOnHover: [{
+                type: Input
+            }], minimap: [{
+                type: ViewChild,
+                args: ['minimap', { static: true }]
             }] } });
 
 const components = [
     VflowComponent,
     NodeComponent,
+    DefaultNodeComponent,
     EdgeComponent,
     EdgeLabelComponent,
     ConnectionComponent,
@@ -2971,6 +3147,7 @@ const components = [
     DefsComponent,
     BackgroundComponent,
     ResizableComponent,
+    MiniMapComponent
 ];
 const directives = [
     SpacePointContextDirective,
@@ -2995,13 +3172,15 @@ class VflowModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: VflowModule, declarations: [VflowComponent,
             NodeComponent,
+            DefaultNodeComponent,
             EdgeComponent,
             EdgeLabelComponent,
             ConnectionComponent,
             HandleComponent,
             DefsComponent,
             BackgroundComponent,
-            ResizableComponent, SpacePointContextDirective,
+            ResizableComponent,
+            MiniMapComponent, SpacePointContextDirective,
             MapContextDirective,
             RootSvgReferenceDirective,
             RootSvgContextDirective,
@@ -3017,7 +3196,8 @@ class VflowModule {
             HandleTemplateDirective], imports: [CommonModule], exports: [VflowComponent,
             HandleComponent,
             ResizableComponent,
-            SelectableDirective, NodeHtmlTemplateDirective,
+            SelectableDirective,
+            MiniMapComponent, NodeHtmlTemplateDirective,
             GroupNodeTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
@@ -3034,6 +3214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         HandleComponent,
                         ResizableComponent,
                         SelectableDirective,
+                        MiniMapComponent,
                         ...templateDirectives
                     ],
                     declarations: [...components, ...directives, ...templateDirectives],
@@ -3046,5 +3227,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomDynamicNodeComponent, CustomNodeComponent, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, HandleComponent, HandleTemplateDirective, NodeHtmlTemplateDirective, ResizableComponent, SelectableDirective, VflowComponent, VflowModule, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode };
+export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomDynamicNodeComponent, CustomNodeComponent, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, HandleComponent, HandleTemplateDirective, MiniMapComponent, NodeHtmlTemplateDirective, ResizableComponent, SelectableDirective, VflowComponent, VflowModule, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode };
 //# sourceMappingURL=ngx-vflow.mjs.map