fix(cannon): unwrap afterNextRender from injectBody and injectConstraint

nartc · nartc · commit 676aa163fd29 · 2024-08-19T21:41:41.000-05:00
BREAKING CHANGE: This is considered a breaking change because of change
in timing. The CIFs no longer handle timing internally via
`afterNextRender`.

By default, `NgtcPhysics` already handles timing with `afterNextRender`
on the component level (i.e: `NgtcPhysics` component) and these cannon
CIFs are supposed to be used as content children of `NgtcPhysics`.

Additional control is up to the consumers' discretion.
diff --git a/libs/cannon/body/src/lib/body.ts b/libs/cannon/body/src/lib/body.ts
@@ -3,8 +3,8 @@ import {
 	Injector,
 	Signal,
 	WritableSignal,
-	afterNextRender,
 	computed,
+	effect,
 	inject,
 	isSignal,
 	signal,
@@ -15,7 +15,6 @@ import { resolveRef } from 'angular-three';
 import { NgtcPhysics } from 'angular-three-cannon';
 import { NgtcDebug } from 'angular-three-cannon/debug';
 import { assertInjector } from 'ngxtension/assert-injector';
-import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { DynamicDrawUsage, InstancedMesh, Object3D } from 'three';
 import { NgtcArgFn, NgtcBodyPropsMap, NgtcBodyPublicApi, NgtcGetByIndex } from './types';
 import { defaultTransformArgs, makeBodyApi, prepare, setupCollision } from './utils';
@@ -46,7 +45,6 @@ function injectBody<TShape extends BodyShapeType, TObject extends Object3D>(
 			throw new Error(`[NGT Cannon] injectBody was called outside of <ngtc-physics>`);
 		}
 
-		const autoEffect = injectAutoEffect();
 		const debug = inject(NgtcDebug, { optional: true });
 
 		const transform = transformArgs ?? defaultTransformArgs[type];
@@ -61,73 +59,71 @@ function injectBody<TShape extends BodyShapeType, TObject extends Object3D>(
 			return makeBodyApi(_body, worker(), rest);
 		});
 
-		afterNextRender(() => {
-			autoEffect(() => {
-				const currentWorker = physics.api.worker();
-				if (!currentWorker) return;
+		effect((onCleanup) => {
+			const currentWorker = physics.api.worker();
+			if (!currentWorker) return;
 
-				const object = body();
+			const object = body();
 
-				if (!isSignal(ref) && !object) {
-					untracked(() => {
-						(bodyRef as WritableSignal<TObject | undefined>).set(resolveRef(ref));
-					});
-					return;
-				}
+			if (!isSignal(ref) && !object) {
+				untracked(() => {
+					(bodyRef as WritableSignal<TObject | undefined>).set(resolveRef(ref));
+				});
+				return;
+			}
 
-				if (!object) return;
+			if (!object) return;
 
-				const [uuid, props] = (() => {
-					let uuids: string[] = [];
-					let temp: Object3D;
-					if (object instanceof InstancedMesh) {
-						object.instanceMatrix.setUsage(DynamicDrawUsage);
-						uuids = new Array(object.count).fill(0).map((_, i) => `${object.uuid}/${i}`);
-						temp = new Object3D();
-					} else {
-						uuids = [object.uuid];
-					}
-					return [
-						uuids,
-						uuids.map((id, index) => {
-							const props = getPropFn(index);
-							if (temp) {
-								prepare(temp, props);
-								(object as unknown as InstancedMesh).setMatrixAt(index, temp.matrix);
-								(object as unknown as InstancedMesh).instanceMatrix.needsUpdate = true;
-							} else {
-								prepare(object, props);
-							}
-							physics.api.refs[id] = object;
-							debug?.add(id, props, type);
-							setupCollision(physics.api.events, props, id);
-							// @ts-expect-error - if args is undefined, there's default
-							return { ...props, args: transform(props.args) };
-						}),
-					];
-				})();
-				// Register on mount, unregister on unmount
-				currentWorker.addBodies({
-					props: props.map(({ onCollide, onCollideBegin, onCollideEnd, ...serializableProps }) => {
-						return {
-							onCollide: Boolean(onCollide),
-							onCollideBegin: Boolean(onCollideBegin),
-							onCollideEnd: Boolean(onCollideEnd),
-							...serializableProps,
-						};
+			const [uuid, props] = (() => {
+				let uuids: string[] = [];
+				let temp: Object3D;
+				if (object instanceof InstancedMesh) {
+					object.instanceMatrix.setUsage(DynamicDrawUsage);
+					uuids = new Array(object.count).fill(0).map((_, i) => `${object.uuid}/${i}`);
+					temp = new Object3D();
+				} else {
+					uuids = [object.uuid];
+				}
+				return [
+					uuids,
+					uuids.map((id, index) => {
+						const props = getPropFn(index);
+						if (temp) {
+							prepare(temp, props);
+							(object as unknown as InstancedMesh).setMatrixAt(index, temp.matrix);
+							(object as unknown as InstancedMesh).instanceMatrix.needsUpdate = true;
+						} else {
+							prepare(object, props);
+						}
+						physics.api.refs[id] = object;
+						debug?.add(id, props, type);
+						setupCollision(physics.api.events, props, id);
+						// @ts-expect-error - if args is undefined, there's default
+						return { ...props, args: transform(props.args) };
 					}),
-					type,
-					uuid,
-				});
+				];
+			})();
+			// Register on mount, unregister on unmount
+			currentWorker.addBodies({
+				props: props.map(({ onCollide, onCollideBegin, onCollideEnd, ...serializableProps }) => {
+					return {
+						onCollide: Boolean(onCollide),
+						onCollideBegin: Boolean(onCollideBegin),
+						onCollideEnd: Boolean(onCollideEnd),
+						...serializableProps,
+					};
+				}),
+				type,
+				uuid,
+			});
 
-				return () => {
-					uuid.forEach((id) => {
-						delete physics.api.refs[id];
-						debug?.remove(id);
-						delete physics.api.events[id];
-					});
-					currentWorker.removeBodies({ uuid });
-				};
+			onCleanup(() => {
+				uuid.forEach((id) => {
+					delete physics.api.refs[id];
+					debug?.remove(id);
+					delete physics.api.events[id];
+				});
+				currentWorker.removeBodies({ uuid });
 			});
 		});
 
diff --git a/libs/cannon/constraint/src/lib/constraint.ts b/libs/cannon/constraint/src/lib/constraint.ts
@@ -1,14 +1,4 @@
-import {
-	ElementRef,
-	Injector,
-	Signal,
-	afterNextRender,
-	computed,
-	inject,
-	isSignal,
-	signal,
-	untracked,
-} from '@angular/core';
+import { ElementRef, Injector, Signal, computed, effect, inject, isSignal, signal, untracked } from '@angular/core';
 import {
 	ConeTwistConstraintOpts,
 	ConstraintTypes,
@@ -20,7 +10,6 @@ import {
 import { makeId, resolveRef } from 'angular-three';
 import { NgtcPhysics } from 'angular-three-cannon';
 import { assertInjector } from 'ngxtension/assert-injector';
-import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { Object3D } from 'three';
 
 export interface NgtcConstraintApi {
@@ -83,7 +72,6 @@ function injectConstraint<
 			throw new Error(`[NGT Cannon] injectConstraint was called outside of <ngtc-physics>`);
 		}
 
-		const autoEffect = injectAutoEffect();
 		const worker = physics.api.worker;
 
 		const uuid = makeId();
@@ -114,30 +102,25 @@ function injectConstraint<
 		});
 
 		let alreadyDisabled = false;
-		afterNextRender(() => {
-			autoEffect(() => {
-				const currentWorker = worker();
-				if (!currentWorker) return;
-
-				const [a, b] = [bodyAValue(), bodyBValue()];
+		effect((onCleanup) => {
+			const currentWorker = worker();
+			if (!currentWorker) return;
 
-				if (a && b) {
-					currentWorker.addConstraint({
-						props: [a.uuid, b.uuid, options],
-						type,
-						uuid,
-					});
+			const [a, b] = [bodyAValue(), bodyBValue()];
+			if (!a || !b) return;
 
-					if (disableOnStart && !alreadyDisabled) {
-						alreadyDisabled = true;
-						untracked(api)?.disable();
-					}
+			currentWorker.addConstraint({
+				props: [a.uuid, b.uuid, options],
+				type,
+				uuid,
+			});
 
-					return () => currentWorker.removeConstraint({ uuid });
-				}
+			if (disableOnStart && !alreadyDisabled) {
+				alreadyDisabled = true;
+				untracked(api)?.disable();
+			}
 
-				return;
-			});
+			onCleanup(() => currentWorker.removeConstraint({ uuid }));
 		});
 
 		return api;
diff --git a/libs/cannon/src/lib/physics.ts b/libs/cannon/src/lib/physics.ts
@@ -3,8 +3,6 @@ import {
 	Component,
 	DestroyRef,
 	EmbeddedViewRef,
-	Injector,
-	NgZone,
 	Signal,
 	afterNextRender,
 	computed,
@@ -127,8 +125,6 @@ const defaultOptions: NgtcPhysicsInputs = {
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NgtcPhysics {
-	private zone = inject(NgZone);
-	private injector = inject(Injector);
 	private autoEffect = injectAutoEffect();
 	private store = injectStore();
 
@@ -151,16 +147,22 @@ export class NgtcPhysics {
 
 	constructor() {
 		afterNextRender(() => {
-			this.zone.runOutsideAngular(() => {
-				this.worker.set(new CannonWorkerAPI(this.options()));
-				this.connectWorker();
-				this.updateWorkerState('axisIndex');
-				this.updateWorkerState('broadphase');
-				this.updateWorkerState('gravity');
-				this.updateWorkerState('iterations');
-				this.updateWorkerState('tolerance');
-				this.beforeRender();
-			});
+			this.worker.set(new CannonWorkerAPI(this.options()));
+			this.connectWorker();
+			this.updateWorkerState('axisIndex');
+			this.updateWorkerState('broadphase');
+			this.updateWorkerState('gravity');
+			this.updateWorkerState('iterations');
+			this.updateWorkerState('tolerance');
+		});
+
+		let timeSinceLastCalled = 0;
+		injectBeforeRender(({ delta }) => {
+			const [{ isPaused, maxSubSteps, stepSize }, worker] = [this.options(), this.worker()];
+			if (isPaused || !worker || stepSize == null) return;
+			timeSinceLastCalled += delta;
+			worker.step({ maxSubSteps, stepSize, timeSinceLastCalled });
+			timeSinceLastCalled = 0;
 		});
 
 		inject(DestroyRef).onDestroy(() => {
@@ -199,20 +201,6 @@ export class NgtcPhysics {
 		});
 	}
 
-	private beforeRender() {
-		let timeSinceLastCalled = 0;
-		injectBeforeRender(
-			({ delta }) => {
-				const [{ isPaused, maxSubSteps, stepSize }, worker] = [this.options(), this.worker()];
-				if (isPaused || !worker || stepSize == null) return;
-				timeSinceLastCalled += delta;
-				worker.step({ maxSubSteps, stepSize, timeSinceLastCalled });
-				timeSinceLastCalled = 0;
-			},
-			{ injector: this.injector },
-		);
-	}
-
 	private collideHandler({ body, contact: { bi, bj, ...contactRest }, target, ...rest }: WorkerCollideEvent['data']) {
 		const { events, refs } = this.api;
 		const cb = events[target]?.collide;
