Cleaned up hooks

src/components/ColorValues/ValueEditor.module.css

@@ -24,6 +24,8 @@
 }
 
 .symbol {
+  font-family: monospace;
+  font-size: 14px;
   aspect-ratio: 1 / 1;
 }
 

src/hooks/crosshair.tsx

@@ -7,7 +7,6 @@ import {
   isTouchEvent,
   minmax,
   positionToValue,
-  valueToPosition,
 } from "@/util";
 
 if (typeof TouchEvent === "undefined") {
@@ -18,10 +17,6 @@ if (typeof TouchEvent === "undefined") {
 export function useCrosshair({
   origin,
   dimensions,
-  setXPosition,
-  setYPosition,
-  xValue,
-  yValue,
   setXValue,
   setYValue,
   xValueRange,
@@ -29,10 +24,6 @@ export function useCrosshair({
 }: {
   origin: CartesianSpace;
   dimensions: CartesianSpace;
-  setXPosition: Setter<number>;
-  setYPosition: Setter<number>;
-  xValue: number;
-  yValue: number;
   setXValue: Setter<number>;
   setYValue: Setter<number>;
   xValueRange: Range;
@@ -41,8 +32,11 @@ export function useCrosshair({
   const [isDragging, setIsDragging] = useState(false);
   const crosshairRef = useRef<HTMLDivElement>(null);
 
+  // Crosshair UI refs
   const originRef = useRef(origin);
   const dimensionsRef = useRef(dimensions);
+
+  // Crosshair value refs
   const setXValueRef = useRef(setXValue);
   const setYValueRef = useRef(setYValue);
   const xValueRangeRef = useRef(xValueRange);
@@ -51,11 +45,12 @@ export function useCrosshair({
   useEffect(() => {
     originRef.current = origin;
     dimensionsRef.current = dimensions;
-    setXValueRef.current = setXValue;
+  }, [origin, dimensions]);
-    setYValueRef.current = setYValue;
+
+  useEffect(() => {
     xValueRangeRef.current = xValueRange;
     yValueRangeRef.current = yValueRange;
-  }, [origin, dimensions, setXValue, setYValue, xValueRange, yValueRange]);
+  }, [xValueRange, yValueRange]);
 
   const calculatePositions = useCallback((event: MouseEvent | TouchEvent) => {
     const orig = originRef.current;
@@ -122,15 +117,6 @@ export function useCrosshair({
     [calculatePositions, handleMove, handleEnd],
   );
 
-  useEffect(() => {
-    const dims = dimensionsRef.current;
-    const newXPos = valueToPosition(xValue, dims.x - 1, xValueRangeRef.current);
-    const newYPos = valueToPosition(yValue, dims.y - 1, yValueRangeRef.current);
-
-    if (newXPos === newXPos) setXPosition(newXPos);
-    if (newYPos === newYPos) setYPosition(newYPos);
-  }, [xValue, yValue, setXPosition, setYPosition]);
-
   useEffect(() => {
     const currentRef = crosshairRef.current;
     if (currentRef) {

src/hooks/slider.tsx

@@ -57,7 +57,7 @@ export function useSlider({
 
   // Internal position management
   const [position, setPosition] = useState(0);
-  const positionRef = useRef(0);
+  const positionRef = useRef(position);
 
   useEffect(() => {
     directionRef.current = direction;
@@ -68,8 +68,11 @@ export function useSlider({
       dimensions.x,
       dimensions.y,
     );
+  }, [direction, origin, dimensions]);
+
+  useEffect(() => {
     valueRangeRef.current = valueRange;
-  }, [direction, origin, dimensions, valueRangeRef]);
+  }, [valueRangeRef]);
 
   useEffect(() => {
     setValueRef.current = setValue;

src/hooks/tests/crosshairTest.cy.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 
 import type { CartesianSpace } from "@/types";
+import { valueToPosition } from "@/util";
 
 import { useCrosshair } from "../crosshair";
 
@@ -9,20 +10,16 @@ import { useCrosshair } from "../crosshair";
 function TestSquare() {
   const [origin, setOrigin] = useState<CartesianSpace>({ x: 0, y: 0 });
   const [dimensions, setDimensions] = useState<CartesianSpace>({ x: 0, y: 0 });
-  const [xPosition, setXPosition] = useState(0);
-  const [yPosition, setYPosition] = useState(0);
   const [xValue, setXValue] = useState(0);
   const [yValue, setYValue] = useState(0);
   const xValueRange = { min: 0, max: 100 };
   const yValueRange = { min: 0, max: 100 };
+  const [xPosition, setXPosition] = useState(0);
+  const [yPosition, setYPosition] = useState(0);
 
   const { crosshairRef, isDragging } = useCrosshair({
     origin,
     dimensions,
-    setXPosition,
-    setYPosition,
-    xValue,
-    yValue,
     setXValue,
     setYValue,
     xValueRange,
@@ -44,6 +41,13 @@ function TestSquare() {
     }
   }, []);
 
+  useEffect(() => {
+    const newXPos = valueToPosition(xValue, dimensions.x - 1, xValueRange);
+    const newYPos = valueToPosition(yValue, dimensions.y - 1, yValueRange);
+    setXPosition(newXPos);
+    setYPosition(newYPos);
+  }, [xValue, yValue]);
+
   return (
     <>
       <div

src/hooks/tests/sliderTest.cy.tsx

@@ -16,7 +16,7 @@ function TestSlider({
   const [origin, setOrigin] = useState<CartesianSpace>({ x: 0, y: 0 });
   const [dimensions, setDimensions] = useState<CartesianSpace>({ x: 0, y: 0 });
   const [value, setValue] = useState(0);
-  const position = useRef(0);
+  const [position, setPosition] = useState(0);
   const valueRange = { min: 0, max: 100 };
   const { sliderRef, isDragging } = useSlider({
     direction,
@@ -46,9 +46,7 @@ function TestSlider({
     const maxValue =
       direction == Direction.HORIZONTAL ? dimensions.x : dimensions.y;
     if (maxValue > 0) {
-      const percentage = parseFloat(
+      const percentage = parseFloat(((position / maxValue) * 100).toFixed(3));
-        ((position.current / maxValue) * 100).toFixed(3),
-      );
       setValue(percentage);
     } else {
       setValue(0);
@@ -61,7 +59,8 @@ function TestSlider({
       dimensions.x,
       dimensions.y,
     );
-    position.current = valueToPosition(value, maxPosition, valueRange);
+    const newPosition = valueToPosition(value, maxPosition, valueRange);
+    setPosition(newPosition);
   }, [value, direction, dimensions, valueRange]);
 
   const isHorizontal = direction === Direction.HORIZONTAL;
@@ -98,8 +97,8 @@ function TestSlider({
           style={{
             position: "absolute",
             ...(isHorizontal
-              ? { left: position.current, top: 0 }
+              ? { left: position, top: 0 }
-              : { left: 0, top: position.current }),
+              : { left: 0, top: position }),
             width: 50,
             height: 50,
             background: "rgba(255,0,0,0.5)",
@@ -109,8 +108,7 @@ function TestSlider({
       </div>
       <p>
         Value: <span data-cy="value-display">{value}</span>
-        <br /> Position:{" "}
+        <br /> Position: <span data-cy="position-display">{position}</span>px
-        <span data-cy="position-display">{position.current}</span>px
       </p>
     </>
   );