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

fix: remove aggressive auto-follow, smooth autoScrollTimeline only, PADDING_RIGHT to show bar numbers past edge, 12-bar buffer

Browse Source
This commit is contained in:
3dtours
2026-07-25 09:57:00 +07:00
parent b746f9659b
commit e56ee5cb0a
1 changed files with 10 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/js/app.jsx
+10 -21
View File
@@ -442,7 +442,7 @@ const WaveformLane = ({
const barDuration = beatDuration * 4; const barDuration = beatDuration * 4;
const PADDING_LEFT = barDuration; // 1-bar margin on left const PADDING_LEFT = barDuration; // 1-bar margin on left
const tStart = scrollLeftVal / zoom - PADDING_LEFT; const tStart = scrollLeftVal / zoom - PADDING_LEFT;
const tEnd = (scrollLeftVal + drawWidth) / zoom; const tEnd = (scrollLeftVal + drawWidth) / zoom + PADDING_LEFT;
let gridSpacing = 1.0; let gridSpacing = 1.0;
if (snapValue && snapValue !== 'free') { if (snapValue && snapValue !== 'free') {
const beatDuration = 60 / parseFloat(bpm || 120); const beatDuration = 60 / parseFloat(bpm || 120);
@@ -1220,12 +1220,13 @@ const TempoTrackLane = ({
const barDuration = beatDuration * 4; const barDuration = beatDuration * 4;
const PADDING_LEFT = barDuration; // 1-bar margin on left const PADDING_LEFT = barDuration; // 1-bar margin on left
const tStart = scrollLeftVal / zoom - PADDING_LEFT; const tStart = scrollLeftVal / zoom - PADDING_LEFT;
const tEnd = (scrollLeftVal + drawWidth) / zoom; const tEnd = (scrollLeftVal + drawWidth) / zoom + PADDING_LEFT;
const firstBeat = Math.floor(tStart / beatDuration) * beatDuration; const firstBeat = Math.floor(tStart / beatDuration) * beatDuration;
for (let t = firstBeat; t <= tEnd; t += beatDuration) { for (let t = firstBeat; t <= tEnd; t += beatDuration) {
const beatNum = Math.floor(t / beatDuration) + 1; const beatNum = Math.floor(t / beatDuration) + 1;
const isBar = beatNum % 4 === 1; const isBar = beatNum % 4 === 1;
const localX = (t - tStart) * zoom; const localX = (t - tStart) * zoom;
if (localX < 0 || localX > drawWidth) continue;
if (isBar) { if (isBar) {
ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)'; ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
ctx.lineWidth = 1.5; ctx.lineWidth = 1.5;
@@ -8554,7 +8555,7 @@ const App = () => {
if (recordingState === 'RECORDING' || recordingState === 'COUNT_IN') { if (recordingState === 'RECORDING' || recordingState === 'COUNT_IN') {
max = Math.max(max, currentTime + 60); max = Math.max(max, currentTime + 60);
} }
max += secPerBar * 6 + scrollBufferExtra; max += secPerBar * 12 + scrollBufferExtra;
return max; return max;
}, [activeTracks, recordingState, currentTime, bpm, scrollBufferExtra]); }, [activeTracks, recordingState, currentTime, bpm, scrollBufferExtra]);
const maxDurationRef = useRef(maxDuration); const maxDurationRef = useRef(maxDuration);
@@ -10225,12 +10226,8 @@ const App = () => {
const clampedStart = Math.min(rawStart, marginBar); const clampedStart = Math.min(rawStart, marginBar);
const newStart = snapTime(clampedStart, snapValueRef.current, bpmRef.current); const newStart = snapTime(clampedStart, snapValueRef.current, bpmRef.current);
const itemPx = newStart * zoom; const itemPx = newStart * zoom;
const followMargin = Math.round(rect.width * 0.75); if (itemPx < scrollLeft + 60) {
if (itemPx > scrollLeft + rect.width - followMargin) { wrapper.scrollLeft = Math.max(0, itemPx - 60);
wrapper.scrollLeft = itemPx - rect.width + followMargin;
setCanvasRedrawCount(n => n + 1);
} else if (itemPx < scrollLeft + followMargin) {
wrapper.scrollLeft = Math.max(0, itemPx - followMargin);
setCanvasRedrawCount(n => n + 1); setCanvasRedrawCount(n => n + 1);
} }
const targetTrackId = hoveredTrackIdRef.current || drag.trackId; const targetTrackId = hoveredTrackIdRef.current || drag.trackId;
@@ -10392,12 +10389,8 @@ const App = () => {
const rawStart = Math.max(beatSec, Math.min(time - drag.clickOffset, marginBar)); const rawStart = Math.max(beatSec, Math.min(time - drag.clickOffset, marginBar));
const newStart = snapTime(rawStart, snapValueRef.current, bpmRef.current); const newStart = snapTime(rawStart, snapValueRef.current, bpmRef.current);
const itemPx = newStart * zoom; const itemPx = newStart * zoom;
const followMargin = Math.round(rect.width * 0.75); if (itemPx < scrollLeft + 60) {
if (itemPx > scrollLeft + rect.width - followMargin) { wrapper.scrollLeft = Math.max(0, itemPx - 60);
wrapper.scrollLeft = itemPx - rect.width + followMargin;
setCanvasRedrawCount(n => n + 1);
} else if (itemPx < scrollLeft + followMargin) {
wrapper.scrollLeft = Math.max(0, itemPx - followMargin);
setCanvasRedrawCount(n => n + 1); setCanvasRedrawCount(n => n + 1);
} }
const targetTrackId = hoveredTrackIdRef.current || drag.trackId; const targetTrackId = hoveredTrackIdRef.current || drag.trackId;
@@ -10489,12 +10482,8 @@ const App = () => {
: { ...t, midiItems: items }; : { ...t, midiItems: items };
})); }));
const edgePx = (resize.side === 'left' ? Math.max(0, time) : time) * zoom; const edgePx = (resize.side === 'left' ? Math.max(0, time) : time) * zoom;
const followMargin = Math.round(rect.width * 0.75); if (edgePx < scrollLeft + 60) {
if (edgePx > scrollLeft + rect.width - followMargin) { wrapper.scrollLeft = Math.max(0, edgePx - 60);
wrapper.scrollLeft = edgePx - rect.width + followMargin;
setCanvasRedrawCount(n => n + 1);
} else if (edgePx < scrollLeft + followMargin) {
wrapper.scrollLeft = Math.max(0, edgePx - followMargin);
setCanvasRedrawCount(n => n + 1); setCanvasRedrawCount(n => n + 1);
} }
}; };