fix(core): use behavior subject for parent

Author: Chau Tran

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

@@ -8,11 +8,10 @@ import {
     effect,
     getDebugNode,
     inject,
-    signal,
-    untracked,
     type Renderer2,
     type RendererType2,
 } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
 import { NGT_CATALOGUE } from '../di/catalogue';
 import type { NgtInjectedRef } from '../di/ref';
 import { NgtStore } from '../stores/store';
@@ -117,7 +116,7 @@ export class NgtRenderer implements Renderer2 {
                     { __ngt_renderer__: { rawValue: undefined } },
                     // NOTE: we assign this manually to a raw value node
                     // because we say it is a 'three' node but we're not using prepare()
-                    { __ngt__: { isRaw: true, parent: signal(null) } }
+                    { __ngt__: { isRaw: true, parent: new BehaviorSubject(null) } }
                 )
             );
         }
@@ -243,7 +242,7 @@ export class NgtRenderer implements Renderer2 {
         // if both are three instances, straightforward case
         if (pRS[NgtRendererClassId.type] === 'three' && cRS[NgtRendererClassId.type] === 'three') {
             // if child already attached to a parent, skip
-            if (getLocalState(newChild).parent && untracked(getLocalState(newChild).parent)) return;
+            if (getLocalState(newChild).parent?.value) return;
             // attach THREE child
             attachThreeChild(parent, newChild);
             // here, we handle the special case of if the parent has a compoundParent, which means this child is part of a compound parent template
@@ -284,7 +283,7 @@ export class NgtRenderer implements Renderer2 {
 
         const shouldFindGrandparentInstance =
             // if child is three but haven't been attached to a parent yet
-            (cRS[NgtRendererClassId.type] === 'three' && !untracked(getLocalState(newChild).parent)) ||
+            (cRS[NgtRendererClassId.type] === 'three' && !getLocalState(newChild).parent.value) ||
             // or both parent and child are DOM elements
             // or they are compound AND haven't had a THREE instance yet
             ((pRS[NgtRendererClassId.type] === 'dom' ||

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

@@ -221,7 +221,7 @@ export class NgtRendererStore {
             return;
         }
 
-        const parent = getLocalState(node).parent() || rS[NgtRendererClassId.parent];
+        const parent = getLocalState(node).parent?.value || rS[NgtRendererClassId.parent];
 
         // [rawValue]
         if (getLocalState(node).isRaw && name === SPECIAL_PROPERTIES.VALUE) {

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

@@ -75,9 +75,7 @@ export function attachThreeChild(parent: NgtInstanceNode, child: NgtInstanceNode
             // attach
             if (cLS.isRaw) {
                 if (cLS.parent) {
-                    queueMicrotask(() => {
-                        cLS.parent.set(parent);
-                    });
+                    cLS.parent.next(parent);
                 }
                 // at this point we don't have rawValue yet, so we bail and wait until the Renderer recalls attach
                 if (child.__ngt_renderer__[NgtRendererClassId.rawValue] === undefined) return;
@@ -96,9 +94,7 @@ export function attachThreeChild(parent: NgtInstanceNode, child: NgtInstanceNode
     pLS.add(child, added ? 'objects' : 'nonObjects');
 
     if (cLS.parent) {
-        queueMicrotask(() => {
-            cLS.parent.set(parent);
-        });
+        cLS.parent.next(parent);
     }
 
     if (cLS.afterAttach) cLS.afterAttach.emit({ parent, node: child });
@@ -112,9 +108,7 @@ export function removeThreeChild(parent: NgtInstanceNode, child: NgtInstanceNode
     const cLS = getLocalState(child);
 
     // clear parent ref
-    queueMicrotask(() => {
-        cLS.parent?.set(null);
-    });
+    cLS.parent?.next(null);
 
     // remove child from parent
     if (untracked(pLS.objects)) pLS.remove(child, 'objects');

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

@@ -1,4 +1,5 @@
 import type { ElementRef, EventEmitter, WritableSignal } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
 import * as THREE from 'three';
 import type { NgtSignalStore } from './stores/signal.store';
 import { NgtObject3DNode } from './three-types';
@@ -255,7 +256,7 @@ export type NgtInstanceLocalState = {
     // native props signal
     nativeProps: NgtSignalStore<NgtAnyRecord>;
     // parent based on attach three instance
-    parent: WritableSignal<NgtInstanceNode | null>;
+    parent: BehaviorSubject<NgtInstanceNode | null>;
     // if this THREE instance is a ngt-primitive
     primitive?: boolean;
     // if this THREE object has any events bound to it

libs/angular-three/src/lib/utils/apply-props.ts

@@ -1,4 +1,3 @@
-import { untracked } from '@angular/core';
 import * as THREE from 'three';
 import type { NgtAnyRecord, NgtInstanceNode } from '../types';
 import { getLocalState, invalidateInstance } from './instance';
@@ -112,7 +111,7 @@ export function applyProps(instance: NgtInstanceNode, props: NgtAnyRecord): NgtI
     }
 
     const instanceHandlers = localState.eventCount;
-    const parent = localState.parent ? untracked(localState.parent) : null;
+    const parent = localState.parent?.value;
 
     if (parent && rootState.internal && instance['raycast'] && instanceHandlers !== localState.eventCount) {
         // Pre-emptively remove the instance from the interaction manager

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

@@ -1,4 +1,5 @@
 import { signal, untracked } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
 import { NgtSignalStore } from '../stores/signal.store';
 import type { NgtAnyRecord, NgtInstanceLocalState, NgtInstanceNode } from '../types';
 import { checkUpdate } from './update';
@@ -32,7 +33,7 @@ export function prepare<TInstance extends object = NgtAnyRecord>(
         instance.__ngt__ = {
             previousAttach: null,
             store: null,
-            parent: signal(null),
+            parent: new BehaviorSubject(null),
             memoized: {},
             eventCount: 0,
             handlers: {},
@@ -51,13 +52,13 @@ export function prepare<TInstance extends object = NgtAnyRecord>(
                     } else {
                         instance.__ngt__[type].update((prev) => [...prev, object]);
                     }
-                    notifyAncestors(untracked(instance.__ngt__.parent));
+                    notifyAncestors(instance.__ngt__.parent.value);
                 });
             },
             remove: (object, type) => {
                 queueMicrotask(() => {
                     instance.__ngt__[type].update((prev) => prev.filter((o) => o !== object));
-                    notifyAncestors(untracked(instance.__ngt__.parent));
+                    notifyAncestors(instance.__ngt__.parent.value);
                 });
             },
             ...rest,
@@ -72,5 +73,5 @@ function notifyAncestors(instance: NgtInstanceNode | null) {
     const localState = getLocalState(instance);
     if (localState.objects) localState.objects.update((prev) => prev);
     if (localState.nonObjects) localState.nonObjects.update((prev) => prev);
-    notifyAncestors(untracked(localState.parent));
+    notifyAncestors(localState.parent.value);
 }

libs/soba/materials/src/mesh-reflector-material/mesh-reflector-material.ts

@@ -261,7 +261,7 @@ export class NgtsMeshReflectorMaterial extends NgtSignalStore<NgtsMeshReflectorM
 
     #onBeforeRender(state: NgtRenderState) {
         if (!this.materialRef.nativeElement) return;
-        const parent = getLocalState(this.materialRef.nativeElement).parent();
+        const parent = getLocalState(this.materialRef.nativeElement).parent?.value;
         if (!parent) return;
 
         const { gl, scene } = state;
@@ -288,7 +288,7 @@ export class NgtsMeshReflectorMaterial extends NgtSignalStore<NgtsMeshReflectorM
     }
 
     #beforeRender(state: NgtRenderState) {
-        const parent = getLocalState(this.materialRef.nativeElement).parent();
+        const parent = getLocalState(this.materialRef.nativeElement).parent?.value;
         if (!parent) return;
 
         const { camera } = state;

libs/soba/materials/src/mesh-refraction-material/mesh-refraction-material.ts

@@ -137,7 +137,7 @@ export class NgtsMeshRefractionMaterial extends NgtSignalStore<NgtsMeshRefractio
         effect(() => {
             const material = this.materialRef.nativeElement;
             if (!material) return;
-            const geometry = getLocalState(material).parent()?.geometry;
+            const geometry = getLocalState(material).parent?.value?.geometry;
             if (geometry) {
                 (material as any).bvh = new MeshBVHUniformStruct();
                 (material as any).bvh.updateFrom(

libs/soba/materials/src/mesh-transmission-material/mesh-transmission-material.ts

@@ -209,7 +209,7 @@ export class NgtsMeshTranmissionMaterial extends NgtSignalStore<NgtsMeshTranmiss
             this.materialRef.nativeElement.time = state.clock.getElapsedTime();
             // Render only if the buffer matches the built-in and no transmission sampler is set
             if (this.materialRef.nativeElement.buffer === this.fboMainRef().texture && !transmissionSampler) {
-                parent = getLocalState(this.materialRef.nativeElement).parent() as THREE.Object3D;
+                parent = getLocalState(this.materialRef.nativeElement).parent?.value as THREE.Object3D;
                 if (parent) {
                     // Save defaults
                     oldTone = state.gl.toneMapping;