ngx-vflow 1.5.0 → 1.6.1

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

@@ -1,5 +1,6 @@
 import { TemplateRef } from '@angular/core';
 import { ConnectionModel } from '../../models/connection.model';
+import { ConnectionContext } from '../../interfaces/template-context.interface';
 import * as i0 from "@angular/core";
 export declare class ConnectionComponent {
     model: import("@angular/core").InputSignal<ConnectionModel>;
@@ -9,12 +10,7 @@ export declare class ConnectionComponent {
     protected path: import("@angular/core").Signal<string | null>;
     protected markerUrl: import("@angular/core").Signal<string>;
     protected readonly defaultColor = "rgb(177, 177, 183)";
-    protected getContext(): {
-        $implicit: {
-            path: import("@angular/core").Signal<string | null>;
-            marker: import("@angular/core").Signal<string>;
-        };
-    };
+    protected getContext(): ConnectionContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConnectionComponent, 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/edge/edge.component.d.ts

@@ -1,9 +1,9 @@
-import { ElementRef, Injector, OnInit, TemplateRef } from '@angular/core';
+import { Injector, TemplateRef } from '@angular/core';
 import { EdgeModel } from '../../models/edge.model';
 import { EdgeContext } from '../../interfaces/template-context.interface';
 import { HandleModel } from '../../models/handle.model';
 import * as i0 from "@angular/core";
-export declare class EdgeComponent implements OnInit {
+export declare class EdgeComponent {
     protected injector: Injector;
     private selectionService;
     private flowSettingsService;
@@ -13,12 +13,7 @@ export declare class EdgeComponent implements OnInit {
     model: import("@angular/core").InputSignal<EdgeModel>;
     edgeTemplate: import("@angular/core").InputSignal<TemplateRef<EdgeContext> | undefined>;
     edgeLabelHtmlTemplate: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
-    interactiveEdgeRef: import("@angular/core").Signal<ElementRef<Element>>;
-    protected markerStartUrl: import("@angular/core").Signal<string>;
-    protected markerEndUrl: import("@angular/core").Signal<string>;
     protected isReconnecting: import("@angular/core").Signal<boolean>;
-    protected edgeContext: EdgeContext;
-    ngOnInit(): void;
     select(): void;
     pull(): void;
     protected startReconnection(event: Event, handle: HandleModel): void;

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

@@ -1,6 +1,7 @@
 import { AfterViewInit, ElementRef, TemplateRef } from '@angular/core';
 import { EdgeLabelModel } from '../../models/edge-label.model';
 import { EdgeModel } from '../../models/edge.model';
+import { HtmlEdgeLabelContext } from '../../interfaces/template-context.interface';
 import * as i0 from "@angular/core";
 export declare class EdgeLabelComponent implements AfterViewInit {
     private zone;
@@ -25,12 +26,7 @@ export declare class EdgeLabelComponent implements AfterViewInit {
     }>;
     protected edgeLabelStyle: import("@angular/core").Signal<Partial<CSSStyleDeclaration> | null>;
     ngAfterViewInit(): void;
-    protected getLabelContext(): {
-        $implicit: {
-            edge: import("ngx-vflow").Edge<unknown>;
-            label: import("ngx-vflow").EdgeLabel;
-        };
-    };
+    protected getLabelContext(): HtmlEdgeLabelContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeLabelComponent, 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/directives/template.directive.d.ts

@@ -1,28 +1,33 @@
 import { TemplateRef } from '@angular/core';
-import { EdgeContext } from '../interfaces/template-context.interface';
+import { ConnectionContext, EdgeContext, GroupNodeContext, HtmlEdgeLabelContext, NodeContext } from '../interfaces/template-context.interface';
 import * as i0 from "@angular/core";
 export declare class EdgeTemplateDirective {
     templateRef: TemplateRef<EdgeContext>;
+    static ngTemplateContextGuard(dir: EdgeTemplateDirective, ctx: unknown): ctx is EdgeContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeTemplateDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<EdgeTemplateDirective, "ng-template[edge]", never, {}, {}, never, never, true, never>;
 }
 export declare class ConnectionTemplateDirective {
     templateRef: TemplateRef<any>;
+    static ngTemplateContextGuard(dir: ConnectionTemplateDirective, ctx: unknown): ctx is ConnectionContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConnectionTemplateDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ConnectionTemplateDirective, "ng-template[connection]", never, {}, {}, never, never, true, never>;
 }
 export declare class EdgeLabelHtmlTemplateDirective {
     templateRef: TemplateRef<any>;
+    static ngTemplateContextGuard(dir: EdgeLabelHtmlTemplateDirective, ctx: unknown): ctx is HtmlEdgeLabelContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeLabelHtmlTemplateDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<EdgeLabelHtmlTemplateDirective, "ng-template[edgeLabelHtml]", never, {}, {}, never, never, true, never>;
 }
 export declare class NodeHtmlTemplateDirective {
     templateRef: TemplateRef<any>;
+    static ngTemplateContextGuard(dir: NodeHtmlTemplateDirective, ctx: unknown): ctx is NodeContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<NodeHtmlTemplateDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NodeHtmlTemplateDirective, "ng-template[nodeHtml]", never, {}, {}, never, never, true, never>;
 }
 export declare class GroupNodeTemplateDirective {
     templateRef: TemplateRef<any>;
+    static ngTemplateContextGuard(dir: GroupNodeTemplateDirective, ctx: unknown): ctx is GroupNodeContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<GroupNodeTemplateDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<GroupNodeTemplateDirective, "ng-template[groupNode]", never, {}, {}, never, never, true, never>;
 }

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

@@ -0,0 +1,5 @@
+export interface Contextable<T extends {
+    $implicit: unknown;
+}> {
+    context: T;
+}

package/lib/vflow/interfaces/template-context.interface.d.ts

@@ -1,11 +1,47 @@
 import { Signal } from '@angular/core';
 import { Edge } from './edge.interface';
+import { HtmlTemplateEdgeLabel } from './edge-label.interface';
+import { Point } from './point.interface';
+import { HandleState } from '../models/handle.model';
 export interface EdgeContext {
     $implicit: {
-        edge: Edge;
+        edge: Edge<any>;
         path: Signal<string>;
         markerStart: Signal<string>;
         markerEnd: Signal<string>;
         selected: Signal<boolean>;
     };
 }
+export interface NodeContext {
+    $implicit: {
+        node: any;
+        selected: Signal<boolean>;
+    };
+}
+export interface GroupNodeContext {
+    $implicit: {
+        node: any;
+        selected: Signal<boolean>;
+        width: Signal<number>;
+        height: Signal<number>;
+    };
+}
+export interface ConnectionContext {
+    $implicit: {
+        path: Signal<string | null>;
+        marker: Signal<string>;
+    };
+}
+export interface HtmlEdgeLabelContext {
+    $implicit: {
+        edge: Edge<any>;
+        label: HtmlTemplateEdgeLabel<any>;
+    };
+}
+export interface HandleContext {
+    $implicit: {
+        point: Signal<Point>;
+        state: Signal<HandleState>;
+        node: any;
+    };
+}

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

@@ -3,7 +3,9 @@ import { Edge, Curve, EdgeType } from '../interfaces/edge.interface';
 import { EdgeLabelModel } from './edge-label.model';
 import { NodeModel } from './node.model';
 import { FlowEntity } from '../interfaces/flow-entity.interface';
-export declare class EdgeModel implements FlowEntity {
+import { Contextable } from '../interfaces/contextable.interface';
+import { EdgeContext } from '../interfaces/template-context.interface';
+export declare class EdgeModel implements FlowEntity, Contextable<EdgeContext> {
     edge: Edge;
     source: import("@angular/core").WritableSignal<NodeModel<unknown> | undefined>;
     target: import("@angular/core").WritableSignal<NodeModel<unknown> | undefined>;
@@ -18,6 +20,23 @@ export declare class EdgeModel implements FlowEntity {
     path: import("@angular/core").Signal<import("../interfaces/path-data.interface").PathData>;
     sourceHandle: import("@angular/core").Signal<import("./handle.model").HandleModel | null>;
     targetHandle: import("@angular/core").Signal<import("./handle.model").HandleModel | null>;
+    /**
+     * TODO: not reactive
+     */
+    markerStartUrl: import("@angular/core").Signal<string>;
+    /**
+     * TODO: not reactive
+     */
+    markerEndUrl: import("@angular/core").Signal<string>;
+    context: {
+        $implicit: {
+            edge: Edge<unknown>;
+            path: import("@angular/core").Signal<string>;
+            markerStart: import("@angular/core").Signal<string>;
+            markerEnd: import("@angular/core").Signal<string>;
+            selected: import("@angular/core").Signal<boolean>;
+        };
+    };
     edgeLabels: {
         [position in EdgeLabelPosition]?: EdgeLabelModel;
     };

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

@@ -3,7 +3,11 @@ 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 {
+import { Contextable } from '../interfaces/contextable.interface';
+import { GroupNodeContext, NodeContext } from '../interfaces/template-context.interface';
+export declare class NodeModel<T = unknown> implements FlowEntity, Contextable<NodeContext | GroupNodeContext | {
+    $implicit: object;
+}> {
     node: Node<T> | DynamicNode<T>;
     private static defaultWidth;
     private static defaultHeight;
@@ -57,6 +61,9 @@ export declare class NodeModel<T = unknown> implements FlowEntity {
     resizable: import("@angular/core").WritableSignal<boolean>;
     resizing: import("@angular/core").WritableSignal<boolean>;
     resizerTemplate: import("@angular/core").WritableSignal<TemplateRef<unknown> | null>;
+    context: {
+        $implicit: {};
+    };
     private parentId;
     constructor(node: Node<T> | DynamicNode<T>);
     setPoint(point: Point): void;

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

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+export declare class CustomTemplateEdgeComponent {
+    private edge;
+    private flowSettingsService;
+    private edgeRenderingService;
+    protected model: import("../../models/edge.model").EdgeModel;
+    protected context: {
+        edge: import("ngx-vflow").Edge<unknown>;
+        path: import("@angular/core").Signal<string>;
+        markerStart: import("@angular/core").Signal<string>;
+        markerEnd: import("@angular/core").Signal<string>;
+        selected: import("@angular/core").Signal<boolean>;
+    };
+    protected pull(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomTemplateEdgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomTemplateEdgeComponent, "g[customTemplateEdge]", never, {}, {}, never, ["*"], true, never>;
+}

package/lib/vflow/vflow.d.ts

@@ -2,9 +2,10 @@ import { VflowComponent } from './components/vflow/vflow.component';
 import { DragHandleDirective } from './directives/drag-handle.directive';
 import { SelectableDirective } from './directives/selectable.directive';
 import { ConnectionTemplateDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, HandleTemplateDirective, NodeHtmlTemplateDirective } from './directives/template.directive';
+import { ConnectionControllerDirective } from './directives/connection-controller.directive';
 import { MiniMapComponent } from './public-components/minimap/minimap.component';
 import { NodeToolbarComponent } from './public-components/node-toolbar/node-toolbar.component';
 import { ResizableComponent } from './public-components/resizable/resizable.component';
 import { HandleComponent } from './public-components/handle/handle.component';
-import { ConnectionControllerDirective } from './directives/connection-controller.directive';
-export declare const Vflow: readonly [typeof VflowComponent, typeof HandleComponent, typeof ResizableComponent, typeof SelectableDirective, typeof MiniMapComponent, typeof NodeToolbarComponent, typeof DragHandleDirective, typeof ConnectionControllerDirective, typeof NodeHtmlTemplateDirective, typeof GroupNodeTemplateDirective, typeof EdgeLabelHtmlTemplateDirective, typeof EdgeTemplateDirective, typeof ConnectionTemplateDirective, typeof HandleTemplateDirective];
+import { CustomTemplateEdgeComponent } from './public-components/custom-template-edge/custom-template-edge.component';
+export declare const Vflow: readonly [typeof VflowComponent, typeof HandleComponent, typeof ResizableComponent, typeof SelectableDirective, typeof MiniMapComponent, typeof NodeToolbarComponent, typeof CustomTemplateEdgeComponent, typeof DragHandleDirective, typeof ConnectionControllerDirective, typeof NodeHtmlTemplateDirective, typeof GroupNodeTemplateDirective, typeof EdgeLabelHtmlTemplateDirective, typeof EdgeTemplateDirective, typeof ConnectionTemplateDirective, typeof HandleTemplateDirective];

package/package.json

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

package/public-api.d.ts

@@ -24,6 +24,7 @@ export * from './lib/vflow/public-components/custom-dynamic-node/custom-dynamic-
 export * from './lib/vflow/public-components/resizable/resizable.component';
 export * from './lib/vflow/public-components/minimap/minimap.component';
 export * from './lib/vflow/public-components/node-toolbar/node-toolbar.component';
+export * from './lib/vflow/public-components/custom-template-edge/custom-template-edge.component';
 export * from './lib/vflow/directives/template.directive';
 export * from './lib/vflow/directives/connection-controller.directive';
 export * from './lib/vflow/directives/changes-controller.directive';