fix(core): ensure three native events (w/ EventDispatcher) work properly

Author: nartc

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

@@ -32,15 +32,15 @@ export class NgtSelect {
 		afterNextRender(() => {
 			autoEffect(
 				() => {
+					const enabled = this.enabled();
+					if (!enabled) return;
+
 					const host = elementRef.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.update((prev) => [...prev, host]);

libs/core/src/lib/renderer/constants.ts

@@ -20,3 +20,5 @@ export const SPECIAL_EVENTS = {
 	UPDATED: 'updated',
 	ATTACHED: 'attached',
 } as const;
+
+export const THREE_NATIVE_EVENTS = ['added', 'removed', 'childadded', 'childremoved', 'disposed'];

libs/core/src/lib/renderer/utils.ts

@@ -1,10 +1,11 @@
 import { untracked } from '@angular/core';
+import { EventDispatcher, Object3D } from 'three';
 import { removeInteractivity } from '../events';
 import { getLocalState, invalidateInstance } from '../instance';
 import { NgtInstanceNode } from '../types';
 import { attach, detach } from '../utils/attach';
 import { is } from '../utils/is';
-import { SPECIAL_EVENTS } from './constants';
+import { SPECIAL_EVENTS, THREE_NATIVE_EVENTS } from './constants';
 
 // @internal
 export const enum NgtRendererClassId {
@@ -211,6 +212,20 @@ export function processThreeEvent(
 		};
 	}
 
+	if (THREE_NATIVE_EVENTS.includes(eventName) && instance instanceof EventDispatcher) {
+		// NOTE: rename to dispose because that's the event type, not disposed.
+		if (eventName === 'disposed') {
+			eventName = 'dispose';
+		}
+
+		if ((instance as Object3D).parent && (eventName === 'added' || eventName === 'removed')) {
+			callback({ type: eventName, target: instance });
+		}
+
+		instance.addEventListener(eventName, callback);
+		return () => instance.removeEventListener(eventName, callback);
+	}
+
 	if (!lS.handlers) lS.handlers = {};
 
 	// try to get the previous handler. compound might have one, the THREE object might also have one with the same name

libs/core/src/lib/three-types.ts

@@ -169,10 +169,18 @@ export type NgtVector4 = NgtVectorLike<Vector4>;
 export type NgtLayers = Layers | Parameters<Layers['set']>[0];
 export type NgtQuaternion = Quaternion | Parameters<Quaternion['set']>;
 
+export type ThreeDisposeEvent = { type: 'dispose'; target: NgtInstanceNode };
+export type ThreeAddedEvent = { type: 'added'; target: NgtInstanceNode };
+export type ThreeRemovedEvent = { type: 'removed'; target: NgtInstanceNode };
+export type ThreeChildAddedEvent = { type: 'childadded'; target: NgtInstanceNode; child: NgtInstanceNode };
+export type ThreeChildRemovedEvent = { type: 'childremoved'; target: NgtInstanceNode; child: NgtInstanceNode };
+
 export interface NgtNodeEventMap<TOriginal> {
 	attached: NgtAfterAttach<NgtInstanceNode, TOriginal>;
 	updated: TOriginal;
 	beforeRender: NgtBeforeRenderEvent<TOriginal>;
+	// NOTE: this is named "disposed" to differentiate it from [dispose] property.
+	disposed: ThreeDisposeEvent;
 }
 
 export type NgtNodeElement<TOriginal, TConstructor> = {
@@ -194,6 +202,11 @@ export type NgtNode<TOriginal, TConstructor, TNoEvent = NoEvent<TOriginal>> = Ex
 
 export type NgtObject3DEventsMap = {
 	[TEvent in keyof NgtEventHandlers]-?: Parameters<NonNullable<NgtEventHandlers[TEvent]>>[0];
+} & {
+	added: ThreeAddedEvent;
+	removed: ThreeRemovedEvent;
+	childadded: ThreeChildAddedEvent;
+	childremoved: ThreeChildRemovedEvent;
 };
 
 export type NgtAllObject3DEventsMap = NgtObject3DEventsMap & NgtNodeEventMap<NgtInstanceNode>;
@@ -853,5 +866,5 @@ export interface ThreeElements {
 
 declare global {
 	interface HTMLElementTagNameMap extends ThreeElements {}
-	interface HTMLElementEventMap extends NgtNodeEventMap<NgtInstanceNode> {}
+	interface HTMLElementEventMap extends NgtAllObject3DEventsMap {}
 }