fix(core): clean up cdr call

Author: Chau Tran

libs/angular-three/src/lib/renderer/renderer.ts

@@ -18,7 +18,6 @@ import { NgtStore } from '../stores/store';
 import type { NgtAnyRecord } from '../types';
 import { getLocalState, prepare } from '../utils/instance';
 import { is } from '../utils/is';
-import { safeDetectChanges } from '../utils/safe-detect-changes';
 import { createSignal } from '../utils/signal';
 import { NGT_COMPOUND_PREFIXES } from './di';
 import { NgtRendererClassId } from './enums';
@@ -245,7 +244,6 @@ export class NgtRenderer implements Renderer2 {
             if (getLocalState(newChild).parent && untracked(getLocalState(newChild).parent)) return;
             // attach THREE child
             attachThreeChild(parent, newChild);
-            safeDetectChanges(this.cdr);
             // here, we handle the special case of if the parent has a compoundParent, which means this child is part of a compound parent template
             if (!cRS[NgtRendererClassId.compound]) return;
             const closestGrandparentWithCompound = this.store.getClosestParentWithCompound(parent);
@@ -397,7 +395,13 @@ export class NgtRenderer implements Renderer2 {
         ) {
             const instance = rS[NgtRendererClassId.compounded] || target;
             const priority = getLocalState(target).priority;
-            return processThreeEvent(instance, priority || 0, eventName, callback, this.zone, this.cdr);
+            const targetCdr =
+                rS[NgtRendererClassId.injectorFactory]?.().get(ChangeDetectorRef, null) ||
+                rS[NgtRendererClassId.parent]?.__ngt_renderer__?.[NgtRendererClassId.injectorFactory]?.().get(
+                    ChangeDetectorRef,
+                    null
+                );
+            return processThreeEvent(instance, priority || 0, eventName, callback, this.zone, this.cdr, targetCdr);
         }
 
         if (rS[NgtRendererClassId.type] === 'compound' && !rS[NgtRendererClassId.compounded]) {

libs/angular-three/src/lib/renderer/utils.ts

@@ -145,7 +145,8 @@ export function processThreeEvent(
     eventName: string,
     callback: (event: any) => void,
     zone: NgZone,
-    cdr: ChangeDetectorRef
+    cdr: ChangeDetectorRef,
+    targetCdr?: ChangeDetectorRef | null
 ): () => void {
     const lS = getLocalState(instance);
     if (eventName === SPECIAL_EVENTS.BEFORE_RENDER) {
@@ -170,12 +171,12 @@ export function processThreeEvent(
         if (previousHandler) previousHandler(event);
         zone.run(() => {
             callback(event);
+            safeDetectChanges(targetCdr);
             safeDetectChanges(cdr);
-            // cdr.detectChanges();
         });
     };
 
-    Object.assign(lS.handlers, { [eventName]: eventToHandler(updatedCallback) });
+    Object.assign(lS.handlers, { [eventName]: updatedCallback });
 
     // increment the count everytime
     lS.eventCount += 1;

libs/angular-three/src/lib/utils/safe-detect-changes.ts

@@ -4,7 +4,9 @@ import type { NgtAnyRecord } from '../types';
 export function safeDetectChanges(cdr: ChangeDetectorRef | undefined | null) {
     if (!cdr) return;
     try {
-        if ((cdr as NgtAnyRecord)['_attachedToViewContainer']) {
+        // dynamic created component with ViewContainerRef#createComponent does not have Context
+        // but it has _attachedToViewContainer
+        if ((cdr as NgtAnyRecord)['_attachedToViewContainer'] || !!(cdr as NgtAnyRecord)['context']) {
             cdr.detectChanges();
         }
     } catch (e) {

libs/soba/abstractions/src/gizmo-helper/gizmo-viewcube/gizmo-viewcube-edge.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, inject, Input, signal } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, Input, signal } from '@angular/core';
 import { extend, NgtArgs, NgtSignalStore, NgtThreeEvent } from 'angular-three';
 import { BoxGeometry, Mesh, MeshBasicMaterial, Vector3 } from 'three';
 import { NGTS_GIZMO_HELPER_API } from '../gizmo-helper';
@@ -35,7 +35,6 @@ export class NgtsGizmoViewcubeEdgeCube extends NgtSignalStore<{
     dimensions: [number, number, number];
 }> {
     readonly #gizmoHelperApi = inject(NGTS_GIZMO_HELPER_API);
-    readonly #cdr = inject(ChangeDetectorRef);
 
     protected readonly viewcubeInputs = inject(NgtsGizmoViewcubeInputs);
 
@@ -60,13 +59,11 @@ export class NgtsGizmoViewcubeEdgeCube extends NgtSignalStore<{
     onPointerMove(event: NgtThreeEvent<PointerEvent>) {
         event.stopPropagation();
         this.hover.set(true);
-        this.#cdr.detectChanges();
     }
 
     onPointerOut(event: NgtThreeEvent<PointerEvent>) {
         event.stopPropagation();
         this.hover.set(false);
-        this.#cdr.detectChanges();
     }
 
     onClick(event: NgtThreeEvent<MouseEvent>) {

libs/soba/abstractions/src/gizmo-helper/gizmo-viewcube/gizmo-viewcube-face.ts

@@ -1,5 +1,5 @@
 import { DOCUMENT } from '@angular/common';
-import { ChangeDetectorRef, Component, computed, CUSTOM_ELEMENTS_SCHEMA, inject, Input, signal } from '@angular/core';
+import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, inject, Input, signal } from '@angular/core';
 import { extend, NgtRepeat, NgtSignalStore, NgtStore, NgtThreeEvent } from 'angular-three';
 import { BoxGeometry, CanvasTexture, Mesh, MeshLambertMaterial } from 'three';
 import { NGTS_GIZMO_HELPER_API } from '../gizmo-helper';
@@ -101,7 +101,6 @@ export class NgtsGizmoViewcubeFaceMaterial extends NgtSignalStore<{
 })
 export class NgtsGizmoViewcubeFaceCube {
     readonly #gizmoHelperApi = inject(NGTS_GIZMO_HELPER_API);
-    readonly #cdr = inject(ChangeDetectorRef);
 
     protected readonly viewcubeInputs = inject(NgtsGizmoViewcubeInputs);
 
@@ -110,13 +109,11 @@ export class NgtsGizmoViewcubeFaceCube {
     onPointerMove(event: NgtThreeEvent<PointerEvent>) {
         event.stopPropagation();
         this.hover.set(Math.floor(event.faceIndex! / 2));
-        this.#cdr.detectChanges();
     }
 
     onPointerOut(event: NgtThreeEvent<PointerEvent>) {
         event.stopPropagation();
         this.hover.set(-1);
-        this.#cdr.detectChanges();
     }
 
     onClick(event: NgtThreeEvent<MouseEvent>) {

libs/soba/abstractions/src/gizmo-helper/gizmo-viewport/gizmo-viewport-axis.ts

@@ -1,14 +1,5 @@
 import { DOCUMENT } from '@angular/common';
-import {
-    ChangeDetectorRef,
-    Component,
-    computed,
-    CUSTOM_ELEMENTS_SCHEMA,
-    EventEmitter,
-    inject,
-    Input,
-    signal,
-} from '@angular/core';
+import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, inject, Input, signal } from '@angular/core';
 import { extend, NgtArgs, NgtSignalStore, NgtStore, NgtThreeEvent } from 'angular-three';
 import { BoxGeometry, CanvasTexture, Group, Mesh, MeshBasicMaterial, Sprite, SpriteMaterial } from 'three';
 
@@ -88,7 +79,6 @@ export class NgtsGizmoViewportAxisHead extends NgtSignalStore<{
     clickEmitter: EventEmitter<NgtThreeEvent<MouseEvent>>;
 }> {
     readonly #document = inject(DOCUMENT);
-    readonly #cdr = inject(ChangeDetectorRef);
     readonly #store = inject(NgtStore);
     readonly gl = this.#store.select('gl');
 
@@ -170,7 +160,6 @@ export class NgtsGizmoViewportAxisHead extends NgtSignalStore<{
         if (!this.get('disabled')) {
             event.stopPropagation();
             this.active.set(true);
-            this.#cdr.detectChanges();
         }
     }
 
@@ -181,7 +170,6 @@ export class NgtsGizmoViewportAxisHead extends NgtSignalStore<{
             } else {
                 event.stopPropagation();
                 this.active.set(false);
-                this.#cdr.detectChanges();
             }
         }
     }

libs/soba/src/shaders/mesh-refraction-material.stories.ts

@@ -20,36 +20,35 @@ import { makeStoryFunction, StorybookSetup } from '../setup-canvas';
     standalone: true,
     template: `
         <ngts-cube-camera [resolution]="256" [frames]="1" [envMap]="cameraTexture()">
-            <ng-template [ngtsCameraContent]="true" let-fbo="fbo">
-                <ngts-caustics
-                    color="white"
-                    [backside]="true"
-                    [position]="[0, -0.5, 0]"
-                    [lightSource]="[5, 5, -10]"
-                    [worldRadius]="0.1"
-                    [ior]="1.8"
-                    [backsideIOR]="1.1"
-                    [intensity]="0.1"
+            <ngts-caustics
+                *ngtsCameraContent="true; fbo as fbo"
+                color="white"
+                [backside]="true"
+                [position]="[0, -0.5, 0]"
+                [lightSource]="[5, 5, -10]"
+                [worldRadius]="0.1"
+                [ior]="1.8"
+                [backsideIOR]="1.1"
+                [intensity]="0.1"
+            >
+                <ngt-mesh
+                    *ngIf="diamondGeometry() as diamondGeometry"
+                    [castShadow]="true"
+                    [geometry]="diamondGeometry"
+                    [rotation]="[0, 0, 0.715]"
+                    [position]="[0, -0.175 + 0.5, 0]"
                 >
-                    <ngt-mesh
-                        *ngIf="diamondGeometry() as diamondGeometry"
-                        [castShadow]="true"
-                        [geometry]="diamondGeometry"
-                        [rotation]="[0, 0, 0.715]"
-                        [position]="[0, -0.175 + 0.5, 0]"
-                    >
-                        <ngts-mesh-refraction-material
-                            [envMap]="fbo.texture"
-                            [bounces]="3"
-                            [aberrationStrength]="0.01"
-                            [ior]="2.75"
-                            [fresnel]="1"
-                            [fastChroma]="true"
-                            [toneMapped]="false"
-                        />
-                    </ngt-mesh>
-                </ngts-caustics>
-            </ng-template>
+                    <ngts-mesh-refraction-material
+                        [envMap]="fbo.texture"
+                        [bounces]="3"
+                        [aberrationStrength]="0.01"
+                        [ior]="2.75"
+                        [fresnel]="1"
+                        [fastChroma]="true"
+                        [toneMapped]="false"
+                    />
+                </ngt-mesh>
+            </ngts-caustics>
         </ngts-cube-camera>
     `,
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -136,6 +135,7 @@ class Diamond {
     `,
     imports: [
         Diamond,
+        NgIf,
         NgtArgs,
         NgtsMeshTranmissionMaterial,
         NgtsAccumulativeShadows,
@@ -156,5 +156,5 @@ export default {
 } as Meta;
 
 export const Default = makeStoryFunction(DefaultMeshRefractionMaterialStory, {
-    camera: { fov: 45, position: [-5, 0.5, 5] },
+    camera: { fov: 45, position: [-5, 0.5, 0] },
 });

libs/soba/staging/src/stage/stage.ts

@@ -11,7 +11,7 @@ import {
     OnChanges,
     Output,
 } from '@angular/core';
-import { createSignal, extend, NgtArgs, NgtSignalStore } from 'angular-three';
+import { createSignal, extend, NgtArgs, NgtSignalStore, safeDetectChanges } from 'angular-three';
 import { AmbientLight, Group, PointLight, SpotLight, Vector2 } from 'three';
 import { NgtsAccumulativeShadows } from '../accumulative-shadows/accumulative-shadows';
 import { NgtsRandomizedLights } from '../accumulative-shadows/randomized-lights';
@@ -312,7 +312,7 @@ export class NgtsStage extends NgtSignalStore<NgtsStageProps> {
     }) {
         const { boundingSphere, width, height, depth } = props;
         this.boundingState.set({ radius: boundingSphere.radius, width, height, depth });
-        this.#cdr.detectChanges();
+        safeDetectChanges(this.#cdr);
         if (this.centered.observed) this.centered.emit(props);
     }
 }