ngx-vflow 0.9.0 → 0.10.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/vflow/vflow.component.d.ts

@@ -1,5 +1,5 @@
 import { Signal } from '@angular/core';
-import { Node } from '../../interfaces/node.interface';
+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';
@@ -73,7 +73,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
@@ -141,7 +141,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,7 +150,7 @@ 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>;
     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"; }; }]>;

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,52 @@
-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>;
+export type DynamicNode<T = unknown> = DefaultDynamicNode | HtmlTemplateDynamicNode<T> | ComponentDynamicNode<T>;
 export interface SharedNode {
     id: string;
     point: Point;
     draggable?: boolean;
 }
-export interface DefaultNode {
+export interface SharedDynamicNode {
+    id: string;
+    point: WritableSignal<Point>;
+    draggable?: WritableSignal<boolean>;
+}
+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 ComponentNode<T = unknown> {
+export interface HtmlTemplateDynamicNode<T = unknown> extends SharedDynamicNode {
+    type: 'html-template';
+    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;

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

@@ -1,24 +1,17 @@
-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 flowSettingsService;
-    private internalPoint$;
+    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 +19,25 @@ 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>;
+    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>);
+    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/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/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/package.json

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

package/public-api.d.ts

@@ -19,6 +19,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';