diff --git a/index.html b/index.html index d08337b..3e77cd1 100644 --- a/index.html +++ b/index.html @@ -36,8 +36,9 @@ - + 20px +
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', () => {