PageScene: migrate objectPanel signals to PageSceneStore

2026-10-26 02:59:37 +00:00 · 2026-04-29 14:56:05 -07:00
parent cd9c06d2ce
commit 32291ce080
8 changed files with 11 additions and 58 deletions
@@ -1,5 +1,4 @@
 import { ChangeEvent, useContext, useEffect, useId, useState } from "react";
-import { useSignals } from "@preact/signals-react/runtime";
 import { Transition } from "@headlessui/react";
 import {
  faChevronDown,
@@ -9,7 +8,6 @@ import {
 } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

-import { objectPanel as objectPanelSignals } from "../../signals";
 import { EngineContext } from "~/pages/PageScene/contexts/EngineContext";
 import { InputVector } from "@storyteller/ui-input";
 import { Button } from "@storyteller/ui-button";
@@ -37,10 +35,10 @@ const defaultAxises: Record<string, string> = {
 };

 export const ControlPanelSceneObject = () => {
-  useSignals();
  const disableHotkeyInput = usePageSceneStore((s) => s.disableHotkeyInput);
  const enableHotkeyInput = usePageSceneStore((s) => s.enableHotkeyInput);
-  const { isShowing, currentObject } = objectPanelSignals;
+  const isShowing = usePageSceneStore((s) => s.objectPanelShowing);
+  const currentSceneObject = usePageSceneStore((s) => s.objectPanelCurrent);

  const editorEngine = useContext(EngineContext);

@@ -65,8 +63,6 @@ export const ControlPanelSceneObject = () => {
    setIsCollapsed(!isCollapsed);
  };

-  const currentSceneObject = currentObject.value;
-
  function localToEngine(xyz: Record<string, string>) {
    return {
      x: parseFloat(xyz.x),
@@ -180,7 +176,7 @@ export const ControlPanelSceneObject = () => {
  return (
    <Transition
      as="div"
-      show={isShowing.value}
+      show={isShowing}
      className={twMerge(
        "glass absolute bottom-16 right-0 mb-4 mr-4 flex h-fit w-56 origin-bottom-right flex-col gap-2 rounded-lg border border-ui-panel-border p-3.5 text-white shadow-lg",
      )}
@@ -30,7 +30,7 @@ import {
  signalScene,
 } from "~/signals";

-import { outlinerState, updateObjectPanel } from "../signals";
+import { outlinerState } from "../signals";
 import { SceneGenereationMetaData } from "../models/sceneGenerationMetadata";
 import { MediaUploadApi } from "~/Classes/ApiManager";
 import { SceneManager } from "./scene_manager_api";
@@ -1339,7 +1339,7 @@ class Editor {
    const scale = mainSelected.scale;

    // TODO this is a bug we need to only show when clicked on and use UPDATE when updating.
-    updateObjectPanel({
+    usePageSceneStore.getState().updateObjectPanel({
      group:
        mainSelected.name === this.camera_name
          ? ClipGroup.CAMERA
@@ -3,7 +3,6 @@ import Editor from "./editor";
 import * as THREE from "three";
 import { XYZ } from "../datastructures/common";
 import { EditorStates } from "../enums";
-import { hideObjectPanel } from "../signals";
 import { usePageSceneStore } from "../PageSceneStore";

 export class SceneUtils {
@@ -173,7 +172,7 @@ export class SceneUtils {
          });
        }

-        hideObjectPanel();
+        usePageSceneStore.getState().hideObjectPanel();
        usePageSceneStore.getState().setEditorState(EditorStates.EDIT);
      }
    }
@@ -275,6 +274,6 @@ function removeObject3D(object3D) {
    usePageSceneStore.getState().removeSceneObject(uuid);
    this.editor.selected = undefined;
    this.editor.publishSelect();
-    hideObjectPanel();
+    usePageSceneStore.getState().hideObjectPanel();
  }
 }
@@ -1,9 +1,5 @@
 import * as THREE from "three";
-import {
-  hideObjectPanel,
-  outlinerState,
-  showObjectPanel,
-} from "../signals";
+import { outlinerState } from "../signals";
 import { usePageSceneStore } from "../PageSceneStore";
 import {
  OrbitControls,
@@ -230,7 +226,7 @@ export class MouseControls {
    }
    this.transform_interaction = true;
    // Contact react land
-    showObjectPanel();
+    usePageSceneStore.getState().showObjectPanel();
    this.updateSelectedUI();
  }

@@ -449,7 +445,7 @@ export class MouseControls {
        return;
      } else if (this.selected && this.selected.length > 0) {
        this.removeTransformControls();
-        hideObjectPanel();
+        usePageSceneStore.getState().hideObjectPanel();
        usePageSceneStore.getState().setShowPoseControls(false);
      }
    }
@@ -609,7 +605,7 @@ export class MouseControls {
      this.selected = [];
      this.setSelected(this.selected);
      this.removeTransformControls();
-      hideObjectPanel();
+      usePageSceneStore.getState().hideObjectPanel();
      usePageSceneStore.getState().setShowPoseControls(false);
    }

@@ -1,4 +1,3 @@
 export * from "./demoAssets";
 export * from "./engine";
-export * from "./objectPanel";
 export * from "./outliner";
@@ -1 +0,0 @@
-export * from "./objectPanel";
@@ -1,22 +0,0 @@
-import { signal } from "@preact/signals-core";
-import { SceneObject } from "./types";
-
-export const objectPanel = {
-  isShowing: signal<boolean>(false),
-  currentObject: signal<SceneObject | undefined>(undefined),
-};
-
-export const showObjectPanel = (showObject?: SceneObject) => {
-  if (showObject) {
-    objectPanel.currentObject.value = showObject;
-  }
-  objectPanel.isShowing.value = true;
-};
-
-export const hideObjectPanel = () => {
-  objectPanel.isShowing.value = false;
-};
-
-export const updateObjectPanel = (updateObject: SceneObject) => {
-  objectPanel.currentObject.value = updateObject;
-};
@@ -1,14 +0,0 @@
-import { Simple3DVector } from "~/pages/PageScene/datastructures/common";
-import { ClipGroup } from "~/enums";
-
-export type ControlPanel = {
-  isShowing: boolean;
-  currentSceneObject: SceneObject;
-};
-export type SceneObject = {
-  group: ClipGroup; // TODO: add meta data to determine what it is a camera or a object or a character into prefab clips
-  object_uuid: string;
-  object_name: string;
-  version: string;
-  objectVectors: Simple3DVector;
-};