fix(reconciler): manage specular adding/removing

Author: simonedevit

packages/library/src/components/hosts/GridHost.tsx

@@ -6,16 +6,8 @@ import { inventory } from '../../core/inventory';
 import type { Vector2WithInfo } from '@babylonjs/gui';
 import type { Observable } from '@babylonjs/core';
 
-type GridElement = {
-    type: 'row' | 'column';
-    index: number;
-    props: React.PropsWithChildren<RowProps | ColumnProps>;
-    linkedGrid: GridType;
-    parent: BabylonEntity<GridType> | GridElement;
-};
-
 type GridConstructor = {
-    new (...args: any[]): GridType;
+    new (...args: any[]): any;
 };
 
 function handleEvents(props: RowProps | ColumnProps, element: any) {
@@ -29,86 +21,94 @@ function handleEvents(props: RowProps | ColumnProps, element: any) {
     });
 }
 
+type AugmentedGrid = BabylonEntity<
+    GridType & {
+        type: 'row' | 'column';
+        props: RowProps | ColumnProps;
+        siblingIndex: number;
+    }
+>;
+
 export class GridHost {
-    static createInstance(type: string, Class: any, props: RowProps | ColumnProps, rootContainer: RootContainer) {
+    static createInstance(type: 'row' | 'column', Class: any, props: RowProps | ColumnProps, rootContainer: RootContainer) {
+        const scene = rootContainer.scene;
+
         const Grid = inventory.get('grid')?.[0] as GridConstructor;
-        const nestedGrid: GridType = new Grid();
-
-        const element = {
-            linkedGrid: nestedGrid,
-            type,
-            index: -1,
-            props,
-            handlers: {
-                addChild: GridHost.addChild,
-                removeChild: GridHost.removeChild,
-                commitUpdate: GridHost.commitUpdate,
-            },
-            parent: null,
+        const nestedGrid = new Grid();
+        nestedGrid.uniqueId = scene.getUniqueId();
+
+        nestedGrid.type = type;
+        nestedGrid.props = props;
+        nestedGrid.handlers = {
+            addChild: GridHost.addChild,
+            removeChild: GridHost.removeChild,
+            commitUpdate: GridHost.commitUpdate,
         };
+        nestedGrid.parent = null;
 
         handleEvents(props, nestedGrid);
-        return element;
+
+        return nestedGrid;
     }
 
-    static addChild(parentInstance: BabylonEntity<GridType> | GridElement, child: GridElement): void {
+    static addChild(parentInstance: AugmentedGrid | BabylonEntity<GridType>, child: AugmentedGrid, context: any): void {
         const { type, props } = child;
         const { isPixel } = props;
+        const { siblingIndex } = context;
 
-        const grid: GridType = (parentInstance as GridElement).linkedGrid ?? parentInstance;
-        const parentName = grid.name || 'grid';
+        const parentName = parentInstance.name || 'grid';
 
         if (type === 'row') {
             const { height } = props as RowProps;
-            grid.addRowDefinition(height, isPixel);
 
-            const rowIndex = grid.rowCount - 1;
-            child.linkedGrid.name = `${parentName}-row-${rowIndex}`;
-            grid.addControl(child.linkedGrid, rowIndex, 0);
+            parentInstance.addRowDefinition(height, isPixel);
 
-            child.index = rowIndex;
-        } else if (type === 'column') {
+            const rowIndex = siblingIndex;
+            child.name = `${parentName}-row-${rowIndex}`;
+            parentInstance.addControl(child, rowIndex, 0);
+        } else {
             const { width } = props as ColumnProps;
-            grid.addColumnDefinition(width, isPixel);
+            parentInstance.addColumnDefinition(width, isPixel);
 
-            const colIndex = grid.columnCount - 1;
-            child.linkedGrid.name = `${parentName}-col-${colIndex}`;
-            grid.addControl(child.linkedGrid, 0, colIndex);
-
-            child.index = colIndex;
+            const colIndex = siblingIndex;
+            child.name = `${parentName}-col-${colIndex}`;
+            parentInstance.addControl(child, 0, colIndex);
         }
 
-        // save parent to operate on it in commitUpdate
+        // info for in commitUpdate
         child.parent = parentInstance;
+        child.siblingIndex = siblingIndex;
     }
 
-    static removeChild(parentInstance: BabylonEntity<GridType> | GridElement, child: GridElement): void {
-        const { type, index } = child;
-        const grid: GridType = (parentInstance as GridElement).linkedGrid ?? parentInstance;
+    static removeChild(parentInstance: AugmentedGrid | BabylonEntity<GridType>, child: AugmentedGrid, context: any): void {
+        const { type } = child;
+        const { siblingIndex } = context;
+
+        parentInstance.removeControl(child);
 
         if (type === 'row') {
-            grid.removeRowDefinition(index);
+            parentInstance.removeRowDefinition(siblingIndex);
         } else if (type === 'column') {
-            grid.removeColumnDefinition(index);
+            parentInstance.removeColumnDefinition(siblingIndex);
         }
     }
 
     static prepareUpdate(): UpdatePayload {
         return {};
     }
 
-    static commitUpdate(instance: GridElement, updatePayload: UpdatePayload): void {
-        const { type, index, parent } = instance;
+    static commitUpdate(instance: AugmentedGrid, updatePayload: UpdatePayload): void {
+        const { type, siblingIndex, parent } = instance;
         const { isPixel } = updatePayload as RowProps | ColumnProps;
 
-        const grid: GridType = (parent as GridElement).linkedGrid ?? parent;
+        const grid = parent as AugmentedGrid | BabylonEntity<GridType>;
 
         if (type === 'row') {
             const { height } = updatePayload as RowProps;
-            grid.setRowDefinition(index, height, isPixel);
+            grid.setRowDefinition(siblingIndex, height, isPixel);
         } else if (type === 'column') {
             const { width } = updatePayload as ColumnProps;
-            grid.setColumnDefinition(index, width, isPixel);
+            grid.setColumnDefinition(siblingIndex, width, isPixel);
         }
     }
 }

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

@@ -4,7 +4,7 @@ import { type GuiHostProps, type GuiTriggerable, GuiTriggers } from '@props';
 import { TransformKeysMap } from '@constants';
 import ObjectUtils from '@utils/ObjectUtils';
 import guiConstructors from '../../_generated/babylon.gui.constructors';
-import type { Vector2WithInfo, GUI3DManager, Control, Container, Button3D } from '@babylonjs/gui';
+import type { Vector2WithInfo, GUI3DManager, Control, Container, Button3D, Grid } from '@babylonjs/gui';
 import type { Observable } from '@babylonjs/core';
 
 // required for git hook (otherwise it can't resolve the augmented JSXElements)
@@ -104,10 +104,9 @@ export class GuiHost {
         if (isInstanceOf(parentInstance, 'Button3D') && !isInstanceOf(parentInstance, 'HolographicButton')) {
             (parentInstance as unknown as Button3D).content = child;
         } else {
-            // @ts-expect-error - linkedGrid is not a part of the Control interface, but it is used in Grid
-            const grid = parentInstance.linkedGrid;
-            if (grid && grid.addControl) {
-                grid.addControl(child, 0, 0);
+            // @ts-expect-error - type is not a part of Grid
+            if (parentInstance.type === 'row' || parentInstance.type === 'column') {
+                (parentInstance as Grid).addControl?.(child, 0, 0);
             } else {
                 // ensure that addControl function exists (parentInstance could be transformNode)
                 parentInstance.addControl?.(child);

packages/library/src/reconciler.ts

@@ -41,7 +41,7 @@ function removeChild(parentInstance: Instance | RootContainer, child: Instance)
     const index = parentInstance.children.findIndex(item => item.entity!.uniqueId === child.entity!.uniqueId);
     parentInstance.children.splice(index, 1);
     //@ts-ignore
-    child.entity.handlers?.removeChild?.(parentInstance.entity, child.entity);
+    child.entity.handlers?.removeChild?.(parentInstance.entity, child.entity, { siblingIndex: index });
     const disposeMaterialsAndTextures = shouldDisposeMaterialsAndTextures(child);
     child.entity!.dispose?.(false, disposeMaterialsAndTextures);
 }
@@ -176,8 +176,15 @@ function mountBabylonEntity(parent: Instance | RootContainer, child: Instance, i
                 instantiateBabylonEntity(_parent);
             }
 
+            let siblingIndex = -1;
+            try {
+                siblingIndex = parent.children.findIndex(item => item.entity!.uniqueId === child.entity!.uniqueId);
+            } catch (error) {
+                // silent error
+            }
+
             // TODO: decouple handlers and Babylon.js entity
-            child.entity!.handlers?.addChild?.(_parent.entity!, child.entity!);
+            child.entity!.handlers?.addChild?.(_parent.entity!, child.entity!, { siblingIndex });
             if (child.babylonPackage === BabylonPackages.CORE) {
                 if (isParentNeeded(child.entity!)) {
                     try {

packages/library/src/types/types.ts

@@ -55,8 +55,8 @@ export type BabylonProps<Props, ConstructorProps, Element> = {
 export type BabylonEntity<T = unknown> = Pick<Node, 'name' | 'uniqueId' | 'dispose'> & {
     parent?: unknown;
     handlers?: Partial<{
-        addChild(parentInstance: BabylonEntity<T> | RootContainer, child: BabylonEntity<T>): void;
-        removeChild(parentInstance: BabylonEntity<T> | undefined, child: BabylonEntity<T>): void;
+        addChild(parentInstance: BabylonEntity<T> | RootContainer, child: BabylonEntity<T>, context?: any): void;
+        removeChild(parentInstance: BabylonEntity<T> | undefined, child: BabylonEntity<T>, context?: any): void;
         prepareUpdate(): UpdatePayload;
         commitUpdate(instance: BabylonEntity<T>, updatePayload: UpdatePayload): void;
     }>;