fix(core): adjust a lot in renderer

Author: nartc

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

@@ -375,6 +375,10 @@ export class NgtRenderer2 implements Renderer2 {
 				this.appendChild(parent, child);
 			}
 
+			for (const platformChildNode of newChild['childNodes'] || []) {
+				this.appendChild(parent, platformChildNode);
+			}
+
 			return;
 		}
 
@@ -642,6 +646,17 @@ export class NgtRenderer2 implements Renderer2 {
 		return rendererParentNode ?? this.delegateRenderer.parentNode(node);
 	}
 
+	// removeAttribute = this.delegateRenderer.removeAttribute.bind(this.delegateRenderer);
+	removeAttribute(el: NgtRendererNode, name: string, namespace?: string | null): void {
+		const rS = el.__ngt_renderer__;
+		if (!rS || rS[NgtRendererClassId.destroyed]) return this.delegateRenderer.removeAttribute(el, name, namespace);
+
+		if (rS[NgtRendererClassId.type] === 'three') {
+			return;
+		}
+		return this.delegateRenderer.removeAttribute(el, name, namespace);
+	}
+
 	setAttribute(el: NgtRendererNode, name: string, value: string, namespace?: string | null): void {
 		const rS = el.__ngt_renderer__;
 		if (!rS) return this.delegateRenderer.setAttribute(el, name, value, namespace);
@@ -817,7 +832,14 @@ export class NgtRenderer2 implements Renderer2 {
 				};
 			}
 
-			return iS.setPointerEvent?.(eventName as keyof NgtEventHandlers, callback) || (() => {});
+			const cleanup = iS.setPointerEvent?.(eventName as keyof NgtEventHandlers, callback) || (() => {});
+
+			// this means the object has already been attaached to the parent and has its store propgated
+			if (iS.store) {
+				iS.addInteraction?.(iS.store);
+			}
+
+			return cleanup;
 		}
 
 		return this.delegateRenderer.listen(target, eventName, callback);
@@ -905,5 +927,4 @@ export class NgtRenderer2 implements Renderer2 {
 	selectRootElement = this.delegateRenderer.selectRootElement.bind(this.delegateRenderer);
 	nextSibling = this.delegateRenderer.nextSibling.bind(this.delegateRenderer);
 	setValue = this.delegateRenderer.setValue.bind(this.delegateRenderer);
-	removeAttribute = this.delegateRenderer.removeAttribute.bind(this.delegateRenderer);
 }

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

@@ -46,6 +46,31 @@ export function kebabToPascal(str: string): string {
 	return pascalStr;
 }
 
+function propagateStoreRecursively(node: NgtInstanceNode, parentNode: NgtInstanceNode) {
+	const iS = getInstanceState(node);
+	const pIS = getInstanceState(parentNode);
+
+	if (!iS || !pIS) return;
+
+	// assign store on child if not already exist
+	// or child store is not the same as parent store
+	// or child store is the parent of parent store
+	if (!iS.store || iS.store !== pIS.store || iS.store === pIS.store.snapshot.previousRoot) {
+		iS.store = pIS.store;
+
+		// Call addInteraction if it exists
+		iS.addInteraction?.(pIS.store);
+
+		// Collect all children (objects and nonObjects)
+		const children = [...(iS.objects ? untracked(iS.objects) : []), ...(iS.nonObjects ? untracked(iS.nonObjects) : [])];
+
+		// Recursively reassign the store for each child
+		for (const child of children) {
+			propagateStoreRecursively(child, node);
+		}
+	}
+}
+
 export function attachThreeNodes(parent: NgtInstanceNode, child: NgtInstanceNode) {
 	const pIS = getInstanceState(parent);
 	const cIS = getInstanceState(child);
@@ -57,25 +82,8 @@ export function attachThreeNodes(parent: NgtInstanceNode, child: NgtInstanceNode
 	// whether the child is added to the parent with parent.add()
 	let added = false;
 
-	// assign store on child if not already exist
-	// or child store is not the same as parent store
-	// or child store is the parent of parent store
-	if (!cIS.store || cIS.store !== pIS.store || cIS.store === pIS.store.snapshot.previousRoot) {
-		cIS.store = pIS.store;
-
-		cIS.addInteraction?.(cIS.store);
-
-		const grandChildren = [
-			...(cIS.objects ? untracked(cIS.objects) : []),
-			...(cIS.nonObjects ? untracked(cIS.nonObjects) : []),
-		];
-		for (const grandChild of grandChildren) {
-			const grandChildIS = getInstanceState(grandChild);
-			if (!grandChildIS) continue;
-			grandChildIS.store = cIS.store;
-			grandChildIS.addInteraction?.(cIS.store);
-		}
-	}
+	// propagate store recursively
+	propagateStoreRecursively(child, parent);
 
 	if (cIS.attach) {
 		const attachProp = cIS.attach;

libs/core/src/lib/utils/apply-props.ts

@@ -48,6 +48,10 @@ export function applyProps<T extends NgtAnyRecord>(instance: NgtInstanceState<T>
 	for (let i = 0; i < changes.length; i++) {
 		let [key, value] = changes[i];
 
+		// Ignore setting undefined props
+		// https://github.com/pmndrs/react-three-fiber/issues/274
+		if (value === undefined) continue;
+
 		// Alias (output)encoding => (output)colorSpace (since r152)
 		// https://github.com/pmndrs/react-three-fiber/pull/2829
 		// if (is.colorSpaceExist(instance)) {

libs/soba/gizmos/src/lib/pivot-controls/pivot-controls.ts

@@ -128,7 +128,13 @@ const defaultOptions: NgtsPivotControlsOptions = {
 	selector: 'ngts-pivot-controls',
 	template: `
 		<ngt-group #parent>
-			<ngt-group #group [matrix]="matrix()" [matrixAutoUpdate]="false" [parameters]="parameters()">
+			<ngt-group
+				#group
+				[matrix]="matrix()"
+				[matrixAutoUpdate]="false"
+				[parameters]="parameters()"
+				(pointerover)="(undefined)"
+			>
 				<ngt-group #gizmo [visible]="visible()" [position]="offset()" [rotation]="rotation()">
 					@if (enabled()) {
 						@let _disableAxes = disableAxes();

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

@@ -14,7 +14,7 @@ import { NgtArgs } from 'angular-three';
 import { injectGLTF } from 'angular-three-soba/loaders';
 import { NgtsAnimation, injectAnimations } from 'angular-three-soba/misc';
 import { injectMatcapTexture } from 'angular-three-soba/staging';
-import { Bone, Group, MeshStandardMaterial, Object3D, SkinnedMesh } from 'three';
+import { Bone, Group, MeshStandardMaterial, Object3D, SRGBColorSpace, SkinnedMesh } from 'three';
 import { GLTF } from 'three-stdlib';
 import { select, storyDecorators, storyObject } from '../setup-canvas';
 
@@ -78,8 +78,16 @@ class DefaultAnimationsStory {
 	animation = input('Strut');
 
 	gltf = injectGLTF<BotGLTF>(() => './ybot.glb');
-	matcapBody = injectMatcapTexture(() => '293534_B2BFC5_738289_8A9AA7');
-	matcapJoints = injectMatcapTexture(() => '3A2412_A78B5F_705434_836C47');
+	matcapBody = injectMatcapTexture(() => '293534_B2BFC5_738289_8A9AA7', {
+		onLoad: (textures) => {
+			textures[0].colorSpace = SRGBColorSpace;
+		},
+	});
+	matcapJoints = injectMatcapTexture(() => '3A2412_A78B5F_705434_836C47', {
+		onLoad: (textures) => {
+			textures[0].colorSpace = SRGBColorSpace;
+		},
+	});
 
 	boneRef = viewChild<ElementRef<Bone>>('bone');
 }

libs/soba/src/performances/instances.stories.ts

@@ -148,7 +148,7 @@ export default {
 } as Meta;
 
 export const Default = storyObject(DefaultInstancesStory, {
-	controls: false,
+	controls: null,
 	lights: false,
 	background: 'white',
 	camera: { position: [0, 0, 20], fov: 50 },

libs/soba/src/staging/bb-anchor.stories.ts

@@ -52,7 +52,7 @@ class BBAnchorWrapper {
 	template: `
 		<bb-anchor-wrapper [options]="options()" [drawBoundingBox]="drawBoundingBox()">
 			<ngts-html>
-				<div [ngtsHTMLContent]="{ center: true, containerStyle: { color: 'white', whiteSpace: 'nowrap' } }">
+				<div [htmlContent]="{ center: true, containerStyle: { color: 'white', whiteSpace: 'nowrap' } }">
 					HTML content
 				</div>
 			</ngts-html>

libs/soba/src/staging/bounds.stories.ts

@@ -128,5 +128,5 @@ export default {
 export const Default = storyFunction(DefaultBoundsStory, {
 	camera: { position: [0, -10, 80], fov: 50 },
 	lights: false,
-	controls: false,
+	controls: null,
 });