JosLe/logic-gates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: waveform zoom buttons - use 1.5x multiplier, show zoom level, remove wheel zoom

Browse Source
This commit is contained in:
Jose Luis Montañes
2026-03-19 22:10:44 +01:00
parent 7c58174f5f
commit d471b0adb3
2 changed files with 13 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -36,8 +36,9 @@
<button class="wave-btn record active" id="wave-record">Record</button> <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-clear">Clear</button>
<button class="wave-btn" id="wave-step">Step</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> <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> <div class="separator"></div>
<button class="wave-btn" id="sim-run-btn">Run</button> <button class="wave-btn" id="sim-run-btn">Run</button>
<button class="wave-btn" id="sim-slower">-</button> <button class="wave-btn" id="sim-slower">-</button>

26
js/events.js
View File

@@ -8,6 +8,11 @@ import { resize, screenToWorld } from './renderer.js';
const PAN_SPEED = 40; const PAN_SPEED = 40;
function updateWaveZoomLabel() {
const el = document.getElementById('wave-zoom-label');
if (el) el.textContent = `${state.waveZoom}px`;
}
export function initEvents() { export function initEvents() {
const canvas = document.getElementById('canvas'); const canvas = document.getElementById('canvas');
@@ -214,25 +219,16 @@ export function initEvents() {
document.getElementById('wave-step').addEventListener('click', manualStep); document.getElementById('wave-step').addEventListener('click', manualStep);
document.getElementById('wave-zoom-in').addEventListener('click', () => { 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', () => { 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 // Init zoom label
document.getElementById('wave-canvas').addEventListener('wheel', e => { updateWaveZoomLabel();
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 });
// ==================== SIMULATION CONTROLS ==================== // ==================== SIMULATION CONTROLS ====================
document.getElementById('sim-run-btn').addEventListener('click', () => { document.getElementById('sim-run-btn').addEventListener('click', () => {