ngx-vflow 0.10.0 → 0.12.0

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

@@ -14,8 +14,11 @@ export declare class NodeComponent implements OnInit, AfterViewInit, OnDestroy,
     private selectionService;
     private hostRef;
     private connectionController;
+    private nodeAccessor;
+    private zone;
     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 +34,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 { 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
      */
@@ -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
      *
@@ -152,7 +156,8 @@ export declare class VflowComponent {
     documentPointToFlowPoint(point: Point): Point;
     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.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: i3.ConnectionSettings;
 }

package/lib/vflow/directives/changes-controller.directive.d.ts

@@ -1,4 +1,4 @@
-import { NodeAddChange, NodeChange, NodePositionChange, NodeRemoveChange, NodeSelectedChange } from '../types/node-change.type';
+import { NodeAddChange, NodeChange, NodePositionChange, NodeRemoveChange, NodeSelectedChange, NodeSizeChange } from '../types/node-change.type';
 import { EdgeChangesService } from '../services/edge-changes.service';
 import { NodesChangeService } from '../services/node-changes.service';
 import { Observable } from 'rxjs';
@@ -14,6 +14,9 @@ export declare class ChangesControllerDirective {
     onNodesChangePosition: Observable<NodePositionChange[]>;
     onNodesChangePositionSignle: Observable<NodePositionChange>;
     onNodesChangePositionMany: Observable<NodePositionChange[]>;
+    onNodesChangeSize: Observable<NodeSizeChange[]>;
+    onNodesChangeSizeSingle: Observable<NodeSizeChange>;
+    onNodesChangeSizeMany: Observable<NodeSizeChange[]>;
     onNodesChangeAdd: Observable<NodeAddChange[]>;
     onNodesChangeAddSingle: Observable<NodeAddChange>;
     onNodesChangeAddMany: Observable<NodeAddChange[]>;
@@ -44,5 +47,5 @@ export declare class ChangesControllerDirective {
     private singleChange;
     private manyChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChangesControllerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ChangesControllerDirective, "[changesController]", never, {}, { "onNodesChange": "onNodesChange"; "onNodesChangePosition": "onNodesChange.position"; "onNodesChangePositionSignle": "onNodesChange.position.single"; "onNodesChangePositionMany": "onNodesChange.position.many"; "onNodesChangeAdd": "onNodesChange.add"; "onNodesChangeAddSingle": "onNodesChange.add.single"; "onNodesChangeAddMany": "onNodesChange.add.many"; "onNodesChangeRemove": "onNodesChange.remove"; "onNodesChangeRemoveSingle": "onNodesChange.remove.single"; "onNodesChangeRemoveMany": "onNodesChange.remove.many"; "onNodesChangeSelect": "onNodesChange.select"; "onNodesChangeSelectSingle": "onNodesChange.select.single"; "onNodesChangeSelectMany": "onNodesChange.select.many"; "onEdgesChange": "onEdgesChange"; "onNodesChangeDetached": "onEdgesChange.detached"; "onNodesChangeDetachedSingle": "onEdgesChange.detached.single"; "onNodesChangeDetachedMany": "onEdgesChange.detached.many"; "onEdgesChangeAdd": "onEdgesChange.add"; "onEdgeChangeAddSingle": "onEdgesChange.add.single"; "onEdgeChangeAddMany": "onEdgesChange.add.many"; "onEdgeChangeRemove": "onEdgesChange.remove"; "onEdgeChangeRemoveSingle": "onEdgesChange.remove.single"; "onEdgeChangeRemoveMany": "onEdgesChange.remove.many"; "onEdgeChangeSelect": "onEdgesChange.select"; "onEdgeChangeSelectSingle": "onEdgesChange.select.single"; "onEdgeChangeSelectMany": "onEdgesChange.select.many"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ChangesControllerDirective, "[changesController]", never, {}, { "onNodesChange": "onNodesChange"; "onNodesChangePosition": "onNodesChange.position"; "onNodesChangePositionSignle": "onNodesChange.position.single"; "onNodesChangePositionMany": "onNodesChange.position.many"; "onNodesChangeSize": "onNodesChange.size"; "onNodesChangeSizeSingle": "onNodesChange.size.single"; "onNodesChangeSizeMany": "onNodesChange.size.many"; "onNodesChangeAdd": "onNodesChange.add"; "onNodesChangeAddSingle": "onNodesChange.add.single"; "onNodesChangeAddMany": "onNodesChange.add.many"; "onNodesChangeRemove": "onNodesChange.remove"; "onNodesChangeRemoveSingle": "onNodesChange.remove.single"; "onNodesChangeRemoveMany": "onNodesChange.remove.many"; "onNodesChangeSelect": "onNodesChange.select"; "onNodesChangeSelectSingle": "onNodesChange.select.single"; "onNodesChangeSelectMany": "onNodesChange.select.many"; "onEdgesChange": "onEdgesChange"; "onNodesChangeDetached": "onEdgesChange.detached"; "onNodesChangeDetachedSingle": "onEdgesChange.detached.single"; "onNodesChangeDetachedMany": "onEdgesChange.detached.many"; "onEdgesChangeAdd": "onEdgesChange.add"; "onEdgeChangeAddSingle": "onEdgesChange.add.single"; "onEdgeChangeAddMany": "onEdgesChange.add.many"; "onEdgeChangeRemove": "onEdgesChange.remove"; "onEdgeChangeRemoveSingle": "onEdgesChange.remove.single"; "onEdgeChangeRemoveMany": "onEdgesChange.remove.many"; "onEdgeChangeSelect": "onEdgesChange.select"; "onEdgeChangeSelectSingle": "onEdgesChange.select.single"; "onEdgeChangeSelectMany": "onEdgesChange.select.many"; }, never, never, true, never>;
 }

package/lib/vflow/directives/root-pointer.directive.d.ts

@@ -3,33 +3,51 @@ import * as i0 from "@angular/core";
 export declare class RootPointerDirective {
     private host;
     private initialTouch$;
+    private prevTouchEvent;
     mouseMovement$: Observable<{
         x: number;
         y: number;
+        movementX: number;
+        movementY: number;
+        target: EventTarget | null;
         originalEvent: MouseEvent;
     }>;
     touchMovement$: Observable<{
         x: number;
         y: number;
-        target: Element | null;
-        originalEvent: TouchEvent;
-    }>;
-    touchEnd$: Observable<{
-        x: number;
-        y: number;
+        movementX: number;
+        movementY: number;
         target: Element | null;
         originalEvent: TouchEvent;
     }>;
     pointerMovement$: Observable<{
         x: number;
         y: number;
+        movementX: number;
+        movementY: number;
+        target: EventTarget | null;
         originalEvent: MouseEvent;
     } | {
+        x: number;
+        y: number;
+        movementX: number;
+        movementY: number;
+        target: Element | null;
+        originalEvent: TouchEvent;
+    }>;
+    touchEnd$: Observable<{
         x: number;
         y: number;
         target: Element | null;
         originalEvent: TouchEvent;
     }>;
+    mouseUp$: Observable<{
+        x: number;
+        y: number;
+        target: EventTarget | null;
+        originalEvent: MouseEvent;
+    }>;
+    documentPointerEnd$: Observable<Event>;
     /**
      * We should know when user started a touch in order to not
      * show old touch position when connection creation is started

package/lib/vflow/directives/space-point-context.directive.d.ts

@@ -12,10 +12,15 @@ export declare class SpacePointContextDirective {
     pointerMovement: Signal<{
         x: number;
         y: number;
+        movementX: number;
+        movementY: number;
+        target: EventTarget | null;
         originalEvent: MouseEvent;
     } | {
         x: number;
         y: number;
+        movementX: number;
+        movementY: number;
         target: Element | null;
         originalEvent: TouchEvent;
     } | undefined>;

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/node.interface.d.ts

@@ -2,17 +2,19 @@ import { Type, WritableSignal } from "@angular/core";
 import { Point } from "./point.interface";
 import { CustomNodeComponent } from "../public-components/custom-node.component";
 import { CustomDynamicNodeComponent } from "../public-components/custom-dynamic-node.component";
-export type Node<T = unknown> = DefaultNode | HtmlTemplateNode<T> | ComponentNode<T>;
-export type DynamicNode<T = unknown> = DefaultDynamicNode | HtmlTemplateDynamicNode<T> | ComponentDynamicNode<T>;
+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 SharedDynamicNode {
     id: string;
     point: WritableSignal<Point>;
     draggable?: WritableSignal<boolean>;
+    parentId?: WritableSignal<string | null>;
 }
 export interface DefaultNode extends SharedNode {
     type: 'default';
@@ -29,18 +31,52 @@ export interface DefaultDynamicNode extends SharedDynamicNode {
 export interface HtmlTemplateNode<T = unknown> extends SharedNode {
     type: 'html-template';
     data?: T;
+    width?: number;
+    height?: number;
 }
 export interface HtmlTemplateDynamicNode<T = unknown> extends SharedDynamicNode {
     type: 'html-template';
     data?: WritableSignal<T>;
+    width?: WritableSignal<number>;
+    height?: WritableSignal<number>;
+}
+export interface DefaultGroupNode extends SharedNode {
+    type: 'default-group';
+    width: number;
+    height: number;
+    color?: string;
+    resizable?: boolean;
+}
+export interface DefaultDynamicGroupNode extends SharedDynamicNode {
+    type: 'default-group';
+    width: WritableSignal<number>;
+    height: WritableSignal<number>;
+    color?: WritableSignal<string>;
+    resizable?: WritableSignal<boolean>;
+}
+export interface TemplateGroupNode<T> extends SharedNode {
+    type: 'template-group';
+    width: number;
+    height: number;
+    data?: T;
+}
+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;
+    width?: number;
+    height?: number;
 }
 export interface ComponentDynamicNode<T = unknown> extends SharedDynamicNode {
     type: Type<CustomDynamicNodeComponent<T>>;
     data?: WritableSignal<T>;
+    width?: WritableSignal<number>;
+    height?: WritableSignal<number>;
 }
 export declare function isStaticNode<T>(node: Node | DynamicNode): node is Node<T>;
 export declare function isDynamicNode<T>(node: Node | DynamicNode): node is DynamicNode<T>;
@@ -50,3 +86,7 @@ export declare function isTemplateStaticNode<T>(node: Node): node is HtmlTemplat
 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,23 +14,7 @@ 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<{
-        path: string;
-        points: {
-            start: {
-                x: number;
-                y: number;
-            };
-            center: {
-                x: number;
-                y: number;
-            };
-            end: {
-                x: number;
-                y: number;
-            };
-        };
-    }>;
+    path: import("@angular/core").Signal<import("../interfaces/path-data.interface").PathData>;
     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,4 +1,4 @@
-import { Signal } from '@angular/core';
+import { Signal, TemplateRef } from '@angular/core';
 import { DynamicNode, Node } from '../interfaces/node.interface';
 import { HandleModel } from './handle.model';
 import { FlowEntity } from '../interfaces/flow-entity.interface';
@@ -7,18 +7,31 @@ export declare class NodeModel<T = unknown> implements FlowEntity {
     node: Node<T> | DynamicNode<T>;
     private static defaultWidth;
     private static defaultHeight;
+    private static defaultColor;
     private flowSettingsService;
+    private entitiesService;
     private internalPoint;
     private throttledPoint$;
+    private notThrottledPoint$;
     point: Signal<Point>;
     point$: import("rxjs").Observable<Point>;
     size: import("@angular/core").WritableSignal<{
         width: number;
         height: number;
     }>;
+    size$: import("rxjs").Observable<{
+        width: number;
+        height: number;
+    }>;
+    width: Signal<number>;
+    height: Signal<number>;
     renderOrder: import("@angular/core").WritableSignal<number>;
     selected: import("@angular/core").WritableSignal<boolean>;
     selected$: import("rxjs").Observable<boolean>;
+    globalPoint: Signal<{
+        x: number;
+        y: number;
+    }>;
     pointTransform: Signal<string>;
     sourcePosition: Signal<import("ngx-vflow").Position>;
     targetPosition: Signal<import("ngx-vflow").Position>;
@@ -32,8 +45,15 @@ export declare class NodeModel<T = unknown> implements FlowEntity {
         node: Node<T> | DynamicNode<T>;
         _selected: boolean;
     }>;
+    parent: Signal<NodeModel<unknown> | null>;
+    children: Signal<NodeModel<unknown>[]>;
+    color: import("@angular/core").WritableSignal<string>;
+    resizable: import("@angular/core").WritableSignal<boolean>;
+    resizing: import("@angular/core").WritableSignal<boolean>;
+    resizerTemplate: import("@angular/core").WritableSignal<TemplateRef<unknown> | null>;
+    private parentId;
     constructor(node: Node<T> | DynamicNode<T>);
-    setPoint(point: Point): void;
+    setPoint(point: Point, throttle: boolean): void;
     /**
      * TODO find the way to implement this better
      */

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

@@ -0,0 +1,39 @@
+import { AfterViewInit, OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+type Side = 'top' | 'right' | 'bottom' | 'left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export declare class ResizableComponent implements OnInit, AfterViewInit {
+    private nodeAccessor;
+    private rootPointer;
+    private viewportService;
+    private hostRef;
+    set resizable(value: boolean | '');
+    resizerColor: string;
+    gap: number;
+    private resizer;
+    protected get model(): import("../../models/node.model").NodeModel<unknown>;
+    protected lineGap: number;
+    protected handleSize: number;
+    private resizeSide;
+    private zoom;
+    private minWidth;
+    private minHeight;
+    protected resizeOnGlobalMouseMove: import("rxjs").Subscription;
+    protected endResizeOnGlobalMouseUp: import("rxjs").Subscription;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    protected startResize(side: Side, event: Event): void;
+    protected resize({ movementX, movementY }: {
+        movementX: number;
+        movementY: number;
+    }): void;
+    protected endResize(): void;
+    private getMaxWidth;
+    private getMaxHeight;
+    private getMinX;
+    private getMinY;
+    private getMaxX;
+    private getMaxY;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ResizableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ResizableComponent, "[resizable]", never, { "resizable": { "alias": "resizable"; "required": false; }; "resizerColor": { "alias": "resizerColor"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; }, {}, never, ["*"], false, never>;
+}
+export {};

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-accessor.service.d.ts

@@ -0,0 +1,10 @@
+import { NodeModel } from '../models/node.model';
+import * as i0 from "@angular/core";
+/**
+ * Service to fix cyclic dependency between node and resizable component
+ */
+export declare class NodeAccessorService {
+    model: import("@angular/core").WritableSignal<NodeModel<unknown> | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NodeAccessorService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NodeAccessorService>;
+}

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

@@ -9,6 +9,14 @@ export declare class NodesChangeService {
         id: string;
         point: import("ngx-vflow").Point;
     }[]>;
+    protected nodeSizeChange$: Observable<{
+        type: "size";
+        id: string;
+        size: {
+            width: number;
+            height: number;
+        };
+    }[]>;
     protected nodeAddChange$: Observable<{
         type: "add";
         id: string;

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/types/node-change.type.d.ts

@@ -1,9 +1,16 @@
 import { Point } from "../interfaces/point.interface";
-export type NodeChange = NodePositionChange | NodeAddChange | NodeRemoveChange | NodeSelectedChange;
+export type NodeChange = NodePositionChange | NodeSizeChange | NodeAddChange | NodeRemoveChange | NodeSelectedChange;
 export interface NodePositionChange extends NodeChangeShared {
     type: 'position';
     point: Point;
 }
+export interface NodeSizeChange extends NodeChangeShared {
+    type: 'size';
+    size: {
+        width: number;
+        height: number;
+    };
+}
 export interface NodeAddChange extends NodeChangeShared {
     type: 'add';
 }

package/lib/vflow/utils/resizable.d.ts

@@ -1,2 +1,3 @@
+import { NgZone } from "@angular/core";
 import { Observable } from "rxjs";
-export declare function resizable(elems: Element[]): Observable<ResizeObserverEntry[]>;
+export declare function resizable(elems: Element[], zone: NgZone): Observable<ResizeObserverEntry[]>;

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

@@ -7,19 +7,20 @@ import * as i5 from "./components/connection/connection.component";
 import * as i6 from "./components/handle/handle.component";
 import * as i7 from "./components/defs/defs.component";
 import * as i8 from "./components/background/background.component";
-import * as i9 from "./directives/space-point-context.directive";
-import * as i10 from "./directives/map-context.directive";
-import * as i11 from "./directives/reference.directive";
-import * as i12 from "./directives/root-svg-context.directive";
-import * as i13 from "./directives/handle-size-controller.directive";
-import * as i14 from "./directives/selectable.directive";
-import * as i15 from "./directives/pointer.directive";
-import * as i16 from "./directives/root-pointer.directive";
-import * as i17 from "./directives/flow-size-controller.directive";
-import * as i18 from "./directives/template.directive";
-import * as i19 from "@angular/common";
+import * as i9 from "./public-components/resizable/resizable.component";
+import * as i10 from "./directives/space-point-context.directive";
+import * as i11 from "./directives/map-context.directive";
+import * as i12 from "./directives/reference.directive";
+import * as i13 from "./directives/root-svg-context.directive";
+import * as i14 from "./directives/handle-size-controller.directive";
+import * as i15 from "./directives/selectable.directive";
+import * as i16 from "./directives/pointer.directive";
+import * as i17 from "./directives/root-pointer.directive";
+import * as i18 from "./directives/flow-size-controller.directive";
+import * as i19 from "./directives/template.directive";
+import * as i20 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.ResizableComponent, typeof i10.SpacePointContextDirective, typeof i11.MapContextDirective, typeof i12.RootSvgReferenceDirective, typeof i13.RootSvgContextDirective, typeof i14.HandleSizeControllerDirective, typeof i15.SelectableDirective, typeof i16.PointerDirective, typeof i17.RootPointerDirective, typeof i18.FlowSizeControllerDirective, typeof i19.NodeHtmlTemplateDirective, typeof i19.GroupNodeTemplateDirective, typeof i19.EdgeLabelHtmlTemplateDirective, typeof i19.EdgeTemplateDirective, typeof i19.ConnectionTemplateDirective, typeof i19.HandleTemplateDirective], [typeof i20.CommonModule], [typeof i1.VflowComponent, typeof i6.HandleComponent, typeof i9.ResizableComponent, typeof i15.SelectableDirective, typeof i19.NodeHtmlTemplateDirective, typeof i19.GroupNodeTemplateDirective, typeof i19.EdgeLabelHtmlTemplateDirective, typeof i19.EdgeTemplateDirective, typeof i19.ConnectionTemplateDirective, typeof i19.HandleTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<VflowModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-vflow",
-  "version": "0.10.0",
+  "version": "0.12.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';
@@ -20,6 +21,7 @@ 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/public-components/resizable/resizable.component';
 export * from './lib/vflow/directives/template.directive';
 export * from './lib/vflow/directives/connection-controller.directive';
 export * from './lib/vflow/directives/changes-controller.directive';