From 7c66cc187852e904161127b975431093f3f4fcc5 Mon Sep 17 00:00:00 2001
From: Joeri Exelmans <joeri.exelmans@gmail.com>
Date: Wed, 22 Oct 2025 09:45:42 +0200
Subject: [PATCH] improve zoom

---
 src/App/TopPanel.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/App/TopPanel.tsx b/src/App/TopPanel.tsx
index da17fc5..1e87514 100644
--- a/src/App/TopPanel.tsx
+++ b/src/App/TopPanel.tsx
@@ -136,10 +136,10 @@ export function TopPanel({rt, rtIdx, time, setTime, onUndo, onRedo, onInit, onCl
   }, [time]);
 
   function onZoomIn() {
-    setZoom(zoom => Math.min(zoom * 1.25, 4));
+    setZoom(zoom => Math.min(zoom * 1.25, (1.25)**6));
   }
   function onZoomOut() {
-    setZoom(zoom => Math.max(zoom / 1.25, 1/4));
+    setZoom(zoom => Math.max(zoom / 1.25, (1/1.25)**6));
   }
 
   function onChangePaused(paused: boolean, wallclktime: number) {
@@ -210,12 +210,13 @@ export function TopPanel({rt, rtIdx, time, setTime, onUndo, onRedo, onInit, onCl
 
     {/* zoom */}
     <div className="toolbarGroup">
-      <KeyInfo keyInfo={<><kbd>Ctrl</kbd>+<kbd>+</kbd></>}>
-        <button title="zoom in" onClick={onZoomIn}><ZoomInIcon fontSize="small"/></button>
-      </KeyInfo>
       <KeyInfo keyInfo={<><kbd>Ctrl</kbd>+<kbd>-</kbd></>}>
         <button title="zoom out" onClick={onZoomOut}><ZoomOutIcon fontSize="small"/></button>
       </KeyInfo>
+      <input title="current zoom level" value={zoom.toFixed(3)} style={{width:40}} readOnly/>
+      <KeyInfo keyInfo={<><kbd>Ctrl</kbd>+<kbd>+</kbd></>}>
+        <button title="zoom in" onClick={onZoomIn}><ZoomInIcon fontSize="small"/></button>
+      </KeyInfo>
       &emsp;
     </div>