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

modal update

Browse Source
This commit is contained in:
ArtChaos189 2023-09-07 15:20:59 +03:00
parent 551e492c0f
commit 49df352eb6
5 changed files with 537 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

277
src/ui_kit/Modal/CropModal2.tsx Normal file
View File

@ -0,0 +1,277 @@
import React, { useState, useRef, FC } from "react";
import ReactCrop, { Crop, PixelCrop } from "react-image-crop";
import { Box, Button, Modal, Slider, Typography, useMediaQuery, useTheme } from "@mui/material";
import { canvasPreview } from "./utils/canvasPreview";
import { useDebounceEffect } from "./utils/useDebounceEffect";
import { ResetIcon } from "@icons/ResetIcon";
import "react-image-crop/dist/ReactCrop.css";
interface Iprops {
opened: boolean;
onClose: React.Dispatch<React.SetStateAction<boolean>>;
}
export const CropModal2: FC<Iprops> = ({ opened, onClose }) => {
const [imgSrc, setImgSrc] = useState("");
const imgRef = useRef<HTMLImageElement>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
const previewCanvasRef = useRef<HTMLCanvasElement>(null);
const hiddenAnchorRef = useRef<HTMLAnchorElement>(null);
const blobUrlRef = useRef("");
const [crop, setCrop] = useState<Crop>();
const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
const [rotate, setRotate] = useState(0);
const [imageSize, setImageSize] = useState(580);
const [darken, setDarken] = useState(0);
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(786));
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: isMobile ? "343px" : "620px",
bgcolor: "background.paper",
boxShadow: 24,
padding: "20px",
borderRadius: "8px",
};
const styleSlider = {
width: isMobile ? "350px" : "250px",
color: "#7E2AEA",
height: "12px",
"& .MuiSlider-track": {
border: "none",
},
"& .MuiSlider-rail": {
backgroundColor: "#F2F3F7",
border: `1px solid "#9A9AAF"`,
},
"& .MuiSlider-thumb": {
height: 26,
width: 26,
border: `6px solid #7E2AEA`,
backgroundColor: "white",
boxShadow: `0px 0px 0px 3px white,
0px 4px 4px 3px #C3C8DD`,
"&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
boxShadow: `0px 0px 0px 3px white,
0px 4px 4px 3px #C3C8DD`,
},
},
};
const rotateImage = () => {
const newRotation = (rotate + 90) % 360;
setRotate(newRotation);
};
const onSelectFile = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.files && event.target.files.length > 0) {
setCrop(undefined);
const reader = new FileReader();
reader.addEventListener("load", () => setImgSrc(reader.result?.toString() || ""));
reader.readAsDataURL(event.target.files[0]);
}
};
const onDownloadCropClick = () => {
if (!previewCanvasRef.current) {
throw new Error("Crop canvas does not exist");
}
const canvasCopy = document.createElement("canvas");
const ctx = canvasCopy.getContext("2d");
canvasCopy.width = previewCanvasRef.current.width;
canvasCopy.height = previewCanvasRef.current.height;
ctx!.filter = `brightness(${100 - darken}%)`;
ctx!.drawImage(previewCanvasRef.current, 0, 0);
canvasCopy.toBlob((blob) => {
if (!blob) {
throw new Error("Failed to create blob");
}
if (blobUrlRef.current) {
URL.revokeObjectURL(blobUrlRef.current);
}
blobUrlRef.current = URL.createObjectURL(blob);
hiddenAnchorRef.current!.href = blobUrlRef.current;
hiddenAnchorRef.current!.click();
});
};
useDebounceEffect(
async () => {
if (completedCrop?.width && completedCrop?.height && imgRef.current && previewCanvasRef.current) {
canvasPreview(imgRef.current, previewCanvasRef.current, completedCrop, rotate);
}
},
100,
[completedCrop, rotate]
);
return (
<>
{completedCrop && (
<div>
<canvas
ref={previewCanvasRef}
style={{
display: "none",
zIndex: "-999",
border: "1px solid black",
objectFit: "contain",
width: completedCrop.width,
height: completedCrop.height,
}}
/>
</div>
)}
<div>
<a
href="#hidden"
ref={hiddenAnchorRef}
download
style={{
display: "none",
}}
>
Hidden download
</a>
</div>
<Modal
open={opened}
onClose={onClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<Box
sx={{
height: "320px",
padding: "10px",
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{!!imgSrc && (
<ReactCrop
crop={crop}
onChange={(_, percentCrop) => setCrop(percentCrop)}
onComplete={(c) => setCompletedCrop(c)}
maxWidth={500}
maxHeight={320}
>
<img
ref={imgRef}
alt="Crop me"
src={imgSrc}
style={{
filter: `brightness(${100 - darken}%)`,
transform: ` rotate(${rotate}deg)`,
maxWidth: "580px",
maxHeight: "320px",
}}
width={580 * (imageSize / 200)}
/>
</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?.width ? Math.round(crop.width) + "px" : ""}
</Typography>
</Box>
<Box sx={{ display: isMobile ? "block" : "flex", alignItems: "end", justifyContent: "space-between" }}>
<ResetIcon onClick={rotateImage} style={{ marginBottom: "10px", cursor: "pointer" }} />
<Box>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Размер</Typography>
<Slider
sx={styleSlider}
value={imageSize}
min={50}
max={200}
step={1}
onChange={(_, newValue) => {
setImageSize(newValue as number);
}}
/>
</Box>
<Box>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Затемнение</Typography>
<Slider
sx={styleSlider}
value={darken}
min={0}
max={100}
step={1}
onChange={(_, newValue) => setDarken(newValue as number)}
/>
</Box>
</Box>
<Box sx={{ marginTop: "40px", width: "100%", display: "flex", justifyContent: "end" }}>
<input
style={{ display: "none", zIndex: "-999" }}
ref={fileInputRef}
type="file"
accept="image/*"
onChange={onSelectFile}
/>
<Button
onClick={() => fileInputRef.current?.click()}
disableRipple
sx={{
width: "215px",
height: "48px",
color: "#7E2AEA",
borderRadius: "8px",
border: "1px solid #7E2AEA",
marginRight: "10px",
}}
>
Загрузить оригинал
</Button>
<Button
onClick={onDownloadCropClick}
disableRipple
sx={{
width: "149px",
height: "48px",
color: "white",
background: "#7E2AEA",
borderRadius: "8px",
}}
>
Обрезать
</Button>
</Box>
</Box>
</Modal>
</>
);
};

337
src/ui_kit/Modal/CroppingModal.tsx
View File

@ -17,7 +17,7 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
const isMobile = useMediaQuery(theme.breakpoints.down(786));
const style = {
position: "absolute" as "absolute",
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
@ -58,12 +58,22 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
const [completedCrop, setCompletedCrop] = useState<Crop | null>(null);
const [imageSize, setImageSize] = useState(580);
const [darken, setDarken] = useState(0);
const fileInputRef = useRef<HTMLInputElement>(null);
const [croppedImageUrl, setCroppedImageUrl] = useState<string | null>(null);
console.log(src);
const fileInputRef = useRef<HTMLInputElement>(null);
const onCropComplete = (crop: Crop) => {
setCompletedCrop(crop);
if (src) {
getCroppedAndDarkenedImg(src as string, crop, "cropped.jpeg", darken, rotation)
.then((croppedImageUrl) => {
setCroppedImageUrl(croppedImageUrl);
})
.catch((error) => {
console.error("Ошибка при обрезке и затемнении изображения:", error);
});
}
};
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@ -71,7 +81,7 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
if (event.target && event.target.result) {
if (event.target?.result) {
setSrc(event.target.result);
}
};
@ -81,16 +91,20 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
const handleDownloadClick = async () => {
if (completedCrop && src) {
const croppedImageUrl = await getCroppedAndDarkenedImg(src, completedCrop, "cropped.jpeg", darken);
const croppedImageUrl = await getCroppedAndDarkenedImg(src, completedCrop, "cropped.jpeg", darken, rotation);
setCroppedImageUrl(croppedImageUrl);
saveAs(croppedImageUrl, "cropped-image.jpeg");
}
};
const [widthImg, setWidthImg] = useState<number>(580);
const getCroppedAndDarkenedImg = (
image: string | ArrayBuffer,
crop: Crop,
fileName: string,
darken: number
darken: number,
rotation: number
): Promise<string> => {
const img = new Image();
img.src = image as string;
@ -99,17 +113,13 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
let scaleY = 219 / 320;
if (img.naturalWidth) {
scaleX = img.naturalWidth / 580;
scaleX = img.naturalWidth / widthImg;
}
if (img.naturalHeight) {
scaleY = img.naturalHeight / 320;
}
console.log(scaleX);
console.log(scaleY);
const canvas = document.createElement("canvas");
canvas.width = crop.width!;
canvas.height = crop.height!;
@ -119,19 +129,24 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
throw new Error("Canvas context is null");
}
// Применяем вращение к canvas
ctx.translate(crop.width / 2, crop.height / 2);
ctx.rotate((rotation * Math.PI) / 180);
ctx.translate(-crop.width / 2, -crop.height / 2);
ctx.drawImage(
img,
crop.x! * scaleX,
crop.y! * scaleY,
crop.width! * scaleX,
crop.height! * scaleY,
crop.x * scaleX,
crop.y * scaleY,
crop.width * scaleX,
crop.height * scaleY,
0,
0,
crop.width!,
crop.height!
crop.width,
crop.height
);
const imageData = ctx.getImageData(0, 0, crop.width!, crop.height!);
const imageData = ctx.getImageData(0, 0, crop.width, crop.height);
const newImageData = imageData.data.map((value, index) => {
if ((index + 1) % 4 === 0) {
@ -158,136 +173,172 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
});
};
const [rotation, setRotation] = useState(0);
const rotateImage = () => {
const newRotation = (rotation + 90) % 360;
setRotation(newRotation);
};
const handleSliderChange = (newValue: number) => {
setDarken(newValue);
getCroppedAndDarkenedImg(src as string, completedCrop!, "cropped.jpeg", newValue, rotation);
};
return (
<Modal
open={opened}
onClose={onClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<Box
sx={{
height: "320px",
padding: "10px",
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<ReactCrop crop={crop} onChange={(newCrop) => setCrop(newCrop)} onComplete={onCropComplete}>
{src && (
<img
src={src as string}
style={{
filter: `brightness(${100 - darken}%)`,
maxWidth: "580px",
}}
width={580 * (imageSize / 200)}
height={320}
alt="Crop"
/>
)}
</ReactCrop>
</Box>
<Box
sx={{
color: "#7E2AEA",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "16xp",
fontWeight: "600",
marginBottom: "50px",
}}
>
<Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>{Math.round(crop.width)}</Typography>x
<Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>{Math.round(crop.width)}</Typography>
px
</Box>
<Box sx={{ display: isMobile ? "block" : "flex", alignItems: "end", justifyContent: "space-between" }}>
<ResetIcon
onClick={() => {
setCrop((prevCrop: Crop) => ({
...prevCrop,
unit: "px",
x: 210,
y: 10,
width: 210,
height: 300,
}));
setDarken(0);
setImageSize(580);
}}
style={{ marginBottom: "10px", cursor: "pointer" }}
/>
<Box>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Размер</Typography>
<Slider
sx={styleSlider}
value={imageSize}
min={50}
max={200}
step={1}
onChange={(_, newValue) => setImageSize(newValue as number)}
/>
</Box>
<Box>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Затемнение</Typography>
<Slider
sx={styleSlider}
value={darken}
min={0}
max={100}
step={1}
onChange={(_, newValue) => setDarken(newValue as number)}
/>
</Box>
</Box>
<Box sx={{ marginTop: "40px", width: "100%", display: "flex", justifyContent: "end" }}>
<input
ref={fileInputRef}
type="file"
accept="image/*"
id="fileInput"
style={{ display: "none" }}
onChange={handleFileChange}
/>
<Button
onClick={() => fileInputRef.current?.click()}
disableRipple
<>
<img
src={croppedImageUrl as string}
alt="Cropped Area"
style={{
position: "absolute",
...completedCrop,
}}
/>
<Modal
open={opened}
onClose={onClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<Box
sx={{
height: "320px",
padding: "10px",
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<ReactCrop
minWidth={75}
minHeight={75}
maxWidth={580}
maxHeight={320}
crop={crop}
onChange={(newCrop) => setCrop(newCrop)}
onComplete={onCropComplete}
>
{src && (
<img
src={src as string}
onClick={(e) => console.log(e.currentTarget)}
style={{
filter: `brightness(${100 - darken}%)`,
maxWidth: "580px",
transform: `rotate(${rotation}deg)`,
}}
width={580 * (imageSize / 200)}
height={320}
alt="Crop"
/>
)}
</ReactCrop>
</Box>
<Box
sx={{
width: "215px",
height: "48px",
color: "#7E2AEA",
borderRadius: "8px",
border: "1px solid #7E2AEA",
marginRight: "10px",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "16xp",
fontWeight: "600",
marginBottom: "50px",
}}
>
Загрузить оригинал
</Button>
<Button
onClick={handleDownloadClick}
disableRipple
sx={{
width: "149px",
height: "48px",
color: "white",
background: "#7E2AEA",
borderRadius: "8px",
}}
>
Обрезать
</Button>
<Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>{Math.round(crop.width)}</Typography>x
<Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>{Math.round(crop.width)}</Typography>
px
</Box>
<button onClick={rotateImage}>Повернуть на 90 градусов</button>
<Box sx={{ display: isMobile ? "block" : "flex", alignItems: "end", justifyContent: "space-between" }}>
<ResetIcon
onClick={() => {
setCrop((prevCrop: Crop) => ({
...prevCrop,
unit: "px",
x: 210,
y: 10,
width: 210,
height: 300,
}));
setRotation(0);
setDarken(0);
setImageSize(580);
}}
style={{ marginBottom: "10px", cursor: "pointer" }}
/>
<Box>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Размер</Typography>
<Slider
sx={styleSlider}
value={imageSize}
min={50}
max={200}
step={1}
onChange={(_, newValue) => {
setImageSize(newValue as number);
setWidthImg(580 * (imageSize / 200));
}}
/>
</Box>
<Box>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Затемнение</Typography>
<Slider
sx={styleSlider}
value={darken}
min={0}
max={100}
step={1}
onChange={(_, newValue) => handleSliderChange(newValue as number)}
/>
</Box>
</Box>
<Box sx={{ marginTop: "40px", width: "100%", display: "flex", justifyContent: "end" }}>
<input
ref={fileInputRef}
type="file"
accept="image/*"
id="fileInput"
style={{ display: "none" }}
onChange={handleFileChange}
/>
<Button
onClick={() => fileInputRef.current?.click()}
disableRipple
sx={{
width: "215px",
height: "48px",
color: "#7E2AEA",
borderRadius: "8px",
border: "1px solid #7E2AEA",
marginRight: "10px",
}}
>
Загрузить оригинал
</Button>
<Button
onClick={handleDownloadClick}
disableRipple
sx={{
width: "149px",
height: "48px",
color: "white",
background: "#7E2AEA",
borderRadius: "8px",
}}
>
Обрезать
</Button>
</Box>
</Box>
</Box>
</Modal>
</Modal>
</>
);
};

4
src/ui_kit/Modal/ImageCrop.tsx
View File

@ -1,13 +1,15 @@
import { Box, Button } from "@mui/material";
import { FC, useState } from "react";
import { CroppingModal } from "./CroppingModal";
import { CropModal2 } from "./CropModal2";
const ImageCrop: FC = () => {
const [opened, setOpened] = useState<boolean>(false);
return (
<Box>
<CroppingModal opened={opened} onClose={() => setOpened(false)} />
{/* <CroppingModal opened={opened} onClose={() => setOpened(false)} /> */}
<Button onClick={() => setOpened(true)}>Открыть модалку</Button>
<CropModal2 opened={opened} onClose={() => setOpened(false)} />
</Box>
);
};

50
src/ui_kit/Modal/utils/canvasPreview.ts Normal file
View File

@ -0,0 +1,50 @@
import { PixelCrop } from "react-image-crop";
const TO_RADIANS = Math.PI / 180;
export async function canvasPreview(image: HTMLImageElement, canvas: HTMLCanvasElement, crop: PixelCrop, rotate = 0) {
const scale = 1;
const ctx = canvas.getContext("2d");
if (!ctx) {
throw new Error("No 2d context");
}
const scaleX = image.naturalWidth / image.width;
const scaleY = image.naturalHeight / image.height;
// devicePixelRatio slightly increases sharpness on retina devices
// at the expense of slightly slower render times and needing to
// size the image back down if you want to download/upload and be
// true to the images natural size.
const pixelRatio = window.devicePixelRatio;
// const pixelRatio = 1
canvas.width = Math.floor(crop.width * scaleX * pixelRatio);
canvas.height = Math.floor(crop.height * scaleY * pixelRatio);
ctx.scale(pixelRatio, pixelRatio);
ctx.imageSmoothingQuality = "high";
const cropX = crop.x * scaleX;
const cropY = crop.y * scaleY;
const rotateRads = rotate * TO_RADIANS;
const centerX = image.naturalWidth / 2;
const centerY = image.naturalHeight / 2;
ctx.save();
// 5) Move the crop origin to the canvas origin (0,0)
ctx.translate(-cropX, -cropY);
// 4) Move the origin to the center of the original position
ctx.translate(centerX, centerY);
// 3) Rotate around the origin
ctx.rotate(rotateRads);
// 2) Scale the image
ctx.scale(scale, scale);
// 1) Move the center of the image to the origin (0,0)
ctx.translate(-centerX, -centerY);
ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight, 0, 0, image.naturalWidth, image.naturalHeight);
ctx.restore();
}

13
src/ui_kit/Modal/utils/useDebounceEffect.ts Normal file
View File

@ -0,0 +1,13 @@
import { useEffect, DependencyList } from "react";
export function useDebounceEffect(fn: () => void, waitTime: number, deps?: DependencyList) {
useEffect(() => {
const time = setTimeout(() => {
fn();
}, waitTime);
return () => {
clearTimeout(time);
};
}, [deps, fn, waitTime]);
}