refactor(cannon): adjust injectBody

Author: nartc

apps/sandbox/src/app/app.component.ts

@@ -1,11 +1,13 @@
-import { Component, Type, ViewChild, ViewContainerRef, effect, signal } from '@angular/core';
+import { NgIf } from '@angular/common';
+import { Component, Type, ViewChild, ViewContainerRef, computed, effect, signal } from '@angular/core';
 import { extend } from 'angular-three';
 import { NgtsLoader } from 'angular-three-soba/loaders';
 import * as THREE from 'three';
 import { AviatorCanvas } from './aviator/canvas.component';
 import { BotCanvas } from './bot/canvas.component';
 import { CannonCanvas } from './cannon/canvas.component';
 import { SkyDivingCanvas } from './skydiving/canvas.component';
+import { gravity, isDebugging } from './states';
 import { VaporwareCanvas } from './vaporware/canvas.component';
 
 extend(THREE);
@@ -23,12 +25,20 @@ type AvailableCanvas = (typeof availableCanvases)[number];
 
 @Component({
 	standalone: true,
-	imports: [NgtsLoader],
+	imports: [NgtsLoader, NgIf],
 	selector: 'sandbox-root',
 	template: `
 		<ng-container #anchor />
 		<ngts-loader />
 		<button class="cycle" (click)="cycleCanvas()">Current canvas: {{ canvas() }}</button>
+		<ng-container *ngIf="showDebugging()">
+			<button class="cycle" style="left: 12rem" (click)="isDebugging.toggle()">
+				Is debugging? {{ isDebugging.isDebugging() }}
+			</button>
+			<button class="cycle" style="left: 22rem" (click)="gravity.change()">
+				{{ gravity.btnText() }}
+			</button>
+		</ng-container>
 	`,
 	host: {
 		'[style.--background]': 'background',
@@ -37,6 +47,9 @@ type AvailableCanvas = (typeof availableCanvases)[number];
 })
 export class AppComponent {
 	canvas = signal<AvailableCanvas>('cannon');
+	isDebugging = isDebugging;
+	gravity = gravity;
+	showDebugging = computed(() => this.canvas() === 'cannon');
 
 	@ViewChild('anchor', { static: true, read: ViewContainerRef }) vcr!: ViewContainerRef;
 

apps/sandbox/src/app/cannon/scene.component.ts

@@ -5,6 +5,7 @@ import { NgtArgs } from 'angular-three';
 import { NgtcPhysics } from 'angular-three-cannon';
 import { NgtcDebug } from 'angular-three-cannon/debug';
 import { injectBox, injectPlane } from 'angular-three-cannon/services';
+import { gravity, isDebugging } from '../states';
 
 @Component({
 	selector: 'app-plane',
@@ -55,8 +56,8 @@ export class Box {
 			[penumbra]="1"
 			[castShadow]="true"
 		/>
-		<ngtc-physics [gravity]="[0, 0, -25]" [iterations]="10">
-			<ngtc-debug color="white" [disabled]="true">
+		<ngtc-physics [gravity]="[0, 0, gravity.gravity()]" [iterations]="10">
+			<ngtc-debug color="white" [disabled]="!isDebugging.isDebugging()">
 				<app-plane [position]="[0, 0, -10]" />
 				<app-plane *ngIf="showPlane()" />
 				<app-box [position]="[1, 0, 1]" />
@@ -75,6 +76,8 @@ export class Box {
 export class CannonScene {
 	Math = Math;
 	showPlane = signal(true);
+	isDebugging = isDebugging;
+	gravity = gravity;
 
 	ngOnInit() {
 		setTimeout(() => {

apps/sandbox/src/app/states.ts

@@ -0,0 +1,24 @@
+import { computed, signal } from '@angular/core';
+
+export const isDebugging = (() => {
+	const state = signal(false);
+
+	return {
+		toggle: () => {
+			state.update((prev) => !prev);
+		},
+		isDebugging: state.asReadonly(),
+	};
+})();
+
+export const gravity = (() => {
+	const state = signal(-20);
+
+	return {
+		change: () => {
+			state.update((prev) => (prev === -20 ? -10 : -20));
+		},
+		gravity: state.asReadonly(),
+		btnText: computed(() => `Change gravity to ${state() === -20 ? '-10' : '-20'}`),
+	};
+})();

libs/cannon/services/src/lib/body.ts

@@ -99,7 +99,7 @@ const quaternionToRotation = (callback: (v: Triplet) => void) => {
 
 let incrementingId = 0;
 
-export function subscribe<T extends SubscriptionName>(
+export function createSubscribe<T extends SubscriptionName>(
 	ref: ElementRef<THREE.Object3D>,
 	worker: CannonWorkerAPI,
 	subscriptions: Subscriptions,
@@ -236,14 +236,17 @@ function injectBody<TBodyProps extends BodyProps, TObject extends THREE.Object3D
 ): NgtcBodyReturn<TObject> {
 	injector = assertInjector(injectBody, injector);
 	return runInInjectionContext(injector, () => {
-		const bodyRef = ref || injectNgtRef<TObject>();
-
-		const physicsApi = injectNgtcPhysicsApi();
-		const debugApi = injectNgtcDebugApi({ optional: true });
-
-		const { add: debugAdd, remove: debugRemove } = debugApi || {};
-		const { refs, subscriptions, scaleOverrides, events, bodies } = physicsApi.get();
-		const worker = physicsApi.select('worker');
+		const [bodyRef, physicsApi, debugApi] = [
+			ref || injectNgtRef<TObject>(),
+			injectNgtcPhysicsApi(),
+			injectNgtcDebugApi({ optional: true }),
+		];
+
+		const [
+			{ add: addToDebug, remove: removeFromDebug },
+			{ refs, subscriptions, scaleOverrides, events, bodies },
+			worker,
+		] = [debugApi || {}, physicsApi.get(), physicsApi.select('worker')];
 
 		effect((onCleanup) => {
 			// register deps
@@ -277,15 +280,15 @@ function injectBody<TBodyProps extends BodyProps, TObject extends THREE.Object3D
 							object.setMatrixAt(i, temp.matrix);
 							object.instanceMatrix.needsUpdate = true;
 							refs[id] = object;
-							debugAdd?.(id, props, type);
+							addToDebug?.(id, props, type);
 							setupCollision(events, props, id);
 							return { ...props, args: argsFn(props.args) };
 					  })
 					: uuid.map((id, i) => {
 							const props = getPropsFn(i);
 							prepare(object, props);
 							refs[id] = object;
-							debugAdd?.(id, props, type);
+							addToDebug?.(id, props, type);
 							setupCollision(events, props, id);
 							return { ...props, args: argsFn(props.args) };
 					  });
@@ -302,7 +305,7 @@ function injectBody<TBodyProps extends BodyProps, TObject extends THREE.Object3D
 			onCleanup(() => {
 				uuid.forEach((id) => {
 					delete refs[id];
-					debugRemove?.(id);
+					removeFromDebug?.(id);
 					delete events[id];
 				});
 				currentWorker.removeBodies({ uuid });
@@ -322,7 +325,7 @@ function injectBody<TBodyProps extends BodyProps, TObject extends THREE.Object3D
 								uuid,
 							} as never);
 					},
-					subscribe: subscribe(bodyRef, worker(), subscriptions, type, index),
+					subscribe: createSubscribe(bodyRef, worker(), subscriptions, type, index),
 				};
 			};
 
@@ -337,7 +340,7 @@ function injectBody<TBodyProps extends BodyProps, TObject extends THREE.Object3D
 						const uuid = getUUID(bodyRef, index);
 						uuid && bodies[uuid] != null && worker().setQuaternion({ props: [x, y, z, w], uuid });
 					},
-					subscribe: subscribe(bodyRef, worker(), subscriptions, type, index),
+					subscribe: createSubscribe(bodyRef, worker(), subscriptions, type, index),
 				};
 			};
 
@@ -378,7 +381,7 @@ function injectBody<TBodyProps extends BodyProps, TObject extends THREE.Object3D
 						const uuid = getUUID(bodyRef, index);
 						uuid && bodies[uuid] != null && worker()[op]({ props: [x, y, z], uuid });
 					},
-					subscribe: subscribe(bodyRef, worker(), subscriptions, type, index),
+					subscribe: createSubscribe(bodyRef, worker(), subscriptions, type, index),
 				};
 			};
 

libs/cannon/services/src/lib/raycast-vehicle.ts

@@ -4,7 +4,7 @@ import { injectNgtRef, type NgtAnyRecord, type NgtInjectedRef } from 'angular-th
 import { injectNgtcPhysicsApi } from 'angular-three-cannon';
 import { assertInjector } from 'ngxtension/assert-injector';
 import * as THREE from 'three';
-import { getUUID, subscribe } from './body';
+import { createSubscribe, getUUID } from './body';
 
 function isString(v: unknown): v is string {
 	return typeof v === 'string';
@@ -101,7 +101,7 @@ export function injectRaycastVehicle<TObject extends THREE.Object3D = THREE.Obje
 					});
 			},
 			sliding: {
-				subscribe: subscribe(instanceRef, worker(), subscriptions, 'sliding', undefined, 'vehicles'),
+				subscribe: createSubscribe(instanceRef, worker(), subscriptions, 'sliding', undefined, 'vehicles'),
 			},
 
 			remove: () => {

nx.json

@@ -1,5 +1,4 @@
 {
-	"$schema": "./node_modules/nx/schemas/nx-schema.json",
 	"tasksRunnerOptions": {
 		"default": {
 			"runner": "nx/tasks-runners/default",