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

refactor: remove image context

Browse source
This commit is contained in:
trafficlunar 2025-01-12 21:07:59 +00:00
parent aa58b31269
commit f4ca910d4c
5 changed files with 52 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,6 @@ import { useDropzone } from "react-dropzone";
import { CircleAlertIcon, LinkIcon, UploadIcon } from "lucide-react";
import { CanvasContext } from "@/context/Canvas";
import { ImageContext } from "@/context/Image";
import { LoadingContext } from "@/context/Loading";
import { Button } from "@/components/ui/button";
@ -22,11 +21,11 @@ import { useBlockData } from "@/hooks/useBlockData";
import BlockSelector from "./open-image/BlockSelector";
import VersionCombobox from "../VersionCombobox";
import { findBlockFromRgb } from "@/utils/findBlockFromRgb";
function OpenImage({ close }: DialogProps) {
const { version, setVersion } = useContext(CanvasContext);
const { version, setVersion, setBlocks } = useContext(CanvasContext);
const { setLoading } = useContext(LoadingContext);
const { setImage: setContextImage, setImageDimensions: setContextImageDimensions, setUsableBlocks } = useContext(ImageContext);
const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
accept: {
@ -95,17 +94,44 @@ function OpenImage({ close }: DialogProps) {
setSelectedBlocks(newValue);
};
const onSubmit = () => {
const onSubmit = async () => {
if (image) {
setLoading(true);
setUsableBlocks(selectedBlocks);
// Wait for loading indicator to appear
setTimeout(() => {
setContextImage(image);
setContextImageDimensions(imageDimensions);
close();
}, 100);
await new Promise((resolve) => setTimeout(resolve, 100));
// Load image through JS canvas
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
if (ctx) {
canvas.width = imageDimensions.width;
canvas.height = imageDimensions.height;
ctx.drawImage(image, 0, 0, imageDimensions.width, imageDimensions.height);
const imageData = ctx.getImageData(0, 0, imageDimensions.width, imageDimensions.height);
const newBlocks: Block[] = [];
// Go through each pixel in the image and find block by checking closest RGB to the average color of the texture
for (let i = 0; i < imageData.data.length; i += 4) {
const block = findBlockFromRgb(selectedBlocks, imageData.data[i], imageData.data[i + 1], imageData.data[i + 2], imageData.data[i + 3]);
if (block == "air") continue;
const x = Math.floor((i / 4) % imageData.width);
const y = Math.floor(i / 4 / imageData.width);
newBlocks.push({
name: block,
x,
y,
});
}
setBlocks(newBlocks);
}
setLoading(false);
close();
}
};