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

package/fesm2022/angular-three.mjs

@@ -1,35 +1,12 @@
 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, ApplicationRef, 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, SkipSelf, ContentChild } from '@angular/core';
 import { provideNgxResizeOptions, NgxResize } from 'ngx-resize';
 import * as THREE from 'three';
+import { BehaviorSubject, filter } from 'rxjs';
 import { DOCUMENT, NgForOf, NgIf } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/router';
 import { ActivationEnd, RouterOutlet } from '@angular/router';
-import { filter } from 'rxjs';
-
-function createSignal(initialValue, options = {}) {
-    const original = signal(initialValue, options);
-    const originalSet = original.set.bind(original);
-    const originalUpdate = original.update.bind(original);
-    original.set = (...args) => {
-        try {
-            originalSet(...args);
-        }
-        catch {
-            requestAnimationFrame(() => originalSet(...args));
-        }
-    };
-    original.update = (...args) => {
-        try {
-            originalUpdate(...args);
-        }
-        catch {
-            requestAnimationFrame(() => originalUpdate(...args));
-        }
-    };
-    return original;
-}
 
 const STORE_COMPUTED_KEY = '__ngt_store_computed__';
 class NgtSignalStore {
@@ -37,7 +14,7 @@ class NgtSignalStore {
     #computedCache = new Map();
     constructor(initialState = {}) {
         initialState ??= {};
-        this.#state = createSignal(Object.assign(initialState, { __ngt_dummy_state__: Date.now() }));
+        this.#state = signal(Object.assign(initialState, { __ngt_dummy_state__: Date.now() }));
         this.state = this.#state.asReadonly();
     }
     select(...keysAndOptions) {
@@ -88,10 +65,10 @@ class NgtSignalStore {
         };
         this.#state.update((previous) => ({ ...updater(previous), ...previous }));
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", 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.3", ngImport: i0, type: NgtSignalStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtSignalStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtSignalStore, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
@@ -201,11 +178,11 @@ function invalidateInstance(instance) {
 function prepare(object, localState) {
     const instance = object;
     if (localState?.primitive || !instance.__ngt__) {
-        const { objects = createSignal([]), nonObjects = createSignal([]), ...rest } = localState || {};
+        const { objects = signal([]), nonObjects = signal([]), ...rest } = localState || {};
         instance.__ngt__ = {
             previousAttach: null,
             store: null,
-            parent: createSignal(null),
+            parent: new BehaviorSubject(null),
             memoized: {},
             eventCount: 0,
             handlers: {},
@@ -213,22 +190,26 @@ function prepare(object, localState) {
             nonObjects,
             nativeProps: new NgtSignalStore({}),
             add: (object, type) => {
-                const current = untracked(instance.__ngt__[type]);
-                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].set(current);
-                }
-                else {
-                    instance.__ngt__[type].update((prev) => [...prev, object]);
-                }
-                notifyAncestors(untracked(instance.__ngt__.parent));
+                queueMicrotask(() => {
+                    const current = untracked(instance.__ngt__[type]);
+                    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].set(current);
+                    }
+                    else {
+                        instance.__ngt__[type].update((prev) => [...prev, object]);
+                    }
+                    notifyAncestors(instance.__ngt__.parent.value);
+                });
             },
             remove: (object, type) => {
-                instance.__ngt__[type].update((prev) => prev.filter((o) => o !== object));
-                notifyAncestors(untracked(instance.__ngt__.parent));
+                queueMicrotask(() => {
+                    instance.__ngt__[type].update((prev) => prev.filter((o) => o !== object));
+                    notifyAncestors(instance.__ngt__.parent.value);
+                });
             },
             ...rest,
         };
@@ -243,7 +224,7 @@ function notifyAncestors(instance) {
         localState.objects.update((prev) => prev);
     if (localState.nonObjects)
         localState.nonObjects.update((prev) => prev);
-    notifyAncestors(untracked(localState.parent));
+    notifyAncestors(localState.parent.value);
 }
 
 const idCache = {};
@@ -729,24 +710,12 @@ function safeDetectChanges(cdr) {
     }
 }
 
-function requestAnimationInInjectionContext(cb, injector) {
-    injector = assertInjectionContext(requestAnimationInInjectionContext, injector);
+function requestAnimationFrameInInjectionContext(cb, injector) {
+    injector = assertInjectionContext(requestAnimationFrameInInjectionContext, injector);
     return requestAnimationFrame(() => {
         return runInInjectionContext(injector, cb);
     });
 }
-function queueMicrotaskInInjectionContext(cb, injector) {
-    injector = assertInjectionContext(requestAnimationInInjectionContext, injector);
-    return queueMicrotask(() => {
-        return runInInjectionContext(injector, cb);
-    });
-}
-function queueMacrotaskInInjectionContext(cb, injector) {
-    injector = assertInjectionContext(requestAnimationInInjectionContext, injector);
-    return setTimeout(() => {
-        return runInInjectionContext(injector, cb);
-    });
-}
 
 const cached = new Map();
 function normalizeInputs(input) {
@@ -783,7 +752,7 @@ function injectNgtLoader(loaderConstructorFactory, inputs, { extensions, onProgr
     return runInInjectionContext(injector, () => {
         const cdr = inject(ChangeDetectorRef);
         const effector = load(loaderConstructorFactory, inputs, { extensions, onProgress });
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             effect(() => {
                 const originalUrls = inputs();
                 Promise.all(effector()).then((results) => {
@@ -1027,7 +996,6 @@ function applyProps(instance, props) {
                 if (!THREE.ColorManagement && !rootState?.linear && isColor)
                     targetProp.convertSRGBToLinear();
             }
-            localState?.nativeProps?.set({ [key]: targetProp });
         }
         // else just overwrite the value
         else {
@@ -1044,13 +1012,12 @@ function applyProps(instance, props) {
                         texture.encoding = rootState.gl.outputEncoding;
                 }
             }
-            localState?.nativeProps?.set({ [key]: value });
         }
         checkUpdate(targetProp);
         invalidateInstance(instance);
     }
     const instanceHandlers = localState.eventCount;
-    const parent = localState.parent ? untracked(localState.parent) : null;
+    const parent = localState.parent?.value;
     if (parent && rootState.internal && instance['raycast'] && instanceHandlers !== localState.eventCount) {
         // Pre-emptively remove the instance from the interaction manager
         const index = rootState.internal.interaction.indexOf(instance);
@@ -1450,10 +1417,10 @@ class NgtStore extends NgtSignalStore {
     #invalidate() {
         effect(() => void this.state().invalidate(), { injector: this.#injector });
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtStore, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtStore, decorators: [{
             type: Injectable
         }] });
 function computeInitialSize(canvas, defaultSize) {
@@ -1568,7 +1535,7 @@ function attachThreeChild(parent, child) {
             // attach
             if (cLS.isRaw) {
                 if (cLS.parent) {
-                    cLS.parent.set(parent);
+                    cLS.parent.next(parent);
                 }
                 // at this point we don't have rawValue yet, so we bail and wait until the Renderer recalls attach
                 if (child.__ngt_renderer__[11 /* NgtRendererClassId.rawValue */] === undefined)
@@ -1588,7 +1555,7 @@ function attachThreeChild(parent, child) {
     }
     pLS.add(child, added ? 'objects' : 'nonObjects');
     if (cLS.parent) {
-        cLS.parent.set(parent);
+        cLS.parent.next(parent);
     }
     if (cLS.afterAttach)
         cLS.afterAttach.emit({ parent, node: child });
@@ -1599,7 +1566,7 @@ function removeThreeChild(parent, child, dispose) {
     const pLS = getLocalState(parent);
     const cLS = getLocalState(child);
     // clear parent ref
-    cLS.parent?.set(null);
+    cLS.parent?.next(null);
     // remove child from parent
     if (untracked(pLS.objects))
         pLS.remove(child, 'objects');
@@ -1716,17 +1683,17 @@ class NgtCommonDirective {
             });
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: NgtCommonDirective, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtCommonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtCommonDirective, decorators: [{
             type: Directive
         }], ctorParameters: function () { return []; } });
 
 class NgtArgs extends NgtCommonDirective {
     #injectedArgs = [];
     set args(args) {
-        if (args == null || !Array.isArray(args) || (args.length === 1 && args[0] === null))
+        if (args == null || !Array.isArray(args) || args.length === 0 || (args.length === 1 && args[0] === null))
             return;
         this.injected = false;
         this.#injectedArgs = args;
@@ -1742,10 +1709,10 @@ class NgtArgs extends NgtCommonDirective {
     validate() {
         return !this.injected && !!this.#injectedArgs.length;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: NgtArgs, isStandalone: true, selector: "[args]", inputs: { args: "args" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtArgs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtArgs, decorators: [{
             type: Directive,
             args: [{ selector: '[args]', standalone: true }]
         }], propDecorators: { args: [{
@@ -1771,10 +1738,10 @@ class NgtParent extends NgtCommonDirective {
     validate() {
         return !this.injected && !!this.#injectedParent;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: NgtParent, isStandalone: true, selector: "[parent]", inputs: { parent: "parent" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtParent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtParent, decorators: [{
             type: Directive,
             args: [{ selector: '[parent]', standalone: true }]
         }], propDecorators: { parent: [{
@@ -1930,6 +1897,7 @@ class NgtRendererStore {
             return;
         }
         applyProps(node, { [name]: value });
+        this.#updateNativeProps(node, name, value);
     }
     applyProperty(node, name, value) {
         const rS = node.__ngt_renderer__;
@@ -1941,7 +1909,7 @@ class NgtRendererStore {
             value.nativeElement = node;
             return;
         }
-        const parent = getLocalState(node).parent() || rS[1 /* NgtRendererClassId.parent */];
+        const parent = getLocalState(node).parent?.value || rS[1 /* NgtRendererClassId.parent */];
         // [rawValue]
         if (getLocalState(node).isRaw && name === SPECIAL_PROPERTIES.VALUE) {
             rS[11 /* NgtRendererClassId.rawValue */] = value;
@@ -1963,6 +1931,7 @@ class NgtRendererStore {
             value = compound[1 /* NgtCompoundClassId.props */][name];
         }
         applyProps(node, { [name]: value });
+        this.#updateNativeProps(node, name, value);
     }
     isCompound(name) {
         return this.root.compoundPrefixes.some((prefix) => name.startsWith(prefix));
@@ -2094,6 +2063,14 @@ class NgtRendererStore {
             this.removeChild(parent, node);
         }
     }
+    #updateNativeProps(node, name, value) {
+        const localState = getLocalState(node);
+        if (!localState || !localState.nativeProps)
+            return;
+        queueMicrotask(() => {
+            localState.nativeProps.set({ [name]: value });
+        });
+    }
     #firstNonInjectedDirective(dir) {
         let directive;
         let i = this.#comments.length - 1;
@@ -2178,10 +2155,10 @@ class NgtRendererFactory {
         }
         return renderer;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRendererFactory }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtRendererFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRendererFactory, decorators: [{
             type: Injectable
         }] });
 /**
@@ -2229,7 +2206,7 @@ class NgtRenderer {
             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) } }));
+            { __ngt__: { isRaw: true, parent: new BehaviorSubject(null) } }));
         }
         const { injectedArgs, injectedParent, store } = this.store.getCreationState();
         let parent = injectedParent;
@@ -2335,7 +2312,7 @@ class NgtRenderer {
         // if both are three instances, straightforward case
         if (pRS[0 /* NgtRendererClassId.type */] === 'three' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
             // if child already attached to a parent, skip
-            if (getLocalState(newChild).parent && untracked(getLocalState(newChild).parent))
+            if (getLocalState(newChild).parent?.value)
                 return;
             // attach THREE child
             attachThreeChild(parent, newChild);
@@ -2375,7 +2352,7 @@ class NgtRenderer {
         }
         const shouldFindGrandparentInstance = 
         // if child is three but haven't been attached to a parent yet
-        (cRS[0 /* NgtRendererClassId.type */] === 'three' && !untracked(getLocalState(newChild).parent)) ||
+        (cRS[0 /* NgtRendererClassId.type */] === 'three' && !getLocalState(newChild).parent.value) ||
             // or both parent and child are DOM elements
             // or they are compound AND haven't had a THREE instance yet
             ((pRS[0 /* NgtRendererClassId.type */] === 'dom' ||
@@ -2715,14 +2692,14 @@ class NgtCanvas extends NgtSignalStore {
             }
         });
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", 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.2", ngImport: i0, type: NgtCanvas, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtCanvas, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-canvas',
@@ -2798,13 +2775,12 @@ function injectBeforeRender(cb, { priority = 0, injector } = {}) {
 
 function injectNgtRef(initial = null, injector) {
     injector = assertInjectionContext(injectNgtRef, injector);
+    const ref = is.ref(initial) ? initial : new ElementRef(initial);
+    const signalRef = signal(ref.nativeElement);
+    const readonlySignal = signalRef.asReadonly();
+    const cached = new Map();
     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();
-        const cached = new Map();
         inject(DestroyRef).onDestroy(() => void cached.clear());
         const children = (type = 'objects') => {
             if (!cached.has(type)) {
@@ -2827,9 +2803,16 @@ function injectNgtRef(initial = null, injector) {
         Object.defineProperty(ref, 'nativeElement', {
             set: (newElement) => {
                 if (newElement !== untracked(signalRef)) {
-                    signalRef.set(newElement);
-                    // trigger CDR
+                    try {
+                        signalRef.set(newElement);
+                    }
+                    catch {
+                        requestAnimationFrame(() => {
+                            signalRef.set(newElement);
+                        });
+                    }
                     requestAnimationFrame(() => void safeDetectChanges(cdr));
+                    // trigger CDR
                 }
             },
             get: () => readonlySignal(),
@@ -2843,10 +2826,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRepeat, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: NgtRepeat, isStandalone: true, selector: "[ngFor][ngForRepeat]", inputs: { ngForRepeat: "ngForRepeat" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtRepeat, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRepeat, decorators: [{
             type: Directive,
             args: [{ selector: '[ngFor][ngForRepeat]', standalone: true }]
         }], propDecorators: { ngForRepeat: [{
@@ -2873,7 +2856,7 @@ class NgtPortalBeforeRender {
         this.renderPriority = 1;
         this.beforeRender = new EventEmitter();
         let oldClear;
-        queueMicrotaskInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             injectBeforeRender(({ delta, frame }) => {
                 this.beforeRender.emit({ ...this.#portalStore.get(), delta, frame });
                 const { gl, scene, camera } = this.#portalStore.get();
@@ -2892,10 +2875,10 @@ class NgtPortalBeforeRender {
             }, { priority: this.renderPriority });
         });
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", 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.2", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
             type: Directive,
             args: [{ selector: '[ngtPortalBeforeRender]', standalone: true }]
         }], ctorParameters: function () { return []; }, propDecorators: { renderPriority: [{
@@ -2917,10 +2900,10 @@ class NgtPortalContent {
             delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", 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.3", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtPortalContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtPortalContent, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[ngtPortalContent]', standalone: true }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ViewContainerRef, decorators: [{
@@ -3035,8 +3018,8 @@ class NgtPortal extends NgtSignalStore {
             ...restInputsState,
         };
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", 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"
@@ -3049,7 +3032,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.2", ngImport: i0, type: NgtPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtPortal, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-portal',
@@ -3096,10 +3079,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.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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", 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.3", 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.2", ngImport: i0, type: NgtRoutedScene, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRoutedScene, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -3113,5 +3096,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NGT_CATALOGUE, NgtArgs, NgtCanvas, NgtParent, NgtPortal, NgtPortalContent, NgtRepeat, NgtRoutedScene, NgtSignalStore, NgtStore, addAfterEffect, addEffect, addTail, applyProps, assertInjectionContext, checkNeedsUpdate, checkUpdate, createAttachFunction, createSignal, extend, getLocalState, injectBeforeRender, injectNgtLoader, injectNgtRef, invalidateInstance, is, makeDefaultCamera, makeDefaultRenderer, makeDpr, makeId, makeObjectGraph, prepare, queueMacrotaskInInjectionContext, queueMicrotaskInInjectionContext, requestAnimationInInjectionContext, rootStateMap, safeDetectChanges, updateCamera };
+export { NGT_CATALOGUE, NgtArgs, NgtCanvas, NgtParent, NgtPortal, NgtPortalContent, NgtRepeat, NgtRoutedScene, NgtSignalStore, NgtStore, addAfterEffect, addEffect, addTail, applyProps, assertInjectionContext, checkNeedsUpdate, checkUpdate, createAttachFunction, extend, getLocalState, injectBeforeRender, injectNgtLoader, injectNgtRef, invalidateInstance, is, makeDefaultCamera, makeDefaultRenderer, makeDpr, makeId, makeObjectGraph, prepare, requestAnimationFrameInInjectionContext, rootStateMap, safeDetectChanges, updateCamera };
 //# sourceMappingURL=angular-three.mjs.map