refactor(soba): update gizmos with new renderer

Author: nartc

libs/soba/gizmos/src/lib/gizmo-helper/gizmo-helper.ts

@@ -8,34 +8,47 @@ import {
 	Directive,
 	effect,
 	ElementRef,
+	Injector,
 	input,
 	output,
-	Signal,
 	TemplateRef,
 	viewChild,
 } from '@angular/core';
-import { extend, hasListener, injectBeforeRender, injectStore, NgtPortal, NgtPortalContent, pick } from 'angular-three';
+import {
+	extend,
+	hasListener,
+	injectBeforeRender,
+	injectStore,
+	NgtPortal,
+	NgtPortalAutoRender,
+	NgtPortalContent,
+	pick,
+} from 'angular-three';
 import { NgtsOrthographicCamera } from 'angular-three-soba/cameras';
 import CameraControls from 'camera-controls';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { Group, Matrix4, Object3D, Quaternion, Scene, Vector3 } from 'three';
+import * as THREE from 'three';
+import { Group } from 'three';
 import { OrbitControls } from 'three-stdlib';
 
 const turnRate = 2 * Math.PI; // turn rate in angles per second
-const dummy = new Object3D();
-const matrix = new Matrix4();
-const [q1, q2] = [new Quaternion(), new Quaternion()];
-const target = new Vector3();
-const targetPosition = new Vector3();
+const dummy = new THREE.Object3D();
+const matrix = new THREE.Matrix4();
+const [q1, q2] = [new THREE.Quaternion(), new THREE.Quaternion()];
+const target = new THREE.Vector3();
+const targetPosition = new THREE.Vector3();
 
 @Directive({ selector: 'ng-template[gizmoHelperContent]' })
 export class NgtsGizmoHelperContent {
-	static ngTemplateContextGuard(_: NgtsGizmoHelperContent, ctx: unknown): ctx is { container: Object3D } {
+	static ngTemplateContextGuard(
+		_: NgtsGizmoHelperContent,
+		ctx: unknown,
+	): ctx is { container: THREE.Object3D; injector: Injector } {
 		return true;
 	}
 }
 
-type ControlsProto = { update(delta?: number): void; target: Vector3 };
+type ControlsProto = { update(delta?: number): void; target: THREE.Vector3 };
 
 export interface NgtsGizmoHelperOptions {
 	alignment:
@@ -66,16 +79,15 @@ const defaultOptions: NgtsGizmoHelperOptions = {
 
 		<ngt-portal
 			[container]="scene"
-			[autoRender]="true"
-			[autoRenderPriority]="_renderPriority"
+			[autoRender]="_renderPriority"
 			[state]="{ events: { priority: _renderPriority + 1 } }"
 		>
-			<ng-template portalContent let-injector="injector" let-container="container">
+			<ng-template portalContent let-injector="injector">
 				<ngts-orthographic-camera [options]="{ makeDefault: true, position: [0, 0, 200] }" />
 				<ngt-group #gizmo [position]="[x(), y(), 0]">
 					<ng-container
 						[ngTemplateOutlet]="content()"
-						[ngTemplateOutletContext]="{ container, injector }"
+						[ngTemplateOutletContext]="{ container: scene, injector }"
 						[ngTemplateOutletInjector]="injector"
 					/>
 				</ngt-group>
@@ -84,7 +96,7 @@ const defaultOptions: NgtsGizmoHelperOptions = {
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [NgtPortal, NgtPortalContent, NgtsOrthographicCamera, NgTemplateOutlet],
+	imports: [NgtPortal, NgtPortalAutoRender, NgtPortalContent, NgtsOrthographicCamera, NgTemplateOutlet],
 })
 export class NgtsGizmoHelper {
 	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
@@ -94,41 +106,38 @@ export class NgtsGizmoHelper {
 	protected margin = pick(this.options, 'margin');
 	protected alignment = pick(this.options, 'alignment');
 
-	protected scene = new Scene();
+	protected scene = new THREE.Scene();
 
 	protected content = contentChild.required(NgtsGizmoHelperContent, { read: TemplateRef });
 
-	private gizmoRef = viewChild<ElementRef<Group>>('gizmo');
+	private gizmoRef = viewChild<ElementRef<THREE.Group>>('gizmo');
 	private virtualCameraRef = viewChild(NgtsOrthographicCamera);
 
 	private store = injectStore();
-	private size = this.store.select('size');
-	private mainCamera = this.store.select('camera');
-	private defaultControls = this.store.select('controls') as unknown as Signal<ControlsProto>;
-	private invalidate = this.store.select('invalidate');
 
 	protected x = computed(() => {
 		const alignment = this.alignment();
 		if (alignment.endsWith('-center')) return 0;
 
-		const [{ width }, [marginX]] = [this.size(), this.margin()];
+		const [width, [marginX]] = [this.store.size.width(), this.margin()];
 		return alignment.endsWith('-left') ? -width / 2 + marginX : width / 2 - marginX;
 	});
 	protected y = computed(() => {
 		const alignment = this.alignment();
 		if (alignment.startsWith('center-')) return 0;
 
-		const [{ height }, [marginY]] = [this.size(), this.margin()];
+		const [height, [marginY]] = [this.store.size.height(), this.margin()];
 		return alignment.startsWith('top-') ? height / 2 - marginY : -height / 2 + marginY;
 	});
 
 	private animating = false;
 	private radius = 0;
-	private focusPoint = new Vector3(0, 0, 0);
-	private defaultUp = new Vector3(0, 0, 0);
+	private focusPoint = new THREE.Vector3(0, 0, 0);
+	private defaultUp = new THREE.Vector3(0, 0, 0);
 
 	constructor() {
 		extend({ Group });
+
 		effect(() => {
 			this.updateDefaultUpEffect();
 		});
@@ -141,7 +150,11 @@ export class NgtsGizmoHelper {
 
 			if (!virtualCamera || !gizmo) return;
 
-			const [defaultControls, mainCamera, invalidate] = [this.defaultControls(), this.mainCamera(), this.invalidate()];
+			const [defaultControls, mainCamera, invalidate] = [
+				this.store.snapshot.controls as unknown as ControlsProto,
+				this.store.snapshot.camera,
+				this.store.snapshot.invalidate,
+			];
 
 			// Animate step
 			if (this.animating) {
@@ -179,8 +192,12 @@ export class NgtsGizmoHelper {
 		});
 	}
 
-	tweenCamera(direction: Vector3) {
-		const [defaultControls, invalidate, mainCamera] = [this.defaultControls(), this.invalidate(), this.mainCamera()];
+	tweenCamera(direction: THREE.Vector3) {
+		const [defaultControls, invalidate, mainCamera] = [
+			this.store.snapshot.controls as unknown as ControlsProto,
+			this.store.snapshot.invalidate,
+			this.store.snapshot.camera,
+		];
 
 		this.animating = true;
 		if (defaultControls) {
@@ -202,7 +219,7 @@ export class NgtsGizmoHelper {
 	}
 
 	private updateDefaultUpEffect() {
-		const mainCamera = this.mainCamera();
+		const mainCamera = this.store.camera();
 		this.defaultUp.copy(mainCamera.up);
 	}
 

libs/soba/gizmos/src/lib/gizmo-helper/gizmo-viewcube.ts

@@ -20,7 +20,8 @@ import {
 	pick,
 } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { BoxGeometry, CanvasTexture, Group, Mesh, MeshBasicMaterial, Vector3 } from 'three';
+import * as THREE from 'three';
+import { BoxGeometry, Group, Mesh, MeshBasicMaterial } from 'three';
 import { NgtsGizmoHelper } from './gizmo-helper';
 
 type XYZ = [number, number, number];
@@ -55,7 +56,7 @@ const defaultFaceMaterialOptions: NgtsViewcubeCommonOptions = {
 			[attach]="['material', index()]"
 			[map]="texture()"
 			[color]="materialColor()"
-			[transparent]="true"
+			transparent
 			[opacity]="opacity()"
 		/>
 	`,
@@ -76,7 +77,6 @@ export class FaceMaterial {
 
 	private document = inject(DOCUMENT);
 	private store = injectStore();
-	private gl = this.store.select('gl');
 
 	protected opacity = pick(this.options, 'opacity');
 	protected materialColor = computed(() => (this.hover() ? this.hoverColor() : 'white'));
@@ -88,7 +88,7 @@ export class FaceMaterial {
 			this.color(),
 			this.textColor(),
 			this.strokeColor(),
-			this.gl(),
+			this.store.gl(),
 		];
 
 		const canvas = this.document.createElement('canvas');
@@ -105,7 +105,7 @@ export class FaceMaterial {
 		context.fillStyle = textColor;
 		context.fillText(faces[index].toUpperCase(), 64, 76);
 
-		const texture = new CanvasTexture(canvas);
+		const texture = new THREE.CanvasTexture(canvas);
 		texture.anisotropy = gl.capabilities.getMaxAnisotropy() || 1;
 
 		return texture;
@@ -179,7 +179,7 @@ export class FaceCube {
 })
 export class EdgeCube {
 	dimensions = input.required<XYZ>();
-	position = input.required<Vector3>();
+	position = input.required<THREE.Vector3>();
 	hoverColor = input(colors.hover, {
 		transform: (value: string | undefined) => {
 			if (value === undefined) return colors.hover;
@@ -242,7 +242,7 @@ export class NgtsGizmoViewcube {
 
 	protected hoverColor = pick(this.options, 'hoverColor');
 
-	protected corners: Vector3[] = [
+	protected corners: THREE.Vector3[] = [
 		[1, 1, 1],
 		[1, 1, -1],
 		[1, -1, 1],
@@ -253,7 +253,7 @@ export class NgtsGizmoViewcube {
 		[-1, -1, -1],
 	].map(this.makePositionVector);
 	protected cornerDimensions: XYZ = [0.25, 0.25, 0.25];
-	protected edges: Vector3[] = [
+	protected edges: THREE.Vector3[] = [
 		[1, 1, 0],
 		[1, 0, 1],
 		[1, 0, -1],
@@ -281,6 +281,6 @@ export class NgtsGizmoViewcube {
 	}
 
 	private makePositionVector(xyz: number[]) {
-		return new Vector3(...xyz).multiplyScalar(0.38);
+		return new THREE.Vector3(...xyz).multiplyScalar(0.38);
 	}
 }

libs/soba/gizmos/src/lib/gizmo-helper/gizmo-viewport.ts

@@ -15,24 +15,17 @@ import {
 	hasListener,
 	injectStore,
 	NgtArgs,
+	NgtEuler,
 	NgtEventHandlers,
-	NgtGroup,
+	NgtThreeElements,
 	NgtThreeEvent,
 	NgtVector3,
 	omit,
 	pick,
 } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import {
-	BoxGeometry,
-	CanvasTexture,
-	ColorRepresentation,
-	Group,
-	Mesh,
-	MeshBasicMaterial,
-	Sprite,
-	SpriteMaterial,
-} from 'three';
+import * as THREE from 'three';
+import { BoxGeometry, Group, Mesh, MeshBasicMaterial, Sprite, SpriteMaterial } from 'three';
 import { NgtsGizmoHelper } from './gizmo-helper';
 
 @Component({
@@ -56,8 +49,8 @@ export class Axis {
 			return value;
 		},
 	});
-	color = input<ColorRepresentation>();
-	rotation = input<NgtVector3>([0, 0, 0]);
+	color = input<THREE.ColorRepresentation>();
+	rotation = input<NgtEuler>([0, 0, 0]);
 
 	constructor() {
 		extend({ Group, Mesh, BoxGeometry, MeshBasicMaterial });
@@ -94,15 +87,14 @@ export class AxisHead {
 	private document = inject(DOCUMENT);
 	private gizmoHelper = inject(NgtsGizmoHelper);
 	private store = injectStore();
-	private gl = this.store.select('gl');
 
 	protected texture = computed(() => {
 		const [arcStyle, label, labelColor, font, gl] = [
 			this.arcStyle(),
 			this.label(),
 			this.labelColor(),
 			this.font(),
-			this.gl(),
+			this.store.gl(),
 		];
 
 		const canvas = this.document.createElement('canvas');
@@ -123,7 +115,7 @@ export class AxisHead {
 			context.fillText(label, 32, 41);
 		}
 
-		const texture = new CanvasTexture(canvas);
+		const texture = new THREE.CanvasTexture(canvas);
 		texture.anisotropy = gl.capabilities.getMaxAnisotropy() || 1;
 		return texture;
 	});
@@ -160,7 +152,7 @@ export class AxisHead {
 	}
 }
 
-export interface NgtsGizmoViewportOptions extends Partial<NgtGroup> {
+export interface NgtsGizmoViewportOptions extends Partial<NgtThreeElements['ngt-group']> {
 	axisColors: [string, string, string];
 	axisScale?: [number, number, number];
 	labels: [string, string, string];
@@ -265,7 +257,7 @@ export class NgtsGizmoViewport {
 	protected readonly Math = Math;
 
 	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
-	parameters = omit(this.options, [
+	protected parameters = omit(this.options, [
 		'axisColors',
 		'axisScale',
 		'labels',