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

fix: read scrollLeft from DOM wrapper for canvas sync

Browse Source 
Canvas effects now find nearest scrollable ancestor and read
scrollLeft directly, bypassing React prop latency during auto-scroll.
Applies to TempoTrackLane, WaveformLane, TimelineRuler.
This commit is contained in:
3dtours
2026-07-25 11:09:20 +07:00
parent 5bd61516aa
commit c397545383
3 changed files with 38 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/js/app.jsx
+28 -3
View File
@@ -424,7 +424,15 @@ const WaveformLane = ({
if (!canvas) return;
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
const scrollLeftVal = scrollLeft || 0;
let scrollLeftVal = scrollLeft || 0;
let el = canvas.parentElement;
while (el) {
if (el.scrollLeft !== undefined && (el.scrollWidth > el.clientWidth || el.scrollLeft > 0)) {
scrollLeftVal = el.scrollLeft;
break;
}
el = el.parentElement;
}
const vWidth = viewportWidth || 1200;
const height = canvas.parentElement ? canvas.parentElement.clientHeight : 96;
canvas.width = Math.min(Math.round(drawWidth * dpr), 32768);
@@ -1205,7 +1213,15 @@ const TimelineRuler = ({
if (!canvas) return;
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
const scrollLeftVal = scrollLeft || 0;
let scrollLeftVal = scrollLeft || 0;
let el = canvas.parentElement;
while (el) {
if (el.scrollLeft !== undefined && (el.scrollWidth > el.clientWidth || el.scrollLeft > 0)) {
scrollLeftVal = el.scrollLeft;
break;
}
el = el.parentElement;
}
const height = RULER_HEIGHT;
canvas.width = Math.min(Math.round(drawWidth * dpr), 32768);
canvas.height = Math.min(Math.round(height * dpr), 32768);
@@ -1291,7 +1307,16 @@ const TempoTrackLane = ({
if (!canvas) return;
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
const scrollLeftVal = scrollLeft || 0;
// Read scrollLeft from the DOM wrapper directly to stay in sync with tracks
let scrollLeftVal = scrollLeft || 0;
let el = canvas.parentElement;
while (el) {
if (el.scrollLeft !== undefined && (el.scrollWidth > el.clientWidth || el.scrollLeft > 0)) {
scrollLeftVal = el.scrollLeft;
break;
}
el = el.parentElement;
}
const height = 40;
canvas.width = Math.min(Math.round(drawWidth * dpr), 32768);
canvas.height = Math.min(Math.round(height * dpr), 32768);