diff --git a/src/client/components/ImageUpload.tsx b/src/client/components/ImageUpload.tsx index dc32397..32be5d9 100644 --- a/src/client/components/ImageUpload.tsx +++ b/src/client/components/ImageUpload.tsx @@ -8,6 +8,7 @@ interface ImageUploadProps { value: string | null; imageUrl?: string | null; dominantColor?: string | null; + initialCrop?: { zoom: number; x: number; y: number } | null; onChange: (filename: string | null, dominantColor?: string | null) => void; onCropChange?: (crop: { zoom: number; x: number; y: number }) => void; } @@ -19,6 +20,7 @@ export function ImageUpload({ value: _value, imageUrl, dominantColor, + initialCrop, onChange, onCropChange, }: ImageUploadProps) { @@ -31,7 +33,7 @@ export function ImageUpload({ zoom: number; x: number; y: number; - } | null>(null); + } | null>(initialCrop ?? null); const inputRef = useRef(null); async function handleFileChange(e: React.ChangeEvent) { diff --git a/src/client/routes/admin/items/$itemId.tsx b/src/client/routes/admin/items/$itemId.tsx index 1476ee9..b42d586 100644 --- a/src/client/routes/admin/items/$itemId.tsx +++ b/src/client/routes/admin/items/$itemId.tsx @@ -291,6 +291,15 @@ function AdminItemEditPage() { value={form.imageFilename} imageUrl={form.imageUrl || null} dominantColor={form.dominantColor || null} + initialCrop={ + form.cropZoom != null + ? { + zoom: form.cropZoom, + x: form.cropX ?? 0, + y: form.cropY ?? 0, + } + : null + } onChange={(filename, dominantColor) => { setForm((prev) => ({ ...prev, diff --git a/src/client/routes/items/$itemId.tsx b/src/client/routes/items/$itemId.tsx index f412bde..16f1d1a 100644 --- a/src/client/routes/items/$itemId.tsx +++ b/src/client/routes/items/$itemId.tsx @@ -346,6 +346,15 @@ function ItemDetail() { value={form.imageFilename} imageUrl={imageUrl} dominantColor={item.dominantColor} + initialCrop={ + item.cropZoom != null + ? { + zoom: item.cropZoom, + x: item.cropX ?? 0, + y: item.cropY ?? 0, + } + : null + } onChange={(filename, dominantColor) => { setForm((f) => ({ ...f, imageFilename: filename })); if (dominantColor) {