130 lines
3.9 KiB
TypeScript
130 lines
3.9 KiB
TypeScript
import { useContext, useEffect, useState } from "react";
|
|
import { useDropzone } from "react-dropzone";
|
|
|
|
import { CircleAlertIcon, UploadIcon } from "lucide-react";
|
|
|
|
import { DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
|
|
import { ImageContext } from "@/context/Image";
|
|
|
|
function OpenImage({ close }: DialogProps) {
|
|
const { setImage: setContextImage, setImageDimensions: setContextImageDimensions } = useContext(ImageContext);
|
|
|
|
const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
|
|
accept: {
|
|
"image/*": [".png", ".jpg", ".jpeg", ".gif", ".bmp", ".webp", ".tiff", ".svg"],
|
|
},
|
|
});
|
|
|
|
const [image, setImage] = useState<HTMLImageElement>();
|
|
const [imageDimensions, setImageDimensions] = useState<Dimension>({ width: 0, height: 0 });
|
|
const [aspectRatio, setAspectRatio] = useState(1);
|
|
|
|
useEffect(() => {
|
|
if (acceptedFiles[0]) {
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
setImage(img);
|
|
setImageDimensions({ width: img.width, height: img.height });
|
|
setAspectRatio(img.width / img.height);
|
|
};
|
|
img.src = URL.createObjectURL(acceptedFiles[0]);
|
|
}
|
|
}, [acceptedFiles]);
|
|
|
|
const onDimensionChange = (e: React.ChangeEvent<HTMLInputElement>, isWidth: boolean) => {
|
|
const newDimension = Number(e.target.value);
|
|
if (newDimension < 1 || newDimension > 10000) return;
|
|
|
|
setImageDimensions(() => {
|
|
if (isWidth) {
|
|
return { width: newDimension, height: Math.round(newDimension / aspectRatio) };
|
|
} else {
|
|
return { width: Math.round(newDimension / aspectRatio), height: newDimension };
|
|
}
|
|
});
|
|
};
|
|
|
|
const onSubmit = () => {
|
|
if (image) {
|
|
setContextImage(image);
|
|
setContextImageDimensions(imageDimensions);
|
|
close();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Open Image</DialogTitle>
|
|
<DialogDescription>Open your image to load as blocks into the canvas</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<div
|
|
{...getRootProps({
|
|
className: "flex flex-col justify-center items-center gap-2 p-4 rounded border border-2 border-dashed select-none",
|
|
})}
|
|
>
|
|
<input {...getInputProps({ multiple: false })} />
|
|
<UploadIcon />
|
|
<p>Drag and drop your image here</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-[auto,1fr] gap-2">
|
|
{image && acceptedFiles[0] && (
|
|
<>
|
|
<img
|
|
src={image.src}
|
|
alt="your image"
|
|
className="w-48 h-48 object-contain border rounded-lg"
|
|
style={{ background: "repeating-conic-gradient(#fff 0 90deg, #bbb 0 180deg) 0 0/25% 25%" }}
|
|
/>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<div>
|
|
<Label>File name</Label>
|
|
<p>{acceptedFiles[0].name}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="width">Width (blocks)</Label>
|
|
<Input type="number" id="width" placeholder="Width" value={imageDimensions.width} onChange={(e) => onDimensionChange(e, true)} />
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="height">Height (blocks)</Label>
|
|
<Input
|
|
type="number"
|
|
id="height"
|
|
placeholder="Height"
|
|
value={imageDimensions.height}
|
|
onChange={(e) => onDimensionChange(e, false)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="!justify-between items-center">
|
|
{imageDimensions.height > 384 && (
|
|
<div className="flex items-center gap-1 h-min">
|
|
<CircleAlertIcon className="text-red-400" size={22} />
|
|
<span className="text-red-400 text-sm">The height is above 384 blocks!</span>
|
|
</div>
|
|
)}
|
|
|
|
<Button type="submit" className="ml-auto" onClick={onSubmit}>
|
|
Submit
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
);
|
|
}
|
|
|
|
export default OpenImage;
|