docs: pull toggle button up; add toggle debug to bruno simons example

Author: nartc

apps/kitchen-sink/src/app/app.routes.ts

@@ -5,21 +5,25 @@ export const appRoutes: Route[] = [
 		path: 'cannon',
 		loadComponent: () => import('./cannon/cannon'),
 		loadChildren: () => import('./cannon/cannon.routes'),
+		title: 'Cannon - Angular Three Demo',
 	},
 	{
 		path: 'postprocessing',
 		loadComponent: () => import('./postprocessing/postprocessing'),
 		loadChildren: () => import('./postprocessing/postprocessing.routes'),
+		title: 'Postprocessing - Angular Three Demo',
 	},
 	{
 		path: 'soba',
 		loadComponent: () => import('./soba/soba'),
 		loadChildren: () => import('./soba/soba.routes'),
+		title: 'Soba - Angular Three Demo',
 	},
 	{
 		path: 'rapier',
 		loadComponent: () => import('./rapier/rapier'),
 		loadChildren: () => import('./rapier/rapier.routes'),
+		title: 'Rapier - Angular Three Demo',
 	},
 	{
 		path: '',

apps/kitchen-sink/src/app/rapier/wrapper.ts

@@ -1,28 +1,8 @@
-import { ChangeDetectionStrategy, Component, computed, Directive, model } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgtCanvas } from 'angular-three';
+import { ToggleButton } from '../toggle-button';
 import { debug, interpolate, paused, RapierWrapperDefault } from './wrapper-default';
 
-@Directive({
-	selector: 'button[toggleButton]',
-	standalone: true,
-	host: {
-		class: 'border rounded px-2 py-1',
-		'(click)': 'onClick()',
-		'[class]': 'hbClass()',
-	},
-})
-export class ToggleButton {
-	value = model.required<boolean>({ alias: 'toggleButton' });
-
-	hbClass = computed(() => {
-		return this.value() ? ['text-white', 'bg-red-600', 'border-red-400'] : ['text-black', 'border-black'];
-	});
-
-	onClick() {
-		this.value.update((prev) => !prev);
-	}
-}
-
 @Component({
 	standalone: true,
 	template: `

apps/kitchen-sink/src/app/soba/bruno-simons-20k/bruno-simons-20k.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgtCanvas } from 'angular-three';
-import { Experience } from './experience';
+import { ToggleButton } from '../../toggle-button';
+import { debug, Experience } from './experience';
 
 @Component({
 	standalone: true,
@@ -12,14 +13,24 @@ import { Experience } from './experience';
 			[gl]="{ antialias: false }"
 			[camera]="{ position: [-30, 35, -15], near: 30, far: 55, fov: 12 }"
 		/>
-		<pre class="absolute top-2 right-2">
-      Credits: <a class="underline" href="https://pmndrs.github.io/examples/demos/bruno-simons-20k-challenge" target="_blank">Bruno Simons 20K Challenge with R3F</a>
-    </pre>
+
+		<div class="absolute top-2 right-2 flex flex-col gap-2">
+			<code>
+				Credits:
+				<a class="underline" href="https://pmndrs.github.io/examples/demos/bruno-simons-20k-challenge" target="_blank">
+					Bruno Simons 20K Challenge with R3F
+				</a>
+			</code>
+			<div class="flex gap-2 items-center">
+				<button [(toggleButton)]="debug">Toggle debug</button>
+			</div>
+		</div>
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { class: 'bruno-simons-2k-soba' },
-	imports: [NgtCanvas],
+	imports: [NgtCanvas, ToggleButton],
 })
 export default class BrunoSimons20k {
 	protected sceneGraph = Experience;
+	protected debug = debug;
 }

apps/kitchen-sink/src/app/soba/bruno-simons-20k/experience.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input, Signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input, signal, Signal } from '@angular/core';
 import { NgtArgs, NgtEuler, NgtVector3 } from 'angular-three';
 import { NgtpDepthOfField, NgtpEffectComposer, NgtpToneMapping } from 'angular-three-postprocessing';
 import { NgtpN8AO } from 'angular-three-postprocessing/n8ao';
@@ -14,6 +14,8 @@ import {
 import { MathUtils, Mesh, MeshStandardMaterial } from 'three';
 import { GLTF } from 'three-stdlib';
 
+export const debug = signal(false);
+
 type HatGLTF = GLTF & {
 	nodes: { Plane006: Mesh; Plane006_1: Mesh };
 	materials: { Material: MeshStandardMaterial; boxCap: MeshStandardMaterial };
@@ -118,7 +120,7 @@ export class Model {
 			</ng-template>
 		</ngts-environment>
 
-		<ngtr-physics [options]="{ gravity: [0, -4, 0] }">
+		<ngtr-physics [options]="{ debug: debug(), gravity: [0, -4, 0] }">
 			<app-model [position]="[1, 0, -1.5]" />
 			<app-hats />
 			<ngt-object3D ngtrRigidBody="fixed" [options]="{ colliders: false }" [position]="[0, -1, 0]">
@@ -183,4 +185,6 @@ export class Model {
 export class Experience {
 	protected readonly Infinity = Infinity;
 	protected readonly Math = Math;
+
+	protected debug = debug;
 }

apps/kitchen-sink/src/app/toggle-button.ts

@@ -0,0 +1,22 @@
+import { computed, Directive, model } from '@angular/core';
+
+@Directive({
+	selector: 'button[toggleButton]',
+	standalone: true,
+	host: {
+		class: 'border rounded px-2 py-1',
+		'(click)': 'onClick()',
+		'[class]': 'hbClass()',
+	},
+})
+export class ToggleButton {
+	value = model.required<boolean>({ alias: 'toggleButton' });
+
+	hbClass = computed(() => {
+		return this.value() ? ['text-white', 'bg-red-600', 'border-red-400'] : ['text-black', 'border-black'];
+	});
+
+	onClick() {
+		this.value.update((prev) => !prev);
+	}
+}