From e56ee5cb0a5fee1546e2ccec47933978d6230c17 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Sat, 25 Jul 2026 09:57:00 +0700
Subject: [PATCH] fix: remove aggressive auto-follow, smooth autoScrollTimeline
 only, PADDING_RIGHT to show bar numbers past edge, 12-bar buffer

---
 app/static/js/app.jsx | 31 ++++++++++---------------------
 1 file changed, 10 insertions(+), 21 deletions(-)

diff --git a/app/static/js/app.jsx b/app/static/js/app.jsx
index 61bf9d1..3b0d4a8 100644
--- a/app/static/js/app.jsx
+++ b/app/static/js/app.jsx
@@ -442,7 +442,7 @@ const WaveformLane = ({
     const barDuration = beatDuration * 4;
     const PADDING_LEFT = barDuration; // 1-bar margin on left
     const tStart = scrollLeftVal / zoom - PADDING_LEFT;
-    const tEnd = (scrollLeftVal + drawWidth) / zoom;
+    const tEnd = (scrollLeftVal + drawWidth) / zoom + PADDING_LEFT;
     let gridSpacing = 1.0;
     if (snapValue && snapValue !== 'free') {
       const beatDuration = 60 / parseFloat(bpm || 120);
@@ -1220,12 +1220,13 @@ const TempoTrackLane = ({
     const barDuration = beatDuration * 4;
     const PADDING_LEFT = barDuration; // 1-bar margin on 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;
     for (let t = firstBeat; t <= tEnd; t += beatDuration) {
       const beatNum = Math.floor(t / beatDuration) + 1;
       const isBar = beatNum % 4 === 1;
       const localX = (t - tStart) * zoom;
+      if (localX < 0 || localX > drawWidth) continue;
       if (isBar) {
         ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
         ctx.lineWidth = 1.5;
@@ -8554,7 +8555,7 @@ const App = () => {
     if (recordingState === 'RECORDING' || recordingState === 'COUNT_IN') {
       max = Math.max(max, currentTime + 60);
     }
-    max += secPerBar * 6 + scrollBufferExtra;
+    max += secPerBar * 12 + scrollBufferExtra;
     return max;
   }, [activeTracks, recordingState, currentTime, bpm, scrollBufferExtra]);
   const maxDurationRef = useRef(maxDuration);
@@ -10225,12 +10226,8 @@ const App = () => {
       const clampedStart = Math.min(rawStart, marginBar);
       const newStart = snapTime(clampedStart, snapValueRef.current, bpmRef.current);
       const itemPx = newStart * zoom;
-      const followMargin = Math.round(rect.width * 0.75);
-      if (itemPx > scrollLeft + rect.width - followMargin) {
-        wrapper.scrollLeft = itemPx - rect.width + followMargin;
-        setCanvasRedrawCount(n => n + 1);
-      } else if (itemPx < scrollLeft + followMargin) {
-        wrapper.scrollLeft = Math.max(0, itemPx - followMargin);
+      if (itemPx < scrollLeft + 60) {
+        wrapper.scrollLeft = Math.max(0, itemPx - 60);
         setCanvasRedrawCount(n => n + 1);
       }
       const targetTrackId = hoveredTrackIdRef.current || drag.trackId;
@@ -10392,12 +10389,8 @@ const App = () => {
       const rawStart = Math.max(beatSec, Math.min(time - drag.clickOffset, marginBar));
       const newStart = snapTime(rawStart, snapValueRef.current, bpmRef.current);
       const itemPx = newStart * zoom;
-      const followMargin = Math.round(rect.width * 0.75);
-      if (itemPx > scrollLeft + rect.width - followMargin) {
-        wrapper.scrollLeft = itemPx - rect.width + followMargin;
-        setCanvasRedrawCount(n => n + 1);
-      } else if (itemPx < scrollLeft + followMargin) {
-        wrapper.scrollLeft = Math.max(0, itemPx - followMargin);
+      if (itemPx < scrollLeft + 60) {
+        wrapper.scrollLeft = Math.max(0, itemPx - 60);
         setCanvasRedrawCount(n => n + 1);
       }
       const targetTrackId = hoveredTrackIdRef.current || drag.trackId;
@@ -10489,12 +10482,8 @@ const App = () => {
           : { ...t, midiItems: items };
       }));
       const edgePx = (resize.side === 'left' ? Math.max(0, time) : time) * zoom;
-      const followMargin = Math.round(rect.width * 0.75);
-      if (edgePx > scrollLeft + rect.width - followMargin) {
-        wrapper.scrollLeft = edgePx - rect.width + followMargin;
-        setCanvasRedrawCount(n => n + 1);
-      } else if (edgePx < scrollLeft + followMargin) {
-        wrapper.scrollLeft = Math.max(0, edgePx - followMargin);
+      if (edgePx < scrollLeft + 60) {
+        wrapper.scrollLeft = Math.max(0, edgePx - 60);
         setCanvasRedrawCount(n => n + 1);
       }
     };