@babylonjs/inspector 8.31.1-preview → 8.31.2-preview

package/lib/index.js

@@ -81,7 +81,7 @@ import { InstancedMesh } from '@babylonjs/core/Meshes/instancedMesh.js';
 import { RenderingManager } from '@babylonjs/core/Rendering/renderingManager.js';
 import '@babylonjs/core/Rendering/edgesRenderer.js';
 import '@babylonjs/core/Rendering/outlineRenderer.js';
-import { GaussianSplattingMesh } from '@babylonjs/core/Meshes.js';
+import { GaussianSplattingMesh } from '@babylonjs/core/Meshes/GaussianSplatting/gaussianSplattingMesh.js';
 import { FactorGradient, Color3Gradient, ColorGradient } from '@babylonjs/core/Misc/gradients.js';
 import { GradientBlockColorStep } from '@babylonjs/core/Materials/Node/Blocks/gradientBlock.js';
 import { Attractor } from '@babylonjs/core/Particles/attractor.js';
@@ -1355,40 +1355,7 @@ const PropertiesPane = (props) => {
     return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
 };
 
-const SelectionServiceIdentity = Symbol("PropertiesService");
-const SelectionServiceDefinition = {
-    friendlyName: "Selection Service",
-    produces: [SelectionServiceIdentity],
-    factory: () => {
-        let selectedEntityState = null;
-        const selectedEntityObservable = new Observable();
-        let disposedHook = null;
-        const setSelectedItem = (item) => {
-            if (item !== selectedEntityState) {
-                disposedHook?.dispose();
-                disposedHook = null;
-                selectedEntityState = item;
-                selectedEntityObservable.notifyObservers();
-                if (item) {
-                    const disposable = item;
-                    if (disposable.dispose) {
-                        disposedHook = InterceptFunction(disposable, "dispose", { afterCall: () => setSelectedItem(null) });
-                    }
-                }
-            }
-        };
-        return {
-            get selectedEntity() {
-                return selectedEntityState;
-            },
-            set selectedEntity(item) {
-                setSelectedItem(item);
-            },
-            onSelectedEntityChanged: selectedEntityObservable,
-            dispose: () => selectedEntityObservable.clear(),
-        };
-    },
-};
+const SettingsContextIdentity = Symbol("SettingsContext");
 
 const ThemeModeStorageKey = `Babylon/Settings/ThemeMode`;
 /**
@@ -1636,7 +1603,7 @@ const SidePaneTab = (props) => {
 // This hook provides a side pane container and the tab list.
 // In "compact" mode, the tab list is integrated into the pane itself.
 // In "full" mode, the returned tab list is later injected into the toolbar.
-function usePane(alignment, defaultWidth, minWidth, topPanes, bottomPanes, toolbarMode, topBarItems, bottomBarItems) {
+function usePane(alignment, defaultWidth, minWidth, topPanes, bottomPanes, onSelectSidePane, toolbarMode, topBarItems, bottomBarItems) {
     const classes = useStyles$d();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
@@ -1648,6 +1615,7 @@ function usePane(alignment, defaultWidth, minWidth, topPanes, bottomPanes, toolb
     const heightStorageKey = `Babylon/Settings/${alignment}Pane/HeightAdjust`;
     const [width, setWidth] = useState(Number.parseInt(localStorage.getItem(widthStorageKey) ?? "") || Math.max(defaultWidth, minWidth));
     const [resizing, setResizing] = useState(false);
+    // Selects a default top tab (during initialization or if the selected tab is removed).
     useEffect(() => {
         if ((topSelectedTab && !topPanes.includes(topSelectedTab)) || (!topSelectedTab && topPanes.length > 0)) {
             setTopSelectedTab(topPanes[0]);
@@ -1656,6 +1624,7 @@ function usePane(alignment, defaultWidth, minWidth, topPanes, bottomPanes, toolb
             setTopSelectedTab(undefined);
         }
     }, [topSelectedTab, topPanes]);
+    // Selects a default bottom tab (during initialization or if the selected tab is removed).
     useEffect(() => {
         if ((bottomSelectedTab && !bottomPanes.includes(bottomSelectedTab)) || (!bottomSelectedTab && bottomPanes.length > 0)) {
             setBottomSelectedTab(bottomPanes[0]);
@@ -1664,6 +1633,22 @@ function usePane(alignment, defaultWidth, minWidth, topPanes, bottomPanes, toolb
             setBottomSelectedTab(undefined);
         }
     }, [bottomSelectedTab, bottomPanes]);
+    // Selects a tab when explicitly requested.
+    useEffect(() => {
+        const observer = onSelectSidePane.add((key) => {
+            const topPane = topPanes.find((entry) => entry.key === key);
+            if (topPane) {
+                setTopSelectedTab(topPane);
+                setCollapsed(false);
+            }
+            const bottomPane = bottomPanes.find((entry) => entry.key === key);
+            if (bottomPane) {
+                setBottomSelectedTab(bottomPane);
+                setCollapsed(false);
+            }
+        });
+        return () => observer.remove();
+    }, [topPanes, bottomPanes, onSelectSidePane]);
     const expandCollapseIcon = useMemo(() => {
         if (alignment === "left") {
             return collapsed ? jsx(PanelLeftExpandRegular, {}) : jsx(PanelLeftContractRegular, {});
@@ -1751,6 +1736,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
             const bottomLeftPaneCollection = new ObservableCollection();
             const bottomRightPaneCollection = new ObservableCollection();
             const centralContentCollection = new ObservableCollection();
+            const onSelectSidePane = new Observable();
             const rootComponent = () => {
                 const classes = useStyles$d();
                 const topBarItems = useOrderedObservableCollection(topBarItemCollection);
@@ -1781,8 +1767,8 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 const bottomBarLeftItems = useMemo(() => bottomBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "left"), [bottomBarItems]);
                 const bottomBarRightItems = useMemo(() => bottomBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "right"), [bottomBarItems]);
                 const centralContents = useOrderedObservableCollection(centralContentCollection);
-                const [leftPaneTabList, leftPane] = usePane("left", leftPaneDefaultWidth, leftPaneMinWidth, topLeftPanes, bottomLeftPanes, toolbarMode, topBarLeftItems, bottomBarLeftItems);
-                const [rightPaneTabList, rightPane] = usePane("right", rightPaneDefaultWidth, rightPaneMinWidth, topRightPanes, bottomRightPanes, toolbarMode, topBarRightItems, bottomBarRightItems);
+                const [leftPaneTabList, leftPane] = usePane("left", leftPaneDefaultWidth, leftPaneMinWidth, topLeftPanes, bottomLeftPanes, onSelectSidePane, toolbarMode, topBarLeftItems, bottomBarLeftItems);
+                const [rightPaneTabList, rightPane] = usePane("right", rightPaneDefaultWidth, rightPaneMinWidth, topRightPanes, bottomRightPanes, onSelectSidePane, toolbarMode, topBarRightItems, bottomBarRightItems);
                 return (jsxs("div", { className: classes.mainView, children: [toolbarMode === "full" && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [leftPaneTabList, jsx(Toolbar, { location: "top", components: topBarItems }), rightPaneTabList] }) })), jsxs("div", { className: classes.verticallyCentralContent, children: [leftPane, jsx("div", { className: classes.centralContent, children: centralContents.map((entry) => (jsx(entry.component, {}, entry.key))) }), rightPane] }), toolbarMode === "full" && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarItems }) }) }))] }));
             };
             rootComponent.displayName = "Shell Service Root";
@@ -1837,12 +1823,60 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                     }
                 },
                 addCentralContent: (entry) => centralContentCollection.add(entry),
+                get sidePanes() {
+                    return [...topLeftPaneCollection.items, ...bottomLeftPaneCollection.items, ...topRightPaneCollection.items, ...bottomRightPaneCollection.items].map((sidePaneDefinition) => {
+                        return {
+                            key: sidePaneDefinition.key,
+                            select: () => onSelectSidePane.notifyObservers(sidePaneDefinition.key),
+                        };
+                    });
+                },
                 rootComponent,
             };
         },
     };
 }
 
+const SelectionServiceIdentity = Symbol("PropertiesService");
+const SelectionServiceDefinition = {
+    friendlyName: "Selection Service",
+    produces: [SelectionServiceIdentity],
+    consumes: [ShellServiceIdentity, SettingsContextIdentity],
+    factory: (shellService, settingsContext) => {
+        let selectedEntityState = null;
+        const selectedEntityObservable = new Observable();
+        let disposedHook = null;
+        const setSelectedItem = (item) => {
+            if (item !== selectedEntityState) {
+                disposedHook?.dispose();
+                disposedHook = null;
+                selectedEntityState = item;
+                selectedEntityObservable.notifyObservers();
+                if (item) {
+                    const disposable = item;
+                    if (disposable.dispose) {
+                        disposedHook = InterceptFunction(disposable, "dispose", { afterCall: () => setSelectedItem(null) });
+                    }
+                }
+                // Automatically open the properties pane when an entity is selected.
+                if (item && settingsContext.showPropertiesOnEntitySelection) {
+                    shellService.sidePanes.find((pane) => pane.key === "Properties")?.select();
+                }
+            }
+        };
+        return {
+            get selectedEntity() {
+                return selectedEntityState;
+            },
+            set selectedEntity(item) {
+                setSelectedItem(item);
+            },
+            onSelectedEntityChanged: selectedEntityObservable,
+            dispose: () => selectedEntityObservable.clear(),
+        };
+    },
+};
+
 const PropertiesServiceIdentity = Symbol("PropertiesService");
 /**
  * Provides a properties pane that enables displaying and editing properties of an entity such as a mesh or a texture.
@@ -2625,8 +2659,6 @@ const DebugServiceDefinition = {
     },
 };
 
-const SettingsContextIdentity = Symbol("SettingsContext");
-
 const SettingsServiceIdentity = Symbol("SettingsService");
 const SettingsServiceDefinition = {
     friendlyName: "Settings",
@@ -2635,8 +2667,9 @@ const SettingsServiceDefinition = {
     factory: (shellService, sceneContext) => {
         const sectionsCollection = new ObservableCollection();
         const sectionContentCollection = new ObservableCollection();
-        let useDegrees = DataStorage.ReadBoolean("settings_useDegrees", false);
-        let ignoreBackfacesForPicking = DataStorage.ReadBoolean("settings_ignoreBackfacesForPicking", false);
+        let useDegrees = DataStorage.ReadBoolean("Babylon/Settings/UseDegrees", false);
+        let ignoreBackfacesForPicking = DataStorage.ReadBoolean("Babylon/Settings/IgnoreBackfacesForPicking", false);
+        let showPropertiesOnEntitySelection = DataStorage.ReadBoolean("Babylon/Settings/ShowPropertiesOnEntitySelection", true);
         const settings = {
             get useDegrees() {
                 return useDegrees;
@@ -2646,7 +2679,7 @@ const SettingsServiceDefinition = {
                     return; // No change, no need to notify
                 }
                 useDegrees = value;
-                DataStorage.WriteBoolean("settings_useDegrees", useDegrees);
+                DataStorage.WriteBoolean("Babylon/Settings/UseDegrees", useDegrees);
                 this.settingsChangedObservable.notifyObservers(this);
             },
             get ignoreBackfacesForPicking() {
@@ -2657,7 +2690,18 @@ const SettingsServiceDefinition = {
                     return; // No change, no need to notify
                 }
                 ignoreBackfacesForPicking = value;
-                DataStorage.WriteBoolean("settings_ignoreBackfacesForPicking", ignoreBackfacesForPicking);
+                DataStorage.WriteBoolean("Babylon/Settings/IgnoreBackfacesForPicking", ignoreBackfacesForPicking);
+                this.settingsChangedObservable.notifyObservers(this);
+            },
+            get showPropertiesOnEntitySelection() {
+                return showPropertiesOnEntitySelection;
+            },
+            set showPropertiesOnEntitySelection(value) {
+                if (showPropertiesOnEntitySelection === value) {
+                    return; // No change, no need to notify
+                }
+                showPropertiesOnEntitySelection = value;
+                DataStorage.WriteBoolean("Babylon/Settings/ShowPropertiesOnEntitySelection", showPropertiesOnEntitySelection);
                 this.settingsChangedObservable.notifyObservers(this);
             },
             settingsChangedObservable: new Observable(),
@@ -2681,6 +2725,8 @@ const SettingsServiceDefinition = {
                                         settings.useDegrees = checked;
                                     } }), jsx(SwitchPropertyLine, { label: "Ignore Backfaces for Picking", description: "Ignore backfaces when picking.", value: settings.ignoreBackfacesForPicking, onChange: (checked) => {
                                         settings.ignoreBackfacesForPicking = checked;
+                                    } }), jsx(SwitchPropertyLine, { label: "Show Properties on Selection", description: "Shows the Properties pane when an entity is selected.", value: settings.showPropertiesOnEntitySelection, onChange: (checked) => {
+                                        settings.showPropertiesOnEntitySelection = checked;
                                     } })] }) })) }));
             },
         });
@@ -2720,7 +2766,7 @@ const CountStats = ({ context: scene }) => {
     const totalVertices = useObservableState(() => scene.getTotalVertices(), pollingObservable);
     const totalMaterials = useObservableState(() => scene.materials.length, pollingObservable);
     const totalTextures = useObservableState(() => scene.textures.length, pollingObservable);
-    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Total Meshes", value: totalMeshes }, "TotalMeshes"), jsx(StringifiedPropertyLine, { label: "Active Meshes", value: activeMeshes }, "ActiveMeshes"), jsx(StringifiedPropertyLine, { label: "Active Indeces", value: activeIndices }, "ActiveIndices"), jsx(StringifiedPropertyLine, { label: "Active Faces", value: activeIndices / 3 }, "ActiveFaces"), jsx(StringifiedPropertyLine, { label: "Active Bones", value: activeBones }, "ActiveBones"), jsx(StringifiedPropertyLine, { label: "Active Particles", value: activeParticles }, "ActiveParticles"), jsx(StringifiedPropertyLine, { label: "Draw Calls", value: drawCalls }, "DrawCalls"), jsx(StringifiedPropertyLine, { label: "Total Lights", value: totalLights }, "TotalLights"), jsx(StringifiedPropertyLine, { label: "Total Vertices", value: totalVertices }, "TotalVertices"), jsx(StringifiedPropertyLine, { label: "Total Materials", value: totalMaterials }, "TotalMaterials"), jsx(StringifiedPropertyLine, { label: "Total Textures", value: totalTextures }, "TotalTextures")] }));
+    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Total Meshes", value: totalMeshes }, "TotalMeshes"), jsx(StringifiedPropertyLine, { label: "Active Meshes", value: activeMeshes }, "ActiveMeshes"), jsx(StringifiedPropertyLine, { label: "Active Indices", value: activeIndices }, "ActiveIndices"), jsx(StringifiedPropertyLine, { label: "Active Faces", value: activeIndices / 3 }, "ActiveFaces"), jsx(StringifiedPropertyLine, { label: "Active Bones", value: activeBones }, "ActiveBones"), jsx(StringifiedPropertyLine, { label: "Active Particles", value: activeParticles }, "ActiveParticles"), jsx(StringifiedPropertyLine, { label: "Draw Calls", value: drawCalls }, "DrawCalls"), jsx(StringifiedPropertyLine, { label: "Total Lights", value: totalLights }, "TotalLights"), jsx(StringifiedPropertyLine, { label: "Total Vertices", value: totalVertices }, "TotalVertices"), jsx(StringifiedPropertyLine, { label: "Total Materials", value: totalMaterials }, "TotalMaterials"), jsx(StringifiedPropertyLine, { label: "Total Textures", value: totalTextures }, "TotalTextures")] }));
 };
 
 const FrameStepsStats = ({ context: scene }) => {
@@ -3073,19 +3119,19 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         name: "Export Tools",
         description: "Adds new features to enable exporting Babylon assets such as .gltf, .glb, .babylon, and more.",
         keywords: ["export", "gltf", "glb", "babylon", "exporter", "tools"],
-        getExtensionModuleAsync: async () => await import('./exportService-CFGdt7eg.js'),
+        getExtensionModuleAsync: async () => await import('./exportService-o9GjRLQl.js'),
     },
     {
         name: "Capture Tools",
         description: "Adds new features to enable capturing screenshots, GIFs, videos, and more.",
         keywords: ["capture", "screenshot", "gif", "video", "tools"],
-        getExtensionModuleAsync: async () => await import('./captureService-EFE-C_G5.js'),
+        getExtensionModuleAsync: async () => await import('./captureService-BF3GdnfS.js'),
     },
     {
         name: "Import Tools",
         description: "Adds new features related to importing Babylon assets.",
         keywords: ["import", "tools"],
-        getExtensionModuleAsync: async () => await import('./importService-DEy_vKyx.js'),
+        getExtensionModuleAsync: async () => await import('./importService-CLU6o05K.js'),
     },
 ]);
 
@@ -4111,7 +4157,7 @@ const SpinButton = (props) => {
     const lastCommittedValue = useRef(props.value);
     // step and forceInt are not mutually exclusive since there could be cases where you want to forceInt but have spinButton jump >1 int per spin
     const step = props.step != undefined ? props.step : props.forceInt ? 1 : undefined;
-    const precision = Math.min(4, step !== undefined ? CalculatePrecision(step) : 2); // If no step, set precision to 2. Regardless, cap precision at 4 to avoid wild numbers
+    const precision = Math.min(4, step !== undefined ? Math.max(0, CalculatePrecision(step)) : 2); // If no step, set precision to 2. Regardless, cap precision at 4 to avoid wild numbers
     useEffect(() => {
         if (props.value !== lastCommittedValue.current) {
             lastCommittedValue.current = props.value;
@@ -4431,7 +4477,7 @@ const HasW = (vector) => vector instanceof Vector4 || vector instanceof Quaterni
 const TensorPropertyLine = (props) => {
     TensorPropertyLine.displayName = "TensorPropertyLine";
     const converted = (val) => (props.valueConverter ? props.valueConverter.from(val) : val);
-    const formatted = (val) => converted(val).toFixed(props.step !== undefined ? CalculatePrecision(props.step) : 2);
+    const formatted = (val) => converted(val).toFixed(props.step !== undefined ? Math.max(0, CalculatePrecision(props.step)) : 2);
     const [vector, setVector] = useState(props.value);
     const { min, max } = props;
     const onChange = (val, key) => {
@@ -8644,7 +8690,7 @@ const UserFeedbackServiceDefinition = {
             horizontalLocation: "right",
             suppressTeachingMoment: true,
             component: () => {
-                return (jsx(Button, { appearance: "subtle", icon: PersonFeedbackRegular, title: "Give Feedback on Inspector v2", onClick: () => window.open("https://forum.babylonjs.com/", "_blank") }));
+                return (jsx(Button, { appearance: "subtle", icon: PersonFeedbackRegular, title: "Give Feedback on Inspector v2", onClick: () => window.open("https://forum.babylonjs.com/t/introducing-inspector-v2/60937", "_blank") }));
             },
         });
     },