ngx-vflow 1.4.1 → 1.5.0

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

@@ -1,19 +1,27 @@
-import { Injector, OnInit, TemplateRef } from '@angular/core';
+import { ElementRef, Injector, OnInit, 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 {
     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>;
+    interactiveEdgeRef: import("@angular/core").Signal<ElementRef<Element>>;
     protected markerStartUrl: import("@angular/core").Signal<string>;
     protected markerEndUrl: import("@angular/core").Signal<string>;
+    protected isReconnecting: import("@angular/core").Signal<boolean>;
     protected edgeContext: EdgeContext;
     ngOnInit(): void;
-    onEdgeMouseDown(): void;
+    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/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/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/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/models/edge.model.d.ts

@@ -9,11 +9,15 @@ export declare class EdgeModel implements FlowEntity {
     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>;
     edgeLabels: {
         [position in EdgeLabelPosition]?: EdgeLabelModel;
     };

package/lib/vflow/public-components/handle/handle.component.d.ts

@@ -1,10 +1,8 @@
-import { Injector, OnInit, TemplateRef } from '@angular/core';
+import { OnInit, TemplateRef } from '@angular/core';
 import { Position } from '../../types/position.type';
-import { HandleModel } from '../../models/handle.model';
-import { WithInjector } from '../../decorators/run-in-injection-context.decorator';
 import * as i0 from "@angular/core";
-export declare class HandleComponent implements OnInit, WithInjector {
-    injector: Injector;
+export declare class HandleComponent implements OnInit {
+    private injector;
     private handleService;
     private element;
     private destroyRef;
@@ -21,7 +19,6 @@ export declare class HandleComponent implements OnInit, WithInjector {
      */
     id: import("@angular/core").InputSignal<string | undefined>;
     template: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
-    model: HandleModel;
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<HandleComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<HandleComponent, "handle", never, { "position": { "alias": "position"; "required": true; "isSignal": true; }; "type": { "alias": "type"; "required": true; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "template": { "alias": "template"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;

package/lib/vflow/public-components/node-toolbar/node-toolbar.component.d.ts

@@ -6,7 +6,7 @@ export declare class NodeToolbarComponent implements OnInit, OnDestroy {
     private overlaysService;
     private nodeService;
     position: import("@angular/core").InputSignal<Position>;
-    toolbarContentTemplate: import("@angular/core").Signal<TemplateRef<unknown>>;
+    protected toolbarContentTemplate: import("@angular/core").Signal<TemplateRef<unknown>>;
     protected model: ToolbarModel;
     constructor();
     ngOnInit(): void;

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/handle-mock.component.d.ts

@@ -1,11 +1,14 @@
-import { TemplateRef } from '@angular/core';
+import { TemplateRef, OnInit } from '@angular/core';
 import { Position } from '../../types/position.type';
+import { HandleComponent } from '../../public-components/handle/handle.component';
+import { AsInterface } from '../types';
 import * as i0 from "@angular/core";
-export declare class HandleMockComponent {
+export declare class HandleMockComponent implements AsInterface<HandleComponent>, OnInit {
     position: import("@angular/core").InputSignal<Position>;
     type: import("@angular/core").InputSignal<"source" | "target">;
     id: import("@angular/core").InputSignal<string | undefined>;
     template: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<HandleMockComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<HandleMockComponent, "handle", never, { "position": { "alias": "position"; "required": true; "isSignal": true; }; "type": { "alias": "type"; "required": true; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "template": { "alias": "template"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -1,10 +1,13 @@
-import { MiniMapPosition } from '../../public-components/minimap/minimap.component';
+import { OnInit } from '@angular/core';
+import { MiniMapComponent, MiniMapPosition } from '../../public-components/minimap/minimap.component';
+import { AsInterface } from '../types';
 import * as i0 from "@angular/core";
-export declare class MiniMapMockComponent {
+export declare class MiniMapMockComponent implements AsInterface<MiniMapComponent>, OnInit {
     maskColor: import("@angular/core").InputSignal<string>;
     strokeColor: import("@angular/core").InputSignal<string>;
     position: import("@angular/core").InputSignal<MiniMapPosition>;
     scaleOnHover: import("@angular/core").InputSignal<boolean>;
+    ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MiniMapMockComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MiniMapMockComponent, "mini-map", never, { "maskColor": { "alias": "maskColor"; "required": false; "isSignal": true; }; "strokeColor": { "alias": "strokeColor"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "scaleOnHover": { "alias": "scaleOnHover"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -1,7 +1,12 @@
+import { OnInit, OnDestroy } from '@angular/core';
 import { Position } from '../../types/position.type';
+import { NodeToolbarComponent } from '../../public-components/node-toolbar/node-toolbar.component';
+import { AsInterface } from '../types';
 import * as i0 from "@angular/core";
-export declare class NodeToolbarMockComponent {
+export declare class NodeToolbarMockComponent implements AsInterface<NodeToolbarComponent>, OnInit, OnDestroy {
     position: import("@angular/core").InputSignal<Position>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NodeToolbarMockComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NodeToolbarMockComponent, "node-toolbar", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

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

@@ -1,8 +1,13 @@
+import { OnInit, AfterViewInit } from '@angular/core';
+import { ResizableComponent } from '../../public-components/resizable/resizable.component';
+import { AsInterface } from '../types';
 import * as i0 from "@angular/core";
-export declare class ResizableMockComponent {
+export declare class ResizableMockComponent implements AsInterface<ResizableComponent>, OnInit, AfterViewInit {
     resizable: import("@angular/core").InputSignal<boolean | "" | undefined>;
     resizerColor: import("@angular/core").InputSignal<string>;
     gap: import("@angular/core").InputSignal<number>;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ResizableMockComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ResizableMockComponent, "[resizable]", never, { "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "resizerColor": { "alias": "resizerColor"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

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

@@ -1,28 +1,40 @@
-import { WritableSignal } from '@angular/core';
+import { WritableSignal, OnInit } from '@angular/core';
 import { Node, DynamicNode } from '../../interfaces/node.interface';
 import { Edge } from '../../interfaces/edge.interface';
 import { Point } from '../../interfaces/point.interface';
 import { Background } from '../../types/background.type';
 import { Optimization } from '../../interfaces/optimization.interface';
 import { KeyboardShortcuts } from '../../types/keyboard-action.type';
-import { ConnectionSettings } from '../../interfaces/connection-settings.interface';
 import { ViewportState } from '../../interfaces/viewport.interface';
 import { NodeChange } from '../../types/node-change.type';
 import { EdgeChange } from '../../types/edge-change.type';
 import { FitViewOptions } from '../../interfaces/fit-view-options.interface';
 import { ConnectionTemplateMockDirective, EdgeLabelHtmlTemplateMockDirective, EdgeTemplateMockDirective, GroupNodeTemplateMockDirective, NodeHtmlTemplateMockDirective } from '../directive-mocks/template-mock.directive';
+import { VflowComponent } from '../../components/vflow/vflow.component';
+import { ConnectionModel } from '../../models/connection.model';
+import { AsInterface } from '../types';
 import * as i0 from "@angular/core";
-export declare class VflowMockComponent {
-    readonly nodes: import("@angular/core").InputSignal<Node[] | DynamicNode[]>;
-    readonly edges: import("@angular/core").InputSignal<Edge<unknown>[]>;
-    readonly view: import("@angular/core").InputSignal<[number, number] | "auto">;
-    readonly minZoom: import("@angular/core").InputSignal<number>;
-    readonly maxZoom: import("@angular/core").InputSignal<number>;
-    readonly background: import("@angular/core").InputSignal<string | Background>;
+import * as i1 from "../../interfaces/connection-settings.interface";
+export declare class VflowMockComponent implements AsInterface<VflowComponent>, OnInit {
+    readonly nodes: Node[] | DynamicNode[];
+    readonly edges: Edge[];
+    readonly view: [
+        number,
+        number
+    ] | 'auto';
+    readonly minZoom = 0.5;
+    readonly maxZoom = 3;
+    readonly background: Background | string;
     readonly optimization: import("@angular/core").InputSignal<Optimization>;
-    readonly entitiesSelectable: import("@angular/core").InputSignal<boolean>;
-    readonly keyboardShortcuts: import("@angular/core").InputSignal<KeyboardShortcuts>;
-    readonly connection: import("@angular/core").InputSignal<ConnectionSettings | undefined>;
+    readonly entitiesSelectable = true;
+    readonly keyboardShortcuts: KeyboardShortcuts;
+    readonly connection: ConnectionModel;
+    readonly snapGrid: [
+        number,
+        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>;
@@ -35,6 +47,7 @@ export declare class VflowMockComponent {
     viewportChange$: import("rxjs").Observable<ViewportState>;
     nodesChange$: import("rxjs").Observable<NodeChange[]>;
     edgesChange$: import("rxjs").Observable<EdgeChange[]>;
+    ngOnInit(): void;
     viewportTo(viewport: ViewportState): void;
     zoomTo(zoom: number): void;
     panTo(point: Point): void;
@@ -44,5 +57,6 @@ export declare class VflowMockComponent {
     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; "isSignal": true; }; "edges": { "alias": "edges"; "required": true; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "minZoom": { "alias": "minZoom"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; "optimization": { "alias": "optimization"; "required": false; "isSignal": true; }; "entitiesSelectable": { "alias": "entitiesSelectable"; "required": false; "isSignal": true; }; "keyboardShortcuts": { "alias": "keyboardShortcuts"; "required": false; "isSignal": true; }; "connection": { "alias": "connection"; "required": false; "isSignal": true; }; }, { "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,7 +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 {
+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/testing-utils/directive-mocks/drag-handle-mock.directive.d.ts

@@ -1,5 +1,7 @@
+import { AsInterface } from '../types';
+import { DragHandleDirective } from '../../directives/drag-handle.directive';
 import * as i0 from "@angular/core";
-export declare class DragHandleMockDirective {
+export declare class DragHandleMockDirective implements AsInterface<DragHandleDirective> {
     static ɵfac: i0.ɵɵFactoryDeclaration<DragHandleMockDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DragHandleMockDirective, "[dragHandle]", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,5 +1,7 @@
+import { AsInterface } from '../types';
+import { SelectableDirective } from '../../directives/selectable.directive';
 import * as i0 from "@angular/core";
-export declare class SelectableMockDirective {
+export declare class SelectableMockDirective implements AsInterface<SelectableDirective> {
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectableMockDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<SelectableMockDirective, "[selectable]", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,31 +1,33 @@
 import { TemplateRef } from '@angular/core';
+import { ConnectionTemplateDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, HandleTemplateDirective, NodeHtmlTemplateDirective } from '../../directives/template.directive';
+import { AsInterface } from '../types';
 import * as i0 from "@angular/core";
-export declare class EdgeTemplateMockDirective {
+export declare class EdgeTemplateMockDirective implements AsInterface<EdgeTemplateDirective> {
     templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeTemplateMockDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<EdgeTemplateMockDirective, "ng-template[edge]", never, {}, {}, never, never, true, never>;
 }
-export declare class ConnectionTemplateMockDirective {
+export declare class ConnectionTemplateMockDirective implements AsInterface<ConnectionTemplateDirective> {
     templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConnectionTemplateMockDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ConnectionTemplateMockDirective, "ng-template[connection]", never, {}, {}, never, never, true, never>;
 }
-export declare class EdgeLabelHtmlTemplateMockDirective {
+export declare class EdgeLabelHtmlTemplateMockDirective implements AsInterface<EdgeLabelHtmlTemplateDirective> {
     templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeLabelHtmlTemplateMockDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<EdgeLabelHtmlTemplateMockDirective, "ng-template[edgeLabelHtml]", never, {}, {}, never, never, true, never>;
 }
-export declare class NodeHtmlTemplateMockDirective {
+export declare class NodeHtmlTemplateMockDirective implements AsInterface<NodeHtmlTemplateDirective> {
     templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NodeHtmlTemplateMockDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NodeHtmlTemplateMockDirective, "ng-template[nodeHtml]", never, {}, {}, never, never, true, never>;
 }
-export declare class GroupNodeTemplateMockDirective {
+export declare class GroupNodeTemplateMockDirective implements AsInterface<GroupNodeTemplateDirective> {
     templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<GroupNodeTemplateMockDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<GroupNodeTemplateMockDirective, "ng-template[groupNode]", never, {}, {}, never, never, true, never>;
 }
-export declare class HandleTemplateMockDirective {
+export declare class HandleTemplateMockDirective implements AsInterface<HandleTemplateDirective> {
     templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<HandleTemplateMockDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<HandleTemplateMockDirective, "ng-template[handle]", never, {}, {}, never, never, true, never>;

package/lib/vflow/testing-utils/types.d.ts

@@ -0,0 +1 @@
+export type AsInterface<T> = Pick<T, keyof T>;

package/package.json

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

package/esm2022/lib/vflow/decorators/run-in-injection-context.decorator.mjs

@@ -1,18 +0,0 @@
-import { runInInjectionContext } from '@angular/core';
-export function InjectionContext(target, key, descriptor) {
-    const originalMethod = descriptor.value;
-    descriptor.value = function (...args) {
-        if (implementsWithInjector(this)) {
-            return runInInjectionContext(this.injector, () => originalMethod.apply(this, args));
-        }
-        else {
-            throw new Error('Class that contains decorated method must extends WithInjectorDirective class');
-        }
-    };
-    // Return the modified descriptor
-    return descriptor;
-}
-const implementsWithInjector = (instance) => {
-    return 'injector' in instance && 'get' in instance.injector;
-};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnVuLWluLWluamVjdGlvbi1jb250ZXh0LmRlY29yYXRvci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC12Zmxvdy1saWIvc3JjL2xpYi92Zmxvdy9kZWNvcmF0b3JzL3J1bi1pbi1pbmplY3Rpb24tY29udGV4dC5kZWNvcmF0b3IudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFZLHFCQUFxQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRWhFLE1BQU0sVUFBVSxnQkFBZ0IsQ0FBQyxNQUFXLEVBQUUsR0FBVyxFQUFFLFVBQThCO0lBQ3ZGLE1BQU0sY0FBYyxHQUFHLFVBQVUsQ0FBQyxLQUFLLENBQUM7SUFFeEMsVUFBVSxDQUFDLEtBQUssR0FBRyxVQUFVLEdBQUcsSUFBVztRQUN6QyxJQUFJLHNCQUFzQixDQUFDLElBQUksQ0FBQyxFQUFFLENBQUM7WUFDakMsT0FBTyxxQkFBcUIsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLEdBQUcsRUFBRSxDQUFDLGNBQWMsQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxDQUFDLENBQUM7UUFDdEYsQ0FBQzthQUFNLENBQUM7WUFDTixNQUFNLElBQUksS0FBSyxDQUFDLCtFQUErRSxDQUFDLENBQUM7UUFDbkcsQ0FBQztJQUNILENBQUMsQ0FBQztJQUVGLGlDQUFpQztJQUNqQyxPQUFPLFVBQVUsQ0FBQztBQUNwQixDQUFDO0FBTUQsTUFBTSxzQkFBc0IsR0FBRyxDQUFDLFFBQWdCLEVBQTRCLEVBQUU7SUFDNUUsT0FBTyxVQUFVLElBQUksUUFBUSxJQUFJLEtBQUssSUFBSyxRQUFRLENBQUMsUUFBcUIsQ0FBQztBQUM1RSxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RvciwgcnVuSW5JbmplY3Rpb25Db250ZXh0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmV4cG9ydCBmdW5jdGlvbiBJbmplY3Rpb25Db250ZXh0KHRhcmdldDogYW55LCBrZXk6IHN0cmluZywgZGVzY3JpcHRvcjogUHJvcGVydHlEZXNjcmlwdG9yKSB7XG4gIGNvbnN0IG9yaWdpbmFsTWV0aG9kID0gZGVzY3JpcHRvci52YWx1ZTtcblxuICBkZXNjcmlwdG9yLnZhbHVlID0gZnVuY3Rpb24gKC4uLmFyZ3M6IGFueVtdKSB7XG4gICAgaWYgKGltcGxlbWVudHNXaXRoSW5qZWN0b3IodGhpcykpIHtcbiAgICAgIHJldHVybiBydW5JbkluamVjdGlvbkNvbnRleHQodGhpcy5pbmplY3RvciwgKCkgPT4gb3JpZ2luYWxNZXRob2QuYXBwbHkodGhpcywgYXJncykpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aHJvdyBuZXcgRXJyb3IoJ0NsYXNzIHRoYXQgY29udGFpbnMgZGVjb3JhdGVkIG1ldGhvZCBtdXN0IGV4dGVuZHMgV2l0aEluamVjdG9yRGlyZWN0aXZlIGNsYXNzJyk7XG4gICAgfVxuICB9O1xuXG4gIC8vIFJldHVybiB0aGUgbW9kaWZpZWQgZGVzY3JpcHRvclxuICByZXR1cm4gZGVzY3JpcHRvcjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBXaXRoSW5qZWN0b3Ige1xuICBpbmplY3RvcjogSW5qZWN0b3I7XG59XG5cbmNvbnN0IGltcGxlbWVudHNXaXRoSW5qZWN0b3IgPSAoaW5zdGFuY2U6IG9iamVjdCk6IGluc3RhbmNlIGlzIFdpdGhJbmplY3RvciA9PiB7XG4gIHJldHVybiAnaW5qZWN0b3InIGluIGluc3RhbmNlICYmICdnZXQnIGluIChpbnN0YW5jZS5pbmplY3RvciBhcyBJbmplY3Rvcik7XG59O1xuIl19

package/lib/vflow/decorators/run-in-injection-context.decorator.d.ts

@@ -1,5 +0,0 @@
-import { Injector } from '@angular/core';
-export declare function InjectionContext(target: any, key: string, descriptor: PropertyDescriptor): PropertyDescriptor;
-export interface WithInjector {
-    injector: Injector;
-}