fix(reconciler): fix stale closure on event callbacks

Author: simonedevit

packages/library/src/components/hosts/GuiHost.ts

@@ -5,19 +5,21 @@ import { TransformKeysMap } from '@constants';
 import ObjectUtils from '@utils/ObjectUtils';
 import guiConstructors from '../../_generated/babylon.gui.constructors';
 import type { Vector2WithInfo, GUI3DManager, Control, Container, Button3D, Grid } from '@babylonjs/gui';
-import type { Observable } from '@babylonjs/core';
+import type { Observable, EventState } from '@babylonjs/core';
 
 // required for git hook (otherwise it can't resolve the augmented JSXElements)
 import '../../index';
 import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh.js';
 
-function handleEvents(props: GuiHostProps, element: any) {
+type AugmentedGuiElement = BabylonEntity<Control & GuiTriggerable> & {
+    _triggerCallbacks: Partial<Record<keyof typeof GuiTriggers, Parameters<Observable<Vector2WithInfo>['add']>[0]>>;
+};
+
+function handleEvents(element: AugmentedGuiElement) {
     Object.entries(GuiTriggers).forEach(([_key, observableName]) => {
-        const key = _key as keyof GuiTriggerable;
-        //TODO: handle addOnce
-        const handlerFn = props[key] as Parameters<Observable<Vector2WithInfo>['add']>[0];
-        if (handlerFn) {
-            element[observableName].add(handlerFn);
+        const key = _key as keyof typeof GuiTriggers;
+        if (element._triggerCallbacks[key]) {
+            (element as any)[observableName].add((evt: Vector2WithInfo, eventState: EventState) => element._triggerCallbacks[key]?.(evt, eventState));
         }
     });
 }
@@ -29,7 +31,7 @@ export type Params = {
 
 type GuiComponent = Pick<Container, 'addControl' | 'removeControl'> & GuiTriggerable;
 
-const excludedProps = ['children', 'onCreate', 'cloneFrom', 'propertiesFrom', 'kind', 'createFullscreenUI', 'createForMesh', 'ref', ...Object.keys(GuiTriggers)];
+const excludedProps = ['children', 'onCreate', 'cloneFrom', 'propertiesFrom', 'kind', 'createFullscreenUI', 'createForMesh', 'ref'];
 
 export class GuiHost {
     static createInstance(type: string, Class: any, props: GuiHostProps, rootContainer: RootContainer, cloneFn?: Function, params?: Params) {
@@ -86,12 +88,21 @@ export class GuiHost {
         // execute custom code as soon the object is created
         props.onCreate?.(element);
 
-        handleEvents(props, element);
+        element._triggerCallbacks = Object.keys(GuiTriggers).reduce(
+            (acc, trigger) => {
+                const key = trigger as keyof typeof GuiTriggers;
+                if (element[key]) acc[key] = element[key];
+                return acc;
+            },
+            {} as Partial<Record<keyof typeof GuiTriggers, Parameters<Observable<Vector2WithInfo>['add']>[0]>>,
+        );
+
+        handleEvents(element);
 
         element.handlers = {
             addChild: GuiHost.addChild,
             removeChild: GuiHost.removeChild,
-            // add here your custom handlers
+            commitUpdate: GuiHost.commitUpdate,
         };
 
         return element;
@@ -106,7 +117,7 @@ export class GuiHost {
         } else {
             // @ts-expect-error - type is not a part of Grid
             if (parentInstance.type === 'row' || parentInstance.type === 'column') {
-                (parentInstance as Grid).addControl?.(child, 0, 0);
+                (parentInstance as unknown as Grid).addControl?.(child, 0, 0);
             } else {
                 // ensure that addControl function exists (parentInstance could be transformNode)
                 parentInstance.addControl?.(child);
@@ -124,5 +135,12 @@ export class GuiHost {
         return {};
     }
 
-    static commitUpdate(instance: BabylonEntity<Control>, updatePayload: UpdatePayload): void {}
+    static commitUpdate(instance: AugmentedGuiElement, updatePayload: UpdatePayload): void {
+        Object.keys(GuiTriggers).forEach(trigger => {
+            const key = trigger as keyof typeof GuiTriggers;
+            if (key in updatePayload) {
+                instance._triggerCallbacks[key] = updatePayload[key] as Parameters<Observable<Vector2WithInfo>['add']>[0];
+            }
+        });
+    }
 }

packages/library/src/components/hosts/MeshHost.ts

@@ -3,25 +3,27 @@ import { Host } from './Host';
 import type { ActionEvent, Mesh, Scene, HighlightLayer } from '@babylonjs/core';
 import { ActionManager } from '@babylonjs/core/Actions/actionManager.js';
 import { ExecuteCodeAction } from '@babylonjs/core/Actions/directActions.js';
-import { type Triggerable, MeshTriggers, type MeshProps, type CoreHostProps } from '@props';
+import { MeshTriggers, type MeshProps, type CoreHostProps } from '@props';
 import { isInstanceOf } from '@dvmstudios/reactylon-common';
 
-function handleEvents(props: CoreHostProps<MeshProps>, scene: Scene) {
-    const isAtLeastOneTrigger = Object.keys(MeshTriggers).some(trigger => props[trigger as keyof Triggerable]);
+type AugmentedMesh = BabylonEntity<MeshProps & Mesh> & {
+    _triggerCallbacks: Partial<Record<keyof typeof MeshTriggers, (evt: ActionEvent) => void>>;
+};
+
+function handleEvents(scene: Scene, instance: AugmentedMesh) {
+    const isAtLeastOneTrigger = Object.keys(MeshTriggers).some(trigger => instance._triggerCallbacks[trigger as keyof typeof MeshTriggers]);
     if (isAtLeastOneTrigger) {
         const actionManager = new ActionManager(scene);
         Object.entries(MeshTriggers).forEach(([_key, name]) => {
-            const key = _key as keyof Triggerable;
-            const handlerFn = props[key] as (evt: ActionEvent) => void;
-            if (handlerFn) {
-                const { intersectionMeshId } = props;
+            const key = _key as keyof typeof MeshTriggers;
+            if (instance._triggerCallbacks[key]) {
                 actionManager.registerAction(
                     new ExecuteCodeAction(
                         {
                             trigger: name,
-                            parameter: intersectionMeshId ? scene.getMeshById(intersectionMeshId) : undefined,
+                            parameter: instance.intersectionMeshId ? scene.getMeshById(instance.intersectionMeshId) : undefined,
                         },
-                        handlerFn,
+                        evt => instance._triggerCallbacks[key]?.(evt),
                     ),
                 );
             }
@@ -31,8 +33,6 @@ function handleEvents(props: CoreHostProps<MeshProps>, scene: Scene) {
     return null;
 }
 
-type AugmentedMesh = BabylonEntity<MeshProps & Mesh>;
-
 export class MeshHost {
     static createInstance(type: string, Class: any, props: CoreHostProps<MeshProps>, rootContainer: RootContainer) {
         let cloneFn = undefined;
@@ -58,12 +58,21 @@ export class MeshHost {
             const original = scene.getMeshById(instanceFrom) as Mesh;
             original.physicsBody?.clone(element);
         }
-        element.actionManager = handleEvents(props, scene);
+
+        element._triggerCallbacks = Object.keys(MeshTriggers).reduce(
+            (acc, trigger) => {
+                const key = trigger as keyof typeof MeshTriggers;
+                if (element[key]) acc[key] = element[key];
+                return acc;
+            },
+            {} as Partial<Record<keyof typeof MeshTriggers, (evt: ActionEvent) => void>>,
+        );
+
+        element.actionManager = handleEvents(scene, element);
         element.handlers = {
             addChild: MeshHost.addChild,
             commitUpdate: MeshHost.commitUpdate,
             removeChild: MeshHost.removeChild,
-            // add here your custom handlers for meshes
         };
         return element;
     }
@@ -86,6 +95,22 @@ export class MeshHost {
     }
 
     static commitUpdate(instance: AugmentedMesh, updatePayload: UpdatePayload): void {
+        // update trigger callbacks
+        Object.keys(MeshTriggers).forEach(trigger => {
+            const key = trigger as keyof typeof MeshTriggers;
+            if (key in updatePayload) {
+                instance._triggerCallbacks[key] = updatePayload[key] as (evt: ActionEvent) => void;
+            }
+        });
+
+        const structuralChange = updatePayload.intersectionMeshId !== instance.intersectionMeshId;
+        if (structuralChange) {
+            instance.intersectionMeshId = updatePayload.intersectionMeshId as string;
+            instance.actionManager?.dispose();
+            instance.actionManager = handleEvents(instance.getScene(), instance);
+        }
+
+        // highlight layer
         const parent = instance.highlightLayerParent as BabylonEntity<HighlightLayer>;
         if (parent && isInstanceOf(parent, 'HighlightLayer')) {
             const highlightLayer = updatePayload.highlightLayer as MeshProps['highlightLayer'];