docs: make demo consistent

Author: nartc

apps/kitchen-sink/src/app/cannon/basic/basic.ts

@@ -19,7 +19,6 @@ import { State } from './state';
 	providers: [State],
 })
 export default class Basic {
-	scene = Experience;
-
-	state = inject(State);
+	protected scene = Experience;
+	protected state = inject(State);
 }

apps/kitchen-sink/src/app/cannon/basic/experience.ts

@@ -10,16 +10,13 @@ import {
 	viewChild,
 } from '@angular/core';
 import { Triplet } from '@pmndrs/cannon-worker-api';
-import { NgtArgs, extend } from 'angular-three';
+import { NgtArgs } from 'angular-three';
 import { NgtcPhysics } from 'angular-three-cannon';
 import { injectBox, injectPlane } from 'angular-three-cannon/body';
 import { NgtcDebug } from 'angular-three-cannon/debug';
-import * as THREE from 'three';
 import { Mesh } from 'three';
 import { State } from './state';
 
-extend(THREE);
-
 @Component({
 	selector: 'app-plane',
 	standalone: true,
@@ -35,9 +32,12 @@ extend(THREE);
 })
 export class Plane {
 	position = input<Triplet>([0, 0, 0]);
-	args = [1000, 1000];
-	mesh = viewChild.required<ElementRef<Mesh>>('mesh');
-	plane = injectPlane(() => ({ mass: 0, position: this.position(), args: this.args }), this.mesh);
+	protected args = [1000, 1000];
+	private mesh = viewChild.required<ElementRef<Mesh>>('mesh');
+
+	constructor() {
+		injectPlane(() => ({ mass: 0, position: this.position(), args: this.args }), this.mesh);
+	}
 }
 
 @Component({
@@ -55,9 +55,12 @@ export class Plane {
 })
 export class Box {
 	position = input<Triplet>([0, 0, 0]);
-	args: Triplet = [2, 2, 2];
-	mesh = viewChild.required<ElementRef<Mesh>>('mesh');
-	box = injectBox(() => ({ mass: 10000, position: this.position(), args: this.args }), this.mesh);
+	protected args: Triplet = [2, 2, 2];
+	private mesh = viewChild.required<ElementRef<Mesh>>('mesh');
+
+	constructor() {
+		injectBox(() => ({ mass: 10000, position: this.position(), args: this.args }), this.mesh);
+	}
 }
 
 @Component({
@@ -100,9 +103,9 @@ export class Box {
 	host: { class: 'basic-experience' },
 })
 export class Experience {
-	Math = Math;
-	state = inject(State);
-	showPlane = signal(true);
+	protected Math = Math;
+	protected state = inject(State);
+	protected showPlane = signal(true);
 
 	constructor() {
 		afterNextRender(() => {

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

@@ -1,5 +1,9 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { extend } from 'angular-three';
+import * as THREE from 'three';
+
+extend(THREE);
 
 @Component({
 	standalone: true,
@@ -29,5 +33,13 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 	host: { class: 'cannon' },
 })
 export default class Cannon {
-	examples = ['basic', 'kinematic-cube', 'compound', 'chain', 'cube-heap', 'convexpolyhedron', 'monday-morning'];
+	protected examples = [
+		'basic',
+		'kinematic-cube',
+		'compound',
+		'chain',
+		'cube-heap',
+		'convexpolyhedron',
+		'monday-morning',
+	];
 }

apps/kitchen-sink/src/app/cannon/chain/chain.ts

@@ -13,5 +13,5 @@ import { Experience } from './experience';
 	host: { class: 'chain-cannon' },
 })
 export default class Chain {
-	scene = Experience;
+	protected scene = Experience;
 }

apps/kitchen-sink/src/app/cannon/chain/experience.ts

@@ -6,6 +6,7 @@ import {
 	InjectionToken,
 	Injector,
 	Signal,
+	Type,
 	afterNextRender,
 	computed,
 	inject,
@@ -15,17 +16,23 @@ import {
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CylinderArgs, Triplet } from '@pmndrs/cannon-worker-api';
-import { NgtArgs, extend, injectBeforeRender, injectStore } from 'angular-three';
+import { NgtArgs, injectBeforeRender, injectStore } from 'angular-three';
 import { NgtcPhysics } from 'angular-three-cannon';
 import { injectBox, injectCylinder, injectSphere } from 'angular-three-cannon/body';
 import { injectConeTwist } from 'angular-three-cannon/constraint';
 import { NgtcDebug } from 'angular-three-cannon/debug';
-import * as THREE from 'three';
 import { Color, ColorRepresentation, Mesh, Object3D } from 'three';
 
-extend(THREE);
+interface Handle {
+	position: Signal<Triplet> | (() => Triplet);
+	ref: Signal<ElementRef<Object3D>>;
+}
+
+const Parent = new InjectionToken<Handle>('PARENT');
 
-const Parent = new InjectionToken<{ position: Signal<Triplet>; ref: Signal<ElementRef<Object3D>> }>('PARENT');
+function provideParent<THandle extends object>(handle: Type<THandle>, factory: (h: THandle) => Handle) {
+	return { provide: Parent, useFactory: factory, deps: [handle] };
+}
 
 @Component({
 	selector: 'app-chain-link',
@@ -40,35 +47,26 @@ const Parent = new InjectionToken<{ position: Signal<Triplet>; ref: Signal<Eleme
 	imports: [NgtArgs],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	providers: [
-		{
-			provide: Parent,
-			useFactory: (chainLink: ChainLink) => ({ ref: chainLink.mesh, position: chainLink.position }),
-			deps: [ChainLink],
-		},
-	],
+	providers: [provideParent(ChainLink, (chainLink) => ({ ref: chainLink.mesh, position: chainLink.position }))],
 })
 export class ChainLink {
-	parent = inject(Parent, { skipSelf: true });
+	private parent = inject(Parent, { skipSelf: true });
 
 	maxMultiplier = input<number>();
 	color = input<ColorRepresentation>('#575757');
 	args = input<CylinderArgs>([0.5, 0.5, 2, 16]);
 
-	height = computed(() => this.args()[2] ?? 2);
-	position = computed<Triplet>(() => {
+	private height = computed(() => this.args()[2] ?? 2);
+	protected position = computed<Triplet>(() => {
 		const [[x, y, z], height] = [this.parent.position(), this.height()];
 		return [x, y - height, z];
 	});
 
-	mesh = viewChild.required<ElementRef<Mesh>>('mesh');
-
-	cylinder = injectCylinder(
-		() => ({ mass: 1, args: this.args(), linearDamping: 0.8, position: this.position() }),
-		this.mesh,
-	);
+	protected mesh = viewChild.required<ElementRef<Mesh>>('mesh');
 
 	constructor() {
+		injectCylinder(() => ({ mass: 1, args: this.args(), linearDamping: 0.8, position: this.position() }), this.mesh);
+
 		const injector = inject(Injector);
 		// NOTE: we want to run this in afterNextRender because we want the input to resolve
 		afterNextRender(() => {
@@ -111,7 +109,7 @@ export class Chain {
 	length = input.required<number>();
 	maxMultiplier = input<number>();
 
-	color = computed(() => {
+	protected color = computed(() => {
 		const maxMultiplier = this.maxMultiplier();
 		if (maxMultiplier === undefined) return '#575757';
 
@@ -128,7 +126,7 @@ export class Chain {
 	template: `
 		<ngt-group>
 			<ngt-mesh #mesh>
-				<ngt-box-geometry *args="args()" />
+				<ngt-box-geometry *args="args" />
 				<ngt-mesh-standard-material [roughness]="0.3" color="#575757" />
 			</ngt-mesh>
 			<ng-content />
@@ -137,26 +135,19 @@ export class Chain {
 	imports: [NgtArgs],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	providers: [
-		{
-			provide: Parent,
-			useFactory: (handle: PointerHandle) => ({ ref: handle.mesh, position: () => handle.position }),
-			deps: [PointerHandle],
-		},
-	],
+	providers: [provideParent(PointerHandle, (handle) => ({ ref: handle.mesh, position: () => handle.position }))],
 })
 export class PointerHandle {
-	size = input.required<number>();
-	args = computed<Triplet>(() => [this.size(), this.size(), this.size() * 2]);
+	protected args = [1.5, 1.5, 1.5 * 2] as Triplet;
 
-	position: Triplet = [0, 0, 0];
-	mesh = viewChild.required<ElementRef<Mesh>>('mesh');
-
-	boxApi = injectBox(() => ({ args: this.args(), position: this.position, type: 'Kinematic' }), this.mesh);
+	protected position: Triplet = [0, 0, 0];
+	protected mesh = viewChild.required<ElementRef<Mesh>>('mesh');
 
 	constructor() {
+		const boxApi = injectBox(() => ({ args: this.args, position: this.position, type: 'Kinematic' }), this.mesh);
+
 		injectBeforeRender(({ pointer: { x, y }, viewport: { width, height } }) => {
-			this.boxApi()?.position.set((x * width) / 2, (y * height) / 2, 0);
+			boxApi()?.position.set((x * width) / 2, (y * height) / 2, 0);
 		});
 	}
 }
@@ -167,29 +158,25 @@ export class PointerHandle {
 	template: `
 		<ngt-group>
 			<ngt-mesh #mesh>
-				<ngt-sphere-geometry *args="[radius(), 64, 64]" />
+				<ngt-sphere-geometry *args="[1.5, 64, 64]" />
 				<ngt-mesh-standard-material [roughness]="0.3" color="#575757" />
 			</ngt-mesh>
 			<ng-content />
 		</ngt-group>
 	`,
 	imports: [NgtArgs],
-	providers: [
-		{
-			provide: Parent,
-			useFactory: (handle: StaticHandle) => ({ ref: handle.mesh, position: handle.position }),
-			deps: [StaticHandle],
-		},
-	],
+	providers: [provideParent(StaticHandle, (handle) => ({ ref: handle.mesh, position: handle.position }))],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StaticHandle {
 	position = input.required<Triplet>();
-	radius = input.required<number>();
-	mesh = viewChild.required<ElementRef<Mesh>>('mesh');
 
-	sphere = injectSphere(() => ({ args: [this.radius()], position: this.position(), type: 'Static' }), this.mesh);
+	protected mesh = viewChild.required<ElementRef<Mesh>>('mesh');
+
+	constructor() {
+		injectSphere(() => ({ args: [1.5], position: this.position(), type: 'Static' }), this.mesh);
+	}
 }
 
 @Component({
@@ -208,12 +195,12 @@ export class StaticHandle {
 		/>
 
 		<ngtc-physics [options]="{ gravity: [0, -40, 0], allowSleep: false }">
-			<app-pointer-handle [size]="1.5">
+			<app-pointer-handle>
 				<app-chain [length]="7" />
 			</app-pointer-handle>
 
 			@for (maxMultiplier of maxMultiplierExamples(); track maxMultiplier.key) {
-				<app-static-handle [radius]="1.5" [position]="maxMultiplier.position">
+				<app-static-handle [position]="maxMultiplier.position">
 					<app-chain [maxMultiplier]="maxMultiplier.value" [length]="8" />
 				</app-static-handle>
 			}
@@ -225,12 +212,12 @@ export class StaticHandle {
 	host: { class: 'chain-experience' },
 })
 export class Experience {
-	Math = Math;
+	protected Math = Math;
 
 	private store = injectStore();
 
-	resetCount = signal(0);
-	maxMultiplierExamples = computed(() =>
+	private resetCount = signal(0);
+	protected maxMultiplierExamples = computed(() =>
 		maxMultiplierExamples.map((value, index, array) => ({
 			value,
 			key: `${value}-${this.resetCount()}`,

apps/kitchen-sink/src/app/cannon/compound/compound.ts

@@ -12,5 +12,5 @@ import { Experience } from './experience';
 	host: { class: 'compound-cannon' },
 })
 export default class Compound {
-	scene = Experience;
+	protected scene = Experience;
 }