feat(soba): controls

Author: nartc

libs/core/src/lib/html.ts

@@ -17,6 +17,7 @@ import { NgtAnyRecord } from './types';
 const NGT_HTML_DOM_ELEMENT = new InjectionToken<'gl' | HTMLElement>('NGT_HTML_DOM_ELEMENT');
 
 export function provideHTMLDomElement(): Provider;
+export function provideHTMLDomElement(factory: () => HTMLElement): Provider;
 export function provideHTMLDomElement<
 	TDeps extends Array<ProviderToken<any>>,
 	TValues extends {
@@ -28,6 +29,10 @@ export function provideHTMLDomElement(...args: any[]) {
 		return { provide: NGT_HTML_DOM_ELEMENT, useFactory: () => 'gl' };
 	}
 
+	if (args.length === 1) {
+		return { provide: NGT_HTML_DOM_ELEMENT, useFactory: args[0] };
+	}
+
 	return { provide: NGT_HTML_DOM_ELEMENT, useFactory: args.pop(), deps: args };
 }
 

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

@@ -116,12 +116,10 @@ export class NgtsCameraControls {
 		});
 
 		effect((onCleanup) => {
-			const [controls, regress, performanceRegress, invalidate] = [
-				this.controls(),
-				this.regress(),
-				this.performanceRegress(),
-				this.invalidate(),
-			];
+			const controls = this.controls();
+			if (!controls) return;
+
+			const [regress, performanceRegress, invalidate] = [this.regress(), this.performanceRegress(), this.invalidate()];
 
 			const callback = (e: any) => {
 				invalidate();
@@ -150,13 +148,13 @@ export class NgtsCameraControls {
 		});
 
 		effect((onCleanup) => {
-			const [controls, makeDefault] = [this.controls(), this.makeDefault()];
+			const makeDefault = this.makeDefault();
+			if (!makeDefault) return;
 
-			if (makeDefault) {
-				const oldControls = this.store.snapshot.controls;
-				this.store.update({ controls: controls as unknown as EventDispatcher });
-				onCleanup(() => void this.store.update({ controls: oldControls }));
-			}
+			const controls = this.controls();
+			const oldControls = this.store.snapshot.controls;
+			this.store.update({ controls: controls as unknown as EventDispatcher });
+			onCleanup(() => void this.store.update({ controls: oldControls }));
 		});
 	}
 }

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

@@ -70,12 +70,7 @@ export class NgtsOrbitControls {
 			},
 			{ priority: -1 },
 		);
-		this.connectElement();
-		this.makeControlsDefault();
-		this.setEvents();
-	}
 
-	private connectElement() {
 		effect((onCleanup) => {
 			const [keyEvents, domElement, controls] = [
 				this.keyEvents(),
@@ -92,29 +87,25 @@ export class NgtsOrbitControls {
 			}
 			onCleanup(() => void controls.dispose());
 		});
-	}
 
-	private makeControlsDefault() {
 		effect((onCleanup) => {
-			const [controls, makeDefault] = [this.controls(), this.makeDefault()];
+			const makeDefault = this.makeDefault();
+			if (!makeDefault) return;
+
+			const controls = this.controls();
 			if (!controls) return;
-			if (makeDefault) {
-				const oldControls = this.store.get('controls');
-				this.store.update({ controls });
-				onCleanup(() => void this.store.update({ controls: oldControls }));
-			}
+
+			const oldControls = this.store.get('controls');
+			this.store.update({ controls });
+			onCleanup(() => void this.store.update({ controls: oldControls }));
 		});
-	}
 
-	private setEvents() {
 		effect((onCleanup) => {
-			const [controls, invalidate, performanceRegress, regress] = [
-				this.controls(),
-				this.invalidate(),
-				this.performanceRegress(),
-				this.regress(),
-			];
+			const controls = this.controls();
 			if (!controls) return;
+
+			const [invalidate, performanceRegress, regress] = [this.invalidate(), this.performanceRegress(), this.regress()];
+
 			const changeCallback: (e: Event) => void = (e) => {
 				invalidate();
 				if (regress) performanceRegress();

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

@@ -166,18 +166,17 @@ export class NgtsScrollControls {
 		});
 
 		effect((onCleanup) => {
-			const [el, events, size, infinite, invalidate, horizontal, enabled] = [
-				this.el,
-				this.events(),
+			const [el, events] = [this.el, this.events()];
+			if (!events.connected || events.connected !== el) return;
+
+			const [size, infinite, invalidate, horizontal, enabled] = [
 				this.size(),
 				this.infinite(),
 				this.invalidate(),
 				this.horizontal(),
 				this.enabled(),
 			];
 
-			if (events.connected !== el) return;
-
 			const containerLength = size[horizontal ? 'width' : 'height'];
 			const scrollLength = el[horizontal ? 'scrollWidth' : 'scrollHeight'];
 			const scrollThreshold = scrollLength - containerLength;