feat: center canvas when opening schematic

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(() => {

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 (
 		<DialogContent>
 			<DialogHeader>