ngx-vflow 1.11.0 → 1.12.0

package/lib/vflow/components/preview-flow/draw-node.d.ts

@@ -0,0 +1,2 @@
+import { NodeModel } from '../../models/node.model';
+export declare function drawNode(ctx: CanvasRenderingContext2D, node: NodeModel): void;

package/lib/vflow/components/preview-flow/preview-flow.component.d.ts

@@ -0,0 +1,15 @@
+import * as i0 from "@angular/core";
+export declare class PreviewFlowComponent {
+    private viewportService;
+    private renderStrategy;
+    private nodeRenderingService;
+    private renderer2;
+    private element;
+    private ctx;
+    readonly width: import("@angular/core").InputSignal<number>;
+    readonly height: import("@angular/core").InputSignal<number>;
+    private readonly dpr;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<PreviewFlowComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PreviewFlowComponent, "canvas[previewFlow]", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

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

@@ -52,7 +52,7 @@ export declare class VflowComponent {
      * Background for flow
      */
     set background(value: Background | string);
-    optimization: import("@angular/core").InputSignal<Optimization>;
+    set optimization(newOptimization: Optimization);
     /**
      * Global rule if you can or can't select entities
      */
@@ -132,6 +132,9 @@ export declare class VflowComponent {
     readonly edgesChange$: import("rxjs").Observable<EdgeChange[]>;
     protected markers: import("@angular/core").Signal<Map<number, import("ngx-vflow").Marker>>;
     protected minimap: import("@angular/core").WritableSignal<import("../../models/minimap.model").MinimapModel | null>;
+    protected flowOptimization: import("@angular/core").WritableSignal<Required<Optimization>>;
+    protected flowWidth: import("@angular/core").WritableSignal<number>;
+    protected flowHeight: import("@angular/core").WritableSignal<number>;
     /**
      * Change viewport to specified state
      *
@@ -196,6 +199,6 @@ export declare class VflowComponent {
     protected trackNodes(idx: number, { rawNode: node }: NodeModel): Node<unknown> | DynamicNode<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; }; "background": { "alias": "background"; "required": false; }; "optimization": { "alias": "optimization"; "required": false; "isSignal": true; }; "entitiesSelectable": { "alias": "entitiesSelectable"; "required": false; }; "keyboardShortcuts": { "alias": "keyboardShortcuts"; "required": false; }; "connection": { "alias": "connection"; "required": false; }; "snapGrid": { "alias": "snapGrid"; "required": false; }; "elevateNodesOnSelect": { "alias": "elevateNodesOnSelect"; "required": false; }; "elevateEdgesOnSelect": { "alias": "elevateEdgesOnSelect"; "required": false; }; "nodes": { "alias": "nodes"; "required": true; }; "edges": { "alias": "edges"; "required": false; }; }, { "onComponentNodeEvent": "onComponentNodeEvent"; }, ["nodeTemplateDirective", "nodeSvgTemplateDirective", "groupNodeTemplateDirective", "edgeTemplateDirective", "edgeLabelHtmlDirective", "connectionTemplateDirective"], never, true, [{ directive: typeof i1.ChangesControllerDirective; inputs: {}; outputs: { "onNodesChange": "onNodesChange"; "onNodesChange.position": "onNodesChange.position"; "onNodesChange.position.single": "onNodesChange.position.single"; "onNodesChange.position.many": "onNodesChange.position.many"; "onNodesChange.size": "onNodesChange.size"; "onNodesChange.size.single": "onNodesChange.size.single"; "onNodesChange.size.many": "onNodesChange.size.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; }; "background": { "alias": "background"; "required": false; }; "optimization": { "alias": "optimization"; "required": false; }; "entitiesSelectable": { "alias": "entitiesSelectable"; "required": false; }; "keyboardShortcuts": { "alias": "keyboardShortcuts"; "required": false; }; "connection": { "alias": "connection"; "required": false; }; "snapGrid": { "alias": "snapGrid"; "required": false; }; "elevateNodesOnSelect": { "alias": "elevateNodesOnSelect"; "required": false; }; "elevateEdgesOnSelect": { "alias": "elevateEdgesOnSelect"; "required": false; }; "nodes": { "alias": "nodes"; "required": true; }; "edges": { "alias": "edges"; "required": false; }; }, { "onComponentNodeEvent": "onComponentNodeEvent"; }, ["nodeTemplateDirective", "nodeSvgTemplateDirective", "groupNodeTemplateDirective", "edgeTemplateDirective", "edgeLabelHtmlDirective", "connectionTemplateDirective"], never, true, [{ directive: typeof i1.ChangesControllerDirective; inputs: {}; outputs: { "onNodesChange": "onNodesChange"; "onNodesChange.position": "onNodesChange.position"; "onNodesChange.position.single": "onNodesChange.position.single"; "onNodesChange.position.many": "onNodesChange.position.many"; "onNodesChange.size": "onNodesChange.size"; "onNodesChange.size.single": "onNodesChange.size.single"; "onNodesChange.size.many": "onNodesChange.size.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: i2.ConnectionSettings;
 }

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

@@ -1,4 +1,4 @@
-import { OnInit } from '@angular/core';
+import { NgZone, OnInit } from '@angular/core';
 import { ZoomBehavior } from 'd3-zoom';
 import { ViewportService } from '../services/viewport.service';
 import { SelectionService, ViewportForSelection } from '../services/selection.service';
@@ -10,8 +10,9 @@ export declare class MapContextDirective implements OnInit {
     protected selectionService: SelectionService;
     protected viewportService: ViewportService;
     protected flowSettingsService: FlowSettingsService;
+    protected zone: NgZone;
     protected rootSvgSelection: import("d3-selection").Selection<SVGSVGElement, unknown, null, undefined>;
-    protected zoomableSelection: import("d3-selection").Selection<SVGGElement, unknown, null, undefined>;
+    protected transform: import("@angular/core").WritableSignal<string>;
     protected viewportForSelection: Partial<ViewportForSelection>;
     protected manualViewportChangeEffect: import("@angular/core").EffectRef;
     protected zoomBehavior: ZoomBehavior<SVGSVGElement, unknown>;

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

@@ -0,0 +1,3 @@
+export interface NodePreview {
+    style: Pick<Partial<CSSStyleDeclaration>, 'backgroundColor' | 'borderColor' | 'borderWidth' | 'borderRadius'>;
+}

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

@@ -2,6 +2,7 @@ import { Type, WritableSignal } from '@angular/core';
 import { Point } from './point.interface';
 import { CustomNodeComponent } from '../public-components/custom-node/custom-node.component';
 import { CustomDynamicNodeComponent } from '../public-components/custom-dynamic-node/custom-dynamic-node.component';
+import { NodePreview } from './node-preview.interface';
 export type Node<T = any> = DefaultNode | HtmlTemplateNode<T> | SvgTemplateNode<T> | ComponentNode<T> | DefaultGroupNode | TemplateGroupNode<T>;
 export type DynamicNode<T = any> = DefaultDynamicNode | HtmlTemplateDynamicNode<T> | SvgTemplateDynamicNode<T> | ComponentDynamicNode<T> | DefaultDynamicGroupNode | TemplateDynamicGroupNode<T>;
 export interface SharedNode {
@@ -9,12 +10,14 @@ export interface SharedNode {
     point: Point;
     draggable?: boolean;
     parentId?: string | null;
+    preview?: NodePreview;
 }
 export interface SharedDynamicNode {
     id: string;
     point: WritableSignal<Point>;
     draggable?: WritableSignal<boolean>;
     parentId?: WritableSignal<string | null>;
+    preview?: WritableSignal<NodePreview>;
 }
 export interface DefaultNode extends SharedNode {
     type: 'default';

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

@@ -1,3 +1,4 @@
+export declare const DEFAULT_OPTIMIZATION: Required<Optimization>;
 export interface Optimization {
     /**
      * If true, the layer with groups will be placed behind the edges layer.
@@ -5,5 +6,20 @@ export interface Optimization {
      *
      * @default false
      */
-    detachedGroupsLayer: boolean;
+    detachedGroupsLayer?: boolean;
+    /**
+     * If true, enables viewport virtualization to improve performance by only rendering
+     * nodes and edges that are currently visible in the viewport. This optimization
+     * filters out entities that are outside the visible area, reducing the number of
+     * DOM elements and improving rendering performance for large flows.
+     *
+     * It uses canvas as a virtualization layer during viewport change.
+     * When the viewport change ends, the library hydrates the canvas with the actual nodes and edges.
+     */
+    virtualization?: boolean;
+    /**
+     * The zoom threshold below which the only virtualization layer is drawn.
+     * This should help to avoid performance issues when zooming out too much.
+     */
+    virtualizationZoomThreshold?: number;
 }

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

@@ -6,6 +6,7 @@ import { Point } from '../interfaces/point.interface';
 import { Contextable } from '../interfaces/contextable.interface';
 import { GroupNodeContext, NodeContext } from '../interfaces/template-context.interface';
 import { Observable } from 'rxjs';
+import { NodePreview } from '../interfaces/node-preview.interface';
 export declare class NodeModel<T = unknown> implements FlowEntity, Contextable<NodeContext | GroupNodeContext | {
     $implicit: object;
 }> {
@@ -14,6 +15,7 @@ export declare class NodeModel<T = unknown> implements FlowEntity, Contextable<N
     private static defaultHeight;
     private static defaultColor;
     private entitiesService;
+    isVisible: import("@angular/core").WritableSignal<boolean>;
     point: import("@angular/core").WritableSignal<Point>;
     point$: Observable<Point>;
     width: import("@angular/core").WritableSignal<number>;
@@ -41,6 +43,7 @@ export declare class NodeModel<T = unknown> implements FlowEntity, Contextable<N
     renderOrder: import("@angular/core").WritableSignal<number>;
     selected: import("@angular/core").WritableSignal<boolean>;
     selected$: Observable<boolean>;
+    preview: import("@angular/core").WritableSignal<NodePreview>;
     globalPoint: import("@angular/core").Signal<{
         x: number;
         y: number;

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

@@ -2,7 +2,9 @@ import { EdgeModel } from '../models/edge.model';
 import * as i0 from "@angular/core";
 export declare class EdgeRenderingService {
     private flowEntitiesService;
+    private flowSettingsService;
     readonly edges: import("@angular/core").Signal<EdgeModel[]>;
+    private viewportEdges;
     private maxOrder;
     pull(edge: EdgeModel): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeRenderingService, never>;

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

@@ -1,5 +1,6 @@
 import { WritableSignal } from '@angular/core';
 import { Background } from '../types/background.type';
+import { Optimization } from '../interfaces/optimization.interface';
 import * as i0 from "@angular/core";
 export declare class FlowSettingsService {
     entitiesSelectable: WritableSignal<boolean>;
@@ -21,6 +22,7 @@ export declare class FlowSettingsService {
     maxZoom: WritableSignal<number>;
     background: WritableSignal<Background>;
     snapGrid: WritableSignal<[number, number]>;
+    optimization: WritableSignal<Required<Optimization>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FlowSettingsService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<FlowSettingsService>;
 }

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

@@ -2,9 +2,13 @@ import { NodeModel } from '../models/node.model';
 import * as i0 from "@angular/core";
 export declare class NodeRenderingService {
     private flowEntitiesService;
+    private flowSettingsService;
+    private viewportService;
     readonly nodes: import("@angular/core").Signal<NodeModel<unknown>[]>;
     readonly groups: import("@angular/core").Signal<NodeModel<unknown>[]>;
     readonly nonGroups: import("@angular/core").Signal<NodeModel<unknown>[]>;
+    viewportNodes: import("@angular/core").Signal<NodeModel<unknown>[]>;
+    private viewportNodesAfterInteraction;
     private maxOrder;
     pullNode(node: NodeModel): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NodeRenderingService, never>;

package/lib/vflow/services/preview-flow-render-strategy.service.d.ts

@@ -0,0 +1,12 @@
+import { NodeModel } from '../models/node.model';
+import * as i0 from "@angular/core";
+export declare abstract class PreviewFlowRenderStrategyService {
+    abstract shouldRenderNode(node: NodeModel): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PreviewFlowRenderStrategyService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PreviewFlowRenderStrategyService>;
+}
+export declare class ViewportPreviewFlowRenderStrategyService extends PreviewFlowRenderStrategyService {
+    shouldRenderNode(node: NodeModel): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ViewportPreviewFlowRenderStrategyService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ViewportPreviewFlowRenderStrategyService>;
+}

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

@@ -1,6 +1,7 @@
 import { WritableSignal } from '@angular/core';
 import { ViewportState, WritableViewport } from '../interfaces/viewport.interface';
 import { FitViewOptions } from '../interfaces/fit-view-options.interface';
+import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class ViewportService {
     private entitiesService;
@@ -22,7 +23,9 @@ export declare class ViewportService {
      * - writableViewport signal
      */
     readonly readableViewport: WritableSignal<ViewportState>;
+    readonly viewportChangeEnd$: Subject<void>;
     fitView(options?: FitViewOptions): void;
+    triggerViewportChangeEvent(type: 'end'): void;
     private getBoundsNodes;
     static ɵfac: i0.ɵɵFactoryDeclaration<ViewportService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ViewportService>;

package/lib/vflow/utils/assert-injector.d.ts

@@ -0,0 +1,44 @@
+import { Injector } from '@angular/core';
+/**
+ * `assertInjector` extends `assertInInjectionContext` with an optional `Injector`
+ * After assertion, `assertInjector` runs the `runner` function with the guaranteed `Injector`
+ * whether it is the default `Injector` within the current **Injection Context**
+ * or the custom `Injector` that was passed in.
+ *
+ * @template {() => any} Runner - Runner is a function that can return anything
+ * @param {Function} fn - the Function to pass in `assertInInjectionContext`
+ * @param {Injector | undefined | null} injector - the optional "custom" Injector
+ * @param {Runner} runner - the runner fn
+ * @returns {ReturnType<Runner>} result - returns the result of the Runner
+ *
+ * @example
+ * ```ts
+ * function injectValue(injector?: Injector) {
+ *  return assertInjector(injectValue, injector, () => 'value');
+ * }
+ *
+ * injectValue(); // string
+ * ```
+ */
+export declare function assertInjector<Runner extends () => any>(fn: Function, injector: Injector | undefined | null, runner: Runner): ReturnType<Runner>;
+/**
+ * `assertInjector` extends `assertInInjectionContext` with an optional `Injector`
+ * After assertion, `assertInjector` returns a guaranteed `Injector` whether it is the default `Injector`
+ * within the current **Injection Context** or the custom `Injector` that was passed in.
+ *
+ * @param {Function} fn - the Function to pass in `assertInInjectionContext`
+ * @param {Injector | undefined | null} injector - the optional "custom" Injector
+ * @returns Injector
+ *
+ * @example
+ * ```ts
+ * function injectDestroy(injector?: Injector) {
+ *  injector = assertInjector(injectDestroy, injector);
+ *
+ *  return runInInjectionContext(injector, () => {
+ *    // code
+ *  })
+ * }
+ * ```
+ */
+export declare function assertInjector(fn: Function, injector: Injector | undefined | null): Injector;

package/lib/vflow/utils/signals/extended-computed.d.ts

@@ -0,0 +1,5 @@
+import type { CreateComputedOptions } from '@angular/core';
+/**
+ * @todo Use `linkedSignal` after Angular update
+ */
+export declare function extendedComputed<TValue>(computedCallback: (currentValue: TValue) => TValue, options?: CreateComputedOptions<TValue>): import("@angular/core").Signal<TValue>;

package/lib/vflow/utils/signals/to-lazy-signal.d.ts

@@ -0,0 +1,20 @@
+import { type Signal } from '@angular/core';
+import { type ToSignalOptions } from '@angular/core/rxjs-interop';
+import type { Observable, Subscribable } from 'rxjs';
+export declare function toLazySignal<T>(source: Observable<T> | Subscribable<T>): Signal<T | undefined>;
+export declare function toLazySignal<T>(source: Observable<T> | Subscribable<T>, options: ToSignalOptions & {
+    initialValue?: undefined;
+    requireSync?: false;
+}): Signal<T | undefined>;
+export declare function toLazySignal<T>(source: Observable<T> | Subscribable<T>, options: ToSignalOptions & {
+    initialValue?: null;
+    requireSync?: false;
+}): Signal<T | null>;
+export declare function toLazySignal<T>(source: Observable<T> | Subscribable<T>, options: ToSignalOptions & {
+    initialValue?: undefined;
+    requireSync: true;
+}): Signal<T>;
+export declare function toLazySignal<T, const U extends T>(source: Observable<T> | Subscribable<T>, options: ToSignalOptions & {
+    initialValue: U;
+    requireSync?: false;
+}): Signal<T | U>;

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

@@ -2,3 +2,22 @@ import { Rect } from '../interfaces/rect';
 import { ViewportState } from '../interfaces/viewport.interface';
 export declare function getViewportForBounds(bounds: Rect, width: number, height: number, minZoom: number, maxZoom: number, padding: number): ViewportState;
 export declare function clamp(value: number, min?: number, max?: number): number;
+/**
+ * Calculates the visible area bounds in world coordinates based on the current viewport state
+ *
+ * @param viewport Current viewport state (x, y, zoom)
+ * @param flowWidth Width of the flow container
+ * @param flowHeight Height of the flow container
+ * @returns Rect representing the visible area in world coordinates
+ */
+export declare function getViewportBounds(viewport: ViewportState, flowWidth: number, flowHeight: number): Rect;
+/**
+ * Checks if a rectangle intersects with the viewport's visible area
+ *
+ * @param rect Rectangle to check (in world coordinates)
+ * @param viewport Current viewport state
+ * @param flowWidth Width of the flow container
+ * @param flowHeight Height of the flow container
+ * @returns true if the rectangle intersects with the viewport, false otherwise
+ */
+export declare function isRectInViewport(rect: Rect, viewport: ViewportState, flowWidth: number, flowHeight: number): boolean;

package/package.json

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

package/public-api.d.ts

@@ -13,6 +13,7 @@ export * from './lib/vflow/interfaces/fit-view-options.interface';
 export * from './lib/vflow/interfaces/optimization.interface';
 export * from './lib/vflow/interfaces/intersecting-nodes-options.interface';
 export * from './lib/vflow/interfaces/curve-factory.interface';
+export * from './lib/vflow/interfaces/node-preview.interface';
 export * from './lib/vflow/types/node-change.type';
 export * from './lib/vflow/types/edge-change.type';
 export * from './lib/vflow/types/position.type';

package/testing/component-mocks/vflow-mock.component.d.ts

@@ -1,5 +1,5 @@
 import { WritableSignal, OnInit } from '@angular/core';
-import { Node, DynamicNode, Edge, SpacePoint, Point, Background, Optimization, KeyboardShortcuts, ViewportState, NodeChange, EdgeChange, FitViewOptions, VflowComponent, IntersectingNodesOptions, ɵConnectionModel as ConnectionModel } from 'ngx-vflow';
+import { Node, DynamicNode, Edge, SpacePoint, Point, Background, KeyboardShortcuts, ViewportState, NodeChange, EdgeChange, FitViewOptions, VflowComponent, IntersectingNodesOptions, ɵConnectionModel as ConnectionModel } from 'ngx-vflow';
 import { ConnectionTemplateMockDirective, EdgeLabelHtmlTemplateMockDirective, EdgeTemplateMockDirective, GroupNodeTemplateMockDirective, NodeHtmlTemplateMockDirective } from '../directive-mocks/template-mock.directive';
 import { AsInterface } from '../types';
 import * as i0 from "@angular/core";
@@ -14,7 +14,7 @@ export declare class VflowMockComponent implements AsInterface<VflowComponent>,
     readonly minZoom = 0.5;
     readonly maxZoom = 3;
     readonly background: Background | string;
-    readonly optimization: import("@angular/core").InputSignal<Optimization>;
+    readonly optimization: Required<import("ngx-vflow").Optimization>;
     readonly entitiesSelectable = true;
     readonly keyboardShortcuts: KeyboardShortcuts;
     readonly connection: ConnectionModel;
@@ -53,6 +53,6 @@ export declare class VflowMockComponent implements AsInterface<VflowComponent>,
     getDetachedEdges(): Edge[];
     protected createSignal<T>(value: T): WritableSignal<T>;
     static ɵfac: i0.ɵɵFactoryDeclaration<VflowMockComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VflowMockComponent, "vflow", never, { "nodes": { "alias": "nodes"; "required": true; }; "edges": { "alias": "edges"; "required": false; }; "view": { "alias": "view"; "required": false; }; "minZoom": { "alias": "minZoom"; "required": false; }; "maxZoom": { "alias": "maxZoom"; "required": false; }; "background": { "alias": "background"; "required": false; }; "optimization": { "alias": "optimization"; "required": false; "isSignal": true; }; "entitiesSelectable": { "alias": "entitiesSelectable"; "required": false; }; "keyboardShortcuts": { "alias": "keyboardShortcuts"; "required": false; }; "connection": { "alias": "connection"; "required": false; }; "snapGrid": { "alias": "snapGrid"; "required": false; }; "elevateNodesOnSelect": { "alias": "elevateNodesOnSelect"; "required": false; }; "elevateEdgesOnSelect": { "alias": "elevateEdgesOnSelect"; "required": false; }; }, { "onComponentNodeEvent": "onComponentNodeEvent"; }, ["nodeTemplateDirective", "groupNodeTemplateDirective", "edgeTemplateDirective", "edgeLabelHtmlDirective", "connectionTemplateDirective"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VflowMockComponent, "vflow", never, { "nodes": { "alias": "nodes"; "required": true; }; "edges": { "alias": "edges"; "required": false; }; "view": { "alias": "view"; "required": false; }; "minZoom": { "alias": "minZoom"; "required": false; }; "maxZoom": { "alias": "maxZoom"; "required": false; }; "background": { "alias": "background"; "required": false; }; "optimization": { "alias": "optimization"; "required": false; }; "entitiesSelectable": { "alias": "entitiesSelectable"; "required": false; }; "keyboardShortcuts": { "alias": "keyboardShortcuts"; "required": false; }; "connection": { "alias": "connection"; "required": false; }; "snapGrid": { "alias": "snapGrid"; "required": false; }; "elevateNodesOnSelect": { "alias": "elevateNodesOnSelect"; "required": false; }; "elevateEdgesOnSelect": { "alias": "elevateEdgesOnSelect"; "required": false; }; }, { "onComponentNodeEvent": "onComponentNodeEvent"; }, ["nodeTemplateDirective", "groupNodeTemplateDirective", "edgeTemplateDirective", "edgeLabelHtmlDirective", "connectionTemplateDirective"], ["*"], true, never>;
     static ngAcceptInputType_connection: i1.ConnectionSettings;
 }