docs(soba): adjusting stories; some ain't working

Author: nartc

apps/docs/src/components/scenes/hud/scene-graph.ts

@@ -4,7 +4,6 @@ import {
 	Component,
 	ElementRef,
 	computed,
-	effect,
 	inject,
 	input,
 	signal,
@@ -83,7 +82,7 @@ export class FaceMaterial {
 			[position]="position()"
 			[scale]="scale()"
 			(click)="clicked.set(!clicked())"
-			(pointermove)="onPointerMove($event)"
+			(pointermove)="$event.stopPropagation(); hovered.set($any($event).face.materialIndex)"
 			(pointerout)="hovered.set(-1)"
 		>
 			<ngt-box-geometry />
@@ -106,22 +105,6 @@ export class Box {
 	protected scale = computed(() => (this.clicked() ? 1.5 : 1));
 
 	protected faces = ['front', 'back', 'top', 'bottom', 'left', 'right'];
-
-	constructor() {
-		effect(() => {
-			console.log('this.mesh()', this.mesh());
-		});
-
-		injectBeforeRender(({ delta }) => {
-			this.mesh().nativeElement.rotation.x += delta;
-		});
-	}
-
-	onPointerMove(event: any) {
-		console.log('event', event.face.materialIndex);
-		event.stopPropagation();
-		this.hovered.set(event.face.materialIndex);
-	}
 }
 
 @Component({

apps/docs/src/content/docs/index.mdx

@@ -20,7 +20,7 @@ hero:
 ---
 
 import FloatingCodeBlock from '../../components/ui/floating-code-block.astro';
-import HudScene from '../../components/scenes/hud/hud';
+import SimpleScene from '../../components/scenes/simple-scene/simple-scene';
 
 <section class="min-h-screen w-full flex justify-center items-center">
  <div class="h-full w-full grid grid-cols-8 gap-4">
@@ -34,7 +34,7 @@ import HudScene from '../../components/scenes/hud/hud';
     APIs like <strong>Signal</strong>, and more
    </p>
    <div class="h-[200px] w-full">
-    <HudScene client:only />
+    <SimpleScene client:only />
    </div>
   </div>
   <FloatingCodeBlock

libs/core/ng-package-docs.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-	"dest": "../../apps/docs/node_modules/angular-three",
+	"dest": "../../node_modules/angular-three",
 	"lib": {
 		"entryFile": "src/index.ts"
 	},

libs/core/project.json

@@ -24,7 +24,7 @@
 		},
 		"build-docs": {
 			"executor": "@nx/angular:package",
-			"outputs": ["{workspaceRoot}/apps/docs/node_modules/angular-three"],
+			"outputs": ["{workspaceRoot}/node_modules/angular-three"],
 			"options": {
 				"project": "libs/core/ng-package-docs.json",
 				"tsConfig": "libs/core/tsconfig.lib.prod.json"

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

@@ -48,7 +48,6 @@ export class NgtRendererFactory2 implements RendererFactory2 {
 	private catalogue = injectCatalogue();
 	private document = inject(DOCUMENT);
 	private rendererMap = new Map<string, Renderer2>();
-	// private portals = new Set<Renderer2>();
 
 	/**
 	 * NOTE: We use `useFactory` to instantiate `NgtRendererFactory2`
@@ -387,6 +386,10 @@ export class NgtRenderer2 implements Renderer2 {
 		}
 
 		if (pRS[NgtRendererClassId.type] === 'platform' && cRS[NgtRendererClassId.type] === 'platform') {
+			if (pRS[NgtRendererClassId.parent] && !cRS[NgtRendererClassId.parent]) {
+				return this.appendChild(pRS[NgtRendererClassId.parent], newChild);
+			}
+
 			return delegatedFn();
 		}
 
@@ -424,7 +427,9 @@ export class NgtRenderer2 implements Renderer2 {
 		}
 
 		if (pRS[NgtRendererClassId.type] === 'portal' && cRS[NgtRendererClassId.type] === 'three') {
-			console.log('portal child three', { parent, newChild });
+			if (!cRS[NgtRendererClassId.parent] && pRS[NgtRendererClassId.portalContainer]) {
+				return this.appendChild(pRS[NgtRendererClassId.portalContainer], newChild);
+			}
 			return;
 		}
 
@@ -561,6 +566,14 @@ export class NgtRenderer2 implements Renderer2 {
 
 		const cRS = oldChild.__ngt_renderer__;
 
+		if (!cRS) {
+			try {
+				return this.delegateRenderer.removeChild(parent, oldChild, isHostElement);
+			} catch {
+				return;
+			}
+		}
+
 		// disassociate things from oldChild
 		cRS[NgtRendererClassId.parent] = null;
 
@@ -672,7 +685,7 @@ export class NgtRenderer2 implements Renderer2 {
 			return rootScene;
 		}
 
-		const rendererParentNode = node.__ngt_renderer__[NgtRendererClassId.parent];
+		const rendererParentNode = node.__ngt_renderer__?.[NgtRendererClassId.parent];
 		// returns the renderer parent node if it exists, otherwise returns the delegateRenderer parentNode
 		return rendererParentNode ?? this.delegateRenderer.parentNode(node);
 	}
@@ -718,6 +731,9 @@ export class NgtRenderer2 implements Renderer2 {
 	}
 
 	setProperty(el: NgtRendererNode, name: string, value: any): void {
+		// NOTE: untrack all signal updates because this is during setProperty which is a reactive context
+		// attaching potentially updates signals which is not allowed
+
 		const rS = el.__ngt_renderer__;
 
 		if (!rS || rS[NgtRendererClassId.destroyed]) {
@@ -737,7 +753,9 @@ export class NgtRenderer2 implements Renderer2 {
 				applyProps(el, value);
 
 				if ('geometry' in value && value['geometry'].isBufferGeometry) {
-					instanceState?.updateGeometryStamp();
+					untracked(() => {
+						instanceState?.updateGeometryStamp();
+					});
 				}
 
 				return;
@@ -767,8 +785,6 @@ export class NgtRenderer2 implements Renderer2 {
 								? value.split('.')
 								: [value];
 				if (parent) {
-					// untrack this attach because this is during setProperty which is a reactive context
-					// attaching potentially updates signals which is not allowed
 					untracked(() => attachThreeNodes(parent, el as unknown as NgtInstanceNode));
 				}
 
@@ -783,7 +799,9 @@ export class NgtRenderer2 implements Renderer2 {
 			applyProps(el, { [name]: value });
 
 			if (instanceState && name === 'geometry' && value.isBufferGeometry) {
-				instanceState.updateGeometryStamp();
+				untracked(() => {
+					instanceState.updateGeometryStamp();
+				});
 			}
 
 			return;

libs/core/src/lib/routed-scene.ts

@@ -26,9 +26,9 @@ export class NgtRouterOutlet extends RouterOutlet {
 @Component({
 	selector: 'ngt-routed-scene',
 	template: `
-		<ngt-router-outlet />
+		<router-outlet />
 	`,
-	imports: [NgtRouterOutlet],
+	imports: [RouterOutlet],
 })
 export class NgtRoutedScene {
 	constructor(router: Router, cdr: ChangeDetectorRef) {

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

@@ -108,7 +108,7 @@ export class NgtsTransformControls {
 
 	private store = injectStore();
 
-	protected controls = computed(() => {
+	controls = computed(() => {
 		let camera = this.camera();
 		if (!camera) {
 			camera = this.store.camera();

libs/soba/materials/src/lib/mesh-portal-material.ts

@@ -242,10 +242,6 @@ export class NgtsMeshPortalMaterial {
 	protected content = contentChild.required(TemplateRef);
 
 	private store = injectStore();
-	// private size = this.store.select('size');
-	// private viewport = this.store.select('viewport');
-	// private gl = this.store.select('gl');
-	// private setEvents = this.store.select('setEvents');
 	protected rootScene = this.store.scene;
 
 	protected materialResolution = computed(() => [
@@ -259,10 +255,12 @@ export class NgtsMeshPortalMaterial {
 
 	protected renderTextureFrames = computed(() => (this.visible() ? Infinity : 0));
 
-	protected renderTextureCompute = ([event, state]: Parameters<NgtComputeFunction>) => {
+	protected renderTextureCompute = (...args: Parameters<NgtComputeFunction>) => {
 		const [parent, material] = [this.parent(), this.materialRef().nativeElement];
 		if (!parent) return false;
 
+		const [event, state] = args;
+
 		state.snapshot.pointer.set(
 			(event.offsetX / state.snapshot.size.width) * 2 - 1,
 			-(event.offsetY / state.snapshot.size.height) * 2 + 1,

libs/soba/ng-package-docs.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-	"dest": "../../apps/docs/node_modules/angular-three-soba",
+	"dest": "../../node_modules/angular-three-soba",
 	"lib": {
 		"entryFile": "src/index.ts"
 	},

libs/soba/package.json

@@ -23,19 +23,7 @@
 	],
 	"license": "MIT",
 	"exports": {
-		"./assets/*": "./assets/*",
-		"./shaders": {
-			"default": "./shaders/src/index.ts"
-		},
-		"./misc": {
-			"default": "./misc/src/index.ts"
-		},
-		"./vanilla-exports": {
-			"default": "./vanilla-exports/src/index.ts"
-		},
-		"./loaders": {
-			"default": "./loaders/src/index.ts"
-		}
+		"./assets/*": "./assets/*"
 	},
 	"peerDependencies": {
 		"@angular/common": ">=19.0.0 <20.0.0",

libs/soba/project.json

@@ -24,7 +24,7 @@
 		},
 		"build-docs": {
 			"executor": "@nx/angular:package",
-			"outputs": ["{workspaceRoot}/apps/docs/node_modules/angular-three-soba"],
+			"outputs": ["{workspaceRoot}/node_modules/angular-three-soba"],
 			"options": {
 				"project": "libs/soba/ng-package-docs.json",
 				"tsConfig": "libs/soba/tsconfig.lib.prod.json"

libs/soba/src/abstractions/billboard.stories.ts

@@ -3,7 +3,7 @@ import { Meta } from '@storybook/angular';
 import { NgtArgs } from 'angular-three';
 import { NgtsBillboard, NgtsText } from 'angular-three-soba/abstractions';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
-import { makeDecorators, makeStoryObject } from '../setup-canvas';
+import { storyDecorators, storyObject } from '../setup-canvas';
 
 @Component({
 	template: `
@@ -118,15 +118,17 @@ class DefaultBillboardStory {
 
 export default {
 	title: 'Abstractions/Billboard',
-	decorators: makeDecorators(),
+	decorators: storyDecorators(),
 } as Meta;
 
-export const Default = makeStoryObject(DefaultBillboardStory, {
-	canvasOptions: { camera: { position: [0, 0, 10] }, controls: false },
+export const Default = storyObject(DefaultBillboardStory, {
+	camera: { position: [0, 0, 10] },
+	controls: false,
 	argsOptions: { follow: true, lockX: false, lockY: false, lockZ: false },
 });
 
-export const Text = makeStoryObject(TextBillboardStory, {
-	canvasOptions: { camera: { position: [0, 0, 10] }, controls: false },
+export const Text = storyObject(TextBillboardStory, {
+	camera: { position: [0, 0, 10] },
+	controls: false,
 	argsOptions: { follow: true, lockX: false, lockY: false, lockZ: false },
 });

libs/soba/src/abstractions/gradient-texture.stories.ts

@@ -5,7 +5,7 @@ import { NgtsGradientTexture } from 'angular-three-soba/abstractions';
 import { NgtsMeshWobbleMaterial } from 'angular-three-soba/materials';
 import { NgtsFloat } from 'angular-three-soba/staging';
 import { DoubleSide } from 'three';
-import { makeDecorators, makeStoryFunction } from '../setup-canvas';
+import { storyDecorators, storyFunction } from '../setup-canvas';
 
 @Component({
 	template: `
@@ -32,7 +32,7 @@ class DefaultGradientTextureStory {
 
 export default {
 	title: 'Abstractions/GradientTexture',
-	decorators: makeDecorators(),
+	decorators: storyDecorators(),
 } as Meta;
 
-export const Default = makeStoryFunction(DefaultGradientTextureStory);
+export const Default = storyFunction(DefaultGradientTextureStory);

libs/soba/src/abstractions/grid.stories.ts

@@ -15,7 +15,7 @@ import { injectGLTF } from 'angular-three-soba/loaders';
 import { NgtsAccumulativeShadows, NgtsCenter, NgtsEnvironment, NgtsRandomizedLights } from 'angular-three-soba/staging';
 import { Mesh } from 'three';
 import { GLTF } from 'three-stdlib';
-import { makeDecorators, makeStoryFunction } from '../setup-canvas';
+import { storyDecorators, storyFunction } from '../setup-canvas';
 
 type SuzanneGLTF = GLTF & {
 	nodes: { Suzanne: Mesh };
@@ -128,10 +128,10 @@ class DefaultGridStory {
 
 export default {
 	title: 'Abstractions/Grid',
-	decorators: makeDecorators(),
+	decorators: storyDecorators(),
 } as Meta;
 
-export const Default = makeStoryFunction(DefaultGridStory, {
+export const Default = storyFunction(DefaultGridStory, {
 	camera: { position: [10, 12, 12], fov: 25 },
 	lights: false,
 	controls: false,

libs/soba/src/abstractions/helper.stories.ts

@@ -5,7 +5,7 @@ import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
 import { BoxHelper, CameraHelper } from 'three';
 import { VertexNormalsHelper } from 'three-stdlib';
 import { NgtsHelper } from '../../abstractions/src/lib/helper';
-import { makeDecorators, makeStoryFunction } from '../setup-canvas';
+import { storyDecorators, storyFunction } from '../setup-canvas';
 
 @Component({
 	template: `
@@ -59,8 +59,8 @@ class DefaultHelperStory {
 
 export default {
 	title: 'Abstractions/Helper',
-	decorators: makeDecorators(),
+	decorators: storyDecorators(),
 } as Meta;
 
-export const Default = makeStoryFunction(DefaultHelperStory);
-export const Camera = makeStoryFunction(CameraHelperStory);
+export const Default = storyFunction(DefaultHelperStory);
+export const Camera = storyFunction(CameraHelperStory);