From c4c7986a71af1e28a2b8a72b2e44eabab59cf69e Mon Sep 17 00:00:00 2001
From: trafficlunar <trafficlunar@proton.me>
Date: Sat, 14 Dec 2024 20:18:26 +0000
Subject: [PATCH] fix: center canvas on zoom slider change

---
 src/components/Canvas.tsx             |  2 +-
 src/components/information/Canvas.tsx | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
index a07a3f7..6b04c23 100644
--- a/src/components/Canvas.tsx
+++ b/src/components/Canvas.tsx
@@ -171,7 +171,7 @@ function Canvas() {
 			</Stage>
 
 			<CursorInformation mouseCoords={mouseCoords} blocks={blocks} />
-			<CanvasInformation scale={scale} setScale={setScale} canvasSize={canvasSize} />
+			<CanvasInformation scale={scale} setScale={setScale} setCoords={setCoords} canvasSize={canvasSize} stageSize={stageSize} />
 		</div>
 	);
 }
diff --git a/src/components/information/Canvas.tsx b/src/components/information/Canvas.tsx
index 6aac299..252925a 100644
--- a/src/components/information/Canvas.tsx
+++ b/src/components/information/Canvas.tsx
@@ -4,12 +4,24 @@ import { Slider } from "@/components/ui/slider";
 interface Props {
 	scale: number;
 	setScale: React.Dispatch<React.SetStateAction<number>>;
+	setCoords: React.Dispatch<React.SetStateAction<Position>>;
 	canvasSize: CanvasSize;
+	stageSize: Dimension;
 }
 
-function CanvasInformation({ scale, setScale, canvasSize }: Props) {
+function CanvasInformation({ scale, setScale, setCoords, canvasSize, stageSize }: Props) {
 	const onValueChange = (value: number[]) => {
-		setScale(value[0]);
+		const newScale = value[0];
+		setScale(newScale);
+
+		// Center canvas
+		const blockCenterX = ((canvasSize.minX + canvasSize.maxX) * 16) / 2;
+		const blockCenterY = ((canvasSize.minY + canvasSize.maxY) * 16) / 2;
+
+		setCoords({
+			x: stageSize.width / 2 - blockCenterX * newScale,
+			y: stageSize.height / 2 - blockCenterY * newScale,
+		});
 	};
 
 	return (