ngx-vflow 1.4.2 → 1.5.0

package/fesm2022/ngx-vflow.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, DestroyRef, EventEmitter, OutputEmitterRef, input, NgZone, viewChild, Component, ChangeDetectionStrategy, Injector, output, HostListener, runInInjectionContext, contentChild, Input, forwardRef } from '@angular/core';
+import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, DestroyRef, EventEmitter, OutputEmitterRef, input, NgZone, viewChild, Component, ChangeDetectionStrategy, output, HostListener, Injector, runInInjectionContext, contentChild, Input, forwardRef } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
 import { switchMap, merge, fromEvent, tap, Subject, Observable, skip, map, pairwise, filter, distinctUntilChanged, observeOn, asyncScheduler, zip, animationFrameScheduler, share, startWith, of } from 'rxjs';
@@ -151,6 +151,7 @@ class FlowSettingsService {
     constructor() {
         this.entitiesSelectable = signal(true);
         this.elevateNodesOnSelect = signal(true);
+        this.elevateEdgesOnSelect = signal(true);
         /**
          * @see {VflowComponent.view}
          */
@@ -677,12 +678,24 @@ class FlowStatusService {
     setConnectionStartStatus(source, sourceHandle) {
         this.status.set({ state: 'connection-start', payload: { source, sourceHandle } });
     }
+    setReconnectionStartStatus(source, sourceHandle, oldEdge) {
+        this.status.set({ state: 'reconnection-start', payload: { source, sourceHandle, oldEdge } });
+    }
     setConnectionValidationStatus(valid, source, target, sourceHandle, targetHandle) {
         this.status.set({ state: 'connection-validation', payload: { source, target, sourceHandle, targetHandle, valid } });
     }
+    setReconnectionValidationStatus(valid, source, target, sourceHandle, targetHandle, oldEdge) {
+        this.status.set({
+            state: 'reconnection-validation',
+            payload: { source, target, sourceHandle, targetHandle, valid, oldEdge },
+        });
+    }
     setConnectionEndStatus(source, target, sourceHandle, targetHandle) {
         this.status.set({ state: 'connection-end', payload: { source, target, sourceHandle, targetHandle } });
     }
+    setReconnectionEndStatus(source, target, sourceHandle, targetHandle, oldEdge) {
+        this.status.set({ state: 'reconnection-end', payload: { source, target, sourceHandle, targetHandle, oldEdge } });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowStatusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowStatusService }); }
 }
@@ -1254,6 +1267,7 @@ class EdgeModel {
         this.target = signal(undefined);
         this.selected = signal(false);
         this.selected$ = toObservable(this.selected);
+        this.renderOrder = signal(0);
         this.detached = computed(() => {
             const source = this.source();
             const target = this.target();
@@ -1278,28 +1292,8 @@ class EdgeModel {
         });
         this.detached$ = toObservable(this.detached);
         this.path = computed(() => {
-            let source;
-            if (this.edge.sourceHandle) {
-                source = this.source()
-                    ?.handles()
-                    .find((handle) => handle.rawHandle.id === this.edge.sourceHandle);
-            }
-            else {
-                source = this.source()
-                    ?.handles()
-                    .find((handle) => handle.rawHandle.type === 'source');
-            }
-            let target;
-            if (this.edge.targetHandle) {
-                target = this.target()
-                    ?.handles()
-                    .find((handle) => handle.rawHandle.id === this.edge.targetHandle);
-            }
-            else {
-                target = this.target()
-                    ?.handles()
-                    .find((handle) => handle.rawHandle.type === 'target');
-            }
+            const source = this.sourceHandle();
+            const target = this.targetHandle();
             // TODO: don't like this
             if (!source || !target) {
                 return {
@@ -1322,9 +1316,30 @@ class EdgeModel {
                     return smoothStepPath(source.pointAbsolute(), target.pointAbsolute(), source.rawHandle.position, target.rawHandle.position, 0);
             }
         });
+        this.sourceHandle = computed(() => {
+            if (this.edge.sourceHandle) {
+                return (this.source()
+                    ?.handles()
+                    .find((handle) => handle.rawHandle.id === this.edge.sourceHandle) ?? null);
+            }
+            return (this.source()
+                ?.handles()
+                .find((handle) => handle.rawHandle.type === 'source') ?? null);
+        });
+        this.targetHandle = computed(() => {
+            if (this.edge.targetHandle) {
+                return (this.target()
+                    ?.handles()
+                    .find((handle) => handle.rawHandle.id === this.edge.targetHandle) ?? null);
+            }
+            return (this.target()
+                ?.handles()
+                .find((handle) => handle.rawHandle.type === 'target') ?? null);
+        });
         this.edgeLabels = {};
         this.type = edge.type ?? 'default';
         this.curve = edge.curve ?? 'bezier';
+        this.reconnectable = edge.reconnectable ?? false;
         if (edge.edgeLabels?.start)
             this.edgeLabels.start = new EdgeLabelModel(edge.edgeLabels.start);
         if (edge.edgeLabels?.center)
@@ -1845,76 +1860,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{ standalone: true, selector: 'g[edgeLabel]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (model(); as model) {\n  @if (model.edgeLabel.type === 'html-template' && htmlTemplate()) {\n    @if (htmlTemplate(); as htmlTemplate) {\n      <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        <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n          <ng-container *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\" />\n        </div>\n      </svg:foreignObject>\n    }\n  }\n\n  @if (model.edgeLabel.type === 'default') {\n    <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      <div #edgeLabelWrapper class=\"edge-label-wrapper\" [style]=\"edgeLabelStyle()\">\n        {{ model.edgeLabel.text }}\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"] }]
         }] });
 
-class EdgeComponent {
-    constructor() {
-        this.injector = inject(Injector);
-        this.selectionService = inject(SelectionService);
-        this.flowSettingsService = inject(FlowSettingsService);
-        this.model = input.required();
-        this.edgeTemplate = input();
-        this.edgeLabelHtmlTemplate = input();
-        this.markerStartUrl = computed(() => {
-            const marker = this.model().edge.markers?.start;
-            return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
-        });
-        this.markerEndUrl = computed(() => {
-            const marker = this.model().edge.markers?.end;
-            return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
-        });
-    }
-    ngOnInit() {
-        this.edgeContext = {
-            $implicit: {
-                // TODO: check if edge could change
-                edge: this.model().edge,
-                path: computed(() => this.model().path().path),
-                markerStart: this.markerStartUrl,
-                markerEnd: this.markerEndUrl,
-                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: "17.3.12", ngImport: i0, type: EdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeComponent, isStandalone: true, selector: "g[edge]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeTemplate: { classPropertyName: "edgeTemplate", publicName: "edgeTemplate", isSignal: true, isRequired: false, transformFunction: null }, edgeLabelHtmlTemplate: { classPropertyName: "edgeLabelHtmlTemplate", publicName: "edgeLabelHtmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "selectable" }, ngImport: i0, template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"markerStartUrl()\"\n    [attr.marker-end]=\"markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\"\n    (mousedown)=\"onEdgeMouseDown()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"edgeContext\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.start\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.center; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.center\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.end; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.end\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}\n"], dependencies: [{ kind: "directive", type: 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: "17.3.12", ngImport: i0, type: EdgeComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'g[edge]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'selectable',
-                    }, imports: [NgTemplateOutlet, EdgeLabelComponent], template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"markerStartUrl()\"\n    [attr.marker-end]=\"markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\"\n    (mousedown)=\"onEdgeMouseDown()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"edgeContext\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.start\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.center; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.center\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.end; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.end\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}\n"] }]
-        }] });
-
-class HandleService {
-    constructor() {
-        this.node = signal(null);
-    }
-    createHandle(newHandle) {
-        const node = this.node();
-        if (node) {
-            node.handles.update((handles) => [...handles, newHandle]);
-        }
-    }
-    destroyHandle(handleToDestoy) {
-        const node = this.node();
-        if (node) {
-            node.handles.update((handles) => handles.filter((handle) => handle !== handleToDestoy));
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleService }); }
-}
-__decorate([
-    Microtask // TODO fixes rendering of handle for group node
-], HandleService.prototype, "createHandle", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleService, decorators: [{
-            type: Injectable
-        }], propDecorators: { createHandle: [] } });
-
 /**
  * This function contains a hack-y behavior.
  * If the handles are of the same type (source-source or target-target),
@@ -1960,42 +1905,24 @@ class ConnectionControllerDirective {
          * @todo add connect event and deprecate onConnect
          */
         // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-        this.onConnect = outputFromObservable(toObservable(this.statusService.status).pipe(filter((status) => status.state === 'connection-end'), map((status) => {
-            let source = status.payload.source;
-            let target = status.payload.target;
-            let sourceHandle = status.payload.sourceHandle;
-            let targetHandle = status.payload.targetHandle;
-            if (this.isStrictMode()) {
-                const adjusted = adjustDirection({
-                    source: status.payload.source,
-                    sourceHandle: status.payload.sourceHandle,
-                    target: status.payload.target,
-                    targetHandle: status.payload.targetHandle,
-                });
-                source = adjusted.source;
-                target = adjusted.target;
-                sourceHandle = adjusted.sourceHandle;
-                targetHandle = adjusted.targetHandle;
-            }
-            const sourceId = source.node.id;
-            const targetId = target.node.id;
-            const sourceHandleId = sourceHandle.rawHandle.id;
-            const targetHandleId = targetHandle.rawHandle.id;
-            return {
-                source: sourceId,
-                target: targetId,
-                sourceHandle: sourceHandleId,
-                targetHandle: targetHandleId,
-            };
-        }), tap(() => this.statusService.setIdleStatus()), filter((connection) => this.flowEntitiesService.connection().validator(connection))));
+        this.onConnect = outputFromObservable(toObservable(this.statusService.status).pipe(filter((status) => status.state === 'connection-end'), map((status) => statusToConnection(status, this.isStrictMode())), tap(() => this.statusService.setIdleStatus()), filter((connection) => this.flowEntitiesService.connection().validator(connection))));
+        this.onReconnect = outputFromObservable(toObservable(this.statusService.status).pipe(filter((status) => status.state === 'reconnection-end'), map((status) => {
+            const connection = statusToConnection(status, this.isStrictMode());
+            const oldEdge = status.payload.oldEdge.edge;
+            return { connection, oldEdge };
+        }), tap(() => this.statusService.setIdleStatus()), filter(({ connection }) => this.flowEntitiesService.connection().validator(connection))));
         this.isStrictMode = computed(() => this.flowEntitiesService.connection().mode === 'strict');
     }
     startConnection(handle) {
         this.statusService.setConnectionStartStatus(handle.parentNode, handle);
     }
+    startReconnection(handle, oldEdge) {
+        this.statusService.setReconnectionStartStatus(handle.parentNode, handle, oldEdge);
+    }
     validateConnection(handle) {
         const status = this.statusService.status();
-        if (status.state === 'connection-start') {
+        if (status.state === 'connection-start' || status.state === 'reconnection-start') {
+            const isReconnection = status.state === 'reconnection-start';
             let source = status.payload.source;
             let target = handle.parentNode;
             let sourceHandle = status.payload.sourceHandle;
@@ -2024,89 +1951,97 @@ class ConnectionControllerDirective {
             handle.state.set(valid ? 'valid' : 'invalid');
             // status is about how we draw connection, so we don't need
             // swapped diretion here
-            this.statusService.setConnectionValidationStatus(valid, status.payload.source, handle.parentNode, status.payload.sourceHandle, handle);
+            isReconnection
+                ? this.statusService.setReconnectionValidationStatus(valid, status.payload.source, handle.parentNode, status.payload.sourceHandle, handle, status.payload.oldEdge)
+                : this.statusService.setConnectionValidationStatus(valid, status.payload.source, handle.parentNode, status.payload.sourceHandle, handle);
         }
     }
     resetValidateConnection(targetHandle) {
         targetHandle.state.set('idle');
         // drop back to start status
         const status = this.statusService.status();
-        if (status.state === 'connection-validation') {
-            this.statusService.setConnectionStartStatus(status.payload.source, status.payload.sourceHandle);
+        if (status.state === 'connection-validation' || status.state === 'reconnection-validation') {
+            const isReconnection = status.state === 'reconnection-validation';
+            isReconnection
+                ? this.statusService.setReconnectionStartStatus(status.payload.source, status.payload.sourceHandle, status.payload.oldEdge)
+                : this.statusService.setConnectionStartStatus(status.payload.source, status.payload.sourceHandle);
         }
     }
     endConnection() {
         const status = this.statusService.status();
-        if (status.state === 'connection-validation') {
+        if (status.state === 'connection-validation' || status.state === 'reconnection-validation') {
+            const isReconnection = status.state === 'reconnection-validation';
             const source = status.payload.source;
             const sourceHandle = status.payload.sourceHandle;
             const target = status.payload.target;
             const targetHandle = status.payload.targetHandle;
-            this.statusService.setConnectionEndStatus(source, target, sourceHandle, targetHandle);
+            isReconnection
+                ? this.statusService.setReconnectionEndStatus(source, target, sourceHandle, targetHandle, status.payload.oldEdge)
+                : this.statusService.setConnectionEndStatus(source, target, sourceHandle, targetHandle);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ConnectionControllerDirective, isStandalone: true, selector: "[onConnect]", outputs: { onConnect: "onConnect" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ConnectionControllerDirective, isStandalone: true, selector: "[onConnect], [onReconnect]", outputs: { onConnect: "onConnect", onReconnect: "onReconnect" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[onConnect]',
+                    selector: '[onConnect], [onReconnect]',
                     standalone: true,
                 }]
         }] });
+function statusToConnection(status, isStrictMode) {
+    let source = status.payload.source;
+    let target = status.payload.target;
+    let sourceHandle = status.payload.sourceHandle;
+    let targetHandle = status.payload.targetHandle;
+    if (isStrictMode) {
+        const adjusted = adjustDirection({
+            source: status.payload.source,
+            sourceHandle: status.payload.sourceHandle,
+            target: status.payload.target,
+            targetHandle: status.payload.targetHandle,
+        });
+        source = adjusted.source;
+        target = adjusted.target;
+        sourceHandle = adjusted.sourceHandle;
+        targetHandle = adjusted.targetHandle;
+    }
+    const sourceId = source.node.id;
+    const targetId = target.node.id;
+    const sourceHandleId = sourceHandle.rawHandle.id;
+    const targetHandleId = targetHandle.rawHandle.id;
+    return {
+        source: sourceId,
+        target: targetId,
+        sourceHandle: sourceHandleId,
+        targetHandle: targetHandleId,
+    };
+}
 
-class HandleSizeControllerDirective {
+class EdgeRenderingService {
     constructor() {
-        this.handleModel = input.required({
-            alias: 'handleSizeController',
+        this.flowEntitiesService = inject(FlowEntitiesService);
+        this.edges = computed(() => {
+            return this.flowEntitiesService.validEdges().sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
         });
-        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,
+        this.maxOrder = computed(() => {
+            return Math.max(...this.flowEntitiesService.validEdges().map((n) => n.renderOrder()));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: HandleSizeControllerDirective, isStandalone: true, selector: "[handleSizeController]", inputs: { handleModel: { classPropertyName: "handleModel", publicName: "handleSizeController", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleSizeControllerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: '[handleSizeController]',
-                }]
-        }] });
-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;
+    pull(edge) {
+        const isAlreadyOnTop = edge.renderOrder() !== 0 && this.maxOrder() === edge.renderOrder();
+        if (isAlreadyOnTop) {
+            return;
         }
-        return strokeAsNumber;
+        // pull node
+        edge.renderOrder.set(this.maxOrder() + 1);
     }
-    return 0;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeRenderingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeRenderingService }); }
 }
-
-class DefaultNodeComponent {
-    constructor() {
-        this.selected = input(false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: DefaultNodeComponent, isStandalone: true, selector: "default-node", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.selected": "selected()" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultNodeComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'default-node', host: {
-                        '[class.selected]': 'selected()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeRenderingService, decorators: [{
+            type: Injectable
         }] });
 
 function isTouchEvent(event) {
@@ -2191,6 +2126,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['mouseout', ['$event']]
             }] } });
 
+class EdgeComponent {
+    constructor() {
+        this.injector = inject(Injector);
+        this.selectionService = inject(SelectionService);
+        this.flowSettingsService = inject(FlowSettingsService);
+        this.flowStatusService = inject(FlowStatusService);
+        this.edgeRenderingService = inject(EdgeRenderingService);
+        // TODO remove dependency from this directive
+        this.connectionController = inject(ConnectionControllerDirective, { optional: true });
+        this.model = input.required();
+        this.edgeTemplate = input();
+        this.edgeLabelHtmlTemplate = input();
+        this.interactiveEdgeRef = viewChild.required('interactiveEdge');
+        this.markerStartUrl = computed(() => {
+            const marker = this.model().edge.markers?.start;
+            return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
+        });
+        this.markerEndUrl = computed(() => {
+            const marker = this.model().edge.markers?.end;
+            return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
+        });
+        this.isReconnecting = computed(() => {
+            const status = this.flowStatusService.status();
+            const isReconnecting = status.state === 'reconnection-start' || status.state === 'reconnection-validation';
+            return isReconnecting && status.payload.oldEdge === this.model();
+        });
+    }
+    ngOnInit() {
+        this.edgeContext = {
+            $implicit: {
+                // TODO: check if edge could change
+                edge: this.model().edge,
+                path: computed(() => this.model().path().path),
+                markerStart: this.markerStartUrl,
+                markerEnd: this.markerEndUrl,
+                selected: this.model().selected.asReadonly(),
+            },
+        };
+    }
+    select() {
+        if (this.flowSettingsService.entitiesSelectable()) {
+            this.selectionService.select(this.model());
+        }
+    }
+    pull() {
+        if (this.flowSettingsService.elevateEdgesOnSelect()) {
+            this.edgeRenderingService.pull(this.model());
+        }
+    }
+    startReconnection(event, handle) {
+        // ignore drag by stopping propagation
+        event.stopPropagation();
+        this.connectionController?.startReconnection(handle, this.model());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeComponent, isStandalone: true, selector: "g[edge]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeTemplate: { classPropertyName: "edgeTemplate", publicName: "edgeTemplate", isSignal: true, isRequired: false, transformFunction: null }, edgeLabelHtmlTemplate: { classPropertyName: "edgeLabelHtmlTemplate", publicName: "edgeLabelHtmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.visibility": "isReconnecting() ? \"hidden\" : \"visible\"" }, classAttribute: "selectable" }, viewQueries: [{ propertyName: "interactiveEdgeRef", first: true, predicate: ["interactiveEdge"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"markerStartUrl()\"\n    [attr.marker-end]=\"markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path\n    #interactiveEdge\n    class=\"interactive-edge\"\n    [attr.d]=\"model().path().path\"\n    (pointerStart)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"edgeContext\"\n      [ngTemplateOutletInjector]=\"injector\" />\n\n    <svg:path #interactiveEdge class=\"interactive-edge\" [attr.d]=\"model().path().path\" (pointerStart)=\"pull()\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.start\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.center; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.center\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.end; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.end\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().sourceHandle() && model().targetHandle()) {\n  @if (model().reconnectable === true || model().reconnectable === 'source') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().sourceHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().sourceHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().targetHandle()!)\" />\n  }\n\n  @if (model().reconnectable === true || model().reconnectable === 'target') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().targetHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().targetHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().sourceHandle()!)\" />\n  }\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}.interactive-edge{fill:none;stroke-width:20;stroke:transparent}.reconnect-handle{fill:transparent;cursor:move}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EdgeLabelComponent, selector: "g[edgeLabel]", inputs: ["model", "edgeModel", "point", "htmlTemplate"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'g[edge]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'selectable',
+                        '[style.visibility]': 'isReconnecting() ? "hidden" : "visible"',
+                    }, imports: [NgTemplateOutlet, EdgeLabelComponent, PointerDirective], template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"markerStartUrl()\"\n    [attr.marker-end]=\"markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path\n    #interactiveEdge\n    class=\"interactive-edge\"\n    [attr.d]=\"model().path().path\"\n    (pointerStart)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"edgeContext\"\n      [ngTemplateOutletInjector]=\"injector\" />\n\n    <svg:path #interactiveEdge class=\"interactive-edge\" [attr.d]=\"model().path().path\" (pointerStart)=\"pull()\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.start\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.center; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.center\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.end; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.end\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().sourceHandle() && model().targetHandle()) {\n  @if (model().reconnectable === true || model().reconnectable === 'source') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().sourceHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().sourceHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().targetHandle()!)\" />\n  }\n\n  @if (model().reconnectable === true || model().reconnectable === 'target') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().targetHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().targetHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().sourceHandle()!)\" />\n  }\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}.interactive-edge{fill:none;stroke-width:20;stroke:transparent}.reconnect-handle{fill:transparent;cursor:move}\n"] }]
+        }] });
+
+class HandleService {
+    constructor() {
+        this.node = signal(null);
+    }
+    createHandle(newHandle) {
+        const node = this.node();
+        if (node) {
+            node.handles.update((handles) => [...handles, newHandle]);
+        }
+    }
+    destroyHandle(handleToDestoy) {
+        const node = this.node();
+        if (node) {
+            node.handles.update((handles) => handles.filter((handle) => handle !== handleToDestoy));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleService }); }
+}
+__decorate([
+    Microtask // TODO fixes rendering of handle for group node
+], HandleService.prototype, "createHandle", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleService, decorators: [{
+            type: Injectable
+        }], propDecorators: { createHandle: [] } });
+
+class HandleSizeControllerDirective {
+    constructor() {
+        this.handleModel = input.required({
+            alias: 'handleSizeController',
+        });
+        this.handleWrapper = inject(ElementRef);
+    }
+    ngAfterViewInit() {
+        const element = this.handleWrapper.nativeElement;
+        const rect = element.getBBox();
+        const stroke = getChildStrokeWidth(element);
+        this.handleModel().size.set({
+            width: rect.width + stroke,
+            height: rect.height + stroke,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: HandleSizeControllerDirective, isStandalone: true, selector: "[handleSizeController]", inputs: { handleModel: { classPropertyName: "handleModel", publicName: "handleSizeController", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleSizeControllerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[handleSizeController]',
+                }]
+        }] });
+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 DefaultNodeComponent {
+    constructor() {
+        this.selected = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: DefaultNodeComponent, isStandalone: true, selector: "default-node", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.selected": "selected()" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultNodeComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'default-node', host: {
+                        '[class.selected]': 'selected()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"] }]
+        }] });
+
 class ResizableComponent {
     get model() {
         return this.nodeAccessor.model();
@@ -2589,7 +2668,9 @@ class NodeComponent {
         this.nodeTemplate = input();
         this.groupNodeTemplate = input();
         this.showMagnet = computed(() => this.flowStatusService.status().state === 'connection-start' ||
-            this.flowStatusService.status().state === 'connection-validation');
+            this.flowStatusService.status().state === 'connection-validation' ||
+            this.flowStatusService.status().state === 'reconnection-start' ||
+            this.flowStatusService.status().state === 'reconnection-validation');
         this.toolbar = computed(() => this.overlaysService.nodeToolbars().get(this.model()));
     }
     ngOnInit() {
@@ -2659,7 +2740,7 @@ class ConnectionComponent {
         this.spacePointContext = inject(SpacePointContextDirective);
         this.path = computed(() => {
             const status = this.flowStatusService.status();
-            if (status.state === 'connection-start') {
+            if (status.state === 'connection-start' || status.state === 'reconnection-start') {
                 const sourceHandle = status.payload.sourceHandle;
                 const sourcePoint = sourceHandle.pointAbsolute();
                 const sourcePosition = sourceHandle.rawHandle.position;
@@ -2676,7 +2757,7 @@ class ConnectionComponent {
                         return smoothStepPath(sourcePoint, targetPoint, sourcePosition, targetPosition, 0).path;
                 }
             }
-            if (status.state === 'connection-validation') {
+            if (status.state === 'connection-validation' || status.state === 'reconnection-validation') {
                 const sourceHandle = status.payload.sourceHandle;
                 const sourcePoint = sourceHandle.pointAbsolute();
                 const sourcePosition = sourceHandle.rawHandle.position;
@@ -2950,7 +3031,7 @@ class RootSvgContextDirective {
     // TODO: check for multiple instances on page
     resetConnection() {
         const status = this.flowStatusService.status();
-        if (status.state === 'connection-start') {
+        if (status.state === 'connection-start' || status.state === 'reconnection-start') {
             this.flowStatusService.setIdleStatus();
         }
     }
@@ -3016,6 +3097,7 @@ class VflowComponent {
         this.nodesChangeService = inject(NodesChangeService);
         this.edgesChangeService = inject(EdgeChangesService);
         this.nodeRenderingService = inject(NodeRenderingService);
+        this.edgeRenderingService = inject(EdgeRenderingService);
         this.flowSettingsService = inject(FlowSettingsService);
         this.componentEventBusService = inject(ComponentEventBusService);
         this.keyboardService = inject(KeyboardService);
@@ -3026,7 +3108,7 @@ class VflowComponent {
         this.nodeModels = computed(() => this.nodeRenderingService.nodes());
         this.groups = computed(() => this.nodeRenderingService.groups());
         this.nonGroups = computed(() => this.nodeRenderingService.nonGroups());
-        this.edgeModels = computed(() => this.flowEntitiesService.validEdges());
+        this.edgeModels = computed(() => this.edgeRenderingService.edges());
         // #endregion
         // #region OUTPUTS
         /**
@@ -3144,6 +3226,12 @@ class VflowComponent {
     set elevateNodesOnSelect(value) {
         this.flowSettingsService.elevateNodesOnSelect.set(value);
     }
+    /**
+     * Raizing z-index for selected edge
+     */
+    set elevateEdgesOnSelect(value) {
+        this.flowSettingsService.elevateEdgesOnSelect.set(value);
+    }
     // #endregion
     // #region MAIN_INPUTS
     /**
@@ -3245,7 +3333,7 @@ class VflowComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VflowComponent, isStandalone: true, selector: "vflow", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: false, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: false, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: false, isRequired: false, transformFunction: null }, optimization: { classPropertyName: "optimization", publicName: "optimization", isSignal: true, isRequired: false, transformFunction: null }, entitiesSelectable: { classPropertyName: "entitiesSelectable", publicName: "entitiesSelectable", isSignal: false, isRequired: false, transformFunction: null }, keyboardShortcuts: { classPropertyName: "keyboardShortcuts", publicName: "keyboardShortcuts", isSignal: false, isRequired: false, transformFunction: null }, connection: { classPropertyName: "connection", publicName: "connection", isSignal: false, isRequired: false, transformFunction: (settings) => new ConnectionModel(settings) }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: false, isRequired: false, transformFunction: null }, elevateNodesOnSelect: { classPropertyName: "elevateNodesOnSelect", publicName: "elevateNodesOnSelect", isSignal: false, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: false, isRequired: true, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VflowComponent, isStandalone: true, selector: "vflow", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: false, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: false, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: false, isRequired: false, transformFunction: null }, optimization: { classPropertyName: "optimization", publicName: "optimization", isSignal: true, isRequired: false, transformFunction: null }, entitiesSelectable: { classPropertyName: "entitiesSelectable", publicName: "entitiesSelectable", isSignal: false, isRequired: false, transformFunction: null }, keyboardShortcuts: { classPropertyName: "keyboardShortcuts", publicName: "keyboardShortcuts", isSignal: false, isRequired: false, transformFunction: null }, connection: { classPropertyName: "connection", publicName: "connection", isSignal: false, isRequired: false, transformFunction: (settings) => new ConnectionModel(settings) }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: false, isRequired: false, transformFunction: null }, elevateNodesOnSelect: { classPropertyName: "elevateNodesOnSelect", publicName: "elevateNodesOnSelect", isSignal: false, isRequired: false, transformFunction: null }, elevateEdgesOnSelect: { classPropertyName: "elevateEdgesOnSelect", publicName: "elevateEdgesOnSelect", isSignal: false, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: false, isRequired: true, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, providers: [
             DraggableService,
             ViewportService,
             FlowStatusService,
@@ -3253,6 +3341,7 @@ class VflowComponent {
             NodesChangeService,
             EdgeChangesService,
             NodeRenderingService,
+            EdgeRenderingService,
             SelectionService,
             FlowSettingsService,
             ComponentEventBusService,
@@ -3270,6 +3359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NodesChangeService,
                         EdgeChangesService,
                         NodeRenderingService,
+                        EdgeRenderingService,
                         SelectionService,
                         FlowSettingsService,
                         ComponentEventBusService,
@@ -3310,6 +3400,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], elevateNodesOnSelect: [{
                 type: Input
+            }], elevateEdgesOnSelect: [{
+                type: Input
             }], nodes: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3348,8 +3440,12 @@ class SelectableDirective {
         this.selectionService = inject(SelectionService);
         this.parentEdge = inject(EdgeComponent, { optional: true });
         this.parentNode = inject(NodeComponent, { optional: true });
+        this.host = inject(ElementRef);
+        this.selectOnEvent = this.getEvent$()
+            .pipe(tap(() => this.select()), takeUntilDestroyed())
+            .subscribe();
     }
-    onMousedown() {
+    select() {
         const entity = this.entity();
         if (entity && this.flowSettingsService.entitiesSelectable()) {
             this.selectionService.select(entity);
@@ -3364,8 +3460,16 @@ class SelectableDirective {
         }
         return null;
     }
+    getEvent$() {
+        if (this.parentEdge) {
+            // get not the edge itself, but the interactive edge (which is more UX friendly)
+            const interactiveEdge = this.parentEdge.interactiveEdgeRef().nativeElement;
+            return merge(fromEvent(interactiveEdge, 'mousedown'), fromEvent(interactiveEdge, 'touchstart'));
+        }
+        return merge(fromEvent(this.host.nativeElement, 'mousedown'), fromEvent(this.host.nativeElement, 'touchstart'));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SelectableDirective, isStandalone: true, selector: "[selectable]", host: { listeners: { "mousedown": "onMousedown()", "touchstart": "onMousedown()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SelectableDirective, isStandalone: true, selector: "[selectable]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectableDirective, decorators: [{
             type: Directive,
@@ -3373,13 +3477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     standalone: true,
                     selector: '[selectable]',
                 }]
-        }], propDecorators: { onMousedown: [{
-                type: HostListener,
-                args: ['mousedown']
-            }, {
-                type: HostListener,
-                args: ['touchstart']
-            }] } });
+        }] });
 
 class MinimapModel {
     constructor() {
@@ -3794,7 +3892,7 @@ class VflowMockComponent {
         return signal(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VflowMockComponent, isStandalone: true, selector: "vflow", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: false, isRequired: true, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: false, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: false, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: false, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: false, isRequired: false, transformFunction: null }, optimization: { classPropertyName: "optimization", publicName: "optimization", isSignal: true, isRequired: false, transformFunction: null }, entitiesSelectable: { classPropertyName: "entitiesSelectable", publicName: "entitiesSelectable", isSignal: false, isRequired: false, transformFunction: null }, keyboardShortcuts: { classPropertyName: "keyboardShortcuts", publicName: "keyboardShortcuts", isSignal: false, isRequired: false, transformFunction: null }, connection: { classPropertyName: "connection", publicName: "connection", isSignal: false, isRequired: false, transformFunction: (settings) => new ConnectionModel(settings) }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: false, isRequired: false, transformFunction: null }, elevateNodesOnSelect: { classPropertyName: "elevateNodesOnSelect", publicName: "elevateNodesOnSelect", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateMockDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VflowMockComponent, isStandalone: true, selector: "vflow", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: false, isRequired: true, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: false, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: false, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: false, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: false, isRequired: false, transformFunction: null }, optimization: { classPropertyName: "optimization", publicName: "optimization", isSignal: true, isRequired: false, transformFunction: null }, entitiesSelectable: { classPropertyName: "entitiesSelectable", publicName: "entitiesSelectable", isSignal: false, isRequired: false, transformFunction: null }, keyboardShortcuts: { classPropertyName: "keyboardShortcuts", publicName: "keyboardShortcuts", isSignal: false, isRequired: false, transformFunction: null }, connection: { classPropertyName: "connection", publicName: "connection", isSignal: false, isRequired: false, transformFunction: (settings) => new ConnectionModel(settings) }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: false, isRequired: false, transformFunction: null }, elevateNodesOnSelect: { classPropertyName: "elevateNodesOnSelect", publicName: "elevateNodesOnSelect", isSignal: false, isRequired: false, transformFunction: null }, elevateEdgesOnSelect: { classPropertyName: "elevateEdgesOnSelect", publicName: "elevateEdgesOnSelect", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateMockDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-content />
 
     @for (node of nodes; track $index) {
@@ -4005,6 +4103,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], elevateNodesOnSelect: [{
                 type: Input
+            }], elevateEdgesOnSelect: [{
+                type: Input
             }] } });
 
 class HandleMockComponent {
@@ -4099,17 +4199,21 @@ class ConnectionControllerMockDirective {
     constructor() {
         // eslint-disable-next-line @angular-eslint/no-output-on-prefix
         this.onConnect = output();
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+        this.onReconnect = output();
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     startConnection(handle) { }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    startReconnection(handle) { }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     validateConnection(handle) { }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     resetValidateConnection(targetHandle) { }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     endConnection() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ConnectionControllerMockDirective, isStandalone: true, selector: "[onConnect]", outputs: { onConnect: "onConnect" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ConnectionControllerMockDirective, isStandalone: true, selector: "[onConnect]", outputs: { onConnect: "onConnect", onReconnect: "onReconnect" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerMockDirective, decorators: [{
             type: Directive,