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

import type { MetaFunction } from "@remix-run/cloudflare";
import DragableBox from "./DragableBox";
import { useEffect, useRef, useState } from "react";
import { PhAngle } from "./PhAngle";

export const meta: MetaFunction = () => {
  return [
    { title: "Convert images for the web!" },
    { name: "image converter", content: "Image conversion service" },
  ];
};

export default function Index() {
  const [selectorHeight, setSelectorHeight] = useState(0);
  const [selectorWidth, setSelectorWidth] = useState(0);
  const [selectorTop, setSelectorTop] = useState(0);
  const [selectorLeft, setSelectorLeft] = useState(0);
  const [firstDragable, setFirstDragable] = useState({
    x: 0,
    y: 0
  })
  const [containerWidth, setContainerWidth] = useState<number | null>(null)
  const [containerHeight, setContainerHeight] = useState<number | null>(null)
  const [secondDragable, setSecondDragable] = useState({
    x: 0,
    y: 0
  })
  const containerRef = useRef<HTMLDivElement>(null)

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


  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 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 initialX={0} initialY={0} setter={setFirstDragable}>
              <PhAngle />
            </DragableBox>
            <DragableBox initialX={containerWidth} initialY={containerHeight} setter={setSecondDragable} >
              <PhAngle />
            </DragableBox>
          </>
        )}
      </div>
      <div className="flex flex-col">
        <p>{containerWidth} - {containerHeight}</p>
        <p>firstDragable: {...Object.entries(firstDragable)}</p>
        <p>secondDragable: {...Object.entries(secondDragable)}</p>
      </div>
    </div>
  );
}