ngx-vflow 1.16.4 → 2.0.0

package/fesm2022/ngx-vflow.mjs

@@ -1,8 +1,8 @@
 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 { signal, computed, Injectable, inject, ElementRef, Directive, NgZone, effect, untracked, Injector, TemplateRef, DestroyRef, EventEmitter, OutputEmitterRef, input, assertInInjectionContext, runInInjectionContext, viewChild, ChangeDetectionStrategy, Component, 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, observeOn, asyncScheduler, filter, debounceTime, map, catchError, of, shareReplay, skip, pairwise, distinctUntilChanged, zip, animationFrameScheduler, share, startWith } from 'rxjs';
+import { Subject, switchMap, merge, fromEvent, tap, shareReplay, skip, pairwise, filter, Observable, observeOn, asyncScheduler, debounceTime, map, catchError, of, distinctUntilChanged, zip, animationFrameScheduler, share, startWith, EMPTY, take, animationFrames, withLatestFrom } from 'rxjs';
 import { toObservable, takeUntilDestroyed, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
 import { drag } from 'd3-drag';
 import { __decorate } from 'tslib';
@@ -79,19 +79,21 @@ class ConnectionModel {
         this.curve = settings.curve ?? 'bezier';
         this.type = settings.type ?? 'default';
         this.mode = settings.mode ?? 'strict';
-        const validatorsToRun = this.getValidators(settings);
-        this.validator = (connection) => validatorsToRun.every((v) => v(connection));
-    }
-    getValidators(settings) {
+        this.allowSelfConnections = settings.allowSelfConnections ?? false;
         const validators = [];
-        validators.push(notSelfValidator);
+        if (!this.allowSelfConnections) {
+            validators.push(notSelfValidator);
+        }
+        if (this.mode === 'strict') {
+            validators.push(notSameHandleTypeValidator);
+        }
         if (this.mode === 'loose') {
             validators.push(hasSourceAndTargetHandleValidator);
         }
         if (settings.validator) {
             validators.push(settings.validator);
         }
-        return validators;
+        this.validator = (connection) => validators.every((v) => v(connection));
     }
 }
 /**
@@ -100,6 +102,12 @@ class ConnectionModel {
 const notSelfValidator = (connection) => {
     return connection.source !== connection.target;
 };
+/**
+ * Internal validator that not allows connections between handles of the same type
+ */
+const notSameHandleTypeValidator = (connection) => {
+    return connection.sourceHandleType !== connection.targetHandleType;
+};
 const hasSourceAndTargetHandleValidator = (connection) => {
     return connection.sourceHandle !== undefined && connection.targetHandle !== undefined;
 };
@@ -131,13 +139,14 @@ class FlowEntitiesService {
         this.markers = computed(() => {
             const markersMap = new Map();
             this.validEdges().forEach((e) => {
-                if (e.edge.markers?.start) {
-                    const hash = hashCode(JSON.stringify(e.edge.markers.start));
-                    markersMap.set(hash, e.edge.markers.start);
+                const markers = e.markers();
+                if (markers?.start) {
+                    const hash = hashCode(JSON.stringify(markers.start));
+                    markersMap.set(hash, markers.start);
                 }
-                if (e.edge.markers?.end) {
-                    const hash = hashCode(JSON.stringify(e.edge.markers.end));
-                    markersMap.set(hash, e.edge.markers.end);
+                if (markers?.end) {
+                    const hash = hashCode(JSON.stringify(markers.end));
+                    markersMap.set(hash, markers.end);
                 }
             });
             const connectionMarker = this.connection().settings.marker;
@@ -156,10 +165,10 @@ class FlowEntitiesService {
     getDetachedEdges() {
         return this.edges().filter((e) => e.detached());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowEntitiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowEntitiesService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FlowEntitiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FlowEntitiesService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowEntitiesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FlowEntitiesService, decorators: [{
             type: Injectable
         }] });
 
@@ -226,6 +235,7 @@ class FlowSettingsService {
         this.entitiesSelectable = signal(true);
         this.elevateNodesOnSelect = signal(true);
         this.elevateEdgesOnSelect = signal(true);
+        this.autoPan = signal(true);
         /**
          * @see {VflowComponent.view}
          */
@@ -243,11 +253,12 @@ class FlowSettingsService {
         this.background = signal({ type: 'solid', color: '#fff' });
         this.snapGrid = signal([1, 1]);
         this.optimization = signal(DEFAULT_OPTIMIZATION);
+        this.selectionMode = signal('default');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowSettingsService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FlowSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FlowSettingsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowSettingsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FlowSettingsService, decorators: [{
             type: Injectable
         }] });
 
@@ -301,10 +312,10 @@ class ViewportService {
                     .map((nodeId) => this.entitiesService.nodes().find(({ rawNode }) => rawNode.id === nodeId))
                     .filter((node) => !!node);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewportService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ViewportService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ViewportService, decorators: [{
             type: Injectable
         }] });
 
@@ -316,10 +327,10 @@ class RootSvgReferenceDirective {
     constructor() {
         this.element = inject(ElementRef).nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RootSvgReferenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: RootSvgReferenceDirective, isStandalone: true, selector: "svg[rootSvgRef]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RootSvgReferenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: RootSvgReferenceDirective, isStandalone: true, selector: "svg[rootSvgRef]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RootSvgReferenceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RootSvgReferenceDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -386,31 +397,71 @@ class KeyboardService {
     isActiveAction(action) {
         return this.actionsActive[action];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyboardService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KeyboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KeyboardService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KeyboardService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
+class DefaultSelectionStrategy {
+    select(entity, context) {
+        // if entity already selected - do nothing
+        if (entity?.selected()) {
+            return;
+        }
+        if (!context.isMultiSelectionActive) {
+            // undo select for previously selected nodes
+            context.entities.forEach((n) => n.selected.set(false));
+        }
+        if (entity) {
+            // select passed entity
+            entity.selected.set(true);
+        }
+    }
+    handleViewportChange(viewport, context) {
+        const { start, end, target, delta } = viewport;
+        const diffX = Math.abs(end.x - start.x);
+        const diffY = Math.abs(end.y - start.y);
+        // click (not drag)
+        const isClick = diffX < delta && diffY < delta;
+        // do not reset if event chain contains selectable elems
+        const isNotSelectable = !target.closest('.selectable');
+        if (isClick && isNotSelectable) {
+            this.select(null, context);
+        }
+    }
+}
+
+class ManualSelectionStrategy {
+    select() {
+        return;
+        // noop - user manages selection manually
+    }
+    handleViewportChange() {
+        return;
+        // noop - user manages selection manually
+    }
+}
+
 class SelectionService {
     constructor() {
         this.flowEntitiesService = inject(FlowEntitiesService);
         this.keyboardService = inject(KeyboardService);
+        this.flowSettingsService = inject(FlowSettingsService);
+        this.strategies = {
+            default: new DefaultSelectionStrategy(),
+            manual: new ManualSelectionStrategy(),
+        };
+        this.currentStrategy = computed(() => this.strategies[this.flowSettingsService.selectionMode()]);
         this.viewport$ = new Subject();
-        this.resetSelection = this.viewport$
+        this.viewportChangeSub = this.viewport$
             .pipe(tap(({ start, end, target }) => {
             if (start && end && target) {
-                const delta = SelectionService.delta;
-                const diffX = Math.abs(end.x - start.x);
-                const diffY = Math.abs(end.y - start.y);
-                // click (not drag)
-                const isClick = diffX < delta && diffY < delta;
-                // do not reset if event chain contains selectable elems
-                const isNotSelectable = !target.closest('.selectable');
-                if (isClick && isNotSelectable) {
-                    this.select(null);
-                }
+                this.currentStrategy().handleViewportChange({ start, end, target, delta: SelectionService.delta }, {
+                    entities: this.flowEntitiesService.entities(),
+                    isMultiSelectionActive: this.keyboardService.isActiveAction('multiSelection'),
+                });
             }
         }), takeUntilDestroyed())
             .subscribe();
@@ -420,24 +471,15 @@ class SelectionService {
         this.viewport$.next(viewport);
     }
     select(entity) {
-        // ? May be not a responsibility of this method
-        // if entity already selected - do nothing
-        if (entity?.selected()) {
-            return;
-        }
-        if (!this.keyboardService.isActiveAction('multiSelection')) {
-            // undo select for previously selected nodes
-            this.flowEntitiesService.entities().forEach((n) => n.selected.set(false));
-        }
-        if (entity) {
-            // select passed entity
-            entity.selected.set(true);
-        }
+        this.currentStrategy().select(entity, {
+            entities: this.flowEntitiesService.entities(),
+            isMultiSelectionActive: this.keyboardService.isActiveAction('multiSelection'),
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectionService, decorators: [{
             type: Injectable
         }] });
 
@@ -523,10 +565,10 @@ class MapContextDirective {
             this.rootSvgSelection.call(this.zoomBehavior).on('dblclick.zoom', null);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: MapContextDirective, isStandalone: true, selector: "g[mapContext]", host: { properties: { "attr.transform": "transform()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MapContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: MapContextDirective, isStandalone: true, selector: "g[mapContext]", host: { properties: { "attr.transform": "transform()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapContextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MapContextDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -557,6 +599,7 @@ function align(num, constant) {
 class FlowStatusService {
     constructor() {
         this.status = signal({ state: 'idle', payload: null });
+        this.status$ = toObservable(this.status).pipe(shareReplay({ bufferSize: 1, refCount: true }));
     }
     setIdleStatus() {
         this.status.set({ state: 'idle', payload: null });
@@ -576,11 +619,32 @@ class FlowStatusService {
             payload: { source, target, sourceHandle, targetHandle, valid, oldEdge },
         });
     }
-    setConnectionEndStatus(source, target, sourceHandle, targetHandle) {
-        this.status.set({ state: 'connection-end', payload: { source, target, sourceHandle, targetHandle } });
+    setConnectionReleaseStatus(source, target, sourceHandle, targetHandle) {
+        this.status.set({ state: 'connection-release', payload: { source, target, sourceHandle, targetHandle } });
+    }
+    setConnectionReleaseValidatedStatus(source, target, sourceHandle, targetHandle, valid) {
+        this.status.set({
+            state: 'connection-release-validated',
+            payload: { source, target, sourceHandle, targetHandle, valid },
+        });
+    }
+    setConnectionDroppedStatus(source, sourceHandle) {
+        this.status.set({ state: 'connection-dropped', payload: { source, sourceHandle } });
     }
-    setReconnectionEndStatus(source, target, sourceHandle, targetHandle, oldEdge) {
-        this.status.set({ state: 'reconnection-end', payload: { source, target, sourceHandle, targetHandle, oldEdge } });
+    setReconnectionReleaseStatus(source, target, sourceHandle, targetHandle, oldEdge) {
+        this.status.set({
+            state: 'reconnection-release',
+            payload: { source, target, sourceHandle, targetHandle, oldEdge },
+        });
+    }
+    setReconnectionReleaseValidatedStatus(source, target, sourceHandle, targetHandle, oldEdge, valid) {
+        this.status.set({
+            state: 'reconnection-release-validated',
+            payload: { source, target, sourceHandle, targetHandle, oldEdge, valid },
+        });
+    }
+    setReconnectionDroppedStatus(source, sourceHandle, oldEdge) {
+        this.status.set({ state: 'reconnection-dropped', payload: { source, sourceHandle, oldEdge } });
     }
     setNodeDragStartStatus(node) {
         this.status.set({ state: 'node-drag-start', payload: { node } });
@@ -588,10 +652,10 @@ class FlowStatusService {
     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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FlowStatusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FlowStatusService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowStatusService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FlowStatusService, decorators: [{
             type: Injectable
         }] });
 function isNodeDragStartStatus(params) {
@@ -606,6 +670,8 @@ class DraggableService {
         this.entitiesService = inject(FlowEntitiesService);
         this.settingsService = inject(FlowSettingsService);
         this.flowStatusService = inject(FlowStatusService);
+        this.viewportService = inject(ViewportService);
+        this.injector = inject(Injector);
     }
     /**
      * Enable draggable behavior for element.
@@ -642,6 +708,7 @@ class DraggableService {
     getDragBehavior(model) {
         let dragNodes = [];
         let initialPositions = [];
+        let moveNodesOnAutoPanSub = null;
         const filterCondition = (event) => {
             // if there is at least one drag handle, we should check if we are dragging it
             if (model.dragHandlesCount()) {
@@ -658,6 +725,8 @@ class DraggableService {
                 x: node.point().x - event.x,
                 y: node.point().y - event.y,
             }));
+            // Subscribe to viewport changes during drag to sync node positions with auto-pan
+            moveNodesOnAutoPanSub = this.moveNodesOnAutoPan$(dragNodes);
         })
             .on('drag', (event) => {
             dragNodes.forEach((model, index) => {
@@ -665,10 +734,13 @@ class DraggableService {
                     x: round(event.x + initialPositions[index].x),
                     y: round(event.y + initialPositions[index].y),
                 };
+                this.alignToGrid(point);
                 this.moveNode(model, point);
             });
         })
             .on('end', () => {
+            moveNodesOnAutoPanSub?.unsubscribe();
+            moveNodesOnAutoPanSub = null;
             this.flowStatusService.setNodeDragEndStatus(model);
         });
     }
@@ -685,7 +757,6 @@ class DraggableService {
      * @todo make it unit testable
      */
     moveNode(model, point) {
-        point = this.alignToGrid(point);
         const parent = model.parent();
         // keep node in bounds of parent
         if (parent) {
@@ -709,10 +780,32 @@ class DraggableService {
         }
         return point;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraggableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraggableService }); }
+    moveNodesOnAutoPan$(dragNodes) {
+        return toObservable(this.viewportService.readableViewport, { injector: this.injector })
+            .pipe(skip(1), // Skip initial value
+        pairwise(), filter(([prev, next]) => prev.x !== next.x || prev.y !== next.y))
+            .subscribe(([prev, next]) => {
+            const dx = next.x - prev.x;
+            const dy = next.y - prev.y;
+            const zoom = next.zoom;
+            // Calculate shift in flow space (inverse of viewport shift)
+            const shiftX = -dx / zoom;
+            const shiftY = -dy / zoom;
+            // Update each dragged node
+            dragNodes.forEach((node) => {
+                // Move node using existing pipeline (snap + parent bounds)
+                const newPoint = {
+                    x: node.point().x + shiftX,
+                    y: node.point().y + shiftY,
+                };
+                this.moveNode(node, newPoint);
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DraggableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DraggableService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraggableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DraggableService, decorators: [{
             type: Injectable
         }] });
 
@@ -723,10 +816,10 @@ class EdgeTemplateDirective {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: EdgeTemplateDirective, isStandalone: true, selector: "ng-template[edge]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: EdgeTemplateDirective, isStandalone: true, selector: "ng-template[edge]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -740,10 +833,10 @@ class ConnectionTemplateDirective {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ConnectionTemplateDirective, isStandalone: true, selector: "ng-template[connection]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConnectionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: ConnectionTemplateDirective, isStandalone: true, selector: "ng-template[connection]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConnectionTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -757,10 +850,10 @@ class EdgeLabelHtmlTemplateDirective {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelHtmlTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: EdgeLabelHtmlTemplateDirective, isStandalone: true, selector: "ng-template[edgeLabelHtml]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeLabelHtmlTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: EdgeLabelHtmlTemplateDirective, isStandalone: true, selector: "ng-template[edgeLabelHtml]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelHtmlTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeLabelHtmlTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -774,10 +867,10 @@ class NodeHtmlTemplateDirective {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeHtmlTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NodeHtmlTemplateDirective, isStandalone: true, selector: "ng-template[nodeHtml]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeHtmlTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: NodeHtmlTemplateDirective, isStandalone: true, selector: "ng-template[nodeHtml]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeHtmlTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeHtmlTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -791,10 +884,10 @@ class NodeSvgTemplateDirective {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeSvgTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NodeSvgTemplateDirective, isStandalone: true, selector: "ng-template[nodeSvg]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeSvgTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: NodeSvgTemplateDirective, isStandalone: true, selector: "ng-template[nodeSvg]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeSvgTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeSvgTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -808,10 +901,10 @@ class GroupNodeTemplateDirective {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupNodeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: GroupNodeTemplateDirective, isStandalone: true, selector: "ng-template[groupNode]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: GroupNodeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: GroupNodeTemplateDirective, isStandalone: true, selector: "ng-template[groupNode]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupNodeTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: GroupNodeTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -822,10 +915,10 @@ class HandleTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: HandleTemplateDirective, isStandalone: true, selector: "ng-template[handle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HandleTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: HandleTemplateDirective, isStandalone: true, selector: "ng-template[handle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HandleTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -862,10 +955,10 @@ class ComponentEventBusService {
     pushEvent(event) {
         this._event$.next(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComponentEventBusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComponentEventBusService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ComponentEventBusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ComponentEventBusService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComponentEventBusService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ComponentEventBusService, decorators: [{
             type: Injectable
         }] });
 
@@ -876,10 +969,10 @@ class NodeAccessorService {
     constructor() {
         this.model = signal(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeAccessorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeAccessorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeAccessorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeAccessorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeAccessorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeAccessorService, decorators: [{
             type: Injectable
         }] });
 
@@ -917,10 +1010,10 @@ class CustomNodeBaseComponent {
             });
         }))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomNodeBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: CustomNodeBaseComponent, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomNodeBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: CustomNodeBaseComponent, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomNodeBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomNodeBaseComponent, decorators: [{
             type: Directive
         }] });
 function outputRefToObservable(ref) {
@@ -934,28 +1027,6 @@ function outputRefToObservable(ref) {
     });
 }
 
-class CustomDynamicNodeComponent extends CustomNodeBaseComponent {
-    constructor() {
-        super(...arguments);
-        /**
-         * Reference to node bound to this component
-         */
-        this.node = input.required();
-    }
-    ngOnInit() {
-        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: 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: CustomDynamicNodeComponent, decorators: [{
-            type: Directive
-        }] });
-
 class CustomNodeComponent extends CustomNodeBaseComponent {
     constructor() {
         super(...arguments);
@@ -965,102 +1036,226 @@ class CustomNodeComponent extends CustomNodeBaseComponent {
         this.node = input.required();
     }
     ngOnInit() {
-        if (this.node().data) {
-            this.data.set(this.node().data);
+        const nodeData = this.node().data;
+        if (nodeData) {
+            this.data = nodeData;
         }
         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: "19.2.17", ngImport: i0, type: CustomNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: CustomNodeComponent, isStandalone: true, 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: "19.2.17", 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';
-}
-function isDynamicNode(node) {
-    return typeof node.point === 'function';
-}
-function isComponentStaticNode(node) {
+const NODE_DEFAULTS = {
+    point: { x: 0, y: 0 },
+    width: 100,
+    height: 50,
+    draggable: true,
+    parentId: null,
+    preview: { style: {} },
+    selected: false,
+    color: '#1b262c',
+    resizable: false,
+    text: '',
+    data: {},
+};
+function isComponentNode(node) {
     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) {
-    if (isCustomDynamicNodeComponent(node.type)) {
-        return true;
-    }
-    // Check if the type is a function with dynamic import
-    return isCallable(node.type) && isCallable(node.point);
+    return isCallable(node.type);
 }
-function isTemplateStaticNode(node) {
+function isTemplateNode(node) {
     return node.type === 'html-template';
 }
-function isTemplateDynamicNode(node) {
-    return node.type === 'html-template';
-}
-function isSvgTemplateStaticNode(node) {
+function isSvgTemplateNode(node) {
     return node.type === 'svg-template';
 }
-function isSvgTemplateDynamicNode(node) {
-    return node.type === 'html-template';
-}
-function isDefaultStaticNode(node) {
-    return node.type === 'default';
-}
-function isDefaultDynamicNode(node) {
+function isDefaultNode(node) {
     return node.type === 'default';
 }
-function isDefaultStaticGroupNode(node) {
+function isDefaultGroupNode(node) {
     return node.type === 'default-group';
 }
-function isDefaultDynamicGroupNode(node) {
-    return node.type === 'default-group';
-}
-function isTemplateStaticGroupNode(node) {
+function isTemplateGroupNode(node) {
     return node.type === 'template-group';
 }
-function isTemplateDynamicGroupNode(node) {
-    return node.type === 'template-group';
-}
-
-// this is a number to fix visual artifact in chrome.
-// the bug reproduces if edgeLabelWrapperRef size fully matched the size of parent foreignObject
-const MAGIC_NUMBER_TO_FIX_GLITCH_IN_CHROME = 2;
-
-function toUnifiedNode(node) {
-    if (isDynamicNode(node)) {
-        return node;
+function createBaseNode(node, useDefaults) {
+    if (useDefaults) {
+        return {
+            id: node.id,
+            point: signal(node.point),
+            draggable: signal(node.draggable ?? NODE_DEFAULTS.draggable),
+            parentId: signal(node.parentId ?? NODE_DEFAULTS.parentId),
+            preview: signal(node.preview ?? NODE_DEFAULTS.preview),
+            selected: signal(node.selected ?? NODE_DEFAULTS.selected),
+        };
+    }
+    else {
+        return {
+            id: node.id,
+            point: signal(node.point),
+            draggable: isDefined(node.draggable) ? signal(node.draggable) : undefined,
+            parentId: isDefined(node.parentId) ? signal(node.parentId) : undefined,
+            preview: isDefined(node.preview) ? signal(node.preview) : undefined,
+            selected: isDefined(node.selected) ? signal(node.selected) : undefined,
+        };
     }
-    return {
-        ...toSignalProperties(node),
-        // non-signal props below
-        id: node.id,
-        // TODO this actually of incorrect type for component nodes
-        type: node.type,
-    };
 }
-function toSignalProperties(obj) {
-    const newObj = {};
-    for (const key in obj) {
-        if (Object.prototype.hasOwnProperty.call(obj, key)) {
-            newObj[key] = signal(obj[key]);
+// Реализация
+function createNode(node, options = { useDefaults: true }) {
+    const baseNode = createBaseNode(node, options.useDefaults);
+    if (node.type === 'default') {
+        if (options.useDefaults) {
+            return {
+                ...baseNode,
+                type: 'default',
+                text: signal(node.text ?? ''),
+                width: signal(node.width ?? NODE_DEFAULTS.width),
+                height: signal(node.height ?? NODE_DEFAULTS.height),
+            };
+        }
+        else {
+            return {
+                ...baseNode,
+                type: 'default',
+                text: isDefined(node.text) ? signal(node.text) : undefined,
+                width: isDefined(node.width) ? signal(node.width) : undefined,
+                height: isDefined(node.height) ? signal(node.height) : undefined,
+            };
+        }
+    }
+    if (node.type === 'html-template') {
+        if (options.useDefaults) {
+            return {
+                ...baseNode,
+                type: 'html-template',
+                data: signal(node.data ?? NODE_DEFAULTS.data),
+                width: signal(node.width ?? NODE_DEFAULTS.width),
+                height: signal(node.height ?? NODE_DEFAULTS.height),
+            };
+        }
+        else {
+            return {
+                ...baseNode,
+                type: 'html-template',
+                data: isDefined(node.data) ? signal(node.data) : undefined,
+                width: isDefined(node.width) ? signal(node.width) : undefined,
+                height: isDefined(node.height) ? signal(node.height) : undefined,
+            };
         }
     }
-    return newObj;
+    if (node.type === 'svg-template') {
+        const width = signal(node.width);
+        const height = signal(node.height);
+        if (options.useDefaults) {
+            return {
+                ...baseNode,
+                type: 'svg-template',
+                width,
+                height,
+                data: signal(node.data ?? NODE_DEFAULTS.data),
+            };
+        }
+        else {
+            return {
+                ...baseNode,
+                type: 'svg-template',
+                width,
+                height,
+                data: isDefined(node.data) ? signal(node.data) : undefined,
+            };
+        }
+    }
+    if (node.type === 'default-group') {
+        const width = signal(node.width);
+        const height = signal(node.height);
+        if (options.useDefaults) {
+            return {
+                ...baseNode,
+                type: 'default-group',
+                width,
+                height,
+                color: signal(node.color ?? NODE_DEFAULTS.color),
+                resizable: signal(node.resizable ?? NODE_DEFAULTS.resizable),
+            };
+        }
+        else {
+            return {
+                ...baseNode,
+                type: 'default-group',
+                width,
+                height,
+                color: isDefined(node.color) ? signal(node.color) : undefined,
+                resizable: isDefined(node.resizable) ? signal(node.resizable) : undefined,
+            };
+        }
+    }
+    if (node.type === 'template-group') {
+        const width = signal(node.width);
+        const height = signal(node.height);
+        if (options.useDefaults) {
+            return {
+                ...baseNode,
+                type: 'template-group',
+                width,
+                height,
+                data: signal(node.data ?? NODE_DEFAULTS.data),
+            };
+        }
+        else {
+            return {
+                ...baseNode,
+                type: 'template-group',
+                width,
+                height,
+                data: isDefined(node.data) ? signal(node.data) : undefined,
+            };
+        }
+    }
+    if (isCustomNodeComponent(node.type) || isCallable(node.type)) {
+        if (options.useDefaults) {
+            return {
+                ...baseNode,
+                type: node.type,
+                data: signal(node.data ?? NODE_DEFAULTS.data),
+                width: signal(node.width ?? NODE_DEFAULTS.width),
+                height: signal(node.height ?? NODE_DEFAULTS.height),
+            };
+        }
+        else {
+            return {
+                ...baseNode,
+                type: node.type,
+                data: isDefined(node.data) ? signal(node.data) : undefined,
+                width: isDefined(node.width) ? signal(node.width) : undefined,
+                height: isDefined(node.height) ? signal(node.height) : undefined,
+            };
+        }
+    }
+    throw new Error(`Unknown node type for node with id ${node.id}`);
+}
+function createNodes(nodes, options = { useDefaults: true }) {
+    if (options.useDefaults) {
+        return nodes.map((node) => createNode(node, { useDefaults: true }));
+    }
+    else {
+        return nodes.map((node) => createNode(node, { useDefaults: false }));
+    }
 }
 
+// this is a number to fix visual artifact in chrome.
+// the bug reproduces if edgeLabelWrapperRef size fully matched the size of parent foreignObject
+const MAGIC_NUMBER_TO_FIX_GLITCH_IN_CHROME = 2;
+
 // MIT License
 // Copyright (c) 2023 Chau Tran
 // Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -1172,10 +1367,10 @@ class NodeRenderingService {
         // 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeRenderingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeRenderingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeRenderingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeRenderingService, decorators: [{
             type: Injectable
         }] });
 
@@ -1194,9 +1389,6 @@ function extendedComputed(computedCallback, options) {
 }
 
 class NodeModel {
-    static { this.defaultWidth = 100; }
-    static { this.defaultHeight = 50; }
-    static { this.defaultColor = '#1b262c'; }
     constructor(rawNode) {
         this.rawNode = rawNode;
         this.entitiesService = inject(FlowEntitiesService);
@@ -1204,8 +1396,8 @@ class NodeModel {
         this.nodeRenderingService = inject(NodeRenderingService);
         this.isVisible = signal(false);
         this.point = signal({ x: 0, y: 0 });
-        this.width = signal(NodeModel.defaultWidth);
-        this.height = signal(NodeModel.defaultHeight);
+        this.width = signal(NODE_DEFAULTS.width);
+        this.height = signal(NODE_DEFAULTS.height);
         /**
          * @deprecated use width or height signals
          */
@@ -1239,7 +1431,7 @@ class NodeModel {
         // disabled for configuration for now
         this.magnetRadius = 20;
         // TODO: not sure if we need to statically store it
-        this.isComponentType = isComponentStaticNode(this.rawNode) || isComponentDynamicNode(this.rawNode);
+        this.isComponentType = isComponentNode(this.rawNode);
         this.shouldLoad = extendedComputed((previousShouldLoad) => {
             if (previousShouldLoad) {
                 return true;
@@ -1252,10 +1444,6 @@ class NodeModel {
                 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)
@@ -1274,63 +1462,67 @@ class NodeModel {
         // @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('');
+        this.text = signal(NODE_DEFAULTS.text);
         // Component node specific thing
         this.componentTypeInputs = {
             node: this.rawNode,
         };
         this.parent = computed(() => this.entitiesService.nodes().find((n) => n.rawNode.id === this.parentId()) ?? null);
         this.children = computed(() => this.entitiesService.nodes().filter((n) => n.parentId() === this.rawNode.id));
-        this.color = signal(NodeModel.defaultColor);
+        this.color = signal(NODE_DEFAULTS.color);
         this.controlledByResizer = signal(false);
-        this.resizable = signal(false);
+        this.resizable = signal(NODE_DEFAULTS.resizable);
         this.resizing = signal(false);
         this.resizerTemplate = signal(null);
         this.context = {
             $implicit: {},
         };
-        this.parentId = signal(null);
-        const internalNode = toUnifiedNode(rawNode);
-        if (internalNode.point) {
-            this.point = internalNode.point;
+        this.parentId = signal(NODE_DEFAULTS.parentId);
+        if (rawNode.point) {
+            this.point = rawNode.point;
         }
-        if (internalNode.width) {
-            this.width = internalNode.width;
+        if (rawNode.width) {
+            this.width = rawNode.width;
         }
-        if (internalNode.height) {
-            this.height = internalNode.height;
+        if (rawNode.height) {
+            this.height = rawNode.height;
         }
-        if (internalNode.draggable) {
-            this.draggable = internalNode.draggable;
+        if (rawNode.draggable) {
+            this.draggable = rawNode.draggable;
         }
-        if (internalNode.parentId) {
-            this.parentId = internalNode.parentId;
+        if (rawNode.parentId) {
+            this.parentId = rawNode.parentId;
         }
-        if (internalNode.preview) {
-            this.preview = internalNode.preview;
+        if (rawNode.preview) {
+            this.preview = rawNode.preview;
         }
-        if (internalNode.type === 'default-group' && internalNode.color) {
-            this.color = internalNode.color;
+        if (rawNode.selected) {
+            this.selected = rawNode.selected;
         }
-        if (internalNode.type === 'default-group' && internalNode.resizable) {
-            this.resizable = internalNode.resizable;
+        if (rawNode.type === 'default-group' && rawNode.color) {
+            this.color = rawNode.color;
         }
-        if (internalNode.type === 'default' && internalNode.text) {
-            this.text = internalNode.text;
+        if (rawNode.type === 'default-group' && rawNode.resizable) {
+            this.resizable = rawNode.resizable;
         }
-        if (internalNode.type === 'html-template') {
+        if (rawNode.type === 'default' && rawNode.text) {
+            this.text = rawNode.text;
+        }
+        if (rawNode.type === 'html-template') {
             this.context = {
                 $implicit: {
                     node: rawNode,
+                    data: rawNode.data ?? signal(NODE_DEFAULTS.data),
                     selected: this.selected.asReadonly(),
                     shouldLoad: this.shouldLoad,
                 },
             };
         }
-        if (internalNode.type === 'svg-template') {
+        if (rawNode.type === 'svg-template') {
             this.context = {
                 $implicit: {
                     node: rawNode,
+                    data: rawNode.data ?? signal(NODE_DEFAULTS.data),
                     selected: this.selected.asReadonly(),
                     width: this.width.asReadonly(),
                     height: this.height.asReadonly(),
@@ -1338,10 +1530,11 @@ class NodeModel {
                 },
             };
         }
-        if (internalNode.type === 'template-group') {
+        if (rawNode.type === 'template-group') {
             this.context = {
                 $implicit: {
                     node: rawNode,
+                    data: rawNode.data ?? signal(NODE_DEFAULTS.data),
                     selected: this.selected.asReadonly(),
                     width: this.width.asReadonly(),
                     height: this.height.asReadonly(),
@@ -1362,6 +1555,61 @@ class NodeModel {
     }
 }
 
+const EDGE_DEFAULTS = {
+    type: 'default',
+    curve: 'bezier',
+    data: {},
+    edgeLabels: {},
+    markers: {},
+    reconnectable: false,
+    floating: false,
+    selected: false,
+};
+function createEdge(edge, options = { useDefaults: true }) {
+    if (options.useDefaults) {
+        return {
+            id: edge.id,
+            type: edge.type ?? EDGE_DEFAULTS.type,
+            source: edge.source,
+            target: edge.target,
+            sourceHandle: edge.sourceHandle ?? '',
+            targetHandle: edge.targetHandle ?? '',
+            curve: signal(edge.curve ?? EDGE_DEFAULTS.curve),
+            data: signal(edge.data ?? EDGE_DEFAULTS.data),
+            edgeLabels: signal(edge.edgeLabels ?? EDGE_DEFAULTS.edgeLabels),
+            markers: signal(edge.markers ?? EDGE_DEFAULTS.markers),
+            reconnectable: signal(edge.reconnectable ?? EDGE_DEFAULTS.reconnectable),
+            floating: signal(edge.floating ?? EDGE_DEFAULTS.floating),
+            selected: signal(edge.selected ?? EDGE_DEFAULTS.selected),
+        };
+    }
+    else {
+        return {
+            id: edge.id,
+            type: edge.type,
+            source: edge.source,
+            target: edge.target,
+            sourceHandle: edge.sourceHandle,
+            targetHandle: edge.targetHandle,
+            curve: isDefined(edge.curve) ? signal(edge.curve) : undefined,
+            data: isDefined(edge.data) ? signal(edge.data) : undefined,
+            edgeLabels: isDefined(edge.edgeLabels) ? signal(edge.edgeLabels) : undefined,
+            markers: isDefined(edge.markers) ? signal(edge.markers) : undefined,
+            reconnectable: isDefined(edge.reconnectable) ? signal(edge.reconnectable) : undefined,
+            floating: isDefined(edge.floating) ? signal(edge.floating) : undefined,
+            selected: isDefined(edge.selected) ? signal(edge.selected) : undefined,
+        };
+    }
+}
+function createEdges(edges, options = { useDefaults: true }) {
+    if (options.useDefaults) {
+        return edges.map((edge) => createEdge(edge, { useDefaults: true }));
+    }
+    else {
+        return edges.map((edge) => createEdge(edge, { useDefaults: false }));
+    }
+}
+
 class EdgeLabelModel {
     constructor(edgeLabel) {
         this.edgeLabel = edgeLabel;
@@ -1689,7 +1937,12 @@ class EdgeModel {
         this.flowEntitiesService = inject(FlowEntitiesService);
         this.source = signal(undefined);
         this.target = signal(undefined);
-        this.selected = signal(false);
+        this.curve = signal(EDGE_DEFAULTS.curve);
+        this.reconnectable = signal(EDGE_DEFAULTS.reconnectable);
+        this.floating = signal(EDGE_DEFAULTS.floating);
+        this.markers = signal(EDGE_DEFAULTS.markers);
+        this.edgeLabels = signal(EDGE_DEFAULTS.edgeLabels);
+        this.selected = signal(EDGE_DEFAULTS.selected);
         this.selected$ = toObservable(this.selected);
         this.shouldLoad = computed(() => (this.source()?.shouldLoad() ?? false) && (this.target()?.shouldLoad() ?? false));
         this.renderOrder = signal(0);
@@ -1724,7 +1977,8 @@ class EdgeModel {
                 return { path: '' };
             }
             const params = this.getPathFactoryParams(source, target);
-            switch (this.curve) {
+            const curve = this.curve();
+            switch (curve) {
                 case 'straight':
                     return straightPath(params);
                 case 'bezier':
@@ -1734,12 +1988,12 @@ class EdgeModel {
                 case 'step':
                     return smoothStepPath(params, 0);
                 default:
-                    return this.curve(params);
+                    return curve(params);
             }
         });
         this.sourceHandle = extendedComputed((previousHandle) => {
             let handle = null;
-            if (this.floating) {
+            if (this.floating()) {
                 handle = this.closestHandles().sourceHandle;
             }
             else {
@@ -1767,7 +2021,7 @@ class EdgeModel {
         });
         this.targetHandle = extendedComputed((previousHandle) => {
             let handle = null;
-            if (this.floating) {
+            if (this.floating()) {
                 handle = this.closestHandles().targetHandle;
             }
             else {
@@ -1831,24 +2085,48 @@ class EdgeModel {
                 targetHandle: closestTargetHandle,
             };
         });
-        /**
-         * TODO: not reactive
-         */
         this.markerStartUrl = computed(() => {
-            const marker = this.edge.markers?.start;
+            const marker = this.markers()?.start;
             return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
         });
-        /**
-         * TODO: not reactive
-         */
         this.markerEndUrl = computed(() => {
-            const marker = this.edge.markers?.end;
+            const marker = this.markers()?.end;
             return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
         });
+        this.labelModels = computed(() => {
+            const models = {};
+            const labels = this.edgeLabels();
+            if (labels?.start)
+                models.start = new EdgeLabelModel(labels.start);
+            if (labels?.center)
+                models.center = new EdgeLabelModel(labels.center);
+            if (labels?.end)
+                models.end = new EdgeLabelModel(labels.end);
+            return models;
+        });
+        this.type = edge.type ?? EDGE_DEFAULTS.type;
+        if (edge.curve) {
+            this.curve = edge.curve;
+        }
+        if (edge.reconnectable) {
+            this.reconnectable = edge.reconnectable;
+        }
+        if (edge.floating) {
+            this.floating = edge.floating;
+        }
+        if (edge.selected) {
+            this.selected = edge.selected;
+        }
+        if (edge.markers) {
+            this.markers = edge.markers;
+        }
+        if (edge.edgeLabels) {
+            this.edgeLabels = edge.edgeLabels;
+        }
         this.context = {
             $implicit: {
-                // TODO: check if edge could change
                 edge: this.edge,
+                data: this.edge.data ?? signal({}),
                 path: computed(() => this.path().path),
                 markerStart: this.markerStartUrl,
                 markerEnd: this.markerEndUrl,
@@ -1856,17 +2134,7 @@ class EdgeModel {
                 shouldLoad: this.shouldLoad,
             },
         };
-        this.edgeLabels = {};
-        this.type = edge.type ?? 'default';
-        this.curve = edge.curve ?? 'bezier';
-        this.reconnectable = edge.reconnectable ?? false;
-        this.floating = edge.floating ?? false;
-        if (edge.edgeLabels?.start)
-            this.edgeLabels.start = new EdgeLabelModel(edge.edgeLabels.start);
-        if (edge.edgeLabels?.center)
-            this.edgeLabels.center = new EdgeLabelModel(edge.edgeLabels.center);
-        if (edge.edgeLabels?.end)
-            this.edgeLabels.end = new EdgeLabelModel(edge.edgeLabels.end);
+        this.selected$ = toObservable(this.selected);
     }
     getPathFactoryParams(source, target) {
         return {
@@ -1937,10 +2205,10 @@ class NodesChangeService {
         // you can't get valid list of detached edges
         observeOn(asyncScheduler, DELAY_FOR_SCHEDULER));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodesChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodesChangeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodesChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodesChangeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodesChangeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodesChangeService, decorators: [{
             type: Injectable
         }] });
 
@@ -1975,10 +2243,10 @@ class EdgeChangesService {
         // right after [nodes] input change
         observeOn(asyncScheduler));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeChangesService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeChangesService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeChangesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeChangesService, decorators: [{
             type: Injectable
         }] });
 
@@ -1987,135 +2255,39 @@ class ChangesControllerDirective {
         this.nodesChangeService = inject(NodesChangeService);
         this.edgesChangeService = inject(EdgeChangesService);
         /**
-         * Watch nodes change
-         */
-        this.onNodesChange = outputFromObservable(this.nodesChangeService.changes$);
-        this.onNodesChangePosition = outputFromObservable(this.nodeChangesOfType('position'), {
-            alias: 'onNodesChange.position',
-        });
-        /**
-         * @deprecated use `onNodesChange.position` instead
-         */
-        this.onNodesChangePositionSignle = outputFromObservable(this.singleChange(this.nodeChangesOfType('position')), { alias: 'onNodesChange.position.single' });
-        /**
-         * @deprecated use `onNodesChange.position` instead
-         */
-        this.onNodesChangePositionMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('position')), { alias: 'onNodesChange.position.many' });
-        this.onNodesChangeSize = outputFromObservable(this.nodeChangesOfType('size'), {
-            alias: 'onNodesChange.size',
-        });
-        /**
-         * @deprecated use `onNodesChange.size` instead
-         */
-        this.onNodesChangeSizeSingle = outputFromObservable(this.singleChange(this.nodeChangesOfType('size')), {
-            alias: 'onNodesChange.size.single',
-        });
-        /**
-         * @deprecated use `onNodesChange.size` instead
-         */
-        this.onNodesChangeSizeMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('size')), {
-            alias: 'onNodesChange.size.many',
-        });
-        this.onNodesChangeAdd = outputFromObservable(this.nodeChangesOfType('add'), {
-            alias: 'onNodesChange.add',
-        });
-        /**
-         * @deprecated use `onNodesChange.add` instead
+         * Watch nodes changes
          */
-        this.onNodesChangeAddSingle = outputFromObservable(this.singleChange(this.nodeChangesOfType('add')), {
-            alias: 'onNodesChange.add.single',
+        this.nodesChanges = outputFromObservable(this.nodesChangeService.changes$);
+        this.nodesChangesPosition = outputFromObservable(this.nodeChangesOfType('position'), {
+            alias: 'nodesChanges.position',
         });
-        /**
-         * @deprecated use `onNodesChange.add` instead
-         */
-        this.onNodesChangeAddMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('add')), {
-            alias: 'onNodesChange.add.many',
+        this.nodesChangesSize = outputFromObservable(this.nodeChangesOfType('size'), {
+            alias: 'nodesChanges.size',
         });
-        this.onNodesChangeRemove = outputFromObservable(this.nodeChangesOfType('remove'), {
-            alias: 'onNodesChange.remove',
+        this.nodesChangesAdd = outputFromObservable(this.nodeChangesOfType('add'), {
+            alias: 'nodesChanges.add',
         });
-        /**
-         * @deprecated use `onNodesChange.remove` instead
-         */
-        this.onNodesChangeRemoveSingle = outputFromObservable(this.singleChange(this.nodeChangesOfType('remove')), { alias: 'onNodesChange.remove.single' });
-        /**
-         * @deprecated use `onNodesChange.remove` instead
-         */
-        this.onNodesChangeRemoveMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('remove')), {
-            alias: 'onNodesChange.remove.many',
+        this.nodesChangesRemove = outputFromObservable(this.nodeChangesOfType('remove'), {
+            alias: 'nodesChanges.remove',
         });
-        this.onNodesChangeSelect = outputFromObservable(this.nodeChangesOfType('select'), {
-            alias: 'onNodesChange.select',
-        });
-        /**
-         * @deprecated use `onNodesChange.select` instead
-         */
-        this.onNodesChangeSelectSingle = outputFromObservable(this.singleChange(this.nodeChangesOfType('select')), { alias: 'onNodesChange.select.single' });
-        /**
-         * @deprecated use `onNodesChange.select` instead
-         */
-        this.onNodesChangeSelectMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('select')), {
-            alias: 'onNodesChange.select.many',
+        this.nodesChangesSelect = outputFromObservable(this.nodeChangesOfType('select'), {
+            alias: 'nodesChanges.select',
         });
         /**
          * Watch edges change
          */
-        this.onEdgesChange = outputFromObservable(this.edgesChangeService.changes$);
-        this.onNodesChangeDetached = outputFromObservable(this.edgeChangesOfType('detached'), {
-            alias: 'onEdgesChange.detached',
+        this.edgesChanges = outputFromObservable(this.edgesChangeService.changes$);
+        this.edgesChangesDetached = outputFromObservable(this.edgeChangesOfType('detached'), {
+            alias: 'edgesChanges.detached',
         });
-        /**
-         * @deprecated use `onEdgesChange.detached` instead
-         */
-        this.onNodesChangeDetachedSingle = outputFromObservable(this.singleChange(this.edgeChangesOfType('detached')), { alias: 'onEdgesChange.detached.single' });
-        /**
-         * @deprecated use `onEdgesChange.detached` instead
-         */
-        this.onNodesChangeDetachedMany = outputFromObservable(this.manyChanges(this.edgeChangesOfType('detached')), { alias: 'onEdgesChange.detached.many' });
-        this.onEdgesChangeAdd = outputFromObservable(this.edgeChangesOfType('add'), {
-            alias: 'onEdgesChange.add',
+        this.edgesChangesAdd = outputFromObservable(this.edgeChangesOfType('add'), {
+            alias: 'edgesChanges.add',
         });
-        /**
-         * @deprecated use `onEdgesChange.add` instead
-         */
-        this.onEdgeChangeAddSingle = outputFromObservable(this.singleChange(this.edgeChangesOfType('add')), {
-            alias: 'onEdgesChange.add.single',
+        this.edgesChangesRemove = outputFromObservable(this.edgeChangesOfType('remove'), {
+            alias: 'edgesChanges.remove',
         });
-        /**
-         * @deprecated use `onEdgesChange.add` instead
-         */
-        this.onEdgeChangeAddMany = outputFromObservable(this.manyChanges(this.edgeChangesOfType('add')), {
-            alias: 'onEdgesChange.add.many',
-        });
-        this.onEdgeChangeRemove = outputFromObservable(this.edgeChangesOfType('remove'), {
-            alias: 'onEdgesChange.remove',
-        });
-        /**
-         * @deprecated use `onEdgesChange.remove` instead
-         */
-        this.onEdgeChangeRemoveSingle = outputFromObservable(this.singleChange(this.edgeChangesOfType('remove')), {
-            alias: 'onEdgesChange.remove.single',
-        });
-        /**
-         * @deprecated use `onEdgesChange.remove` instead
-         */
-        this.onEdgeChangeRemoveMany = outputFromObservable(this.manyChanges(this.edgeChangesOfType('remove')), {
-            alias: 'onEdgesChange.remove.many',
-        });
-        this.onEdgeChangeSelect = outputFromObservable(this.edgeChangesOfType('select'), {
-            alias: 'onEdgesChange.select',
-        });
-        /**
-         * @deprecated use `onEdgesChange.select` instead
-         */
-        this.onEdgeChangeSelectSingle = outputFromObservable(this.singleChange(this.edgeChangesOfType('select')), {
-            alias: 'onEdgesChange.select.single',
-        });
-        /**
-         * @deprecated use `onEdgesChange.select` instead
-         */
-        this.onEdgeChangeSelectMany = outputFromObservable(this.manyChanges(this.edgeChangesOfType('select')), {
-            alias: 'onEdgesChange.select.many',
+        this.edgesChangesSelect = outputFromObservable(this.edgeChangesOfType('select'), {
+            alias: 'edgesChanges.select',
         });
     }
     nodeChangesOfType(type) {
@@ -2124,16 +2296,10 @@ class ChangesControllerDirective {
     edgeChangesOfType(type) {
         return this.edgesChangeService.changes$.pipe(map((changes) => changes.filter((c) => c.type === type)), filter((changes) => !!changes.length));
     }
-    singleChange(changes$) {
-        return changes$.pipe(filter((changes) => changes.length === 1), map(([first]) => first));
-    }
-    manyChanges(changes$) {
-        return changes$.pipe(filter((changes) => changes.length > 1));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChangesControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ChangesControllerDirective, isStandalone: true, selector: "[changesController]", outputs: { onNodesChange: "onNodesChange", onNodesChangePosition: "onNodesChange.position", onNodesChangePositionSignle: "onNodesChange.position.single", onNodesChangePositionMany: "onNodesChange.position.many", onNodesChangeSize: "onNodesChange.size", onNodesChangeSizeSingle: "onNodesChange.size.single", onNodesChangeSizeMany: "onNodesChange.size.many", onNodesChangeAdd: "onNodesChange.add", onNodesChangeAddSingle: "onNodesChange.add.single", onNodesChangeAddMany: "onNodesChange.add.many", onNodesChangeRemove: "onNodesChange.remove", onNodesChangeRemoveSingle: "onNodesChange.remove.single", onNodesChangeRemoveMany: "onNodesChange.remove.many", onNodesChangeSelect: "onNodesChange.select", onNodesChangeSelectSingle: "onNodesChange.select.single", onNodesChangeSelectMany: "onNodesChange.select.many", onEdgesChange: "onEdgesChange", onNodesChangeDetached: "onEdgesChange.detached", onNodesChangeDetachedSingle: "onEdgesChange.detached.single", onNodesChangeDetachedMany: "onEdgesChange.detached.many", onEdgesChangeAdd: "onEdgesChange.add", onEdgeChangeAddSingle: "onEdgesChange.add.single", onEdgeChangeAddMany: "onEdgesChange.add.many", onEdgeChangeRemove: "onEdgesChange.remove", onEdgeChangeRemoveSingle: "onEdgesChange.remove.single", onEdgeChangeRemoveMany: "onEdgesChange.remove.many", onEdgeChangeSelect: "onEdgesChange.select", onEdgeChangeSelectSingle: "onEdgesChange.select.single", onEdgeChangeSelectMany: "onEdgesChange.select.many" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChangesControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: ChangesControllerDirective, isStandalone: true, selector: "[changesController]", outputs: { nodesChanges: "nodesChanges", nodesChangesPosition: "nodesChanges.position", nodesChangesSize: "nodesChanges.size", nodesChangesAdd: "nodesChanges.add", nodesChangesRemove: "nodesChanges.remove", nodesChangesSelect: "nodesChanges.select", edgesChanges: "edgesChanges", edgesChangesDetached: "edgesChanges.detached", edgesChangesAdd: "edgesChanges.add", edgesChangesRemove: "edgesChanges.remove", edgesChangesSelect: "edgesChanges.select" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChangesControllerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChangesControllerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[changesController]',
@@ -2185,10 +2351,10 @@ class RootPointerDirective {
     setInitialTouch(event) {
         this.initialTouch$.next(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RootPointerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: RootPointerDirective, isStandalone: true, selector: "svg[rootPointer]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RootPointerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: RootPointerDirective, isStandalone: true, selector: "svg[rootPointer]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RootPointerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RootPointerDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -2201,20 +2367,24 @@ class SpacePointContextDirective {
         this.pointerMovementDirective = inject(RootPointerDirective);
         this.rootSvg = inject(RootSvgReferenceDirective).element;
         this.host = inject(ElementRef).nativeElement;
+        this.viewportService = inject(ViewportService);
         /**
          * Signal with current mouse position in svg space
          */
         this.svgCurrentSpacePoint = computed(() => {
-            const movement = this.pointerMovement();
-            if (!movement) {
+            // Add dependency on viewport to recalculate when auto-pan changes viewport
+            // TODO: hacky solution, need to find a better way
+            this.viewportService.readableViewport();
+            const point = this.currentPoint();
+            if (!point) {
                 return { x: 0, y: 0 };
             }
             return this.documentPointToFlowPoint({
-                x: movement.x,
-                y: movement.y,
+                x: point.x,
+                y: point.y,
             });
         });
-        this.pointerMovement = toSignal(this.pointerMovementDirective.pointerMovement$);
+        this.currentPoint = toSignal(this.pointerMovementDirective.pointerMovement$);
     }
     documentPointToFlowPoint(documentPoint) {
         const point = this.rootSvg.createSVGPoint();
@@ -2222,10 +2392,10 @@ class SpacePointContextDirective {
         point.y = documentPoint.y;
         return point.matrixTransform(this.host.getScreenCTM().inverse());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpacePointContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SpacePointContextDirective, isStandalone: true, selector: "g[spacePointContext]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpacePointContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: SpacePointContextDirective, isStandalone: true, selector: "g[spacePointContext]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpacePointContextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpacePointContextDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -2266,8 +2436,8 @@ class OverlaysService {
     removeToolbar(toolbar) {
         this.toolbars.update((toolbars) => toolbars.filter((t) => t !== toolbar));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlaysService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlaysService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: OverlaysService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: OverlaysService }); }
 }
 __decorate([
     Microtask
@@ -2275,7 +2445,7 @@ __decorate([
 __decorate([
     Microtask
 ], OverlaysService.prototype, "removeToolbar", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlaysService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: OverlaysService, decorators: [{
             type: Injectable
         }], propDecorators: { addToolbar: [], removeToolbar: [] } });
 
@@ -2349,26 +2519,34 @@ class EdgeLabelComponent {
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeLabelComponent, isStandalone: true, selector: "g[edgeLabel]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeModel: { classPropertyName: "edgeModel", publicName: "edgeModel", isSignal: true, isRequired: true, transformFunction: null }, point: { classPropertyName: "point", publicName: "point", isSignal: true, isRequired: false, transformFunction: null }, htmlTemplate: { classPropertyName: "htmlTemplate", publicName: "htmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "edgeLabelWrapperRef", first: true, predicate: ["edgeLabelWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (model(); as model) {\n  @if (model.edgeLabel.type === 'html-template' && htmlTemplate()) {\n    @if (htmlTemplate(); as htmlTemplate) {\n      <svg:foreignObject\n        [attr.x]=\"edgeLabelPoint().x\"\n        [attr.y]=\"edgeLabelPoint().y\"\n        [attr.width]=\"model.size().width\"\n        [attr.height]=\"model.size().height\">\n        <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n          <ng-container *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\" />\n        </div>\n      </svg:foreignObject>\n    }\n  }\n\n  @if (model.edgeLabel.type === 'default') {\n    <svg:foreignObject\n      [attr.x]=\"edgeLabelPoint().x\"\n      [attr.y]=\"edgeLabelPoint().y\"\n      [attr.width]=\"model.size().width\"\n      [attr.height]=\"model.size().height\">\n      <div #edgeLabelWrapper class=\"edge-label-wrapper\" [style]=\"edgeLabelStyle()\">\n        {{ model.edgeLabel.text }}\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EdgeLabelComponent, isStandalone: true, selector: "g[edgeLabel]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeModel: { classPropertyName: "edgeModel", publicName: "edgeModel", isSignal: true, isRequired: true, transformFunction: null }, point: { classPropertyName: "point", publicName: "point", isSignal: true, isRequired: false, transformFunction: null }, htmlTemplate: { classPropertyName: "htmlTemplate", publicName: "htmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "edgeLabelWrapperRef", first: true, predicate: ["edgeLabelWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (model(); as model) {\n  @if (model.edgeLabel.type === 'html-template' && htmlTemplate()) {\n    @if (htmlTemplate(); as htmlTemplate) {\n      <svg:foreignObject\n        [attr.x]=\"edgeLabelPoint().x\"\n        [attr.y]=\"edgeLabelPoint().y\"\n        [attr.width]=\"model.size().width\"\n        [attr.height]=\"model.size().height\">\n        <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n          <ng-container *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\" />\n        </div>\n      </svg:foreignObject>\n    }\n  }\n\n  @if (model.edgeLabel.type === 'default') {\n    <svg:foreignObject\n      [attr.x]=\"edgeLabelPoint().x\"\n      [attr.y]=\"edgeLabelPoint().y\"\n      [attr.width]=\"model.size().width\"\n      [attr.height]=\"model.size().height\">\n      <div #edgeLabelWrapper class=\"edge-label-wrapper\" [style]=\"edgeLabelStyle()\">\n        {{ model.edgeLabel.text }}\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeLabelComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'g[edgeLabel]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (model(); as model) {\n  @if (model.edgeLabel.type === 'html-template' && htmlTemplate()) {\n    @if (htmlTemplate(); as htmlTemplate) {\n      <svg:foreignObject\n        [attr.x]=\"edgeLabelPoint().x\"\n        [attr.y]=\"edgeLabelPoint().y\"\n        [attr.width]=\"model.size().width\"\n        [attr.height]=\"model.size().height\">\n        <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n          <ng-container *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\" />\n        </div>\n      </svg:foreignObject>\n    }\n  }\n\n  @if (model.edgeLabel.type === 'default') {\n    <svg:foreignObject\n      [attr.x]=\"edgeLabelPoint().x\"\n      [attr.y]=\"edgeLabelPoint().y\"\n      [attr.width]=\"model.size().width\"\n      [attr.height]=\"model.size().height\">\n      <div #edgeLabelWrapper class=\"edge-label-wrapper\" [style]=\"edgeLabelStyle()\">\n        {{ model.edgeLabel.text }}\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"] }]
+            args: [{ selector: 'g[edgeLabel]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (model(); as model) {\n  @if (model.edgeLabel.type === 'html-template' && htmlTemplate()) {\n    @if (htmlTemplate(); as htmlTemplate) {\n      <svg:foreignObject\n        [attr.x]=\"edgeLabelPoint().x\"\n        [attr.y]=\"edgeLabelPoint().y\"\n        [attr.width]=\"model.size().width\"\n        [attr.height]=\"model.size().height\">\n        <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n          <ng-container *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\" />\n        </div>\n      </svg:foreignObject>\n    }\n  }\n\n  @if (model.edgeLabel.type === 'default') {\n    <svg:foreignObject\n      [attr.x]=\"edgeLabelPoint().x\"\n      [attr.y]=\"edgeLabelPoint().y\"\n      [attr.width]=\"model.size().width\"\n      [attr.height]=\"model.size().height\">\n      <div #edgeLabelWrapper class=\"edge-label-wrapper\" [style]=\"edgeLabelStyle()\">\n        {{ model.edgeLabel.text }}\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"] }]
         }] });
 
 /**
- * This function contains a hack-y behavior.
- * If the handles are of the same type (source-source or target-target),
- * it returns nodes where source === target and
- * handles where sourceHandle === targetHandle
+ * Adjust connection direction based on handle types.
+ *
  *
- * This leads to that notSelfValidator returns false for these cases,
- * exactly what we need for strict connection type
  */
 function adjustDirection(connection) {
+    const sourceType = connection.sourceHandle.rawHandle.type;
+    const targetType = connection.targetHandle.rawHandle.type;
+    // If both handles are of the same type, preserve the original
+    // source/target mapping
+    if (sourceType === targetType) {
+        return {
+            source: connection.source,
+            sourceHandle: connection.sourceHandle,
+            target: connection.target,
+            targetHandle: connection.targetHandle,
+        };
+    }
     const result = {};
-    if (connection.sourceHandle.rawHandle.type === 'source') {
+    if (sourceType === 'source') {
         result.source = connection.source;
         result.sourceHandle = connection.sourceHandle;
     }
@@ -2376,7 +2554,7 @@ function adjustDirection(connection) {
         result.source = connection.target;
         result.sourceHandle = connection.targetHandle;
     }
-    if (connection.targetHandle.rawHandle.type === 'target') {
+    if (targetType === 'target') {
         result.target = connection.target;
         result.targetHandle = connection.targetHandle;
     }
@@ -2387,10 +2565,112 @@ function adjustDirection(connection) {
     return result;
 }
 
+function connectStartEventFromConnectionStartStatus(status) {
+    return {
+        node: status.payload.source.rawNode,
+        handle: {
+            id: status.payload.sourceHandle.rawHandle.id,
+            type: status.payload.sourceHandle.rawHandle.type,
+            position: status.payload.sourceHandle.rawHandle.position,
+        },
+    };
+}
+function connectEndEventFromConnectionReleaseValidatedStatus(status) {
+    return {
+        valid: status.payload.valid,
+        from: {
+            node: status.payload.source.rawNode,
+            handle: {
+                id: status.payload.sourceHandle.rawHandle.id,
+                type: status.payload.sourceHandle.rawHandle.type,
+                position: status.payload.sourceHandle.rawHandle.position,
+            },
+        },
+        to: {
+            node: status.payload.target.rawNode,
+            handle: {
+                id: status.payload.targetHandle.rawHandle.id,
+                type: status.payload.targetHandle.rawHandle.type,
+                position: status.payload.targetHandle.rawHandle.position,
+            },
+        },
+    };
+}
+function connectEndEventFromConnectionDroppedStatus(status) {
+    return {
+        valid: null,
+        from: {
+            node: status.payload.source.rawNode,
+            handle: {
+                id: status.payload.sourceHandle.rawHandle.id,
+                type: status.payload.sourceHandle.rawHandle.type,
+                position: status.payload.sourceHandle.rawHandle.position,
+            },
+        },
+        to: {
+            node: null,
+            handle: null,
+        },
+    };
+}
+function reconnectStartEventFromReconnectionStartStatus(status) {
+    return {
+        edge: status.payload.oldEdge.edge,
+        node: status.payload.source.rawNode,
+        handle: {
+            id: status.payload.sourceHandle.rawHandle.id,
+            type: status.payload.sourceHandle.rawHandle.type,
+            position: status.payload.sourceHandle.rawHandle.position,
+        },
+    };
+}
+function reconnectEndEventFromReconnectionReleaseValidatedStatus(status) {
+    return {
+        valid: status.payload.valid,
+        edge: status.payload.oldEdge.edge,
+        from: {
+            node: status.payload.source.rawNode,
+            handle: {
+                id: status.payload.sourceHandle.rawHandle.id,
+                type: status.payload.sourceHandle.rawHandle.type,
+                position: status.payload.sourceHandle.rawHandle.position,
+            },
+        },
+        to: {
+            node: status.payload.target.rawNode,
+            handle: {
+                id: status.payload.targetHandle.rawHandle.id,
+                type: status.payload.targetHandle.rawHandle.type,
+                position: status.payload.targetHandle.rawHandle.position,
+            },
+        },
+    };
+}
+function reconnectEndEventFromReconnectionDroppedStatus(status) {
+    return {
+        valid: null,
+        edge: status.payload.oldEdge.edge,
+        from: {
+            node: status.payload.source.rawNode,
+            handle: {
+                id: status.payload.sourceHandle.rawHandle.id,
+                type: status.payload.sourceHandle.rawHandle.type,
+                position: status.payload.sourceHandle.rawHandle.position,
+            },
+        },
+        to: {
+            node: null,
+            handle: null,
+        },
+    };
+}
+
 class ConnectionControllerDirective {
     constructor() {
         this.statusService = inject(FlowStatusService);
         this.flowEntitiesService = inject(FlowEntitiesService);
+        // TODO emits duplicates when status degrades back to connection-start from connection-validation
+        this.connectStart = outputFromObservable(this.statusService.status$.pipe(filter((status) => status.state === 'connection-start'), map(connectStartEventFromConnectionStartStatus)));
         /**
          * This event fires when user tries to create new Edge.
          *
@@ -2398,25 +2678,24 @@ class ConnectionControllerDirective {
          *
          * Also it's important to note, that this event only fires when connection is valid by validator function in `ConnectionSettings`,
          * by default without passing the validator every connection concidered valid.
-         *
-         * @deprecated use `connect` output instead
-         */
-        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-        this.onConnect = outputFromObservable(toObservable(this.statusService.status).pipe(filter((status) => status.state === 'connection-end'), map((status) => statusToConnection(status, this.isStrictMode())), tap(() => this.statusService.setIdleStatus()), filter((connection) => this.flowEntitiesService.connection().validator(connection))));
-        this.connect = outputFromObservable(toObservable(this.statusService.status).pipe(filter((status) => status.state === 'connection-end'), map((status) => statusToConnection(status, this.isStrictMode())), tap(() => this.statusService.setIdleStatus()), filter((connection) => this.flowEntitiesService.connection().validator(connection))));
-        /**
-         * @deprecated use `reconnect` output instead
          */
-        this.onReconnect = outputFromObservable(toObservable(this.statusService.status).pipe(filter((status) => status.state === 'reconnection-end'), map((status) => {
+        this.connect = outputFromObservable(this.statusService.status$.pipe(filter((status) => status.state === 'connection-release'), map((status) => statusToConnection(status, this.isStrictMode())), tap((connection) => {
+            // We are 99% sure that status is FlowStatusConnectionRelease here
+            const status = this.statusService.status();
+            this.statusService.setConnectionReleaseValidatedStatus(status.payload.source, status.payload.target, status.payload.sourceHandle, status.payload.targetHandle, this.flowEntitiesService.connection().validator(connection));
+        }), filter((connection) => this.flowEntitiesService.connection().validator(connection))));
+        this.connectEnd = outputFromObservable(merge(this.statusService.status$.pipe(filter((status) => status.state === 'connection-release-validated'), map(connectEndEventFromConnectionReleaseValidatedStatus)), this.statusService.status$.pipe(filter((status) => status.state === 'connection-dropped'), map(connectEndEventFromConnectionDroppedStatus))).pipe(tap(() => this.statusService.setIdleStatus())));
+        this.reconnectStart = outputFromObservable(this.statusService.status$.pipe(filter((status) => status.state === 'reconnection-start'), map(reconnectStartEventFromReconnectionStartStatus)));
+        this.reconnect = outputFromObservable(toObservable(this.statusService.status).pipe(filter((status) => status.state === 'reconnection-release'), map((status) => {
             const connection = statusToConnection(status, this.isStrictMode());
             const oldEdge = status.payload.oldEdge.edge;
             return { connection, oldEdge };
-        }), tap(() => this.statusService.setIdleStatus()), filter(({ connection }) => this.flowEntitiesService.connection().validator(connection))));
-        this.reconnect = outputFromObservable(toObservable(this.statusService.status).pipe(filter((status) => status.state === 'reconnection-end'), map((status) => {
-            const connection = statusToConnection(status, this.isStrictMode());
-            const oldEdge = status.payload.oldEdge.edge;
-            return { connection, oldEdge };
-        }), tap(() => this.statusService.setIdleStatus()), filter(({ connection }) => this.flowEntitiesService.connection().validator(connection))));
+        }), tap(({ connection }) => {
+            // We are 99% sure that status is FlowStatusReconnectionRelease here
+            const status = this.statusService.status();
+            this.statusService.setReconnectionReleaseValidatedStatus(status.payload.source, status.payload.target, status.payload.sourceHandle, status.payload.targetHandle, status.payload.oldEdge, this.flowEntitiesService.connection().validator(connection));
+        }), filter(({ connection }) => this.flowEntitiesService.connection().validator(connection))));
+        this.reconnectEnd = outputFromObservable(merge(this.statusService.status$.pipe(filter((status) => status.state === 'reconnection-release-validated'), map(reconnectEndEventFromReconnectionReleaseValidatedStatus)), this.statusService.status$.pipe(filter((status) => status.state === 'reconnection-dropped'), map(reconnectEndEventFromReconnectionDroppedStatus))).pipe(tap(() => this.statusService.setIdleStatus())));
         this.isStrictMode = computed(() => this.flowEntitiesService.connection().mode === 'strict');
     }
     startConnection(handle) {
@@ -2451,6 +2730,8 @@ class ConnectionControllerDirective {
                 target: target.rawNode.id,
                 sourceHandle: sourceHandle.rawHandle.id,
                 targetHandle: targetHandle.rawHandle.id,
+                sourceHandleType: sourceHandle.rawHandle.type,
+                targetHandleType: targetHandle.rawHandle.type,
             });
             // TODO: check how react flow handles highlight of handle
             // if direction changes
@@ -2482,17 +2763,17 @@ class ConnectionControllerDirective {
             const target = status.payload.target;
             const targetHandle = status.payload.targetHandle;
             isReconnection
-                ? this.statusService.setReconnectionEndStatus(source, target, sourceHandle, targetHandle, status.payload.oldEdge)
-                : this.statusService.setConnectionEndStatus(source, target, sourceHandle, targetHandle);
+                ? this.statusService.setReconnectionReleaseStatus(source, target, sourceHandle, targetHandle, status.payload.oldEdge)
+                : this.statusService.setConnectionReleaseStatus(source, target, sourceHandle, targetHandle);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ConnectionControllerDirective, isStandalone: true, selector: "[onConnect], [onReconnect], [connect], [reconnect]", outputs: { onConnect: "onConnect", connect: "connect", onReconnect: "onReconnect", reconnect: "reconnect" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConnectionControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: ConnectionControllerDirective, isStandalone: true, selector: "[connectStart], [connect], [connectEnd], [reconnectStart], [reconnect], [reconnectEnd]", outputs: { connectStart: "connectStart", connect: "connect", connectEnd: "connectEnd", reconnectStart: "reconnectStart", reconnect: "reconnect", reconnectEnd: "reconnectEnd" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConnectionControllerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[onConnect], [onReconnect], [connect], [reconnect]',
+                    selector: '[connectStart], [connect], [connectEnd], [reconnectStart], [reconnect], [reconnectEnd]',
                     standalone: true,
                 }]
         }] });
@@ -2522,6 +2803,8 @@ function statusToConnection(status, isStrictMode) {
         target: targetId,
         sourceHandle: sourceHandleId,
         targetHandle: targetHandleId,
+        sourceHandleType: sourceHandle.rawHandle.type,
+        targetHandleType: targetHandle.rawHandle.type,
     };
 }
 
@@ -2554,10 +2837,10 @@ class EdgeRenderingService {
         // pull node
         edge.renderOrder.set(this.maxOrder() + 1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeRenderingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeRenderingService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeRenderingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeRenderingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeRenderingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeRenderingService, decorators: [{
             type: Injectable
         }] });
 
@@ -2617,10 +2900,10 @@ class PointerDirective {
             this.wasPointerOver = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PointerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PointerDirective, isStandalone: true, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: { pointerOver: "pointerOver", pointerOut: "pointerOut", pointerStart: "pointerStart", pointerEnd: "pointerEnd" }, host: { listeners: { "mousedown": "onPointerStart($event)", "touchstart": "onPointerStart($event)", "mouseup": "onPointerEnd($event)", "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PointerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: PointerDirective, isStandalone: true, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: { pointerOver: "pointerOver", pointerOut: "pointerOut", pointerStart: "pointerStart", pointerEnd: "pointerEnd" }, host: { listeners: { "mousedown": "onPointerStart($event)", "touchstart": "onPointerStart($event)", "mouseup": "onPointerEnd($event)", "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PointerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PointerDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -2676,15 +2959,15 @@ class EdgeComponent {
         event.stopPropagation();
         this.connectionController?.startReconnection(handle, this.model());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeComponent, isStandalone: true, selector: "g[edge]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeTemplate: { classPropertyName: "edgeTemplate", publicName: "edgeTemplate", isSignal: true, isRequired: false, transformFunction: null }, edgeLabelHtmlTemplate: { classPropertyName: "edgeLabelHtmlTemplate", publicName: "edgeLabelHtmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.visibility": "isReconnecting() ? \"hidden\" : \"visible\"" }, classAttribute: "selectable" }, ngImport: i0, template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"model().markerStartUrl()\"\n    [attr.marker-end]=\"model().markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (click)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  @if (model().path().labelPoints?.start; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\n}\n\n@if (model().edgeLabels.center; as label) {\n  @if (model().path().labelPoints?.center; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\n}\n\n@if (model().edgeLabels.end; as label) {\n  @if (model().path().labelPoints?.end; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\n}\n\n@if (model().sourceHandle() && model().targetHandle()) {\n  @if (model().reconnectable === true || model().reconnectable === 'source') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().sourceHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().sourceHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().targetHandle()!)\" />\n  }\n\n  @if (model().reconnectable === true || model().reconnectable === 'target') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().targetHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().targetHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().sourceHandle()!)\" />\n  }\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}.interactive-edge{fill:none;stroke-width:20;stroke:transparent}.reconnect-handle{fill:transparent;cursor:move}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EdgeLabelComponent, selector: "g[edgeLabel]", inputs: ["model", "edgeModel", "point", "htmlTemplate"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EdgeComponent, isStandalone: true, selector: "g[edge]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeTemplate: { classPropertyName: "edgeTemplate", publicName: "edgeTemplate", isSignal: true, isRequired: false, transformFunction: null }, edgeLabelHtmlTemplate: { classPropertyName: "edgeLabelHtmlTemplate", publicName: "edgeLabelHtmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.visibility": "isReconnecting() ? \"hidden\" : \"visible\"" }, classAttribute: "selectable" }, ngImport: i0, template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"model().markerStartUrl()\"\n    [attr.marker-end]=\"model().markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (click)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  }\n}\n\n@if (model().labelModels().start; as label) {\n  @if (model().path().labelPoints?.start; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\n}\n\n@if (model().labelModels().center; as label) {\n  @if (model().path().labelPoints?.center; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\n}\n\n@if (model().labelModels().end; as label) {\n  @if (model().path().labelPoints?.end; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\n}\n\n@if (model().sourceHandle() && model().targetHandle()) {\n  @if (model().reconnectable() === true || model().reconnectable() === 'source') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().sourceHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().sourceHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().targetHandle()!)\" />\n  }\n\n  @if (model().reconnectable() === true || model().reconnectable() === 'target') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().targetHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().targetHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().sourceHandle()!)\" />\n  }\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}.interactive-edge{fill:none;stroke-width:20;stroke:transparent}.reconnect-handle{fill:transparent;cursor:move}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EdgeLabelComponent, selector: "g[edgeLabel]", inputs: ["model", "edgeModel", "point", "htmlTemplate"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'g[edge]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'g[edge]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'selectable',
                         '[style.visibility]': 'isReconnecting() ? "hidden" : "visible"',
-                    }, imports: [NgTemplateOutlet, EdgeLabelComponent, PointerDirective], template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"model().markerStartUrl()\"\n    [attr.marker-end]=\"model().markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (click)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  @if (model().path().labelPoints?.start; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\n}\n\n@if (model().edgeLabels.center; as label) {\n  @if (model().path().labelPoints?.center; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\n}\n\n@if (model().edgeLabels.end; as label) {\n  @if (model().path().labelPoints?.end; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\n}\n\n@if (model().sourceHandle() && model().targetHandle()) {\n  @if (model().reconnectable === true || model().reconnectable === 'source') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().sourceHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().sourceHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().targetHandle()!)\" />\n  }\n\n  @if (model().reconnectable === true || model().reconnectable === 'target') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().targetHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().targetHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().sourceHandle()!)\" />\n  }\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}.interactive-edge{fill:none;stroke-width:20;stroke:transparent}.reconnect-handle{fill:transparent;cursor:move}\n"] }]
+                    }, imports: [NgTemplateOutlet, EdgeLabelComponent, PointerDirective], template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"model().markerStartUrl()\"\n    [attr.marker-end]=\"model().markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (click)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  }\n}\n\n@if (model().labelModels().start; as label) {\n  @if (model().path().labelPoints?.start; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\n}\n\n@if (model().labelModels().center; as label) {\n  @if (model().path().labelPoints?.center; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\n}\n\n@if (model().labelModels().end; as label) {\n  @if (model().path().labelPoints?.end; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\n}\n\n@if (model().sourceHandle() && model().targetHandle()) {\n  @if (model().reconnectable() === true || model().reconnectable() === 'source') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().sourceHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().sourceHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().targetHandle()!)\" />\n  }\n\n  @if (model().reconnectable() === true || model().reconnectable() === 'target') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().targetHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().targetHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().sourceHandle()!)\" />\n  }\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}.interactive-edge{fill:none;stroke-width:20;stroke:transparent}.reconnect-handle{fill:transparent;cursor:move}\n"] }]
         }] });
 
 class HandleService {
@@ -2703,13 +2986,13 @@ class HandleService {
             node.handles.update((handles) => handles.filter((handle) => handle !== handleToDestoy));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HandleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HandleService }); }
 }
 __decorate([
     Microtask // TODO fixes rendering of handle for group node
 ], HandleService.prototype, "createHandle", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HandleService, decorators: [{
             type: Injectable
         }], propDecorators: { createHandle: [] } });
 
@@ -2729,10 +3012,10 @@ class HandleSizeControllerDirective {
             height: rect.height + stroke,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: HandleSizeControllerDirective, isStandalone: true, selector: "[handleSizeController]", inputs: { handleModel: { classPropertyName: "handleModel", publicName: "handleSizeController", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HandleSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: HandleSizeControllerDirective, isStandalone: true, selector: "[handleSizeController]", inputs: { handleModel: { classPropertyName: "handleModel", publicName: "handleSizeController", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleSizeControllerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HandleSizeControllerDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -2756,10 +3039,10 @@ class DefaultNodeComponent {
     constructor() {
         this.selected = input(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: DefaultNodeComponent, isStandalone: true, selector: "default-node", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.selected": "selected()" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DefaultNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: DefaultNodeComponent, isStandalone: true, selector: "default-node", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.selected": "selected()" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DefaultNodeComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'default-node', host: {
                         '[class.selected]': 'selected()',
@@ -2946,15 +3229,15 @@ class ResizableComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResizableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: ResizableComponent, isStandalone: true, selector: "[resizable]", inputs: { resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resizerColor: { classPropertyName: "resizerColor", publicName: "resizerColor", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #resizer>\n  <svg:g>\n    <!-- top line -->\n    <svg:line\n      class=\"top\"\n      stroke-width=\"2\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"-gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"-gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top', $event)\" />\n    <!-- Left line -->\n    <svg:line\n      class=\"left\"\n      stroke-width=\"2\"\n      [attr.x1]=\"-gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"-gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('left', $event)\" />\n    <!-- Bottom line -->\n    <svg:line\n      class=\"bottom\"\n      stroke-width=\"2\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"model.size().height + gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"model.size().height + gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom', $event)\" />\n    <!-- Right line -->\n    <svg:line\n      class=\"right\"\n      stroke-width=\"2\"\n      [attr.x1]=\"model.size().width + gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"model.size().width + gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('right', $event)\" />\n\n    <!-- Top Left -->\n    <svg:rect\n      class=\"top-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-left', $event)\" />\n\n    <!-- Top right -->\n    <svg:rect\n      class=\"top-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-right', $event)\" />\n\n    <!-- Bottom left -->\n    <svg:rect\n      class=\"bottom-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-left', $event)\" />\n\n    <!-- Bottom right -->\n    <svg:rect\n      class=\"bottom-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-right', $event)\" />\n  </svg:g>\n</ng-template>\n\n<ng-content />\n", styles: [".top{cursor:n-resize}.left{cursor:w-resize}.right{cursor:e-resize}.bottom{cursor:s-resize}.top-left{cursor:nw-resize}.top-right{cursor:ne-resize}.bottom-left{cursor:sw-resize}.bottom-right{cursor:se-resize}\n"], dependencies: [{ kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ResizableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.17", type: ResizableComponent, isStandalone: true, selector: "[resizable]", inputs: { resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resizerColor: { classPropertyName: "resizerColor", publicName: "resizerColor", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #resizer>\n  <svg:g>\n    <!-- top line -->\n    <svg:line\n      class=\"top\"\n      stroke-width=\"2\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"-gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"-gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top', $event)\" />\n    <!-- Left line -->\n    <svg:line\n      class=\"left\"\n      stroke-width=\"2\"\n      [attr.x1]=\"-gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"-gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('left', $event)\" />\n    <!-- Bottom line -->\n    <svg:line\n      class=\"bottom\"\n      stroke-width=\"2\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"model.size().height + gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"model.size().height + gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom', $event)\" />\n    <!-- Right line -->\n    <svg:line\n      class=\"right\"\n      stroke-width=\"2\"\n      [attr.x1]=\"model.size().width + gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"model.size().width + gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('right', $event)\" />\n\n    <!-- Top Left -->\n    <svg:rect\n      class=\"top-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-left', $event)\" />\n\n    <!-- Top right -->\n    <svg:rect\n      class=\"top-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-right', $event)\" />\n\n    <!-- Bottom left -->\n    <svg:rect\n      class=\"bottom-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-left', $event)\" />\n\n    <!-- Bottom right -->\n    <svg:rect\n      class=\"bottom-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-right', $event)\" />\n  </svg:g>\n</ng-template>\n\n<ng-content />\n", styles: [".top{cursor:n-resize}.left{cursor:w-resize}.right{cursor:e-resize}.bottom{cursor:s-resize}.top-left{cursor:nw-resize}.top-right{cursor:ne-resize}.bottom-left{cursor:sw-resize}.bottom-right{cursor:se-resize}\n"], dependencies: [{ kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     Microtask
 ], ResizableComponent.prototype, "ngAfterViewInit", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResizableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ResizableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: '[resizable]', imports: [PointerDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #resizer>\n  <svg:g>\n    <!-- top line -->\n    <svg:line\n      class=\"top\"\n      stroke-width=\"2\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"-gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"-gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top', $event)\" />\n    <!-- Left line -->\n    <svg:line\n      class=\"left\"\n      stroke-width=\"2\"\n      [attr.x1]=\"-gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"-gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('left', $event)\" />\n    <!-- Bottom line -->\n    <svg:line\n      class=\"bottom\"\n      stroke-width=\"2\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"model.size().height + gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"model.size().height + gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom', $event)\" />\n    <!-- Right line -->\n    <svg:line\n      class=\"right\"\n      stroke-width=\"2\"\n      [attr.x1]=\"model.size().width + gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"model.size().width + gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('right', $event)\" />\n\n    <!-- Top Left -->\n    <svg:rect\n      class=\"top-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-left', $event)\" />\n\n    <!-- Top right -->\n    <svg:rect\n      class=\"top-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-right', $event)\" />\n\n    <!-- Bottom left -->\n    <svg:rect\n      class=\"bottom-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-left', $event)\" />\n\n    <!-- Bottom right -->\n    <svg:rect\n      class=\"bottom-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-right', $event)\" />\n  </svg:g>\n</ng-template>\n\n<ng-content />\n", styles: [".top{cursor:n-resize}.left{cursor:w-resize}.right{cursor:e-resize}.bottom{cursor:s-resize}.top-left{cursor:nw-resize}.top-right{cursor:ne-resize}.bottom-left{cursor:sw-resize}.bottom-right{cursor:se-resize}\n"] }]
+            args: [{ selector: '[resizable]', imports: [PointerDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #resizer>\n  <svg:g>\n    <!-- top line -->\n    <svg:line\n      class=\"top\"\n      stroke-width=\"2\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"-gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"-gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top', $event)\" />\n    <!-- Left line -->\n    <svg:line\n      class=\"left\"\n      stroke-width=\"2\"\n      [attr.x1]=\"-gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"-gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('left', $event)\" />\n    <!-- Bottom line -->\n    <svg:line\n      class=\"bottom\"\n      stroke-width=\"2\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"model.size().height + gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"model.size().height + gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom', $event)\" />\n    <!-- Right line -->\n    <svg:line\n      class=\"right\"\n      stroke-width=\"2\"\n      [attr.x1]=\"model.size().width + gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"model.size().width + gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('right', $event)\" />\n\n    <!-- Top Left -->\n    <svg:rect\n      class=\"top-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-left', $event)\" />\n\n    <!-- Top right -->\n    <svg:rect\n      class=\"top-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-right', $event)\" />\n\n    <!-- Bottom left -->\n    <svg:rect\n      class=\"bottom-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-left', $event)\" />\n\n    <!-- Bottom right -->\n    <svg:rect\n      class=\"bottom-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-right', $event)\" />\n  </svg:g>\n</ng-template>\n\n<ng-content />\n", styles: [".top{cursor:n-resize}.left{cursor:w-resize}.right{cursor:e-resize}.bottom{cursor:s-resize}.top-left{cursor:nw-resize}.top-right{cursor:ne-resize}.bottom-left{cursor:sw-resize}.bottom-right{cursor:se-resize}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ngAfterViewInit: [] } });
 function calcOffset(movementX, movementY, zoom) {
     return {
@@ -3159,10 +3442,10 @@ class HandleComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: HandleComponent, isStandalone: true, selector: "handle", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: true, isRequired: false, transformFunction: null }, offsetY: { classPropertyName: "offsetY", publicName: "offsetY", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: HandleComponent, isStandalone: true, selector: "handle", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: true, isRequired: false, transformFunction: null }, offsetY: { classPropertyName: "offsetY", publicName: "offsetY", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HandleComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'handle', changeDetection: ChangeDetectionStrategy.OnPush, template: "" }]
         }] });
@@ -3183,10 +3466,10 @@ class NodeHandlesControllerDirective {
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeHandlesControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NodeHandlesControllerDirective, isStandalone: true, selector: "[nodeHandlesController]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeHandlesControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: NodeHandlesControllerDirective, isStandalone: true, selector: "[nodeHandlesController]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeHandlesControllerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeHandlesControllerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[nodeHandlesController]',
@@ -3214,10 +3497,10 @@ class NodeResizeControllerDirective {
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeResizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NodeResizeControllerDirective, isStandalone: true, selector: "[nodeResizeController]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeResizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: NodeResizeControllerDirective, isStandalone: true, selector: "[nodeResizeController]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeResizeControllerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeResizeControllerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[nodeResizeController]',
@@ -3290,12 +3573,12 @@ class NodeComponent {
             this.selectionService.select(this.model());
         }
     }
-    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  @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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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"], exportAs: ["ngComponentOutlet"] }, { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService, NodeAccessorService], host: {
+            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService, NodeAccessorService], host: {
                         class: 'vflow-node',
                     }, imports: [
                         PointerDirective,
@@ -3398,8 +3681,8 @@ class ConnectionComponent {
             allNodes: this.flowEntitiesService.rawNodes(),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ConnectionComponent, isStandalone: true, selector: "g[connection]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConnectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ConnectionComponent, isStandalone: true, selector: "g[connection]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (model().type === 'default') {
       @if (path(); as path) {
         <svg:path
@@ -3418,10 +3701,9 @@ class ConnectionComponent {
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConnectionComponent, decorators: [{
             type: Component,
             args: [{
-                    standalone: true,
                     selector: 'g[connection]',
                     template: `
     @if (model().type === 'default') {
@@ -3560,10 +3842,10 @@ class BackgroundComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: BackgroundComponent, isStandalone: true, selector: "g[background]", ngImport: i0, template: "@if (backgroundSignal().type === 'dots') {\n  <svg:pattern\n    patternUnits=\"userSpaceOnUse\"\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\">\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\" />\n  </svg:pattern>\n\n  <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n}\n\n@if (backgroundSignal().type === 'image') {\n  @if (repeated()) {\n    <svg:pattern\n      patternUnits=\"userSpaceOnUse\"\n      [attr.id]=\"patternId\"\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\">\n      <svg:image [attr.href]=\"bgImageSrc()\" [attr.width]=\"scaledImageWidth()\" [attr.height]=\"scaledImageHeight()\" />\n    </svg:pattern>\n\n    <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n  }\n\n  @if (!repeated()) {\n    <svg:image\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\"\n      [attr.href]=\"bgImageSrc()\" />\n  }\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: BackgroundComponent, isStandalone: true, selector: "g[background]", ngImport: i0, template: "@if (backgroundSignal().type === 'dots') {\n  <svg:pattern\n    patternUnits=\"userSpaceOnUse\"\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\">\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\" />\n  </svg:pattern>\n\n  <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n}\n\n@if (backgroundSignal().type === 'image') {\n  @if (repeated()) {\n    <svg:pattern\n      patternUnits=\"userSpaceOnUse\"\n      [attr.id]=\"patternId\"\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\">\n      <svg:image [attr.href]=\"bgImageSrc()\" [attr.width]=\"scaledImageWidth()\" [attr.height]=\"scaledImageHeight()\" />\n    </svg:pattern>\n\n    <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n  }\n\n  @if (!repeated()) {\n    <svg:image\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\"\n      [attr.href]=\"bgImageSrc()\" />\n  }\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BackgroundComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BackgroundComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'g[background]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (backgroundSignal().type === 'dots') {\n  <svg:pattern\n    patternUnits=\"userSpaceOnUse\"\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\">\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\" />\n  </svg:pattern>\n\n  <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n}\n\n@if (backgroundSignal().type === 'image') {\n  @if (repeated()) {\n    <svg:pattern\n      patternUnits=\"userSpaceOnUse\"\n      [attr.id]=\"patternId\"\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\">\n      <svg:image [attr.href]=\"bgImageSrc()\" [attr.width]=\"scaledImageWidth()\" [attr.height]=\"scaledImageHeight()\" />\n    </svg:pattern>\n\n    <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n  }\n\n  @if (!repeated()) {\n    <svg:image\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\"\n      [attr.href]=\"bgImageSrc()\" />\n  }\n}\n" }]
         }], ctorParameters: () => [] });
@@ -3580,12 +3862,12 @@ class DefsComponent {
         this.markers = input.required();
         this.defaultColor = 'rgb(177, 177, 183)';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DefsComponent, isStandalone: true, selector: "defs[flowDefs]", inputs: { markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (marker of markers() | keyvalue; track marker) {\n  <svg:marker\n    viewBox=\"-10 -10 20 20\"\n    refX=\"0\"\n    refY=\"0\"\n    [attr.id]=\"marker.key\"\n    [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n    [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n    [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n    [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\">\n    @if (marker.value.type === 'arrow-closed' || !marker.value.type) {\n      <polyline\n        class=\"marker__arrow_closed\"\n        points=\"-5,-4 1,0 -5,4 -5,-4\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n        [style.fill]=\"marker.value.color ?? defaultColor\" />\n    }\n\n    @if (marker.value.type === 'arrow') {\n      <polyline\n        class=\"marker__arrow_default\"\n        points=\"-5,-4 0,0 -5,4\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\" />\n    }\n  </svg:marker>\n}\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DefsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DefsComponent, isStandalone: true, selector: "defs[flowDefs]", inputs: { markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (marker of markers() | keyvalue; track marker) {\n  <svg:marker\n    viewBox=\"-10 -10 20 20\"\n    refX=\"0\"\n    refY=\"0\"\n    [attr.id]=\"marker.key\"\n    [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n    [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n    [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n    [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\">\n    @if (marker.value.type === 'arrow-closed' || !marker.value.type) {\n      <polyline\n        class=\"marker__arrow_closed\"\n        points=\"-5,-4 1,0 -5,4 -5,-4\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n        [style.fill]=\"marker.value.color ?? defaultColor\" />\n    }\n\n    @if (marker.value.type === 'arrow') {\n      <polyline\n        class=\"marker__arrow_default\"\n        points=\"-5,-4 0,0 -5,4\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\" />\n    }\n  </svg:marker>\n}\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DefsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'defs[flowDefs]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KeyValuePipe], template: "@for (marker of markers() | keyvalue; track marker) {\n  <svg:marker\n    viewBox=\"-10 -10 20 20\"\n    refX=\"0\"\n    refY=\"0\"\n    [attr.id]=\"marker.key\"\n    [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n    [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n    [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n    [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\">\n    @if (marker.value.type === 'arrow-closed' || !marker.value.type) {\n      <polyline\n        class=\"marker__arrow_closed\"\n        points=\"-5,-4 1,0 -5,4 -5,-4\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n        [style.fill]=\"marker.value.color ?? defaultColor\" />\n    }\n\n    @if (marker.value.type === 'arrow') {\n      <polyline\n        class=\"marker__arrow_default\"\n        points=\"-5,-4 0,0 -5,4\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\" />\n    }\n  </svg:marker>\n}\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"] }]
+            args: [{ selector: 'defs[flowDefs]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KeyValuePipe], template: "@for (marker of markers() | keyvalue; track marker) {\n  <svg:marker\n    viewBox=\"-10 -10 20 20\"\n    refX=\"0\"\n    refY=\"0\"\n    [attr.id]=\"marker.key\"\n    [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n    [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n    [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n    [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\">\n    @if (marker.value.type === 'arrow-closed' || !marker.value.type) {\n      <polyline\n        class=\"marker__arrow_closed\"\n        points=\"-5,-4 1,0 -5,4 -5,-4\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n        [style.fill]=\"marker.value.color ?? defaultColor\" />\n    }\n\n    @if (marker.value.type === 'arrow') {\n      <polyline\n        class=\"marker__arrow_default\"\n        points=\"-5,-4 0,0 -5,4\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\" />\n    }\n  </svg:marker>\n}\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"] }]
         }] });
 
 class FlowSizeControllerDirective {
@@ -3607,10 +3889,10 @@ class FlowSizeControllerDirective {
         }), takeUntilDestroyed())
             .subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FlowSizeControllerDirective, isStandalone: true, selector: "svg[flowSizeController]", host: { properties: { "attr.width": "flowWidth()", "attr.height": "flowHeight()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FlowSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: FlowSizeControllerDirective, isStandalone: true, selector: "svg[flowSizeController]", host: { properties: { "attr.width": "flowWidth()", "attr.height": "flowHeight()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowSizeControllerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FlowSizeControllerDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -3630,14 +3912,17 @@ class RootSvgContextDirective {
     // TODO: check for multiple instances on page
     resetConnection() {
         const status = this.flowStatusService.status();
-        if (status.state === 'connection-start' || status.state === 'reconnection-start') {
-            this.flowStatusService.setIdleStatus();
+        if (status.state === 'connection-start') {
+            this.flowStatusService.setConnectionDroppedStatus(status.payload.source, status.payload.sourceHandle);
+        }
+        if (status.state === 'reconnection-start') {
+            this.flowStatusService.setReconnectionDroppedStatus(status.payload.source, status.payload.sourceHandle, status.payload.oldEdge);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RootSvgContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: RootSvgContextDirective, isStandalone: true, selector: "svg[rootSvgContext]", host: { listeners: { "document:mouseup": "resetConnection()", "document:touchend": "resetConnection()", "contextmenu": "resetConnection()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RootSvgContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: RootSvgContextDirective, isStandalone: true, selector: "svg[rootSvgContext]", host: { listeners: { "document:mouseup": "resetConnection()", "document:touchend": "resetConnection()", "contextmenu": "resetConnection()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RootSvgContextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RootSvgContextDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -3680,10 +3965,10 @@ function getSpacePoints(point, groups) {
 }
 
 class PreviewFlowRenderStrategyService {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PreviewFlowRenderStrategyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PreviewFlowRenderStrategyService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PreviewFlowRenderStrategyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PreviewFlowRenderStrategyService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PreviewFlowRenderStrategyService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PreviewFlowRenderStrategyService, decorators: [{
             type: Injectable
         }] });
 class ViewportPreviewFlowRenderStrategyService extends PreviewFlowRenderStrategyService {
@@ -3691,10 +3976,10 @@ class ViewportPreviewFlowRenderStrategyService extends PreviewFlowRenderStrategy
         // Do not render preview node if the real node is visible
         return !node.isVisible();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewportPreviewFlowRenderStrategyService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewportPreviewFlowRenderStrategyService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ViewportPreviewFlowRenderStrategyService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ViewportPreviewFlowRenderStrategyService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewportPreviewFlowRenderStrategyService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ViewportPreviewFlowRenderStrategyService, decorators: [{
             type: Injectable
         }] });
 
@@ -3841,10 +4126,10 @@ class PreviewFlowComponent {
             this.ctx.restore();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PreviewFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: PreviewFlowComponent, isStandalone: true, selector: "canvas[previewFlow]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PreviewFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: PreviewFlowComponent, isStandalone: true, selector: "canvas[previewFlow]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PreviewFlowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PreviewFlowComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -3866,10 +4151,10 @@ class FlowRenderingService {
             this.flowInitialized.set(true);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowRenderingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowRenderingService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FlowRenderingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FlowRenderingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowRenderingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FlowRenderingService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 // TODO may break on edge cases
@@ -3984,46 +4269,111 @@ class AlignmentHelperComponent {
         }), 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AlignmentHelperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", 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 EDGE = 48; // px from edge to trigger pan
+const BASE_SPEED = 10;
+const START_STATES = ['node-drag-start', 'connection-start', 'reconnection-start'];
+class AutoPanDirective {
+    constructor() {
+        this.statusService = inject(FlowStatusService);
+        this.viewportService = inject(ViewportService);
+        this.flowSettingsService = inject(FlowSettingsService);
+        this.rootSvg = inject(RootSvgReferenceDirective).element;
+        this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
+        this.documentPoint$ = merge(fromEvent(document, 'pointerdown', { capture: true }), fromEvent(document, 'pointermove', { capture: true })).pipe(map((event) => ({ x: event.clientX, y: event.clientY })), map((point) => this.toViewportPoint(point)), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    ngOnInit() {
+        if (this.flowSettingsService.autoPan()) {
+            toObservable(this.statusService.status, { injector: this.injector })
+                .pipe(switchMap((status) => START_STATES.includes(status.state)
+                ? this.documentPoint$.pipe(take(1), switchMap(() => animationFrames().pipe(withLatestFrom(this.documentPoint$), map(([, point]) => point), tap((point) => this.pan(point)))))
+                : EMPTY), takeUntilDestroyed(this.destroyRef))
+                .subscribe();
+        }
+    }
+    toViewportPoint(event) {
+        const rect = this.rootSvg.getBoundingClientRect();
+        return {
+            x: event.x - rect.left,
+            y: event.y - rect.top,
+        };
+    }
+    pan(point) {
+        const viewport = this.viewportService.readableViewport();
+        const { x, y, zoom } = viewport;
+        const width = this.flowSettingsService.computedFlowWidth();
+        const height = this.flowSettingsService.computedFlowHeight();
+        const dL = point.x;
+        const dR = width - point.x;
+        const dT = point.y;
+        const dB = height - point.y;
+        let deltaX = 0;
+        let deltaY = 0;
+        // Left edge: pan right (increase x)
+        if (dL < EDGE) {
+            const speedL = BASE_SPEED * edgeFactor(dL);
+            deltaX += speedL;
+        }
+        // Right edge: pan left (decrease x)
+        if (dR < EDGE) {
+            const speedR = BASE_SPEED * edgeFactor(dR);
+            deltaX -= speedR;
+        }
+        // Top edge: pan down (increase y)
+        if (dT < EDGE) {
+            const speedT = BASE_SPEED * edgeFactor(dT);
+            deltaY += speedT;
+        }
+        // Bottom edge: pan up (decrease y)
+        if (dB < EDGE) {
+            const speedB = BASE_SPEED * edgeFactor(dB);
+            deltaY -= speedB;
+        }
+        if (deltaX !== 0 || deltaY !== 0) {
+            this.viewportService.writableViewport.set({
+                changeType: 'absolute',
+                state: { x: x + deltaX, y: y + deltaY, zoom },
+                duration: 0,
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AutoPanDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: AutoPanDirective, isStandalone: true, selector: "[autoPan]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AutoPanDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[autoPan]', standalone: true }]
+        }] });
+function clamp01(n) {
+    return Math.max(0, Math.min(1, n));
+}
+function edgeFactor(distance) {
+    const t = clamp01((EDGE - distance) / EDGE);
+    return t * t; // ease-in: t^2
+}
+
 const changesControllerHostDirective = {
     directive: ChangesControllerDirective,
     outputs: [
-        'onNodesChange',
-        'onNodesChange.position',
-        'onNodesChange.position.single',
-        'onNodesChange.position.many',
-        'onNodesChange.size',
-        'onNodesChange.size.single',
-        'onNodesChange.size.many',
-        'onNodesChange.add',
-        'onNodesChange.add.single',
-        'onNodesChange.add.many',
-        'onNodesChange.remove',
-        'onNodesChange.remove.single',
-        'onNodesChange.remove.many',
-        'onNodesChange.select',
-        'onNodesChange.select.single',
-        'onNodesChange.select.many',
-        'onEdgesChange',
-        'onEdgesChange.detached',
-        'onEdgesChange.detached.single',
-        'onEdgesChange.detached.many',
-        'onEdgesChange.add',
-        'onEdgesChange.add.single',
-        'onEdgesChange.add.many',
-        'onEdgesChange.remove',
-        'onEdgesChange.remove.single',
-        'onEdgesChange.remove.many',
-        'onEdgesChange.select',
-        'onEdgesChange.select.single',
-        'onEdgesChange.select.many',
+        'nodesChanges',
+        'nodesChanges.position',
+        'nodesChanges.size',
+        'nodesChanges.add',
+        'nodesChanges.remove',
+        'nodesChanges.select',
+        'edgesChanges',
+        'edgesChanges.detached',
+        'edgesChanges.add',
+        'edgesChanges.remove',
+        'edgesChanges.select',
     ],
 };
 class VflowComponent {
@@ -4049,10 +4399,8 @@ class VflowComponent {
         // #region OUTPUTS
         /**
          * Event that accumulates all custom node events
-         *
-         * @experimental
          */
-        this.onComponentNodeEvent = outputFromObservable(this.componentEventBusService.event$); // TODO: research how to remove any
+        this.componentNodeEvent = outputFromObservable(this.componentEventBusService.event$); // TODO: research how to remove any
         // #endregion
         // #region TEMPLATES
         this.nodeTemplateDirective = contentChild(NodeHtmlTemplateDirective);
@@ -4148,6 +4496,14 @@ class VflowComponent {
     set entitiesSelectable(value) {
         this.flowSettingsService.entitiesSelectable.set(value);
     }
+    /**
+     * Selection mode strategy
+     * - 'default': library manages selection automatically
+     * - 'manual': library does not manage selection, user controls it via node.selected signal
+     */
+    set selectionMode(value) {
+        this.flowSettingsService.selectionMode.set(value);
+    }
     set keyboardShortcuts(value) {
         this.keyboardService.setShortcuts(value);
     }
@@ -4180,6 +4536,12 @@ class VflowComponent {
     set elevateEdgesOnSelect(value) {
         this.flowSettingsService.elevateEdgesOnSelect.set(value);
     }
+    /**
+     * Enable auto-pan
+     */
+    set autoPan(value) {
+        this.flowSettingsService.autoPan.set(value);
+    }
     // #endregion
     // #region MAIN_INPUTS
     /**
@@ -4301,8 +4663,8 @@ class VflowComponent {
     trackEdges(idx, { edge }) {
         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: { 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: VflowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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 }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", 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 }, autoPan: { classPropertyName: "autoPan", publicName: "autoPan", 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: { componentNodeEvent: "componentNodeEvent" }, providers: [
             DraggableService,
             ViewportService,
             FlowStatusService,
@@ -4318,11 +4680,11 @@ 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    @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 }); }
+        ], 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: ["nodesChanges", "nodesChanges", "nodesChanges.position", "nodesChanges.position", "nodesChanges.size", "nodesChanges.size", "nodesChanges.add", "nodesChanges.add", "nodesChanges.remove", "nodesChanges.remove", "nodesChanges.select", "nodesChanges.select", "edgesChanges", "edgesChanges", "edgesChanges.detached", "edgesChanges.detached", "edgesChanges.add", "edgesChanges.add", "edgesChanges.remove", "edgesChanges.remove", "edgesChanges.select", "edgesChanges.select"] }], 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 autoPan>\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"] }, { kind: "directive", type: AutoPanDirective, selector: "[autoPan]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'vflow', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'vflow', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         DraggableService,
                         ViewportService,
                         FlowStatusService,
@@ -4353,7 +4715,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NgTemplateOutlet,
                         PreviewFlowComponent,
                         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"] }]
+                        AutoPanDirective,
+                    ], 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 autoPan>\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: [{
@@ -4366,6 +4729,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], entitiesSelectable: [{
                 type: Input
+            }], selectionMode: [{
+                type: Input
             }], keyboardShortcuts: [{
                 type: Input
             }], connection: [{
@@ -4379,6 +4744,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], elevateEdgesOnSelect: [{
                 type: Input
+            }], autoPan: [{
+                type: Input
             }], nodes: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4397,10 +4764,10 @@ class DragHandleDirective {
             this.model.dragHandlesCount.update((count) => count - 1);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: DragHandleDirective, isStandalone: true, selector: "[dragHandle]", host: { classAttribute: "vflow-drag-handle" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: DragHandleDirective, isStandalone: true, selector: "[dragHandle]", host: { classAttribute: "vflow-drag-handle" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DragHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DragHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -4440,10 +4807,10 @@ class SelectableDirective {
     getEvent$() {
         return fromEvent(this.host.nativeElement, 'click');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SelectableDirective, isStandalone: true, selector: "[selectable]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: SelectableDirective, isStandalone: true, selector: "[selectable]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectableDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -4548,12 +4915,12 @@ class MiniMapComponent {
     trackNodes(idx, { rawNode }) {
         return rawNode;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MiniMapComponent, isStandalone: true, selector: "mini-map", inputs: { maskColor: { classPropertyName: "maskColor", publicName: "maskColor", isSignal: true, isRequired: false, transformFunction: null }, strokeColor: { classPropertyName: "strokeColor", publicName: "strokeColor", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, scaleOnHover: { classPropertyName: "scaleOnHover", publicName: "scaleOnHover", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "minimap", first: true, predicate: ["minimap"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #minimap>\n  <svg:rect\n    fill=\"none\"\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    [attr.stroke]=\"strokeColor()\" />\n\n  <svg:svg\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    (mouseover)=\"hovered.set(true)\"\n    (mouseleave)=\"hovered.set(false)\">\n    <svg:rect [attr.width]=\"minimapWidth()\" [attr.height]=\"minimapHeight()\" [attr.fill]=\"maskColor()\" />\n\n    <svg:g [attr.transform]=\"minimapTransform()\">\n      <svg:rect\n        [attr.fill]=\"viewportColor()\"\n        [attr.transform]=\"viewportTransform()\"\n        [attr.width]=\"minimapWidth()\"\n        [attr.height]=\"minimapHeight()\" />\n\n      @for (model of entitiesService.nodes(); track trackNodes($index, model)) {\n        <ng-container>\n          @if (model.rawNode.type === 'default' || model.rawNode.type === 'html-template' || model.isComponentType) {\n            <svg:foreignObject\n              [attr.transform]=\"model.pointTransform()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\">\n              <default-node\n                [selected]=\"model.selected()\"\n                [style.width.px]=\"model.size().width\"\n                [style.height.px]=\"model.size().height\"\n                [style.max-width.px]=\"model.size().width\"\n                [style.max-height.px]=\"model.size().height\">\n                <div [outerHTML]=\"model.text()\"></div>\n              </default-node>\n            </svg:foreignObject>\n          }\n          @if (model.rawNode.type === 'default-group' || model.rawNode.type === 'template-group') {\n            <svg:rect\n              class=\"default-group-node\"\n              rx=\"5\"\n              ry=\"5\"\n              [attr.transform]=\"model.pointTransform()\"\n              [class.default-group-node_selected]=\"model.selected()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\"\n              [style.stroke]=\"model.color()\"\n              [style.fill]=\"model.color()\" />\n          }\n        </ng-container>\n      }\n    </svg:g>\n  </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"], dependencies: [{ kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MiniMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: MiniMapComponent, isStandalone: true, selector: "mini-map", inputs: { maskColor: { classPropertyName: "maskColor", publicName: "maskColor", isSignal: true, isRequired: false, transformFunction: null }, strokeColor: { classPropertyName: "strokeColor", publicName: "strokeColor", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, scaleOnHover: { classPropertyName: "scaleOnHover", publicName: "scaleOnHover", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "minimap", first: true, predicate: ["minimap"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #minimap>\n  <svg:rect\n    fill=\"none\"\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    [attr.stroke]=\"strokeColor()\" />\n\n  <svg:svg\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    (mouseover)=\"hovered.set(true)\"\n    (mouseleave)=\"hovered.set(false)\">\n    <svg:rect [attr.width]=\"minimapWidth()\" [attr.height]=\"minimapHeight()\" [attr.fill]=\"maskColor()\" />\n\n    <svg:g [attr.transform]=\"minimapTransform()\">\n      <svg:rect\n        [attr.fill]=\"viewportColor()\"\n        [attr.transform]=\"viewportTransform()\"\n        [attr.width]=\"minimapWidth()\"\n        [attr.height]=\"minimapHeight()\" />\n\n      @for (model of entitiesService.nodes(); track trackNodes($index, model)) {\n        <ng-container>\n          @if (model.rawNode.type === 'default' || model.rawNode.type === 'html-template' || model.isComponentType) {\n            <svg:foreignObject\n              [attr.transform]=\"model.pointTransform()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\">\n              <default-node\n                [selected]=\"model.selected()\"\n                [style.width.px]=\"model.size().width\"\n                [style.height.px]=\"model.size().height\"\n                [style.max-width.px]=\"model.size().width\"\n                [style.max-height.px]=\"model.size().height\">\n                <div [outerHTML]=\"model.text()\"></div>\n              </default-node>\n            </svg:foreignObject>\n          }\n          @if (model.rawNode.type === 'default-group' || model.rawNode.type === 'template-group') {\n            <svg:rect\n              class=\"default-group-node\"\n              rx=\"5\"\n              ry=\"5\"\n              [attr.transform]=\"model.pointTransform()\"\n              [class.default-group-node_selected]=\"model.selected()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\"\n              [style.stroke]=\"model.color()\"\n              [style.fill]=\"model.color()\" />\n          }\n        </ng-container>\n      }\n    </svg:g>\n  </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"], dependencies: [{ kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniMapComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MiniMapComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mini-map', imports: [DefaultNodeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #minimap>\n  <svg:rect\n    fill=\"none\"\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    [attr.stroke]=\"strokeColor()\" />\n\n  <svg:svg\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    (mouseover)=\"hovered.set(true)\"\n    (mouseleave)=\"hovered.set(false)\">\n    <svg:rect [attr.width]=\"minimapWidth()\" [attr.height]=\"minimapHeight()\" [attr.fill]=\"maskColor()\" />\n\n    <svg:g [attr.transform]=\"minimapTransform()\">\n      <svg:rect\n        [attr.fill]=\"viewportColor()\"\n        [attr.transform]=\"viewportTransform()\"\n        [attr.width]=\"minimapWidth()\"\n        [attr.height]=\"minimapHeight()\" />\n\n      @for (model of entitiesService.nodes(); track trackNodes($index, model)) {\n        <ng-container>\n          @if (model.rawNode.type === 'default' || model.rawNode.type === 'html-template' || model.isComponentType) {\n            <svg:foreignObject\n              [attr.transform]=\"model.pointTransform()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\">\n              <default-node\n                [selected]=\"model.selected()\"\n                [style.width.px]=\"model.size().width\"\n                [style.height.px]=\"model.size().height\"\n                [style.max-width.px]=\"model.size().width\"\n                [style.max-height.px]=\"model.size().height\">\n                <div [outerHTML]=\"model.text()\"></div>\n              </default-node>\n            </svg:foreignObject>\n          }\n          @if (model.rawNode.type === 'default-group' || model.rawNode.type === 'template-group') {\n            <svg:rect\n              class=\"default-group-node\"\n              rx=\"5\"\n              ry=\"5\"\n              [attr.transform]=\"model.pointTransform()\"\n              [class.default-group-node_selected]=\"model.selected()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\"\n              [style.stroke]=\"model.color()\"\n              [style.fill]=\"model.color()\" />\n          }\n        </ng-container>\n      }\n    </svg:g>\n  </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"] }]
+            args: [{ selector: 'mini-map', imports: [DefaultNodeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #minimap>\n  <svg:rect\n    fill=\"none\"\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    [attr.stroke]=\"strokeColor()\" />\n\n  <svg:svg\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    (mouseover)=\"hovered.set(true)\"\n    (mouseleave)=\"hovered.set(false)\">\n    <svg:rect [attr.width]=\"minimapWidth()\" [attr.height]=\"minimapHeight()\" [attr.fill]=\"maskColor()\" />\n\n    <svg:g [attr.transform]=\"minimapTransform()\">\n      <svg:rect\n        [attr.fill]=\"viewportColor()\"\n        [attr.transform]=\"viewportTransform()\"\n        [attr.width]=\"minimapWidth()\"\n        [attr.height]=\"minimapHeight()\" />\n\n      @for (model of entitiesService.nodes(); track trackNodes($index, model)) {\n        <ng-container>\n          @if (model.rawNode.type === 'default' || model.rawNode.type === 'html-template' || model.isComponentType) {\n            <svg:foreignObject\n              [attr.transform]=\"model.pointTransform()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\">\n              <default-node\n                [selected]=\"model.selected()\"\n                [style.width.px]=\"model.size().width\"\n                [style.height.px]=\"model.size().height\"\n                [style.max-width.px]=\"model.size().width\"\n                [style.max-height.px]=\"model.size().height\">\n                <div [outerHTML]=\"model.text()\"></div>\n              </default-node>\n            </svg:foreignObject>\n          }\n          @if (model.rawNode.type === 'default-group' || model.rawNode.type === 'template-group') {\n            <svg:rect\n              class=\"default-group-node\"\n              rx=\"5\"\n              ry=\"5\"\n              [attr.transform]=\"model.pointTransform()\"\n              [class.default-group-node_selected]=\"model.selected()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\"\n              [style.stroke]=\"model.color()\"\n              [style.fill]=\"model.color()\" />\n          }\n        </ng-container>\n      }\n    </svg:g>\n  </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"] }]
         }] });
 
 class ToolbarModel {
@@ -4607,8 +4974,8 @@ class NodeToolbarComponent {
     ngOnDestroy() {
         this.overlaysService.removeToolbar(this.model);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: NodeToolbarComponent, isStandalone: true, selector: "node-toolbar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "toolbarContentTemplate", first: true, predicate: ["toolbar"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.17", type: NodeToolbarComponent, isStandalone: true, selector: "node-toolbar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "toolbarContentTemplate", first: true, predicate: ["toolbar"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #toolbar>
       <div class="wrapper" nodeToolbarWrapper [model]="model">
         <ng-content />
@@ -4616,9 +4983,9 @@ class NodeToolbarComponent {
     </ng-template>
   `, isInline: true, styles: [".wrapper{width:max-content}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => NodeToolbarWrapperDirective), selector: "[nodeToolbarWrapper]", inputs: ["model"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeToolbarComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'node-toolbar', template: `
+            args: [{ selector: 'node-toolbar', template: `
     <ng-template #toolbar>
       <div class="wrapper" nodeToolbarWrapper [model]="model">
         <ng-content />
@@ -4644,10 +5011,10 @@ class NodeToolbarWrapperDirective {
             height: this.element.nativeElement.clientHeight,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeToolbarWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: NodeToolbarWrapperDirective, isStandalone: true, selector: "[nodeToolbarWrapper]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeToolbarWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: NodeToolbarWrapperDirective, isStandalone: true, selector: "[nodeToolbarWrapper]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeToolbarWrapperDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeToolbarWrapperDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[nodeToolbarWrapper]',
@@ -4668,10 +5035,10 @@ class CustomTemplateEdgeComponent {
             this.edgeRenderingService.pull(this.model);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomTemplateEdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomTemplateEdgeComponent, isStandalone: true, selector: "g[customTemplateEdge]", host: { listeners: { "mousedown": "pull()", "touchstart": "pull()" } }, ngImport: i0, template: "<ng-content />\n\n<svg:path #interactiveEdge class=\"interactive-edge\" [attr.d]=\"context.path()\" />\n", styles: [".interactive-edge{fill:none;stroke-width:20;stroke:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomTemplateEdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: CustomTemplateEdgeComponent, isStandalone: true, selector: "g[customTemplateEdge]", host: { listeners: { "mousedown": "pull()", "touchstart": "pull()" } }, ngImport: i0, template: "<ng-content />\n\n<svg:path #interactiveEdge class=\"interactive-edge\" [attr.d]=\"context.path()\" />\n", styles: [".interactive-edge{fill:none;stroke-width:20;stroke:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomTemplateEdgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomTemplateEdgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'g[customTemplateEdge]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         '(mousedown)': 'pull()',
@@ -4704,5 +5071,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, NodeRenderingService as ɵNodeRenderingService, RootPointerDirective as ɵRootPointerDirective, SelectionService as ɵSelectionService, SpacePointContextDirective as ɵSpacePointContextDirective, ViewportService as ɵViewportService };
+export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomNodeComponent, CustomTemplateEdgeComponent, DEFAULT_OPTIMIZATION, DragHandleDirective, EDGE_DEFAULTS, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, HandleComponent, HandleTemplateDirective, MiniMapComponent, NODE_DEFAULTS, NodeHtmlTemplateDirective, NodeSvgTemplateDirective, NodeToolbarComponent, NodeToolbarWrapperDirective, ResizableComponent, SelectableDirective, Vflow, VflowComponent, createEdge, createEdges, createNode, createNodes, isComponentNode, isDefaultGroupNode, isDefaultNode, isSvgTemplateNode, isTemplateGroupNode, isTemplateNode, 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