trafficlunar/blockmatic
1
0
Fork 0
mirror of https://github.com/trafficlunar/blockmatic.git synced 2026-06-28 14:44:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: open images

Browse source
This commit is contained in:
trafficlunar 2024-12-14 22:57:50 +00:00
parent 98e6354a6e
commit bebf8aaba4
9 changed files with 121 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/dialogs/OpenImage.tsx
View file

@ -1,4 +1,4 @@
import { useCallback, useEffect, useState } from "react";
import { useContext, useEffect, useState } from "react";
import { useDropzone } from "react-dropzone";
import { CircleAlertIcon, UploadIcon } from "lucide-react";
@ -8,7 +8,11 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
function OpenImage() {
import { ImageContext } from "@/context/ImageContext";
function OpenImage({ close }: DialogProps) {
const { setImage: setContextImage, setImageDimensions: setContextImageDimensions } = useContext(ImageContext);
const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
accept: {
"image/*": [".png", ".jpg", ".jpeg", ".bmp", ".webp", ".tiff"],
@ -17,6 +21,7 @@ function OpenImage() {
const [image, setImage] = useState<HTMLImageElement>();
const [imageDimensions, setImageDimensions] = useState<Dimension>({ width: 0, height: 0 });
const [aspectRatio, setAspectRatio] = useState(1);
useEffect(() => {
if (acceptedFiles[0]) {
@ -24,6 +29,7 @@ function OpenImage() {
img.onload = () => {
setImage(img);
setImageDimensions({ width: img.width, height: img.height });
setAspectRatio(img.width / img.height);
};
img.src = URL.createObjectURL(acceptedFiles[0]);
}
@ -31,9 +37,8 @@ function OpenImage() {
const onDimensionChange = (e: React.ChangeEvent<HTMLInputElement>, isWidth: boolean) => {
const newDimension = Number(e.target.value);
const aspectRatio = imageDimensions.width / imageDimensions.height;
if (newDimension < 1 || newDimension > 10000) return;
setImageDimensions(() => {
if (isWidth) {
return { width: newDimension, height: Math.round(newDimension / aspectRatio) };
@ -43,6 +48,14 @@ function OpenImage() {
});
};
const onSubmit = () => {
if (image) {
setContextImage(image);
setContextImageDimensions(imageDimensions);
close();
}
};
return (
<DialogContent>
<DialogHeader>
@ -106,7 +119,7 @@ function OpenImage() {
</div>
)}
<Button type="submit" className="ml-auto">
<Button type="submit" className="ml-auto" onClick={onSubmit}>
Submit
</Button>
</DialogFooter>