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

aspect update

Browse Source
This commit is contained in:
ArtChaos189 2023-09-07 18:09:50 +03:00
parent 8044501fc9
commit 7152a2b1d7
2 changed files with 41 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

40
src/ui_kit/Modal/CropModal2.tsx
View File

@ -8,6 +8,7 @@ import { useDebounceEffect } from "./utils/useDebounceEffect";
import { ResetIcon } from "@icons/ResetIcon"; import { ResetIcon } from "@icons/ResetIcon";
import "react-image-crop/dist/ReactCrop.css"; import "react-image-crop/dist/ReactCrop.css";
import { CropIcon } from "@icons/CropIcon";
interface Iprops { interface Iprops {
opened: boolean; opened: boolean;
@ -30,7 +31,7 @@ export const CropModal2: FC<Iprops> = ({ opened, onClose }) => {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(786)); const isMobile = useMediaQuery(theme.breakpoints.down(786));
const style = { const styleModal = {
position: "absolute", position: "absolute",
top: "50%", top: "50%",
left: "50%", left: "50%",
@ -51,7 +52,7 @@ export const CropModal2: FC<Iprops> = ({ opened, onClose }) => {
}, },
"& .MuiSlider-rail": { "& .MuiSlider-rail": {
backgroundColor: "#F2F3F7", backgroundColor: "#F2F3F7",
border: `1px solid "#9A9AAF"`, border: `1px solid #9A9AAF`,
}, },
"& .MuiSlider-thumb": { "& .MuiSlider-thumb": {
height: 26, height: 26,
@ -116,6 +117,31 @@ export const CropModal2: FC<Iprops> = ({ opened, onClose }) => {
[completedCrop, rotate] [completedCrop, rotate]
); );
const [width, setWidth] = useState<number>();
const getImageSize = () => {
if (imgRef.current) {
const imageWidth = imgRef.current.naturalWidth;
const imageHeight = imgRef.current.naturalHeight;
console.log("Ширина изображения:", imageWidth);
console.log("Высота изображения:", imageHeight);
const aspect = imageWidth / imageHeight;
console.log(aspect);
if (aspect <= 1.333) {
setWidth(240);
}
if (aspect >= 1.5) {
setWidth(580);
}
if (aspect >= 1.778) {
setWidth(580);
}
}
};
return ( return (
<> <>
<Modal <Modal
@ -124,7 +150,7 @@ export const CropModal2: FC<Iprops> = ({ opened, onClose }) => {
aria-labelledby="modal-modal-title" aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description" aria-describedby="modal-modal-description"
> >
<Box sx={style}> <Box sx={styleModal}>
<Box <Box
sx={{ sx={{
height: "320px", height: "320px",
@ -137,7 +163,7 @@ export const CropModal2: FC<Iprops> = ({ opened, onClose }) => {
justifyContent: "center", justifyContent: "center",
}} }}
> >
{!!imgSrc && ( {imgSrc && (
<ReactCrop <ReactCrop
crop={crop} crop={crop}
onChange={(_, percentCrop) => setCrop(percentCrop)} onChange={(_, percentCrop) => setCrop(percentCrop)}
@ -146,6 +172,7 @@ export const CropModal2: FC<Iprops> = ({ opened, onClose }) => {
maxHeight={320} maxHeight={320}
> >
<img <img
onLoad={getImageSize}
ref={imgRef} ref={imgRef}
alt="Crop me" alt="Crop me"
src={imgSrc} src={imgSrc}
@ -155,7 +182,7 @@ export const CropModal2: FC<Iprops> = ({ opened, onClose }) => {
maxWidth: "580px", maxWidth: "580px",
maxHeight: "320px", maxHeight: "320px",
}} }}
width={580 * (imageSize / 200)} width={(width as number) * (imageSize / 200)}
/> />
</ReactCrop> </ReactCrop>
)} )}
@ -176,7 +203,7 @@ export const CropModal2: FC<Iprops> = ({ opened, onClose }) => {
{crop?.width ? Math.round(crop.width) + "px" : ""} {crop?.width ? Math.round(crop.width) + "px" : ""}
</Typography> </Typography>
<Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}> <Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
{crop?.width ? Math.round(crop.width) + "px" : ""} {crop?.height ? Math.round(crop.height) + "px" : ""}
</Typography> </Typography>
</Box> </Box>
@ -240,6 +267,7 @@ export const CropModal2: FC<Iprops> = ({ opened, onClose }) => {
borderRadius: "8px", borderRadius: "8px",
}} }}
> >
<CropIcon style={{ marginRight: "6px" }} />
Обрезать Обрезать
</Button> </Button>
</Box> </Box>