From ff646a0cff47b1bfd4aac2675168d51bc3b42664 Mon Sep 17 00:00:00 2001
From: christian <christian@rannes.dev>
Date: Sat, 2 Nov 2024 23:38:33 +0100
Subject: [PATCH] moved CropSelector to component

---
 app/routes/CropSelector.tsx | 73 +++++++++++++++++++++++++++++++++++++
 app/routes/_index.tsx       | 71 +-----------------------------------
 2 files changed, 75 insertions(+), 69 deletions(-)
 create mode 100644 app/routes/CropSelector.tsx

diff --git a/app/routes/CropSelector.tsx b/app/routes/CropSelector.tsx
new file mode 100644
index 0000000..2b7e16b
--- /dev/null
+++ b/app/routes/CropSelector.tsx
@@ -0,0 +1,73 @@
+import DragableBox from "./DragableBox";
+import { useEffect, useRef, useState } from "react";
+import { PhAngle } from "./PhAngle";
+
+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({
+    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>
+  );
+}
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index c65702d..03f2d87 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -1,7 +1,5 @@
 import type { MetaFunction } from "@remix-run/cloudflare";
-import DragableBox from "./DragableBox";
-import { useEffect, useRef, useState } from "react";
-import { PhAngle } from "./PhAngle";
+import CropSelector from "./CropSelector";
 
 export const meta: MetaFunction = () => {
   return [
@@ -11,71 +9,6 @@ export const meta: MetaFunction = () => {
 };
 
 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>
-  );
+    <CropSelector />);
 }