3dtours/SonicForgeStudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: WaveformLane grid now respects snapValue (was always beat grid)

Browse Source 
snapDivisor was computed but never used in loop. Grid always drew
at every beat. Now grid iterates at snapInterval = beatDuration * snapDivisor.
This commit is contained in:
3dtours
2026-07-30 21:25:39 +07:00
parent 323be6a6f4
commit 64b9fbadd5
2 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/js/app.jsx
+9 -10
View File
@@ -1325,29 +1325,28 @@ const WaveformLane = ({
const PADDING_LEFT = 0;
const tStart = (scrollLeftVal - leadIn * zoom) / zoom - PADDING_LEFT;
const tEnd = (scrollLeftVal + drawWidth - leadIn * zoom) / zoom + CLIP_BUFFER / zoom;
const firstBeatNum = Math.floor(tStart / beatDuration);
const lastBeatNum = Math.ceil(tEnd / beatDuration);
let snapDivisor = 1;
if (snapValue && snapValue !== 'free') {
if (snapValue === '4') snapDivisor = 4; else if (snapValue === '1') snapDivisor = 1; else if (snapValue === '1/2') snapDivisor = 0.5; else if (snapValue === '1/4') snapDivisor = 0.25; else if (snapValue === '1/8') snapDivisor = 0.125; else if (snapValue === '1/16') snapDivisor = 0.0625; else if (snapValue === '1/32') snapDivisor = 0.03125;
}
for (let bn = firstBeatNum; bn <= lastBeatNum; bn++) {
const t = bn * beatDuration;
const beatNum = bn + 1;
const isBar = beatNum % 4 === 1;
const snapInterval = beatDuration * snapDivisor;
const firstSnap = Math.floor(tStart / snapInterval) * snapInterval;
for (let t = firstSnap; t <= tEnd; t += snapInterval) {
const localX = (t - tStart) * zoom;
if (localX < -CLIP_BUFFER || localX > drawWidth + CLIP_BUFFER) continue;
ctx.strokeStyle = isBar ? 'rgba(255, 255, 255, 0.12)' : 'rgba(255, 255, 255, 0.04)';
ctx.lineWidth = isBar ? 1.2 : 0.5;
const barNum = Math.round(t / barDuration);
const onBar = Math.abs(t - barNum * barDuration) < 0.001;
ctx.strokeStyle = onBar ? 'rgba(255, 255, 255, 0.12)' : 'rgba(255, 255, 255, 0.04)';
ctx.lineWidth = onBar ? 1.2 : 0.5;
ctx.beginPath();
ctx.moveTo(localX, 0);
ctx.lineTo(localX, height);
ctx.stroke();
if (isBar && zoom >= 2) {
if (onBar && zoom >= 2) {
ctx.fillStyle = 'rgba(255, 255, 255, 0.15)';
ctx.font = 'bold 7px Inter, sans-serif';
ctx.textAlign = 'left';
ctx.fillText(`${Math.floor((beatNum - 1) / 4)}`, localX + 2, 10);
ctx.fillText(`${barNum}`, localX + 2, 10);
}
}