angular-three 1.0.0-beta.8 → 1.0.0

package/fesm2020/angular-three.mjs

@@ -1,11 +1,114 @@
 import * as i0 from '@angular/core';
-import { ElementRef, Injectable, inject, InjectionToken, ViewContainerRef, TemplateRef, Directive, Input, EventEmitter, getDebugNode, ChangeDetectorRef, RendererFactory2, Component, Output, EnvironmentInjector, createEnvironmentInjector, HostBinding, ViewChild, Pipe } from '@angular/core';
-import { injectNgxResize, provideNgxResizeOptions } from 'ngx-resize';
-import { BehaviorSubject, startWith, tap, isObservable, of, map, from, retry, catchError, share, ReplaySubject, switchMap, forkJoin, take, filter, distinctUntilChanged, takeUntil, merge } from 'rxjs';
-import { DOCUMENT, NgForOf } from '@angular/common';
-import { RxState, selectSlice } from '@rx-angular/state';
+import { ElementRef, Injectable, inject, InjectionToken, ViewContainerRef, TemplateRef, Directive, Input, EventEmitter, getDebugNode, ChangeDetectorRef, RendererFactory2, EnvironmentInjector, createEnvironmentInjector, Component, HostBinding, Output, ViewChild, Pipe, SkipSelf, ContentChild } from '@angular/core';
+import { provideNgxResizeOptions, NgxResize } from 'ngx-resize';
+import { isObservable, of, map, from, tap, retry, catchError, share, ReplaySubject, switchMap, forkJoin, take, BehaviorSubject, startWith, filter, distinctUntilChanged, takeUntil, merge } from 'rxjs';
 import * as THREE from 'three';
+import { DOCUMENT, NgForOf, NgIf } from '@angular/common';
+import { RxState, selectSlice } from '@rx-angular/state';
 import { ɵDomRendererFactory2 } from '@angular/platform-browser';
+import { __classPrivateFieldGet } from 'tslib';
+
+const idCache = {};
+function makeId(event) {
+    if (event) {
+        return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
+    }
+    const newId = THREE.MathUtils.generateUUID();
+    // ensure not already used
+    if (!idCache[newId]) {
+        idCache[newId] = true;
+        return newId;
+    }
+    return makeId();
+}
+function makeDpr(dpr, window) {
+    const target = window?.devicePixelRatio || 1;
+    return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
+}
+function makeDefaultCamera(isOrthographic, size) {
+    if (isOrthographic)
+        return new THREE.OrthographicCamera(0, 0, 0, 0, 0.1, 1000);
+    return new THREE.PerspectiveCamera(75, size.width / size.height, 0.1, 1000);
+}
+function makeDefaultRenderer(glOptions, canvasElement) {
+    const customRenderer = (typeof glOptions === 'function' ? glOptions(canvasElement) : glOptions);
+    if (customRenderer?.render != null)
+        return customRenderer;
+    return new THREE.WebGLRenderer({
+        powerPreference: 'high-performance',
+        canvas: canvasElement,
+        antialias: true,
+        alpha: true,
+        ...(glOptions || {}),
+    });
+}
+function makeObjectGraph(object) {
+    const data = { nodes: {}, materials: {} };
+    if (object) {
+        object.traverse((child) => {
+            if (child.name)
+                data.nodes[child.name] = child;
+            if ('material' in child && !data.materials[child.material.name]) {
+                data.materials[child.material.name] = child
+                    .material;
+            }
+        });
+    }
+    return data;
+}
+
+const cached = new Map();
+function injectLoader(loaderConstructorFactory, input, extensions, onProgress) {
+    const urls$ = isObservable(input) ? input : of(input);
+    return urls$.pipe(map((inputs) => {
+        const loaderConstructor = loaderConstructorFactory(inputs);
+        const loader = new loaderConstructor();
+        if (extensions) {
+            extensions(loader);
+        }
+        const urls = Array.isArray(inputs) ? inputs : typeof inputs === 'string' ? [inputs] : Object.values(inputs);
+        return [
+            urls.map((url) => {
+                if (!cached.has(url)) {
+                    cached.set(url, from(loader.loadAsync(url, onProgress)).pipe(tap((data) => {
+                        if (data.scene) {
+                            Object.assign(data, makeObjectGraph(data.scene));
+                        }
+                    }), retry(2), catchError((err) => {
+                        console.error(`[NGT] Error loading ${url}: ${err.message}`);
+                        return of([]);
+                    }), share({
+                        connector: () => new ReplaySubject(1),
+                        resetOnComplete: true,
+                        resetOnError: true,
+                        resetOnRefCountZero: true,
+                    })));
+                }
+                return cached.get(url);
+            }),
+            inputs,
+        ];
+    }), switchMap(([observables$, inputs]) => {
+        return forkJoin(observables$).pipe(map((results) => {
+            if (Array.isArray(inputs))
+                return results;
+            if (typeof inputs === 'string')
+                return results[0];
+            const keys = Object.keys(inputs);
+            return keys.reduce((result, key) => {
+                result[key] = results[keys.indexOf(key)];
+                return result;
+            }, {});
+        }));
+    }));
+}
+injectLoader.destroy = () => {
+    cached.clear();
+};
+injectLoader.preLoad = (loaderConstructorFactory, inputs, extensions) => {
+    injectLoader(loaderConstructorFactory, inputs, extensions).pipe(take(1)).subscribe();
+};
+const injectNgtLoader = injectLoader;
 
 function createSubs(callback, subs) {
     const sub = { callback };
@@ -240,7 +343,7 @@ function invalidateInstance(instance) {
     checkUpdate(instance);
 }
 function prepare(object, localState) {
-    const instance = object;
+    const instance = (typeof object === 'function' ? object() : object);
     if (localState?.primitive || !instance.__ngt__) {
         const { objects = new BehaviorSubject([]), nonObjects = new BehaviorSubject([]), ...rest } = localState || {};
         instance.__ngt__ = {
@@ -253,7 +356,15 @@ function prepare(object, localState) {
             objects,
             nonObjects,
             add: (object, type) => {
-                instance.__ngt__[type].next([...instance.__ngt__[type].value, object]);
+                const current = instance.__ngt__[type].value;
+                const foundIndex = current.indexOf((obj) => obj === object);
+                if (foundIndex > -1) {
+                    current.splice(foundIndex, 1, object);
+                    instance.__ngt__[type].next(current);
+                }
+                else {
+                    instance.__ngt__[type].next([...instance.__ngt__[type].value, object]);
+                }
                 notifyAncestors(instance.__ngt__.parent);
             },
             remove: (object, type) => {
@@ -364,55 +475,6 @@ function applyProps(instance, props) {
     return instance;
 }
 
-const idCache = {};
-function makeId(event) {
-    if (event) {
-        return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
-    }
-    const newId = THREE.MathUtils.generateUUID();
-    // ensure not already used
-    if (!idCache[newId]) {
-        idCache[newId] = true;
-        return newId;
-    }
-    return makeId();
-}
-function makeDpr(dpr, window) {
-    const target = window?.devicePixelRatio || 1;
-    return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
-}
-function makeDefaultCamera(isOrthographic, size) {
-    if (isOrthographic)
-        return new THREE.OrthographicCamera(0, 0, 0, 0, 0.1, 1000);
-    return new THREE.PerspectiveCamera(75, size.width / size.height, 0.1, 1000);
-}
-function makeDefaultRenderer(glOptions, canvasElement) {
-    const customRenderer = (typeof glOptions === 'function' ? glOptions(canvasElement) : glOptions);
-    if (customRenderer?.render != null)
-        return customRenderer;
-    return new THREE.WebGLRenderer({
-        powerPreference: 'high-performance',
-        canvas: canvasElement,
-        antialias: true,
-        alpha: true,
-        ...(glOptions || {}),
-    });
-}
-function makeObjectGraph(object) {
-    const data = { nodes: {}, materials: {} };
-    if (object) {
-        object.traverse((child) => {
-            if (child.name)
-                data.nodes[child.name] = child;
-            if ('material' in child && !data.materials[child.material.name]) {
-                data.materials[child.material.name] = child
-                    .material;
-            }
-        });
-    }
-    return data;
-}
-
 const startWithUndefined = () => startWith(undefined);
 /**
  * An extended `tap` operator that accepts an `effectFn` which:
@@ -787,7 +849,7 @@ class NgtStore extends NgtRxStore {
         // Safely set color management if available.
         // Avoid accessing THREE.ColorManagement to play nice with older versions
         if (THREE.ColorManagement)
-            THREE.ColorManagement.legacyMode = state.legacy;
+            THREE.ColorManagement.legacyMode = legacy ?? true;
         const outputEncoding = linear ? THREE.LinearEncoding : THREE.sRGBEncoding;
         const toneMapping = flat ? THREE.NoToneMapping : THREE.ACESFilmicToneMapping;
         if (gl.outputEncoding !== outputEncoding)
@@ -1300,6 +1362,9 @@ function assignEmpty(obj, base) {
         obj[base] = {};
     }
 }
+function createAttachFunction(cb) {
+    return (parent, child, store) => cb({ parent, child, store });
+}
 
 const SPECIAL_DOM_TAG = {
     NGT_PORTAL: 'ngt-portal',
@@ -1403,7 +1468,7 @@ function removeThreeChild(parent, child, dispose) {
         removeThreeRecursive(child.childre, child, !!dispose);
     }
     // dispose
-    if (child['dispose'] && !is.scene(child)) {
+    if (!isPrimitive && child['dispose'] && !is.scene(child)) {
         queueMicrotask(() => child['dispose']());
     }
     invalidateInstance(parent);
@@ -1501,14 +1566,18 @@ class NgtRendererStore {
             state[13 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(rendererNode).injector;
             // we attach an arrow function to the Comment node
             // In our directives, we can call this function to then start tracking the RendererNode
-            rendererNode['__ngt_renderer_add_comment__'] = () => {
-                this.comments.push(rendererNode);
+            rendererNode['__ngt_renderer_add_comment__'] = (portalNode) => {
+                if (portalNode && portalNode.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'portal') {
+                    this.portals.push(portalNode);
+                }
+                else {
+                    this.comments.push(rendererNode);
+                }
             };
             return rendererNode;
         }
         if (state[0 /* NgtRendererClassId.type */] === 'portal') {
             state[13 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(rendererNode).injector;
-            this.portals.push(rendererNode);
             return rendererNode;
         }
         if (state[0 /* NgtRendererClassId.type */] === 'compound') {
@@ -1621,6 +1690,7 @@ class NgtRendererStore {
         if (node.__ngt_renderer__[3 /* NgtRendererClassId.destroyed */])
             return;
         // setup [ref] here
+        // ref should never change
         if (name === SPECIAL_PROPERTIES.REF && is.ref(value)) {
             node.__ngt_renderer__[11 /* NgtRendererClassId.ref */] = value;
             value.nativeElement = node;
@@ -1806,7 +1876,8 @@ class NgtRendererStore {
                 continue;
             }
             const instance = injector.get(NgtStore, null);
-            if (instance) {
+            // only the instance with previousStore should pass
+            if (instance && instance.get('previousStore')) {
                 store = instance;
                 break;
             }
@@ -2181,72 +2252,6 @@ function createPointerEvents(store) {
     };
 }
 
-const cached = new Map();
-function injectLoader(loaderConstructorFactory, input, extensions, onProgress) {
-    const urls$ = isObservable(input) ? input : of(input);
-    return urls$.pipe(map((inputs) => {
-        const loaderConstructor = loaderConstructorFactory(inputs);
-        const loader = new loaderConstructor();
-        if (extensions) {
-            extensions(loader);
-        }
-        const urls = Array.isArray(inputs) ? inputs : typeof inputs === 'string' ? [inputs] : Object.values(inputs);
-        return [
-            urls.map((url) => {
-                if (!cached.has(url)) {
-                    cached.set(url, from(loader.loadAsync(url, onProgress)).pipe(tap((data) => {
-                        if (data.scene) {
-                            Object.assign(data, makeObjectGraph(data.scene));
-                        }
-                    }), retry(2), catchError((err) => {
-                        console.error(`[NGT] Error loading ${url}: ${err.message}`);
-                        return of([]);
-                    }), share({
-                        connector: () => new ReplaySubject(1),
-                        resetOnComplete: true,
-                        resetOnError: true,
-                        resetOnRefCountZero: true,
-                    })));
-                }
-                return cached.get(url);
-            }),
-            inputs,
-        ];
-    }), switchMap(([observables$, inputs]) => {
-        return forkJoin(observables$).pipe(map((results) => {
-            if (Array.isArray(inputs))
-                return results;
-            if (typeof inputs === 'string')
-                return results[0];
-            const keys = Object.keys(inputs);
-            return keys.reduce((result, key) => {
-                result[key] = results[keys.indexOf(key)];
-                return result;
-            }, {});
-        }));
-    }));
-}
-injectLoader.destroy = () => {
-    cached.clear();
-};
-injectLoader.preLoad = (loaderConstructorFactory, inputs, extensions) => {
-    injectLoader(loaderConstructorFactory, inputs, extensions).pipe(take(1)).subscribe();
-};
-const injectNgtLoader = injectLoader;
-
-class NgtCanvasContainer {
-    constructor() {
-        this.canvasResize = injectNgxResize();
-    }
-}
-NgtCanvasContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtCanvasContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgtCanvasContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: NgtCanvasContainer, isStandalone: true, selector: "ngt-canvas-container", outputs: { canvasResize: "canvasResize" }, providers: [provideNgxResizeOptions({ emitInZone: false })], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block;width:100%;height:100%}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtCanvasContainer, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngt-canvas-container', standalone: true, template: '<ng-content />', providers: [provideNgxResizeOptions({ emitInZone: false })], styles: [":host{display:block;width:100%;height:100%}\n"] }]
-        }], propDecorators: { canvasResize: [{
-                type: Output
-            }] } });
 class NgtCanvas extends NgtRxStore {
     constructor() {
         super(...arguments);
@@ -2384,7 +2389,9 @@ class NgtCanvas extends NgtRxStore {
                     compoundPrefixes: this.compoundPrefixes,
                 }),
             ], this.envInjector);
-            this.glRef = this.glAnchor.createComponent(this.sceneGraph, { environmentInjector: this.glEnvInjector });
+            this.glRef = this.glAnchor.createComponent(this.sceneGraph, {
+                environmentInjector: this.glEnvInjector,
+            });
             this.glRef.changeDetectorRef.detach();
             // here, we override the detectChanges to also call detectChanges on the ComponentRef
             this.overrideDetectChanges();
@@ -2410,20 +2417,18 @@ class NgtCanvas extends NgtRxStore {
     }
 }
 NgtCanvas.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtCanvas, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtCanvas.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: "sceneGraph", compoundPrefixes: "compoundPrefixes", linear: "linear", legacy: "legacy", flat: "flat", orthographic: "orthographic", frameloop: "frameloop", dpr: "dpr", raycaster: "raycaster", shadows: "shadows", camera: "camera", gl: "gl", eventSource: "eventSource", eventPrefix: "eventPrefix", lookAt: "lookAt", performance: "performance" }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { properties: { "class.ngt-canvas": "this.hostClass", "style.pointerEvents": "this.pointerEvents" } }, providers: [NgtStore], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, static: true }, { propertyName: "glAnchor", first: true, predicate: ["glAnchor"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
-        <ngt-canvas-container (canvasResize)="onResize($event)">
+NgtCanvas.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: "sceneGraph", compoundPrefixes: "compoundPrefixes", linear: "linear", legacy: "legacy", flat: "flat", orthographic: "orthographic", frameloop: "frameloop", dpr: "dpr", raycaster: "raycaster", shadows: "shadows", camera: "camera", gl: "gl", eventSource: "eventSource", eventPrefix: "eventPrefix", lookAt: "lookAt", performance: "performance" }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { properties: { "class.ngt-canvas": "this.hostClass", "style.pointerEvents": "this.pointerEvents" } }, providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false })], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, static: true }, { propertyName: "glAnchor", first: true, predicate: ["glCanvas"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <div (ngxResize)="onResize($event)" style="height: 100%; width: 100%;">
             <canvas #glCanvas style="display: block;"></canvas>
-            <ng-container #glAnchor />
-        </ngt-canvas-container>
-    `, isInline: true, styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "component", type: NgtCanvasContainer, selector: "ngt-canvas-container", outputs: ["canvasResize"] }] });
+        </div>
+    `, isInline: true, styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgxResize, selector: "[ngxResize]", inputs: ["ngxResizeOptions"], outputs: ["ngxResize"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtCanvas, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-canvas', standalone: true, template: `
-        <ngt-canvas-container (canvasResize)="onResize($event)">
+        <div (ngxResize)="onResize($event)" style="height: 100%; width: 100%;">
             <canvas #glCanvas style="display: block;"></canvas>
-            <ng-container #glAnchor />
-        </ngt-canvas-container>
-    `, imports: [NgtCanvasContainer], providers: [NgtStore], styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}\n"] }]
+        </div>
+    `, imports: [NgxResize], providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false })], styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}\n"] }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.ngt-canvas']
@@ -2471,21 +2476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 args: ['glCanvas', { static: true }]
             }], glAnchor: [{
                 type: ViewChild,
-                args: ['glAnchor', { static: true, read: ViewContainerRef }]
-            }] } });
-
-class NgtRepeat extends NgForOf {
-    set ngForRepeat(count) {
-        this.ngForOf = Number.isInteger(count) ? Array.from({ length: count }, (_, i) => i) : [];
-    }
-}
-NgtRepeat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtRepeat, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-NgtRepeat.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: NgtRepeat, isStandalone: true, selector: "[ngFor][ngForRepeat]", inputs: { ngForRepeat: "ngForRepeat" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtRepeat, decorators: [{
-            type: Directive,
-            args: [{ selector: '[ngFor][ngForRepeat]', standalone: true }]
-        }], propDecorators: { ngForRepeat: [{
-                type: Input
+                args: ['glCanvas', { static: true, read: ViewContainerRef }]
             }] } });
 
 /**
@@ -2510,6 +2501,18 @@ function injectNgtDestroy(cb) {
     }
 }
 
+function injectBeforeRender(cb, priority = 0) {
+    try {
+        const store = inject(NgtStore);
+        const sub = store.get('internal').subscribe((state) => cb(state), priority, store);
+        injectNgtDestroy(() => void sub());
+        return sub;
+    }
+    catch (e) {
+        throw new Error(`[NGT] "injectBeforeRender" is invoked outside of Constructor Context`);
+    }
+}
+
 function injectNgtRef(initialValue = null) {
     let ref = new ElementRef(initialValue);
     if (is.ref(initialValue)) {
@@ -2576,6 +2579,20 @@ function injectNgtRef(initialValue = null) {
     return Object.assign(ref, { subscribe, $, children$, useCDR: (cdr) => void cdRefs.push(cdr) });
 }
 
+class NgtRepeat extends NgForOf {
+    set ngForRepeat(count) {
+        this.ngForOf = Number.isInteger(count) ? Array.from({ length: count }, (_, i) => i) : [];
+    }
+}
+NgtRepeat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtRepeat, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+NgtRepeat.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: NgtRepeat, isStandalone: true, selector: "[ngFor][ngForRepeat]", inputs: { ngForRepeat: "ngForRepeat" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtRepeat, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ngFor][ngForRepeat]', standalone: true }]
+        }], propDecorators: { ngForRepeat: [{
+                type: Input
+            }] } });
+
 function isPromise(value) {
     return ((value instanceof Promise || Object.prototype.toString.call(value) === '[object Promise]') &&
         typeof value['then'] === 'function');
@@ -2627,9 +2644,239 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
             args: [{ name: 'ngtPush', pure: false, standalone: true }]
         }] });
 
+var _NgtPortal_instances, _NgtPortal_inject;
+const privateKeys = [
+    'get',
+    'set',
+    'select',
+    'setSize',
+    'setDpr',
+    'setFrameloop',
+    'events',
+    'invalidate',
+    'advance',
+    'size',
+    'viewport',
+    'addInteraction',
+    'removeInteraction',
+];
+class NgtPortalBeforeRender {
+    constructor() {
+        this.portalStore = inject(NgtStore);
+        this.renderPriority = 1;
+        this.beforeRender = new EventEmitter();
+    }
+    ngOnInit() {
+        let oldClear;
+        this.subscription = this.portalStore.get('internal').subscribe(({ delta, frame }) => {
+            this.beforeRender.emit({ ...this.portalStore.get(), delta, frame });
+            const { gl, scene, camera } = this.portalStore.get();
+            oldClear = gl.autoClear;
+            if (this.renderPriority === 1) {
+                // clear scene and render with default
+                gl.autoClear = true;
+                gl.render(this.parentScene, this.parentCamera);
+            }
+            // disable cleaning
+            gl.autoClear = false;
+            gl.clearDepth();
+            gl.render(scene, camera);
+            // restore
+            gl.autoClear = oldClear;
+        }, this.renderPriority, this.portalStore);
+    }
+    ngOnDestroy() {
+        this.subscription?.();
+    }
+}
+NgtPortalBeforeRender.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+NgtPortalBeforeRender.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: NgtPortalBeforeRender, isStandalone: true, selector: "ngt-portal-before-render", inputs: { renderPriority: "renderPriority", parentScene: "parentScene", parentCamera: "parentCamera" }, outputs: { beforeRender: "beforeRender" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ngt-portal-before-render',
+                    standalone: true,
+                }]
+        }], propDecorators: { renderPriority: [{
+                type: Input
+            }], parentScene: [{
+                type: Input
+            }], parentCamera: [{
+                type: Input
+            }], beforeRender: [{
+                type: Output
+            }] } });
+class NgtPortalContent {
+    constructor(vcr, parentVcr) {
+        const commentNode = vcr.element.nativeElement;
+        if (commentNode['__ngt_renderer_add_comment__']) {
+            commentNode['__ngt_renderer_add_comment__'](parentVcr.element.nativeElement);
+            delete commentNode['__ngt_renderer_add_comment__'];
+        }
+    }
+}
+NgtPortalContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtPortalContent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ViewContainerRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+NgtPortalContent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtPortalContent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ngtPortalContent]', standalone: true }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ViewContainerRef, decorators: [{
+                    type: SkipSelf
+                }] }]; } });
+class NgtPortal extends NgtRxStore {
+    constructor() {
+        super(...arguments);
+        _NgtPortal_instances.add(this);
+        this.autoRender = true;
+        this.autoRenderPriority = 1;
+        this.beforeRender = new EventEmitter();
+        this.parentStore = inject(NgtStore, { skipSelf: true });
+        this.parentScene = this.parentStore.get('scene');
+        this.parentCamera = this.parentStore.get('camera');
+        this.portalStore = inject(NgtStore, { self: true });
+        this.raycaster = new THREE.Raycaster();
+        this.pointer = new THREE.Vector2();
+        this.portalContentRendered = false;
+    }
+    set container(container) {
+        this.set({ container });
+    }
+    set state(state) {
+        this.set({ state });
+    }
+    initialize() {
+        super.initialize();
+        this.set({ container: injectNgtRef(prepare(new THREE.Scene())) });
+    }
+    ngOnInit() {
+        const previousState = this.parentStore.get();
+        const inputsState = this.get();
+        if (!inputsState.state && this.autoRender) {
+            inputsState.state = { events: { priority: this.autoRenderPriority + 1 } };
+        }
+        const { events, size, ...restInputsState } = inputsState.state || {};
+        const containerState = inputsState.container;
+        const container = is.ref(containerState) ? containerState.nativeElement : containerState;
+        const localState = getLocalState(container);
+        if (!localState.store) {
+            localState.store = this.portalStore;
+        }
+        this.portalStore.set({
+            ...previousState,
+            scene: container,
+            raycaster: this.raycaster,
+            pointer: this.pointer,
+            previousStore: this.parentStore,
+            events: { ...previousState.events, ...(events || {}) },
+            size: { ...previousState.size, ...(size || {}) },
+            ...restInputsState,
+            get: this.portalStore.get.bind(this.portalStore),
+            set: this.portalStore.set.bind(this.portalStore),
+            select: this.portalStore.select.bind(this.portalStore),
+            setEvents: (events) => this.portalStore.set((state) => ({ ...state, events: { ...state.events, ...events } })),
+        });
+        this.hold(this.parentStore.select(), (previous) => this.portalStore.set((state) => __classPrivateFieldGet(this, _NgtPortal_instances, "m", _NgtPortal_inject).call(this, previous, state)));
+        requestAnimationFrame(() => {
+            this.portalStore.set((injectState) => __classPrivateFieldGet(this, _NgtPortal_instances, "m", _NgtPortal_inject).call(this, this.parentStore.get(), injectState));
+        });
+        this.portalContentView = this.portalContentAnchor.createEmbeddedView(this.portalContentTemplate);
+        this.portalContentView.detectChanges();
+        this.portalContentRendered = true;
+    }
+    onBeforeRender(portal) {
+        this.beforeRender.emit({
+            root: { ...this.parentStore.get(), delta: portal.delta, frame: portal.frame },
+            portal,
+        });
+    }
+    ngOnDestroy() {
+        if (this.portalContentView && !this.portalContentView.destroyed) {
+            this.portalContentView.destroy();
+        }
+        super.ngOnDestroy();
+    }
+}
+_NgtPortal_instances = new WeakSet(), _NgtPortal_inject = function _NgtPortal_inject(rootState, injectState) {
+    const intersect = { ...rootState };
+    Object.keys(intersect).forEach((key) => {
+        if (privateKeys.includes(key) ||
+            rootState[key] !== injectState[key]) {
+            delete intersect[key];
+        }
+    });
+    const inputs = this.get();
+    const { size, events, ...restInputsState } = inputs.state || {};
+    let viewport = undefined;
+    if (injectState && size) {
+        const camera = injectState.camera;
+        viewport = rootState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size);
+        if (camera !== rootState.camera)
+            updateCamera(camera, size);
+    }
+    return {
+        ...intersect,
+        scene: is.ref(inputs.container) ? inputs.container.nativeElement : inputs.container,
+        raycaster: this.raycaster,
+        pointer: this.pointer,
+        previousStore: this.parentStore,
+        events: { ...rootState.events, ...(injectState?.events || {}), ...events },
+        size: { ...rootState.size, ...size },
+        viewport: { ...rootState.viewport, ...(viewport || {}) },
+        ...restInputsState,
+    };
+};
+NgtPortal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtPortal, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtPortal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { container: "container", state: "state", autoRender: "autoRender", autoRenderPriority: "autoRenderPriority" }, outputs: { beforeRender: "beforeRender" }, providers: [NgtStore], queries: [{ propertyName: "portalContentTemplate", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "portalContentAnchor", first: true, predicate: ["portalContentAnchor"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <ng-container #portalContentAnchor>
+            <ngt-portal-before-render
+                *ngIf="autoRender && portalContentRendered"
+                [renderPriority]="autoRenderPriority"
+                [parentScene]="parentScene"
+                [parentCamera]="parentCamera"
+                (beforeRender)="onBeforeRender($event)"
+            />
+        </ng-container>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgtPortalBeforeRender, selector: "ngt-portal-before-render", inputs: ["renderPriority", "parentScene", "parentCamera"], outputs: ["beforeRender"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtPortal, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngt-portal',
+                    standalone: true,
+                    template: `
+        <ng-container #portalContentAnchor>
+            <ngt-portal-before-render
+                *ngIf="autoRender && portalContentRendered"
+                [renderPriority]="autoRenderPriority"
+                [parentScene]="parentScene"
+                [parentCamera]="parentCamera"
+                (beforeRender)="onBeforeRender($event)"
+            />
+        </ng-container>
+    `,
+                    imports: [NgIf, NgtPortalBeforeRender],
+                    providers: [NgtStore],
+                }]
+        }], propDecorators: { container: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], autoRender: [{
+                type: Input
+            }], autoRenderPriority: [{
+                type: Input
+            }], beforeRender: [{
+                type: Output
+            }], portalContentTemplate: [{
+                type: ContentChild,
+                args: [NgtPortalContent, { read: TemplateRef, static: true }]
+            }], portalContentAnchor: [{
+                type: ViewChild,
+                args: ['portalContentAnchor', { read: ViewContainerRef, static: true }]
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NGT_CATALOGUE, NgtArgs, NgtCanvas, NgtCanvasContainer, NgtPush, NgtRepeat, NgtRxStore, NgtStore, checkNeedsUpdate, checkUpdate, extend, getLocalState, injectNgtDestroy, injectNgtLoader, injectNgtRef, invalidateInstance, is, prepare, rootStateMap, startWithUndefined, updateCamera };
+export { NGT_CATALOGUE, NgtArgs, NgtCanvas, NgtPortal, NgtPortalBeforeRender, NgtPortalContent, NgtPush, NgtRepeat, NgtRxStore, NgtStore, checkNeedsUpdate, checkUpdate, createAttachFunction, extend, getLocalState, injectBeforeRender, injectNgtDestroy, injectNgtLoader, injectNgtRef, invalidateInstance, is, makeDefaultCamera, makeDefaultRenderer, makeDpr, makeId, makeObjectGraph, prepare, rootStateMap, startWithUndefined, updateCamera };
 //# sourceMappingURL=angular-three.mjs.map