ngx-vflow 1.1.1 → 1.2.0

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

@@ -5,6 +5,7 @@ import * as i0 from "@angular/core";
 export declare class EdgeLabelComponent implements AfterViewInit {
     private zone;
     private destroyRef;
+    private settingsService;
     model: import("@angular/core").InputSignal<EdgeLabelModel>;
     edgeModel: import("@angular/core").InputSignal<EdgeModel>;
     point: import("@angular/core").InputSignal<{
@@ -12,7 +13,7 @@ export declare class EdgeLabelComponent implements AfterViewInit {
         y: number;
     }>;
     htmlTemplate: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
-    edgeLabelWrapperRef: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
+    edgeLabelWrapperRef: import("@angular/core").Signal<ElementRef<Element>>;
     /**
      * Centered point of label
      *
@@ -22,11 +23,12 @@ export declare class EdgeLabelComponent implements AfterViewInit {
         x: number;
         y: number;
     }>;
+    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<unknown>;
+            label: import("ngx-vflow").EdgeLabel;
         };
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeLabelComponent, never>;

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

@@ -64,6 +64,13 @@ export declare class VflowComponent implements OnInit {
      */
     set connection(connection: ConnectionModel);
     get connection(): ConnectionModel;
+    /**
+     * Snap grid for node movement. Passes as [x, y]
+     */
+    set snapGrid(value: [
+        number,
+        number
+    ]);
     /**
      * Nodes to render
      */
@@ -153,6 +160,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; }; "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; }; "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/constants/magic-number-to-fix-glitch-in-chrome.constant.d.ts

@@ -0,0 +1 @@
+export declare const MAGIC_NUMBER_TO_FIX_GLITCH_IN_CHROME = 2;

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

@@ -1,6 +1,15 @@
-export type EdgeLabelType = 'html-template';
+/**
+ * @deprecated not used anymore internally
+ */
+export type EdgeLabelType = 'default' | 'html-template';
 export type EdgeLabelPosition = 'start' | 'center' | 'end';
-export interface EdgeLabel<T = unknown> {
-    type: EdgeLabelType;
+export type EdgeLabel<T = unknown> = DefaultEdgeLabel | HtmlTemplateEdgeLabel<T>;
+export interface DefaultEdgeLabel {
+    type: 'default';
+    text: string;
+    style?: Partial<CSSStyleDeclaration>;
+}
+export interface HtmlTemplateEdgeLabel<T = unknown> {
+    type: 'html-template';
     data?: T;
 }

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

@@ -31,6 +31,8 @@ export declare class NodeModel<T = unknown> implements FlowEntity {
     }>;
     styleWidth: Signal<string>;
     styleHeight: Signal<string>;
+    foWidth: Signal<number>;
+    foHeight: Signal<number>;
     renderOrder: import("@angular/core").WritableSignal<number>;
     selected: import("@angular/core").WritableSignal<boolean>;
     selected$: import("rxjs").Observable<boolean>;

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

@@ -2,6 +2,7 @@ import { NodeModel } from '../models/node.model';
 import * as i0 from "@angular/core";
 export declare class DraggableService {
     private entitiesService;
+    private settingsService;
     /**
      * Enable draggable behavior for element.
      *
@@ -30,6 +31,14 @@ export declare class DraggableService {
      */
     private getDragBehavior;
     private getDragNodes;
+    /**
+     * @todo make it unit testable
+     */
+    private moveNode;
+    /**
+     * @todo make it unit testable
+     */
+    private alignToGrid;
     static ɵfac: i0.ɵɵFactoryDeclaration<DraggableService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DraggableService>;
 }

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

@@ -18,6 +18,7 @@ export declare class FlowSettingsService {
     minZoom: WritableSignal<number>;
     maxZoom: WritableSignal<number>;
     background: WritableSignal<Background>;
+    snapGrid: WritableSignal<[number, number]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FlowSettingsService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<FlowSettingsService>;
 }

package/package.json

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