ngx-vflow 1.9.0 → 1.10.1

package/fesm2022/ngx-vflow.mjs

@@ -1,8 +1,8 @@
 import * as i0 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, isDevMode, ViewContainerRef, IterableDiffers, ChangeDetectorRef, Input, contentChild, 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, from, bufferCount, concatMap, of, delayWhen, animationFrames, take, takeUntil, finalize } from 'rxjs';
+import { switchMap, merge, fromEvent, tap, Subject, Observable, skip, map, pairwise, filter, distinctUntilChanged, observeOn, asyncScheduler, zip, animationFrameScheduler, share, startWith } from 'rxjs';
 import { toObservable, takeUntilDestroyed, outputFromObservable, toSignal } from '@angular/core/rxjs-interop';
 import { drag } from 'd3-drag';
 import { __decorate } from 'tslib';
@@ -117,10 +117,12 @@ class FlowEntitiesService {
             // empty arrays considered equal, other arrays may not be equal
             equal: (a, b) => (!a.length && !b.length ? true : a === b),
         });
+        this.rawNodes = computed(() => this.nodes().map((n) => n.rawNode));
         this.edges = signal([], {
             // empty arrays considered equal, other arrays may not be equal
             equal: (a, b) => (!a.length && !b.length ? true : a === b),
         });
+        this.rawEdges = computed(() => this.edges().map((e) => e.edge));
         this.validEdges = computed(() => {
             const nodes = this.nodes();
             return this.edges().filter((e) => nodes.includes(e.source()) && nodes.includes(e.target()));
@@ -1097,25 +1099,23 @@ function getPointOnLineByRatio(start, end, ratio) {
     };
 }
 
-function straightPath(source, target, usingPoints = [false, false, false]) {
-    const [start, center, end] = usingPoints;
-    const nullPoint = { x: 0, y: 0 };
+function straightPath({ sourcePoint, targetPoint }) {
     return {
-        path: `M ${source.x},${source.y}L ${target.x},${target.y}`,
-        points: {
-            start: start ? getPointOnLineByRatio(source, target, 0.15) : nullPoint,
-            center: center ? getPointOnLineByRatio(source, target, 0.5) : nullPoint,
-            end: end ? getPointOnLineByRatio(source, target, 0.85) : nullPoint,
+        path: `M ${sourcePoint.x},${sourcePoint.y}L ${targetPoint.x},${targetPoint.y}`,
+        labelPoints: {
+            start: getPointOnLineByRatio(sourcePoint, targetPoint, 0.15),
+            center: getPointOnLineByRatio(sourcePoint, targetPoint, 0.5),
+            end: getPointOnLineByRatio(sourcePoint, targetPoint, 0.85),
         },
     };
 }
 
-function bezierPath(source, target, sourcePosition, targetPosition, usingPoints = [false, false, false]) {
-    const distanceVector = { x: source.x - target.x, y: source.y - target.y };
-    const sourceControl = calcControlPoint(source, sourcePosition, distanceVector);
-    const targetControl = calcControlPoint(target, targetPosition, distanceVector);
-    const path = `M${source.x},${source.y} C${sourceControl.x},${sourceControl.y} ${targetControl.x},${targetControl.y} ${target.x},${target.y}`;
-    return getPathData(path, source, target, sourceControl, targetControl, usingPoints);
+function bezierPath({ sourcePoint, targetPoint, sourcePosition, targetPosition, }) {
+    const distanceVector = { x: sourcePoint.x - targetPoint.x, y: sourcePoint.y - targetPoint.y };
+    const sourceControl = calcControlPoint(sourcePoint, sourcePosition, distanceVector);
+    const targetControl = calcControlPoint(targetPoint, targetPosition, distanceVector);
+    const path = `M${sourcePoint.x},${sourcePoint.y} C${sourceControl.x},${sourceControl.y} ${targetControl.x},${targetControl.y} ${targetPoint.x},${targetPoint.y}`;
+    return getPathData(path, sourcePoint, targetPoint, sourceControl, targetControl);
 }
 /**
  * Calculate control point based on provided point
@@ -1155,15 +1155,13 @@ function calcControlPoint(point, pointPosition, distanceVector) {
         y: point.y - factorPoint.y * controlOffset,
     };
 }
-function getPathData(path, source, target, sourceControl, targetControl, usingPoints) {
-    const [start, center, end] = usingPoints;
-    const nullPoint = { x: 0, y: 0 };
+function getPathData(path, source, target, sourceControl, targetControl) {
     return {
         path,
-        points: {
-            start: start ? getPointOnBezier(source, target, sourceControl, targetControl, 0.1) : nullPoint,
-            center: center ? getPointOnBezier(source, target, sourceControl, targetControl, 0.5) : nullPoint,
-            end: end ? getPointOnBezier(source, target, sourceControl, targetControl, 0.9) : nullPoint,
+        labelPoints: {
+            start: getPointOnBezier(source, target, sourceControl, targetControl, 0.1),
+            center: getPointOnBezier(source, target, sourceControl, targetControl, 0.5),
+            end: getPointOnBezier(source, target, sourceControl, targetControl, 0.9),
         },
     };
 }
@@ -1317,11 +1315,11 @@ function getBend(a, b, c, size) {
     const yDir = a.y < c.y ? -1 : 1;
     return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`;
 }
-function smoothStepPath(source, target, sourcePosition, targetPosition, borderRadius = 5) {
+function smoothStepPath({ sourcePoint, targetPoint, sourcePosition, targetPosition }, borderRadius = 5) {
     const [points, labelX, labelY] = getPoints({
-        source,
+        source: sourcePoint,
         sourcePosition,
-        target,
+        target: targetPoint,
         targetPosition,
         offset: 20,
     });
@@ -1338,7 +1336,7 @@ function smoothStepPath(source, target, sourcePosition, targetPosition, borderRa
     }, '');
     return {
         path,
-        points: {
+        labelPoints: {
             // TODO start and end points temporary unavailable for this path
             start: { x: labelX, y: labelY },
             center: { x: labelX, y: labelY },
@@ -1350,6 +1348,7 @@ function smoothStepPath(source, target, sourcePosition, targetPosition, borderRa
 class EdgeModel {
     constructor(edge) {
         this.edge = edge;
+        this.flowEntitiesService = inject(FlowEntitiesService);
         this.source = signal(undefined);
         this.target = signal(undefined);
         this.selected = signal(false);
@@ -1385,22 +1384,25 @@ class EdgeModel {
             if (!source || !target) {
                 return {
                     path: '',
-                    points: {
+                    labelPoints: {
                         start: { x: 0, y: 0 },
                         center: { x: 0, y: 0 },
                         end: { x: 0, y: 0 },
                     },
                 };
             }
+            const params = this.getPathFactoryParams(source, target);
             switch (this.curve) {
                 case 'straight':
-                    return straightPath(source.pointAbsolute(), target.pointAbsolute(), this.usingPoints);
+                    return straightPath(params);
                 case 'bezier':
-                    return bezierPath(source.pointAbsolute(), target.pointAbsolute(), source.rawHandle.position, target.rawHandle.position, this.usingPoints);
+                    return bezierPath(params);
                 case 'smooth-step':
-                    return smoothStepPath(source.pointAbsolute(), target.pointAbsolute(), source.rawHandle.position, target.rawHandle.position);
+                    return smoothStepPath(params);
                 case 'step':
-                    return smoothStepPath(source.pointAbsolute(), target.pointAbsolute(), source.rawHandle.position, target.rawHandle.position, 0);
+                    return smoothStepPath(params, 0);
+                default:
+                    return this.curve(params);
             }
         });
         this.sourceHandle = computed(() => {
@@ -1457,7 +1459,18 @@ class EdgeModel {
             this.edgeLabels.center = new EdgeLabelModel(edge.edgeLabels.center);
         if (edge.edgeLabels?.end)
             this.edgeLabels.end = new EdgeLabelModel(edge.edgeLabels.end);
-        this.usingPoints = [!!this.edgeLabels.start, !!this.edgeLabels.center, !!this.edgeLabels.end];
+    }
+    getPathFactoryParams(source, target) {
+        return {
+            mode: 'edge',
+            edge: this.edge,
+            sourcePoint: source.pointAbsolute(),
+            targetPoint: target.pointAbsolute(),
+            sourcePosition: source.rawHandle.position,
+            targetPosition: target.rawHandle.position,
+            allEdges: this.flowEntitiesService.rawEdges(),
+            allNodes: this.flowEntitiesService.rawNodes(),
+        };
     }
 }
 
@@ -1728,7 +1741,7 @@ class NodeRenderingService {
     constructor() {
         this.flowEntitiesService = inject(FlowEntitiesService);
         this.nodes = computed(() => {
-            return this.flowEntitiesService.nodes().sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
+            return [...this.flowEntitiesService.nodes().sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder())];
         });
         this.groups = computed(() => {
             return this.nodes().filter((n) => isGroupNode(n));
@@ -2269,14 +2282,14 @@ class EdgeComponent {
         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" }, ngImport: i0, template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"model().markerStartUrl()\"\n    [attr.marker-end]=\"model().markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (pointerStart)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"model().context\"\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\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 }); }
+    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" }, ngImport: i0, template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"model().markerStartUrl()\"\n    [attr.marker-end]=\"model().markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (click)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  @if (model().path().labelPoints?.start; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\n}\n\n@if (model().edgeLabels.center; as label) {\n  @if (model().path().labelPoints?.center; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\n}\n\n@if (model().edgeLabels.end; as label) {\n  @if (model().path().labelPoints?.end; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\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]=\"model().markerStartUrl()\"\n    [attr.marker-end]=\"model().markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (pointerStart)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"model().context\"\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\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"] }]
+                    }, 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]=\"model().markerStartUrl()\"\n    [attr.marker-end]=\"model().markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (click)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  @if (model().path().labelPoints?.start; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\n}\n\n@if (model().edgeLabels.center; as label) {\n  @if (model().path().labelPoints?.center; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\n}\n\n@if (model().edgeLabels.end; as label) {\n  @if (model().path().labelPoints?.end; as point) {\n    <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n  }\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 {
@@ -2864,7 +2877,7 @@ class NodeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NodeComponent, isStandalone: true, selector: "g[node]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, nodeSvgTemplate: { classPropertyName: "nodeSvgTemplate", publicName: "nodeSvgTemplate", isSignal: true, isRequired: false, transformFunction: null }, groupNodeTemplate: { classPropertyName: "groupNodeTemplate", publicName: "groupNodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "vflow-node" }, providers: [HandleService, NodeAccessorService], ngImport: i0, template: "<!-- Default node -->\n@if (model().rawNode.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode(); selectNode()\">\n    <default-node\n      nodeHandlesController\n      [selected]=\"model().selected()\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\"\n      [style.max-width]=\"model().styleWidth()\"\n      [style.max-height]=\"model().styleHeight()\">\n      <div [outerHTML]=\"model().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- HTML Template node -->\n@if (model().rawNode.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"model().context\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- SVG Template node -->\n@if (model().rawNode.type === 'svg-template' && nodeSvgTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeSvgTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(model().rawNode.type)\"\n        [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().rawNode.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"model().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"model().color()\"\n    [class.default-group-node_selected]=\"model().selected()\"\n    [attr.width]=\"model().size().width\"\n    [attr.height]=\"model().size().height\"\n    [style.stroke]=\"model().color()\"\n    [style.fill]=\"model().color()\"\n    (pointerStart)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().rawNode.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n  @if (model().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\">\n      <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"model().magnetRadius\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@for (toolbar of toolbars(); track toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\">\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }, { kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ResizableComponent, selector: "[resizable]", inputs: ["resizable", "resizerColor", "gap"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: NodeHandlesControllerDirective, selector: "[nodeHandlesController]" }, { kind: "directive", type: NodeResizeControllerDirective, selector: "[nodeResizeController]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NodeComponent, isStandalone: true, selector: "g[node]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, nodeSvgTemplate: { classPropertyName: "nodeSvgTemplate", publicName: "nodeSvgTemplate", isSignal: true, isRequired: false, transformFunction: null }, groupNodeTemplate: { classPropertyName: "groupNodeTemplate", publicName: "groupNodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "vflow-node" }, providers: [HandleService, NodeAccessorService], ngImport: i0, template: "<!-- Default node -->\n@if (model().rawNode.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (click)=\"pullNode(); selectNode()\">\n    <default-node\n      nodeHandlesController\n      [selected]=\"model().selected()\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\"\n      [style.max-width]=\"model().styleWidth()\"\n      [style.max-height]=\"model().styleHeight()\">\n      <div [outerHTML]=\"model().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- HTML Template node -->\n@if (model().rawNode.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (click)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"model().context\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- SVG Template node -->\n@if (model().rawNode.type === 'svg-template' && nodeSvgTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (click)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeSvgTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (click)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(model().rawNode.type)\"\n        [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().rawNode.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"model().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"model().color()\"\n    [class.default-group-node_selected]=\"model().selected()\"\n    [attr.width]=\"model().size().width\"\n    [attr.height]=\"model().size().height\"\n    [style.stroke]=\"model().color()\"\n    [style.fill]=\"model().color()\"\n    (click)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().rawNode.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (click)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n  @if (model().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\">\n      <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"model().magnetRadius\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@for (toolbar of toolbars(); track toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\">\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }, { kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ResizableComponent, selector: "[resizable]", inputs: ["resizable", "resizerColor", "gap"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: NodeHandlesControllerDirective, selector: "[nodeHandlesController]" }, { kind: "directive", type: NodeResizeControllerDirective, selector: "[nodeResizeController]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeComponent, decorators: [{
             type: Component,
@@ -2880,32 +2893,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         HandleSizeControllerDirective,
                         NodeHandlesControllerDirective,
                         NodeResizeControllerDirective,
-                    ], template: "<!-- Default node -->\n@if (model().rawNode.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode(); selectNode()\">\n    <default-node\n      nodeHandlesController\n      [selected]=\"model().selected()\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\"\n      [style.max-width]=\"model().styleWidth()\"\n      [style.max-height]=\"model().styleHeight()\">\n      <div [outerHTML]=\"model().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- HTML Template node -->\n@if (model().rawNode.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"model().context\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- SVG Template node -->\n@if (model().rawNode.type === 'svg-template' && nodeSvgTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeSvgTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(model().rawNode.type)\"\n        [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().rawNode.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"model().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"model().color()\"\n    [class.default-group-node_selected]=\"model().selected()\"\n    [attr.width]=\"model().size().width\"\n    [attr.height]=\"model().size().height\"\n    [style.stroke]=\"model().color()\"\n    [style.fill]=\"model().color()\"\n    (pointerStart)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().rawNode.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n  @if (model().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\">\n      <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"model().magnetRadius\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@for (toolbar of toolbars(); track toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\">\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
+                    ], template: "<!-- Default node -->\n@if (model().rawNode.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (click)=\"pullNode(); selectNode()\">\n    <default-node\n      nodeHandlesController\n      [selected]=\"model().selected()\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\"\n      [style.max-width]=\"model().styleWidth()\"\n      [style.max-height]=\"model().styleHeight()\">\n      <div [outerHTML]=\"model().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- HTML Template node -->\n@if (model().rawNode.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (click)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"model().context\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- SVG Template node -->\n@if (model().rawNode.type === 'svg-template' && nodeSvgTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (click)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeSvgTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (click)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(model().rawNode.type)\"\n        [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().rawNode.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"model().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"model().color()\"\n    [class.default-group-node_selected]=\"model().selected()\"\n    [attr.width]=\"model().size().width\"\n    [attr.height]=\"model().size().height\"\n    [style.stroke]=\"model().color()\"\n    [style.fill]=\"model().color()\"\n    (click)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().rawNode.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (click)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n  @if (model().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\">\n      <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"model().magnetRadius\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@for (toolbar of toolbars(); track toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\">\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
         }] });
 
 class ConnectionComponent {
     constructor() {
-        this.model = input.required();
-        this.template = input();
         this.flowStatusService = inject(FlowStatusService);
         this.spacePointContext = inject(SpacePointContextDirective);
+        this.flowEntitiesService = inject(FlowEntitiesService);
+        this.model = input.required();
+        this.template = input();
         this.path = computed(() => {
             const status = this.flowStatusService.status();
+            const curve = this.model().curve;
             if (status.state === 'connection-start' || status.state === 'reconnection-start') {
                 const sourceHandle = status.payload.sourceHandle;
                 const sourcePoint = sourceHandle.pointAbsolute();
                 const sourcePosition = sourceHandle.rawHandle.position;
                 const targetPoint = this.spacePointContext.svgCurrentSpacePoint();
                 const targetPosition = getOppositePostion(sourceHandle.rawHandle.position);
-                switch (this.model().curve) {
+                const params = this.getPathFactoryParams(sourcePoint, targetPoint, sourcePosition, targetPosition);
+                switch (curve) {
                     case 'straight':
-                        return straightPath(sourcePoint, targetPoint).path;
+                        return straightPath(params).path;
                     case 'bezier':
-                        return bezierPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                        return bezierPath(params).path;
                     case 'smooth-step':
-                        return smoothStepPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                        return smoothStepPath(params).path;
                     case 'step':
-                        return smoothStepPath(sourcePoint, targetPoint, sourcePosition, targetPosition, 0).path;
+                        return smoothStepPath(params, 0).path;
+                    default:
+                        return curve(params).path;
                 }
             }
             if (status.state === 'connection-validation' || status.state === 'reconnection-validation') {
@@ -2920,15 +2938,18 @@ class ConnectionComponent {
                 const targetPosition = status.payload.valid
                     ? targetHandle.rawHandle.position
                     : getOppositePostion(sourceHandle.rawHandle.position);
-                switch (this.model().curve) {
+                const params = this.getPathFactoryParams(sourcePoint, targetPoint, sourcePosition, targetPosition);
+                switch (curve) {
                     case 'straight':
-                        return straightPath(sourcePoint, targetPoint).path;
+                        return straightPath(params).path;
                     case 'bezier':
-                        return bezierPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                        return bezierPath(params).path;
                     case 'smooth-step':
-                        return smoothStepPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                        return smoothStepPath(params).path;
                     case 'step':
-                        return smoothStepPath(sourcePoint, targetPoint, sourcePosition, targetPosition, 0).path;
+                        return smoothStepPath(params, 0).path;
+                    default:
+                        return curve(params).path;
                 }
             }
             return null;
@@ -2951,6 +2972,17 @@ class ConnectionComponent {
             },
         };
     }
+    getPathFactoryParams(sourcePoint, targetPoint, sourcePosition, targetPosition) {
+        return {
+            mode: 'connection',
+            sourcePoint,
+            targetPoint,
+            sourcePosition,
+            targetPosition,
+            allEdges: this.flowEntitiesService.rawEdges(),
+            allNodes: this.flowEntitiesService.rawNodes(),
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ConnectionComponent, isStandalone: true, selector: "g[connection]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (model().type === 'default') {
@@ -3232,245 +3264,6 @@ function getSpacePoints(point, groups) {
     return result;
 }
 
-/** Enum with lazy render directive state */
-var LazyForState;
-(function (LazyForState) {
-    /** Directive is in idle state */
-    LazyForState["idle"] = "idle";
-    /** Directive is rendering */
-    LazyForState["rendering"] = "rendering";
-})(LazyForState || (LazyForState = {}));
-/**
- * Context for an element in lazyFor
- */
-class LazyForContextModel {
-    /** Whether the element is first */
-    get first() {
-        return this.index === 0;
-    }
-    /** Whether the element is last */
-    get last() {
-        return this.index === this.count - 1;
-    }
-    /** Whether the element is even */
-    get even() {
-        return this.index % 2 === 0;
-    }
-    /** Whether the element is odd */
-    get odd() {
-        return !this.even;
-    }
-    constructor($implicit, lazyFor, index, count) {
-        this.$implicit = $implicit;
-        this.lazyFor = lazyFor;
-        this.index = index;
-        this.count = count;
-    }
-}
-class LazyForDirective {
-    /**
-     * Asserts the correct type of the context for the template that `lazyFor` will render.
-     *
-     * The presence of this method is a signal to the Ivy template type-check compiler that the
-     * `lazyFor` structural directive renders its template with a specific context type.
-     */
-    static ngTemplateContextGuard(dir, ctx) {
-        return true;
-    }
-    //#region INPUTS
-    /** Setter for the array to be rendered by the directive */
-    set lazyForOf(lazyFor) {
-        this._lazyFor = lazyFor;
-        this._lazyForDirty = true;
-    }
-    /**
-     * Input - setter for TrackBy function
-     * @description is required
-     */
-    set lazyForTrackBy(fn) {
-        if (isDevMode() && fn !== null && typeof fn !== 'function') {
-            console.warn(`trackBy must be a function, but received ${JSON.stringify(fn)}. ` +
-                `See https://angular.io/api/common/NgForOf#change-propagation for more information.`);
-        }
-        this._trackByFn = fn;
-    }
-    /**
-     * Setter for the number of items that will be rendered per frame
-     * @param value number of items that will be rendered per frame
-     */
-    set lazyForItemsPerFrame(value) {
-        if (value <= 0) {
-            if (isDevMode()) {
-                console.warn('Items per frame parameter cannot be lower than 0! Input value was ignored');
-            }
-            return;
-        }
-        this._itemsPerFrame = value;
-    }
-    /** Setter for array item template */
-    set lazyForTemplate(value) {
-        if (value) {
-            this._template = value;
-        }
-    }
-    /** Getter for TrackBy function */
-    get lazyForTrackBy() {
-        return this._trackByFn;
-    }
-    //#endregion
-    constructor() {
-        this._template = inject(TemplateRef);
-        this._viewContainer = inject(ViewContainerRef);
-        this._differs = inject(IterableDiffers);
-        this._cdr = inject(ChangeDetectorRef);
-        this._destroyRef$ = inject(DestroyRef);
-        //#region PROPERTIES
-        /** Array for rendering */
-        this._lazyFor = null;
-        /** lazyFor initialization flag */
-        this._lazyForDirty = true;
-        /** Differ for tracking changes in input array */
-        this._differ = null;
-        /** Number of items to be rendered per frame */
-        this._itemsPerFrame = 5;
-        /** Directive state */
-        this._lazyForState = LazyForState.idle;
-        //#endregion
-        //#region RXJS
-        /** Private subject for stopping dynamic render process */
-        this._rerenderUnsub$ = new Subject();
-        this._destroyRef$.onDestroy(() => this._viewContainer.clear());
-    }
-    /** ngDoCheck hook */
-    ngDoCheck() {
-        if (this._lazyForDirty) {
-            this._lazyForDirty = false;
-            const value = this._lazyFor;
-            if (!this._differ && value) {
-                this._differ = this._differs.find(value).create(this.lazyForTrackBy);
-            }
-        }
-        if (this._differ) {
-            let changes = this._differ.diff(this._lazyFor);
-            if (changes) {
-                if (this._lazyForState === LazyForState.rendering) {
-                    /**
-                     * If the array changed during an active render process
-                     * Need to clear container of all views
-                     * And restart rendering from the beginning.
-                     */
-                    this._rerenderUnsub$.next();
-                    changes = this._differ.diff([]);
-                    changes = this._differ.diff(this._lazyFor);
-                    this._viewContainer.clear();
-                    if (changes) {
-                        this.applyChanges(changes);
-                    }
-                }
-                else {
-                    this.applyChanges(changes);
-                }
-            }
-        }
-    }
-    /**
-     * Apply changes detected by differ
-     * @param changes changes
-     */
-    applyChanges(changes) {
-        const itemDataListToRender = [];
-        changes.forEachOperation((item, adjustedPreviousIndex, currentIndex) => {
-            const itemToPush = {
-                item: { ...item },
-                adjustedPreviousIndex,
-                currentIndex,
-            };
-            itemDataListToRender.push(itemToPush);
-        });
-        this.performLazyRender(itemDataListToRender, changes);
-    }
-    /**
-     * Perform lazy rendering
-     * @param itemDataListToRender list of items to render
-     * @param changes changes
-     */
-    performLazyRender(itemDataListToRender, changes) {
-        this.updateLazyForState(LazyForState.rendering);
-        this._rerenderUnsub$.next();
-        from(itemDataListToRender)
-            .pipe(bufferCount(this._itemsPerFrame), concatMap((itemList) => of(itemList).pipe(delayWhen(() => animationFrames()))), tap((itemList) => {
-            for (let i = 0; i < itemList.length; i++) {
-                const data = itemList[i];
-                if (data.item.previousIndex === null) {
-                    this._viewContainer.createEmbeddedView(this._template, new LazyForContextModel(data.item.item, this._lazyFor, -1, -1), data.currentIndex === null ? undefined : data.currentIndex);
-                }
-                else if (data.currentIndex === null) {
-                    this._viewContainer.remove(data.adjustedPreviousIndex === null ? undefined : data.adjustedPreviousIndex);
-                }
-                else if (data.adjustedPreviousIndex !== null) {
-                    const view = this._viewContainer.get(data.adjustedPreviousIndex);
-                    this._viewContainer.move(view, data.currentIndex);
-                    this.applyViewChange(view, data.item);
-                }
-            }
-            this.updateViewContext();
-            this._cdr.markForCheck();
-        }), 
-        /** Using take we automatically unsubscribe from the stream when rendering is complete */
-        take(Math.ceil(itemDataListToRender.length / this._itemsPerFrame)), takeUntil(this._rerenderUnsub$), takeUntilDestroyed(this._destroyRef$), finalize(() => {
-            changes.forEachIdentityChange((record) => {
-                const viewRef = (this._viewContainer.get(record.currentIndex));
-                this.applyViewChange(viewRef, record);
-            });
-            this.updateLazyForState(LazyForState.idle);
-        }))
-            .subscribe();
-    }
-    /** Update context (without implicit$) for elements inside view */
-    updateViewContext() {
-        for (let i = 0, ilen = this._viewContainer.length; i < ilen; i++) {
-            const viewRef = (this._viewContainer.get(i));
-            const context = viewRef.context;
-            context.index = i;
-            context.count = ilen;
-            context.lazyFor = this._lazyFor;
-        }
-    }
-    /**
-     * Apply implicit$ context
-     * @param view view
-     * @param record data
-     */
-    applyViewChange(view, record) {
-        view.context.$implicit = record.item;
-    }
-    /**
-     * Update directive state
-     * @param stateToSet state to set
-     */
-    updateLazyForState(stateToSet) {
-        this._lazyForState = stateToSet;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyForDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: LazyForDirective, isStandalone: true, selector: "[lazyFor][lazyForOf]", inputs: { lazyForOf: "lazyForOf", lazyForTrackBy: "lazyForTrackBy", lazyForItemsPerFrame: "lazyForItemsPerFrame", lazyForTemplate: "lazyForTemplate" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyForDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[lazyFor][lazyForOf]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [], propDecorators: { lazyForOf: [{
-                type: Input
-            }], lazyForTrackBy: [{
-                type: Input,
-                args: [{ required: true }]
-            }], lazyForItemsPerFrame: [{
-                type: Input
-            }], lazyForTemplate: [{
-                type: Input
-            }] } });
-
 const changesControllerHostDirective = {
     directive: ChangesControllerDirective,
     outputs: [
@@ -3521,10 +3314,10 @@ class VflowComponent {
         this.optimization = input({
             detachedGroupsLayer: false,
         });
-        this.nodeModels = computed(() => this.nodeRenderingService.nodes());
-        this.groups = computed(() => this.nodeRenderingService.groups());
-        this.nonGroups = computed(() => this.nodeRenderingService.nonGroups());
-        this.edgeModels = computed(() => this.edgeRenderingService.edges());
+        this.nodeModels = this.nodeRenderingService.nodes;
+        this.groups = this.nodeRenderingService.groups;
+        this.nonGroups = this.nodeRenderingService.nonGroups;
+        this.edgeModels = this.edgeRenderingService.edges;
         // #endregion
         // #region OUTPUTS
         /**
@@ -3785,7 +3578,7 @@ class VflowComponent {
             ComponentEventBusService,
             KeyboardService,
             OverlaysService,
-        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "nodeSvgTemplateDirective", first: true, predicate: NodeSvgTemplateDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true, isSignal: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.size", "onNodesChange.size", "onNodesChange.size.single", "onNodesChange.size.single", "onNodesChange.size.many", "onNodesChange.size.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      <svg:g\n        *lazyFor=\"let model of groups(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\n\n      <!-- Edges  -->\n      <svg:g\n        *lazyFor=\"let model of edgeModels(); trackBy: trackEdges\"\n        edge\n        [model]=\"model\"\n        [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n        [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n\n      <!-- Nodes -->\n      <svg:g\n        *lazyFor=\"let model of nonGroups(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n        [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\n    }\n\n    @if (!optimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      <svg:g\n        *lazyFor=\"let model of edgeModels(); trackBy: trackEdges\"\n        edge\n        [model]=\"model\"\n        [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n        [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n\n      <!-- Nodes -->\n      <svg:g\n        *lazyFor=\"let model of nodeModels(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n        [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\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: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }, { kind: "directive", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]" }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["model", "nodeTemplate", "nodeSvgTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LazyForDirective, selector: "[lazyFor][lazyForOf]", inputs: ["lazyForOf", "lazyForTrackBy", "lazyForItemsPerFrame", "lazyForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "nodeSvgTemplateDirective", first: true, predicate: NodeSvgTemplateDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true, isSignal: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.size", "onNodesChange.size", "onNodesChange.size.single", "onNodesChange.size.single", "onNodesChange.size.many", "onNodesChange.size.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!optimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n\n      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\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: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }, { kind: "directive", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]" }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["model", "nodeTemplate", "nodeSvgTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
@@ -3816,8 +3609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NodeComponent,
                         EdgeComponent,
                         NgTemplateOutlet,
-                        LazyForDirective,
-                    ], template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      <svg:g\n        *lazyFor=\"let model of groups(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\n\n      <!-- Edges  -->\n      <svg:g\n        *lazyFor=\"let model of edgeModels(); trackBy: trackEdges\"\n        edge\n        [model]=\"model\"\n        [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n        [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n\n      <!-- Nodes -->\n      <svg:g\n        *lazyFor=\"let model of nonGroups(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n        [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\n    }\n\n    @if (!optimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      <svg:g\n        *lazyFor=\"let model of edgeModels(); trackBy: trackEdges\"\n        edge\n        [model]=\"model\"\n        [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n        [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n\n      <!-- Nodes -->\n      <svg:g\n        *lazyFor=\"let model of nodeModels(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n        [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\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 #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!optimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n\n      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\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: [{
@@ -3900,7 +3692,7 @@ class SelectableDirective {
         return null;
     }
     getEvent$() {
-        return merge(fromEvent(this.host.nativeElement, 'mousedown'), fromEvent(this.host.nativeElement, 'touchstart'));
+        return fromEvent(this.host.nativeElement, 'click');
     }
     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]", ngImport: i0 }); }