member inspector auto select

src/hooks/selection.ts

@@ -0,0 +1,45 @@
+import { useMemo } from "react";
+import { useAppSelector } from "../store/hooks";
+import { getScoreFrameBehaviorRef } from "../utils/score";
+
+export function useSelectedObjects() {
+  const castSnapshots = useAppSelector((state) => state.vm.castSnapshots);
+  const selectedObject = useAppSelector((state) => state.ui.selectedObject);
+  const selectedSpriteNumber =
+    selectedObject?.type === "sprite" && selectedObject.spriteNumber;
+  const selectedSprite = useAppSelector(
+    (state) =>
+      (!!selectedSpriteNumber &&
+        state.vm.channelSnapshots[selectedSpriteNumber]) ||
+      undefined
+  );
+  const scoreSnapshot = useAppSelector((state) => state.vm.scoreSnapshot);
+  const scoreBehaviorRef = useMemo(() => {
+    if (scoreSnapshot && selectedObject?.type === "scoreBehavior") {
+      return getScoreFrameBehaviorRef(selectedObject.frameNumber, scoreSnapshot);
+    }
+  }, [scoreSnapshot, selectedObject]);
+
+  const memberRef = useMemo(() => {
+    if (selectedObject?.type === "member") {
+      return selectedObject.memberRef;
+    } else if (selectedObject?.type === "scoreBehavior" && scoreBehaviorRef) {
+      return [scoreBehaviorRef.castLib, scoreBehaviorRef.castMember];
+    } else if (selectedObject?.type === "sprite" && selectedSprite) {
+      return selectedSprite.memberRef;
+    }
+  }, [selectedObject, scoreBehaviorRef, selectedSprite]);
+
+  const member = useMemo(() => {
+    if (memberRef) {
+      return castSnapshots[memberRef[0]]?.members?.[memberRef[1]];
+    }
+  }, [memberRef, castSnapshots]);
+
+  return {
+    scoreBehaviorRef,
+    selectedSprite,
+    member,
+    memberRef,
+  };
+}

src/views/DirStudio/DirStudio.tsx

@@ -14,6 +14,7 @@ import PropertyInspector from "../PropertyInspector";
 import LoadMovie from "../LoadMovie";
 import { useSelector } from "react-redux";
 import { RootState } from "../../store";
+import { useSelectedObjects } from "../../hooks/selection";
 
 interface DirStudioProps {
   showDebugUi?: boolean;
@@ -23,9 +24,7 @@ export default function DirStudio({
   showDebugUi,
 }: DirStudioProps) {
   const castSnapshots = useAppSelector((state) => state.vm.castSnapshots);
-  const selectedMemberRef = useAppSelector((state) =>
-    selectSelectedMemberRef(state.ui)
-  );
+  const { memberRef: selectedMemberRef } = useSelectedObjects();
   const selectedMemberId: ICastMemberIdentifier | undefined =
     selectedMemberRef && {
       castNumber: selectedMemberRef[0],
@@ -84,7 +83,6 @@ export default function DirStudio({
       <div className={styles.rightContainer}>
         <PropertyInspector
           selectedObject={selectedObject}
-          castSnapshots={castSnapshots}
         />
       </div>
     </div>

src/views/PropertyInspector/index.tsx

@@ -1,51 +1,17 @@
 import TabView from "../../components/TabView";
-import { useAppSelector } from "../../store/hooks";
-import { CastSnapshot } from "../../vm";
 import { JSONTree } from "react-json-tree";
 import styles from "./styles.module.css";
 import { TSelectedObject } from "../../store/uiSlice";
-import { useMemo } from "react";
-import { getScoreFrameBehaviorRef } from "../../utils/score";
+import { useSelectedObjects } from "../../hooks/selection";
 
 interface PropertyInspectorProps {
-  castSnapshots: Record<number, CastSnapshot>;
   selectedObject?: TSelectedObject;
 }
 
 export default function PropertyInspector({
-  castSnapshots,
   selectedObject,
 }: PropertyInspectorProps) {
-  const selectedSpriteNumber =
-    selectedObject?.type === "sprite" && selectedObject.spriteNumber;
-  const selectedSprite = useAppSelector(
-    (state) =>
-      (!!selectedSpriteNumber &&
-        state.vm.channelSnapshots[selectedSpriteNumber]) ||
-      undefined
-  );
-  const scoreSnapshot = useAppSelector((state) => state.vm.scoreSnapshot);
-  const scoreBehaviorRef = useMemo(() => {
-    if (scoreSnapshot && selectedObject?.type === "scoreBehavior") {
-      return getScoreFrameBehaviorRef(selectedObject.frameNumber, scoreSnapshot);
-    }
-  }, [scoreSnapshot, selectedObject]);
-
-  const memberRef = useMemo(() => {
-    if (selectedObject?.type === "member") {
-      return selectedObject.memberRef;
-    } else if (selectedObject?.type === "scoreBehavior" && scoreBehaviorRef) {
-      return [scoreBehaviorRef.castLib, scoreBehaviorRef.castMember];
-    } else if (selectedObject?.type === "sprite" && selectedSprite) {
-      return selectedSprite.memberRef;
-    }
-  }, [selectedObject, scoreBehaviorRef, selectedSprite]);
-
-  const member = useMemo(() => {
-    if (memberRef) {
-      return castSnapshots[memberRef[0]]?.members?.[memberRef[1]];
-    }
-  }, [memberRef, castSnapshots]);
+  const { scoreBehaviorRef, selectedSprite, member } = useSelectedObjects();
 
   return (
     <div className={styles.container}>