fix crop

src/ui_kit/Modal/CropModal.tsx

@@ -19,7 +19,6 @@ import { enqueueSnackbar } from "notistack";
 import { FC, useCallback, useMemo, useRef, useState } from "react";
 import ReactCrop, {
   PercentCrop,
-  PixelCrop,
   centerCrop,
   convertToPixelCrop,
   makeAspectCrop,
@@ -82,7 +81,6 @@ export const CropModal: FC<Props> = ({
 }) => {
   const theme = useTheme();
   const [percentCrop, setPercentCrop] = useState<PercentCrop>();
-  const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
   const [darken, setDarken] = useState(0);
   const [imageWidth, setImageWidth] = useState<number | null>(null);
   const [imageHeight, setImageHeight] = useState<number | null>(null);
@@ -96,23 +94,25 @@ export const CropModal: FC<Props> = ({
 
   function resetEditState() {
     setPercentCrop(undefined);
-    setCompletedCrop(undefined);
     setDarken(0);
   }
 
   async function handleCropClick() {
+    if (!percentCrop || !imageWidth || !imageHeight) return;
     if (!cropImageElementRef.current) throw new Error("No image");
-    if (!completedCrop) return;
 
+    const width = cropImageElementRef.current.width;
+    const height = cropImageElementRef.current.height;
+
+    const pixelCrop = convertToPixelCrop(percentCrop, width, height);
     try {
       const blob = await getCroppedImageBlob(
         cropImageElementRef.current,
-        completedCrop,
+        pixelCrop,
       );
 
       setCropModalImageBlob(blob);
       setPercentCrop(undefined);
-      setCompletedCrop(undefined);
     } catch (error) {
       devlog("getCroppedImageBlob error", error);
       enqueueSnackbar("Не удалось изменить изображение");
@@ -127,7 +127,6 @@ export const CropModal: FC<Props> = ({
 
       setCropModalImageBlob(blob);
       setPercentCrop(undefined);
-      setCompletedCrop(undefined);
     } catch (error) {
       devlog("getRotatedImageBlob error", error);
       enqueueSnackbar("Не удалось изменить изображение");
@@ -237,9 +236,8 @@ export const CropModal: FC<Props> = ({
             <ReactCrop
               crop={percentCrop}
               onChange={(_, percentCrop) => setPercentCrop(percentCrop)}
-              onComplete={(c) => setCompletedCrop(c)}
-              minWidth={50}
-              minHeight={50}
+              minWidth={5}
+              minHeight={5}
               aspect={
                 cropAspectRatio
                   ? cropAspectRatio.width / cropAspectRatio.height
@@ -256,8 +254,6 @@ export const CropModal: FC<Props> = ({
                 src={imageUrl}
                 style={{
                   filter: `brightness(${100 - darken}%)`,
-                  width: imageWidth ? imageWidth : undefined,
-                  height: "100%",
                   maxWidth: "100%",
                   maxHeight: "320px",
                   display: "block",
@@ -379,22 +375,17 @@ export const CropModal: FC<Props> = ({
           <Button
             onClick={handleCropClick}
             disableRipple
-            disabled={!completedCrop}
             sx={{
               padding: "10px 20px",
               borderRadius: "8px",
               background: theme.palette.brightPurple.main,
               fontSize: "18px",
               color: "#7E2AEA",
-              border: `1px solid ${
-                !completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"
-              }`,
+              border: "1px solid #7E2AEA",
               backgroundColor: "transparent",
             }}
           >
-            <CropIcon
-              color={!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"}
-            />
+            <CropIcon color="#7E2AEA" />
             Обрезать
           </Button>