ngx-vflow 0.10.0 → 0.11.0

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 { 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.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/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';
@@ -34,6 +36,30 @@ 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 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;
@@ -50,3 +76,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/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

@@ -7,7 +7,9 @@ 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$;
     point: Signal<Point>;
@@ -19,6 +21,10 @@ 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>;
+    globalPoint: Signal<{
+        x: number;
+        y: number;
+    }>;
     pointTransform: Signal<string>;
     sourcePosition: Signal<import("ngx-vflow").Position>;
     targetPosition: Signal<import("ngx-vflow").Position>;
@@ -32,6 +38,9 @@ export declare class NodeModel<T = unknown> implements FlowEntity {
         node: Node<T> | DynamicNode<T>;
         _selected: boolean;
     }>;
+    parent: Signal<NodeModel<unknown> | null>;
+    color: import("@angular/core").WritableSignal<string>;
+    private parentId;
     constructor(node: Node<T> | DynamicNode<T>);
     setPoint(point: Point): void;
     /**

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-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/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.10.0",
+  "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';