ngx-vflow 1.4.2 → 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/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/package.json

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