diff --git a/src/components/dialogs/OpenImage.tsx b/src/components/dialogs/OpenImage.tsx index e77a831..87fc3ba 100644 --- a/src/components/dialogs/OpenImage.tsx +++ b/src/components/dialogs/OpenImage.tsx @@ -55,6 +55,7 @@ function OpenImage({ close }: DialogProps) { falling: false, }); + // Used for centering the canvas const isFinished = useRef(false); useEffect(() => { diff --git a/src/components/dialogs/OpenSchematic.tsx b/src/components/dialogs/OpenSchematic.tsx index 78a7050..b79982b 100644 --- a/src/components/dialogs/OpenSchematic.tsx +++ b/src/components/dialogs/OpenSchematic.tsx @@ -1,4 +1,4 @@ -import { useContext } from "react"; +import { useContext, useEffect, useRef } from "react"; import { useDropzone } from "react-dropzone"; import { UploadIcon } from "lucide-react"; @@ -48,10 +48,13 @@ interface SpongeNBT extends nbt.ListTagLike { } function OpenSchematic({ close }: DialogProps) { - const { blocks, setBlocks, setVersion } = useContext(CanvasContext); + const { blocks, setBlocks, setVersion, centerCanvas } = useContext(CanvasContext); const { addHistory } = useContext(HistoryContext); const { setLoading } = useContext(LoadingContext); + // Used for centering the canvas + const isFinished = useRef(false); + const { acceptedFiles, getRootProps, getInputProps } = useDropzone({ accept: { "application/x-gzip-compressed": [".litematic", ".schem"], @@ -61,7 +64,9 @@ function OpenSchematic({ close }: DialogProps) { const onSubmit = async () => { const file = acceptedFiles[0]; if (file) { + isFinished.current = false; setLoading(true); + // Wait for loading indicator to appear await new Promise((resolve) => setTimeout(resolve, 1)); @@ -210,9 +215,19 @@ function OpenSchematic({ close }: DialogProps) { } setLoading(false); - close(); + isFinished.current = true; }; + useEffect(() => { + if (!isFinished.current) return; + centerCanvas(); + close(); + + return () => { + isFinished.current = false; + }; + }, [isFinished, centerCanvas, close]); + return (