Make piano roll position bar be sticky
@@ -119,8 +119,9 @@ const RollPlaybackTracker = styled.div`
background-repeat-y: no-repeat;
background-size: ${CELL_SIZE * 8}px ${CELL_SIZE * 12 * 6 + CELL_SIZE}px;
position: absolute;
- top: -${CELL_SIZE}px;
+ top: 0;
bottom: 0;
+ left: -10px;
&::before {
content: "";
position: absolute;
@@ -134,13 +135,15 @@ const RollPlaybackTracker = styled.div`
`;
const SongGridHeader = styled.div<SongGridHeaderProps>`
- position: absolute;
+ position: sticky;
top: 0;
left: ${30 + 10 + 1}px;
right: 0;
+ z-index: 10;
${(props) => css`
width: ${props.cols * CELL_SIZE}px;
height: ${CELL_SIZE}px;
+ background-color: ${props.theme.colors.document.background};
background-image: linear-gradient(
90deg,
${props.theme.colors.tracker.rollCell.border} 2px,
@@ -149,6 +152,9 @@ const SongGridHeader = styled.div<SongGridHeaderProps>`
background-size: ${CELL_SIZE * 8}px ${CELL_SIZE / 3}px;
background-repeat: repeat-x;
background-position-y: center;
+ border-bottom: 1px solid #808080;
+ margin-bottom: -1px;
+ border-right: 2px solid ${props.theme.colors.document.background};
`}
`;
@@ -249,12 +255,9 @@ export const SongPianoRoll = ({
>
<div
style={{
- display: "flex",
- position: "relative",
overflow: "auto",
- height: `calc(100% - ${CELL_SIZE}px)`,
+ height: "100%",
zIndex: 1,
- paddingTop: CELL_SIZE,
}}
>
<SongGridHeader
@@ -262,7 +265,23 @@ export const SongPianoRoll = ({
onMouseDown={(e) => {
setPlaybackPosition(e.nativeEvent);
}}
- ></SongGridHeader>
+ >
+ <RollPlaybackTracker
+ ref={playingRowRef}
+ style={{
+ display: playbackState[0] === sequenceId ? "" : "none",
+ transform: `translateX(${10 + playbackState[1] * CELL_SIZE}px)`,
+ }}
+ />
+ </SongGridHeader>
+ <div
+ style={{
+ display: "flex",
+ position: "relative",
+ width: "100%",
+ zIndex: 1,
+ }}
+ >
<Piano>
{Array(6)
.fill("")
@@ -325,13 +344,6 @@ export const SongPianoRoll = ({
))}
</Piano>
<SongGrid tabIndex={0}>
- <RollPlaybackTracker
- ref={playingRowRef}
- style={{
- display: playbackState[0] === sequenceId ? "" : "none",
- transform: `translateX(${10 + playbackState[1] * CELL_SIZE}px)`,
- }}
- />
<RollChannelGrid cellSize={CELL_SIZE} />
{v.map((i) => (
<RollChannel
@@ -345,6 +357,7 @@ export const SongPianoRoll = ({
</SongGrid>
</div>
</div>
+ </div>
<SplitPaneVerticalDivider />
<SplitPaneHeader
onToggle={togglePatternsPanel}
