ngx-vflow 1.16.3 → 2.0.0

package/lib/vflow/components/custom-node-base/custom-node-base.component.d.ts

@@ -12,5 +12,5 @@ export declare abstract class CustomNodeBaseComponent<T = any> implements OnInit
     ngOnInit(): void;
     private trackEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<CustomNodeBaseComponent<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CustomNodeBaseComponent<any>, never, never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CustomNodeBaseComponent<any>, never, never, {}, {}, never, never, true, never>;
 }

package/lib/vflow/components/vflow/vflow.component.d.ts

@@ -1,4 +1,4 @@
-import { DynamicNode, Node } from '../../interfaces/node.interface';
+import { Node } from '../../interfaces/node.interface';
 import { MapContextDirective } from '../../directives/map-context.directive';
 import { NodeModel } from '../../models/node.model';
 import { Edge } from '../../interfaces/edge.interface';
@@ -14,6 +14,7 @@ import { SpacePointContextDirective } from '../../directives/space-point-context
 import { FitViewOptions } from '../../interfaces/fit-view-options.interface';
 import { Optimization } from '../../interfaces/optimization.interface';
 import { KeyboardShortcuts } from '../../types/keyboard-action.type';
+import { SelectionMode } from '../../types/selection-mode.type';
 import { IntersectingNodesOptions } from '../../interfaces/intersecting-nodes-options.interface';
 import { AlignmentHelperSettings } from '../../interfaces/alignment-helper-settings.interface';
 import * as i0 from "@angular/core";
@@ -59,6 +60,12 @@ export declare class VflowComponent {
      * Global rule if you can or can't select entities
      */
     set entitiesSelectable(value: boolean);
+    /**
+     * Selection mode strategy
+     * - 'default': library manages selection automatically
+     * - 'manual': library does not manage selection, user controls it via node.selected signal
+     */
+    set selectionMode(value: SelectionMode);
     set keyboardShortcuts(value: KeyboardShortcuts);
     /**
      * Settings for connection (it renders when user tries to create edge between nodes)
@@ -82,10 +89,14 @@ export declare class VflowComponent {
      * Raizing z-index for selected edge
      */
     set elevateEdgesOnSelect(value: boolean);
+    /**
+     * Enable auto-pan
+     */
+    set autoPan(value: boolean);
     /**
      * Nodes to render
      */
-    set nodes(newNodes: Node[] | DynamicNode[]);
+    set nodes(newNodes: Node[]);
     alignmentHelper: import("@angular/core").InputSignal<boolean | AlignmentHelperSettings>;
     protected nodeModels: import("@angular/core").Signal<NodeModel<unknown>[]>;
     protected groups: import("@angular/core").Signal<NodeModel<unknown>[]>;
@@ -97,10 +108,8 @@ export declare class VflowComponent {
     protected edgeModels: import("@angular/core").Signal<EdgeModel[]>;
     /**
      * Event that accumulates all custom node events
-     *
-     * @experimental
      */
-    readonly onComponentNodeEvent: import("@angular/core").OutputRef<any>;
+    readonly componentNodeEvent: import("@angular/core").OutputRef<any>;
     protected nodeTemplateDirective: import("@angular/core").Signal<NodeHtmlTemplateDirective | undefined>;
     protected nodeSvgTemplateDirective: import("@angular/core").Signal<NodeSvgTemplateDirective | undefined>;
     protected groupNodeTemplateDirective: import("@angular/core").Signal<GroupNodeTemplateDirective | undefined>;
@@ -164,7 +173,7 @@ export declare class VflowComponent {
      *
      * @param id node id
      */
-    getNode<T = unknown>(id: string): Node<T> | DynamicNode<T> | undefined;
+    getNode<T = unknown>(id: string): Node<T> | undefined;
     /**
      * Sync method to get detached edges
      */
@@ -191,7 +200,7 @@ export declare class VflowComponent {
      * @param options.partially - If true, returns nodes that partially intersect. If false, only returns fully intersecting nodes
      * @returns An array of nodes that intersect with the specified node
      */
-    getIntesectingNodes<T>(nodeId: string, options?: IntersectingNodesOptions): Node<T>[] | DynamicNode<T>[];
+    getIntesectingNodes<T>(nodeId: string, options?: IntersectingNodesOptions): Node<T>[];
     /**
      * Converts a node's position to the coordinate space of another node
      *
@@ -201,9 +210,9 @@ export declare class VflowComponent {
      * @returns {Point} The converted position. Returns {x: Infinity, y: Infinity} if either node is not found
      */
     toNodeSpace(nodeId: string, spaceNodeId: string | null): Point;
-    protected trackNodes(idx: number, { rawNode: node }: NodeModel): Node<unknown> | DynamicNode<unknown>;
+    protected trackNodes(idx: number, { rawNode: node }: NodeModel): Node<unknown>;
     protected trackEdges(idx: number, { edge }: EdgeModel): Edge<unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<VflowComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VflowComponent, "vflow", never, { "view": { "alias": "view"; "required": false; }; "minZoom": { "alias": "minZoom"; "required": false; }; "maxZoom": { "alias": "maxZoom"; "required": false; }; "background": { "alias": "background"; "required": false; }; "optimization": { "alias": "optimization"; "required": false; }; "entitiesSelectable": { "alias": "entitiesSelectable"; "required": false; }; "keyboardShortcuts": { "alias": "keyboardShortcuts"; "required": false; }; "connection": { "alias": "connection"; "required": false; }; "snapGrid": { "alias": "snapGrid"; "required": false; }; "elevateNodesOnSelect": { "alias": "elevateNodesOnSelect"; "required": false; }; "elevateEdgesOnSelect": { "alias": "elevateEdgesOnSelect"; "required": false; }; "nodes": { "alias": "nodes"; "required": true; }; "alignmentHelper": { "alias": "alignmentHelper"; "required": false; "isSignal": true; }; "edges": { "alias": "edges"; "required": false; }; }, { "onComponentNodeEvent": "onComponentNodeEvent"; }, ["nodeTemplateDirective", "nodeSvgTemplateDirective", "groupNodeTemplateDirective", "edgeTemplateDirective", "edgeLabelHtmlDirective", "connectionTemplateDirective"], never, true, [{ directive: typeof i1.ChangesControllerDirective; inputs: {}; 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"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VflowComponent, "vflow", never, { "view": { "alias": "view"; "required": false; }; "minZoom": { "alias": "minZoom"; "required": false; }; "maxZoom": { "alias": "maxZoom"; "required": false; }; "background": { "alias": "background"; "required": false; }; "optimization": { "alias": "optimization"; "required": false; }; "entitiesSelectable": { "alias": "entitiesSelectable"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "keyboardShortcuts": { "alias": "keyboardShortcuts"; "required": false; }; "connection": { "alias": "connection"; "required": false; }; "snapGrid": { "alias": "snapGrid"; "required": false; }; "elevateNodesOnSelect": { "alias": "elevateNodesOnSelect"; "required": false; }; "elevateEdgesOnSelect": { "alias": "elevateEdgesOnSelect"; "required": false; }; "autoPan": { "alias": "autoPan"; "required": false; }; "nodes": { "alias": "nodes"; "required": true; }; "alignmentHelper": { "alias": "alignmentHelper"; "required": false; "isSignal": true; }; "edges": { "alias": "edges"; "required": false; }; }, { "componentNodeEvent": "componentNodeEvent"; }, ["nodeTemplateDirective", "nodeSvgTemplateDirective", "groupNodeTemplateDirective", "edgeTemplateDirective", "edgeLabelHtmlDirective", "connectionTemplateDirective"], never, true, [{ directive: typeof i1.ChangesControllerDirective; inputs: {}; outputs: { "nodesChanges": "nodesChanges"; "nodesChanges.position": "nodesChanges.position"; "nodesChanges.size": "nodesChanges.size"; "nodesChanges.add": "nodesChanges.add"; "nodesChanges.remove": "nodesChanges.remove"; "nodesChanges.select": "nodesChanges.select"; "edgesChanges": "edgesChanges"; "edgesChanges.detached": "edgesChanges.detached"; "edgesChanges.add": "edgesChanges.add"; "edgesChanges.remove": "edgesChanges.remove"; "edgesChanges.select": "edgesChanges.select"; }; }]>;
     static ngAcceptInputType_connection: i2.ConnectionSettings;
 }

package/lib/vflow/directives/auto-pan.directive.d.ts

@@ -0,0 +1,16 @@
+import { OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class AutoPanDirective implements OnInit {
+    private readonly statusService;
+    private readonly viewportService;
+    private readonly flowSettingsService;
+    private readonly rootSvg;
+    private readonly injector;
+    private readonly destroyRef;
+    private readonly documentPoint$;
+    ngOnInit(): void;
+    private toViewportPoint;
+    private pan;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AutoPanDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AutoPanDirective, "[autoPan]", never, {}, {}, never, never, true, never>;
+}

package/lib/vflow/directives/changes-controller.directive.d.ts

@@ -7,98 +7,24 @@ export declare class ChangesControllerDirective {
     protected nodesChangeService: NodesChangeService;
     protected edgesChangeService: EdgeChangesService;
     /**
-     * Watch nodes change
+     * Watch nodes changes
      */
-    readonly onNodesChange: import("@angular/core").OutputRef<NodeChange[]>;
-    readonly onNodesChangePosition: import("@angular/core").OutputRef<NodePositionChange[]>;
-    /**
-     * @deprecated use `onNodesChange.position` instead
-     */
-    readonly onNodesChangePositionSignle: import("@angular/core").OutputRef<NodePositionChange>;
-    /**
-     * @deprecated use `onNodesChange.position` instead
-     */
-    readonly onNodesChangePositionMany: import("@angular/core").OutputRef<NodePositionChange[]>;
-    readonly onNodesChangeSize: import("@angular/core").OutputRef<NodeSizeChange[]>;
-    /**
-     * @deprecated use `onNodesChange.size` instead
-     */
-    readonly onNodesChangeSizeSingle: import("@angular/core").OutputRef<NodeSizeChange>;
-    /**
-     * @deprecated use `onNodesChange.size` instead
-     */
-    readonly onNodesChangeSizeMany: import("@angular/core").OutputRef<NodeSizeChange[]>;
-    readonly onNodesChangeAdd: import("@angular/core").OutputRef<NodeAddChange[]>;
-    /**
-     * @deprecated use `onNodesChange.add` instead
-     */
-    readonly onNodesChangeAddSingle: import("@angular/core").OutputRef<NodeAddChange>;
-    /**
-     * @deprecated use `onNodesChange.add` instead
-     */
-    readonly onNodesChangeAddMany: import("@angular/core").OutputRef<NodeAddChange[]>;
-    readonly onNodesChangeRemove: import("@angular/core").OutputRef<NodeRemoveChange[]>;
-    /**
-     * @deprecated use `onNodesChange.remove` instead
-     */
-    readonly onNodesChangeRemoveSingle: import("@angular/core").OutputRef<NodeRemoveChange>;
-    /**
-     * @deprecated use `onNodesChange.remove` instead
-     */
-    readonly onNodesChangeRemoveMany: import("@angular/core").OutputRef<NodeRemoveChange[]>;
-    readonly onNodesChangeSelect: import("@angular/core").OutputRef<NodeSelectedChange[]>;
-    /**
-     * @deprecated use `onNodesChange.select` instead
-     */
-    readonly onNodesChangeSelectSingle: import("@angular/core").OutputRef<NodeSelectedChange>;
-    /**
-     * @deprecated use `onNodesChange.select` instead
-     */
-    readonly onNodesChangeSelectMany: import("@angular/core").OutputRef<NodeSelectedChange[]>;
+    readonly nodesChanges: import("@angular/core").OutputRef<NodeChange[]>;
+    readonly nodesChangesPosition: import("@angular/core").OutputRef<NodePositionChange[]>;
+    readonly nodesChangesSize: import("@angular/core").OutputRef<NodeSizeChange[]>;
+    readonly nodesChangesAdd: import("@angular/core").OutputRef<NodeAddChange[]>;
+    readonly nodesChangesRemove: import("@angular/core").OutputRef<NodeRemoveChange[]>;
+    readonly nodesChangesSelect: import("@angular/core").OutputRef<NodeSelectedChange[]>;
     /**
      * Watch edges change
      */
-    readonly onEdgesChange: import("@angular/core").OutputRef<EdgeChange[]>;
-    readonly onNodesChangeDetached: import("@angular/core").OutputRef<EdgeDetachedChange[]>;
-    /**
-     * @deprecated use `onEdgesChange.detached` instead
-     */
-    readonly onNodesChangeDetachedSingle: import("@angular/core").OutputRef<EdgeDetachedChange>;
-    /**
-     * @deprecated use `onEdgesChange.detached` instead
-     */
-    readonly onNodesChangeDetachedMany: import("@angular/core").OutputRef<EdgeDetachedChange[]>;
-    readonly onEdgesChangeAdd: import("@angular/core").OutputRef<EdgeAddChange[]>;
-    /**
-     * @deprecated use `onEdgesChange.add` instead
-     */
-    readonly onEdgeChangeAddSingle: import("@angular/core").OutputRef<EdgeAddChange>;
-    /**
-     * @deprecated use `onEdgesChange.add` instead
-     */
-    readonly onEdgeChangeAddMany: import("@angular/core").OutputRef<EdgeAddChange[]>;
-    readonly onEdgeChangeRemove: import("@angular/core").OutputRef<EdgeRemoveChange[]>;
-    /**
-     * @deprecated use `onEdgesChange.remove` instead
-     */
-    readonly onEdgeChangeRemoveSingle: import("@angular/core").OutputRef<EdgeRemoveChange>;
-    /**
-     * @deprecated use `onEdgesChange.remove` instead
-     */
-    readonly onEdgeChangeRemoveMany: import("@angular/core").OutputRef<EdgeRemoveChange[]>;
-    readonly onEdgeChangeSelect: import("@angular/core").OutputRef<EdgeSelectChange[]>;
-    /**
-     * @deprecated use `onEdgesChange.select` instead
-     */
-    readonly onEdgeChangeSelectSingle: import("@angular/core").OutputRef<EdgeSelectChange>;
-    /**
-     * @deprecated use `onEdgesChange.select` instead
-     */
-    readonly onEdgeChangeSelectMany: import("@angular/core").OutputRef<EdgeSelectChange[]>;
+    readonly edgesChanges: import("@angular/core").OutputRef<EdgeChange[]>;
+    readonly edgesChangesDetached: import("@angular/core").OutputRef<EdgeDetachedChange[]>;
+    readonly edgesChangesAdd: import("@angular/core").OutputRef<EdgeAddChange[]>;
+    readonly edgesChangesRemove: import("@angular/core").OutputRef<EdgeRemoveChange[]>;
+    readonly edgesChangesSelect: import("@angular/core").OutputRef<EdgeSelectChange[]>;
     private nodeChangesOfType;
     private edgeChangesOfType;
-    private singleChange;
-    private manyChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChangesControllerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ChangesControllerDirective, "[changesController]", never, {}, { "onNodesChange": "onNodesChange"; "onNodesChangePosition": "onNodesChange.position"; "onNodesChangePositionSignle": "onNodesChange.position.single"; "onNodesChangePositionMany": "onNodesChange.position.many"; "onNodesChangeSize": "onNodesChange.size"; "onNodesChangeSizeSingle": "onNodesChange.size.single"; "onNodesChangeSizeMany": "onNodesChange.size.many"; "onNodesChangeAdd": "onNodesChange.add"; "onNodesChangeAddSingle": "onNodesChange.add.single"; "onNodesChangeAddMany": "onNodesChange.add.many"; "onNodesChangeRemove": "onNodesChange.remove"; "onNodesChangeRemoveSingle": "onNodesChange.remove.single"; "onNodesChangeRemoveMany": "onNodesChange.remove.many"; "onNodesChangeSelect": "onNodesChange.select"; "onNodesChangeSelectSingle": "onNodesChange.select.single"; "onNodesChangeSelectMany": "onNodesChange.select.many"; "onEdgesChange": "onEdgesChange"; "onNodesChangeDetached": "onEdgesChange.detached"; "onNodesChangeDetachedSingle": "onEdgesChange.detached.single"; "onNodesChangeDetachedMany": "onEdgesChange.detached.many"; "onEdgesChangeAdd": "onEdgesChange.add"; "onEdgeChangeAddSingle": "onEdgesChange.add.single"; "onEdgeChangeAddMany": "onEdgesChange.add.many"; "onEdgeChangeRemove": "onEdgesChange.remove"; "onEdgeChangeRemoveSingle": "onEdgesChange.remove.single"; "onEdgeChangeRemoveMany": "onEdgesChange.remove.many"; "onEdgeChangeSelect": "onEdgesChange.select"; "onEdgeChangeSelectSingle": "onEdgesChange.select.single"; "onEdgeChangeSelectMany": "onEdgesChange.select.many"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ChangesControllerDirective, "[changesController]", never, {}, { "nodesChanges": "nodesChanges"; "nodesChangesPosition": "nodesChanges.position"; "nodesChangesSize": "nodesChanges.size"; "nodesChangesAdd": "nodesChanges.add"; "nodesChangesRemove": "nodesChanges.remove"; "nodesChangesSelect": "nodesChanges.select"; "edgesChanges": "edgesChanges"; "edgesChangesDetached": "edgesChanges.detached"; "edgesChangesAdd": "edgesChanges.add"; "edgesChangesRemove": "edgesChanges.remove"; "edgesChangesSelect": "edgesChanges.select"; }, never, never, true, never>;
 }

package/lib/vflow/directives/connection-controller.directive.d.ts

@@ -1,10 +1,12 @@
-import { Connection, ReconnectionEvent } from '../interfaces/connection.interface';
+import { Connection } from '../interfaces/connection.interface';
 import { HandleModel } from '../models/handle.model';
 import { EdgeModel } from '../models/edge.model';
+import { ConnectEndEvent, ConnectStartEvent, ReconnectEndEvent, ReconnectEvent, ReconnectStartEvent } from '../interfaces/connection-events.interface';
 import * as i0 from "@angular/core";
 export declare class ConnectionControllerDirective {
     private statusService;
     private flowEntitiesService;
+    readonly connectStart: import("@angular/core").OutputRef<ConnectStartEvent>;
     /**
      * This event fires when user tries to create new Edge.
      *
@@ -12,16 +14,12 @@ export declare class ConnectionControllerDirective {
      *
      * Also it's important to note, that this event only fires when connection is valid by validator function in `ConnectionSettings`,
      * by default without passing the validator every connection concidered valid.
-     *
-     * @deprecated use `connect` output instead
      */
-    readonly onConnect: import("@angular/core").OutputRef<Connection>;
     readonly connect: import("@angular/core").OutputRef<Connection>;
-    /**
-     * @deprecated use `reconnect` output instead
-     */
-    readonly onReconnect: import("@angular/core").OutputRef<ReconnectionEvent>;
-    readonly reconnect: import("@angular/core").OutputRef<ReconnectionEvent>;
+    readonly connectEnd: import("@angular/core").OutputRef<ConnectEndEvent>;
+    readonly reconnectStart: import("@angular/core").OutputRef<ReconnectStartEvent>;
+    readonly reconnect: import("@angular/core").OutputRef<ReconnectEvent>;
+    readonly reconnectEnd: import("@angular/core").OutputRef<ReconnectEndEvent>;
     protected isStrictMode: import("@angular/core").Signal<boolean>;
     startConnection(handle: HandleModel): void;
     startReconnection(handle: HandleModel, oldEdge: EdgeModel): void;
@@ -29,5 +27,5 @@ export declare class ConnectionControllerDirective {
     resetValidateConnection(targetHandle: HandleModel): void;
     endConnection(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConnectionControllerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ConnectionControllerDirective, "[onConnect], [onReconnect], [connect], [reconnect]", never, {}, { "onConnect": "onConnect"; "connect": "connect"; "onReconnect": "onReconnect"; "reconnect": "reconnect"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ConnectionControllerDirective, "[connectStart], [connect], [connectEnd], [reconnectStart], [reconnect], [reconnectEnd]", never, {}, { "connectStart": "connectStart"; "connect": "connect"; "connectEnd": "connectEnd"; "reconnectStart": "reconnectStart"; "reconnect": "reconnect"; "reconnectEnd": "reconnectEnd"; }, never, never, true, never>;
 }

package/lib/vflow/directives/space-point-context.directive.d.ts

@@ -5,11 +5,12 @@ export declare class SpacePointContextDirective {
     private pointerMovementDirective;
     private rootSvg;
     private host;
+    private viewportService;
     /**
      * Signal with current mouse position in svg space
      */
     svgCurrentSpacePoint: Signal<Point>;
-    pointerMovement: Signal<import("./root-pointer.directive").PointerEvent | undefined>;
+    private currentPoint;
     documentPointToFlowPoint(documentPoint: Point): DOMPoint;
     static ɵfac: i0.ɵɵFactoryDeclaration<SpacePointContextDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<SpacePointContextDirective, "g[spacePointContext]", never, {}, {}, never, never, true, never>;

package/lib/vflow/interfaces/component-node-event.interface.d.ts

@@ -1,6 +1,5 @@
 import { EventEmitter, OutputRef } from '@angular/core';
 import { CustomNodeComponent } from '../public-components/custom-node/custom-node.component';
-import { CustomDynamicNodeComponent } from '../public-components/custom-dynamic-node/custom-dynamic-node.component';
 type EventInfo<T> = T extends EventEmitter<infer U> | OutputRef<infer U> ? U : never;
 type EventKeys<T> = {
     [K in keyof T]: T[K] extends EventEmitter<any> | OutputRef<any> ? K : never;
@@ -20,7 +19,7 @@ type EventsFromComponent<T> = EventShape<T, EventKeys<T>>;
  *
  * @experimental
  */
-export type ComponentNodeEvent<T extends (CustomNodeComponent | CustomDynamicNodeComponent)[]> = {
+export type ComponentNodeEvent<T extends CustomNodeComponent[]> = {
     nodeId: string;
 } & {
     [I in keyof T]: EventsFromComponent<T[I]>;

package/lib/vflow/interfaces/connection-events.interface.d.ts

@@ -0,0 +1,66 @@
+import { FlowStatusConnectionReleaseValidated, FlowStatusConnectionDropped, FlowStatusConnectionStart, FlowStatusReconnectionDropped, FlowStatusReconnectionStart, FlowStatusReconnectionReleaseValidated } from '../services/flow-status.service';
+import { HandleType } from '../types/handle-type.type';
+import { Position } from '../types/position.type';
+import { Connection } from './connection.interface';
+import { Edge } from './edge.interface';
+import { Node } from './node.interface';
+export interface ConnectStartEvent {
+    node: Node;
+    handle: Handle;
+}
+export interface ConnectEndEvent {
+    valid: boolean | null;
+    /**
+     * The side where the connection started from
+     */
+    from: {
+        node: Node;
+        handle: Handle;
+    };
+    /**
+     * The side where the connection ended to
+     */
+    to: {
+        node: Node | null;
+        handle: Handle | null;
+    };
+}
+export interface ReconnectStartEvent {
+    edge: Edge;
+    node: Node;
+    handle: Handle;
+}
+export interface ReconnectEvent {
+    connection: Connection;
+    oldEdge: Edge;
+}
+export interface ReconnectEndEvent {
+    edge: Edge;
+    valid: boolean | null;
+    /**
+     * The side where the edge remain attached during reconnection
+     */
+    from: {
+        node: Node;
+        handle: Handle;
+    };
+    /**
+     * The side where the edge was reconnected to
+     */
+    to: {
+        node: Node | null;
+        handle: Handle | null;
+    };
+}
+interface Handle {
+    id?: string;
+    type: HandleType;
+    position: Position;
+}
+export declare function connectStartEventFromConnectionStartStatus(status: FlowStatusConnectionStart): ConnectStartEvent;
+export declare function connectEndEventFromConnectionReleaseValidatedStatus(status: FlowStatusConnectionReleaseValidated): ConnectEndEvent;
+export declare function connectEndEventFromConnectionDroppedStatus(status: FlowStatusConnectionDropped): ConnectEndEvent;
+export declare function reconnectStartEventFromReconnectionStartStatus(status: FlowStatusReconnectionStart): ReconnectStartEvent;
+export declare function reconnectEndEventFromReconnectionReleaseValidatedStatus(status: FlowStatusReconnectionReleaseValidated): ReconnectEndEvent;
+export declare function reconnectEndEventFromReconnectionDroppedStatus(status: FlowStatusReconnectionDropped): ReconnectEndEvent;
+export {};

package/lib/vflow/interfaces/connection-settings.interface.d.ts

@@ -1,12 +1,18 @@
 import { ConnectionMode } from '../types/connection-mode.type';
+import { HandleType } from '../types/handle-type.type';
 import { Connection } from './connection.interface';
 import { Curve, EdgeType } from './edge.interface';
 import { Marker } from './marker.interface';
-export type ConnectionValidatorFn = (connection: Connection) => boolean;
+export type ConnectionForValidation = Connection & {
+    sourceHandleType: HandleType;
+    targetHandleType: HandleType;
+};
+export type ConnectionValidatorFn = (connection: ConnectionForValidation) => boolean;
 export interface ConnectionSettings {
     curve?: Curve;
     type?: EdgeType;
     validator?: ConnectionValidatorFn;
     marker?: Marker;
     mode?: ConnectionMode;
+    allowSelfConnections?: boolean;
 }

package/lib/vflow/interfaces/connection.interface.d.ts

@@ -1,11 +1,6 @@
-import { Edge } from './edge.interface';
 export interface Connection {
     source: string;
     target: string;
     sourceHandle?: string;
     targetHandle?: string;
 }
-export interface ReconnectionEvent {
-    connection: Connection;
-    oldEdge: Edge;
-}

package/lib/vflow/interfaces/curve-factory.interface.d.ts

@@ -1,7 +1,7 @@
 import { Position } from '../types/position.type';
 import { EdgeLabelPosition } from './edge-label.interface';
 import { Edge } from './edge.interface';
-import { DynamicNode, Node } from './node.interface';
+import { Node } from './node.interface';
 import { Point } from './point.interface';
 export interface CurveFactorySharedParams {
     /** Starting point coordinates of the curve */
@@ -15,7 +15,7 @@ export interface CurveFactorySharedParams {
     /** Array of all edges in the flow */
     allEdges: Edge[];
     /** Array of all nodes in the flow */
-    allNodes: Node[] | DynamicNode[];
+    allNodes: Node[];
 }
 export interface ConnectionCurveFactoryParams extends CurveFactorySharedParams {
     /** Indicates this is a temporary connection being drawn */

package/lib/vflow/interfaces/edge-label.interface.d.ts

@@ -1,7 +1,3 @@
-/**
- * @deprecated not used anymore internally
- */
-export type EdgeLabelType = 'default' | 'html-template';
 export type EdgeLabelPosition = 'start' | 'center' | 'end';
 export type EdgeLabel<T = unknown> = DefaultEdgeLabel | HtmlTemplateEdgeLabel<T>;
 export interface DefaultEdgeLabel {

package/lib/vflow/interfaces/edge.interface.d.ts

@@ -1,21 +1,49 @@
+import { WritableSignal } from '@angular/core';
 import { Connection } from './connection.interface';
 import { CurveFactory } from './curve-factory.interface';
 import { EdgeLabel, EdgeLabelPosition } from './edge-label.interface';
 import { Marker } from './marker.interface';
+import { UnwrapSignal } from '../types/unwrap-signal.type';
+export declare const EDGE_DEFAULTS: {
+    type: EdgeType;
+    curve: Curve;
+    data: {};
+    edgeLabels: {};
+    markers: {};
+    reconnectable: boolean;
+    floating: boolean;
+    selected: boolean;
+};
 export type EdgeType = 'default' | 'template';
 export type Curve = 'straight' | 'bezier' | 'smooth-step' | 'step' | CurveFactory;
 export interface Edge<T = unknown> extends Connection {
     id: string;
     type?: EdgeType;
-    curve?: Curve;
-    data?: T;
-    edgeLabels?: {
+    curve?: WritableSignal<Curve>;
+    data?: WritableSignal<T>;
+    edgeLabels?: WritableSignal<{
         [position in EdgeLabelPosition]?: EdgeLabel;
-    };
-    markers?: {
+    }>;
+    markers?: WritableSignal<{
         start?: Marker;
         end?: Marker;
-    };
-    reconnectable?: boolean | 'source' | 'target';
-    floating?: boolean;
+    }>;
+    reconnectable?: WritableSignal<boolean | 'source' | 'target'>;
+    floating?: WritableSignal<boolean>;
+    selected?: WritableSignal<boolean>;
 }
+export type StaticEdge<T = unknown> = UnwrapSignal<Edge<T>>;
+export declare function createEdge<T>(edge: StaticEdge<T>): Required<Edge<T>>;
+export declare function createEdge<T>(edge: StaticEdge<T>, options: {
+    useDefaults: true;
+}): Required<Edge<T>>;
+export declare function createEdge<T>(edge: StaticEdge<T>, options: {
+    useDefaults: false;
+}): Edge<T>;
+export declare function createEdges<T>(edges: StaticEdge<T>[]): Required<Edge<T>>[];
+export declare function createEdges<T>(edges: StaticEdge<T>[], options: {
+    useDefaults: true;
+}): Required<Edge<T>>[];
+export declare function createEdges<T>(edges: StaticEdge<T>[], options: {
+    useDefaults: false;
+}): Edge<T>[];