ngx-vflow 0.2.2 → 0.4.0

package/fesm2022/ngx-vflow.mjs

@@ -1,13 +1,14 @@
 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, Injector, Component, ChangeDetectionStrategy, ViewChild, HostListener, runInInjectionContext, ContentChild, NgModule } from '@angular/core';
+import { signal, Injectable, inject, ElementRef, Directive, computed, effect, Input, TemplateRef, EventEmitter, Output, untracked, runInInjectionContext, Injector, NgZone, Component, ChangeDetectionStrategy, ViewChild, HostListener, ContentChild, NgModule } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
+import { Subject, tap, switchMap, merge, skip, map, pairwise, filter, distinctUntilChanged, observeOn, asyncScheduler, zip, Observable, Subscription, startWith, fromEvent } from 'rxjs';
+import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { drag } from 'd3-drag';
-import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { switchMap, merge, skip, map, pairwise, filter, observeOn, asyncScheduler, zip, distinctUntilChanged, tap, fromEvent } from 'rxjs';
 import { path } from 'd3-path';
+import { __decorate } from 'tslib';
 
 class ViewportService {
     constructor() {
@@ -57,13 +58,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+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()));
+        });
+        this.entities = computed(() => [
+            ...this.nodes(),
+            ...this.edges()
+        ]);
+    }
+    getNode(id) {
+        return this.nodes().find(({ node }) => node.id === id);
+    }
+    getDetachedEdges() {
+        return this.edges().filter(e => e.detached());
+    }
+    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 SelectionService {
+    constructor() {
+        this.flowEntitiesService = inject(FlowEntitiesService);
+        this.viewport$ = new Subject();
+        this.resetSelection = this.viewport$.pipe(tap(({ start, end, target }) => {
+            if (start && end) {
+                const delta = SelectionService.delta;
+                const diffX = Math.abs(end.x - start.x);
+                const diffY = Math.abs(end.y - start.y);
+                // click (not drag)
+                const isClick = diffX < delta && diffY < delta;
+                // do not reset if event chain contains selectable elems
+                const isNotSelectable = !target.closest('.selectable');
+                if (isClick && isNotSelectable) {
+                    this.select(null);
+                }
+            }
+        }), takeUntilDestroyed()).subscribe();
+    }
+    static { this.delta = 6; }
+    setViewport(viewport) {
+        this.viewport$.next(viewport);
+    }
+    select(entity) {
+        // undo select for previously selected nodes
+        this.flowEntitiesService.entities()
+            .filter(n => n.selected)
+            .forEach(n => n.selected.set(false));
+        if (entity) {
+            // select passed entity
+            entity.selected.set(true);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionService, decorators: [{
+            type: Injectable
+        }] });
+
 class MapContextDirective {
     constructor() {
         this.rootSvg = inject(RootSvgReferenceDirective).element;
         this.host = inject(ElementRef).nativeElement;
+        this.selectionService = inject(SelectionService);
         this.viewportService = inject(ViewportService);
         this.rootSvgSelection = select(this.rootSvg);
         this.zoomableSelection = select(this.host);
+        this.viewportForSelection = {};
         // 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(() => {
@@ -90,15 +201,32 @@ class MapContextDirective {
         }), { 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.viewportService.readableViewport.set(mapTransformToViewportState(transform));
             this.zoomableSelection.attr('transform', transform.toString());
         };
     }
     ngOnInit() {
         this.zoomBehavior = zoom()
             .scaleExtent([this.minZoom, this.maxZoom])
-            .on('zoom', this.handleZoom);
-        this.rootSvgSelection.call(this.zoomBehavior);
+            .on('start', (event) => this.onD3zoomStart(event))
+            .on('zoom', (event) => this.handleZoom(event))
+            .on('end', (event) => this.onD3zoomEnd(event));
+        this.rootSvgSelection
+            .call(this.zoomBehavior)
+            .on('dblclick.zoom', null);
+    }
+    onD3zoomStart({ transform }) {
+        this.viewportForSelection = {
+            start: mapTransformToViewportState(transform)
+        };
+    }
+    onD3zoomEnd({ transform, sourceEvent }) {
+        this.viewportForSelection = {
+            ...this.viewportForSelection,
+            end: mapTransformToViewportState(transform),
+            target: evTarget(sourceEvent)
+        };
+        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 }); }
@@ -111,6 +239,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], 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) {
+        return anyEvent.target;
+    }
+    return undefined;
+};
 
 const round = (num) => Math.round(num * 100) / 100;
 
@@ -237,28 +372,11 @@ function addNodesToEdges(nodes, edges) {
         return acc;
     }, {});
     edges.forEach(e => {
-        e.source = nodesById[e.edge.source];
-        e.target = nodesById[e.edge.target];
+        e.source.set(nodesById[e.edge.source]);
+        e.target.set(nodesById[e.edge.target]);
     });
 }
 
-class FlowModel {
-    constructor() {
-        /**
-         * 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]);
-    }
-}
-
 class FlowStatusService {
     constructor() {
         this.status = signal({ state: 'idle', payload: null });
@@ -296,70 +414,6 @@ function batchStatusChanges(...changes) {
     }
 }
 
-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);
-    }
-    getDetachedEdges() {
-        return this.edges().filter(e => e.detached());
-    }
-    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() {
         /**
@@ -402,84 +456,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-class HandleModel {
-    constructor(rawHandle, parentNode) {
-        this.rawHandle = rawHandle;
-        this.parentNode = parentNode;
-        this.strokeWidth = 2;
-        this.size = signal({
-            width: 10 + (2 * this.strokeWidth),
-            height: 10 + (2 * this.strokeWidth)
-        });
-        this.offset = computed(() => {
-            switch (this.rawHandle.position) {
-                case 'left': return {
-                    x: 0,
-                    y: this.parentPosition().y + (this.parentSize().height / 2)
-                };
-                case 'right': return {
-                    x: this.parentNode.size().width,
-                    y: this.parentPosition().y + (this.parentSize().height / 2)
-                };
-                case 'top': return {
-                    x: this.parentPosition().x + (this.parentSize().width / 2),
-                    y: 0
-                };
-                case 'bottom': return {
-                    x: this.parentPosition().x + this.parentSize().width / 2,
-                    y: this.parentNode.size().height
-                };
-            }
-        });
-        this.sizeOffset = computed(() => {
-            switch (this.rawHandle.position) {
-                case 'left': return { x: -(this.size().width / 2), y: 0 };
-                case 'right': return { x: this.size().width / 2, y: 0 };
-                case 'top': return { x: 0, y: -(this.size().height / 2) };
-                case 'bottom': return { x: 0, y: this.size().height / 2 };
-            }
-        });
-        this.pointAbsolute = computed(() => {
-            return {
-                x: this.parentNode.point().x + this.offset().x + this.sizeOffset().x,
-                y: this.parentNode.point().y + this.offset().y + this.sizeOffset().y,
-            };
-        });
-        this.parentSize = signal(this.rawHandle.parentSize);
-        this.parentPosition = signal(this.rawHandle.parentPosition);
+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 NodeModel {
     constructor(node) {
         this.node = node;
+        this.flowSettingsService = inject(FlowSettingsService);
         this.point = signal({ x: 0, y: 0 });
         this.point$ = toObservable(this.point);
         this.size = signal({ width: 0, height: 0 });
+        this.renderOrder = signal(0);
+        this.selected = signal(false);
+        this.selected$ = toObservable(this.selected);
         this.pointTransform = computed(() => `translate(${this.point().x}, ${this.point().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.handles = computed(() => {
-            if (this.node.type === 'html-template') {
-                return this.rawHandles();
-            }
-            return [
-                new HandleModel({
-                    position: this.sourcePosition(),
-                    type: 'source',
-                    parentPosition: { x: 0, y: 0 },
-                    parentSize: this.size()
-                }, this),
-                new HandleModel({
-                    position: this.targetPosition(),
-                    type: 'target',
-                    parentPosition: { x: 0, y: 0 },
-                    parentSize: this.size()
-                }, this),
-            ];
-        });
-        this.rawHandles = signal([]);
+        this.sourcePosition = computed(() => this.flowSettingsService.handlePositions().source);
+        this.targetPosition = computed(() => this.flowSettingsService.handlePositions().target);
+        this.handles = signal([]);
+        this.handles$ = toObservable(this.handles);
         this.draggable = true;
         // disabled for configuration for now
         this.magnetRadius = 20;
@@ -487,14 +502,6 @@ class NodeModel {
         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 {
@@ -610,26 +617,32 @@ function getPointOnBezier(sourcePoint, targetPoint, controlPoint1, controlPoint2
 class EdgeModel {
     constructor(edge) {
         this.edge = edge;
+        this.source = signal(undefined);
+        this.target = signal(undefined);
+        this.selected = signal(false);
+        this.selected$ = toObservable(this.selected);
         this.detached = computed(() => {
-            if (!this.source || !this.target) {
+            const source = this.source();
+            const target = this.target();
+            if (!source || !target) {
                 return true;
             }
             let existsSourceHandle = false;
             let existsTargetHandle = false;
             if (this.edge.sourceHandle) {
-                existsSourceHandle = !!this.source.handles()
+                existsSourceHandle = !!source.handles()
                     .find(handle => handle.rawHandle.id === this.edge.sourceHandle);
             }
             else {
-                existsSourceHandle = !!this.source.handles()
+                existsSourceHandle = !!source.handles()
                     .find(handle => handle.rawHandle.type === 'source');
             }
             if (this.edge.targetHandle) {
-                existsTargetHandle = !!this.target.handles()
+                existsTargetHandle = !!target.handles()
                     .find(handle => handle.rawHandle.id === this.edge.targetHandle);
             }
             else {
-                existsTargetHandle = !!this.target.handles()
+                existsTargetHandle = !!target.handles()
                     .find(handle => handle.rawHandle.type === 'target');
             }
             return !existsSourceHandle || !existsTargetHandle;
@@ -638,20 +651,20 @@ class EdgeModel {
         this.path = computed(() => {
             let source;
             if (this.edge.sourceHandle) {
-                source = this.source.handles()
+                source = this.source()?.handles()
                     .find(handle => handle.rawHandle.id === this.edge.sourceHandle);
             }
             else {
-                source = this.source.handles()
+                source = this.source()?.handles()
                     .find(handle => handle.rawHandle.type === 'source');
             }
             let target;
             if (this.edge.targetHandle) {
-                target = this.target.handles()
+                target = this.target()?.handles()
                     .find(handle => handle.rawHandle.id === this.edge.targetHandle);
             }
             else {
-                target = this.target.handles()
+                target = this.target()?.handles()
                     .find(handle => handle.rawHandle.type === 'target');
             }
             // TODO: don't like this
@@ -732,7 +745,11 @@ class NodesChangeService {
             .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$).pipe(
+        this.nodeSelectedChange$ = toObservable(this.entitiesService.nodes)
+            .pipe(switchMap((nodes) => merge(...nodes.map(node => node.selected$.pipe(distinctUntilChanged(), skip(1), map(() => node))))), map((changedNode) => [
+            { type: 'select', id: changedNode.node.id, selected: changedNode.selected() }
+        ]));
+        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));
@@ -752,7 +769,7 @@ class EdgeChangesService {
         this.edgeDetachedChange$ = merge(toObservable(computed(() => {
             const nodes = this.entitiesService.nodes();
             const edges = untracked(this.entitiesService.edges);
-            return edges.filter(({ source, target }) => !nodes.includes(source) || !nodes.includes(target));
+            return edges.filter(({ source, target }) => !nodes.includes(source()) || !nodes.includes(target()));
         })), toObservable(this.entitiesService.edges).pipe(switchMap((edges) => {
             return zip(...edges.map(e => e.detached$.pipe(map(() => e))));
         }), map((edges) => edges.filter(e => e.detached())), 
@@ -769,7 +786,11 @@ class EdgeChangesService {
             .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$)
+        this.edgeSelectChange$ = toObservable(this.entitiesService.edges)
+            .pipe(switchMap((edges) => merge(...edges.map(edge => edge.selected$.pipe(distinctUntilChanged(), skip(1), map(() => edge))))), map((changedEdge) => [
+            { type: 'select', id: changedEdge.edge.id, selected: changedEdge.selected() }
+        ]));
+        this.changes$ = merge(this.edgeDetachedChange$, this.edgeAddChange$, this.edgeRemoveChange$, this.edgeSelectChange$)
             .pipe(
         // this fixes the case when user gets 'deteched' changes
         // and tries to delete these edges inside stream
@@ -818,6 +839,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+class NodeRenderingService {
+    constructor() {
+        this.flowEntitiesService = inject(FlowEntitiesService);
+        this.nodes = computed(() => {
+            return this.flowEntitiesService.nodes()
+                .sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
+        });
+    }
+    pullNode(node) {
+        const maxOrder = Math.max(...this.flowEntitiesService.nodes().map((n) => n.renderOrder()));
+        node.renderOrder.set(maxOrder + 1);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeRenderingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeRenderingService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeRenderingService, decorators: [{
+            type: Injectable
+        }] });
+
 class HandleService {
     constructor() {
         this.node = signal(null);
@@ -825,14 +865,13 @@ class HandleService {
     createHandle(newHandle) {
         const node = this.node();
         if (node) {
-            node.rawHandles.update(handles => [...handles, newHandle]);
+            node.handles.update(handles => [...handles, newHandle]);
         }
     }
     destroyHandle(handleToDestoy) {
         const node = this.node();
-        // TODO: microtask
         if (node) {
-            queueMicrotask(() => node.rawHandles.update(handles => handles.filter(handle => handle !== handleToDestoy)));
+            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 }); }
@@ -842,39 +881,199 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+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
+         */
+        this.size = signal({
+            width: 10 + (2 * this.strokeWidth),
+            height: 10 + (2 * this.strokeWidth)
+        });
+        this.offset = computed(() => {
+            switch (this.rawHandle.position) {
+                case 'left': return {
+                    x: 0,
+                    y: this.parentPosition().y + (this.parentSize().height / 2)
+                };
+                case 'right': return {
+                    x: this.parentNode.size().width,
+                    y: this.parentPosition().y + (this.parentSize().height / 2)
+                };
+                case 'top': return {
+                    x: this.parentPosition().x + (this.parentSize().width / 2),
+                    y: 0
+                };
+                case 'bottom': return {
+                    x: this.parentPosition().x + this.parentSize().width / 2,
+                    y: this.parentNode.size().height
+                };
+            }
+        });
+        this.sizeOffset = computed(() => {
+            switch (this.rawHandle.position) {
+                case 'left': return { x: -(this.size().width / 2), y: 0 };
+                case 'right': return { x: this.size().width / 2, y: 0 };
+                case 'top': return { x: 0, y: -(this.size().height / 2) };
+                case 'bottom': return { x: 0, y: this.size().height / 2 };
+            }
+        });
+        this.pointAbsolute = computed(() => {
+            return {
+                x: this.parentNode.point().x + this.offset().x + this.sizeOffset().x,
+                y: this.parentNode.point().y + this.offset().y + this.sizeOffset().y,
+            };
+        });
+        this.state = signal('idle');
+        this.updateParentSizeAndPosition$ = new Subject();
+        this.parentSize = toSignal(this.updateParentSizeAndPosition$.pipe(map(() => ({
+            width: this.parentReference.offsetWidth,
+            height: this.parentReference.offsetHeight
+        }))), {
+            initialValue: { width: 0, height: 0 }
+        });
+        this.parentPosition = toSignal(this.updateParentSizeAndPosition$.pipe(map(() => ({
+            x: this.parentReference.offsetLeft,
+            y: this.parentReference.offsetTop
+        }))), {
+            initialValue: { x: 0, y: 0 }
+        });
+        this.parentReference = this.rawHandle.parentReference;
+        this.template = this.rawHandle.template;
+        this.templateContext = {
+            $implicit: {
+                point: this.offset,
+                state: this.state
+            }
+        };
+    }
+    updateParent() {
+        this.updateParentSizeAndPosition$.next();
+    }
+}
+
+function resizable(elems, zone) {
+    return new Observable((subscriber) => {
+        let ro = new ResizeObserver((entries) => {
+            zone.run(() => subscriber.next(entries));
+        });
+        elems.forEach(e => ro.observe(e));
+        return () => ro.disconnect();
+    });
+}
+
+function InjectionContext(target, key, descriptor) {
+    const originalMethod = descriptor.value;
+    descriptor.value = function (...args) {
+        if (implementsWithInjector(this)) {
+            return runInInjectionContext(this.injector, () => originalMethod.apply(this, args));
+        }
+        else {
+            throw new Error('Class that contains decorated method must extends WithInjectorDirective class');
+        }
+    };
+    // Return the modified descriptor
+    return descriptor;
+}
+const implementsWithInjector = (instance) => {
+    return 'injector' in instance && 'get' in instance.injector;
+};
+
+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 HandleSizeControllerDirective {
+    constructor() {
+        this.handleWrapper = inject(ElementRef);
+    }
+    ngAfterViewInit() {
+        const element = this.handleWrapper.nativeElement;
+        const rect = element.getBBox();
+        const stroke = getChildStrokeWidth(element);
+        this.handleModel.size.set({
+            width: rect.width + stroke,
+            height: rect.height + stroke
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: { handleModel: ["handleSizeController", "handleModel"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleSizeControllerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[handleSizeController]' }]
+        }], propDecorators: { handleModel: [{
+                type: Input,
+                args: [{ required: true, alias: 'handleSizeController' }]
+            }] } });
+function getChildStrokeWidth(element) {
+    const child = element.firstElementChild;
+    if (child) {
+        const stroke = getComputedStyle(child).strokeWidth;
+        const strokeAsNumber = Number(stroke.replace('px', ''));
+        if (isNaN(strokeAsNumber)) {
+            return 0;
+        }
+        return strokeAsNumber;
+    }
+    return 0;
+}
+
 class NodeComponent {
     constructor() {
-        this.handleService = inject(HandleService);
         this.injector = inject(Injector);
+        this.handleService = inject(HandleService);
+        this.zone = inject(NgZone);
         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.showMagnet = computed(() => this.flowStatusService.status().state === 'connection-start' ||
             this.flowStatusService.status().state === 'connection-validation');
-        this.sourceHanldeState = signal('idle');
-        this.targetHandleState = signal('idle');
+        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), this.zone)
+            .pipe(map(() => handles))), tap((handles) => handles.forEach(h => h.updateParent())))
+            .subscribe();
+        this.subscription.add(sub);
     }
     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') {
+        this.setInitialHandles();
+        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 sub = resizable([this.htmlWrapperRef.nativeElement], this.zone)
+                .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);
+        }
     }
     ngOnDestroy() {
         this.draggableService.destroy(this.hostRef.nativeElement);
+        this.subscription.unsubscribe();
     }
     startConnection(event, handle) {
         // ignore drag by stopping propagation
@@ -912,27 +1111,55 @@ class NodeComponent {
                 sourceHandle: sourceHandle.rawHandle.id,
                 targetHandle: targetHandle.rawHandle.id
             });
-            this.targetHandleState.set(valid ? 'valid' : 'invalid');
+            targetHandle.state.set(valid ? 'valid' : 'invalid');
             this.flowStatusService.setConnectionValidationStatus(valid, sourceNode, targetNode, sourceHandle, targetHandle);
         }
     }
     /**
      * TODO srp
      */
-    resetValidateTargetHandle() {
-        this.targetHandleState.set('idle');
+    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);
         }
     }
+    pullNode() {
+        this.nodeRenderingService.pullNode(this.nodeModel);
+    }
+    selectNode() {
+        if (this.flowSettingsService.entitiesSelectable()) {
+            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  #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\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    #sourceHandle\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    stroke=\"white\"\n    fill=\"black\"\n    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\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    (mouseup)=\"endConnection(); resetValidateTargetHandle()\"\n    (mouseover)=\"validateTargetHandle(handle)\"\n    (mouseout)=\"resetValidateTargetHandle()\"\n  />\n</ng-container>\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.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"] }], 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  width=\"100\"\n  height=\"50\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\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<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    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"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    (mouseup)=\"endConnection(); resetValidateTargetHandle(handle)\"\n    (mouseover)=\"validateTargetHandle(handle)\"\n    (mouseout)=\"resetValidateTargetHandle(handle)\"\n  />\n</ng-container>\n\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{max-width:100px;max-height:100px;width:100px;height:50px;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.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
+__decorate([
+    Microtask
+], NodeComponent.prototype, "ngAfterViewInit", null);
+__decorate([
+    InjectionContext
+], NodeComponent.prototype, "setInitialHandles", 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  #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\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    #sourceHandle\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    stroke=\"white\"\n    fill=\"black\"\n    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\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    (mouseup)=\"endConnection(); resetValidateTargetHandle()\"\n    (mouseover)=\"validateTargetHandle(handle)\"\n    (mouseout)=\"resetValidateTargetHandle()\"\n  />\n</ng-container>\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"] }]
+            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService], template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  width=\"100\"\n  height=\"50\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\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<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    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"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    (mouseup)=\"endConnection(); resetValidateTargetHandle(handle)\"\n    (mouseover)=\"validateTargetHandle(handle)\"\n    (mouseout)=\"resetValidateTargetHandle(handle)\"\n  />\n</ng-container>\n\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{max-width:100px;max-height:100px;width:100px;height:50px;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: [{
@@ -943,7 +1170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], htmlWrapperRef: [{
                 type: ViewChild,
                 args: ['htmlWrapper']
-            }] } });
+            }], ngAfterViewInit: [], setInitialHandles: [] } });
 
 class EdgeLabelComponent {
     constructor() {
@@ -964,14 +1191,12 @@ class EdgeLabelComponent {
     }
     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 });
-        });
+        // 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 {
@@ -984,6 +1209,9 @@ class EdgeLabelComponent {
     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 }); }
 }
+__decorate([
+    Microtask
+], EdgeLabelComponent.prototype, "ngAfterViewInit", null);
 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"] }]
@@ -998,10 +1226,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], edgeLabelWrapperRef: [{
                 type: ViewChild,
                 args: ['edgeLabelWrapper']
-            }] } });
+            }], ngAfterViewInit: [] } });
 
 class EdgeComponent {
     constructor() {
+        this.injector = inject(Injector);
+        this.selectionService = inject(SelectionService);
+        this.flowSettingsService = inject(FlowSettingsService);
         this.markerStartUrl = computed(() => {
             const marker = this.model.edge.markers?.start;
             return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
@@ -1010,7 +1241,6 @@ class EdgeComponent {
             const marker = this.model.edge.markers?.end;
             return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
         });
-        this.defaultColor = 'rgb(177, 177, 183)';
     }
     ngOnInit() {
         this.edgeContext = {
@@ -1019,16 +1249,24 @@ class EdgeComponent {
                 edge: this.model.edge,
                 path: computed(() => this.model.path().path),
                 markerStart: this.markerStartUrl,
-                markerEnd: this.markerEndUrl
+                markerEnd: this.markerEndUrl,
+                selected: this.model.selected.asReadonly()
             }
         };
     }
+    onEdgeMouseDown() {
+        if (this.flowSettingsService.entitiesSelectable()) {
+            this.selectionService.select(this.model);
+        }
+    }
     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 }); }
+    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" }, host: { classAttribute: "selectable" }, ngImport: i0, template: "<svg:path\n  *ngIf=\"model.type === 'default'\"\n  (mousedown)=\"onEdgeMouseDown()\"\n  [attr.d]=\"model.path().path\"\n  [attr.marker-start]=\"markerStartUrl()\"\n  [attr.marker-end]=\"markerEndUrl()\"\n  class=\"edge\"\n  [class.edge_selected]=\"model.selected()\"\n/>\n\n<ng-container *ngIf=\"model.type === 'template' && edgeTemplate\">\n  <ng-container\n    [ngTemplateOutlet]=\"edgeTemplate\"\n    [ngTemplateOutletContext]=\"edgeContext\"\n    [ngTemplateOutletInjector]=\"injector\"\n  ></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", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}\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" }]
+            args: [{ selector: 'g[edge]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'selectable'
+                    }, template: "<svg:path\n  *ngIf=\"model.type === 'default'\"\n  (mousedown)=\"onEdgeMouseDown()\"\n  [attr.d]=\"model.path().path\"\n  [attr.marker-start]=\"markerStartUrl()\"\n  [attr.marker-end]=\"markerEndUrl()\"\n  class=\"edge\"\n  [class.edge_selected]=\"model.selected()\"\n/>\n\n<ng-container *ngIf=\"model.type === 'template' && edgeTemplate\">\n  <ng-container\n    [ngTemplateOutlet]=\"edgeTemplate\"\n    [ngTemplateOutletContext]=\"edgeContext\"\n    [ngTemplateOutletInjector]=\"injector\"\n  ></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", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}\n"] }]
         }], propDecorators: { model: [{
                 type: Input
             }], edgeTemplate: [{
@@ -1227,6 +1465,8 @@ class VflowComponent {
         this.flowEntitiesService = inject(FlowEntitiesService);
         this.nodesChangeService = inject(NodesChangeService);
         this.edgesChangeService = inject(EdgeChangesService);
+        this.nodeRenderingService = inject(NodeRenderingService);
+        this.flowSettingsService = inject(FlowSettingsService);
         this.injector = inject(Injector);
         /**
          * Minimum zoom value
@@ -1240,6 +1480,8 @@ class VflowComponent {
          * Background color for flow
          */
         this.background = '#FFFFFF';
+        this.nodeModels = computed(() => this.nodeRenderingService.nodes());
+        this.edgeModels = computed(() => this.flowEntitiesService.validEdges());
         // #endregion
         // #region SIGNAL_API
         /**
@@ -1270,8 +1512,8 @@ class VflowComponent {
          */
         this.edgesChange$ = this.edgesChangeService.changes$;
         // #endregion
-        // TODO: probably better to make it injectable
-        this.flowModel = new FlowModel();
+        this.flowWidth = this.flowSettingsService.flowWidth;
+        this.flowHeight = this.flowSettingsService.flowHeight;
         this.markers = this.flowEntitiesService.markers;
     }
     // #endregion
@@ -1284,7 +1526,7 @@ class VflowComponent {
      * - 'auto' to compute size based on parent element size
      */
     set view(view) {
-        this.flowModel.view.set(view);
+        this.flowSettingsService.view.set(view);
     }
     /**
      * Object that controls flow direction.
@@ -1295,7 +1537,13 @@ class VflowComponent {
      * @deprecated
      */
     set handlePositions(handlePositions) {
-        this.flowModel.handlePositions.set(handlePositions);
+        this.flowSettingsService.handlePositions.set(handlePositions);
+    }
+    /**
+     * Global rule if you can or can't select entities
+     */
+    set entitiesSelectable(value) {
+        this.flowSettingsService.entitiesSelectable.set(value);
     }
     /**
      * Settings for connection (it renders when user tries to create edge between nodes)
@@ -1311,23 +1559,19 @@ class VflowComponent {
      */
     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(); }
     /**
      * Edges to render
      */
     set edges(newEdges) {
         const newModels = runInInjectionContext(this.injector, () => ReferenceKeeper.edges(newEdges, this.flowEntitiesService.edges()));
         // quick and dirty binding nodes to edges
-        addNodesToEdges(this.nodeModels, newModels);
+        addNodesToEdges(this.nodeModels(), newModels);
         this.flowEntitiesService.edges.set(newModels);
     }
-    get edgeModels() { return this.flowEntitiesService.validEdges(); }
     // #region METHODS_API
     /**
      * Change viewport to specified state
@@ -1369,20 +1613,23 @@ class VflowComponent {
     }
     // #endregion
     trackNodes(idx, { node }) {
-        return node.id;
+        return node;
     }
     trackEdges(idx, { edge }) {
-        return edge.id;
+        return edge;
     }
     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: [
+    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", entitiesSelectable: "entitiesSelectable", 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 }], 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      [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: "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 }); }
+            EdgeChangesService,
+            NodeRenderingService,
+            SelectionService,
+            FlowSettingsService
+        ], 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", "onEdgesChange", "onEdgesChange"] }], ngImport: i0, template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  class=\"root-svg\"\n  #flow\n  [style.backgroundColor]=\"background\"\n  [attr.width]=\"flowWidth()\"\n  [attr.height]=\"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      [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: "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,
@@ -1392,11 +1639,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FlowStatusService,
                         FlowEntitiesService,
                         NodesChangeService,
-                        EdgeChangesService
+                        EdgeChangesService,
+                        NodeRenderingService,
+                        SelectionService,
+                        FlowSettingsService
                     ], 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      [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  class=\"root-svg\"\n  #flow\n  [style.backgroundColor]=\"background\"\n  [attr.width]=\"flowWidth()\"\n  [attr.height]=\"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      [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: [{
@@ -1407,6 +1657,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], background: [{
                 type: Input
+            }], entitiesSelectable: [{
+                type: Input
             }], connection: [{
                 type: Input,
                 args: [{ transform: (settings) => new ConnectionModel(settings) }]
@@ -1431,43 +1683,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: ViewChild,
                 args: [MapContextDirective]
             }] } });
-function bindFlowToNodes(flow, nodes) {
-    nodes.forEach(n => n.bindFlow(flow));
-}
 
 class HandleComponent {
     constructor() {
+        this.injector = inject(Injector);
         this.handleService = inject(HandleService);
         this.element = inject(ElementRef).nativeElement;
     }
     ngOnInit() {
-        queueMicrotask(() => {
-            const { width, height, x, y } = this.parentRect();
-            this.model = new HandleModel({
-                position: this.position,
-                type: this.type,
-                id: this.id,
-                parentPosition: { x, y },
-                parentSize: { width, height }
-            }, this.handleService.node());
-            this.handleService.createHandle(this.model);
-        });
+        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);
     }
-    parentRect() {
-        const parent = this.element.parentElement;
-        return {
-            x: parent.offsetLeft,
-            y: parent.offsetTop,
-            width: parent.clientWidth,
-            height: parent.clientHeight
-        };
-    }
     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" }, ngImport: i0, template: "" }); }
+    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: "" }]
@@ -1479,6 +1721,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [{ required: true }]
             }], id: [{
                 type: Input
+            }], template: [{
+                type: Input
+            }], ngOnInit: [] } });
+
+class SelectableDirective {
+    constructor() {
+        this.flowSettingsService = inject(FlowSettingsService);
+        this.selectionService = inject(SelectionService);
+        this.parentEdge = inject(EdgeComponent, { optional: true });
+        this.parentNode = inject(NodeComponent, { optional: true });
+    }
+    onMousedown() {
+        const entity = this.entity();
+        if (entity && this.flowSettingsService.entitiesSelectable()) {
+            this.selectionService.select(entity);
+        }
+    }
+    entity() {
+        if (this.parentNode) {
+            return this.parentNode.nodeModel;
+        }
+        else if (this.parentEdge) {
+            return this.parentEdge.model;
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectableDirective, selector: "[selectable]", host: { listeners: { "mousedown": "onMousedown()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[selectable]' }]
+        }], propDecorators: { onMousedown: [{
+                type: HostListener,
+                args: ['mousedown']
             }] } });
 
 const components = [
@@ -1495,6 +1772,8 @@ const directives = [
     MapContextDirective,
     RootSvgReferenceDirective,
     RootSvgContextDirective,
+    HandleSizeControllerDirective,
+    SelectableDirective
 ];
 const templateDirectives = [
     NodeHtmlTemplateDirective,
@@ -1514,12 +1793,15 @@ class VflowModule {
             DefsComponent, SpacePointContextDirective,
             MapContextDirective,
             RootSvgReferenceDirective,
-            RootSvgContextDirective, NodeHtmlTemplateDirective,
+            RootSvgContextDirective,
+            HandleSizeControllerDirective,
+            SelectableDirective, NodeHtmlTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
             ConnectionTemplateDirective,
             HandleTemplateDirective], imports: [CommonModule], exports: [VflowComponent,
-            HandleComponent, NodeHtmlTemplateDirective,
+            HandleComponent,
+            SelectableDirective, NodeHtmlTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
             ConnectionTemplateDirective,
@@ -1533,6 +1815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     exports: [
                         VflowComponent,
                         HandleComponent,
+                        SelectableDirective,
                         ...templateDirectives
                     ],
                     declarations: [...components, ...directives, ...templateDirectives],
@@ -1545,5 +1828,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, HandleComponent, HandleTemplateDirective, NodeHtmlTemplateDirective, VflowComponent, VflowModule };
+export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, HandleComponent, HandleTemplateDirective, NodeHtmlTemplateDirective, SelectableDirective, VflowComponent, VflowModule };
 //# sourceMappingURL=ngx-vflow.mjs.map