ngx-vflow 0.11.0 → 0.12.0

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

@@ -14,6 +14,8 @@ export declare class NodeComponent implements OnInit, AfterViewInit, OnDestroy,
     private selectionService;
     private hostRef;
     private connectionController;
+    private nodeAccessor;
+    private zone;
     nodeModel: NodeModel;
     nodeTemplate?: TemplateRef<any>;
     groupNodeTemplate?: TemplateRef<any>;

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

@@ -158,6 +158,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; }; "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 ɵ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/interfaces/node.interface.d.ts

@@ -31,22 +31,28 @@ 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';
@@ -63,10 +69,14 @@ export interface TemplateDynamicGroupNode<T> extends SharedDynamicNode {
 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>;

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/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';
@@ -12,12 +12,19 @@ export declare class NodeModel<T = unknown> implements FlowEntity {
     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>;
@@ -39,10 +46,14 @@ export declare class NodeModel<T = unknown> implements FlowEntity {
         _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/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/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.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 ɵ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.11.0",
+  "version": "0.12.0",
   "license": "MIT",
   "homepage": "https://www.ngx-vflow.org/",
   "author": "Artem Mangilev",

package/public-api.d.ts

@@ -21,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';