angular-three 2.0.0-beta.311 → 2.0.0-beta.312

package/fesm2022/angular-three.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { untracked, computed, signal, ElementRef, input, inject, ViewContainerRef, NgZone, TemplateRef, afterNextRender, DestroyRef, Directive, effect, InjectionToken, getDebugNode, 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, 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 { takeUntilDestroyed, outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
 import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { provideResizeOptions, NgxResize } from 'ngxtension/resize';
@@ -282,7 +282,7 @@ function makeRendererInstance(glOptions, canvas) {
         return customRenderer;
     return new WebGLRenderer({
         powerPreference: 'high-performance',
-        canvas: canvas,
+        canvas,
         antialias: true,
         alpha: true,
         ...glOptions,
@@ -955,12 +955,6 @@ function createLoop(roots) {
 const [injectLoop] = createInjectionToken(() => createLoop(roots));
 
 function storeFactory(previousStore) {
-    const document = inject(DOCUMENT);
-    const window = document.defaultView;
-    if (!window) {
-        // TODO: revisit this when we need to support multiple platforms
-        throw new Error(`[NGT] Window is not available.`);
-    }
     const loop = injectLoop();
     // NOTE: using Subject because we do not care about late-subscribers
     const pointerMissed$ = new Subject();
@@ -1254,7 +1248,7 @@ function extend(objects) {
 const [injectCatalogue] = createInjectionToken(() => catalogue);
 
 function createNode(type, node, document) {
-    const state = [type, null, [], false, undefined, undefined, undefined];
+    const state = [type, null, [], false, undefined, undefined, undefined, undefined];
     const rendererNode = Object.assign(node, { __ngt_renderer__: state });
     // NOTE: assign ownerDocument to node so we can use HostListener in Component
     if (!rendererNode['ownerDocument'])
@@ -1262,7 +1256,12 @@ function createNode(type, node, document) {
     // NOTE: assign injectorFactory on non-three type since
     // rendererNode is an instance of DOM Node
     if (state[0 /* NgtRendererClassId.type */] !== 'three') {
-        state[6 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(rendererNode)?.injector;
+        state[7 /* NgtRendererClassId.debugNodeFactory */] = () => {
+            if (!state[6 /* NgtRendererClassId.debugNode */]) {
+                state[6 /* NgtRendererClassId.debugNode */] = new DebugNode(rendererNode);
+            }
+            return state[6 /* NgtRendererClassId.debugNode */];
+        };
     }
     return rendererNode;
 }
@@ -1603,7 +1602,12 @@ class NgtRenderer {
         if (this.isRoot) {
             this.isRoot = false;
             const node = createNode('three', this.rootStore.snapshot.scene, this.document);
-            node.__ngt_renderer__[6 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(element)?.injector;
+            node.__ngt_renderer__[7 /* NgtRendererClassId.debugNodeFactory */] = () => {
+                if (!node.__ngt_renderer__[6 /* NgtRendererClassId.debugNode */]) {
+                    node.__ngt_renderer__[6 /* NgtRendererClassId.debugNode */] = new DebugNode(element);
+                }
+                return node.__ngt_renderer__[6 /* NgtRendererClassId.debugNode */];
+            };
             return node;
         }
         if (name === SPECIAL_DOM_TAG.NGT_PORTAL) {
@@ -1959,12 +1963,14 @@ class NgtRenderer {
             }
         }
         if (rS[0 /* NgtRendererClassId.type */] === 'comment') {
-            rS[6 /* NgtRendererClassId.injectorFactory */] = null;
+            rS[6 /* NgtRendererClassId.debugNode */] = null;
+            rS[7 /* NgtRendererClassId.debugNodeFactory */] = null;
             delete node[SPECIAL_INTERNAL_ADD_COMMENT];
             this.removeCommentNode(node, this.argsCommentNodes);
         }
         if (rS[0 /* NgtRendererClassId.type */] === 'portal') {
-            rS[6 /* NgtRendererClassId.injectorFactory */] = null;
+            rS[6 /* NgtRendererClassId.debugNode */] = null;
+            rS[7 /* NgtRendererClassId.debugNodeFactory */] = null;
             this.removeCommentNode(node, this.portalCommentsNodes);
         }
         // nullify parent
@@ -1995,7 +2001,7 @@ class NgtRenderer {
         }
     }
     processPortalContainer(portal) {
-        const injector = portal.__ngt_renderer__[6 /* NgtRendererClassId.injectorFactory */]?.();
+        const injector = portal.__ngt_renderer__[7 /* NgtRendererClassId.debugNodeFactory */]?.()?.injector;
         if (!injector)
             return;
         const portalStore = injector.get(NGT_STORE, null);
@@ -2033,7 +2039,7 @@ class NgtRenderer {
                 i--;
                 continue;
             }
-            const injector = comment.__ngt_renderer__[6 /* NgtRendererClassId.injectorFactory */]();
+            const injector = comment.__ngt_renderer__[7 /* NgtRendererClassId.debugNodeFactory */]?.()?.injector;
             if (!injector) {
                 i--;
                 continue;
@@ -2050,37 +2056,6 @@ class NgtRenderer {
         });
         return directive;
     }
-    tryGetPortalStore() {
-        let store;
-        const destroyed = [];
-        // we only care about the portal states because NgtStore only differs per Portal
-        let i = this.portalCommentsNodes.length - 1;
-        while (i >= 0) {
-            // loop through the portal state backwards to find the closest NgtStore
-            const portal = this.portalCommentsNodes[i];
-            if (portal.__ngt_renderer__[3 /* NgtRendererClassId.destroyed */]) {
-                destroyed.push(i);
-                i--;
-                continue;
-            }
-            const injector = portal.__ngt_renderer__[6 /* NgtRendererClassId.injectorFactory */]();
-            if (!injector) {
-                i--;
-                continue;
-            }
-            const instance = injector.get(NGT_STORE, null);
-            // only the instance with previousRoot should pass
-            if (instance && instance.get('previousRoot')) {
-                store = instance;
-                break;
-            }
-            i--;
-        }
-        destroyed.forEach((index) => {
-            this.portalCommentsNodes.splice(index, 1);
-        });
-        return store || this.rootStore;
-    }
     get data() {
         return this.delegate.data;
     }
@@ -2508,14 +2483,12 @@ class NgtCanvas {
         if (!this.store.get('events', 'connected')) {
             this.store.get('events').connect?.(untracked(this.glCanvas).nativeElement);
         }
-        untracked(() => {
-            this.glEnvironmentInjector = createEnvironmentInjector([provideNgtRenderer(this.store)], this.environmentInjector);
-            this.glRef = untracked(this.glCanvasViewContainerRef).createComponent(untracked(this.sceneGraph), {
-                environmentInjector: this.glEnvironmentInjector,
-                injector: this.injector,
-            });
-            this.glRef.changeDetectorRef.detectChanges();
+        this.glEnvironmentInjector = createEnvironmentInjector([provideNgtRenderer(this.store)], this.environmentInjector);
+        this.glRef = untracked(this.glCanvasViewContainerRef).createComponent(untracked(this.sceneGraph), {
+            environmentInjector: this.glEnvironmentInjector,
+            injector: this.injector,
         });
+        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: [