Inspector v2: Add support for toggle commands in scene explorer (#16772)

This change allows for "toggle" commands in addition to "action"
commands in scene explorer and implements one visibility toggle command.


![image](https://github.com/user-attachments/assets/94701303-b201-4180-9f38-2cc4d94f3877)

Author: ryantrem

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

@@ -4,7 +4,7 @@ import type { IDisposable, Nullable, Scene } from "core/index";
 import type { TreeItemValue, TreeOpenChangeData, TreeOpenChangeEvent } from "@fluentui/react-components";
 import type { ComponentType, FunctionComponent } from "react";
 
-import { Body1, Body1Strong, Button, FlatTree, FlatTreeItem, makeStyles, tokens, Tooltip, TreeItemLayout } from "@fluentui/react-components";
+import { Body1, Body1Strong, Button, FlatTree, FlatTreeItem, makeStyles, tokens, ToggleButton, Tooltip, TreeItemLayout } from "@fluentui/react-components";
 import { VirtualizerScrollView } from "@fluentui/react-components/unstable";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -52,7 +52,7 @@ export type SceneExplorerSection<T extends EntityBase> = Readonly<{
     watch: (scene: Scene, onAdded: (entity: T) => void, onRemoved: (entity: T) => void) => IDisposable;
 }>;
 
-export type SceneExplorerEntityCommand<T extends EntityBase> = Readonly<{
+type EntityCommandBase<T extends EntityBase> = Readonly<{
     /**
      * An optional order for the section, relative to other commands.
      * Defaults to 0.
@@ -64,11 +64,6 @@ export type SceneExplorerEntityCommand<T extends EntityBase> = Readonly<{
      */
     predicate: (entity: unknown) => entity is T;
 
-    /**
-     * The function that executes the command on the given entity.
-     */
-    execute: (scene: Scene, entity: T) => void;
-
     /**
      * The display name of the command (e.g. "Delete", "Rename", etc.).
      */
@@ -80,6 +75,36 @@ export type SceneExplorerEntityCommand<T extends EntityBase> = Readonly<{
     icon: ComponentType<{ entity: T }>;
 }>;
 
+type ActionCommand<T extends EntityBase> = EntityCommandBase<T> &
+    Readonly<{
+        type: "action";
+        /**
+         * The function that executes the command on the given entity.
+         */
+        execute: (scene: Scene, entity: T) => void;
+    }>;
+
+type ToggleCommand<T extends EntityBase> = EntityCommandBase<T> &
+    Readonly<{
+        type: "toggle";
+        /**
+         * A boolean indicating if the command is enabled.
+         */
+        isEnabled: (scene: Scene, entity: T) => boolean;
+
+        /**
+         * The function that sets the enabled state of the command on the given entity.
+         */
+        setEnabled: (scene: Scene, entity: T, enabled: boolean) => void;
+
+        /**
+         * An optional icon component to render when the command is disabled.
+         */
+        disabledIcon?: ComponentType<{ entity: T }>;
+    }>;
+
+export type SceneExplorerEntityCommand<T extends EntityBase> = ActionCommand<T> | ToggleCommand<T>;
+
 type TreeItemData =
     | {
           type: "section";
@@ -112,6 +137,39 @@ const useStyles = makeStyles({
     },
 });
 
+const ActionCommand: FunctionComponent<{ command: ActionCommand<EntityBase>; entity: EntityBase; scene: Scene }> = (props) => {
+    const { command, entity, scene } = props;
+
+    return (
+        <Tooltip key={command.displayName} content={command.displayName} relationship="label">
+            <Button icon={<command.icon entity={entity} />} appearance="subtle" onClick={() => command.execute(scene, entity)} />
+        </Tooltip>
+    );
+};
+
+const ToggleCommand: FunctionComponent<{ command: ToggleCommand<EntityBase>; entity: EntityBase; scene: Scene }> = (props) => {
+    const { command, entity, scene } = props;
+    const [checked, setChecked] = useState(command.isEnabled(scene, entity));
+    const toggle = useCallback(() => {
+        setChecked((prev) => {
+            const enabled = !prev;
+            command.setEnabled(scene, entity, enabled);
+            return enabled;
+        });
+    }, [setChecked]);
+
+    return (
+        <Tooltip content={command.displayName} relationship="label">
+            <ToggleButton
+                icon={!checked && command.disabledIcon ? <command.disabledIcon entity={entity} /> : <command.icon entity={entity} />}
+                appearance="transparent"
+                checked={checked}
+                onClick={toggle}
+            />
+        </Tooltip>
+    );
+};
+
 export const SceneExplorer: FunctionComponent<{
     sections: readonly SceneExplorerSection<EntityBase>[];
     commands: readonly SceneExplorerEntityCommand<EntityBase>[];
@@ -260,11 +318,13 @@ export const SceneExplorer: FunctionComponent<{
                                         style={item.entity === selectedEntity ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined}
                                         actions={commands
                                             .filter((command) => command.predicate(item.entity))
-                                            .map((command) => (
-                                                <Tooltip key={command.displayName} content={command.displayName} relationship="label">
-                                                    <Button icon={<command.icon entity={item.entity} />} appearance="subtle" onClick={() => command.execute(scene, item.entity)} />
-                                                </Tooltip>
-                                            ))}
+                                            .map((command) =>
+                                                command.type === "action" ? (
+                                                    <ActionCommand key={command.displayName} command={command} entity={item.entity} scene={scene} />
+                                                ) : (
+                                                    <ToggleCommand key={command.displayName} command={command} entity={item.entity} scene={scene} />
+                                                )
+                                            )}
                                     >
                                         <Body1 wrap={false} truncate>
                                             {item.title.substring(0, 100)}

packages/dev/inspector-v2/src/services/panes/properties/propertiesService.tsx

@@ -24,7 +24,7 @@ type PropertiesSectionContent<EntityT> = {
 } & AccordionSectionContent<EntityT>;
 
 /**
- * Provides a properties pane that enables displaying and editing properties of an entity such as a mesh or a texture.
+ * Allows new sections or content to be added to the properties pane.
  */
 export interface IPropertiesService extends IService<typeof PropertiesServiceIdentity> {
     /**
@@ -40,6 +40,9 @@ export interface IPropertiesService extends IService<typeof PropertiesServiceIde
     addSectionContent<EntityT>(content: PropertiesSectionContent<EntityT>): IDisposable;
 }
 
+/**
+ * Provides a properties pane that enables displaying and editing properties of an entity such as a mesh or a texture.
+ */
 export const PropertiesServiceDefinition: ServiceDefinition<[IPropertiesService], [IShellService, ISelectionService]> = {
     friendlyName: "Properties Editor",
     produces: [PropertiesServiceIdentity],

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

@@ -4,7 +4,7 @@ import type { IReadonlyObservable, Node, Scene } from "core/index";
 import type { ServiceDefinition } from "../../../modularity/serviceDefinition";
 import type { ISceneExplorerService } from "./sceneExplorerService";
 
-import { BoxRegular, BranchRegular, CameraRegular, EyeRegular, LightbulbRegular } from "@fluentui/react-icons";
+import { BoxRegular, BranchRegular, CameraRegular, EyeRegular, EyeOffRegular, LightbulbRegular } from "@fluentui/react-icons";
 
 import { Camera } from "core/Cameras/camera";
 import { Light } from "core/Lights/light";
@@ -65,13 +65,18 @@ export const NodeHierarchyServiceDefinition: ServiceDefinition<[], [ISceneExplor
         });
 
         const visibilityCommandRegistration = sceneExplorerService.addCommand({
+            type: "toggle",
             order: 0,
-            predicate: (entity: unknown) => entity instanceof AbstractMesh,
-            execute: (scene: Scene, mesh: AbstractMesh) => {
-                // TODO
+            predicate: (entity: unknown): entity is AbstractMesh => entity instanceof AbstractMesh && entity.getTotalVertices() > 0,
+            isEnabled: (scene: Scene, mesh: AbstractMesh) => {
+                return mesh.isVisible;
+            },
+            setEnabled: (scene: Scene, mesh: AbstractMesh, enabled: boolean) => {
+                mesh.isVisible = enabled;
             },
             displayName: "Show/Hide Mesh",
             icon: () => <EyeRegular />,
+            disabledIcon: () => <EyeOffRegular />,
         });
 
         return {

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

@@ -19,7 +19,7 @@ import { ShellServiceIdentity } from "../../shellService";
 export const SceneExplorerServiceIdentity = Symbol("SceneExplorer");
 
 /**
- * Provides a scene explorer pane that enables browsing the scene graph and executing commands on entities.
+ * Allows new sections or commands to be added to the scene explorer pane.
  */
 export interface ISceneExplorerService extends IService<typeof SceneExplorerServiceIdentity> {
     /**
@@ -35,6 +35,9 @@ export interface ISceneExplorerService extends IService<typeof SceneExplorerServ
     addCommand<T extends EntityBase>(command: SceneExplorerEntityCommand<T>): IDisposable;
 }
 
+/**
+ * Provides a scene explorer pane that enables browsing the scene graph and executing commands on entities.
+ */
 export const SceneExplorerServiceDefinition: ServiceDefinition<[ISceneExplorerService], [ISceneContext, IShellService, ISelectionService]> = {
     friendlyName: "Scene Explorer",
     produces: [SceneExplorerServiceIdentity],

packages/dev/inspector-v2/src/services/panes/statsService.tsx

@@ -23,7 +23,7 @@ export const StatsFrameStepsSectionIdentity = Symbol("Frame Steps Duration");
 export const StatsSystemInfoSectionIdentity = Symbol("System Info");
 
 /**
- * Provides a scene stats pane.
+ * Allows new sections or content to be added to the stats pane.
  */
 export interface IStatsService extends IService<typeof StatsServiceIdentity> {
     /**
@@ -39,6 +39,9 @@ export interface IStatsService extends IService<typeof StatsServiceIdentity> {
     addSectionContent(content: AccordionSectionContent<Scene>): IDisposable;
 }
 
+/**
+ * Provides a scene stats pane.
+ */
 export const StatsServiceDefinition: ServiceDefinition<[IStatsService], [IShellService, ISceneContext]> = {
     friendlyName: "Stats",
     produces: [StatsServiceIdentity],