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

update Location of buttons in the image settings CropModal

Browse Source
This commit is contained in:
ArtChaos189 2023-12-16 02:02:51 +03:00
parent c51cdbea67
commit 0cc07e48f8
2 changed files with 312 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/assets/icons/CropIcon.tsx
View File

@ -1,40 +1,10 @@
import { FC, SVGProps } from "react"; import { FC, SVGProps } from "react";
export const CropIcon: FC = () => ( export const CropIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
xmlns="http://www.w3.org/2000/svg" <path d="M6 6H2.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
width="24" <path d="M6 2.25V18H21.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
height="24" <path d="M18 15V6H9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
viewBox="0 0 24 24" <path d="M18 21.75V18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
fill="none"
>
<path
d="M6 6H2.25"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6 2.25V18H21.75"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18 15V6H9"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18 21.75V18"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg> </svg>
); );

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

@ -1,330 +1,344 @@
import { CropIcon } from "@icons/CropIcon"; import { CropIcon } from "@icons/CropIcon";
import { ResetIcon } from "@icons/ResetIcon"; import { ResetIcon } from "@icons/ResetIcon";
import { import {
Box, Box,
Button, Button,
IconButton, IconButton,
Modal, Modal,
Slider, Slider,
SxProps, SxProps,
Theme, Theme,
Typography, Typography,
useMediaQuery, useMediaQuery,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { FC, useMemo, useRef, useState } from "react"; import { FC, useMemo, useRef, useState } from "react";
import ReactCrop, { Crop, PixelCrop } from "react-image-crop"; import ReactCrop, { Crop, PixelCrop } from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css"; import "react-image-crop/dist/ReactCrop.css";
import { canvasPreview } from "./utils/canvasPreview"; import { canvasPreview } from "./utils/canvasPreview";
const styleSlider: SxProps<Theme> = { const styleSlider: SxProps<Theme> = {
color: "#7E2AEA", color: "#7E2AEA",
height: "12px", height: "12px",
"& .MuiSlider-track": { "& .MuiSlider-track": {
border: "none", border: "none",
}, },
"& .MuiSlider-rail": { "& .MuiSlider-rail": {
backgroundColor: "#F2F3F7", backgroundColor: "#F2F3F7",
border: `1px solid #9A9AAF`, border: `1px solid #9A9AAF`,
}, },
"& .MuiSlider-thumb": { "& .MuiSlider-thumb": {
height: 26, height: 26,
width: 26, width: 26,
border: `6px solid #7E2AEA`, border: `6px solid #7E2AEA`,
backgroundColor: "white", backgroundColor: "white",
boxShadow: `0px 0px 0px 3px white, boxShadow: `0px 0px 0px 3px white,
0px 4px 4px 3px #C3C8DD`, 0px 4px 4px 3px #C3C8DD`,
"&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": { "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
boxShadow: `0px 0px 0px 3px white, boxShadow: `0px 0px 0px 3px white,
0px 4px 4px 3px #C3C8DD`, 0px 4px 4px 3px #C3C8DD`,
},
}, },
},
}; };
interface Props { interface Props {
isOpen: boolean; isOpen: boolean;
imageBlob: Blob | null; imageBlob: Blob | null;
originalImageUrl: string | null; originalImageUrl: string | null;
setCropModalImageBlob: (imageBlob: Blob) => void; setCropModalImageBlob: (imageBlob: Blob) => void;
onClose: () => void; onClose: () => void;
onSaveImageClick: (imageBlob: Blob) => void; onSaveImageClick: (imageBlob: Blob) => void;
} }
export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setCropModalImageBlob, onSaveImageClick, onClose }) => { export const CropModal: FC<Props> = ({
const theme = useTheme(); isOpen,
const [crop, setCrop] = useState<Crop>(); imageBlob,
const [completedCrop, setCompletedCrop] = useState<PixelCrop>(); originalImageUrl,
const [darken, setDarken] = useState(0); setCropModalImageBlob,
const [rotate, setRotate] = useState(0); onSaveImageClick,
const [width, setWidth] = useState<number>(240); onClose,
const cropImageElementRef = useRef<HTMLImageElement>(null); }) => {
const isMobile = useMediaQuery(theme.breakpoints.down(786)); const theme = useTheme();
const [crop, setCrop] = useState<Crop>();
const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
const [darken, setDarken] = useState(0);
const [rotate, setRotate] = useState(0);
const [width, setWidth] = useState<number>(240);
const cropImageElementRef = useRef<HTMLImageElement>(null);
const isMobile = useMediaQuery(theme.breakpoints.down(786));
const imageUrl = useMemo(() => imageBlob && URL.createObjectURL(imageBlob), [imageBlob]); const imageUrl = useMemo(() => imageBlob && URL.createObjectURL(imageBlob), [imageBlob]);
const handleCropClick = async () => { const handleCropClick = async () => {
if (!completedCrop) throw new Error("No completed crop"); if (!completedCrop) throw new Error("No completed crop");
if (!cropImageElementRef.current) throw new Error("No image"); if (!cropImageElementRef.current) throw new Error("No image");
const canvasCopy = document.createElement("canvas"); const canvasCopy = document.createElement("canvas");
const ctx = canvasCopy.getContext("2d"); const ctx = canvasCopy.getContext("2d");
if (!ctx) throw new Error("No 2d context"); if (!ctx) throw new Error("No 2d context");
canvasCopy.width = completedCrop.width; canvasCopy.width = completedCrop.width;
canvasCopy.height = completedCrop.height; canvasCopy.height = completedCrop.height;
ctx.filter = `brightness(${100 - darken}%)`; ctx.filter = `brightness(${100 - darken}%)`;
await canvasPreview(cropImageElementRef.current, canvasCopy, completedCrop, rotate); await canvasPreview(cropImageElementRef.current, canvasCopy, completedCrop, rotate);
canvasCopy.toBlob((blob) => { canvasCopy.toBlob((blob) => {
if (!blob) throw new Error("Failed to create blob"); if (!blob) throw new Error("Failed to create blob");
setCropModalImageBlob(blob); setCropModalImageBlob(blob);
setCrop(undefined); setCrop(undefined);
setCompletedCrop(undefined); setCompletedCrop(undefined);
}); });
}; };
function handleSaveClick() { function handleSaveClick() {
if (imageBlob) onSaveImageClick?.(imageBlob); if (imageBlob) onSaveImageClick?.(imageBlob);
setCrop(undefined); setCrop(undefined);
setCompletedCrop(undefined); setCompletedCrop(undefined);
onClose(); onClose();
}
async function handleLoadOriginalImage() {
if (!originalImageUrl) return;
const response = await fetch(originalImageUrl);
const blob = await response.blob();
setCropModalImageBlob(blob);
setCrop(undefined);
setCompletedCrop(undefined);
}
const getImageSize = () => {
if (cropImageElementRef.current) {
const imageWidth = cropImageElementRef.current.naturalWidth;
const imageHeight = cropImageElementRef.current.naturalHeight;
const aspect = imageWidth / imageHeight;
if (aspect <= 1.333) {
setWidth(240);
}
if (aspect >= 1.5) {
setWidth(580);
}
if (aspect >= 1.778) {
setWidth(580);
}
} }
};
async function handleLoadOriginalImage() { return (
if (!originalImageUrl) return; <Modal
open={isOpen}
const response = await fetch(originalImageUrl); onClose={onClose}
const blob = await response.blob(); aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
setCropModalImageBlob(blob); >
setCrop(undefined); <Box
setCompletedCrop(undefined); sx={{
} position: "absolute",
top: "50%",
const getImageSize = () => { left: "50%",
if (cropImageElementRef.current) { transform: "translate(-50%, -50%)",
const imageWidth = cropImageElementRef.current.naturalWidth; bgcolor: "background.paper",
const imageHeight = cropImageElementRef.current.naturalHeight; boxShadow: 24,
padding: "20px",
const aspect = imageWidth / imageHeight; borderRadius: "8px",
width: isMobile ? "343px" : "620px",
if (aspect <= 1.333) { }}
setWidth(240); >
} <Box
if (aspect >= 1.5) { sx={{
setWidth(580); height: "320px",
} padding: "10px",
if (aspect >= 1.778) { backgroundSize: "cover",
setWidth(580); backgroundRepeat: "no-repeat",
} display: "flex",
} alignItems: "center",
}; justifyContent: "center",
}}
return (
<Modal
open={isOpen}
onClose={onClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
> >
<Box sx={{ {imageUrl && (
position: "absolute", <ReactCrop
top: "50%", crop={crop}
left: "50%", onChange={(_, percentCrop) => setCrop(percentCrop)}
transform: "translate(-50%, -50%)", onComplete={(c) => setCompletedCrop(c)}
bgcolor: "background.paper", maxWidth={500}
boxShadow: 24, minWidth={50}
padding: "20px", maxHeight={320}
borderRadius: "8px", minHeight={50}
width: isMobile ? "343px" : "620px", >
}}> <img
<Box onLoad={getImageSize}
sx={{ ref={cropImageElementRef}
height: "320px", alt="Crop me"
padding: "10px", src={imageUrl}
backgroundSize: "cover", style={{
backgroundRepeat: "no-repeat", filter: `brightness(${100 - darken}%)`,
display: "flex", transform: ` rotate(${rotate}deg)`,
alignItems: "center", maxWidth: "580px",
justifyContent: "center", maxHeight: "320px",
}} }}
> width={width}
{imageUrl && ( />
<ReactCrop </ReactCrop>
crop={crop} )}
onChange={(_, percentCrop) => setCrop(percentCrop)} </Box>
onComplete={(c) => setCompletedCrop(c)} <Box
maxWidth={500} sx={{
minWidth={50} color: "#7E2AEA",
maxHeight={320} display: "flex",
minHeight={50} alignItems: "center",
> justifyContent: "center",
<img fontSize: "16xp",
onLoad={getImageSize} fontWeight: "600",
ref={cropImageElementRef} marginBottom: "50px",
alt="Crop me" }}
src={imageUrl} >
style={{ <Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
filter: `brightness(${100 - darken}%)`, {crop?.width ? Math.round(crop.width) + "px" : ""}
transform: ` rotate(${rotate}deg)`, </Typography>
maxWidth: "580px", <Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
maxHeight: "320px", {crop?.height ? Math.round(crop.height) + "px" : ""}
}} </Typography>
width={width} </Box>
/>
</ReactCrop>
)}
</Box>
<Box
sx={{
color: "#7E2AEA",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "16xp",
fontWeight: "600",
marginBottom: "50px",
}}
>
<Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
{crop?.width ? Math.round(crop.width) + "px" : ""}
</Typography>
<Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
{crop?.height ? Math.round(crop.height) + "px" : ""}
</Typography>
</Box>
<Box <Box
sx={{ sx={{
display: isMobile ? "block" : "flex", display: isMobile ? "block" : "flex",
alignItems: "end", alignItems: "end",
justifyContent: "space-between", justifyContent: "space-between",
}} }}
> >
<IconButton onClick={() => setRotate(r => (r + 90) % 360)}> <IconButton onClick={() => setRotate((r) => (r + 90) % 360)}>
<ResetIcon /> <ResetIcon />
</IconButton> </IconButton>
<Box> <Box>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}> <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Размер</Typography>
Размер <Slider
</Typography> sx={[
<Slider styleSlider,
sx={[styleSlider, { {
width: isMobile ? "350px" : "250px", width: isMobile ? "350px" : "250px",
}]} },
value={width} ]}
min={50} value={width}
max={580} min={50}
step={1} max={580}
onChange={(_, newValue) => { step={1}
setWidth(newValue as number); onChange={(_, newValue) => {
}} setWidth(newValue as number);
/> }}
</Box> />
<Box> </Box>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}> <Box>
Затемнение <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Затемнение</Typography>
</Typography> <Slider
<Slider sx={[
sx={[styleSlider, { styleSlider,
width: isMobile ? "350px" : "250px", {
}]} width: isMobile ? "350px" : "250px",
value={darken} },
min={0} ]}
max={100} value={darken}
step={1} min={0}
onChange={(_, newValue) => setDarken(newValue as number)} max={100}
/> step={1}
</Box> onChange={(_, newValue) => setDarken(newValue as number)}
</Box> />
<Box </Box>
sx={{ </Box>
marginTop: "40px", <Box
width: "100%", sx={{
display: "flex", marginTop: "40px",
}} width: "100%",
> display: "flex",
<Button gap: "10px",
onClick={handleSaveClick} }}
disableRipple >
data-cy="crop-modal-save-button" <Button
sx={{ onClick={handleCropClick}
height: "48px", disableRipple
color: "#7E2AEA", disabled={!completedCrop}
borderRadius: "8px", sx={{
border: "1px solid #7E2AEA", padding: "10px 20px",
marginRight: "10px", borderRadius: "8px",
px: "20px", background: theme.palette.brightPurple.main,
}} fontSize: "18px",
>Сохранить</Button> color: "#7E2AEA",
<Button border: `1px solid ${!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"}`,
onClick={handleLoadOriginalImage} backgroundColor: "transparent",
disableRipple }}
disabled={!originalImageUrl} >
sx={{ <CropIcon color={!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"} />
width: "215px", Обрезать
height: "48px", </Button>
color: "#7E2AEA", <Button
borderRadius: "8px", onClick={handleLoadOriginalImage}
border: "1px solid #7E2AEA", disableRipple
marginRight: "10px", disabled={!originalImageUrl}
ml: "auto", sx={{
}} width: "215px",
> height: "48px",
Загрузить оригинал color: "#7E2AEA",
</Button> borderRadius: "8px",
<Button border: "1px solid #7E2AEA",
onClick={handleCropClick} }}
disableRipple >
variant="contained" Загрузить оригинал
disabled={!completedCrop} </Button>
sx={{ <Button
padding: "10px 20px", onClick={handleSaveClick}
borderRadius: "8px", disableRipple
background: theme.palette.brightPurple.main, variant="contained"
fontSize: "18px", data-cy="crop-modal-save-button"
}} sx={{
> height: "48px",
<CropIcon /> borderRadius: "8px",
Обрезать border: "1px solid #7E2AEA",
</Button> marginRight: "10px",
</Box> px: "20px",
</Box> ml: "auto",
</Modal> }}
); >
Сохранить
</Button>
</Box>
</Box>
</Modal>
);
}; };
export function useCropModalState(initialOpenState = false) { export function useCropModalState(initialOpenState = false) {
const [isCropModalOpen, setOpened] = useState(initialOpenState); const [isCropModalOpen, setOpened] = useState(initialOpenState);
const [imageBlob, setCropModalImageBlob] = useState<Blob | null>(null); const [imageBlob, setCropModalImageBlob] = useState<Blob | null>(null);
const [originalImageUrl, setOriginalImageUrl] = useState<string | null>(null); const [originalImageUrl, setOriginalImageUrl] = useState<string | null>(null);
const closeCropModal = () => { const closeCropModal = () => {
setOpened(false); setOpened(false);
setCropModalImageBlob(null); setCropModalImageBlob(null);
setOriginalImageUrl(null); setOriginalImageUrl(null);
}; };
async function openCropModal(image: Blob | string, originalImageUrl: string | null | undefined = null) { async function openCropModal(image: Blob | string, originalImageUrl: string | null | undefined = null) {
if (typeof image === "string") { if (typeof image === "string") {
const response = await fetch(image); const response = await fetch(image);
image = await response.blob(); image = await response.blob();
}
setCropModalImageBlob(image);
setOriginalImageUrl(originalImageUrl);
setOpened(true);
} }
return { setCropModalImageBlob(image);
isCropModalOpen, setOriginalImageUrl(originalImageUrl);
openCropModal, setOpened(true);
closeCropModal, }
imageBlob,
setCropModalImageBlob, return {
originalImageUrl, isCropModalOpen,
} as const; openCropModal,
closeCropModal,
imageBlob,
setCropModalImageBlob,
originalImageUrl,
} as const;
} }