ngx-vflow 0.14.1 → 0.16.0

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

@@ -9,6 +9,19 @@ 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;
+    } | {
+        width: number;
+        height: number;
+    }>;
+    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();

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

@@ -1,12 +1,13 @@
-import { Injector, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { Injector, OnInit, TemplateRef } from '@angular/core';
 import { Position } from '../../types/position.type';
 import { HandleModel } from '../../models/handle.model';
 import { WithInjector } from '../../decorators/run-in-injection-context.decorator';
 import * as i0 from "@angular/core";
-export declare class HandleComponent implements OnInit, OnDestroy, WithInjector {
+export declare class HandleComponent implements OnInit, WithInjector {
     injector: Injector;
     private handleService;
     private element;
+    private destroyRef;
     /**
      * At what side of node this component should be placed
      */
@@ -22,7 +23,6 @@ export declare class HandleComponent implements OnInit, OnDestroy, WithInjector
     template?: TemplateRef<any>;
     model: HandleModel;
     ngOnInit(): void;
-    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; }; "template": { "alias": "template"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -15,6 +15,7 @@ export declare class NodeComponent implements OnInit, AfterViewInit, OnDestroy,
     private hostRef;
     private connectionController;
     private nodeAccessor;
+    private overlaysService;
     private zone;
     nodeModel: NodeModel;
     nodeTemplate?: TemplateRef<any>;
@@ -24,6 +25,7 @@ export declare class NodeComponent implements OnInit, AfterViewInit, OnDestroy,
     protected showMagnet: import("@angular/core").Signal<boolean>;
     protected styleWidth: import("@angular/core").Signal<string>;
     protected styleHeight: import("@angular/core").Signal<string>;
+    protected toolbar: import("@angular/core").Signal<import("../../models/toolbar.model").ToolbarModel | undefined>;
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

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

@@ -80,6 +80,8 @@ export declare class VflowComponent implements OnInit {
      */
     set nodes(newNodes: Node[] | DynamicNode[]);
     protected nodeModels: Signal<NodeModel<unknown>[]>;
+    protected groups: Signal<NodeModel<unknown>[]>;
+    protected nonGroups: Signal<NodeModel<unknown>[]>;
     /**
      * Edges to render
      */

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

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class DragHandleDirective {
+    private nodeAccessor;
+    private get model();
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DragHandleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DragHandleDirective, "[dragHandle]", never, {}, {}, never, never, false, never>;
+}

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

@@ -17,8 +17,9 @@ export declare class MapContextDirective implements OnInit {
     protected zoomBehavior: ZoomBehavior<SVGSVGElement, unknown>;
     ngOnInit(): void;
     private handleZoom;
-    private onD3zoomStart;
-    private onD3zoomEnd;
+    private handleZoomStart;
+    private handleZoomEnd;
+    private filterCondition;
     static ɵfac: i0.ɵɵFactoryDeclaration<MapContextDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MapContextDirective, "g[mapContext]", never, {}, {}, never, never, false, never>;
 }

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;

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

@@ -1,3 +1,16 @@
 export interface Optimization {
+    /**
+     * If true, compute the right nodes order by z-axis inside groups on initial render.
+     *
+     * @default true
+     * @deprecated
+     */
     computeLayersOnInit: boolean;
+    /**
+     * If true, the layer with groups will be placed behind the edges layer.
+     * This approach fixes the issue when you can't select an edge inside group.
+     *
+     * @default false
+     */
+    detachedGroupsLayer: boolean;
 }

package/lib/vflow/math/edge-path/smooth-step-path.d.ts

@@ -0,0 +1,5 @@
+import { PathData } from '../../interfaces/path-data.interface';
+import { Point } from '../../interfaces/point.interface';
+import { Position } from '../../types/position.type';
+export declare function getEdgeCenter(source: Point, target: Point): [number, number, number, number];
+export declare function smoothStepPath(source: Point, target: Point, sourcePosition: Position, targetPosition: Position, borderRadius?: number): PathData;

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

@@ -38,6 +38,7 @@ export declare class NodeModel<T = unknown> implements FlowEntity {
     handles: import("@angular/core").WritableSignal<HandleModel[]>;
     handles$: import("rxjs").Observable<HandleModel[]>;
     draggable: import("@angular/core").WritableSignal<boolean>;
+    dragHandlesCount: import("@angular/core").WritableSignal<number>;
     readonly magnetRadius = 20;
     isComponentType: boolean;
     text: Signal<string>;

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

@@ -0,0 +1,19 @@
+import { TemplateRef } from "@angular/core";
+import { Position } from "../types/position.type";
+import { NodeModel } from "./node.model";
+export declare class ToolbarModel {
+    node: NodeModel;
+    position: import("@angular/core").WritableSignal<Position>;
+    template: import("@angular/core").WritableSignal<TemplateRef<unknown> | null>;
+    offset: import("@angular/core").WritableSignal<number>;
+    point: import("@angular/core").Signal<{
+        x: number;
+        y: number;
+    }>;
+    transform: import("@angular/core").Signal<string>;
+    size: import("@angular/core").WritableSignal<{
+        width: number;
+        height: number;
+    }>;
+    constructor(node: NodeModel);
+}

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

@@ -0,0 +1,22 @@
+import { OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { Position } from '../../types/position.type';
+import { ToolbarModel } from '../../models/toolbar.model';
+import * as i0 from "@angular/core";
+export declare class NodeToolbarComponent implements OnInit, OnDestroy {
+    private overlaysService;
+    private nodeService;
+    set position(value: Position);
+    toolbarContentTemplate: TemplateRef<unknown>;
+    protected model: ToolbarModel;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NodeToolbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NodeToolbarComponent, "node-toolbar", never, { "position": { "alias": "position"; "required": false; }; }, {}, never, ["*"], false, never>;
+}
+export declare class NodeToolbarWrapperDirective implements OnInit {
+    private element;
+    model: ToolbarModel;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NodeToolbarWrapperDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NodeToolbarWrapperDirective, "[nodeToolbarWrapper]", never, { "model": { "alias": "model"; "required": false; }; }, {}, never, never, false, never>;
+}

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

@@ -29,11 +29,6 @@ export declare class DraggableService {
      * @returns
      */
     private getDragBehavior;
-    /**
-     * Specify ignoring drag behavior. It's responsible for not moving the map when user tries to drag node
-     * with disabled drag behavior
-     */
-    private getIgnoreDragBehavior;
     private getDragNodes;
     static ɵfac: i0.ɵɵFactoryDeclaration<DraggableService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DraggableService>;

package/lib/vflow/services/node-rendering.service.d.ts

@@ -3,6 +3,8 @@ import * as i0 from "@angular/core";
 export declare class NodeRenderingService {
     private flowEntitiesService;
     readonly nodes: import("@angular/core").Signal<NodeModel<unknown>[]>;
+    readonly groups: import("@angular/core").Signal<NodeModel<unknown>[]>;
+    readonly nonGroups: import("@angular/core").Signal<NodeModel<unknown>[]>;
     private maxOrder;
     pullNode(node: NodeModel): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NodeRenderingService, never>;

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

@@ -0,0 +1,11 @@
+import { ToolbarModel } from '../models/toolbar.model';
+import { NodeModel } from '../models/node.model';
+import * as i0 from "@angular/core";
+export declare class OverlaysService {
+    private toolbars;
+    nodeToolbars: import("@angular/core").Signal<Map<NodeModel<unknown>, ToolbarModel>>;
+    addToolbar(toolbar: ToolbarModel): void;
+    removeToolbar(toolbar: ToolbarModel): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OverlaysService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<OverlaysService>;
+}

package/lib/vflow/testing-utils/provide-custom-node-mocks.d.ts

@@ -0,0 +1,2 @@
+import { Provider } from "@angular/core";
+export declare function provideCustomNodeMocks(): Provider[];

package/lib/vflow/types/background.type.d.ts

@@ -1,4 +1,4 @@
-export type Background = ColorBackground | DotsBackground;
+export type Background = ColorBackground | DotsBackground | ImageBackground;
 export interface ColorBackground {
     type: 'solid';
     color: string;
@@ -22,3 +22,26 @@ export interface DotsBackground {
      */
     backgroundColor?: string;
 }
+export interface ImageBackground {
+    type: 'image';
+    /**
+     * Path to image. Passes as a href to this element:
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image
+     */
+    src: string;
+    /**
+     * If true, image will be fixed on the background (not moving with the flow, zoom also doesn't affect it)
+     */
+    fixed?: boolean;
+    /**
+     * If true, image will be repeated
+     */
+    repeat?: boolean;
+    /**
+     * Scale relative to natural image size.
+     *
+     * For example, if image is 100x100 and scale is 0.5, it will be rendered as 50x50
+     */
+    scale?: number;
+}

package/lib/vflow/utils/is-group-node.d.ts

@@ -0,0 +1,2 @@
+import { NodeModel } from "../models/node.model";
+export declare function isGroupNode(node: NodeModel): boolean;

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

@@ -10,19 +10,21 @@ import * as i8 from "./components/defs/defs.component";
 import * as i9 from "./components/background/background.component";
 import * as i10 from "./public-components/resizable/resizable.component";
 import * as i11 from "./public-components/minimap/minimap.component";
-import * as i12 from "./directives/space-point-context.directive";
-import * as i13 from "./directives/map-context.directive";
-import * as i14 from "./directives/reference.directive";
-import * as i15 from "./directives/root-svg-context.directive";
-import * as i16 from "./directives/handle-size-controller.directive";
-import * as i17 from "./directives/selectable.directive";
-import * as i18 from "./directives/pointer.directive";
-import * as i19 from "./directives/root-pointer.directive";
-import * as i20 from "./directives/flow-size-controller.directive";
-import * as i21 from "./directives/template.directive";
-import * as i22 from "@angular/common";
+import * as i12 from "./public-components/node-toolbar/node-toolbar.component";
+import * as i13 from "./directives/space-point-context.directive";
+import * as i14 from "./directives/map-context.directive";
+import * as i15 from "./directives/reference.directive";
+import * as i16 from "./directives/root-svg-context.directive";
+import * as i17 from "./directives/handle-size-controller.directive";
+import * as i18 from "./directives/selectable.directive";
+import * as i19 from "./directives/drag-handle.directive";
+import * as i20 from "./directives/pointer.directive";
+import * as i21 from "./directives/root-pointer.directive";
+import * as i22 from "./directives/flow-size-controller.directive";
+import * as i23 from "./directives/template.directive";
+import * as i24 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.DefaultNodeComponent, typeof i4.EdgeComponent, typeof i5.EdgeLabelComponent, typeof i6.ConnectionComponent, typeof i7.HandleComponent, typeof i8.DefsComponent, typeof i9.BackgroundComponent, typeof i10.ResizableComponent, typeof i11.MiniMapComponent, typeof i12.SpacePointContextDirective, typeof i13.MapContextDirective, typeof i14.RootSvgReferenceDirective, typeof i15.RootSvgContextDirective, typeof i16.HandleSizeControllerDirective, typeof i17.SelectableDirective, typeof i18.PointerDirective, typeof i19.RootPointerDirective, typeof i20.FlowSizeControllerDirective, typeof i21.NodeHtmlTemplateDirective, typeof i21.GroupNodeTemplateDirective, typeof i21.EdgeLabelHtmlTemplateDirective, typeof i21.EdgeTemplateDirective, typeof i21.ConnectionTemplateDirective, typeof i21.HandleTemplateDirective], [typeof i22.NgIf, typeof i22.NgForOf, typeof i22.NgTemplateOutlet, typeof i22.NgComponentOutlet, typeof i22.KeyValuePipe], [typeof i1.VflowComponent, typeof i7.HandleComponent, typeof i10.ResizableComponent, typeof i17.SelectableDirective, typeof i11.MiniMapComponent, typeof i21.NodeHtmlTemplateDirective, typeof i21.GroupNodeTemplateDirective, typeof i21.EdgeLabelHtmlTemplateDirective, typeof i21.EdgeTemplateDirective, typeof i21.ConnectionTemplateDirective, typeof i21.HandleTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<VflowModule, [typeof i1.VflowComponent, typeof i2.NodeComponent, typeof i3.DefaultNodeComponent, typeof i4.EdgeComponent, typeof i5.EdgeLabelComponent, typeof i6.ConnectionComponent, typeof i7.HandleComponent, typeof i8.DefsComponent, typeof i9.BackgroundComponent, typeof i10.ResizableComponent, typeof i11.MiniMapComponent, typeof i12.NodeToolbarComponent, typeof i13.SpacePointContextDirective, typeof i14.MapContextDirective, typeof i15.RootSvgReferenceDirective, typeof i16.RootSvgContextDirective, typeof i17.HandleSizeControllerDirective, typeof i18.SelectableDirective, typeof i19.DragHandleDirective, typeof i20.PointerDirective, typeof i21.RootPointerDirective, typeof i22.FlowSizeControllerDirective, typeof i12.NodeToolbarWrapperDirective, typeof i23.NodeHtmlTemplateDirective, typeof i23.GroupNodeTemplateDirective, typeof i23.EdgeLabelHtmlTemplateDirective, typeof i23.EdgeTemplateDirective, typeof i23.ConnectionTemplateDirective, typeof i23.HandleTemplateDirective], [typeof i24.NgIf, typeof i24.NgForOf, typeof i24.NgTemplateOutlet, typeof i24.NgComponentOutlet, typeof i24.KeyValuePipe], [typeof i1.VflowComponent, typeof i7.HandleComponent, typeof i10.ResizableComponent, typeof i18.SelectableDirective, typeof i11.MiniMapComponent, typeof i12.NodeToolbarComponent, typeof i19.DragHandleDirective, typeof i23.NodeHtmlTemplateDirective, typeof i23.GroupNodeTemplateDirective, typeof i23.EdgeLabelHtmlTemplateDirective, typeof i23.EdgeTemplateDirective, typeof i23.ConnectionTemplateDirective, typeof i23.HandleTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<VflowModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-vflow",
-  "version": "0.14.1",
+  "version": "0.16.0",
   "license": "MIT",
   "homepage": "https://www.ngx-vflow.org/",
   "author": "Artem Mangilev",
@@ -16,8 +16,8 @@
     "type": "git"
   },
   "peerDependencies": {
-    "@angular/common": "^16.2.0 || 17.x || 18.x",
-    "@angular/core": "^16.2.0 || 17.x || 18.x",
+    "@angular/common": "^16.2.0 || 17.x || 18.x || 19.x",
+    "@angular/core": "^16.2.0 || 17.x || 18.x || 19.x",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",

package/public-api.d.ts

@@ -24,7 +24,10 @@ export * from './lib/vflow/public-components/custom-node/custom-node.component';
 export * from './lib/vflow/public-components/custom-dynamic-node/custom-dynamic-node.component';
 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/directives/template.directive';
 export * from './lib/vflow/directives/connection-controller.directive';
 export * from './lib/vflow/directives/changes-controller.directive';
 export * from './lib/vflow/directives/selectable.directive';
+export * from './lib/vflow/directives/drag-handle.directive';
+export * from './lib/vflow/testing-utils/provide-custom-node-mocks';