ngx-vflow 0.15.0 → 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/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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-vflow",
-  "version": "0.15.0",
+  "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",