docs(soba): update storybook

Author: nartc

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

@@ -35,7 +35,7 @@ class SpinningThing {
 
 		<ngt-mesh>
 			<ngt-box-geometry *args="[3, 3, 3]" />
-			<ngt-mesh-standard-material [map]="target.nativeElement?.texture" />
+			<ngt-mesh-standard-material [map]="texture()" />
 		</ngt-mesh>
 	`,
 	imports: [SpinningThing, NgtsPerspectiveCamera, NgtPortal, NgtPortalContent, NgtArgs],
@@ -63,11 +63,12 @@ class DefaultFBOStory {
 		return scene;
 	});
 
-	target = injectNgtsFBO(() => ({ width: this.inputs.select('fboParams')() }));
+	private target = injectNgtsFBO(() => ({ width: this.inputs.select('fboParams')() }));
+	texture = computed(() => this.target()?.texture);
 
 	constructor() {
 		injectBeforeRender((state) => {
-			const [camera, target, scene] = [this.cameraRef.nativeElement, this.target.nativeElement, this.scene()];
+			const [camera, target, scene] = [this.cameraRef.nativeElement, this.target(), this.scene()];
 			if (!target) return;
 			camera.position.z = 5 + Math.sin(state.clock.getElapsedTime() * 1.5) * 2;
 			state.gl.setRenderTarget(target);

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

@@ -62,8 +62,8 @@ class InjectNgtsTrailInstanceStory {
 		});
 
 		injectBeforeRender(() => {
-			const [instanced, positions] = [this.instancedRef.nativeElement, this.positions.nativeElement];
-			if (!instanced || !positions) return;
+			const [instanced, positions] = [this.instancedRef.nativeElement, this.positions()];
+			if (!instanced) return;
 
 			for (let i = 0; i < 1000; i += 1) {
 				const x = positions.slice(i * 3, i * 3 + 3);
@@ -130,28 +130,3 @@ const canvasOptions = makeCanvasOptions({ camera: { position: [0, 0, 5] } });
 export const Default = makeStoryFunction(DefaultTrailStory, canvasOptions);
 export const TrailsWithInstance = makeStoryFunction(InjectNgtsTrailInstanceStory, canvasOptions);
 export const TrailWithFloat = makeStoryFunction(TrailFloatStory, canvasOptions);
-
-// function UseTrailFloat() {
-//   const ref = React.useRef(null!)
-//   return (
-//     <>
-//       <Trail
-//         width={1}
-//         length={4}
-//         color={'#F8D628'}
-//         attenuation={(t: number) => {
-//           return t * t
-//         }}
-//         target={ref}
-//       />
-//       <Float speed={5} floatIntensity={10} ref={ref}>
-//         <Sphere args={[0.1, 32, 32]} position-x={0}>
-//           <meshNormalMaterial />
-//         </Sphere>
-//       </Float>
-//     </>
-//   )
-// }
-//
-// export const TrailFloat = () => <UseTrailFloat />
-// TrailFloat.storyName = 'Trail with Ref target'

libs/soba/src/staging/spot-light.stories.ts

@@ -115,7 +115,7 @@ class ShadowsSpotLightStory {
 @Component({
 	standalone: true,
 	template: `
-		<ng-container *ngIf="depthBuffer.nativeElement as depthBuffer">
+		<ng-container *ngIf="depthBuffer() as depthBuffer">
 			<ngts-spot-light
 				[penumbra]="0.5"
 				[depthBuffer]="depthBuffer"