ngx-vflow 0.2.1 → 0.3.0

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

@@ -1,7 +1,9 @@
-import { OnInit } from '@angular/core';
+import { OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { Position } from '../../types/position.type';
+import { HandleModel } from '../../models/handle.model';
+import { WithInjectorDirective } from '../../decorators/run-in-injection-context.decorator';
 import * as i0 from "@angular/core";
-export declare class HandleComponent implements OnInit {
+export declare class HandleComponent extends WithInjectorDirective implements OnInit, OnDestroy {
     private handleService;
     private element;
     /**
@@ -16,8 +18,10 @@ export declare class HandleComponent implements OnInit {
      * Should be used if node has more than one source/target
      */
     id?: string;
+    template?: TemplateRef<any>;
+    model: HandleModel;
     ngOnInit(): void;
-    private parentRect;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<HandleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HandleComponent, "handle", never, { "position": { "alias": "position"; "required": true; }; "type": { "alias": "type"; "required": true; }; "id": { "alias": "id"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HandleComponent, "handle", never, { "position": { "alias": "position"; "required": true; }; "type": { "alias": "type"; "required": true; }; "id": { "alias": "id"; "required": false; }; "template": { "alias": "template"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -1,12 +1,13 @@
-import { AfterViewInit, ElementRef, Injector, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { AfterViewInit, ElementRef, NgZone, 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 { WithInjectorDirective } 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 {
+export declare class NodeComponent extends WithInjectorDirective implements OnInit, AfterViewInit, OnDestroy {
     protected handleService: HandleService;
-    protected injector: Injector;
+    protected zone: NgZone;
     nodeModel: NodeModel;
     nodeHtmlTemplate?: TemplateRef<any>;
     nodeContentRef: ElementRef<SVGGraphicsElement>;
@@ -16,8 +17,7 @@ export declare class NodeComponent implements OnInit, AfterViewInit, OnDestroy {
     private flowEntitiesService;
     private hostRef;
     protected showMagnet: import("@angular/core").Signal<boolean>;
-    private sourceHanldeState;
-    private targetHandleState;
+    private subscription;
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -30,7 +30,8 @@ export declare class NodeComponent implements OnInit, AfterViewInit, OnDestroy {
     /**
      * TODO srp
      */
-    protected resetValidateTargetHandle(): void;
+    protected resetValidateTargetHandle(targetHandle: HandleModel): void;
+    private setInitialHandles;
     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>;
 }

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

@@ -126,8 +126,12 @@ export declare class VflowComponent {
      * @param id node id
      */
     getNode<T = unknown>(id: string): Node<T> | undefined;
-    protected trackNodes(idx: number, { node }: NodeModel): string;
-    protected trackEdges(idx: number, { edge }: EdgeModel): string;
+    /**
+     * Sync method to get detached edges
+     */
+    getDetachedEdges(): Edge[];
+    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; }; "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"; "onEdgesChange": "onEdgesChange"; }; }]>;
     static ngAcceptInputType_connection: i3.ConnectionSettings;

package/lib/vflow/decorators/microtask.decorator.d.ts

@@ -0,0 +1 @@
+export declare function Microtask(target: any, key: string, descriptor: TypedPropertyDescriptor<(...args: any[]) => void>): TypedPropertyDescriptor<(...args: any[]) => void>;

package/lib/vflow/decorators/run-in-injection-context.decorator.d.ts

@@ -0,0 +1,8 @@
+import { Injector } from "@angular/core";
+import * as i0 from "@angular/core";
+export declare function InjectionContext(target: any, key: string, descriptor: PropertyDescriptor): PropertyDescriptor;
+export declare abstract class WithInjectorDirective {
+    readonly injector: Injector;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WithInjectorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WithInjectorDirective, never, never, {}, {}, never, never, false, never>;
+}

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

@@ -0,0 +1,10 @@
+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;
+    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>;
+}

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

@@ -4,11 +4,29 @@ import { EdgeLabelModel } from "./edge-label.model";
 import { NodeModel } from "./node.model";
 export declare class EdgeModel {
     edge: Edge;
-    source: NodeModel;
-    target: NodeModel;
+    source: import("@angular/core").WritableSignal<NodeModel<unknown> | undefined>;
+    target: import("@angular/core").WritableSignal<NodeModel<unknown> | undefined>;
     curve: Curve;
     type: EdgeType;
-    path: import("@angular/core").Signal<import("../interfaces/path-data.interface").PathData>;
+    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;
+            };
+        };
+    }>;
     edgeLabels: {
         [position in EdgeLabelPosition]?: EdgeLabelModel;
     };

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

@@ -1,9 +1,14 @@
 import { NodeHandle } from "../services/handle.service";
 import { NodeModel } from "./node.model";
+export type HandleState = 'valid' | 'invalid' | 'idle';
 export declare class HandleModel {
     rawHandle: NodeHandle;
     private parentNode;
     readonly strokeWidth = 2;
+    /**
+     * Pre-computed size for default handle, changed dynamically
+     * for custom handles
+     */
     size: import("@angular/core").WritableSignal<{
         width: number;
         height: number;
@@ -20,5 +25,33 @@ export declare class HandleModel {
         x: number;
         y: number;
     }>;
+    state: import("@angular/core").WritableSignal<HandleState>;
+    private updateParentSizeAndPosition$;
+    parentSize: import("@angular/core").Signal<{
+        width: number;
+        height: number;
+    } | {
+        width: number;
+        height: number;
+    }>;
+    parentPosition: import("@angular/core").Signal<{
+        x: number;
+        y: number;
+    } | {
+        x: number;
+        y: number;
+    }>;
+    parentReference: HTMLElement;
+    template: import("@angular/core").TemplateRef<any> | undefined;
+    templateContext: {
+        $implicit: {
+            point: import("@angular/core").Signal<{
+                x: number;
+                y: number;
+            }>;
+            state: import("@angular/core").WritableSignal<HandleState>;
+        };
+    };
     constructor(rawHandle: NodeHandle, parentNode: NodeModel);
+    updateParent(): void;
 }

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

@@ -1,6 +1,5 @@
 import { Node } from '../interfaces/node.interface';
 import { FlowModel } from './flow.model';
-import { NodeHandle } from '../services/handle.service';
 import { HandleModel } from './handle.model';
 export declare class NodeModel<T = unknown> {
     node: Node<T>;
@@ -19,8 +18,8 @@ export declare class NodeModel<T = unknown> {
     pointTransform: import("@angular/core").Signal<string>;
     sourcePosition: import("@angular/core").Signal<import("ngx-vflow").Position>;
     targetPosition: import("@angular/core").Signal<import("ngx-vflow").Position>;
-    handles: import("@angular/core").Signal<HandleModel[]>;
-    rawHandles: import("@angular/core").WritableSignal<NodeHandle[]>;
+    handles: import("@angular/core").WritableSignal<HandleModel[]>;
+    handles$: import("rxjs").Observable<HandleModel[]>;
     draggable: boolean;
     readonly magnetRadius = 20;
     private flow;

package/lib/vflow/services/flow-entities.service.d.ts

@@ -10,6 +10,7 @@ export declare class FlowEntitiesService {
     readonly markers: import("@angular/core").Signal<Map<number, Marker>>;
     readonly validEdges: import("@angular/core").Signal<EdgeModel[]>;
     getNode<T>(id: string): NodeModel<T> | undefined;
+    getDetachedEdges(): EdgeModel[];
     static ɵfac: i0.ɵɵFactoryDeclaration<FlowEntitiesService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<FlowEntitiesService>;
 }

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

@@ -1,22 +1,20 @@
-import { Signal } from '@angular/core';
+import { TemplateRef } from '@angular/core';
 import { Position } from '../types/position.type';
 import { HandleType } from '../types/handle-type.type';
-import { Point } from '../interfaces/point.interface';
+import { NodeModel } from '../models/node.model';
+import { HandleModel } from '../models/handle.model';
 import * as i0 from "@angular/core";
 export interface NodeHandle {
     position: Position;
     type: HandleType;
-    parentPosition: Signal<Point>;
-    parentSize: Signal<{
-        width: number;
-        height: number;
-    }>;
     id?: string;
+    parentReference?: HTMLElement;
+    template?: TemplateRef<any>;
 }
 export declare class HandleService {
-    readonly handles: import("@angular/core").WritableSignal<NodeHandle[]>;
-    createHandle(newHandle: NodeHandle): void;
-    destroyHandle(handleToDestoy: NodeHandle): void;
+    readonly node: import("@angular/core").WritableSignal<NodeModel<unknown> | null>;
+    createHandle(newHandle: HandleModel): void;
+    destroyHandle(handleToDestoy: HandleModel): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<HandleService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<HandleService>;
 }

package/lib/vflow/types/edge-change.type.d.ts

@@ -1,4 +1,7 @@
 export type EdgeChange = EdgeDetachedChange | EdgeAddChange | EdgeRemoveChange;
+/**
+ * @experimental
+ */
 export interface EdgeDetachedChange extends EdgeChangeShared {
     type: 'detached';
 }

package/lib/vflow/utils/resizable.d.ts

@@ -0,0 +1,3 @@
+import { NgZone } from "@angular/core";
+import { Observable } from "rxjs";
+export declare function resizable(elems: Element[], zone: NgZone): Observable<ResizeObserverEntry[]>;

package/lib/vflow/vflow.module.d.ts

@@ -10,10 +10,11 @@ import * as i8 from "./directives/space-point-context.directive";
 import * as i9 from "./directives/map-context.directive";
 import * as i10 from "./directives/reference.directive";
 import * as i11 from "./directives/root-svg-context.directive";
-import * as i12 from "./directives/template.directive";
-import * as i13 from "@angular/common";
+import * as i12 from "./directives/handle-size-controller.directive";
+import * as i13 from "./directives/template.directive";
+import * as i14 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.SpacePointContextDirective, typeof i9.MapContextDirective, typeof i10.RootSvgReferenceDirective, typeof i11.RootSvgContextDirective, typeof i12.NodeHtmlTemplateDirective, typeof i12.EdgeLabelHtmlTemplateDirective, typeof i12.EdgeTemplateDirective, typeof i12.ConnectionTemplateDirective, typeof i12.HandleTemplateDirective], [typeof i13.CommonModule], [typeof i1.VflowComponent, typeof i6.HandleComponent, typeof i12.NodeHtmlTemplateDirective, typeof i12.EdgeLabelHtmlTemplateDirective, typeof i12.EdgeTemplateDirective, typeof i12.ConnectionTemplateDirective, typeof i12.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.SpacePointContextDirective, typeof i9.MapContextDirective, typeof i10.RootSvgReferenceDirective, typeof i11.RootSvgContextDirective, typeof i12.HandleSizeControllerDirective, typeof i13.NodeHtmlTemplateDirective, typeof i13.EdgeLabelHtmlTemplateDirective, typeof i13.EdgeTemplateDirective, typeof i13.ConnectionTemplateDirective, typeof i13.HandleTemplateDirective], [typeof i14.CommonModule], [typeof i1.VflowComponent, typeof i6.HandleComponent, typeof i13.NodeHtmlTemplateDirective, typeof i13.EdgeLabelHtmlTemplateDirective, typeof i13.EdgeTemplateDirective, typeof i13.ConnectionTemplateDirective, typeof i13.HandleTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<VflowModule>;
 }

package/package.json

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