diff --git a/src/model/CropModal/CropModal.ts b/src/model/CropModal/CropModal.ts index 62287fa7..45cee529 100644 --- a/src/model/CropModal/CropModal.ts +++ b/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"; diff --git a/src/ui_kit/Modal/CropModal/CropGeneral.tsx b/src/ui_kit/Modal/CropModal/CropGeneral.tsx index 6538e517..eb085e2a 100644 --- a/src/ui_kit/Modal/CropModal/CropGeneral.tsx +++ b/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 = { color: "#7E2AEA", @@ -63,29 +64,39 @@ export const CropGeneral: FC = ({ 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(null); const [imageWidth, setImageWidth] = useState(null); const [imageHeight, setImageHeight] = useState(null); - async function handleRotateClick() { - editedImagesChange((old) => { - const newRotate = old.newRules.rotate + 90; - return { - newRules: { - ...old.newRules, - rotate: newRotate > 360 ? 0 : newRotate - } - }; - }); + if (cropImageElementRef.current !== null) { + try { + const blob = await getRotatedImageBlob(cropImageElementRef.current); + + editedImagesChange((old) => { + const newRotate = old.newRules.rotate + 90; + + return { + 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 = ({ 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 = ({ = ({ sx={{ display: "flex", justifyContent: "space-between", - flexDirection: isMobile ? "column": "", - width: isMobile ? "100%": "auto", + flexDirection: isMobile ? "column" : "", + width: isMobile ? "100%" : "auto", gap: "24px", }} > @@ -244,14 +256,14 @@ export const CropGeneral: FC = ({ /> - + Затемнение = ({ ), [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, diff --git a/src/ui_kit/Modal/CropModal/WorkSpace.tsx b/src/ui_kit/Modal/CropModal/WorkSpace.tsx index 86fc0800..c3950509 100644 --- a/src/ui_kit/Modal/CropModal/WorkSpace.tsx +++ b/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({