ngx-vflow 0.9.1 → 0.11.0

package/lib/vflow/components/custom-node-base/custom-node-base.component.d.ts

@@ -0,0 +1,21 @@
+import { DestroyRef, OnInit } from "@angular/core";
+import { ComponentDynamicNode, ComponentNode } from "../../interfaces/node.interface";
+import * as i0 from "@angular/core";
+export declare abstract class CustomNodeBaseComponent<T = unknown> implements OnInit {
+    private eventBus;
+    protected destroyRef: DestroyRef;
+    /**
+     * Reference to node bound to this component
+     */
+    protected node: ComponentNode | ComponentDynamicNode;
+    set _selected(value: boolean);
+    /**
+     * Signal with selected state of node
+     */
+    selected: import("@angular/core").WritableSignal<boolean>;
+    data: import("@angular/core").WritableSignal<T | undefined>;
+    ngOnInit(): void;
+    private trackEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomNodeBaseComponent<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CustomNodeBaseComponent<any>, never, never, { "_selected": { "alias": "_selected"; "required": false; }; }, {}, never, never, false, never>;
+}

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

@@ -15,7 +15,8 @@ export declare class NodeComponent implements OnInit, AfterViewInit, OnDestroy,
     private hostRef;
     private connectionController;
     nodeModel: NodeModel;
-    nodeHtmlTemplate?: TemplateRef<any>;
+    nodeTemplate?: TemplateRef<any>;
+    groupNodeTemplate?: TemplateRef<any>;
     nodeContentRef: ElementRef<SVGGraphicsElement>;
     htmlWrapperRef: ElementRef<HTMLDivElement>;
     protected showMagnet: import("@angular/core").Signal<boolean>;
@@ -31,5 +32,5 @@ export declare class NodeComponent implements OnInit, AfterViewInit, OnDestroy,
     protected pullNode(): void;
     protected selectNode(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NodeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NodeComponent, "g[node]", never, { "nodeModel": { "alias": "nodeModel"; "required": false; }; "nodeHtmlTemplate": { "alias": "nodeHtmlTemplate"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NodeComponent, "g[node]", never, { "nodeModel": { "alias": "nodeModel"; "required": false; }; "nodeTemplate": { "alias": "nodeTemplate"; "required": false; }; "groupNodeTemplate": { "alias": "groupNodeTemplate"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -1,10 +1,10 @@
-import { Signal } from '@angular/core';
-import { Node } from '../../interfaces/node.interface';
+import { OnInit, Signal } from '@angular/core';
+import { DynamicNode, Node } from '../../interfaces/node.interface';
 import { MapContextDirective } from '../../directives/map-context.directive';
 import { NodeModel } from '../../models/node.model';
 import { Edge } from '../../interfaces/edge.interface';
 import { EdgeModel } from '../../models/edge.model';
-import { ConnectionTemplateDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, NodeHtmlTemplateDirective } from '../../directives/template.directive';
+import { ConnectionTemplateDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, NodeHtmlTemplateDirective } from '../../directives/template.directive';
 import { HandlePositions } from '../../interfaces/handle-positions.interface';
 import { Point } from '../../interfaces/point.interface';
 import { ViewportState } from '../../interfaces/viewport.interface';
@@ -14,11 +14,12 @@ import { EdgeChange } from '../../types/edge-change.type';
 import { Background } from '../../types/background.type';
 import { SpacePointContextDirective } from '../../directives/space-point-context.directive';
 import { FitViewOptions } from '../../interfaces/fit-view-options.interface';
+import { Optimization } from '../../interfaces/optimization.interface';
 import * as i0 from "@angular/core";
 import * as i1 from "../../directives/connection-controller.directive";
 import * as i2 from "../../directives/changes-controller.directive";
 import * as i3 from "../../interfaces/connection-settings.interface";
-export declare class VflowComponent {
+export declare class VflowComponent implements OnInit {
     private viewportService;
     private flowEntitiesService;
     private nodesChangeService;
@@ -59,6 +60,7 @@ export declare class VflowComponent {
      * Background for flow
      */
     background: Background | string;
+    optimization: Optimization;
     /**
      * Global rule if you can or can't select entities
      */
@@ -73,7 +75,7 @@ export declare class VflowComponent {
     /**
      * Nodes to render
      */
-    set nodes(newNodes: Node[]);
+    set nodes(newNodes: Node[] | DynamicNode[]);
     protected nodeModels: Signal<NodeModel<unknown>[]>;
     /**
      * Edges to render
@@ -86,7 +88,8 @@ export declare class VflowComponent {
      * @experimental
      */
     onComponentNodeEvent: any;
-    protected nodeHtmlDirective?: NodeHtmlTemplateDirective;
+    protected nodeTemplateDirective?: NodeHtmlTemplateDirective;
+    protected groupNodeTemplateDirective?: GroupNodeTemplateDirective;
     protected edgeTemplateDirective?: EdgeTemplateDirective;
     protected edgeLabelHtmlDirective?: EdgeLabelHtmlTemplateDirective;
     protected connectionTemplateDirective?: ConnectionTemplateDirective;
@@ -117,6 +120,7 @@ export declare class VflowComponent {
      */
     readonly edgesChange$: import("rxjs").Observable<EdgeChange[]>;
     protected markers: Signal<Map<number, import("ngx-vflow").Marker>>;
+    ngOnInit(): void;
     /**
      * Change viewport to specified state
      *
@@ -141,7 +145,7 @@ export declare class VflowComponent {
      *
      * @param id node id
      */
-    getNode<T = unknown>(id: string): Node<T> | undefined;
+    getNode<T = unknown>(id: string): Node<T> | DynamicNode<T> | undefined;
     /**
      * Sync method to get detached edges
      */
@@ -150,9 +154,10 @@ export declare class VflowComponent {
      * Convert point received from document to point on the flow
      */
     documentPointToFlowPoint(point: Point): Point;
-    protected trackNodes(idx: number, { node }: NodeModel): Node<unknown>;
+    protected trackNodes(idx: number, { node }: NodeModel): Node<unknown> | DynamicNode<unknown>;
     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; }; "handlePositions": { "alias": "handlePositions"; "required": false; }; "background": { "alias": "background"; "required": false; }; "entitiesSelectable": { "alias": "entitiesSelectable"; "required": false; }; "connection": { "alias": "connection"; "required": false; }; "nodes": { "alias": "nodes"; "required": true; }; "edges": { "alias": "edges"; "required": false; }; }, { "onComponentNodeEvent": "onComponentNodeEvent"; }, ["nodeHtmlDirective", "edgeTemplateDirective", "edgeLabelHtmlDirective", "connectionTemplateDirective"], never, false, [{ directive: typeof i1.ConnectionControllerDirective; inputs: {}; outputs: { "onConnect": "onConnect"; }; }, { directive: typeof i2.ChangesControllerDirective; inputs: {}; outputs: { "onNodesChange": "onNodesChange"; "onNodesChange.position": "onNodesChange.position"; "onNodesChange.position.single": "onNodesChange.position.single"; "onNodesChange.position.many": "onNodesChange.position.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; }; "handlePositions": { "alias": "handlePositions"; "required": false; }; "background": { "alias": "background"; "required": false; }; "optimization": { "alias": "optimization"; "required": false; }; "entitiesSelectable": { "alias": "entitiesSelectable"; "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, false, [{ directive: typeof i1.ConnectionControllerDirective; inputs: {}; outputs: { "onConnect": "onConnect"; }; }, { directive: typeof i2.ChangesControllerDirective; inputs: {}; outputs: { "onNodesChange": "onNodesChange"; "onNodesChange.position": "onNodesChange.position"; "onNodesChange.position.single": "onNodesChange.position.single"; "onNodesChange.position.many": "onNodesChange.position.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: i3.ConnectionSettings;
 }

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

@@ -21,6 +21,11 @@ export declare class NodeHtmlTemplateDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<NodeHtmlTemplateDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NodeHtmlTemplateDirective, "ng-template[nodeHtml]", never, {}, {}, never, never, false, never>;
 }
+export declare class GroupNodeTemplateDirective {
+    templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GroupNodeTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<GroupNodeTemplateDirective, "ng-template[groupNode]", never, {}, {}, never, never, false, never>;
+}
 export declare class HandleTemplateDirective {
     templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<HandleTemplateDirective, never>;

package/lib/vflow/interfaces/component-node-event.interface.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from "@angular/core";
 import { CustomNodeComponent } from "../public-components/custom-node.component";
+import { CustomDynamicNodeComponent } from "../public-components/custom-dynamic-node.component";
 type EventInfo<T> = T extends EventEmitter<infer U> ? U : never;
 type EventKeys<T> = {
     [K in keyof T]: T[K] extends EventEmitter<any> ? K : never;
@@ -19,7 +20,7 @@ type EventsFromComponent<T> = EventShape<T, EventKeys<T>>;
  *
  * @experimental
  */
-export type ComponentNodeEvent<T extends CustomNodeComponent[]> = {
+export type ComponentNodeEvent<T extends (CustomNodeComponent | CustomDynamicNodeComponent)[]> = {
     nodeId: string;
 } & {
     [I in keyof T]: EventsFromComponent<T[I]>;

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

@@ -1,23 +1,82 @@
-import { Type } from "@angular/core";
+import { Type, WritableSignal } from "@angular/core";
 import { Point } from "./point.interface";
 import { CustomNodeComponent } from "../public-components/custom-node.component";
-export type Node<T = unknown> = SharedNode & (DefaultNode | HtmlTemplateNode<T> | ComponentNode<T>);
+import { CustomDynamicNodeComponent } from "../public-components/custom-dynamic-node.component";
+export type Node<T = unknown> = DefaultNode | HtmlTemplateNode<T> | ComponentNode<T> | DefaultGroupNode | TemplateGroupNode<T>;
+export type DynamicNode<T = unknown> = DefaultDynamicNode | HtmlTemplateDynamicNode<T> | ComponentDynamicNode<T> | DefaultDynamicGroupNode | TemplateDynamicGroupNode<T>;
 export interface SharedNode {
     id: string;
     point: Point;
     draggable?: boolean;
+    parentId?: string | null;
 }
-export interface DefaultNode {
+export interface SharedDynamicNode {
+    id: string;
+    point: WritableSignal<Point>;
+    draggable?: WritableSignal<boolean>;
+    parentId?: WritableSignal<string | null>;
+}
+export interface DefaultNode extends SharedNode {
     type: 'default';
     text?: string;
     width?: number;
     height?: number;
 }
-export interface HtmlTemplateNode<T = unknown> {
+export interface DefaultDynamicNode extends SharedDynamicNode {
+    type: 'default';
+    text?: WritableSignal<string>;
+    width?: WritableSignal<number>;
+    height?: WritableSignal<number>;
+}
+export interface HtmlTemplateNode<T = unknown> extends SharedNode {
+    type: 'html-template';
+    data?: T;
+}
+export interface HtmlTemplateDynamicNode<T = unknown> extends SharedDynamicNode {
     type: 'html-template';
+    data?: WritableSignal<T>;
+}
+export interface DefaultGroupNode extends SharedNode {
+    type: 'default-group';
+    width: number;
+    height: number;
+    color?: string;
+}
+export interface DefaultDynamicGroupNode extends SharedDynamicNode {
+    type: 'default-group';
+    width: WritableSignal<number>;
+    height: WritableSignal<number>;
+    color?: WritableSignal<string>;
+}
+export interface TemplateGroupNode<T> extends SharedNode {
+    type: 'template-group';
+    width: number;
+    height: number;
     data?: T;
 }
-export interface ComponentNode<T = unknown> {
+export interface TemplateDynamicGroupNode<T> extends SharedDynamicNode {
+    type: 'template-group';
+    width: WritableSignal<number>;
+    height: WritableSignal<number>;
+    data?: WritableSignal<T>;
+}
+export interface ComponentNode<T = unknown> extends SharedNode {
     type: Type<CustomNodeComponent<T>>;
     data?: T;
 }
+export interface ComponentDynamicNode<T = unknown> extends SharedDynamicNode {
+    type: Type<CustomDynamicNodeComponent<T>>;
+    data?: WritableSignal<T>;
+}
+export declare function isStaticNode<T>(node: Node | DynamicNode): node is Node<T>;
+export declare function isDynamicNode<T>(node: Node | DynamicNode): node is DynamicNode<T>;
+export declare function isComponentStaticNode<T>(node: Node): node is ComponentNode<T>;
+export declare function isComponentDynamicNode<T>(node: DynamicNode): node is ComponentDynamicNode<T>;
+export declare function isTemplateStaticNode<T>(node: Node): node is HtmlTemplateNode<T>;
+export declare function isTemplateDynamicNode<T>(node: DynamicNode): node is HtmlTemplateDynamicNode<T>;
+export declare function isDefaultStaticNode(node: Node): node is DefaultNode;
+export declare function isDefaultDynamicNode(node: DynamicNode): node is DefaultDynamicNode;
+export declare function isDefaultStaticGroupNode(node: Node): node is DefaultGroupNode;
+export declare function isDefaultDynamicGroupNode(node: DynamicNode): node is DefaultDynamicGroupNode;
+export declare function isTemplateStaticGroupNode<T>(node: Node): node is TemplateGroupNode<T>;
+export declare function isTemplateDynamicGroupNode<T>(node: DynamicNode): node is TemplateDynamicGroupNode<T>;

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

@@ -0,0 +1,3 @@
+export interface Optimization {
+    computeLayersOnInit: boolean;
+}

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

@@ -14,7 +14,23 @@ export declare class EdgeModel implements FlowEntity {
     selected$: import("rxjs").Observable<boolean>;
     detached: import("@angular/core").Signal<boolean>;
     detached$: import("rxjs").Observable<boolean>;
-    path: import("@angular/core").Signal<import("../interfaces/path-data.interface").PathData>;
+    path: import("@angular/core").Signal<{
+        path: string;
+        points: {
+            start: {
+                x: number;
+                y: number;
+            };
+            center: {
+                x: number;
+                y: number;
+            };
+            end: {
+                x: number;
+                y: number;
+            };
+        };
+    }>;
     edgeLabels: {
         [position in EdgeLabelPosition]?: EdgeLabelModel;
     };

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

@@ -41,7 +41,7 @@ export declare class HandleModel {
         x: number;
         y: number;
     }>;
-    parentReference: HTMLElement;
+    parentReference: Element;
     template: import("@angular/core").TemplateRef<any> | undefined;
     templateContext: {
         $implicit: {
@@ -54,4 +54,5 @@ export declare class HandleModel {
     };
     constructor(rawHandle: NodeHandle, parentNode: NodeModel);
     updateParent(): void;
+    private getParentSize;
 }

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

@@ -1,24 +1,19 @@
-import { Node } from '../interfaces/node.interface';
+import { Signal } from '@angular/core';
+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 {
-    node: Node<T>;
-    static defaultTypeSize: {
-        width: number;
-        height: number;
-    };
+    node: Node<T> | DynamicNode<T>;
+    private static defaultWidth;
+    private static defaultHeight;
+    private static defaultColor;
     private flowSettingsService;
-    private internalPoint$;
+    private entitiesService;
+    private internalPoint;
     private throttledPoint$;
-    point: import("@angular/core").Signal<{
-        x: number;
-        y: number;
-    }>;
-    point$: import("rxjs").Observable<{
-        x: number;
-        y: number;
-    }>;
+    point: Signal<Point>;
+    point$: import("rxjs").Observable<Point>;
     size: import("@angular/core").WritableSignal<{
         width: number;
         height: number;
@@ -26,18 +21,32 @@ export declare class NodeModel<T = unknown> implements FlowEntity {
     renderOrder: import("@angular/core").WritableSignal<number>;
     selected: import("@angular/core").WritableSignal<boolean>;
     selected$: import("rxjs").Observable<boolean>;
-    pointTransform: import("@angular/core").Signal<string>;
-    sourcePosition: import("@angular/core").Signal<import("ngx-vflow").Position>;
-    targetPosition: import("@angular/core").Signal<import("ngx-vflow").Position>;
+    globalPoint: Signal<{
+        x: number;
+        y: number;
+    }>;
+    pointTransform: Signal<string>;
+    sourcePosition: Signal<import("ngx-vflow").Position>;
+    targetPosition: Signal<import("ngx-vflow").Position>;
     handles: import("@angular/core").WritableSignal<HandleModel[]>;
     handles$: import("rxjs").Observable<HandleModel[]>;
-    draggable: boolean;
+    draggable: import("@angular/core").WritableSignal<boolean>;
     readonly magnetRadius = 20;
     isComponentType: boolean;
-    componentTypeInputs: import("@angular/core").Signal<{
-        node: Node<T>;
+    text: Signal<string>;
+    componentTypeInputs: Signal<{
+        node: Node<T> | DynamicNode<T>;
         _selected: boolean;
     }>;
-    constructor(node: Node<T>);
+    parent: Signal<NodeModel<unknown> | null>;
+    color: import("@angular/core").WritableSignal<string>;
+    private parentId;
+    constructor(node: Node<T> | DynamicNode<T>);
     setPoint(point: Point): void;
+    /**
+     * TODO find the way to implement this better
+     */
+    linkDefaultNodeSizeWithModelSize(): void;
+    private createTextSignal;
+    private createInternalPointSignal;
 }

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

@@ -0,0 +1,13 @@
+import { OnInit } from "@angular/core";
+import { ComponentDynamicNode } from '../interfaces/node.interface';
+import { CustomNodeBaseComponent } from "../components/custom-node-base/custom-node-base.component";
+import * as i0 from "@angular/core";
+export declare abstract class CustomDynamicNodeComponent<T = unknown> extends CustomNodeBaseComponent<T> implements OnInit {
+    /**
+     * Reference to node bound to this component
+     */
+    node: ComponentDynamicNode<T>;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomDynamicNodeComponent<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CustomDynamicNodeComponent<any>, never, never, { "node": { "alias": "node"; "required": false; }; }, {}, never, never, false, never>;
+}

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

@@ -1,20 +1,13 @@
-import { DestroyRef, OnInit } from "@angular/core";
-import { ComponentNode, SharedNode } from '../interfaces/node.interface';
+import { OnInit } from "@angular/core";
+import { ComponentNode } from '../interfaces/node.interface';
+import { CustomNodeBaseComponent } from "../components/custom-node-base/custom-node-base.component";
 import * as i0 from "@angular/core";
-export declare abstract class CustomNodeComponent<T = unknown> implements OnInit {
-    private eventBus;
-    protected destroyRef: DestroyRef;
+export declare abstract class CustomNodeComponent<T = unknown> extends CustomNodeBaseComponent<T> implements OnInit {
     /**
      * Reference to node bound to this component
      */
-    node: SharedNode & ComponentNode<T>;
-    set _selected(value: boolean);
-    /**
-     * Signal with selected state of node
-     */
-    selected: import("@angular/core").WritableSignal<boolean>;
+    node: ComponentNode<T>;
     ngOnInit(): void;
-    private trackEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<CustomNodeComponent<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CustomNodeComponent<any>, never, never, { "node": { "alias": "node"; "required": false; }; "_selected": { "alias": "_selected"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CustomNodeComponent<any>, never, never, { "node": { "alias": "node"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -2,13 +2,19 @@ import { NodeModel } from '../models/node.model';
 import * as i0 from "@angular/core";
 export declare class DraggableService {
     /**
-     * Enable or disable draggable behavior for element.
-     * model contains draggable flag which declares if draggable should be enabled or not
+     * Enable draggable behavior for element.
      *
      * @param element target element for toggling draggable
      * @param model model with data for this element
      */
-    toggleDraggable(element: Element, model: NodeModel): void;
+    enable(element: Element, model: NodeModel): void;
+    /**
+     * Disable draggable behavior for element.
+     *
+     * @param element target element for toggling draggable
+     * @param model model with data for this element
+     */
+    disable(element: Element): void;
     /**
      * TODO: not shure if this work, need to check
      *

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

@@ -8,7 +8,7 @@ export interface NodeHandle {
     position: Position;
     type: HandleType;
     id?: string;
-    parentReference?: HTMLElement;
+    parentReference?: Element;
     template?: TemplateRef<any>;
 }
 export declare class HandleService {

package/lib/vflow/services/node-changes.service.d.ts

@@ -7,10 +7,7 @@ export declare class NodesChangeService {
     protected nodesPositionChange$: Observable<{
         type: "position";
         id: string;
-        point: {
-            x: number;
-            y: number;
-        };
+        point: import("ngx-vflow").Point;
     }[]>;
     protected nodeAddChange$: Observable<{
         type: "add";

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

@@ -3,6 +3,7 @@ import * as i0 from "@angular/core";
 export declare class NodeRenderingService {
     private flowEntitiesService;
     readonly nodes: import("@angular/core").Signal<NodeModel<unknown>[]>;
+    private maxOrder;
     pullNode(node: NodeModel): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NodeRenderingService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NodeRenderingService>;

package/lib/vflow/utils/reference-keeper.d.ts

@@ -1,12 +1,12 @@
 import { NodeModel } from "../models/node.model";
-import { Node } from '../interfaces/node.interface';
+import { DynamicNode, Node } from '../interfaces/node.interface';
 import { EdgeModel } from "../models/edge.model";
 import { Edge } from "../interfaces/edge.interface";
 export declare class ReferenceKeeper {
     /**
      * Create new models for new node references and keep old models for old node references
      */
-    static nodes(newNodes: Node[], oldNodeModels: NodeModel[]): NodeModel<unknown>[];
+    static nodes(newNodes: Node[] | DynamicNode[], oldNodeModels: NodeModel[]): NodeModel<unknown>[];
     /**
      * Create new models for new edge references and keep old models for old edge references
      */

package/lib/vflow/vflow.module.d.ts

@@ -20,6 +20,6 @@ import * as i18 from "./directives/template.directive";
 import * as i19 from "@angular/common";
 export declare class VflowModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<VflowModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<VflowModule, [typeof i1.VflowComponent, typeof i2.NodeComponent, typeof i3.EdgeComponent, typeof i4.EdgeLabelComponent, typeof i5.ConnectionComponent, typeof i6.HandleComponent, typeof i7.DefsComponent, typeof i8.BackgroundComponent, typeof i9.SpacePointContextDirective, typeof i10.MapContextDirective, typeof i11.RootSvgReferenceDirective, typeof i12.RootSvgContextDirective, typeof i13.HandleSizeControllerDirective, typeof i14.SelectableDirective, typeof i15.PointerDirective, typeof i16.RootPointerDirective, typeof i17.FlowSizeControllerDirective, typeof i18.NodeHtmlTemplateDirective, typeof i18.EdgeLabelHtmlTemplateDirective, typeof i18.EdgeTemplateDirective, typeof i18.ConnectionTemplateDirective, typeof i18.HandleTemplateDirective], [typeof i19.CommonModule], [typeof i1.VflowComponent, typeof i6.HandleComponent, typeof i14.SelectableDirective, typeof i18.NodeHtmlTemplateDirective, typeof i18.EdgeLabelHtmlTemplateDirective, typeof i18.EdgeTemplateDirective, typeof i18.ConnectionTemplateDirective, typeof i18.HandleTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<VflowModule, [typeof i1.VflowComponent, typeof i2.NodeComponent, typeof i3.EdgeComponent, typeof i4.EdgeLabelComponent, typeof i5.ConnectionComponent, typeof i6.HandleComponent, typeof i7.DefsComponent, typeof i8.BackgroundComponent, typeof i9.SpacePointContextDirective, typeof i10.MapContextDirective, typeof i11.RootSvgReferenceDirective, typeof i12.RootSvgContextDirective, typeof i13.HandleSizeControllerDirective, typeof i14.SelectableDirective, typeof i15.PointerDirective, typeof i16.RootPointerDirective, typeof i17.FlowSizeControllerDirective, typeof i18.NodeHtmlTemplateDirective, typeof i18.GroupNodeTemplateDirective, typeof i18.EdgeLabelHtmlTemplateDirective, typeof i18.EdgeTemplateDirective, typeof i18.ConnectionTemplateDirective, typeof i18.HandleTemplateDirective], [typeof i19.CommonModule], [typeof i1.VflowComponent, typeof i6.HandleComponent, typeof i14.SelectableDirective, typeof i18.NodeHtmlTemplateDirective, typeof i18.GroupNodeTemplateDirective, typeof i18.EdgeLabelHtmlTemplateDirective, typeof i18.EdgeTemplateDirective, typeof i18.ConnectionTemplateDirective, typeof i18.HandleTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<VflowModule>;
 }

package/package.json

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

package/public-api.d.ts

@@ -11,6 +11,7 @@ export * from './lib/vflow/interfaces/marker.interface';
 export { ViewportState } from './lib/vflow/interfaces/viewport.interface';
 export * from './lib/vflow/interfaces/component-node-event.interface';
 export * from './lib/vflow/interfaces/fit-view-options.interface';
+export * from './lib/vflow/interfaces/optimization.interface';
 export * from './lib/vflow/types/node-change.type';
 export * from './lib/vflow/types/edge-change.type';
 export * from './lib/vflow/types/position.type';
@@ -19,6 +20,7 @@ export * from './lib/vflow/types/connection-mode.type';
 export * from './lib/vflow/components/vflow/vflow.component';
 export * from './lib/vflow/components/handle/handle.component';
 export * from './lib/vflow/public-components/custom-node.component';
+export * from './lib/vflow/public-components/custom-dynamic-node.component';
 export * from './lib/vflow/directives/template.directive';
 export * from './lib/vflow/directives/connection-controller.directive';
 export * from './lib/vflow/directives/changes-controller.directive';