ngx-vflow 1.8.2 → 1.10.0

package/fesm2022/ngx-vflow.mjs

@@ -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(),
+        };
     }
 }
 
@@ -1724,6 +1737,8 @@ function isGroupNode(node) {
     return node.rawNode.type === 'default-group' || node.rawNode.type === 'template-group';
 }
 
+const entitiesPerFrame = (total, perFrame) => Math.max(1, Math.ceil(total / perFrame));
+
 class NodeRenderingService {
     constructor() {
         this.flowEntitiesService = inject(FlowEntitiesService);
@@ -1736,6 +1751,9 @@ class NodeRenderingService {
         this.nonGroups = computed(() => {
             return this.nodes().filter((n) => !isGroupNode(n));
         });
+        this.nodesPerFrame = computed(() => entitiesPerFrame(this.nodes().length, 10));
+        this.groupsPerFrame = computed(() => entitiesPerFrame(this.groups().length, 10));
+        this.nonGroupsPerFrame = computed(() => entitiesPerFrame(this.nonGroups().length, 10));
         this.maxOrder = computed(() => {
             return Math.max(...this.flowEntitiesService.nodes().map((n) => n.renderOrder()));
         });
@@ -2134,6 +2152,7 @@ class EdgeRenderingService {
         this.edges = computed(() => {
             return this.flowEntitiesService.validEdges().sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
         });
+        this.edgesPerFrame = computed(() => entitiesPerFrame(this.edges().length, 10));
         this.maxOrder = computed(() => {
             return Math.max(...this.flowEntitiesService.validEdges().map((n) => n.renderOrder()));
         });
@@ -2269,14 +2288,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\" (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  @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\" (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  @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 {
@@ -2885,27 +2904,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 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 +2944,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 +2978,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') {
@@ -3521,10 +3559,14 @@ 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.nodesPerFrame = this.nodeRenderingService.nodesPerFrame;
+        this.groups = this.nodeRenderingService.groups;
+        this.groupsPerFrame = this.nodeRenderingService.groupsPerFrame;
+        this.nonGroups = this.nodeRenderingService.nonGroups;
+        this.nonGroupsPerFrame = this.nodeRenderingService.nonGroupsPerFrame;
+        this.edgeModels = this.edgeRenderingService.edges;
+        this.edgesPerFrame = this.edgeRenderingService.edgesPerFrame;
         // #endregion
         // #region OUTPUTS
         /**
@@ -3785,7 +3827,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      <svg:g\n        *lazyFor=\"let model of groups(); trackBy: trackNodes; itemsPerFrame: groupsPerFrame()\"\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; itemsPerFrame: edgesPerFrame()\"\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; itemsPerFrame: nonGroupsPerFrame()\"\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; itemsPerFrame: edgesPerFrame()\"\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; itemsPerFrame: nodesPerFrame()\"\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
@@ -3817,7 +3859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         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      <svg:g\n        *lazyFor=\"let model of groups(); trackBy: trackNodes; itemsPerFrame: groupsPerFrame()\"\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; itemsPerFrame: edgesPerFrame()\"\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; itemsPerFrame: nonGroupsPerFrame()\"\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; itemsPerFrame: edgesPerFrame()\"\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; itemsPerFrame: nodesPerFrame()\"\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"] }]
         }], propDecorators: { view: [{
                 type: Input
             }], minZoom: [{
@@ -4160,607 +4202,11 @@ const Vflow = [
     HandleTemplateDirective,
 ];
 
-const mockModel = () => new NodeModel({ id: 'mock', type: 'default', point: { x: 0, y: 0 } });
-function provideCustomNodeMocks() {
-    return [
-        {
-            provide: ComponentEventBusService,
-            useValue: {
-                pushEvent: () => { },
-            },
-        },
-        {
-            provide: NodeAccessorService,
-            useFactory: () => ({
-                model: signal(mockModel()),
-            }),
-        },
-        FlowEntitiesService,
-        // TODO: mocks below should be removed after the major release
-        {
-            provide: HandleService,
-            useFactory: () => ({
-                node: signal(mockModel()),
-                createHandle: () => { },
-                destroyHandle: () => { },
-            }),
-        },
-        {
-            provide: RootPointerDirective,
-            useValue: {
-                pointerMovement$: of({
-                    x: 0,
-                    y: 0,
-                    movementX: 0,
-                    movementY: 0,
-                    target: null,
-                    originalEvent: null,
-                }),
-                documentPointerEnd$: of(null),
-            },
-        },
-        {
-            provide: SpacePointContextDirective,
-            useValue: {
-                documentPointToFlowPoint: (point) => point,
-            },
-        },
-        {
-            provide: SelectionService,
-            useValue: {
-                select: () => { },
-            },
-        },
-        FlowSettingsService,
-        ViewportService,
-    ];
-}
-
-class EdgeTemplateMockDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: EdgeTemplateMockDirective, isStandalone: true, selector: "ng-template[edge]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeTemplateMockDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: 'ng-template[edge]',
-                }]
-        }] });
-class ConnectionTemplateMockDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ConnectionTemplateMockDirective, isStandalone: true, selector: "ng-template[connection]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionTemplateMockDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: 'ng-template[connection]',
-                }]
-        }] });
-class EdgeLabelHtmlTemplateMockDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelHtmlTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: EdgeLabelHtmlTemplateMockDirective, isStandalone: true, selector: "ng-template[edgeLabelHtml]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelHtmlTemplateMockDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: 'ng-template[edgeLabelHtml]',
-                }]
-        }] });
-class NodeHtmlTemplateMockDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeHtmlTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NodeHtmlTemplateMockDirective, isStandalone: true, selector: "ng-template[nodeHtml]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeHtmlTemplateMockDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: 'ng-template[nodeHtml]',
-                }]
-        }] });
-class NodeSvgTemplateMockDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeSvgTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NodeSvgTemplateMockDirective, isStandalone: true, selector: "ng-template[nodeSvg]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeSvgTemplateMockDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: 'ng-template[nodeSvg]',
-                }]
-        }] });
-class GroupNodeTemplateMockDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupNodeTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: GroupNodeTemplateMockDirective, isStandalone: true, selector: "ng-template[groupNode]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupNodeTemplateMockDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: 'ng-template[groupNode]',
-                }]
-        }] });
-class HandleTemplateMockDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: HandleTemplateMockDirective, isStandalone: true, selector: "ng-template[handle]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleTemplateMockDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: 'ng-template[handle]',
-                }]
-        }] });
-
-class VflowMockComponent {
-    constructor() {
-        this.view = [400, 400];
-        this.minZoom = 0.5;
-        this.maxZoom = 3;
-        this.background = '#fff';
-        this.optimization = input({
-            detachedGroupsLayer: false,
-        });
-        this.entitiesSelectable = true;
-        this.keyboardShortcuts = {
-            multiSelection: null,
-        };
-        this.connection = new ConnectionModel({});
-        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-        this.onComponentNodeEvent = output();
-        this.nodeTemplateDirective = contentChild(NodeHtmlTemplateMockDirective);
-        this.groupNodeTemplateDirective = contentChild(GroupNodeTemplateMockDirective);
-        this.edgeTemplateDirective = contentChild(EdgeTemplateMockDirective);
-        this.edgeLabelHtmlDirective = contentChild(EdgeLabelHtmlTemplateMockDirective);
-        this.connectionTemplateDirective = contentChild(ConnectionTemplateMockDirective);
-        this.viewport = signal({
-            x: 0,
-            y: 0,
-            zoom: 1,
-        });
-        this.nodesChange = signal([]);
-        this.edgesChange = signal([]);
-        this.viewportChange$ = toObservable(this.viewport);
-        this.nodesChange$ = toObservable(this.nodesChange);
-        this.edgesChange$ = toObservable(this.edgesChange);
-    }
-    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
-    ngOnInit() { }
-    viewportTo(viewport) {
-        this.viewport.set(viewport);
-    }
-    zoomTo(zoom) {
-        this.viewport.update((prev) => ({ ...prev, zoom }));
-    }
-    panTo(point) {
-        this.viewport.update((prev) => ({ ...prev, x: point.x, y: point.y }));
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    fitView(options) { }
-    documentPointToFlowPoint(point, options) {
-        if (options?.spaces) {
-            return [
-                {
-                    nodeId: null,
-                    x: point.x,
-                    y: point.y,
-                },
-            ];
-        }
-        return point;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    getIntesectingNodes(nodeId, options) {
-        return [];
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    toNodeSpace(nodeId, spaceNodeId) {
-        return { x: 0, y: 0 };
-    }
-    getNode(id) {
-        return this.nodes.find((node) => node.id === id);
-    }
-    getDetachedEdges() {
-        return [];
-    }
-    createSignal(value) {
-        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 }, 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) {
-      @if (node.type === 'html-template') {
-        <ng-component
-          [ngTemplateOutlet]="nodeTemplateDirective()?.templateRef ?? null"
-          [ngTemplateOutletContext]="{
-            $implicit: {
-              node: node,
-              selected: createSignal(false),
-            },
-          }" />
-      }
-
-      @if (node.type === 'template-group') {
-        <ng-component
-          [ngTemplateOutlet]="groupNodeTemplateDirective()?.templateRef ?? null"
-          [ngTemplateOutletContext]="{
-            $implicit: {
-              node: node,
-              selected: createSignal(false),
-              width: createSignal(node.width),
-              height: createSignal(node.height),
-            },
-          }" />
-      }
-    }
-
-    @for (edge of edges; track $index) {
-      @if (edge.type === 'template') {
-        <ng-component
-          [ngTemplateOutlet]="edgeTemplateDirective()?.templateRef ?? null"
-          [ngTemplateOutletContext]="{
-            $implicit: {
-              edge: edge,
-              selected: createSignal(false),
-              path: createSignal(''),
-              markerStart: createSignal(''),
-              markerEnd: createSignal(''),
-            },
-          }" />
-
-        @if (edge.edgeLabels?.start) {
-          <ng-component
-            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
-            [ngTemplateOutletContext]="{
-              $implicit: {
-                edge: edge,
-              },
-            }" />
-        }
-
-        @if (edge.edgeLabels?.center) {
-          <ng-component
-            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
-            [ngTemplateOutletContext]="{
-              $implicit: {
-                edge: edge,
-                label: edge.edgeLabels?.center,
-              },
-            }" />
-        }
-
-        @if (edge.edgeLabels?.end) {
-          <ng-component
-            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
-            [ngTemplateOutletContext]="{
-              $implicit: {
-                edge: edge,
-                label: edge.edgeLabels?.end,
-              },
-            }" />
-        }
-      }
-    }
-
-    @if (connection.type === 'template') {
-      <ng-component
-        [ngTemplateOutlet]="connectionTemplateDirective()?.templateRef ?? null"
-        [ngTemplateOutletContext]="{
-          $implicit: {
-            path: createSignal(''),
-            marker: createSignal(''),
-          },
-        }" />
-    }
-  `, isInline: true, dependencies: [{ 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: VflowMockComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'vflow',
-                    template: `
-    <ng-content />
-
-    @for (node of nodes; track $index) {
-      @if (node.type === 'html-template') {
-        <ng-component
-          [ngTemplateOutlet]="nodeTemplateDirective()?.templateRef ?? null"
-          [ngTemplateOutletContext]="{
-            $implicit: {
-              node: node,
-              selected: createSignal(false),
-            },
-          }" />
-      }
-
-      @if (node.type === 'template-group') {
-        <ng-component
-          [ngTemplateOutlet]="groupNodeTemplateDirective()?.templateRef ?? null"
-          [ngTemplateOutletContext]="{
-            $implicit: {
-              node: node,
-              selected: createSignal(false),
-              width: createSignal(node.width),
-              height: createSignal(node.height),
-            },
-          }" />
-      }
-    }
-
-    @for (edge of edges; track $index) {
-      @if (edge.type === 'template') {
-        <ng-component
-          [ngTemplateOutlet]="edgeTemplateDirective()?.templateRef ?? null"
-          [ngTemplateOutletContext]="{
-            $implicit: {
-              edge: edge,
-              selected: createSignal(false),
-              path: createSignal(''),
-              markerStart: createSignal(''),
-              markerEnd: createSignal(''),
-            },
-          }" />
-
-        @if (edge.edgeLabels?.start) {
-          <ng-component
-            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
-            [ngTemplateOutletContext]="{
-              $implicit: {
-                edge: edge,
-              },
-            }" />
-        }
-
-        @if (edge.edgeLabels?.center) {
-          <ng-component
-            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
-            [ngTemplateOutletContext]="{
-              $implicit: {
-                edge: edge,
-                label: edge.edgeLabels?.center,
-              },
-            }" />
-        }
-
-        @if (edge.edgeLabels?.end) {
-          <ng-component
-            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
-            [ngTemplateOutletContext]="{
-              $implicit: {
-                edge: edge,
-                label: edge.edgeLabels?.end,
-              },
-            }" />
-        }
-      }
-    }
-
-    @if (connection.type === 'template') {
-      <ng-component
-        [ngTemplateOutlet]="connectionTemplateDirective()?.templateRef ?? null"
-        [ngTemplateOutletContext]="{
-          $implicit: {
-            path: createSignal(''),
-            marker: createSignal(''),
-          },
-        }" />
-    }
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true,
-                    imports: [NgTemplateOutlet],
-                }]
-        }], propDecorators: { nodes: [{
-                type: Input,
-                args: [{ required: true }]
-            }], edges: [{
-                type: Input
-            }], view: [{
-                type: Input
-            }], minZoom: [{
-                type: Input
-            }], maxZoom: [{
-                type: Input
-            }], background: [{
-                type: Input
-            }], entitiesSelectable: [{
-                type: Input
-            }], keyboardShortcuts: [{
-                type: Input
-            }], connection: [{
-                type: Input,
-                args: [{
-                        transform: (settings) => new ConnectionModel(settings),
-                    }]
-            }], snapGrid: [{
-                type: Input
-            }], elevateNodesOnSelect: [{
-                type: Input
-            }], elevateEdgesOnSelect: [{
-                type: Input
-            }] } });
-
-class HandleMockComponent {
-    constructor() {
-        this.position = input.required();
-        this.type = input.required();
-        this.id = input();
-        this.template = input();
-    }
-    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: HandleMockComponent, isStandalone: true, selector: "handle", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleMockComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'handle',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true,
-                }]
-        }] });
-
-class ResizableMockComponent {
-    constructor() {
-        this.resizable = input();
-        this.resizerColor = input('#2e414c');
-        this.gap = input(1.5);
-    }
-    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
-    ngOnInit() { }
-    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
-    ngAfterViewInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResizableMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ResizableMockComponent, isStandalone: true, selector: "[resizable]", inputs: { resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resizerColor: { classPropertyName: "resizerColor", publicName: "resizerColor", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResizableMockComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[resizable]',
-                    template: '<ng-content />',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-
-class MiniMapMockComponent {
-    constructor() {
-        this.maskColor = input(`rgba(215, 215, 215, 0.6)`);
-        this.strokeColor = input(`rgb(200, 200, 200)`);
-        this.position = input('bottom-right');
-        this.scaleOnHover = input(false);
-    }
-    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniMapMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: MiniMapMockComponent, isStandalone: true, selector: "mini-map", inputs: { maskColor: { classPropertyName: "maskColor", publicName: "maskColor", isSignal: true, isRequired: false, transformFunction: null }, strokeColor: { classPropertyName: "strokeColor", publicName: "strokeColor", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, scaleOnHover: { classPropertyName: "scaleOnHover", publicName: "scaleOnHover", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniMapMockComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'mini-map',
-                    template: '',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-
-class NodeToolbarMockComponent {
-    constructor() {
-        this.position = input('top');
-    }
-    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
-    ngOnInit() { }
-    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
-    ngOnDestroy() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeToolbarMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: NodeToolbarMockComponent, isStandalone: true, selector: "node-toolbar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeToolbarMockComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'node-toolbar',
-                    template: '<ng-content />',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-
-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", onReconnect: "onReconnect" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerMockDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[onConnect]', standalone: true }]
-        }] });
-
-class DragHandleMockDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DragHandleMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: DragHandleMockDirective, isStandalone: true, selector: "[dragHandle]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DragHandleMockDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[dragHandle]', standalone: true }]
-        }] });
-
-class SelectableMockDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectableMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SelectableMockDirective, isStandalone: true, selector: "[selectable]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectableMockDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[selectable]',
-                    standalone: true,
-                }]
-        }] });
-
-const VflowMocks = [
-    VflowMockComponent,
-    HandleMockComponent,
-    ResizableMockComponent,
-    SelectableMockDirective,
-    MiniMapMockComponent,
-    NodeToolbarMockComponent,
-    DragHandleMockDirective,
-    ConnectionControllerMockDirective,
-    NodeHtmlTemplateMockDirective,
-    GroupNodeTemplateMockDirective,
-    EdgeLabelHtmlTemplateMockDirective,
-    EdgeTemplateMockDirective,
-    ConnectionTemplateMockDirective,
-    HandleTemplateMockDirective,
-];
-
 // Standalone Util
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionControllerMockDirective, ConnectionTemplateDirective, ConnectionTemplateMockDirective, CustomDynamicNodeComponent, CustomNodeComponent, CustomTemplateEdgeComponent, DragHandleDirective, DragHandleMockDirective, EdgeLabelHtmlTemplateDirective, EdgeLabelHtmlTemplateMockDirective, EdgeTemplateDirective, EdgeTemplateMockDirective, GroupNodeTemplateDirective, GroupNodeTemplateMockDirective, HandleComponent, HandleMockComponent, HandleTemplateDirective, HandleTemplateMockDirective, MiniMapComponent, MiniMapMockComponent, NodeHtmlTemplateDirective, NodeHtmlTemplateMockDirective, NodeSvgTemplateDirective, NodeSvgTemplateMockDirective, NodeToolbarComponent, NodeToolbarMockComponent, NodeToolbarWrapperDirective, ResizableComponent, ResizableMockComponent, SelectableDirective, SelectableMockDirective, Vflow, VflowComponent, VflowMockComponent, VflowMocks, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isSvgTemplateDynamicNode, isSvgTemplateStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode, provideCustomNodeMocks };
+export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomDynamicNodeComponent, CustomNodeComponent, CustomTemplateEdgeComponent, DragHandleDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, HandleComponent, HandleTemplateDirective, MiniMapComponent, NodeHtmlTemplateDirective, NodeSvgTemplateDirective, NodeToolbarComponent, NodeToolbarWrapperDirective, ResizableComponent, SelectableDirective, Vflow, VflowComponent, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isSvgTemplateDynamicNode, isSvgTemplateStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode, ComponentEventBusService as ɵComponentEventBusService, ConnectionModel as ɵConnectionModel, FlowEntitiesService as ɵFlowEntitiesService, FlowSettingsService as ɵFlowSettingsService, HandleModel as ɵHandleModel, HandleService as ɵHandleService, NodeAccessorService as ɵNodeAccessorService, NodeModel as ɵNodeModel, RootPointerDirective as ɵRootPointerDirective, SelectionService as ɵSelectionService, SpacePointContextDirective as ɵSpacePointContextDirective, ViewportService as ɵViewportService };
 //# sourceMappingURL=ngx-vflow.mjs.map