Inspector v2: Back compat for Inspector.OnSelectionChangeObservable and Inspector.OnPropertyChangedObservable (#17488)

This PR adds back compat imple for the following:
- `Inspector.OnSelectionChangeObservable` - this one is simply observing
the existing `ISelectionService.onSelectedEntityChanged`.
- `Inspector.OnPropertyChangedObservable` - for this one, I introduced a
React `PropertyContext` that is used in the Properties service. It
exposes an Observable for when properties change. The Properties service
exposes the observable, and `BoundProperty` consumes the context and
fires the observable when a property is changed. Any properties handled
outside of `BoundProperty` will not automatically fire the event, so we
need to finish moving any remaining direct usages of *PropertyLine
components to `BoundProperty`, and in any cases where we can't, we need
to manually fire the observable from the context. I will work on this
when I get back to finishing fleshing out the properties pane, but most
properties should already be covered as we are using `BoundProperty`
extensively already.

Author: ryantrem

packages/dev/inspector-v2/src/components/properties/boundProperty.tsx

@@ -1,6 +1,8 @@
 import type { ComponentProps, ComponentType } from "react";
+
 import { forwardRef, useMemo } from "react";
 
+import { usePropertyChangedNotifier } from "../../contexts/propertyContext";
 import { MakePropertyHook, useProperty } from "../../hooks/compoundPropertyHooks";
 
 /**
@@ -58,6 +60,8 @@ function BoundPropertyCoreImpl<TargetT extends object, PropertyKeyT extends keyo
     // Determine which specific property hook to use based on the value's type.
     const useSpecificProperty = useMemo(() => MakePropertyHook(value), [value]);
 
+    const notifyPropertyChanged = usePropertyChangedNotifier();
+
     // Create an inline nested component that changes when the desired specific hook type changes (since hooks can't be conditional).
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const SpecificComponent = useMemo(() => {
@@ -74,8 +78,10 @@ function BoundPropertyCoreImpl<TargetT extends object, PropertyKeyT extends keyo
                 ref,
                 value: convertedValue as TargetT[PropertyKeyT],
                 onChange: (val: TargetT[PropertyKeyT]) => {
+                    const oldValue = target[propertyKey];
                     const newValue = convertFrom ? convertFrom(val) : val;
                     target[propertyKey] = newValue;
+                    notifyPropertyChanged(target, propertyKey, oldValue, newValue);
                 },
             };
 

packages/dev/inspector-v2/src/components/properties/commonGeneralProperties.tsx

@@ -4,12 +4,17 @@ import type { IDisposable } from "core/index";
 
 import { useMemo } from "react";
 
+import { ButtonLine } from "shared-ui-components/fluent/hoc/buttonLine";
 import { TextInputPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/inputPropertyLine";
-import { TextPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/textPropertyLine";
 import { StringifiedPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/stringifiedPropertyLine";
+import { TextPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/textPropertyLine";
 import { useProperty } from "../../hooks/compoundPropertyHooks";
 import { GetPropertyDescriptor, IsPropertyReadonly } from "../../instrumentation/propertyInstrumentation";
-import { ButtonLine } from "shared-ui-components/fluent/hoc/buttonLine";
+import { BoundProperty } from "./boundProperty";
+
+function IsEntityWithProperty<ObjectT, PropertyT extends keyof ObjectT>(entity: ObjectT, property: PropertyT): entity is ObjectT & Required<Pick<ObjectT, PropertyT>> {
+    return !!entity && typeof entity === "object" && property in entity && entity[property] !== undefined;
+}
 
 type CommonEntity = {
     readonly id?: number;
@@ -18,6 +23,15 @@ type CommonEntity = {
     getClassName?: () => string;
 };
 
+export function IsCommonEntity(entity: unknown): entity is CommonEntity {
+    return (
+        IsEntityWithProperty(entity as CommonEntity, "id") ||
+        IsEntityWithProperty(entity as CommonEntity, "uniqueId") ||
+        IsEntityWithProperty(entity as CommonEntity, "name") ||
+        IsEntityWithProperty(entity as CommonEntity, "getClassName")
+    );
+}
+
 export const CommonGeneralProperties: FunctionComponent<{ commonEntity: CommonEntity }> = (props) => {
     const { commonEntity } = props;
 
@@ -29,14 +43,14 @@ export const CommonGeneralProperties: FunctionComponent<{ commonEntity: CommonEn
 
     return (
         <>
-            {commonEntity.id !== undefined && <StringifiedPropertyLine key="EntityId" label="ID" description="The id of the node." value={commonEntity.id} />}
-            {name !== undefined &&
+            {IsEntityWithProperty(commonEntity, "id") && <StringifiedPropertyLine key="EntityId" label="ID" description="The id of the node." value={commonEntity.id} />}
+            {IsEntityWithProperty(commonEntity, "name") &&
                 (isNameReadonly ? (
-                    <TextPropertyLine key="EntityName" label="Name" description="The name of the node." value={name} />
+                    <TextPropertyLine key="EntityName" label="Name" description="The name of the node." value={name ?? ""} />
                 ) : (
-                    <TextInputPropertyLine key="EntityName" label="Name" description="The name of the node." value={name} onChange={(newName) => (commonEntity.name = newName)} />
+                    <BoundProperty key="EntityName" component={TextInputPropertyLine} label="Name" description="The name of the node." target={commonEntity} propertyKey="name" />
                 ))}
-            {commonEntity.uniqueId !== undefined && (
+            {IsEntityWithProperty(commonEntity, "uniqueId") && (
                 <StringifiedPropertyLine key="EntityUniqueId" label="Unique ID" description="The unique id of the node." value={commonEntity.uniqueId} />
             )}
             {className !== undefined && <TextPropertyLine key="EntityClassName" label="Class" description="The class of the node." value={className} />}

packages/dev/inspector-v2/src/contexts/propertyContext.ts

@@ -0,0 +1,23 @@
+import type { Observable } from "core/index";
+
+import { createContext, useContext } from "react";
+
+export type PropertyChangeInfo = {
+    readonly entity: unknown;
+    readonly propertyKey: PropertyKey;
+    readonly oldValue: unknown;
+    readonly newValue: unknown;
+};
+
+export type PropertyContext = {
+    readonly onPropertyChanged: Observable<PropertyChangeInfo>;
+};
+
+export const PropertyContext = createContext<PropertyContext | undefined>(undefined);
+
+export function usePropertyChangedNotifier() {
+    const propertyContext = useContext(PropertyContext);
+    return <ObjectT, PropertyT extends keyof ObjectT>(entity: ObjectT, propertyKey: PropertyT, oldValue: ObjectT[PropertyT], newValue: ObjectT[PropertyT]) => {
+        propertyContext?.onPropertyChanged.notifyObservers({ entity, propertyKey, oldValue, newValue });
+    };
+}

packages/dev/inspector-v2/src/legacy/inspector.tsx

@@ -13,7 +13,9 @@ import type { InspectorOptions as InspectorV2Options } from "../inspector";
 import type { WeaklyTypedServiceDefinition } from "../modularity/serviceContainer";
 import type { ServiceDefinition } from "../modularity/serviceDefinition";
 import type { IGizmoService } from "../services/gizmoService";
+import type { IPropertiesService } from "../services/panes/properties/propertiesService";
 import type { ISceneExplorerService } from "../services/panes/scene/sceneExplorerService";
+import type { ISelectionService } from "../services/selectionService";
 import type { IShellService } from "../services/shellService";
 
 import { BranchRegular } from "@fluentui/react-icons";
@@ -25,7 +27,9 @@ import { UniqueIdGenerator } from "core/Misc/uniqueIdGenerator";
 import { ShowInspector } from "../inspector";
 import { InterceptProperty } from "../instrumentation/propertyInstrumentation";
 import { GizmoServiceIdentity } from "../services/gizmoService";
+import { PropertiesServiceIdentity } from "../services/panes/properties/propertiesService";
 import { SceneExplorerServiceIdentity } from "../services/panes/scene/sceneExplorerService";
+import { SelectionServiceIdentity } from "../services/selectionService";
 import { ShellServiceIdentity } from "../services/shellService";
 
 type PropertyChangedEvent = {
@@ -322,6 +326,8 @@ export class Inspector {
         }
 
         let options = ConvertOptions(userOptions);
+        const serviceDefinitions: WeaklyTypedServiceDefinition[] = [];
+
         const popupServiceDefinition: ServiceDefinition<[], [IShellService]> = {
             friendlyName: "Popup Service (Backward Compatibility)",
             consumes: [ShellServiceIdentity],
@@ -340,10 +346,55 @@ export class Inspector {
                 };
             },
         };
+        serviceDefinitions.push(popupServiceDefinition);
+
+        const selectionChangedServiceDefinition: ServiceDefinition<[], [ISelectionService]> = {
+            friendlyName: "Selection Changed Service (Backward Compatibility)",
+            consumes: [SelectionServiceIdentity],
+            factory: (selectionService) => {
+                const selectionServiceObserver = selectionService.onSelectedEntityChanged.add(() => {
+                    this.OnSelectionChangeObservable.notifyObservers(selectionService.selectedEntity);
+                });
+
+                const legacyObserver = this.OnSelectionChangeObservable.add((entity) => {
+                    selectionService.selectedEntity = entity;
+                });
+
+                return {
+                    dispose: () => {
+                        selectionServiceObserver.remove();
+                        legacyObserver.remove();
+                    },
+                };
+            },
+        };
+        serviceDefinitions.push(selectionChangedServiceDefinition);
+
+        const propertyChangedServiceDefinition: ServiceDefinition<[], [IPropertiesService]> = {
+            friendlyName: "Property Changed Service (Backward Compatibility)",
+            consumes: [PropertiesServiceIdentity],
+            factory: (propertiesService) => {
+                const observer = propertiesService.onPropertyChanged.add((changeInfo) => {
+                    this.OnPropertyChangedObservable.notifyObservers({
+                        object: changeInfo.entity,
+                        property: changeInfo.propertyKey.toString(),
+                        value: changeInfo.newValue,
+                        initialValue: changeInfo.oldValue,
+                    });
+                });
+
+                return {
+                    dispose: () => {
+                        observer.remove();
+                    },
+                };
+            },
+        };
+        serviceDefinitions.push(propertyChangedServiceDefinition);
 
         options = {
             ...options,
-            serviceDefinitions: [...(options.serviceDefinitions ?? []), popupServiceDefinition],
+            serviceDefinitions: [...(options.serviceDefinitions ?? []), ...serviceDefinitions],
         };
 
         this._CurrentInspectorToken = ShowInspector(scene, options);

packages/dev/inspector-v2/src/services/panes/properties/commonPropertiesService.tsx

@@ -4,7 +4,7 @@ import type { IPropertiesService } from "./propertiesService";
 
 import { Scene } from "core/scene";
 
-import { CommonGeneralProperties, DisposableGeneralProperties } from "../../../components/properties/commonGeneralProperties";
+import { CommonGeneralProperties, DisposableGeneralProperties, IsCommonEntity } from "../../../components/properties/commonGeneralProperties";
 import { PropertiesServiceIdentity } from "./propertiesService";
 
 type CommonEntity = {
@@ -26,8 +26,7 @@ export const CommonPropertiesServiceDefinition: ServiceDefinition<[], [IProperti
                     return false;
                 }
 
-                const commonEntity = entity as CommonEntity;
-                return commonEntity.id !== undefined || commonEntity.name !== undefined || commonEntity.uniqueId !== undefined || commonEntity.getClassName !== undefined;
+                return IsCommonEntity(entity);
             },
             content: [
                 {

packages/dev/inspector-v2/src/services/panes/properties/propertiesService.tsx

@@ -1,18 +1,20 @@
-import type { IDisposable } from "core/index";
-
+import type { IDisposable, IReadonlyObservable } from "core/index";
 import type { DynamicAccordionSection, DynamicAccordionSectionContent } from "../../../components/extensibleAccordion";
+import type { PropertyChangeInfo } from "../../../contexts/propertyContext";
 import type { IService, ServiceDefinition } from "../../../modularity/serviceDefinition";
 import type { ISelectionService } from "../../selectionService";
 import type { IShellService } from "../../shellService";
 
 import { DocumentTextRegular } from "@fluentui/react-icons";
+import { useMemo } from "react";
 
+import { Observable } from "core/Misc/observable";
 import { PropertiesPane } from "../../../components/properties/propertiesPane";
+import { PropertyContext } from "../../../contexts/propertyContext";
 import { useObservableCollection, useObservableState, useOrderedObservableCollection } from "../../../hooks/observableHooks";
 import { ObservableCollection } from "../../../misc/observableCollection";
 import { SelectionServiceIdentity } from "../../selectionService";
 import { ShellServiceIdentity } from "../../shellService";
-import { useMemo } from "react";
 
 export const PropertiesServiceIdentity = Symbol("PropertiesService");
 
@@ -45,6 +47,12 @@ export interface IPropertiesService extends IService<typeof PropertiesServiceIde
      * @param content A description of the content to add.
      */
     addSectionContent<EntityT>(content: PropertiesSectionContent<EntityT>): IDisposable;
+
+    /**
+     * An observable that notifies when a property has been changed by the user.
+     * @remarks This observable only fires for changes made through the properties pane.
+     */
+    readonly onPropertyChanged: IReadonlyObservable<PropertyChangeInfo>;
 }
 
 /**
@@ -57,6 +65,7 @@ export const PropertiesServiceDefinition: ServiceDefinition<[IPropertiesService]
     factory: (shellService, selectionService) => {
         const sectionsCollection = new ObservableCollection<DynamicAccordionSection>();
         const sectionContentCollection = new ObservableCollection<PropertiesSectionContent<unknown>>();
+        const onPropertyChanged = new Observable<PropertyChangeInfo>();
 
         const registration = shellService.addSidePane({
             key: "Properties",
@@ -89,13 +98,18 @@ export const PropertiesServiceDefinition: ServiceDefinition<[IPropertiesService]
                     [sectionContent, entity]
                 );
 
-                return <PropertiesPane sections={sections} sectionContent={applicableContent} context={entity} />;
+                return (
+                    <PropertyContext.Provider value={{ onPropertyChanged }}>
+                        <PropertiesPane sections={sections} sectionContent={applicableContent} context={entity} />
+                    </PropertyContext.Provider>
+                );
             },
         });
 
         return {
             addSection: (section) => sectionsCollection.add(section),
             addSectionContent: (content) => sectionContentCollection.add(content as PropertiesSectionContent<unknown>),
+            onPropertyChanged,
             dispose: () => registration.dispose(),
         };
     },