angular-three 1.9.10 → 1.9.12

package/fesm2015/angular-three.mjs

@@ -1,11 +1,11 @@
 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 { __rest, __classPrivateFieldGet } from 'tslib';
+import { __rest } from 'tslib';
 import { DOCUMENT, NgForOf, NgIf } from '@angular/common';
-import { RxState, selectSlice } from '@rx-angular/state';
+import { RxState } from '@rx-angular/state';
 import * as i1 from '@angular/router';
 import { ActivationEnd, RouterOutlet } from '@angular/router';
 
@@ -52,10 +52,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();
@@ -77,7 +91,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;
@@ -89,7 +107,7 @@ function injectLoader(loaderConstructorFactory, input, extensions, onProgress) {
                 return result;
             }, {});
         }), tap(() => {
-            requestAnimationFrame(() => cdr.detectChanges());
+            requestAnimationFrame(() => void safeDetectChanges(cdr));
         }));
     }));
 }
@@ -97,7 +115,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;
 
@@ -341,6 +359,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);
                 }
@@ -461,7 +481,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(
@@ -491,17 +510,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),
@@ -511,7 +527,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
@@ -559,25 +574,13 @@ class NgtRxStore extends RxState {
             $ = combineLatest(keys.map((key) => { var _a; return this.select(key).pipe(startWith((_a = this.get(key)) !== null && _a !== void 0 ? _a : undefined)); }));
         }
         this.hold($, () => {
-            requestAnimationFrame(() => void cdr.detectChanges());
+            requestAnimationFrame(() => void safeDetectChanges(cdr));
         });
     }
-    key$(...keys) {
-        var _a;
-        const key = keys.join('.');
-        if (!this.cache[key]) {
-            this.cache[key] = this.select(...keys).pipe(startWith((_a = this.get(...keys)) !== null && _a !== void 0 ? _a : undefined), distinctUntilChanged());
-        }
-        return this.cache[key];
-    }
-    ngOnDestroy() {
-        this.cache = {};
-        super.ngOnDestroy();
-    }
 }
-NgtRxStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: NgtRxStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NgtRxStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: NgtRxStore });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", 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 []; } });
 
@@ -620,7 +623,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: Object.assign(Object.assign({}, state.performance), { current }) }));
@@ -639,7 +641,7 @@ class NgtStore extends NgtRxStore {
                 flat: false,
                 controls: null,
                 clock: new THREE.Clock(),
-                pointer,
+                pointer: new THREE.Vector2(),
                 frameloop: 'always',
                 performance: {
                     current: 1,
@@ -749,6 +751,7 @@ class NgtStore extends NgtRxStore {
         }
     }
     configure(inputs, canvasElement) {
+        var _a;
         const { gl: glOptions, size: sizeOptions, camera: cameraOptions, raycaster: raycasterOptions, events, orthographic, lookAt, shadows, linear, legacy, flat, dpr, frameloop, performance, } = inputs;
         const state = this.get();
         const stateToUpdate = {};
@@ -763,7 +766,7 @@ class NgtStore extends NgtRxStore {
             stateToUpdate.raycaster = raycaster = new THREE.Raycaster();
         }
         // set raycaster options
-        const _a = raycasterOptions || {}, { params } = _a, options = __rest(_a, ["params"]);
+        const _b = raycasterOptions || {}, { params } = _b, options = __rest(_b, ["params"]);
         if (!is.equ(options, raycaster, shallowLoose))
             applyProps(raycaster, Object.assign({}, options));
         if (!is.equ(params, raycaster.params, shallowLoose)) {
@@ -844,8 +847,13 @@ class NgtStore extends NgtRxStore {
         }
         // Safely set color management if available.
         // Avoid accessing THREE.ColorManagement to play nice with older versions
-        if (THREE.ColorManagement)
-            THREE.ColorManagement.legacyMode = legacy !== null && legacy !== void 0 ? legacy : true;
+        if (THREE.ColorManagement) {
+            const ColorManagement = THREE.ColorManagement;
+            if ('enabled' in ColorManagement)
+                ColorManagement['enabled'] = (_a = !legacy) !== null && _a !== void 0 ? _a : false;
+            else if ('legacyMode' in ColorManagement)
+                ColorManagement['legacyMode'] = legacy !== null && legacy !== void 0 ? legacy : true;
+        }
         const outputEncoding = linear ? THREE.LinearEncoding : THREE.sRGBEncoding;
         const toneMapping = flat ? THREE.NoToneMapping : THREE.ACESFilmicToneMapping;
         if (gl.outputEncoding !== outputEncoding)
@@ -917,8 +925,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;
@@ -932,7 +939,9 @@ class NgtStore extends NgtRxStore {
             if (camera !== oldCamera) {
                 updateCamera(camera, size);
                 oldCamera = camera;
-                set((state) => ({ viewport: Object.assign(Object.assign({}, state.viewport), state.viewport.getCurrentViewport(camera)) }));
+                this.set((state) => ({
+                    viewport: Object.assign(Object.assign({}, state.viewport), state.viewport.getCurrentViewport(camera)),
+                }));
             }
         });
     }
@@ -940,9 +949,9 @@ class NgtStore extends NgtRxStore {
         this.hold(this.select(), () => invalidate(this));
     }
 }
-NgtStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: NgtStore, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-NgtStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: NgtStore });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", 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) {
@@ -950,8 +959,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 };
 }
@@ -992,13 +1000,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.1.5", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-NgtCommonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.5", type: NgtCommonDirective, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", 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 []; } });
 
@@ -1027,9 +1035,9 @@ class NgtArgs extends NgtCommonDirective {
         return !this.injected && !!this.injectedArgs.length;
     }
 }
-NgtArgs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-NgtArgs.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.5", type: NgtArgs, isStandalone: true, selector: "[args]", inputs: { args: "args" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", 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: [{
@@ -1059,9 +1067,9 @@ class NgtParent extends NgtCommonDirective {
         return !this.injected && !!this.injectedParent;
     }
 }
-NgtParent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-NgtParent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.5", type: NgtParent, isStandalone: true, selector: "[parent]", inputs: { parent: "parent" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", 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: [{
@@ -1592,9 +1600,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) {
@@ -2014,9 +2021,9 @@ class NgtRendererFactory {
         return renderer;
     }
 }
-NgtRendererFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NgtRendererFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: NgtRendererFactory });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", 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
         }] });
 /**
@@ -2286,9 +2293,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)) {
@@ -2496,7 +2502,7 @@ class NgtCanvas extends NgtRxStore {
             this.store.set({
                 onPointerMissed: (event) => {
                     this.pointerMissed.emit(event);
-                    this.cdr.detectChanges();
+                    safeDetectChanges(this.cdr);
                 },
             });
         }
@@ -2537,20 +2543,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
@@ -2572,24 +2574,23 @@ class NgtCanvas extends NgtRxStore {
         this.cdr.detectChanges = () => {
             var _a;
             originalDetectChanges();
-            (_a = this.glRef) === null || _a === void 0 ? void 0 : _a.changeDetectorRef.detectChanges();
+            safeDetectChanges((_a = this.glRef) === null || _a === void 0 ? void 0 : _a.changeDetectorRef);
         };
     }
     setSceneGraphInputs() {
-        var _a;
         for (const key of Object.keys(this.sceneGraphInputs)) {
-            (_a = this.glRef) === null || _a === void 0 ? void 0 : _a.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.1.5", ngImport: i0, type: NgtCanvas, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtCanvas.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", 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.1.5", 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%;">
@@ -2681,19 +2682,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;
@@ -2710,6 +2698,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);
@@ -2728,6 +2717,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) {
@@ -2752,9 +2742,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);
@@ -2794,9 +2789,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.1.5", ngImport: i0, type: NgtRepeat, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-NgtRepeat.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.5", type: NgtRepeat, isStandalone: true, selector: "[ngFor][ngForRepeat]", inputs: { ngForRepeat: "ngForRepeat" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", 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: [{
@@ -2811,50 +2806,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.1.5", ngImport: i0, type: NgtPush, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-NgtPush.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: NgtPush, isStandalone: true, name: "ngtPush", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", 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',
@@ -2900,9 +2888,9 @@ class NgtPortalBeforeRender {
         (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.call(this);
     }
 }
-NgtPortalBeforeRender.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-NgtPortalBeforeRender.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.5", 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.1.5", 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',
@@ -2926,9 +2914,9 @@ class NgtPortalContent {
         }
     }
 }
-NgtPortalContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", 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.1.5", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", 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 () {
@@ -2939,7 +2927,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
 class NgtPortal extends NgtRxStore {
     constructor() {
         super(...arguments);
-        _NgtPortal_instances.add(this);
         this.autoRender = true;
         this.autoRenderPriority = 1;
         this.beforeRender = new EventEmitter();
@@ -2975,9 +2962,9 @@ class NgtPortal extends NgtRxStore {
             localState.store = this.portalStore;
         }
         this.portalStore.set(Object.assign(Object.assign(Object.assign(Object.assign({}, previousState), { scene: container, raycaster: this.raycaster, pointer: this.pointer, previousStore: this.parentStore, events: Object.assign(Object.assign({}, previousState.events), (events || {})), size: Object.assign(Object.assign({}, previousState.size), (size || {})) }), restInputsState), { get: this.portalStore.get.bind(this.portalStore), set: this.portalStore.set.bind(this.portalStore), select: this.portalStore.select.bind(this.portalStore), setEvents: (events) => this.portalStore.set((state) => (Object.assign(Object.assign({}, state), { events: Object.assign(Object.assign({}, 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();
@@ -2995,28 +2982,28 @@ class NgtPortal extends NgtRxStore {
         }
         super.ngOnDestroy();
     }
-}
-_NgtPortal_instances = new WeakSet(), _NgtPortal_inject = function _NgtPortal_inject(rootState, injectState) {
-    const intersect = Object.assign({}, rootState);
-    Object.keys(intersect).forEach((key) => {
-        if (privateKeys.includes(key) ||
-            rootState[key] !== injectState[key]) {
-            delete intersect[key];
+    inject(rootState, injectState) {
+        const intersect = Object.assign({}, rootState);
+        Object.keys(intersect).forEach((key) => {
+            if (privateKeys.includes(key) ||
+                rootState[key] !== injectState[key]) {
+                delete intersect[key];
+            }
+        });
+        const inputs = this.get();
+        const _a = inputs.state || {}, { size, events } = _a, restInputsState = __rest(_a, ["size", "events"]);
+        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 _a = inputs.state || {}, { size, events } = _a, restInputsState = __rest(_a, ["size", "events"]);
-    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 Object.assign(Object.assign(Object.assign({}, intersect), { scene: is.ref(inputs.container) ? inputs.container.nativeElement : inputs.container, raycaster: this.raycaster, pointer: this.pointer, previousStore: this.parentStore, events: Object.assign(Object.assign(Object.assign({}, rootState.events), ((injectState === null || injectState === void 0 ? void 0 : injectState.events) || {})), events), size: Object.assign(Object.assign({}, rootState.size), size), viewport: Object.assign(Object.assign({}, rootState.viewport), (viewport || {})) }), restInputsState);
-};
-NgtPortal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: NgtPortal, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtPortal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", 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: `
+        return Object.assign(Object.assign(Object.assign({}, intersect), { scene: is.ref(inputs.container) ? inputs.container.nativeElement : inputs.container, raycaster: this.raycaster, pointer: this.pointer, previousStore: this.parentStore, events: Object.assign(Object.assign(Object.assign({}, rootState.events), ((injectState === null || injectState === void 0 ? void 0 : injectState.events) || {})), events), size: Object.assign(Object.assign({}, rootState.size), size), viewport: Object.assign(Object.assign({}, rootState.viewport), (viewport || {})) }), restInputsState);
+    }
+}
+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"
@@ -3027,7 +3014,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.1.5", 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',
@@ -3069,15 +3056,13 @@ class NgtRoutedScene {
         const { destroy$, cdr } = injectNgtDestroy();
         router.events
             .pipe(filter((event) => event instanceof ActivationEnd), takeUntil(destroy$))
-            .subscribe(() => {
-            cdr.detectChanges();
-        });
+            .subscribe(() => safeDetectChanges(cdr));
     }
 }
 NgtRoutedScene.isRoutedScene = true;
-NgtRoutedScene.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: NgtRoutedScene, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-NgtRoutedScene.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", 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.1.5", 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,