now with scaling

app/routes/CropSelector.tsx

@@ -1,6 +1,7 @@
 import DragableBox from "./DragableBox";
-import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { ChangeEvent, Suspense, useEffect, useRef, useState } from "react";
 import { PhAngle } from "./PhAngle";
+import { parse } from "postcss";
 
 type Coordinates = {
   x: number;
@@ -16,49 +17,92 @@ export default function CropSelector() {
     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 [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) {
+      if (!containerRef.current) return;
-        setContainerWidth(containerRef.current.offsetWidth);
+
-        setContainerHeight(containerRef.current.offsetHeight);
+      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();
-    window.addEventListener('resize', updateContainerSize);
+
-    return () => window.removeEventListener('resize', 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]: value,
+        [name]: valueInt,
-      }
+      }))
-      )
-      )
     }
     if (id === 'second') {
       setSecondDragable(prev => ({
         ...prev,
-        [name]: value,
+        [name]: valueInt,
-      }
+      }))
-      )
-      )
     }
   }
 
-
-
   useEffect(() => {
     const width = Math.abs(secondDragable.x - firstDragable.x);
     setSelectorWidth(width);
@@ -70,36 +114,36 @@ export default function CropSelector() {
 
   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">
+      <Suspense fallback={<p>Loading... </p>}>
-        {containerHeight !== null && containerWidth !== null && (
+        <div ref={containerRef} className="relative w-1/3 h-1/3 border-black border">
-          <>
+          <div
-            <div
+            className="border border-black absolute"
-              className="border border-black absolute"
+            style={{
-              style={{
+              top: `${selectorTop}px`,
-                top: `${selectorTop}px`,
+              left: `${selectorLeft}px`,
-                left: `${selectorLeft}px`,
+              height: `${selectorHeight}px`,
-                height: `${selectorHeight}px`,
+              width: `${selectorWidth}px`,
-                width: `${selectorWidth}px`,
+            }}
-              }}
+          />
-            />
+          <DragableBox position={firstDragable} coordSetter={setFirstDragable} >
-            <DragableBox position={firstDragable} coordSetter={setFirstDragable} >
+            <PhAngle />
-              <PhAngle />
+          </DragableBox>
-            </DragableBox>
+          <DragableBox position={secondDragable} coordSetter={setSecondDragable} >
-            <DragableBox position={secondDragable} coordSetter={setSecondDragable} >
+            <PhAngle />
-              <PhAngle />
+          </DragableBox>
-            </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" />
-      </div>
+        <input id="second" onChange={handleChange} value={secondDragable.x} name="x" type="number" />
-      <input id="first" onChange={handleChange} value={firstDragable.x} name="x" type="number" />
+        <input id="second" onChange={handleChange} value={secondDragable.y} name="y" type="number" />
-      <input id="first" onChange={handleChange} value={firstDragable.y} name="y" type="number" />
+        <div className="flex flex-col text-left">
-      <input id="second" onChange={handleChange} value={secondDragable.x} name="x" type="number" />
+          <p>{containerSize.width} - {containerSize.height}</p>
-      <input id="second" onChange={handleChange} value={secondDragable.y} name="y" type="number" />
+          <p>firstDragable: x: {firstDragable.x} y: {firstDragable.y}</p>
-      <div className="flex flex-col text-left">
+          <p>secondDragable: x: {secondDragable.x} y: {secondDragable.y}</p>
-        <p>{containerWidth} - {containerHeight}</p>
+          <p>Scale height: {scaleRatio.height}</p>
-        <p>firstDragable: x: {firstDragable.x.toFixed(2)} y: {firstDragable.y.toFixed(2)}</p>
+          <p>Scale width: {scaleRatio.width}</p>
-        <p>secondDragable: x: {secondDragable.x.toFixed(2)} y: {secondDragable.y.toFixed(2)}</p>
+        </div>
-      </div>
+      </Suspense>
     </div>
   );
 }

app/routes/DragableBox.tsx

@@ -1,5 +1,10 @@
 import { useState, useEffect, MouseEvent, useRef, Dispatch, SetStateAction } from 'react';
 
+// Todo
+// Have selector start at full width and height
+// dragable icons rotation
+// drag selector
+
 type Coordinates = {
   x: number;
   y: number;