Inspector v2: Start using new Fluent components from shared-ui-components (#16771)

ryantrem · web-flow · commit 1e15a97454b3 · 2025-06-19T10:15:51.000-07:00
- Minor changes to webpack and tsconfig for inspector v2 to consume shared-ui-components - Use new Fluent common components in the property pane - Make transform related properties applicable to TransformNode (not specific to Mesh) - Don't show mesh properties for meshes without vertices (same as inspector v1) - Explicitly set the description prop on the individual sliders to undefined so we don't pass through the top level description (otherwise, the top level description gets shown for each x/y/z line) ![image](https://github.com/user-attachments/assets/11771390-6e64-4e8e-a1c9-053dc4a2cf06)
diff --git a/packages/dev/inspector-v2/src/components/properties/commonGeneralProperties.tsx b/packages/dev/inspector-v2/src/components/properties/commonGeneralProperties.tsx
@@ -1,20 +1,27 @@
 import type { FunctionComponent } from "react";
 
+import { TextPropertyLine } from "shared-ui-components/fluent/hoc/textPropertyLine";
+
 type CommonEntity = {
     id?: number;
     name?: string;
     uniqueId?: number;
     getClassName?: () => string;
 };
 
-export const CommonGeneralProperties: FunctionComponent<{ context: CommonEntity }> = ({ context: commonEntity }) => {
+export const CommonGeneralProperties: FunctionComponent<{ commonEntity: CommonEntity }> = (props) => {
+    const { commonEntity } = props;
+
     return (
-        // TODO: Use the new Fluent property line shared components.
         <>
-            {commonEntity.id !== undefined && <div key="EntityId">ID: {commonEntity.id}</div>}
-            {commonEntity.name !== undefined && <div key="EntityName">Name: {commonEntity.name}</div>}
-            {commonEntity.uniqueId !== undefined && <div key="EntityUniqueId">Unique ID: {commonEntity.uniqueId}</div>}
-            {commonEntity.getClassName !== undefined && <div key="EntityClassName">Class: {commonEntity.getClassName()}</div>}
+            {commonEntity.id !== undefined && <TextPropertyLine key="EntityId" label="ID" description="The id of the node." value={commonEntity.id.toString()} />}
+            {commonEntity.name !== undefined && <TextPropertyLine key="EntityName" label="Name" description="The name of the node." value={commonEntity.name} />}
+            {commonEntity.uniqueId !== undefined && (
+                <TextPropertyLine key="EntityUniqueId" label="Unique ID" description="The unique id of the node." value={commonEntity.uniqueId.toString()} />
+            )}
+            {commonEntity.getClassName !== undefined && (
+                <TextPropertyLine key="EntityClassName" label="Class" description="The class of the node." value={commonEntity.getClassName()} />
+            )}
         </>
     );
 };
diff --git a/packages/dev/inspector-v2/src/components/properties/meshAdvancedProperties.tsx b/packages/dev/inspector-v2/src/components/properties/meshAdvancedProperties.tsx
@@ -3,17 +3,34 @@ import type { AbstractMesh } from "core/index";
 
 import type { FunctionComponent } from "react";
 
+import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/switchPropertyLine";
+
 import { useInterceptObservable } from "../../hooks/instrumentationHooks";
 import { useObservableState } from "../../hooks/observableHooks";
 
-export const MeshAdvancedProperties: FunctionComponent<{ context: AbstractMesh }> = ({ context: mesh }) => {
+export const MeshAdvancedProperties: FunctionComponent<{ mesh: AbstractMesh }> = (props) => {
+    const { mesh } = props;
+
     // There is no observable for computeBonesUsingShaders, so we use an interceptor to listen for changes.
     const computeBonesUsingShaders = useObservableState(() => mesh.computeBonesUsingShaders, useInterceptObservable("property", mesh, "computeBonesUsingShaders"));
+    const checkCollisions = useObservableState(() => mesh.checkCollisions, useInterceptObservable("property", mesh, "checkCollisions"));
 
     return (
-        // TODO: Use the new Fluent property line shared components.
         <>
-            <div key="ComputeBonesUsingShaders">Compute bones using shaders: {computeBonesUsingShaders.toString()}</div>
+            {mesh.useBones && (
+                <SwitchPropertyLine
+                    label="Compute bones using shaders"
+                    description="Whether to compute bones using shaders."
+                    checked={computeBonesUsingShaders}
+                    onChange={(_, data) => (mesh.computeBonesUsingShaders = data.checked)}
+                />
+            )}
+            <SwitchPropertyLine
+                label="Check collisions"
+                description="Whether to check for collisions."
+                checked={checkCollisions}
+                onChange={(_, data) => (mesh.checkCollisions = data.checked)}
+            />
         </>
     );
 };
diff --git a/packages/dev/inspector-v2/src/components/properties/meshGeneralProperties.tsx b/packages/dev/inspector-v2/src/components/properties/meshGeneralProperties.tsx
@@ -3,17 +3,39 @@ import type { AbstractMesh } from "core/index";
 
 import type { FunctionComponent } from "react";
 
+import type { ISelectionService } from "../../services/selectionService";
+
+import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/switchPropertyLine";
+import { LinkPropertyLine } from "shared-ui-components/fluent/hoc/linkPropertyLine";
+
 import { useObservableState } from "../../hooks/observableHooks";
 
-export const MeshGeneralProperties: FunctionComponent<{ context: AbstractMesh }> = ({ context: mesh }) => {
+export const MeshGeneralProperties: FunctionComponent<{ mesh: AbstractMesh; selectionService: ISelectionService }> = (props) => {
+    const { mesh, selectionService } = props;
+
+    const isEnabled = useObservableState(() => mesh.isEnabled(false), mesh.onEnabledStateChangedObservable);
+
     // Use the observable to keep keep state up-to-date and re-render the component when it changes.
     const material = useObservableState(() => mesh.material, mesh.onMaterialChangedObservable);
 
     return (
-        // TODO: Use the new Fluent property line shared components.
         <>
-            <div key="MeshIsEnabled">Is enabled: {mesh.isEnabled(false).toString()}</div>
-            {material && (!material.reservedDataStore || !material.reservedDataStore.hidden) && <div key="Material">Material: {material.name}</div>}
+            <SwitchPropertyLine
+                key="MeshIsEnabled"
+                label="Is enabled"
+                description="Whether the mesh is enabled or not."
+                checked={isEnabled}
+                onChange={(_, data) => mesh.setEnabled(data.checked)}
+            />
+            {material && (!material.reservedDataStore || !material.reservedDataStore.hidden) && (
+                <LinkPropertyLine
+                    key="Material"
+                    label="Material"
+                    description={`The material used by the mesh.`}
+                    value={material.name}
+                    onLink={() => (selectionService.selectedEntity = material)}
+                />
+            )}
         </>
     );
 };
diff --git a/packages/dev/inspector-v2/src/components/properties/meshTransformProperties.tsx b/packages/dev/inspector-v2/src/components/properties/meshTransformProperties.tsx
diff --git a/packages/dev/inspector-v2/src/components/properties/transformNodeTransformProperties.tsx b/packages/dev/inspector-v2/src/components/properties/transformNodeTransformProperties.tsx
@@ -0,0 +1,38 @@
+// eslint-disable-next-line import/no-internal-modules
+import type { TransformNode, Vector3 } from "core/index";
+
+import type { FunctionComponent } from "react";
+
+import { VectorPropertyLine } from "shared-ui-components/fluent/hoc/vectorPropertyLine";
+
+import { useInterceptObservable } from "../../hooks/instrumentationHooks";
+import { useObservableState } from "../../hooks/observableHooks";
+
+type Vector3Keys<T> = { [P in keyof T]: T[P] extends Vector3 ? P : never }[keyof T];
+
+// This helper hook gets the value of a Vector3 property from a target object and causes the component
+// to re-render when the property changes or when the x/y/z components of the Vector3 change.
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function useVector3Property<T extends object, K extends Vector3Keys<T>>(target: T, propertyKey: K): Vector3 {
+    const position = useObservableState(() => target[propertyKey] as Vector3, useInterceptObservable("property", target, propertyKey));
+    useObservableState(() => position.x, useInterceptObservable("property", position, "x"));
+    useObservableState(() => position.y, useInterceptObservable("property", position, "y"));
+    useObservableState(() => position.z, useInterceptObservable("property", position, "z"));
+    return position;
+}
+
+export const TransformNodeTransformProperties: FunctionComponent<{ node: TransformNode }> = (props) => {
+    const { node: transformNode } = props;
+
+    const position = useVector3Property(transformNode, "position");
+    const rotation = useVector3Property(transformNode, "rotation");
+    const scaling = useVector3Property(transformNode, "scaling");
+
+    return (
+        <>
+            <VectorPropertyLine key="PositionTransform" label="Position" description="The position of the transform node." vector={position} />
+            <VectorPropertyLine key="RotationTransform" label="Rotation" description="The rotation of the transform node." vector={rotation} />
+            <VectorPropertyLine key="ScalingTransform" label="Scaling" description="The scaling of the transform node." vector={scaling} />
+        </>
+    );
+};
diff --git a/packages/dev/inspector-v2/src/inspector.tsx b/packages/dev/inspector-v2/src/inspector.tsx
@@ -18,6 +18,7 @@ import { SceneExplorerServiceDefinition } from "./services/panes/scene/sceneExpl
 import { TextureHierarchyServiceDefinition } from "./services/panes/scene/texturesExplorerService";
 import { CommonPropertiesServiceDefinition } from "./services/panes/properties/commonPropertiesService";
 import { MeshPropertiesServiceDefinition } from "./services/panes/properties/meshPropertiesService";
+import { TransformNodePropertiesServiceDefinition } from "./services/panes/properties/transformNodePropertiesService";
 import { PropertiesServiceDefinition } from "./services/panes/properties/propertiesService";
 import { SettingsServiceDefinition } from "./services/panes/settingsService";
 import { StatsServiceDefinition } from "./services/panes/statsService";
@@ -173,6 +174,7 @@ function _ShowInspector(scene: Nullable<Scene>, options: Partial<IInspectorOptio
             PropertiesServiceDefinition,
             CommonPropertiesServiceDefinition,
             MeshPropertiesServiceDefinition,
+            TransformNodePropertiesServiceDefinition,
 
             // Debug pane tab and related services.
             DebugServiceDefinition,
diff --git a/packages/dev/inspector-v2/src/services/panes/properties/commonPropertiesService.tsx b/packages/dev/inspector-v2/src/services/panes/properties/commonPropertiesService.tsx
@@ -33,7 +33,7 @@ export const CommonPropertiesServiceDefinition: ServiceDefinition<[], [IProperti
                 {
                     section: GeneralPropertiesSectionIdentity,
                     order: 0,
-                    component: CommonGeneralProperties,
+                    component: ({ context }) => <CommonGeneralProperties commonEntity={context} />,
                 },
             ],
         });
diff --git a/packages/dev/inspector-v2/src/services/panes/properties/meshPropertiesService.tsx b/packages/dev/inspector-v2/src/services/panes/properties/meshPropertiesService.tsx
@@ -1,62 +1,50 @@
 import type { ServiceDefinition } from "../../../modularity/serviceDefinition";
 import type { IPropertiesService } from "./propertiesService";
+import type { ISelectionService } from "../../selectionService";
 
 import { AbstractMesh } from "core/Meshes/abstractMesh";
 
 import { GeneralPropertiesSectionIdentity } from "./commonPropertiesService";
 import { PropertiesServiceIdentity } from "./propertiesService";
+import { SelectionServiceIdentity } from "../../selectionService";
 import { MeshAdvancedProperties } from "../../../components/properties/meshAdvancedProperties";
 import { MeshGeneralProperties } from "../../../components/properties/meshGeneralProperties";
-import { MeshTransformProperties } from "../../../components/properties/meshTransformProperties";
 
-export const TransformsPropertiesSectionIdentity = Symbol("Transforms");
 export const AdvancedPropertiesSectionIdentity = Symbol("Advanced");
 
-export const MeshPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService]> = {
+export const MeshPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService, ISelectionService]> = {
     friendlyName: "Mesh Properties",
-    consumes: [PropertiesServiceIdentity],
-    factory: (propertiesService) => {
-        const transformsSectionRegistration = propertiesService.addSection({
-            order: 1,
-            identity: TransformsPropertiesSectionIdentity,
-        });
-
+    consumes: [PropertiesServiceIdentity, SelectionServiceIdentity],
+    factory: (propertiesService, selectionService) => {
         const advancedSectionRegistration = propertiesService.addSection({
             order: 2,
             identity: AdvancedPropertiesSectionIdentity,
         });
 
         const contentRegistration = propertiesService.addSectionContent({
             key: "Mesh Properties",
-            predicate: (entity: unknown) => entity instanceof AbstractMesh,
+            // Meshes without vertices are effectively TransformNodes, so don't add mesh properties for them.
+            predicate: (entity: unknown): entity is AbstractMesh => entity instanceof AbstractMesh && entity.getTotalVertices() > 0,
             content: [
                 // "GENERAL" section.
                 {
                     section: GeneralPropertiesSectionIdentity,
                     order: 1,
-                    component: MeshGeneralProperties,
-                },
-
-                // "TRANSFORMS" section.
-                {
-                    section: TransformsPropertiesSectionIdentity,
-                    order: 0,
-                    component: MeshTransformProperties,
+                    component: ({ context }) => <MeshGeneralProperties mesh={context} selectionService={selectionService} />,
                 },
 
                 // "ADVANCED" section.
                 {
                     section: AdvancedPropertiesSectionIdentity,
                     order: 0,
-                    component: MeshAdvancedProperties,
+                    component: ({ context }) => <MeshAdvancedProperties mesh={context} />,
                 },
             ],
         });
 
         return {
             dispose: () => {
                 contentRegistration.dispose();
-                transformsSectionRegistration.dispose();
                 advancedSectionRegistration.dispose();
             },
         };
diff --git a/packages/dev/inspector-v2/src/services/panes/properties/transformNodePropertiesService.tsx b/packages/dev/inspector-v2/src/services/panes/properties/transformNodePropertiesService.tsx
@@ -0,0 +1,40 @@
+import type { ServiceDefinition } from "../../../modularity/serviceDefinition";
+import type { IPropertiesService } from "./propertiesService";
+
+import { TransformNode } from "core/Meshes/transformNode";
+
+import { PropertiesServiceIdentity } from "./propertiesService";
+import { TransformNodeTransformProperties } from "../../../components/properties/transformNodeTransformProperties";
+
+export const TransformsPropertiesSectionIdentity = Symbol("Transforms");
+
+export const TransformNodePropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService]> = {
+    friendlyName: "Transform Node Properties",
+    consumes: [PropertiesServiceIdentity],
+    factory: (propertiesService) => {
+        const transformsSectionRegistration = propertiesService.addSection({
+            order: 1,
+            identity: TransformsPropertiesSectionIdentity,
+        });
+
+        const contentRegistration = propertiesService.addSectionContent({
+            key: "Transform Node Properties",
+            predicate: (entity: unknown) => entity instanceof TransformNode,
+            content: [
+                // "TRANSFORMS" section.
+                {
+                    section: TransformsPropertiesSectionIdentity,
+                    order: 0,
+                    component: ({ context }) => <TransformNodeTransformProperties node={context} />,
+                },
+            ],
+        });
+
+        return {
+            dispose: () => {
+                contentRegistration.dispose();
+                transformsSectionRegistration.dispose();
+            },
+        };
+    },
+};
diff --git a/packages/dev/inspector-v2/test/app/index.ts b/packages/dev/inspector-v2/test/app/index.ts
@@ -21,6 +21,7 @@ const engine = new Engine(canvas, true, {
 });
 
 const scene = new Scene(engine);
+(globalThis as any).scene = scene; // For debugging purposes
 
 let camera: Nullable<ArcRotateCamera> = null;
 
diff --git a/packages/dev/inspector-v2/tsconfig.build.json b/packages/dev/inspector-v2/tsconfig.build.json
@@ -12,6 +12,9 @@
         },
         {
             "path": "../loaders/tsconfig.build.json"
+        },
+        {
+            "path": "../sharedUiComponents/tsconfig.build.json"
         }
     ],
 
diff --git a/packages/dev/inspector-v2/webpack.config.js b/packages/dev/inspector-v2/webpack.config.js
@@ -37,6 +37,7 @@ module.exports = (env) => {
                         {
                             loader: "ts-loader",
                             options: {
+                                configFile: "tsconfig.build.json",
                                 getCustomTransformers: () => ({
                                     before: [ReactRefreshTypeScript()].filter(Boolean),
                                 }),
@@ -46,10 +47,6 @@ module.exports = (env) => {
                     ],
                     exclude: /node_modules/,
                 },
-                {
-                    test: /\.css$/,
-                    use: ["style-loader", "css-loader"],
-                },
             ],
         },
 
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/vectorPropertyLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/vectorPropertyLine.tsx
@@ -20,10 +20,10 @@ const VectorSliders: FunctionComponent<VectorSliderProps> = (props) => {
     const { vector, ...sliderProps } = props;
     return (
         <>
-            <SyncedSliderLine {...sliderProps} label="X" propertyKey="x" target={vector} />
-            <SyncedSliderLine {...sliderProps} label="Y" propertyKey="y" target={vector} />
-            <SyncedSliderLine {...sliderProps} label="Z" propertyKey="z" target={vector} />
-            {vector instanceof Vector4 && <SyncedSliderLine {...sliderProps} label="W" propertyKey="w" target={vector} />}
+            <SyncedSliderLine {...sliderProps} label="X" description={undefined} propertyKey="x" target={vector} />
+            <SyncedSliderLine {...sliderProps} label="Y" description={undefined} propertyKey="y" target={vector} />
+            <SyncedSliderLine {...sliderProps} label="Z" description={undefined} propertyKey="z" target={vector} />
+            {vector instanceof Vector4 && <SyncedSliderLine {...sliderProps} label="W" description={undefined} propertyKey="w" target={vector} />}
         </>
     );
 };

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ export const CommonPropertiesServiceDefinition: ServiceDefinition<[], [IProperti`
`33`	`33`	`{`
`34`	`34`	`section: GeneralPropertiesSectionIdentity,`
`35`	`35`	`order: 0,`
`36`		`- component: CommonGeneralProperties,`
	`36`	`+ component: ({ context }) => <CommonGeneralProperties commonEntity={context} />,`
`37`	`37`	`},`
`38`	`38`	`],`
`39`	`39`	`});`