From 52ecc38e1331447c372f481f641ba27d34df8838 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Sat, 25 Jul 2026 10:01:56 +0700
Subject: [PATCH] fix: auto-follow 80px both sides for tempo lane bar
 visibility + 200px buffer

---
 app/static/js/app.jsx | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/app/static/js/app.jsx b/app/static/js/app.jsx
index 3b0d4a8..8430e25 100644
--- a/app/static/js/app.jsx
+++ b/app/static/js/app.jsx
@@ -1226,7 +1226,7 @@ const TempoTrackLane = ({
       const beatNum = Math.floor(t / beatDuration) + 1;
       const isBar = beatNum % 4 === 1;
       const localX = (t - tStart) * zoom;
-      if (localX < 0 || localX > drawWidth) continue;
+      if (localX < -200 || localX > drawWidth + 200) continue;
       if (isBar) {
         ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
         ctx.lineWidth = 1.5;
@@ -10192,7 +10192,7 @@ const App = () => {
     const wrapper = timelineWrapperRef.current;
     if (!wrapper) return;
     const wr = wrapper.getBoundingClientRect();
-    const margin = 80;
+    const margin = 200;
     if (clientX > wr.right - margin) {
       const depth = (clientX - (wr.right - margin)) / margin;
       const speed = Math.round(5 + depth * depth * 40);
@@ -10226,8 +10226,12 @@ const App = () => {
       const clampedStart = Math.min(rawStart, marginBar);
       const newStart = snapTime(clampedStart, snapValueRef.current, bpmRef.current);
       const itemPx = newStart * zoom;
-      if (itemPx < scrollLeft + 60) {
-        wrapper.scrollLeft = Math.max(0, itemPx - 60);
+      const keepMargin = 80;
+      if (itemPx > scrollLeft + rect.width - keepMargin) {
+        wrapper.scrollLeft = itemPx - rect.width + keepMargin;
+        setCanvasRedrawCount(n => n + 1);
+      } else if (itemPx < scrollLeft + keepMargin) {
+        wrapper.scrollLeft = Math.max(0, itemPx - keepMargin);
         setCanvasRedrawCount(n => n + 1);
       }
       const targetTrackId = hoveredTrackIdRef.current || drag.trackId;
@@ -10389,8 +10393,12 @@ 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;
-      if (itemPx < scrollLeft + 60) {
-        wrapper.scrollLeft = Math.max(0, itemPx - 60);
+      const keepMargin = 80;
+      if (itemPx > scrollLeft + rect.width - keepMargin) {
+        wrapper.scrollLeft = itemPx - rect.width + keepMargin;
+        setCanvasRedrawCount(n => n + 1);
+      } else if (itemPx < scrollLeft + keepMargin) {
+        wrapper.scrollLeft = Math.max(0, itemPx - keepMargin);
         setCanvasRedrawCount(n => n + 1);
       }
       const targetTrackId = hoveredTrackIdRef.current || drag.trackId;
@@ -10482,8 +10490,12 @@ const App = () => {
           : { ...t, midiItems: items };
       }));
       const edgePx = (resize.side === 'left' ? Math.max(0, time) : time) * zoom;
-      if (edgePx < scrollLeft + 60) {
-        wrapper.scrollLeft = Math.max(0, edgePx - 60);
+      const keepMargin = 80;
+      if (edgePx > scrollLeft + rect.width - keepMargin) {
+        wrapper.scrollLeft = edgePx - rect.width + keepMargin;
+        setCanvasRedrawCount(n => n + 1);
+      } else if (edgePx < scrollLeft + keepMargin) {
+        wrapper.scrollLeft = Math.max(0, edgePx - keepMargin);
         setCanvasRedrawCount(n => n + 1);
       }
     };