app/routes/CropSelector.tsx

@@ -1,24 +1,19 @@
 import DragableBox from "./DragableBox";
-import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { 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>({
+  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<Coordinates>({
+  const [secondDragable, setSecondDragable] = useState({
     x: 0,
     y: 0
   })
@@ -36,28 +31,6 @@ export default function CropSelector() {
     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);
@@ -82,19 +55,15 @@ export default function CropSelector() {
                 width: `${selectorWidth}px`,
               }}
             />
-            <DragableBox position={firstDragable} coordSetter={setFirstDragable} >
+            <DragableBox initialX={0} initialY={0} setter={setFirstDragable}>
               <PhAngle />
             </DragableBox>
-            <DragableBox position={secondDragable} coordSetter={setSecondDragable} >
+            <DragableBox initialX={containerWidth} initialY={containerHeight} setter={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>

app/routes/DragableBox.tsx

@@ -6,20 +6,24 @@ type Coordinates = {
 }
 
 interface DraggableBoxProps {
-  position: Coordinates;
+  initialX: number;
+  initialY: number;
   className?: string;
   children?: React.ReactNode;
-  coordSetter: Dispatch<SetStateAction<Coordinates>>;
+  setter?: Dispatch<SetStateAction<Coordinates>>;
 }
 
 const DraggableBox = ({
-  position,
+  initialX,
+  initialY,
   className = "",
   children = "",
-  coordSetter
+  setter
 }: DraggableBoxProps) => {
   const [isDragging, setIsDragging] = useState(false);
   const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+  const [xPosition, setXPosition] = useState(initialX)
+  const [yPosition, setYPosition] = useState(initialY)
   const dragRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -40,10 +44,14 @@ const DraggableBox = ({
       let newX = (Math.max(0, Math.min(relativeX, maxX)));
       let newY = (Math.max(0, Math.min(relativeY, maxY)));
 
-      coordSetter({
+      setXPosition(newX);
-        x: newX,
+      setYPosition(newY);
-        y: newY
+      if (setter) {
-      })
+        setter({
+          x: newX,
+          y: newY
+        })
+      }
     };
 
     const handleMouseUp = () => setIsDragging(false);
@@ -55,7 +63,7 @@ const DraggableBox = ({
       window.removeEventListener('mousemove', handleMouseMove);
       window.removeEventListener('mouseup', handleMouseUp);
     };
-  }, [isDragging, dragOffset, position.x, position.y]);
+  }, [isDragging, dragOffset, xPosition, yPosition, initialX, initialY]);
 
   const handleMouseDown = (e: MouseEvent) => {
     if (!dragRef.current?.parentElement) return;
@@ -63,8 +71,8 @@ const DraggableBox = ({
     const parentRect = dragRef.current.parentElement.getBoundingClientRect();
 
     setDragOffset({
-      x: e.clientX - parentRect.left - position.x,
+      x: e.clientX - parentRect.left - xPosition,
-      y: e.clientY - parentRect.top - position.y
+      y: e.clientY - parentRect.top - yPosition
     });
     setIsDragging(true);
   };
@@ -74,7 +82,7 @@ const DraggableBox = ({
       ref={dragRef}
       className={`absolute cursor-pointer ${className}`}
       style={{
-        transform: `translate(${position.x}px, ${position.y}px)`,
+        transform: `translate(${xPosition}px, ${yPosition}px)`,
         userSelect: 'none',
       }}
       onMouseDown={handleMouseDown}

app/tailwind.css

@@ -2,11 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
-/*html,*/
+html,
-/*body {*/
+body {
-/*  @apply bg-white dark:bg-gray-950;*/
+  @apply bg-white dark:bg-gray-950;
-/**/
+
-/*  @media (prefers-color-scheme: dark) {*/
+  @media (prefers-color-scheme: dark) {
-/*    color-scheme: dark;*/
+    color-scheme: dark;
-/*  }*/
+  }
-/*}*/
+}