все настройки подключены, записываются и отображаются

src/model/CropModal/CropModal.ts

@@ -19,7 +19,7 @@ export interface CropModalProps {
     setEditedImages: (callback: (editedImages: EditedImages) => EditedImages) => void;
     onSaveImageClick: () => void;
     closeCropModal: CropOnCloseType;
-    onDeleteClick:CropOnDeleteIamgeClick
+    onDeleteClick: () => void;
 };
 
 export type AcceptedQuestionTypes = "images" | "varimg" | "text" | "variant" | "result";

src/ui_kit/Modal/CropModal/CropGeneral.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useRef, useState } from "react";
+import { FC, useCallback, useEffect, useRef, useState } from "react";
 import { enqueueSnackbar } from "notistack";
 import ReactCrop, {
     PercentCrop,
@@ -26,6 +26,7 @@ import { ResetIcon } from "@icons/ResetIcon";
 import "react-image-crop/dist/ReactCrop.css";
 import { EditedImagesChangeType } from "./CropModal";
 import { CropAspectRatio, DEFAULTCROPRULES, EditedImage } from "@/model/CropModal/CropModal";
+import { devlog } from "@frontend/kitui";
 
 const styleSlider: SxProps<Theme> = {
     color: "#7E2AEA",
@@ -63,19 +64,22 @@ export const CropGeneral: FC<Props> = ({
     cropAspectRatio,
     editedImagesChange,
 }) => {
-    console.log(editedImage)
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down(786));
 
-    const {crop, darken, rotate} = editedImage.newRules;
+    const { crop, darken } = editedImage.newRules;
 
     const cropImageElementRef = useRef<HTMLImageElement>(null);
 
     const [imageWidth, setImageWidth] = useState<number | null>(null);
     const [imageHeight, setImageHeight] = useState<number | null>(null);
 
-
     async function handleRotateClick() {
+
+        if (cropImageElementRef.current !== null) {
+            try {
+                const blob = await getRotatedImageBlob(cropImageElementRef.current);
+
                 editedImagesChange((old) => {
                     const newRotate = old.newRules.rotate + 90;
 
@@ -83,9 +87,16 @@ export const CropGeneral: FC<Props> = ({
                         newRules: {
                             ...old.newRules,
                             rotate: newRotate > 360 ? 0 : newRotate
-                }
+                        },
+                        url: (URL.createObjectURL(blob))
                     };
                 });
+            } catch (error) {
+                devlog("getRotatedImageBlob error", error);
+                enqueueSnackbar("Не удалось изменить изображение");
+            }
+        }
+
     }
 
     function handleSizeChange(value: number) {
@@ -163,6 +174,7 @@ export const CropGeneral: FC<Props> = ({
                         onLoad={(e) => {
                             setImageWidth(e.currentTarget.naturalWidth);
                             setImageHeight(e.currentTarget.naturalHeight);
+                            console.log("перелоад картинки")
 
                             if (cropImageElementRef.current) {
                                 editedImagesChange((old) => ({
@@ -195,19 +207,19 @@ export const CropGeneral: FC<Props> = ({
             </Box>
             <Box
                 sx={{
-                    mt: isMobile ? "20px": "48px",
+                    mt: isMobile ? "20px" : "48px",
                     display: "flex",
                     alignItems: "end",
                     justifyContent: "space-between",
                     padding: "0 20px",
-                    flexDirection: isMobile ? "column": "",
+                    flexDirection: isMobile ? "column" : "",
 
 
                 }}
             >
                 <IconButton onClick={handleRotateClick}
                     sx={{
-                        mb:"11px",
+                        mb: "11px",
                         p: "0",
 
                     }}
@@ -218,8 +230,8 @@ export const CropGeneral: FC<Props> = ({
                     sx={{
                         display: "flex",
                         justifyContent: "space-between",
-                        flexDirection: isMobile ? "column": "",
+                        flexDirection: isMobile ? "column" : "",
-                        width: isMobile ? "100%": "auto",
+                        width: isMobile ? "100%" : "auto",
                         gap: "24px",
                     }}
                 >
@@ -244,7 +256,7 @@ export const CropGeneral: FC<Props> = ({
                         />
                     </Box>
                     <Box>
-                        <Typography sx={{ color: "#9A9AAF", fontSize: "16px", ml:"-1px", }}>
+                        <Typography sx={{ color: "#9A9AAF", fontSize: "16px", ml: "-1px", }}>
                             Затемнение
                         </Typography>
                         <Slider

src/ui_kit/Modal/CropModal/CropModal.tsx

@@ -39,19 +39,13 @@ export const CropModal: FC<CropModalProps> = ({
   ), [currentStep])
 
   const editedImagesChange: EditedImagesChangeType = (changed) => {
-    console.log("n*")
     setEditedImages(old => {
-      console.log("n currentStepName")
-      console.log(currentStepName)
-      console.log("n old[currentStepName]")
-      console.log(old[currentStepName])
       const newData = { ...old };
       newData[currentStepName] = { ...old[currentStepName], ...changed(old[currentStepName]) };
-      console.log("newData[currentStepName]")
-      console.log(newData[currentStepName])
       return newData;
     })
   }
+  
   const resetImage = () => {
     editedImagesChange(() => ({
       url: originalImageUrl,

src/ui_kit/Modal/CropModal/WorkSpace.tsx

@@ -10,9 +10,8 @@ import DevaceDesktopIcon from "@ui_kit/Modal/CropModal/IconCropModal/DevaceDeskt
 import DevaceTabletIcon from "@ui_kit/Modal/CropModal/IconCropModal/DevaceTabletIcon";
 import DevaceMobileIcon from "@ui_kit/Modal/CropModal/IconCropModal/DevaceMobileIcon";
 import DevaceSmallIcon from "@ui_kit/Modal/CropModal/IconCropModal/DevaceSmallIcon";
-import DeleteIcon from "@mui/icons-material/Delete";
 
-import type { CropAspectRatio, CropOnDeleteIamgeClick, EditedImage, ScreenStepsTypes } from "@/model/CropModal/CropModal"
+import type { CropAspectRatio, EditedImage, ScreenStepsTypes } from "@/model/CropModal/CropModal"
 import { EditedImagesChangeType } from "./CropModal";
 import AmoTrash from "@/assets/icons/AmoTrash";
 
@@ -31,7 +30,7 @@ interface Props {
     currentStepName: ScreenStepsTypes;
 
     editedImagesChange: EditedImagesChangeType;
-    onDeleteClick: CropOnDeleteIamgeClick
+    onDeleteClick: () => void;
 };
 
 export default function WorkSpace({