feat: create crop overlay component

Author: peckz

components/ds/CropOverlayComponent.tsx

@@ -1,35 +1,91 @@
 "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 };
+  onDone?: () => void;
 }
 
 const CropOverlayComponent: React.FC<CropOverlayProps> = ({
-  isCropping,
   cropRect,
-  mousePosition,
+  onDone,
 }) => {
-  if (!isCropping || !cropRect) return null;
+  if (!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);
+  const handleBaseClass =
+    "absolute h-3.5 w-3.5 rounded-full border border-white bg-primary shadow pointer-events-auto";
 
   return (
-    <>
+    <div
+      className="absolute border-2 border-white/90 pointer-events-none"
+      style={{
+        left,
+        top,
+        width,
+        height,
+        boxShadow: "0 0 0 9999px rgba(0, 0, 0, 0.45)",
+      }}
+    >
+      <div className="absolute left-1/3 top-0 h-full w-px bg-white/70" />
+      <div className="absolute left-2/3 top-0 h-full w-px bg-white/70" />
+      <div className="absolute top-1/3 left-0 h-px w-full bg-white/70" />
+      <div className="absolute top-2/3 left-0 h-px w-full bg-white/70" />
+
+      <div
+        data-crop-area="true"
+        className="absolute inset-0 pointer-events-auto cursor-move bg-transparent"
+      />
+
+      {onDone && (
+        <button
+          type="button"
+          data-crop-action="done"
+          onPointerDown={(event) => event.stopPropagation()}
+          onClick={(event) => {
+            event.stopPropagation();
+            onDone();
+          }}
+          className="absolute right-2 top-2 pointer-events-auto rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground shadow-sm hover:opacity-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        >
+          Done
+        </button>
+      )}
+
+      <div
+        data-crop-handle="nw"
+        className={`${handleBaseClass} -left-2 -top-2 cursor-nwse-resize`}
+      />
+      <div
+        data-crop-handle="n"
+        className={`${handleBaseClass} left-1/2 -top-2 -translate-x-1/2 cursor-ns-resize`}
+      />
+      <div
+        data-crop-handle="ne"
+        className={`${handleBaseClass} -right-2 -top-2 cursor-nesw-resize`}
+      />
+      <div
+        data-crop-handle="e"
+        className={`${handleBaseClass} -right-2 top-1/2 -translate-y-1/2 cursor-ew-resize`}
+      />
+      <div
+        data-crop-handle="se"
+        className={`${handleBaseClass} -right-2 -bottom-2 cursor-nwse-resize`}
+      />
+      <div
+        data-crop-handle="s"
+        className={`${handleBaseClass} left-1/2 -bottom-2 -translate-x-1/2 cursor-ns-resize`}
+      />
+      <div
+        data-crop-handle="sw"
+        className={`${handleBaseClass} -left-2 -bottom-2 cursor-nesw-resize`}
+      />
       <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}
+        data-crop-handle="w"
+        className={`${handleBaseClass} -left-2 top-1/2 -translate-y-1/2 cursor-ew-resize`}
       />
-    </>
+    </div>
   );
 };
 

components/utils/resize-image.utils.test.ts

@@ -171,14 +171,20 @@ describe("Image Processing Functions", () => {
 
   it("should calculate the crop dimensions correctly", () => {
     const imgMock = {
+      naturalWidth: 1000,
+      naturalHeight: 500,
       width: 1000,
       height: 500,
     } as HTMLImageElement;
 
     const currentImageRefMock = {
       clientWidth: 500,
       clientHeight: 250,
-    } as HTMLImageElement;
+      getBoundingClientRect: jest.fn(() => ({
+        width: 500,
+        height: 250,
+      })),
+    } as unknown as HTMLImageElement;
 
     const cropRect = { x: 50, y: 50, width: 100, height: 50 };
 
@@ -198,14 +204,20 @@ describe("Image Processing Functions", () => {
 
   it("should handle negative width and height values in cropRect", () => {
     const imgMock = {
+      naturalWidth: 1000,
+      naturalHeight: 500,
       width: 1000,
       height: 500,
     } as HTMLImageElement;
 
     const currentImageRefMock = {
       clientWidth: 500,
       clientHeight: 250,
-    } as HTMLImageElement;
+      getBoundingClientRect: jest.fn(() => ({
+        width: 500,
+        height: 250,
+      })),
+    } as unknown as HTMLImageElement;
 
     const cropRect = { x: 150, y: 150, width: -100, height: -50 };
 
@@ -223,6 +235,39 @@ describe("Image Processing Functions", () => {
     });
   });
 
+  it("should clamp crop dimensions to image boundaries", () => {
+    const imgMock = {
+      naturalWidth: 1000,
+      naturalHeight: 500,
+      width: 1000,
+      height: 500,
+    } as HTMLImageElement;
+
+    const currentImageRefMock = {
+      clientWidth: 500,
+      clientHeight: 250,
+      getBoundingClientRect: jest.fn(() => ({
+        width: 500,
+        height: 250,
+      })),
+    } as unknown as HTMLImageElement;
+
+    const cropRect = { x: -10, y: -20, width: 600, height: 400 };
+
+    const result = calculateCropDimensions(
+      imgMock,
+      currentImageRefMock,
+      cropRect
+    );
+
+    expect(result).toEqual({
+      x: 0,
+      y: 0,
+      width: 1000,
+      height: 500,
+    });
+  });
+
   const cropRect = { x: 50, y: 50, width: 100, height: 50 };
 
   it("should return true for a point inside the crop rectangle", () => {

components/utils/resize-image.utils.ts

@@ -244,15 +244,44 @@ export function calculateCropDimensions(
   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 imageRect = currentImageRef.getBoundingClientRect();
+  const renderedWidth = imageRect.width || currentImageRef.clientWidth;
+  const renderedHeight = imageRect.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;
+  const sourceWidth =
+    img.naturalWidth || currentImageRef.naturalWidth || img.width;
+  const sourceHeight =
+    img.naturalHeight || currentImageRef.naturalHeight || img.height;
 
-  return { x, y, width, height };
+  if (!renderedWidth || !renderedHeight || !sourceWidth || !sourceHeight) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+
+  const scaleX = sourceWidth / renderedWidth;
+  const scaleY = sourceHeight / renderedHeight;
+
+  const normalizedX = Math.min(cropRect.x, cropRect.x + cropRect.width);
+  const normalizedY = Math.min(cropRect.y, cropRect.y + cropRect.height);
+  const normalizedWidth = Math.abs(cropRect.width);
+  const normalizedHeight = Math.abs(cropRect.height);
+
+  const x = Math.max(0, Math.min(normalizedX * scaleX, sourceWidth));
+  const y = Math.max(0, Math.min(normalizedY * scaleY, sourceHeight));
+  const width = Math.max(
+    0,
+    Math.min(normalizedWidth * scaleX, sourceWidth - x)
+  );
+  const height = Math.max(
+    0,
+    Math.min(normalizedHeight * scaleY, sourceHeight - y)
+  );
+
+  return {
+    x: Math.round(x),
+    y: Math.round(y),
+    width: Math.round(width),
+    height: Math.round(height),
+  };
 }
 interface CropRect {
   x: number;