ngx-vflow 0.7.0 → 0.9.0

package/fesm2022/ngx-vflow.mjs

@@ -1,71 +1,81 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, ElementRef, Directive, computed, effect, untracked, Input, TemplateRef, EventEmitter, Output, DestroyRef, runInInjectionContext, HostListener, Injector, Component, ChangeDetectionStrategy, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, EventEmitter, Output, DestroyRef, Input, runInInjectionContext, Injector, Component, ChangeDetectionStrategy, HostListener, ViewChild, HostBinding, ContentChild, NgModule } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
-import { Subject, tap, merge, BehaviorSubject, observeOn, animationFrameScheduler, switchMap, skip, map, pairwise, filter, distinctUntilChanged, asyncScheduler, zip, Observable, fromEvent, share, Subscription, startWith } from 'rxjs';
+import { Subject, tap, merge, BehaviorSubject, observeOn, animationFrameScheduler, switchMap, skip, map, pairwise, filter, distinctUntilChanged, zip, asyncScheduler, fromEvent, share, Observable, startWith } from 'rxjs';
 import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { drag } from 'd3-drag';
 import { path } from 'd3-path';
 import { __decorate } from 'tslib';
 
-class ViewportService {
-    constructor() {
-        /**
-         * Internal signal that accepts value from user by lib api
-         * When this signal changes, lib sets new view state and update readableViewport signal
-         */
-        this.writableViewport = signal({
-            changeType: 'initial',
-            state: ViewportService.getDefaultViewport()
-        });
-        /**
-         * Public signal with viewport state. User can directly read from this signal. It's updated by:
-         * - user events on flow
-         * - writableViewport signal
-         */
-        this.readableViewport = signal(ViewportService.getDefaultViewport());
-    }
-    /**
-     * The default value used by d3, just copy it here
-     *
-     * @returns default viewport value
-     */
-    static getDefaultViewport() { return { zoom: 1, x: 0, y: 0 }; }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService }); }
+function getNodesBounds(nodes) {
+    if (nodes.length === 0) {
+        return { x: 0, y: 0, width: 0, height: 0 };
+    }
+    let box = { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity };
+    nodes.forEach(node => {
+        const nodeBox = nodeToBox(node);
+        box = getBoundsOfBoxes(box, nodeBox);
+    });
+    return boxToRect(box);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService, decorators: [{
-            type: Injectable
-        }] });
-
-function isDefined(data) {
-    return data !== undefined;
+function nodeToBox(node) {
+    return {
+        x: node.point().x,
+        y: node.point().y,
+        x2: node.point().x + node.size().width,
+        y2: node.point().y + node.size().height,
+    };
 }
-
-class RootSvgReferenceDirective {
-    constructor() {
-        this.element = inject(ElementRef).nativeElement;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootSvgReferenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]", ngImport: i0 }); }
+function boxToRect({ x, y, x2, y2 }) {
+    return {
+        x,
+        y,
+        width: x2 - x,
+        height: y2 - y,
+    };
+}
+function getBoundsOfBoxes(box1, box2) {
+    return {
+        x: Math.min(box1.x, box2.x),
+        y: Math.min(box1.y, box2.y),
+        x2: Math.max(box1.x2, box2.x2),
+        y2: Math.max(box1.y2, box2.y2),
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootSvgReferenceDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'svg[rootSvgRef]'
-                }]
-        }] });
 
 class ConnectionModel {
-    constructor(connection) {
-        this.connection = connection;
-        this.curve = connection.curve ?? 'bezier';
-        this.type = connection.type ?? 'default';
-        this.validator = connection.validator ?? (() => true);
+    constructor(settings) {
+        this.settings = settings;
+        this.curve = settings.curve ?? 'bezier';
+        this.type = settings.type ?? 'default';
+        this.mode = settings.mode ?? 'strict';
+        const validatorsToRun = this.getValidators(settings);
+        this.validator = (connection) => validatorsToRun.every((v) => v(connection));
+    }
+    getValidators(settings) {
+        const validators = [];
+        validators.push(notSelfValidator);
+        if (this.mode === 'loose') {
+            validators.push(hasSourceAndTargetHandleValidator);
+        }
+        if (settings.validator) {
+            validators.push(settings.validator);
+        }
+        return validators;
     }
 }
+/**
+ * Internal validator that not allows self connections
+ */
+const notSelfValidator = (connection) => {
+    return connection.source !== connection.target;
+};
+const hasSourceAndTargetHandleValidator = (connection) => {
+    return connection.sourceHandle !== undefined && connection.targetHandle !== undefined;
+};
 
 function hashCode(str) {
     return str.split('').reduce((a, b) => {
@@ -97,7 +107,7 @@ class FlowEntitiesService {
                     markersMap.set(hash, e.edge.markers.end);
                 }
             });
-            const connectionMarker = this.connection().connection.marker;
+            const connectionMarker = this.connection().settings.marker;
             if (connectionMarker) {
                 const hash = hashCode(JSON.stringify(connectionMarker));
                 markersMap.set(hash, connectionMarker);
@@ -126,6 +136,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+function getViewportForBounds(bounds, width, height, minZoom, maxZoom, padding) {
+    const xZoom = width / (bounds.width * (1 + padding));
+    const yZoom = height / (bounds.height * (1 + padding));
+    const zoom = Math.min(xZoom, yZoom);
+    const clampedZoom = clamp(zoom, minZoom, maxZoom);
+    const boundsCenterX = bounds.x + bounds.width / 2;
+    const boundsCenterY = bounds.y + bounds.height / 2;
+    const x = width / 2 - boundsCenterX * clampedZoom;
+    const y = height / 2 - boundsCenterY * clampedZoom;
+    return { x, y, zoom: clampedZoom };
+}
+function clamp(value, min = 0, max = 1) {
+    return Math.min(Math.max(value, min), max);
+}
+
+class FlowSettingsService {
+    constructor() {
+        this.entitiesSelectable = signal(true);
+        /**
+         * Global setting with handle positions. Nodes derive this value
+         *
+         * @deprecated
+         */
+        this.handlePositions = signal({ source: 'right', target: 'left' });
+        /**
+         * @see {VflowComponent.view}
+         */
+        this.view = signal([400, 400]);
+        /**
+         * Set based on view property. May change if view is 'auto'
+         */
+        this.computedFlowWidth = signal(0);
+        /**
+         * Set based on view property. May change if view is 'auto'
+         */
+        this.computedFlowHeight = signal(0);
+        this.minZoom = signal(0.5);
+        this.maxZoom = signal(3);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService, decorators: [{
+            type: Injectable
+        }] });
+
+class ViewportService {
+    constructor() {
+        this.entitiesService = inject(FlowEntitiesService);
+        this.flowSettingsService = inject(FlowSettingsService);
+        /**
+         * Internal signal that accepts value from user by lib api
+         * When this signal changes, lib sets new view state and update readableViewport signal
+         */
+        this.writableViewport = signal({
+            changeType: 'initial',
+            state: ViewportService.getDefaultViewport(),
+            duration: 0
+        });
+        /**
+         * Public signal with viewport state. User can directly read from this signal. It's updated by:
+         * - user events on flow
+         * - writableViewport signal
+         */
+        this.readableViewport = signal(ViewportService.getDefaultViewport());
+    }
+    /**
+     * The default value used by d3, just copy it here
+     *
+     * @returns default viewport value
+     */
+    static getDefaultViewport() { return { zoom: 1, x: 0, y: 0 }; }
+    // TODO: add writableViewportWithConstraints (to apply min zoom/max zoom values)
+    fitView(options = { padding: .1, duration: 0, nodes: [] }) {
+        const nodes = this.getBoundsNodes(options.nodes ?? []);
+        const state = getViewportForBounds(getNodesBounds(nodes), this.flowSettingsService.computedFlowWidth(), this.flowSettingsService.computedFlowHeight(), this.flowSettingsService.minZoom(), this.flowSettingsService.maxZoom(), options.padding ?? .1);
+        const duration = options.duration ?? 0;
+        this.writableViewport.set({ changeType: 'absolute', state, duration });
+    }
+    getBoundsNodes(nodeIds) {
+        return !nodeIds?.length
+            // If nodes option not passed or the list is empty, then get fit the whole view
+            ? this.entitiesService.nodes()
+            // Otherwise fit to specific nodes
+            : nodeIds
+                .map(nodeId => this.entitiesService.nodes().find(({ node }) => node.id === nodeId))
+                .filter((node) => !!node);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService, decorators: [{
+            type: Injectable
+        }] });
+
+function isDefined(data) {
+    return data !== undefined;
+}
+
+class RootSvgReferenceDirective {
+    constructor() {
+        this.element = inject(ElementRef).nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootSvgReferenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootSvgReferenceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'svg[rootSvgRef]'
+                }]
+        }] });
+
 class SelectionService {
     constructor() {
         this.flowEntitiesService = inject(FlowEntitiesService);
@@ -172,6 +295,7 @@ class MapContextDirective {
         this.host = inject(ElementRef).nativeElement;
         this.selectionService = inject(SelectionService);
         this.viewportService = inject(ViewportService);
+        this.flowSettingsService = inject(FlowSettingsService);
         this.rootSvgSelection = select(this.rootSvg);
         this.zoomableSelection = select(this.host);
         this.viewportForSelection = {};
@@ -184,19 +308,25 @@ class MapContextDirective {
             }
             // If only zoom provided
             if (isDefined(state.zoom) && (!isDefined(state.x) && !isDefined(state.y))) {
-                this.rootSvgSelection.call(this.zoomBehavior.scaleTo, state.zoom);
+                this.rootSvgSelection
+                    .transition().duration(viewport.duration)
+                    .call(this.zoomBehavior.scaleTo, state.zoom);
                 return;
             }
             // If only pan provided
             if ((isDefined(state.x) && isDefined(state.y)) && !isDefined(state.zoom)) {
                 // remain same zoom value
                 const zoom = untracked(this.viewportService.readableViewport).zoom;
-                this.rootSvgSelection.call(this.zoomBehavior.transform, zoomIdentity.translate(state.x, state.y).scale(zoom));
+                this.rootSvgSelection
+                    .transition().duration(viewport.duration)
+                    .call(this.zoomBehavior.transform, zoomIdentity.translate(state.x, state.y).scale(zoom));
                 return;
             }
             // If whole viewort state provided
             if (isDefined(state.x) && isDefined(state.y) && isDefined(state.zoom)) {
-                this.rootSvgSelection.call(this.zoomBehavior.transform, zoomIdentity.translate(state.x, state.y).scale(state.zoom));
+                this.rootSvgSelection
+                    .transition().duration(viewport.duration)
+                    .call(this.zoomBehavior.transform, zoomIdentity.translate(state.x, state.y).scale(state.zoom));
                 return;
             }
         }, { allowSignalWrites: true });
@@ -208,7 +338,7 @@ class MapContextDirective {
     }
     ngOnInit() {
         this.zoomBehavior = zoom()
-            .scaleExtent([this.minZoom, this.maxZoom])
+            .scaleExtent([this.flowSettingsService.minZoom(), this.flowSettingsService.maxZoom()])
             .on('start', (event) => this.onD3zoomStart(event))
             .on('zoom', (event) => this.handleZoom(event))
             .on('end', (event) => this.onD3zoomEnd(event));
@@ -230,16 +360,12 @@ class MapContextDirective {
         this.selectionService.setViewport(this.viewportForSelection);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MapContextDirective, selector: "g[mapContext]", inputs: { minZoom: "minZoom", maxZoom: "maxZoom" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MapContextDirective, selector: "g[mapContext]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapContextDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'g[mapContext]' }]
-        }], propDecorators: { minZoom: [{
-                type: Input
-            }], maxZoom: [{
-                type: Input
-            }] } });
+        }] });
 const mapTransformToViewportState = (transform) => ({ zoom: transform.k, x: transform.x, y: transform.y });
 const evTarget = (anyEvent) => {
     if (anyEvent instanceof Event && anyEvent.target instanceof Element) {
@@ -385,14 +511,14 @@ class FlowStatusService {
     setIdleStatus() {
         this.status.set({ state: 'idle', payload: null });
     }
-    setConnectionStartStatus(sourceNode, sourceHandle) {
-        this.status.set({ state: 'connection-start', payload: { sourceNode, sourceHandle } });
+    setConnectionStartStatus(source, sourceHandle) {
+        this.status.set({ state: 'connection-start', payload: { source, sourceHandle } });
     }
-    setConnectionValidationStatus(valid, sourceNode, targetNode, sourceHandle, targetHandle) {
-        this.status.set({ state: 'connection-validation', payload: { sourceNode, targetNode, sourceHandle, targetHandle, valid } });
+    setConnectionValidationStatus(valid, source, target, sourceHandle, targetHandle) {
+        this.status.set({ state: 'connection-validation', payload: { source, target, sourceHandle, targetHandle, valid } });
     }
-    setConnectionEndStatus(sourceNode, targetNode, sourceHandle, targetHandle) {
-        this.status.set({ state: 'connection-end', payload: { sourceNode, targetNode, sourceHandle, targetHandle } });
+    setConnectionEndStatus(source, target, sourceHandle, targetHandle) {
+        this.status.set({ state: 'connection-end', payload: { source, target, sourceHandle, targetHandle } });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowStatusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowStatusService }); }
@@ -415,6 +541,36 @@ function batchStatusChanges(...changes) {
     }
 }
 
+/**
+ * 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() {
         /**
@@ -431,18 +587,96 @@ class ConnectionControllerDirective {
         this.connectEffect = effect(() => {
             const status = this.statusService.status();
             if (status.state === 'connection-end') {
-                const sourceModel = status.payload.sourceNode;
-                const targetModel = status.payload.targetNode;
-                const source = sourceModel.node.id;
-                const target = targetModel.node.id;
-                const sourceHandle = status.payload.sourceHandle.rawHandle.id;
-                const targetHandle = status.payload.targetHandle.rawHandle.id;
-                const connection = this.flowEntitiesService.connection();
-                if (connection.validator({ source, target, sourceHandle, targetHandle })) {
-                    this.onConnect.emit({ source, target, sourceHandle, targetHandle });
+                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(handle) {
+        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: "16.2.12", ngImport: i0, type: ConnectionControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ConnectionControllerDirective, isStandalone: true, selector: "[connectionController]", outputs: { onConnect: "onConnect" }, ngImport: i0 }); }
@@ -457,29 +691,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-class FlowSettingsService {
-    constructor() {
-        this.entitiesSelectable = signal(true);
-        /**
-         * Global setting with handle positions. Nodes derive this value
-         *
-         * @deprecated
-         */
-        this.handlePositions = signal({ source: 'right', target: 'left' });
-        /**
-         * @see {VflowComponent.view}
-         */
-        this.view = signal([400, 400]);
-        this.flowWidth = computed(() => this.view() === 'auto' ? '100%' : this.view()[0]);
-        this.flowHeight = computed(() => this.view() === 'auto' ? '100%' : this.view()[1]);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService, decorators: [{
-            type: Injectable
-        }] });
-
 class ComponentEventBusService {
     constructor() {
         this._event$ = new Subject();
@@ -832,7 +1043,7 @@ class NodesChangeService {
         this.changes$ = merge(this.nodesPositionChange$, this.nodeAddChange$, this.nodeRemoveChange$, this.nodeSelectedChange$).pipe(
         // this fixes a bug when on fire node event change,
         // you can't get valid list of detached edges
-        observeOn(asyncScheduler));
+        observeOn(animationFrameScheduler));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodesChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodesChangeService }); }
@@ -1040,34 +1251,145 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
-class HandleService {
+class RootPointerDirective {
     constructor() {
-        this.node = signal(null);
-    }
-    createHandle(newHandle) {
-        const node = this.node();
-        if (node) {
-            node.handles.update(handles => [...handles, newHandle]);
-        }
+        this.host = inject(ElementRef).nativeElement;
+        this.initialTouch$ = new Subject();
+        // TODO: do not emit if mouse not down
+        this.mouseMovement$ = fromEvent(this.host, 'mousemove').pipe(map(event => ({
+            x: event.clientX,
+            y: event.clientY,
+            originalEvent: event
+        })), observeOn(animationFrameScheduler), share());
+        this.touchMovement$ = merge(this.initialTouch$, fromEvent(this.host, 'touchmove')).pipe(tap((event) => event.preventDefault()), map((originalEvent) => {
+            const x = originalEvent.touches[0]?.clientX ?? 0;
+            const y = originalEvent.touches[0]?.clientY ?? 0;
+            const target = document.elementFromPoint(x, y);
+            return { x, y, target, originalEvent };
+        }), observeOn(animationFrameScheduler), share());
+        this.touchEnd$ = fromEvent(this.host, 'touchend').pipe(map((originalEvent) => {
+            const x = originalEvent.changedTouches[0]?.clientX ?? 0;
+            const y = originalEvent.changedTouches[0]?.clientY ?? 0;
+            const target = document.elementFromPoint(x, y);
+            return { x, y, target, originalEvent };
+        }), share());
+        this.pointerMovement$ = merge(this.mouseMovement$, this.touchMovement$);
     }
-    destroyHandle(handleToDestoy) {
-        const node = this.node();
-        if (node) {
-            node.handles.update(handles => handles.filter(handle => handle !== handleToDestoy));
-        }
+    /**
+     * We should know when user started a touch in order to not
+     * show old touch position when connection creation is started
+     */
+    setInitialTouch(event) {
+        this.initialTouch$.next(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootPointerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RootPointerDirective, selector: "svg[rootPointer]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootPointerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'svg[rootPointer]' }]
         }] });
 
-class HandleModel {
-    constructor(rawHandle, parentNode) {
-        this.rawHandle = rawHandle;
-        this.parentNode = parentNode;
-        this.strokeWidth = 2;
+class SpacePointContextDirective {
+    constructor() {
+        this.pointerMovementDirective = inject(RootPointerDirective);
+        this.rootSvg = inject(RootSvgReferenceDirective).element;
+        this.host = inject(ElementRef).nativeElement;
+        /**
+         * Signal with current mouse position in svg space
+         */
+        this.svgCurrentSpacePoint = computed(() => {
+            const movement = this.pointerMovement();
+            if (!movement) {
+                return { x: 0, y: 0 };
+            }
+            return this.documentPointToFlowPoint({
+                x: movement.x,
+                y: movement.y
+            });
+        });
+        this.pointerMovement = toSignal(this.pointerMovementDirective.pointerMovement$);
+    }
+    documentPointToFlowPoint(documentPoint) {
+        const point = this.rootSvg.createSVGPoint();
+        point.x = documentPoint.x;
+        point.y = documentPoint.y;
+        return point.matrixTransform(this.host.getScreenCTM().inverse());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpacePointContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpacePointContextDirective, selector: "g[spacePointContext]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpacePointContextDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'g[spacePointContext]' }]
+        }] });
+
+class HandleService {
+    constructor() {
+        this.node = signal(null);
+    }
+    createHandle(newHandle) {
+        const node = this.node();
+        if (node) {
+            node.handles.update(handles => [...handles, newHandle]);
+        }
+    }
+    destroyHandle(handleToDestoy) {
+        const node = this.node();
+        if (node) {
+            node.handles.update(handles => handles.filter(handle => handle !== handleToDestoy));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService, decorators: [{
+            type: Injectable
+        }] });
+
+function resizable(elems) {
+    return new Observable((subscriber) => {
+        let ro = new ResizeObserver((entries) => {
+            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;
+};
+
+function Microtask(target, key, descriptor) {
+    const originalMethod = descriptor.value;
+    descriptor.value = function (...args) {
+        queueMicrotask(() => {
+            originalMethod?.apply(this, args);
+        });
+    };
+    // Return the modified descriptor
+    return descriptor;
+}
+
+class HandleModel {
+    constructor(rawHandle, parentNode) {
+        this.rawHandle = rawHandle;
+        this.parentNode = parentNode;
+        this.strokeWidth = 2;
         /**
          * Pre-computed size for default handle, changed dynamically
          * for custom handles
@@ -1138,43 +1460,46 @@ class HandleModel {
     }
 }
 
-function resizable(elems) {
-    return new Observable((subscriber) => {
-        let ro = new ResizeObserver((entries) => {
-            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;
-};
-
-function Microtask(target, key, descriptor) {
-    const originalMethod = descriptor.value;
-    descriptor.value = function (...args) {
-        queueMicrotask(() => {
-            originalMethod?.apply(this, args);
-        });
-    };
-    // Return the modified descriptor
-    return descriptor;
+class HandleComponent {
+    constructor() {
+        this.injector = inject(Injector);
+        this.handleService = inject(HandleService);
+        this.element = inject(ElementRef).nativeElement;
+    }
+    ngOnInit() {
+        this.model = new HandleModel({
+            position: this.position,
+            type: this.type,
+            id: this.id,
+            parentReference: this.element.parentElement,
+            template: this.template
+        }, this.handleService.node());
+        this.handleService.createHandle(this.model);
+        requestAnimationFrame(() => this.model.updateParent());
+    }
+    ngOnDestroy() {
+        this.handleService.destroyHandle(this.model);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HandleComponent, selector: "handle", inputs: { position: "position", type: "type", id: "id", template: "template" }, ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
+__decorate([
+    InjectionContext
+], HandleComponent.prototype, "ngOnInit", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'handle', changeDetection: ChangeDetectionStrategy.OnPush, template: "" }]
+        }], propDecorators: { position: [{
+                type: Input,
+                args: [{ required: true }]
+            }], type: [{
+                type: Input,
+                args: [{ required: true }]
+            }], id: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], ngOnInit: [] } });
 
 class HandleSizeControllerDirective {
     constructor() {
@@ -1212,45 +1537,6 @@ function getChildStrokeWidth(element) {
     return 0;
 }
 
-class RootPointerDirective {
-    constructor() {
-        this.host = inject(ElementRef).nativeElement;
-        this.initialTouch$ = new Subject();
-        // TODO: do not emit if mouse not down
-        this.mouseMovement$ = fromEvent(this.host, 'mousemove').pipe(map(event => ({
-            x: event.clientX,
-            y: event.clientY,
-            originalEvent: event
-        })), observeOn(animationFrameScheduler), share());
-        this.touchMovement$ = merge(this.initialTouch$, fromEvent(this.host, 'touchmove')).pipe(tap((event) => event.preventDefault()), map((originalEvent) => {
-            const x = originalEvent.touches[0]?.clientX ?? 0;
-            const y = originalEvent.touches[0]?.clientY ?? 0;
-            const target = document.elementFromPoint(x, y);
-            return { x, y, target, originalEvent };
-        }), observeOn(animationFrameScheduler), share());
-        this.touchEnd$ = fromEvent(this.host, 'touchend').pipe(map((originalEvent) => {
-            const x = originalEvent.changedTouches[0]?.clientX ?? 0;
-            const y = originalEvent.changedTouches[0]?.clientY ?? 0;
-            const target = document.elementFromPoint(x, y);
-            return { x, y, target, originalEvent };
-        }), share());
-        this.pointerMovement$ = merge(this.mouseMovement$, this.touchMovement$);
-    }
-    /**
-     * We should know when user started a touch in order to not
-     * show old touch position when connection creation is started
-     */
-    setInitialTouch(event) {
-        this.initialTouch$.next(event);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootPointerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RootPointerDirective, selector: "svg[rootPointer]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootPointerDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'svg[rootPointer]' }]
-        }] });
-
 class PointerDirective {
     constructor() {
         this.hostElement = inject(ElementRef).nativeElement;
@@ -1336,28 +1622,27 @@ class NodeComponent {
         this.handleService = inject(HandleService);
         this.draggableService = inject(DraggableService);
         this.flowStatusService = inject(FlowStatusService);
-        this.flowEntitiesService = inject(FlowEntitiesService);
         this.nodeRenderingService = inject(NodeRenderingService);
         this.flowSettingsService = inject(FlowSettingsService);
         this.selectionService = inject(SelectionService);
         this.hostRef = inject(ElementRef);
+        this.connectionController = inject(ConnectionControllerDirective);
         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.subscription = new Subscription();
     }
     ngOnInit() {
         this.handleService.node.set(this.nodeModel);
         this.draggableService.toggleDraggable(this.hostRef.nativeElement, this.nodeModel);
-        const sub = this.nodeModel.handles$
-            .pipe(switchMap((handles) => resizable(handles.map(h => h.parentReference))
-            .pipe(map(() => handles))), tap((handles) => handles.forEach(h => h.updateParent())))
+        this.nodeModel.handles$
+            .pipe(switchMap((handles) => resizable(handles.map(h => h.parentReference)).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();
-        this.subscription.add(sub);
     }
     ngAfterViewInit() {
-        this.setInitialHandles();
         if (this.nodeModel.node.type === 'default') {
             this.nodeModel.size.set({
                 width: this.nodeModel.node.width ?? NodeModel.defaultTypeSize.width,
@@ -1365,69 +1650,30 @@ class NodeComponent {
             });
         }
         if (this.nodeModel.node.type === 'html-template' || this.nodeModel.isComponentType) {
-            const sub = resizable([this.htmlWrapperRef.nativeElement])
+            resizable([this.htmlWrapperRef.nativeElement])
                 .pipe(startWith(null), tap(() => {
                 const width = this.htmlWrapperRef.nativeElement.clientWidth;
                 const height = this.htmlWrapperRef.nativeElement.clientHeight;
                 this.nodeModel.size.set({ width, height });
-            })).subscribe();
-            this.subscription.add(sub);
+            }), takeUntilDestroyed()).subscribe();
         }
     }
     ngOnDestroy() {
         this.draggableService.destroy(this.hostRef.nativeElement);
-        this.subscription.unsubscribe();
     }
     startConnection(event, handle) {
         // ignore drag by stopping propagation
         event.stopPropagation();
-        this.flowStatusService.setConnectionStartStatus(this.nodeModel, handle);
+        this.connectionController.startConnection(handle);
     }
-    endConnection() {
-        const status = this.flowStatusService.status();
-        if (status.state === 'connection-validation') {
-            const sourceNode = status.payload.sourceNode;
-            const targetNode = this.nodeModel;
-            const sourceHandle = status.payload.sourceHandle;
-            const targetHandle = status.payload.targetHandle;
-            batchStatusChanges(
-            // call to create connection
-            () => this.flowStatusService.setConnectionEndStatus(sourceNode, targetNode, sourceHandle, targetHandle), 
-            // when connection created, we need go back to idle status
-            () => this.flowStatusService.setIdleStatus());
-        }
+    validateConnection(handle) {
+        this.connectionController.validateConnection(handle);
     }
-    /**
-     * TODO srp
-     */
-    validateTargetHandle(targetHandle) {
-        const status = this.flowStatusService.status();
-        if (status.state === 'connection-start') {
-            const sourceNode = status.payload.sourceNode;
-            const sourceHandle = status.payload.sourceHandle;
-            const source = sourceNode.node.id;
-            const targetNode = this.nodeModel;
-            const target = targetNode.node.id;
-            const valid = this.flowEntitiesService.connection().validator({
-                source,
-                target,
-                sourceHandle: sourceHandle.rawHandle.id,
-                targetHandle: targetHandle.rawHandle.id
-            });
-            targetHandle.state.set(valid ? 'valid' : 'invalid');
-            this.flowStatusService.setConnectionValidationStatus(valid, sourceNode, targetNode, sourceHandle, targetHandle);
-        }
+    resetValidateConnection(targetHandle) {
+        this.connectionController.resetValidateConnection(targetHandle);
     }
-    /**
-     * TODO srp
-     */
-    resetValidateTargetHandle(targetHandle) {
-        targetHandle.state.set('idle');
-        // drop back to start status
-        const status = this.flowStatusService.status();
-        if (status.state === 'connection-validation') {
-            this.flowStatusService.setConnectionStartStatus(status.payload.sourceNode, status.payload.sourceHandle);
-        }
+    endConnection(handle) {
+        this.connectionController.endConnection(handle);
     }
     pullNode() {
         this.nodeRenderingService.pullNode(this.nodeModel);
@@ -1437,32 +1683,20 @@ class NodeComponent {
             this.selectionService.select(this.nodeModel);
         }
     }
-    setInitialHandles() {
-        if (this.nodeModel.node.type === 'default') {
-            this.handleService.createHandle(new HandleModel({
-                position: this.nodeModel.sourcePosition(),
-                type: 'source',
-                parentReference: this.htmlWrapperRef.nativeElement
-            }, this.nodeModel));
-            this.handleService.createHandle(new HandleModel({
-                position: this.nodeModel.targetPosition(),
-                type: 'target',
-                parentReference: this.htmlWrapperRef.nativeElement
-            }, this.nodeModel));
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "g[node]", inputs: { nodeModel: "nodeModel", nodeHtmlTemplate: "nodeHtmlTemplate" }, providers: [HandleService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], ngImport: i0, template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n    [innerHTML]=\"nodeModel.node.text ?? ''\"\n  ></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (pointerEnd)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (pointerEnd)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"handle.rawHandle.type === 'target' && showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(); resetValidateTargetHandle(handle)\"\n    (pointerOver)=\"validateTargetHandle(handle)\"\n    (pointerOut)=\"resetValidateTargetHandle(handle)\"\n  />\n</ng-container>\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "g[node]", inputs: { nodeModel: "nodeModel", nodeHtmlTemplate: "nodeHtmlTemplate" }, providers: [HandleService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], ngImport: i0, template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n  >\n    <div [outerHTML]=\"nodeModel.node.text ?? ''\"></div>\n\n    <handle type=\"source\" [position]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n    (pointerOver)=\"validateConnection(handle)\"\n    (pointerOut)=\"resetValidateConnection(handle)\"\n  />\n</ng-container>\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
-    Microtask
-], NodeComponent.prototype, "ngAfterViewInit", null);
+    InjectionContext
+], NodeComponent.prototype, "ngOnInit", null);
 __decorate([
+    Microtask // TODO (performance) check if we need microtask here
+    ,
     InjectionContext
-], NodeComponent.prototype, "setInitialHandles", null);
+], NodeComponent.prototype, "ngAfterViewInit", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService], template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n    [innerHTML]=\"nodeModel.node.text ?? ''\"\n  ></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (pointerEnd)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (pointerEnd)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"handle.rawHandle.type === 'target' && showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(); resetValidateTargetHandle(handle)\"\n    (pointerOver)=\"validateTargetHandle(handle)\"\n    (pointerOut)=\"resetValidateTargetHandle(handle)\"\n  />\n</ng-container>\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
+            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService], template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n  >\n    <div [outerHTML]=\"nodeModel.node.text ?? ''\"></div>\n\n    <handle type=\"source\" [position]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n    (pointerOver)=\"validateConnection(handle)\"\n    (pointerOut)=\"resetValidateConnection(handle)\"\n  />\n</ng-container>\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
         }], propDecorators: { nodeModel: [{
                 type: Input
             }], nodeHtmlTemplate: [{
@@ -1473,7 +1707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], htmlWrapperRef: [{
                 type: ViewChild,
                 args: ['htmlWrapper']
-            }], ngAfterViewInit: [], setInitialHandles: [] } });
+            }], ngOnInit: [], ngAfterViewInit: [] } });
 
 class EdgeLabelComponent {
     constructor() {
@@ -1578,34 +1812,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class SpacePointContextDirective {
-    constructor() {
-        this.pointerMovementDirective = inject(RootPointerDirective);
-        this.rootSvg = inject(RootSvgReferenceDirective).element;
-        this.host = inject(ElementRef).nativeElement;
-        /**
-         * Signal with current mouse position in svg space
-         */
-        this.svgCurrentSpacePoint = computed(() => {
-            const movement = this.pointerMovement();
-            if (!movement) {
-                return { x: 0, y: 0 };
-            }
-            const point = this.rootSvg.createSVGPoint();
-            point.x = movement.x;
-            point.y = movement.y;
-            return point.matrixTransform(this.host.getScreenCTM().inverse());
-        });
-        this.pointerMovement = toSignal(this.pointerMovementDirective.pointerMovement$);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpacePointContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpacePointContextDirective, selector: "g[spacePointContext]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpacePointContextDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'g[spacePointContext]' }]
-        }] });
-
 class ConnectionComponent {
     constructor() {
         this.flowStatusService = inject(FlowStatusService);
@@ -1643,7 +1849,7 @@ class ConnectionComponent {
             return null;
         });
         this.markerUrl = computed(() => {
-            const marker = this.model.connection.marker;
+            const marker = this.model.settings.marker;
             if (marker) {
                 return `url(#${hashCode(JSON.stringify(marker))})`;
             }
@@ -1784,11 +1990,11 @@ class BackgroundComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: BackgroundComponent, selector: "g[background]", inputs: { background: ["background", "background", transform] }, ngImport: i0, template: "<ng-container *ngIf=\"backgroundSignal().type === 'dots'\">\n  <svg:pattern\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n  >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n    />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n  />\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: BackgroundComponent, selector: "g[background]", inputs: { background: ["background", "background", transform] }, ngImport: i0, template: "<ng-container *ngIf=\"backgroundSignal().type === 'dots'\">\n  <svg:pattern\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n  >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n    />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n  />\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackgroundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'g[background]', template: "<ng-container *ngIf=\"backgroundSignal().type === 'dots'\">\n  <svg:pattern\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n  >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n    />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n  />\n</ng-container>\n" }]
+            args: [{ selector: 'g[background]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"backgroundSignal().type === 'dots'\">\n  <svg:pattern\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n  >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n    />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n  />\n</ng-container>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { background: [{
                 type: Input,
                 args: [{ required: true, transform }]
@@ -1825,6 +2031,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['document:touchend']
             }] } });
 
+class FlowSizeControllerDirective {
+    constructor() {
+        this.host = inject(ElementRef);
+        this.flowSettingsService = inject(FlowSettingsService);
+        this.flowWidth = 0;
+        this.flowHeight = 0;
+        effect(() => {
+            const view = this.flowSettingsService.view();
+            this.flowWidth = view === 'auto' ? '100%' : view[0];
+            this.flowHeight = view === 'auto' ? '100%' : view[1];
+        });
+        resizable([this.host.nativeElement]).pipe(tap(([entry]) => {
+            this.flowSettingsService.computedFlowWidth.set(entry.contentRect.width);
+            this.flowSettingsService.computedFlowHeight.set(entry.contentRect.height);
+        }), takeUntilDestroyed()).subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]", host: { properties: { "attr.width": "this.flowWidth", "attr.height": "this.flowHeight" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSizeControllerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'svg[flowSizeController]' }]
+        }], ctorParameters: function () { return []; }, propDecorators: { flowWidth: [{
+                type: HostBinding,
+                args: ['attr.width']
+            }], flowHeight: [{
+                type: HostBinding,
+                args: ['attr.height']
+            }] } });
+
 const connectionControllerHostDirective = {
     directive: ConnectionControllerDirective,
     outputs: ['onConnect']
@@ -1871,14 +2107,6 @@ class VflowComponent {
         this.flowSettingsService = inject(FlowSettingsService);
         this.componentEventBusService = inject(ComponentEventBusService);
         this.injector = inject(Injector);
-        /**
-         * Minimum zoom value
-         */
-        this.minZoom = 0.5;
-        /**
-         * Maximum zoom value
-         */
-        this.maxZoom = 3;
         /**
          * Background for flow
          */
@@ -1923,8 +2151,6 @@ class VflowComponent {
          */
         this.edgesChange$ = this.edgesChangeService.changes$;
         // #endregion
-        this.flowWidth = this.flowSettingsService.flowWidth;
-        this.flowHeight = this.flowSettingsService.flowHeight;
         this.markers = this.flowEntitiesService.markers;
     }
     // #endregion
@@ -1939,6 +2165,18 @@ class VflowComponent {
     set view(view) {
         this.flowSettingsService.view.set(view);
     }
+    /**
+     * Minimum zoom value
+     */
+    set minZoom(value) {
+        this.flowSettingsService.minZoom.set(value);
+    }
+    /**
+     * Maximum zoom value
+     */
+    set maxZoom(value) {
+        this.flowSettingsService.maxZoom.set(value);
+    }
     /**
      * Object that controls flow direction.
      *
@@ -1990,7 +2228,7 @@ class VflowComponent {
      * @param viewport viewport state
      */
     viewportTo(viewport) {
-        this.viewportService.writableViewport.set({ changeType: 'absolute', state: viewport });
+        this.viewportService.writableViewport.set({ changeType: 'absolute', state: viewport, duration: 0 });
     }
     /**
      * Change zoom
@@ -1998,7 +2236,7 @@ class VflowComponent {
      * @param zoom zoom value
      */
     zoomTo(zoom) {
-        this.viewportService.writableViewport.set({ changeType: 'absolute', state: { zoom } });
+        this.viewportService.writableViewport.set({ changeType: 'absolute', state: { zoom }, duration: 0 });
     }
     /**
      * Move to specified coordinate
@@ -2006,7 +2244,10 @@ class VflowComponent {
      * @param point point where to move
      */
     panTo(point) {
-        this.viewportService.writableViewport.set({ changeType: 'absolute', state: point });
+        this.viewportService.writableViewport.set({ changeType: 'absolute', state: point, duration: 0 });
+    }
+    fitView(options) {
+        this.viewportService.fitView(options);
     }
     /**
      * Get node by id
@@ -2022,6 +2263,12 @@ class VflowComponent {
     getDetachedEdges() {
         return this.flowEntitiesService.getDetachedEdges().map(e => e.edge);
     }
+    /**
+     * Convert point received from document to point on the flow
+     */
+    documentPointToFlowPoint(point) {
+        return this.spacePointContext.documentPointToFlowPoint(point);
+    }
     // #endregion
     trackNodes(idx, { node }) {
         return node;
@@ -2041,7 +2288,7 @@ class VflowComponent {
             SelectionService,
             FlowSettingsService,
             ComponentEventBusService
-        ], queries: [{ propertyName: "nodeHtmlDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true }], 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.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  class=\"root-svg\"\n  #flow\n  [attr.width]=\"flowWidth()\"\n  [attr.height]=\"flowHeight()\"\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g [background]=\"background\"/>\n\n  <svg:g\n    mapContext\n    spacePointContext\n    [minZoom]=\"minZoom\"\n    [maxZoom]=\"maxZoom\"\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <!-- Edges  -->\n    <svg:g\n      *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n      edge\n      [model]=\"model\"\n      [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n      [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n    />\n\n    <!-- Nodes -->\n    <svg:g\n      *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n      node\n      [nodeModel]=\"model\"\n      [nodeHtmlTemplate]=\"nodeHtmlDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["nodeModel", "nodeHtmlTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]", inputs: ["background"] }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]", inputs: ["minZoom", "maxZoom"] }, { kind: "directive", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "nodeHtmlDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true }], hostDirectives: [{ directive: ConnectionControllerDirective, outputs: ["onConnect", "onConnect"] }, { directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  flowSizeController\n  class=\"root-svg\"\n  #flow\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g [background]=\"background\"/>\n\n  <svg:g\n    mapContext\n    spacePointContext\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <!-- Edges  -->\n    <svg:g\n      *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n      edge\n      [model]=\"model\"\n      [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n      [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n    />\n\n    <!-- Nodes -->\n    <svg:g\n      *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n      node\n      [nodeModel]=\"model\"\n      [nodeHtmlTemplate]=\"nodeHtmlDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["nodeModel", "nodeHtmlTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]", inputs: ["background"] }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { kind: "directive", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }, { kind: "directive", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
@@ -2059,7 +2306,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ], hostDirectives: [
                         connectionControllerHostDirective,
                         changesControllerHostDirective
-                    ], template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  class=\"root-svg\"\n  #flow\n  [attr.width]=\"flowWidth()\"\n  [attr.height]=\"flowHeight()\"\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g [background]=\"background\"/>\n\n  <svg:g\n    mapContext\n    spacePointContext\n    [minZoom]=\"minZoom\"\n    [maxZoom]=\"maxZoom\"\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <!-- Edges  -->\n    <svg:g\n      *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n      edge\n      [model]=\"model\"\n      [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n      [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n    />\n\n    <!-- Nodes -->\n    <svg:g\n      *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n      node\n      [nodeModel]=\"model\"\n      [nodeHtmlTemplate]=\"nodeHtmlDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
+                    ], template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  flowSizeController\n  class=\"root-svg\"\n  #flow\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g [background]=\"background\"/>\n\n  <svg:g\n    mapContext\n    spacePointContext\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <!-- Edges  -->\n    <svg:g\n      *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n      edge\n      [model]=\"model\"\n      [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n      [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n    />\n\n    <!-- Nodes -->\n    <svg:g\n      *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n      node\n      [nodeModel]=\"model\"\n      [nodeHtmlTemplate]=\"nodeHtmlDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
         }], propDecorators: { view: [{
                 type: Input
             }], minZoom: [{
@@ -2097,49 +2344,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], mapContext: [{
                 type: ViewChild,
                 args: [MapContextDirective]
+            }], spacePointContext: [{
+                type: ViewChild,
+                args: [SpacePointContextDirective]
             }] } });
 
-class HandleComponent {
-    constructor() {
-        this.injector = inject(Injector);
-        this.handleService = inject(HandleService);
-        this.element = inject(ElementRef).nativeElement;
-    }
-    ngOnInit() {
-        this.model = new HandleModel({
-            position: this.position,
-            type: this.type,
-            id: this.id,
-            parentReference: this.element.parentElement,
-            template: this.template
-        }, this.handleService.node());
-        this.handleService.createHandle(this.model);
-        queueMicrotask(() => this.model.updateParent());
-    }
-    ngOnDestroy() {
-        this.handleService.destroyHandle(this.model);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HandleComponent, selector: "handle", inputs: { position: "position", type: "type", id: "id", template: "template" }, ngImport: i0, template: "" }); }
-}
-__decorate([
-    InjectionContext
-], HandleComponent.prototype, "ngOnInit", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'handle', template: "" }]
-        }], propDecorators: { position: [{
-                type: Input,
-                args: [{ required: true }]
-            }], type: [{
-                type: Input,
-                args: [{ required: true }]
-            }], id: [{
-                type: Input
-            }], template: [{
-                type: Input
-            }], ngOnInit: [] } });
-
 class SelectableDirective {
     constructor() {
         this.flowSettingsService = inject(FlowSettingsService);
@@ -2191,7 +2400,8 @@ const directives = [
     HandleSizeControllerDirective,
     SelectableDirective,
     PointerDirective,
-    RootPointerDirective
+    RootPointerDirective,
+    FlowSizeControllerDirective
 ];
 const templateDirectives = [
     NodeHtmlTemplateDirective,
@@ -2216,7 +2426,8 @@ class VflowModule {
             HandleSizeControllerDirective,
             SelectableDirective,
             PointerDirective,
-            RootPointerDirective, NodeHtmlTemplateDirective,
+            RootPointerDirective,
+            FlowSizeControllerDirective, NodeHtmlTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
             ConnectionTemplateDirective,