angular-three 2.0.0-beta.3 → 2.0.0-beta.5

package/fesm2022/angular-three.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, untracked, Injectable, Optional, Inject, ElementRef, inject, Injector, assertInInjectionContext, runInInjectionContext, ChangeDetectorRef, effect, InjectionToken, EventEmitter, ViewContainerRef, NgZone, TemplateRef, Directive, Input, getDebugNode, RendererFactory2, makeEnvironmentProviders, provideZoneChangeDetection, EnvironmentInjector, DestroyRef, createEnvironmentInjector, Component, ChangeDetectionStrategy, Output, ViewChild, SkipSelf, ContentChild } from '@angular/core';
+import { signal, computed, untracked, Injectable, Optional, Inject, ElementRef, inject, Injector, assertInInjectionContext, runInInjectionContext, ChangeDetectorRef, effect, InjectionToken, EventEmitter, ViewContainerRef, NgZone, TemplateRef, Directive, Input, getDebugNode, RendererFactory2, makeEnvironmentProviders, provideZoneChangeDetection, EnvironmentInjector, DestroyRef, createEnvironmentInjector, Component, ChangeDetectionStrategy, Output, ViewChild, ApplicationRef, SkipSelf, ContentChild } from '@angular/core';
 import { provideNgxResizeOptions, NgxResize } from 'ngx-resize';
 import * as THREE from 'three';
 import { DOCUMENT, NgForOf, NgIf } from '@angular/common';
@@ -38,28 +38,26 @@ class NgtSignalStore {
     constructor(initialState = {}) {
         initialState ??= {};
         this.#state = createSignal(Object.assign(initialState, { __ngt_dummy_state__: Date.now() }));
+        this.state = this.#state.asReadonly();
     }
     select(...keysAndOptions) {
         if (keysAndOptions.length === 0)
-            return this.#state.asReadonly();
+            return this.state;
         if (keysAndOptions.length === 1 && typeof keysAndOptions[0] === 'object') {
             if (!this.#computedCache.has(STORE_COMPUTED_KEY)) {
-                this.#computedCache.set(STORE_COMPUTED_KEY, computed(() => this.#state(), keysAndOptions));
+                this.#computedCache.set(STORE_COMPUTED_KEY, computed(this.state, keysAndOptions));
                 return this.#computedCache.get(STORE_COMPUTED_KEY);
             }
         }
         const [keys, options] = parseOptions(keysAndOptions);
         const joinedKeys = keys.join('-');
         if (!this.#computedCache.has(joinedKeys)) {
-            this.#computedCache.set(joinedKeys, computed(() => {
-                const state = this.#state();
-                return keys.reduce((value, key) => value[key], state);
-            }, options));
+            this.#computedCache.set(joinedKeys, computed(() => keys.reduce((value, key) => value[key], this.state()), options));
         }
         return this.#computedCache.get(joinedKeys);
     }
     get(...keys) {
-        const state = untracked(this.#state);
+        const state = untracked(this.state);
         if (keys.length === 0)
             return state;
         return keys.reduce((value, key) => value[key], state);
@@ -90,10 +88,10 @@ class NgtSignalStore {
         };
         this.#state.update((previous) => ({ ...updater(previous), ...previous }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtSignalStore, deps: [{ token: 'INITIAL_STATE', optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtSignalStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtSignalStore, deps: [{ token: 'INITIAL_STATE', optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtSignalStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtSignalStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtSignalStore, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
@@ -751,62 +749,58 @@ function queueMacrotaskInInjectionContext(cb, injector) {
 }
 
 const cached = new Map();
+function normalizeInputs(input) {
+    if (Array.isArray(input))
+        return input;
+    if (typeof input === 'string')
+        return [input];
+    return Object.values(input);
+}
 function load(loaderConstructorFactory, inputs, { extensions, onProgress, } = {}) {
-    const computedUrls = computed(() => {
-        const input = inputs();
-        if (Array.isArray(input))
-            return input;
-        if (typeof input === 'string')
-            return [input];
-        return Object.values(input);
-    });
     return () => {
-        const urls = computedUrls();
-        const loaderConstructor = loaderConstructorFactory(urls);
-        const loader = new loaderConstructor();
+        const urls = normalizeInputs(inputs());
+        const loader = new (loaderConstructorFactory(urls))();
         if (extensions)
             extensions(loader);
-        return urls.map((url) => new Promise((resolve, reject) => {
-            if (cached.has(url)) {
-                resolve(cached.get(url));
-            }
-            else {
-                loader.load(url, (data) => {
-                    if ('scene' in data)
-                        Object.assign(data, makeObjectGraph(data['scene']));
-                    cached.set(url, data);
-                    resolve(data);
-                }, onProgress, (error) => reject(new Error(`[NGT] Could not load ${url}: ${error}`)));
+        // TODO: reevaluate this
+        return urls.map((url) => {
+            if (!cached.has(url)) {
+                cached.set(url, new Promise((resolve, reject) => {
+                    loader.load(url, (data) => {
+                        if ('scene' in data)
+                            Object.assign(data, makeObjectGraph(data['scene']));
+                        resolve(data);
+                    }, onProgress, (error) => reject(new Error(`[NGT] Could not load ${url}: ${error}`)));
+                }));
             }
-        }));
+            return cached.get(url);
+        });
     };
 }
 function injectNgtLoader(loaderConstructorFactory, inputs, { extensions, onProgress, injector, } = {}) {
     injector = assertInjectionContext(injectNgtLoader, injector);
+    const response = signal(null);
     return runInInjectionContext(injector, () => {
         const cdr = inject(ChangeDetectorRef);
-        const response = signal(null);
         const effector = load(loaderConstructorFactory, inputs, { extensions, onProgress });
         requestAnimationInInjectionContext(() => {
             effect(() => {
-                const originalUrls = untracked(inputs);
-                Promise.all(effector())
-                    .then((results) => {
-                    if (Array.isArray(originalUrls))
-                        return results;
-                    if (typeof originalUrls === 'string')
-                        return results[0];
-                    const keys = Object.keys(originalUrls);
-                    return keys.reduce((result, key) => {
-                        result[key] = results[keys.indexOf(key)];
-                        return result;
-                    }, {});
-                })
-                    .then((value) => {
-                    response.set(value);
+                const originalUrls = inputs();
+                Promise.all(effector()).then((results) => {
+                    response.update(() => {
+                        if (Array.isArray(originalUrls))
+                            return results;
+                        if (typeof originalUrls === 'string')
+                            return results[0];
+                        const keys = Object.keys(originalUrls);
+                        return keys.reduce((result, key) => {
+                            result[key] = results[keys.indexOf(key)];
+                            return result;
+                        }, {});
+                    });
                     safeDetectChanges(cdr);
                 });
-            });
+            }, { allowSignalWrites: true });
         });
         return response.asReadonly();
     });
@@ -957,7 +951,16 @@ function diffProps(instance, props) {
     const propsEntries = Object.entries(props);
     const changes = [];
     for (const [propKey, propValue] of propsEntries) {
-        if (is.equ(propValue, instance[propKey]))
+        let key = propKey;
+        if (is.colorSpaceExist(instance)) {
+            if (propKey === 'encoding') {
+                key = 'colorSpace';
+            }
+            else if (propKey === 'outputEncoding') {
+                key = 'outputColorSpace';
+            }
+        }
+        if (is.equ(propValue, instance[key]))
             continue;
         changes.push([propKey, propValue]);
     }
@@ -972,9 +975,8 @@ function applyProps(instance, props) {
     const rootState = localState.store?.get();
     const changes = diffProps(instance, props);
     for (let i = 0; i < changes.length; i++) {
-        let key = changes[i][0];
         const currentInstance = instance;
-        const targetProp = currentInstance[key];
+        let key = changes[i][0];
         let value = changes[i][1];
         if (is.colorSpaceExist(currentInstance)) {
             const sRGBEncoding = 3001;
@@ -989,6 +991,7 @@ function applyProps(instance, props) {
                 value = value === sRGBEncoding ? SRGBColorSpace : LinearSRGBColorSpace;
             }
         }
+        const targetProp = currentInstance[key];
         // special treatmen for objects with support for set/copy, and layers
         if (targetProp && targetProp['set'] && (targetProp['copy'] || targetProp instanceof THREE.Layers)) {
             const isColor = targetProp instanceof THREE.Color;
@@ -1445,15 +1448,12 @@ class NgtStore extends NgtSignalStore {
         }, { injector: this.#injector, allowSignalWrites: true });
     }
     #invalidate() {
-        const state = this.select();
-        effect(() => {
-            state().invalidate();
-        }, { injector: this.#injector });
+        effect(() => void this.state().invalidate(), { injector: this.#injector });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtStore, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtStore, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtStore, decorators: [{
             type: Injectable
         }] });
 function computeInitialSize(canvas, defaultSize) {
@@ -1712,14 +1712,14 @@ class NgtCommonDirective {
             }
             this.#zone.runOutsideAngular(() => {
                 this.#view = this.#vcr.createEmbeddedView(this.#template);
-                this.#view.detectChanges();
+                safeDetectChanges(this.#view);
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtCommonDirective, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgtCommonDirective, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtCommonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtCommonDirective, decorators: [{
             type: Directive
         }], ctorParameters: function () { return []; } });
 
@@ -1742,10 +1742,10 @@ class NgtArgs extends NgtCommonDirective {
     validate() {
         return !this.injected && !!this.#injectedArgs.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtArgs, isStandalone: true, selector: "[args]", inputs: { args: "args" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgtArgs, isStandalone: true, selector: "[args]", inputs: { args: "args" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtArgs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtArgs, decorators: [{
             type: Directive,
             args: [{ selector: '[args]', standalone: true }]
         }], propDecorators: { args: [{
@@ -1771,10 +1771,10 @@ class NgtParent extends NgtCommonDirective {
     validate() {
         return !this.injected && !!this.#injectedParent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtParent, isStandalone: true, selector: "[parent]", inputs: { parent: "parent" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgtParent, isStandalone: true, selector: "[parent]", inputs: { parent: "parent" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtParent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtParent, decorators: [{
             type: Directive,
             args: [{ selector: '[parent]', standalone: true }]
         }], propDecorators: { parent: [{
@@ -1814,7 +1814,7 @@ class NgtRendererStore {
             state[14 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(rendererNode).injector;
         }
         if (state[0 /* NgtRendererClassId.type */] === 'comment') {
-            // we attach an arrow function to the Comment node
+            // NOTE: we attach an arrow function to the Comment node
             // In our directives, we can call this function to then start tracking the RendererNode
             // this is done to limit the amount of Nodes we need to process for getCreationState
             rendererNode[SPECIAL_INTERNAL_ADD_COMMENT] = (node) => {
@@ -2016,9 +2016,9 @@ class NgtRendererStore {
         return null;
     }
     getCreationState() {
-        const injectedArgs = this.firstNonInjectedDirective(NgtArgs)?.args || [];
-        const injectedParent = this.firstNonInjectedDirective(NgtParent)?.parent || null;
-        const store = this.tryGetPortalStore();
+        const injectedArgs = this.#firstNonInjectedDirective(NgtArgs)?.args || [];
+        const injectedParent = this.#firstNonInjectedDirective(NgtParent)?.parent || null;
+        const store = this.#tryGetPortalStore();
         return { injectedArgs, injectedParent, store };
     }
     destroy(node, parent) {
@@ -2094,7 +2094,7 @@ class NgtRendererStore {
             this.removeChild(parent, node);
         }
     }
-    firstNonInjectedDirective(dir) {
+    #firstNonInjectedDirective(dir) {
         let directive;
         let i = this.#comments.length - 1;
         while (i >= 0) {
@@ -2117,7 +2117,7 @@ class NgtRendererStore {
         }
         return directive;
     }
-    tryGetPortalStore() {
+    #tryGetPortalStore() {
         let store;
         // we only care about the portal states because NgtStore only differs per Portal
         let i = this.portals.length - 1;
@@ -2178,10 +2178,10 @@ class NgtRendererFactory {
         }
         return renderer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtRendererFactory }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtRendererFactory }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtRendererFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtRendererFactory, decorators: [{
             type: Injectable
         }] });
 /**
@@ -2226,7 +2226,10 @@ class NgtRenderer {
         }
         // handle raw value
         if (name === SPECIAL_DOM_TAG.NGT_VALUE) {
-            return this.store.createNode('three', Object.assign({ __ngt_renderer__: { rawValue: undefined } }, { __ngt__: { isRaw: true, parent: createSignal(null) } }));
+            return this.store.createNode('three', Object.assign({ __ngt_renderer__: { rawValue: undefined } }, 
+            // NOTE: we assign this manually to a raw value node
+            // because we say it is a 'three' node but we're not using prepare()
+            { __ngt__: { isRaw: true, parent: createSignal(null) } }));
         }
         const { injectedArgs, injectedParent, store } = this.store.getCreationState();
         let parent = injectedParent;
@@ -2242,8 +2245,8 @@ class NgtRenderer {
             const object = injectedArgs[0];
             let localState = getLocalState(object);
             if (!Object.keys(localState).length) {
-                prepare(object, { store, args: injectedArgs, primitive: true });
-                localState = getLocalState(object);
+                // NOTE: if an object isn't already "prepared", we prepare it
+                localState = getLocalState(prepare(object, { store, args: injectedArgs, primitive: true }));
             }
             if (!localState.store)
                 localState.store = store;
@@ -2615,6 +2618,7 @@ class NgtCanvas extends NgtSignalStore {
             this.#store.set({
                 onPointerMissed: (event) => {
                     this.pointerMissed.emit(event);
+                    safeDetectChanges(this.#cdr);
                 },
             });
         }
@@ -2640,9 +2644,8 @@ class NgtCanvas extends NgtSignalStore {
         if (width > 0 && height > 0) {
             if (!this.#store.isInit)
                 this.#store.init();
-            const inputs = this.select();
             this.#resizeRef = this.#zone.run(() => effect(() => {
-                const canvasInputs = inputs();
+                const canvasInputs = this.state();
                 this.#zone.runOutsideAngular(() => {
                     this.#store.configure({ ...canvasInputs, size: { width, height, top, left } }, this.glCanvas.nativeElement);
                 });
@@ -2712,14 +2715,14 @@ class NgtCanvas extends NgtSignalStore {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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", scene: "scene", gl: "gl", eventSource: "eventSource", eventPrefix: "eventPrefix", lookAt: "lookAt", performance: "performance" }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { styleAttribute: "display: block;position: relative;width: 100%;height: 100%;overflow: hidden;" }, providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false, emitInitialResult: true })], 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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", scene: "scene", gl: "gl", eventSource: "eventSource", eventPrefix: "eventPrefix", lookAt: "lookAt", performance: "performance" }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { styleAttribute: "display: block;position: relative;width: 100%;height: 100%;overflow: hidden;" }, providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false, emitInitialResult: true })], 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, dependencies: [{ kind: "directive", type: NgxResize, selector: "[ngxResize]", inputs: ["ngxResizeOptions"], outputs: ["ngxResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtCanvas, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtCanvas, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-canvas',
@@ -2797,6 +2800,7 @@ function injectNgtRef(initial = null, injector) {
     injector = assertInjectionContext(injectNgtRef, injector);
     return runInInjectionContext(injector, () => {
         const cdr = inject(ChangeDetectorRef);
+        const appRef = inject(ApplicationRef);
         const ref = is.ref(initial) ? initial : new ElementRef(initial);
         const signalRef = createSignal(ref.nativeElement);
         const readonlySignal = signalRef.asReadonly();
@@ -2824,14 +2828,13 @@ function injectNgtRef(initial = null, injector) {
             set: (newElement) => {
                 if (newElement !== untracked(signalRef)) {
                     signalRef.set(newElement);
-                    safeDetectChanges(cdr);
+                    // trigger CDR
+                    requestAnimationFrame(() => void safeDetectChanges(cdr));
                 }
             },
             get: () => readonlySignal(),
         });
-        Object.defineProperty(ref, 'untracked', {
-            get: () => untracked(readonlySignal),
-        });
+        Object.defineProperty(ref, 'untracked', { get: () => untracked(readonlySignal) });
         return Object.assign(ref, { children });
     });
 }
@@ -2840,10 +2843,10 @@ class NgtRepeat extends NgForOf {
     set ngForRepeat(count) {
         this.ngForOf = Number.isInteger(count) ? Array.from({ length: count }, (_, i) => i) : [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtRepeat, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtRepeat, isStandalone: true, selector: "[ngFor][ngForRepeat]", inputs: { ngForRepeat: "ngForRepeat" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtRepeat, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgtRepeat, isStandalone: true, selector: "[ngFor][ngForRepeat]", inputs: { ngForRepeat: "ngForRepeat" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtRepeat, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtRepeat, decorators: [{
             type: Directive,
             args: [{ selector: '[ngFor][ngForRepeat]', standalone: true }]
         }], propDecorators: { ngForRepeat: [{
@@ -2865,38 +2868,34 @@ const privateKeys = [
 ];
 class NgtPortalBeforeRender {
     #portalStore;
-    #subscription;
     constructor() {
         this.#portalStore = inject(NgtStore);
         this.renderPriority = 1;
         this.beforeRender = new EventEmitter();
-        inject(DestroyRef).onDestroy(() => {
-            this.#subscription?.();
+        let oldClear;
+        queueMicrotaskInInjectionContext(() => {
+            injectBeforeRender(({ delta, frame }) => {
+                this.beforeRender.emit({ ...this.#portalStore.get(), delta, frame });
+                const { gl, scene, camera } = this.#portalStore.get();
+                oldClear = gl.autoClear;
+                if (this.renderPriority === 1) {
+                    // clear scene and render with default
+                    gl.autoClear = true;
+                    gl.render(this.parentScene, this.parentCamera);
+                }
+                // disable cleaning
+                gl.autoClear = false;
+                gl.clearDepth();
+                gl.render(scene, camera);
+                // restore
+                gl.autoClear = oldClear;
+            }, { priority: this.renderPriority });
         });
     }
-    ngOnInit() {
-        let oldClear;
-        this.#subscription = this.#portalStore.get('internal').subscribe(({ delta, frame }) => {
-            this.beforeRender.emit({ ...this.#portalStore.get(), delta, frame });
-            const { gl, scene, camera } = this.#portalStore.get();
-            oldClear = gl.autoClear;
-            if (this.renderPriority === 1) {
-                // clear scene and render with default
-                gl.autoClear = true;
-                gl.render(this.parentScene, this.parentCamera);
-            }
-            // disable cleaning
-            gl.autoClear = false;
-            gl.clearDepth();
-            gl.render(scene, camera);
-            // restore
-            gl.autoClear = oldClear;
-        }, this.renderPriority, this.#portalStore);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtPortalBeforeRender, isStandalone: true, selector: "[ngtPortalBeforeRender]", inputs: { renderPriority: "renderPriority", parentScene: "parentScene", parentCamera: "parentCamera" }, outputs: { beforeRender: "beforeRender" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgtPortalBeforeRender, isStandalone: true, selector: "[ngtPortalBeforeRender]", inputs: { renderPriority: "renderPriority", parentScene: "parentScene", parentCamera: "parentCamera" }, outputs: { beforeRender: "beforeRender" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
             type: Directive,
             args: [{ selector: '[ngtPortalBeforeRender]', standalone: true }]
         }], ctorParameters: function () { return []; }, propDecorators: { renderPriority: [{
@@ -2918,10 +2917,10 @@ class NgtPortalContent {
             delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtPortalContent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ViewContainerRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtPortalContent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ViewContainerRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtPortalContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtPortalContent, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[ngtPortalContent]', standalone: true }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ViewContainerRef, decorators: [{
@@ -2931,7 +2930,7 @@ class NgtPortal extends NgtSignalStore {
     set container(container) {
         this.set({ container });
     }
-    set state(state) {
+    set portalState(state) {
         this.set({ state });
     }
     #parentStore;
@@ -3036,8 +3035,8 @@ class NgtPortal extends NgtSignalStore {
             ...restInputsState,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { container: "container", portalState: "portalState", 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>
             <ng-container
                 *ngIf="autoRender && portalContentRendered"
@@ -3050,7 +3049,7 @@ class NgtPortal extends NgtSignalStore {
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgtPortalBeforeRender, selector: "[ngtPortalBeforeRender]", inputs: ["renderPriority", "parentScene", "parentCamera"], outputs: ["beforeRender"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtPortal, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-portal',
@@ -3072,7 +3071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { container: [{
                 type: Input
-            }], state: [{
+            }], portalState: [{
                 type: Input
             }], autoRender: [{
                 type: Input
@@ -3097,10 +3096,10 @@ class NgtRoutedScene {
             .pipe(filter((event) => event instanceof ActivationEnd), takeUntilDestroyed())
             .subscribe(() => safeDetectChanges(cdr));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtRoutedScene, deps: [{ token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtRoutedScene, deps: [{ token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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: "16.0.0", ngImport: i0, type: NgtRoutedScene, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtRoutedScene, decorators: [{
             type: Component,
             args: [{
                     standalone: true,