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

fix: restore time duration labels on TimelineRuler + TempoTrackLane

Browse Source 
Time labels (e.g. '0.00s', '1.00s') were lost in ff44fd4 merge.
Re-added as amber/orange text at ruler bottom, dynamic interval.
This commit is contained in:
3dtours
2026-07-25 10:37:12 +07:00
parent db759fc4fc
commit 70d1abaa7a
3 changed files with 54 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/js/app.jsx
+44
View File
@@ -1283,6 +1283,28 @@ const TimelineRuler = ({
}
}
}
// Draw time duration labels (restored from original time ruler)
const minTimePx = 60;
const rawSecInt = Math.max(1, Math.ceil(minTimePx / zoom));
const timePowers = [1, 2, 5, 10, 30, 60];
let secInterval = timePowers.find(p => p >= rawSecInt) || 120;
if (secInterval * zoom < minTimePx) secInterval = Math.ceil(minTimePx / zoom);
const firstSec = Math.floor(tStart / secInterval) * secInterval;
for (let t = firstSec; t <= tEnd; t += secInterval) {
const localX = (t - tStart) * zoom;
if (localX < -CLIP_BUFFER || localX > drawWidth + CLIP_BUFFER) continue;
ctx.strokeStyle = 'rgba(255, 180, 100, 0.12)';
ctx.lineWidth = 0.8;
ctx.beginPath();
ctx.moveTo(localX, 0);
ctx.lineTo(localX, height);
ctx.stroke();
ctx.fillStyle = 'rgba(255, 180, 100, 0.55)';
ctx.font = 'bold 8px monospace';
ctx.textAlign = 'left';
ctx.fillText(formatTimeSimple(t), localX + 4, height - 8);
}
ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
ctx.font = 'bold 10px Inter, sans-serif';
ctx.textAlign = 'right';
@@ -1392,6 +1414,28 @@ const TempoTrackLane = ({
}
}
}
// Draw time duration labels (restored from original time ruler)
const minTimePx = 60;
const rawSecInterval = Math.max(1, Math.ceil(minTimePx / zoom));
const timePowers = [1, 2, 5, 10, 30, 60];
let secInterval = timePowers.find(p => p >= rawSecInterval) || 120;
if (secInterval * zoom < minTimePx) secInterval = Math.ceil(minTimePx / zoom);
const firstSec = Math.floor(tStart / secInterval) * secInterval;
for (let t = firstSec; t <= tEnd; t += secInterval) {
const localX = (t - tStart) * zoom;
if (localX < -200 || localX > drawWidth + 200) continue;
ctx.strokeStyle = 'rgba(255, 180, 100, 0.15)';
ctx.lineWidth = 0.8;
ctx.beginPath();
ctx.moveTo(localX, 16);
ctx.lineTo(localX, height);
ctx.stroke();
ctx.fillStyle = 'rgba(255, 180, 100, 0.5)';
ctx.font = '8px monospace';
ctx.textAlign = 'center';
ctx.fillText(formatTimeSimple(t), localX, 12);
}
ctx.fillStyle = 'rgba(255, 255, 255, 0.35)';
ctx.font = 'bold 10px Inter, sans-serif';
ctx.textAlign = 'right';