angular-three 2.0.0-beta.223 → 2.0.0-beta.225

package/fesm2022/angular-three.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { untracked, computed, signal, ElementRef, inject, effect, InjectionToken, Optional, SkipSelf, ViewContainerRef, NgZone, TemplateRef, DestroyRef, Directive, Input, EventEmitter, getDebugNode, RendererFactory2, Injectable, Injector, provideZoneChangeDetection, makeEnvironmentProviders, EnvironmentInjector, afterNextRender, createEnvironmentInjector, Component, ChangeDetectionStrategy, Output, ViewChild, CUSTOM_ELEMENTS_SCHEMA, ContentChild, ChangeDetectorRef, forwardRef } from '@angular/core';
+import { untracked, computed, signal, ElementRef, inject, effect, InjectionToken, Optional, SkipSelf, ViewContainerRef, NgZone, TemplateRef, DestroyRef, Directive, input, getDebugNode, RendererFactory2, Injectable, Injector, makeEnvironmentProviders, provideZoneChangeDetection, EnvironmentInjector, EventEmitter, viewChild, afterNextRender, createEnvironmentInjector, Component, ChangeDetectionStrategy, Output, CUSTOM_ELEMENTS_SCHEMA, contentChild, forwardRef } from '@angular/core';
 import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { provideResizeOptions, NgxResize } from 'ngxtension/resize';
 import * as THREE from 'three';
 import { DOCUMENT } from '@angular/common';
 import { createInjectionToken } from 'ngxtension/create-injection-token';
-import { Subject, filter } from 'rxjs';
+import { Subject, ReplaySubject, filter } from 'rxjs';
 import { assertInjector } from 'ngxtension/assert-injector';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/router';
@@ -837,8 +837,9 @@ function applyProps(instance, props) {
                 if (rootState?.gl) {
                     if (is.colorSpaceExist(texture) && is.colorSpaceExist(rootState.gl))
                         texture.colorSpace = rootState.gl.outputColorSpace;
+                    // @ts-expect-error - these are removed in new version of three but still available in older versions
                     else
-                        texture.encoding = rootState.gl.outputEncoding;
+                        texture['encoding'] = rootState.gl['outputEncoding'];
                 }
             }
         }
@@ -858,7 +859,7 @@ function applyProps(instance, props) {
             rootState.internal.interaction.push(instance);
     }
     if (parent && localState?.afterUpdate && localState.afterUpdate.observed && changes.length) {
-        localState.afterUpdate.emit(instance);
+        localState.afterUpdate.next(instance);
     }
     return instance;
 }
@@ -933,8 +934,17 @@ function injectCanvasRootInitializer(injector) {
                         let camera = isCamera ? cameraOptions : makeCameraInstance(orthographic, state.size);
                         if (!isCamera) {
                             camera.position.z = 5;
-                            if (cameraOptions)
+                            if (cameraOptions) {
                                 applyProps(camera, cameraOptions);
+                                if ('aspect' in cameraOptions ||
+                                    'left' in cameraOptions ||
+                                    'right' in cameraOptions ||
+                                    'top' in cameraOptions ||
+                                    'bottom' in cameraOptions) {
+                                    Object.assign(camera, { manual: true });
+                                    camera?.updateProjectionMatrix();
+                                }
+                            }
                             // always look at center or passed-in lookAt by default
                             if (!state.camera && !cameraOptions?.rotation && !cameraOptions?.quaternion) {
                                 if (Array.isArray(lookAt))
@@ -1170,6 +1180,7 @@ function render(timestamp, store, frame) {
 }
 function createLoop(roots) {
     let running = false;
+    let injectBeforeRenderInProgress = false;
     let repeat;
     let frame;
     function loop(timestamp) {
@@ -1179,6 +1190,7 @@ function createLoop(roots) {
         // Run effects
         flushGlobalEffects('before', timestamp);
         // Render all roots
+        injectBeforeRenderInProgress = true;
         for (const root of roots.values()) {
             const state = root.snapshot;
             // If the frameloop is invalidated, do not run another frame
@@ -1188,6 +1200,7 @@ function createLoop(roots) {
                 repeat += render(timestamp, root);
             }
         }
+        injectBeforeRenderInProgress = false;
         // Run after-effects
         flushGlobalEffects('after', timestamp);
         // Stop the loop if nothing invalidates it
@@ -1205,8 +1218,21 @@ function createLoop(roots) {
             return roots.forEach((root) => invalidate(root, frames));
         if (state.gl.xr?.isPresenting || !state.internal.active || state.frameloop === 'never')
             return;
-        // Increase frames, do not go higher than 60
-        state.internal.frames = Math.min(60, state.internal.frames + frames);
+        if (frames > 1) {
+            // legacy support for people using frames parameters
+            // Increase frames, do not go higher than 60
+            state.internal.frames = Math.min(60, state.internal.frames + frames);
+        }
+        else {
+            if (injectBeforeRenderInProgress) {
+                // called from within a injectBeforeRender, it means the user wants an additional frame
+                state.internal.frames = 2;
+            }
+            else {
+                // the user needs a new frame, no need to increment
+                state.internal.frames = 1;
+            }
+        }
         // If the render-loop isn't active, start it
         if (!running) {
             running = true;
@@ -1469,26 +1495,28 @@ class NgtCommonDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: NgtCommonDirective, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: NgtCommonDirective, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NgtCommonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NgtCommonDirective, decorators: [{
             type: Directive
         }], ctorParameters: () => [] });
 
 class NgtArgs extends NgtCommonDirective {
     constructor() {
-        super(...arguments);
+        super();
+        this.args = input(null);
         this.injectedArgs = [];
+        effect(() => {
+            const args = this.args();
+            if (args == null || !Array.isArray(args) || (args.length === 1 && args[0] === null))
+                return;
+            this.injected = false;
+            this.injectedArgs = args;
+            this.createView();
+        });
     }
-    set args(args) {
-        if (args == null || !Array.isArray(args) || (args.length === 1 && args[0] === null))
-            return;
-        this.injected = false;
-        this.injectedArgs = args;
-        this.createView();
-    }
-    get args() {
+    get value() {
         if (this.validate()) {
             this.injected = true;
             return this.injectedArgs;
@@ -1498,29 +1526,29 @@ class NgtArgs extends NgtCommonDirective {
     validate() {
         return !this.injected && !!this.injectedArgs.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: NgtArgs, isStandalone: true, selector: "ng-template[args]", inputs: { args: "args" }, providers: [provideNodeType('args')], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NgtArgs, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.9", type: NgtArgs, isStandalone: true, selector: "ng-template[args]", inputs: { args: { classPropertyName: "args", publicName: "args", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideNodeType('args')], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NgtArgs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NgtArgs, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[args]', standalone: true, providers: [provideNodeType('args')] }]
-        }], propDecorators: { args: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 class NgtParent extends NgtCommonDirective {
     constructor() {
-        super(...arguments);
+        super();
+        this.parent = input.required();
         this.injectedParent = null;
+        effect(() => {
+            const parent = this.parent();
+            if (!parent)
+                return;
+            this.injected = false;
+            this.injectedParent = parent;
+            this.createView();
+        });
     }
-    set parent(parent) {
-        if (!parent)
-            return;
-        this.injected = false;
-        this.injectedParent = parent;
-        this.createView();
-    }
-    get parent() {
+    get value() {
         if (this.validate()) {
             this.injected = true;
             return this.injectedParent;
@@ -1530,15 +1558,13 @@ class NgtParent extends NgtCommonDirective {
     validate() {
         return !this.injected && !!this.injectedParent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: NgtParent, isStandalone: true, selector: "ng-template[parent]", inputs: { parent: "parent" }, providers: [provideNodeType('parent')], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NgtParent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.9", type: NgtParent, isStandalone: true, selector: "ng-template[parent]", inputs: { parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, providers: [provideNodeType('parent')], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NgtParent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NgtParent, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[parent]', standalone: true, providers: [provideNodeType('parent')] }]
-        }], propDecorators: { parent: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 function attach(object, value, paths = []) {
     const [base, ...remaining] = paths;
@@ -1670,7 +1696,7 @@ function attachThreeChild(parent, child) {
         cLS.setParent(parent);
     }
     if (cLS.afterAttach)
-        cLS.afterAttach.emit({ parent, node: child });
+        cLS.afterAttach.next({ parent, node: child });
     invalidateInstance(child);
     invalidateInstance(parent);
 }
@@ -1720,9 +1746,19 @@ function processThreeEvent(instance, priority, eventName, callback) {
     if (eventName === SPECIAL_EVENTS.AFTER_UPDATE || eventName === SPECIAL_EVENTS.AFTER_ATTACH) {
         let emitter = lS[eventName];
         if (!emitter)
-            emitter = lS[eventName] = new EventEmitter();
+            emitter = lS[eventName] = new ReplaySubject(1);
         const sub = emitter.subscribe(callback);
-        return sub.unsubscribe.bind(sub);
+        // NOTE: for afterAttach event, if the instance already has a parent,
+        //  then we'll emit the event immediately
+        if (eventName === SPECIAL_EVENTS.AFTER_ATTACH && untracked(lS.parent)) {
+            emitter.next({ parent: untracked(lS.parent), node: instance });
+        }
+        return () => {
+            sub.unsubscribe();
+            if (emitter && !emitter.observed) {
+                emitter.complete();
+            }
+        };
     }
     if (!lS.handlers)
         lS.handlers = {};
@@ -1872,8 +1908,8 @@ class NgtRendererStore {
     }
     getCreationState() {
         return [
-            this.firstNonInjectedDirective('argsCommentNodes', NgtArgs)?.args || [],
-            this.firstNonInjectedDirective('parentCommentNodes', NgtParent)?.parent || null,
+            this.firstNonInjectedDirective('argsCommentNodes', NgtArgs)?.value || [],
+            this.firstNonInjectedDirective('parentCommentNodes', NgtParent)?.value || null,
             this.tryGetPortalStore(),
         ];
     }
@@ -2009,6 +2045,12 @@ class NgtRendererStore {
             value = compound[NgtCompoundClassId.props][name];
         }
         applyProps(node, { [name]: value });
+        // NOTE: special case for Geometry and Material
+        if (value && (name === 'geometry' || name === 'material')) {
+            const childLS = getLocalState(value);
+            childLS?.setParent(node);
+            localState?.add(value, 'nonObjects');
+        }
         this.updateNativeProps(node, name, value);
     }
     get rootScene() {
@@ -2195,10 +2237,10 @@ class NgtRendererFactory {
         }
         return renderer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NgtRendererFactory }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NgtRendererFactory }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NgtRendererFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NgtRendererFactory, decorators: [{
             type: Injectable
         }] });
 class NgtRenderer {
@@ -2566,24 +2608,18 @@ function provideNgtRenderer(store, compoundPrefixes) {
 }
 
 class NgtCanvas {
-    set _sceneGraphInputs(value) {
-        this.sceneGraphInputs.set(value);
-    }
-    set _canvasInputs(value) {
-        this.canvasInputs.update(value);
-    }
     constructor() {
         this.store = injectNgtStore();
         this.initRoot = injectCanvasRootInitializer();
         this.autoEffect = injectAutoEffect();
         this.host = inject(ElementRef);
-        this.viewContainerRef = inject(ViewContainerRef);
         this.zone = inject(NgZone);
         this.environmentInjector = inject(EnvironmentInjector);
         this.injector = inject(Injector);
-        this.compoundPrefixes = [];
-        this.sceneGraphInputs = signal({}, { equal: Object.is });
-        this.canvasInputs = signalStore({
+        this.sceneGraph = input.required();
+        this.compoundPrefixes = input([]);
+        this.sceneGraphInputs = input({});
+        this.options = input({
             shadows: false,
             linear: false,
             flat: false,
@@ -2594,13 +2630,15 @@ class NgtCanvas {
             events: createPointerEvents,
         });
         this.created = new EventEmitter();
+        this.glCanvas = viewChild.required('glCanvas');
+        this.glCanvasViewContainerRef = viewChild.required('glCanvas', { read: ViewContainerRef });
         // NOTE: this signal is updated outside of Zone
         this.resizeResult = signal({}, { equal: Object.is });
-        this.eventSource = this.canvasInputs.select('eventSource');
+        this.eventSource = computed(() => this.options().eventSource);
         this.hbPointerEvents = computed(() => (this.eventSource() ? 'none' : 'auto'));
         afterNextRender(() => {
             this.zone.runOutsideAngular(() => {
-                this.configurator = this.initRoot(this.glCanvas.nativeElement);
+                this.configurator = this.initRoot(this.glCanvas().nativeElement);
                 this.noZoneResizeEffect();
                 this.noZoneSceneGraphInputsEffect();
             });
@@ -2616,8 +2654,8 @@ class NgtCanvas {
             const resizeResult = this.resizeResult();
             if (resizeResult.width > 0 && resizeResult.height > 0) {
                 if (!this.configurator)
-                    this.configurator = this.initRoot(this.glCanvas.nativeElement);
-                this.configurator.configure({ ...this.canvasInputs.state(), size: resizeResult });
+                    this.configurator = this.initRoot(this.glCanvas().nativeElement);
+                this.configurator.configure({ ...this.options(), size: resizeResult });
                 untracked(() => {
                     if (this.glRef) {
                         this.glRef.changeDetectorRef.detectChanges();
@@ -2635,7 +2673,7 @@ class NgtCanvas {
         this.glRef?.destroy();
         // NOTE: Flag the canvas active, rendering will now begin
         this.store.update((state) => ({ internal: { ...state.internal, active: true } }));
-        const [inputs, state] = [this.canvasInputs.snapshot, this.store.snapshot];
+        const [inputs, state] = [untracked(this.options), this.store.snapshot];
         // connect to event source
         state.events.connect?.(inputs.eventSource
             ? is.ref(inputs.eventSource)
@@ -2659,10 +2697,10 @@ class NgtCanvas {
             this.created.emit(this.store.snapshot);
         }
         if (!this.store.get('events', 'connected')) {
-            this.store.get('events').connect?.(this.glCanvas.nativeElement);
+            this.store.get('events').connect?.(this.glCanvas().nativeElement);
         }
-        this.glEnvironmentInjector = createEnvironmentInjector([provideNgtRenderer(this.store, this.compoundPrefixes)], this.environmentInjector);
-        this.glRef = this.viewContainerRef.createComponent(this.sceneGraph, {
+        this.glEnvironmentInjector = createEnvironmentInjector([provideNgtRenderer(this.store, untracked(this.compoundPrefixes))], this.environmentInjector);
+        this.glRef = untracked(this.glCanvasViewContainerRef).createComponent(untracked(this.sceneGraph), {
             environmentInjector: this.glEnvironmentInjector,
             injector: this.injector,
         });
@@ -2681,17 +2719,17 @@ class NgtCanvas {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: "sceneGraph", compoundPrefixes: "compoundPrefixes", _sceneGraphInputs: ["sceneGraphInputs", "_sceneGraphInputs"], _canvasInputs: ["options", "_canvasInputs"] }, 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: "17.3.9", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.9", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: { classPropertyName: "sceneGraph", publicName: "sceneGraph", isSignal: true, isRequired: true, transformFunction: null }, compoundPrefixes: { classPropertyName: "compoundPrefixes", publicName: "compoundPrefixes", isSignal: true, isRequired: false, transformFunction: null }, sceneGraphInputs: { classPropertyName: "sceneGraphInputs", publicName: "sceneGraphInputs", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, 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, debounce: 250 }),
             provideNgtStore(),
-        ], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, static: true }], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, isSignal: true }, { propertyName: "glCanvasViewContainerRef", first: true, predicate: ["glCanvas"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
 		<div (ngxResize)="resizeResult.set($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: "17.2.1", ngImport: i0, type: NgtCanvas, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NgtCanvas, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-canvas',
@@ -2712,22 +2750,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [], propDecorators: { sceneGraph: [{
-                type: Input,
-                args: [{ required: true }]
-            }], compoundPrefixes: [{
-                type: Input
-            }], _sceneGraphInputs: [{
-                type: Input,
-                args: [{ alias: 'sceneGraphInputs' }]
-            }], _canvasInputs: [{
-                type: Input,
-                args: [{ alias: 'options' }]
-            }], created: [{
+        }], ctorParameters: () => [], propDecorators: { created: [{
                 type: Output
-            }], glCanvas: [{
-                type: ViewChild,
-                args: ['glCanvas', { static: true }]
             }] } });
 
 const cached = new Map();
@@ -2874,16 +2898,18 @@ class NgtPortalBeforeRender {
     constructor() {
         this.portalStore = injectNgtStore();
         this.injector = inject(Injector);
-        this.renderPriority = 1;
+        this.renderPriority = input(1);
+        this.parentScene = input.required();
+        this.parentCamera = input.required();
         afterNextRender(() => {
             let oldClear;
             injectBeforeRender(() => {
                 const { gl, scene, camera } = this.portalStore.get();
                 oldClear = gl.autoClear;
-                if (this.renderPriority === 1) {
+                if (this.renderPriority() === 1) {
                     // clear scene and render with default
                     gl.autoClear = true;
-                    gl.render(this.parentScene, this.parentCamera);
+                    gl.render(this.parentScene(), this.parentCamera());
                 }
                 // disable cleaning
                 gl.autoClear = false;
@@ -2891,19 +2917,19 @@ class NgtPortalBeforeRender {
                 gl.render(scene, camera);
                 // restore
                 gl.autoClear = oldClear;
-            }, { priority: this.renderPriority, injector: this.injector });
+            }, { priority: this.renderPriority(), injector: this.injector });
         });
     }
     onPointerOver() {
         /* noop */
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: NgtPortalBeforeRender, isStandalone: true, selector: "ngt-portal-before-render", inputs: { renderPriority: "renderPriority", parentScene: "parentScene", parentCamera: "parentCamera" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.9", type: NgtPortalBeforeRender, isStandalone: true, selector: "ngt-portal-before-render", inputs: { renderPriority: { classPropertyName: "renderPriority", publicName: "renderPriority", isSignal: true, isRequired: false, transformFunction: null }, parentScene: { classPropertyName: "parentScene", publicName: "parentScene", isSignal: true, isRequired: true, transformFunction: null }, parentCamera: { classPropertyName: "parentCamera", publicName: "parentCamera", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
 		<!-- Without an element that receives pointer events state.pointer will always be 0/0 -->
 		<ngt-group (pointerover)="onPointerOver()" attach="none" />
 	`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-portal-before-render',
@@ -2914,15 +2940,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
 	`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], ctorParameters: () => [], propDecorators: { renderPriority: [{
-                type: Input
-            }], parentScene: [{
-                type: Input,
-                args: [{ required: true }]
-            }], parentCamera: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
+        }], ctorParameters: () => [] });
 class NgtPortalContent {
     constructor(vcr, parentVcr) {
         const commentNode = vcr.element.nativeElement;
@@ -2931,28 +2949,24 @@ class NgtPortalContent {
             delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", 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: "17.2.1", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.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: "17.3.9", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NgtPortalContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NgtPortalContent, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[ngtPortalContent]', standalone: true }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ViewContainerRef, decorators: [{
                     type: SkipSelf
                 }] }] });
 class NgtPortal {
-    set _portalInputs(value) {
-        this.portalInputs.update(value);
-    }
-    set _autoRender(value) {
-        this.autoRender.set(value);
-    }
     constructor() {
-        this.portalInputs = signalStore({
+        this.options = input({
             container: injectNgtRef(prepare(new THREE.Scene())),
         });
-        this.autoRender = signal(false);
-        this.autoRenderPriority = 1;
+        this.autoRender = input(false);
+        this.autoRenderPriority = input(1);
+        this.portalContentTemplate = contentChild.required(NgtPortalContent, { read: TemplateRef });
+        this.portalContentAnchor = viewChild.required('portalContentAnchor', { read: ViewContainerRef });
         this.destroyRef = inject(DestroyRef);
         this.autoEffect = injectAutoEffect();
         this.parentStore = injectNgtStore({ skipSelf: true });
@@ -2963,7 +2977,7 @@ class NgtPortal {
         this.parentCamera = this.parentStore.get('camera');
         afterNextRender(() => {
             const parentState = this.parentStore.snapshot;
-            const { container, state: { events = {}, size = {}, ...rest }, } = this.portalInputs.snapshot;
+            const { container, state: { events = {}, size = {}, ...rest } = {} } = untracked(this.options);
             this.portalStore.update({
                 scene: (is.ref(container) ? container.nativeElement : container),
                 events: { ...parentState.events, ...events },
@@ -2975,7 +2989,7 @@ class NgtPortal {
                 this.portalStore.update((state) => this.inject(previous, state));
             });
             untracked(() => {
-                const portalView = this.portalContentAnchor.createEmbeddedView(this.portalContentTemplate);
+                const portalView = this.portalContentAnchor().createEmbeddedView(this.portalContentTemplate());
                 portalView.detectChanges();
                 this.destroyRef.onDestroy(portalView.destroy.bind(portalView));
             });
@@ -2990,7 +3004,7 @@ class NgtPortal {
                 delete intersect[key];
             }
         });
-        const inputs = this.portalInputs.snapshot;
+        const inputs = untracked(this.options);
         const { size, events, ...restInputsState } = inputs.state || {};
         let viewport = undefined;
         if (injectState && size) {
@@ -3009,12 +3023,12 @@ class NgtPortal {
             ...restInputsState,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { _portalInputs: ["options", "_portalInputs"], _autoRender: ["autoRender", "_autoRender"], autoRenderPriority: "autoRenderPriority" }, providers: [providePortalStore()], 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: "17.3.9", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, autoRender: { classPropertyName: "autoRender", publicName: "autoRender", isSignal: true, isRequired: false, transformFunction: null }, autoRenderPriority: { classPropertyName: "autoRenderPriority", publicName: "autoRenderPriority", isSignal: true, isRequired: false, transformFunction: null } }, providers: [providePortalStore()], queries: [{ propertyName: "portalContentTemplate", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "portalContentAnchor", first: true, predicate: ["portalContentAnchor"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
 		<ng-container #portalContentAnchor>
 			@if (renderAutoBeforeRender()) {
 				<ngt-portal-before-render
-					[renderPriority]="autoRenderPriority"
+					[renderPriority]="autoRenderPriority()"
 					[parentScene]="parentScene"
 					[parentCamera]="parentCamera"
 				/>
@@ -3022,7 +3036,7 @@ class NgtPortal {
 		</ng-container>
 	`, isInline: true, dependencies: [{ kind: "component", type: NgtPortalBeforeRender, selector: "ngt-portal-before-render", inputs: ["renderPriority", "parentScene", "parentCamera"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NgtPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NgtPortal, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-portal',
@@ -3031,7 +3045,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
 		<ng-container #portalContentAnchor>
 			@if (renderAutoBeforeRender()) {
 				<ngt-portal-before-render
-					[renderPriority]="autoRenderPriority"
+					[renderPriority]="autoRenderPriority()"
 					[parentScene]="parentScene"
 					[parentCamera]="parentCamera"
 				/>
@@ -3042,21 +3056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                     providers: [providePortalStore()],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [], propDecorators: { _portalInputs: [{
-                type: Input,
-                args: [{ alias: 'options' }]
-            }], _autoRender: [{
-                type: Input,
-                args: [{ alias: 'autoRender' }]
-            }], autoRenderPriority: [{
-                type: Input
-            }], portalContentTemplate: [{
-                type: ContentChild,
-                args: [NgtPortalContent, { read: TemplateRef, static: true }]
-            }], portalContentAnchor: [{
-                type: ViewChild,
-                args: ['portalContentAnchor', { read: ViewContainerRef, static: true }]
-            }] } });
+        }], ctorParameters: () => [] });
 
 var _a;
 class NgtRoutedScene {
@@ -3067,12 +3067,12 @@ class NgtRoutedScene {
             .pipe(filter((event) => event instanceof ActivationEnd), takeUntilDestroyed())
             .subscribe(cdr.detectChanges.bind(cdr));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", 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: "17.2.1", type: NgtRoutedScene, isStandalone: true, selector: "ngt-routed-scene", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.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: "17.3.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: "17.2.1", ngImport: i0, type: NgtRoutedScene, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NgtRoutedScene, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -3084,28 +3084,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1.Router }, { type: i0.ChangeDetectorRef }] });
 
-// TODO: use scheduler instead of force CD
-function cdAwareSignal(initialValue, { injector, ...options } = {}) {
-    return assertInjector(cdAwareSignal, injector, () => {
-        if (!options.equal) {
-            options.equal = Object.is;
-        }
-        const cdr = inject(ChangeDetectorRef);
-        const source = signal(initialValue, options);
-        const originalSet = source.set.bind(source);
-        const originalUpdate = source.update.bind(source);
-        source.set = (...args) => {
-            originalSet(...args);
-            cdr.detectChanges();
-        };
-        source.update = (...args) => {
-            originalUpdate(...args);
-            cdr.detectChanges();
-        };
-        return source;
-    });
-}
-
 function apiFactory(obj) {
     return obj.api;
 }
@@ -3121,5 +3099,5 @@ function createApiToken(forwardedObject) {
  * Generated bundle index. Do not edit.
  */
 
-export { HTML, NGT_STORE, NgtArgs, NgtCanvas, NgtPortal, NgtPortalContent, NgtRenderer, NgtRendererFactory, NgtRoutedScene, ROUTED_SCENE, addAfterEffect, addEffect, addTail, applyProps, cdAwareSignal, checkNeedsUpdate, checkUpdate, createApiToken, createAttachFunction, extend, getLocalState, injectBeforeRender, injectNgtLoader, injectNgtRef, injectNgtStore, invalidateInstance, is, makeCameraInstance, makeDpr, makeId, makeObjectGraph, makeRendererInstance, prepare, provideNgtRenderer, provideNgtStore, signalStore, updateCamera };
+export { HTML, NGT_STORE, NgtArgs, NgtCanvas, NgtPortal, NgtPortalContent, NgtRenderer, NgtRendererFactory, NgtRoutedScene, ROUTED_SCENE, addAfterEffect, addEffect, addTail, applyProps, checkNeedsUpdate, checkUpdate, createApiToken, createAttachFunction, extend, getLocalState, injectBeforeRender, injectNgtLoader, injectNgtRef, injectNgtStore, invalidateInstance, is, makeCameraInstance, makeDpr, makeId, makeObjectGraph, makeRendererInstance, prepare, provideNgtRenderer, provideNgtStore, signalStore, updateCamera };
 //# sourceMappingURL=angular-three.mjs.map