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

fix: use DOM scrollLeftVal for clip/section/MIDI rendering in WaveformLane

Browse Source 
6 render positions (clip, marker, section, MIDI, note, selection) were
using React prop scrollLeft instead of DOM scrollLeftVal, causing
grid-vs-item desync during fast auto-scroll.
This commit is contained in:
3dtours
2026-07-25 11:12:39 +07:00
parent c397545383
commit a6a12b36a7
2 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/js/app.jsx
+6 -6
View File
@@ -515,7 +515,7 @@ const WaveformLane = ({
if (clipEndTime < tStart || clipStartTime > tEnd) return;
const xStartGlobal = clipStartTime * zoom;
const wClip = duration * zoom;
const xStartLocal = xStartGlobal - scrollLeft;
const xStartLocal = xStartGlobal - scrollLeftVal;
const xEndLocal = xStartLocal + wClip;
// 1. Draw Clip Layer Background & Border
@@ -548,7 +548,7 @@ const WaveformLane = ({
// Draw markers
if (markers && markers.length > 0) {
markers.forEach(m => {
const mxLocal = m.time * zoom - scrollLeft;
const mxLocal = m.time * zoom - scrollLeftVal;
if (mxLocal >= 0 && mxLocal <= drawWidth) {
ctx.fillStyle = '#fbbf24';
ctx.fillRect(mxLocal - 1, 0, 2, height);
@@ -693,7 +693,7 @@ const WaveformLane = ({
// Draw sections
const sections = track.sections || [];
sections.forEach(sec => {
const secStartLocal = sec.start * zoom - scrollLeft; // use secStartLocal NOT secStart
const secStartLocal = sec.start * zoom - scrollLeftVal; // use secStartLocal NOT secStart
const secWidth = sec.duration * zoom;
if (secStartLocal + secWidth < 0 || secStartLocal > drawWidth) return;
ctx.fillStyle = sec.color ? sec.color + '44' : 'rgba(6, 182, 212, 0.25)';
@@ -772,7 +772,7 @@ const WaveformLane = ({
// Draw MIDI items
const midiItems = track.midiItems || [];
midiItems.forEach(midi => {
const midiStartLocal = midi.startTime * zoom - scrollLeft;
const midiStartLocal = midi.startTime * zoom - scrollLeftVal;
const midiWidth = midi.duration * zoom;
if (midiStartLocal + midiWidth < 0 || midiStartLocal > drawWidth) return;
@@ -799,7 +799,7 @@ const WaveformLane = ({
midiNotes.forEach(note => {
const noteStartSec = (note.start_beat || 0) * secondsPerBeat;
const noteDurSec = Math.max(0.02, (note.duration_beats || 0.25) * secondsPerBeat);
const noteStartLocal = (midi.startTime + noteStartSec) * zoom - scrollLeft;
const noteStartLocal = (midi.startTime + noteStartSec) * zoom - scrollLeftVal;
const nw = noteDurSec * zoom;
if (noteStartLocal + nw < midiStartLocal || noteStartLocal > midiStartLocal + midiWidth) return;
@@ -815,7 +815,7 @@ const WaveformLane = ({
// Selection highlight - local selection on this track
if (selectionMode === 'local' && localSelectionTrackId === track.id && localSelLeft !== null && localSelRight !== null && localSelRight > localSelLeft) {
const hlLeftLocal = localSelLeft * zoom - scrollLeft;
const hlLeftLocal = localSelLeft * zoom - scrollLeftVal;
const hlWidth = (localSelRight - localSelLeft) * zoom;
ctx.fillStyle = 'rgba(245, 158, 11, 0.15)';
ctx.fillRect(hlLeftLocal, 0, hlWidth, height);