From a42a4126ecbc5947e70039bd3e96937f53a56312 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Sun, 19 Apr 2026 16:43:46 +0100
Subject: [PATCH] fix: image crop broken (#37)

---
 .../components/submit-form/image-editor.tsx   | 228 +++++++++---------
 frontend/src/main.tsx                         |   1 +
 2 files changed, 115 insertions(+), 114 deletions(-)

diff --git a/frontend/src/components/submit-form/image-editor.tsx b/frontend/src/components/submit-form/image-editor.tsx
index 2934e2e..758267f 100644
--- a/frontend/src/components/submit-form/image-editor.tsx
+++ b/frontend/src/components/submit-form/image-editor.tsx
@@ -1,114 +1,114 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import ReactCrop, { type Crop } from "react-image-crop";
-import { Icon } from "@iconify/react";
-
-interface Props {
-	isOpen: boolean;
-	setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-	image: string | undefined;
-	setImage: (value: string | undefined) => void;
-}
-
-export default function ImageEditorPortrait({ isOpen, setIsOpen, image, setImage }: Props) {
-	const [isVisible, setIsVisible] = useState(false);
-	const [crop, setCrop] = useState<Crop>();
-
-	const imageRef = useRef<HTMLImageElement>(null);
-	const canvasRef = useRef<HTMLCanvasElement>(null);
-
-	const applyCrop = useCallback(() => {
-		if (!imageRef.current || !canvasRef.current || !crop) return;
-
-		const image = imageRef.current;
-		const canvas = canvasRef.current;
-
-		if (!crop.width || !crop.height || image.naturalWidth === 0 || image.naturalHeight === 0) return;
-
-		const ctx = canvas.getContext("2d");
-		if (!ctx) return;
-
-		const scaleX = image.naturalWidth / image.width;
-		const scaleY = image.naturalHeight / image.height;
-
-		canvas.width = crop.width * scaleX;
-		canvas.height = crop.height * scaleY;
-
-		ctx.drawImage(image, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width * scaleX, crop.height * scaleY);
-
-		setImage(canvas.toDataURL());
-		setCrop(undefined);
-	}, [crop, setImage]);
-
-	const rotate = () => {
-		if (!imageRef.current || !canvasRef.current) return;
-
-		const image = imageRef.current;
-		const canvas = canvasRef.current;
-		const ctx = canvas.getContext("2d");
-		if (!ctx) return;
-
-		canvas.width = image.naturalHeight;
-		canvas.height = image.naturalWidth;
-
-		ctx.translate(canvas.width / 2, canvas.height / 2);
-		ctx.rotate(Math.PI / 2);
-		ctx.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2);
-
-		setImage(canvas.toDataURL());
-	};
-
-	const close = () => {
-		setIsVisible(false);
-		setTimeout(() => {
-			setIsOpen(false);
-		}, 300);
-	};
-
-	useEffect(() => {
-		if (isOpen) {
-			// slight delay to trigger animation
-			setTimeout(() => setIsVisible(true), 10);
-		}
-	}, [isOpen]);
-
-	return (
-		<div className={`fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40 ${!isOpen ? "hidden" : ""}`}>
-			<div
-				onClick={close}
-				className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
-			/>
-
-			<div
-				className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 ${
-					isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
-				}`}
-			>
-				<div className="flex justify-between items-center mb-2">
-					<h2 className="text-xl font-bold">Edit Image</h2>
-					<button type="button" aria-label="Close" onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
-						<Icon icon="material-symbols:close-rounded" />
-					</button>
-				</div>
-
-				<div className="relative w-full flex justify-center">
-					<ReactCrop crop={crop} onChange={(c) => setCrop(c)} className="rounded-2xl border-2 border-amber-500 overflow-hidden max-h-96">
-						<img ref={imageRef} src={image} />
-					</ReactCrop>
-					<canvas ref={canvasRef} className="hidden" />
-				</div>
-
-				<div className="mt-4 flex justify-center gap-2">
-					<button type="button" onClick={close} className="pill button">
-						Done
-					</button>
-					<button type="button" onClick={applyCrop} className="pill button">
-						Crop
-					</button>
-					<button type="button" onClick={rotate} className="pill button">
-						Rotate
-					</button>
-				</div>
-			</div>
-		</div>
-	);
-}
+import { useCallback, useEffect, useRef, useState } from "react";
+import ReactCrop, { type Crop } from "react-image-crop";
+import { Icon } from "@iconify/react";
+
+interface Props {
+	isOpen: boolean;
+	setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+	image: string | undefined;
+	setImage: (value: string | undefined) => void;
+}
+
+export default function ImageEditorPortrait({ isOpen, setIsOpen, image, setImage }: Props) {
+	const [isVisible, setIsVisible] = useState(false);
+	const [crop, setCrop] = useState<Crop>();
+
+	const imageRef = useRef<HTMLImageElement>(null);
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+
+	const applyCrop = useCallback(() => {
+		if (!imageRef.current || !canvasRef.current || !crop) return;
+
+		const image = imageRef.current;
+		const canvas = canvasRef.current;
+
+		if (!crop.width || !crop.height || image.naturalWidth === 0 || image.naturalHeight === 0) return;
+
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		const scaleX = image.naturalWidth / image.width;
+		const scaleY = image.naturalHeight / image.height;
+
+		canvas.width = crop.width * scaleX;
+		canvas.height = crop.height * scaleY;
+
+		ctx.drawImage(image, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width * scaleX, crop.height * scaleY);
+
+		setImage(canvas.toDataURL());
+		setCrop(undefined);
+	}, [crop, setImage]);
+
+	const rotate = () => {
+		if (!imageRef.current || !canvasRef.current) return;
+
+		const image = imageRef.current;
+		const canvas = canvasRef.current;
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		canvas.width = image.naturalHeight;
+		canvas.height = image.naturalWidth;
+
+		ctx.translate(canvas.width / 2, canvas.height / 2);
+		ctx.rotate(Math.PI / 2);
+		ctx.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2);
+
+		setImage(canvas.toDataURL());
+	};
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	return (
+		<div className={`fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40 ${!isOpen ? "hidden" : ""}`}>
+			<div
+				onClick={close}
+				className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
+			/>
+
+			<div
+				className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 ${
+					isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+				}`}
+			>
+				<div className="flex justify-between items-center mb-2">
+					<h2 className="text-xl font-bold">Edit Image</h2>
+					<button type="button" aria-label="Close" onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+						<Icon icon="material-symbols:close-rounded" />
+					</button>
+				</div>
+
+				<div className="relative w-full flex justify-center">
+					<ReactCrop crop={crop} onChange={(c) => setCrop(c)} className="rounded-2xl border-2 border-amber-500 overflow-hidden max-h-96">
+						<img ref={imageRef} src={image} />
+					</ReactCrop>
+					<canvas ref={canvasRef} className="hidden" />
+				</div>
+
+				<div className="mt-4 flex justify-center gap-2">
+					<button type="button" onClick={close} className="pill button">
+						Done
+					</button>
+					<button type="button" onClick={applyCrop} className="pill button">
+						Crop
+					</button>
+					<button type="button" onClick={rotate} className="pill button">
+						Rotate
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 9c7ef55..68b15dc 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -2,6 +2,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter, Route, Routes } from "react-router";
 import "./index.css";
+import "react-image-crop/dist/ReactCrop.css";
 import "@fontsource-variable/lexend/wght.css";
 
 import PrivacyPage from "./pages/privacy.tsx";