Create abstraction layer over the inspector gizmo layer (#17177)

This change fixes some issues with the inspector due to its
`gizmoManager` being treated as an `any` type.

## Issue Description

To see the issue this is attempting to address, go to
[https://sandbox.babylonjs.com/](https://sandbox.babylonjs.com/?asset=https://playground.babylonjs.com/scenes/skull.babylon)
and load a model, then open the inspector and click this button:
<img width="536" height="220" alt="image"
src="https://github.com/user-attachments/assets/638ce37e-f310-40f8-a424-e557f35ab062"
/>

A message will appear on screen: `Script error. Check the developer
console.` (nothing appears in console).

The actual issue stems from this error:
```log
sceneTreeItemComponent.tsx:185  Uncaught TypeError: Cannot read properties of null (reading 'gizmoManager')
// or
sceneTreeItemComponent.tsx:187  Uncaught TypeError: Cannot set properties of null (setting 'coordinatesMode')
```

Which leads to here:

https://github.com/BabylonJS/Babylon.js/blob/197d8f6728cc57e46df8e63eaab776a023e5a3ff/packages/dev/inspector/src/components/sceneExplorer/entities/sceneTreeItemComponent.tsx#L185-L187

The issue being that this assumes that this value has been initialized,
which in this case it has not been.

## Change Description

This change makes all access to the Inspector's `gizmoManager` use one
of two helper functions: one for getting and optionally creating, and
one for disposing. This abstracts the type-unsafety of the `any` types
to one file, rather than spreading them across ~10 different locations.

This code should not make any changes to when the inspector creates the
`gizmoManager`, as the code path to create it should only be activated
in the place where it was originally created.

Author: kv-bh

packages/dev/inspector/src/components/sceneExplorer/entities/cameraTreeItemComponent.tsx

@@ -10,6 +10,7 @@ import { TreeItemLabelComponent } from "../treeItemLabelComponent";
 import { ExtensionsComponent } from "../extensionsComponent";
 import * as React from "react";
 import type { GlobalState } from "../../globalState";
+import { GetInspectorGizmoManager } from "../../../inspectorGizmoManager";
 
 interface ICameraTreeItemComponentProps {
     camera: Camera;
@@ -73,9 +74,7 @@ export class CameraTreeItemComponent extends React.Component<ICameraTreeItemComp
     toggleGizmo(): void {
         const camera = this.props.camera;
         if (camera.reservedDataStore && camera.reservedDataStore.cameraGizmo) {
-            if (camera.getScene().reservedDataStore && camera.getScene().reservedDataStore.gizmoManager) {
-                camera.getScene().reservedDataStore.gizmoManager.attachToMesh(null);
-            }
+            GetInspectorGizmoManager(camera.getScene(), false)?.attachToMesh(null);
             this.props.globalState.enableCameraGizmo(camera, false);
             this.setState({ isGizmoEnabled: false });
         } else {

packages/dev/inspector/src/components/sceneExplorer/entities/lightTreeItemComponent.tsx

@@ -9,6 +9,7 @@ import { TreeItemLabelComponent } from "../treeItemLabelComponent";
 import { ExtensionsComponent } from "../extensionsComponent";
 import * as React from "react";
 import type { GlobalState } from "../../globalState";
+import { GetInspectorGizmoManager } from "../../../inspectorGizmoManager";
 
 interface ILightTreeItemComponentProps {
     light: Light;
@@ -39,9 +40,7 @@ export class LightTreeItemComponent extends React.Component<ILightTreeItemCompon
     toggleGizmo(): void {
         const light = this.props.light;
         if (light.reservedDataStore && light.reservedDataStore.lightGizmo) {
-            if (light.getScene().reservedDataStore && light.getScene().reservedDataStore.gizmoManager) {
-                light.getScene().reservedDataStore.gizmoManager.attachToMesh(null);
-            }
+            GetInspectorGizmoManager(light.getScene(), false)?.attachToMesh(null);
             this.props.globalState.enableLightGizmo(light, false);
             this.setState({ isGizmoEnabled: false });
         } else {

packages/dev/inspector/src/components/sceneExplorer/entities/sceneTreeItemComponent.tsx

@@ -3,7 +3,6 @@ import type { Observer, Observable } from "core/Misc/observable";
 import type { PointerInfo } from "core/Events/pointerEvents";
 import { PointerEventTypes } from "core/Events/pointerEvents";
 import type { IExplorerExtensibilityGroup } from "core/Debug/debugLayer";
-import { GizmoManager } from "core/Gizmos/gizmoManager";
 import type { Scene } from "core/scene";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -22,8 +21,8 @@ import { GizmoCoordinatesMode } from "core/Gizmos/gizmo";
 import type { Bone } from "core/Bones/bone";
 
 import { setDebugNode } from "../treeNodeDebugger";
-import { FrameGraphUtils } from "core/FrameGraph/frameGraphUtils";
 import type { DragStartEndEvent } from "core/Behaviors/Meshes/pointerDragEvents";
+import { DisposeInspectorGizmoManager, GetInspectorGizmoManager } from "../../../inspectorGizmoManager";
 
 interface ISceneTreeItemComponentProps {
     scene: Scene;
@@ -53,8 +52,8 @@ export class SceneTreeItemComponent extends React.Component<
 
         const scene = this.props.scene;
         let gizmoMode = 0;
-        if (scene.reservedDataStore && scene.reservedDataStore.gizmoManager) {
-            const manager: GizmoManager = scene.reservedDataStore.gizmoManager;
+        const manager = GetInspectorGizmoManager(scene, false);
+        if (manager) {
             if (manager.positionGizmoEnabled) {
                 gizmoMode = 1;
             } else if (manager.rotationGizmoEnabled) {
@@ -85,9 +84,8 @@ export class SceneTreeItemComponent extends React.Component<
     }
 
     updateGizmoAutoPicking(isInPickingMode: boolean) {
-        const scene = this.props.scene;
-        if (scene.reservedDataStore && scene.reservedDataStore.gizmoManager) {
-            const manager: GizmoManager = scene.reservedDataStore.gizmoManager;
+        const manager = GetInspectorGizmoManager(this.props.scene, false);
+        if (manager) {
             manager.enableAutoPicking = isInPickingMode;
         }
     }
@@ -100,9 +98,8 @@ export class SceneTreeItemComponent extends React.Component<
         const scene = this.props.scene;
         this._onSelectionChangeObserver = this.props.onSelectionChangedObservable.add((entity) => {
             this._selectedEntity = entity;
-            if (entity && scene.reservedDataStore && scene.reservedDataStore.gizmoManager) {
-                const manager: GizmoManager = scene.reservedDataStore.gizmoManager;
-
+            const manager = GetInspectorGizmoManager(scene, false);
+            if (entity && manager) {
                 const className = entity.getClassName();
 
                 if (className === "TransformNode" || className.indexOf("Mesh") !== -1) {
@@ -181,10 +178,11 @@ export class SceneTreeItemComponent extends React.Component<
     }
 
     onCoordinatesMode() {
-        const scene = this.props.scene;
-        const manager: GizmoManager = scene.reservedDataStore.gizmoManager;
+        const manager = GetInspectorGizmoManager(this.props.scene, false);
         // flip coordinate system
-        manager.coordinatesMode = this.state.isInWorldCoodinatesMode ? GizmoCoordinatesMode.Local : GizmoCoordinatesMode.World;
+        if (manager) {
+            manager.coordinatesMode = this.state.isInWorldCoodinatesMode ? GizmoCoordinatesMode.Local : GizmoCoordinatesMode.World;
+        }
         this.setState({ isInWorldCoodinatesMode: !this.state.isInWorldCoodinatesMode });
     }
     onPickingMode() {
@@ -266,27 +264,17 @@ export class SceneTreeItemComponent extends React.Component<
     setGizmoMode(mode: number) {
         const scene = this.props.scene;
 
-        if (!scene.reservedDataStore) {
-            scene.reservedDataStore = {};
-        }
-
         if (this._gizmoLayerOnPointerObserver) {
             scene.onPointerObservable.remove(this._gizmoLayerOnPointerObserver);
             this._gizmoLayerOnPointerObserver = null;
         }
 
-        if (!scene.reservedDataStore.gizmoManager) {
-            const layer1 = scene.frameGraph ? FrameGraphUtils.CreateUtilityLayerRenderer(scene.frameGraph) : new UtilityLayerRenderer(scene);
-            const layer2 = scene.frameGraph ? FrameGraphUtils.CreateUtilityLayerRenderer(scene.frameGraph) : new UtilityLayerRenderer(scene);
-
-            scene.reservedDataStore.gizmoManager = new GizmoManager(scene, undefined, layer1, layer2);
-        }
+        const manager = GetInspectorGizmoManager(scene, true);
 
         if (this.props.gizmoCamera) {
-            scene.reservedDataStore.gizmoManager.utilityLayer.setRenderCamera(this.props.gizmoCamera);
+            manager.utilityLayer.setRenderCamera(this.props.gizmoCamera);
         }
 
-        const manager: GizmoManager = scene.reservedDataStore.gizmoManager;
         // Allow picking of light gizmo when a gizmo mode is selected
         this._gizmoLayerOnPointerObserver = UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene.onPointerObservable.add((pointerInfo) => {
             if (pointerInfo.type == PointerEventTypes.POINTERDOWN) {
@@ -312,8 +300,7 @@ export class SceneTreeItemComponent extends React.Component<
 
         if (this.state.gizmoMode === mode) {
             mode = 0;
-            manager.dispose();
-            scene.reservedDataStore.gizmoManager = null;
+            DisposeInspectorGizmoManager(scene);
         } else {
             switch (mode) {
                 case 1:

packages/dev/inspector/src/inspector.ts

@@ -19,6 +19,7 @@ import type { IPopupComponentProps } from "./components/popupComponent";
 import { PopupComponent } from "./components/popupComponent";
 import { CopyStyles } from "shared-ui-components/styleHelper";
 import { CreatePopup } from "shared-ui-components/popupHelper";
+import { DisposeInspectorGizmoManager } from "./inspectorGizmoManager";
 
 interface IInternalInspectorOptions extends IInspectorOptions {
     popup: boolean;
@@ -538,10 +539,7 @@ export class Inspector {
                 this._GlobalState.enableCameraGizmo(g.camera, false);
             }
         }
-        if (this._Scene && this._Scene.reservedDataStore && this._Scene.reservedDataStore.gizmoManager) {
-            this._Scene.reservedDataStore.gizmoManager.dispose();
-            this._Scene.reservedDataStore.gizmoManager = null;
-        }
+        DisposeInspectorGizmoManager(this._Scene);
 
         if (this._NewCanvasContainer) {
             this._DestroyCanvasContainer();

packages/dev/inspector/src/inspectorGizmoManager.ts

@@ -0,0 +1,36 @@
+import type { Scene } from "core/scene";
+import type { Nullable } from "core/types";
+import { UtilityLayerRenderer } from "core/Rendering/utilityLayerRenderer";
+import { GizmoManager } from "core/Gizmos/gizmoManager";
+import { FrameGraphUtils } from "core/FrameGraph/frameGraphUtils";
+
+function CreateInspectorGizmoManager(scene: Scene): GizmoManager {
+    const layer1 = scene.frameGraph ? FrameGraphUtils.CreateUtilityLayerRenderer(scene.frameGraph) : new UtilityLayerRenderer(scene);
+    const layer2 = scene.frameGraph ? FrameGraphUtils.CreateUtilityLayerRenderer(scene.frameGraph) : new UtilityLayerRenderer(scene);
+    const gizmoManager = new GizmoManager(scene, undefined, layer1, layer2);
+    scene.reservedDataStore ??= {};
+    scene.reservedDataStore.gizmoManager = gizmoManager;
+    return gizmoManager;
+}
+
+export function GetInspectorGizmoManager(scene: Nullable<Scene> | undefined, create: true): GizmoManager;
+export function GetInspectorGizmoManager(scene: Nullable<Scene> | undefined, create: false): Nullable<GizmoManager>;
+export function GetInspectorGizmoManager(scene: Nullable<Scene> | undefined, create: boolean): Nullable<GizmoManager> {
+    let gizmoManager = scene && scene.reservedDataStore && scene.reservedDataStore.gizmoManager ? (scene.reservedDataStore.gizmoManager as GizmoManager) : null;
+    if (!gizmoManager && create) {
+        if (!scene) {
+            throw new Error("Invalid scene provided to GetInspectorGizmoManager");
+        }
+        gizmoManager = CreateInspectorGizmoManager(scene);
+    }
+    return gizmoManager;
+}
+
+export function DisposeInspectorGizmoManager(scene: Nullable<Scene> | undefined): void {
+    const gizmoManager = GetInspectorGizmoManager(scene, false);
+    if (!gizmoManager) {
+        return;
+    }
+    gizmoManager.dispose();
+    scene!.reservedDataStore.gizmoManager = null;
+}