Inspector v2: Add scene explorer command for playing/pausing animation groups (#17005)

This change adds a play/pause command for animation groups. There is
already a button in the property grid, but this makes it easy to see at
a glance in scene explorer which animation groups are playing and
quickly toggle there state.

<img width="477" height="168" alt="image"
src="https://github.com/user-attachments/assets/8d679a4b-86ec-4df9-a5b0-0e7b4df0ab48"
/>

Author: ryantrem

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

@@ -2,7 +2,7 @@ import type { ServiceDefinition } from "../../../modularity/serviceDefinition";
 import type { ISceneContext } from "../../sceneContext";
 import type { ISceneExplorerService } from "./sceneExplorerService";
 
-import { FilmstripRegular, StackRegular } from "@fluentui/react-icons";
+import { FilmstripRegular, PauseFilled, PlayFilled, StackRegular } from "@fluentui/react-icons";
 
 import { AnimationGroup, TargetedAnimation } from "core/Animations/animationGroup";
 import { Observable } from "core/Misc";
@@ -54,9 +54,45 @@ export const AnimationGroupExplorerServiceDefinition: ServiceDefinition<[], [ISc
             getEntityRemovedObservables: () => [scene.onAnimationGroupRemovedObservable],
         });
 
+        const animationPlayPauseCommandRegistration = sceneExplorerService.addCommand({
+            predicate: (entity: unknown) => entity instanceof AnimationGroup,
+            getCommand: (animationGroup) => {
+                const onChangeObservable = new Observable<void>();
+                const playObserver = animationGroup.onAnimationGroupPlayObservable.add(() => onChangeObservable.notifyObservers());
+                const pauseObserver = animationGroup.onAnimationGroupPauseObservable.add(() => onChangeObservable.notifyObservers());
+                const endObserver = animationGroup.onAnimationGroupEndObservable.add(() => onChangeObservable.notifyObservers());
+
+                return {
+                    type: "toggle",
+                    get displayName() {
+                        return `${animationGroup.isPlaying ? "Pause" : "Play"} Animation`;
+                    },
+                    icon: () => (animationGroup.isPlaying ? <PauseFilled /> : <PlayFilled />),
+                    get isEnabled() {
+                        return animationGroup.isPlaying;
+                    },
+                    set isEnabled(enabled: boolean) {
+                        if (enabled) {
+                            animationGroup.play(true);
+                        } else {
+                            animationGroup.pause();
+                        }
+                    },
+                    onChange: onChangeObservable,
+                    dispose: () => {
+                        playObserver.remove();
+                        pauseObserver.remove();
+                        endObserver.remove();
+                        onChangeObservable.clear();
+                    },
+                };
+            },
+        });
+
         return {
             dispose: () => {
                 sectionRegistration.dispose();
+                animationPlayPauseCommandRegistration.dispose();
             },
         };
     },

packages/dev/inspector-v2/test/app/index.ts

@@ -2,6 +2,7 @@
 // Additionally, here are some PGs that are helpful for testing specific features:
 // Frame graphs: http://localhost:1338/?inspectorv2#9YU4C5#23
 // Sprites: https://localhost:1338/?inspectorv2#YCY2IL#4
+// Animation groups: http://localhost:1338/?inspectorv2#FMAYKS
 
 import HavokPhysics from "@babylonjs/havok";
 import type { Nullable } from "core/types";