angular-three 1.4.2 → 1.4.4

package/fesm2020/angular-three.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { ElementRef, Injectable, inject, InjectionToken, ViewContainerRef, TemplateRef, Directive, Input, EventEmitter, getDebugNode, RendererFactory2, ChangeDetectorRef, makeEnvironmentProviders, 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 { isObservable, of, map, from, tap, retry, catchError, share, ReplaySubject, switchMap, forkJoin, take, BehaviorSubject, startWith, combineLatest, 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';
@@ -546,6 +546,15 @@ class NgtRxStore extends RxState {
     effect(obs, sideEffectFn) {
         return this.hold(obs.pipe(tapEffect(sideEffectFn)));
     }
+    triggerChangeDetection(cdr, keys = []) {
+        let $ = this.$;
+        if (keys.length) {
+            $ = combineLatest(keys.map((key) => this.select(key).pipe(startWith(this.get(key) ?? undefined))));
+        }
+        this.hold($, () => {
+            requestAnimationFrame(() => void cdr.detectChanges());
+        });
+    }
 }
 NgtRxStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtRxStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 NgtRxStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtRxStore });
@@ -1451,7 +1460,7 @@ function removeThreeRecursive(array, parent, dispose) {
     if (array)
         [...array].forEach((child) => removeThreeChild(parent, child, dispose));
 }
-function processThreeEvent(instance, priority, eventName, callback, cdr) {
+function processThreeEvent(instance, priority, eventName, callback, cdr, targetCdr) {
     const lS = getLocalState(instance);
     if (eventName === SPECIAL_EVENTS.BEFORE_RENDER) {
         return lS.store
@@ -1478,7 +1487,7 @@ function processThreeEvent(instance, priority, eventName, callback, cdr) {
     };
     lS.handlers = {
         ...lS.handlers,
-        [eventName]: eventToHandler(updatedCallback, cdr),
+        [eventName]: eventToHandler(updatedCallback, cdr, targetCdr),
     };
     // increment the count everytime
     lS.eventCount += 1;
@@ -1495,9 +1504,11 @@ function processThreeEvent(instance, priority, eventName, callback, cdr) {
         }
     };
 }
-function eventToHandler(callback, cdr) {
+function eventToHandler(callback, cdr, targetCdr) {
     return (event) => {
         callback(event);
+        if (targetCdr)
+            targetCdr.detectChanges();
         cdr.detectChanges();
     };
 }
@@ -1947,11 +1958,16 @@ class NgtRenderer {
         // on first pass, we return the Root Scene as the root node
         if (this.root && !this.first) {
             this.first = true;
-            return this.store.createNode('three', this.store.rootScene);
+            const node = this.store.createNode('three', this.store.rootScene);
+            node.__ngt_renderer__[13 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(element).injector;
+            return node;
         }
         // handle compound
-        if (this.store.isCompound(name))
-            return this.store.createNode('compound', element);
+        if (this.store.isCompound(name)) {
+            const compound = this.store.createNode('compound', element);
+            compound.__ngt_renderer__[13 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(element).injector;
+            return compound;
+        }
         // handle portal
         if (name === SPECIAL_DOM_TAG.NGT_PORTAL) {
             return this.store.createNode('portal', element);
@@ -1991,7 +2007,9 @@ class NgtRenderer {
             }
             return node;
         }
-        return this.store.createNode('dom', element);
+        const domNode = this.store.createNode('dom', element);
+        domNode.__ngt_renderer__[13 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(element).injector;
+        return domNode;
     }
     createComment(value) {
         const comment = this.delegate.createComment(value);
@@ -2157,16 +2175,24 @@ class NgtRenderer {
         }
     }
     listen(target, eventName, callback) {
+        const targetCdr = target.__ngt_renderer__[13 /* NgtRendererClassId.injectorFactory */]?.().get(ChangeDetectorRef, null);
         // if target is DOM node, then we pass that to delegate Renderer
         if (this.store.isDOM(target)) {
-            return this.delegate.listen(target, eventName, callback);
+            const callbackWithCdr = (event) => {
+                const value = callback(event);
+                if (targetCdr)
+                    targetCdr.detectChanges();
+                this.store.rootCdr.detectChanges();
+                return value;
+            };
+            return this.delegate.listen(target, eventName, callbackWithCdr);
         }
         if (target.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' ||
             (target.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound' &&
                 target.__ngt_renderer__[6 /* NgtRendererClassId.compounded */])) {
             const instance = target.__ngt_renderer__[6 /* NgtRendererClassId.compounded */] || target;
             const priority = getLocalState(target).priority;
-            return processThreeEvent(instance, priority || 0, eventName, callback, this.store.rootCdr);
+            return processThreeEvent(instance, priority || 0, eventName, callback, this.store.rootCdr, targetCdr);
         }
         if (target.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound' &&
             !target.__ngt_renderer__[6 /* NgtRendererClassId.compounded */]) {