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 = () => (
<svg 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 2.25V18H21.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18 15V6H9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18 21.75V18" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
export const CropIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<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" 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>
);

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

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