fix(core): change the way NgtSelect works

NgtSelect is now a directive to attach on `ngt-group` OR `ngt-mesh`. Attaching on `ngt-group` will
affect all `Mesh` children. Attaching on `ngt-mesh` will only affect itself.

Author: nartc

apps/kitchen-sink/src/app/postprocessing/outline/experience.ts

@@ -14,6 +14,8 @@ import { NgtsOrbitControls } from 'angular-three-soba/controls';
  *
  *    1b. We can wrap `<ng-container ngtSelection>` around the objects we want to select AS WELL AS the Outline effect.
  *
+ *    ngtSelect can be used on ngt-group or ngt-mesh. ngt-group will select all children, ngt-mesh will only select itself.
+ *
  * 2. Via selection input on NgtpOutline
  *    If we want to control the selection ourselves, we can pass in the selection input an Array of Object3D or ElementRef<Object3D>
  *      then we control this selection collection based on our own logic.
@@ -33,12 +35,20 @@ import { NgtsOrbitControls } from 'angular-three-soba/controls';
 		<ngt-point-light [position]="[0, -1, -1]" [decay]="0" color="green" />
 		<ngt-directional-light [position]="[0, 1, 1]" />
 
-		<ngt-select [enabled]="hovered()" (pointerenter)="hovered.set(true)" (pointerleave)="hovered.set(false)">
+		<ngt-group [ngtSelect]="hovered()" (pointerenter)="hovered.set(true)" (pointerleave)="hovered.set(false)">
 			<ngt-mesh>
 				<ngt-box-geometry />
 				<ngt-mesh-standard-material color="hotpink" />
 			</ngt-mesh>
-		</ngt-select>
+			<ngt-mesh [position]="[0.5, -0.25, 0.75]">
+				<ngt-sphere-geometry *args="[0.25]" />
+				<ngt-mesh-standard-material color="orange" />
+			</ngt-mesh>
+			<ngt-mesh [position]="[-0.5, -0.25, 0.75]">
+				<ngt-cone-geometry *args="[0.25, 0.5]" />
+				<ngt-mesh-standard-material color="yellow" />
+			</ngt-mesh>
+		</ngt-group>
 
 		<ngtp-effect-composer [options]="{ autoClear: false }">
 			<ngtp-outline [options]="{ edgeStrength: 100, pulseSpeed: 0 }" />

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

@@ -1,23 +1,16 @@
 import {
 	afterNextRender,
 	booleanAttribute,
-	ChangeDetectionStrategy,
-	Component,
-	CUSTOM_ELEMENTS_SCHEMA,
 	Directive,
 	ElementRef,
 	inject,
 	input,
 	signal,
 	untracked,
-	viewChild,
 } from '@angular/core';
 import { injectAutoEffect } from 'ngxtension/auto-effect';
-import { Group, Object3D } from 'three';
+import { Group, Mesh, Object3D } from 'three';
 import { getLocalState } from '../instance';
-import { extend } from '../renderer';
-import { NgtGroup } from '../three-types';
-import { NgtObjectEvents, NgtObjectEventsHostDirective } from '../utils/object-events';
 
 @Directive({ standalone: true, selector: '[ngtSelection]' })
 export class NgtSelection {
@@ -35,47 +28,38 @@ export class NgtSelection {
 	}
 }
 
-@Component({
-	selector: 'ngt-select',
-	standalone: true,
-	template: `
-		<ngt-group #group [parameters]="options()">
-			<ng-content />
-		</ngt-group>
-	`,
-	hostDirectives: [NgtObjectEventsHostDirective],
-	schemas: [CUSTOM_ELEMENTS_SCHEMA],
-	changeDetection: ChangeDetectionStrategy.OnPush,
-})
+@Directive({ standalone: true, selector: 'ngt-group[ngtSelect], ngt-mesh[ngtSelect]' })
 export class NgtSelect {
-	enabled = input(false, { transform: booleanAttribute });
-	options = input({} as Partial<NgtGroup>);
+	enabled = input(false, { transform: booleanAttribute, alias: 'ngtSelect' });
 
-	groupRef = viewChild.required<ElementRef<Group>>('group');
+	host = inject<ElementRef<Group | Mesh>>(ElementRef);
 
 	constructor() {
-		extend({ Group });
-
-		const objectEvents = inject(NgtObjectEvents, { host: true });
 		const selection = inject(NgtSelection);
 		const autoEffect = injectAutoEffect();
 
 		afterNextRender(() => {
-			objectEvents.ngtObjectEvents.set(this.groupRef());
-
 			autoEffect(
 				() => {
-					const group = this.groupRef().nativeElement;
-					const localState = getLocalState(group);
+					const host = this.host.nativeElement;
+					if (!host) return;
+
+					const localState = getLocalState(host);
 					if (!localState) return;
 
 					const enabled = this.enabled();
 					if (!enabled) return;
 
+					// ngt-mesh[ngtSelect]
+					if (host.type === 'Mesh') {
+						selection.select(host);
+						return () => selection.unselect(host);
+					}
+
 					const [collection] = [untracked(selection.collection), localState.objects()];
 					let changed = false;
 					const current: Object3D[] = [];
-					group.traverse((child) => {
+					host.traverse((child) => {
 						child.type === 'Mesh' && current.push(child);
 						if (collection.indexOf(child) === -1) changed = true;
 					});