Inspector v2: Scene explorer light commands (#17000)

This change adds the enable/disable command and the gizmo command to
lights in scene explorer.

<img width="660" height="377" alt="image"
src="https://github.com/user-attachments/assets/a62e10a8-07ed-41dd-80f8-b00f1f9a87c1"
/>

- Remove the previously added `useObservableRenderer`. Using
`useObservableState` avoids the anti-pattern and with returning a tuple,
it's still compact and one less concept to understand.
- Fixed an issue where action commands were not updating, though I ended
up not using action commands in this PR.
- Factored out a helper function to create gizmo commands.
- Added a command for toggling light gizmos.
- Added a command to toggle the enabled state of lights (e.g. turn light
on/off).

Author: ryantrem

packages/dev/inspector-v2/src/components/scene/sceneExplorer.tsx

@@ -9,7 +9,7 @@ import { VirtualizerScrollView } from "@fluentui/react-components/unstable";
 import { FilterRegular, MoviesAndTvRegular } from "@fluentui/react-icons";
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useObservableRenderer, useObservableState } from "../../hooks/observableHooks";
+import { useObservableState } from "../../hooks/observableHooks";
 import { useResource } from "../../hooks/resourceHooks";
 import { TraverseGraph } from "../../misc/graphUtils";
 
@@ -106,7 +106,7 @@ type Command<T extends EntityBase> = Partial<IDisposable> &
         /**
          * An observable that notifies when the command state changes.
          */
-        onChange?: IReadonlyObservable<void>;
+        onChange?: IReadonlyObservable<unknown>;
     }>;
 
 type ActionCommand<T extends EntityBase> = Command<T> & {
@@ -192,23 +192,31 @@ const useStyles = makeStyles({
 const ActionCommand: FunctionComponent<{ command: ActionCommand<EntityBase>; entity: EntityBase }> = (props) => {
     const { command } = props;
 
-    useObservableRenderer(command.onChange);
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const [displayName, Icon, execute] = useObservableState(
+        useCallback(() => [command.displayName, command.icon, command.execute] as const, [command]),
+        command.onChange
+    );
 
     return (
-        <Tooltip key={command.displayName} content={command.displayName} relationship="label">
-            <Button icon={<command.icon />} appearance="subtle" onClick={() => command.execute()} />
+        <Tooltip content={displayName} relationship="label" positioning={"after"}>
+            <Button icon={<Icon />} appearance="subtle" onClick={() => execute()} />
         </Tooltip>
     );
 };
 
 const ToggleCommand: FunctionComponent<{ command: ToggleCommand<EntityBase>; entity: EntityBase }> = (props) => {
     const { command } = props;
 
-    useObservableRenderer(command.onChange);
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const [displayName, Icon, isEnabled] = useObservableState(
+        useCallback(() => [command.displayName, command.icon, command.isEnabled] as const, [command]),
+        command.onChange
+    );
 
     return (
-        <Tooltip content={command.displayName} relationship="label">
-            <ToggleButton icon={<command.icon />} appearance="transparent" checked={command.isEnabled} onClick={() => (command.isEnabled = !command.isEnabled)} />
+        <Tooltip content={displayName} relationship="label" positioning={"after"}>
+            <ToggleButton icon={<Icon />} appearance="transparent" checked={isEnabled} onClick={() => (command.isEnabled = !command.isEnabled)} />
         </Tooltip>
     );
 };

packages/dev/inspector-v2/src/hooks/observableHooks.ts

@@ -4,8 +4,6 @@ import type { ObservableCollection } from "../misc/observableCollection";
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
-import { UniqueIdGenerator } from "core/Misc/uniqueIdGenerator";
-
 /**
  * Returns the current value of the accessor and updates it when the specified event is fired on the specified element.
  * @param accessor A function that returns the current value.
@@ -76,17 +74,6 @@ export function useObservableState<T>(accessor: () => T, ...observables: Array<I
     return current;
 }
 
-/**
- * Triggers a re-render when any of the observables fire.
- * @param observables The observables to listen for changes on.
- */
-export function useObservableRenderer(...observables: Array<IReadonlyObservable | null | undefined>) {
-    useObservableState(
-        useCallback(() => UniqueIdGenerator.UniqueId, []),
-        ...observables
-    );
-}
-
 /**
  * Returns a copy of the items in the collection and updates it when the collection changes.
  * @param collection The collection to observe.

packages/dev/inspector-v2/src/services/panes/scene/nodeExplorerService.tsx

@@ -1,4 +1,4 @@
-import type { Gizmo, Nullable } from "core/index";
+import type { Gizmo, IObserver, Nullable } from "core/index";
 import type { ServiceDefinition } from "../../../modularity/serviceDefinition";
 import type { ISceneContext } from "../../sceneContext";
 import type { ISceneExplorerService } from "./sceneExplorerService";
@@ -11,6 +11,8 @@ import {
     Cone16Regular,
     EyeOffRegular,
     EyeRegular,
+    FlashlightOffRegular,
+    FlashlightRegular,
     LightbulbRegular,
     VideoFilled,
     VideoRegular,
@@ -19,6 +21,7 @@ import {
 import { Camera } from "core/Cameras/camera";
 import { FrameGraphUtils } from "core/FrameGraph/frameGraphUtils";
 import { CameraGizmo } from "core/Gizmos/cameraGizmo";
+import { LightGizmo } from "core/Gizmos/lightGizmo";
 import { Light } from "core/Lights/light";
 import { AbstractMesh } from "core/Meshes/abstractMesh";
 import { TransformNode } from "core/Meshes/transformNode";
@@ -161,7 +164,6 @@ export const NodeExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplore
             },
         });
 
-        const gizmos = new Set<Gizmo>();
         let utilityLayer: Nullable<UtilityLayerRenderer> = null;
         const getOrCreateUtilityLayer = () => {
             if (!utilityLayer) {
@@ -170,76 +172,104 @@ export const NodeExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplore
             return utilityLayer;
         };
 
-        const cameraGizmoCommandRegistration = sceneExplorerService.addCommand({
-            predicate: (entity: unknown) => entity instanceof Camera,
-            getCommand: (camera) => {
-                const onChangeObservable = new Observable<void>();
+        function addGizmoCommand<NodeT extends Node, GizmoT extends Gizmo>(
+            nodeClass: abstract new (...args: any[]) => NodeT,
+            gizmoClass: new (...args: ConstructorParameters<typeof Gizmo>) => GizmoT,
+            gizmoMap: WeakMap<NodeT, GizmoT>,
+            onGizmoCreated: (node: NodeT, gizmo: GizmoT) => void
+        ) {
+            return sceneExplorerService.addCommand({
+                predicate: (entity: unknown): entity is NodeT => entity instanceof nodeClass,
+                getCommand: (node) => {
+                    const onChangeObservable = new Observable<void>();
 
-                const getGizmo = () => {
-                    return camera.reservedDataStore?.cameraGizmo as Nullable<CameraGizmo>;
-                };
+                    const getGizmo = () => {
+                        return gizmoMap.get(node);
+                    };
 
-                const createGizmo = () => {
-                    const gizmo = new CameraGizmo(getOrCreateUtilityLayer());
-                    gizmo.camera = camera;
-                    gizmo.material.reservedDataStore = { hidden: true };
+                    let nodeDisposedObserver: Nullable<IObserver> = null;
 
-                    gizmos.add(gizmo);
-                    if (!camera.reservedDataStore) {
-                        camera.reservedDataStore = {};
-                    }
-                    camera.reservedDataStore.cameraGizmo = gizmo;
+                    const disposeGizmo = () => {
+                        const gizmo = getGizmo();
+                        if (gizmo) {
+                            gizmoMap.delete(node);
+                            gizmo.dispose();
+                            nodeDisposedObserver?.remove();
+                            onChangeObservable.notifyObservers();
+                        }
+                    };
 
-                    onChangeObservable.notifyObservers();
+                    const createGizmo = () => {
+                        const gizmo = new gizmoClass(getOrCreateUtilityLayer());
+                        onGizmoCreated(node, gizmo);
+                        gizmoMap.set(node, gizmo);
+                        nodeDisposedObserver = node.onDisposeObservable.addOnce(disposeGizmo);
+                        onChangeObservable.notifyObservers();
+                        return gizmo;
+                    };
 
-                    return gizmo;
-                };
+                    return {
+                        type: "toggle",
+                        get displayName() {
+                            return `Turn ${getGizmo() ? "Off" : "On"} Gizmo`;
+                        },
+                        icon: () => (getGizmo() ? <Cone16Filled /> : <Cone16Regular />),
+                        get isEnabled() {
+                            return !!getGizmo();
+                        },
+                        set isEnabled(enabled: boolean) {
+                            if (enabled) {
+                                if (!getGizmo()) {
+                                    createGizmo();
+                                }
+                            } else {
+                                disposeGizmo();
+                            }
+                        },
+                        onChange: onChangeObservable,
+                        dispose: () => {
+                            onChangeObservable.clear();
+                        },
+                    };
+                },
+            });
+        }
 
-                const disposeGizmo = () => {
-                    const gizmo = getGizmo();
-                    if (gizmo) {
-                        gizmos.delete(gizmo);
-                        delete camera.reservedDataStore.cameraGizmo;
-                        gizmo.dispose();
-                    }
-
-                    onChangeObservable.notifyObservers();
-                };
+        const cameraGizmos = new WeakMap<Camera, CameraGizmo>();
+        const cameraGizmoCommandRegistration = addGizmoCommand(Camera, CameraGizmo, cameraGizmos, (camera, gizmo) => (gizmo.camera = camera));
 
+        const lightEnabledCommandRegistration = sceneExplorerService.addCommand({
+            predicate: (entity: unknown): entity is Light => entity instanceof Light,
+            getCommand: (light) => {
                 return {
                     type: "toggle",
                     get displayName() {
-                        return `Turn ${getGizmo() ? "Off" : "On"} Gizmo`;
+                        return `Turn Light ${light.isEnabled() ? "Off" : "On"}`;
                     },
-                    icon: () => (getGizmo() ? <Cone16Filled /> : <Cone16Regular />),
+                    icon: () => (light.isEnabled() ? <FlashlightRegular /> : <FlashlightOffRegular />),
                     get isEnabled() {
-                        return !!getGizmo();
+                        return !light.isEnabled();
                     },
                     set isEnabled(enabled: boolean) {
-                        if (enabled) {
-                            if (!getGizmo()) {
-                                createGizmo();
-                            }
-                        } else {
-                            disposeGizmo();
-                        }
-                    },
-                    onChange: onChangeObservable,
-                    dispose: () => {
-                        onChangeObservable.clear();
+                        light.setEnabled(!enabled);
                     },
+                    onChange: light.onEnabledStateChangedObservable,
                 };
             },
         });
 
+        const lightGizmos = new WeakMap<Light, LightGizmo>();
+        const lightGizmoCommandRegistration = addGizmoCommand(Light, LightGizmo, lightGizmos, (light, gizmo) => (gizmo.light = light));
+
         return {
             dispose: () => {
                 sectionRegistration.dispose();
-                gizmos.forEach((gizmo) => gizmo.dispose());
                 utilityLayer?.dispose();
                 abstractMeshVisibilityCommandRegistration.dispose();
                 activeCameraCommandRegistration.dispose();
                 cameraGizmoCommandRegistration.dispose();
+                lightEnabledCommandRegistration.dispose();
+                lightGizmoCommandRegistration.dispose();
             },
         };
     },