image-converter-client/app/routes/CropSelector.tsx

import DragableBox from "./DragableBox";
import { ChangeEvent, Suspense, useEffect, useRef, useState } from "react";
import { PhAngle } from "./PhAngle";
import { parse } from "postcss";

type Coordinates = {
  x: number;
  y: number;
}

export default function CropSelector() {
  const [selectorHeight, setSelectorHeight] = useState(0);
  const [selectorWidth, setSelectorWidth] = useState(0);
  const [selectorTop, setSelectorTop] = useState(0);
  const [selectorLeft, setSelectorLeft] = useState(0);
  const [firstDragable, setFirstDragable] = useState<Coordinates>({
    x: 0,
    y: 0
  })
  const [secondDragable, setSecondDragable] = useState<Coordinates>({
    x: 0,
    y: 0
  })
  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
  const [scaleRatio, setScaleRatio] = useState({ width: 1, height: 1 });
  const containerRef = useRef<HTMLDivElement>(null)

  const prevSize = useRef({ width: 0, height: 0 });

  // Helper function to round pixel values
  const roundPixel = (value: number) => Math.round(value);

  useEffect(() => {
    const updateContainerSize = () => {
      if (!containerRef.current) return;

      const newWidth = roundPixel(containerRef.current.offsetWidth);
      const newHeight = roundPixel(containerRef.current.offsetHeight);

      // Only calculate ratios if we have previous sizes
      if (prevSize.current.width && prevSize.current.height) {
        const widthRatio = newWidth / prevSize.current.width;
        const heightRatio = newHeight / prevSize.current.height;

        setScaleRatio({ width: widthRatio, height: heightRatio });

        // Update dragable positions with new ratios and round the results
        setFirstDragable(prev => ({
          x: roundPixel(prev.x * widthRatio),
          y: roundPixel(prev.y * heightRatio)
        }));
        setSecondDragable(prev => ({
          x: roundPixel(prev.x * widthRatio),
          y: roundPixel(prev.y * heightRatio)
        }));
      }

      // Update container size and store as previous for next resize
      setContainerSize({ width: newWidth, height: newHeight });
      prevSize.current = { width: newWidth, height: newHeight };
    };

    // Initial size setup
    updateContainerSize();

    // Add resize listener with debounce to prevent too frequent updates
    let resizeTimeout: any;
    const handleResize = () => {
      clearTimeout(resizeTimeout);
      resizeTimeout = setTimeout(updateContainerSize, 16); // roughly 60fps
    };

    window.addEventListener('resize', handleResize);

    // Cleanup
    return () => {
      window.removeEventListener('resize', handleResize);
      clearTimeout(resizeTimeout);
    };
  }, []); // Empty dependency array since we're using refs

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    event.preventDefault()
    const { value, name, id } = event.target
    let valueInt = parseInt(value)
    if (name === 'x' && containerSize.width !== null && valueInt > containerSize.width) {
      valueInt = containerSize.width
    }
    if (name === 'y' && containerSize.height !== null && valueInt > containerSize.height) {
      valueInt = containerSize.height
    }
    if (id === 'first') {
      setFirstDragable(prev => ({
        ...prev,
        [name]: valueInt,
      }))
    }
    if (id === 'second') {
      setSecondDragable(prev => ({
        ...prev,
        [name]: valueInt,
      }))
    }
  }

  useEffect(() => {
    const width = Math.abs(secondDragable.x - firstDragable.x);
    setSelectorWidth(width);
    const height = Math.abs(secondDragable.y - firstDragable.y);
    setSelectorHeight(height);
    setSelectorTop(Math.min(firstDragable.y, secondDragable.y));
    setSelectorLeft(Math.min(firstDragable.x, secondDragable.x));
  }, [firstDragable, secondDragable]);

  return (
    <div className="flex flex-col h-screen w-screen justify-center items-center">
      <Suspense fallback={<p>Loading... </p>}>
        <div ref={containerRef} className="relative w-1/3 h-1/3 border-black border">
          <div
            className="border border-black absolute"
            style={{
              top: `${selectorTop}px`,
              left: `${selectorLeft}px`,
              height: `${selectorHeight}px`,
              width: `${selectorWidth}px`,
            }}
          />
          <DragableBox position={firstDragable} coordSetter={setFirstDragable} >
            <PhAngle />
          </DragableBox>
          <DragableBox position={secondDragable} coordSetter={setSecondDragable} >
            <PhAngle />
          </DragableBox>
        </div>
        <input min={0} max={300} id="first" onChange={handleChange} value={firstDragable.x} name="x" type="number" />
        <input id="first" onChange={handleChange} value={firstDragable.y} name="y" type="number" />
        <input id="second" onChange={handleChange} value={secondDragable.x} name="x" type="number" />
        <input id="second" onChange={handleChange} value={secondDragable.y} name="y" type="number" />
        <div className="flex flex-col text-left">
          <p>{containerSize.width} - {containerSize.height}</p>
          <p>firstDragable: x: {firstDragable.x} y: {firstDragable.y}</p>
          <p>secondDragable: x: {secondDragable.x} y: {secondDragable.y}</p>
          <p>Scale height: {scaleRatio.height}</p>
          <p>Scale width: {scaleRatio.width}</p>
        </div>
      </Suspense>
    </div>
  );
}