hmmmm

app/routes/DragableBox.tsx

@@ -42,12 +42,15 @@ const DraggableBox = ({
       const maxX = parentRect.width - boxRect.width;
       const maxY = parentRect.height - boxRect.height;
 
-      setXPosition(Math.max(0, Math.min(relativeX, maxX)));
-      setYPosition(Math.max(0, Math.min(relativeY, maxY)));
+      let newX = (Math.max(0, Math.min(relativeX, maxX)));
+      let newY = (Math.max(0, Math.min(relativeY, maxY)));
+
+      setXPosition(newX);
+      setYPosition(newY);
       if (setter) {
         setter({
-          x: relativeX,
-          y: relativeY
+          x: newX,
+          y: newY
         })
       }
     };
@@ -78,7 +81,7 @@ const DraggableBox = ({
   return (
     <div
       ref={dragRef}
-      className={`absolute cursor-move bg-red-500 rounded-full w-4 h-4 text-white shadow-lg ${className}`}
+      className={`absolute cursor-pointer ${className}`}
       style={{
         transform: `translate(${xPosition}px, ${yPosition}px)`,
         userSelect: 'none',

app/routes/PhAngle.tsx

@@ -0,0 +1,5 @@
+import type { SVGProps } from 'react';
+
+export function PhAngle(props: SVGProps<SVGSVGElement>) {
+  return (<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256" {...props}><path fill="currentColor" d="M96 72a8 8 0 0 1 8-8a104.11 104.11 0 0 1 104 104a8 8 0 0 1-16 0a88.1 88.1 0 0 0-88-88a8 8 0 0 1-8-8m144 120H80V32a8 8 0 0 0-16 0v32H32a8 8 0 0 0 0 16h32v120a8 8 0 0 0 8 8h168a8 8 0 0 0 0-16"></path></svg>);
+}

app/routes/_index.tsx

@@ -1,7 +1,7 @@
-import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/cloudflare";
+import type { MetaFunction } from "@remix-run/cloudflare";
 import DragableBox from "./DragableBox";
-import { useEffect, useState } from "react";
-import { useLoaderData, useSearchParams } from "@remix-run/react";
+import { useEffect, useRef, useState } from "react";
+import { PhAngle } from "./PhAngle";
 
 export const meta: MetaFunction = () => {
   return [
@@ -11,7 +11,6 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Index() {
-  const [searchParams] = useSearchParams();
   const [selectorHeight, setSelectorHeight] = useState(0);
   const [selectorWidth, setSelectorWidth] = useState(0);
   const [selectorTop, setSelectorTop] = useState(0);
@@ -20,44 +19,59 @@ export default function Index() {
     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])
+
 
-  // Use useEffect to calculate dimensions and position
   useEffect(() => {
-    // Calculate width
     const width = Math.abs(secondDragable.x - firstDragable.x);
     setSelectorWidth(width);
-
-    // Calculate height
     const height = Math.abs(secondDragable.y - firstDragable.y);
     setSelectorHeight(height);
-
-    // Calculate top position (minimum of y coordinates)
     setSelectorTop(Math.min(firstDragable.y, secondDragable.y));
-
-    // Calculate left position (minimum of x coordinates)
     setSelectorLeft(Math.min(firstDragable.x, secondDragable.x));
   }, [firstDragable, secondDragable]);
 
   return (
     <div className="flex h-screen w-screen justify-center items-center">
-      <div className="relative w-1/3 h-1/3 border-black border">
-        <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} />
-        <DragableBox initialX={100} initialY={100} setter={setSecondDragable} />
+      <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>
+      {containerWidth} - {containerHeight}
     </div>
   );
 }