ngx-vflow 1.0.6 → 1.1.0

package/fesm2022/ngx-vflow.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, output, DestroyRef, EventEmitter, OutputEmitterRef, input, viewChild, Component, ChangeDetectionStrategy, Injector, runInInjectionContext, HostListener, NgZone, contentChild, Input, forwardRef } from '@angular/core';
+import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, DestroyRef, EventEmitter, OutputEmitterRef, input, viewChild, Component, ChangeDetectionStrategy, Injector, output, HostListener, runInInjectionContext, NgZone, contentChild, Input, forwardRef } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
-import { switchMap, merge, fromEvent, tap, Subject, Observable, observeOn, animationFrameScheduler, skip, map, pairwise, filter, distinctUntilChanged, asyncScheduler, zip, share, startWith, of } from 'rxjs';
-import { toObservable, takeUntilDestroyed, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
+import { switchMap, merge, fromEvent, tap, Subject, Observable, skip, map, pairwise, filter, distinctUntilChanged, observeOn, asyncScheduler, zip, animationFrameScheduler, share, startWith, of } from 'rxjs';
+import { toObservable, takeUntilDestroyed, outputFromObservable, toSignal } from '@angular/core/rxjs-interop';
 import { drag } from 'd3-drag';
 import { __decorate } from 'tslib';
 import { NgTemplateOutlet, NgComponentOutlet, KeyValuePipe } from '@angular/common';
@@ -545,7 +545,7 @@ function moveNode(model, point) {
         point.y = Math.min(parent.size().height - model.size().height, point.y);
         point.y = Math.max(0, point.y);
     }
-    model.setPoint(point, true);
+    model.setPoint(point);
 }
 
 class EdgeTemplateDirective {
@@ -666,173 +666,6 @@ class FlowStatusService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowStatusService, decorators: [{
             type: Injectable
         }] });
-/**
- * Batch status changes together to call them one after another
- *
- * @param changes list of set[FlowStatus.state]Status() calls
- */
-function batchStatusChanges(...changes) {
-    if (changes.length) {
-        const [firstChange, ...restChanges] = changes;
-        // first change is sync
-        firstChange();
-        // without timer, subscribed effects/comuted signals only get latest value
-        restChanges.forEach((change) => setTimeout(() => change()));
-    }
-}
-
-/**
- * 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
- *
- * This leads to that notSelfValidator returns false for these cases,
- * exactly what we need for strict connection type
- */
-function adjustDirection(connection) {
-    const result = {};
-    if (connection.sourceHandle.rawHandle.type === 'source') {
-        result.source = connection.source;
-        result.sourceHandle = connection.sourceHandle;
-    }
-    else {
-        result.source = connection.target;
-        result.sourceHandle = connection.targetHandle;
-    }
-    if (connection.targetHandle.rawHandle.type === 'target') {
-        result.target = connection.target;
-        result.targetHandle = connection.targetHandle;
-    }
-    else {
-        result.target = connection.source;
-        result.targetHandle = connection.sourceHandle;
-    }
-    return result;
-}
-
-class ConnectionControllerDirective {
-    constructor() {
-        /**
-         * This event fires when user tries to create new Edge.
-         *
-         * `Connection` is an entity that contains data about source and target nodes.
-         *
-         * 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.
-         *
-         * @todo add connect event and deprecate onConnect
-         */
-        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-        this.onConnect = output();
-        this.statusService = inject(FlowStatusService);
-        this.flowEntitiesService = inject(FlowEntitiesService);
-        this.connectEffect = effect(() => {
-            const status = this.statusService.status();
-            if (status.state === 'connection-end') {
-                let source = status.payload.source;
-                let target = status.payload.target;
-                let sourceHandle = status.payload.sourceHandle;
-                let targetHandle = status.payload.targetHandle;
-                if (this.isStrictMode()) {
-                    const adjusted = adjustDirection({
-                        source: status.payload.source,
-                        sourceHandle: status.payload.sourceHandle,
-                        target: status.payload.target,
-                        targetHandle: status.payload.targetHandle,
-                    });
-                    source = adjusted.source;
-                    target = adjusted.target;
-                    sourceHandle = adjusted.sourceHandle;
-                    targetHandle = adjusted.targetHandle;
-                }
-                const sourceId = source.node.id;
-                const targetId = target.node.id;
-                const sourceHandleId = sourceHandle.rawHandle.id;
-                const targetHandleId = targetHandle.rawHandle.id;
-                const connectionModel = this.flowEntitiesService.connection();
-                const connection = {
-                    source: sourceId,
-                    target: targetId,
-                    sourceHandle: sourceHandleId,
-                    targetHandle: targetHandleId,
-                };
-                if (connectionModel.validator(connection)) {
-                    this.onConnect.emit(connection);
-                }
-            }
-        }, { allowSignalWrites: true });
-        this.isStrictMode = computed(() => this.flowEntitiesService.connection().mode === 'strict');
-    }
-    startConnection(handle) {
-        this.statusService.setConnectionStartStatus(handle.parentNode, handle);
-    }
-    validateConnection(handle) {
-        const status = this.statusService.status();
-        if (status.state === 'connection-start') {
-            let source = status.payload.source;
-            let target = handle.parentNode;
-            let sourceHandle = status.payload.sourceHandle;
-            let targetHandle = handle;
-            if (this.isStrictMode()) {
-                // swap direction (if needed) according to actual source and target of strict mode
-                const adjusted = adjustDirection({
-                    source: status.payload.source,
-                    sourceHandle: status.payload.sourceHandle,
-                    target: handle.parentNode,
-                    targetHandle: handle,
-                });
-                source = adjusted.source;
-                target = adjusted.target;
-                sourceHandle = adjusted.sourceHandle;
-                targetHandle = adjusted.targetHandle;
-            }
-            const valid = this.flowEntitiesService.connection().validator({
-                source: source.node.id,
-                target: target.node.id,
-                sourceHandle: sourceHandle.rawHandle.id,
-                targetHandle: targetHandle.rawHandle.id,
-            });
-            // TODO: check how react flow handles highlight of handle
-            // if direction changes
-            handle.state.set(valid ? 'valid' : 'invalid');
-            // status is about how we draw connection, so we don't need
-            // swapped diretion here
-            this.statusService.setConnectionValidationStatus(valid, status.payload.source, handle.parentNode, status.payload.sourceHandle, handle);
-        }
-    }
-    resetValidateConnection(targetHandle) {
-        targetHandle.state.set('idle');
-        // drop back to start status
-        const status = this.statusService.status();
-        if (status.state === 'connection-validation') {
-            this.statusService.setConnectionStartStatus(status.payload.source, status.payload.sourceHandle);
-        }
-    }
-    endConnection() {
-        const status = this.statusService.status();
-        if (status.state === 'connection-validation') {
-            const source = status.payload.source;
-            const sourceHandle = status.payload.sourceHandle;
-            const target = status.payload.target;
-            const targetHandle = status.payload.targetHandle;
-            batchStatusChanges(
-            // call to create connection
-            () => this.statusService.setConnectionEndStatus(source, target, sourceHandle, targetHandle), 
-            // when connection created, we need go back to idle status
-            () => this.statusService.setIdleStatus());
-        }
-    }
-    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: "[connectionController]", outputs: { onConnect: "onConnect" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[connectionController]',
-                    standalone: true,
-                }]
-        }] });
 
 class ComponentEventBusService {
     constructor() {
@@ -994,26 +827,29 @@ function isTemplateDynamicGroupNode(node) {
     return node.type === 'template-group';
 }
 
-// TODO bad naming around points
 class NodeModel {
     static { this.defaultWidth = 100; }
     static { this.defaultHeight = 50; }
     static { this.defaultColor = '#1b262c'; }
     constructor(node) {
         this.node = node;
-        this.flowSettingsService = inject(FlowSettingsService);
         this.entitiesService = inject(FlowEntitiesService);
-        this.internalPoint = this.createInternalPointSignal();
-        this.throttledPoint$ = toObservable(this.internalPoint).pipe(observeOn(animationFrameScheduler));
-        this.notThrottledPoint$ = new Subject();
-        this.point = toSignal(merge(this.throttledPoint$, this.notThrottledPoint$), {
-            initialValue: this.internalPoint(),
-        });
-        this.point$ = this.throttledPoint$;
-        this.size = signal({ width: 0, height: 0 });
+        this.point = this.createInternalPointSignal();
+        this.point$ = toObservable(this.point);
+        this.width = this.createWidthSignal(NodeModel.defaultWidth);
+        this.width$ = toObservable(this.width);
+        this.height = this.createHeightSignal(NodeModel.defaultHeight);
+        this.height$ = toObservable(this.height);
+        /**
+         * @deprecated use width or height signals
+         */
+        this.size = computed(() => ({ width: this.width(), height: this.height() }));
+        /**
+         * @deprecated use width$ or height$
+         */
         this.size$ = toObservable(this.size);
-        this.width = computed(() => this.size().width);
-        this.height = computed(() => this.size().height);
+        this.styleWidth = computed(() => `${this.width()}px`);
+        this.styleHeight = computed(() => `${this.height()}px`);
         this.renderOrder = signal(0);
         this.selected = signal(false);
         this.selected$ = toObservable(this.selected);
@@ -1083,56 +919,8 @@ class NodeModel {
             }
         }
     }
-    setPoint(point, throttle) {
-        if (throttle) {
-            this.internalPoint.set(point);
-        }
-        else {
-            this.notThrottledPoint$.next(point);
-        }
-    }
-    /**
-     * TODO find the way to implement this better
-     */
-    linkDefaultNodeSizeWithModelSize() {
-        const node = this.node;
-        switch (node.type) {
-            case 'default':
-            case 'default-group':
-            case 'template-group': {
-                if (isDynamicNode(node)) {
-                    effect(() => {
-                        this.size.set({
-                            width: node.width?.() ?? NodeModel.defaultWidth,
-                            height: node.height?.() ?? NodeModel.defaultHeight,
-                        });
-                    }, { allowSignalWrites: true });
-                }
-                else {
-                    this.size.set({
-                        width: node.width ?? NodeModel.defaultWidth,
-                        height: node.height ?? NodeModel.defaultHeight,
-                    });
-                }
-            }
-        }
-        if (node.type === 'html-template' || this.isComponentType) {
-            if (isDynamicNode(node)) {
-                effect(() => {
-                    if (node.width && node.height) {
-                        this.size.set({
-                            width: node.width(),
-                            height: node.height(),
-                        });
-                    }
-                }, { allowSignalWrites: true });
-            }
-            else {
-                if (node.width && node.height) {
-                    this.size.set({ width: node.width, height: node.height });
-                }
-            }
-        }
+    setPoint(point) {
+        this.point.set(point);
     }
     createTextSignal() {
         const node = this.node;
@@ -1149,6 +937,16 @@ class NodeModel {
     createInternalPointSignal() {
         return isDynamicNode(this.node) ? this.node.point : signal({ x: this.node.point.x, y: this.node.point.y });
     }
+    createWidthSignal(defaultValue) {
+        return isDynamicNode(this.node)
+            ? (this.node.width ?? signal(defaultValue))
+            : signal(this.node.width ?? defaultValue);
+    }
+    createHeightSignal(defaultValue) {
+        return isDynamicNode(this.node)
+            ? (this.node.height ?? signal(defaultValue))
+            : signal(this.node.height ?? defaultValue);
+    }
 }
 
 class EdgeLabelModel {
@@ -1618,37 +1416,67 @@ class ChangesControllerDirective {
         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
+         */
         this.onNodesChangeAddSingle = outputFromObservable(this.singleChange(this.nodeChangesOfType('add')), {
             alias: 'onNodesChange.add.single',
         });
+        /**
+         * @deprecated use `onNodesChange.add` instead
+         */
         this.onNodesChangeAddMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('add')), {
             alias: 'onNodesChange.add.many',
         });
         this.onNodesChangeRemove = outputFromObservable(this.nodeChangesOfType('remove'), {
             alias: 'onNodesChange.remove',
         });
+        /**
+         * @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.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',
         });
@@ -1659,32 +1487,56 @@ class ChangesControllerDirective {
         this.onNodesChangeDetached = outputFromObservable(this.edgeChangesOfType('detached'), {
             alias: 'onEdgesChange.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',
         });
+        /**
+         * @deprecated use `onEdgesChange.add` instead
+         */
         this.onEdgeChangeAddSingle = outputFromObservable(this.singleChange(this.edgeChangesOfType('add')), {
             alias: 'onEdgesChange.add.single',
         });
+        /**
+         * @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',
         });
@@ -2005,55 +1857,169 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             type: Injectable
         }], propDecorators: { createHandle: [] } });
 
-function resizable(elems, zone) {
-    return new Observable((subscriber) => {
-        const ro = new ResizeObserver((entries) => {
-            zone.run(() => subscriber.next(entries));
-        });
-        elems.forEach((e) => ro.observe(e));
-        return () => ro.disconnect();
-    });
-}
-
-function InjectionContext(target, key, descriptor) {
-    const originalMethod = descriptor.value;
-    descriptor.value = function (...args) {
-        if (implementsWithInjector(this)) {
-            return runInInjectionContext(this.injector, () => originalMethod.apply(this, args));
-        }
-        else {
-            throw new Error('Class that contains decorated method must extends WithInjectorDirective class');
-        }
-    };
-    // Return the modified descriptor
-    return descriptor;
-}
-const implementsWithInjector = (instance) => {
-    return 'injector' in instance && 'get' in instance.injector;
-};
-
-class HandleSizeControllerDirective {
-    constructor() {
-        this.handleModel = input.required({
-            alias: 'handleSizeController',
-        });
-        this.handleWrapper = inject(ElementRef);
+/**
+ * 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
+ *
+ * This leads to that notSelfValidator returns false for these cases,
+ * exactly what we need for strict connection type
+ */
+function adjustDirection(connection) {
+    const result = {};
+    if (connection.sourceHandle.rawHandle.type === 'source') {
+        result.source = connection.source;
+        result.sourceHandle = connection.sourceHandle;
     }
-    ngAfterViewInit() {
-        const element = this.handleWrapper.nativeElement;
-        const rect = element.getBBox();
-        const stroke = getChildStrokeWidth(element);
-        this.handleModel().size.set({
-            width: rect.width + stroke,
-            height: rect.height + stroke,
-        });
+    else {
+        result.source = connection.target;
+        result.sourceHandle = connection.targetHandle;
     }
-    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 }); }
+    if (connection.targetHandle.rawHandle.type === 'target') {
+        result.target = connection.target;
+        result.targetHandle = connection.targetHandle;
+    }
+    else {
+        result.target = connection.source;
+        result.targetHandle = connection.sourceHandle;
+    }
+    return result;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleSizeControllerDirective, decorators: [{
-            type: Directive,
-            args: [{
+
+class ConnectionControllerDirective {
+    constructor() {
+        this.statusService = inject(FlowStatusService);
+        this.flowEntitiesService = inject(FlowEntitiesService);
+        /**
+         * This event fires when user tries to create new Edge.
+         *
+         * `Connection` is an entity that contains data about source and target nodes.
+         *
+         * 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.
+         *
+         * @todo add connect event and deprecate onConnect
+         */
+        // 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) => {
+            let source = status.payload.source;
+            let target = status.payload.target;
+            let sourceHandle = status.payload.sourceHandle;
+            let targetHandle = status.payload.targetHandle;
+            if (this.isStrictMode()) {
+                const adjusted = adjustDirection({
+                    source: status.payload.source,
+                    sourceHandle: status.payload.sourceHandle,
+                    target: status.payload.target,
+                    targetHandle: status.payload.targetHandle,
+                });
+                source = adjusted.source;
+                target = adjusted.target;
+                sourceHandle = adjusted.sourceHandle;
+                targetHandle = adjusted.targetHandle;
+            }
+            const sourceId = source.node.id;
+            const targetId = target.node.id;
+            const sourceHandleId = sourceHandle.rawHandle.id;
+            const targetHandleId = targetHandle.rawHandle.id;
+            return {
+                source: sourceId,
+                target: targetId,
+                sourceHandle: sourceHandleId,
+                targetHandle: targetHandleId,
+            };
+        }), tap(() => this.statusService.setIdleStatus()), filter((connection) => this.flowEntitiesService.connection().validator(connection))));
+        this.isStrictMode = computed(() => this.flowEntitiesService.connection().mode === 'strict');
+    }
+    startConnection(handle) {
+        this.statusService.setConnectionStartStatus(handle.parentNode, handle);
+    }
+    validateConnection(handle) {
+        const status = this.statusService.status();
+        if (status.state === 'connection-start') {
+            let source = status.payload.source;
+            let target = handle.parentNode;
+            let sourceHandle = status.payload.sourceHandle;
+            let targetHandle = handle;
+            if (this.isStrictMode()) {
+                // swap direction (if needed) according to actual source and target of strict mode
+                const adjusted = adjustDirection({
+                    source: status.payload.source,
+                    sourceHandle: status.payload.sourceHandle,
+                    target: handle.parentNode,
+                    targetHandle: handle,
+                });
+                source = adjusted.source;
+                target = adjusted.target;
+                sourceHandle = adjusted.sourceHandle;
+                targetHandle = adjusted.targetHandle;
+            }
+            const valid = this.flowEntitiesService.connection().validator({
+                source: source.node.id,
+                target: target.node.id,
+                sourceHandle: sourceHandle.rawHandle.id,
+                targetHandle: targetHandle.rawHandle.id,
+            });
+            // TODO: check how react flow handles highlight of handle
+            // if direction changes
+            handle.state.set(valid ? 'valid' : 'invalid');
+            // status is about how we draw connection, so we don't need
+            // swapped diretion here
+            this.statusService.setConnectionValidationStatus(valid, status.payload.source, handle.parentNode, status.payload.sourceHandle, handle);
+        }
+    }
+    resetValidateConnection(targetHandle) {
+        targetHandle.state.set('idle');
+        // drop back to start status
+        const status = this.statusService.status();
+        if (status.state === 'connection-validation') {
+            this.statusService.setConnectionStartStatus(status.payload.source, status.payload.sourceHandle);
+        }
+    }
+    endConnection() {
+        const status = this.statusService.status();
+        if (status.state === 'connection-validation') {
+            const source = status.payload.source;
+            const sourceHandle = status.payload.sourceHandle;
+            const target = status.payload.target;
+            const targetHandle = status.payload.targetHandle;
+            this.statusService.setConnectionEndStatus(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]", outputs: { onConnect: "onConnect" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[onConnect]',
+                    standalone: true,
+                }]
+        }] });
+
+class HandleSizeControllerDirective {
+    constructor() {
+        this.handleModel = input.required({
+            alias: 'handleSizeController',
+        });
+        this.handleWrapper = inject(ElementRef);
+    }
+    ngAfterViewInit() {
+        const element = this.handleWrapper.nativeElement;
+        const rect = element.getBBox();
+        const stroke = getChildStrokeWidth(element);
+        this.handleModel().size.set({
+            width: rect.width + stroke,
+            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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleSizeControllerDirective, decorators: [{
+            type: Directive,
+            args: [{
                     standalone: true,
                     selector: '[handleSizeController]',
                 }]
@@ -2219,8 +2185,9 @@ class ResizableComponent {
             return;
         const offset = calcOffset(event.movementX, event.movementY, this.zoom());
         const { x, y, width, height } = constrainRect(applyResize(this.resizeSide, this.model, offset), this.model, this.resizeSide, this.minWidth, this.minHeight);
-        this.model.setPoint({ x, y }, false);
-        this.model.size.set({ width, height });
+        this.model.setPoint({ x, y });
+        this.model.width.set(width);
+        this.model.height.set(height);
     }
     endResize() {
         this.resizeSide = null;
@@ -2381,26 +2348,43 @@ class HandleModel {
             width: 10 + 2 * this.strokeWidth,
             height: 10 + 2 * this.strokeWidth,
         });
-        this.offset = computed(() => {
+        this.pointAbsolute = computed(() => {
+            return {
+                x: this.parentNode.globalPoint().x + this.hostOffset().x + this.sizeOffset().x,
+                y: this.parentNode.globalPoint().y + this.hostOffset().y + this.sizeOffset().y,
+            };
+        });
+        this.state = signal('idle');
+        this.updateHostSizeAndPosition$ = new Subject();
+        this.hostSize = toSignal(this.updateHostSizeAndPosition$.pipe(map(() => this.getHostSize())), {
+            initialValue: { width: 0, height: 0 },
+        });
+        this.hostPosition = toSignal(this.updateHostSizeAndPosition$.pipe(map(() => ({
+            x: this.hostReference instanceof HTMLElement ? this.hostReference.offsetLeft : 0, // for now just 0 for group nodes
+            y: this.hostReference instanceof HTMLElement ? this.hostReference.offsetTop : 0, // for now just 0 for group nodes
+        }))), {
+            initialValue: { x: 0, y: 0 },
+        });
+        this.hostOffset = computed(() => {
             switch (this.rawHandle.position) {
                 case 'left':
                     return {
                         x: 0,
-                        y: this.parentPosition().y + this.parentSize().height / 2,
+                        y: this.hostPosition().y + this.hostSize().height / 2,
                     };
                 case 'right':
                     return {
                         x: this.parentNode.size().width,
-                        y: this.parentPosition().y + this.parentSize().height / 2,
+                        y: this.hostPosition().y + this.hostSize().height / 2,
                     };
                 case 'top':
                     return {
-                        x: this.parentPosition().x + this.parentSize().width / 2,
+                        x: this.hostPosition().x + this.hostSize().width / 2,
                         y: 0,
                     };
                 case 'bottom':
                     return {
-                        x: this.parentPosition().x + this.parentSize().width / 2,
+                        x: this.hostPosition().x + this.hostSize().width / 2,
                         y: this.parentNode.size().height,
                     };
             }
@@ -2417,50 +2401,50 @@ class HandleModel {
                     return { x: 0, y: this.size().height / 2 };
             }
         });
-        this.pointAbsolute = computed(() => {
-            return {
-                x: this.parentNode.globalPoint().x + this.offset().x + this.sizeOffset().x,
-                y: this.parentNode.globalPoint().y + this.offset().y + this.sizeOffset().y,
-            };
-        });
-        this.state = signal('idle');
-        this.updateParentSizeAndPosition$ = new Subject();
-        this.parentSize = toSignal(this.updateParentSizeAndPosition$.pipe(map(() => this.getParentSize())), {
-            initialValue: { width: 0, height: 0 },
-        });
-        this.parentPosition = toSignal(this.updateParentSizeAndPosition$.pipe(map(() => ({
-            x: this.parentReference instanceof HTMLElement ? this.parentReference.offsetLeft : 0, // for now just 0 for group nodes
-            y: this.parentReference instanceof HTMLElement ? this.parentReference.offsetTop : 0, // for now just 0 for group nodes
-        }))), {
-            initialValue: { x: 0, y: 0 },
-        });
-        this.parentReference = this.rawHandle.parentReference;
+        this.hostReference = this.rawHandle.hostReference;
         this.template = this.rawHandle.template;
         this.templateContext = {
             $implicit: {
-                point: this.offset,
+                point: this.hostOffset,
                 state: this.state,
                 node: this.parentNode.node,
             },
         };
     }
-    updateParent() {
-        this.updateParentSizeAndPosition$.next();
+    updateHost() {
+        this.updateHostSizeAndPosition$.next();
     }
-    getParentSize() {
-        if (this.parentReference instanceof HTMLElement) {
+    getHostSize() {
+        if (this.hostReference instanceof HTMLElement) {
             return {
-                width: this.parentReference.offsetWidth,
-                height: this.parentReference.offsetHeight,
+                width: this.hostReference.offsetWidth,
+                height: this.hostReference.offsetHeight,
             };
         }
-        else if (this.parentReference instanceof SVGGraphicsElement) {
-            return this.parentReference.getBBox();
+        else if (this.hostReference instanceof SVGGraphicsElement) {
+            return this.hostReference.getBBox();
         }
         return { width: 0, height: 0 };
     }
 }
 
+function InjectionContext(target, key, descriptor) {
+    const originalMethod = descriptor.value;
+    descriptor.value = function (...args) {
+        if (implementsWithInjector(this)) {
+            return runInInjectionContext(this.injector, () => originalMethod.apply(this, args));
+        }
+        else {
+            throw new Error('Class that contains decorated method must extends WithInjectorDirective class');
+        }
+    };
+    // Return the modified descriptor
+    return descriptor;
+}
+const implementsWithInjector = (instance) => {
+    return 'injector' in instance && 'get' in instance.injector;
+};
+
 class HandleComponent {
     constructor() {
         this.injector = inject(Injector);
@@ -2488,11 +2472,11 @@ class HandleComponent {
                 position: this.position(),
                 type: this.type(),
                 id: this.id(),
-                parentReference: this.element.parentElement,
+                hostReference: this.element.parentElement,
                 template: this.template(),
             }, node);
             this.handleService.createHandle(this.model);
-            requestAnimationFrame(() => this.model.updateParent());
+            requestAnimationFrame(() => this.model.updateHost());
             this.destroyRef.onDestroy(() => this.handleService.destroyHandle(this.model));
         }
     }
@@ -2507,6 +2491,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{ standalone: true, selector: 'handle', changeDetection: ChangeDetectionStrategy.OnPush, template: "" }]
         }], propDecorators: { ngOnInit: [] } });
 
+function resizable(elems, zone) {
+    return new Observable((subscriber) => {
+        const ro = new ResizeObserver((entries) => {
+            zone.run(() => subscriber.next(entries));
+        });
+        elems.forEach((e) => ro.observe(e));
+        return () => ro.disconnect();
+    });
+}
+
+class NodeHandlesControllerDirective {
+    constructor() {
+        this.nodeAccessor = inject(NodeAccessorService);
+        this.zone = inject(NgZone);
+        this.destroyRef = inject(DestroyRef);
+        this.hostElementRef = inject(ElementRef);
+    }
+    ngOnInit() {
+        const model = this.nodeAccessor.model();
+        model.handles$
+            .pipe(switchMap((handles) => resizable([...handles.map((h) => h.hostReference), this.hostElementRef.nativeElement], this.zone).pipe(map(() => handles))), tap((handles) => {
+            // TODO (performance) inspect how to avoid calls of this when flow initially rendered
+            handles.forEach((h) => h.updateHost());
+        }), 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeHandlesControllerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nodeHandlesController]',
+                    standalone: true,
+                }]
+        }] });
+
+class NodeResizeControllerDirective {
+    constructor() {
+        this.nodeAccessor = inject(NodeAccessorService);
+        this.zone = inject(NgZone);
+        this.destroyRef = inject(DestroyRef);
+        this.hostElementRef = inject(ElementRef);
+    }
+    ngOnInit() {
+        const model = this.nodeAccessor.model();
+        resizable([this.hostElementRef.nativeElement], this.zone)
+            .pipe(startWith(null), filter(() => !model.resizing()), tap(() => {
+            const width = this.hostElementRef.nativeElement.clientWidth;
+            const height = this.hostElementRef.nativeElement.clientHeight;
+            model.width.set(width);
+            model.height.set(height);
+        }), 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeResizeControllerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nodeResizeController]',
+                    standalone: true,
+                }]
+        }] });
+
 class NodeComponent {
     constructor() {
         this.injector = inject(Injector);
@@ -2517,51 +2567,28 @@ class NodeComponent {
         this.flowSettingsService = inject(FlowSettingsService);
         this.selectionService = inject(SelectionService);
         this.hostRef = inject(ElementRef);
-        this.connectionController = inject(ConnectionControllerDirective);
         this.nodeAccessor = inject(NodeAccessorService);
         this.overlaysService = inject(OverlaysService);
-        this.zone = inject(NgZone);
-        this.nodeModel = input.required();
+        // TODO remove dependency from this directive
+        this.connectionController = inject(ConnectionControllerDirective, { optional: true });
+        this.model = input.required();
         this.nodeTemplate = input();
         this.groupNodeTemplate = input();
-        this.htmlWrapperRef = viewChild.required('htmlWrapper');
         this.showMagnet = computed(() => this.flowStatusService.status().state === 'connection-start' ||
             this.flowStatusService.status().state === 'connection-validation');
-        this.styleWidth = computed(() => `${this.nodeModel().size().width}px`);
-        this.styleHeight = computed(() => `${this.nodeModel().size().height}px`);
-        this.toolbar = computed(() => this.overlaysService.nodeToolbars().get(this.nodeModel()));
+        this.toolbar = computed(() => this.overlaysService.nodeToolbars().get(this.model()));
     }
     ngOnInit() {
-        this.nodeAccessor.model.set(this.nodeModel());
-        this.handleService.node.set(this.nodeModel());
+        this.nodeAccessor.model.set(this.model());
+        this.handleService.node.set(this.model());
         effect(() => {
-            if (this.nodeModel().draggable()) {
-                this.draggableService.enable(this.hostRef.nativeElement, this.nodeModel());
+            if (this.model().draggable()) {
+                this.draggableService.enable(this.hostRef.nativeElement, this.model());
             }
             else {
                 this.draggableService.disable(this.hostRef.nativeElement);
             }
-        });
-        this.nodeModel()
-            .handles$.pipe(switchMap((handles) => resizable(handles.map((h) => h.parentReference), this.zone).pipe(map(() => handles))), tap((handles) => {
-            // TODO (performance) inspect how to avoid calls of this when flow initially rendered
-            handles.forEach((h) => h.updateParent());
-        }), takeUntilDestroyed())
-            .subscribe();
-    }
-    ngAfterViewInit() {
-        this.nodeModel().linkDefaultNodeSizeWithModelSize();
-        if (this.nodeModel().node.type === 'html-template' || this.nodeModel().isComponentType) {
-            resizable([this.htmlWrapperRef().nativeElement], this.zone)
-                .pipe(startWith(null), tap(() => this.nodeModel()
-                .handles()
-                .forEach((h) => h.updateParent())), filter(() => !this.nodeModel().resizing()), tap(() => {
-                const width = this.htmlWrapperRef().nativeElement.clientWidth;
-                const height = this.htmlWrapperRef().nativeElement.clientHeight;
-                this.nodeModel().size.set({ width, height });
-            }), takeUntilDestroyed())
-                .subscribe();
-        }
+        }, { injector: this.injector });
     }
     ngOnDestroy() {
         this.draggableService.destroy(this.hostRef.nativeElement);
@@ -2569,34 +2596,28 @@ class NodeComponent {
     startConnection(event, handle) {
         // ignore drag by stopping propagation
         event.stopPropagation();
-        this.connectionController.startConnection(handle);
+        this.connectionController?.startConnection(handle);
     }
     validateConnection(handle) {
-        this.connectionController.validateConnection(handle);
+        this.connectionController?.validateConnection(handle);
     }
     resetValidateConnection(targetHandle) {
-        this.connectionController.resetValidateConnection(targetHandle);
+        this.connectionController?.resetValidateConnection(targetHandle);
     }
     endConnection() {
-        this.connectionController.endConnection();
+        this.connectionController?.endConnection();
     }
     pullNode() {
-        this.nodeRenderingService.pullNode(this.nodeModel());
+        this.nodeRenderingService.pullNode(this.model());
     }
     selectNode() {
         if (this.flowSettingsService.entitiesSelectable()) {
-            this.selectionService.select(this.nodeModel());
+            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: { nodeModel: { classPropertyName: "nodeModel", publicName: "nodeModel", isSignal: true, isRequired: true, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, groupNodeTemplate: { classPropertyName: "groupNodeTemplate", publicName: "groupNodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "vflow-node" }, providers: [HandleService, NodeAccessorService], viewQueries: [{ propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Default node -->\n@if (nodeModel().node.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode(); selectNode()\">\n    <default-node\n      #htmlWrapper\n      [selected]=\"nodeModel().selected()\"\n      [style.width]=\"styleWidth()\"\n      [style.height]=\"styleHeight()\"\n      [style.max-width]=\"styleWidth()\"\n      [style.max-height]=\"styleHeight()\">\n      <div [outerHTML]=\"nodeModel().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- Template node -->\n@if (nodeModel().node.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode()\">\n    <div #htmlWrapper class=\"wrapper\" [style.width]=\"styleWidth()\" [style.height]=\"styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: { node: nodeModel().node, selected: nodeModel().selected },\n        }\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Component node -->\n@if (nodeModel().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode()\">\n    <div #htmlWrapper class=\"wrapper\" [style.width]=\"styleWidth()\" [style.height]=\"styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(nodeModel().node.type)\"\n        [ngComponentOutletInputs]=\"nodeModel().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (nodeModel().node.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"nodeModel().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"nodeModel().color()\"\n    [class.default-group-node_selected]=\"nodeModel().selected()\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    [style.stroke]=\"nodeModel().color()\"\n    [style.fill]=\"nodeModel().color()\"\n    (pointerStart)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (nodeModel().node.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: {\n          node: nodeModel().node,\n          selected: nodeModel().selected,\n          width: nodeModel().width,\n          height: nodeModel().height,\n        },\n      }\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (nodeModel().resizerTemplate(); as template) {\n  @if (nodeModel().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of nodeModel().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.offset().x\"\n      [attr.cy]=\"handle.offset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\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]=\"nodeModel().magnetRadius\"\n      [attr.cx]=\"handle.offset().x\"\n      [attr.cy]=\"handle.offset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@if (toolbar(); as 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"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NodeComponent, isStandalone: true, selector: "g[node]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, 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().node.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().size().width\"\n    [attr.height]=\"model().size().height\"\n    (pointerStart)=\"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<!-- Template node -->\n@if (model().node.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().size().width\"\n    [attr.height]=\"model().size().height\"\n    (pointerStart)=\"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]=\"{\n          $implicit: { node: model().node, selected: model().selected },\n        }\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().size().width\"\n    [attr.height]=\"model().size().height\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(model().node.type)\"\n        [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().node.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    (pointerStart)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().node.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: {\n          node: model().node,\n          selected: model().selected,\n          width: model().width,\n          height: model().height,\n        },\n      }\"\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) {\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) {\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@if (toolbar(); as 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ResizableComponent, selector: "[resizable]", inputs: ["resizable", "resizerColor", "gap"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: NodeHandlesControllerDirective, selector: "[nodeHandlesController]" }, { kind: "directive", type: NodeResizeControllerDirective, selector: "[nodeResizeController]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-__decorate([
-    InjectionContext
-], NodeComponent.prototype, "ngOnInit", null);
-__decorate([
-    InjectionContext
-], NodeComponent.prototype, "ngAfterViewInit", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService, NodeAccessorService], host: {
@@ -2609,8 +2630,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NgComponentOutlet,
                         ResizableComponent,
                         HandleSizeControllerDirective,
-                    ], template: "<!-- Default node -->\n@if (nodeModel().node.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode(); selectNode()\">\n    <default-node\n      #htmlWrapper\n      [selected]=\"nodeModel().selected()\"\n      [style.width]=\"styleWidth()\"\n      [style.height]=\"styleHeight()\"\n      [style.max-width]=\"styleWidth()\"\n      [style.max-height]=\"styleHeight()\">\n      <div [outerHTML]=\"nodeModel().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- Template node -->\n@if (nodeModel().node.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode()\">\n    <div #htmlWrapper class=\"wrapper\" [style.width]=\"styleWidth()\" [style.height]=\"styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: { node: nodeModel().node, selected: nodeModel().selected },\n        }\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Component node -->\n@if (nodeModel().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode()\">\n    <div #htmlWrapper class=\"wrapper\" [style.width]=\"styleWidth()\" [style.height]=\"styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(nodeModel().node.type)\"\n        [ngComponentOutletInputs]=\"nodeModel().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (nodeModel().node.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"nodeModel().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"nodeModel().color()\"\n    [class.default-group-node_selected]=\"nodeModel().selected()\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    [style.stroke]=\"nodeModel().color()\"\n    [style.fill]=\"nodeModel().color()\"\n    (pointerStart)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (nodeModel().node.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: {\n          node: nodeModel().node,\n          selected: nodeModel().selected,\n          width: nodeModel().width,\n          height: nodeModel().height,\n        },\n      }\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (nodeModel().resizerTemplate(); as template) {\n  @if (nodeModel().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of nodeModel().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.offset().x\"\n      [attr.cy]=\"handle.offset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\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]=\"nodeModel().magnetRadius\"\n      [attr.cx]=\"handle.offset().x\"\n      [attr.cy]=\"handle.offset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@if (toolbar(); as 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"] }]
-        }], propDecorators: { ngOnInit: [], ngAfterViewInit: [] } });
+                        NodeHandlesControllerDirective,
+                        NodeResizeControllerDirective,
+                    ], template: "<!-- Default node -->\n@if (model().node.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().size().width\"\n    [attr.height]=\"model().size().height\"\n    (pointerStart)=\"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<!-- Template node -->\n@if (model().node.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().size().width\"\n    [attr.height]=\"model().size().height\"\n    (pointerStart)=\"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]=\"{\n          $implicit: { node: model().node, selected: model().selected },\n        }\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().size().width\"\n    [attr.height]=\"model().size().height\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(model().node.type)\"\n        [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().node.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    (pointerStart)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().node.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: {\n          node: model().node,\n          selected: model().selected,\n          width: model().width,\n          height: model().height,\n        },\n      }\"\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) {\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) {\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@if (toolbar(); as toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\">\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
+        }] });
 
 class ConnectionComponent {
     constructor() {
@@ -2932,10 +2955,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['document:touchend']
             }] } });
 
-const connectionControllerHostDirective = {
-    directive: ConnectionControllerDirective,
-    outputs: ['onConnect'],
-};
 const changesControllerHostDirective = {
     directive: ChangesControllerDirective,
     outputs: [
@@ -3208,7 +3227,7 @@ class VflowComponent {
             ComponentEventBusService,
             KeyboardService,
             OverlaysService,
-        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, 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: ConnectionControllerDirective, outputs: ["onConnect", "onConnect"] }, { directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.size", "onNodesChange.size", "onNodesChange.size.single", "onNodesChange.size.single", "onNodesChange.size.many", "onNodesChange.size.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"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          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!optimization().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      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.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", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: 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: ["nodeModel", "nodeTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true, isSignal: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.size", "onNodesChange.size", "onNodesChange.size.single", "onNodesChange.size.single", "onNodesChange.size.many", "onNodesChange.size.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().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          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!optimization().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      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.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", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: 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", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { 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: VflowComponent, decorators: [{
             type: Component,
@@ -3225,7 +3244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         ComponentEventBusService,
                         KeyboardService,
                         OverlaysService,
-                    ], hostDirectives: [connectionControllerHostDirective, changesControllerHostDirective], imports: [
+                    ], hostDirectives: [changesControllerHostDirective], imports: [
                         RootSvgReferenceDirective,
                         RootSvgContextDirective,
                         RootPointerDirective,
@@ -3238,7 +3257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NodeComponent,
                         EdgeComponent,
                         NgTemplateOutlet,
-                    ], template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"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          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!optimization().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      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.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", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
+                    ], template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().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          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!optimization().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      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.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", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
         }], propDecorators: { view: [{
                 type: Input
             }], minZoom: [{
@@ -3303,7 +3322,7 @@ class SelectableDirective {
     }
     entity() {
         if (this.parentNode) {
-            return this.parentNode.nodeModel();
+            return this.parentNode.model();
         }
         else if (this.parentEdge) {
             return this.parentEdge.model();
@@ -3532,6 +3551,7 @@ const Vflow = [
     MiniMapComponent,
     NodeToolbarComponent,
     DragHandleDirective,
+    ConnectionControllerDirective,
     NodeHtmlTemplateDirective,
     GroupNodeTemplateDirective,
     EdgeLabelHtmlTemplateDirective,
@@ -3549,6 +3569,14 @@ function provideCustomNodeMocks() {
                 pushEvent: () => { },
             },
         },
+        {
+            provide: NodeAccessorService,
+            useFactory: () => ({
+                model: signal(mockModel()),
+            }),
+        },
+        FlowEntitiesService,
+        // TODO: mocks below should be removed after the major release
         {
             provide: HandleService,
             useFactory: () => ({
@@ -3577,12 +3605,6 @@ function provideCustomNodeMocks() {
                 documentPointToFlowPoint: (point) => point,
             },
         },
-        {
-            provide: NodeAccessorService,
-            useFactory: () => ({
-                model: signal(mockModel()),
-            }),
-        },
         {
             provide: SelectionService,
             useValue: {
@@ -3590,16 +3612,473 @@ function provideCustomNodeMocks() {
             },
         },
         FlowSettingsService,
-        FlowEntitiesService,
         ViewportService,
     ];
 }
 
+class EdgeTemplateMockDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: EdgeTemplateMockDirective, isStandalone: true, selector: "ng-template[edge]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeTemplateMockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[edge]',
+                }]
+        }] });
+class ConnectionTemplateMockDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ConnectionTemplateMockDirective, isStandalone: true, selector: "ng-template[connection]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionTemplateMockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[connection]',
+                }]
+        }] });
+class EdgeLabelHtmlTemplateMockDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelHtmlTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: EdgeLabelHtmlTemplateMockDirective, isStandalone: true, selector: "ng-template[edgeLabelHtml]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelHtmlTemplateMockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[edgeLabelHtml]',
+                }]
+        }] });
+class NodeHtmlTemplateMockDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeHtmlTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NodeHtmlTemplateMockDirective, isStandalone: true, selector: "ng-template[nodeHtml]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeHtmlTemplateMockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[nodeHtml]',
+                }]
+        }] });
+class GroupNodeTemplateMockDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupNodeTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: GroupNodeTemplateMockDirective, isStandalone: true, selector: "ng-template[groupNode]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupNodeTemplateMockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[groupNode]',
+                }]
+        }] });
+class HandleTemplateMockDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: HandleTemplateMockDirective, isStandalone: true, selector: "ng-template[handle]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleTemplateMockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[handle]',
+                }]
+        }] });
+
+class VflowMockComponent {
+    constructor() {
+        this.nodes = input.required();
+        this.edges = input.required();
+        this.view = input([400, 400]);
+        this.minZoom = input(0.5);
+        this.maxZoom = input(3);
+        this.background = input('#fff');
+        this.optimization = input({
+            detachedGroupsLayer: false,
+        });
+        this.entitiesSelectable = input(true);
+        this.keyboardShortcuts = input({
+            multiSelection: null,
+        });
+        this.connection = input();
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+        this.onComponentNodeEvent = output();
+        this.nodeTemplateDirective = contentChild(NodeHtmlTemplateMockDirective);
+        this.groupNodeTemplateDirective = contentChild(GroupNodeTemplateMockDirective);
+        this.edgeTemplateDirective = contentChild(EdgeTemplateMockDirective);
+        this.edgeLabelHtmlDirective = contentChild(EdgeLabelHtmlTemplateMockDirective);
+        this.connectionTemplateDirective = contentChild(ConnectionTemplateMockDirective);
+        this.viewport = signal({
+            x: 0,
+            y: 0,
+            zoom: 1,
+        });
+        this.nodesChange = signal([]);
+        this.edgesChange = signal([]);
+        this.viewportChange$ = toObservable(this.viewport);
+        this.nodesChange$ = toObservable(this.nodesChange);
+        this.edgesChange$ = toObservable(this.edgesChange);
+    }
+    viewportTo(viewport) {
+        this.viewport.set(viewport);
+    }
+    zoomTo(zoom) {
+        this.viewport.update((prev) => ({ ...prev, zoom }));
+    }
+    panTo(point) {
+        this.viewport.update((prev) => ({ ...prev, x: point.x, y: point.y }));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    fitView(options) { }
+    documentPointToFlowPoint(point) {
+        return point;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    getNode(id) {
+        return this.nodes().find((node) => node.id === id);
+    }
+    getDetachedEdges() {
+        return [];
+    }
+    createSignal(value) {
+        return signal(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VflowMockComponent, isStandalone: true, selector: "vflow", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, optimization: { classPropertyName: "optimization", publicName: "optimization", isSignal: true, isRequired: false, transformFunction: null }, entitiesSelectable: { classPropertyName: "entitiesSelectable", publicName: "entitiesSelectable", isSignal: true, isRequired: false, transformFunction: null }, keyboardShortcuts: { classPropertyName: "keyboardShortcuts", publicName: "keyboardShortcuts", isSignal: true, isRequired: false, transformFunction: null }, connection: { classPropertyName: "connection", publicName: "connection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateMockDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-content />
+
+    @for (node of nodes(); track $index) {
+      @if (node.type === 'html-template') {
+        <ng-component
+          [ngTemplateOutlet]="nodeTemplateDirective()?.templateRef ?? null"
+          [ngTemplateOutletContext]="{
+            $implicit: {
+              node: node,
+              selected: createSignal(false),
+            },
+          }" />
+      }
+
+      @if (node.type === 'template-group') {
+        <ng-component
+          [ngTemplateOutlet]="groupNodeTemplateDirective()?.templateRef ?? null"
+          [ngTemplateOutletContext]="{
+            $implicit: {
+              node: node,
+              selected: createSignal(false),
+              width: createSignal(node.width),
+              height: createSignal(node.height),
+            },
+          }" />
+      }
+    }
+
+    @for (edge of edges(); track $index) {
+      @if (edge.type === 'template') {
+        <ng-component
+          [ngTemplateOutlet]="edgeTemplateDirective()?.templateRef ?? null"
+          [ngTemplateOutletContext]="{
+            $implicit: {
+              edge: edge,
+              selected: createSignal(false),
+              path: createSignal(''),
+              markerStart: createSignal(''),
+              markerEnd: createSignal(''),
+            },
+          }" />
+
+        @if (edge.edgeLabels?.start) {
+          <ng-component
+            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
+            [ngTemplateOutletContext]="{
+              $implicit: {
+                edge: edge,
+              },
+            }" />
+        }
+
+        @if (edge.edgeLabels?.center) {
+          <ng-component
+            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
+            [ngTemplateOutletContext]="{
+              $implicit: {
+                edge: edge,
+                label: edge.edgeLabels?.center,
+              },
+            }" />
+        }
+
+        @if (edge.edgeLabels?.end) {
+          <ng-component
+            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
+            [ngTemplateOutletContext]="{
+              $implicit: {
+                edge: edge,
+                label: edge.edgeLabels?.end,
+              },
+            }" />
+        }
+      }
+    }
+
+    @if (connection()?.type === 'template') {
+      <ng-component
+        [ngTemplateOutlet]="connectionTemplateDirective()?.templateRef ?? null"
+        [ngTemplateOutletContext]="{
+          $implicit: {
+            path: createSignal(''),
+            marker: createSignal(''),
+          },
+        }" />
+    }
+  `, 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: VflowMockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vflow',
+                    template: `
+    <ng-content />
+
+    @for (node of nodes(); track $index) {
+      @if (node.type === 'html-template') {
+        <ng-component
+          [ngTemplateOutlet]="nodeTemplateDirective()?.templateRef ?? null"
+          [ngTemplateOutletContext]="{
+            $implicit: {
+              node: node,
+              selected: createSignal(false),
+            },
+          }" />
+      }
+
+      @if (node.type === 'template-group') {
+        <ng-component
+          [ngTemplateOutlet]="groupNodeTemplateDirective()?.templateRef ?? null"
+          [ngTemplateOutletContext]="{
+            $implicit: {
+              node: node,
+              selected: createSignal(false),
+              width: createSignal(node.width),
+              height: createSignal(node.height),
+            },
+          }" />
+      }
+    }
+
+    @for (edge of edges(); track $index) {
+      @if (edge.type === 'template') {
+        <ng-component
+          [ngTemplateOutlet]="edgeTemplateDirective()?.templateRef ?? null"
+          [ngTemplateOutletContext]="{
+            $implicit: {
+              edge: edge,
+              selected: createSignal(false),
+              path: createSignal(''),
+              markerStart: createSignal(''),
+              markerEnd: createSignal(''),
+            },
+          }" />
+
+        @if (edge.edgeLabels?.start) {
+          <ng-component
+            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
+            [ngTemplateOutletContext]="{
+              $implicit: {
+                edge: edge,
+              },
+            }" />
+        }
+
+        @if (edge.edgeLabels?.center) {
+          <ng-component
+            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
+            [ngTemplateOutletContext]="{
+              $implicit: {
+                edge: edge,
+                label: edge.edgeLabels?.center,
+              },
+            }" />
+        }
+
+        @if (edge.edgeLabels?.end) {
+          <ng-component
+            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
+            [ngTemplateOutletContext]="{
+              $implicit: {
+                edge: edge,
+                label: edge.edgeLabels?.end,
+              },
+            }" />
+        }
+      }
+    }
+
+    @if (connection()?.type === 'template') {
+      <ng-component
+        [ngTemplateOutlet]="connectionTemplateDirective()?.templateRef ?? null"
+        [ngTemplateOutletContext]="{
+          $implicit: {
+            path: createSignal(''),
+            marker: createSignal(''),
+          },
+        }" />
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [NgTemplateOutlet],
+                }]
+        }] });
+
+class HandleMockComponent {
+    constructor() {
+        this.position = input.required();
+        this.type = input.required();
+        this.id = input();
+        this.template = input();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: HandleMockComponent, 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 } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleMockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'handle',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                }]
+        }] });
+
+class ResizableMockComponent {
+    constructor() {
+        this.resizable = input();
+        this.resizerColor = input('#2e414c');
+        this.gap = input(1.5);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResizableMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ResizableMockComponent, 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 } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResizableMockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[resizable]',
+                    template: '<ng-content />',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class MiniMapMockComponent {
+    constructor() {
+        this.maskColor = input(`rgba(215, 215, 215, 0.6)`);
+        this.strokeColor = input(`rgb(200, 200, 200)`);
+        this.position = input('bottom-right');
+        this.scaleOnHover = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniMapMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: MiniMapMockComponent, 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 } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniMapMockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mini-map',
+                    template: '',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class NodeToolbarMockComponent {
+    constructor() {
+        this.position = input('top');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeToolbarMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: NodeToolbarMockComponent, isStandalone: true, selector: "node-toolbar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeToolbarMockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'node-toolbar',
+                    template: '<ng-content />',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class ConnectionControllerMockDirective {
+    constructor() {
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+        this.onConnect = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ConnectionControllerMockDirective, isStandalone: true, selector: "[onConnect]", outputs: { onConnect: "onConnect" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerMockDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[onConnect]', standalone: true }]
+        }] });
+
+class DragHandleMockDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DragHandleMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: DragHandleMockDirective, isStandalone: true, selector: "[dragHandle]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DragHandleMockDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[dragHandle]', standalone: true }]
+        }] });
+
+class SelectableMockDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectableMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SelectableMockDirective, isStandalone: true, selector: "[selectable]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectableMockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[selectable]',
+                    standalone: true,
+                }]
+        }] });
+
+const VflowMocks = [
+    VflowMockComponent,
+    HandleMockComponent,
+    ResizableMockComponent,
+    SelectableMockDirective,
+    MiniMapMockComponent,
+    NodeToolbarMockComponent,
+    DragHandleMockDirective,
+    ConnectionControllerMockDirective,
+    NodeHtmlTemplateMockDirective,
+    GroupNodeTemplateMockDirective,
+    EdgeLabelHtmlTemplateMockDirective,
+    EdgeTemplateMockDirective,
+    ConnectionTemplateMockDirective,
+    HandleTemplateMockDirective,
+];
+
 // Standalone Util
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomDynamicNodeComponent, CustomNodeComponent, DragHandleDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, HandleComponent, HandleTemplateDirective, MiniMapComponent, NodeHtmlTemplateDirective, NodeToolbarComponent, NodeToolbarWrapperDirective, ResizableComponent, SelectableDirective, Vflow, VflowComponent, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode, provideCustomNodeMocks };
+export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionControllerMockDirective, ConnectionTemplateDirective, ConnectionTemplateMockDirective, CustomDynamicNodeComponent, CustomNodeComponent, DragHandleDirective, DragHandleMockDirective, EdgeLabelHtmlTemplateDirective, EdgeLabelHtmlTemplateMockDirective, EdgeTemplateDirective, EdgeTemplateMockDirective, GroupNodeTemplateDirective, GroupNodeTemplateMockDirective, HandleComponent, HandleMockComponent, HandleTemplateDirective, HandleTemplateMockDirective, MiniMapComponent, MiniMapMockComponent, NodeHtmlTemplateDirective, NodeHtmlTemplateMockDirective, NodeToolbarComponent, NodeToolbarMockComponent, NodeToolbarWrapperDirective, ResizableComponent, ResizableMockComponent, SelectableDirective, SelectableMockDirective, Vflow, VflowComponent, VflowMockComponent, VflowMocks, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode, provideCustomNodeMocks };
 //# sourceMappingURL=ngx-vflow.mjs.map