From 10cb24a06164a931bf673022da7c437395bb695e Mon Sep 17 00:00:00 2001
From: Timothy Cho <104095972+timothycho01@users.noreply.github.com>
Date: Sun, 18 May 2025 00:19:28 -0400
Subject: [PATCH 1/2] Update ImageItem.tsx - add crop rotation adjustment

---
 apps/web/src/components/ImageItem.tsx | 59 +++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/apps/web/src/components/ImageItem.tsx b/apps/web/src/components/ImageItem.tsx
index 003982a..69c326d 100644
--- a/apps/web/src/components/ImageItem.tsx
+++ b/apps/web/src/components/ImageItem.tsx
@@ -51,6 +51,26 @@ export function TbZoomIn(props: SVGProps<SVGSVGElement>) {
   );
 }
 
+export function TbRotate(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      strokeWidth="2"
+      stroke="currentColor"
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M19.95 11a8 8 0 1 0 -.5 4m.5 5v-5h-5" />
+    </svg>
+  );
+}
+
 const ImageItem = (
   {
     file,
@@ -73,11 +93,16 @@ const ImageItem = (
   const [scale, setScaleImpl] = useState(1);
   const [minScalePerc, setMinScalePerc] = useState(1);
   const [maxScalePerc, setMaxScalePerc] = useState(1);
+  const [rotation, setRotationImpl] = useState(0);
 
   const setScale = useCallback((value: number) => {
     setScaleImpl(parseFloat(value.toFixed(2)));
   }, []);
 
+  const setRotation = useCallback((value: number) => {
+    setRotationImpl(parseFloat(value.toFixed(1)));
+  }, []);
+
   return (
     <div
       className="card card-compact shadow-xl bg-base-100"
@@ -108,6 +133,7 @@ const ImageItem = (
             height={outputSize.height}
             border={0}
             scale={scale}
+            rotate={rotation}
             onLoadSuccess={(image) => {
               setMinScalePerc(
                 Math.ceil((Math.min(image.width, image.height) / Math.max(image.width, image.height)) * 100),
@@ -185,6 +211,39 @@ const ImageItem = (
             }}
           />
         </div>
+        <div className="flex items-center gap-2 mt-2">
+          <div className="text-lg">
+            <TbRotate />
+          </div>
+          <input
+            type="range"
+            min={-180}
+            max={180}
+            value={rotation}
+            className="range range-xs flex-1"
+            onChange={(e) => {
+              const rot = parseFloat(e.target.value);
+              if (isNaN(rot)) {
+                setRotation(0);
+              } else {
+                setRotation(rot);
+              }
+            }}
+          />
+          <input
+            type="text"
+            className="input input-xs text-right w-12"
+            value={rotation.toFixed(0) + '°'}
+            onChange={(e) => {
+              const rot = parseFloat(e.target.value.replace('°', ''));
+              if (isNaN(rot)) {
+                setRotation(0);
+              } else {
+                setRotation(rot);
+              }
+            }}
+          />
+        </div>
       </div>
     </div>
   );

From 790978c00a92ffb1db4cfff577737cb9c5c5f7e7 Mon Sep 17 00:00:00 2001
From: Timothy Cho <104095972+timothycho01@users.noreply.github.com>
Date: Sun, 18 May 2025 00:34:41 -0400
Subject: [PATCH 2/2] Update ImageItem.tsx - fix icon size

---
 apps/web/src/components/ImageItem.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/ImageItem.tsx b/apps/web/src/components/ImageItem.tsx
index 69c326d..76fb5e5 100644
--- a/apps/web/src/components/ImageItem.tsx
+++ b/apps/web/src/components/ImageItem.tsx
@@ -55,8 +55,8 @@ export function TbRotate(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width="1em"
+      height="1em"
       viewBox="0 0 24 24"
       strokeWidth="2"
       stroke="currentColor"