angular-three 1.0.0-beta.9 → 1.0.1

package/fesm2020/angular-three.mjs

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
-import { ElementRef, Injectable, inject, InjectionToken, ViewContainerRef, TemplateRef, Directive, Input, EventEmitter, getDebugNode, ChangeDetectorRef, RendererFactory2, EnvironmentInjector, createEnvironmentInjector, Component, HostBinding, Output, ViewChild, Pipe } from '@angular/core';
+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 } from '@angular/common';
+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) {
@@ -342,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__ = {
@@ -355,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) => {
@@ -840,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)
@@ -1353,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',
@@ -1456,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);
@@ -1554,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') {
@@ -1674,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;
@@ -1859,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;
             }
@@ -2626,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, NgtPush, NgtRepeat, NgtRxStore, NgtStore, checkNeedsUpdate, checkUpdate, extend, getLocalState, injectBeforeRender, 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