Merge pull request #14450 from sebavan/InspectorNavigation

Fix key navigation in scene explorer
BabylonJS · Oct 20, 2023 · 539283a · 539283a
2 parents 57f84af + f22f51c
commit 539283a
Showing 1 changed file with 28 additions and 9 deletions.
diff --git a/packages/dev/inspector/src/components/sceneExplorer/sceneExplorerComponent.tsx b/packages/dev/inspector/src/components/sceneExplorer/sceneExplorerComponent.tsx
@@ -208,7 +208,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
         return false;
     }
 
-    processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>) {
+    processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>, allNodes: any[]) {
         if (!this.state.selectedEntity) {
             return;
         }
@@ -253,9 +253,9 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
         keyEvent.preventDefault();
 
         const data = {};
-        if (!this.findSiblings(null, scene.rootNodes, this.state.selectedEntity, goNext, data)) {
-            if (!this.findSiblings(null, scene.materials, this.state.selectedEntity, goNext, data)) {
-                this.findSiblings(null, scene.textures, this.state.selectedEntity, goNext, data);
+        for (const nodeGroup of allNodes) {
+            if (this.findSiblings(null, nodeGroup, this.state.selectedEntity, goNext, data)) {
+                break;
             }
         }
     }
@@ -451,7 +451,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
         return useDefaults ? [...defaultMenuItems, ...customMenuItems] : customMenuItems;
     }
 
-    renderContent() {
+    renderContent(allNodes: any[]) {
         const scene = this.state.scene;
 
         if (!scene) {
@@ -507,6 +507,23 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
             }
         }
 
+        allNodes.push(
+            rootNodes,
+            scene.skeletons,
+            materials,
+            textures,
+            postProcesses,
+            pipelines,
+            scene.effectLayers,
+            scene.particleSystems,
+            scene.spriteManagers,
+            guiElements,
+            scene.animationGroups
+        );
+        if (scene.mainSoundTrack) {
+            allNodes.push(scene.mainSoundTrack.soundCollection);
+        }
+
         return (
             <div id="tree" onContextMenu={(e) => e.preventDefault()}>
                 <SceneExplorerFilterComponent onFilter={(filter) => this.filterContent(filter)} />
@@ -682,9 +699,11 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
     }
 
     render() {
+        const allNodes: any[] = [];
+
         if (this.props.popupMode) {
             return (
-                <div id="sceneExplorer" tabIndex={0} onKeyDown={(keyEvent) => this.processKeys(keyEvent)}>
+                <div id="sceneExplorer" tabIndex={0} onKeyDown={(keyEvent) => this.processKeys(keyEvent, allNodes)}>
                     {!this.props.noHeader && (
                         <HeaderComponent
                             title="SCENE EXPLORER"
@@ -695,7 +714,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
                             onPopup={() => this.onPopup()}
                         />
                     )}
-                    {this.renderContent()}
+                    {this.renderContent(allNodes)}
                 </div>
             );
         }
@@ -722,7 +741,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
                 maxWidth={600}
                 minHeight="100%"
                 enable={{ top: false, right: true, bottom: false, left: false, topRight: false, bottomRight: false, bottomLeft: false, topLeft: false }}
-                onKeyDown={(keyEvent) => this.processKeys(keyEvent)}
+                onKeyDown={(keyEvent) => this.processKeys(keyEvent, allNodes)}
             >
                 {!this.props.noHeader && (
                     <HeaderComponent
@@ -734,7 +753,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
                         onPopup={() => this.onPopup()}
                     />
                 )}
-                {this.renderContent()}
+                {this.renderContent(allNodes)}
             </Resizable>
         );
     }