fix(reconciler,components): do not set highlight layer as a mesh parent

Setting the highlight layer as a mesh parent breaks the Babylon.js ActionManager lifecycle on the mesh. Use a custom property instead.

Author: simonedevit

package-lock.json

@@ -72,6 +72,7 @@ export class MeshHost {
         if (isInstanceOf(parentInstance, 'HighlightLayer')) {
             const { highlightLayer } = child;
             if (highlightLayer) {
+                child.highlightLayerParent = parentInstance as BabylonEntity<HighlightLayer>;
                 const { color, glowEmissiveOnly } = highlightLayer;
                 (parentInstance as HighlightLayer).addMesh(child, color, glowEmissiveOnly);
             }
@@ -85,14 +86,14 @@ export class MeshHost {
     }
 
     static commitUpdate(instance: AugmentedMesh, updatePayload: UpdatePayload): void {
-        const parent = instance.parent;
+        const parent = instance.highlightLayerParent as BabylonEntity<HighlightLayer>;
         if (parent && isInstanceOf(parent, 'HighlightLayer')) {
             const highlightLayer = updatePayload.highlightLayer as MeshProps['highlightLayer'];
             if (highlightLayer) {
                 const { color, glowEmissiveOnly } = highlightLayer;
-                (parent as unknown as HighlightLayer).addMesh(instance, color, glowEmissiveOnly);
+                parent.addMesh(instance, color, glowEmissiveOnly);
             } else {
-                (parent as unknown as HighlightLayer).removeMesh(instance);
+                parent.removeMesh(instance);
             }
         }
     }

packages/library/src/_generated/babylon.core.constructors.ts

@@ -25,6 +25,9 @@ function isParentNeeded(child: BabylonEntity) {
     if (isInstanceOf(child, 'BaseTexture')) {
         return false;
     }
+    if (isInstanceOf(child, 'HighlightLayer')) {
+        return false;
+    }
     return true;
 }
 

packages/library/src/_generated/babylon.core.declarations.ts

@@ -1,5 +1,5 @@
 import type { ActionEvent, HighlightLayer, Node, Observable, Scene, StandardMaterial } from '@babylonjs/core';
-import type { Either } from './types';
+import type { Either, BabylonEntity } from './types';
 import type { AdvancedDynamicTexture, Grid, Vector2WithInfo } from '@babylonjs/gui';
 import { ActionManager } from '@babylonjs/core/Actions/actionManager.js';
 
@@ -149,6 +149,7 @@ export type MeshProps = Either<Clonable, Instanceable> &
             color: Parameters<HighlightLayer['addMesh']>[1];
             glowEmissiveOnly?: Parameters<HighlightLayer['addMesh']>[2];
         };
+        highlightLayerParent?: BabylonEntity<HighlightLayer>;
         // add here other mesh props (e.g. "onDrag")
     };