ngx-vflow 0.15.0 → 1.0.0

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

@@ -9,9 +9,22 @@ export declare class BackgroundComponent {
     protected y: import("@angular/core").Signal<number>;
     protected patternColor: import("@angular/core").Signal<string>;
     protected patternSize: import("@angular/core").Signal<number>;
+    protected bgImageSrc: import("@angular/core").Signal<string>;
+    protected imageSize: import("@angular/core").Signal<{
+        width: number;
+        height: number;
+    } | {
+        readonly width: 0;
+        readonly height: 0;
+    }>;
+    protected scaledImageWidth: import("@angular/core").Signal<number>;
+    protected scaledImageHeight: import("@angular/core").Signal<number>;
+    protected imageX: import("@angular/core").Signal<number>;
+    protected imageY: import("@angular/core").Signal<number>;
+    protected repeated: import("@angular/core").Signal<boolean>;
     protected patternId: string;
     protected patternUrl: string;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<BackgroundComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BackgroundComponent, "g[background]", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BackgroundComponent, "g[background]", never, {}, {}, never, never, true, never>;
 }

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

@@ -2,8 +2,8 @@ import { TemplateRef } from '@angular/core';
 import { ConnectionModel } from '../../models/connection.model';
 import * as i0 from "@angular/core";
 export declare class ConnectionComponent {
-    model: ConnectionModel;
-    template?: TemplateRef<any>;
+    model: import("@angular/core").InputSignal<ConnectionModel>;
+    template: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
     private flowStatusService;
     private spacePointContext;
     protected path: import("@angular/core").Signal<string | null>;
@@ -16,5 +16,5 @@ export declare class ConnectionComponent {
         };
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<ConnectionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ConnectionComponent, "g[connection]", never, { "model": { "alias": "model"; "required": true; }; "template": { "alias": "template"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConnectionComponent, "g[connection]", never, { "model": { "alias": "model"; "required": true; "isSignal": true; }; "template": { "alias": "template"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -1,14 +1,9 @@
-import { DestroyRef, OnInit } from "@angular/core";
-import { ComponentDynamicNode, ComponentNode } from "../../interfaces/node.interface";
+import { DestroyRef, OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare abstract class CustomNodeBaseComponent<T = unknown> implements OnInit {
+export declare abstract class CustomNodeBaseComponent<T = any> implements OnInit {
     private eventBus;
+    private nodeService;
     protected destroyRef: DestroyRef;
-    /**
-     * Reference to node bound to this component
-     */
-    protected node: ComponentNode | ComponentDynamicNode;
-    set _selected(value: boolean);
     /**
      * Signal with selected state of node
      */
@@ -17,5 +12,5 @@ export declare abstract class CustomNodeBaseComponent<T = unknown> implements On
     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>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CustomNodeBaseComponent<any>, never, never, {}, {}, never, never, false, never>;
 }

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

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class DefaultNodeComponent {
-    selected: boolean;
+    selected: import("@angular/core").InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DefaultNodeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DefaultNodeComponent, "default-node", never, { "selected": { "alias": "selected"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DefaultNodeComponent, "default-node", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

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

@@ -1,8 +1,8 @@
 import { Marker } from '../../interfaces/marker.interface';
 import * as i0 from "@angular/core";
 export declare class DefsComponent {
-    markers: Map<number, Marker>;
+    markers: import("@angular/core").InputSignal<Map<number, Marker>>;
     protected readonly defaultColor = "rgb(177, 177, 183)";
     static ɵfac: i0.ɵɵFactoryDeclaration<DefsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DefsComponent, "defs[flowDefs]", never, { "markers": { "alias": "markers"; "required": true; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DefsComponent, "defs[flowDefs]", never, { "markers": { "alias": "markers"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -1,4 +1,4 @@
-import { Injector, OnInit, Signal, TemplateRef } from '@angular/core';
+import { Injector, OnInit, TemplateRef } from '@angular/core';
 import { EdgeModel } from '../../models/edge.model';
 import { EdgeContext } from '../../interfaces/template-context.interface';
 import * as i0 from "@angular/core";
@@ -6,14 +6,14 @@ export declare class EdgeComponent implements OnInit {
     protected injector: Injector;
     private selectionService;
     private flowSettingsService;
-    model: EdgeModel;
-    edgeTemplate?: TemplateRef<EdgeContext>;
-    edgeLabelHtmlTemplate?: TemplateRef<any>;
-    protected markerStartUrl: Signal<string>;
-    protected markerEndUrl: Signal<string>;
+    model: import("@angular/core").InputSignal<EdgeModel>;
+    edgeTemplate: import("@angular/core").InputSignal<TemplateRef<EdgeContext> | undefined>;
+    edgeLabelHtmlTemplate: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    protected markerStartUrl: import("@angular/core").Signal<string>;
+    protected markerEndUrl: import("@angular/core").Signal<string>;
     protected edgeContext: EdgeContext;
     ngOnInit(): void;
     onEdgeMouseDown(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EdgeComponent, "g[edge]", never, { "model": { "alias": "model"; "required": false; }; "edgeTemplate": { "alias": "edgeTemplate"; "required": false; }; "edgeLabelHtmlTemplate": { "alias": "edgeLabelHtmlTemplate"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EdgeComponent, "g[edge]", never, { "model": { "alias": "model"; "required": true; "isSignal": true; }; "edgeTemplate": { "alias": "edgeTemplate"; "required": false; "isSignal": true; }; "edgeLabelHtmlTemplate": { "alias": "edgeLabelHtmlTemplate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/vflow/components/edge-label/edge-label.component.d.ts

@@ -1,14 +1,16 @@
 import { AfterViewInit, ElementRef, TemplateRef } from '@angular/core';
 import { EdgeLabelModel } from '../../models/edge-label.model';
 import { EdgeModel } from '../../models/edge.model';
-import { Point } from '../../interfaces/point.interface';
 import * as i0 from "@angular/core";
 export declare class EdgeLabelComponent implements AfterViewInit {
-    model: EdgeLabelModel;
-    edgeModel: EdgeModel;
-    set point(point: Point);
-    htmlTemplate?: TemplateRef<any>;
-    edgeLabelWrapperRef: ElementRef<HTMLDivElement>;
+    model: import("@angular/core").InputSignal<EdgeLabelModel>;
+    edgeModel: import("@angular/core").InputSignal<EdgeModel>;
+    point: import("@angular/core").InputSignal<{
+        x: number;
+        y: number;
+    }>;
+    htmlTemplate: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    edgeLabelWrapperRef: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
     /**
      * Centered point of label
      *
@@ -18,7 +20,6 @@ export declare class EdgeLabelComponent implements AfterViewInit {
         x: number;
         y: number;
     }>;
-    private pointSignal;
     ngAfterViewInit(): void;
     protected getLabelContext(): {
         $implicit: {
@@ -27,5 +28,5 @@ export declare class EdgeLabelComponent implements AfterViewInit {
         };
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeLabelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EdgeLabelComponent, "g[edgeLabel]", never, { "model": { "alias": "model"; "required": false; }; "edgeModel": { "alias": "edgeModel"; "required": false; }; "point": { "alias": "point"; "required": false; }; "htmlTemplate": { "alias": "htmlTemplate"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EdgeLabelComponent, "g[edgeLabel]", never, { "model": { "alias": "model"; "required": true; "isSignal": true; }; "edgeModel": { "alias": "edgeModel"; "required": true; "isSignal": true; }; "point": { "alias": "point"; "required": false; "isSignal": true; }; "htmlTemplate": { "alias": "htmlTemplate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -17,11 +17,10 @@ export declare class NodeComponent implements OnInit, AfterViewInit, OnDestroy,
     private nodeAccessor;
     private overlaysService;
     private zone;
-    nodeModel: NodeModel;
-    nodeTemplate?: TemplateRef<any>;
-    groupNodeTemplate?: TemplateRef<any>;
-    nodeContentRef: ElementRef<SVGGraphicsElement>;
-    htmlWrapperRef: ElementRef<HTMLDivElement>;
+    nodeModel: import("@angular/core").InputSignal<NodeModel<unknown>>;
+    nodeTemplate: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    groupNodeTemplate: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    htmlWrapperRef: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
     protected showMagnet: import("@angular/core").Signal<boolean>;
     protected styleWidth: import("@angular/core").Signal<string>;
     protected styleHeight: import("@angular/core").Signal<string>;
@@ -36,5 +35,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; }; "nodeTemplate": { "alias": "nodeTemplate"; "required": false; }; "groupNodeTemplate": { "alias": "groupNodeTemplate"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NodeComponent, "g[node]", never, { "nodeModel": { "alias": "nodeModel"; "required": true; "isSignal": true; }; "nodeTemplate": { "alias": "nodeTemplate"; "required": false; "isSignal": true; }; "groupNodeTemplate": { "alias": "groupNodeTemplate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -1,11 +1,10 @@
-import { OnInit, Signal } from '@angular/core';
+import { OnInit } 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, 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';
 import { ConnectionModel } from '../../models/connection.model';
@@ -49,20 +48,11 @@ export declare class VflowComponent implements OnInit {
      * Maximum zoom value
      */
     set maxZoom(value: number);
-    /**
-     * Object that controls flow direction.
-     *
-     * For example, if you want to archieve right to left direction
-     * then you need to pass these positions { source: 'left', target: 'right' }
-     *
-     * @deprecated
-     */
-    set handlePositions(handlePositions: HandlePositions);
     /**
      * Background for flow
      */
     set background(value: Background | string);
-    optimization: Optimization;
+    optimization: import("@angular/core").InputSignal<Optimization>;
     /**
      * Global rule if you can or can't select entities
      */
@@ -79,37 +69,39 @@ export declare class VflowComponent implements OnInit {
      * Nodes to render
      */
     set nodes(newNodes: Node[] | DynamicNode[]);
-    protected nodeModels: Signal<NodeModel<unknown>[]>;
+    protected nodeModels: import("@angular/core").Signal<NodeModel<unknown>[]>;
+    protected groups: import("@angular/core").Signal<NodeModel<unknown>[]>;
+    protected nonGroups: import("@angular/core").Signal<NodeModel<unknown>[]>;
     /**
      * Edges to render
      */
     set edges(newEdges: Edge[]);
-    protected edgeModels: Signal<EdgeModel[]>;
+    protected edgeModels: import("@angular/core").Signal<EdgeModel[]>;
     /**
      * Event that accumulates all custom node events
      *
      * @experimental
      */
-    onComponentNodeEvent: any;
-    protected nodeTemplateDirective?: NodeHtmlTemplateDirective;
-    protected groupNodeTemplateDirective?: GroupNodeTemplateDirective;
-    protected edgeTemplateDirective?: EdgeTemplateDirective;
-    protected edgeLabelHtmlDirective?: EdgeLabelHtmlTemplateDirective;
-    protected connectionTemplateDirective?: ConnectionTemplateDirective;
-    protected mapContext: MapContextDirective;
-    protected spacePointContext: SpacePointContextDirective;
+    onComponentNodeEvent: import("@angular/core").OutputRef<any>;
+    protected nodeTemplateDirective: import("@angular/core").Signal<NodeHtmlTemplateDirective | undefined>;
+    protected groupNodeTemplateDirective: import("@angular/core").Signal<GroupNodeTemplateDirective | undefined>;
+    protected edgeTemplateDirective: import("@angular/core").Signal<EdgeTemplateDirective | undefined>;
+    protected edgeLabelHtmlDirective: import("@angular/core").Signal<EdgeLabelHtmlTemplateDirective | undefined>;
+    protected connectionTemplateDirective: import("@angular/core").Signal<ConnectionTemplateDirective | undefined>;
+    protected mapContext: import("@angular/core").Signal<MapContextDirective | undefined>;
+    protected spacePointContext: import("@angular/core").Signal<SpacePointContextDirective>;
     /**
      * Signal for reading viewport change
      */
-    readonly viewport: Signal<ViewportState>;
+    readonly viewport: import("@angular/core").Signal<ViewportState>;
     /**
      * Signal for reading nodes change
      */
-    readonly nodesChange: Signal<NodeChange[]>;
+    readonly nodesChange: import("@angular/core").Signal<NodeChange[]>;
     /**
      * Signal to reading edges change
      */
-    readonly edgesChange: Signal<EdgeChange[]>;
+    readonly edgesChange: import("@angular/core").Signal<EdgeChange[]>;
     /**
      * Observable with viewport change
      */
@@ -122,7 +114,7 @@ export declare class VflowComponent implements OnInit {
      * Observable with edges change
      */
     readonly edgesChange$: import("rxjs").Observable<EdgeChange[]>;
-    protected markers: Signal<Map<number, import("ngx-vflow").Marker>>;
+    protected markers: import("@angular/core").Signal<Map<number, import("ngx-vflow").Marker>>;
     protected minimap: import("@angular/core").WritableSignal<import("../../models/minimap.model").MinimapModel | null>;
     ngOnInit(): void;
     /**
@@ -162,6 +154,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; }; "keyboardShortcuts": { "alias": "keyboardShortcuts"; "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 ɵcmp: i0.ɵɵComponentDeclaration<VflowComponent, "vflow", never, { "view": { "alias": "view"; "required": false; }; "minZoom": { "alias": "minZoom"; "required": false; }; "maxZoom": { "alias": "maxZoom"; "required": false; }; "background": { "alias": "background"; "required": false; }; "optimization": { "alias": "optimization"; "required": false; "isSignal": true; }; "entitiesSelectable": { "alias": "entitiesSelectable"; "required": false; }; "keyboardShortcuts": { "alias": "keyboardShortcuts"; "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, true, [{ 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,7 +1,6 @@
 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';
 import { EdgeAddChange, EdgeChange, EdgeDetachedChange, EdgeRemoveChange, EdgeSelectChange } from '../types/edge-change.type';
 import * as i0 from "@angular/core";
 export declare class ChangesControllerDirective {
@@ -10,38 +9,38 @@ export declare class ChangesControllerDirective {
     /**
      * Watch nodes change
      */
-    onNodesChange: Observable<NodeChange[]>;
-    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[]>;
-    onNodesChangeRemove: Observable<NodeRemoveChange[]>;
-    onNodesChangeRemoveSingle: Observable<NodeRemoveChange>;
-    onNodesChangeRemoveMany: Observable<NodeRemoveChange[]>;
-    onNodesChangeSelect: Observable<NodeSelectedChange[]>;
-    onNodesChangeSelectSingle: Observable<NodeSelectedChange>;
-    onNodesChangeSelectMany: Observable<NodeSelectedChange[]>;
+    onNodesChange: import("@angular/core").OutputRef<NodeChange[]>;
+    onNodesChangePosition: import("@angular/core").OutputRef<NodePositionChange[]>;
+    onNodesChangePositionSignle: import("@angular/core").OutputRef<NodePositionChange>;
+    onNodesChangePositionMany: import("@angular/core").OutputRef<NodePositionChange[]>;
+    onNodesChangeSize: import("@angular/core").OutputRef<NodeSizeChange[]>;
+    onNodesChangeSizeSingle: import("@angular/core").OutputRef<NodeSizeChange>;
+    onNodesChangeSizeMany: import("@angular/core").OutputRef<NodeSizeChange[]>;
+    onNodesChangeAdd: import("@angular/core").OutputRef<NodeAddChange[]>;
+    onNodesChangeAddSingle: import("@angular/core").OutputRef<NodeAddChange>;
+    onNodesChangeAddMany: import("@angular/core").OutputRef<NodeAddChange[]>;
+    onNodesChangeRemove: import("@angular/core").OutputRef<NodeRemoveChange[]>;
+    onNodesChangeRemoveSingle: import("@angular/core").OutputRef<NodeRemoveChange>;
+    onNodesChangeRemoveMany: import("@angular/core").OutputRef<NodeRemoveChange[]>;
+    onNodesChangeSelect: import("@angular/core").OutputRef<NodeSelectedChange[]>;
+    onNodesChangeSelectSingle: import("@angular/core").OutputRef<NodeSelectedChange>;
+    onNodesChangeSelectMany: import("@angular/core").OutputRef<NodeSelectedChange[]>;
     /**
      * Watch edges change
      */
-    onEdgesChange: Observable<EdgeChange[]>;
-    onNodesChangeDetached: Observable<EdgeDetachedChange[]>;
-    onNodesChangeDetachedSingle: Observable<EdgeDetachedChange>;
-    onNodesChangeDetachedMany: Observable<EdgeDetachedChange[]>;
-    onEdgesChangeAdd: Observable<EdgeAddChange[]>;
-    onEdgeChangeAddSingle: Observable<EdgeAddChange>;
-    onEdgeChangeAddMany: Observable<EdgeAddChange[]>;
-    onEdgeChangeRemove: Observable<EdgeRemoveChange[]>;
-    onEdgeChangeRemoveSingle: Observable<EdgeRemoveChange>;
-    onEdgeChangeRemoveMany: Observable<EdgeRemoveChange[]>;
-    onEdgeChangeSelect: Observable<EdgeSelectChange[]>;
-    onEdgeChangeSelectSingle: Observable<EdgeSelectChange>;
-    onEdgeChangeSelectMany: Observable<EdgeSelectChange[]>;
+    onEdgesChange: import("@angular/core").OutputRef<EdgeChange[]>;
+    onNodesChangeDetached: import("@angular/core").OutputRef<EdgeDetachedChange[]>;
+    onNodesChangeDetachedSingle: import("@angular/core").OutputRef<EdgeDetachedChange>;
+    onNodesChangeDetachedMany: import("@angular/core").OutputRef<EdgeDetachedChange[]>;
+    onEdgesChangeAdd: import("@angular/core").OutputRef<EdgeAddChange[]>;
+    onEdgeChangeAddSingle: import("@angular/core").OutputRef<EdgeAddChange>;
+    onEdgeChangeAddMany: import("@angular/core").OutputRef<EdgeAddChange[]>;
+    onEdgeChangeRemove: import("@angular/core").OutputRef<EdgeRemoveChange[]>;
+    onEdgeChangeRemoveSingle: import("@angular/core").OutputRef<EdgeRemoveChange>;
+    onEdgeChangeRemoveMany: import("@angular/core").OutputRef<EdgeRemoveChange[]>;
+    onEdgeChangeSelect: import("@angular/core").OutputRef<EdgeSelectChange[]>;
+    onEdgeChangeSelectSingle: import("@angular/core").OutputRef<EdgeSelectChange>;
+    onEdgeChangeSelectMany: import("@angular/core").OutputRef<EdgeSelectChange[]>;
     private nodeChangesOfType;
     private edgeChangesOfType;
     private singleChange;

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

@@ -1,4 +1,3 @@
-import { EventEmitter } from '@angular/core';
 import { Connection } from '../interfaces/connection.interface';
 import { HandleModel } from '../models/handle.model';
 import * as i0 from "@angular/core";
@@ -11,7 +10,7 @@ export declare class ConnectionControllerDirective {
      * Also it's important to note, that this event only fires when connection is valid by validator function in `ConnectionSettings`,
      * by default without passing the validator every connection concidered valid.
      */
-    onConnect: EventEmitter<Connection>;
+    onConnect: import("@angular/core").OutputEmitterRef<Connection>;
     private statusService;
     private flowEntitiesService;
     protected connectEffect: import("@angular/core").EffectRef;

package/lib/vflow/directives/drag-handle.directive.d.ts

@@ -4,5 +4,5 @@ export declare class DragHandleDirective {
     private get model();
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<DragHandleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DragHandleDirective, "[dragHandle]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DragHandleDirective, "[dragHandle]", never, {}, {}, never, never, true, never>;
 }

package/lib/vflow/directives/flow-size-controller.directive.d.ts

@@ -7,5 +7,5 @@ export declare class FlowSizeControllerDirective {
     flowHeight: Signal<string | number>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<FlowSizeControllerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FlowSizeControllerDirective, "svg[flowSizeController]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FlowSizeControllerDirective, "svg[flowSizeController]", never, {}, {}, never, never, true, never>;
 }

package/lib/vflow/directives/handle-size-controller.directive.d.ts

@@ -2,9 +2,9 @@ import { AfterViewInit } from '@angular/core';
 import { HandleModel } from '../models/handle.model';
 import * as i0 from "@angular/core";
 export declare class HandleSizeControllerDirective implements AfterViewInit {
-    handleModel: HandleModel;
+    handleModel: import("@angular/core").InputSignal<HandleModel>;
     private handleWrapper;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<HandleSizeControllerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<HandleSizeControllerDirective, "[handleSizeController]", never, { "handleModel": { "alias": "handleSizeController"; "required": true; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HandleSizeControllerDirective, "[handleSizeController]", never, { "handleModel": { "alias": "handleSizeController"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/vflow/directives/map-context.directive.d.ts

@@ -21,7 +21,7 @@ export declare class MapContextDirective implements OnInit {
     private handleZoomEnd;
     private filterCondition;
     static ɵfac: i0.ɵɵFactoryDeclaration<MapContextDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MapContextDirective, "g[mapContext]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MapContextDirective, "g[mapContext]", never, {}, {}, never, never, true, never>;
 }
 declare module 'd3-selection' {
     interface Selection<GElement extends BaseType, Datum, PElement extends BaseType, PDatum> {

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

@@ -1,13 +1,16 @@
-import { EventEmitter } from '@angular/core';
 import { RootPointerDirective } from './root-pointer.directive';
 import * as i0 from "@angular/core";
 export declare class PointerDirective {
     protected hostElement: Element;
     protected pointerMovementDirective: RootPointerDirective;
-    protected pointerOver: EventEmitter<Event>;
-    protected pointerOut: EventEmitter<Event>;
-    protected pointerStart: EventEmitter<Event>;
-    protected pointerEnd: EventEmitter<Event>;
+    protected pointerOver: import("@angular/core").OutputEmitterRef<Event>;
+    protected pointerOut: import("@angular/core").OutputEmitterRef<Event>;
+    /**
+     * @todo the Angular may somehow ignore the event.
+     * reproduced here: https://www.ngx-vflow.org/workshops/layout/vizdom-layout
+     */
+    protected pointerStart: import("@angular/core").OutputEmitterRef<Event>;
+    protected pointerEnd: import("@angular/core").OutputEmitterRef<Event>;
     protected onPointerStart(event: Event): void;
     protected onPointerEnd(event: Event): void;
     protected onMouseOver(event: Event): void;
@@ -17,5 +20,5 @@ export declare class PointerDirective {
     protected touchOverOut: import("rxjs").Subscription;
     private handleTouchOverAndOut;
     static ɵfac: i0.ɵɵFactoryDeclaration<PointerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PointerDirective, "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", never, {}, { "pointerOver": "pointerOver"; "pointerOut": "pointerOut"; "pointerStart": "pointerStart"; "pointerEnd": "pointerEnd"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PointerDirective, "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", never, {}, { "pointerOver": "pointerOver"; "pointerOut": "pointerOut"; "pointerStart": "pointerStart"; "pointerEnd": "pointerEnd"; }, never, never, true, never>;
 }

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

@@ -2,5 +2,5 @@ import * as i0 from "@angular/core";
 export declare class RootSvgReferenceDirective {
     readonly element: SVGSVGElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<RootSvgReferenceDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RootSvgReferenceDirective, "svg[rootSvgRef]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RootSvgReferenceDirective, "svg[rootSvgRef]", never, {}, {}, never, never, true, never>;
 }

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

@@ -48,5 +48,5 @@ export declare class RootPointerDirective {
      */
     setInitialTouch(event: TouchEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RootPointerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RootPointerDirective, "svg[rootPointer]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RootPointerDirective, "svg[rootPointer]", never, {}, {}, never, never, true, never>;
 }

package/lib/vflow/directives/root-svg-context.directive.d.ts

@@ -3,5 +3,5 @@ export declare class RootSvgContextDirective {
     private flowStatusService;
     protected resetConnection(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RootSvgContextDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RootSvgContextDirective, "svg[rootSvgContext]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RootSvgContextDirective, "svg[rootSvgContext]", never, {}, {}, never, never, true, never>;
 }

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

@@ -7,5 +7,5 @@ export declare class SelectableDirective {
     protected onMousedown(): void;
     private entity;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectableDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectableDirective, "[selectable]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectableDirective, "[selectable]", never, {}, {}, never, never, true, never>;
 }

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

@@ -12,5 +12,5 @@ export declare class SpacePointContextDirective {
     pointerMovement: Signal<import("./root-pointer.directive").PointerEvent | undefined>;
     documentPointToFlowPoint(documentPoint: Point): DOMPoint;
     static ɵfac: i0.ɵɵFactoryDeclaration<SpacePointContextDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SpacePointContextDirective, "g[spacePointContext]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SpacePointContextDirective, "g[spacePointContext]", never, {}, {}, never, never, true, never>;
 }

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

@@ -4,30 +4,30 @@ import * as i0 from "@angular/core";
 export declare class EdgeTemplateDirective {
     templateRef: TemplateRef<EdgeContext>;
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeTemplateDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<EdgeTemplateDirective, "ng-template[edge]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<EdgeTemplateDirective, "ng-template[edge]", never, {}, {}, never, never, true, never>;
 }
 export declare class ConnectionTemplateDirective {
     templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConnectionTemplateDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ConnectionTemplateDirective, "ng-template[connection]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ConnectionTemplateDirective, "ng-template[connection]", never, {}, {}, never, never, true, never>;
 }
 export declare class EdgeLabelHtmlTemplateDirective {
     templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeLabelHtmlTemplateDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<EdgeLabelHtmlTemplateDirective, "ng-template[edgeLabelHtml]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<EdgeLabelHtmlTemplateDirective, "ng-template[edgeLabelHtml]", never, {}, {}, never, never, true, never>;
 }
 export declare class NodeHtmlTemplateDirective {
     templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NodeHtmlTemplateDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NodeHtmlTemplateDirective, "ng-template[nodeHtml]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NodeHtmlTemplateDirective, "ng-template[nodeHtml]", never, {}, {}, never, never, true, 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>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<GroupNodeTemplateDirective, "ng-template[groupNode]", never, {}, {}, never, never, true, never>;
 }
 export declare class HandleTemplateDirective {
     templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<HandleTemplateDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<HandleTemplateDirective, "ng-template[handle]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HandleTemplateDirective, "ng-template[handle]", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,9 +1,9 @@
-import { EventEmitter } from "@angular/core";
+import { EventEmitter, OutputRef } from "@angular/core";
 import { CustomNodeComponent } from "../public-components/custom-node/custom-node.component";
 import { CustomDynamicNodeComponent } from "../public-components/custom-dynamic-node/custom-dynamic-node.component";
-type EventInfo<T> = T extends EventEmitter<infer U> ? U : never;
+type EventInfo<T> = T extends (EventEmitter<infer U> | OutputRef<infer U>) ? U : never;
 type EventKeys<T> = {
-    [K in keyof T]: T[K] extends EventEmitter<any> ? K : never;
+    [K in keyof T]: T[K] extends (EventEmitter<any> | OutputRef<any>) ? K : never;
 }[keyof T];
 type EventShape<T, K extends keyof T> = {
     [P in K]: {

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

@@ -2,7 +2,7 @@ import { Connection } from "./connection.interface";
 import { EdgeLabel, EdgeLabelPosition } from "./edge-label.interface";
 import { Marker } from "./marker.interface";
 export type EdgeType = 'default' | 'template';
-export type Curve = 'straight' | 'bezier';
+export type Curve = 'straight' | 'bezier' | 'smooth-step' | 'step';
 export interface Edge<T = unknown> extends Connection {
     id: string;
     type?: EdgeType;