From 8925ebebb64844821947fb7c1c0ba7ab27d5b360 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Fri, 24 Jan 2025 15:45:13 +0000
Subject: [PATCH] fix: improve zoom slider with logarithmic scaling

---
 src/components/canvas/information/Canvas.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/canvas/information/Canvas.tsx b/src/components/canvas/information/Canvas.tsx
index 023b13b..420057b 100644
--- a/src/components/canvas/information/Canvas.tsx
+++ b/src/components/canvas/information/Canvas.tsx
@@ -6,7 +6,7 @@ function CanvasInformation() {
 	const { stageSize, canvasSize, scale, setCoords, setScale } = useContext(CanvasContext);
 
 	const onValueChange = (value: number[]) => {
-		const newScale = value[0];
+		const newScale = Math.pow(10, value[0]);
 		setScale(newScale);
 
 		// Center canvas
@@ -32,10 +32,10 @@ function CanvasInformation() {
 			<div className="info-child">
 				<Slider
 					defaultValue={[1]}
-					min={0.1}
-					max={32}
-					step={0.1}
-					value={[scale]}
+					min={-1} // 10^(-1) = 0.1
+					max={1.50515} // 10^(1.50515) = ≈32
+					step={0.01}
+					value={[Math.log10(scale)]}
 					onValueChange={onValueChange}
 					orientation="vertical"
 					className="!h-32"