ngx-vflow 1.4.2 → 1.6.0

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

@@ -1,5 +1,6 @@
 import { TemplateRef } from '@angular/core';
 import { ConnectionModel } from '../../models/connection.model';
+import { ConnectionContext } from '../../interfaces/template-context.interface';
 import * as i0 from "@angular/core";
 export declare class ConnectionComponent {
     model: import("@angular/core").InputSignal<ConnectionModel>;
@@ -9,12 +10,7 @@ export declare class ConnectionComponent {
     protected path: import("@angular/core").Signal<string | null>;
     protected markerUrl: import("@angular/core").Signal<string>;
     protected readonly defaultColor = "rgb(177, 177, 183)";
-    protected getContext(): {
-        $implicit: {
-            path: import("@angular/core").Signal<string | null>;
-            marker: import("@angular/core").Signal<string>;
-        };
-    };
+    protected getContext(): ConnectionContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConnectionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ConnectionComponent, "g[connection]", never, { "model": { "alias": "model"; "required": true; "isSignal": true; }; "template": { "alias": "template"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -1,19 +1,22 @@
-import { Injector, OnInit, TemplateRef } from '@angular/core';
+import { Injector, TemplateRef } from '@angular/core';
 import { EdgeModel } from '../../models/edge.model';
 import { EdgeContext } from '../../interfaces/template-context.interface';
+import { HandleModel } from '../../models/handle.model';
 import * as i0 from "@angular/core";
-export declare class EdgeComponent implements OnInit {
+export declare class EdgeComponent {
     protected injector: Injector;
     private selectionService;
     private flowSettingsService;
+    private flowStatusService;
+    private edgeRenderingService;
+    private connectionController;
     model: import("@angular/core").InputSignal<EdgeModel>;
     edgeTemplate: import("@angular/core").InputSignal<TemplateRef<EdgeContext> | undefined>;
     edgeLabelHtmlTemplate: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
-    protected markerStartUrl: import("@angular/core").Signal<string>;
-    protected markerEndUrl: import("@angular/core").Signal<string>;
-    protected edgeContext: EdgeContext;
-    ngOnInit(): void;
-    onEdgeMouseDown(): void;
+    protected isReconnecting: import("@angular/core").Signal<boolean>;
+    select(): void;
+    pull(): void;
+    protected startReconnection(event: Event, handle: HandleModel): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<EdgeComponent, "g[edge]", never, { "model": { "alias": "model"; "required": true; "isSignal": true; }; "edgeTemplate": { "alias": "edgeTemplate"; "required": false; "isSignal": true; }; "edgeLabelHtmlTemplate": { "alias": "edgeLabelHtmlTemplate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/vflow/components/edge-label/edge-label.component.d.ts

@@ -1,6 +1,7 @@
 import { AfterViewInit, ElementRef, TemplateRef } from '@angular/core';
 import { EdgeLabelModel } from '../../models/edge-label.model';
 import { EdgeModel } from '../../models/edge.model';
+import { HtmlEdgeLabelContext } from '../../interfaces/template-context.interface';
 import * as i0 from "@angular/core";
 export declare class EdgeLabelComponent implements AfterViewInit {
     private zone;
@@ -25,12 +26,7 @@ export declare class EdgeLabelComponent implements AfterViewInit {
     }>;
     protected edgeLabelStyle: import("@angular/core").Signal<Partial<CSSStyleDeclaration> | null>;
     ngAfterViewInit(): void;
-    protected getLabelContext(): {
-        $implicit: {
-            edge: import("ngx-vflow").Edge<unknown>;
-            label: import("ngx-vflow").EdgeLabel;
-        };
-    };
+    protected getLabelContext(): HtmlEdgeLabelContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeLabelComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<EdgeLabelComponent, "g[edgeLabel]", never, { "model": { "alias": "model"; "required": true; "isSignal": true; }; "edgeModel": { "alias": "edgeModel"; "required": true; "isSignal": true; }; "point": { "alias": "point"; "required": false; "isSignal": true; }; "htmlTemplate": { "alias": "htmlTemplate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -24,6 +24,7 @@ export declare class VflowComponent implements OnInit {
     private nodesChangeService;
     private edgesChangeService;
     private nodeRenderingService;
+    private edgeRenderingService;
     private flowSettingsService;
     private componentEventBusService;
     private keyboardService;
@@ -75,6 +76,10 @@ export declare class VflowComponent implements OnInit {
      * Raizing z-index for selected node
      */
     set elevateNodesOnSelect(value: boolean);
+    /**
+     * Raizing z-index for selected edge
+     */
+    set elevateEdgesOnSelect(value: boolean);
     /**
      * Nodes to render
      */
@@ -164,6 +169,6 @@ export declare class VflowComponent implements OnInit {
     protected trackEdges(idx: number, { edge }: EdgeModel): Edge<unknown>;
     private setInitialNodesOrder;
     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; "isSignal": true; }; "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; }; "nodes": { "alias": "nodes"; "required": true; }; "edges": { "alias": "edges"; "required": false; }; }, { "onComponentNodeEvent": "onComponentNodeEvent"; }, ["nodeTemplateDirective", "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; "isSignal": true; }; "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; }; "edges": { "alias": "edges"; "required": false; }; }, { "onComponentNodeEvent": "onComponentNodeEvent"; }, ["nodeTemplateDirective", "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 ngAcceptInputType_connection: i2.ConnectionSettings;
 }

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

@@ -1,5 +1,6 @@
-import { Connection } from '../interfaces/connection.interface';
+import { Connection, ReconnectionEvent } from '../interfaces/connection.interface';
 import { HandleModel } from '../models/handle.model';
+import { EdgeModel } from '../models/edge.model';
 import * as i0 from "@angular/core";
 export declare class ConnectionControllerDirective {
     private statusService;
@@ -15,11 +16,13 @@ export declare class ConnectionControllerDirective {
      * @todo add connect event and deprecate onConnect
      */
     readonly onConnect: import("@angular/core").OutputRef<Connection>;
+    readonly onReconnect: import("@angular/core").OutputRef<ReconnectionEvent>;
     protected isStrictMode: import("@angular/core").Signal<boolean>;
     startConnection(handle: HandleModel): void;
+    startReconnection(handle: HandleModel, oldEdge: EdgeModel): void;
     validateConnection(handle: HandleModel): void;
     resetValidateConnection(targetHandle: HandleModel): void;
     endConnection(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConnectionControllerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ConnectionControllerDirective, "[onConnect]", never, {}, { "onConnect": "onConnect"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ConnectionControllerDirective, "[onConnect], [onReconnect]", never, {}, { "onConnect": "onConnect"; "onReconnect": "onReconnect"; }, never, never, true, never>;
 }

package/lib/vflow/directives/selectable.directive.d.ts

@@ -4,8 +4,11 @@ export declare class SelectableDirective {
     private selectionService;
     private parentEdge;
     private parentNode;
-    protected onMousedown(): void;
+    private host;
+    protected selectOnEvent: import("rxjs").Subscription;
+    private select;
     private entity;
+    private getEvent$;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectableDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<SelectableDirective, "[selectable]", never, {}, {}, never, never, true, never>;
 }

package/lib/vflow/directives/template.directive.d.ts

@@ -1,28 +1,33 @@
 import { TemplateRef } from '@angular/core';
-import { EdgeContext } from '../interfaces/template-context.interface';
+import { ConnectionContext, EdgeContext, GroupNodeContext, HtmlEdgeLabelContext, NodeContext } from '../interfaces/template-context.interface';
 import * as i0 from "@angular/core";
 export declare class EdgeTemplateDirective {
     templateRef: TemplateRef<EdgeContext>;
+    static ngTemplateContextGuard(dir: EdgeTemplateDirective, ctx: unknown): ctx is EdgeContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeTemplateDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<EdgeTemplateDirective, "ng-template[edge]", never, {}, {}, never, never, true, never>;
 }
 export declare class ConnectionTemplateDirective {
     templateRef: TemplateRef<any>;
+    static ngTemplateContextGuard(dir: ConnectionTemplateDirective, ctx: unknown): ctx is ConnectionContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConnectionTemplateDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ConnectionTemplateDirective, "ng-template[connection]", never, {}, {}, never, never, true, never>;
 }
 export declare class EdgeLabelHtmlTemplateDirective {
     templateRef: TemplateRef<any>;
+    static ngTemplateContextGuard(dir: EdgeLabelHtmlTemplateDirective, ctx: unknown): ctx is HtmlEdgeLabelContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeLabelHtmlTemplateDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<EdgeLabelHtmlTemplateDirective, "ng-template[edgeLabelHtml]", never, {}, {}, never, never, true, never>;
 }
 export declare class NodeHtmlTemplateDirective {
     templateRef: TemplateRef<any>;
+    static ngTemplateContextGuard(dir: NodeHtmlTemplateDirective, ctx: unknown): ctx is NodeContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<NodeHtmlTemplateDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NodeHtmlTemplateDirective, "ng-template[nodeHtml]", never, {}, {}, never, never, true, never>;
 }
 export declare class GroupNodeTemplateDirective {
     templateRef: TemplateRef<any>;
+    static ngTemplateContextGuard(dir: GroupNodeTemplateDirective, ctx: unknown): ctx is GroupNodeContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<GroupNodeTemplateDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<GroupNodeTemplateDirective, "ng-template[groupNode]", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,6 +1,11 @@
+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/contextable.interface.d.ts

@@ -0,0 +1,5 @@
+export interface Contextable<T extends {
+    $implicit: unknown;
+}> {
+    context: T;
+}

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

@@ -15,4 +15,5 @@ export interface Edge<T = unknown> extends Connection {
         start?: Marker;
         end?: Marker;
     };
+    reconnectable?: boolean | 'source' | 'target';
 }

package/lib/vflow/interfaces/template-context.interface.d.ts

@@ -1,11 +1,47 @@
 import { Signal } from '@angular/core';
 import { Edge } from './edge.interface';
+import { HtmlTemplateEdgeLabel } from './edge-label.interface';
+import { Point } from './point.interface';
+import { HandleState } from '../models/handle.model';
 export interface EdgeContext {
     $implicit: {
-        edge: Edge;
+        edge: Edge<any>;
         path: Signal<string>;
         markerStart: Signal<string>;
         markerEnd: Signal<string>;
         selected: Signal<boolean>;
     };
 }
+export interface NodeContext {
+    $implicit: {
+        node: any;
+        selected: Signal<boolean>;
+    };
+}
+export interface GroupNodeContext {
+    $implicit: {
+        node: any;
+        selected: Signal<boolean>;
+        width: Signal<number>;
+        height: Signal<number>;
+    };
+}
+export interface ConnectionContext {
+    $implicit: {
+        path: Signal<string | null>;
+        marker: Signal<string>;
+    };
+}
+export interface HtmlEdgeLabelContext {
+    $implicit: {
+        edge: Edge<any>;
+        label: HtmlTemplateEdgeLabel<any>;
+    };
+}
+export interface HandleContext {
+    $implicit: {
+        point: Signal<Point>;
+        state: Signal<HandleState>;
+        node: any;
+    };
+}

package/lib/vflow/models/edge.model.d.ts

@@ -3,17 +3,40 @@ import { Edge, Curve, EdgeType } from '../interfaces/edge.interface';
 import { EdgeLabelModel } from './edge-label.model';
 import { NodeModel } from './node.model';
 import { FlowEntity } from '../interfaces/flow-entity.interface';
-export declare class EdgeModel implements FlowEntity {
+import { Contextable } from '../interfaces/contextable.interface';
+import { EdgeContext } from '../interfaces/template-context.interface';
+export declare class EdgeModel implements FlowEntity, Contextable<EdgeContext> {
     edge: Edge;
     source: import("@angular/core").WritableSignal<NodeModel<unknown> | undefined>;
     target: import("@angular/core").WritableSignal<NodeModel<unknown> | undefined>;
     curve: Curve;
     type: EdgeType;
+    reconnectable: boolean | 'source' | 'target';
     selected: import("@angular/core").WritableSignal<boolean>;
     selected$: import("rxjs").Observable<boolean>;
+    renderOrder: import("@angular/core").WritableSignal<number>;
     detached: import("@angular/core").Signal<boolean>;
     detached$: import("rxjs").Observable<boolean>;
     path: import("@angular/core").Signal<import("../interfaces/path-data.interface").PathData>;
+    sourceHandle: import("@angular/core").Signal<import("./handle.model").HandleModel | null>;
+    targetHandle: import("@angular/core").Signal<import("./handle.model").HandleModel | null>;
+    /**
+     * TODO: not reactive
+     */
+    markerStartUrl: import("@angular/core").Signal<string>;
+    /**
+     * TODO: not reactive
+     */
+    markerEndUrl: import("@angular/core").Signal<string>;
+    context: {
+        $implicit: {
+            edge: Edge<unknown>;
+            path: import("@angular/core").Signal<string>;
+            markerStart: import("@angular/core").Signal<string>;
+            markerEnd: import("@angular/core").Signal<string>;
+            selected: import("@angular/core").Signal<boolean>;
+        };
+    };
     edgeLabels: {
         [position in EdgeLabelPosition]?: EdgeLabelModel;
     };

package/lib/vflow/models/node.model.d.ts

@@ -3,7 +3,11 @@ import { DynamicNode, Node } from '../interfaces/node.interface';
 import { HandleModel } from './handle.model';
 import { FlowEntity } from '../interfaces/flow-entity.interface';
 import { Point } from '../interfaces/point.interface';
-export declare class NodeModel<T = unknown> implements FlowEntity {
+import { Contextable } from '../interfaces/contextable.interface';
+import { GroupNodeContext, NodeContext } from '../interfaces/template-context.interface';
+export declare class NodeModel<T = unknown> implements FlowEntity, Contextable<NodeContext | GroupNodeContext | {
+    $implicit: object;
+}> {
     node: Node<T> | DynamicNode<T>;
     private static defaultWidth;
     private static defaultHeight;
@@ -57,6 +61,9 @@ export declare class NodeModel<T = unknown> implements FlowEntity {
     resizable: import("@angular/core").WritableSignal<boolean>;
     resizing: import("@angular/core").WritableSignal<boolean>;
     resizerTemplate: import("@angular/core").WritableSignal<TemplateRef<unknown> | null>;
+    context: {
+        $implicit: {};
+    };
     private parentId;
     constructor(node: Node<T> | DynamicNode<T>);
     setPoint(point: Point): void;

package/lib/vflow/public-components/custom-template-edge/custom-template-edge.component.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+export declare class CustomTemplateEdgeComponent {
+    private edge;
+    private flowSettingsService;
+    private edgeRenderingService;
+    protected model: import("../../models/edge.model").EdgeModel;
+    protected context: {
+        edge: import("ngx-vflow").Edge<unknown>;
+        path: import("@angular/core").Signal<string>;
+        markerStart: import("@angular/core").Signal<string>;
+        markerEnd: import("@angular/core").Signal<string>;
+        selected: import("@angular/core").Signal<boolean>;
+    };
+    protected pull(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomTemplateEdgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomTemplateEdgeComponent, "g[customTemplateEdge]", never, {}, {}, never, ["*"], true, never>;
+}

package/lib/vflow/services/edge-rendering.service.d.ts

@@ -0,0 +1,10 @@
+import { EdgeModel } from '../models/edge.model';
+import * as i0 from "@angular/core";
+export declare class EdgeRenderingService {
+    private flowEntitiesService;
+    readonly edges: import("@angular/core").Signal<EdgeModel[]>;
+    private maxOrder;
+    pull(edge: EdgeModel): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EdgeRenderingService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<EdgeRenderingService>;
+}

package/lib/vflow/services/flow-settings.service.d.ts

@@ -4,6 +4,7 @@ import * as i0 from "@angular/core";
 export declare class FlowSettingsService {
     entitiesSelectable: WritableSignal<boolean>;
     elevateNodesOnSelect: WritableSignal<boolean>;
+    elevateEdgesOnSelect: WritableSignal<boolean>;
     /**
      * @see {VflowComponent.view}
      */

package/lib/vflow/services/flow-status.service.d.ts

@@ -1,6 +1,7 @@
 import { NodeModel } from '../models/node.model';
 import { HandleModel } from '../models/handle.model';
 import { ConnectionInternal } from '../interfaces/connection.internal.interface';
+import { EdgeModel } from '../models/edge.model';
 import * as i0 from "@angular/core";
 export interface FlowStatusIdle {
     state: 'idle';
@@ -20,13 +21,35 @@ export interface FlowStatusConnectionEnd {
     state: 'connection-end';
     payload: ConnectionInternal;
 }
-export type FlowStatus = FlowStatusIdle | FlowStatusConnectionStart | FlowStatusConnectionValidation | FlowStatusConnectionEnd;
+export interface FlowStatusReconnectionStart {
+    state: 'reconnection-start';
+    payload: Omit<ConnectionInternal, 'target' | 'targetHandle'> & {
+        oldEdge: EdgeModel;
+    };
+}
+export interface FlowStatusReconnectionValidation {
+    state: 'reconnection-validation';
+    payload: ConnectionInternal & {
+        valid: boolean;
+        oldEdge: EdgeModel;
+    };
+}
+export interface FlowStatusReconnectionEnd {
+    state: 'reconnection-end';
+    payload: ConnectionInternal & {
+        oldEdge: EdgeModel;
+    };
+}
+export type FlowStatus = FlowStatusIdle | FlowStatusConnectionStart | FlowStatusConnectionValidation | FlowStatusConnectionEnd | FlowStatusReconnectionStart | FlowStatusReconnectionValidation | FlowStatusReconnectionEnd;
 export declare class FlowStatusService {
     readonly status: import("@angular/core").WritableSignal<FlowStatus>;
     setIdleStatus(): void;
     setConnectionStartStatus(source: NodeModel, sourceHandle: HandleModel): void;
+    setReconnectionStartStatus(source: NodeModel, sourceHandle: HandleModel, oldEdge: EdgeModel): void;
     setConnectionValidationStatus(valid: boolean, source: NodeModel, target: NodeModel, sourceHandle: HandleModel, targetHandle: HandleModel): void;
+    setReconnectionValidationStatus(valid: boolean, source: NodeModel, target: NodeModel, sourceHandle: HandleModel, targetHandle: HandleModel, oldEdge: EdgeModel): void;
     setConnectionEndStatus(source: NodeModel, target: NodeModel, sourceHandle: HandleModel, targetHandle: HandleModel): void;
+    setReconnectionEndStatus(source: NodeModel, target: NodeModel, sourceHandle: HandleModel, targetHandle: HandleModel, oldEdge: EdgeModel): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FlowStatusService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<FlowStatusService>;
 }

package/lib/vflow/testing-utils/component-mocks/vflow-mock.component.d.ts

@@ -34,6 +34,7 @@ export declare class VflowMockComponent implements AsInterface<VflowComponent>,
         number
     ];
     elevateNodesOnSelect: boolean;
+    elevateEdgesOnSelect: boolean;
     readonly onComponentNodeEvent: import("@angular/core").OutputEmitterRef<any>;
     protected nodeTemplateDirective: import("@angular/core").Signal<NodeHtmlTemplateMockDirective | undefined>;
     protected groupNodeTemplateDirective: import("@angular/core").Signal<GroupNodeTemplateMockDirective | undefined>;
@@ -56,6 +57,6 @@ export declare class VflowMockComponent implements AsInterface<VflowComponent>,
     getDetachedEdges(): Edge[];
     protected createSignal<T>(value: T): WritableSignal<T>;
     static ɵfac: i0.ɵɵFactoryDeclaration<VflowMockComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VflowMockComponent, "vflow", never, { "nodes": { "alias": "nodes"; "required": true; }; "edges": { "alias": "edges"; "required": false; }; "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; "isSignal": true; }; "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; }; }, { "onComponentNodeEvent": "onComponentNodeEvent"; }, ["nodeTemplateDirective", "groupNodeTemplateDirective", "edgeTemplateDirective", "edgeLabelHtmlDirective", "connectionTemplateDirective"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VflowMockComponent, "vflow", never, { "nodes": { "alias": "nodes"; "required": true; }; "edges": { "alias": "edges"; "required": false; }; "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; "isSignal": true; }; "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; }; }, { "onComponentNodeEvent": "onComponentNodeEvent"; }, ["nodeTemplateDirective", "groupNodeTemplateDirective", "edgeTemplateDirective", "edgeLabelHtmlDirective", "connectionTemplateDirective"], ["*"], true, never>;
     static ngAcceptInputType_connection: i1.ConnectionSettings;
 }

package/lib/vflow/testing-utils/directive-mocks/connection-controller-mock.directive.d.ts

@@ -1,14 +1,16 @@
-import { Connection } from '../../interfaces/connection.interface';
+import { Connection, ReconnectionEvent } from '../../interfaces/connection.interface';
 import { AsInterface } from '../types';
 import { ConnectionControllerDirective } from '../../directives/connection-controller.directive';
 import { HandleModel } from '../../models/handle.model';
 import * as i0 from "@angular/core";
 export declare class ConnectionControllerMockDirective implements AsInterface<ConnectionControllerDirective> {
     readonly onConnect: import("@angular/core").OutputEmitterRef<Connection>;
+    readonly onReconnect: import("@angular/core").OutputEmitterRef<ReconnectionEvent>;
     startConnection(handle: HandleModel): void;
+    startReconnection(handle: HandleModel): void;
     validateConnection(handle: HandleModel): void;
     resetValidateConnection(targetHandle: HandleModel): void;
     endConnection(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConnectionControllerMockDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ConnectionControllerMockDirective, "[onConnect]", never, {}, { "onConnect": "onConnect"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ConnectionControllerMockDirective, "[onConnect]", never, {}, { "onConnect": "onConnect"; "onReconnect": "onReconnect"; }, never, never, true, never>;
 }

package/lib/vflow/vflow.d.ts

@@ -7,4 +7,5 @@ import { NodeToolbarComponent } from './public-components/node-toolbar/node-tool
 import { ResizableComponent } from './public-components/resizable/resizable.component';
 import { HandleComponent } from './public-components/handle/handle.component';
 import { ConnectionControllerDirective } from './directives/connection-controller.directive';
-export declare const Vflow: readonly [typeof VflowComponent, typeof HandleComponent, typeof ResizableComponent, typeof SelectableDirective, typeof MiniMapComponent, typeof NodeToolbarComponent, typeof DragHandleDirective, typeof ConnectionControllerDirective, typeof NodeHtmlTemplateDirective, typeof GroupNodeTemplateDirective, typeof EdgeLabelHtmlTemplateDirective, typeof EdgeTemplateDirective, typeof ConnectionTemplateDirective, typeof HandleTemplateDirective];
+import { CustomTemplateEdgeComponent } from '../../public-api';
+export declare const Vflow: readonly [typeof VflowComponent, typeof HandleComponent, typeof ResizableComponent, typeof SelectableDirective, typeof MiniMapComponent, typeof NodeToolbarComponent, typeof CustomTemplateEdgeComponent, typeof DragHandleDirective, typeof ConnectionControllerDirective, typeof NodeHtmlTemplateDirective, typeof GroupNodeTemplateDirective, typeof EdgeLabelHtmlTemplateDirective, typeof EdgeTemplateDirective, typeof ConnectionTemplateDirective, typeof HandleTemplateDirective];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-vflow",
-  "version": "1.4.2",
+  "version": "1.6.0",
   "license": "MIT",
   "homepage": "https://www.ngx-vflow.org/",
   "author": "Artem Mangilev",

package/public-api.d.ts

@@ -24,6 +24,7 @@ export * from './lib/vflow/public-components/custom-dynamic-node/custom-dynamic-
 export * from './lib/vflow/public-components/resizable/resizable.component';
 export * from './lib/vflow/public-components/minimap/minimap.component';
 export * from './lib/vflow/public-components/node-toolbar/node-toolbar.component';
+export * from './lib/vflow/public-components/custom-template-edge/custom-template-edge.component';
 export * from './lib/vflow/directives/template.directive';
 export * from './lib/vflow/directives/connection-controller.directive';
 export * from './lib/vflow/directives/changes-controller.directive';