angular-three 2.2.0 → 2.2.1

package/fesm2022/angular-three.mjs

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-import { untracked, computed, signal, ElementRef, input, inject, ViewContainerRef, NgZone, TemplateRef, afterNextRender, DestroyRef, Directive, effect, InjectionToken, DebugNode, RendererFactory2, Injectable, makeEnvironmentProviders, Component, EnvironmentInjector, Injector, booleanAttribute, output, viewChild, createEnvironmentInjector, ChangeDetectionStrategy, Pipe, CUSTOM_ELEMENTS_SCHEMA, contentChild, model, Renderer2 } from '@angular/core';
+import { untracked, computed, signal, ElementRef, input, inject, ViewContainerRef, TemplateRef, effect, DestroyRef, Directive, InjectionToken, DebugNode, RendererFactory2, Injectable, makeEnvironmentProviders, Component, NgZone, EnvironmentInjector, Injector, booleanAttribute, output, viewChild, afterNextRender, createEnvironmentInjector, ChangeDetectionStrategy, Pipe, CUSTOM_ELEMENTS_SCHEMA, contentChild, model, Renderer2 } from '@angular/core';
 import { takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
-import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { provideResizeOptions, NgxResize } from 'ngxtension/resize';
 import { MathUtils, WebGLRenderer, OrthographicCamera, PerspectiveCamera, Vector3, Vector2, Clock, Layers, Color, ColorManagement, Texture, RGBAFormat, UnsignedByteType, EventDispatcher, Raycaster, Scene, PCFSoftShadowMap, BasicShadowMap, PCFShadowMap, VSMShadowMap, NoToneMapping, ACESFilmicToneMapping, Vector4 } from 'three';
 import { DOCUMENT } from '@angular/common';
@@ -211,7 +210,14 @@ function prepare(object, localState) {
             parent: null,
             objects: [],
             nonObjects: [],
+            geometryStamp: Date.now(),
         }), ...rest } = localState || {};
+        const nonObjects = instanceStore.select('nonObjects');
+        const geometryStamp = instanceStore.select('geometryStamp');
+        const nonObjectsChanged = computed(() => {
+            const [_nonObjects] = [nonObjects(), geometryStamp()];
+            return _nonObjects;
+        });
         instance.__ngt__ = {
             previousAttach: null,
             store: null,
@@ -221,7 +227,7 @@ function prepare(object, localState) {
             instanceStore,
             parent: instanceStore.select('parent'),
             objects: instanceStore.select('objects'),
-            nonObjects: instanceStore.select('nonObjects'),
+            nonObjects: nonObjectsChanged,
             add(object, type) {
                 const current = instance.__ngt__.instanceStore.snapshot[type];
                 const foundIndex = current.indexOf((node) => object === node);
@@ -241,6 +247,9 @@ function prepare(object, localState) {
             setParent(parent) {
                 instance.__ngt__.instanceStore.update({ parent });
             },
+            updateGeometryStamp() {
+                instance.__ngt__.instanceStore.update({ geometryStamp: Date.now() });
+            },
             ...rest,
         };
     }
@@ -763,9 +772,7 @@ class NgtArgs {
     constructor() {
         this.args = input.required();
         this.vcr = inject(ViewContainerRef);
-        this.zone = inject(NgZone);
         this.template = inject(TemplateRef);
-        this.autoEffect = injectAutoEffect();
         this.injected = false;
         this.injectedArgs = null;
         const commentNode = this.vcr.element.nativeElement;
@@ -773,16 +780,14 @@ class NgtArgs {
             commentNode[SPECIAL_INTERNAL_ADD_COMMENT]('args');
             delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
         }
-        afterNextRender(() => {
-            this.autoEffect(() => {
-                const value = this.args();
-                if (value == null || !Array.isArray(value) || (value.length === 1 && value[0] === null))
-                    return;
-                this.injected = false;
-                this.injectedArgs = value;
-                untracked(() => {
-                    this.createView();
-                });
+        effect(() => {
+            const value = this.args();
+            if (value == null || !Array.isArray(value) || (value.length === 1 && value[0] === null))
+                return;
+            this.injected = false;
+            this.injectedArgs = value;
+            untracked(() => {
+                this.createView();
             });
         });
         inject(DestroyRef).onDestroy(() => {
@@ -800,18 +805,15 @@ class NgtArgs {
         return !this.injected && !!this.injectedArgs?.length;
     }
     createView() {
-        this.zone.runOutsideAngular(() => {
-            if (this.view && !this.view.destroyed) {
-                this.view.destroy();
-            }
-            this.view = this.vcr.createEmbeddedView(this.template);
-            this.view.detectChanges();
-        });
+        if (this.view && !this.view.destroyed)
+            this.view.destroy();
+        this.view = this.vcr.createEmbeddedView(this.template);
+        this.view.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtArgs, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgtArgs, isStandalone: true, selector: "ng-template[args]", inputs: { args: { classPropertyName: "args", publicName: "args", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtArgs, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", type: NgtArgs, isStandalone: true, selector: "ng-template[args]", inputs: { args: { classPropertyName: "args", publicName: "args", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtArgs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtArgs, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[args]', standalone: true }]
         }], ctorParameters: () => [] });
@@ -1447,7 +1449,9 @@ function attachThreeChild(parent, child) {
         parent.add(child);
         added = true;
     }
-    pLS.add(child, added ? 'objects' : 'nonObjects');
+    if (pLS.add) {
+        pLS.add(child, added ? 'objects' : 'nonObjects');
+    }
     if (cLS.parent && untracked(cLS.parent) !== parent) {
         cLS.setParent(parent);
     }
@@ -1598,10 +1602,10 @@ class NgtRendererFactory {
         }
         return renderer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtRendererFactory }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtRendererFactory }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtRendererFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtRendererFactory, decorators: [{
             type: Injectable
         }] });
 class NgtRenderer {
@@ -1901,6 +1905,7 @@ class NgtRenderer {
         const rS = el.__ngt_renderer__;
         if (!rS || rS[3 /* NgtRendererClassId.destroyed */])
             return;
+        const localState = getLocalState(el);
         if (rS[0 /* NgtRendererClassId.type */] === 'three') {
             if (name === SPECIAL_PROPERTIES.PARAMETERS) {
                 // NOTE: short-cut for null raycast to prevent upstream from creating a nullRaycast property
@@ -1908,9 +1913,11 @@ class NgtRenderer {
                     value['raycast'] = () => null;
                 }
                 applyProps(el, value);
+                if ('geometry' in value && value['geometry'].isBufferGeometry) {
+                    localState?.updateGeometryStamp();
+                }
                 return;
             }
-            const localState = getLocalState(el);
             const parent = localState?.instanceStore.get('parent') || rS[1 /* NgtRendererClassId.parent */];
             // [rawValue]
             if (localState?.isRaw && name === SPECIAL_PROPERTIES.RAW_VALUE) {
@@ -1938,6 +1945,9 @@ class NgtRenderer {
                 value = () => null;
             }
             applyProps(el, { [name]: value });
+            if (name === 'geometry' && value.isBufferGeometry) {
+                localState?.updateGeometryStamp();
+            }
             return;
         }
         return this.delegate.setProperty(el, name, value);
@@ -2374,12 +2384,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: "18.2.0", ngImport: i0, type: NgtRoutedScene, deps: [{ token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: NgtRoutedScene, isStandalone: true, selector: "ngt-routed-scene", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", 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: "18.2.4", 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: "18.2.0", ngImport: i0, type: NgtRoutedScene, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtRoutedScene, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -2395,7 +2405,6 @@ class NgtCanvas {
     constructor() {
         this.store = injectStore();
         this.initRoot = injectCanvasRootInitializer();
-        this.autoEffect = injectAutoEffect();
         this.host = inject(ElementRef);
         this.zone = inject(NgZone);
         this.environmentInjector = inject(EnvironmentInjector);
@@ -2440,7 +2449,9 @@ class NgtCanvas {
         afterNextRender(() => {
             this.zone.runOutsideAngular(() => {
                 this.configurator = this.initRoot(this.glCanvas().nativeElement);
-                this.noZoneResizeEffect();
+                effect(() => {
+                    this.noZoneResizeEffect();
+                }, { injector: this.injector });
             });
         });
         inject(DestroyRef).onDestroy(() => {
@@ -2450,40 +2461,38 @@ class NgtCanvas {
         });
     }
     noZoneResizeEffect() {
-        this.autoEffect(() => {
-            const resizeResult = this.resizeResult();
-            if (resizeResult.width > 0 && resizeResult.height > 0) {
-                if (!this.configurator)
-                    this.configurator = this.initRoot(this.glCanvas().nativeElement);
-                this.configurator.configure({
-                    gl: this.gl(),
-                    shadows: this.shadows(),
-                    legacy: this.legacy(),
-                    linear: this.linear(),
-                    flat: this.flat(),
-                    orthographic: this.orthographic(),
-                    frameloop: this.frameloop(),
-                    performance: this.performance(),
-                    dpr: this.dpr(),
-                    raycaster: this.raycaster(),
-                    scene: this.scene(),
-                    camera: this.camera(),
-                    events: this.events(),
-                    eventSource: this.eventSource(),
-                    eventPrefix: this.eventPrefix(),
-                    lookAt: this.lookAt(),
-                    size: resizeResult,
-                });
-                untracked(() => {
-                    if (this.glRef) {
-                        this.glRef.changeDetectorRef.detectChanges();
-                    }
-                    else {
-                        this.noZoneRender();
-                    }
-                });
-            }
-        });
+        const resizeResult = this.resizeResult();
+        if (resizeResult.width > 0 && resizeResult.height > 0) {
+            if (!this.configurator)
+                this.configurator = this.initRoot(this.glCanvas().nativeElement);
+            this.configurator.configure({
+                gl: this.gl(),
+                shadows: this.shadows(),
+                legacy: this.legacy(),
+                linear: this.linear(),
+                flat: this.flat(),
+                orthographic: this.orthographic(),
+                frameloop: this.frameloop(),
+                performance: this.performance(),
+                dpr: this.dpr(),
+                raycaster: this.raycaster(),
+                scene: this.scene(),
+                camera: this.camera(),
+                events: this.events(),
+                eventSource: this.eventSource(),
+                eventPrefix: this.eventPrefix(),
+                lookAt: this.lookAt(),
+                size: resizeResult,
+            });
+            untracked(() => {
+                if (this.glRef) {
+                    this.glRef.changeDetectorRef.detectChanges();
+                }
+                else {
+                    this.noZoneRender();
+                }
+            });
+        }
     }
     noZoneRender() {
         // NOTE: destroy previous instances if existed
@@ -2522,8 +2531,8 @@ class NgtCanvas {
         });
         this.glRef.changeDetectorRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: { classPropertyName: "sceneGraph", publicName: "sceneGraph", isSignal: true, isRequired: true, transformFunction: null }, gl: { classPropertyName: "gl", publicName: "gl", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shadows: { classPropertyName: "shadows", publicName: "shadows", isSignal: true, isRequired: false, transformFunction: null }, legacy: { classPropertyName: "legacy", publicName: "legacy", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, orthographic: { classPropertyName: "orthographic", publicName: "orthographic", isSignal: true, isRequired: false, transformFunction: null }, frameloop: { classPropertyName: "frameloop", publicName: "frameloop", isSignal: true, isRequired: false, transformFunction: null }, performance: { classPropertyName: "performance", publicName: "performance", isSignal: true, isRequired: false, transformFunction: null }, dpr: { classPropertyName: "dpr", publicName: "dpr", isSignal: true, isRequired: false, transformFunction: null }, raycaster: { classPropertyName: "raycaster", publicName: "raycaster", isSignal: true, isRequired: false, transformFunction: null }, scene: { classPropertyName: "scene", publicName: "scene", isSignal: true, isRequired: false, transformFunction: null }, camera: { classPropertyName: "camera", publicName: "camera", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, eventSource: { classPropertyName: "eventSource", publicName: "eventSource", isSignal: true, isRequired: false, transformFunction: null }, eventPrefix: { classPropertyName: "eventPrefix", publicName: "eventPrefix", isSignal: true, isRequired: false, transformFunction: null }, lookAt: { classPropertyName: "lookAt", publicName: "lookAt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { created: "created", pointerMissed: "pointerMissed" }, 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: "18.2.4", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: { classPropertyName: "sceneGraph", publicName: "sceneGraph", isSignal: true, isRequired: true, transformFunction: null }, gl: { classPropertyName: "gl", publicName: "gl", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shadows: { classPropertyName: "shadows", publicName: "shadows", isSignal: true, isRequired: false, transformFunction: null }, legacy: { classPropertyName: "legacy", publicName: "legacy", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, orthographic: { classPropertyName: "orthographic", publicName: "orthographic", isSignal: true, isRequired: false, transformFunction: null }, frameloop: { classPropertyName: "frameloop", publicName: "frameloop", isSignal: true, isRequired: false, transformFunction: null }, performance: { classPropertyName: "performance", publicName: "performance", isSignal: true, isRequired: false, transformFunction: null }, dpr: { classPropertyName: "dpr", publicName: "dpr", isSignal: true, isRequired: false, transformFunction: null }, raycaster: { classPropertyName: "raycaster", publicName: "raycaster", isSignal: true, isRequired: false, transformFunction: null }, scene: { classPropertyName: "scene", publicName: "scene", isSignal: true, isRequired: false, transformFunction: null }, camera: { classPropertyName: "camera", publicName: "camera", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, eventSource: { classPropertyName: "eventSource", publicName: "eventSource", isSignal: true, isRequired: false, transformFunction: null }, eventPrefix: { classPropertyName: "eventPrefix", publicName: "eventPrefix", isSignal: true, isRequired: false, transformFunction: null }, lookAt: { classPropertyName: "lookAt", publicName: "lookAt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { properties: { "style.pointerEvents": "hbPointerEvents()" }, styleAttribute: "display: block;position: relative;width: 100%;height: 100%;overflow: hidden;" }, providers: [
             provideResizeOptions({
                 emitInZone: false,
                 emitInitialResult: true,
@@ -2536,7 +2545,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: "18.2.0", ngImport: i0, type: NgtCanvas, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtCanvas, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-canvas',
@@ -2568,12 +2577,16 @@ class NgtSelection {
         this.enabled = input(true, { alias: 'ngtSelection', transform: booleanAttribute });
         this.source = signal([]);
         this.selected = this.source.asReadonly();
-        this.update = this.source.update.bind(this.source);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtSelection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgtSelection, isStandalone: true, selector: "[ngtSelection]", inputs: { enabled: { classPropertyName: "enabled", publicName: "ngtSelection", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    update(...args) {
+        if (!this.enabled())
+            return;
+        this.source.update(...args);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtSelection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", type: NgtSelection, isStandalone: true, selector: "[ngtSelection]", inputs: { enabled: { classPropertyName: "enabled", publicName: "ngtSelection", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtSelection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtSelection, decorators: [{
             type: Directive,
             args: [{ standalone: true, selector: '[ngtSelection]' }]
         }] });
@@ -2582,44 +2595,45 @@ class NgtSelect {
         this.enabled = input(false, { transform: booleanAttribute, alias: 'ngtSelect' });
         const elementRef = inject(ElementRef);
         const selection = inject(NgtSelection);
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                const enabled = this.enabled();
-                if (!enabled)
-                    return;
-                const host = elementRef.nativeElement;
-                if (!host)
-                    return;
-                const localState = getLocalState(host);
-                if (!localState)
-                    return;
-                // ngt-mesh[ngtSelect]
-                if (host.type === 'Mesh') {
-                    selection.update((prev) => [...prev, host]);
-                    return () => selection.update((prev) => prev.filter((el) => el !== host));
-                }
-                const [collection] = [untracked(selection.selected), localState.objects()];
-                let changed = false;
-                const current = [];
-                host.traverse((child) => {
-                    child.type === 'Mesh' && current.push(child);
-                    if (collection.indexOf(child) === -1)
-                        changed = true;
-                });
-                if (!changed)
-                    return;
-                selection.update((prev) => [...prev, ...current]);
-                return () => {
-                    selection.update((prev) => prev.filter((el) => !current.includes(el)));
-                };
-            }, { allowSignalWrites: true });
-        });
+        effect((onCleanup) => {
+            const selectionEnabled = selection.enabled();
+            if (!selectionEnabled)
+                return;
+            const enabled = this.enabled();
+            if (!enabled)
+                return;
+            const host = elementRef.nativeElement;
+            if (!host)
+                return;
+            const localState = getLocalState(host);
+            if (!localState)
+                return;
+            // ngt-mesh[ngtSelect]
+            if (host.type === 'Mesh') {
+                selection.update((prev) => [...prev, host]);
+                onCleanup(() => selection.update((prev) => prev.filter((el) => el !== host)));
+                return;
+            }
+            const [collection] = [untracked(selection.selected), localState.objects()];
+            let changed = false;
+            const current = [];
+            host.traverse((child) => {
+                child.type === 'Mesh' && current.push(child);
+                if (collection.indexOf(child) === -1)
+                    changed = true;
+            });
+            if (!changed)
+                return;
+            selection.update((prev) => [...prev, ...current]);
+            onCleanup(() => {
+                selection.update((prev) => prev.filter((el) => !current.includes(el)));
+            });
+        }, { allowSignalWrites: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgtSelect, isStandalone: true, selector: "ngt-group[ngtSelect], ngt-mesh[ngtSelect]", inputs: { enabled: { classPropertyName: "enabled", publicName: "ngtSelect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", type: NgtSelect, isStandalone: true, selector: "ngt-group[ngtSelect], ngt-mesh[ngtSelect]", inputs: { enabled: { classPropertyName: "enabled", publicName: "ngtSelect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtSelect, decorators: [{
             type: Directive,
             args: [{ standalone: true, selector: 'ngt-group[ngtSelect], ngt-mesh[ngtSelect]' }]
         }], ctorParameters: () => [] });
@@ -2653,10 +2667,10 @@ class NgtHTML {
             delete this.host.nativeElement['__ngt_dom_parent__'];
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtHTML, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: NgtHTML, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtHTML, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: NgtHTML, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtHTML, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtHTML, decorators: [{
             type: Directive
         }], ctorParameters: () => [] });
 
@@ -2673,9 +2687,7 @@ function normalizeInputs(input) {
     else {
         urls = Object.values(input);
     }
-    return urls.map((url) => {
-        return url.includes('undefined') || url.includes('null') || !url ? '' : url;
-    });
+    return urls.map((url) => (url.includes('undefined') || url.includes('null') || !url ? '' : url));
 }
 function load(loaderConstructorFactory, inputs, { extensions, onLoad, onProgress, } = {}) {
     return () => {
@@ -2687,11 +2699,9 @@ function load(loaderConstructorFactory, inputs, { extensions, onLoad, onProgress
         }
         if (extensions)
             extensions(loader);
-        // TODO: reevaluate this
         return urls.map((url) => {
-            if (url === '') {
-                return null;
-            }
+            if (url === '')
+                return Promise.resolve(null);
             if (!cached.has(url)) {
                 cached.set(url, new Promise((resolve, reject) => {
                     loader.load(url, (data) => {
@@ -2720,25 +2730,20 @@ function _injectLoader(loaderConstructorFactory, inputs, { extensions, onProgres
         effect(() => {
             const originalUrls = inputs();
             const cachedEffect = effector();
-            if (cachedEffect === null && untracked(response) !== null) {
-                response.set(null);
-            }
-            else if (cachedEffect !== null) {
-                Promise.all(cachedEffect).then((results) => {
-                    response.update(() => {
-                        if (Array.isArray(originalUrls))
-                            return results;
-                        if (typeof originalUrls === 'string')
-                            return results[0];
-                        const keys = Object.keys(originalUrls);
-                        return keys.reduce((result, key) => {
-                            result[key] = results[keys.indexOf(key)];
-                            return result;
-                        }, {});
-                    });
+            Promise.all(cachedEffect).then((results) => {
+                response.update(() => {
+                    if (Array.isArray(originalUrls))
+                        return results;
+                    if (typeof originalUrls === 'string')
+                        return results[0];
+                    const keys = Object.keys(originalUrls);
+                    return keys.reduce((result, key) => {
+                        result[key] = results[keys.indexOf(key)];
+                        return result;
+                    }, {});
                 });
-            }
-        }, { allowSignalWrites: true });
+            });
+        });
         return response.asReadonly();
     });
 }
@@ -2815,61 +2820,52 @@ class NgtHexify {
         const hex = component.toString(16);
         return hex.length === 1 ? '0' + hex : hex;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtHexify, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: NgtHexify, isStandalone: true, name: "hexify" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtHexify, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: NgtHexify, isStandalone: true, name: "hexify" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtHexify, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtHexify, decorators: [{
             type: Pipe,
             args: [{ name: 'hexify', pure: true, standalone: true }]
         }] });
 
-function injectBeforeRender(cb, { priority = 0, injector } = {}) {
-    return assertInjector(injectBeforeRender, injector, () => {
-        const store = injectStore();
-        const sub = store.get('internal').subscribe(cb, priority, store);
-        inject(DestroyRef).onDestroy(() => void sub());
-        return sub;
-    });
-}
-
 class NgtPortalBeforeRender {
     constructor() {
         this.portalStore = injectStore();
         this.renderPriority = input(1);
         this.parentScene = input.required();
         this.parentCamera = input.required();
-        injectAutoEffect()((injector) => {
+        effect((onCleanup) => {
             // track state
-            this.portalStore.state();
-            const priority = this.renderPriority();
-            let oldClear;
-            return injectBeforeRender(() => {
-                const { gl, scene, camera } = this.portalStore.snapshot;
-                oldClear = gl.autoClear;
-                if (this.renderPriority() === 1) {
+            const [renderPriority, { internal }] = [this.renderPriority(), this.portalStore.state()];
+            let oldClean;
+            const cleanup = internal.subscribe(({ gl, scene, camera }) => {
+                const [parentScene, parentCamera] = [untracked(this.parentScene), untracked(this.parentCamera)];
+                oldClean = gl.autoClear;
+                if (renderPriority === 1) {
                     // clear scene and render with default
                     gl.autoClear = true;
-                    gl.render(this.parentScene(), this.parentCamera());
+                    gl.render(parentScene, parentCamera);
                 }
                 // disable cleaning
                 gl.autoClear = false;
                 gl.clearDepth();
                 gl.render(scene, camera);
                 // restore
-                gl.autoClear = oldClear;
-            }, { priority, injector });
+                gl.autoClear = oldClean;
+            }, renderPriority, this.portalStore);
+            onCleanup(() => cleanup());
         });
     }
     onPointerOver() {
         /* noop */
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", 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: "18.2.0", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-portal-before-render',
@@ -2894,10 +2890,10 @@ class NgtPortalContent {
     static ngTemplateContextGuard(_, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtPortalContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: NgtPortalContent, isStandalone: true, selector: "ng-template[portalContent]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtPortalContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: NgtPortalContent, isStandalone: true, selector: "ng-template[portalContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtPortalContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtPortalContent, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[portalContent]', standalone: true }]
         }], ctorParameters: () => [] });
@@ -2933,8 +2929,8 @@ class NgtPortal {
         this.pointer = new Vector2();
         this.portalRendered = signal(false);
         this.renderAutoBeforeRender = computed(() => this.portalRendered() && this.autoRender());
-        const autoEffect = injectAutoEffect();
         const parentState = this.parentStore.select();
+        // NOTE: we run this in afterNextRender for inputs to resolve
         afterNextRender(() => {
             const previousState = this.parentStore.snapshot;
             const { events = {}, size = {}, ...rest } = this.state();
@@ -2957,7 +2953,7 @@ class NgtPortal {
                 ...rest,
                 setEvents: (events) => this.portalStore.update((state) => ({ ...state, events: { ...state.events, ...events } })),
             });
-            autoEffect(() => {
+            effect(() => {
                 const state = this.state();
                 const _parentState = parentState();
                 this.portalStore.update((prev) => this.inject(_parentState, prev, state, untracked(this.container)));
@@ -2970,7 +2966,7 @@ class NgtPortal {
                     this.portalView.detectChanges();
                     this.portalRendered.set(true);
                 });
-            });
+            }, { injector: this.injector });
         });
         inject(DestroyRef).onDestroy(() => {
             this.portalView?.destroy();
@@ -3007,8 +3003,8 @@ class NgtPortal {
             ...rest,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", 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: [provideStore(() => signalStore({}))], queries: [{ propertyName: "portalContent", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "portalAnchor", first: true, predicate: ["anchor"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", 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: [provideStore(() => signalStore({}))], queries: [{ propertyName: "portalContent", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "portalAnchor", first: true, predicate: ["anchor"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
 		<ng-container #anchor />
 
 		@if (renderAutoBeforeRender()) {
@@ -3020,7 +3016,7 @@ class NgtPortal {
 		}
 	`, 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: "18.2.0", ngImport: i0, type: NgtPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtPortal, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-portal',
@@ -3043,6 +3039,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+function injectBeforeRender(cb, { priority = 0, injector } = {}) {
+    return assertInjector(injectBeforeRender, injector, () => {
+        const store = injectStore();
+        const sub = store.get('internal').subscribe(cb, priority, store);
+        inject(DestroyRef).onDestroy(() => void sub());
+        return sub;
+    });
+}
+
 function resolveRef(ref) {
     if (is.ref(ref)) {
         return ref.nativeElement;
@@ -3067,32 +3072,29 @@ class NgtObjectEvents {
         this.wheel = output();
         // NOTE: we use model here to allow for the hostDirective host to set this value
         this.ngtObjectEvents = model();
-        const injector = inject(Injector);
-        afterNextRender(() => {
-            injectObjectEvents(this.ngtObjectEvents, {
-                click: this.emitEvent('click'),
-                dblclick: this.emitEvent('dblclick'),
-                contextmenu: this.emitEvent('contextmenu'),
-                pointerup: this.emitEvent('pointerup'),
-                pointerdown: this.emitEvent('pointerdown'),
-                pointerover: this.emitEvent('pointerover'),
-                pointerout: this.emitEvent('pointerout'),
-                pointerenter: this.emitEvent('pointerenter'),
-                pointerleave: this.emitEvent('pointerleave'),
-                pointermove: this.emitEvent('pointermove'),
-                pointermissed: this.emitEvent('pointermissed'),
-                pointercancel: this.emitEvent('pointercancel'),
-                wheel: this.emitEvent('wheel'),
-            }, { injector });
+        injectObjectEvents(this.ngtObjectEvents, {
+            click: this.emitEvent('click'),
+            dblclick: this.emitEvent('dblclick'),
+            contextmenu: this.emitEvent('contextmenu'),
+            pointerup: this.emitEvent('pointerup'),
+            pointerdown: this.emitEvent('pointerdown'),
+            pointerover: this.emitEvent('pointerover'),
+            pointerout: this.emitEvent('pointerout'),
+            pointerenter: this.emitEvent('pointerenter'),
+            pointerleave: this.emitEvent('pointerleave'),
+            pointermove: this.emitEvent('pointermove'),
+            pointermissed: this.emitEvent('pointermissed'),
+            pointercancel: this.emitEvent('pointercancel'),
+            wheel: this.emitEvent('wheel'),
         });
     }
     emitEvent(eventName) {
         return this[eventName].emit.bind(this[eventName]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtObjectEvents, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgtObjectEvents, isStandalone: true, selector: "[ngtObjectEvents]", inputs: { ngtObjectEvents: { classPropertyName: "ngtObjectEvents", publicName: "ngtObjectEvents", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", dblclick: "dblclick", contextmenu: "contextmenu", pointerup: "pointerup", pointerdown: "pointerdown", pointerover: "pointerover", pointerout: "pointerout", pointerenter: "pointerenter", pointerleave: "pointerleave", pointermove: "pointermove", pointermissed: "pointermissed", pointercancel: "pointercancel", wheel: "wheel", ngtObjectEvents: "ngtObjectEventsChange" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtObjectEvents, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", type: NgtObjectEvents, isStandalone: true, selector: "[ngtObjectEvents]", inputs: { ngtObjectEvents: { classPropertyName: "ngtObjectEvents", publicName: "ngtObjectEvents", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", dblclick: "dblclick", contextmenu: "contextmenu", pointerup: "pointerup", pointerdown: "pointerdown", pointerover: "pointerover", pointerout: "pointerout", pointerenter: "pointerenter", pointerleave: "pointerleave", pointermove: "pointermove", pointermissed: "pointermissed", pointercancel: "pointercancel", wheel: "wheel", ngtObjectEvents: "ngtObjectEventsChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtObjectEvents, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtObjectEvents, decorators: [{
             type: Directive,
             args: [{ standalone: true, selector: '[ngtObjectEvents]' }]
         }], ctorParameters: () => [] });