angular-three-soba 1.14.0 → 2.0.0-beta.3

package/fesm2022/angular-three-soba-performance.mjs

@@ -1,112 +1,113 @@
 import * as i0 from '@angular/core';
-import { inject, Directive, Input, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { RxActionFactory } from '@rx-angular/state/actions';
-import { NgtRxStore, NgtStore, extend, injectNgtRef, is, startWithUndefined, addEffect, addAfterEffect } from 'angular-three';
-import { combineLatest } from 'rxjs';
-import { LOD } from 'three';
+import { signal, inject, effect, untracked, Directive, Input, computed, Component, CUSTOM_ELEMENTS_SCHEMA, InjectionToken, ElementRef } from '@angular/core';
+import { NgtStore, extend, NgtSignalStore, injectNgtRef, requestAnimationInInjectionContext, checkUpdate, injectBeforeRender, NgtArgs, is, addEffect, addAfterEffect } from 'angular-three';
+import * as THREE from 'three';
+import { LOD, InstancedMesh, InstancedBufferAttribute } from 'three';
 import { DOCUMENT } from '@angular/common';
 import * as Stats from 'stats.js';
 
-class NgtsAdaptiveDpr extends NgtRxStore {
+class NgtsAdaptiveDpr {
+    #pixelated = signal(false);
+    set pixelated(pixelated) {
+        this.#pixelated.set(pixelated);
+    }
     constructor() {
-        super(...arguments);
-        this.store = inject(NgtStore);
-        this.actions = inject((RxActionFactory)).create();
-        this.pixelated = false;
-    }
-    ngOnInit() {
-        this.effect(this.actions.restorePixel$, () => {
-            const domElement = this.store.get('gl', 'domElement');
-            return () => {
-                const active = this.store.get('internal', 'active');
-                const setDpr = this.store.get('setDpr');
-                const initialDpr = this.store.get('viewport', 'initialDpr');
+        const store = inject(NgtStore);
+        effect((onCleanup) => {
+            const domElement = store.get('gl', 'domElement');
+            onCleanup(() => {
+                const active = store.get('internal', 'active');
+                const setDpr = store.get('setDpr');
+                const initialDpr = store.get('viewport', 'initialDpr');
                 if (active)
                     setDpr(initialDpr);
-                if (this.pixelated && domElement)
+                if (untracked(this.#pixelated) && domElement)
                     domElement.style.imageRendering = 'auto';
-            };
-        });
-        this.actions.restorePixel();
-        this.hold(this.store.select('performance', 'current'), (performanceCurrent) => {
-            const { gl, viewport, setDpr } = this.store.get();
-            setDpr(performanceCurrent * viewport.initialDpr);
-            if (this.pixelated && gl.domElement)
-                gl.domElement.style.imageRendering = performanceCurrent === 1 ? 'auto' : 'pixelated';
-        });
+            });
+        }, { allowSignalWrites: true });
+        const performanceCurrent = store.select('performance', 'current');
+        // TODO: mousemove event doesn't seem to trigger change detection. investigate later
+        effect(() => {
+            const current = performanceCurrent();
+            const { gl, viewport, setDpr } = store.get();
+            setDpr(current * viewport.initialDpr);
+            if (untracked(this.#pixelated) && gl.domElement)
+                gl.domElement.style.imageRendering = current === 1 ? 'auto' : 'pixelated';
+        }, { allowSignalWrites: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsAdaptiveDpr, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsAdaptiveDpr, isStandalone: true, selector: "ngts-adaptive-dpr", inputs: { pixelated: "pixelated" }, providers: [RxActionFactory], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsAdaptiveDpr, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsAdaptiveDpr, isStandalone: true, selector: "ngts-adaptive-dpr", inputs: { pixelated: "pixelated" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsAdaptiveDpr, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ngts-adaptive-dpr',
                     standalone: true,
-                    providers: [RxActionFactory],
                 }]
-        }], propDecorators: { pixelated: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { pixelated: [{
                 type: Input
             }] } });
 
-class NgtsAdaptiveEvents extends NgtRxStore {
+class NgtsAdaptiveEvents {
     constructor() {
-        super(...arguments);
-        this.store = inject(NgtStore);
-        this.actions = inject((RxActionFactory)).create();
-    }
-    ngOnInit() {
-        this.effect(this.actions.setEvents$, () => {
-            const enabled = this.store.get('events', 'enabled');
-            return () => {
-                const setEvents = this.store.get('setEvents');
+        const store = inject(NgtStore);
+        effect((onCleanup) => {
+            const enabled = store.get('events', 'enabled');
+            onCleanup(() => {
+                const setEvents = store.get('setEvents');
                 setEvents({ enabled });
-            };
-        });
-        this.actions.setEvents();
-        this.hold(this.store.select('performance', 'current'), (current) => {
-            const setEvents = this.store.get('setEvents');
-            setEvents({ enabled: current === 1 });
-        });
+            });
+        }, { allowSignalWrites: true });
+        const performanceCurrent = store.select('performance', 'current');
+        effect(() => {
+            const setEvents = store.get('setEvents');
+            setEvents({ enabled: performanceCurrent() === 1 });
+        }, { allowSignalWrites: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsAdaptiveEvents, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsAdaptiveEvents, isStandalone: true, selector: "ngts-adaptive-events", providers: [RxActionFactory], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsAdaptiveEvents, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsAdaptiveEvents, isStandalone: true, selector: "ngts-adaptive-events", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsAdaptiveEvents, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ngts-adaptive-events',
                     standalone: true,
-                    providers: [RxActionFactory],
                 }]
-        }] });
+        }], ctorParameters: function () { return []; } });
 
 extend({ LOD });
-class NgtsDetailed extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.lodRef = injectNgtRef();
-    }
+class NgtsDetailed extends NgtSignalStore {
     set distances(distances) {
         this.set({ distances });
     }
-    ngOnInit() {
-        this.updateLodChildren();
+    constructor() {
+        super();
+        this.lodRef = injectNgtRef();
+        this.#updateChildren();
     }
     onLODBeforeRender({ object, state }) {
         object.update(state.camera);
     }
-    updateLodChildren() {
-        this.hold(combineLatest([this.lodRef.children$(), this.select('distances')]), ([children, distances]) => {
-            this.lodRef.nativeElement.levels.length = 0;
-            children.forEach((child, index) => {
-                this.lodRef.nativeElement.addLevel(child, distances[index]);
-            });
+    #updateChildren() {
+        const distances = this.select('distances');
+        const trigger = computed(() => {
+            const children = this.lodRef.children();
+            return { children: children(), distances: distances() };
+        });
+        effect(() => {
+            const { children, distances } = trigger();
+            const lod = this.lodRef.untracked;
+            if (lod) {
+                lod.levels.length = 0;
+                children.forEach((child, index) => {
+                    lod.addLevel(child, distances[index]);
+                });
+            }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsDetailed, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsDetailed, isStandalone: true, selector: "ngts-detailed[distances]", inputs: { lodRef: "lodRef", distances: "distances" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-lOD [ref]="lodRef" ngtCompound (beforeRender)="onLODBeforeRender($any($event))">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsDetailed, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsDetailed, isStandalone: true, selector: "ngts-detailed", inputs: { lodRef: "lodRef", distances: "distances" }, usesInheritance: true, ngImport: i0, template: `
+        <ngt-lOD ngtCompound [ref]="lodRef" (beforeRender)="onLODBeforeRender($event)">
             <ng-content />
         </ngt-lOD>
     `, isInline: true }); }
@@ -114,31 +115,300 @@ class NgtsDetailed extends NgtRxStore {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsDetailed, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-detailed[distances]',
+                    selector: 'ngts-detailed',
                     standalone: true,
                     template: `
-        <ngt-lOD [ref]="lodRef" ngtCompound (beforeRender)="onLODBeforeRender($any($event))">
+        <ngt-lOD ngtCompound [ref]="lodRef" (beforeRender)="onLODBeforeRender($event)">
             <ng-content />
         </ngt-lOD>
     `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { lodRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { lodRef: [{
                 type: Input
             }], distances: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+extend({ InstancedMesh, InstancedBufferAttribute });
+const NGTS_INSTANCES_API = new InjectionToken('NgtsInstances API');
+class NgtsInstances extends NgtSignalStore {
+    set range(range) {
+        this.set({ range });
+    }
+    set limit(limit) {
+        this.set({ limit });
+    }
+    set frames(frames) {
+        this.set({ frames });
+    }
+    #parentMatrix;
+    #instanceMatrix;
+    #tempMatrix;
+    #translation;
+    #rotation;
+    #scale;
+    #limit;
+    constructor() {
+        super({ limit: 1000, frames: Infinity });
+        this.nullRaycast = () => null;
+        this.DynamicDrawUsage = THREE.DynamicDrawUsage;
+        this.instancesRef = injectNgtRef();
+        this.#parentMatrix = new THREE.Matrix4();
+        this.#instanceMatrix = new THREE.Matrix4();
+        this.#tempMatrix = new THREE.Matrix4();
+        this.#translation = new THREE.Vector3();
+        this.#rotation = new THREE.Quaternion();
+        this.#scale = new THREE.Vector3();
+        this.#limit = this.select('limit');
+        this.matrices = computed(() => {
+            const limit = this.#limit();
+            const mArray = new Float32Array(limit * 16);
+            for (let i = 0; i < limit; i++)
+                this.#tempMatrix.identity().toArray(mArray, i * 16);
+            return mArray;
+        });
+        this.colors = computed(() => {
+            const limit = this.#limit();
+            return new Float32Array([...new Array(limit * 3)].map(() => 1));
+        });
+        this.instances = signal([]);
+        this.api = computed(() => ({
+            getParent: () => this.instancesRef,
+            subscribe: (ref) => {
+                this.instances.update((prev) => [...prev, ref]);
+                return () => this.instances.update((prev) => prev.filter((instance) => instance.nativeElement !== ref.nativeElement));
+            },
+        }));
+        requestAnimationInInjectionContext(() => {
+            this.#checkUpdate();
+            this.#setBeforeRender();
+        });
+    }
+    #checkUpdate() {
+        effect(() => {
+            const instances = this.instancesRef.nativeElement;
+            if (!instances)
+                return;
+            checkUpdate(instances.instanceMatrix);
+        });
+    }
+    #setBeforeRender() {
+        let count = 0;
+        let updateRange = 0;
+        injectBeforeRender(() => {
+            const instances = this.instancesRef.nativeElement;
+            if (!instances)
+                return;
+            const { frames, range, limit } = this.get();
+            const meshes = this.instances();
+            const colors = this.colors();
+            const matrices = this.matrices();
+            if (frames === Infinity || count < frames) {
+                instances.updateMatrix();
+                instances.updateMatrixWorld();
+                this.#parentMatrix.copy(instances.matrixWorld).invert();
+                updateRange = Math.min(limit, range !== undefined ? range : limit, meshes.length);
+                instances.count = updateRange;
+                instances.instanceMatrix.updateRange.count = updateRange * 16;
+                if (instances.instanceColor) {
+                    instances.instanceColor.updateRange.count = updateRange * 3;
+                }
+                for (let i = 0; i < meshes.length; i++) {
+                    const instance = meshes[i].nativeElement;
+                    // Multiply the inverse of the InstancedMesh world matrix or else
+                    // Instances will be double-transformed if <Instances> isn't at identity
+                    instance.matrixWorld.decompose(this.#translation, this.#rotation, this.#scale);
+                    this.#instanceMatrix
+                        .compose(this.#translation, this.#rotation, this.#scale)
+                        .premultiply(this.#parentMatrix);
+                    this.#instanceMatrix.toArray(matrices, i * 16);
+                    instances.instanceMatrix.needsUpdate = true;
+                    instance.color.toArray(colors, i * 3);
+                    if (instances.instanceColor) {
+                        checkUpdate(instances.instanceColor);
+                    }
+                }
+                count++;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsInstances, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsInstances, isStandalone: true, selector: "ngts-instances", inputs: { instancesRef: "instancesRef", range: "range", limit: "limit", frames: "frames" }, providers: [
+            { provide: NGTS_INSTANCES_API, useFactory: (instances) => instances.api, deps: [NgtsInstances] },
+        ], usesInheritance: true, ngImport: i0, template: `
+        <ngt-instanced-mesh
+            *args="[undefined, undefined, 0]"
+            ngtCompound
+            [ref]="instancesRef"
+            [matrixAutoUpdate]="false"
+            [raycast]="nullRaycast"
+            [userData]="{ instances }"
+        >
+            <ngt-instanced-buffer-attribute
+                attach="instanceMatrix"
+                [count]="matrices().length / 16"
+                [array]="matrices()"
+                [itemSize]="16"
+                [usage]="DynamicDrawUsage"
+            />
+            <ngt-instanced-buffer-attribute
+                attach="instanceColor"
+                [count]="colors().length / 3"
+                [array]="colors()"
+                [itemSize]="3"
+                [usage]="DynamicDrawUsage"
+            />
+
+            <ng-content />
+        </ngt-instanced-mesh>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsInstances, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-instances',
+                    standalone: true,
+                    template: `
+        <ngt-instanced-mesh
+            *args="[undefined, undefined, 0]"
+            ngtCompound
+            [ref]="instancesRef"
+            [matrixAutoUpdate]="false"
+            [raycast]="nullRaycast"
+            [userData]="{ instances }"
+        >
+            <ngt-instanced-buffer-attribute
+                attach="instanceMatrix"
+                [count]="matrices().length / 16"
+                [array]="matrices()"
+                [itemSize]="16"
+                [usage]="DynamicDrawUsage"
+            />
+            <ngt-instanced-buffer-attribute
+                attach="instanceColor"
+                [count]="colors().length / 3"
+                [array]="colors()"
+                [itemSize]="3"
+                [usage]="DynamicDrawUsage"
+            />
+
+            <ng-content />
+        </ngt-instanced-mesh>
+    `,
+                    imports: [NgtArgs],
+                    providers: [
+                        { provide: NGTS_INSTANCES_API, useFactory: (instances) => instances.api, deps: [NgtsInstances] },
+                    ],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { instancesRef: [{
+                type: Input
+            }], range: [{
+                type: Input,
+                args: [{ required: true }]
+            }], limit: [{
+                type: Input
+            }], frames: [{
                 type: Input
             }] } });
 
-class NgtsStats extends NgtRxStore {
+const _instanceLocalMatrix = /*@__PURE__*/ new THREE.Matrix4();
+const _instanceWorldMatrix = /*@__PURE__*/ new THREE.Matrix4();
+const _instanceIntersects =  [];
+const _mesh = /*@__PURE__*/ new THREE.Mesh();
+class PositionMesh extends THREE.Group {
     constructor() {
-        super(...arguments);
-        this.document = inject(DOCUMENT);
-        this.stats = Stats['default']
-            ? new Stats['default']()
-            : new Stats();
+        super();
+        this.color = new THREE.Color('white');
+        this.instance = new ElementRef(undefined);
+        this.instanceKey = new ElementRef(undefined);
+    }
+    // This will allow the virtual instance have bounds
+    get geometry() {
+        return this.instance.nativeElement?.geometry;
     }
+    // And this will allow the virtual instance to receive events
+    raycast(raycaster, intersects) {
+        const parent = this.instance.nativeElement;
+        if (!parent)
+            return;
+        if (!parent.geometry || !parent.material)
+            return;
+        _mesh.geometry = parent.geometry;
+        const matrixWorld = parent.matrixWorld;
+        const instanceId = parent.userData['instances']().indexOf(this.instanceKey);
+        // If the instance wasn't found or exceeds the parents draw range, bail out
+        if (instanceId === -1 || instanceId > parent.count)
+            return;
+        // calculate the world matrix for each instance
+        parent.getMatrixAt(instanceId, _instanceLocalMatrix);
+        _instanceWorldMatrix.multiplyMatrices(matrixWorld, _instanceLocalMatrix);
+        // the mesh represents this single instance
+        _mesh.matrixWorld = _instanceWorldMatrix;
+        // raycast side according to instance material
+        if (parent.material instanceof THREE.Material)
+            _mesh.material.side = parent.material.side;
+        else
+            _mesh.material.side = parent.material[0].side;
+        _mesh.raycast(raycaster, _instanceIntersects);
+        // process the result of raycast
+        for (let i = 0, l = _instanceIntersects.length; i < l; i++) {
+            const intersect = _instanceIntersects[i];
+            intersect.instanceId = instanceId;
+            intersect.object = this;
+            intersects.push(intersect);
+        }
+        _instanceIntersects.length = 0;
+    }
+}
+
+extend({ PositionMesh });
+class NgtsInstance {
+    constructor() {
+        this.positionMeshRef = injectNgtRef();
+        this.instancesApi = inject(NGTS_INSTANCES_API);
+        requestAnimationInInjectionContext(() => {
+            effect((onCleanup) => {
+                onCleanup(this.instancesApi().subscribe(this.positionMeshRef));
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsInstance, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsInstance, isStandalone: true, selector: "ngts-instance", ngImport: i0, template: `
+        <ngt-position-mesh
+            ngtCompound
+            [ref]="positionMeshRef"
+            [instanceKey]="positionMeshRef"
+            [instance]="instancesApi().getParent()"
+        >
+            <ng-content />
+        </ngt-position-mesh>
+    `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsInstance, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-instance',
+                    standalone: true,
+                    template: `
+        <ngt-position-mesh
+            ngtCompound
+            [ref]="positionMeshRef"
+            [instanceKey]="positionMeshRef"
+            [instance]="instancesApi().getParent()"
+        >
+            <ng-content />
+        </ngt-position-mesh>
+    `,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class NgtsStats extends NgtSignalStore {
     set showPanel(showPanel) {
-        this.set({ showPanel: showPanel === undefined ? this.get('showPanel') : showPanel });
+        this.set({ showPanel });
     }
     set parent(parent) {
         this.set({ parent: is.ref(parent) ? parent.nativeElement : parent });
@@ -149,41 +419,48 @@ class NgtsStats extends NgtRxStore {
     set right(right) {
         this.set({ right });
     }
-    initialize() {
-        super.initialize();
-        this.set({ showPanel: 0, right: false });
-    }
-    ngOnInit() {
-        this.effect(combineLatest([
-            this.select('showPanel'),
-            this.select('right'),
-            this.select('parent').pipe(startWithUndefined()),
-            this.select('classes').pipe(startWithUndefined()),
-        ]), ([showPanel, right, parent, classes]) => {
-            const node = parent ?? this.document.body;
-            this.stats.showPanel(showPanel);
-            node.appendChild(this.stats.dom);
+    constructor() {
+        super({ showPanel: 0, right: false });
+        const document = inject(DOCUMENT);
+        const stats = Stats['default']
+            ? new Stats['default']()
+            : new Stats();
+        const showPanel = this.select('showPanel');
+        const right = this.select('right');
+        const parent = this.select('parent');
+        const classes = this.select('classes');
+        const trigger = computed(() => ({
+            showPanel: showPanel(),
+            right: right(),
+            parent: parent(),
+            classes: classes(),
+        }));
+        effect((onCleanup) => {
+            const { showPanel, right, parent, classes } = trigger();
+            const node = parent ?? document.body;
+            stats.showPanel(showPanel);
+            node.appendChild(stats.dom);
             if (classes) {
-                this.stats.dom.classList.add(...classes.split(' ').filter((cls) => cls));
+                stats.dom.classList.add(...classes.split(' ').filter((cls) => cls));
             }
             if (right) {
-                this.stats.dom.style.right = '0px';
-                this.stats.dom.style.left = 'inherit';
+                stats.dom.style.right = '0px';
+                stats.dom.style.left = 'inherit';
             }
             else {
-                this.stats.dom.style.left = '0px';
-                this.stats.dom.style.right = 'inherit';
+                stats.dom.style.left = '0px';
+                stats.dom.style.right = 'inherit';
             }
-            const begin = addEffect(() => this.stats.begin());
-            const end = addAfterEffect(() => this.stats.end());
-            return () => {
-                node.removeChild(this.stats.dom);
+            const begin = addEffect(() => stats.begin());
+            const end = addAfterEffect(() => stats.end());
+            onCleanup(() => {
+                node.removeChild(stats.dom);
                 begin();
                 end();
-            };
+            });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsStats, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsStats, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsStats, isStandalone: true, selector: "ngts-stats", inputs: { showPanel: "showPanel", parent: "parent", classes: "classes", right: "right" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsStats, decorators: [{
@@ -192,7 +469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngts-stats',
                     standalone: true,
                 }]
-        }], propDecorators: { showPanel: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { showPanel: [{
                 type: Input
             }], parent: [{
                 type: Input
@@ -206,5 +483,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgtsAdaptiveDpr, NgtsAdaptiveEvents, NgtsDetailed, NgtsStats };
+export { NGTS_INSTANCES_API, NgtsAdaptiveDpr, NgtsAdaptiveEvents, NgtsDetailed, NgtsInstance, NgtsInstances, NgtsStats };
 //# sourceMappingURL=angular-three-soba-performance.mjs.map