81 lines
2.1 KiB
JavaScript
81 lines
2.1 KiB
JavaScript
import { useState } from "react";
|
|
|
|
|
|
const PreviewDocument = ({ imageUrl }) => {
|
|
const [loading, setLoading] = useState(true);
|
|
const [rotation, setRotation] = useState(0);
|
|
const [scale, setScale] = useState(1);
|
|
|
|
const zoomIn = () => setScale((prev) => Math.min(prev + 0.2, 3));
|
|
const zoomOut = () => setScale((prev) => Math.max(prev - 0.2, 0.4));
|
|
const resetAll = () => {
|
|
setRotation(0);
|
|
setScale(1);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="d-flex justify-content-start gap-3 mb-2">
|
|
<i
|
|
className="bx bx-rotate-right cursor-pointer fs-4"
|
|
title="Rotate"
|
|
onClick={() => setRotation((prev) => prev + 90)}
|
|
></i>
|
|
|
|
<i
|
|
className="bx bx-zoom-in cursor-pointer fs-4"
|
|
title="Zoom In"
|
|
onClick={zoomIn}
|
|
></i>
|
|
|
|
<i
|
|
className="bx bx-zoom-out cursor-pointer fs-4"
|
|
title="Zoom Out"
|
|
onClick={zoomOut}
|
|
></i>
|
|
</div>
|
|
|
|
<div
|
|
className="position-relative d-flex flex-column justify-content-center align-items-center overflow-hidden"
|
|
style={{ minHeight: "80vh" }}
|
|
>
|
|
{loading && (
|
|
<div className="text-secondary text-center mb-2">
|
|
Loading...
|
|
</div>
|
|
)}
|
|
|
|
<div className="mb-3 d-flex justify-content-center align-items-center">
|
|
<img
|
|
src={imageUrl}
|
|
alt="Full View"
|
|
className="img-fluid"
|
|
style={{
|
|
maxHeight: "80vh",
|
|
objectFit: "contain",
|
|
display: loading ? "none" : "block",
|
|
transform: `rotate(${rotation}deg) scale(${scale})`,
|
|
transition: "transform 0.3s ease",
|
|
cursor: "grab",
|
|
}}
|
|
onLoad={() => setLoading(false)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="position-absolute bottom-0 start-0 m-2">
|
|
<button
|
|
className="btn btn-outline-secondary"
|
|
onClick={resetAll}
|
|
>
|
|
<i className="bx bx-reset"></i> Reset
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
|
|
|
|
export default PreviewDocument;
|