fix(core): simplify NgtSelection API with exposing single method update

Author: nartc

libs/core/src/lib/directives/selection.ts

@@ -15,33 +15,24 @@ import { getLocalState } from '../instance';
 @Directive({ standalone: true, selector: '[ngtSelection]' })
 export class NgtSelection {
 	enabled = input(true, { alias: 'ngtSelection', transform: booleanAttribute });
-
-	private selection = signal<Array<ElementRef<Object3D> | Object3D>>([]);
-	collection = this.selection.asReadonly();
-
-	select(...objects: Array<ElementRef<Object3D> | Object3D>) {
-		this.selection.update((prev) => [...prev, ...objects]);
-	}
-
-	unselect(...objects: Array<ElementRef<Object3D> | Object3D>) {
-		this.selection.update((prev) => prev.filter((selected) => !objects.includes(selected)));
-	}
+	private source = signal<Array<ElementRef<Object3D> | Object3D>>([]);
+	selected = this.source.asReadonly();
+	update = this.source.update.bind(this.source);
 }
 
 @Directive({ standalone: true, selector: 'ngt-group[ngtSelect], ngt-mesh[ngtSelect]' })
 export class NgtSelect {
 	enabled = input(false, { transform: booleanAttribute, alias: 'ngtSelect' });
 
-	host = inject<ElementRef<Group | Mesh>>(ElementRef);
-
 	constructor() {
+		const elementRef = inject<ElementRef<Group | Mesh>>(ElementRef);
 		const selection = inject(NgtSelection);
 		const autoEffect = injectAutoEffect();
 
 		afterNextRender(() => {
 			autoEffect(
 				() => {
-					const host = this.host.nativeElement;
+					const host = elementRef.nativeElement;
 					if (!host) return;
 
 					const localState = getLocalState(host);
@@ -52,11 +43,11 @@ export class NgtSelect {
 
 					// ngt-mesh[ngtSelect]
 					if (host.type === 'Mesh') {
-						selection.select(host);
-						return () => selection.unselect(host);
+						selection.update((prev) => [...prev, host]);
+						return () => selection.update((prev) => prev.filter((el) => el !== host));
 					}
 
-					const [collection] = [untracked(selection.collection), localState.objects()];
+					const [collection] = [untracked(selection.selected), localState.objects()];
 					let changed = false;
 					const current: Object3D[] = [];
 					host.traverse((child) => {
@@ -66,9 +57,9 @@ export class NgtSelect {
 
 					if (!changed) return;
 
-					selection.select(...current);
+					selection.update((prev) => [...prev, ...current]);
 					return () => {
-						selection.unselect(...current);
+						selection.update((prev) => prev.filter((el) => !current.includes(el as Object3D)));
 					};
 				},
 				{ allowSignalWrites: true },

libs/postprocessing/src/lib/effects/outline.ts

@@ -149,17 +149,17 @@ export class NgtpOutline {
 				// NOTE: we run this effect if declarative NgtSelection is enabled
 				const selectionEnabled = this.ngtSelection.enabled();
 				if (!selectionEnabled) return;
-				return this.handleSelectionChangeEffect(this.ngtSelection.collection, this.effect, this.invalidate);
+				return this.handleSelectionChangeEffect(this.ngtSelection.selected, this.effect, this.invalidate);
 			});
 		});
 	}
 
 	private handleSelectionChangeEffect(
-		collection: () => Array<Object3D | ElementRef<Object3D>> | undefined,
+		selected: () => Array<Object3D | ElementRef<Object3D>> | undefined,
 		_effect: () => OutlineEffect,
 		_invalidate: () => () => void,
 	) {
-		const selection = collection();
+		const selection = selected();
 		if (!selection || selection.length === 0) return;
 
 		const [effect, invalidate] = [_effect(), _invalidate()];