fix: sync bar ruler redraw during drag via canvasRedrawCount

This commit is contained in:
2026-07-25 09:24:31 +07:00
parent f1057ab7f2
commit 6aed5e2ec8
2 changed files with 20 additions and 4 deletions
+15 -4
View File
@@ -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", {