Minor UI changes + hover

frontend/apps/editor3d/app/pages/PageEnigma/PageEnigma.tsx

@@ -16,6 +16,8 @@ import * as gpu from "detect-gpu";
 import { UsersApi } from "~/Classes/ApiManager";
 import { PageEnigmaComponent } from "~/pages/PageEnigma/PageEnigmaComponent";
 import { TurnOnGpu } from "~/pages/PageEnigma/TurnOnGpu";
+import { PrecisionSelector } from "./comps/PrecisionSelector/PrecisionSelector";
+import { precisionSelectedValue, precisionSelectorMenuCoords, precisionSelectorValues, showPrecisionSelector } from "./signals/precisionSelectorMenu";
 
 export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
   useSignals();
@@ -71,7 +73,7 @@ export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
         case "apple gpu (Apple GPU)":
           // TODO(bt,2025-04-08): We may want to disable this heuristic.
           // We're getting lack of hardware acceleration using Tauri on Mac and Linux.
-          isValid = true; 
+          isValid = true;
           break;
         default:
           break;
@@ -93,6 +95,12 @@ export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
       <EngineProvider sceneToken={sceneToken}>
         <PageEnigmaComponent />
         <DragComponent />
+        <PrecisionSelector
+          showSignal={showPrecisionSelector}
+          coordSignal={precisionSelectorMenuCoords}
+          valuesSignal={precisionSelectorValues}
+          selectedValueSignal={precisionSelectedValue}
+        />
         <GenerateModals />
         <ErrorDialog />
         <Wizard />

frontend/apps/editor3d/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx

@@ -22,6 +22,7 @@ import { sanitize } from "./utils/sanitize";
 import { objectMismatch } from "~/pages/PageEnigma/comps/ControlPanelSceneObject/utils/objectMismatch";
 import { XYZ } from "~/pages/PageEnigma/datastructures/common";
 import { pageHeight } from "~/signals";
+import { DraggablePrecisionMutator } from "./DraggablePrecisionMutator";
 
 // TODO this will be useful later to fix the bug on leading zeros
 // const formatNumber = (input: string): number => {
@@ -147,6 +148,15 @@ export const ControlPanelSceneObject = () => {
     setLocalRotation(xyz);
   };
 
+  const handleUniformScaleChange = (scale: number) => {
+    const updatedScaleValues: Record<string, string> = {};
+    updatedScaleValues.x = (parseFloat(localScale.x) + scale).toString();
+    updatedScaleValues.y = (parseFloat(localScale.y) + scale).toString();
+    updatedScaleValues.z = (parseFloat(localScale.z) + scale).toString();
+
+    handleScaleChange(updatedScaleValues);
+  }
+
   const handleScaleChange = (xyz: Record<string, string>) => {
     if (isInvalid(xyz)) {
       setLocalScale(xyz);
@@ -255,7 +265,9 @@ export const ControlPanelSceneObject = () => {
         </div>
 
         <div className="mb-1 flex flex-col gap-1">
-          <H5>Scale</H5>
+          <DraggablePrecisionMutator onChange={handleUniformScaleChange}>
+            <h5>Scale</h5>
+          </DraggablePrecisionMutator>
           <InputVector
             x={localScale.x.toString()}
             y={localScale.y.toString()}

frontend/apps/editor3d/app/pages/PageEnigma/comps/ControlPanelSceneObject/DraggablePrecisionMutator.tsx

@@ -0,0 +1,101 @@
+import { useCallback, useRef } from "react";
+import { twMerge } from "tailwind-merge";
+import { precisionSelectedValue, precisionSelectorMenuCoords, precisionSelectorValues, showPrecisionSelector } from "../../signals/precisionSelectorMenu";
+
+const DEFAULT_PRECISIONS = [
+  10,
+  1,
+  0.1,
+  0.01,
+  0.001
+]
+
+export const DraggablePrecisionMutator = ({
+  precisions = DEFAULT_PRECISIONS,
+  className = "",
+  initialValue = 0,
+  onChange = () => { },
+  onCommit = () => { },
+  children
+}: {
+  precisions?: number[],
+  className?: string,
+  initialValue?: number,
+  onChange?: (value: number) => void,
+  onCommit?: (value: number) => void,
+  children?: React.ReactNode
+}) => {
+  const classes = twMerge(["cursor-ew-resize", className]);
+  const divRef = useRef<HTMLDivElement>(null);
+
+  const isDraggingRef = useRef(false);
+  const dragStartCoordsRef = useRef<{ x: number, y: number } | null>(null);
+  const localAdjustedValueRef = useRef(initialValue);
+
+  const handleMouseMove = useCallback((event: MouseEvent) => {
+    // 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) {
+      return;
+    }
+
+    event.stopPropagation();
+
+    // Record the initial drag coordinates if they haven't been set yet
+    if (!dragStartCoordsRef.current) {
+      dragStartCoordsRef.current = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      return;
+    }
+
+    // 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;
+    localAdjustedValueRef.current = initialValue + scaledPrecision;
+
+    // Update the listeners
+    onChange(localAdjustedValueRef.current);
+  }, [initialValue, onChange]);
+
+  const handleMouseUp = useCallback((event: MouseEvent) => {
+    event.stopPropagation();
+    showPrecisionSelector.value = false;
+    isDraggingRef.current = false;
+    dragStartCoordsRef.current = null;
+
+    // clean up the mouse listeners
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+
+    // Call back the commit listener
+    onCommit(localAdjustedValueRef.current);
+  }, [handleMouseMove, onCommit]);
+
+  const handleMouseDown = useCallback((event: React.MouseEvent) => {
+    if (event.button !== 0) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    precisionSelectorMenuCoords.value = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    precisionSelectorValues.value = precisions;
+    showPrecisionSelector.value = true;
+    isDraggingRef.current = true;
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+  }, [handleMouseMove, handleMouseUp, precisions]);
+
+  return (
+    <div className={classes} ref={divRef} onMouseDown={handleMouseDown}>
+      {children}
+    </div>
+  )
+}

frontend/apps/editor3d/app/pages/PageEnigma/comps/PrecisionSelector/PrecisionSelector.tsx

@@ -0,0 +1,43 @@
+import { Signal } from "@preact/signals-react";
+import { useSignals } from "@preact/signals-react/runtime";
+
+export const PrecisionSelector = ({
+  showSignal,
+  coordSignal,
+  valuesSignal,
+  selectedValueSignal
+}: {
+  showSignal: Signal<boolean>,
+  coordSignal: Signal<{ x: number; y: number }>,
+  valuesSignal: Signal<number[]>
+  selectedValueSignal: Signal<number>
+}) => {
+  useSignals();
+
+  const handleMouseLeave = () => {
+    showSignal.value = false;
+  }
+
+  const handleMouseEnterItem = (scale: number) => {
+    selectedValueSignal.value = scale;
+    console.log("selectedValueSignal", selectedValueSignal.value);
+  }
+
+  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"
+      }}
+      onMouseLeave={handleMouseLeave}
+    >
+      {valuesSignal.value.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>
+      ))}
+    </div>
+  )
+}

frontend/apps/editor3d/app/pages/PageEnigma/signals/precisionSelectorMenu.ts

@@ -0,0 +1,6 @@
+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);