ngx-vflow 0.5.0 → 0.6.0

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

@@ -1,18 +1,13 @@
-import { AfterViewInit, ElementRef, Injector, NgZone, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { AfterViewInit, ElementRef, Injector, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { NodeModel } from '../../models/node.model';
-import { HandleService } from '../../services/handle.service';
 import { HandleModel } from '../../models/handle.model';
 import { WithInjector } from '../../decorators/run-in-injection-context.decorator';
 import * as i0 from "@angular/core";
 export type HandleState = 'valid' | 'invalid' | 'idle';
 export declare class NodeComponent implements OnInit, AfterViewInit, OnDestroy, WithInjector {
     injector: Injector;
-    protected handleService: HandleService;
-    protected zone: NgZone;
-    nodeModel: NodeModel;
-    nodeHtmlTemplate?: TemplateRef<any>;
-    nodeContentRef: ElementRef<SVGGraphicsElement>;
-    htmlWrapperRef: ElementRef<HTMLDivElement>;
+    private handleService;
+    private zone;
     private draggableService;
     private flowStatusService;
     private flowEntitiesService;
@@ -20,7 +15,13 @@ export declare class NodeComponent implements OnInit, AfterViewInit, OnDestroy,
     private flowSettingsService;
     private selectionService;
     private hostRef;
+    nodeModel: NodeModel;
+    nodeHtmlTemplate?: TemplateRef<any>;
+    nodeContentRef: ElementRef<SVGGraphicsElement>;
+    htmlWrapperRef: ElementRef<HTMLDivElement>;
     protected showMagnet: import("@angular/core").Signal<boolean>;
+    protected styleWidth: import("@angular/core").Signal<string>;
+    protected styleHeight: import("@angular/core").Signal<string>;
     private subscription;
     ngOnInit(): void;
     ngAfterViewInit(): void;

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

@@ -22,6 +22,7 @@ export declare class VflowComponent {
     private edgesChangeService;
     private nodeRenderingService;
     private flowSettingsService;
+    private componentEventBusService;
     private injector;
     /**
      * Size for flow view
@@ -76,6 +77,12 @@ export declare class VflowComponent {
      */
     set edges(newEdges: Edge[]);
     protected edgeModels: Signal<EdgeModel[]>;
+    /**
+     * Event that accumulates all custom node events
+     *
+     * @experimental
+     */
+    onComponentNodeEvent: any;
     protected nodeHtmlDirective?: NodeHtmlTemplateDirective;
     protected edgeTemplateDirective?: EdgeTemplateDirective;
     protected edgeLabelHtmlDirective?: EdgeLabelHtmlTemplateDirective;
@@ -139,6 +146,6 @@ export declare class VflowComponent {
     protected trackNodes(idx: number, { node }: NodeModel): Node<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; }; }, {}, ["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; }; "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 ngAcceptInputType_connection: i3.ConnectionSettings;
 }

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

@@ -12,12 +12,12 @@ export declare class SpacePointContextDirective {
     pointerMovement: Signal<{
         x: number;
         y: number;
-        target: Element | null;
-        originalEvent: TouchEvent;
+        originalEvent: MouseEvent;
     } | {
         x: number;
         y: number;
-        originalEvent: MouseEvent;
+        target: Element | null;
+        originalEvent: TouchEvent;
     } | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SpacePointContextDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<SpacePointContextDirective, "g[spacePointContext]", never, {}, {}, never, never, false, never>;

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

@@ -0,0 +1,32 @@
+import { EventEmitter } from "@angular/core";
+import { CustomNodeComponent } from "../public-components/custom-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;
+}[keyof T];
+type EventShape<T, K extends keyof T> = {
+    [P in K]: {
+        eventName: P;
+        eventPayload: EventInfo<T[P]>;
+    };
+}[K];
+type EventsFromComponent<T> = EventShape<T, EventKeys<T>>;
+/**
+ * Event of custom component node
+ *
+ * Generic accepts array of custom components and merge their event emitters for type-safe
+ * event handling
+ *
+ * @experimental
+ */
+export type ComponentNodeEvent<T extends CustomNodeComponent[]> = {
+    nodeId: string;
+} & {
+    [I in keyof T]: EventsFromComponent<T[I]>;
+}[number];
+export type AnyComponentNodeEvent = {
+    nodeId: string;
+    eventName: string;
+    eventPayload: unknown;
+};
+export {};

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

@@ -1,5 +1,7 @@
+import { Type } from "@angular/core";
 import { Point } from "./point.interface";
-export type Node<T = unknown> = SharedNode & (DefaultNode | HtmlTemplateNode<T>);
+import { CustomNodeComponent } from "../public-components/custom-node.component";
+export type Node<T = unknown> = SharedNode & (DefaultNode | HtmlTemplateNode<T> | ComponentNode<T>);
 export interface SharedNode {
     id: string;
     point: Point;
@@ -8,8 +10,14 @@ export interface SharedNode {
 export interface DefaultNode {
     type: 'default';
     text?: string;
+    width?: number;
+    height?: number;
 }
 export interface HtmlTemplateNode<T = unknown> {
     type: 'html-template';
     data?: T;
 }
+export interface ComponentNode<T = unknown> {
+    type: Type<CustomNodeComponent<T>>;
+    data?: T;
+}

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

@@ -14,7 +14,23 @@ 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<import("../interfaces/path-data.interface").PathData>;
+    path: import("@angular/core").Signal<{
+        path: string;
+        points: {
+            start: {
+                x: number;
+                y: number;
+            };
+            center: {
+                x: number;
+                y: number;
+            };
+            end: {
+                x: number;
+                y: number;
+            };
+        };
+    }>;
     edgeLabels: {
         [position in EdgeLabelPosition]?: EdgeLabelModel;
     };

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

@@ -1,10 +1,17 @@
 import { 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;
+    };
     private flowSettingsService;
-    point: import("@angular/core").WritableSignal<{
+    private internalPoint$;
+    private throttledPoint$;
+    point: import("@angular/core").Signal<{
         x: number;
         y: number;
     }>;
@@ -26,5 +33,11 @@ export declare class NodeModel<T = unknown> implements FlowEntity {
     handles$: import("rxjs").Observable<HandleModel[]>;
     draggable: boolean;
     readonly magnetRadius = 20;
+    isComponentType: boolean;
+    componentTypeInputs: import("@angular/core").Signal<{
+        node: Node<T>;
+        _selected: boolean;
+    }>;
     constructor(node: Node<T>);
+    setPoint(point: Point): void;
 }

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

@@ -0,0 +1,20 @@
+import { DestroyRef, OnInit } from "@angular/core";
+import { ComponentNode, SharedNode } from '../interfaces/node.interface';
+import * as i0 from "@angular/core";
+export declare abstract class CustomNodeComponent<T = unknown> implements OnInit {
+    private eventBus;
+    protected destroyRef: DestroyRef;
+    /**
+     * 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>;
+    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>;
+}

package/lib/vflow/services/component-event-bus.service.d.ts

@@ -0,0 +1,9 @@
+import { AnyComponentNodeEvent } from '../interfaces/component-node-event.interface';
+import * as i0 from "@angular/core";
+export declare class ComponentEventBusService {
+    private _event$;
+    event$: import("rxjs").Observable<AnyComponentNodeEvent>;
+    pushEvent(event: AnyComponentNodeEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComponentEventBusService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ComponentEventBusService>;
+}

package/lib/vflow/services/selection.service.d.ts

@@ -5,7 +5,10 @@ import * as i0 from "@angular/core";
 export interface ViewportForSelection {
     start: ViewportState;
     end: ViewportState;
-    target: Element;
+    /**
+     * Target may not exist if viewport change made programmatically
+     */
+    target?: Element;
 }
 export declare class SelectionService {
     private static delta;

package/package.json

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

package/public-api.d.ts

@@ -9,11 +9,13 @@ export * from './lib/vflow/interfaces/connection-settings.interface';
 export * from './lib/vflow/interfaces/handle-positions.interface';
 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/types/node-change.type';
 export * from './lib/vflow/types/edge-change.type';
 export * from './lib/vflow/types/position.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/directives/template.directive';
 export * from './lib/vflow/directives/connection-controller.directive';
 export * from './lib/vflow/directives/changes-controller.directive';