From dda330f0a036d4895d27c256fea4f78c042c0b4b Mon Sep 17 00:00:00 2001
From: Mary <git@mary.my.id>
Date: Wed, 8 May 2024 12:03:47 +0700
Subject: [PATCH] refactor: work with percentage crops

---
 .../composer/photos/EditImageDialog.web.tsx   | 35 ++++++++++---------
 src/view/com/modals/CropImage.web.tsx         | 19 +++++-----
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/view/com/composer/photos/EditImageDialog.web.tsx b/src/view/com/composer/photos/EditImageDialog.web.tsx
index ff1542f8f0..4d18ba8c07 100644
--- a/src/view/com/composer/photos/EditImageDialog.web.tsx
+++ b/src/view/com/composer/photos/EditImageDialog.web.tsx
@@ -2,10 +2,12 @@ import 'react-image-crop/dist/ReactCrop.css'
 
 import React from 'react'
 import {View} from 'react-native'
+import {Path, Svg} from 'react-native-svg'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import ReactCrop, {PixelCrop} from 'react-image-crop'
+import ReactCrop, {PercentCrop} from 'react-image-crop'
 
+import {manipulateImage} from '#/state/gallery'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -30,15 +32,15 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
   const {initialCrop, initialAspect, sourceAspect} = React.useMemo(() => {
     const initialArea = manips?.crop
 
-    let crop: PixelCrop | undefined
+    let crop: PercentCrop | undefined
 
     if (initialArea) {
       crop = {
-        unit: 'px',
-        x: initialArea.originX,
-        y: initialArea.originY,
-        width: initialArea.width,
-        height: initialArea.height,
+        unit: '%',
+        x: (initialArea.originX / source.width) * 100,
+        y: (initialArea.originY / source.height) * 100,
+        width: (initialArea.width / source.width) * 100,
+        height: (initialArea.height / source.height) * 100,
       }
     }
 
@@ -46,7 +48,9 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
 
     return {
       initialCrop: crop,
-      initialAspect: crop ? crop.width / crop.height : originalAspect,
+      initialAspect: initialArea
+        ? initialArea.width / initialArea.height
+        : originalAspect,
       sourceAspect: originalAspect,
     }
   }, [source, manips])
@@ -61,17 +65,17 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
     const result = await manipulateImage(image, {
       crop: !isEmpty
         ? {
-            originX: crop.x,
-            originY: crop.y,
-            width: crop.width,
-            height: crop.height,
+            originX: (crop.x * source.width) / 100,
+            originY: (crop.y * source.height) / 100,
+            width: (crop.width * source.width) / 100,
+            height: (crop.height * source.height) / 100,
           }
         : undefined,
     })
 
     onChange(result)
     control.close()
-  }, [crop, isEmpty, image, control, onChange])
+  }, [crop, isEmpty, image, source, control, onChange])
 
   const changeAspect = (next: number) => {
     if (next !== aspect) {
@@ -90,7 +94,7 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
         <ReactCrop
           aspect={aspect}
           crop={crop}
-          onChange={setCrop}
+          onChange={(_, next) => setCrop(next)}
           className="ReactCrop--no-animate">
           <img src={source.path} style={{maxHeight: `50vh`}} />
         </ReactCrop>
@@ -183,6 +187,3 @@ const ToolbarButton = ({
     </Button>
   )
 }
-import {Path, Svg} from 'react-native-svg'
-
-import {manipulateImage} from '#/state/gallery'
diff --git a/src/view/com/modals/CropImage.web.tsx b/src/view/com/modals/CropImage.web.tsx
index 9ccdaf043d..8a678b4294 100644
--- a/src/view/com/modals/CropImage.web.tsx
+++ b/src/view/com/modals/CropImage.web.tsx
@@ -5,7 +5,7 @@ import {manipulateAsync, SaveFormat} from 'expo-image-manipulator'
 import {LinearGradient} from 'expo-linear-gradient'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import ReactCrop, {PixelCrop} from 'react-image-crop'
+import ReactCrop, {PercentCrop} from 'react-image-crop'
 
 import {useModalControls} from '#/state/modals'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -27,7 +27,8 @@ export function Component({
 
   const {closeModal} = useModalControls()
 
-  const [crop, setCrop] = React.useState<PixelCrop>()
+  const imageRef = React.useRef<HTMLImageElement>(null)
+  const [crop, setCrop] = React.useState<PercentCrop>()
 
   const isEmpty = !crop || (crop.width || crop.height) === 0
 
@@ -37,15 +38,17 @@ export function Component({
   }
   const onPressDone = async () => {
     if (!isEmpty) {
+      const img = imageRef.current!
+
       const result = await manipulateAsync(
         uri,
         [
           {
             crop: {
-              originX: crop.x,
-              originY: crop.y,
-              width: crop.width,
-              height: crop.height,
+              originX: (crop.x * img.width) / 100,
+              originY: (crop.y * img.height) / 100,
+              width: (crop.width * img.width) / 100,
+              height: (crop.height * img.height) / 100,
             },
           },
         ],
@@ -72,8 +75,8 @@ export function Component({
   return (
     <View>
       <View style={[styles.cropper, pal.borderDark]}>
-        <ReactCrop crop={crop} onChange={setCrop}>
-          <img src={uri} style={{maxHeight: '75vh'}} />
+        <ReactCrop crop={crop} onChange={(_, next) => setCrop(next)}>
+          <img ref={imageRef} src={uri} style={{maxHeight: '75vh'}} />
         </ReactCrop>
       </View>
       <View style={styles.btns}>