feat(cannon): clean up cannon usages

Author: nartc

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

@@ -56,21 +56,21 @@ function injectBody<TShape extends BodyShapeType, TObject extends Object3D>(
 			const _body = body();
 			if (!_body) return null;
 
-			const { worker, ...rest } = physics.api;
+			const { worker, ...rest } = physics;
 			const _worker = worker();
 			if (!_worker) return null;
 
 			return makeBodyApi(_body, _worker, rest);
 		});
 
 		effect((onCleanup) => {
-			const currentWorker = physics.api.worker();
+			const currentWorker = physics.worker();
 			if (!currentWorker) return;
 
 			const object = body();
 
 			if (!isRefSignal && !object) {
-				// TODO (signal): find a better way to handle this. no setting signal
+				// TODO (signal): remove untracked in v19
 				untracked(() => {
 					bodyRef.set(resolveRef(ref));
 				});
@@ -100,9 +100,9 @@ function injectBody<TShape extends BodyShapeType, TObject extends Object3D>(
 						} else {
 							prepare(object, props);
 						}
-						physics.api.refs[id] = object;
+						physics.refs[id] = object;
 						debug?.add(id, props, type);
-						setupCollision(physics.api.events, props, id);
+						setupCollision(physics.events, props, id);
 						// @ts-expect-error - if args is undefined, there's default
 						return { ...props, args: transform(props.args) };
 					}),
@@ -125,9 +125,9 @@ function injectBody<TShape extends BodyShapeType, TObject extends Object3D>(
 
 			onCleanup(() => {
 				uuid.forEach((id) => {
-					delete physics.api.refs[id];
+					delete physics.refs[id];
 					debug?.remove(id);
-					delete physics.api.events[id];
+					delete physics.events[id];
 				});
 				currentWorker.removeBodies({ uuid });
 			});

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

@@ -20,7 +20,7 @@ import {
 	Triplet,
 	VectorName,
 } from '@pmndrs/cannon-worker-api';
-import { NgtcCannonEvents, NgtcPhysicsApi } from 'angular-three-cannon';
+import { NgtcCannonEvents, NgtcPhysics } from 'angular-three-cannon';
 import { Euler, Object3D, Quaternion, Vector3 } from 'three';
 import { NgtcWorkerApi } from './types';
 
@@ -84,7 +84,7 @@ export function setupCollision(
 export function makeBodyApi(
 	body: Object3D,
 	worker: CannonWorkerAPI,
-	{ subscriptions, scaleOverrides }: Pick<NgtcPhysicsApi, 'subscriptions' | 'scaleOverrides'>,
+	{ subscriptions, scaleOverrides }: Pick<NgtcPhysics, 'subscriptions' | 'scaleOverrides'>,
 ) {
 	const makeAtomic = <T extends AtomicName>(type: T, index?: number) => {
 		const op: SetOpName<T> = `set${capitalize(type)}`;

libs/cannon/constraint/src/lib/constraint.ts

@@ -72,15 +72,15 @@ function injectConstraint<
 			throw new Error(`[NGT Cannon] injectConstraint was called outside of <ngtc-physics>`);
 		}
 
-		const worker = physics.api.worker;
+		const worker = physics.worker;
 
 		const uuid = makeId();
 		const bodyARef = isSignal(bodyA) ? bodyA : signal(bodyA);
 		const bodyBRef = isSignal(bodyB) ? bodyB : signal(bodyB);
 		const bodyAValue = computed(() => resolveRef(bodyARef()));
 		const bodyBValue = computed(() => resolveRef(bodyBRef()));
 
-		const api = computed(() => {
+		const constraintApi = computed(() => {
 			const _worker = worker();
 			if (!_worker) return null;
 
@@ -106,7 +106,7 @@ function injectConstraint<
 			const currentWorker = worker();
 			if (!currentWorker) return;
 
-			const [a, b] = [bodyAValue(), bodyBValue()];
+			const [a, b, api] = [bodyAValue(), bodyBValue(), untracked(constraintApi)];
 			if (!a || !b) return;
 
 			currentWorker.addConstraint({
@@ -117,13 +117,13 @@ function injectConstraint<
 
 			if (disableOnStart && !alreadyDisabled) {
 				alreadyDisabled = true;
-				untracked(api)?.disable();
+				api?.disable();
 			}
 
 			onCleanup(() => currentWorker.removeConstraint({ uuid }));
 		});
 
-		return api;
+		return constraintApi;
 	});
 }
 

libs/cannon/debug/src/lib/debug.ts

@@ -42,16 +42,17 @@ export class NgtcDebug {
 
 	private defaultScene = this.store.select('scene');
 
-	private scene = new Scene();
+	private debuggerScene = new Scene();
 	private bodies: Body[] = [];
 	private bodyMap: Record<string, Body> = {};
 
 	private cannonDebugger!: ReturnType<typeof CannonDebugger>;
 
 	constructor() {
+		// NOTE: afterNextRender so we only instantiate once after inputs have been resolved
 		afterNextRender(() => {
-			this.defaultScene().add(this.scene);
-			this.cannonDebugger = this.debug().impl(this.scene, { bodies: this.bodies } as World, {
+			this.defaultScene().add(this.debuggerScene);
+			this.cannonDebugger = this.debug().impl(this.debuggerScene, { bodies: this.bodies } as World, {
 				color: this.debug().color,
 				scale: this.debug().scale,
 			});
@@ -61,7 +62,7 @@ export class NgtcDebug {
 			if (!this.cannonDebugger) return;
 
 			const enabled = this.debug().enabled;
-			const refs = this.physics.api.refs;
+			const refs = this.physics.refs;
 			for (const uuid in this.bodyMap) {
 				const ref = refs[uuid];
 				const body = this.bodyMap[uuid];
@@ -72,7 +73,7 @@ export class NgtcDebug {
 				}
 			}
 
-			for (const child of this.scene.children) child.visible = enabled;
+			for (const child of this.debuggerScene.children) child.visible = enabled;
 			if (enabled) this.cannonDebugger.update();
 		});
 	}

libs/cannon/src/lib/physics.ts

@@ -1,13 +1,4 @@
-import {
-	ChangeDetectionStrategy,
-	Component,
-	Signal,
-	afterNextRender,
-	effect,
-	input,
-	signal,
-	untracked,
-} from '@angular/core';
+import { Directive, Injector, afterNextRender, effect, inject, input, signal, untracked } from '@angular/core';
 import {
 	CannonWorkerAPI,
 	CannonWorkerProps,
@@ -84,15 +75,6 @@ export interface NgtcPhysicsOptions extends CannonWorkerProps {
 	stepSize?: number;
 }
 
-export interface NgtcPhysicsApi {
-	bodies: { [uuid: string]: number };
-	events: NgtcCannonEvents;
-	refs: Refs;
-	scaleOverrides: ScaleOverrides;
-	subscriptions: Subscriptions;
-	worker: Signal<CannonWorkerAPI>;
-}
-
 const defaultOptions: NgtcPhysicsOptions = {
 	allowSleep: false,
 	axisIndex: 0,
@@ -117,14 +99,7 @@ type NgtsPhysicsUpdatableOptions = Extract<
 	'gravity' | 'iterations' | 'tolerance' | 'broadphase' | 'axisIndex'
 >;
 
-@Component({
-	selector: 'ngtc-physics',
-	standalone: true,
-	template: `
-		<ng-content />
-	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
-})
+@Directive({ selector: 'ngtc-physics', standalone: true })
 export class NgtcPhysics {
 	private store = injectStore();
 
@@ -138,38 +113,48 @@ export class NgtcPhysics {
 
 	private invalidate = this.store.select('invalidate');
 	// @ts-expect-error - worker is not nullable, and we don't want to use ! operator.
-	private worker = signal<CannonWorkerAPI>(null);
+	private cannonWorker = signal<CannonWorkerAPI>(null);
 
-	api: NgtcPhysicsApi = {
-		bodies: {},
-		events: {},
-		refs: {},
-		scaleOverrides: {},
-		subscriptions: {},
-		worker: this.worker.asReadonly(),
-	};
+	bodies: { [uuid: string]: number } = {};
+	events: NgtcCannonEvents = {};
+	refs: Refs = {};
+	scaleOverrides: ScaleOverrides = {};
+	subscriptions: Subscriptions = {};
+	worker = this.cannonWorker.asReadonly();
 
 	constructor() {
+		const injector = inject(Injector);
+
+		// NOTE: set new cannonworker in afterNextRender
+		// - so inputs are resolved
+		// - so the worker is instantiated only once
+		// - effects are started after worker is instantiated
 		afterNextRender(() => {
-			this.worker.set(new CannonWorkerAPI(this.options()));
-		});
+			this.cannonWorker.set(new CannonWorkerAPI(this.options()));
 
-		effect((onCleanup) => {
-			const cleanup = this.connectWorkerEffect();
-			onCleanup(() => cleanup?.());
-		});
+			effect(
+				(onCleanup) => {
+					const cleanup = this.connectWorkerEffect();
+					onCleanup(() => cleanup?.());
+				},
+				{ injector },
+			);
 
-		effect(() => {
-			this.updateWorkerStateEffect('axisIndex', this.axisIndex);
-			this.updateWorkerStateEffect('broadphase', this.broadphase);
-			this.updateWorkerStateEffect('gravity', this.gravity);
-			this.updateWorkerStateEffect('iterations', this.iterations);
-			this.updateWorkerStateEffect('tolerance', this.tolerance);
+			effect(
+				() => {
+					this.updateWorkerStateEffect('axisIndex', this.axisIndex);
+					this.updateWorkerStateEffect('broadphase', this.broadphase);
+					this.updateWorkerStateEffect('gravity', this.gravity);
+					this.updateWorkerStateEffect('iterations', this.iterations);
+					this.updateWorkerStateEffect('tolerance', this.tolerance);
+				},
+				{ injector },
+			);
 		});
 
 		let timeSinceLastCalled = 0;
 		injectBeforeRender(({ delta }) => {
-			const [{ isPaused, maxSubSteps, stepSize }, worker] = [this.options(), this.worker()];
+			const [{ isPaused, maxSubSteps, stepSize }, worker] = [this.options(), this.cannonWorker()];
 			if (isPaused || !worker || stepSize == null) return;
 			timeSinceLastCalled += delta;
 			worker.step({ maxSubSteps, stepSize, timeSinceLastCalled });
@@ -178,7 +163,7 @@ export class NgtcPhysics {
 	}
 
 	private connectWorkerEffect() {
-		const worker = this.worker() as NgtcCannonWorker;
+		const worker = this.cannonWorker() as NgtcCannonWorker;
 		if (!worker) return;
 
 		worker.connect();
@@ -200,29 +185,29 @@ export class NgtcPhysics {
 		key: TUpdatableKey,
 		option: () => NgtcPhysicsOptions[TUpdatableKey],
 	) {
-		const worker = this.worker();
+		const worker = this.cannonWorker();
 		if (!worker) return;
 		Object.assign(worker, { [key]: option() });
 	}
 
 	private collideHandler({ body, contact: { bi, bj, ...contactRest }, target, ...rest }: WorkerCollideEvent['data']) {
-		const { events, refs } = this.api;
+		const { events, refs } = this;
 		const cb = events[target]?.collide;
 		if (cb) {
 			cb({ body: refs[body], contact: { bi: refs[bi], bj: refs[bj], ...contactRest }, target: refs[target], ...rest });
 		}
 	}
 
 	private collideBeginHandler({ bodyA, bodyB }: WorkerCollideBeginEvent['data']) {
-		const { events, refs } = this.api;
+		const { events, refs } = this;
 		const cbA = events[bodyA]?.collideBegin;
 		if (cbA) cbA({ body: refs[bodyB], op: 'event', target: refs[bodyA], type: 'collideBegin' });
 		const cbB = events[bodyB]?.collideBegin;
 		if (cbB) cbB({ body: refs[bodyA], op: 'event', target: refs[bodyB], type: 'collideBegin' });
 	}
 
 	private collideEndHandler({ bodyA, bodyB }: WorkerCollideEndEvent['data']) {
-		const { events, refs } = this.api;
+		const { events, refs } = this;
 		const cbA = events[bodyA]?.collideEnd;
 		if (cbA) cbA({ body: refs[bodyB], op: 'event', target: refs[bodyA], type: 'collideEnd' });
 		const cbB = events[bodyB]?.collideEnd;
@@ -238,7 +223,7 @@ export class NgtcPhysics {
 	}: WorkerFrameMessage['data']) {
 		const [{ shouldInvalidate }, { bodies, subscriptions, refs, scaleOverrides }, invalidate] = [
 			untracked(this.options),
-			this.api,
+			this,
 			this.invalidate(),
 		];
 		for (let i = 0; i < uuids.length; i++) {
@@ -270,7 +255,7 @@ export class NgtcPhysics {
 	}
 
 	private rayhitHandler({ body, ray: { uuid, ...rayRest }, ...rest }: WorkerRayhitEvent['data']) {
-		const { events, refs } = this.api;
+		const { events, refs } = this;
 		const cb = events[uuid]?.rayhit;
 		if (cb) cb({ body: body ? refs[body] : null, ray: { uuid, ...rayRest }, ...rest });
 	}