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

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

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 [containerWidth, setContainerWidth] = useState<number | null>(null)
  const [containerHeight, setContainerHeight] = useState<number | null>(null)
  const [secondDragable, setSecondDragable] = useState<Coordinates>({
    x: 0,
    y: 0
  })
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const updateContainerSize = () => {
      if (containerRef.current) {
        setContainerWidth(containerRef.current.offsetWidth);
        setContainerHeight(containerRef.current.offsetHeight);
      }
    }
    updateContainerSize();
    window.addEventListener('resize', updateContainerSize);
    return () => window.removeEventListener('resize', updateContainerSize);
  }, [])

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    event.preventDefault()
    const { value, name, id } = event.target
    if (id === 'first') {
      setFirstDragable(prev => ({
        ...prev,
        [name]: value,
      }
      )
      )
    }
    if (id === 'second') {
      setSecondDragable(prev => ({
        ...prev,
        [name]: value,
      }
      )
      )
    }
  }



  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">
      <div ref={containerRef} className="relative w-1/3 h-1/3 border-black border">
        {containerHeight !== null && containerWidth !== null && (
          <>
            <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 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>{containerWidth} - {containerHeight}</p>
        <p>firstDragable: x: {firstDragable.x.toFixed(2)} y: {firstDragable.y.toFixed(2)}</p>
        <p>secondDragable: x: {secondDragable.x.toFixed(2)} y: {secondDragable.y.toFixed(2)}</p>
      </div>
    </div>
  );
}