state now belongs to CropSelector

app/routes/CropSelector.tsx

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

app/routes/DragableBox.tsx

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