feat(soba/controls): add TrackballControls

Author: nartc

libs/soba/controls/src/index.ts

@@ -1,3 +1,4 @@
 export * from './lib/camera-controls';
 export * from './lib/orbit-controls';
 export * from './lib/scroll-controls';
+export * from './lib/trackball-controls';

libs/soba/controls/src/lib/trackball-controls.ts

@@ -0,0 +1,132 @@
+import {
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	CUSTOM_ELEMENTS_SCHEMA,
+	effect,
+	input,
+	output,
+} from '@angular/core';
+import {
+	injectBeforeRender,
+	injectStore,
+	NgtArgs,
+	NgtOverwrite,
+	NgtThreeElement,
+	NgtVector3,
+	omit,
+	pick,
+} from 'angular-three';
+import { mergeInputs } from 'ngxtension/inject-inputs';
+import * as THREE from 'three';
+import { TrackballControls } from 'three-stdlib';
+
+export type NgtsTrackballControlsOptions = Omit<
+	NgtOverwrite<
+		NgtThreeElement<typeof TrackballControls>,
+		{ target?: NgtVector3; camera?: THREE.Camera; domElement?: HTMLElement; regress: boolean; makeDefault: boolean }
+	>,
+	'attach' | 'addEventListener' | 'removeEventListener' | 'parameters' | '___ngt_args__'
+>;
+
+const defaultOptions: NgtsTrackballControlsOptions = {
+	regress: false,
+	makeDefault: false,
+};
+
+@Component({
+	selector: 'ngts-trackball-controls',
+	template: `
+		<ngt-primitive *args="[controls()]" [parameters]="parameters()">
+			<ng-content />
+		</ngt-primitive>
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtArgs],
+})
+export class NgtsTrackballControls {
+	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
+	protected parameters = omit(this.options, ['makeDefault', 'camera', 'regress', 'domElement']);
+
+	changed = output<THREE.Event>();
+	started = output<THREE.Event>();
+	ended = output<THREE.Event>();
+
+	private store = injectStore();
+
+	private camera = pick(this.options, 'camera');
+	private regress = pick(this.options, 'regress');
+	private domElement = pick(this.options, 'domElement');
+	private makeDefault = pick(this.options, 'makeDefault');
+
+	protected controls = computed(() => {
+		const camera = this.camera();
+		if (camera) return new TrackballControls(camera as THREE.PerspectiveCamera);
+		return new TrackballControls(this.store.camera());
+	});
+
+	constructor() {
+		injectBeforeRender(
+			() => {
+				const controls = this.controls();
+				if (controls.enabled) controls.update();
+			},
+			{ priority: -1 },
+		);
+
+		effect((onCleanup) => {
+			const makeDefault = this.makeDefault();
+			if (!makeDefault) return;
+
+			const controls = this.controls();
+			const oldControls = this.store.snapshot.controls;
+			this.store.update({ controls });
+			onCleanup(() => void this.store.update({ controls: oldControls }));
+		});
+
+		effect((onCleanup) => {
+			const [controls, domElement] = [
+				this.controls(),
+				this.domElement() || this.store.snapshot.events.connected || this.store.gl.domElement(),
+				this.store.invalidate(),
+				this.regress(),
+			];
+			controls.connect(domElement);
+			onCleanup(() => void controls.dispose());
+		});
+
+		effect((onCleanup) => {
+			const [controls, invalidate, performanceRegress, regress] = [
+				this.controls(),
+				this.store.invalidate(),
+				this.store.performance.regress(),
+				this.regress(),
+			];
+
+			const changeCallback: (e: THREE.Event) => void = (e) => {
+				invalidate();
+				if (regress) performanceRegress();
+				this.changed.emit(e);
+			};
+
+			const startCallback = this.started.emit.bind(this.started);
+			const endCallback = this.ended.emit.bind(this.ended);
+
+			controls.addEventListener('change', changeCallback);
+			controls.addEventListener('start', startCallback);
+			controls.addEventListener('end', endCallback);
+
+			onCleanup(() => {
+				controls.removeEventListener('change', changeCallback);
+				controls.removeEventListener('start', startCallback);
+				controls.removeEventListener('end', endCallback);
+			});
+		});
+
+		effect(() => {
+			const [controls] = [this.controls(), this.store.viewport()];
+			controls.handleResize();
+		});
+	}
+}