docs: adjust setup canvas

Author: nartc

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

@@ -3,7 +3,7 @@ import { Meta } from '@storybook/angular';
 import { NgtArgs } from 'angular-three';
 import { NgtsHTML, NgtsHTMLContent, NgtsHTMLContentOptions, NgtsHTMLOptions } from 'angular-three-soba/misc';
 import { ColorRepresentation } from 'three';
-import { makeDecorators, makeStoryObject, Turnable } from '../setup-canvas';
+import { makeDecorators, makeStoryFunction, makeStoryObject, Turnable } from '../setup-canvas';
 
 @Component({
 	selector: 'html-scene',
@@ -85,10 +85,7 @@ export default {
 	decorators: makeDecorators(),
 } as Meta;
 
-export const Default = makeStoryObject(HtmlScene, {
-	canvasOptions: { camera: { position: [-20, 20, -20] } },
-});
-
+export const Default = makeStoryFunction(HtmlScene, { camera: { position: [-20, 20, -20] } });
 export const Transform = makeStoryObject(HtmlTransformScene, {
 	canvasOptions: { camera: { position: [-20, 20, -20] } },
 	argsOptions: {

libs/soba/src/setup-canvas.ts

@@ -18,6 +18,7 @@ import {
 	effect,
 	inject,
 	input,
+	isSignal,
 	reflectComponentType,
 	untracked,
 	viewChild,
@@ -128,8 +129,17 @@ export class StorybookScene {
 			this.inputsMirror = this.storyMirror.inputs.map((input) => input.propName);
 		}
 
+		const component = this.ref.instance as any;
+
 		for (const key of this.inputsMirror) {
-			this.ref.setInput(key, options[key]);
+			const signalInput = component[key];
+			const isSignalInput = signalInput && isSignal(signalInput);
+			const value =
+				isSignalInput && options[key] === undefined && untracked(signalInput) !== undefined
+					? untracked(signalInput)
+					: options[key];
+
+			this.ref.setInput(key, value);
 		}
 	}
 }