feat(avatar-upload): add preset cropping options in AvatarUploadModal

Innei · Innei · commit 7e3e1c73c65d · 2025-06-18T14:03:17.000+08:00
- Introduced two new cropping functions: `handleFullImageCrop` and `handleCenterCrop` to allow users to easily crop their avatars to full image size or center-focused size.
- Updated the modal layout to include buttons for these new cropping options, enhancing user experience and providing more flexibility in avatar customization.

These changes aim to improve the avatar upload process by offering users convenient cropping presets.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/layer/renderer/src/components/ui/crop/AvatarUploadModal.tsx b/apps/desktop/layer/renderer/src/components/ui/crop/AvatarUploadModal.tsx
@@ -108,7 +108,6 @@ export const AvatarUploadModal = ({
         width: size,
         height: size,
       }
-
       // Use the helper function to ensure the data is valid
       const constrainedData = constrainCropData(
         initialCropData,
@@ -279,6 +278,42 @@ export const AvatarUploadModal = ({
     })
   }, [cropData])
 
+  // Preset functions
+  const handleFullImageCrop = useCallback(() => {
+    if (!imageRef.current) return
+
+    const img = imageRef.current
+    const size = Math.min(img.naturalWidth, img.naturalHeight)
+
+    const newCropData = {
+      x: (img.naturalWidth - size) / 2,
+      y: (img.naturalHeight - size) / 2,
+      width: size,
+      height: size,
+    }
+
+    const constrainedData = constrainCropData(newCropData, img.naturalWidth, img.naturalHeight)
+    setCropData(constrainedData)
+  }, [constrainCropData])
+
+  const handleCenterCrop = useCallback(() => {
+    if (!imageRef.current) return
+
+    const img = imageRef.current
+    const maxSize = Math.min(img.naturalWidth, img.naturalHeight)
+    const size = maxSize * 0.8
+
+    const newCropData = {
+      x: (img.naturalWidth - size) / 2,
+      y: (img.naturalHeight - size) / 2,
+      width: size,
+      height: size,
+    }
+
+    const constrainedData = constrainCropData(newCropData, img.naturalWidth, img.naturalHeight)
+    setCropData(constrainedData)
+  }, [constrainCropData])
+
   const handleConfirm = useCallback(async () => {
     if (!selectedImage) return
 
@@ -421,13 +456,29 @@ export const AvatarUploadModal = ({
 
       <canvas ref={canvasRef} className="hidden" />
 
-      <div className="flex justify-end gap-2">
-        <Button variant="outline" onClick={onCancel}>
-          {t("words.cancel", { ns: "common" })}
-        </Button>
-        <Button onClick={handleConfirm} disabled={!selectedImage} isLoading={isProcessing}>
-          {t("words.confirm", { ns: "common" })}
-        </Button>
+      <div className="flex justify-between gap-2">
+        {selectedImage ? (
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={handleFullImageCrop} size="sm">
+              <i className="i-mgc-fullscreen-cute-re mr-1 text-sm" />
+              Full Image
+            </Button>
+            <Button variant="outline" onClick={handleCenterCrop} size="sm">
+              <i className="i-mgc-round-cute-re mr-1 text-sm" />
+              Center Crop
+            </Button>
+          </div>
+        ) : (
+          <div className="flex-1" />
+        )}
+        <div className="flex items-center gap-2">
+          <Button variant="outline" onClick={onCancel}>
+            {t("words.cancel", { ns: "common" })}
+          </Button>
+          <Button onClick={handleConfirm} disabled={!selectedImage} isLoading={isProcessing}>
+            {t("words.confirm", { ns: "common" })}
+          </Button>
+        </div>
       </div>
     </div>
   )
