From d471b0adb3fb926a69a2c8fa2e7407b764765659 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Luis=20Monta=C3=B1es?= <josele.96@gmail.com>
Date: Thu, 19 Mar 2026 22:10:44 +0100
Subject: [PATCH] fix: waveform zoom buttons - use 1.5x multiplier, show zoom
 level, remove wheel zoom

---
 index.html   |  3 ++-
 js/events.js | 26 +++++++++++---------------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index d08337b..3e77cd1 100644
--- a/index.html
+++ b/index.html
@@ -36,8 +36,9 @@
             <button class="wave-btn record active" id="wave-record">Record</button>
             <button class="wave-btn" id="wave-clear">Clear</button>
             <button class="wave-btn" id="wave-step">Step</button>
-            <button class="wave-btn" id="wave-zoom-in">Zoom +</button>
             <button class="wave-btn" id="wave-zoom-out">Zoom -</button>
+            <span class="wave-info" id="wave-zoom-label" style="margin-left:0;min-width:35px;text-align:center">20px</span>
+            <button class="wave-btn" id="wave-zoom-in">Zoom +</button>
             <div class="separator"></div>
             <button class="wave-btn" id="sim-run-btn">Run</button>
             <button class="wave-btn" id="sim-slower">-</button>
diff --git a/js/events.js b/js/events.js
index 95e2976..e67b56b 100644
--- a/js/events.js
+++ b/js/events.js
@@ -8,6 +8,11 @@ import { resize, screenToWorld } from './renderer.js';
 
 const PAN_SPEED = 40;
 
+function updateWaveZoomLabel() {
+    const el = document.getElementById('wave-zoom-label');
+    if (el) el.textContent = `${state.waveZoom}px`;
+}
+
 export function initEvents() {
     const canvas = document.getElementById('canvas');
 
@@ -214,25 +219,16 @@ export function initEvents() {
     document.getElementById('wave-step').addEventListener('click', manualStep);
 
     document.getElementById('wave-zoom-in').addEventListener('click', () => {
-        state.waveZoom = Math.min(100, state.waveZoom + 5);
+        state.waveZoom = Math.min(100, Math.round(state.waveZoom * 1.5));
+        updateWaveZoomLabel();
     });
     document.getElementById('wave-zoom-out').addEventListener('click', () => {
-        state.waveZoom = Math.max(2, state.waveZoom - 5);
+        state.waveZoom = Math.max(2, Math.round(state.waveZoom / 1.5));
+        updateWaveZoomLabel();
     });
 
-    // Scroll waveform with mouse wheel
-    document.getElementById('wave-canvas').addEventListener('wheel', e => {
-        e.preventDefault();
-        if (e.ctrlKey || e.metaKey) {
-            // Ctrl+wheel = zoom waveform
-            const delta = e.deltaY > 0 ? -3 : 3;
-            state.waveZoom = Math.max(2, Math.min(100, state.waveZoom + delta));
-        } else {
-            // Wheel = scroll waveform horizontally
-            const scrollDelta = e.deltaY > 0 ? 3 : -3;
-            state.waveScroll = Math.max(0, state.waveScroll + scrollDelta);
-        }
-    }, { passive: false });
+    // Init zoom label
+    updateWaveZoomLabel();
 
     // ==================== SIMULATION CONTROLS ====================
     document.getElementById('sim-run-btn').addEventListener('click', () => {