ngx-vflow 1.11.1 → 1.12.1

package/fesm2022/ngx-vflow.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, DestroyRef, EventEmitter, OutputEmitterRef, input, NgZone, viewChild, Component, ChangeDetectionStrategy, output, HostListener, Injector, runInInjectionContext, contentChild, Input, forwardRef } from '@angular/core';
+import { signal, computed, Injectable, inject, ElementRef, Directive, NgZone, effect, untracked, TemplateRef, DestroyRef, EventEmitter, OutputEmitterRef, input, assertInInjectionContext, Injector, runInInjectionContext, viewChild, Component, ChangeDetectionStrategy, output, HostListener, Renderer2, contentChild, Input, forwardRef } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
-import { switchMap, merge, fromEvent, tap, Subject, Observable, skip, map, pairwise, filter, distinctUntilChanged, observeOn, asyncScheduler, zip, animationFrameScheduler, share, startWith } from 'rxjs';
+import { Subject, switchMap, merge, fromEvent, tap, Observable, skip, map, pairwise, filter, distinctUntilChanged, observeOn, asyncScheduler, zip, debounceTime, animationFrameScheduler, share, startWith } from 'rxjs';
 import { toObservable, takeUntilDestroyed, outputFromObservable, toSignal } from '@angular/core/rxjs-interop';
 import { drag } from 'd3-drag';
 import { __decorate } from 'tslib';
@@ -177,6 +177,48 @@ function getViewportForBounds(bounds, width, height, minZoom, maxZoom, padding)
 function clamp(value, min = 0, max = 1) {
     return Math.min(Math.max(value, min), max);
 }
+/**
+ * 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
+ */
+function getViewportBounds(viewport, flowWidth, flowHeight) {
+    const zoom = viewport.zoom;
+    return {
+        x: -viewport.x / zoom,
+        y: -viewport.y / zoom,
+        width: flowWidth / zoom,
+        height: flowHeight / zoom,
+    };
+}
+/**
+ * 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
+ */
+function isRectInViewport(rect, viewport, flowWidth, flowHeight) {
+    const viewportBounds = getViewportBounds(viewport, flowWidth, flowHeight);
+    // Check if rectangles intersect using standard rectangle intersection test
+    // No intersection if: rect is completely to the left, right, above, or below the viewport
+    const isNotIntersecting = rect.x + rect.width < viewportBounds.x || // Rect is completely to the left
+        rect.x > viewportBounds.x + viewportBounds.width || // Rect is completely to the right
+        rect.y + rect.height < viewportBounds.y || // Rect is completely above
+        rect.y > viewportBounds.y + viewportBounds.height; // Rect is completely below
+    return !isNotIntersecting;
+}
+
+const DEFAULT_OPTIMIZATION = {
+    detachedGroupsLayer: false,
+    virtualization: false,
+    virtualizationZoomThreshold: 0.5,
+};
 
 class FlowSettingsService {
     constructor() {
@@ -199,6 +241,7 @@ class FlowSettingsService {
         this.maxZoom = signal(3);
         this.background = signal({ type: 'solid', color: '#fff' });
         this.snapGrid = signal([1, 1]);
+        this.optimization = signal(DEFAULT_OPTIMIZATION);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowSettingsService }); }
@@ -226,6 +269,7 @@ class ViewportService {
          * - writableViewport signal
          */
         this.readableViewport = signal(ViewportService.getDefaultViewport());
+        this.viewportChangeEnd$ = new Subject();
     }
     /**
      * The default value used by d3, just copy it here
@@ -242,6 +286,11 @@ class ViewportService {
         const duration = options.duration ?? 0;
         this.writableViewport.set({ changeType: 'absolute', state, duration });
     }
+    triggerViewportChangeEvent(type) {
+        if (type === 'end') {
+            this.viewportChangeEnd$.next();
+        }
+    }
     getBoundsNodes(nodeIds) {
         return !nodeIds?.length
             ? // If nodes option not passed or the list is empty, then get fit the whole view
@@ -398,8 +447,9 @@ class MapContextDirective {
         this.selectionService = inject(SelectionService);
         this.viewportService = inject(ViewportService);
         this.flowSettingsService = inject(FlowSettingsService);
+        this.zone = inject(NgZone);
         this.rootSvgSelection = select(this.rootSvg);
-        this.zoomableSelection = select(this.host);
+        this.transform = signal('');
         this.viewportForSelection = {};
         // under the hood this effect triggers handleZoom, so error throws without this flag
         this.manualViewportChangeEffect = effect(() => {
@@ -435,7 +485,7 @@ class MapContextDirective {
         this.handleZoom = ({ transform }) => {
             // update public signal for user to read
             this.viewportService.readableViewport.set(mapTransformToViewportState(transform));
-            this.zoomableSelection.attr('transform', transform.toString());
+            this.transform.set(transform.toString());
         };
         this.handleZoomStart = ({ transform }) => {
             this.viewportForSelection = {
@@ -443,12 +493,16 @@ class MapContextDirective {
             };
         };
         this.handleZoomEnd = ({ transform, sourceEvent }) => {
-            this.viewportForSelection = {
-                ...this.viewportForSelection,
-                end: mapTransformToViewportState(transform),
-                target: evTarget(sourceEvent),
-            };
-            this.selectionService.setViewport(this.viewportForSelection);
+            this.zone.run(() => {
+                this.viewportForSelection = {
+                    ...this.viewportForSelection,
+                    end: mapTransformToViewportState(transform),
+                    target: evTarget(sourceEvent),
+                };
+                this.viewportService.triggerViewportChangeEvent('end');
+                // TODO: maybe use triggerViewportChangeEvent instead of this method?
+                this.selectionService.setViewport(this.viewportForSelection);
+            });
         };
         this.filterCondition = (event) => {
             if (event.type === 'mousedown' || event.type === 'touchstart') {
@@ -458,22 +512,27 @@ class MapContextDirective {
         };
     }
     ngOnInit() {
-        this.zoomBehavior = zoom()
-            .scaleExtent([this.flowSettingsService.minZoom(), this.flowSettingsService.maxZoom()])
-            .filter(this.filterCondition)
-            .on('start', this.handleZoomStart)
-            .on('zoom', this.handleZoom)
-            .on('end', this.handleZoomEnd);
-        this.rootSvgSelection.call(this.zoomBehavior).on('dblclick.zoom', null);
+        this.zone.runOutsideAngular(() => {
+            this.zoomBehavior = zoom()
+                .scaleExtent([this.flowSettingsService.minZoom(), this.flowSettingsService.maxZoom()])
+                .filter(this.filterCondition)
+                .on('start', this.handleZoomStart)
+                .on('zoom', this.handleZoom)
+                .on('end', this.handleZoomEnd);
+            this.rootSvgSelection.call(this.zoomBehavior).on('dblclick.zoom', null);
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: MapContextDirective, isStandalone: true, selector: "g[mapContext]", ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: MapContextDirective, isStandalone: true, selector: "g[mapContext]", host: { properties: { "attr.transform": "transform()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapContextDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: 'g[mapContext]',
+                    host: {
+                        '[attr.transform]': 'transform()',
+                    },
                 }]
         }] });
 const mapTransformToViewportState = (transform) => ({
@@ -966,6 +1025,7 @@ class NodeModel {
     constructor(rawNode) {
         this.rawNode = rawNode;
         this.entitiesService = inject(FlowEntitiesService);
+        this.isVisible = signal(false);
         this.point = signal({ x: 0, y: 0 });
         this.width = signal(NodeModel.defaultWidth);
         this.height = signal(NodeModel.defaultHeight);
@@ -979,6 +1039,7 @@ class NodeModel {
         this.foHeight = computed(() => this.height() + MAGIC_NUMBER_TO_FIX_GLITCH_IN_CHROME);
         this.renderOrder = signal(0);
         this.selected = signal(false);
+        this.preview = signal({ style: {} });
         this.globalPoint = computed(() => {
             let parent = this.parent();
             let x = this.point().x;
@@ -1030,6 +1091,9 @@ class NodeModel {
         if (internalNode.parentId) {
             this.parentId = internalNode.parentId;
         }
+        if (internalNode.preview) {
+            this.preview = internalNode.preview;
+        }
         if (internalNode.type === 'default-group' && internalNode.color) {
             this.color = internalNode.color;
         }
@@ -1334,17 +1398,87 @@ function smoothStepPath({ sourcePoint, targetPoint, sourcePosition, targetPositi
         res += segment;
         return res;
     }, '');
+    // Performance optimization: Pre-calculate cumulative distances and use binary search
+    const n = points.length;
+    if (n < 2) {
+        return {
+            path,
+            labelPoints: {
+                start: { x: labelX, y: labelY },
+                center: { x: labelX, y: labelY },
+                end: { x: labelX, y: labelY },
+            },
+        };
+    }
+    // Pre-calculate segment lengths and cumulative distances in a single loop
+    const segmentLengths = new Array(n - 1);
+    const cumulativeDistances = new Array(n);
+    cumulativeDistances[0] = 0;
+    let totalLength = 0;
+    for (let i = 0; i < n - 1; i++) {
+        const dx = points[i + 1].x - points[i].x;
+        const dy = points[i + 1].y - points[i].y;
+        const len = Math.sqrt(dx * dx + dy * dy);
+        segmentLengths[i] = len;
+        totalLength += len;
+        cumulativeDistances[i + 1] = totalLength;
+    }
+    // Optimized helper function using binary search
+    const getPointAtRatio = (ratio) => {
+        const targetDistance = totalLength * ratio;
+        // Edge cases
+        if (targetDistance <= 0)
+            return points[0];
+        if (targetDistance >= totalLength)
+            return points[n - 1];
+        // Binary search for the correct segment
+        let low = 0;
+        let high = n - 1;
+        while (low < high - 1) {
+            const mid = (low + high) >>> 1; // Bitwise right shift is faster than Math.floor
+            if (cumulativeDistances[mid] < targetDistance) {
+                low = mid;
+            }
+            else {
+                high = mid;
+            }
+        }
+        // Calculate position within the segment
+        const segmentStartDistance = cumulativeDistances[low];
+        const localDistance = targetDistance - segmentStartDistance;
+        const t = localDistance / segmentLengths[low];
+        // Linear interpolation
+        const start = points[low];
+        const end = points[low + 1];
+        return {
+            x: start.x + (end.x - start.x) * t,
+            y: start.y + (end.y - start.y) * t,
+        };
+    };
     return {
         path,
         labelPoints: {
-            // TODO start and end points temporary unavailable for this path
-            start: { x: labelX, y: labelY },
+            start: getPointAtRatio(0.15),
             center: { x: labelX, y: labelY },
-            end: { x: labelX, y: labelY },
+            end: getPointAtRatio(0.85),
         },
     };
 }
 
+// MIT License
+/**
+ * @todo Use `linkedSignal` after Angular update
+ */
+function extendedComputed(computedCallback, options) {
+    if (!options) {
+        options = { equal: Object.is };
+    }
+    let currentValue = undefined;
+    return computed(() => {
+        return (currentValue = computedCallback(currentValue));
+    }, options);
+}
+
 class EdgeModel {
     constructor(edge) {
         this.edge = edge;
@@ -1405,25 +1539,51 @@ class EdgeModel {
                     return this.curve(params);
             }
         });
-        this.sourceHandle = computed(() => {
+        this.sourceHandle = extendedComputed((previousHandle) => {
+            let handle = null;
             if (this.edge.sourceHandle) {
-                return (this.source()
-                    ?.handles()
-                    .find((handle) => handle.rawHandle.id === this.edge.sourceHandle) ?? null);
+                handle =
+                    this.source()
+                        ?.handles()
+                        .find((handle) => handle.rawHandle.id === this.edge.sourceHandle) ?? null;
+            }
+            else {
+                handle =
+                    this.source()
+                        ?.handles()
+                        .find((handle) => handle.rawHandle.type === 'source') ?? null;
             }
-            return (this.source()
-                ?.handles()
-                .find((handle) => handle.rawHandle.type === 'source') ?? null);
+            // In case of virtual scrolling, if the node is scrolled out of view the handle may disappear
+            // which could lead to the edge not being rendered
+            // so we return the previous handle if the current one is null
+            // TODO: check if this breaks anything
+            if (handle === null) {
+                return previousHandle;
+            }
+            return handle;
         });
-        this.targetHandle = computed(() => {
+        this.targetHandle = extendedComputed((previousHandle) => {
+            let handle = null;
             if (this.edge.targetHandle) {
-                return (this.target()
-                    ?.handles()
-                    .find((handle) => handle.rawHandle.id === this.edge.targetHandle) ?? null);
+                handle =
+                    this.target()
+                        ?.handles()
+                        .find((handle) => handle.rawHandle.id === this.edge.targetHandle) ?? null;
+            }
+            else {
+                handle =
+                    this.target()
+                        ?.handles()
+                        .find((handle) => handle.rawHandle.type === 'target') ?? null;
             }
-            return (this.target()
-                ?.handles()
-                .find((handle) => handle.rawHandle.type === 'target') ?? null);
+            // In case of virtual scrolling, if the node is scrolled out of view the handle may disappear
+            // which could lead to the edge not being rendered
+            // so we return the previous handle if the current one is null
+            // TODO: check if this breaks anything
+            if (handle === null) {
+                return previousHandle;
+            }
+            return handle;
         });
         /**
          * TODO: not reactive
@@ -1737,11 +1897,74 @@ function isGroupNode(node) {
     return node.rawNode.type === 'default-group' || node.rawNode.type === 'template-group';
 }
 
+// MIT License
+// Copyright (c) 2023 Chau Tran
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+/* eslint-disable @typescript-eslint/ban-types */
+function assertInjector(fn, injector, runner) {
+    !injector && assertInInjectionContext(fn);
+    const assertedInjector = injector ?? inject(Injector);
+    if (!runner)
+        return assertedInjector;
+    return runInInjectionContext(assertedInjector, runner);
+}
+
+// MIT License
+// Copyright (c) 2023 Chau Tran
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+/**
+ * Function `toLazySignal()` is a proxy function that will call the original
+ * `toSignal()` function when the returned signal is read for the first time.
+ */
+function toLazySignal(source, options) {
+    const injector = assertInjector(toLazySignal, options?.injector);
+    let s;
+    return computed(() => {
+        if (!s) {
+            s = untracked(() => toSignal(source, { ...options, injector }));
+        }
+        return s();
+    });
+}
+
 class NodeRenderingService {
     constructor() {
         this.flowEntitiesService = inject(FlowEntitiesService);
+        this.flowSettingsService = inject(FlowSettingsService);
+        this.viewportService = inject(ViewportService);
         this.nodes = computed(() => {
-            return [...this.flowEntitiesService.nodes().sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder())];
+            if (!this.flowSettingsService.optimization().virtualization) {
+                return [...this.flowEntitiesService.nodes()].sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
+            }
+            return this.viewportNodesAfterInteraction().sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
         });
         this.groups = computed(() => {
             return this.nodes().filter((n) => isGroupNode(n));
@@ -1749,6 +1972,28 @@ class NodeRenderingService {
         this.nonGroups = computed(() => {
             return this.nodes().filter((n) => !isGroupNode(n));
         });
+        this.viewportNodes = computed(() => {
+            const nodes = this.flowEntitiesService.nodes();
+            const viewport = this.viewportService.readableViewport();
+            const flowWidth = this.flowSettingsService.computedFlowWidth();
+            const flowHeight = this.flowSettingsService.computedFlowHeight();
+            return nodes.filter((n) => {
+                const { x, y } = n.globalPoint();
+                const width = n.width();
+                const height = n.height();
+                return isRectInViewport({ x, y, width, height }, viewport, flowWidth, flowHeight);
+            });
+        });
+        this.viewportNodesAfterInteraction = toLazySignal(merge(
+        // TODO: maybe there is a better way wait when viewport is ready?
+        // (to correctly calculate viewport nodes on first render)
+        toObservable(this.flowEntitiesService.nodes).pipe(observeOn(asyncScheduler), filter((nodes) => !!nodes.length)), this.viewportService.viewportChangeEnd$.pipe(debounceTime(300))).pipe(map(() => {
+            const viewport = this.viewportService.readableViewport();
+            const zoomThreshold = this.flowSettingsService.optimization().virtualizationZoomThreshold;
+            return viewport.zoom < zoomThreshold ? [] : this.viewportNodes();
+        })), {
+            initialValue: [],
+        });
         this.maxOrder = computed(() => {
             return Math.max(...this.flowEntitiesService.nodes().map((n) => n.renderOrder()));
         });
@@ -1839,7 +2084,7 @@ class SpacePointContextDirective {
                 y: movement.y,
             });
         });
-        this.pointerMovement = toSignal(this.pointerMovementDirective.pointerMovement$);
+        this.pointerMovement = toLazySignal(this.pointerMovementDirective.pointerMovement$);
     }
     documentPointToFlowPoint(documentPoint) {
         const point = this.rootSvg.createSVGPoint();
@@ -2144,8 +2389,19 @@ function statusToConnection(status, isStrictMode) {
 class EdgeRenderingService {
     constructor() {
         this.flowEntitiesService = inject(FlowEntitiesService);
+        this.flowSettingsService = inject(FlowSettingsService);
         this.edges = computed(() => {
-            return this.flowEntitiesService.validEdges().sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
+            if (!this.flowSettingsService.optimization().virtualization) {
+                return [...this.flowEntitiesService.validEdges()].sort((aEdge, bEdge) => aEdge.renderOrder() - bEdge.renderOrder());
+            }
+            return this.viewportEdges().sort((aEdge, bEdge) => aEdge.renderOrder() - bEdge.renderOrder());
+        });
+        this.viewportEdges = computed(() => {
+            return this.flowEntitiesService.validEdges().filter((e) => {
+                const sourceHandle = e.sourceHandle();
+                const targetHandle = e.targetHandle();
+                return sourceHandle && targetHandle;
+            });
         });
         this.maxOrder = computed(() => {
             return Math.max(...this.flowEntitiesService.validEdges().map((n) => n.renderOrder()));
@@ -2645,9 +2901,11 @@ class HandleModel {
         });
         this.state = signal('idle');
         this.updateHostSizeAndPosition$ = new Subject();
+        // TODO: for some reason toLazySignal breaks unit tests, so we use toSignal here
         this.hostSize = toSignal(this.updateHostSizeAndPosition$.pipe(map(() => this.getHostSize())), {
             initialValue: { width: 0, height: 0 },
         });
+        // TODO: for some reason toLazySignal breaks unit tests, so we use toSignal here
         this.hostPosition = toSignal(this.updateHostSizeAndPosition$.pipe(map(() => ({
             x: this.hostReference instanceof HTMLElement ? this.hostReference.offsetLeft : 0, // for now just 0 for group nodes
             y: this.hostReference instanceof HTMLElement ? this.hostReference.offsetTop : 0, // for now just 0 for group nodes
@@ -2846,6 +3104,7 @@ class NodeComponent {
         this.toolbars = computed(() => this.overlaysService.nodeToolbarsMap().get(this.model()));
     }
     ngOnInit() {
+        this.model().isVisible.set(true);
         this.nodeAccessor.model.set(this.model());
         this.handleService.node.set(this.model());
         effect(() => {
@@ -2858,6 +3117,7 @@ class NodeComponent {
         }, { injector: this.injector });
     }
     ngOnDestroy() {
+        this.model().isVisible.set(false);
         this.draggableService.destroy(this.hostRef.nativeElement);
     }
     startConnection(event, handle) {
@@ -3098,7 +3358,7 @@ class BackgroundComponent {
             const background = this.backgroundSignal();
             return background.type === 'image' ? background.src : '';
         });
-        this.imageSize = toSignal(toObservable(this.backgroundSignal).pipe(switchMap(() => createImage(this.bgImageSrc())), map((image) => ({ width: image.naturalWidth, height: image.naturalHeight }))), { initialValue: { width: 0, height: 0 } });
+        this.imageSize = toLazySignal(toObservable(this.backgroundSignal).pipe(switchMap(() => createImage(this.bgImageSrc())), map((image) => ({ width: image.naturalWidth, height: image.naturalHeight }))), { initialValue: { width: 0, height: 0 } });
         this.scaledImageWidth = computed(() => {
             const background = this.backgroundSignal();
             if (background.type === 'image') {
@@ -3272,6 +3532,181 @@ function getSpacePoints(point, groups) {
     return result;
 }
 
+class PreviewFlowRenderStrategyService {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PreviewFlowRenderStrategyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PreviewFlowRenderStrategyService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PreviewFlowRenderStrategyService, decorators: [{
+            type: Injectable
+        }] });
+class ViewportPreviewFlowRenderStrategyService extends PreviewFlowRenderStrategyService {
+    shouldRenderNode(node) {
+        // Do not render preview node if the real node is visible
+        return !node.isVisible();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewportPreviewFlowRenderStrategyService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewportPreviewFlowRenderStrategyService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewportPreviewFlowRenderStrategyService, decorators: [{
+            type: Injectable
+        }] });
+
+function drawNode(ctx, node) {
+    if (Object.keys(node.preview().style).length) {
+        drawStyledNode(ctx, node);
+        return;
+    }
+    if (node.rawNode.type === 'default') {
+        drawDefaultNode(ctx, node);
+        return;
+    }
+    if (node.rawNode.type === 'default-group') {
+        drawDefaultGroupNode(ctx, node);
+        return;
+    }
+    drawUnknownNode(ctx, node);
+}
+function drawDefaultNode(ctx, node) {
+    const point = node.globalPoint();
+    const width = node.width();
+    const height = node.height();
+    borderRadius(ctx, node, 5);
+    // Draw background (background-color: white)
+    ctx.fillStyle = 'white';
+    ctx.fill();
+    // Draw border (border: 1.5px solid #1b262c)
+    ctx.strokeStyle = '#1b262c';
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+    // Draw centered text (color: black, justify-content: center)
+    ctx.fillStyle = 'black';
+    // TODO: use as in default node
+    ctx.font = '14px Arial';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    const centerX = point.x + width / 2;
+    const centerY = point.y + height / 2;
+    ctx.fillText(node.text(), centerX, centerY);
+}
+function drawDefaultGroupNode(ctx, node) {
+    const point = node.globalPoint();
+    const width = node.width();
+    const height = node.height();
+    ctx.globalAlpha = 0.05;
+    ctx.fillStyle = node.color();
+    ctx.fillRect(point.x, point.y, width, height);
+    ctx.globalAlpha = 1;
+    ctx.strokeStyle = node.color();
+    ctx.lineWidth = 1.5;
+    ctx.strokeRect(point.x, point.y, width, height);
+}
+function drawStyledNode(ctx, node) {
+    const point = node.globalPoint();
+    const width = node.width();
+    const height = node.height();
+    const style = node.preview().style;
+    if (style.borderRadius) {
+        const radius = parseFloat(style.borderRadius);
+        borderRadius(ctx, node, radius);
+    }
+    else {
+        ctx.beginPath();
+        ctx.rect(point.x, point.y, width, height);
+        ctx.closePath();
+    }
+    if (style.backgroundColor) {
+        ctx.fillStyle = style.backgroundColor;
+    }
+    if (style.borderColor) {
+        ctx.strokeStyle = style.borderColor;
+    }
+    if (style.borderWidth) {
+        ctx.lineWidth = parseFloat(style.borderWidth);
+    }
+    ctx.fill();
+    ctx.stroke();
+}
+function drawUnknownNode(ctx, node) {
+    const point = node.globalPoint();
+    const width = node.width();
+    const height = node.height();
+    ctx.fillStyle = 'rgb(0 0 0 / 10%)';
+    ctx.fillRect(point.x, point.y, width, height);
+}
+function borderRadius(ctx, node, radius) {
+    const point = node.globalPoint();
+    const width = node.width();
+    const height = node.height();
+    // Create rounded rectangle path
+    ctx.beginPath();
+    ctx.moveTo(point.x + radius, point.y);
+    ctx.lineTo(point.x + width - radius, point.y);
+    ctx.quadraticCurveTo(point.x + width, point.y, point.x + width, point.y + radius);
+    ctx.lineTo(point.x + width, point.y + height - radius);
+    ctx.quadraticCurveTo(point.x + width, point.y + height, point.x + width - radius, point.y + height);
+    ctx.lineTo(point.x + radius, point.y + height);
+    ctx.quadraticCurveTo(point.x, point.y + height, point.x, point.y + height - radius);
+    ctx.lineTo(point.x, point.y + radius);
+    ctx.quadraticCurveTo(point.x, point.y, point.x + radius, point.y);
+    ctx.closePath();
+}
+
+class PreviewFlowComponent {
+    constructor() {
+        this.viewportService = inject(ViewportService);
+        this.renderStrategy = inject(PreviewFlowRenderStrategyService);
+        this.nodeRenderingService = inject(NodeRenderingService);
+        this.renderer2 = inject(Renderer2);
+        this.element = inject(ElementRef).nativeElement;
+        this.ctx = this.element.getContext('2d');
+        this.width = input(0);
+        this.height = input(0);
+        this.dpr = window.devicePixelRatio;
+        effect(() => {
+            // Set the "actual" size of the canvas
+            this.renderer2.setProperty(this.element, 'width', this.width() * this.dpr);
+            this.renderer2.setProperty(this.element, 'height', this.height() * this.dpr);
+            // Set the "drawn" size of the canvas
+            this.renderer2.setStyle(this.element, 'width', `${this.width()}px`);
+            this.renderer2.setStyle(this.element, 'height', `${this.height()}px`);
+            // Scale the context to match device pixel ratio
+            this.ctx.scale(this.dpr, this.dpr);
+        });
+        effect(() => {
+            const viewport = this.viewportService.readableViewport();
+            this.ctx.clearRect(0, 0, this.width(), this.height());
+            // Save the current context state
+            this.ctx.save();
+            // Apply viewport transformations (zoom and pan)
+            this.ctx.setTransform(viewport.zoom * this.dpr, // horizontal scaling with DPR
+            0, // horizontal skewing
+            0, // vertical skewing
+            viewport.zoom * this.dpr, // vertical scaling with DPR
+            viewport.x * this.dpr, // horizontal translation with DPR
+            viewport.y * this.dpr);
+            for (let i = 0; i < this.nodeRenderingService.viewportNodes().length; i++) {
+                const node = this.nodeRenderingService.viewportNodes()[i];
+                if (this.renderStrategy.shouldRenderNode(node)) {
+                    drawNode(this.ctx, node);
+                }
+            }
+            // Restore the context state
+            this.ctx.restore();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PreviewFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: PreviewFlowComponent, isStandalone: true, selector: "canvas[previewFlow]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PreviewFlowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'canvas[previewFlow]',
+                    template: '',
+                }]
+        }], ctorParameters: () => [] });
+
 const changesControllerHostDirective = {
     directive: ChangesControllerDirective,
     outputs: [
@@ -3319,9 +3754,6 @@ class VflowComponent {
         this.componentEventBusService = inject(ComponentEventBusService);
         this.keyboardService = inject(KeyboardService);
         this.injector = inject(Injector);
-        this.optimization = input({
-            detachedGroupsLayer: false,
-        });
         this.nodeModels = this.nodeRenderingService.nodes;
         this.groups = this.nodeRenderingService.groups;
         this.nonGroups = this.nodeRenderingService.nonGroups;
@@ -3355,13 +3787,13 @@ class VflowComponent {
         /**
          * Signal for reading nodes change
          */
-        this.nodesChange = toSignal(this.nodesChangeService.changes$, {
+        this.nodesChange = toLazySignal(this.nodesChangeService.changes$, {
             initialValue: [],
         });
         /**
          * Signal to reading edges change
          */
-        this.edgesChange = toSignal(this.edgesChangeService.changes$, {
+        this.edgesChange = toLazySignal(this.edgesChangeService.changes$, {
             initialValue: [],
         });
         // #endregion
@@ -3381,6 +3813,9 @@ class VflowComponent {
         // #endregion
         this.markers = this.flowEntitiesService.markers;
         this.minimap = this.flowEntitiesService.minimap;
+        this.flowOptimization = this.flowSettingsService.optimization;
+        this.flowWidth = this.flowSettingsService.computedFlowWidth;
+        this.flowHeight = this.flowSettingsService.computedFlowHeight;
     }
     // #endregion
     // #region SETTINGS
@@ -3412,6 +3847,12 @@ class VflowComponent {
     set background(value) {
         this.flowSettingsService.background.set(transformBackground(value));
     }
+    set optimization(newOptimization) {
+        this.flowSettingsService.optimization.update((optimization) => ({
+            ...optimization,
+            ...newOptimization,
+        }));
+    }
     /**
      * Global rule if you can or can't select entities
      */
@@ -3469,7 +3910,7 @@ class VflowComponent {
     set edges(newEdges) {
         const newModels = runInInjectionContext(this.injector, () => ReferenceIdentityChecker.edges(newEdges, this.flowEntitiesService.edges()));
         // quick and dirty binding nodes to edges
-        addNodesToEdges(this.nodeModels(), newModels);
+        addNodesToEdges(this.flowEntitiesService.nodes(), newModels);
         this.flowEntitiesService.edges.set(newModels);
     }
     // #region METHODS_API
@@ -3572,7 +4013,7 @@ class VflowComponent {
         return edge;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VflowComponent, isStandalone: true, selector: "vflow", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: false, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: false, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: false, isRequired: false, transformFunction: null }, optimization: { classPropertyName: "optimization", publicName: "optimization", isSignal: true, isRequired: false, transformFunction: null }, entitiesSelectable: { classPropertyName: "entitiesSelectable", publicName: "entitiesSelectable", isSignal: false, isRequired: false, transformFunction: null }, keyboardShortcuts: { classPropertyName: "keyboardShortcuts", publicName: "keyboardShortcuts", isSignal: false, isRequired: false, transformFunction: null }, connection: { classPropertyName: "connection", publicName: "connection", isSignal: false, isRequired: false, transformFunction: (settings) => new ConnectionModel(settings) }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: false, isRequired: false, transformFunction: null }, elevateNodesOnSelect: { classPropertyName: "elevateNodesOnSelect", publicName: "elevateNodesOnSelect", isSignal: false, isRequired: false, transformFunction: null }, elevateEdgesOnSelect: { classPropertyName: "elevateEdgesOnSelect", publicName: "elevateEdgesOnSelect", isSignal: false, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: false, isRequired: true, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VflowComponent, isStandalone: true, selector: "vflow", inputs: { view: "view", minZoom: "minZoom", maxZoom: "maxZoom", background: "background", optimization: "optimization", entitiesSelectable: "entitiesSelectable", keyboardShortcuts: "keyboardShortcuts", connection: ["connection", "connection", (settings) => new ConnectionModel(settings)], snapGrid: "snapGrid", elevateNodesOnSelect: "elevateNodesOnSelect", elevateEdgesOnSelect: "elevateEdgesOnSelect", nodes: "nodes", edges: "edges" }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, providers: [
             DraggableService,
             ViewportService,
             FlowStatusService,
@@ -3586,7 +4027,8 @@ class VflowComponent {
             ComponentEventBusService,
             KeyboardService,
             OverlaysService,
-        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "nodeSvgTemplateDirective", first: true, predicate: NodeSvgTemplateDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true, isSignal: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ChangesControllerDirective, 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"] }], ngImport: i0, template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!optimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n\n      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  }\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }, { kind: "directive", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]" }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["model", "nodeTemplate", "nodeSvgTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            { provide: PreviewFlowRenderStrategyService, useClass: ViewportPreviewFlowRenderStrategyService },
+        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "nodeSvgTemplateDirective", first: true, predicate: NodeSvgTemplateDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true, isSignal: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ChangesControllerDirective, 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"] }], ngImport: i0, template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (flowOptimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!flowOptimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  }\n</svg:svg>\n\n@if (flowOptimization().virtualization) {\n  <canvas previewFlow class=\"preview-flow\" [width]=\"flowWidth()\" [height]=\"flowHeight()\"></canvas>\n}\n", styles: [":host{display:grid;grid-template-columns:1fr;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}.root-svg{grid-row-start:1;grid-column-start:1}.preview-flow{pointer-events:none;grid-row-start:1;grid-column-start:1}\n"], dependencies: [{ kind: "directive", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }, { kind: "directive", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]" }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["model", "nodeTemplate", "nodeSvgTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PreviewFlowComponent, selector: "canvas[previewFlow]", inputs: ["width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
@@ -3604,6 +4046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         ComponentEventBusService,
                         KeyboardService,
                         OverlaysService,
+                        { provide: PreviewFlowRenderStrategyService, useClass: ViewportPreviewFlowRenderStrategyService },
                     ], hostDirectives: [changesControllerHostDirective], imports: [
                         RootSvgReferenceDirective,
                         RootSvgContextDirective,
@@ -3617,7 +4060,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NodeComponent,
                         EdgeComponent,
                         NgTemplateOutlet,
-                    ], template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!optimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n\n      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  }\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
+                        PreviewFlowComponent,
+                    ], template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (flowOptimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!flowOptimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  }\n</svg:svg>\n\n@if (flowOptimization().virtualization) {\n  <canvas previewFlow class=\"preview-flow\" [width]=\"flowWidth()\" [height]=\"flowHeight()\"></canvas>\n}\n", styles: [":host{display:grid;grid-template-columns:1fr;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}.root-svg{grid-row-start:1;grid-column-start:1}.preview-flow{pointer-events:none;grid-row-start:1;grid-column-start:1}\n"] }]
         }], propDecorators: { view: [{
                 type: Input
             }], minZoom: [{
@@ -3626,6 +4070,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], background: [{
                 type: Input
+            }], optimization: [{
+                type: Input
             }], entitiesSelectable: [{
                 type: Input
             }], keyboardShortcuts: [{
@@ -3966,5 +4412,5 @@ const Vflow = [
  * Generated bundle index. Do not edit.
  */
 
-export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomDynamicNodeComponent, CustomNodeComponent, CustomTemplateEdgeComponent, DragHandleDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, HandleComponent, HandleTemplateDirective, MiniMapComponent, NodeHtmlTemplateDirective, NodeSvgTemplateDirective, NodeToolbarComponent, NodeToolbarWrapperDirective, ResizableComponent, SelectableDirective, Vflow, VflowComponent, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isSvgTemplateDynamicNode, isSvgTemplateStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode, ComponentEventBusService as ɵComponentEventBusService, ConnectionModel as ɵConnectionModel, FlowEntitiesService as ɵFlowEntitiesService, FlowSettingsService as ɵFlowSettingsService, HandleModel as ɵHandleModel, HandleService as ɵHandleService, NodeAccessorService as ɵNodeAccessorService, NodeModel as ɵNodeModel, RootPointerDirective as ɵRootPointerDirective, SelectionService as ɵSelectionService, SpacePointContextDirective as ɵSpacePointContextDirective, ViewportService as ɵViewportService };
+export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomDynamicNodeComponent, CustomNodeComponent, CustomTemplateEdgeComponent, DEFAULT_OPTIMIZATION, DragHandleDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, HandleComponent, HandleTemplateDirective, MiniMapComponent, NodeHtmlTemplateDirective, NodeSvgTemplateDirective, NodeToolbarComponent, NodeToolbarWrapperDirective, ResizableComponent, SelectableDirective, Vflow, VflowComponent, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isSvgTemplateDynamicNode, isSvgTemplateStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode, ComponentEventBusService as ɵComponentEventBusService, ConnectionModel as ɵConnectionModel, FlowEntitiesService as ɵFlowEntitiesService, FlowSettingsService as ɵFlowSettingsService, HandleModel as ɵHandleModel, HandleService as ɵHandleService, NodeAccessorService as ɵNodeAccessorService, NodeModel as ɵNodeModel, RootPointerDirective as ɵRootPointerDirective, SelectionService as ɵSelectionService, SpacePointContextDirective as ɵSpacePointContextDirective, ViewportService as ɵViewportService };
 //# sourceMappingURL=ngx-vflow.mjs.map