ngx-vflow 1.8.1 → 1.8.2

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, effect, untracked, TemplateRef, DestroyRef, EventEmitter, OutputEmitterRef, input, NgZone, viewChild, Component, ChangeDetectionStrategy, output, HostListener, Injector, runInInjectionContext, isDevMode, ViewContainerRef, IterableDiffers, ChangeDetectorRef, Input, contentChild, 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, of } from 'rxjs';
+import { switchMap, merge, fromEvent, tap, Subject, Observable, skip, map, pairwise, filter, distinctUntilChanged, observeOn, asyncScheduler, zip, animationFrameScheduler, share, startWith, from, bufferCount, concatMap, of, delayWhen, animationFrames, take, takeUntil, finalize } from 'rxjs';
 import { toObservable, takeUntilDestroyed, outputFromObservable, toSignal } from '@angular/core/rxjs-interop';
 import { drag } from 'd3-drag';
 import { __decorate } from 'tslib';
@@ -3232,6 +3232,245 @@ function getSpacePoints(point, groups) {
     return result;
 }
 
+/** Enum with lazy render directive state */
+var LazyForState;
+(function (LazyForState) {
+    /** Directive is in idle state */
+    LazyForState["idle"] = "idle";
+    /** Directive is rendering */
+    LazyForState["rendering"] = "rendering";
+})(LazyForState || (LazyForState = {}));
+/**
+ * Context for an element in lazyFor
+ */
+class LazyForContextModel {
+    /** Whether the element is first */
+    get first() {
+        return this.index === 0;
+    }
+    /** Whether the element is last */
+    get last() {
+        return this.index === this.count - 1;
+    }
+    /** Whether the element is even */
+    get even() {
+        return this.index % 2 === 0;
+    }
+    /** Whether the element is odd */
+    get odd() {
+        return !this.even;
+    }
+    constructor($implicit, lazyFor, index, count) {
+        this.$implicit = $implicit;
+        this.lazyFor = lazyFor;
+        this.index = index;
+        this.count = count;
+    }
+}
+class LazyForDirective {
+    /**
+     * Asserts the correct type of the context for the template that `lazyFor` will render.
+     *
+     * The presence of this method is a signal to the Ivy template type-check compiler that the
+     * `lazyFor` structural directive renders its template with a specific context type.
+     */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    //#region INPUTS
+    /** Setter for the array to be rendered by the directive */
+    set lazyForOf(lazyFor) {
+        this._lazyFor = lazyFor;
+        this._lazyForDirty = true;
+    }
+    /**
+     * Input - setter for TrackBy function
+     * @description is required
+     */
+    set lazyForTrackBy(fn) {
+        if (isDevMode() && fn !== null && typeof fn !== 'function') {
+            console.warn(`trackBy must be a function, but received ${JSON.stringify(fn)}. ` +
+                `See https://angular.io/api/common/NgForOf#change-propagation for more information.`);
+        }
+        this._trackByFn = fn;
+    }
+    /**
+     * Setter for the number of items that will be rendered per frame
+     * @param value number of items that will be rendered per frame
+     */
+    set lazyForItemsPerFrame(value) {
+        if (value <= 0) {
+            if (isDevMode()) {
+                console.warn('Items per frame parameter cannot be lower than 0! Input value was ignored');
+            }
+            return;
+        }
+        this._itemsPerFrame = value;
+    }
+    /** Setter for array item template */
+    set lazyForTemplate(value) {
+        if (value) {
+            this._template = value;
+        }
+    }
+    /** Getter for TrackBy function */
+    get lazyForTrackBy() {
+        return this._trackByFn;
+    }
+    //#endregion
+    constructor() {
+        this._template = inject(TemplateRef);
+        this._viewContainer = inject(ViewContainerRef);
+        this._differs = inject(IterableDiffers);
+        this._cdr = inject(ChangeDetectorRef);
+        this._destroyRef$ = inject(DestroyRef);
+        //#region PROPERTIES
+        /** Array for rendering */
+        this._lazyFor = null;
+        /** lazyFor initialization flag */
+        this._lazyForDirty = true;
+        /** Differ for tracking changes in input array */
+        this._differ = null;
+        /** Number of items to be rendered per frame */
+        this._itemsPerFrame = 5;
+        /** Directive state */
+        this._lazyForState = LazyForState.idle;
+        //#endregion
+        //#region RXJS
+        /** Private subject for stopping dynamic render process */
+        this._rerenderUnsub$ = new Subject();
+        this._destroyRef$.onDestroy(() => this._viewContainer.clear());
+    }
+    /** ngDoCheck hook */
+    ngDoCheck() {
+        if (this._lazyForDirty) {
+            this._lazyForDirty = false;
+            const value = this._lazyFor;
+            if (!this._differ && value) {
+                this._differ = this._differs.find(value).create(this.lazyForTrackBy);
+            }
+        }
+        if (this._differ) {
+            let changes = this._differ.diff(this._lazyFor);
+            if (changes) {
+                if (this._lazyForState === LazyForState.rendering) {
+                    /**
+                     * If the array changed during an active render process
+                     * Need to clear container of all views
+                     * And restart rendering from the beginning.
+                     */
+                    this._rerenderUnsub$.next();
+                    changes = this._differ.diff([]);
+                    changes = this._differ.diff(this._lazyFor);
+                    this._viewContainer.clear();
+                    if (changes) {
+                        this.applyChanges(changes);
+                    }
+                }
+                else {
+                    this.applyChanges(changes);
+                }
+            }
+        }
+    }
+    /**
+     * Apply changes detected by differ
+     * @param changes changes
+     */
+    applyChanges(changes) {
+        const itemDataListToRender = [];
+        changes.forEachOperation((item, adjustedPreviousIndex, currentIndex) => {
+            const itemToPush = {
+                item: { ...item },
+                adjustedPreviousIndex,
+                currentIndex,
+            };
+            itemDataListToRender.push(itemToPush);
+        });
+        this.performLazyRender(itemDataListToRender, changes);
+    }
+    /**
+     * Perform lazy rendering
+     * @param itemDataListToRender list of items to render
+     * @param changes changes
+     */
+    performLazyRender(itemDataListToRender, changes) {
+        this.updateLazyForState(LazyForState.rendering);
+        this._rerenderUnsub$.next();
+        from(itemDataListToRender)
+            .pipe(bufferCount(this._itemsPerFrame), concatMap((itemList) => of(itemList).pipe(delayWhen(() => animationFrames()))), tap((itemList) => {
+            for (let i = 0; i < itemList.length; i++) {
+                const data = itemList[i];
+                if (data.item.previousIndex === null) {
+                    this._viewContainer.createEmbeddedView(this._template, new LazyForContextModel(data.item.item, this._lazyFor, -1, -1), data.currentIndex === null ? undefined : data.currentIndex);
+                }
+                else if (data.currentIndex === null) {
+                    this._viewContainer.remove(data.adjustedPreviousIndex === null ? undefined : data.adjustedPreviousIndex);
+                }
+                else if (data.adjustedPreviousIndex !== null) {
+                    const view = this._viewContainer.get(data.adjustedPreviousIndex);
+                    this._viewContainer.move(view, data.currentIndex);
+                    this.applyViewChange(view, data.item);
+                }
+            }
+            this.updateViewContext();
+            this._cdr.markForCheck();
+        }), 
+        /** Using take we automatically unsubscribe from the stream when rendering is complete */
+        take(Math.ceil(itemDataListToRender.length / this._itemsPerFrame)), takeUntil(this._rerenderUnsub$), takeUntilDestroyed(this._destroyRef$), finalize(() => {
+            changes.forEachIdentityChange((record) => {
+                const viewRef = (this._viewContainer.get(record.currentIndex));
+                this.applyViewChange(viewRef, record);
+            });
+            this.updateLazyForState(LazyForState.idle);
+        }))
+            .subscribe();
+    }
+    /** Update context (without implicit$) for elements inside view */
+    updateViewContext() {
+        for (let i = 0, ilen = this._viewContainer.length; i < ilen; i++) {
+            const viewRef = (this._viewContainer.get(i));
+            const context = viewRef.context;
+            context.index = i;
+            context.count = ilen;
+            context.lazyFor = this._lazyFor;
+        }
+    }
+    /**
+     * Apply implicit$ context
+     * @param view view
+     * @param record data
+     */
+    applyViewChange(view, record) {
+        view.context.$implicit = record.item;
+    }
+    /**
+     * Update directive state
+     * @param stateToSet state to set
+     */
+    updateLazyForState(stateToSet) {
+        this._lazyForState = stateToSet;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyForDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: LazyForDirective, isStandalone: true, selector: "[lazyFor][lazyForOf]", inputs: { lazyForOf: "lazyForOf", lazyForTrackBy: "lazyForTrackBy", lazyForItemsPerFrame: "lazyForItemsPerFrame", lazyForTemplate: "lazyForTemplate" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyForDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lazyFor][lazyForOf]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { lazyForOf: [{
+                type: Input
+            }], lazyForTrackBy: [{
+                type: Input,
+                args: [{ required: true }]
+            }], lazyForItemsPerFrame: [{
+                type: Input
+            }], lazyForTemplate: [{
+                type: Input
+            }] } });
+
 const changesControllerHostDirective = {
     directive: ChangesControllerDirective,
     outputs: [
@@ -3546,7 +3785,7 @@ 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      <!-- 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 }); }
+        ], 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      <svg:g\n        *lazyFor=\"let model of groups(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\n\n      <!-- Edges  -->\n      <svg:g\n        *lazyFor=\"let model of edgeModels(); trackBy: trackEdges\"\n        edge\n        [model]=\"model\"\n        [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n        [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n\n      <!-- Nodes -->\n      <svg:g\n        *lazyFor=\"let model of nonGroups(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n        [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\n    }\n\n    @if (!optimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      <svg:g\n        *lazyFor=\"let model of edgeModels(); trackBy: trackEdges\"\n        edge\n        [model]=\"model\"\n        [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n        [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n\n      <!-- Nodes -->\n      <svg:g\n        *lazyFor=\"let model of nodeModels(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n        [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\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"] }, { kind: "directive", type: LazyForDirective, selector: "[lazyFor][lazyForOf]", inputs: ["lazyForOf", "lazyForTrackBy", "lazyForItemsPerFrame", "lazyForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
@@ -3577,7 +3816,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      <!-- 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"] }]
+                        LazyForDirective,
+                    ], 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      <svg:g\n        *lazyFor=\"let model of groups(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\n\n      <!-- Edges  -->\n      <svg:g\n        *lazyFor=\"let model of edgeModels(); trackBy: trackEdges\"\n        edge\n        [model]=\"model\"\n        [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n        [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n\n      <!-- Nodes -->\n      <svg:g\n        *lazyFor=\"let model of nonGroups(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n        [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\n    }\n\n    @if (!optimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      <svg:g\n        *lazyFor=\"let model of edgeModels(); trackBy: trackEdges\"\n        edge\n        [model]=\"model\"\n        [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n        [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n\n      <!-- Nodes -->\n      <svg:g\n        *lazyFor=\"let model of nodeModels(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n        [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\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"] }]
         }], propDecorators: { view: [{
                 type: Input
             }], minZoom: [{