fix(soba,core): controls now work

Author: nartc

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

@@ -334,6 +334,10 @@ export class NgtRenderer2 implements Renderer2 {
 		}
 
 		if (pRS[NgtRendererClassId.type] === 'platform' && cRS[NgtRendererClassId.type] === 'platform') {
+			if (newChild[NGT_DOM_PARENT_FLAG] && newChild[NGT_DOM_PARENT_FLAG] instanceof HTMLElement) {
+				return this.delegateRenderer.appendChild(newChild[NGT_DOM_PARENT_FLAG], newChild);
+			}
+
 			if (pRS[NgtRendererClassId.parent] && !cRS[NgtRendererClassId.parent]) {
 				return this.appendChild(pRS[NgtRendererClassId.parent], newChild);
 			}

libs/soba/controls/src/lib/scroll-controls.ts

@@ -181,6 +181,7 @@ export class NgtsScrollControls {
 			const onScroll = () => {
 				// Prevent first scroll because it is indirectly caused by the one pixel offset
 				if (!enabled || firstRun) return;
+
 				invalidate();
 				current = el[horizontal ? 'scrollLeft' : 'scrollTop'];
 				this.scroll = current / scrollThreshold;
@@ -286,7 +287,7 @@ export class NgtsCanvasScrollContent {
 
 @Directive({
 	selector: 'div[htmlScrollContent]',
-	host: { style: 'position: absolute; top: 0; left: 0; will-change: transform;' },
+	host: { style: 'position: absolute; top: 0; left: 0; will-change: transform;', 'data-html-scroll-content': '' },
 	providers: [provideHTMLDomElement([NgtsScrollControls], (scrollControls) => scrollControls.fixed)],
 })
 export class NgtsHTMLScrollContent extends NgtHTML {

libs/soba/src/controls/scroll-controls.stories.ts

@@ -231,7 +231,7 @@ export default {
 export const Default = storyObject(DefaultScrollControlsStory, {
 	camera: { zoom: 80 },
 	orthographic: true,
-	controls: false,
+	controls: null,
 	argsOptions: {
 		options: {
 			pages: 3, // Each page takes 100% of the height of the canvas
@@ -251,7 +251,7 @@ export const InsideAContainer = storyObject(DefaultScrollControlsStory, {
   `,
 	camera: { zoom: 80 },
 	orthographic: true,
-	controls: false,
+	controls: null,
 	argsOptions: {
 		options: {
 			pages: 3, // Each page takes 100% of the height of the canvas
@@ -266,5 +266,5 @@ export const InsideAContainer = storyObject(DefaultScrollControlsStory, {
 export const Model = storyFunction(LittlestTokyoStory, {
 	camera: { position: [0, 0, 10] },
 	lights: false,
-	controls: false,
+	controls: null,
 });

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

@@ -7,11 +7,11 @@ import { select, storyDecorators, storyFunction, storyObject } from '../setup-ca
 
 @Component({
 	template: `
-		<ngt-mesh #meshOne [position]="[-1, 0, 0]" (click)="selected.set(meshOne)">
+		<ngt-mesh #meshOne [position]="[-1, 0, 0]" (click)="$event.stopPropagation(); selected.set(meshOne)">
 			<ngt-box-geometry />
 			<ngt-mesh-basic-material [wireframe]="selected() === meshOne" color="orange" />
 		</ngt-mesh>
-		<ngt-mesh #meshTwo [position]="[0, 0, 0]" (click)="selected.set(meshTwo)">
+		<ngt-mesh #meshTwo [position]="[0, 0, 0]" (click)="$event.stopPropagation(); selected.set(meshTwo)">
 			<ngt-box-geometry />
 			<ngt-mesh-basic-material [wireframe]="selected() === meshTwo" color="green" />
 		</ngt-mesh>

libs/soba/src/setup-canvas.ts

@@ -25,7 +25,6 @@ import { extend, injectBeforeRender, NgtAnyRecord, NgtArgs, NgtCanvasOptions, re
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import { NgtsLoader } from 'angular-three-soba/loaders';
 import { NgtCanvas, NgtCanvasContent, provideNgtRenderer } from 'angular-three/dom';
-import { mergeInputs } from 'ngxtension/inject-inputs';
 import * as THREE from 'three';
 
 @Component({
@@ -124,8 +123,8 @@ export class StorybookSetup {
 	loader = input(false);
 
 	/* canvas options */
-	performance = input(defaultPerformanceOptions, { transform: mergeInputs(defaultPerformanceOptions) });
-	camera = input(defaultCameraOptions, { transform: mergeInputs(defaultCameraOptions) });
+	performance = input<NgtCanvasOptions['performance']>({});
+	camera = input<NgtCanvasOptions['camera']>({});
 	orthographic = input(false);
 
 	/* scene graph options */
@@ -149,7 +148,7 @@ type StoryOptions = {
 	camera: NgtCanvasOptions['camera'];
 	background: THREE.ColorRepresentation;
 	orthographic: boolean;
-	controls: boolean;
+	controls: boolean | null;
 	lights: boolean;
 };
 
@@ -177,6 +176,10 @@ export function storyFunction(
 		lights = defaultStoryOptions.lights,
 	}: Partial<StoryOptions> = {},
 ) {
+	if (!orthographic) {
+		camera = { ...defaultStoryOptions.camera, ...camera };
+	}
+
 	return (args: Args) => ({
 		props: {
 			storyOptions: args || {},