feat: sticky time ruler + tempo lane when scrolling tracks

- Wrap TimelineRuler + TempoTrackLane in sticky-top div
- Same sticky pattern for both main session and sub-tab views
- TCP column already has sticky header (top-0) and tempo row (top-10)
- Background color hides tracks scrolling behind ruler
This commit is contained in:
2026-07-26 21:32:08 +07:00
parent 9038cfab86
commit 7bbe1f3be0
2 changed files with 7 additions and 3 deletions
+6 -2
View File
@@ -15785,6 +15785,8 @@ const App = () => {
width: `${timelineWidth}px` width: `${timelineWidth}px`
}, },
className: "relative flex flex-col min-h-full" className: "relative flex flex-col min-h-full"
}, /*#__PURE__*/React.createElement("div", {
className: "sticky top-0 z-30 bg-[#1a1a1a]"
}, /*#__PURE__*/React.createElement(TimelineRuler, { }, /*#__PURE__*/React.createElement(TimelineRuler, {
bpm: parseInt(bpm) || 120, bpm: parseInt(bpm) || 120,
zoom: zoom, zoom: zoom,
@@ -15805,7 +15807,7 @@ const App = () => {
onRulerMouseDown: handleRulerMouseDown, onRulerMouseDown: handleRulerMouseDown,
scrollLeft: scrollLeft, scrollLeft: scrollLeft,
canvasRedrawCount: canvasRedrawCount canvasRedrawCount: canvasRedrawCount
}), selectionMode === 'global' && selLeft !== null && selRight !== null && selRight > selLeft && /*#__PURE__*/React.createElement("div", { })), selectionMode === 'global' && selLeft !== null && selRight !== null && selRight > selLeft && /*#__PURE__*/React.createElement("div", {
className: "absolute inset-0 pointer-events-none z-20", className: "absolute inset-0 pointer-events-none z-20",
style: { style: {
left: `${selLeft * zoom}px`, left: `${selLeft * zoom}px`,
@@ -16355,6 +16357,8 @@ const App = () => {
width: `${subTabTimelineWidth}px` width: `${subTabTimelineWidth}px`
}, },
className: "relative flex flex-col min-h-full" className: "relative flex flex-col min-h-full"
}, /*#__PURE__*/React.createElement("div", {
className: "sticky top-0 z-30 bg-[#1a1a1a]"
}, /*#__PURE__*/React.createElement(TimelineRuler, { }, /*#__PURE__*/React.createElement(TimelineRuler, {
bpm: parseInt(bpm) || 120, bpm: parseInt(bpm) || 120,
zoom: zoom, zoom: zoom,
@@ -16374,7 +16378,7 @@ const App = () => {
}, },
scrollLeft: scrollLeft, scrollLeft: scrollLeft,
canvasRedrawCount: canvasRedrawCount canvasRedrawCount: canvasRedrawCount
}), /*#__PURE__*/React.createElement("div", { })), /*#__PURE__*/React.createElement("div", {
className: "flex-1 flex flex-col relative bg-[#111111] min-h-full" className: "flex-1 flex flex-col relative bg-[#111111] min-h-full"
}, vTrack && /*#__PURE__*/React.createElement("div", { }, vTrack && /*#__PURE__*/React.createElement("div", {
style: { style: {
File diff suppressed because one or more lines are too long