ngx-vflow 1.14.0 → 1.16.0

package/fesm2022/ngx-vflow.mjs

@@ -2,11 +2,11 @@ import * as i0 from '@angular/core';
 import { signal, computed, Injectable, inject, ElementRef, Directive, NgZone, effect, untracked, TemplateRef, DestroyRef, EventEmitter, OutputEmitterRef, input, assertInInjectionContext, Injector, runInInjectionContext, viewChild, Component, ChangeDetectionStrategy, output, HostListener, Renderer2, contentChild, Input, forwardRef } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
-import { Subject, switchMap, merge, fromEvent, tap, Observable, skip, map, pairwise, filter, distinctUntilChanged, observeOn, asyncScheduler, zip, debounceTime, animationFrameScheduler, share, startWith } from 'rxjs';
-import { toObservable, takeUntilDestroyed, outputFromObservable, toSignal } from '@angular/core/rxjs-interop';
+import { Subject, switchMap, merge, fromEvent, tap, Observable, observeOn, asyncScheduler, filter, debounceTime, map, catchError, of, shareReplay, skip, pairwise, distinctUntilChanged, zip, animationFrameScheduler, share, startWith } from 'rxjs';
+import { toObservable, takeUntilDestroyed, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
 import { drag } from 'd3-drag';
 import { __decorate } from 'tslib';
-import { NgTemplateOutlet, NgComponentOutlet, KeyValuePipe } from '@angular/common';
+import { NgTemplateOutlet, NgComponentOutlet, AsyncPipe, KeyValuePipe } from '@angular/common';
 
 const getOverlappingArea = (rectA, rectB) => {
     const xOverlap = Math.max(0, Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x));
@@ -218,6 +218,7 @@ const DEFAULT_OPTIMIZATION = {
     detachedGroupsLayer: false,
     virtualization: false,
     virtualizationZoomThreshold: 0.5,
+    lazyLoadTrigger: 'immediate',
 };
 
 class FlowSettingsService {
@@ -553,10 +554,58 @@ function align(num, constant) {
     return Math.ceil(num / constant) * constant;
 }
 
+class FlowStatusService {
+    constructor() {
+        this.status = signal({ state: 'idle', payload: null });
+    }
+    setIdleStatus() {
+        this.status.set({ state: 'idle', payload: null });
+    }
+    setConnectionStartStatus(source, sourceHandle) {
+        this.status.set({ state: 'connection-start', payload: { source, sourceHandle } });
+    }
+    setReconnectionStartStatus(source, sourceHandle, oldEdge) {
+        this.status.set({ state: 'reconnection-start', payload: { source, sourceHandle, oldEdge } });
+    }
+    setConnectionValidationStatus(valid, source, target, sourceHandle, targetHandle) {
+        this.status.set({ state: 'connection-validation', payload: { source, target, sourceHandle, targetHandle, valid } });
+    }
+    setReconnectionValidationStatus(valid, source, target, sourceHandle, targetHandle, oldEdge) {
+        this.status.set({
+            state: 'reconnection-validation',
+            payload: { source, target, sourceHandle, targetHandle, valid, oldEdge },
+        });
+    }
+    setConnectionEndStatus(source, target, sourceHandle, targetHandle) {
+        this.status.set({ state: 'connection-end', payload: { source, target, sourceHandle, targetHandle } });
+    }
+    setReconnectionEndStatus(source, target, sourceHandle, targetHandle, oldEdge) {
+        this.status.set({ state: 'reconnection-end', payload: { source, target, sourceHandle, targetHandle, oldEdge } });
+    }
+    setNodeDragStartStatus(node) {
+        this.status.set({ state: 'node-drag-start', payload: { node } });
+    }
+    setNodeDragEndStatus(node) {
+        this.status.set({ state: 'node-drag-end', payload: { node } });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowStatusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowStatusService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowStatusService, decorators: [{
+            type: Injectable
+        }] });
+function isNodeDragStartStatus(params) {
+    return params.state === 'node-drag-start';
+}
+function isNodeDragEndStatus(params) {
+    return params.state === 'node-drag-end';
+}
+
 class DraggableService {
     constructor() {
         this.entitiesService = inject(FlowEntitiesService);
         this.settingsService = inject(FlowSettingsService);
+        this.flowStatusService = inject(FlowStatusService);
     }
     /**
      * Enable draggable behavior for element.
@@ -604,6 +653,7 @@ class DraggableService {
             .filter(filterCondition)
             .on('start', (event) => {
             dragNodes = this.getDragNodes(model);
+            this.flowStatusService.setNodeDragStartStatus(model);
             initialPositions = dragNodes.map((node) => ({
                 x: node.point().x - event.x,
                 y: node.point().y - event.y,
@@ -617,6 +667,9 @@ class DraggableService {
                 };
                 this.moveNode(model, point);
             });
+        })
+            .on('end', () => {
+            this.flowStatusService.setNodeDragEndStatus(model);
         });
     }
     getDragNodes(model) {
@@ -791,40 +844,15 @@ function addNodesToEdges(nodes, edges) {
     });
 }
 
-class FlowStatusService {
-    constructor() {
-        this.status = signal({ state: 'idle', payload: null });
-    }
-    setIdleStatus() {
-        this.status.set({ state: 'idle', payload: null });
-    }
-    setConnectionStartStatus(source, sourceHandle) {
-        this.status.set({ state: 'connection-start', payload: { source, sourceHandle } });
-    }
-    setReconnectionStartStatus(source, sourceHandle, oldEdge) {
-        this.status.set({ state: 'reconnection-start', payload: { source, sourceHandle, oldEdge } });
-    }
-    setConnectionValidationStatus(valid, source, target, sourceHandle, targetHandle) {
-        this.status.set({ state: 'connection-validation', payload: { source, target, sourceHandle, targetHandle, valid } });
-    }
-    setReconnectionValidationStatus(valid, source, target, sourceHandle, targetHandle, oldEdge) {
-        this.status.set({
-            state: 'reconnection-validation',
-            payload: { source, target, sourceHandle, targetHandle, valid, oldEdge },
-        });
-    }
-    setConnectionEndStatus(source, target, sourceHandle, targetHandle) {
-        this.status.set({ state: 'connection-end', payload: { source, target, sourceHandle, targetHandle } });
+function isCallable(fn) {
+    try {
+        new Proxy(fn, { apply: () => undefined })();
+        return true;
     }
-    setReconnectionEndStatus(source, target, sourceHandle, targetHandle, oldEdge) {
-        this.status.set({ state: 'reconnection-end', payload: { source, target, sourceHandle, targetHandle, oldEdge } });
+    catch (err) {
+        return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowStatusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowStatusService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowStatusService, decorators: [{
-            type: Injectable
-        }] });
 
 class ComponentEventBusService {
     constructor() {
@@ -906,7 +934,7 @@ function outputRefToObservable(ref) {
     });
 }
 
-class CustomNodeComponent extends CustomNodeBaseComponent {
+class CustomDynamicNodeComponent extends CustomNodeBaseComponent {
     constructor() {
         super(...arguments);
         /**
@@ -915,19 +943,20 @@ class CustomNodeComponent extends CustomNodeBaseComponent {
         this.node = input.required();
     }
     ngOnInit() {
-        if (this.node().data) {
-            this.data.set(this.node().data);
+        const data = this.node().data;
+        if (data) {
+            this.data = data;
         }
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: CustomNodeComponent, inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomDynamicNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: CustomDynamicNodeComponent, inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomDynamicNodeComponent, decorators: [{
             type: Directive
         }] });
 
-class CustomDynamicNodeComponent extends CustomNodeBaseComponent {
+class CustomNodeComponent extends CustomNodeBaseComponent {
     constructor() {
         super(...arguments);
         /**
@@ -936,19 +965,25 @@ class CustomDynamicNodeComponent extends CustomNodeBaseComponent {
         this.node = input.required();
     }
     ngOnInit() {
-        const data = this.node().data;
-        if (data) {
-            this.data = data;
+        if (this.node().data) {
+            this.data.set(this.node().data);
         }
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomDynamicNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: CustomDynamicNodeComponent, inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: CustomNodeComponent, inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomDynamicNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomNodeComponent, decorators: [{
             type: Directive
         }] });
 
+function isCustomNodeComponent(type) {
+    return Object.prototype.isPrototypeOf.call(CustomNodeComponent, type);
+}
+function isCustomDynamicNodeComponent(type) {
+    return Object.prototype.isPrototypeOf.call(CustomDynamicNodeComponent, type);
+}
+
 function isStaticNode(node) {
     return typeof node.point !== 'function';
 }
@@ -956,10 +991,18 @@ function isDynamicNode(node) {
     return typeof node.point === 'function';
 }
 function isComponentStaticNode(node) {
-    return Object.prototype.isPrototypeOf.call(CustomNodeComponent, node.type);
+    if (isCustomNodeComponent(node.type)) {
+        return true;
+    }
+    // Check if the type is a function with dynamic import
+    return isCallable(node.type) && !isCallable(node.point);
 }
 function isComponentDynamicNode(node) {
-    return Object.prototype.isPrototypeOf.call(CustomDynamicNodeComponent, node.type);
+    if (isCustomDynamicNodeComponent(node.type)) {
+        return true;
+    }
+    // Check if the type is a function with dynamic import
+    return isCallable(node.type) && isCallable(node.point);
 }
 function isTemplateStaticNode(node) {
     return node.type === 'html-template';
@@ -1018,6 +1061,138 @@ function toSignalProperties(obj) {
     return newObj;
 }
 
+function isGroupNode(node) {
+    return node.rawNode.type === 'default-group' || node.rawNode.type === 'template-group';
+}
+
+// MIT License
+// Copyright (c) 2023 Chau Tran
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+/* eslint-disable @typescript-eslint/ban-types */
+function assertInjector(fn, injector, runner) {
+    !injector && assertInInjectionContext(fn);
+    const assertedInjector = injector ?? inject(Injector);
+    if (!runner)
+        return assertedInjector;
+    return runInInjectionContext(assertedInjector, runner);
+}
+
+// MIT License
+// Copyright (c) 2023 Chau Tran
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+/**
+ * Function `toLazySignal()` is a proxy function that will call the original
+ * `toSignal()` function when the returned signal is read for the first time.
+ */
+function toLazySignal(source, options) {
+    const injector = assertInjector(toLazySignal, options?.injector);
+    let s;
+    return computed(() => {
+        if (!s) {
+            s = untracked(() => toSignal(source, { ...options, injector }));
+        }
+        return s();
+    });
+}
+
+class NodeRenderingService {
+    constructor() {
+        this.flowEntitiesService = inject(FlowEntitiesService);
+        this.flowSettingsService = inject(FlowSettingsService);
+        this.viewportService = inject(ViewportService);
+        this.nodes = computed(() => {
+            if (!this.flowSettingsService.optimization().virtualization) {
+                return [...this.flowEntitiesService.nodes()].sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
+            }
+            return this.viewportNodesAfterInteraction().sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
+        });
+        this.groups = computed(() => {
+            return this.nodes().filter((n) => isGroupNode(n));
+        });
+        this.nonGroups = computed(() => {
+            return this.nodes().filter((n) => !isGroupNode(n));
+        });
+        this.viewportNodes = computed(() => {
+            const nodes = this.flowEntitiesService.nodes();
+            const viewport = this.viewportService.readableViewport();
+            const flowWidth = this.flowSettingsService.computedFlowWidth();
+            const flowHeight = this.flowSettingsService.computedFlowHeight();
+            return nodes.filter((n) => {
+                const { x, y } = n.globalPoint();
+                const width = n.width();
+                const height = n.height();
+                return isRectInViewport({ x, y, width, height }, viewport, flowWidth, flowHeight);
+            });
+        });
+        this.viewportNodesAfterInteraction = toLazySignal(merge(
+        // TODO: maybe there is a better way wait when viewport is ready?
+        // (to correctly calculate viewport nodes on first render)
+        toObservable(this.flowEntitiesService.nodes).pipe(observeOn(asyncScheduler), filter((nodes) => !!nodes.length)), this.viewportService.viewportChangeEnd$.pipe(debounceTime(300))).pipe(map(() => {
+            const viewport = this.viewportService.readableViewport();
+            const zoomThreshold = this.flowSettingsService.optimization().virtualizationZoomThreshold;
+            return viewport.zoom < zoomThreshold ? [] : this.viewportNodes();
+        })), {
+            initialValue: [],
+        });
+        this.maxOrder = computed(() => {
+            return Math.max(...this.flowEntitiesService.nodes().map((n) => n.renderOrder()));
+        });
+    }
+    pullNode(node) {
+        // pull node
+        node.renderOrder.set(this.maxOrder() + 1);
+        // pull children
+        node.children().forEach((n) => this.pullNode(n));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeRenderingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeRenderingService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeRenderingService, decorators: [{
+            type: Injectable
+        }] });
+
+// MIT License
+/**
+ * @todo Use `linkedSignal` after Angular update
+ */
+function extendedComputed(computedCallback, options) {
+    if (!options) {
+        options = { equal: Object.is };
+    }
+    let currentValue = undefined;
+    return computed(() => {
+        return (currentValue = computedCallback(currentValue));
+    }, options);
+}
+
 class NodeModel {
     static { this.defaultWidth = 100; }
     static { this.defaultHeight = 50; }
@@ -1025,6 +1200,8 @@ class NodeModel {
     constructor(rawNode) {
         this.rawNode = rawNode;
         this.entitiesService = inject(FlowEntitiesService);
+        this.settingsService = inject(FlowSettingsService);
+        this.nodeRenderingService = inject(NodeRenderingService);
         this.isVisible = signal(false);
         this.point = signal({ x: 0, y: 0 });
         this.width = signal(NodeModel.defaultWidth);
@@ -1063,6 +1240,39 @@ class NodeModel {
         this.magnetRadius = 20;
         // TODO: not sure if we need to statically store it
         this.isComponentType = isComponentStaticNode(this.rawNode) || isComponentDynamicNode(this.rawNode);
+        this.shouldLoad = extendedComputed((previousShouldLoad) => {
+            if (previousShouldLoad) {
+                return true;
+            }
+            if (this.settingsService.optimization().lazyLoadTrigger === 'immediate') {
+                return true;
+            }
+            else if (this.settingsService.optimization().lazyLoadTrigger === 'viewport') {
+                // Immediately load component if it's a plain class
+                if (isCustomNodeComponent(this.rawNode.type)) {
+                    return true;
+                }
+                // Immediately load component if it's a plain class
+                if (isCustomDynamicNodeComponent(this.rawNode.type)) {
+                    return true;
+                }
+                // For cases
+                // - if it's a factory with dynamic import
+                // - if it's a template (html, svg, group)
+                // check if it's in the viewport
+                if (isCallable(this.rawNode.type) ||
+                    this.rawNode.type === 'html-template' ||
+                    this.rawNode.type === 'svg-template' ||
+                    this.rawNode.type === 'template-group') {
+                    return this.nodeRenderingService.viewportNodes().includes(this);
+                }
+            }
+            // For each other case, we want to load the component immediately
+            return true;
+        });
+        this.componentInstance$ = toObservable(this.shouldLoad).pipe(filter(Boolean), 
+        // @ts-expect-error we assume it's a function with dynamic import
+        switchMap(() => this.rawNode.type()), catchError(() => of(this.rawNode.type)), shareReplay(1));
         // Default node specific thing
         this.text = signal('');
         // Component node specific thing
@@ -1112,7 +1322,8 @@ class NodeModel {
             this.context = {
                 $implicit: {
                     node: rawNode,
-                    selected: this.selected,
+                    selected: this.selected.asReadonly(),
+                    shouldLoad: this.shouldLoad,
                 },
             };
         }
@@ -1120,9 +1331,10 @@ class NodeModel {
             this.context = {
                 $implicit: {
                     node: rawNode,
-                    selected: this.selected,
-                    width: this.width,
-                    height: this.height,
+                    selected: this.selected.asReadonly(),
+                    width: this.width.asReadonly(),
+                    height: this.height.asReadonly(),
+                    shouldLoad: this.shouldLoad,
                 },
             };
         }
@@ -1131,8 +1343,9 @@ class NodeModel {
                 $implicit: {
                     node: rawNode,
                     selected: this.selected.asReadonly(),
-                    width: this.width,
-                    height: this.height,
+                    width: this.width.asReadonly(),
+                    height: this.height.asReadonly(),
+                    shouldLoad: this.shouldLoad,
                 },
             };
         }
@@ -1470,20 +1683,6 @@ function smoothStepPath({ sourcePoint, targetPoint, sourcePosition, targetPositi
     };
 }
 
-// MIT License
-/**
- * @todo Use `linkedSignal` after Angular update
- */
-function extendedComputed(computedCallback, options) {
-    if (!options) {
-        options = { equal: Object.is };
-    }
-    let currentValue = undefined;
-    return computed(() => {
-        return (currentValue = computedCallback(currentValue));
-    }, options);
-}
-
 class EdgeModel {
     constructor(edge) {
         this.edge = edge;
@@ -1492,6 +1691,7 @@ class EdgeModel {
         this.target = signal(undefined);
         this.selected = signal(false);
         this.selected$ = toObservable(this.selected);
+        this.shouldLoad = computed(() => (this.source()?.shouldLoad() ?? false) && (this.target()?.shouldLoad() ?? false));
         this.renderOrder = signal(0);
         this.detached = computed(() => {
             const source = this.source();
@@ -1521,14 +1721,7 @@ class EdgeModel {
             const target = this.targetHandle();
             // TODO: don't like this
             if (!source || !target) {
-                return {
-                    path: '',
-                    labelPoints: {
-                        start: { x: 0, y: 0 },
-                        center: { x: 0, y: 0 },
-                        end: { x: 0, y: 0 },
-                    },
-                };
+                return { path: '' };
             }
             const params = this.getPathFactoryParams(source, target);
             switch (this.curve) {
@@ -1660,6 +1853,7 @@ class EdgeModel {
                 markerStart: this.markerStartUrl,
                 markerEnd: this.markerEndUrl,
                 selected: this.selected.asReadonly(),
+                shouldLoad: this.shouldLoad,
             },
         };
         this.edgeLabels = {};
@@ -1947,124 +2141,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
-function isGroupNode(node) {
-    return node.rawNode.type === 'default-group' || node.rawNode.type === 'template-group';
-}
-
-// MIT License
-// Copyright (c) 2023 Chau Tran
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-/* eslint-disable @typescript-eslint/ban-types */
-function assertInjector(fn, injector, runner) {
-    !injector && assertInInjectionContext(fn);
-    const assertedInjector = injector ?? inject(Injector);
-    if (!runner)
-        return assertedInjector;
-    return runInInjectionContext(assertedInjector, runner);
-}
-
-// MIT License
-// Copyright (c) 2023 Chau Tran
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-/**
- * Function `toLazySignal()` is a proxy function that will call the original
- * `toSignal()` function when the returned signal is read for the first time.
- */
-function toLazySignal(source, options) {
-    const injector = assertInjector(toLazySignal, options?.injector);
-    let s;
-    return computed(() => {
-        if (!s) {
-            s = untracked(() => toSignal(source, { ...options, injector }));
-        }
-        return s();
-    });
-}
-
-class NodeRenderingService {
-    constructor() {
-        this.flowEntitiesService = inject(FlowEntitiesService);
-        this.flowSettingsService = inject(FlowSettingsService);
-        this.viewportService = inject(ViewportService);
-        this.nodes = computed(() => {
-            if (!this.flowSettingsService.optimization().virtualization) {
-                return [...this.flowEntitiesService.nodes()].sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
-            }
-            return this.viewportNodesAfterInteraction().sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
-        });
-        this.groups = computed(() => {
-            return this.nodes().filter((n) => isGroupNode(n));
-        });
-        this.nonGroups = computed(() => {
-            return this.nodes().filter((n) => !isGroupNode(n));
-        });
-        this.viewportNodes = computed(() => {
-            const nodes = this.flowEntitiesService.nodes();
-            const viewport = this.viewportService.readableViewport();
-            const flowWidth = this.flowSettingsService.computedFlowWidth();
-            const flowHeight = this.flowSettingsService.computedFlowHeight();
-            return nodes.filter((n) => {
-                const { x, y } = n.globalPoint();
-                const width = n.width();
-                const height = n.height();
-                return isRectInViewport({ x, y, width, height }, viewport, flowWidth, flowHeight);
-            });
-        });
-        this.viewportNodesAfterInteraction = toLazySignal(merge(
-        // TODO: maybe there is a better way wait when viewport is ready?
-        // (to correctly calculate viewport nodes on first render)
-        toObservable(this.flowEntitiesService.nodes).pipe(observeOn(asyncScheduler), filter((nodes) => !!nodes.length)), this.viewportService.viewportChangeEnd$.pipe(debounceTime(300))).pipe(map(() => {
-            const viewport = this.viewportService.readableViewport();
-            const zoomThreshold = this.flowSettingsService.optimization().virtualizationZoomThreshold;
-            return viewport.zoom < zoomThreshold ? [] : this.viewportNodes();
-        })), {
-            initialValue: [],
-        });
-        this.maxOrder = computed(() => {
-            return Math.max(...this.flowEntitiesService.nodes().map((n) => n.renderOrder()));
-        });
-    }
-    pullNode(node) {
-        // pull node
-        node.renderOrder.set(this.maxOrder() + 1);
-        // pull children
-        node.children().forEach((n) => this.pullNode(n));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeRenderingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeRenderingService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeRenderingService, decorators: [{
-            type: Injectable
-        }] });
-
 class RootPointerDirective {
     constructor() {
         this.host = inject(ElementRef).nativeElement;
@@ -3206,7 +3282,7 @@ class NodeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NodeComponent, isStandalone: true, selector: "g[node]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, nodeSvgTemplate: { classPropertyName: "nodeSvgTemplate", publicName: "nodeSvgTemplate", isSignal: true, isRequired: false, transformFunction: null }, groupNodeTemplate: { classPropertyName: "groupNodeTemplate", publicName: "groupNodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "vflow-node" }, providers: [HandleService, NodeAccessorService], ngImport: i0, template: "<!-- Default node -->\n@if (model().rawNode.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (click)=\"pullNode(); selectNode()\">\n    <default-node\n      nodeHandlesController\n      [selected]=\"model().selected()\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\"\n      [style.max-width]=\"model().styleWidth()\"\n      [style.max-height]=\"model().styleHeight()\">\n      <div [outerHTML]=\"model().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- HTML Template node -->\n@if (model().rawNode.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (click)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"model().context\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- SVG Template node -->\n@if (model().rawNode.type === 'svg-template' && nodeSvgTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (click)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeSvgTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (click)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(model().rawNode.type)\"\n        [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().rawNode.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"model().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"model().color()\"\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    (click)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().rawNode.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (click)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n  @if (model().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n  @if (handle.template === undefined) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template === null) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\">\n      <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"model().magnetRadius\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@for (toolbar of toolbars(); track toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\">\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\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: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }, { kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template", "offsetX", "offsetY"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ResizableComponent, selector: "[resizable]", inputs: ["resizable", "resizerColor", "gap"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: NodeHandlesControllerDirective, selector: "[nodeHandlesController]" }, { kind: "directive", type: NodeResizeControllerDirective, selector: "[nodeResizeController]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NodeComponent, isStandalone: true, selector: "g[node]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, nodeSvgTemplate: { classPropertyName: "nodeSvgTemplate", publicName: "nodeSvgTemplate", isSignal: true, isRequired: false, transformFunction: null }, groupNodeTemplate: { classPropertyName: "groupNodeTemplate", publicName: "groupNodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "vflow-node" }, providers: [HandleService, NodeAccessorService], ngImport: i0, template: "<!-- Default node -->\n@if (model().rawNode.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (click)=\"pullNode(); selectNode()\">\n    <default-node\n      nodeHandlesController\n      [selected]=\"model().selected()\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\"\n      [style.max-width]=\"model().styleWidth()\"\n      [style.max-height]=\"model().styleHeight()\">\n      <div [outerHTML]=\"model().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- HTML Template node -->\n@if (model().rawNode.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (click)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"model().context\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- SVG Template node -->\n@if (model().rawNode.type === 'svg-template' && nodeSvgTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (click)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeSvgTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  @if (model().componentInstance$ | async; as component) {\n    <svg:foreignObject\n      class=\"selectable\"\n      [attr.width]=\"model().foWidth()\"\n      [attr.height]=\"model().foHeight()\"\n      (click)=\"pullNode()\">\n      <div\n        nodeHandlesController\n        nodeResizeController\n        class=\"wrapper\"\n        [style.width]=\"model().styleWidth()\"\n        [style.height]=\"model().styleHeight()\">\n        <ng-container\n          [ngComponentOutlet]=\"$any(component)\"\n          [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n          [ngComponentOutletInjector]=\"injector\" />\n      </div>\n    </svg:foreignObject>\n  }\n}\n\n<!-- Default group node -->\n@if (model().rawNode.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"model().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"model().color()\"\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    (click)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().rawNode.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (click)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n  @if (model().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n  @if (handle.template === undefined) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template === null) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\">\n      <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"model().magnetRadius\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@for (toolbar of toolbars(); track toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\">\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\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: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }, { kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template", "offsetX", "offsetY"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ResizableComponent, selector: "[resizable]", inputs: ["resizable", "resizerColor", "gap"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: NodeHandlesControllerDirective, selector: "[nodeHandlesController]" }, { kind: "directive", type: NodeResizeControllerDirective, selector: "[nodeResizeController]" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeComponent, decorators: [{
             type: Component,
@@ -3222,7 +3298,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         HandleSizeControllerDirective,
                         NodeHandlesControllerDirective,
                         NodeResizeControllerDirective,
-                    ], template: "<!-- Default node -->\n@if (model().rawNode.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (click)=\"pullNode(); selectNode()\">\n    <default-node\n      nodeHandlesController\n      [selected]=\"model().selected()\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\"\n      [style.max-width]=\"model().styleWidth()\"\n      [style.max-height]=\"model().styleHeight()\">\n      <div [outerHTML]=\"model().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- HTML Template node -->\n@if (model().rawNode.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (click)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"model().context\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- SVG Template node -->\n@if (model().rawNode.type === 'svg-template' && nodeSvgTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (click)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeSvgTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (click)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(model().rawNode.type)\"\n        [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().rawNode.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"model().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"model().color()\"\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    (click)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().rawNode.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (click)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n  @if (model().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n  @if (handle.template === undefined) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template === null) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\">\n      <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"model().magnetRadius\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@for (toolbar of toolbars(); track toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\">\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\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"] }]
+                        AsyncPipe,
+                    ], template: "<!-- Default node -->\n@if (model().rawNode.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (click)=\"pullNode(); selectNode()\">\n    <default-node\n      nodeHandlesController\n      [selected]=\"model().selected()\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\"\n      [style.max-width]=\"model().styleWidth()\"\n      [style.max-height]=\"model().styleHeight()\">\n      <div [outerHTML]=\"model().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- HTML Template node -->\n@if (model().rawNode.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (click)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"model().context\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- SVG Template node -->\n@if (model().rawNode.type === 'svg-template' && nodeSvgTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (click)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeSvgTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  @if (model().componentInstance$ | async; as component) {\n    <svg:foreignObject\n      class=\"selectable\"\n      [attr.width]=\"model().foWidth()\"\n      [attr.height]=\"model().foHeight()\"\n      (click)=\"pullNode()\">\n      <div\n        nodeHandlesController\n        nodeResizeController\n        class=\"wrapper\"\n        [style.width]=\"model().styleWidth()\"\n        [style.height]=\"model().styleHeight()\">\n        <ng-container\n          [ngComponentOutlet]=\"$any(component)\"\n          [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n          [ngComponentOutletInjector]=\"injector\" />\n      </div>\n    </svg:foreignObject>\n  }\n}\n\n<!-- Default group node -->\n@if (model().rawNode.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"model().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"model().color()\"\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    (click)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().rawNode.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (click)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n  @if (model().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n  @if (handle.template === undefined) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template === null) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\">\n      <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"model().magnetRadius\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@for (toolbar of toolbars(); track toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\">\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\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"] }]
         }] });
 
 class ConnectionComponent {
@@ -3770,6 +3847,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 class FlowRenderingService {
     constructor() {
+        this.nodeRenderingService = inject(NodeRenderingService);
+        this.edgeRenderingService = inject(EdgeRenderingService);
+        this.flowEntitiesService = inject(FlowEntitiesService);
+        this.settingsService = inject(FlowSettingsService);
         this.flowInitialized = signal(false);
         inject(NgZone).runOutsideAngular(async () => {
             await skipFrames(2);
@@ -3799,6 +3880,109 @@ function skipFrames(count) {
     });
 }
 
+function rectToRectWithSides(rect) {
+    return {
+        ...rect,
+        left: rect.x,
+        right: rect.x + rect.width,
+        top: rect.y,
+        bottom: rect.y + rect.height,
+    };
+}
+
+class AlignmentHelperComponent {
+    constructor() {
+        this.nodeRenderingService = inject(NodeRenderingService);
+        this.flowStatus = inject(FlowStatusService);
+        this.tolerance = input(10);
+        this.lineColor = input('#1b262c');
+        this.isNodeDragging = computed(() => isNodeDragStartStatus(this.flowStatus.status()));
+        this.intersections = extendedComputed((lastValue) => {
+            const status = this.flowStatus.status();
+            if (isNodeDragStartStatus(status)) {
+                const node = status.payload.node;
+                const d = rectToRectWithSides(nodeToRect(node));
+                const otherRects = this.nodeRenderingService
+                    .viewportNodes()
+                    .filter((n) => n !== node)
+                    // do not check children of the dragged node
+                    .filter((n) => !node.children().includes(n))
+                    .map((n) => rectToRectWithSides(nodeToRect(n)));
+                const lines = [];
+                let snappedX = d.x;
+                let snappedY = d.y;
+                let closestXDiff = Infinity;
+                let closestYDiff = Infinity;
+                otherRects.forEach((o) => {
+                    const dCenterX = d.left + d.width / 2;
+                    const oCenterX = o.left + o.width / 2;
+                    for (const [dX, oX, snapX, isCenter] of [
+                        // center check
+                        [dCenterX, oCenterX, oCenterX - d.width / 2, true],
+                        [d.left, o.left, o.left, false],
+                        [d.left, o.right, o.right, false],
+                        [d.right, o.left, o.left - d.width, false],
+                        [d.right, o.right, o.right - d.width, false],
+                    ]) {
+                        const diff = Math.abs(dX - oX);
+                        if (diff <= this.tolerance()) {
+                            const y = Math.min(d.top, o.top);
+                            const y2 = Math.max(d.bottom, o.bottom);
+                            lines.push({ x: oX, y, x2: oX, y2, isCenter });
+                            if (diff < closestXDiff) {
+                                closestXDiff = diff;
+                                snappedX = snapX;
+                            }
+                            if (isCenter)
+                                break;
+                        }
+                    }
+                    const dCenterY = d.top + d.height / 2;
+                    const oCenterY = o.top + o.height / 2;
+                    for (const [dY, oY, snapY, isCenter] of [
+                        // center check
+                        [dCenterY, oCenterY, oCenterY - d.height / 2, true],
+                        [d.top, o.top, o.top, false],
+                        [d.top, o.bottom, o.bottom, false],
+                        [d.bottom, o.top, o.top - d.height, false],
+                        [d.bottom, o.bottom, o.bottom - d.height, false],
+                    ]) {
+                        const diff = Math.abs(dY - oY);
+                        if (diff <= this.tolerance()) {
+                            const x = Math.min(d.left, o.left);
+                            const x2 = Math.max(d.right, o.right);
+                            lines.push({ x, y: oY, x2, y2: oY, isCenter });
+                            if (diff < closestYDiff) {
+                                closestYDiff = diff;
+                                snappedY = snapY;
+                            }
+                            if (isCenter)
+                                break;
+                        }
+                    }
+                });
+                return { lines, snappedX, snappedY };
+            }
+            return lastValue;
+        });
+        toObservable(this.flowStatus.status)
+            .pipe(filter(isNodeDragEndStatus), map((status) => status.payload.node), map((node) => [node, this.intersections()]), tap(([node, intersections]) => {
+            if (intersections) {
+                const snapped = { x: intersections.snappedX, y: intersections.snappedY };
+                const parentIfExists = node.parent() ? [node.parent()] : [];
+                node.setPoint(getSpacePoints(snapped, parentIfExists)[0]);
+            }
+        }), takeUntilDestroyed())
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlignmentHelperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AlignmentHelperComponent, isStandalone: true, selector: "g[alignmentHelper]", inputs: { tolerance: { classPropertyName: "tolerance", publicName: "tolerance", isSignal: true, isRequired: false, transformFunction: null }, lineColor: { classPropertyName: "lineColor", publicName: "lineColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isNodeDragging()) {\n  @if (intersections(); as intersections) {\n    @for (intersection of intersections.lines; track $index) {\n      <svg:line\n        [attr.stroke]=\"lineColor()\"\n        [attr.stroke-dasharray]=\"intersection.isCenter ? 4 : null\"\n        [attr.x1]=\"intersection.x\"\n        [attr.y1]=\"intersection.y\"\n        [attr.x2]=\"intersection.x2\"\n        [attr.y2]=\"intersection.y2\" />\n    }\n  }\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlignmentHelperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'g[alignmentHelper]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@if (isNodeDragging()) {\n  @if (intersections(); as intersections) {\n    @for (intersection of intersections.lines; track $index) {\n      <svg:line\n        [attr.stroke]=\"lineColor()\"\n        [attr.stroke-dasharray]=\"intersection.isCenter ? 4 : null\"\n        [attr.x1]=\"intersection.x\"\n        [attr.y1]=\"intersection.y\"\n        [attr.x2]=\"intersection.x2\"\n        [attr.y2]=\"intersection.y2\" />\n    }\n  }\n}\n" }]
+        }], ctorParameters: () => [] });
+
 const changesControllerHostDirective = {
     directive: ChangesControllerDirective,
     outputs: [
@@ -3847,6 +4031,7 @@ class VflowComponent {
         this.keyboardService = inject(KeyboardService);
         this.injector = inject(Injector);
         this.flowRenderingService = inject(FlowRenderingService);
+        this.alignmentHelper = input(false);
         this.nodeModels = this.nodeRenderingService.nodes;
         this.groups = this.nodeRenderingService.groups;
         this.nonGroups = this.nodeRenderingService.nonGroups;
@@ -4108,7 +4293,7 @@ class VflowComponent {
         return edge;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VflowComponent, isStandalone: true, selector: "vflow", inputs: { view: "view", minZoom: "minZoom", maxZoom: "maxZoom", background: "background", optimization: "optimization", entitiesSelectable: "entitiesSelectable", keyboardShortcuts: "keyboardShortcuts", connection: ["connection", "connection", (settings) => new ConnectionModel(settings)], snapGrid: "snapGrid", elevateNodesOnSelect: "elevateNodesOnSelect", elevateEdgesOnSelect: "elevateEdgesOnSelect", nodes: "nodes", edges: "edges" }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VflowComponent, isStandalone: true, selector: "vflow", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: false, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: false, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: false, isRequired: false, transformFunction: null }, optimization: { classPropertyName: "optimization", publicName: "optimization", isSignal: false, isRequired: false, transformFunction: null }, entitiesSelectable: { classPropertyName: "entitiesSelectable", publicName: "entitiesSelectable", isSignal: false, isRequired: false, transformFunction: null }, keyboardShortcuts: { classPropertyName: "keyboardShortcuts", publicName: "keyboardShortcuts", isSignal: false, isRequired: false, transformFunction: null }, connection: { classPropertyName: "connection", publicName: "connection", isSignal: false, isRequired: false, transformFunction: (settings) => new ConnectionModel(settings) }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: false, isRequired: false, transformFunction: null }, elevateNodesOnSelect: { classPropertyName: "elevateNodesOnSelect", publicName: "elevateNodesOnSelect", isSignal: false, isRequired: false, transformFunction: null }, elevateEdgesOnSelect: { classPropertyName: "elevateEdgesOnSelect", publicName: "elevateEdgesOnSelect", isSignal: false, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: false, isRequired: true, transformFunction: null }, alignmentHelper: { classPropertyName: "alignmentHelper", publicName: "alignmentHelper", isSignal: true, isRequired: false, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, providers: [
             DraggableService,
             ViewportService,
             FlowStatusService,
@@ -4124,7 +4309,7 @@ class VflowComponent {
             OverlaysService,
             { provide: PreviewFlowRenderStrategyService, useClass: ViewportPreviewFlowRenderStrategyService },
             FlowRenderingService,
-        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "nodeSvgTemplateDirective", first: true, predicate: NodeSvgTemplateDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true, isSignal: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true, isSignal: true }], hostDirectives: [{ 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 #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (flowOptimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!flowOptimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  }\n</svg:svg>\n\n@if (flowOptimization().virtualization) {\n  <canvas previewFlow class=\"preview-flow\" [width]=\"flowWidth()\" [height]=\"flowHeight()\"></canvas>\n}\n", styles: [":host{display:grid;grid-template-columns:1fr;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}.root-svg{grid-row-start:1;grid-column-start:1}.preview-flow{pointer-events:none;grid-row-start:1;grid-column-start:1}\n"], dependencies: [{ 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]" }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["model", "nodeTemplate", "nodeSvgTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PreviewFlowComponent, selector: "canvas[previewFlow]", inputs: ["width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "nodeSvgTemplateDirective", first: true, predicate: NodeSvgTemplateDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true, isSignal: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true, isSignal: true }], hostDirectives: [{ 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 #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    @if (alignmentHelper(); as alignmentHelper) {\n      @if (alignmentHelper === true) {\n        <svg:g alignmentHelper />\n      } @else {\n        <svg:g alignmentHelper [tolerance]=\"alignmentHelper.tolerance\" [lineColor]=\"alignmentHelper.lineColor\" />\n      }\n    }\n\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (flowOptimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!flowOptimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  }\n</svg:svg>\n\n@if (flowOptimization().virtualization) {\n  <canvas previewFlow class=\"preview-flow\" [width]=\"flowWidth()\" [height]=\"flowHeight()\"></canvas>\n}\n", styles: [":host{display:grid;grid-template-columns:1fr;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}.root-svg{grid-row-start:1;grid-column-start:1}.preview-flow{pointer-events:none;grid-row-start:1;grid-column-start:1}\n"], dependencies: [{ 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]" }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["model", "nodeTemplate", "nodeSvgTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PreviewFlowComponent, selector: "canvas[previewFlow]", inputs: ["width", "height"] }, { kind: "component", type: AlignmentHelperComponent, selector: "g[alignmentHelper]", inputs: ["tolerance", "lineColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
@@ -4158,7 +4343,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         EdgeComponent,
                         NgTemplateOutlet,
                         PreviewFlowComponent,
-                    ], template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (flowOptimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!flowOptimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  }\n</svg:svg>\n\n@if (flowOptimization().virtualization) {\n  <canvas previewFlow class=\"preview-flow\" [width]=\"flowWidth()\" [height]=\"flowHeight()\"></canvas>\n}\n", styles: [":host{display:grid;grid-template-columns:1fr;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}.root-svg{grid-row-start:1;grid-column-start:1}.preview-flow{pointer-events:none;grid-row-start:1;grid-column-start:1}\n"] }]
+                        AlignmentHelperComponent,
+                    ], template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    @if (alignmentHelper(); as alignmentHelper) {\n      @if (alignmentHelper === true) {\n        <svg:g alignmentHelper />\n      } @else {\n        <svg:g alignmentHelper [tolerance]=\"alignmentHelper.tolerance\" [lineColor]=\"alignmentHelper.lineColor\" />\n      }\n    }\n\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (flowOptimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!flowOptimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  }\n</svg:svg>\n\n@if (flowOptimization().virtualization) {\n  <canvas previewFlow class=\"preview-flow\" [width]=\"flowWidth()\" [height]=\"flowHeight()\"></canvas>\n}\n", styles: [":host{display:grid;grid-template-columns:1fr;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}.root-svg{grid-row-start:1;grid-column-start:1}.preview-flow{pointer-events:none;grid-row-start:1;grid-column-start:1}\n"] }]
         }], propDecorators: { view: [{
                 type: Input
             }], minZoom: [{
@@ -4509,5 +4695,5 @@ const Vflow = [
  * Generated bundle index. Do not edit.
  */
 
-export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomDynamicNodeComponent, CustomNodeComponent, CustomTemplateEdgeComponent, DEFAULT_OPTIMIZATION, DragHandleDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, HandleComponent, HandleTemplateDirective, MiniMapComponent, NodeHtmlTemplateDirective, NodeSvgTemplateDirective, NodeToolbarComponent, NodeToolbarWrapperDirective, ResizableComponent, SelectableDirective, Vflow, VflowComponent, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isSvgTemplateDynamicNode, isSvgTemplateStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode, ComponentEventBusService as ɵComponentEventBusService, ConnectionModel as ɵConnectionModel, FlowEntitiesService as ɵFlowEntitiesService, FlowSettingsService as ɵFlowSettingsService, HandleModel as ɵHandleModel, HandleService as ɵHandleService, NodeAccessorService as ɵNodeAccessorService, NodeModel as ɵNodeModel, RootPointerDirective as ɵRootPointerDirective, SelectionService as ɵSelectionService, SpacePointContextDirective as ɵSpacePointContextDirective, ViewportService as ɵViewportService };
+export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomDynamicNodeComponent, CustomNodeComponent, CustomTemplateEdgeComponent, DEFAULT_OPTIMIZATION, DragHandleDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, HandleComponent, HandleTemplateDirective, MiniMapComponent, NodeHtmlTemplateDirective, NodeSvgTemplateDirective, NodeToolbarComponent, NodeToolbarWrapperDirective, ResizableComponent, SelectableDirective, Vflow, VflowComponent, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isSvgTemplateDynamicNode, isSvgTemplateStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode, ComponentEventBusService as ɵComponentEventBusService, ConnectionModel as ɵConnectionModel, FlowEntitiesService as ɵFlowEntitiesService, FlowSettingsService as ɵFlowSettingsService, HandleModel as ɵHandleModel, HandleService as ɵHandleService, NodeAccessorService as ɵNodeAccessorService, NodeModel as ɵNodeModel, NodeRenderingService as ɵNodeRenderingService, RootPointerDirective as ɵRootPointerDirective, SelectionService as ɵSelectionService, SpacePointContextDirective as ɵSpacePointContextDirective, ViewportService as ɵViewportService };
 //# sourceMappingURL=ngx-vflow.mjs.map