angular-three 1.9.11 → 1.9.12

package/fesm2020/angular-three.mjs

@@ -1,11 +1,10 @@
 import * as i0 from '@angular/core';
 import { inject, ChangeDetectorRef, ElementRef, Injectable, InjectionToken, ViewContainerRef, TemplateRef, Directive, Input, EventEmitter, getDebugNode, RendererFactory2, makeEnvironmentProviders, EnvironmentInjector, createEnvironmentInjector, Component, HostBinding, Output, ViewChild, Injector, Pipe, SkipSelf, ContentChild } from '@angular/core';
 import { provideNgxResizeOptions, NgxResize } from 'ngx-resize';
-import { isObservable, of, map, from, tap, retry, catchError, share, ReplaySubject, switchMap, forkJoin, take, BehaviorSubject, startWith, combineLatest, distinctUntilChanged, filter, takeUntil, merge } from 'rxjs';
+import { isObservable, of, map, from, tap, retry, catchError, share, ReplaySubject, switchMap, forkJoin, take, BehaviorSubject, startWith, combineLatest, filter, distinctUntilChanged, takeUntil, merge } from 'rxjs';
 import * as THREE from 'three';
 import { DOCUMENT, NgForOf, NgIf } from '@angular/common';
-import { RxState, selectSlice } from '@rx-angular/state';
-import { __classPrivateFieldGet } from 'tslib';
+import { RxState } from '@rx-angular/state';
 import * as i1 from '@angular/router';
 import { ActivationEnd, RouterOutlet } from '@angular/router';
 
@@ -58,10 +57,24 @@ function makeObjectGraph(object) {
     return data;
 }
 
+function safeDetectChanges(cdr) {
+    if (!cdr)
+        return;
+    try {
+        // dynamic created component with ViewContainerRef#createComponent does not have Context
+        // but it has _attachedToViewContainer
+        if (cdr['context'] || cdr['_attachedToViewContainer']) {
+            cdr.detectChanges();
+        }
+    }
+    catch (e) {
+        cdr.markForCheck();
+    }
+}
+
 const cached = new Map();
-function injectLoader(loaderConstructorFactory, input, extensions, onProgress) {
+function load(loaderConstructorFactory, input, extensions, onProgress) {
     const urls$ = isObservable(input) ? input : of(input);
-    const cdr = inject(ChangeDetectorRef);
     return urls$.pipe(map((inputs) => {
         const loaderConstructor = loaderConstructorFactory(inputs);
         const loader = new loaderConstructor();
@@ -83,7 +96,11 @@ function injectLoader(loaderConstructorFactory, input, extensions, onProgress) {
             }),
             inputs,
         ];
-    }), switchMap(([observables$, inputs]) => {
+    }));
+}
+function injectLoader(loaderConstructorFactory, input, extensions, onProgress) {
+    const cdr = inject(ChangeDetectorRef);
+    return load(loaderConstructorFactory, input, extensions, onProgress).pipe(switchMap(([observables$, inputs]) => {
         return forkJoin(observables$).pipe(map((results) => {
             if (Array.isArray(inputs))
                 return results;
@@ -95,7 +112,7 @@ function injectLoader(loaderConstructorFactory, input, extensions, onProgress) {
                 return result;
             }, {});
         }), tap(() => {
-            requestAnimationFrame(() => cdr.detectChanges());
+            requestAnimationFrame(() => void safeDetectChanges(cdr));
         }));
     }));
 }
@@ -103,7 +120,7 @@ injectLoader.destroy = () => {
     cached.clear();
 };
 injectLoader.preLoad = (loaderConstructorFactory, inputs, extensions) => {
-    injectLoader(loaderConstructorFactory, inputs, extensions).pipe(take(1)).subscribe();
+    load(loaderConstructorFactory, inputs, extensions).pipe(take(1)).subscribe();
 };
 const injectNgtLoader = injectLoader;
 
@@ -352,6 +369,8 @@ function prepare(object, localState) {
                 const current = instance.__ngt__[type].value;
                 const foundIndex = current.indexOf((obj) => obj === object);
                 if (foundIndex > -1) {
+                    // if we add an object with the same reference, then we switch it out
+                    // and update the BehaviorSubject
                     current.splice(foundIndex, 1, object);
                     instance.__ngt__[type].next(current);
                 }
@@ -474,7 +493,6 @@ const startWithUndefined = () => startWith(undefined);
  * - can optionally return a `cleanUp` function that
  * invokes from the 2nd `next` notification onward and on `unsubscribe` (destroyed)
  *
- *
  * @example
  * ```typescript
  * source$.pipe(
@@ -504,17 +522,14 @@ function tapEffect(effectFn) {
     };
     return tap({
         next: (value) => {
-            if (cleanupFn && firstRun) {
+            if (cleanupFn && firstRun)
                 cleanupFn({ prev, complete: false, error: false });
-            }
             const cleanUpOrVoid = effectFn(value);
-            if (cleanUpOrVoid) {
+            if (cleanUpOrVoid)
                 cleanupFn = cleanUpOrVoid;
-            }
             prev = value;
-            if (!firstRun) {
+            if (!firstRun)
                 firstRun = true;
-            }
         },
         complete: teardown(false),
         unsubscribe: teardown(false),
@@ -524,7 +539,6 @@ function tapEffect(effectFn) {
 class NgtRxStore extends RxState {
     constructor() {
         super();
-        this.cache = {};
         // set a dummy property so that initial this.get() won't return undefined
         this.set({ __ngt_dummy__: '__ngt_dummy__' });
         // override set so our consumers don't have to handle undefined for state that already have default values
@@ -571,24 +585,13 @@ class NgtRxStore extends RxState {
             $ = combineLatest(keys.map((key) => this.select(key).pipe(startWith(this.get(key) ?? undefined))));
         }
         this.hold($, () => {
-            requestAnimationFrame(() => void cdr.detectChanges());
+            requestAnimationFrame(() => void safeDetectChanges(cdr));
         });
     }
-    key$(...keys) {
-        const key = keys.join('.');
-        if (!this.cache[key]) {
-            this.cache[key] = this.select(...keys).pipe(startWith(this.get(...keys) ?? undefined), distinctUntilChanged());
-        }
-        return this.cache[key];
-    }
-    ngOnDestroy() {
-        this.cache = {};
-        super.ngOnDestroy();
-    }
 }
-NgtRxStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRxStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NgtRxStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRxStore });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRxStore, decorators: [{
+NgtRxStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtRxStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NgtRxStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtRxStore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtRxStore, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -631,7 +634,6 @@ class NgtStore extends NgtRxStore {
                 const w = h * aspect;
                 return { width: w, height: h, top, left, factor: width / w, distance, aspect };
             };
-            const pointer = new THREE.Vector2();
             let performanceTimeout;
             const setPerformanceCurrent = (current) => {
                 this.set((state) => ({ performance: { ...state.performance, current } }));
@@ -650,7 +652,7 @@ class NgtStore extends NgtRxStore {
                 flat: false,
                 controls: null,
                 clock: new THREE.Clock(),
-                pointer,
+                pointer: new THREE.Vector2(),
                 frameloop: 'always',
                 performance: {
                     current: 1,
@@ -940,8 +942,7 @@ class NgtStore extends NgtRxStore {
         let oldSize = state.size;
         let oldDpr = state.viewport.dpr;
         let oldCamera = state.camera;
-        this.hold(this.select(selectSlice(['camera', 'size', 'viewport', 'gl'])), () => {
-            const { camera, size, viewport, gl, set } = this.get();
+        this.hold(combineLatest([this.select('camera'), this.select('size'), this.select('viewport'), this.select('gl')]), ([camera, size, viewport, gl]) => {
             // resize camera and renderer on changes to size and dpr
             if (size !== oldSize || viewport.dpr !== oldDpr) {
                 oldSize = size;
@@ -955,7 +956,9 @@ class NgtStore extends NgtRxStore {
             if (camera !== oldCamera) {
                 updateCamera(camera, size);
                 oldCamera = camera;
-                set((state) => ({ viewport: { ...state.viewport, ...state.viewport.getCurrentViewport(camera) } }));
+                this.set((state) => ({
+                    viewport: { ...state.viewport, ...state.viewport.getCurrentViewport(camera) },
+                }));
             }
         });
     }
@@ -963,9 +966,9 @@ class NgtStore extends NgtRxStore {
         this.hold(this.select(), () => invalidate(this));
     }
 }
-NgtStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtStore, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-NgtStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtStore });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtStore, decorators: [{
+NgtStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtStore, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+NgtStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtStore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtStore, decorators: [{
             type: Injectable
         }] });
 function computeInitialSize(canvas, defaultSize) {
@@ -973,8 +976,7 @@ function computeInitialSize(canvas, defaultSize) {
         return defaultSize;
     }
     if (canvas instanceof HTMLCanvasElement && canvas.parentElement) {
-        const { width, height, top, left } = canvas.parentElement.getBoundingClientRect();
-        return { width, height, top, left };
+        return canvas.parentElement.getBoundingClientRect();
     }
     return { width: 0, height: 0, top: 0, left: 0 };
 }
@@ -1014,13 +1016,13 @@ class NgtCommonDirective {
                 this.view.destroy();
             }
             this.view = this.vcr.createEmbeddedView(this.template);
-            this.view.detectChanges();
+            safeDetectChanges(this.view);
         }
     }
 }
-NgtCommonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-NgtCommonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: NgtCommonDirective, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtCommonDirective, decorators: [{
+NgtCommonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+NgtCommonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: NgtCommonDirective, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtCommonDirective, decorators: [{
             type: Directive
         }], ctorParameters: function () { return []; } });
 
@@ -1049,9 +1051,9 @@ class NgtArgs extends NgtCommonDirective {
         return !this.injected && !!this.injectedArgs.length;
     }
 }
-NgtArgs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-NgtArgs.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: NgtArgs, isStandalone: true, selector: "[args]", inputs: { args: "args" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtArgs, decorators: [{
+NgtArgs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+NgtArgs.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: NgtArgs, isStandalone: true, selector: "[args]", inputs: { args: "args" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtArgs, decorators: [{
             type: Directive,
             args: [{ selector: '[args]', standalone: true }]
         }], propDecorators: { args: [{
@@ -1081,9 +1083,9 @@ class NgtParent extends NgtCommonDirective {
         return !this.injected && !!this.injectedParent;
     }
 }
-NgtParent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-NgtParent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: NgtParent, isStandalone: true, selector: "[parent]", inputs: { parent: "parent" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtParent, decorators: [{
+NgtParent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+NgtParent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: NgtParent, isStandalone: true, selector: "[parent]", inputs: { parent: "parent" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtParent, decorators: [{
             type: Directive,
             args: [{ selector: '[parent]', standalone: true }]
         }], propDecorators: { parent: [{
@@ -1618,9 +1620,8 @@ function processThreeEvent(instance, priority, eventName, callback, cdr, targetC
 function eventToHandler(callback, cdr, targetCdr) {
     return (event) => {
         callback(event);
-        if (targetCdr)
-            targetCdr.detectChanges();
-        cdr.detectChanges();
+        safeDetectChanges(targetCdr);
+        safeDetectChanges(cdr);
     };
 }
 function kebabToPascal(str) {
@@ -2038,9 +2039,9 @@ class NgtRendererFactory {
         return renderer;
     }
 }
-NgtRendererFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NgtRendererFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRendererFactory });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRendererFactory, decorators: [{
+NgtRendererFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NgtRendererFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtRendererFactory });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtRendererFactory, decorators: [{
             type: Injectable
         }] });
 /**
@@ -2312,9 +2313,8 @@ class NgtRenderer {
         // if target is DOM node, then we pass that to delegate Renderer
         const callbackWithCdr = (event) => {
             const value = callback(event);
-            if (targetCdr)
-                targetCdr.detectChanges();
-            this.store.rootCdr.detectChanges();
+            safeDetectChanges(targetCdr);
+            safeDetectChanges(this.store.rootCdr);
             return value;
         };
         if (this.store.isDOM(target)) {
@@ -2520,7 +2520,7 @@ class NgtCanvas extends NgtRxStore {
             this.store.set({
                 onPointerMissed: (event) => {
                     this.pointerMissed.emit(event);
-                    this.cdr.detectChanges();
+                    safeDetectChanges(this.cdr);
                 },
             });
         }
@@ -2560,20 +2560,16 @@ class NgtCanvas extends NgtRxStore {
         // emit created event if observed
         if (this.created.observed) {
             this.created.emit(this.store.get());
-            this.cdr.detectChanges();
         }
         // render
         if (this.glRef)
             this.glRef.destroy();
         requestAnimationFrame(() => {
-            this.glEnvInjector = createEnvironmentInjector([
-                provideNgtRenderer({
-                    store: this.store,
-                    changeDetectorRef: this.cdr,
-                    compoundPrefixes: this.compoundPrefixes,
-                }),
-            ], this.envInjector);
+            const { store, cdr: changeDetectorRef, compoundPrefixes } = this;
+            this.glEnvInjector = createEnvironmentInjector([provideNgtRenderer({ store, changeDetectorRef, compoundPrefixes })], this.envInjector);
             this.glRef = this.glAnchor.createComponent(this.sceneGraph, { environmentInjector: this.glEnvInjector });
+            // detach the Scene graph from Change Detection mechanism
+            // everything from this point forward will trigger CD manually with detectChanges
             this.glRef.changeDetectorRef.detach();
             this.setSceneGraphInputs();
             // here, we override the detectChanges to also call detectChanges on the ComponentRef
@@ -2594,23 +2590,23 @@ class NgtCanvas extends NgtRxStore {
         const originalDetectChanges = this.cdr.detectChanges.bind(this.cdr);
         this.cdr.detectChanges = () => {
             originalDetectChanges();
-            this.glRef?.changeDetectorRef.detectChanges();
+            safeDetectChanges(this.glRef?.changeDetectorRef);
         };
     }
     setSceneGraphInputs() {
         for (const key of Object.keys(this.sceneGraphInputs)) {
-            this.glRef?.setInput(key, this.sceneGraphInputs[key]);
+            this.glRef.setInput(key, this.sceneGraphInputs[key]);
         }
-        this.cdr.detectChanges();
+        safeDetectChanges(this.cdr);
     }
 }
-NgtCanvas.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtCanvas, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtCanvas.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: "sceneGraph", sceneGraphInputs: "sceneGraphInputs", compoundPrefixes: "compoundPrefixes", linear: "linear", legacy: "legacy", flat: "flat", orthographic: "orthographic", frameloop: "frameloop", dpr: "dpr", raycaster: "raycaster", shadows: "shadows", camera: "camera", gl: "gl", eventSource: "eventSource", eventPrefix: "eventPrefix", lookAt: "lookAt", performance: "performance" }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { properties: { "class.ngt-canvas": "this.hostClass", "style.pointerEvents": "this.pointerEvents" } }, providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false })], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, static: true }, { propertyName: "glAnchor", first: true, predicate: ["glCanvas"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+NgtCanvas.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtCanvas, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtCanvas.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: "sceneGraph", sceneGraphInputs: "sceneGraphInputs", compoundPrefixes: "compoundPrefixes", linear: "linear", legacy: "legacy", flat: "flat", orthographic: "orthographic", frameloop: "frameloop", dpr: "dpr", raycaster: "raycaster", shadows: "shadows", camera: "camera", gl: "gl", eventSource: "eventSource", eventPrefix: "eventPrefix", lookAt: "lookAt", performance: "performance" }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { properties: { "class.ngt-canvas": "this.hostClass", "style.pointerEvents": "this.pointerEvents" } }, providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false })], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, static: true }, { propertyName: "glAnchor", first: true, predicate: ["glCanvas"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <div (ngxResize)="onResize($event)" style="height: 100%; width: 100%;">
             <canvas #glCanvas style="display: block;"></canvas>
         </div>
     `, isInline: true, styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgxResize, selector: "[ngxResize]", inputs: ["ngxResizeOptions"], outputs: ["ngxResize"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtCanvas, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtCanvas, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-canvas', standalone: true, template: `
         <div (ngxResize)="onResize($event)" style="height: 100%; width: 100%;">
@@ -2702,19 +2698,6 @@ function injectBeforeRender(cb, priority = 0) {
     }
 }
 
-function safeDetectChanges(cdr) {
-    if (!cdr)
-        return;
-    try {
-        if (cdr['context']) {
-            cdr.detectChanges();
-        }
-    }
-    catch (e) {
-        cdr.markForCheck();
-    }
-}
-
 function injectNgtRef(initialValue = null) {
     const ref = is.ref(initialValue) ? initialValue : new ElementRef(initialValue);
     let lastValue = ref.nativeElement;
@@ -2731,6 +2714,7 @@ function injectNgtRef(initialValue = null) {
             lastValue = current;
         });
     };
+    const useCDR = (cdr) => void cdRefs.push(cdr);
     const $ = obs$.pipe(filter((value, index) => index > 0 || value != null), takeUntil(destroy$));
     const children$ = (type = 'objects') => $.pipe(switchMap((instance) => {
         const localState = getLocalState(instance);
@@ -2749,6 +2733,7 @@ function injectNgtRef(initialValue = null) {
         }
         return of([]);
     }), filter((children, index) => index > 0 || children.length > 0), takeUntil(destroy$));
+    // here, we override nativeElement to  add more functionalities to nativeElement
     Object.defineProperty(ref, 'nativeElement', {
         set: (newVal) => {
             if (ref.nativeElement !== newVal) {
@@ -2773,9 +2758,14 @@ function injectNgtRef(initialValue = null) {
         },
         get: () => ref$.value,
     });
-    return Object.assign(ref, { subscribe, $, children$, useCDR: (cdr) => void cdRefs.push(cdr) });
+    return Object.assign(ref, { subscribe, $, children$, useCDR });
 }
 
+/**
+ * Please use this sparringly and know what you're doing.
+ *
+ * Create a runInContext function that has access to the NodeInjector as well
+ */
 function createRunInContext() {
     const nodeInjector = inject(Injector);
     const envInjector = inject(EnvironmentInjector);
@@ -2815,9 +2805,9 @@ class NgtRepeat extends NgForOf {
         this.ngForOf = Number.isInteger(count) ? Array.from({ length: count }, (_, i) => i) : [];
     }
 }
-NgtRepeat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRepeat, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-NgtRepeat.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: NgtRepeat, isStandalone: true, selector: "[ngFor][ngForRepeat]", inputs: { ngForRepeat: "ngForRepeat" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRepeat, decorators: [{
+NgtRepeat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtRepeat, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+NgtRepeat.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: NgtRepeat, isStandalone: true, selector: "[ngFor][ngForRepeat]", inputs: { ngForRepeat: "ngForRepeat" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtRepeat, decorators: [{
             type: Directive,
             args: [{ selector: '[ngFor][ngForRepeat]', standalone: true }]
         }], propDecorators: { ngForRepeat: [{
@@ -2832,50 +2822,43 @@ class NgtPush {
     constructor() {
         this.cdr = inject(ChangeDetectorRef);
         this.parentCdr = inject(ChangeDetectorRef, { skipSelf: true, optional: true });
+        this.envCdr = inject(EnvironmentInjector).get(ChangeDetectorRef, null);
     }
     transform(value, defaultValue = null) {
-        if (this.obj === value) {
+        if (this.obj === value)
             return this.latestValue;
-        }
         this.obj = value;
         this.latestValue = defaultValue;
-        if (this.sub) {
+        if (this.sub)
             this.sub.unsubscribe();
-        }
-        if (isObservable(this.obj)) {
+        if (isObservable(this.obj))
             this.sub = this.obj.subscribe(this.updateValue.bind(this));
-        }
-        else if (isPromise(this.obj)) {
+        else if (isPromise(this.obj))
             this.obj.then(this.updateValue.bind(this));
-        }
-        else {
+        else
             throw new Error(`[NGT] Invalid value passed to ngtPush pipe`);
-        }
         return this.latestValue;
     }
     updateValue(val) {
         this.latestValue = val;
-        this.cdr.detectChanges();
-        if (this.parentCdr) {
-            this.parentCdr.detectChanges();
-        }
+        safeDetectChanges(this.cdr);
+        safeDetectChanges(this.parentCdr);
+        safeDetectChanges(this.envCdr);
     }
     ngOnDestroy() {
-        if (this.sub) {
+        if (this.sub)
             this.sub.unsubscribe();
-        }
         this.latestValue = undefined;
         this.obj = undefined;
     }
 }
-NgtPush.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtPush, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-NgtPush.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.0", ngImport: i0, type: NgtPush, isStandalone: true, name: "ngtPush", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtPush, decorators: [{
+NgtPush.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtPush, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+NgtPush.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: NgtPush, isStandalone: true, name: "ngtPush", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtPush, decorators: [{
             type: Pipe,
             args: [{ name: 'ngtPush', pure: false, standalone: true }]
         }] });
 
-var _NgtPortal_instances, _NgtPortal_inject;
 const privateKeys = [
     'get',
     'set',
@@ -2920,9 +2903,9 @@ class NgtPortalBeforeRender {
         this.subscription?.();
     }
 }
-NgtPortalBeforeRender.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-NgtPortalBeforeRender.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: NgtPortalBeforeRender, isStandalone: true, selector: "ngt-portal-before-render", inputs: { renderPriority: "renderPriority", parentScene: "parentScene", parentCamera: "parentCamera" }, outputs: { beforeRender: "beforeRender" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
+NgtPortalBeforeRender.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+NgtPortalBeforeRender.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: NgtPortalBeforeRender, isStandalone: true, selector: "ngt-portal-before-render", inputs: { renderPriority: "renderPriority", parentScene: "parentScene", parentCamera: "parentCamera" }, outputs: { beforeRender: "beforeRender" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ngt-portal-before-render',
@@ -2946,9 +2929,9 @@ class NgtPortalContent {
         }
     }
 }
-NgtPortalContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtPortalContent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ViewContainerRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
-NgtPortalContent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtPortalContent, decorators: [{
+NgtPortalContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtPortalContent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ViewContainerRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+NgtPortalContent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtPortalContent, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[ngtPortalContent]', standalone: true }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ViewContainerRef, decorators: [{
@@ -2957,7 +2940,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
 class NgtPortal extends NgtRxStore {
     constructor() {
         super(...arguments);
-        _NgtPortal_instances.add(this);
         this.autoRender = true;
         this.autoRenderPriority = 1;
         this.beforeRender = new EventEmitter();
@@ -3006,9 +2988,9 @@ class NgtPortal extends NgtRxStore {
             select: this.portalStore.select.bind(this.portalStore),
             setEvents: (events) => this.portalStore.set((state) => ({ ...state, events: { ...state.events, ...events } })),
         });
-        this.hold(this.parentStore.select(), (previous) => this.portalStore.set((state) => __classPrivateFieldGet(this, _NgtPortal_instances, "m", _NgtPortal_inject).call(this, previous, state)));
+        this.hold(this.parentStore.select(), (previous) => this.portalStore.set((state) => this.inject(previous, state)));
         requestAnimationFrame(() => {
-            this.portalStore.set((injectState) => __classPrivateFieldGet(this, _NgtPortal_instances, "m", _NgtPortal_inject).call(this, this.parentStore.get(), injectState));
+            this.portalStore.set((injectState) => this.inject(this.parentStore.get(), injectState));
         });
         this.portalContentView = this.portalContentAnchor.createEmbeddedView(this.portalContentTemplate);
         this.portalContentView.detectChanges();
@@ -3026,38 +3008,38 @@ class NgtPortal extends NgtRxStore {
         }
         super.ngOnDestroy();
     }
-}
-_NgtPortal_instances = new WeakSet(), _NgtPortal_inject = function _NgtPortal_inject(rootState, injectState) {
-    const intersect = { ...rootState };
-    Object.keys(intersect).forEach((key) => {
-        if (privateKeys.includes(key) ||
-            rootState[key] !== injectState[key]) {
-            delete intersect[key];
+    inject(rootState, injectState) {
+        const intersect = { ...rootState };
+        Object.keys(intersect).forEach((key) => {
+            if (privateKeys.includes(key) ||
+                rootState[key] !== injectState[key]) {
+                delete intersect[key];
+            }
+        });
+        const inputs = this.get();
+        const { size, events, ...restInputsState } = inputs.state || {};
+        let viewport = undefined;
+        if (injectState && size) {
+            const camera = injectState.camera;
+            viewport = rootState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size);
+            if (camera !== rootState.camera)
+                updateCamera(camera, size);
         }
-    });
-    const inputs = this.get();
-    const { size, events, ...restInputsState } = inputs.state || {};
-    let viewport = undefined;
-    if (injectState && size) {
-        const camera = injectState.camera;
-        viewport = rootState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size);
-        if (camera !== rootState.camera)
-            updateCamera(camera, size);
+        return {
+            ...intersect,
+            scene: is.ref(inputs.container) ? inputs.container.nativeElement : inputs.container,
+            raycaster: this.raycaster,
+            pointer: this.pointer,
+            previousStore: this.parentStore,
+            events: { ...rootState.events, ...(injectState?.events || {}), ...events },
+            size: { ...rootState.size, ...size },
+            viewport: { ...rootState.viewport, ...(viewport || {}) },
+            ...restInputsState,
+        };
     }
-    return {
-        ...intersect,
-        scene: is.ref(inputs.container) ? inputs.container.nativeElement : inputs.container,
-        raycaster: this.raycaster,
-        pointer: this.pointer,
-        previousStore: this.parentStore,
-        events: { ...rootState.events, ...(injectState?.events || {}), ...events },
-        size: { ...rootState.size, ...size },
-        viewport: { ...rootState.viewport, ...(viewport || {}) },
-        ...restInputsState,
-    };
-};
-NgtPortal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtPortal, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtPortal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { container: "container", state: "state", autoRender: "autoRender", autoRenderPriority: "autoRenderPriority" }, outputs: { beforeRender: "beforeRender" }, providers: [NgtStore], queries: [{ propertyName: "portalContentTemplate", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "portalContentAnchor", first: true, predicate: ["portalContentAnchor"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+}
+NgtPortal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtPortal, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtPortal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { container: "container", state: "state", autoRender: "autoRender", autoRenderPriority: "autoRenderPriority" }, outputs: { beforeRender: "beforeRender" }, providers: [NgtStore], queries: [{ propertyName: "portalContentTemplate", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "portalContentAnchor", first: true, predicate: ["portalContentAnchor"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
         <ng-container #portalContentAnchor>
             <ngt-portal-before-render
                 *ngIf="autoRender && portalContentRendered"
@@ -3068,7 +3050,7 @@ NgtPortal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15
             />
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgtPortalBeforeRender, selector: "ngt-portal-before-render", inputs: ["renderPriority", "parentScene", "parentCamera"], outputs: ["beforeRender"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtPortal, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-portal',
@@ -3110,13 +3092,13 @@ class NgtRoutedScene {
         const { destroy$, cdr } = injectNgtDestroy();
         router.events
             .pipe(filter((event) => event instanceof ActivationEnd), takeUntil(destroy$))
-            .subscribe(cdr.detectChanges.bind(cdr));
+            .subscribe(() => safeDetectChanges(cdr));
     }
 }
 NgtRoutedScene.isRoutedScene = true;
-NgtRoutedScene.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRoutedScene, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-NgtRoutedScene.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: NgtRoutedScene, isStandalone: true, selector: "ngt-routed-scene", ngImport: i0, template: `<router-outlet />`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRoutedScene, decorators: [{
+NgtRoutedScene.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtRoutedScene, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+NgtRoutedScene.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: NgtRoutedScene, isStandalone: true, selector: "ngt-routed-scene", ngImport: i0, template: `<router-outlet />`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NgtRoutedScene, decorators: [{
             type: Component,
             args: [{
                     standalone: true,