@babylonjs/inspector 8.37.0-preview → 8.37.1-preview

package/lib/{index-B-XOu4uI.js → index-ByzP7-y_.js}

@@ -3,8 +3,8 @@ import { useMemo, useEffect, useState, useRef, useCallback, forwardRef, createCo
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3, Quaternion, Matrix, Vector2, Vector4, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
 import { Observable } from '@babylonjs/core/Misc/observable.js';
-import { makeStyles, Link as Link$1, Body1, ToggleButton as ToggleButton$1, Button as Button$1, tokens, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, mergeClasses, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, createLightTheme, createDarkTheme, FluentProvider, Tooltip, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, Portal, RendererProvider, ToolbarRadioButton, createDOMRenderer, MenuGroup, MenuGroupHeader, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, treeItemLevelToken, Switch as Switch$1, PresenceBadge, useId, SpinButton as SpinButton$1, Slider, Input, Dropdown as Dropdown$1, Option, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Spinner, Badge, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Textarea as Textarea$1, ToolbarButton, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
-import { ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, Copy20Regular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, CopyRegular, DeleteRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, MyLocationRegular, CameraRegular, LightbulbRegular, BorderOutsideRegular, BorderNoneRegular, EyeRegular, EyeOffRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
+import { makeStyles, Link as Link$1, Body1, ToggleButton as ToggleButton$1, Button as Button$1, tokens, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, mergeClasses, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, createLightTheme, createDarkTheme, FluentProvider, Tooltip, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, Portal, RendererProvider, ToolbarRadioButton, createDOMRenderer, MenuGroup, MenuGroupHeader, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, treeItemLevelToken, MenuDivider, MenuItemCheckbox, Switch as Switch$1, PresenceBadge, useId, SpinButton as SpinButton$1, Slider, Input, Dropdown as Dropdown$1, Option, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Spinner, Badge, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Textarea as Textarea$1, ToolbarButton, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
+import { ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, Copy20Regular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, CopyRegular, DeleteRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, MyLocationRegular, CameraRegular, LightbulbRegular, BorderOutsideRegular, BorderNoneRegular, EyeRegular, EyeOffRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
 import { Collapse as Collapse$1, Fade } from '@fluentui/react-motion-components-preview';
 import '@babylonjs/core/Misc/typeStore.js';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
@@ -2396,7 +2396,7 @@ const PlaceHolderCommand = {
         /* No-op */
     },
 };
-function MakeCommandElement(command, isPlaceholder) {
+function MakeInlineCommandElement(command, isPlaceholder) {
     if (isPlaceholder) {
         // Placeholders are not visible and not interacted with, so they are always ActionCommand
         // components, just to ensure the exact right amount of space is taken up.
@@ -2459,6 +2459,7 @@ const EntityTreeItem = (props) => {
             dispose: () => commands.forEach((command) => command.dispose?.()),
         });
     }, [entityItem.entity, commandProviders]));
+    const inlineCommands = useMemo(() => commands.filter((command) => command.mode !== "contextMenu"), [commands]);
     // TreeItemLayout actions (totally unrelated to "Action" type commands) are only visible when the item is focused or has pointer hover.
     const actions = useMemo(() => {
         const defaultCommands = [];
@@ -2470,8 +2471,8 @@ const EntityTreeItem = (props) => {
                 execute: () => expandAll(),
             });
         }
-        return [...defaultCommands, ...commands].map((command) => MakeCommandElement(command, false));
-    }, [commands, hasChildren, expandAll]);
+        return [...defaultCommands, ...inlineCommands].map((command) => MakeInlineCommandElement(command, false));
+    }, [inlineCommands, hasChildren, expandAll]);
     // TreeItemLayout asides are always visible.
     const [aside, setAside] = useState([]);
     // This useEffect keeps the aside up-to-date. What should always show is any enabled toggle command, along with
@@ -2480,16 +2481,16 @@ const EntityTreeItem = (props) => {
         const updateAside = () => {
             let isAnyCommandEnabled = false;
             const aside = [];
-            for (const command of commands) {
+            for (const command of inlineCommands) {
                 isAnyCommandEnabled || (isAnyCommandEnabled = command.type === "toggle" && command.isEnabled);
                 if (isAnyCommandEnabled) {
-                    aside.push(MakeCommandElement(command, command.type !== "toggle" || !command.isEnabled));
+                    aside.push(MakeInlineCommandElement(command, command.type !== "toggle" || !command.isEnabled));
                 }
             }
             setAside(aside);
         };
         updateAside();
-        const observers = commands
+        const observers = inlineCommands
             .map((command) => command.onChange)
             .filter((onChange) => !!onChange)
             .map((onChange) => onChange.add(updateAside));
@@ -2498,8 +2499,38 @@ const EntityTreeItem = (props) => {
                 observer.remove();
             }
         };
-    }, [commands]);
-    return (jsxs(Menu, { openOnContext: true, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(FlatTreeItem, { value: entityItem.entity.uniqueId, 
+    }, [inlineCommands]);
+    const contextMenuCommands = useMemo(() => commands.filter((command) => command.mode === "contextMenu"), [commands]);
+    const [checkedContextMenuItems, setCheckedContextMenuItems] = useState({ toggleCommands: [] });
+    useEffect(() => {
+        const updateCheckedItems = () => {
+            const checkedItems = [];
+            for (const command of contextMenuCommands) {
+                if (command.type === "toggle" && command.isEnabled) {
+                    checkedItems.push(command.displayName);
+                }
+            }
+            setCheckedContextMenuItems({ toggleCommands: checkedItems });
+        };
+        updateCheckedItems();
+        const observers = contextMenuCommands
+            .map((command) => command.onChange)
+            .filter((onChange) => !!onChange)
+            .map((onChange) => onChange.add(updateCheckedItems));
+        return () => {
+            for (const observer of observers) {
+                observer.remove();
+            }
+        };
+    }, [contextMenuCommands]);
+    const onContextMenuCheckedValueChange = useCallback((e, data) => {
+        for (const command of contextMenuCommands) {
+            if (command.type === "toggle") {
+                command.isEnabled = data.checkedItems.includes(command.displayName);
+            }
+        }
+    }, [contextMenuCommands]);
+    return (jsxs(Menu, { openOnContext: true, checkedValues: checkedContextMenuItems, onCheckedValueChange: onContextMenuCheckedValueChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(FlatTreeItem, { value: entityItem.entity.uniqueId, 
                     // Disable manual expand/collapse when a filter is active.
                     itemType: !isFiltering && hasChildren ? "branch" : "leaf", parentValue: entityItem.parent.type === "section" ? entityItem.parent.sectionName : entityItem.entity.uniqueId, "aria-level": entityItem.depth, "aria-setsize": 1, "aria-posinset": 1, onClick: select, style: { [treeItemLevelToken]: entityItem.depth }, children: jsx(TreeItemLayout, { iconBefore: entityItem.icon ? jsx(entityItem.icon, { entity: entityItem.entity }) : null, className: compactMode ? classes.treeItemLayoutCompact : undefined, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, actions: actions, aside: {
                             // Match the gap and padding of the actions.
@@ -2508,7 +2539,9 @@ const EntityTreeItem = (props) => {
                         }, main: {
                             // Prevent the "main" content (the Body1 below) from growing too large and pushing the actions/aside out of view.
                             className: classes.treeItemLayoutMain,
-                        }, children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }, entityItem.entity.uniqueId) }), jsx(MenuPopover, { hidden: !hasChildren, children: jsxs(MenuList, { children: [jsx(MenuItem, { onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] }) })] }));
+                        }, children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }, entityItem.entity.uniqueId) }), jsx(MenuPopover, { hidden: !hasChildren && contextMenuCommands.length === 0, children: jsxs(MenuList, { children: [hasChildren && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(ArrowExpandAllRegular, {}), onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { icon: jsx(ArrowCollapseAllRegular, {}), onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] })), hasChildren && contextMenuCommands.length > 0 && jsx(MenuDivider, {}), contextMenuCommands.map((command) => command.type === "action" ? (jsx(MenuItem, { icon: command.icon ? jsx(command.icon, {}) : undefined, onClick: () => command.execute(), children: command.displayName }, command.displayName)) : (jsx(MenuItemCheckbox, { 
+                            // Don't show both a checkmark and an icon. null means no checkmark, undefined means default (checkmark).
+                            checkmark: command.icon ? null : undefined, icon: command.icon ? jsx(command.icon, {}) : undefined, name: "toggleCommands", value: command.displayName, children: command.displayName }, command.displayName)))] }) })] }));
 };
 const SceneExplorer = (props) => {
     const classes = useStyles$b();
@@ -3473,7 +3506,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["export", "gltf", "glb", "babylon", "exporter", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./exportService-BB4L49R4.js'),
+        getExtensionModuleAsync: async () => await import('./exportService-BGS52fVw.js'),
     },
     {
         name: "Capture Tools",
@@ -3481,7 +3514,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["capture", "screenshot", "gif", "video", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./captureService-DF30oxR-.js'),
+        getExtensionModuleAsync: async () => await import('./captureService-DlzvwY4k.js'),
     },
     {
         name: "Import Tools",
@@ -3489,7 +3522,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["import", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./importService-DEe18q7F.js'),
+        getExtensionModuleAsync: async () => await import('./importService-nyYXNIoV.js'),
     },
 ]);
 
@@ -4597,7 +4630,7 @@ function MakeModularTool(options) {
                 });
                 // Register the extension list service (for browsing/installing extensions) if extension feeds are provided.
                 if (extensionFeeds.length > 0) {
-                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-DcpjIM_c.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-Ch91ejP8.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
@@ -9275,6 +9308,7 @@ function ShowInspector(scene, options = {}) {
         existingToken.dispose();
         InspectorTokens.delete(scene);
     }
+    InspectorTokens.set(scene, inspectorToken);
     const disposeActions = [];
     const canvasContainerDisplay = parentElement.style.display;
     const canvasContainerChildren = [];
@@ -9436,7 +9470,6 @@ function ConvertOptions(v1Options) {
     // • gizmoCamera: Do users care about this one?
     // • skipDefaultFontLoading: Probably doesn't make sense for Inspector v2 using Fluent.
     // TODO:
-    // • explorerExtensibility
     // • contextMenu
     // • contextMenuOverride
     v1Options = {
@@ -9523,6 +9556,32 @@ function ConvertOptions(v1Options) {
         };
         serviceDefinitions.push(additionalNodesServiceDefinition);
     }
+    if (v1Options.explorerExtensibility && v1Options.explorerExtensibility.length > 0) {
+        const { explorerExtensibility } = v1Options;
+        const explorerExtensibilityServiceDefinition = {
+            friendlyName: "Explorer Extensibility",
+            consumes: [SceneExplorerServiceIdentity],
+            factory: (sceneExplorerService) => {
+                const sceneExplorerCommandRegistrations = explorerExtensibility.flatMap((command) => command.entries.map((entry) => sceneExplorerService.addCommand({
+                    predicate: (entity) => command.predicate(entity),
+                    getCommand: (entity) => {
+                        return {
+                            displayName: entry.label,
+                            type: "action",
+                            mode: "contextMenu",
+                            execute: () => entry.action(entity),
+                        };
+                    },
+                })));
+                return {
+                    dispose: () => {
+                        sceneExplorerCommandRegistrations.forEach((registration) => registration.dispose());
+                    },
+                };
+            },
+        };
+        serviceDefinitions.push(explorerExtensibilityServiceDefinition);
+    }
     const v2Options = {
         containerElement: v1Options.globalRoot,
         layoutMode: v1Options.overlay ? "overlay" : "inline",
@@ -9859,4 +9918,4 @@ const TextAreaPropertyLine = (props) => {
 };
 
 export { SettingsContextIdentity as $, useAsyncResource as A, ButtonLine as B, Collapse as C, DebugServiceIdentity as D, ExtensibleAccordion as E, FileUploadLine as F, useCompactMode as G, useSidePaneDockOverrides as H, Inspector as I, useAngleConverters as J, MakeTeachingMoment as K, Link as L, MakeLazyComponent as M, NumberDropdownPropertyLine as N, MakeDialogTeachingMoment as O, PropertiesServiceIdentity as P, InterceptFunction as Q, GetPropertyDescriptor as R, SwitchPropertyLine as S, ToolsServiceIdentity as T, IsPropertyReadonly as U, InterceptProperty as V, ObservableCollection as W, ConstructorFactory as X, SceneContextIdentity as Y, SelectionServiceIdentity as Z, SelectionServiceDefinition as _, SyncedSliderPropertyLine as a, ShowInspector as a0, AccordionSection as a1, Accordion as a2, Button as a3, Checkbox as a4, ColorPickerPopup as a5, InputHexField as a6, InputHsvField as a7, ComboBox as a8, DraggableLine as a9, Color4PropertyLine as aA, HexPropertyLine as aB, TextInputPropertyLine as aC, NumberInputPropertyLine as aD, LinkPropertyLine as aE, PropertyLine as aF, LineContainer as aG, PlaceholderPropertyLine as aH, SpinButtonPropertyLine as aI, StringifiedPropertyLine as aJ, TextAreaPropertyLine as aK, TextPropertyLine as aL, RotationVectorPropertyLine as aM, QuaternionPropertyLine as aN, Vector2PropertyLine as aO, Vector3PropertyLine as aP, Vector4PropertyLine as aQ, Dropdown as aa, NumberDropdown as ab, StringDropdown as ac, FactorGradientComponent as ad, Color3GradientComponent as ae, Color4GradientComponent as af, ColorStepGradientComponent as ag, InfoLabel as ah, List as ai, MessageBar as aj, PositionedPopover as ak, SearchBar as al, SearchBox as am, SpinButton as an, Switch as ao, SyncedSliderInput as ap, Textarea as aq, TextInput as ar, ToggleButton as as, FactorGradientList as at, Color3GradientList as au, Color4GradientList as av, Pane as aw, BooleanBadgePropertyLine as ax, CheckboxPropertyLine as ay, Color3PropertyLine as az, ShellServiceIdentity as b, MakePopoverTeachingMoment as c, TeachingMoment as d, SidePaneContainer as e, SceneExplorerServiceIdentity as f, SettingsServiceIdentity as g, StatsServiceIdentity as h, StringDropdownPropertyLine as i, BoundProperty as j, LinkToEntityPropertyLine as k, BuiltInsExtensionFeed as l, useProperty as m, useVector3Property as n, useColor3Property as o, useColor4Property as p, useQuaternionProperty as q, MakePropertyHook as r, useInterceptObservable as s, useEventfulState as t, useExtensionManager as u, useObservableState as v, useObservableCollection as w, useOrderedObservableCollection as x, usePollingObservable as y, useResource as z };
-//# sourceMappingURL=index-B-XOu4uI.js.map
+//# sourceMappingURL=index-ByzP7-y_.js.map