clean up

Author: nartc

libs/core/src/lib/store.ts

@@ -1,14 +1,5 @@
 import { DOCUMENT } from '@angular/common';
-import {
-	ElementRef,
-	InjectionToken,
-	Injector,
-	Optional,
-	SkipSelf,
-	computed,
-	effect,
-	runInInjectionContext,
-} from '@angular/core';
+import { ElementRef, InjectionToken, Injector, Optional, SkipSelf, effect, runInInjectionContext } from '@angular/core';
 import { Subject, type Observable } from 'rxjs';
 import * as THREE from 'three';
 import type { NgtCamera, NgtDomEvent, NgtEventManager, NgtPointerCaptureTarget, NgtThreeEvent } from './events';
@@ -344,19 +335,12 @@ function storeFactory(loop: NgtLoop, document: Document, injector: Injector, par
 		let oldDpr = state.viewport.dpr;
 		let oldCamera = state.camera;
 
-		const camera = store.select('camera');
-		const size = store.select('size');
-		const viewport = store.select('viewport');
-
-		const triggers = computed(() => ({
-			camera: camera(),
-			size: size(),
-			viewport: viewport(),
-			gl: store.get('gl'),
-		}));
+		const _camera = store.select('camera');
+		const _size = store.select('size');
+		const _viewport = store.select('viewport');
 
 		effect(() => {
-			const { camera, size, viewport, gl } = triggers();
+			const [camera, size, viewport, gl] = [_camera(), _size(), _viewport(), store.get('gl')];
 
 			// Resize camera and renderer on changes to size and pixelratio
 			if (size !== oldSize || viewport.dpr !== oldDpr) {

libs/soba/abstractions/src/billboard/billboard.ts

@@ -31,24 +31,22 @@ declare global {
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class NgtsBillboard {
-	private inputs = signalStore<NgtsBillboardState>({
-		follow: true,
-		lockX: false,
-		lockY: false,
-		lockZ: false,
-	});
+	private inputs = signalStore<NgtsBillboardState>({ follow: true, lockX: false, lockY: false, lockZ: false });
 
 	@Input() billboardRef = injectNgtRef<Group>();
 
 	@Input({ alias: 'follow' }) set _follow(follow: boolean) {
 		this.inputs.set({ follow });
 	}
+
 	@Input({ alias: 'lockX' }) set _lockX(lockX: boolean) {
 		this.inputs.set({ lockX });
 	}
+
 	@Input({ alias: 'lockY' }) set _lockY(lockY: boolean) {
 		this.inputs.set({ lockY });
 	}
+
 	@Input({ alias: 'lockZ' }) set _lockZ(lockZ: boolean) {
 		this.inputs.set({ lockZ });
 	}

libs/soba/abstractions/src/text/text.ts

@@ -5,7 +5,6 @@ import {
 	EventEmitter,
 	Input,
 	Output,
-	computed,
 	effect,
 	inject,
 } from '@angular/core';
@@ -235,21 +234,19 @@ export class NgtsText {
 	}
 
 	private preloadFont() {
-		const font = this.inputs.select('font');
-		const characters = this.inputs.select('characters');
-		const trigger = computed(() => ({ font: font(), characters: characters() }));
+		const _font = this.inputs.select('font');
+		const _characters = this.inputs.select('characters');
 
 		effect(() => {
-			const { font, characters } = trigger();
+			const [font, characters] = [_font(), _characters()];
 			const invalidate = this.store.get('invalidate');
 			preloadFont({ font, characters }, () => invalidate());
 		});
 	}
 
 	private syncText() {
 		effect(() => {
-			this.inputs.state();
-			const invalidate = this.store.get('invalidate');
+			const [invalidate] = [this.store.get('invalidate'), this.inputs.state()];
 			this.troikaText.sync(() => {
 				invalidate();
 				if (this.sync.observed) {

libs/soba/cameras/src/camera/camera.ts

@@ -42,9 +42,10 @@ export abstract class NgtsCamera<TCamera extends NgtCamera> {
 	@Input() cameraRef = injectNgtRef<TCamera>();
 
 	protected store = injectNgtStore();
-	private cameraResolution = this.inputs.select('resolution');
 	protected fboRef = injectNgtsFBO(() => ({ width: this.cameraResolution() }));
 
+	private cameraResolution = this.inputs.select('resolution');
+
 	constructor() {
 		this.setDefaultCamera();
 		this.updateProjectionMatrix();

libs/soba/cameras/src/cube-camera/cube-camera.ts

@@ -57,53 +57,47 @@ export function injectNgtsCubeCamera(
 ) {
 	injector = assertInjectionContext(injectNgtsCubeCamera, injector);
 	return runInInjectionContext(injector, () => {
-		const state = computed(() => {
-			const cameraState = cubeCameraState();
-			return { ...defaultCubeCameraState, ...cameraState };
-		});
+		const state = computed(() => ({ ...defaultCubeCameraState, ...cubeCameraState() }));
+		const resolution = computed(() => state().resolution);
+		const near = computed(() => state().near);
+		const far = computed(() => state().far);
 
 		const store = injectNgtStore();
 
-		const gl = store.select('gl');
-		const scene = store.select('scene');
+		const _gl = store.select('gl');
+		const _scene = store.select('scene');
 
-		const fbo = computed(() => {
-			const renderTarget = new THREE.WebGLCubeRenderTarget(state().resolution);
+		const _fbo = computed(() => {
+			const renderTarget = new THREE.WebGLCubeRenderTarget(resolution());
 			renderTarget.texture.type = THREE.HalfFloatType;
 			return renderTarget;
 		});
 
 		effect((onCleanup) => {
-			const _fbo = fbo();
-			onCleanup(() => _fbo.dispose());
+			const fbo = _fbo();
+			onCleanup(() => fbo.dispose());
 		});
 
-		const camera = computed(() => {
-			const { near, far } = state();
-			return new THREE.CubeCamera(near, far, fbo());
-		});
+		const _camera = computed(() => new THREE.CubeCamera(near(), far(), _fbo()));
 
 		let originalFog: THREE.Scene['fog'];
 		let originalBackground: THREE.Scene['background'];
 
 		const update = computed(() => {
-			const _scene = scene();
-			const _gl = gl();
-			const _camera = camera();
-			const { envMap, fog } = untracked(state);
+			const [scene, gl, camera, { envMap, fog }] = [_scene(), _gl(), _camera(), untracked(state)];
 
 			return () => {
-				originalFog = _scene.fog;
-				originalBackground = _scene.background;
-				_scene.background = envMap || originalBackground;
-				_scene.fog = fog || originalFog;
-				_camera.update(_gl, _scene);
-				_scene.fog = originalFog;
-				_scene.background = originalBackground;
+				originalFog = scene.fog;
+				originalBackground = scene.background;
+				scene.background = envMap || originalBackground;
+				scene.fog = fog || originalFog;
+				camera.update(gl, scene);
+				scene.fog = originalFog;
+				scene.background = originalBackground;
 			};
 		});
 
-		return { fbo, camera, update };
+		return { fbo: _fbo, camera: _camera, update };
 	});
 }
 
@@ -152,10 +146,10 @@ export class NgtsCubeCamera implements OnInit {
 	@Input() cameraRef = injectNgtRef<Group>();
 
 	@ContentChild(NgtsCubeCameraContent, { static: true, read: TemplateRef })
-	cameraContent!: TemplateRef<{ texture: Signal<THREE.WebGLRenderTarget['texture']> }>;
+	private cameraContent!: TemplateRef<{ texture: Signal<THREE.WebGLRenderTarget['texture']> }>;
 
 	@ViewChild('anchor', { static: true, read: ViewContainerRef })
-	anchor!: ViewContainerRef;
+	private anchor!: ViewContainerRef;
 
 	/** Resolution of the FBO, 256 */
 	@Input({ alias: 'resolution' }) set _resolution(resolution: number) {
@@ -182,7 +176,7 @@ export class NgtsCubeCamera implements OnInit {
 		this.inputs.set({ fog });
 	}
 
-	cubeCamera = injectNgtsCubeCamera(this.inputs.select());
+	cubeCamera = injectNgtsCubeCamera(this.inputs.state);
 	private texture = computed(() => this.cubeCamera.fbo().texture);
 	private contentRef?: EmbeddedViewRef<unknown>;
 

libs/soba/cameras/src/orthographic-camera/orthographic-camera.ts

@@ -57,30 +57,30 @@ export class NgtsOrthographicCamera extends NgtsCamera<THREE.OrthographicCamera>
 
 	@ContentChild(NgtsCameraContent) cameraContent?: NgtsCameraContent;
 
-	@Input() set left(left: number) {
+	@Input({ alias: 'left' }) set _left(left: number) {
 		this.orthographicInputs.set({ left });
 	}
 
-	@Input() set right(right: number) {
+	@Input({ alias: 'right' }) set _right(right: number) {
 		this.orthographicInputs.set({ right });
 	}
 
-	@Input() set top(top: number) {
+	@Input({ alias: 'top' }) set _top(top: number) {
 		this.orthographicInputs.set({ top });
 	}
 
-	@Input() set bottom(bottom: number) {
+	@Input({ alias: 'bottom' }) set _bottom(bottom: number) {
 		this.orthographicInputs.set({ bottom });
 	}
 
-	private _left = this.orthographicInputs.select('left');
-	private _right = this.orthographicInputs.select('right');
-	private _top = this.orthographicInputs.select('top');
-	private _bottom = this.orthographicInputs.select('bottom');
+	private left = this.orthographicInputs.select('left');
+	private right = this.orthographicInputs.select('right');
+	private top = this.orthographicInputs.select('top');
+	private bottom = this.orthographicInputs.select('bottom');
 	private size = this.store.select('size');
 
-	cameraLeft = computed(() => this._left() || this.size().width / -2);
-	cameraRight = computed(() => this._right() || this.size().width / 2);
-	cameraTop = computed(() => this._top() || this.size().height / 2);
-	cameraBottom = computed(() => this._bottom() || this.size().height / -2);
+	cameraLeft = computed(() => this.left() || this.size().width / -2);
+	cameraRight = computed(() => this.right() || this.size().width / 2);
+	cameraTop = computed(() => this.top() || this.size().height / 2);
+	cameraBottom = computed(() => this.bottom() || this.size().height / -2);
 }

libs/soba/controls/src/orbit-controls/orbit-controls.ts

@@ -79,14 +79,24 @@ export class NgtsOrbitControls {
 	@Output() end = new EventEmitter<THREE.Event>();
 
 	private store = injectNgtStore();
+	private invalidate = this.store.select('invalidate');
+	private performance = this.store.select('performance');
+	private defaultCamera = this.store.select('camera');
+	private glDomElement = this.store.select('gl', 'domElement');
+
+	private regress = this.inputs.select('regress');
+	private camera = this.inputs.select('camera');
+	private domElement = this.inputs.select('domElement');
+	private keyEvents = this.inputs.select('keyEvents');
+	private makeDefault = this.inputs.select('makeDefault');
 
 	args = computed(() => [this.controlsRef.nativeElement]);
 	enableDamping = this.inputs.select('enableDamping');
 
 	constructor() {
 		injectBeforeRender(
 			() => {
-				const controls = this.controlsRef.untracked;
+				const controls = this.controlsRef.nativeElement;
 				if (controls && controls.enabled) {
 					controls.update();
 				}
@@ -101,40 +111,28 @@ export class NgtsOrbitControls {
 	}
 
 	private setControls() {
-		const camera = this.inputs.select('camera');
-		const defaultCamera = this.store.select('camera');
-		const trigger = computed(() => ({ camera: camera(), defaultCamera: defaultCamera() }));
-
 		effect(() => {
-			const { camera, defaultCamera } = trigger();
+			const [camera, defaultCamera, controls] = [
+				this.camera(),
+				this.defaultCamera(),
+				this.controlsRef.nativeElement,
+			];
 			const controlsCamera = camera || defaultCamera;
-			const controls = this.controlsRef.nativeElement;
 			if (!controls || controls.object !== controlsCamera) {
 				this.controlsRef.nativeElement = new OrbitControls(controlsCamera as NgtCamera);
 			}
 		});
 	}
 
 	private connectElement() {
-		const glDomElement = this.store.select('gl', 'domElement');
-		const domElement = this.inputs.select('domElement');
-		const regress = this.inputs.select('regress');
-		const invalidate = this.store.select('invalidate');
-		const keyEvents = this.inputs.select('keyEvents');
-
-		const trigger = computed(() => {
-			const eventsSource = this.store.get('events', 'connected');
-			return {
-				keyEvents: keyEvents(),
-				controls: this.controlsRef.nativeElement,
-				domElement: domElement() || eventsSource || glDomElement(),
-				regress: regress(),
-				invalidate: invalidate(),
-			};
-		});
-
 		effect((onCleanup) => {
-			const { domElement, controls, keyEvents } = trigger();
+			const [keyEvents, domElement, controls] = [
+				this.keyEvents(),
+				this.domElement() || this.store.get('events', 'connected') || this.glDomElement(),
+				this.controlsRef.nativeElement,
+				this.invalidate(),
+				this.regress(),
+			];
 			if (!controls) return;
 			if (keyEvents) {
 				controls.connect(keyEvents === true ? domElement : keyEvents);
@@ -146,11 +144,8 @@ export class NgtsOrbitControls {
 	}
 
 	private makeControlsDefault() {
-		const makeDefault = this.inputs.select('makeDefault');
-		const trigger = computed(() => ({ controls: this.controlsRef.nativeElement, makeDefault: makeDefault() }));
-
 		effect((onCleanup) => {
-			const { controls, makeDefault } = trigger();
+			const [controls, makeDefault] = [this.controlsRef.nativeElement, this.makeDefault()];
 			if (!controls) return;
 			if (makeDefault) {
 				const oldControls = this.store.get('controls');
@@ -161,18 +156,13 @@ export class NgtsOrbitControls {
 	}
 
 	private setEvents() {
-		const invalidate = this.store.select('invalidate');
-		const performance = this.store.select('performance');
-		const regress = this.inputs.select('regress');
-
-		const trigger = computed(() => ({
-			invalidate: invalidate(),
-			performance: performance(),
-			regress: regress(),
-			controls: this.controlsRef.nativeElement,
-		}));
 		effect((onCleanup) => {
-			const { controls, invalidate, performance, regress } = trigger();
+			const [controls, invalidate, performance, regress] = [
+				this.controlsRef.nativeElement,
+				this.invalidate(),
+				this.performance(),
+				this.regress(),
+			];
 			if (!controls) return;
 			const changeCallback: (e: THREE.Event) => void = (e) => {
 				invalidate();