Completed color picker, value editor, desktop layout.

src/hooks/color.ts

@@ -62,7 +62,7 @@ export function colorReducer(
   }
 }
 
-type Setter = (valOrCallback: SetterValueOrCallback<number>) => void;
+export type Setter = (valOrCallback: SetterValueOrCallback<number>) => void;
 
 export interface CommonColorActions {
   setColor: (color: colorlib.Color) => void;

src/hooks/crosshair.tsx

@@ -9,6 +9,8 @@ import {
   positionToValue,
 } from "@/util";
 
+import { useSmoothAnimation } from "./animation";
+
 if (typeof TouchEvent === "undefined") {
   // @ts-ignore - intentionally creating global
   window.TouchEvent = window.MouseEvent;
@@ -21,6 +23,8 @@ export function useCrosshair({
   setYValue,
   xValueRange,
   yValueRange,
+  invertX,
+  invertY,
 }: {
   origin: CartesianSpace;
   dimensions: CartesianSpace;
@@ -28,6 +32,8 @@ export function useCrosshair({
   setYValue: Setter<number>;
   xValueRange: Range;
   yValueRange: Range;
+  invertX?: boolean;
+  invertY?: boolean;
 }) {
   const [isDragging, setIsDragging] = useState(false);
   const crosshairRef = useRef<HTMLDivElement>(null);
@@ -42,6 +48,9 @@ export function useCrosshair({
   const xValueRangeRef = useRef(xValueRange);
   const yValueRangeRef = useRef(yValueRange);
 
+  // Hooks
+  const smoothAnimation = useSmoothAnimation();
+
   useEffect(() => {
     originRef.current = origin;
     dimensionsRef.current = dimensions;
@@ -55,13 +64,23 @@ export function useCrosshair({
   const calculatePositions = useCallback((event: MouseEvent | TouchEvent) => {
     const orig = originRef.current;
     const dims = dimensionsRef.current;
+    const xRange = xValueRangeRef.current;
+    const yRange = yValueRangeRef.current;
 
     const { clientX, clientY } = extractEventCoordinates(event);
 
     const xPos = minmax(clientX - orig.x, 0, dims.x - 1);
     const yPos = minmax(clientY - orig.y, 0, dims.y - 1);
-    const newXValue = positionToValue(xPos, dims.x - 1, xValueRangeRef.current);
-    const newYValue = positionToValue(yPos, dims.y - 1, yValueRangeRef.current);
+    let newXValue = positionToValue(xPos, dims.x - 1, xRange);
+    let newYValue = positionToValue(yPos, dims.y - 1, yRange);
+
+    if (invertX) {
+      newXValue = xRange.max - newXValue;
+    }
+
+    if (invertY) {
+      newYValue = yRange.max - newYValue;
+    }
 
     setXValueRef.current(newXValue);
     setYValueRef.current(newYValue);
@@ -70,7 +89,7 @@ export function useCrosshair({
   const handleMove = useCallback(
     (event: MouseEvent | TouchEvent) => {
       event.preventDefault();
-      calculatePositions(event);
+      smoothAnimation(() => calculatePositions(event));
     },
     [calculatePositions],
   );

src/hooks/slider.tsx

@@ -12,6 +12,7 @@ import {
   valueToPosition,
 } from "@/util";
 
+import { useSmoothAnimation } from "./animation";
 import { useScroll } from "./scroll";
 
 if (typeof TouchEvent === "undefined") {
@@ -34,6 +35,7 @@ export function useSlider({
   valueRange,
   value,
   setValue,
+  invert = false,
 }: {
   direction: Direction;
   origin: CartesianSpace;
@@ -41,6 +43,7 @@ export function useSlider({
   valueRange: Range;
   value: number;
   setValue: Setter<number>;
+  invert?: boolean;
 }) {
   const [isDragging, setIsDragging] = useState(false);
   const sliderRef = useRef<HTMLDivElement>(null);
@@ -59,6 +62,9 @@ export function useSlider({
   const [position, setPosition] = useState(0);
   const positionRef = useRef(position);
 
+  // Hooks
+  const smoothAnimation = useSmoothAnimation();
+
   useEffect(() => {
     directionRef.current = direction;
     originRef.current = origin;
@@ -68,6 +74,11 @@ export function useSlider({
       dimensions.x,
       dimensions.y,
     );
+    positionRef.current = valueToPosition(
+      value,
+      maxPosition.current,
+      valueRangeRef.current,
+    );
   }, [direction, origin, dimensions]);
 
   useEffect(() => {
@@ -94,19 +105,23 @@ export function useSlider({
       0,
       chooseValueByDirection(dir, dims.x, dims.y),
     );
-    const newValue = positionToValue(
+    let newValue = positionToValue(
       newPosition,
       maxPosition.current,
       valueRangeRef.current,
     );
 
+    if (invert) {
+      newValue = valueRangeRef.current.max - newValue;
+    }
+
     setValueRef.current(newValue);
   }, []);
 
   const handleMove = useCallback(
     (event: MouseEvent | TouchEvent) => {
       event.preventDefault();
-      calculatePosition(event);
+      smoothAnimation(() => calculatePosition(event));
     },
     [calculatePosition],
   );
@@ -154,6 +169,7 @@ export function useSlider({
       maxPosition.current,
       valueRangeRef.current,
     );
+
     setValueRef.current(newValue);
   }, []);