angular-three 2.0.0-beta.41 → 2.0.0-beta.42

package/fesm2022/angular-three.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { untracked, computed, signal, ElementRef, runInInjectionContext, inject, DestroyRef, effect, ChangeDetectorRef, InjectionToken, Injector, Optional, SkipSelf, ViewContainerRef, NgZone, TemplateRef, Directive, Input, EventEmitter, getDebugNode, RendererFactory2, Injectable, makeEnvironmentProviders, provideZoneChangeDetection, EnvironmentInjector, createEnvironmentInjector, Component, ChangeDetectionStrategy, Output, ViewChild, ContentChild } from '@angular/core';
+import { untracked, computed, signal, ElementRef, inject, Injector, DestroyRef, effect, runInInjectionContext, ChangeDetectorRef, InjectionToken, Optional, SkipSelf, ViewContainerRef, NgZone, TemplateRef, Directive, Input, EventEmitter, getDebugNode, RendererFactory2, Injectable, makeEnvironmentProviders, provideZoneChangeDetection, EnvironmentInjector, createEnvironmentInjector, Component, ChangeDetectionStrategy, Output, ViewChild, CUSTOM_ELEMENTS_SCHEMA, ContentChild, forwardRef } from '@angular/core';
 import { assertInjector } from 'ngxtension/assert-injector';
 import { DOCUMENT, NgIf } from '@angular/common';
 import { createInjectionToken } from 'ngxtension/create-injection-token';
@@ -58,7 +58,7 @@ const selector = (_state, computedCache) => (...keysAndOptions) => {
     }
     const [keys, options] = parseStoreOptions(keysAndOptions);
     const joinedKeys = keys.join('-');
-    const cachedKeys = joinedKeys.concat(options ? JSON.stringify(options) : '');
+    const cachedKeys = joinedKeys.concat(JSON.stringify(options));
     if (!computedCache.has(cachedKeys)) {
         computedCache.set(cachedKeys, computed(() => keys.reduce((value, key) => value[key], _state()), options));
     }
@@ -95,7 +95,7 @@ function signalStore(initialState = {}, options) {
     const store = { select, get, set, patch, state };
     // NOTE: internal _snapshot to debug current state
     Object.defineProperty(store, '_snapshot', {
-        get: state,
+        get: untracked.bind({}, state),
         configurable: false,
         enumerable: false,
     });
@@ -203,37 +203,41 @@ function invalidateInstance(instance) {
 function prepare(object, localState) {
     const instance = object;
     if (localState?.primitive || !instance.__ngt__) {
-        const { objects = signal([]), nonObjects = signal([]), ...rest } = localState || {};
+        const { instanceStore = signalStore({
+            nativeProps: {},
+            parent: null,
+            objects: [],
+            nonObjects: [],
+        }), ...rest } = localState || {};
         instance.__ngt__ = {
             previousAttach: null,
             store: null,
-            parent: signal(null),
             memoized: {},
             eventCount: 0,
             handlers: {},
-            objects,
-            nonObjects,
-            nativeProps: signalStore(),
+            instanceStore,
             add: (object, type) => {
-                untracked(() => {
-                    const current = 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
-                        current.splice(foundIndex, 1, object);
-                        instance.__ngt__[type].set(current);
-                    }
-                    else {
-                        instance.__ngt__[type].update((prev) => [...prev, object]);
-                    }
-                    notifyAncestors(instance.__ngt__.parent());
-                });
+                const current = instance.__ngt__.instanceStore.get(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
+                    current.splice(foundIndex, 1, object);
+                    instance.__ngt__.instanceStore.set({ [type]: current });
+                }
+                else {
+                    instance.__ngt__.instanceStore.set((prev) => ({ [type]: [...prev[type], object] }));
+                }
+                notifyAncestors(instance.__ngt__.instanceStore.get('parent'));
             },
             remove: (object, type) => {
-                untracked(() => {
-                    instance.__ngt__[type].update((prev) => prev.filter((o) => o !== object));
-                    notifyAncestors(instance.__ngt__.parent());
-                });
+                instance.__ngt__.instanceStore.set((prev) => ({ [type]: prev[type].filter((o) => o !== object) }));
+                notifyAncestors(instance.__ngt__.instanceStore.get('parent'));
+            },
+            setNativeProps: (key, value) => {
+                instance.__ngt__.instanceStore.set((prev) => ({ nativeProps: { ...prev.nativeProps, [key]: value } }));
+            },
+            setParent: (parent) => {
+                instance.__ngt__.instanceStore.set({ parent });
             },
             ...rest,
         };
@@ -244,11 +248,10 @@ function notifyAncestors(instance) {
     if (!instance)
         return;
     const localState = getLocalState(instance);
-    if (localState.objects)
-        localState.objects.update((prev) => prev);
-    if (localState.nonObjects)
-        localState.nonObjects.update((prev) => prev);
-    notifyAncestors(localState.parent());
+    if (localState.instanceStore) {
+        localState.instanceStore.set((prev) => ({ objects: prev.objects, nonObjects: prev.nonObjects }));
+        notifyAncestors(localState.instanceStore.get('parent'));
+    }
 }
 
 // This function prepares a set of changes to be applied to the instance
@@ -276,8 +279,7 @@ function applyProps(instance, props) {
     // if props is empty
     if (!Object.keys(props).length)
         return instance;
-    // Filter equals, events and reserved props
-    // filter equals, events , and reserved props
+    // filter equals, and reserved props
     const localState = getLocalState(instance);
     const rootState = localState.store?.get();
     const changes = diffProps(instance, props);
@@ -356,9 +358,9 @@ function applyProps(instance, props) {
         checkUpdate(targetProp);
         invalidateInstance(instance);
     }
-    const instanceHandlers = localState.eventCount;
-    const parent = localState.parent ? untracked(localState.parent) : null;
-    if (parent && rootState.internal && instance['raycast'] && instanceHandlers !== localState.eventCount) {
+    const instanceHandlersCount = localState.eventCount;
+    const parent = localState.instanceStore?.get('parent');
+    if (parent && rootState.internal && instance['raycast'] && instanceHandlersCount !== localState.eventCount) {
         // Pre-emptively remove the instance from the interaction manager
         const index = rootState.internal.interaction.indexOf(instance);
         if (index > -1)
@@ -425,8 +427,8 @@ function makeObjectGraph(object) {
 const shallowLoose = { objects: 'shallow', strict: false };
 const roots = new Map();
 function injectCanvasRootInitializer(injector) {
-    injector = assertInjector(injectCanvasRootInitializer, injector);
-    return runInInjectionContext(injector, () => {
+    return assertInjector(injectCanvasRootInitializer, injector, () => {
+        const assertedInjector = inject(Injector);
         const injectedStore = injectNgtStore();
         const loop = injectNgtLoop();
         const destroyRef = inject(DestroyRef);
@@ -636,8 +638,13 @@ function injectCanvasRootInitializer(injector) {
                     if (state.frameloop !== frameloop)
                         state.setFrameloop(frameloop);
                     isConfigured = true;
-                    invalidateRef?.destroy();
-                    invalidateRef = effect(() => void store.state().invalidate(), { manualCleanup: true, injector });
+                    queueMicrotask(() => {
+                        invalidateRef?.destroy();
+                        invalidateRef = effect(() => void store.state().invalidate(), {
+                            manualCleanup: true,
+                            injector: assertedInjector,
+                        });
+                    });
                 },
             };
         };
@@ -1011,8 +1018,7 @@ const [injectNgtStore, provideNgtStore] = createInjectionToken(storeFactory, {
 });
 
 function injectBeforeRender(cb, { priority = 0, injector } = {}) {
-    injector = assertInjector(injectBeforeRender, injector);
-    return runInInjectionContext(injector, () => {
+    return assertInjector(injectBeforeRender, injector, () => {
         const store = injectNgtStore();
         const sub = store.get('internal').subscribe(cb, priority, store);
         inject(DestroyRef).onDestroy(() => void sub());
@@ -1467,8 +1473,9 @@ function load(loaderConstructorFactory, inputs, { extensions, onProgress, } = {}
             if (!cached.has(url)) {
                 cached.set(url, new Promise((resolve, reject) => {
                     loader.load(url, (data) => {
-                        if ('scene' in data)
+                        if ('scene' in data) {
                             Object.assign(data, makeObjectGraph(data['scene']));
+                        }
                         resolve(data);
                     }, onProgress, (error) => reject(new Error(`[NGT] Could not load ${url}: ${error}`)));
                 }));
@@ -1478,9 +1485,8 @@ function load(loaderConstructorFactory, inputs, { extensions, onProgress, } = {}
     };
 }
 function _injectNgtLoader(loaderConstructorFactory, inputs, { extensions, onProgress, injector, } = {}) {
-    injector = assertInjector(_injectNgtLoader, injector);
-    const response = signal(null);
-    return runInInjectionContext(injector, () => {
+    return assertInjector(_injectNgtLoader, injector, () => {
+        const response = signal(null);
         const cdr = inject(ChangeDetectorRef);
         const effector = load(loaderConstructorFactory, inputs, { extensions, onProgress });
         effect(() => {
@@ -1568,10 +1574,10 @@ class NgtCommonDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: NgtCommonDirective, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: NgtCommonDirective, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtCommonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtCommonDirective, decorators: [{
             type: Directive
         }], ctorParameters: function () { return []; } });
 
@@ -1597,10 +1603,10 @@ class NgtArgs extends NgtCommonDirective {
     validate() {
         return !this.injected && !!this.injectedArgs.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: NgtArgs, isStandalone: true, selector: "ng-template[args]", inputs: { args: "args" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: NgtArgs, isStandalone: true, selector: "ng-template[args]", inputs: { args: "args" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtArgs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtArgs, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[args]', standalone: true }]
         }], propDecorators: { args: [{
@@ -1629,10 +1635,10 @@ class NgtParent extends NgtCommonDirective {
     validate() {
         return !this.injected && !!this.injectedParent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: NgtParent, isStandalone: true, selector: "ng-template[parent]", inputs: { parent: "parent" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: NgtParent, isStandalone: true, selector: "ng-template[parent]", inputs: { parent: "parent" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtParent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtParent, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[parent]', standalone: true }]
         }], propDecorators: { parent: [{
@@ -1737,10 +1743,8 @@ function attachThreeChild(parent, child) {
             }
             // attach
             if (cLS.isRaw) {
-                if (cLS.parent && cLS.parent() !== parent) {
-                    untracked(() => {
-                        cLS.parent.set(parent);
-                    });
+                if (cLS.instanceStore.get('parent') !== parent) {
+                    cLS.setParent(parent);
                 }
                 // at this point we don't have rawValue yet, so we bail and wait until the Renderer recalls attach
                 if (child.__ngt_renderer__[NgtRendererClassId.rawValue] === undefined)
@@ -1759,10 +1763,8 @@ function attachThreeChild(parent, child) {
         added = true;
     }
     pLS.add(child, added ? 'objects' : 'nonObjects');
-    if (cLS.parent && cLS.parent() !== parent) {
-        untracked(() => {
-            cLS.parent.set(parent);
-        });
+    if (cLS.instanceStore.get('parent') !== parent) {
+        cLS.setParent(parent);
     }
     if (cLS.afterAttach)
         cLS.afterAttach.emit({ parent, node: child });
@@ -1773,14 +1775,10 @@ function removeThreeChild(parent, child, dispose) {
     const pLS = getLocalState(parent);
     const cLS = getLocalState(child);
     // clear parent ref
-    untracked(() => {
-        cLS.parent?.set(null);
-    });
+    cLS.setParent?.(null);
     // remove child from parent
-    if (pLS.objects && untracked(pLS.objects))
-        pLS.remove(child, 'objects');
-    if (pLS.nonObjects && untracked(pLS.nonObjects))
-        pLS.remove(child, 'nonObjects');
+    pLS.remove?.(child, 'objects');
+    pLS.remove?.(child, 'nonObjects');
     if (cLS.attach) {
         detach(parent, child, cLS.attach);
     }
@@ -1790,7 +1788,7 @@ function removeThreeChild(parent, child, dispose) {
     }
     const isPrimitive = cLS.primitive;
     if (!isPrimitive) {
-        removeThreeRecursive(cLS.objects ? untracked(cLS.objects) : [], child, !!dispose);
+        removeThreeRecursive(cLS.instanceStore?.get('objects') || [], child, !!dispose);
         removeThreeRecursive(child.children, child, !!dispose);
     }
     // dispose
@@ -2030,7 +2028,7 @@ class NgtRendererStore {
             value.nativeElement = node;
             return;
         }
-        const parent = getLocalState(node).parent() || rS[NgtRendererClassId.parent];
+        const parent = getLocalState(node)?.instanceStore.get('parent') || rS[NgtRendererClassId.parent];
         // [rawValue]
         if (getLocalState(node).isRaw && name === SPECIAL_PROPERTIES.VALUE) {
             rS[NgtRendererClassId.rawValue] = value;
@@ -2119,11 +2117,9 @@ class NgtRendererStore {
             rS[NgtRendererClassId.compound] = undefined;
             rS[NgtRendererClassId.compoundParent] = undefined;
             const localState = getLocalState(node);
-            if (localState.objects) {
-                untracked(localState.objects).forEach((obj) => this.destroy(obj, parent));
-            }
-            if (localState.nonObjects) {
-                untracked(localState.nonObjects).forEach((obj) => this.destroy(obj, parent));
+            if (localState.instanceStore) {
+                localState.instanceStore.get('objects').forEach((obj) => this.destroy(obj, parent));
+                localState.instanceStore.get('nonObjects').forEach((obj) => this.destroy(obj, parent));
             }
             if (localState.afterUpdate)
                 localState.afterUpdate.complete();
@@ -2193,9 +2189,9 @@ class NgtRendererStore {
     }
     updateNativeProps(node, key, value) {
         const localState = getLocalState(node);
-        if (!localState || !localState.nativeProps)
-            return;
-        localState.nativeProps.set({ [key]: value });
+        if (localState.instanceStore) {
+            localState.setNativeProps(key, value);
+        }
     }
     firstNonInjectedDirective(dir) {
         let directive;
@@ -2295,10 +2291,10 @@ class NgtRendererFactory {
         }
         return renderer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtRendererFactory }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtRendererFactory }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtRendererFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtRendererFactory, decorators: [{
             type: Injectable
         }] });
 /**
@@ -2464,7 +2460,7 @@ class NgtRenderer {
         // if both are three instances, straightforward case
         if (pRS[NgtRendererClassId.type] === 'three' && cRS?.[NgtRendererClassId.type] === 'three') {
             // if child already attached to a parent, skip
-            if (getLocalState(newChild).parent && untracked(getLocalState(newChild).parent))
+            if (getLocalState(newChild).instanceStore?.get('parent'))
                 return;
             // attach THREE child
             attachThreeChild(parent, newChild);
@@ -2599,7 +2595,13 @@ class NgtRenderer {
         // if the target doesn't have __ngt_renderer__, we delegate
         // if target is DOM node, then we pass that to delegate Renderer
         if (!rS || this.store.isDOM(target)) {
-            return this.delegate.listen(target, eventName, callback);
+            const targetCdr = getDebugNode(target)?.injector.get(ChangeDetectorRef, null);
+            const updatedCallback = (event) => {
+                const callbackValue = callback(event);
+                safeDetectChanges(targetCdr || this.cdr);
+                return callbackValue;
+            };
+            return this.delegate.listen(target, eventName, updatedCallback);
         }
         if (rS[NgtRendererClassId.type] === 'three' ||
             (rS[NgtRendererClassId.type] === 'compound' && rS[NgtRendererClassId.compounded])) {
@@ -2636,7 +2638,7 @@ class NgtRenderer {
         const isParentCompounded = pRS[NgtRendererClassId.compounded];
         const isChildCompounded = cRS[NgtRendererClassId.compounded];
         // if child is three but haven't been attached to a parent yet
-        const isDanglingThreeChild = cType === 'three' && !untracked(getLocalState(child).parent);
+        const isDanglingThreeChild = cType === 'three' && !getLocalState(child).instanceStore?.get('parent');
         // or both parent and child are DOM elements
         // or they are compound AND haven't had a THREE instance yet
         const isParentStillDOM = pType === 'dom' || (pType === 'compound' && !isParentCompounded);
@@ -2758,7 +2760,6 @@ class NgtCanvas {
         if (result.width > 0 && result.height > 0) {
             this.resizeEffectRef?.destroy();
             const inputs = this.inputs.select();
-            // NOTE: go back into zone so that effect runs
             // TODO: Double-check when effect is made not depended on zone
             this.resizeEffectRef = this.zone.run(() => effect(() => {
                 this.zone.runOutsideAngular(() => {
@@ -2766,7 +2767,7 @@ class NgtCanvas {
                         this.configurator = this.initRoot(this.glCanvas.nativeElement);
                     this.configurator.configure({ ...inputs(), size: result });
                     if (this.glRef) {
-                        this.cdr.detectChanges();
+                        safeDetectChanges(this.cdr);
                     }
                     else {
                         this.render();
@@ -2775,13 +2776,13 @@ class NgtCanvas {
             }, { manualCleanup: true, injector: this.injector }));
         }
     }
+    // NOTE: render outside of zone
     render() {
         this.glEnvironmentInjector?.destroy();
         this.glRef?.destroy();
         // Flag the canvas active, rendering will now begin
         this.store.set((state) => ({ internal: { ...state.internal, active: true } }));
-        const inputs = this.inputs.get();
-        const state = this.store.get();
+        const [inputs, state] = [this.inputs.get(), this.store.get()];
         // connect to event source
         state.events.connect?.(inputs.eventSource
             ? is.ref(inputs.eventSource)
@@ -2792,11 +2793,11 @@ class NgtCanvas {
         if (inputs.eventPrefix) {
             state.setEvents({
                 compute: (event, store) => {
-                    const innerState = store.get();
+                    const { pointer, raycaster, camera, size } = store.get();
                     const x = event[(inputs.eventPrefix + 'X')];
                     const y = event[(inputs.eventPrefix + 'Y')];
-                    innerState.pointer.set((x / innerState.size.width) * 2 - 1, -(y / innerState.size.height) * 2 + 1);
-                    innerState.raycaster.setFromCamera(innerState.pointer, innerState.camera);
+                    pointer.set((x / size.width) * 2 - 1, -(y / size.height) * 2 + 1);
+                    raycaster.setFromCamera(pointer, camera);
                 },
             });
         }
@@ -2822,7 +2823,7 @@ class NgtCanvas {
         const originalDetectChanges = this.cdr.detectChanges.bind(this.cdr);
         this.cdr.detectChanges = () => {
             originalDetectChanges();
-            safeDetectChanges(this.glRef?.changeDetectorRef);
+            this.glRef && safeDetectChanges(this.glRef.changeDetectorRef);
         };
     }
     setSceneGraphInputs() {
@@ -2831,12 +2832,12 @@ class NgtCanvas {
                 for (const [key, value] of Object.entries(this.sceneGraphInputs)) {
                     this.glRef.setInput(key, value);
                 }
-                this.glRef.changeDetectorRef.detectChanges();
+                safeDetectChanges(this.glRef.changeDetectorRef);
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.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" }, host: { properties: { "style.pointerEvents": "hbPointerEvents()" }, styleAttribute: "display: block;position: relative;width: 100%;height: 100%;overflow: hidden;" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", 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" }, host: { properties: { "style.pointerEvents": "hbPointerEvents()" }, styleAttribute: "display: block;position: relative;width: 100%;height: 100%;overflow: hidden;" }, providers: [
             provideResizeOptions({ emitInZone: false, emitInitialResult: true }),
             provideNgtStore(),
         ], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
@@ -2845,7 +2846,7 @@ class NgtCanvas {
 		</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.2.3", ngImport: i0, type: NgtCanvas, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtCanvas, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-canvas',
@@ -2926,10 +2927,10 @@ class NgtKey extends NgtCommonDirective {
             this.createView();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtKey, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: NgtKey, isStandalone: true, selector: "ng-template[key]", inputs: { key: "key" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtKey, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: NgtKey, isStandalone: true, selector: "ng-template[key]", inputs: { key: "key" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtKey, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtKey, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[key]', standalone: true }]
         }], propDecorators: { key: [{
@@ -2937,12 +2938,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
             }] } });
 
 function injectNgtRef(initial = null, injector) {
-    injector = assertInjector(injectNgtRef, injector);
-    const ref = is.ref(initial) ? initial : new ElementRef(initial);
-    const refSignal = signal(ref.nativeElement);
-    const readonlyRef = refSignal.asReadonly();
-    const computedCached = new Map();
-    return runInInjectionContext(injector, () => {
+    return assertInjector(injectNgtRef, injector, () => {
+        const ref = is.ref(initial) ? initial : new ElementRef(initial);
+        const refSignal = signal(ref.nativeElement);
+        const readonlyRef = refSignal.asReadonly();
+        const computedCached = new Map();
         inject(DestroyRef).onDestroy(() => void computedCached.clear());
         const children = (type = 'objects') => {
             if (!computedCached.has(type)) {
@@ -2951,13 +2951,17 @@ function injectNgtRef(initial = null, injector) {
                     if (!instance)
                         return [];
                     const localState = getLocalState(instance);
-                    if (!localState.objects || !localState.nonObjects)
+                    if (!localState.instanceStore)
                         return [];
+                    const [objects, nonObjects] = [
+                        localState.instanceStore.select('objects'),
+                        localState.instanceStore.select('nonObjects'),
+                    ];
                     if (type === 'objects')
-                        return localState.objects();
+                        return objects();
                     if (type === 'nonObjects')
-                        return localState.nonObjects();
-                    return [...localState.objects(), ...localState.nonObjects()];
+                        return nonObjects();
+                    return [...objects(), ...nonObjects()];
                 }));
             }
             return computedCached.get(type);
@@ -2973,7 +2977,6 @@ function injectNgtRef(initial = null, injector) {
                 },
                 get: readonlyRef,
             },
-            untracked: { get: () => untracked(readonlyRef) },
             children: { get: () => children },
         });
         return ref;
@@ -2998,12 +3001,10 @@ class NgtPortalBeforeRender {
         this.portalStore = injectNgtStore();
         this.injector = inject(Injector);
         this.renderPriority = 1;
-        this.beforeRender = new EventEmitter();
     }
     ngOnInit() {
         let oldClear;
-        injectBeforeRender(({ delta, frame }) => {
-            this.beforeRender.emit({ ...this.portalStore.get(), delta, frame });
+        injectBeforeRender(() => {
             const { gl, scene, camera } = this.portalStore.get();
             oldClear = gl.autoClear;
             if (this.renderPriority === 1) {
@@ -3019,12 +3020,26 @@ class NgtPortalBeforeRender {
             gl.autoClear = oldClear;
         }, { priority: this.renderPriority, injector: this.injector });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: NgtPortalBeforeRender, isStandalone: true, selector: "[ngtPortalBeforeRender]", inputs: { renderPriority: "renderPriority", parentScene: "parentScene", parentCamera: "parentCamera" }, outputs: { beforeRender: "beforeRender" }, ngImport: i0 }); }
+    onPointerOver() {
+        /* noop */
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: NgtPortalBeforeRender, isStandalone: true, selector: "ngt-portal-before-render", inputs: { renderPriority: "renderPriority", parentScene: "parentScene", parentCamera: "parentCamera" }, ngImport: i0, template: `
+		<!-- Without an element that receives pointer events state.pointer will always be 0/0 -->
+		<ngt-group (pointerover)="onPointerOver()" />
+	`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
-            type: Directive,
-            args: [{ selector: '[ngtPortalBeforeRender]', standalone: true }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngt-portal-before-render',
+                    standalone: true,
+                    template: `
+		<!-- Without an element that receives pointer events state.pointer will always be 0/0 -->
+		<ngt-group (pointerover)="onPointerOver()" />
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
         }], propDecorators: { renderPriority: [{
                 type: Input
             }], parentScene: [{
@@ -3033,8 +3048,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
             }], parentCamera: [{
                 type: Input,
                 args: [{ required: true }]
-            }], beforeRender: [{
-                type: Output
             }] } });
 class NgtPortalContent {
     constructor(vcr, parentVcr) {
@@ -3044,10 +3057,10 @@ class NgtPortalContent {
             delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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.2.3", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", 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.2.9", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtPortalContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtPortalContent, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[ngtPortalContent]', standalone: true }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ViewContainerRef, decorators: [{
@@ -3064,7 +3077,6 @@ class NgtPortal {
         this.inputs = signalStore({ container: injectNgtRef(prepare(new THREE.Scene())) });
         this.autoRender = true;
         this.autoRenderPriority = 1;
-        this.beforeRender = new EventEmitter();
         this.parentStore = injectNgtStore({ skipSelf: true });
         this.parentScene = this.parentStore.get('scene');
         this.parentCamera = this.parentStore.get('camera');
@@ -3121,12 +3133,6 @@ class NgtPortal {
         safeDetectChanges(this.portalContentView);
         this.portalContentRendered = true;
     }
-    onBeforeRender(portal) {
-        this.beforeRender.emit({
-            root: { ...this.parentStore.get(), delta: portal.delta, frame: portal.frame },
-            portal,
-        });
-    }
     inject(rootState, injectState) {
         const intersect = { ...rootState };
         Object.keys(intersect).forEach((key) => {
@@ -3156,39 +3162,35 @@ class NgtPortal {
             ...restInputsState,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { container: "container", portalState: ["state", "portalState"], autoRender: "autoRender", autoRenderPriority: "autoRenderPriority" }, outputs: { beforeRender: "beforeRender" }, providers: [{ provide: NGT_STORE, useFactory: () => signalStore({}) }], 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 }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { container: "container", portalState: ["state", "portalState"], autoRender: "autoRender", autoRenderPriority: "autoRenderPriority" }, providers: [provideNgtStore(signalStore({}))], 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 }], ngImport: i0, template: `
 		<ng-container #portalContentAnchor>
-			<ng-container
+			<ngt-portal-before-render
 				*ngIf="autoRender && portalContentRendered"
-				ngtPortalBeforeRender
 				[renderPriority]="autoRenderPriority"
 				[parentScene]="parentScene"
 				[parentCamera]="parentCamera"
-				(beforeRender)="onBeforeRender($event)"
 			/>
 		</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"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtPortalBeforeRender, selector: "ngt-portal-before-render", inputs: ["renderPriority", "parentScene", "parentCamera"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtPortal, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-portal',
                     standalone: true,
                     template: `
 		<ng-container #portalContentAnchor>
-			<ng-container
+			<ngt-portal-before-render
 				*ngIf="autoRender && portalContentRendered"
-				ngtPortalBeforeRender
 				[renderPriority]="autoRenderPriority"
 				[parentScene]="parentScene"
 				[parentCamera]="parentCamera"
-				(beforeRender)="onBeforeRender($event)"
 			/>
 		</ng-container>
 	`,
                     imports: [NgIf, NgtPortalBeforeRender],
-                    providers: [{ provide: NGT_STORE, useFactory: () => signalStore({}) }],
+                    providers: [provideNgtStore(signalStore({}))],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { container: [{
                 type: Input
@@ -3199,8 +3201,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
                 type: Input
             }], autoRenderPriority: [{
                 type: Input
-            }], beforeRender: [{
-                type: Output
             }], portalContentTemplate: [{
                 type: ContentChild,
                 args: [NgtPortalContent, { read: TemplateRef, static: true }]
@@ -3218,12 +3218,12 @@ class NgtRoutedScene {
             .pipe(filter((event) => event instanceof ActivationEnd), takeUntilDestroyed())
             .subscribe(() => safeDetectChanges(cdr));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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.2.3", type: NgtRoutedScene, isStandalone: true, selector: "ngt-routed-scene", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", 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.2.9", 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.2.3", ngImport: i0, type: NgtRoutedScene, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NgtRoutedScene, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -3235,9 +3235,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1.Router }, { type: i0.ChangeDetectorRef }]; } });
 
+function createApiToken(forwardedObject) {
+    function apiFactory(obj) {
+        return obj.api;
+    }
+    const [injectFn, provideFn] = createInjectionToken(apiFactory, {
+        isRoot: false,
+        deps: [forwardRef(forwardedObject)],
+    });
+    return [injectFn, () => provideFn()];
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { HTML, NGT_STORE, NgtArgs, NgtCanvas, NgtKey, NgtParent, NgtPortal, NgtPortalContent, NgtRoutedScene, addAfterEffect, addEffect, addTail, applyProps, checkNeedsUpdate, checkUpdate, createAttachFunction, diffProps, extend, getLocalState, injectBeforeRender, injectNgtLoader, injectNgtRef, injectNgtStore, invalidateInstance, is, makeDefaultCamera, makeDefaultRenderer, makeDpr, makeId, makeObjectGraph, prepare, provideNgtRenderer, provideNgtStore, safeDetectChanges, signalStore, updateCamera };
+export { HTML, NGT_STORE, NgtArgs, NgtCanvas, NgtKey, NgtParent, NgtPortal, NgtPortalContent, NgtRoutedScene, addAfterEffect, addEffect, addTail, applyProps, checkNeedsUpdate, checkUpdate, createApiToken, createAttachFunction, diffProps, extend, getLocalState, injectBeforeRender, injectNgtLoader, injectNgtRef, injectNgtStore, invalidateInstance, is, makeDefaultCamera, makeDefaultRenderer, makeDpr, makeId, makeObjectGraph, prepare, provideNgtRenderer, provideNgtStore, safeDetectChanges, signalStore, updateCamera };
 //# sourceMappingURL=angular-three.mjs.map