From 3515eeb1b78e4856b24c23afad844b399cd6293d Mon Sep 17 00:00:00 2001
From: Eduardo Giacometti De Patta <eduardo.depatta@gmail.com>
Date: Fri, 27 Sep 2024 13:46:36 -0300
Subject: [PATCH 1/8] feat: create CropOverlay component

---
 components/ds/CropOverlayComponent.tsx | 36 ++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 components/ds/CropOverlayComponent.tsx

diff --git a/components/ds/CropOverlayComponent.tsx b/components/ds/CropOverlayComponent.tsx
new file mode 100644
index 0000000..57c5ba9
--- /dev/null
+++ b/components/ds/CropOverlayComponent.tsx
@@ -0,0 +1,36 @@
+"use client";
+import { FollowingTooltipComponent } from "./FollowingTooltipComponent";
+
+interface CropOverlayProps {
+  isCropping: boolean;
+  cropRect: { x: number; y: number; width: number; height: number } | null;
+  mousePosition: { x: number; y: number };
+}
+
+const CropOverlayComponent: React.FC<CropOverlayProps> = ({
+  isCropping,
+  cropRect,
+  mousePosition,
+}) => {
+  if (!isCropping || !cropRect) return null;
+
+  const left = Math.min(cropRect.x, cropRect.x + cropRect.width);
+  const top = Math.min(cropRect.y, cropRect.y + cropRect.height);
+  const width = Math.abs(cropRect.width);
+  const height = Math.abs(cropRect.height);
+
+  return (
+    <>
+      <div
+        className="absolute border-2 border-dashed border-black bg-white bg-opacity-30 pointer-events-none"
+        style={{ left, top, width, height }}
+      ></div>
+      <FollowingTooltipComponent
+        message="Double-click inside the overlay to accept"
+        position={mousePosition}
+      />
+    </>
+  );
+};
+
+export { CropOverlayComponent };

From c8e9924432416a75fbb5c52c25766d17d654d17f Mon Sep 17 00:00:00 2001
From: Eduardo Giacometti De Patta <eduardo.depatta@gmail.com>
Date: Fri, 27 Sep 2024 13:51:00 -0300
Subject: [PATCH 2/8] refactor: make divider component generic with margin
 props

---
 components/ds/DividerComponent.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 components/ds/DividerComponent.tsx

diff --git a/components/ds/DividerComponent.tsx b/components/ds/DividerComponent.tsx
new file mode 100644
index 0000000..35a4bde
--- /dev/null
+++ b/components/ds/DividerComponent.tsx
@@ -0,0 +1,16 @@
+"use client";
+interface DividerProps {
+  margin?: 'small' | 'medium' | 'large';
+}
+
+const DividerComponent: React.FC<DividerProps> = ({ margin = 'small' }) => {
+  const marginClasses = {
+    small: 'my-2',
+    medium: 'my-6',
+    large: 'my-8',
+  };
+
+  return <div className={`bg-border h-[1px] ${marginClasses[margin]}`}></div>;
+};
+
+export { DividerComponent };

From 91f0ad0889c654ed16a5ee308dae9997b8062127 Mon Sep 17 00:00:00 2001
From: Eduardo Giacometti De Patta <eduardo.depatta@gmail.com>
Date: Fri, 27 Sep 2024 13:51:43 -0300
Subject: [PATCH 3/8] feat: create followingTooltip component

---
 components/ds/FollowingTooltipComponent.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 components/ds/FollowingTooltipComponent.tsx

diff --git a/components/ds/FollowingTooltipComponent.tsx b/components/ds/FollowingTooltipComponent.tsx
new file mode 100644
index 0000000..f11cad4
--- /dev/null
+++ b/components/ds/FollowingTooltipComponent.tsx
@@ -0,0 +1,21 @@
+"use client";
+interface TooltipProps {
+  message: string;
+  position: { x: number; y: number };
+}
+
+const FollowingTooltipComponent: React.FC<TooltipProps> = ({
+  message,
+  position,
+}) => {
+  return (
+    <div
+      className="fixed px-2 py-1 bg-gray-800 text-white text-xs rounded shadow-lg"
+      style={{ left: position.x + 10, top: position.y - 30 }}
+    >
+      {message}
+    </div>
+  );
+};
+
+export { FollowingTooltipComponent };

From 0601494e487410c50ce51f0fcc7e2b6f52a526c7 Mon Sep 17 00:00:00 2001
From: Eduardo Giacometti De Patta <eduardo.depatta@gmail.com>
Date: Fri, 27 Sep 2024 13:52:21 -0300
Subject: [PATCH 4/8] test: add missing tests

---
 components/utils/resize-image.utils.test.ts | 77 +++++++++++++++++++--
 1 file changed, 73 insertions(+), 4 deletions(-)

diff --git a/components/utils/resize-image.utils.test.ts b/components/utils/resize-image.utils.test.ts
index b200d2f..6bfde58 100644
--- a/components/utils/resize-image.utils.test.ts
+++ b/components/utils/resize-image.utils.test.ts
@@ -1,5 +1,7 @@
 import {
+  calculateCropDimensions,
   handleResizeImage,
+  isPointInCropRect,
   processImageFile,
   resizeImage,
   updateHeight,
@@ -97,7 +99,7 @@ describe("Image Processing Functions", () => {
     const setOutput = jest.fn();
 
     processImageFile({
-      file: mockFile,
+      source: mockFile,
       format: "jpeg",
       preserveAspectRatio: true,
       quality: 0.8,
@@ -121,7 +123,7 @@ describe("Image Processing Functions", () => {
     });
     const setWidth = jest.fn();
 
-    updateWidth({ file: mockFile, height: 200, setWidth });
+    updateWidth({ source: mockFile, height: 200, setWidth });
 
     setTimeout(() => {
       expect(setWidth).toHaveBeenCalledWith(400);
@@ -135,7 +137,7 @@ describe("Image Processing Functions", () => {
     });
     const setHeight = jest.fn();
 
-    updateHeight({ file: mockFile, width: 300, setHeight });
+    updateHeight({ source: mockFile, width: 300, setHeight });
 
     setTimeout(() => {
       expect(setHeight).toHaveBeenCalledWith(150);
@@ -150,7 +152,7 @@ describe("Image Processing Functions", () => {
     const setOutput = jest.fn();
 
     handleResizeImage({
-      file: mockFile,
+      source: mockFile,
       format: "jpeg",
       height: 400,
       width: 600,
@@ -166,4 +168,71 @@ describe("Image Processing Functions", () => {
       done();
     }, 0);
   });
+
+  it("should calculate the crop dimensions correctly", () => {
+    const imgMock = {
+      width: 1000,
+      height: 500,
+    } as HTMLImageElement;
+
+    const currentImageRefMock = {
+      clientWidth: 500,
+      clientHeight: 250,
+    } as HTMLImageElement;
+
+    const cropRect = { x: 50, y: 50, width: 100, height: 50 };
+
+    const result = calculateCropDimensions(imgMock, currentImageRefMock, cropRect);
+
+    expect(result).toEqual({
+      x: 100,
+      y: 100,
+      width: 200,
+      height: 100,
+    });
+  });
+
+  it("should handle negative width and height values in cropRect", () => {
+    const imgMock = {
+      width: 1000,
+      height: 500,
+    } as HTMLImageElement;
+  
+    const currentImageRefMock = {
+      clientWidth: 500,
+      clientHeight: 250,
+    } as HTMLImageElement;
+  
+    const cropRect = { x: 150, y: 150, width: -100, height: -50 };
+  
+    const result = calculateCropDimensions(imgMock, currentImageRefMock, cropRect);
+  
+    expect(result).toEqual({
+      x: 100,
+      y: 200,
+      width: 200,
+      height: 100,
+    });
+  });
+
+  const cropRect = { x: 50, y: 50, width: 100, height: 50 };
+
+  it("should return true for a point inside the crop rectangle", () => {
+    const result = isPointInCropRect(75, 75, cropRect);
+    expect(result).toBe(true);
+  });
+
+  it("should return false for a point outside the crop rectangle", () => {
+    const result = isPointInCropRect(200, 200, cropRect);
+    expect(result).toBe(false);
+  });
+
+  it("should handle negative width and height in crop rectangle", () => {
+    const cropRectNegative = { x: 150, y: 150, width: -100, height: -50 };
+    const result = isPointInCropRect(75, 75, cropRectNegative);
+    expect(result).toBe(false);
+
+    const resultInside = isPointInCropRect(125, 125, cropRectNegative);
+    expect(resultInside).toBe(true);
+  });
 });

From b61fd976ab212e8e1c89b87977e574247ca5c5d4 Mon Sep 17 00:00:00 2001
From: Eduardo Giacometti De Patta <eduardo.depatta@gmail.com>
Date: Fri, 27 Sep 2024 13:52:45 -0300
Subject: [PATCH 5/8] feat: add functions to calculate crop dimensions

---
 components/utils/resize-image.utils.ts | 207 +++++++++++++++++--------
 1 file changed, 143 insertions(+), 64 deletions(-)

diff --git a/components/utils/resize-image.utils.ts b/components/utils/resize-image.utils.ts
index d7809eb..b333d2d 100644
--- a/components/utils/resize-image.utils.ts
+++ b/components/utils/resize-image.utils.ts
@@ -72,7 +72,7 @@ export function resizeImage({
 }
 
 interface ProcessImageFileOptions {
-  file: File;
+  source: File;
   setWidth: (width: number) => void;
   setHeight: (height: number) => void;
   setOutput: (output: string) => void;
@@ -83,7 +83,7 @@ interface ProcessImageFileOptions {
 }
 
 export const processImageFile = ({
-  file,
+  source,
   format,
   preserveAspectRatio,
   quality,
@@ -92,73 +92,104 @@ export const processImageFile = ({
   setWidth,
   done,
 }: ProcessImageFileOptions) => {
-  const reader = new FileReader();
-  reader.onload = (e) => {
-    const img = new Image();
-    img.src = e.target?.result as string;
-    img.onload = () => {
-      setWidth(img.width);
-      setHeight(img.height);
-      resizeImage({
-        img,
-        width: img.width,
-        height: img.height,
-        format,
-        quality,
-        preserveAspectRatio,
-      })
-        .then(setOutput)
-        .catch((error) => console.error(error))
-        .finally(() => {
-          if (done) {
-            done();
-          }
-        });
-    };
+  const img = new Image();
+  const handleLoad = () => {
+    setWidth(img.width);
+    setHeight(img.height);
+    resizeImage({
+      img,
+      width: img.width,
+      height: img.height,
+      format,
+      quality,
+      preserveAspectRatio,
+    })
+      .then(setOutput)
+      .catch((error) => console.error(error))
+      .finally(() => {
+        if (done) {
+          done();
+        }
+      });
   };
-  reader.readAsDataURL(file);
+
+  if (typeof source === "string") {
+    img.src = source;
+    img.onload = handleLoad;
+  } else {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      img.src = e.target?.result as string;
+      img.onload = handleLoad;
+    };
+    reader.readAsDataURL(source);
+  }
 };
 
 interface UpdateWidthOptions {
   height: number;
-  file: File;
+  source: File | string;
   setWidth: (width: number) => void;
 }
 
-export const updateWidth = ({ file, height, setWidth }: UpdateWidthOptions) => {
+export const updateWidth = ({
+  source,
+  height,
+  setWidth,
+}: UpdateWidthOptions) => {
   const img = new Image();
-  const reader = new FileReader();
-  reader.onload = (e) => {
-    img.src = e.target?.result as string;
-    img.onload = () => {
-      const newWidth = Math.round(height * (img.width / img.height));
-      setWidth(newWidth);
-    };
+
+  const handleLoad = () => {
+    const newWidth = Math.round(height * (img.width / img.height));
+    setWidth(newWidth);
   };
-  reader.readAsDataURL(file);
+
+  if (typeof source === "string") {
+    img.src = source;
+    img.onload = handleLoad;
+  } else {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      img.src = e.target?.result as string;
+      img.onload = handleLoad;
+    };
+    reader.readAsDataURL(source);
+  }
 };
 
-interface UpdateWidthOption {
+interface UpdateHeightOptions {
   width: number;
-  file: File;
+  source: File | string;
   setHeight: (height: number) => void;
 }
 
-export const updateHeight = ({ file, setHeight, width }: UpdateWidthOption) => {
+export const updateHeight = ({
+  source,
+  setHeight,
+  width,
+}: UpdateHeightOptions) => {
   const img = new Image();
-  const reader = new FileReader();
-  reader.onload = (e) => {
-    img.src = e.target?.result as string;
-    img.onload = () => {
-      const newHeight = Math.round(width / (img.width / img.height));
-      setHeight(newHeight);
-    };
+
+  const handleLoad = () => {
+    const newHeight = Math.round(width / (img.width / img.height));
+    setHeight(newHeight);
   };
-  reader.readAsDataURL(file);
+
+  if (typeof source === "string") {
+    img.src = source;
+    img.onload = handleLoad;
+  } else {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      img.src = e.target?.result as string;
+      img.onload = handleLoad;
+    };
+    reader.readAsDataURL(source);
+  }
 };
 
 interface HandleResizeImage {
-  file: File;
+  source: File | string;
   width: number | undefined;
   height: number | undefined;
   format: Format;
@@ -168,7 +199,7 @@ interface HandleResizeImage {
 }
 
 export const handleResizeImage = ({
-  file,
+  source,
   format,
   height,
   preserveAspectRatio,
@@ -176,20 +207,68 @@ export const handleResizeImage = ({
   setOutput,
   width,
 }: HandleResizeImage) => {
-  const reader = new FileReader();
-  reader.onload = (e) => {
-    const img = new Image();
-    img.src = e.target?.result as string;
-    img.onload = () => {
-      resizeImage({
-        img,
-        width,
-        height,
-        format,
-        quality,
-        preserveAspectRatio,
-      }).then(setOutput);
-    };
+  const img = new Image();
+  const handleLoad = () => {
+    resizeImage({
+      img,
+      width,
+      height,
+      format,
+      quality,
+      preserveAspectRatio,
+    }).then(setOutput);
   };
-  reader.readAsDataURL(file);
+
+  if (typeof source === "string") {
+    img.src = source;
+    img.onload = handleLoad;
+  } else {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      img.src = e.target?.result as string;
+      img.onload = handleLoad;
+    };
+    reader.readAsDataURL(source);
+  }
 };
+
+interface CropDimensions {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export function calculateCropDimensions(
+  img: HTMLImageElement,
+  currentImageRef: HTMLImageElement,
+  cropRect: { x: number; y: number; width: number; height: number }
+): CropDimensions {
+  const scaleX = img.width / currentImageRef.clientWidth;
+  const scaleY = img.height / currentImageRef.clientHeight;
+
+  const x = Math.min(cropRect.x, cropRect.x + cropRect.width) * scaleX;
+  const y = Math.min(cropRect.y, cropRect.y + cropRect.height) * scaleY; 
+  const width = Math.abs(cropRect.width) * scaleX;
+  const height = Math.abs(cropRect.height) * scaleY;
+
+  return { x, y, width, height };
+}
+interface CropRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export function isPointInCropRect(
+  x: number,
+  y: number,
+  cropRect: CropRect
+): boolean {
+  const rectLeft = Math.min(cropRect.x, cropRect.x + cropRect.width);
+  const rectTop = Math.min(cropRect.y, cropRect.y + cropRect.height);
+  const rectRight = rectLeft + Math.abs(cropRect.width);
+  const rectBottom = rectTop + Math.abs(cropRect.height);
+  return x >= rectLeft && x <= rectRight && y >= rectTop && y <= rectBottom;
+}

From 872167249439033400c8b31308a7b7b7fd087f5d Mon Sep 17 00:00:00 2001
From: Eduardo Giacometti De Patta <eduardo.depatta@gmail.com>
Date: Fri, 27 Sep 2024 13:54:15 -0300
Subject: [PATCH 6/8] refactor: update components to use generic divider
 component

---
 pages/utilities/hex-to-rgb.tsx      |  9 +++------
 pages/utilities/image-to-base64.tsx | 10 ++++------
 pages/utilities/jwt-parser.tsx      | 11 ++++-------
 pages/utilities/regex-tester.tsx    |  7 ++-----
 4 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/pages/utilities/hex-to-rgb.tsx b/pages/utilities/hex-to-rgb.tsx
index 4b998f2..3e1d8fc 100644
--- a/pages/utilities/hex-to-rgb.tsx
+++ b/pages/utilities/hex-to-rgb.tsx
@@ -21,6 +21,7 @@ import CallToActionGrid from "@/components/CallToActionGrid";
 import Meta from "@/components/Meta";
 import { cn } from "@/lib/utils";
 import RgbToHexSEO from "@/components/seo/RgbToHexSEO";
+import { DividerComponent } from "../../components/ds/DividerComponent";
 
 const DEFAULT_RGB: RGBValues = { r: "0", g: "0", b: "0" };
 
@@ -123,7 +124,7 @@ export default function HEXtoRGB(props: HEXtoRGBProps) {
                 </div>
               </div>
 
-              <Divider />
+              <DividerComponent margin="large" />
 
               <div className="grid grid-cols-3 gap-4">
                 {(["r", "g", "b"] as (keyof RGBValues)[]).map((colorKey) => {
@@ -154,7 +155,7 @@ export default function HEXtoRGB(props: HEXtoRGBProps) {
               </div>
             </div>
 
-            <Divider />
+            <DividerComponent margin="large" />
 
             <CodeSnippetRow
               label="CSS"
@@ -188,7 +189,3 @@ export default function HEXtoRGB(props: HEXtoRGBProps) {
     </main>
   );
 }
-
-const Divider = () => {
-  return <div className="h-[1px] bg-muted my-8"></div>;
-};
diff --git a/pages/utilities/image-to-base64.tsx b/pages/utilities/image-to-base64.tsx
index 12f25f1..67b65e6 100644
--- a/pages/utilities/image-to-base64.tsx
+++ b/pages/utilities/image-to-base64.tsx
@@ -11,6 +11,7 @@ import CallToActionGrid from "@/components/CallToActionGrid";
 import Meta from "@/components/Meta";
 import { ImageUploadComponent } from "@/components/ds/ImageUploadComponent";
 import ImageToBase64SEO from "@/components/seo/ImageToBase64SEO";
+import { DividerComponent } from "../../components/ds/DividerComponent";
 
 export default function ImageToBase64() {
   const [base64, setBase64] = useState("");
@@ -63,7 +64,8 @@ export default function ImageToBase64() {
             <Button variant="outline" onClick={() => handleCopyBase64(base64)}>
               {buttonBase64}
             </Button>
-            <Divider />
+            
+            <DividerComponent margin="medium" />
 
             <Label>Use in {"<img>"} tag:</Label>
             <Textarea
@@ -81,7 +83,7 @@ export default function ImageToBase64() {
               {buttonImgTag}
             </Button>
 
-            <Divider />
+            <DividerComponent margin="medium" />
 
             <Label>Use in CSS</Label>
             <Textarea
@@ -111,10 +113,6 @@ export default function ImageToBase64() {
   );
 }
 
-const Divider = () => {
-  return <div className="h-[1px] bg-border my-6"></div>;
-};
-
 const truncate = (input: string, maxLength: number) => {
   if (input.length <= maxLength) {
     return input;
diff --git a/pages/utilities/jwt-parser.tsx b/pages/utilities/jwt-parser.tsx
index ad69572..7aca727 100644
--- a/pages/utilities/jwt-parser.tsx
+++ b/pages/utilities/jwt-parser.tsx
@@ -11,6 +11,7 @@ import CallToActionGrid from "@/components/CallToActionGrid";
 import Meta from "@/components/Meta";
 import { decodeJWT } from "@/components/utils/jwt-parser.utils";
 import GitHubContribution from "@/components/GitHubContribution";
+import { DividerComponent } from "../../components/ds/DividerComponent";
 
 export default function JWTParser() {
   const [input, setInput] = useState("");
@@ -74,7 +75,7 @@ export default function JWTParser() {
               value={input}
             />
 
-            <Divider />
+            <DividerComponent margin="medium" />
 
             <div>
               <Label>Decoded Header</Label>
@@ -87,7 +88,7 @@ export default function JWTParser() {
               </Button>
             </div>
 
-            <Divider />
+            <DividerComponent margin="medium" />
 
             <div>
               <Label>Decoded Payload</Label>
@@ -100,7 +101,7 @@ export default function JWTParser() {
               </Button>
             </div>
 
-            <Divider />
+            <DividerComponent margin="medium" />
 
             <div>
               <Label>Signature</Label>
@@ -126,7 +127,3 @@ export default function JWTParser() {
     </main>
   );
 }
-
-const Divider = () => {
-  return <div className="bg-border h-[1px] my-6"></div>;
-};
diff --git a/pages/utilities/regex-tester.tsx b/pages/utilities/regex-tester.tsx
index c32a13d..da03489 100644
--- a/pages/utilities/regex-tester.tsx
+++ b/pages/utilities/regex-tester.tsx
@@ -10,6 +10,7 @@ import RegexHighlightText from "@/components/RegexHighlightText";
 import { createRegex } from "@/components/utils/regex-tester.utils";
 import CallToActionGrid from "@/components/CallToActionGrid";
 import GitHubContribution from "@/components/GitHubContribution";
+import { DividerComponent } from "../../components/ds/DividerComponent";
 
 export default function RegexTester() {
   const [pattern, setPattern] = useState("");
@@ -106,7 +107,7 @@ export default function RegexTester() {
                 </div>
                 {matches && (
                   <>
-                    <Divider />
+                    <DividerComponent margin="small" />
                     <RegexHighlightText text={testString} matches={matches} />
                   </>
                 )}
@@ -121,7 +122,3 @@ export default function RegexTester() {
     </main>
   );
 }
-
-const Divider = () => {
-  return <div className="bg-border h-[1px] my-2"></div>;
-};

From 2b5efd671c071f29db2bb575b201ed08b690a686 Mon Sep 17 00:00:00 2001
From: Eduardo Giacometti De Patta <eduardo.depatta@gmail.com>
Date: Fri, 27 Sep 2024 13:56:16 -0300
Subject: [PATCH 7/8] feat: add image cropping functionality to the image
 resizer tool

---
 pages/utilities/image-resizer.tsx | 427 +++++++++++++++++++++++++++---
 1 file changed, 385 insertions(+), 42 deletions(-)

diff --git a/pages/utilities/image-resizer.tsx b/pages/utilities/image-resizer.tsx
index df16eb0..70f6946 100644
--- a/pages/utilities/image-resizer.tsx
+++ b/pages/utilities/image-resizer.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState, useMemo, ChangeEvent } from "react";
+import { useCallback, useState, useMemo, ChangeEvent, useRef } from "react";
 import PageHeader from "@/components/PageHeader";
 import { Card } from "@/components/ds/CardComponent";
 import { Button } from "@/components/ds/ButtonComponent";
@@ -8,8 +8,10 @@ import { CMDK } from "@/components/CMDK";
 import CallToActionGrid from "@/components/CallToActionGrid";
 import Meta from "@/components/Meta";
 import {
+  calculateCropDimensions,
   Format,
   handleResizeImage,
+  isPointInCropRect,
   processImageFile,
   updateHeight,
   updateWidth,
@@ -21,6 +23,8 @@ import { ImageUploadComponent } from "@/components/ds/ImageUploadComponent";
 import { cn } from "@/lib/utils";
 import { DownloadIcon } from "lucide-react";
 import GitHubContribution from "@/components/GitHubContribution";
+import { CropOverlayComponent } from "@/components/ds/CropOverlayComponent";
+import { DividerComponent } from "../../components/ds/DividerComponent";
 
 const MAX_DIMENSION = 1024 * 4;
 const MAX_FILE_SIZE = 40 * 1024 * 1024;
@@ -53,20 +57,63 @@ export default function ImageResize() {
   const [resizedImageInfo, setResizedImageInfo] = useState<ResizedImageInfo>(
     {}
   );
+  const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
+  });
 
-  function setOutputAndShowAnimation(output: string) {
+  const [isCropping, setIsCropping] = useState(false);
+  const [cropStart, setCropStart] = useState<{ x: number; y: number } | null>(
+    null
+  );
+  const [cropRect, setCropRect] = useState<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isMovingCropRect, setIsMovingCropRect] = useState(false);
+  const [moveStartPoint, setMoveStartPoint] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  const setOutputAndShowAnimation = useCallback((output: string) => {
     setOutput(output);
     setShowAnimation(true);
     setTimeout(() => {
       setShowAnimation(false);
     }, 500);
-  }
+  }, []);
+
+  const resetCropStates = useCallback(() => {
+    setIsCropping(false);
+    setCropStart(null);
+    setCropRect(null);
+    setIsDragging(false);
+    setIsMovingCropRect(false);
+    setMoveStartPoint(null);
+  }, []);
+
+  const updateResizedImageInfo = useCallback(
+    (width: number, height: number, format: Format, quality: number) => {
+      setResizedImageInfo({
+        width: Math.round(width),
+        height: Math.round(height),
+        format,
+        quality,
+      });
+    },
+    []
+  );
 
   const handleFileSelect = useCallback(
     (file: File) => {
       setImageFile(file);
       processImageFile({
-        file,
+        source: file,
         format,
         preserveAspectRatio,
         quality,
@@ -82,20 +129,18 @@ export default function ImageResize() {
         setWidth,
       });
     },
-    [format, preserveAspectRatio, quality]
+    [format, preserveAspectRatio, quality, setOutputAndShowAnimation]
   );
 
   const handleAspectRatioChange = useCallback(() => {
     setPreserveAspectRatio((prev) => {
       const newValue = !prev;
-
-      if (newValue && imageFile && width) {
-        updateHeight({ width, file: imageFile, setHeight });
+      if (newValue && output && width) {
+        updateHeight({ source: output, setHeight, width });
       }
-
       return newValue;
     });
-  }, [imageFile, width]);
+  }, [output, width]);
 
   const handleWidthChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
@@ -105,11 +150,11 @@ export default function ImageResize() {
       }
       setWidth(newWidth);
 
-      if (preserveAspectRatio && imageFile) {
-        updateHeight({ file: imageFile, setHeight, width: newWidth });
+      if (preserveAspectRatio && output) {
+        updateHeight({ source: output, setHeight, width: newWidth });
       }
     },
-    [preserveAspectRatio, imageFile]
+    [preserveAspectRatio, output]
   );
 
   const handleHeightChange = useCallback(
@@ -120,17 +165,17 @@ export default function ImageResize() {
       }
       setHeight(newHeight);
 
-      if (preserveAspectRatio && imageFile) {
-        updateWidth({ file: imageFile, height: newHeight, setWidth });
+      if (preserveAspectRatio && output) {
+        updateWidth({ source: output, height: newHeight, setWidth });
       }
     },
-    [preserveAspectRatio, imageFile]
+    [preserveAspectRatio, output]
   );
 
   const handleResize = useCallback(() => {
-    if (imageFile) {
+    if (output) {
       handleResizeImage({
-        file: imageFile,
+        source: output,
         format,
         height,
         preserveAspectRatio,
@@ -142,7 +187,15 @@ export default function ImageResize() {
         },
       });
     }
-  }, [imageFile, width, height, format, quality, preserveAspectRatio]);
+  }, [
+    output,
+    width,
+    height,
+    format,
+    quality,
+    preserveAspectRatio,
+    setOutputAndShowAnimation,
+  ]);
 
   const resizedLabel = useMemo(() => {
     const { height, width, format, quality } = resizedImageInfo;
@@ -154,13 +207,38 @@ export default function ImageResize() {
     return "Click 'Resize' to see the dimensions";
   }, [resizedImageInfo]);
 
-  const handleQualityInput = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    let value = parseFloat(e.target.value);
-    if (value > 1) {
-      value = 1;
-    }
-    setQuality(value);
-  }, []);
+  const handleQualityInput = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      let value = parseFloat(e.target.value);
+      if (value > 1) {
+        value = 1;
+      }
+      setQuality(value);
+
+      if (format === "jpeg" && output) {
+        handleResizeImage({
+          source: output,
+          format,
+          height,
+          preserveAspectRatio,
+          quality: value,
+          width,
+          setOutput: (output) => {
+            setOutputAndShowAnimation(output);
+            setResizedImageInfo({ width, height, format, quality: value });
+          },
+        });
+      }
+    },
+    [
+      format,
+      output,
+      height,
+      preserveAspectRatio,
+      width,
+      setOutputAndShowAnimation,
+    ]
+  );
 
   const qualityInput = useMemo(() => {
     if (format === "jpeg") {
@@ -183,6 +261,254 @@ export default function ImageResize() {
     return null;
   }, [format, handleQualityInput, imageFile, quality]);
 
+  const handleCropModeToggle = useCallback(() => {
+    if (isCropping) {
+      resetCropStates();
+    } else {
+      setIsCropping(true);
+      setCropStart(null);
+      setCropRect(null);
+    }
+  }, [isCropping, resetCropStates]);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isCropping || !imageRef.current) return;
+
+      const rect = imageRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      if (cropRect && isPointInCropRect(x, y, cropRect)) {
+        startMovingCropRect(x, y, cropRect);
+      } else {
+        startNewCrop(x, y);
+      }
+    },
+    [isCropping, cropRect]
+  );
+
+  const startMovingCropRect = (
+    x: number,
+    y: number,
+    cropRect: { x: number; y: number; width: number; height: number }
+  ) => {
+    setIsMovingCropRect(true);
+    setMoveStartPoint({ x: x - cropRect.x, y: y - cropRect.y });
+  };
+
+  const startNewCrop = (x: number, y: number) => {
+    setCropStart({ x, y });
+    setIsDragging(true);
+    setCropRect(null);
+  };
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isCropping || !imageRef.current) return;
+
+      const rect = imageRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      setMousePosition({ x: e.clientX, y: e.clientY });
+
+      if (isDragging && cropStart) {
+        updateCropRect(x, y, cropStart);
+      } else if (isMovingCropRect && cropRect && moveStartPoint) {
+        moveCropRect(x, y, rect, cropRect, moveStartPoint);
+      }
+    },
+    [
+      isCropping,
+      isDragging,
+      cropStart,
+      isMovingCropRect,
+      cropRect,
+      moveStartPoint,
+    ]
+  );
+
+  const updateCropRect = (
+    x: number,
+    y: number,
+    cropStart: { x: number; y: number }
+  ) => {
+    const width = x - cropStart.x;
+    const height = y - cropStart.y;
+    setCropRect({
+      x: cropStart.x,
+      y: cropStart.y,
+      width,
+      height,
+    });
+  };
+
+  const moveCropRect = (
+    x: number,
+    y: number,
+    rect: DOMRect,
+    cropRect: { x: number; y: number; width: number; height: number },
+    moveStartPoint: { x: number; y: number }
+  ) => {
+    const newX = x - moveStartPoint.x;
+    const newY = y - moveStartPoint.y;
+
+    const boundedX = Math.max(
+      0,
+      Math.min(newX, rect.width - Math.abs(cropRect.width))
+    );
+    const boundedY = Math.max(
+      0,
+      Math.min(newY, rect.height - Math.abs(cropRect.height))
+    );
+
+    setCropRect({
+      ...cropRect,
+      x: boundedX,
+      y: boundedY,
+    });
+  };
+
+  const handleMouseUp = useCallback(() => {
+    if (isCropping) {
+      if (isDragging) {
+        setIsDragging(false);
+        setCropStart(null);
+      }
+      if (isMovingCropRect) {
+        setIsMovingCropRect(false);
+        setMoveStartPoint(null);
+      }
+    }
+  }, [isCropping, isDragging, isMovingCropRect]);
+
+  const cropSvgImage = useCallback(
+    (
+      img: HTMLImageElement,
+      x: number,
+      y: number,
+      width: number,
+      height: number
+    ) => {
+      const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+        <image href="${img.src}" x="-${x}" y="-${y}" width="${img.width}" height="${img.height}" />
+      </svg>`;
+      const svgBlob = new Blob([svg], { type: "image/svg+xml" });
+      const reader = new FileReader();
+      reader.onload = () => {
+        const croppedDataUrl = reader.result as string;
+        setOutput(croppedDataUrl);
+        updateResizedImageInfo(width, height, format, quality);
+        resetCropStates();
+      };
+      reader.readAsDataURL(svgBlob);
+    },
+    [format, quality, resetCropStates, updateResizedImageInfo]
+  );
+
+  const cropCanvasImage = useCallback(
+    (
+      img: HTMLImageElement,
+      x: number,
+      y: number,
+      width: number,
+      height: number
+    ) => {
+      const canvas = document.createElement("canvas");
+      canvas.width = width;
+      canvas.height = height;
+
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.drawImage(
+          img,
+          x,
+          y,
+          width,
+          height,
+          0,
+          0,
+          canvas.width,
+          canvas.height
+        );
+        const croppedDataUrl = canvas.toDataURL(`image/${format}`, quality);
+        setOutput(croppedDataUrl);
+        updateResizedImageInfo(canvas.width, canvas.height, format, quality);
+        resetCropStates();
+      }
+    },
+    [format, quality, resetCropStates, updateResizedImageInfo]
+  );
+
+  const handleImageDoubleClick = useCallback(() => {
+    if (cropRect && imageRef.current) {
+      const currentImageRef = imageRef.current;
+      const img = new Image();
+      img.src = output;
+      img.onload = () => {
+        const { x, y, width, height } = calculateCropDimensions(
+          img,
+          currentImageRef,
+          cropRect
+        );
+
+        if (format === "svg") {
+          cropSvgImage(img, x, y, width, height);
+        } else {
+          cropCanvasImage(img, x, y, width, height);
+        }
+      };
+    }
+  }, [cropCanvasImage, cropRect, cropSvgImage, format, output]);
+
+  const handleFormatChange = useCallback(
+    (value: string) => {
+      setFormat(value as Format);
+      if (output) {
+        handleResizeImage({
+          source: output,
+          format: value as Format,
+          height,
+          preserveAspectRatio,
+          quality,
+          width,
+          setOutput: (newOutput) => {
+            setOutputAndShowAnimation(newOutput);
+            setResizedImageInfo({
+              width,
+              height,
+              format: value as Format,
+              quality,
+            });
+          },
+        });
+      }
+    },
+    [
+      output,
+      height,
+      preserveAspectRatio,
+      quality,
+      width,
+      setOutputAndShowAnimation,
+    ]
+  );
+
+  const mainActionButton = useMemo(
+    () => (
+      <Button
+        className="flex flex-1"
+        onClick={handleResize}
+        disabled={!imageFile || isCropping}
+      >
+        Resize
+      </Button>
+    ),
+    [handleResize, imageFile, isCropping]
+  );
+
   return (
     <main>
       <Meta
@@ -216,7 +542,7 @@ export default function ImageResize() {
                   onChange={handleWidthChange}
                   value={width ?? ""}
                   className="mb-2"
-                  disabled={!imageFile}
+                  disabled={!imageFile || isCropping}
                 />
               </div>
               <div className="flex-1 ml-2">
@@ -227,7 +553,7 @@ export default function ImageResize() {
                   onChange={handleHeightChange}
                   value={height ?? ""}
                   className="mb-2"
-                  disabled={!imageFile}
+                  disabled={!imageFile || isCropping}
                 />
               </div>
             </div>
@@ -237,7 +563,7 @@ export default function ImageResize() {
                 id="preserve-aspect-ratio"
                 checked={preserveAspectRatio}
                 onCheckedChange={handleAspectRatioChange}
-                disabled={!imageFile}
+                disabled={!imageFile || isCropping}
                 className="mr-1"
               />
               <Label
@@ -248,7 +574,7 @@ export default function ImageResize() {
               </Label>
             </div>
 
-            <Divider />
+            <DividerComponent margin="medium" />
 
             <div className="mb-6 flex w-full gap-4">
               <div className="flex flex-1 flex-col">
@@ -256,23 +582,25 @@ export default function ImageResize() {
                 <Combobox
                   data={formatOptions}
                   value={format}
-                  onSelect={(value) => setFormat(value as Format)}
-                  disabled={!imageFile}
+                  onSelect={handleFormatChange}
+                  disabled={!imageFile || isCropping}
                 />
               </div>
 
               <div className="flex flex-1 flex-col">{qualityInput}</div>
             </div>
 
-            <Divider />
+            <DividerComponent margin="medium" />
 
             <div className={cn(imageFile && "mb-6", "flex w-full gap-4")}>
+              {mainActionButton}
+
               <Button
                 className="flex flex-1"
-                onClick={handleResize}
+                onClick={handleCropModeToggle}
                 disabled={!imageFile}
               >
-                Resize
+                {isCropping ? "Cancel" : "Crop Image"}
               </Button>
 
               <Button
@@ -293,18 +621,37 @@ export default function ImageResize() {
 
             {output && (
               <>
-                <Divider />
+                <DividerComponent margin="medium" />
                 <div>
                   <div className="flex flex-1 justify-between">
                     <Label>Resized Image</Label>
                     <Label>{resizedLabel}</Label>
                   </div>
-                  <div className="flex flex-col flex-1 items-center ring-1 ring-border rounded-lg p-1">
+                  <div
+                    className="relative flex flex-col flex-1 items-center ring-1 ring-border rounded-lg p-1"
+                    onMouseDown={handleMouseDown}
+                    onMouseMove={handleMouseMove}
+                    onMouseUp={handleMouseUp}
+                    onMouseLeave={handleMouseUp}
+                    style={{ cursor: isCropping ? "crosshair" : "default" }}
+                  >
                     <img
                       src={output}
                       alt="Resized output"
-                      className={`flex w-auto h-auto max-h-[640px] rounded-sm ${showAnimation ? "animate-grow-from-center" : ""}`}
+                      ref={imageRef}
+                      draggable={false}
+                      onDoubleClick={handleImageDoubleClick}
+                      className={`flex w-auto h-auto max-h-[640px] rounded-sm ${
+                        showAnimation ? "animate-grow-from-center" : ""
+                      }`}
                     />
+                    {isCropping && cropRect && (
+                      <CropOverlayComponent
+                        isCropping={isCropping}
+                        cropRect={cropRect}
+                        mousePosition={mousePosition}
+                      />
+                    )}
                   </div>
                 </div>
               </>
@@ -318,7 +665,3 @@ export default function ImageResize() {
     </main>
   );
 }
-
-const Divider = () => {
-  return <div className="h-[1px] bg-muted my-6"></div>;
-};

From c7e0849e3e8a8f6756e302d7e2e2ae8cf49e3507 Mon Sep 17 00:00:00 2001
From: Eduardo Giacometti De Patta <eduardo.depatta@gmail.com>
Date: Fri, 27 Sep 2024 14:09:02 -0300
Subject: [PATCH 8/8] chore: apply code formatting

---
 components/ds/DividerComponent.tsx          | 10 +++++-----
 components/utils/resize-image.utils.test.ts | 20 ++++++++++++++------
 components/utils/resize-image.utils.ts      |  2 +-
 pages/utilities/image-to-base64.tsx         |  2 +-
 4 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/components/ds/DividerComponent.tsx b/components/ds/DividerComponent.tsx
index 35a4bde..228a7da 100644
--- a/components/ds/DividerComponent.tsx
+++ b/components/ds/DividerComponent.tsx
@@ -1,13 +1,13 @@
 "use client";
 interface DividerProps {
-  margin?: 'small' | 'medium' | 'large';
+  margin?: "small" | "medium" | "large";
 }
 
-const DividerComponent: React.FC<DividerProps> = ({ margin = 'small' }) => {
+const DividerComponent: React.FC<DividerProps> = ({ margin = "small" }) => {
   const marginClasses = {
-    small: 'my-2',
-    medium: 'my-6',
-    large: 'my-8',
+    small: "my-2",
+    medium: "my-6",
+    large: "my-8",
   };
 
   return <div className={`bg-border h-[1px] ${marginClasses[margin]}`}></div>;
diff --git a/components/utils/resize-image.utils.test.ts b/components/utils/resize-image.utils.test.ts
index 6bfde58..b485470 100644
--- a/components/utils/resize-image.utils.test.ts
+++ b/components/utils/resize-image.utils.test.ts
@@ -182,7 +182,11 @@ describe("Image Processing Functions", () => {
 
     const cropRect = { x: 50, y: 50, width: 100, height: 50 };
 
-    const result = calculateCropDimensions(imgMock, currentImageRefMock, cropRect);
+    const result = calculateCropDimensions(
+      imgMock,
+      currentImageRefMock,
+      cropRect
+    );
 
     expect(result).toEqual({
       x: 100,
@@ -197,16 +201,20 @@ describe("Image Processing Functions", () => {
       width: 1000,
       height: 500,
     } as HTMLImageElement;
-  
+
     const currentImageRefMock = {
       clientWidth: 500,
       clientHeight: 250,
     } as HTMLImageElement;
-  
+
     const cropRect = { x: 150, y: 150, width: -100, height: -50 };
-  
-    const result = calculateCropDimensions(imgMock, currentImageRefMock, cropRect);
-  
+
+    const result = calculateCropDimensions(
+      imgMock,
+      currentImageRefMock,
+      cropRect
+    );
+
     expect(result).toEqual({
       x: 100,
       y: 200,
diff --git a/components/utils/resize-image.utils.ts b/components/utils/resize-image.utils.ts
index b333d2d..6ab9b00 100644
--- a/components/utils/resize-image.utils.ts
+++ b/components/utils/resize-image.utils.ts
@@ -248,7 +248,7 @@ export function calculateCropDimensions(
   const scaleY = img.height / currentImageRef.clientHeight;
 
   const x = Math.min(cropRect.x, cropRect.x + cropRect.width) * scaleX;
-  const y = Math.min(cropRect.y, cropRect.y + cropRect.height) * scaleY; 
+  const y = Math.min(cropRect.y, cropRect.y + cropRect.height) * scaleY;
   const width = Math.abs(cropRect.width) * scaleX;
   const height = Math.abs(cropRect.height) * scaleY;
 
diff --git a/pages/utilities/image-to-base64.tsx b/pages/utilities/image-to-base64.tsx
index 67b65e6..19a0522 100644
--- a/pages/utilities/image-to-base64.tsx
+++ b/pages/utilities/image-to-base64.tsx
@@ -64,7 +64,7 @@ export default function ImageToBase64() {
             <Button variant="outline" onClick={() => handleCopyBase64(base64)}>
               {buttonBase64}
             </Button>
-            
+
             <DividerComponent margin="medium" />
 
             <Label>Use in {"<img>"} tag:</Label>