docs(soba): adjust grid and instances stories

Author: nartc

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

@@ -1,4 +1,13 @@
-import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input, Signal } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	CUSTOM_ELEMENTS_SCHEMA,
+	effect,
+	input,
+	output,
+	signal,
+	Signal,
+} from '@angular/core';
 import { Meta } from '@storybook/angular';
 import { NgtAnyRecord, NgtArgs } from 'angular-three';
 import { NgtsGrid } from 'angular-three-soba/abstractions';
@@ -40,6 +49,14 @@ class Suzi {
 
 	rotation = input([0, 0, 0]);
 	scale = input(1);
+	loaded = output<void>();
+
+	constructor() {
+		effect(() => {
+			const gltf = this.gltf();
+			if (gltf) this.loaded.emit();
+		});
+	}
 }
 
 @Component({
@@ -63,22 +80,24 @@ class Shadows {}
 	template: `
 		<ngt-group [position]="[0, -0.5, 0]">
 			<ngts-center [options]="{ top: true }">
-				<grid-suzi [rotation]="[-0.63, 0, 0]" [scale]="2" />
+				<grid-suzi [rotation]="[-0.63, 0, 0]" [scale]="2" (loaded)="loaded.set(true)" />
 			</ngts-center>
 
-			<ngts-center [options]="{ top: true, position: [-2, 0, 2] }">
-				<ngt-mesh [castShadow]="true">
-					<ngt-sphere-geometry *args="[0.5, 64, 64]" />
-					<ngt-mesh-standard-material color="#9d4b4b" />
-				</ngt-mesh>
-			</ngts-center>
+			@if (loaded()) {
+				<ngts-center [options]="{ top: true, position: [-2, 0, 2] }">
+					<ngt-mesh [castShadow]="true">
+						<ngt-sphere-geometry *args="[0.5, 64, 64]" />
+						<ngt-mesh-standard-material color="#9d4b4b" />
+					</ngt-mesh>
+				</ngts-center>
 
-			<ngts-center [options]="{ top: true, position: [2.5, 0, 1] }">
-				<ngt-mesh [castShadow]="true" [rotation]="[0, Math.PI / 4, 0]">
-					<ngt-box-geometry *args="[0.7, 0.7, 0.7]" />
-					<ngt-mesh-standard-material color="#9d4b4b" />
-				</ngt-mesh>
-			</ngts-center>
+				<ngts-center [options]="{ top: true, position: [2.5, 0, 1] }">
+					<ngt-mesh [castShadow]="true" [rotation]="[0, Math.PI / 4, 0]">
+						<ngt-box-geometry *args="[0.7, 0.7, 0.7]" />
+						<ngt-mesh-standard-material color="#9d4b4b" />
+					</ngt-mesh>
+				</ngts-center>
+			}
 
 			<grid-shadows />
 
@@ -108,6 +127,7 @@ class Shadows {}
 })
 class DefaultGridStory {
 	Math = Math;
+	loaded = signal(false);
 }
 
 export default {

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input, Signal, viewChild } from '@angular/core';
 import { Meta } from '@storybook/angular';
-import { injectBeforeRender, NgtObjectEvents, omit, pick } from 'angular-three';
+import { injectBeforeRender, injectObjectEvents, omit, pick } from 'angular-three';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import { injectGLTF } from 'angular-three-soba/loaders';
 import { NgtsInstance, NgtsInstances } from 'angular-three-soba/performances';
@@ -30,17 +30,12 @@ type Data = (typeof data)[number];
 	standalone: true,
 	template: `
 		<ngt-group [parameters]="parameters()">
-			<ngts-instance
-				#instance
-				[ngtObjectEvents]="instance.positionMeshRef()"
-				(pointerover)="$event.stopPropagation(); this.hovered = true"
-				(pointerout)="this.hovered = false"
-			/>
+			<ngts-instance />
 		</ngt-group>
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [NgtsInstance, NgtObjectEvents],
+	imports: [NgtsInstance],
 })
 class Shoe {
 	data = input.required<Data>();
@@ -58,6 +53,32 @@ class Shoe {
 	constructor() {
 		const color = new Color();
 
+		/**
+		 * We can also use ngtObjectEvents and Event Bindings
+		 * However, using Event Bindings on the template triggers CD everytime the event fires
+		 * which is not ideal for this case
+		 *
+		 * @example
+		 *
+		 * ```html
+		 * <ngts-instance
+		 *   #instance
+		 *   [ngtObjectEvents]="instance.positionMeshRef()"
+		 *   (pointerover)="$event.stopPropagation(); this.hovered = true"
+		 *   (pointerout)="this.hovered = false"
+		 * />
+		 * ```
+		 */
+		injectObjectEvents(() => this.instance().positionMeshRef(), {
+			pointerover: (event) => {
+				event.stopPropagation();
+				this.hovered = true;
+			},
+			pointerout: () => {
+				this.hovered = false;
+			},
+		});
+
 		injectBeforeRender(({ clock }) => {
 			const instance = this.instance().positionMeshRef().nativeElement;
 			const t = clock.getElapsedTime() + this.random() * 10000;