ngx-vflow 0.1.0

package/fesm2022/ngx-vflow.mjs

@@ -0,0 +1,1332 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { signal, Injectable, inject, ElementRef, Directive, effect, Input, TemplateRef, computed, EventEmitter, Output, untracked, Component, ChangeDetectionStrategy, ViewChild, HostListener, Injector, runInInjectionContext, ContentChild, NgModule } from '@angular/core';
+import { select } from 'd3-selection';
+import { zoomIdentity, zoom } from 'd3-zoom';
+import { drag } from 'd3-drag';
+import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { switchMap, merge, skip, map, pairwise, filter, observeOn, asyncScheduler, tap, fromEvent } from 'rxjs';
+import { path } from 'd3-path';
+
+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 }); }
+}
+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 MapContextDirective {
+    constructor() {
+        this.rootSvg = inject(RootSvgReferenceDirective).element;
+        this.host = inject(ElementRef).nativeElement;
+        this.viewportService = inject(ViewportService);
+        this.rootSvgSelection = select(this.rootSvg);
+        this.zoomableSelection = select(this.host);
+        // under the hood this effect triggers handleZoom, so error throws without this flag
+        // TODO: hack with timer fixes wrong node scaling (handle positions not matched with content size)
+        this.manualViewportChangeEffect = effect(() => setTimeout(() => {
+            const viewport = this.viewportService.writableViewport();
+            const state = viewport.state;
+            if (viewport.changeType === 'initial') {
+                return;
+            }
+            // If only zoom provided
+            if (isDefined(state.zoom) && (!isDefined(state.x) && !isDefined(state.y))) {
+                this.rootSvgSelection.call(this.zoomBehavior.scaleTo, state.zoom);
+                return;
+            }
+            // If only pan provided
+            if ((isDefined(state.x) && isDefined(state.y)) && !isDefined(state.zoom)) {
+                this.rootSvgSelection.call(this.zoomBehavior.translateTo, state.x, state.y);
+                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));
+                return;
+            }
+        }), { allowSignalWrites: true });
+        this.handleZoom = ({ transform }) => {
+            // update public signal for user to read
+            this.viewportService.readableViewport.set({ zoom: transform.k, x: transform.x, y: transform.y });
+            this.zoomableSelection.attr('transform', transform.toString());
+        };
+    }
+    ngOnInit() {
+        this.zoomBehavior = zoom()
+            .scaleExtent([this.minZoom, this.maxZoom])
+            .on('zoom', this.handleZoom);
+        this.rootSvgSelection.call(this.zoomBehavior);
+    }
+    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 }); }
+}
+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 round = (num) => Math.round(num * 100) / 100;
+
+class DraggableService {
+    /**
+     * Enable or disable draggable behavior for element.
+     * model contains draggable flag which declares if draggable should be enabled or not
+     *
+     * @param element target element for toggling draggable
+     * @param model model with data for this element
+     */
+    toggleDraggable(element, model) {
+        const d3Element = select(element);
+        const behavior = model.draggable
+            ? this.getDragBehavior(model)
+            : this.getIgnoreDragBehavior();
+        d3Element.call(behavior);
+    }
+    /**
+     * TODO: not shure if this work, need to check
+     *
+     * @param element
+     */
+    destroy(element) {
+        select(element).on('.drag', null);
+    }
+    /**
+     * Node drag behavior. Updated node's coordinate according to dragging
+     *
+     * @param model
+     * @returns
+     */
+    getDragBehavior(model) {
+        let deltaX;
+        let deltaY;
+        return drag()
+            .on('start', (event) => {
+            deltaX = model.point().x - event.x;
+            deltaY = model.point().y - event.y;
+        })
+            .on('drag', (event) => {
+            model.point.set({
+                x: round(event.x + deltaX),
+                y: round(event.y + deltaY)
+            });
+        });
+    }
+    /**
+     * Specify ignoring drag behavior. It's responsible for not moving the map when user tries to drag node
+     * with disabled drag behavior
+     */
+    getIgnoreDragBehavior() {
+        return drag()
+            .on('drag', (event) => {
+            event.sourceEvent.stopPropagation();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableService, decorators: [{
+            type: Injectable
+        }] });
+
+class EdgeTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EdgeTemplateDirective, selector: "ng-template[edge]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[edge]' }]
+        }] });
+class ConnectionTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ConnectionTemplateDirective, selector: "ng-template[connection]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectionTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[connection]' }]
+        }] });
+class EdgeLabelHtmlTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeLabelHtmlTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EdgeLabelHtmlTemplateDirective, selector: "ng-template[edgeLabelHtml]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeLabelHtmlTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[edgeLabelHtml]' }]
+        }] });
+class NodeHtmlTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeHtmlTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: NodeHtmlTemplateDirective, selector: "ng-template[nodeHtml]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeHtmlTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[nodeHtml]' }]
+        }] });
+class HandleTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HandleTemplateDirective, selector: "ng-template[handle]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[handle]' }]
+        }] });
+
+function addNodesToEdges(nodes, edges) {
+    const nodesById = nodes.reduce((acc, n) => {
+        acc[n.node.id] = n;
+        return acc;
+    }, {});
+    edges.forEach(e => {
+        e.source = nodesById[e.edge.source];
+        e.target = nodesById[e.edge.target];
+    });
+}
+
+class FlowModel {
+    constructor() {
+        /**
+         * Global setting with handle positions. Nodes derive this value
+         */
+        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]);
+    }
+}
+
+class FlowStatusService {
+    constructor() {
+        this.status = signal({ state: 'idle', payload: null });
+    }
+    setIdleStatus() {
+        this.status.set({ state: 'idle', payload: null });
+    }
+    setConnectionStartStatus(sourceNode) {
+        this.status.set({ state: 'connection-start', payload: { sourceNode } });
+    }
+    setConnectionValidationStatus(sourceNode, targetNode, valid) {
+        this.status.set({ state: 'connection-validation', payload: { sourceNode, targetNode, valid } });
+    }
+    setConnectionEndStatus(sourceNode, targetNode) {
+        this.status.set({ state: 'connection-end', payload: { sourceNode, targetNode } });
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.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()));
+    }
+}
+
+class ConnectionModel {
+    constructor(connection) {
+        this.connection = connection;
+        this.curve = connection.curve ?? 'bezier';
+        this.type = connection.type ?? 'default';
+        this.validator = connection.validator ?? (() => true);
+    }
+}
+
+function hashCode(str) {
+    return str.split('').reduce((a, b) => {
+        a = ((a << 5) - a) + b.charCodeAt(0);
+        return a & a;
+    }, 0);
+}
+
+class FlowEntitiesService {
+    constructor() {
+        this.nodes = signal([], {
+            // empty arrays considered equal, other arrays may not be equal
+            equal: (a, b) => !a.length && !b.length ? true : a === b
+        });
+        this.edges = signal([], {
+            // empty arrays considered equal, other arrays may not be equal
+            equal: (a, b) => !a.length && !b.length ? true : a === b
+        });
+        this.connection = signal(new ConnectionModel({}));
+        this.markers = computed(() => {
+            const markersMap = new Map();
+            this.validEdges().forEach(e => {
+                if (e.edge.markers?.start) {
+                    const hash = hashCode(JSON.stringify(e.edge.markers.start));
+                    markersMap.set(hash, e.edge.markers.start);
+                }
+                if (e.edge.markers?.end) {
+                    const hash = hashCode(JSON.stringify(e.edge.markers.end));
+                    markersMap.set(hash, e.edge.markers.end);
+                }
+            });
+            const connectionMarker = this.connection().connection.marker;
+            if (connectionMarker) {
+                const hash = hashCode(JSON.stringify(connectionMarker));
+                markersMap.set(hash, connectionMarker);
+            }
+            return markersMap;
+        });
+        this.validEdges = computed(() => {
+            const nodes = this.nodes();
+            return this.edges().filter(e => nodes.includes(e.source) && nodes.includes(e.target));
+        });
+    }
+    getNode(id) {
+        return this.nodes().find(({ node }) => node.id === id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowEntitiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowEntitiesService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowEntitiesService, decorators: [{
+            type: Injectable
+        }] });
+
+class ConnectionControllerDirective {
+    constructor() {
+        this.onConnect = new EventEmitter();
+        this.statusService = inject(FlowStatusService);
+        this.flowEntitiesService = inject(FlowEntitiesService);
+        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 connection = this.flowEntitiesService.connection();
+                if (connection.validator({ source, target })) {
+                    this.onConnect.emit({ source, target });
+                }
+            }
+        }, { allowSignalWrites: true });
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectionControllerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[connectionController]',
+                    standalone: true
+                }]
+        }], propDecorators: { onConnect: [{
+                type: Output
+            }] } });
+
+class NodeModel {
+    constructor(node) {
+        this.node = node;
+        this.point = signal({ x: 0, y: 0 });
+        this.point$ = toObservable(this.point);
+        this.size = signal({ width: 0, height: 0 });
+        this.pointTransform = computed(() => `translate(${this.point().x}, ${this.point().y})`);
+        this.sourceOffset = computed(() => {
+            const { width, height } = this.size();
+            switch (this.sourcePosition()) {
+                case 'left': return { x: 0, y: height / 2 };
+                case 'right': return { x: width, y: height / 2 };
+                case 'top': return { x: width / 2, y: 0 };
+                case 'bottom': return { x: width / 2, y: height };
+            }
+        });
+        this.targetOffset = computed(() => {
+            const { width, height } = this.size();
+            switch (this.targetPosition()) {
+                case 'left': return { x: 0, y: (height / 2) };
+                case 'right': return { x: width, y: height / 2 };
+                case 'top': return { x: width / 2, y: 0 };
+                case 'bottom': return { x: width / 2, y: height };
+            }
+        });
+        this.sourcePointAbsolute = computed(() => {
+            return {
+                x: this.point().x + this.sourceOffset().x + this.sourceHandleOffset().x,
+                y: this.point().y + this.sourceOffset().y + this.sourceHandleOffset().y
+            };
+        });
+        this.targetPointAbsolute = computed(() => {
+            return {
+                x: this.point().x + this.targetOffset().x + this.targetHandleOffset().x,
+                y: this.point().y + this.targetOffset().y + this.targetHandleOffset().y
+            };
+        });
+        // Now source and handle positions derived from parent flow
+        this.sourcePosition = computed(() => this.flow.handlePositions().source);
+        this.targetPosition = computed(() => this.flow.handlePositions().target);
+        this.sourceHandleSize = signal({ width: 0, height: 0 });
+        this.targetHandleSize = signal({ width: 0, height: 0 });
+        this.sourceHandleOffset = computed(() => {
+            switch (this.sourcePosition()) {
+                case 'left': return { x: -(this.sourceHandleSize().width / 2), y: 0 };
+                case 'right': return { x: this.sourceHandleSize().width / 2, y: 0 };
+                case 'top': return { x: 0, y: -(this.sourceHandleSize().height / 2) };
+                case 'bottom': return { x: 0, y: this.sourceHandleSize().height / 2 };
+            }
+        });
+        this.targetHandleOffset = computed(() => {
+            switch (this.targetPosition()) {
+                case 'left': return { x: -(this.targetHandleSize().width / 2), y: 0 };
+                case 'right': return { x: this.targetHandleSize().width / 2, y: 0 };
+                case 'top': return { x: 0, y: -(this.targetHandleSize().height / 2) };
+                case 'bottom': return { x: 0, y: this.targetHandleSize().height / 2 };
+            }
+        });
+        this.sourceOffsetAligned = computed(() => {
+            return {
+                x: this.sourceOffset().x - (this.sourceHandleSize().width / 2),
+                y: this.sourceOffset().y - (this.sourceHandleSize().height / 2),
+            };
+        });
+        this.targetOffsetAligned = computed(() => {
+            return {
+                x: this.targetOffset().x - (this.targetHandleSize().width / 2),
+                y: this.targetOffset().y - (this.targetHandleSize().height / 2),
+            };
+        });
+        this.draggable = true;
+        // disabled for configuration for now
+        this.magnetRadius = 20;
+        this.point.set(node.point);
+        if (isDefined(node.draggable))
+            this.draggable = node.draggable;
+    }
+    /**
+     * Bind parent flow model to node
+     *
+     * @param flow parent flow
+     */
+    bindFlow(flow) {
+        this.flow = flow;
+    }
+}
+
+class EdgeLabelModel {
+    constructor(edgeLabel) {
+        this.edgeLabel = edgeLabel;
+        this.size = signal({ width: 0, height: 0 });
+    }
+}
+
+/**
+ * Get point on line
+ *
+ * https://math.stackexchange.com/questions/563566/how-do-i-find-the-middle1-2-1-3-1-4-etc-of-a-line
+ */
+function getPointOnLineByRatio(start, end, ratio) {
+    return {
+        x: (1 - ratio) * start.x + ratio * end.x,
+        y: (1 - ratio) * start.y + ratio * end.y,
+    };
+}
+
+function straightPath(source, target, usingPoints = [false, false, false]) {
+    const [start, center, end] = usingPoints;
+    const nullPoint = { x: 0, y: 0 };
+    const path$1 = path();
+    path$1.moveTo(source.x, source.y);
+    path$1.lineTo(target.x, target.y);
+    return {
+        path: path$1.toString(),
+        points: {
+            start: start ? getPointOnLineByRatio(source, target, .15) : nullPoint,
+            center: center ? getPointOnLineByRatio(source, target, .50) : nullPoint,
+            end: end ? getPointOnLineByRatio(source, target, .85) : nullPoint,
+        }
+    };
+}
+
+function bezierPath(source, target, sourcePosition, targetPosition, usingPoints = [false, false, false]) {
+    const path$1 = path();
+    path$1.moveTo(source.x, source.y);
+    const distanceVector = { x: source.x - target.x, y: source.y - target.y };
+    const firstControl = calcControlPoint(source, sourcePosition, distanceVector);
+    const secondControl = calcControlPoint(target, targetPosition, distanceVector);
+    path$1.bezierCurveTo(firstControl.x, firstControl.y, secondControl.x, secondControl.y, target.x, target.y);
+    return getPathData(path$1, source, target, firstControl, secondControl, usingPoints);
+}
+/**
+ * Calculate control point based on provided point
+ *
+ * @param point relative this point control point is gonna be computed (the source or the target)
+ * @param pointPosition position of {point} on block
+ * @param distanceVector transmits the distance between the source and the target as x and y coordinates
+ */
+function calcControlPoint(point, pointPosition, distanceVector) {
+    const factorPoint = { x: 0, y: 0 };
+    switch (pointPosition) {
+        case 'top':
+            factorPoint.y = 1;
+            break;
+        case 'bottom':
+            factorPoint.y = -1;
+            break;
+        case 'right':
+            factorPoint.x = 1;
+            break;
+        case 'left':
+            factorPoint.x = -1;
+            break;
+    }
+    // TODO: explain name
+    const fullDistanceVector = {
+        x: distanceVector.x * Math.abs(factorPoint.x),
+        y: distanceVector.y * Math.abs(factorPoint.y),
+    };
+    // TODO: probably need to make this configurable
+    const curvature = 0.25;
+    // thanks colleagues from react/svelte world
+    // https://github.com/xyflow/xyflow/blob/f0117939bae934447fa7f232081f937169ee23b5/packages/system/src/utils/edges/bezier-edge.ts#L56
+    const controlOffset = curvature * 25 * Math.sqrt(Math.abs(fullDistanceVector.x + fullDistanceVector.y));
+    return {
+        x: point.x + factorPoint.x * controlOffset,
+        y: point.y - factorPoint.y * controlOffset,
+    };
+}
+function getPathData(path, source, target, firstControl, secondControl, usingPoints) {
+    const [start, center, end] = usingPoints;
+    const nullPoint = { x: 0, y: 0 };
+    return {
+        path: path.toString(),
+        points: {
+            start: start
+                ? getPointOnBezier(source, target, firstControl, secondControl, 0.1)
+                : nullPoint,
+            center: center
+                ? getPointOnBezier(source, target, firstControl, secondControl, 0.5)
+                : nullPoint,
+            end: end
+                ? getPointOnBezier(source, target, firstControl, secondControl, 0.9)
+                : nullPoint,
+        },
+    };
+}
+/**
+ * Get point on bezier curve by ratio
+ */
+function getPointOnBezier(sourcePoint, targetPoint, controlPoint1, controlPoint2, ratio) {
+    const fromSourceToFirstControl = getPointOnLineByRatio(sourcePoint, controlPoint1, ratio);
+    const fromFirstControlToSecond = getPointOnLineByRatio(controlPoint1, controlPoint2, ratio);
+    const fromSecondControlToTarget = getPointOnLineByRatio(controlPoint2, targetPoint, ratio);
+    return getPointOnLineByRatio(getPointOnLineByRatio(fromSourceToFirstControl, fromFirstControlToSecond, ratio), getPointOnLineByRatio(fromFirstControlToSecond, fromSecondControlToTarget, ratio), ratio);
+}
+
+class EdgeModel {
+    constructor(edge) {
+        this.edge = edge;
+        this.path = computed(() => {
+            const source = this.source.sourcePointAbsolute();
+            const target = this.target.targetPointAbsolute();
+            switch (this.curve) {
+                case 'straight':
+                    return straightPath(source, target, this.usingPoints);
+                case 'bezier':
+                    return bezierPath(source, target, this.source.sourcePosition(), this.target.targetPosition(), this.usingPoints);
+            }
+        });
+        this.edgeLabels = {};
+        this.type = edge.type ?? 'default';
+        this.curve = edge.curve ?? 'bezier';
+        if (edge.edgeLabels?.start)
+            this.edgeLabels.start = new EdgeLabelModel(edge.edgeLabels.start);
+        if (edge.edgeLabels?.center)
+            this.edgeLabels.center = new EdgeLabelModel(edge.edgeLabels.center);
+        if (edge.edgeLabels?.end)
+            this.edgeLabels.end = new EdgeLabelModel(edge.edgeLabels.end);
+        this.usingPoints = [!!this.edgeLabels.start, !!this.edgeLabels.center, !!this.edgeLabels.end];
+    }
+}
+
+class ReferenceKeeper {
+    /**
+     * Create new models for new node references and keep old models for old node references
+     */
+    static nodes(newNodes, oldNodeModels) {
+        const oldNodesMap = new Map();
+        oldNodeModels.forEach(model => oldNodesMap.set(model.node, model));
+        return newNodes.map(newNode => {
+            if (oldNodesMap.has(newNode))
+                return oldNodesMap.get(newNode);
+            else
+                return new NodeModel(newNode);
+        });
+    }
+    /**
+     * Create new models for new edge references and keep old models for old edge references
+     */
+    static edges(newEdges, oldEdgeModels) {
+        const oldEdgesMap = new Map();
+        oldEdgeModels.forEach(model => oldEdgesMap.set(model.edge, model));
+        return newEdges.map(newEdge => {
+            if (oldEdgesMap.has(newEdge))
+                return oldEdgesMap.get(newEdge);
+            else
+                return new EdgeModel(newEdge);
+        });
+    }
+}
+
+class NodesChangeService {
+    constructor() {
+        this.entitiesService = inject(FlowEntitiesService);
+        this.nodesPositionChange$ = toObservable(this.entitiesService.nodes)
+            .pipe(
+        // Check for nodes list change and watch for specific node from this list change its position
+        switchMap((nodes) => merge(...nodes.map(node => node.point$.pipe(
+        // skip initial position from signal
+        skip(1), map(() => node))))), 
+        // For now it's a single node, later this list will also be filled
+        // with child node position changes
+        map(changedNode => [
+            { type: 'position', id: changedNode.node.id, point: changedNode.point() }
+        ]));
+        this.nodeAddChange$ = toObservable(this.entitiesService.nodes)
+            .pipe(pairwise(), map(([oldList, newList]) => newList.filter(node => !oldList.includes(node))), filter((nodes) => !!nodes.length), map((nodes) => nodes.map(node => ({ type: 'add', id: node.node.id }))));
+        this.nodeRemoveChange$ = toObservable(this.entitiesService.nodes)
+            .pipe(pairwise(), map(([oldList, newList]) => oldList.filter(node => !newList.includes(node))), filter((nodes) => !!nodes.length), map((nodes) => nodes.map(node => ({ type: 'remove', id: node.node.id }))));
+        this.changes$ = merge(this.nodesPositionChange$, this.nodeAddChange$, this.nodeRemoveChange$);
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodesChangeService, decorators: [{
+            type: Injectable
+        }] });
+
+class EdgeChangesService {
+    constructor() {
+        this.entitiesService = inject(FlowEntitiesService);
+        this.edgeDetachedChange$ = toObservable(computed(() => {
+            const nodes = this.entitiesService.nodes();
+            const edges = untracked(this.entitiesService.edges);
+            return edges.filter(({ source, target }) => !nodes.includes(source) || !nodes.includes(target));
+        })).pipe(
+        // TODO check why there are 2 emits from single call inside computed
+        filter(edges => !!edges.length), map((edges) => edges.map(({ edge }) => ({ type: 'detached', id: edge.id }))));
+        this.edgeAddChange$ = toObservable(this.entitiesService.edges)
+            .pipe(pairwise(), map(([oldList, newList]) => {
+            return newList.filter(edge => !oldList.includes(edge));
+        }), filter(edges => !!edges.length), map((edges) => edges.map(({ edge }) => ({ type: 'add', id: edge.id }))));
+        this.edgeRemoveChange$ = toObservable(this.entitiesService.edges)
+            .pipe(pairwise(), map(([oldList, newList]) => {
+            return oldList.filter(edge => !newList.includes(edge));
+        }), filter(edges => !!edges.length), map((edges) => edges.map(({ edge }) => ({ type: 'remove', id: edge.id }))));
+        this.changes$ = merge(this.edgeDetachedChange$, this.edgeAddChange$, this.edgeRemoveChange$)
+            .pipe(
+        // this fixes the case when user gets 'deteched' changes
+        // and tries to delete these edges inside stream
+        // angular may ignore this change because [edges] input changed
+        // right after [nodes] input change
+        observeOn(asyncScheduler));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeChangesService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeChangesService, decorators: [{
+            type: Injectable
+        }] });
+
+class ChangesControllerDirective {
+    constructor() {
+        this.nodesChangeService = inject(NodesChangeService);
+        this.edgesChangeService = inject(EdgeChangesService);
+        this.onNodesChange = new EventEmitter();
+        this.onEdgesChange = new EventEmitter();
+        this.nodesChangeProxySubscription = this.nodesChangeService.changes$
+            .pipe(tap((changes) => this.onNodesChange.emit(changes)), takeUntilDestroyed())
+            .subscribe();
+        this.edgesChangeProxySubscription = this.edgesChangeService.changes$
+            .pipe(tap((changes) => this.onEdgesChange.emit(changes)), takeUntilDestroyed())
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChangesControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ChangesControllerDirective, isStandalone: true, selector: "[changesController]", outputs: { onNodesChange: "onNodesChange", onEdgesChange: "onEdgesChange" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChangesControllerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[changesController]',
+                    standalone: true
+                }]
+        }], propDecorators: { onNodesChange: [{
+                type: Output
+            }], onEdgesChange: [{
+                type: Output
+            }] } });
+
+class NodeComponent {
+    constructor() {
+        this.draggableService = inject(DraggableService);
+        this.flowStatusService = inject(FlowStatusService);
+        this.flowEntitiesService = inject(FlowEntitiesService);
+        this.hostRef = inject(ElementRef);
+        this.showMagnet = computed(() => this.flowStatusService.status().state === 'connection-start' ||
+            this.flowStatusService.status().state === 'connection-validation');
+        this.defaultHandleStrokeWidth = 2;
+        this.sourceHanldeState = signal('idle');
+        this.targetHandleState = signal('idle');
+        this.sourceHanldeStateReadonly = this.sourceHanldeState.asReadonly();
+        this.targetHanldeStateReadonly = this.targetHandleState.asReadonly();
+    }
+    ngOnInit() {
+        this.draggableService.toggleDraggable(this.hostRef.nativeElement, this.nodeModel);
+    }
+    ngAfterViewInit() {
+        // TODO remove microtask
+        queueMicrotask(() => {
+            if (this.nodeModel.node.type === 'default') {
+                const { width, height } = this.nodeContentRef.nativeElement.getBBox();
+                this.nodeModel.size.set({ width, height });
+            }
+            if (this.nodeModel.node.type === 'html-template') {
+                const width = this.htmlWrapperRef.nativeElement.clientWidth;
+                const height = this.htmlWrapperRef.nativeElement.clientHeight;
+                this.nodeModel.size.set({ width, height });
+            }
+            this.setSourceHandleSize();
+            this.setTargetHandleSize();
+        });
+    }
+    ngOnDestroy() {
+        this.draggableService.destroy(this.hostRef.nativeElement);
+    }
+    startConnection(event) {
+        // ignore drag by stopping propagation
+        event.stopPropagation();
+        this.flowStatusService.setConnectionStartStatus(this.nodeModel);
+    }
+    endConnection() {
+        const status = this.flowStatusService.status();
+        if (status.state === 'connection-validation') {
+            const sourceNode = status.payload.sourceNode;
+            const targetNode = this.nodeModel;
+            batchStatusChanges(
+            // call to create connection
+            () => this.flowStatusService.setConnectionEndStatus(sourceNode, targetNode), 
+            // when connection created, we need go back to idle status
+            () => this.flowStatusService.setIdleStatus());
+        }
+    }
+    /**
+     * TODO srp
+     */
+    validateTargetHandle() {
+        const status = this.flowStatusService.status();
+        if (status.state === 'connection-start') {
+            const sourceNode = status.payload.sourceNode;
+            const targetNode = this.nodeModel;
+            const source = sourceNode.node.id;
+            const target = targetNode.node.id;
+            const valid = this.flowEntitiesService.connection().validator({ source, target });
+            this.targetHandleState.set(valid ? 'valid' : 'invalid');
+            this.flowStatusService.setConnectionValidationStatus(sourceNode, targetNode, valid);
+        }
+    }
+    /**
+     * TODO srp
+     */
+    resetValidateTargetHandle() {
+        this.targetHandleState.set('idle');
+        // drop back to start status
+        const status = this.flowStatusService.status();
+        if (status.state === 'connection-validation') {
+            this.flowStatusService.setConnectionStartStatus(status.payload.sourceNode);
+        }
+    }
+    getHandleContext(type) {
+        if (type === 'source') {
+            return {
+                $implicit: {
+                    point: this.nodeModel.sourceOffset,
+                    alignedPoint: this.nodeModel.sourceOffsetAligned,
+                    state: this.sourceHanldeStateReadonly
+                }
+            };
+        }
+        return {
+            $implicit: {
+                point: this.nodeModel.targetOffset,
+                alignedPoint: this.nodeModel.targetOffsetAligned,
+                state: this.targetHanldeStateReadonly
+            }
+        };
+    }
+    setSourceHandleSize() {
+        // if handle template provided, we don't know its stroke so it's 0
+        const strokeWidth = this.handleTemplate ? 0 : (2 * this.defaultHandleStrokeWidth);
+        const sourceBox = this.sourceHandleRef.nativeElement.getBBox({ stroke: true });
+        this.nodeModel.sourceHandleSize.set({
+            width: sourceBox.width + strokeWidth,
+            height: sourceBox.height + strokeWidth
+        });
+    }
+    setTargetHandleSize() {
+        const strokeWidth = this.handleTemplate ? 0 : (2 * this.defaultHandleStrokeWidth);
+        const targetBox = this.targetHandleRef.nativeElement.getBBox({ stroke: true });
+        this.nodeModel.targetHandleSize.set({
+            width: targetBox.width + strokeWidth,
+            height: targetBox.height + strokeWidth
+        });
+    }
+    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", handleTemplate: "handleTemplate" }, viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }, { propertyName: "sourceHandleRef", first: true, predicate: ["sourceHandle"], descendants: true }, { propertyName: "targetHandleRef", first: true, predicate: ["targetHandle"], descendants: true }], ngImport: i0, template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  #nodeContent\n  width=\"100\"\n  height=\"50\"\n>\n  <div class=\"default-node\" [innerHTML]=\"nodeModel.node.text ?? ''\"></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      *ngTemplateOutlet=\"nodeHtmlTemplate; context: { $implicit: { node: nodeModel.node }  }\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngIf=\"handleTemplate\">\n  <svg:g #sourceHandle (mousedown)=\"startConnection($event)\">\n    <ng-container *ngTemplateOutlet=\"handleTemplate; context: getHandleContext('source')\" />\n  </svg:g>\n\n  <svg:g #targetHandle>\n    <ng-container *ngTemplateOutlet=\"handleTemplate; context: getHandleContext('target')\" />\n  </svg:g>\n</ng-container>\n\n<ng-container *ngIf=\"!handleTemplate\">\n  <svg:circle\n    #sourceHandle\n    [attr.cx]=\"nodeModel.sourceOffset().x\"\n    [attr.cy]=\"nodeModel.sourceOffset().y\"\n    [attr.stroke-width]=\"defaultHandleStrokeWidth\"\n    r=\"5\"\n    stroke=\"white\"\n    fill=\"black\"\n    (mousedown)=\"startConnection($event)\"\n  />\n\n  <svg:circle\n    #targetHandle\n    [attr.cx]=\"nodeModel.targetOffset().x\"\n    [attr.cy]=\"nodeModel.targetOffset().y\"\n    [attr.stroke-width]=\"defaultHandleStrokeWidth\"\n    r=\"5\"\n    stroke=\"white\"\n    fill=\"black\"\n    (mouseup)=\"endConnection()\"\n  />\n</ng-container>\n\n<svg:circle\n  *ngIf=\"showMagnet()\"\n  class=\"magnet\"\n  [attr.r]=\"nodeModel.magnetRadius\"\n  [attr.cx]=\"nodeModel.targetOffset().x\"\n  [attr.cy]=\"nodeModel.targetOffset().y\"\n  (mouseup)=\"endConnection(); resetValidateTargetHandle()\"\n  (mouseover)=\"validateTargetHandle()\"\n  (mouseout)=\"resetValidateTargetHandle()\"\n/>\n\n\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{max-width:100px;max-height:100px;width:100px;height:50px;border:2px solid black;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  #nodeContent\n  width=\"100\"\n  height=\"50\"\n>\n  <div class=\"default-node\" [innerHTML]=\"nodeModel.node.text ?? ''\"></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      *ngTemplateOutlet=\"nodeHtmlTemplate; context: { $implicit: { node: nodeModel.node }  }\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngIf=\"handleTemplate\">\n  <svg:g #sourceHandle (mousedown)=\"startConnection($event)\">\n    <ng-container *ngTemplateOutlet=\"handleTemplate; context: getHandleContext('source')\" />\n  </svg:g>\n\n  <svg:g #targetHandle>\n    <ng-container *ngTemplateOutlet=\"handleTemplate; context: getHandleContext('target')\" />\n  </svg:g>\n</ng-container>\n\n<ng-container *ngIf=\"!handleTemplate\">\n  <svg:circle\n    #sourceHandle\n    [attr.cx]=\"nodeModel.sourceOffset().x\"\n    [attr.cy]=\"nodeModel.sourceOffset().y\"\n    [attr.stroke-width]=\"defaultHandleStrokeWidth\"\n    r=\"5\"\n    stroke=\"white\"\n    fill=\"black\"\n    (mousedown)=\"startConnection($event)\"\n  />\n\n  <svg:circle\n    #targetHandle\n    [attr.cx]=\"nodeModel.targetOffset().x\"\n    [attr.cy]=\"nodeModel.targetOffset().y\"\n    [attr.stroke-width]=\"defaultHandleStrokeWidth\"\n    r=\"5\"\n    stroke=\"white\"\n    fill=\"black\"\n    (mouseup)=\"endConnection()\"\n  />\n</ng-container>\n\n<svg:circle\n  *ngIf=\"showMagnet()\"\n  class=\"magnet\"\n  [attr.r]=\"nodeModel.magnetRadius\"\n  [attr.cx]=\"nodeModel.targetOffset().x\"\n  [attr.cy]=\"nodeModel.targetOffset().y\"\n  (mouseup)=\"endConnection(); resetValidateTargetHandle()\"\n  (mouseover)=\"validateTargetHandle()\"\n  (mouseout)=\"resetValidateTargetHandle()\"\n/>\n\n\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{max-width:100px;max-height:100px;width:100px;height:50px;border:2px solid black;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}\n"] }]
+        }], propDecorators: { nodeModel: [{
+                type: Input
+            }], nodeHtmlTemplate: [{
+                type: Input
+            }], handleTemplate: [{
+                type: Input
+            }], nodeContentRef: [{
+                type: ViewChild,
+                args: ['nodeContent']
+            }], htmlWrapperRef: [{
+                type: ViewChild,
+                args: ['htmlWrapper']
+            }], sourceHandleRef: [{
+                type: ViewChild,
+                args: ['sourceHandle']
+            }], targetHandleRef: [{
+                type: ViewChild,
+                args: ['targetHandle']
+            }] } });
+
+class EdgeLabelComponent {
+    constructor() {
+        /**
+         * Centered point of label
+         *
+         * TODO: maybe put it into EdgeLabelModel
+         */
+        this.edgeLabelPoint = computed(() => {
+            const point = this.pointSignal();
+            const { width, height } = this.model.size();
+            return {
+                x: point.x - (width / 2),
+                y: point.y - (height / 2)
+            };
+        });
+        this.pointSignal = signal({ x: 0, y: 0 });
+    }
+    set point(point) { this.pointSignal.set(point); }
+    ngAfterViewInit() {
+        queueMicrotask(() => {
+            // this is a fix for visual artifact in chrome that for some reason adresses only for edge label.
+            // the bug reproduces if edgeLabelWrapperRef size fully matched the size of parent foreignObject
+            const MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME = 2;
+            const width = this.edgeLabelWrapperRef.nativeElement.clientWidth + MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
+            const height = this.edgeLabelWrapperRef.nativeElement.clientHeight + MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
+            this.model.size.set({ width, height });
+        });
+    }
+    getLabelContext() {
+        return {
+            $implicit: {
+                edge: this.edgeModel.edge,
+                label: this.model.edgeLabel
+            }
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EdgeLabelComponent, selector: "g[edgeLabel]", inputs: { model: "model", edgeModel: "edgeModel", point: "point", htmlTemplate: "htmlTemplate" }, viewQueries: [{ propertyName: "edgeLabelWrapperRef", first: true, predicate: ["edgeLabelWrapper"], descendants: true }], ngImport: i0, template: "<svg:foreignObject\n  [attr.x]=\"edgeLabelPoint().x\"\n  [attr.y]=\"edgeLabelPoint().y\"\n  [attr.width]=\"model.size().width\"\n  [attr.height]=\"model.size().height\"\n  *ngIf=\"model.edgeLabel.type === 'html-template' && htmlTemplate\"\n>\n  <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n    <ng-container\n      *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\"\n    />\n  </div>\n</svg:foreignObject>\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'g[edgeLabel]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:foreignObject\n  [attr.x]=\"edgeLabelPoint().x\"\n  [attr.y]=\"edgeLabelPoint().y\"\n  [attr.width]=\"model.size().width\"\n  [attr.height]=\"model.size().height\"\n  *ngIf=\"model.edgeLabel.type === 'html-template' && htmlTemplate\"\n>\n  <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n    <ng-container\n      *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\"\n    />\n  </div>\n</svg:foreignObject>\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"] }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], edgeModel: [{
+                type: Input
+            }], point: [{
+                type: Input
+            }], htmlTemplate: [{
+                type: Input
+            }], edgeLabelWrapperRef: [{
+                type: ViewChild,
+                args: ['edgeLabelWrapper']
+            }] } });
+
+class EdgeComponent {
+    constructor() {
+        this.markerStartUrl = computed(() => {
+            const marker = this.model.edge.markers?.start;
+            return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
+        });
+        this.markerEndUrl = computed(() => {
+            const marker = this.model.edge.markers?.end;
+            return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
+        });
+        this.defaultColor = 'rgb(177, 177, 183)';
+    }
+    ngOnInit() {
+        this.edgeContext = {
+            $implicit: {
+                // TODO: check if edge could change
+                edge: this.model.edge,
+                path: computed(() => this.model.path().path),
+                markerStart: this.markerStartUrl,
+                markerEnd: this.markerEndUrl
+            }
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EdgeComponent, selector: "g[edge]", inputs: { model: "model", edgeTemplate: "edgeTemplate", edgeLabelHtmlTemplate: "edgeLabelHtmlTemplate" }, ngImport: i0, template: "<svg:path\n  *ngIf=\"model.type === 'default'\"\n  [attr.d]=\"model.path().path\"\n  [attr.marker-start]=\"markerStartUrl()\"\n  [attr.marker-end]=\"markerEndUrl()\"\n  [attr.stroke]=\"defaultColor\"\n  stroke-width=\"2\"\n  fill=\"none\"\n/>\n\n<ng-container *ngIf=\"model.type === 'template' && edgeTemplate\">\n  <ng-container *ngTemplateOutlet=\"edgeTemplate; context: edgeContext\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"model.edgeLabels?.start as label\">\n  <svg:g edgeLabel\n    [model]=\"label\"\n    [point]=\"model.path().points.start\"\n    [edgeModel]=\"model\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate\"\n  />\n</ng-container>\n\n<ng-container *ngIf=\"model.edgeLabels?.center as label\">\n  <svg:g edgeLabel\n    [model]=\"label\"\n    [point]=\"model.path().points.center\"\n    [edgeModel]=\"model\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate\"\n  />\n</ng-container>\n\n<ng-container *ngIf=\"model.edgeLabels?.end as label\">\n  <svg:g edgeLabel\n    [model]=\"label\"\n    [point]=\"model.path().points.end\"\n    [edgeModel]=\"model\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate\"\n  />\n</ng-container>\n", dependencies: [{ 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: EdgeLabelComponent, selector: "g[edgeLabel]", inputs: ["model", "edgeModel", "point", "htmlTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'g[edge]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:path\n  *ngIf=\"model.type === 'default'\"\n  [attr.d]=\"model.path().path\"\n  [attr.marker-start]=\"markerStartUrl()\"\n  [attr.marker-end]=\"markerEndUrl()\"\n  [attr.stroke]=\"defaultColor\"\n  stroke-width=\"2\"\n  fill=\"none\"\n/>\n\n<ng-container *ngIf=\"model.type === 'template' && edgeTemplate\">\n  <ng-container *ngTemplateOutlet=\"edgeTemplate; context: edgeContext\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"model.edgeLabels?.start as label\">\n  <svg:g edgeLabel\n    [model]=\"label\"\n    [point]=\"model.path().points.start\"\n    [edgeModel]=\"model\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate\"\n  />\n</ng-container>\n\n<ng-container *ngIf=\"model.edgeLabels?.center as label\">\n  <svg:g edgeLabel\n    [model]=\"label\"\n    [point]=\"model.path().points.center\"\n    [edgeModel]=\"model\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate\"\n  />\n</ng-container>\n\n<ng-container *ngIf=\"model.edgeLabels?.end as label\">\n  <svg:g edgeLabel\n    [model]=\"label\"\n    [point]=\"model.path().points.end\"\n    [edgeModel]=\"model\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate\"\n  />\n</ng-container>\n" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], edgeTemplate: [{
+                type: Input
+            }], edgeLabelHtmlTemplate: [{
+                type: Input
+            }] } });
+
+class SpacePointContextDirective {
+    constructor() {
+        /**
+         * Signal with current mouse position in svg space
+         */
+        this.svgCurrentSpacePoint = computed(() => {
+            const movement = this.mouseMovement();
+            const point = this.rootSvg.createSVGPoint();
+            point.x = movement.x;
+            point.y = movement.y;
+            return point.matrixTransform(this.host.getScreenCTM().inverse());
+        });
+        this.rootSvg = inject(RootSvgReferenceDirective).element;
+        this.host = inject(ElementRef).nativeElement;
+        this.mouseMovement = toSignal(fromEvent(this.rootSvg, 'mousemove').pipe(map(event => ({ x: event.clientX, y: event.clientY }))), { initialValue: { x: 0, y: 0 } });
+    }
+    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);
+        this.spacePointContext = inject(SpacePointContextDirective);
+        this.path = computed(() => {
+            const status = this.flowStatusService.status();
+            if (status.state === 'connection-start') {
+                const sourceNode = status.payload.sourceNode;
+                const sourcePoint = sourceNode.sourcePointAbsolute();
+                const targetPoint = this.spacePointContext.svgCurrentSpacePoint();
+                switch (this.model.curve) {
+                    case 'straight': return straightPath(sourcePoint, targetPoint).path;
+                    case 'bezier': return bezierPath(sourcePoint, targetPoint, sourceNode.sourcePosition(), sourceNode.targetPosition()).path;
+                }
+            }
+            if (status.state === 'connection-validation') {
+                const sourcePoint = status.payload.sourceNode.sourcePointAbsolute();
+                // ignore magnet if validation failed
+                const targetPoint = status.payload.valid
+                    ? status.payload.targetNode.targetPointAbsolute()
+                    : this.spacePointContext.svgCurrentSpacePoint();
+                switch (this.model.curve) {
+                    case 'straight': return straightPath(sourcePoint, targetPoint).path;
+                    case 'bezier': return bezierPath(sourcePoint, targetPoint, status.payload.sourceNode.sourcePosition(), status.payload.sourceNode.targetPosition()).path;
+                }
+            }
+            return null;
+        });
+        this.markerUrl = computed(() => {
+            const marker = this.model.connection.marker;
+            if (marker) {
+                return `url(#${hashCode(JSON.stringify(marker))})`;
+            }
+            return '';
+        });
+        this.defaultColor = 'rgb(177, 177, 183)';
+    }
+    getContext() {
+        return {
+            $implicit: {
+                path: this.path,
+                marker: this.markerUrl
+            }
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConnectionComponent, selector: "g[connection]", inputs: { model: "model", template: "template" }, ngImport: i0, template: `
+    <ng-container *ngIf="model.type === 'default'">
+      <svg:path
+        *ngIf="path() as path"
+        [attr.d]="path"
+        [attr.marker-end]="markerUrl()"
+        [attr.stroke]="defaultColor"
+        fill="none"
+        stroke-width="2"
+      />
+    </ng-container>
+
+    <ng-container *ngIf="model.type === 'template' && template">
+      <ng-container *ngTemplateOutlet="template; context: getContext()" />
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'g[connection]',
+                    template: `
+    <ng-container *ngIf="model.type === 'default'">
+      <svg:path
+        *ngIf="path() as path"
+        [attr.d]="path"
+        [attr.marker-end]="markerUrl()"
+        [attr.stroke]="defaultColor"
+        fill="none"
+        stroke-width="2"
+      />
+    </ng-container>
+
+    <ng-container *ngIf="model.type === 'template' && template">
+      <ng-container *ngTemplateOutlet="template; context: getContext()" />
+    </ng-container>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { model: [{
+                type: Input,
+                args: [{ required: true }]
+            }], template: [{
+                type: Input
+            }] } });
+
+class DefsComponent {
+    constructor() {
+        this.markers = new Map();
+        this.defaultColor = 'rgb(177, 177, 183)';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DefsComponent, selector: "defs[flowDefs]", inputs: { markers: "markers" }, ngImport: i0, template: "<svg:marker\n  *ngFor=\"let marker of markers | keyvalue\"\n  [attr.id]=\"marker.key\"\n  [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n  [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n  [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n  viewBox=\"-10 -10 20 20\"\n  [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\"\n  refX=\"0\"\n  refY=\"0\"\n>\n  <polyline\n    *ngIf=\"marker.value.type === 'arrow-closed' || !marker.value.type\"\n    class=\"marker__arrow_closed\"\n    [style.stroke]=\"marker.value.color ?? defaultColor\"\n    [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n    [style.fill]=\"marker.value.color ?? defaultColor\"\n    points=\"-5,-4 1,0 -5,4 -5,-4\"\n  />\n\n  <polyline\n    *ngIf=\"marker.value.type === 'arrow'\"\n    class=\"marker__arrow_default\"\n    [style.stroke]=\"marker.value.color ?? defaultColor\"\n    [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n    points=\"-5,-4 0,0 -5,4\"\n  />\n</svg:marker>\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'defs[flowDefs]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:marker\n  *ngFor=\"let marker of markers | keyvalue\"\n  [attr.id]=\"marker.key\"\n  [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n  [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n  [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n  viewBox=\"-10 -10 20 20\"\n  [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\"\n  refX=\"0\"\n  refY=\"0\"\n>\n  <polyline\n    *ngIf=\"marker.value.type === 'arrow-closed' || !marker.value.type\"\n    class=\"marker__arrow_closed\"\n    [style.stroke]=\"marker.value.color ?? defaultColor\"\n    [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n    [style.fill]=\"marker.value.color ?? defaultColor\"\n    points=\"-5,-4 1,0 -5,4 -5,-4\"\n  />\n\n  <polyline\n    *ngIf=\"marker.value.type === 'arrow'\"\n    class=\"marker__arrow_default\"\n    [style.stroke]=\"marker.value.color ?? defaultColor\"\n    [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n    points=\"-5,-4 0,0 -5,4\"\n  />\n</svg:marker>\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"] }]
+        }], propDecorators: { markers: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+// TODO: too general purpose nane
+class RootSvgContextDirective {
+    constructor() {
+        this.flowStatusService = inject(FlowStatusService);
+    }
+    // TODO: check for multiple instances on page
+    resetConnection() {
+        const status = this.flowStatusService.status();
+        if (status.state === 'connection-start') {
+            this.flowStatusService.setIdleStatus();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootSvgContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RootSvgContextDirective, selector: "svg[rootSvgContext]", host: { listeners: { "document:mouseup": "resetConnection()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootSvgContextDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'svg[rootSvgContext]' }]
+        }], propDecorators: { resetConnection: [{
+                type: HostListener,
+                args: ['document:mouseup']
+            }] } });
+
+const connectionControllerHostDirective = {
+    directive: ConnectionControllerDirective,
+    outputs: ['onConnect']
+};
+const changesControllerHostDirective = {
+    directive: ChangesControllerDirective,
+    outputs: ['onNodesChange', 'onEdgesChange']
+};
+class VflowComponent {
+    constructor() {
+        // #region DI
+        this.viewportService = inject(ViewportService);
+        this.flowEntitiesService = inject(FlowEntitiesService);
+        this.nodesChangeService = inject(NodesChangeService);
+        this.edgesChangeService = inject(EdgeChangesService);
+        this.injector = inject(Injector);
+        this.minZoom = 0.5;
+        this.maxZoom = 3;
+        this.background = '#FFFFFF';
+        // #endregion
+        // #region SIGNAL_API
+        this.viewport = this.viewportService.readableViewport.asReadonly();
+        this.nodesChange = toSignal(this.nodesChangeService.changes$, { initialValue: [] });
+        this.edgesChange = toSignal(this.edgesChangeService.changes$, { initialValue: [] });
+        // #endregion
+        // #region RX_API
+        this.viewportChanges$ = toObservable(this.viewportService.readableViewport)
+            .pipe(skip(1)); // skip default value that set by signal
+        this.nodesChange$ = this.nodesChangeService.changes$;
+        this.edgesChange$ = this.edgesChangeService.changes$;
+        // #endregion
+        // TODO: probably better to make it injectable
+        this.flowModel = new FlowModel();
+        this.markers = this.flowEntitiesService.markers;
+    }
+    // #endregion
+    // #region SETTINGS
+    /**
+     * Size for flow view
+     *
+     * accepts
+     * - absolute size in format [width, height] or
+     * - 'auto' to compute size based on parent element size
+     */
+    set view(view) {
+        this.flowModel.view.set(view);
+    }
+    set handlePositions(handlePositions) {
+        this.flowModel.handlePositions.set(handlePositions);
+    }
+    set connection(connection) { this.flowEntitiesService.connection.set(connection); }
+    get connection() { return this.flowEntitiesService.connection(); }
+    // #endregion
+    // #region MAIN_INPUTS
+    set nodes(newNodes) {
+        const newModels = runInInjectionContext(this.injector, () => ReferenceKeeper.nodes(newNodes, this.flowEntitiesService.nodes()));
+        // TODO better to solve this by DI
+        bindFlowToNodes(this.flowModel, newModels);
+        // quick and dirty binding nodes to edges
+        addNodesToEdges(newModels, this.flowEntitiesService.edges());
+        this.flowEntitiesService.nodes.set(newModels);
+    }
+    get nodeModels() { return this.flowEntitiesService.nodes(); }
+    set edges(newEdges) {
+        const newModels = ReferenceKeeper.edges(newEdges, this.flowEntitiesService.edges());
+        // quick and dirty binding nodes to edges
+        addNodesToEdges(this.nodeModels, newModels);
+        this.flowEntitiesService.edges.set(newModels);
+    }
+    get edgeModels() { return this.flowEntitiesService.validEdges(); }
+    // #region METHODS_API
+    viewportTo(viewport) {
+        this.viewportService.writableViewport.set({ changeType: 'absolute', state: viewport });
+    }
+    zoomTo(zoom) {
+        this.viewportService.writableViewport.set({ changeType: 'absolute', state: { zoom } });
+    }
+    panTo(point) {
+        this.viewportService.writableViewport.set({ changeType: 'absolute', state: point });
+    }
+    getNode(id) {
+        return this.flowEntitiesService.getNode(id)?.node;
+    }
+    // #endregion
+    trackNodes(idx, { node }) {
+        return node.id;
+    }
+    trackEdges(idx, { edge }) {
+        return edge.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: VflowComponent, selector: "vflow", inputs: { view: "view", minZoom: "minZoom", maxZoom: "maxZoom", handlePositions: "handlePositions", background: "background", connection: ["connection", "connection", (settings) => new ConnectionModel(settings)], nodes: "nodes", edges: "edges" }, providers: [
+            DraggableService,
+            ViewportService,
+            FlowStatusService,
+            FlowEntitiesService,
+            NodesChangeService,
+            EdgeChangesService
+        ], 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 }, { propertyName: "handleTemplateDirective", first: true, predicate: HandleTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true }], hostDirectives: [{ directive: ConnectionControllerDirective, outputs: ["onConnect", "onConnect"] }, { directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onEdgesChange", "onEdgesChange"] }], ngImport: i0, template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  class=\"root-svg\"\n  #flow\n  [style.backgroundColor]=\"background\"\n  [attr.width]=\"flowModel.flowWidth()\"\n  [attr.height]=\"flowModel.flowHeight()\"\n>\n  <defs [markers]=\"markers()\" flowDefs />\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      [handleTemplate]=\"handleTemplateDirective?.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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["nodeModel", "nodeHtmlTemplate", "handleTemplate"] }, { 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: "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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vflow', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        DraggableService,
+                        ViewportService,
+                        FlowStatusService,
+                        FlowEntitiesService,
+                        NodesChangeService,
+                        EdgeChangesService
+                    ], hostDirectives: [
+                        connectionControllerHostDirective,
+                        changesControllerHostDirective
+                    ], template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  class=\"root-svg\"\n  #flow\n  [style.backgroundColor]=\"background\"\n  [attr.width]=\"flowModel.flowWidth()\"\n  [attr.height]=\"flowModel.flowHeight()\"\n>\n  <defs [markers]=\"markers()\" flowDefs />\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      [handleTemplate]=\"handleTemplateDirective?.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}\n"] }]
+        }], propDecorators: { view: [{
+                type: Input
+            }], minZoom: [{
+                type: Input
+            }], maxZoom: [{
+                type: Input
+            }], handlePositions: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }], connection: [{
+                type: Input,
+                args: [{ transform: (settings) => new ConnectionModel(settings) }]
+            }], nodes: [{
+                type: Input,
+                args: [{ required: true }]
+            }], edges: [{
+                type: Input
+            }], nodeHtmlDirective: [{
+                type: ContentChild,
+                args: [NodeHtmlTemplateDirective]
+            }], edgeTemplateDirective: [{
+                type: ContentChild,
+                args: [EdgeTemplateDirective]
+            }], edgeLabelHtmlDirective: [{
+                type: ContentChild,
+                args: [EdgeLabelHtmlTemplateDirective]
+            }], connectionTemplateDirective: [{
+                type: ContentChild,
+                args: [ConnectionTemplateDirective]
+            }], handleTemplateDirective: [{
+                type: ContentChild,
+                args: [HandleTemplateDirective]
+            }], mapContext: [{
+                type: ViewChild,
+                args: [MapContextDirective]
+            }] } });
+function bindFlowToNodes(flow, nodes) {
+    nodes.forEach(n => n.bindFlow(flow));
+}
+
+const components = [
+    VflowComponent,
+    NodeComponent,
+    EdgeComponent,
+    EdgeLabelComponent,
+    ConnectionComponent,
+    DefsComponent
+];
+const directives = [
+    SpacePointContextDirective,
+    MapContextDirective,
+    RootSvgReferenceDirective,
+    RootSvgContextDirective,
+];
+const templateDirectives = [
+    NodeHtmlTemplateDirective,
+    EdgeLabelHtmlTemplateDirective,
+    EdgeTemplateDirective,
+    ConnectionTemplateDirective,
+    HandleTemplateDirective
+];
+class VflowModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: VflowModule, declarations: [VflowComponent,
+            NodeComponent,
+            EdgeComponent,
+            EdgeLabelComponent,
+            ConnectionComponent,
+            DefsComponent, SpacePointContextDirective,
+            MapContextDirective,
+            RootSvgReferenceDirective,
+            RootSvgContextDirective, NodeHtmlTemplateDirective,
+            EdgeLabelHtmlTemplateDirective,
+            EdgeTemplateDirective,
+            ConnectionTemplateDirective,
+            HandleTemplateDirective], imports: [CommonModule], exports: [VflowComponent, NodeHtmlTemplateDirective,
+            EdgeLabelHtmlTemplateDirective,
+            EdgeTemplateDirective,
+            ConnectionTemplateDirective,
+            HandleTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [
+                        VflowComponent,
+                        ...templateDirectives
+                    ],
+                    declarations: [...components, ...directives, ...templateDirectives],
+                }]
+        }] });
+
+// Modules
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, HandleTemplateDirective, NodeHtmlTemplateDirective, VflowComponent, VflowModule };
+//# sourceMappingURL=ngx-vflow.mjs.map