fix: WaveformLane grid now respects snapValue (was always beat grid)
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:
+9
-10
@@ -1325,29 +1325,28 @@ const WaveformLane = ({
|
|||||||
const PADDING_LEFT = 0;
|
const PADDING_LEFT = 0;
|
||||||
const tStart = (scrollLeftVal - leadIn * zoom) / zoom - PADDING_LEFT;
|
const tStart = (scrollLeftVal - leadIn * zoom) / zoom - PADDING_LEFT;
|
||||||
const tEnd = (scrollLeftVal + drawWidth - leadIn * zoom) / zoom + CLIP_BUFFER / zoom;
|
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;
|
let snapDivisor = 1;
|
||||||
if (snapValue && snapValue !== 'free') {
|
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;
|
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 snapInterval = beatDuration * snapDivisor;
|
||||||
const t = bn * beatDuration;
|
const firstSnap = Math.floor(tStart / snapInterval) * snapInterval;
|
||||||
const beatNum = bn + 1;
|
for (let t = firstSnap; t <= tEnd; t += snapInterval) {
|
||||||
const isBar = beatNum % 4 === 1;
|
|
||||||
const localX = (t - tStart) * zoom;
|
const localX = (t - tStart) * zoom;
|
||||||
if (localX < -CLIP_BUFFER || localX > drawWidth + CLIP_BUFFER) continue;
|
if (localX < -CLIP_BUFFER || localX > drawWidth + CLIP_BUFFER) continue;
|
||||||
ctx.strokeStyle = isBar ? 'rgba(255, 255, 255, 0.12)' : 'rgba(255, 255, 255, 0.04)';
|
const barNum = Math.round(t / barDuration);
|
||||||
ctx.lineWidth = isBar ? 1.2 : 0.5;
|
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.beginPath();
|
||||||
ctx.moveTo(localX, 0);
|
ctx.moveTo(localX, 0);
|
||||||
ctx.lineTo(localX, height);
|
ctx.lineTo(localX, height);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
if (isBar && zoom >= 2) {
|
if (onBar && zoom >= 2) {
|
||||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.15)';
|
ctx.fillStyle = 'rgba(255, 255, 255, 0.15)';
|
||||||
ctx.font = 'bold 7px Inter, sans-serif';
|
ctx.font = 'bold 7px Inter, sans-serif';
|
||||||
ctx.textAlign = 'left';
|
ctx.textAlign = 'left';
|
||||||
ctx.fillText(`${Math.floor((beatNum - 1) / 4)}`, localX + 2, 10);
|
ctx.fillText(`${barNum}`, localX + 2, 10);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user