angular-three 1.0.0-beta.1 → 1.0.0-beta.10

package/fesm2020/angular-three.mjs

@@ -1,12 +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 } 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 } from 'rxjs';
+import { ElementRef, Injectable, inject, InjectionToken, ViewContainerRef, TemplateRef, Directive, Input, EventEmitter, getDebugNode, ChangeDetectorRef, RendererFactory2, EnvironmentInjector, createEnvironmentInjector, Component, HostBinding, Output, ViewChild, Pipe } 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 { RxState, selectSlice } from '@rx-angular/state';
-import * as THREE from 'three';
 import { ɵDomRendererFactory2 } from '@angular/platform-browser';
 
+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 };
     subs.add(sub);
@@ -364,55 +466,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 +840,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)
@@ -2181,72 +2234,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,9 +2371,12 @@ class NgtCanvas extends NgtRxStore {
                     compoundPrefixes: this.compoundPrefixes,
                 }),
             ], this.envInjector);
-            this.glRef = this.glAnchor.createComponent(this.scene, { environmentInjector: this.glEnvInjector });
-            this.glRef.changeDetectorRef.detectChanges();
+            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();
             this.cdr.detectChanges();
         });
     }
@@ -2400,29 +2390,34 @@ class NgtCanvas extends NgtRxStore {
         injectNgtLoader.destroy();
         super.ngOnDestroy();
     }
+    overrideDetectChanges() {
+        const originalDetectChanges = this.cdr.detectChanges.bind(this.cdr);
+        this.cdr.detectChanges = () => {
+            originalDetectChanges();
+            this.glRef?.changeDetectorRef.detectChanges();
+        };
+    }
 }
 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: { scene: "scene", 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']
             }], pointerEvents: [{
                 type: HostBinding,
                 args: ['style.pointerEvents']
-            }], scene: [{
+            }], sceneGraph: [{
                 type: Input
             }], compoundPrefixes: [{
                 type: Input
@@ -2463,9 +2458,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 args: ['glCanvas', { static: true }]
             }], glAnchor: [{
                 type: ViewChild,
-                args: ['glAnchor', { static: true, read: ViewContainerRef }]
+                args: ['glCanvas', { static: true, read: ViewContainerRef }]
             }] } });
 
+/**
+ * A utility injection fn that can be used in other injection fn to provide the destroy capability.
+ */
+function injectNgtDestroy(cb) {
+    try {
+        const cdr = inject(ChangeDetectorRef);
+        const destroy$ = new ReplaySubject();
+        queueMicrotask(() => {
+            cdr.onDestroy(() => {
+                destroy$.next();
+                destroy$.complete();
+                cb?.();
+            });
+        });
+        return { destroy$, cdr };
+    }
+    catch (e) {
+        console.warn(`[NGT] injectNgtDestroy is being called outside of Constructor Context`);
+        return {};
+    }
+}
+
+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)) {
+        ref = initialValue;
+    }
+    let lastValue = ref.nativeElement;
+    const cdRefs = [];
+    const ref$ = new BehaviorSubject(lastValue);
+    const { destroy$, cdr } = injectNgtDestroy(() => {
+        ref$.complete();
+    });
+    cdRefs.push(cdr);
+    const obs$ = ref$.asObservable().pipe(distinctUntilChanged(), takeUntil(destroy$));
+    const subscribe = (callback) => {
+        return obs$.subscribe((current) => {
+            callback(current, lastValue);
+            lastValue = current;
+        });
+    };
+    const $ = obs$.pipe(filter((value, index) => index > 0 || value != null), takeUntil(destroy$));
+    const children$ = (type = 'objects') => $.pipe(switchMap((instance) => {
+        const localState = getLocalState(instance);
+        if (localState.objects && localState.nonObjects) {
+            return merge(localState.objects, localState.nonObjects).pipe(map(() => {
+                try {
+                    return type === 'both'
+                        ? [...localState.objects.value, ...localState.nonObjects.value]
+                        : localState[type].value;
+                }
+                catch (e) {
+                    console.error(`[NGT] Exception in accessing children of ${instance}`);
+                    return [];
+                }
+            }));
+        }
+        return of([]);
+    }), filter((children, index) => index > 0 || children.length > 0), takeUntil(destroy$));
+    Object.defineProperty(ref, 'nativeElement', {
+        set: (newVal) => {
+            if (ref.nativeElement !== newVal) {
+                ref$.next(newVal);
+                lastValue = ref.nativeElement;
+                ref.nativeElement = newVal;
+                // clone the cdRefs so we can mutate cdRefs in the loop
+                const cds = [...cdRefs];
+                for (let i = 0; i < cds.length; i++) {
+                    const cd = cds[i];
+                    // if a ChangeDetectorRef is destroyed, we stop tracking it and go to the next one
+                    if (cd.destroyed) {
+                        cdRefs.splice(i, 1);
+                        continue;
+                    }
+                    // during creation phase, 'context' on ViewRef will be null
+                    // we check the "context" to avoid running detectChanges during this phase.
+                    // becuase there's nothing to check
+                    if (cd['context']) {
+                        cd.detectChanges();
+                    }
+                }
+            }
+        },
+        get: () => ref$.value,
+    });
+    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) : [];
@@ -2480,9 +2575,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 type: Input
             }] } });
 
+function isPromise(value) {
+    return ((value instanceof Promise || Object.prototype.toString.call(value) === '[object Promise]') &&
+        typeof value['then'] === 'function');
+}
+class NgtPush {
+    constructor() {
+        this.cdr = inject(ChangeDetectorRef);
+        this.parentCdr = inject(ChangeDetectorRef, { skipSelf: true, optional: true });
+    }
+    transform(value, defaultValue = null) {
+        if (this.obj === value) {
+            return this.latestValue;
+        }
+        this.obj = value;
+        this.latestValue = defaultValue;
+        if (this.sub) {
+            this.sub.unsubscribe();
+        }
+        if (isObservable(this.obj)) {
+            this.sub = this.obj.subscribe(this.updateValue.bind(this));
+        }
+        else if (isPromise(this.obj)) {
+            this.obj.then(this.updateValue.bind(this));
+        }
+        else {
+            throw new Error(`[NGT] Invalid value passed to ngtPush pipe`);
+        }
+        return this.latestValue;
+    }
+    updateValue(val) {
+        this.latestValue = val;
+        this.cdr.detectChanges();
+        if (this.parentCdr) {
+            this.parentCdr.detectChanges();
+        }
+    }
+    ngOnDestroy() {
+        if (this.sub) {
+            this.sub.unsubscribe();
+        }
+        this.latestValue = undefined;
+        this.obj = undefined;
+    }
+}
+NgtPush.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtPush, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+NgtPush.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1.1", ngImport: i0, type: NgtPush, isStandalone: true, name: "ngtPush", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtPush, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngtPush', pure: false, standalone: true }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NGT_CATALOGUE, NgtArgs, NgtCanvas, NgtCanvasContainer, NgtRepeat, extend };
+export { NGT_CATALOGUE, NgtArgs, NgtCanvas, NgtPush, NgtRepeat, NgtRxStore, NgtStore, checkNeedsUpdate, checkUpdate, extend, getLocalState, injectBeforeRender, injectNgtDestroy, injectNgtLoader, injectNgtRef, invalidateInstance, is, prepare, rootStateMap, startWithUndefined, updateCamera };
 //# sourceMappingURL=angular-three.mjs.map