fix: sync bar ruler redraw during drag via canvasRedrawCount

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", {

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`