From 6aed5e2ec888ea3fcd0b1c1799963e36391d9f33 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Sat, 25 Jul 2026 09:24:31 +0700
Subject: [PATCH] fix: sync bar ruler redraw during drag via canvasRedrawCount

---
 app/static/js/app.jsx | 19 +++++++++++++++----
 wiki.md               |  5 +++++
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/static/js/app.jsx b/app/static/js/app.jsx
index 27987a3..d2faeb2 100644
--- a/app/static/js/app.jsx
+++ b/app/static/js/app.jsx
@@ -1196,7 +1196,8 @@ const TempoTrackLane = ({
   onPlayheadSet,
   snapValue,
   onRulerMouseDown,
-  scrollLeft
+  scrollLeft,
+  canvasRedrawCount
 }) => {
   const canvasRef = useRef(null);
   const drawWidth = Math.min(timelineWidth, viewportWidth);
@@ -1286,7 +1287,7 @@ const TempoTrackLane = ({
     ctx.font = 'bold 10px Inter, sans-serif';
     ctx.textAlign = 'right';
     ctx.fillText(`${bpm} BPM`, drawWidth - 6, 12);
-  }, [bpm, zoom, timelineWidth, viewportWidth, snapValue, scrollLeft]);
+  }, [bpm, zoom, timelineWidth, viewportWidth, snapValue, scrollLeft, canvasRedrawCount]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     key: "virtual-spacer-tempo",
     style: {
@@ -10222,8 +10223,10 @@ const App = () => {
       const followMargin = 120;
       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);
+        setCanvasRedrawCount(n => n + 1);
       }
       const targetTrackId = hoveredTrackIdRef.current || drag.trackId;
       updateActiveTracks(prev => prev.map(t => {
@@ -10386,8 +10389,10 @@ const App = () => {
       const followMargin = 120;
       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);
+        setCanvasRedrawCount(n => n + 1);
       }
       const targetTrackId = hoveredTrackIdRef.current || drag.trackId;
       updateActiveTracks(prev => {
@@ -10481,8 +10486,10 @@ const App = () => {
       const followMargin = 120;
       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);
+        setCanvasRedrawCount(n => n + 1);
       }
     };
     const handleMouseUp = () => {
@@ -14875,7 +14882,8 @@ const App = () => {
       onPlayheadSet: handlePlayheadSet,
       snapValue: snapValue,
       onRulerMouseDown: handleRulerMouseDown,
-      scrollLeft: scrollLeft
+      scrollLeft: scrollLeft,
+      canvasRedrawCount: canvasRedrawCount
     }))), /*#__PURE__*/React.createElement("div", {
       className: "flex-1 flex flex-col divide-y divide-[#141414] relative bg-[#111111] min-h-full"
     }, activeTracks.map((track, idx) => {
@@ -15386,8 +15394,11 @@ const App = () => {
         bpm: parseInt(bpm) || 120,
         zoom: zoom,
         timelineWidth: subTabTimelineWidth,
+        viewportWidth: viewportWidth,
         onPlayheadSet: setCurrentTime,
-        snapValue: snapValue
+        snapValue: snapValue,
+        scrollLeft: scrollLeft,
+        canvasRedrawCount: canvasRedrawCount
       }))), /*#__PURE__*/React.createElement("div", {
         className: "flex-1 flex flex-col relative bg-[#111111] min-h-full"
       }, vTrack && /*#__PURE__*/React.createElement("div", {
diff --git a/wiki.md b/wiki.md
index 01d9da0..e571f73 100644
--- a/wiki.md
+++ b/wiki.md
@@ -54,6 +54,11 @@
 - **Các file ảnh hưởng:** `app/static/js/app.jsx`
 - **Ghi chú/Test (nếu có):** `npx babel app/static/js/app.jsx` — compile pass.
 
+### [2026-07-25 09:23] Task: Sync bar ruler redraw during drag
+- **Tóm tắt thay đổi:** (1) TempoTrackLane nhận `canvasRedrawCount` prop + deps — force redraw bar numbers khi drag. (2) Cả 3 drag handler increment `setCanvasRedrawCount` sau auto-follow scroll. (3) Sub-tab TempoTrackLane thêm `viewportWidth` + `scrollLeft` + `canvasRedrawCount` — đồng bộ ruler với timeline.
+- **Các file ảnh hưởng:** `app/static/js/app.jsx`
+- **Ghi chú/Test (nếu có):** `npx babel app/static/js/app.jsx` — compile pass.
+
 ### [2026-07-25 07:25] Task: Fix auto-scroll + maxDuration tab isolation + 1-bar margin
 - **Tóm tắt thay đổi:** (1) `maxDuration` dùng `activeTracks` + 4-bar buffer. (2) Cách ly MAIN vs SECTION-TAB. (3) Clip/section/MIDI drag/stretch/resize clamp 1-bar from right. (4) Clip drag + stretched clip dùng `updateActiveTracks`. (5) Stretched clip handler thêm auto-scroll.
 - **Các file ảnh hưởng:** `app/static/js/app.jsx`