fix(core): use effect directly for selection

Author: nartc

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

@@ -1,23 +1,18 @@
-import {
-	afterNextRender,
-	booleanAttribute,
-	Directive,
-	ElementRef,
-	inject,
-	input,
-	signal,
-	untracked,
-} from '@angular/core';
-import { injectAutoEffect } from 'ngxtension/auto-effect';
+import { booleanAttribute, Directive, effect, ElementRef, inject, input, signal, untracked } from '@angular/core';
 import { Group, Mesh, Object3D } from 'three';
 import { getLocalState } from '../instance';
 
 @Directive({ standalone: true, selector: '[ngtSelection]' })
 export class NgtSelection {
 	enabled = input(true, { alias: 'ngtSelection', transform: booleanAttribute });
+
 	private source = signal<Array<ElementRef<Object3D> | Object3D>>([]);
 	selected = this.source.asReadonly();
-	update = this.source.update.bind(this.source);
+
+	update(...args: Parameters<typeof this.source.update>) {
+		if (!this.enabled()) return;
+		this.source.update(...args);
+	}
 }
 
 @Directive({ standalone: true, selector: 'ngt-group[ngtSelect], ngt-mesh[ngtSelect]' })
@@ -27,43 +22,44 @@ export class NgtSelect {
 	constructor() {
 		const elementRef = inject<ElementRef<Group | Mesh>>(ElementRef);
 		const selection = inject(NgtSelection);
-		const autoEffect = injectAutoEffect();
 
-		afterNextRender(() => {
-			autoEffect(
-				() => {
-					const enabled = this.enabled();
-					if (!enabled) return;
+		effect(
+			(onCleanup) => {
+				const selectionEnabled = selection.enabled();
+				if (!selectionEnabled) return;
+
+				const enabled = this.enabled();
+				if (!enabled) return;
 
-					const host = elementRef.nativeElement;
-					if (!host) return;
+				const host = elementRef.nativeElement;
+				if (!host) return;
 
-					const localState = getLocalState(host);
-					if (!localState) return;
+				const localState = getLocalState(host);
+				if (!localState) return;
 
-					// ngt-mesh[ngtSelect]
-					if (host.type === 'Mesh') {
-						selection.update((prev) => [...prev, host]);
-						return () => selection.update((prev) => prev.filter((el) => el !== host));
-					}
+				// ngt-mesh[ngtSelect]
+				if (host.type === 'Mesh') {
+					selection.update((prev) => [...prev, host]);
+					onCleanup(() => selection.update((prev) => prev.filter((el) => el !== host)));
+					return;
+				}
 
-					const [collection] = [untracked(selection.selected), localState.objects()];
-					let changed = false;
-					const current: Object3D[] = [];
-					host.traverse((child) => {
-						child.type === 'Mesh' && current.push(child);
-						if (collection.indexOf(child) === -1) changed = true;
-					});
+				const [collection] = [untracked(selection.selected), localState.objects()];
+				let changed = false;
+				const current: Object3D[] = [];
+				host.traverse((child) => {
+					child.type === 'Mesh' && current.push(child);
+					if (collection.indexOf(child) === -1) changed = true;
+				});
 
-					if (!changed) return;
+				if (!changed) return;
 
-					selection.update((prev) => [...prev, ...current]);
-					return () => {
-						selection.update((prev) => prev.filter((el) => !current.includes(el as Object3D)));
-					};
-				},
-				{ allowSignalWrites: true },
-			);
-		});
+				selection.update((prev) => [...prev, ...current]);
+				onCleanup(() => {
+					selection.update((prev) => prev.filter((el) => !current.includes(el as Object3D)));
+				});
+			},
+			{ allowSignalWrites: true },
+		);
 	}
 }

libs/core/src/lib/instance.ts

@@ -51,6 +51,7 @@ export function prepare<TInstance extends object = NgtAnyRecord>(
 			add(object, type) {
 				const current = instance.__ngt__.instanceStore.snapshot[type];
 				const foundIndex = current.indexOf((node: NgtInstanceNode) => object === node);
+
 				if (foundIndex > -1) {
 					current.splice(foundIndex, 1, object);
 					instance.__ngt__.instanceStore.update({ [type]: current });