Function SatValBox

src/components/ui/ColorPicker.tsx:9–60

({ hsv, onChange })

}

export const SatValBox: React.FC<SatValBoxProps> = ({ hsv, onChange }) => {
    const boxRef = useRef<HTMLDivElement>(null);
    const [isDragging, setIsDragging] = useState(false);

    const handleMove = useCallback((e: MouseEvent) => {
        if (!boxRef.current) return;
        const rect = boxRef.current.getBoundingClientRect();
        const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
        const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));

        // x is saturation (0..100), y is value (100..0)
        onChange({ ...hsv, s: x * 100, v: (1 - y) * 100 });
    }, [hsv, onChange]);

    useEffect(() => {
        const up = () => setIsDragging(false);
        const move = (e: MouseEvent) => { if (isDragging) handleMove(e); };

        if (isDragging) {
            window.addEventListener('mouseup', up);
            window.addEventListener('mousemove', move);
        }

        return () => {
            window.removeEventListener('mouseup', up);
            window.removeEventListener('mousemove', move);
        };
    }, [isDragging, handleMove]);

    return (
        <div
            ref={boxRef}
            className="w-full h-32 relative cursor-crosshair border border-[var(--color-border)] mb-2"
            style={{
                backgroundColor: `hsl(${hsv.h}, 100%, 50%)`,
                backgroundImage: 'linear-gradient(to right, #fff, transparent), linear-gradient(to top, #000, transparent)'
            }}
            onMouseDown={(e) => {
                setIsDragging(true);
                handleMove(e.nativeEvent);
            }}
        >
            <div
                className="absolute w-3 h-3 border-2 border-black bg-white rounded-full -ml-1.5 -mt-1.5 shadow-sm pointer-events-none mix-blend-difference"
                style={{
                    left: `${hsv.s}%`,
                    top: `${100 - hsv.v}%`
                }}
            />
        </div>
    );
};

export interface HueSliderProps {
    hsv: { h: number, s: number, v: number };