137 lines
4.1 KiB
JavaScript
137 lines
4.1 KiB
JavaScript
import * as React from 'react';
|
|
import Button from '@mui/material/Button';
|
|
import Dialog from '@mui/material/Dialog';
|
|
import AppBar from '@mui/material/AppBar';
|
|
import Toolbar from '@mui/material/Toolbar';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Typography from '@mui/material/Typography';
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|
import Slide from '@mui/material/Slide';
|
|
import ZoomInIcon from '@mui/icons-material/ZoomIn';
|
|
import ZoomOutIcon from '@mui/icons-material/ZoomOut';
|
|
import RotateRightIcon from '@mui/icons-material/RotateRight';
|
|
|
|
const Transition = React.forwardRef(function Transition(props, ref) {
|
|
return <Slide direction="up" ref={ref} {...props} />;
|
|
});
|
|
|
|
export default function ImageDialog({ imagePath, setIsDialogOpen }) {
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
|
|
const [scaleWidthValue, setScaleWidthValue] = React.useState(80);
|
|
const [rotateValue, setRotateValue] = React.useState(0);
|
|
|
|
const handleClickOpen = () => {
|
|
setOpen(true);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setOpen(false);
|
|
setIsDialogOpen(false);
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
handleClickOpen();
|
|
}, []);
|
|
|
|
|
|
const ZoomInImage = () => {
|
|
console.log("Zooming In Image ....");
|
|
const elements = document.getElementsByClassName("scanned-img");
|
|
for (var ele of elements) {
|
|
console.log("Ele is : ", ele);
|
|
const newScaleWidthValue = scaleWidthValue + 10;
|
|
setScaleWidthValue(newScaleWidthValue);
|
|
// ele.style.transform = `scale(${newScaleValue})`;
|
|
ele.style.width = `${newScaleWidthValue}%`;
|
|
}
|
|
};
|
|
|
|
const ZoomOutImage = () => {
|
|
console.log("Zooming Out Image ....");
|
|
const elements = document.getElementsByClassName("scanned-img");
|
|
for (var ele of elements) {
|
|
console.log("Ele is : ", ele);
|
|
const newScaleWidthValue = scaleWidthValue - 10;
|
|
setScaleWidthValue(newScaleWidthValue);
|
|
// ele.style.transform = `scale(${newScaleValue})`;
|
|
ele.style.width = `${newScaleWidthValue}%`;
|
|
}
|
|
};
|
|
|
|
const RotateImageLeft = () => {
|
|
const elements = document.getElementsByClassName("scanned-img");
|
|
for (var ele of elements) {
|
|
console.log("Ele is : ", ele);
|
|
const newRotateValue = rotateValue - 90;
|
|
setRotateValue(newRotateValue);
|
|
ele.style.transform = `rotate(${newRotateValue}deg)`;
|
|
}
|
|
};
|
|
|
|
const RotateImageRight = () => {
|
|
const elements = document.getElementsByClassName("scanned-img");
|
|
for (var ele of elements) {
|
|
console.log("Ele is : ", ele);
|
|
const newRotateValue = rotateValue + 90;
|
|
setRotateValue(newRotateValue);
|
|
ele.style.transform = `rotate(${newRotateValue}deg)`;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Dialog
|
|
fullScreen
|
|
open={open}
|
|
onClose={handleClose}
|
|
TransitionComponent={Transition}
|
|
>
|
|
<AppBar sx={{ position: 'relative' }}>
|
|
<Toolbar>
|
|
<IconButton
|
|
edge="start"
|
|
color="inherit"
|
|
onClick={handleClose}
|
|
aria-label="close"
|
|
>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
<IconButton
|
|
color="inherit"
|
|
onClick={ZoomInImage}
|
|
aria-label="zoom in"
|
|
>
|
|
<ZoomInIcon />
|
|
</IconButton>
|
|
<IconButton
|
|
color="inherit"
|
|
onClick={ZoomOutImage}
|
|
aria-label="zoom out"
|
|
>
|
|
<ZoomOutIcon />
|
|
</IconButton>
|
|
<IconButton
|
|
color="inherit"
|
|
onClick={RotateImageLeft}
|
|
aria-label="rotate"
|
|
>
|
|
<RotateRightIcon />
|
|
</IconButton>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', overflow:'auto' }}>
|
|
<img
|
|
className="scanned-img"
|
|
style={{marginTop:'60%'}}
|
|
width={`${scaleWidthValue}%`}
|
|
src={`https://docs.exampaper.vidh.ai/${imagePath}`}
|
|
alt="S3 Image"
|
|
/>
|
|
</div>
|
|
</Dialog>
|
|
</React.Fragment>
|
|
);
|
|
}
|