refactor(soba): clean up abstractions

Author: nartc

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

@@ -6,11 +6,11 @@ import {
 	input,
 	viewChild,
 } from '@angular/core';
-import { extend, injectBeforeRender, NgtGroup, omit } from 'angular-three';
+import { extend, injectBeforeRender, NgtThreeElements, omit } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import { Group, Quaternion } from 'three';
 
-export interface NgtsBillboardOptions extends Partial<NgtGroup> {
+export interface NgtsBillboardOptions extends Partial<NgtThreeElements['ngt-group']> {
 	follow?: boolean;
 	lockX?: boolean;
 	lockY?: boolean;

libs/soba/abstractions/src/lib/catmull-rom-line.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, input, untracked, viewChild } from '@angular/core';
 import { omit, pick } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { CatmullRomCurve3, Color, Vector3 } from 'three';
+import * as THREE from 'three';
 import { NgtsLine, NgtsLineOptions } from './line';
 
 export interface NgtsCatmullRomLineOptions extends Omit<NgtsLineOptions, 'segments'> {
@@ -30,7 +30,7 @@ const defaultOptions: NgtsCatmullRomLineOptions = {
 	imports: [NgtsLine],
 })
 export class NgtsCatmullRomLine {
-	points = input.required<Array<Vector3 | [number, number, number]>>();
+	points = input.required<Array<THREE.Vector3 | [number, number, number]>>();
 	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
 	parameters = omit(this.options, ['curveType', 'tension', 'segments', 'closed', 'vertexColors']);
 
@@ -46,10 +46,10 @@ export class NgtsCatmullRomLine {
 		const [points, closed, curveType, tension] = [this.points(), this.closed(), this.curveType(), this.tension()];
 
 		const mappedPoints = points.map((pt) =>
-			pt instanceof Vector3 ? pt : new Vector3(...(pt as [number, number, number])),
+			(pt as THREE.Vector3).isVector3 ? (pt as THREE.Vector3) : new THREE.Vector3(...(pt as [number, number, number])),
 		);
 
-		return new CatmullRomCurve3(mappedPoints, closed, curveType, tension);
+		return new THREE.CatmullRomCurve3(mappedPoints, closed, curveType, tension);
 	});
 
 	segmentedPoints = computed(() => {
@@ -64,11 +64,11 @@ export class NgtsCatmullRomLine {
 		if (vertexColors.length === segments + 1) return vertexColors;
 
 		const mappedColors = vertexColors.map((color) =>
-			color instanceof Color ? color : new Color(...(color as [number, number, number])),
+			(color as THREE.Color).isColor ? (color as THREE.Color) : new THREE.Color(...(color as [number, number, number])),
 		);
 		if (untracked(this.closed)) mappedColors.push(mappedColors[0].clone());
 
-		const iColors: Color[] = [mappedColors[0]];
+		const iColors: THREE.Color[] = [mappedColors[0]];
 		const divisions = segments / (mappedColors.length - 1);
 		for (let i = 1; i < segments; i++) {
 			const alpha = (i % divisions) / divisions;

libs/soba/abstractions/src/lib/cubic-bezier-line.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, input, viewChild } from '@angular/core';
-import { omit, pick } from 'angular-three';
+import { is, omit, pick } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { CubicBezierCurve3, Vector3 } from 'three';
+import * as THREE from 'three';
 import { NgtsLine, NgtsLineOptions } from './line';
 
 export interface NgtsCubicBezierLineOptions extends Omit<NgtsLineOptions, 'segments'> {
@@ -24,10 +24,10 @@ const defaultOptions: NgtsCubicBezierLineOptions = {
 	imports: [NgtsLine],
 })
 export class NgtsCubicBezierLine {
-	start = input.required<Vector3 | [number, number, number]>();
-	end = input.required<Vector3 | [number, number, number]>();
-	midA = input.required<Vector3 | [number, number, number]>();
-	midB = input.required<Vector3 | [number, number, number]>();
+	start = input.required<THREE.Vector3 | [number, number, number]>();
+	end = input.required<THREE.Vector3 | [number, number, number]>();
+	midA = input.required<THREE.Vector3 | [number, number, number]>();
+	midB = input.required<THREE.Vector3 | [number, number, number]>();
 	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
 	parameters = omit(this.options, ['segments']);
 
@@ -37,10 +37,10 @@ export class NgtsCubicBezierLine {
 
 	points = computed(() => {
 		const [start, end, midA, midB, segments] = [this.start(), this.end(), this.midA(), this.midB(), this.segments()];
-		const startV = start instanceof Vector3 ? start : new Vector3(...start);
-		const endV = end instanceof Vector3 ? end : new Vector3(...end);
-		const midAV = midA instanceof Vector3 ? midA : new Vector3(...midA);
-		const midBV = midB instanceof Vector3 ? midB : new Vector3(...midB);
-		return new CubicBezierCurve3(startV, midAV, midBV, endV).getPoints(segments);
+		const startV = is.three<THREE.Vector3>(start, 'isVector3') ? start : new THREE.Vector3(...start);
+		const endV = is.three<THREE.Vector3>(end, 'isVector3') ? end : new THREE.Vector3(...end);
+		const midAV = is.three<THREE.Vector3>(midA, 'isVector3') ? midA : new THREE.Vector3(...midA);
+		const midBV = is.three<THREE.Vector3>(midB, 'isVector3') ? midB : new THREE.Vector3(...midB);
+		return new THREE.CubicBezierCurve3(startV, midAV, midBV, endV).getPoints(segments);
 	});
 }

libs/soba/abstractions/src/lib/edges.ts

@@ -1,18 +1,18 @@
 import { ChangeDetectionStrategy, Component, computed, effect, input, viewChild } from '@angular/core';
-import { checkNeedsUpdate, getLocalState, NgtMesh, omit } from 'angular-three';
+import { checkNeedsUpdate, getInstanceState, NgtThreeElements, omit } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { BufferAttribute, BufferGeometry, ColorRepresentation, EdgesGeometry, Mesh } from 'three';
+import * as THREE from 'three';
 import { LineMaterialParameters } from 'three-stdlib';
 import { NgtLine2, NgtLineMaterial, NgtsLine } from './line';
 
-export type NgtsEdgesOptions = Partial<NgtMesh> & {
+export type NgtsEdgesOptions = Partial<NgtThreeElements['ngt-mesh']> & {
 	threshold?: number;
 	lineWidth?: number;
 } & Omit<LineMaterialParameters, 'vertexColors' | 'color'> &
 	Omit<Partial<NgtLine2>, 'geometry'> &
 	Omit<Partial<NgtLineMaterial>, 'color' | 'vertexColors'> & {
-		geometry?: BufferGeometry;
-		color?: ColorRepresentation;
+		geometry?: THREE.BufferGeometry;
+		color?: THREE.ColorRepresentation;
 	};
 
 const defaultOptions: NgtsEdgesOptions = {
@@ -39,18 +39,18 @@ export class NgtsEdges {
 
 	line = viewChild.required(NgtsLine);
 
-	private memoizedGeometry?: BufferGeometry;
+	private memoizedGeometry?: THREE.BufferGeometry;
 	private memoizedThreshold?: number;
 
 	constructor() {
 		effect(() => {
 			const line = this.line().lineRef()?.nativeElement;
 			if (!line) return;
 
-			const lS = getLocalState(line);
+			const lS = getInstanceState(line);
 			if (!lS) return;
 
-			const parent = lS.parent() as Mesh;
+			const parent = lS.parent() as unknown as THREE.Mesh;
 			if (!parent) return;
 
 			const { geometry: explicitGeometry, threshold } = this.options();
@@ -63,7 +63,7 @@ export class NgtsEdges {
 			this.memoizedGeometry = geometry;
 			this.memoizedThreshold = threshold;
 
-			const points = (new EdgesGeometry(geometry, threshold).attributes['position'] as BufferAttribute)
+			const points = (new THREE.EdgesGeometry(geometry, threshold).attributes['position'] as THREE.BufferAttribute)
 				.array as Float32Array;
 			line.geometry.setPositions(points);
 			checkNeedsUpdate(line.geometry.attributes['instanceStart']);

libs/soba/abstractions/src/lib/gradient-texture.ts

@@ -8,11 +8,12 @@ import {
 	input,
 	untracked,
 } from '@angular/core';
-import { extend, injectStore, NgtArgs, NgtAttachable, NgtTexture, omit } from 'angular-three';
+import { extend, injectStore, NgtArgs, NgtAttachable, NgtThreeElements, omit } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { CanvasTexture, Color, ColorRepresentation } from 'three';
+import * as THREE from 'three';
+import { CanvasTexture } from 'three';
 
-export interface NgtsGradientTextureOptions extends Partial<Omit<NgtTexture, 'type'>> {
+export interface NgtsGradientTextureOptions extends Partial<Omit<NgtThreeElements['ngt-texture'], 'type'>> {
 	size: number;
 	width: number;
 	type: 'linear' | 'radial';
@@ -47,12 +48,12 @@ const defaultOptions: NgtsGradientTextureOptions = {
 export class NgtsGradientTexture {
 	attach = input<NgtAttachable>('map');
 	stops = input.required<Array<number>>();
-	colors = input.required<Array<ColorRepresentation>>();
+	colors = input.required<Array<THREE.ColorRepresentation>>();
 	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
 	parameters = omit(this.options, ['size', 'width', 'type', 'innerCircleRadius', 'outerCircleRadius']);
 
 	private store = injectStore();
-	outputColorSpace = this.store.select('gl', 'outputColorSpace');
+	outputColorSpace = this.store.gl.outputColorSpace;
 	private document = inject(DOCUMENT);
 
 	canvas = computed(() => {
@@ -87,7 +88,7 @@ export class NgtsGradientTexture {
 			);
 		}
 
-		const tempColor = new Color(); // reuse instance for performance
+		const tempColor = new THREE.Color(); // reuse instance for performance
 
 		let i = stops.length;
 		while (i--) {

libs/soba/abstractions/src/lib/grid.ts

@@ -7,13 +7,14 @@ import {
 	input,
 	viewChild,
 } from '@angular/core';
-import { extend, injectBeforeRender, NgtArgs, NgtMesh, omit, pick } from 'angular-three';
+import { extend, injectBeforeRender, NgtArgs, NgtThreeElements, omit, pick } from 'angular-three';
 import { GridMaterial, GridMaterialOptions } from 'angular-three-soba/shaders';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { BackSide, Mesh, Plane, PlaneGeometry, ShaderMaterial, Uniform, Vector3 } from 'three';
+import * as THREE from 'three';
+import { Mesh, PlaneGeometry } from 'three';
 
-const defaultOptions: Partial<NgtMesh> &
-	GridMaterialOptions & { planeArgs: ConstructorParameters<typeof PlaneGeometry> } = {
+const defaultOptions: Partial<NgtThreeElements['ngt-mesh']> &
+	GridMaterialOptions & { planeArgs: ConstructorParameters<typeof THREE.PlaneGeometry> } = {
 	planeArgs: [],
 	cellSize: 0.5,
 	cellThickness: 0.5,
@@ -26,7 +27,7 @@ const defaultOptions: Partial<NgtMesh> &
 	fadeDistance: 100,
 	fadeStrength: 1,
 	fadeFrom: 1,
-	side: BackSide,
+	side: THREE.BackSide,
 };
 
 @Component({
@@ -62,11 +63,11 @@ export class NgtsGrid {
 		'side',
 	]);
 
-	meshRef = viewChild.required<ElementRef<Mesh>>('mesh');
+	meshRef = viewChild.required<ElementRef<THREE.Mesh>>('mesh');
 
-	private plane = new Plane();
-	private upVector = new Vector3(0, 1, 0);
-	private zeroVector = new Vector3(0, 0, 0);
+	private plane = new THREE.Plane();
+	private upVector = new THREE.Vector3(0, 1, 0);
+	private zeroVector = new THREE.Vector3(0, 0, 0);
 
 	planeArgs = pick(this.options, 'planeArgs');
 	side = pick(this.options, 'side');
@@ -107,9 +108,9 @@ export class NgtsGrid {
 
 			this.plane.setFromNormalAndCoplanarPoint(this.upVector, this.zeroVector).applyMatrix4(mesh.matrixWorld);
 
-			const gridMaterial = mesh.material as ShaderMaterial;
-			const worldCamProjPosition = gridMaterial.uniforms['worldCamProjPosition'] as Uniform<Vector3>;
-			const worldPlanePosition = gridMaterial.uniforms['worldPlanePosition'] as Uniform<Vector3>;
+			const gridMaterial = mesh.material as THREE.ShaderMaterial;
+			const worldCamProjPosition = gridMaterial.uniforms['worldCamProjPosition'] as THREE.Uniform<THREE.Vector3>;
+			const worldPlanePosition = gridMaterial.uniforms['worldPlanePosition'] as THREE.Uniform<THREE.Vector3>;
 
 			this.plane.projectPoint(camera.position, worldCamProjPosition.value);
 			worldPlanePosition.value.set(0, 0, 0).applyMatrix4(mesh.matrixWorld);

libs/soba/abstractions/src/lib/helper.ts

@@ -9,17 +9,18 @@ import {
 	input,
 	viewChild,
 } from '@angular/core';
-import { extend, getLocalState, injectBeforeRender, injectStore, resolveRef } from 'angular-three';
+import { extend, getInstanceState, injectBeforeRender, injectStore, resolveRef } from 'angular-three';
 import { assertInjector } from 'ngxtension/assert-injector';
+import * as THREE from 'three';
 import { Object3D } from 'three';
 
 type HelperArgs<T> = T extends [infer _, ...infer R] ? R : never;
 
 export function injectHelper<
-	TConstructor extends new (...args: any[]) => Object3D,
+	TConstructor extends new (...args: any[]) => THREE.Object3D,
 	THelperInstance extends InstanceType<TConstructor> & { update: () => void; dispose: () => void },
 >(
-	object: () => ElementRef<Object3D> | Object3D | undefined | null,
+	object: () => ElementRef<THREE.Object3D> | THREE.Object3D | undefined | null,
 	helperConstructor: () => TConstructor,
 	{
 		injector,
@@ -28,7 +29,6 @@ export function injectHelper<
 ) {
 	return assertInjector(injectHelper, injector, () => {
 		const store = injectStore();
-		const scene = store.select('scene');
 
 		const helper = computed(() => {
 			const maybeObject3D = object();
@@ -46,12 +46,12 @@ export function injectHelper<
 			const currentHelper = helper();
 			if (!currentHelper) return;
 
-			const _scene = scene();
+			const scene = store.scene();
 
-			_scene.add(currentHelper);
+			scene.add(currentHelper);
 
 			onCleanup(() => {
-				_scene.remove(currentHelper);
+				scene.remove(currentHelper);
 				currentHelper.dispose?.();
 			});
 		});
@@ -73,20 +73,20 @@ export function injectHelper<
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NgtsHelper<TConstructor extends new (...args: any[]) => Object3D> {
+export class NgtsHelper<TConstructor extends new (...args: any[]) => THREE.Object3D> {
 	type = input.required<TConstructor>();
 	options = input<HelperArgs<ConstructorParameters<TConstructor>>>(
 		[] as unknown as HelperArgs<ConstructorParameters<TConstructor>>,
 	);
 
-	helperRef = viewChild.required<ElementRef<Object3D>>('helper');
+	helperRef = viewChild.required<ElementRef<THREE.Object3D>>('helper');
 
 	private parent = computed(() => {
 		const helper = this.helperRef().nativeElement;
 		if (!helper) return;
-		const localState = getLocalState(helper);
+		const localState = getInstanceState(helper);
 		if (!localState) return;
-		return localState.parent();
+		return localState.parent() as unknown as THREE.Object3D;
 	});
 
 	helper = injectHelper(this.parent, this.type, { args: this.options });