ngx-vflow 1.15.0 → 1.16.0

package/lib/vflow/components/alignment-helper/alignment-helper.component.d.ts

@@ -0,0 +1,21 @@
+import { Box } from '../../interfaces/box';
+import * as i0 from "@angular/core";
+interface Intersection {
+    lines: (Box & {
+        isCenter: boolean;
+    })[];
+    snappedX: number;
+    snappedY: number;
+}
+export declare class AlignmentHelperComponent {
+    private nodeRenderingService;
+    private flowStatus;
+    readonly tolerance: import("@angular/core").InputSignal<number>;
+    readonly lineColor: import("@angular/core").InputSignal<string>;
+    protected isNodeDragging: import("@angular/core").Signal<boolean>;
+    protected readonly intersections: import("@angular/core").Signal<Intersection>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<AlignmentHelperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AlignmentHelperComponent, "g[alignmentHelper]", never, { "tolerance": { "alias": "tolerance"; "required": false; "isSignal": true; }; "lineColor": { "alias": "lineColor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export {};

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

@@ -15,6 +15,7 @@ import { FitViewOptions } from '../../interfaces/fit-view-options.interface';
 import { Optimization } from '../../interfaces/optimization.interface';
 import { KeyboardShortcuts } from '../../types/keyboard-action.type';
 import { IntersectingNodesOptions } from '../../interfaces/intersecting-nodes-options.interface';
+import { AlignmentHelperSettings } from '../../interfaces/alignment-helper-settings.interface';
 import * as i0 from "@angular/core";
 import * as i1 from "../../directives/changes-controller.directive";
 import * as i2 from "../../interfaces/connection-settings.interface";
@@ -85,6 +86,7 @@ export declare class VflowComponent {
      * Nodes to render
      */
     set nodes(newNodes: Node[] | DynamicNode[]);
+    alignmentHelper: import("@angular/core").InputSignal<boolean | AlignmentHelperSettings>;
     protected nodeModels: import("@angular/core").Signal<NodeModel<unknown>[]>;
     protected groups: import("@angular/core").Signal<NodeModel<unknown>[]>;
     protected nonGroups: import("@angular/core").Signal<NodeModel<unknown>[]>;
@@ -202,6 +204,6 @@ export declare class VflowComponent {
     protected trackNodes(idx: number, { rawNode: node }: NodeModel): Node<unknown> | DynamicNode<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; }; "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; }; "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 ngAcceptInputType_connection: i2.ConnectionSettings;
 }

package/lib/vflow/interfaces/alignment-helper-settings.interface.d.ts

@@ -0,0 +1,4 @@
+export interface AlignmentHelperSettings {
+    tolerance: number;
+    lineColor: string;
+}

package/lib/vflow/interfaces/rect.d.ts

@@ -4,3 +4,10 @@ export interface Rect {
     width: number;
     height: number;
 }
+export interface RectWithSides extends Rect {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+export declare function rectToRectWithSides(rect: Rect): RectWithSides;

package/lib/vflow/services/draggable.service.d.ts

@@ -3,6 +3,7 @@ import * as i0 from "@angular/core";
 export declare class DraggableService {
     private entitiesService;
     private settingsService;
+    private flowStatusService;
     /**
      * Enable draggable behavior for element.
      *

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

@@ -40,7 +40,19 @@ export interface FlowStatusReconnectionEnd {
         oldEdge: EdgeModel;
     };
 }
-export type FlowStatus = FlowStatusIdle | FlowStatusConnectionStart | FlowStatusConnectionValidation | FlowStatusConnectionEnd | FlowStatusReconnectionStart | FlowStatusReconnectionValidation | FlowStatusReconnectionEnd;
+export interface FlowStatusNodeDragStart {
+    state: 'node-drag-start';
+    payload: {
+        node: NodeModel;
+    };
+}
+export interface FlowStatusNodeDragEnd {
+    state: 'node-drag-end';
+    payload: {
+        node: NodeModel;
+    };
+}
+export type FlowStatus = FlowStatusIdle | FlowStatusConnectionStart | FlowStatusConnectionValidation | FlowStatusConnectionEnd | FlowStatusReconnectionStart | FlowStatusReconnectionValidation | FlowStatusReconnectionEnd | FlowStatusNodeDragStart | FlowStatusNodeDragEnd;
 export declare class FlowStatusService {
     readonly status: import("@angular/core").WritableSignal<FlowStatus>;
     setIdleStatus(): void;
@@ -50,6 +62,10 @@ export declare class FlowStatusService {
     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;
+    setNodeDragStartStatus(node: NodeModel): void;
+    setNodeDragEndStatus(node: NodeModel): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FlowStatusService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<FlowStatusService>;
 }
+export declare function isNodeDragStartStatus(params: FlowStatus): params is FlowStatusNodeDragStart;
+export declare function isNodeDragEndStatus(params: FlowStatus): params is FlowStatusNodeDragEnd;

package/package.json

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

package/public-api.d.ts

@@ -14,6 +14,7 @@ export * from './lib/vflow/interfaces/optimization.interface';
 export * from './lib/vflow/interfaces/intersecting-nodes-options.interface';
 export * from './lib/vflow/interfaces/curve-factory.interface';
 export * from './lib/vflow/interfaces/node-preview.interface';
+export * from './lib/vflow/interfaces/alignment-helper-settings.interface';
 export * from './lib/vflow/types/node-change.type';
 export * from './lib/vflow/types/edge-change.type';
 export * from './lib/vflow/types/position.type';

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

@@ -1,5 +1,5 @@
 import { WritableSignal, OnInit } from '@angular/core';
-import { Node, DynamicNode, Edge, SpacePoint, Point, Background, KeyboardShortcuts, ViewportState, NodeChange, EdgeChange, FitViewOptions, VflowComponent, IntersectingNodesOptions, ɵConnectionModel as ConnectionModel } from 'ngx-vflow';
+import { Node, DynamicNode, Edge, SpacePoint, Point, Background, KeyboardShortcuts, ViewportState, NodeChange, EdgeChange, FitViewOptions, VflowComponent, IntersectingNodesOptions, ɵConnectionModel as ConnectionModel, AlignmentHelperSettings } from 'ngx-vflow';
 import { ConnectionTemplateMockDirective, EdgeLabelHtmlTemplateMockDirective, EdgeTemplateMockDirective, GroupNodeTemplateMockDirective, NodeHtmlTemplateMockDirective } from '../directive-mocks/template-mock.directive';
 import { AsInterface } from '../types';
 import * as i0 from "@angular/core";
@@ -24,6 +24,7 @@ export declare class VflowMockComponent implements AsInterface<VflowComponent>,
     ];
     elevateNodesOnSelect: boolean;
     elevateEdgesOnSelect: boolean;
+    alignmentHelper: import("@angular/core").InputSignal<boolean | AlignmentHelperSettings>;
     readonly onComponentNodeEvent: import("@angular/core").OutputEmitterRef<any>;
     protected nodeTemplateDirective: import("@angular/core").Signal<NodeHtmlTemplateMockDirective | undefined>;
     protected groupNodeTemplateDirective: import("@angular/core").Signal<GroupNodeTemplateMockDirective | undefined>;
@@ -55,6 +56,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; }; "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 ɵ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; }; "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; }; "alignmentHelper": { "alias": "alignmentHelper"; "required": false; "isSignal": true; }; }, { "onComponentNodeEvent": "onComponentNodeEvent"; }, ["nodeTemplateDirective", "groupNodeTemplateDirective", "edgeTemplateDirective", "edgeLabelHtmlDirective", "connectionTemplateDirective"], ["*"], true, never>;
     static ngAcceptInputType_connection: i1.ConnectionSettings;
 }