fix(core): bail if parent is null in removeChild but do clean up if there's internal child

Author: nartc

libs/core/src/lib/renderer/index.ts

@@ -280,7 +280,7 @@ export class NgtRenderer implements Renderer2 {
 		this.appendChild(parent, newChild);
 	}
 
-	removeChild(parent: NgtRendererNode, oldChild: NgtRendererNode, isHostElement?: boolean | undefined): void {
+	removeChild(parent: NgtRendererNode | null, oldChild: NgtRendererNode, isHostElement?: boolean | undefined): void {
 		if (parent == null) {
 			parent = (untracked(() => getLocalState(oldChild)?.parent) ||
 				oldChild.__ngt_renderer__[NgtRendererClassId.parent]) as NgtRendererNode;
@@ -290,9 +290,14 @@ export class NgtRenderer implements Renderer2 {
 
 		// if parent is still falsy, we don't know what to do with the parent.
 		// we'll just remove the child and destroy it
-		if (parent == null && cRS?.[NgtRendererClassId.type] !== 'three') {
-			removeThreeChild(oldChild, undefined, true);
-			this.destroyInternal(oldChild, undefined);
+		if (parent == null) {
+			if (cRS) {
+				if (cRS[NgtRendererClassId.type] === 'three') {
+					removeThreeChild(oldChild, undefined, true);
+				}
+				this.destroyInternal(oldChild, undefined);
+			}
+
 			return;
 		}
 

libs/soba/src/misc/decal.stories.ts

@@ -11,7 +11,7 @@ import {
 	viewChild,
 } from '@angular/core';
 import { Meta } from '@storybook/angular';
-import { NgtArgs, NgtThreeEvent } from 'angular-three';
+import { NgtArgs } from 'angular-three';
 import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import { injectTexture } from 'angular-three-soba/loaders';
@@ -62,24 +62,26 @@ class LoopOverInstancedBufferAttribute {
 
 		<ngt-directional-light [position]="[1, -1, 1]" [intensity]="Math.PI" />
 
-		<ngt-mesh #mesh (click)="onClick($any($event))">
+		<ngt-mesh #mesh>
 			<ngt-sphere-geometry *args="[3, 32, 32]" />
 			<ngt-mesh-physical-material color="tomato" [roughness]="0.5" />
 		</ngt-mesh>
 
-		<decal-loop-over-instanced-buffer-attribute [buffer]="bufferAttribute()">
-			<ngts-decal *="let options" [mesh]="$any(mesh)" [options]="options">
-				<ngt-mesh-physical-material
-					[roughness]="0.2"
-					[transparent]="true"
-					[depthTest]="false"
-					[map]="Math.random() > 0.5 ? decals()?.reactMap : decals()?.threeMap"
-					[alphaTest]="0"
-					[polygonOffset]="true"
-					[polygonOffsetFactor]="-10"
-				/>
-			</ngts-decal>
-		</decal-loop-over-instanced-buffer-attribute>
+		@if (decals(); as decals) {
+			<decal-loop-over-instanced-buffer-attribute [buffer]="bufferAttribute()">
+				<ngts-decal *="let options" [mesh]="meshRef()" [options]="options">
+					<ngt-mesh-physical-material
+						[roughness]="0.2"
+						[transparent]="true"
+						[depthTest]="false"
+						[map]="Math.random() > 0.5 ? decals.reactMap : decals.threeMap"
+						[alphaTest]="0"
+						[polygonOffset]="true"
+						[polygonOffsetFactor]="-10"
+					/>
+				</ngts-decal>
+			</decal-loop-over-instanced-buffer-attribute>
+		}
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
@@ -108,10 +110,6 @@ class DefaultDecalStory {
 			dummy.lookAt(p.add(normal));
 		},
 	}));
-
-	onClick(event: NgtThreeEvent<PointerEvent>) {
-		console.log(event);
-	}
 }
 
 export default {