diff --git a/frontend/apps/artcraft/app/src/pages/PageScene/PageScene.tsx b/frontend/apps/artcraft/app/src/pages/PageScene/PageScene.tsx index 4e91097c2a..48cf7de4e0 100644 --- a/frontend/apps/artcraft/app/src/pages/PageScene/PageScene.tsx +++ b/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 }) => { - + diff --git a/frontend/apps/artcraft/app/src/pages/PageScene/comps/ControlPanelSceneObject/DraggablePrecisionMutator.tsx b/frontend/apps/artcraft/app/src/pages/PageScene/comps/ControlPanelSceneObject/DraggablePrecisionMutator.tsx index b545bf4bcd..4a74db7965 100644 --- a/frontend/apps/artcraft/app/src/pages/PageScene/comps/ControlPanelSceneObject/DraggablePrecisionMutator.tsx +++ b/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); diff --git a/frontend/apps/artcraft/app/src/pages/PageScene/comps/PrecisionSelector/PrecisionSelector.tsx b/frontend/apps/artcraft/app/src/pages/PageScene/comps/PrecisionSelector/PrecisionSelector.tsx index 57ad7dcbb9..87d31bcbe5 100644 --- a/frontend/apps/artcraft/app/src/pages/PageScene/comps/PrecisionSelector/PrecisionSelector.tsx +++ b/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, - coordSignal: Signal<{ x: number; y: number }>, - valuesSignal: Signal - selectedValueSignal: Signal -}) => { - 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 (
- {valuesSignal.value.map((scale, index) => ( - handleMouseEnterItem(scale)} key={index} + {values.map((scale, index) => ( + 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} + > + {scale} + ))}
- ) -} + ); +}; diff --git a/frontend/apps/artcraft/app/src/pages/PageScene/signals/precisionSelectorMenu.ts b/frontend/apps/artcraft/app/src/pages/PageScene/signals/precisionSelectorMenu.ts deleted file mode 100644 index cb5c1504b5..0000000000 --- a/frontend/apps/artcraft/app/src/pages/PageScene/signals/precisionSelectorMenu.ts +++ /dev/null @@ -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 = signal([]); -export const precisionSelectedValue = signal(0);