ngx-vflow 0.3.0 → 0.4.0

package/fesm2022/ngx-vflow.mjs

@@ -1,12 +1,12 @@
 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, runInInjectionContext, Injector, NgZone, Component, ChangeDetectionStrategy, ViewChild, HostListener, 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, Subject, Observable, Subscription, startWith, fromEvent } from 'rxjs';
 import { path } from 'd3-path';
 import { __decorate } from 'tslib';
 
@@ -58,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(() => {
@@ -91,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 }); }
@@ -112,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;
 
@@ -243,23 +377,6 @@ function addNodesToEdges(nodes, edges) {
     });
 }
 
-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 });
@@ -297,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() {
         /**
@@ -403,16 +456,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+class FlowSettingsService {
+    constructor() {
+        this.entitiesSelectable = signal(true);
+        /**
+         * Global setting with handle positions. Nodes derive this value
+         *
+         * @deprecated
+         */
+        this.handlePositions = signal({ source: 'right', target: 'left' });
+        /**
+         * @see {VflowComponent.view}
+         */
+        this.view = signal([400, 400]);
+        this.flowWidth = computed(() => this.view() === 'auto' ? '100%' : this.view()[0]);
+        this.flowHeight = computed(() => this.view() === 'auto' ? '100%' : this.view()[1]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService, decorators: [{
+            type: Injectable
+        }] });
+
 class 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.sourcePosition = computed(() => this.flowSettingsService.handlePositions().source);
+        this.targetPosition = computed(() => this.flowSettingsService.handlePositions().target);
         this.handles = signal([]);
         this.handles$ = toObservable(this.handles);
         this.draggable = true;
@@ -422,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 {
@@ -547,6 +619,8 @@ class EdgeModel {
         this.edge = edge;
         this.source = signal(undefined);
         this.target = signal(undefined);
+        this.selected = signal(false);
+        this.selected$ = toObservable(this.selected);
         this.detached = computed(() => {
             const source = this.source();
             const target = this.target();
@@ -671,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));
@@ -708,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
@@ -757,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);
@@ -868,7 +969,7 @@ function resizable(elems, zone) {
 function InjectionContext(target, key, descriptor) {
     const originalMethod = descriptor.value;
     descriptor.value = function (...args) {
-        if (this instanceof WithInjectorDirective) {
+        if (implementsWithInjector(this)) {
             return runInInjectionContext(this.injector, () => originalMethod.apply(this, args));
         }
         else {
@@ -878,16 +979,9 @@ function InjectionContext(target, key, descriptor) {
     // Return the modified descriptor
     return descriptor;
 }
-class WithInjectorDirective {
-    constructor() {
-        this.injector = inject(Injector);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WithInjectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: WithInjectorDirective, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WithInjectorDirective, decorators: [{
-            type: Directive
-        }] });
+const implementsWithInjector = (instance) => {
+    return 'injector' in instance && 'get' in instance.injector;
+};
 
 function Microtask(target, key, descriptor) {
     const originalMethod = descriptor.value;
@@ -936,14 +1030,17 @@ function getChildStrokeWidth(element) {
     return 0;
 }
 
-class NodeComponent extends WithInjectorDirective {
+class NodeComponent {
     constructor() {
-        super(...arguments);
+        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');
@@ -1029,6 +1126,14 @@ class NodeComponent extends WithInjectorDirective {
             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({
@@ -1043,8 +1148,8 @@ class NodeComponent extends WithInjectorDirective {
             }, this.nodeModel));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, deps: null, 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 }], usesInheritance: true, ngImport: i0, template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  #nodeContent\n  width=\"100\"\n  height=\"50\"\n>\n  <div #htmlWrapper 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    *ngIf=\"!handle.template\"\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: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: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"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "g[node]", inputs: { nodeModel: "nodeModel", nodeHtmlTemplate: "nodeHtmlTemplate" }, providers: [HandleService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], ngImport: i0, template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  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
@@ -1054,7 +1159,7 @@ __decorate([
 ], 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 #htmlWrapper 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    *ngIf=\"!handle.template\"\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: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: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: [{
@@ -1125,6 +1230,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 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))})` : '';
@@ -1133,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 = {
@@ -1142,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: [{
@@ -1350,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
@@ -1363,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
         /**
@@ -1393,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
@@ -1407,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.
@@ -1418,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)
@@ -1434,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
@@ -1498,14 +1619,17 @@ class VflowComponent {
         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,
@@ -1515,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: [{
@@ -1530,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) }]
@@ -1554,13 +1683,10 @@ 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 extends WithInjectorDirective {
+class HandleComponent {
     constructor() {
-        super(...arguments);
+        this.injector = inject(Injector);
         this.handleService = inject(HandleService);
         this.element = inject(ElementRef).nativeElement;
     }
@@ -1578,8 +1704,8 @@ class HandleComponent extends WithInjectorDirective {
     ngOnDestroy() {
         this.handleService.destroyHandle(this.model);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HandleComponent, selector: "handle", inputs: { position: "position", type: "type", id: "id", template: "template" }, usesInheritance: true, ngImport: i0, template: "" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HandleComponent, selector: "handle", inputs: { position: "position", type: "type", id: "id", template: "template" }, ngImport: i0, template: "" }); }
 }
 __decorate([
     InjectionContext
@@ -1599,6 +1725,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 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 = [
     VflowComponent,
     NodeComponent,
@@ -1613,7 +1772,8 @@ const directives = [
     MapContextDirective,
     RootSvgReferenceDirective,
     RootSvgContextDirective,
-    HandleSizeControllerDirective
+    HandleSizeControllerDirective,
+    SelectableDirective
 ];
 const templateDirectives = [
     NodeHtmlTemplateDirective,
@@ -1634,12 +1794,14 @@ class VflowModule {
             MapContextDirective,
             RootSvgReferenceDirective,
             RootSvgContextDirective,
-            HandleSizeControllerDirective, NodeHtmlTemplateDirective,
+            HandleSizeControllerDirective,
+            SelectableDirective, NodeHtmlTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
             ConnectionTemplateDirective,
             HandleTemplateDirective], imports: [CommonModule], exports: [VflowComponent,
-            HandleComponent, NodeHtmlTemplateDirective,
+            HandleComponent,
+            SelectableDirective, NodeHtmlTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
             ConnectionTemplateDirective,
@@ -1653,6 +1815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     exports: [
                         VflowComponent,
                         HandleComponent,
+                        SelectableDirective,
                         ...templateDirectives
                     ],
                     declarations: [...components, ...directives, ...templateDirectives],
@@ -1665,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