PageScene: migrate precisionSelector signals to PageSceneStore

frontend/apps/artcraft/app/src/pages/PageScene/PageScene.tsx

@@ -10,12 +10,6 @@ import { useEffect, useState } from "react";
 import * as gpu from "detect-gpu";
 import { UsersApi } from "~/Classes/ApiManager";
 import { PrecisionSelector } from "./comps/PrecisionSelector/PrecisionSelector";
-import {
-  precisionSelectedValue,
-  precisionSelectorMenuCoords,
-  precisionSelectorValues,
-  showPrecisionSelector,
-} from "./signals/precisionSelectorMenu";
 import { InstallSounds } from "~/pages/PageScene/InstallSounds";
 import { PageEditor } from "~/pages/PageScene/PageEditor";
 import { GalleryDragComponent } from "@storyteller/ui-gallery-modal";
@@ -137,12 +131,7 @@ export const PageScene = ({ sceneToken }: { sceneToken?: string }) => {
       <PageEditor />
       <DragComponent />
       <GalleryDragComponent />
-      <PrecisionSelector
-        showSignal={showPrecisionSelector}
-        coordSignal={precisionSelectorMenuCoords}
-        valuesSignal={precisionSelectorValues}
-        selectedValueSignal={precisionSelectedValue}
-      />
+      <PrecisionSelector />
       <ErrorDialog />
 
       <EditorLoadingBar />

frontend/apps/artcraft/app/src/pages/PageScene/comps/ControlPanelSceneObject/DraggablePrecisionMutator.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useRef } from "react";
 import { twMerge } from "tailwind-merge";
-import { precisionSelectedValue, precisionSelectorMenuCoords, precisionSelectorValues, showPrecisionSelector } from "../../signals/precisionSelectorMenu";
+import { usePageSceneStore } from "~/pages/PageScene/PageSceneStore";
 
 const DEFAULT_PRECISIONS = [
   10,
@@ -33,9 +33,10 @@ export const DraggablePrecisionMutator = ({
   const localAdjustedValueRef = useRef(initialValue);
 
   const handleMouseMove = useCallback((event: MouseEvent) => {
+    const store = usePageSceneStore.getState();
     // Ignore mouse movement if we're not even dragging
     // or if the menu is still open (we're selecting the precision)
-    if (!isDraggingRef.current || showPrecisionSelector.value) {
+    if (!isDraggingRef.current || store.precisionSelectorShowing) {
       return;
     }
 
@@ -53,7 +54,7 @@ export const DraggablePrecisionMutator = ({
     // Check how far the mouse has moved, and calculate the updated change
     const distX = event.x - dragStartCoordsRef.current.x;
     const scaledDistX = distX / 10;
-    const scaledPrecision = Math.round(scaledDistX) * precisionSelectedValue.value;
+    const scaledPrecision = Math.round(scaledDistX) * store.precisionSelectedValue;
     localAdjustedValueRef.current = initialValue + scaledPrecision;
 
     // Update the listeners
@@ -62,7 +63,7 @@ export const DraggablePrecisionMutator = ({
 
   const handleMouseUp = useCallback((event: MouseEvent) => {
     event.stopPropagation();
-    showPrecisionSelector.value = false;
+    usePageSceneStore.getState().hidePrecisionSelector();
     isDraggingRef.current = false;
     dragStartCoordsRef.current = null;
 
@@ -81,12 +82,10 @@ export const DraggablePrecisionMutator = ({
 
     event.preventDefault();
     event.stopPropagation();
-    precisionSelectorMenuCoords.value = {
-      x: event.clientX,
-      y: event.clientY
-    };
-    precisionSelectorValues.value = precisions;
-    showPrecisionSelector.value = true;
+    usePageSceneStore.getState().showPrecisionSelector(
+      { x: event.clientX, y: event.clientY },
+      precisions,
+    );
     isDraggingRef.current = true;
 
     document.addEventListener("mousemove", handleMouseMove);

frontend/apps/artcraft/app/src/pages/PageScene/comps/PrecisionSelector/PrecisionSelector.tsx

@@ -1,43 +1,37 @@
-import { Signal } from "@preact/signals-react";
-import { useSignals } from "@preact/signals-react/runtime";
+import { usePageSceneStore } from "~/pages/PageScene/PageSceneStore";
 
-export const PrecisionSelector = ({
-  showSignal,
-  coordSignal,
-  valuesSignal,
-  selectedValueSignal
-}: {
-  showSignal: Signal<boolean>,
-  coordSignal: Signal<{ x: number; y: number }>,
-  valuesSignal: Signal<number[]>
-  selectedValueSignal: Signal<number>
-}) => {
-  useSignals();
+export const PrecisionSelector = () => {
+  const showing = usePageSceneStore((s) => s.precisionSelectorShowing);
+  const coords = usePageSceneStore((s) => s.precisionSelectorCoords);
+  const values = usePageSceneStore((s) => s.precisionSelectorValues);
 
   const handleMouseLeave = () => {
-    showSignal.value = false;
-  }
+    usePageSceneStore.getState().hidePrecisionSelector();
+  };
 
   const handleMouseEnterItem = (scale: number) => {
-    selectedValueSignal.value = scale;
-    console.log("selectedValueSignal", selectedValueSignal.value);
-  }
+    usePageSceneStore.getState().setPrecisionSelectedValue(scale);
+  };
 
   return (
     <div
       className="fixed z-50 bg-red-600 -translate-x-1/2 -translate-y-1/2 flex-col gap-[1px] shadow-md bg-ui-divider border-ui-divider border-2 rounded-md overflow-clip"
       style={{
-        top: coordSignal.value.y,
-        left: coordSignal.value.x,
-        display: showSignal.value ? "flex" : "none"
+        top: coords.y,
+        left: coords.x,
+        display: showing ? "flex" : "none",
       }}
       onMouseLeave={handleMouseLeave}
     >
-      {valuesSignal.value.map((scale, index) => (
-        <span onMouseEnter={() => handleMouseEnterItem(scale)} key={index}
+      {values.map((scale, index) => (
+        <span
+          onMouseEnter={() => handleMouseEnterItem(scale)}
+          key={index}
           className="flex bg-ui-panel text-sm justify-center align-middle justify-items-center px-2 hover:bg-ui-controls"
-        >{scale}</span>
+        >
+          {scale}
+        </span>
       ))}
     </div>
-  )
-}
+  );
+};

frontend/apps/artcraft/app/src/pages/PageScene/signals/precisionSelectorMenu.ts

@@ -1,6 +0,0 @@
-import { Signal, signal } from "@preact/signals-react";
-
-export const showPrecisionSelector = signal(false);
-export const precisionSelectorMenuCoords = signal({ x: 0, y: 0 });
-export const precisionSelectorValues: Signal<number[]> = signal([]);
-export const precisionSelectedValue = signal(0);