SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nastya 2024-11-03 11:58:54 +03:00
parent f43ef82c14
commit 2b87ec6973
4 changed files with 37 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/model/CropModal/CropModal.ts
View File

@ -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";

54
src/ui_kit/Modal/CropModal/CropGeneral.tsx
View File

@ -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,29 +64,39 @@ 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() {
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<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": "",
width: isMobile ? "100%": "auto",
flexDirection: isMobile ? "column" : "",
width: isMobile ? "100%" : "auto",
gap: "24px",
}}
>
@ -244,14 +256,14 @@ 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
sx={[
styleSlider,
{
width: isMobile ? undefined : "248px",
},
]}

8
src/ui_kit/Modal/CropModal/CropModal.tsx
View File

@ -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,

5
src/ui_kit/Modal/CropModal/WorkSpace.tsx
View File

@ -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({