fix: persist crop preview in ImageUpload via initialCrop prop
Crop values were stored in DB but never passed back to ImageUpload on reload, causing images to revert to object-contain. Now both admin and user item pages pass persisted crop data so the cropped view displays correctly. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -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<HTMLInputElement>(null);
|
||||
|
||||
async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user