ngx-vflow 1.16.3 → 2.0.0

package/README.md

@@ -1,85 +1,51 @@
-<img width="1305" alt="image" src="https://github.com/artem-mangilev/ngx-vflow/assets/53087914/3520a5a4-9a8f-40d6-9c3f-50d16fabc48f">
+<div align="center">
 
----
+# ngx-vflow
 
-`ngx-vflow` is an Angular library for creating node-based applications. It aims to assist you in building anything from a static diagram to a visual editor. You can utilize the default design or apply your own by customizing everything using familiar technologies.
+[![NPM Version](https://img.shields.io/npm/v/ngx-vflow?color=blue)](https://www.npmjs.com/package/ngx-vflow)
+[![License](https://img.shields.io/badge/license-MIT-007EC7.svg)](LICENSE)
+[![Discord](https://img.shields.io/badge/discord-ngx--vflow-5865F2?logo=discord&logoColor=white)](https://discord.gg/RavS5ydTJV)
 
-## Installation
+**A powerful Angular library for building node-based UIs**
 
-```
-npm i ngx-vflow --save
-```
+[Documentation](https://www.ngx-vflow.org/) • [API Reference](https://www.ngx-vflow.org/api)
 
-## Version Compatibility
+</div>
 
-| ngx-vlow | Angular   |
-| -------- | --------- |
-| v0.x     | v16.2.0+  |
-| v1.x     | v17.3.12+ |
-
-## Basic Example
-
-The following code describes 3 nodes and creates 2 edges between them.
-
-```ts
-@Component({
-  template: `<vflow [nodes]="nodes" [edges]="edges" />`,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [Vflow],
-})
-export class DefaultEdgesDemoComponent {
-  public nodes: Node[] = [
-    {
-      id: '1',
-      point: { x: 10, y: 200 },
-      type: 'default',
-      text: '1',
-    },
-    {
-      id: '2',
-      point: { x: 200, y: 100 },
-      type: 'default',
-      text: '2',
-    },
-    {
-      id: '3',
-      point: { x: 200, y: 300 },
-      type: 'default',
-      text: '3',
-    },
-  ];
-
-  public edges: Edge[] = [
-    {
-      id: '1 -> 2',
-      source: '1',
-      target: '2',
-    },
-    {
-      id: '1 -> 3',
-      source: '1',
-      target: '3',
-    },
-  ];
-}
-```
+<img width="1305" alt="ngx-vflow showcase" src="https://github.com/artem-mangilev/ngx-vflow/assets/53087914/5cbd3669-10a5-4ecb-9a1f-c9ae4eb5fb5a">
 
-The code above renders to this:
+---
 
-<img width="398" alt="image" src="https://github.com/artem-mangilev/ngx-vflow/assets/53087914/2a1b778a-2bfa-4176-9d50-065fdb1f1dec">
+- **Declarative API & Full Customization** - Custom nodes, edges, and handles with Angular components
+- **Subflows** - Create nested flows with parent-child relationships
+- **Interactive Connections** - Create, validate, and reconnect edges
+- **Rich Interactions** - Dragging, selecting, zooming, panning, and keyboard shortcuts
+- **Precise Control** - Snap to grid, alignment helpers, and custom backgrounds
+- **Navigation** - Built-in minimap
+- **Performance** - Virtualization and lazy loading for large graphs
+- **Reactivity** - Uses Signals to keep internal and external states in sync
+- **Layout Algorithms** - Integration with any layouts
 
-For more complex example you may see the documentation: https://www.ngx-vflow.org/
+## Installation
 
-## API
+```bash
+npm install ngx-vflow --save
+```
+
+## Version Compatibility
 
-`vflow` component API is described here: https://www.ngx-vflow.org/api/ngx-vflow/classes/VflowComponent
+| ngx-vflow | Angular   |
+| --------- | --------- |
+| v0.x      | v16.2.0+  |
+| v1.x      | v17.3.12+ |
+| v2.x      | v19.2.17+ |
 
-Host directives for `vflow` that you may find helpful:
+## Community & Support
 
-- https://www.ngx-vflow.org/api/ngx-vflow/classes/ConnectionControllerDirective
-- https://www.ngx-vflow.org/api/ngx-vflow/classes/ChangesControllerDirective
+- Join our [Discord community](https://discord.gg/RavS5ydTJV) for help and discussions
+- Report bugs and request features on [GitHub Issues](https://github.com/artem-mangilev/ngx-vflow/issues)
+- Check out the [documentation](https://www.ngx-vflow.org/) for guides and examples
 
 ## License
 
-MIT
+MIT © [Artem Mangilev](https://github.com/artem-mangilev)

package/fesm2022/ngx-vflow-testing.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { signal, inject, TemplateRef, Directive, input, output, contentChild, Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { signal, inject, TemplateRef, Directive, input, output, contentChild, Input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { ɵNodeModel as _NodeModel, ɵComponentEventBusService as _ComponentEventBusService, ɵNodeAccessorService as _NodeAccessorService, ɵFlowEntitiesService as _FlowEntitiesService, ɵHandleService as _HandleService, ɵRootPointerDirective as _RootPointerDirective, ɵSpacePointContextDirective as _SpacePointContextDirective, ɵSelectionService as _SelectionService, ɵFlowSettingsService as _FlowSettingsService, ɵViewportService as _ViewportService, ɵNodeRenderingService as _NodeRenderingService, DEFAULT_OPTIMIZATION, ɵConnectionModel as _ConnectionModel } from 'ngx-vflow';
 import { of } from 'rxjs';
 import { NgTemplateOutlet } from '@angular/common';
 import { toObservable } from '@angular/core/rxjs-interop';
 
-const mockModel = () => new _NodeModel({ id: 'mock', type: 'default', point: { x: 0, y: 0 } });
+const mockModel = () => new _NodeModel({ id: 'mock', type: 'default', point: signal({ x: 0, y: 0 }) });
 function provideCustomNodeMocks() {
     return [
         {
@@ -66,10 +66,10 @@ 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeTemplateMockDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -80,10 +80,10 @@ 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConnectionTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConnectionTemplateMockDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -94,10 +94,10 @@ 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeLabelHtmlTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdgeLabelHtmlTemplateMockDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -108,10 +108,10 @@ 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeHtmlTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeHtmlTemplateMockDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -122,10 +122,10 @@ 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeSvgTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeSvgTemplateMockDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -136,10 +136,10 @@ 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: GroupNodeTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: GroupNodeTemplateMockDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -150,10 +150,10 @@ 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HandleTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HandleTemplateMockDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -169,13 +169,15 @@ class VflowMockComponent {
         this.background = '#fff';
         this.optimization = DEFAULT_OPTIMIZATION;
         this.entitiesSelectable = true;
+        this.selectionMode = 'default';
         this.keyboardShortcuts = {
             multiSelection: null,
         };
         this.connection = new _ConnectionModel({});
+        this.autoPan = true;
         this.alignmentHelper = input(false);
         // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-        this.onComponentNodeEvent = output();
+        this.componentNodeEvent = output();
         this.nodeTemplateDirective = contentChild(NodeHtmlTemplateMockDirective);
         this.groupNodeTemplateDirective = contentChild(GroupNodeTemplateMockDirective);
         this.edgeTemplateDirective = contentChild(EdgeTemplateMockDirective);
@@ -236,8 +238,8 @@ class VflowMockComponent {
     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: false, 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 }, alignmentHelper: { classPropertyName: "alignmentHelper", publicName: "alignmentHelper", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateMockDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: VflowMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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: false, isRequired: false, transformFunction: null }, entitiesSelectable: { classPropertyName: "entitiesSelectable", publicName: "entitiesSelectable", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", 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 }, autoPan: { classPropertyName: "autoPan", publicName: "autoPan", isSignal: false, isRequired: false, transformFunction: null }, alignmentHelper: { classPropertyName: "alignmentHelper", publicName: "alignmentHelper", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { componentNodeEvent: "componentNodeEvent" }, 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) {
@@ -280,34 +282,35 @@ class VflowMockComponent {
             },
           }" />
 
-        @if (edge.edgeLabels?.start) {
+        @if (edge.edgeLabels?.()?.start; as label) {
           <ng-component
             [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
             [ngTemplateOutletContext]="{
               $implicit: {
                 edge: edge,
+                label,
               },
             }" />
         }
 
-        @if (edge.edgeLabels?.center) {
+        @if (edge.edgeLabels?.()?.center; as label) {
           <ng-component
             [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
             [ngTemplateOutletContext]="{
               $implicit: {
                 edge: edge,
-                label: edge.edgeLabels?.center,
+                label,
               },
             }" />
         }
 
-        @if (edge.edgeLabels?.end) {
+        @if (edge.edgeLabels?.()?.end; as label) {
           <ng-component
             [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
             [ngTemplateOutletContext]="{
               $implicit: {
                 edge: edge,
-                label: edge.edgeLabels?.end,
+                label,
               },
             }" />
         }
@@ -326,7 +329,7 @@ class VflowMockComponent {
     }
   `, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: VflowMockComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'vflow',
@@ -373,34 +376,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             },
           }" />
 
-        @if (edge.edgeLabels?.start) {
+        @if (edge.edgeLabels?.()?.start; as label) {
           <ng-component
             [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
             [ngTemplateOutletContext]="{
               $implicit: {
                 edge: edge,
+                label,
               },
             }" />
         }
 
-        @if (edge.edgeLabels?.center) {
+        @if (edge.edgeLabels?.()?.center; as label) {
           <ng-component
             [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
             [ngTemplateOutletContext]="{
               $implicit: {
                 edge: edge,
-                label: edge.edgeLabels?.center,
+                label,
               },
             }" />
         }
 
-        @if (edge.edgeLabels?.end) {
+        @if (edge.edgeLabels?.()?.end; as label) {
           <ng-component
             [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
             [ngTemplateOutletContext]="{
               $implicit: {
                 edge: edge,
-                label: edge.edgeLabels?.end,
+                label,
               },
             }" />
         }
@@ -419,7 +423,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true,
                     imports: [NgTemplateOutlet],
                 }]
         }], propDecorators: { nodes: [{
@@ -439,6 +442,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], entitiesSelectable: [{
                 type: Input
+            }], selectionMode: [{
+                type: Input
             }], keyboardShortcuts: [{
                 type: Input
             }], connection: [{
@@ -452,6 +457,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], elevateEdgesOnSelect: [{
                 type: Input
+            }], autoPan: [{
+                type: Input
             }] } });
 
 class HandleMockComponent {
@@ -465,10 +472,10 @@ class HandleMockComponent {
     }
     // 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 }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: true, isRequired: false, transformFunction: null }, offsetY: { classPropertyName: "offsetY", publicName: "offsetY", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HandleMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", 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 }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: true, isRequired: false, transformFunction: null }, offsetY: { classPropertyName: "offsetY", publicName: "offsetY", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HandleMockComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'handle',
@@ -490,10 +497,10 @@ class ResizableMockComponent {
     ngOnDestroy() { }
     // 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ResizableMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ResizableMockComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[resizable]',
@@ -512,10 +519,10 @@ class MiniMapMockComponent {
     }
     // 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MiniMapMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MiniMapMockComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mini-map',
@@ -533,10 +540,10 @@ class NodeToolbarMockComponent {
     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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeToolbarMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeToolbarMockComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'node-toolbar',
@@ -548,12 +555,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 class ConnectionControllerMockDirective {
     constructor() {
+        this.connectStart = output();
         this.connect = output();
-        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-        this.onConnect = output();
+        this.connectEnd = output();
+        this.reconnectStart = output();
         this.reconnect = output();
-        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-        this.onReconnect = output();
+        this.reconnectEnd = output();
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     startConnection(handle) { }
@@ -565,28 +572,31 @@ class ConnectionControllerMockDirective {
     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: "[connect], [onConnect]", outputs: { connect: "connect", onConnect: "onConnect", reconnect: "reconnect", onReconnect: "onReconnect" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConnectionControllerMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: ConnectionControllerMockDirective, isStandalone: true, selector: "[connectStart], [connect], [connectEnd], [reconnectStart], [reconnect], [reconnectEnd]", outputs: { connectStart: "connectStart", connect: "connect", connectEnd: "connectEnd", reconnectStart: "reconnectStart", reconnect: "reconnect", reconnectEnd: "reconnectEnd" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerMockDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConnectionControllerMockDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[connect], [onConnect]', standalone: true }]
+            args: [{
+                    selector: '[connectStart], [connect], [connectEnd], [reconnectStart], [reconnect], [reconnectEnd]',
+                    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DragHandleMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: DragHandleMockDirective, isStandalone: true, selector: "[dragHandle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DragHandleMockDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectableMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: SelectableMockDirective, isStandalone: true, selector: "[selectable]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectableMockDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectableMockDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[selectable]',
@@ -595,10 +605,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }] });
 
 class CustomTemplateEdgeMockComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomTemplateEdgeMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomTemplateEdgeMockComponent, isStandalone: true, selector: "g[customTemplateEdge]", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomTemplateEdgeMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: CustomTemplateEdgeMockComponent, isStandalone: true, selector: "g[customTemplateEdge]", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomTemplateEdgeMockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomTemplateEdgeMockComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'g[customTemplateEdge]',