Skip to content

fix(ui): draw the scrubber at its rendered width - #3015

Merged
Danielku15 merged 1 commit into
developfrom
fix/scrubber-responsive
Nov 7, 2026
Merged

Danielku15 merged 1 commit into
developfrom
fix/scrubber-responsive

Conversation

@Danielku15

Copy link
Copy Markdown
Member

Note

AI-authored disclosure (alphatab-ai-authored-v1)

Portions of this content were authored by an AI agent. The agent has read
AGENTS.md and the human submitter accepts responsibility for
compliance with the rules in that document.

Issues

Fixes #3010

Proposed changes

The scrubber always drew into a fixed 600-unit viewBox (400 when compact), stretched to its container with preserveAspectRatio="none". As a result:

  • Bar numbers, tempo labels and the cursor knob were stretched horizontally on wide players and squeezed on narrow ones; the knob became an oval.
  • Every bar got a tick, whatever the width. A long song on a narrow player turned its ticks into a solid band.
  • The bar numbers were fixed at 16, 32 and 48, whatever the width or song length.

The issue's proposed patch measures the width and picks power-of-two steps. This PR builds on that and also handles label size, the edges of the scrubber and the tempo labels:

  • True size. The scrubber measures its width and draws in CSS pixels, so text, lines and the knob keep their size at any width. Until the first measurement (e.g. on server-rendered website pages) it uses the previous 600/400 widths.
  • Density follows the space. Bar numbers step in powers of two (1, 2, 4, 8, 16 … bars), at least 48 px apart. The spacing also grows with the digit count of long songs. Ticks are at least 4 px apart, with major and mid ticks derived from the label step. With a 96-bar score this gives a label every 2nd bar at 3440 px and every 16th at 900 px. A 1000-bar song at 600 px draws 126 ticks instead of 1001.
  • 1-based bar numbers. Labels read 1, 9, 17 … at the start of their bar, matching the rendered score and the slider's "Bar N of M" value text. Before, "16" sat where the score's bar 17 begins.
  • Labels stay inside. The first and last bar numbers are pulled in so they don't spill past the ends.
  • Tempo labels. Near the right edge a label moves to the left of its marker. Colliding labels are dropped based on their actual width; before, the check used a fixed 60-unit gap that changed with the width.
  • Playback cost. Ticks, labels and tempo markers are only rebuilt when the width, song or tempo markers change, not on every bar during playback.

The scrubber's height (38 px, 22 px compact) and its props are unchanged, so the transport, the compact player and the website's landing player keep their layout.

Checked in the playground control demo at 3440, 1400, 900 and 760 px (the 760 px window triggers the wrapped full-row transport).

Checklist

  • I consent that this change becomes part of alphaTab under its current or any future open source license
  • This PR is linked to an accepted issue (see above)
  • Changes are implemented
  • New tests were added
  • I have read AGENTS.md if an AI helped draft any part of this PR

AI authorship disclosure

  • No AI agent authored any part of this PR (description, code, tests, or commit messages)
  • An AI agent contributed to this PR. The AI-authored disclosure block
    (alphatab-ai-authored-v1) is present at the top of this body, and I have
    personally reviewed every change and can explain each one

Further details

  • This is a breaking change
  • Docs / release notes updated in website/

The scrubber drew into a fixed 600 (compact 400) unit viewBox stretched
to its container, so bar numbers, tempo labels and the cursor knob were
distorted on wide and narrow players, and the tick count stayed one per
bar regardless of the space available.

It now measures its width and draws in CSS pixels. Bar numbers and ticks
step in powers of two chosen from the space a bar gets, so wide players
label more bars and long songs on narrow players no longer collapse
their ticks into a solid band. Labels show one-based bar numbers at the
start of their bar, matching the rendered score, and stay inside the
scrubber at both ends. Tempo labels flip to the left of a marker near
the right edge and are dropped by their actual width when they collide.

Closes #3010
@Danielku15 Danielku15 self-assigned this Nov 7, 2026
@Danielku15
Danielku15 merged commit 1a9705e into develop Nov 7, 2026
10 checks passed
@Danielku15
Danielku15 deleted the fix/scrubber-responsive branch November 7, 2026 13:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Playback ruler labels stretch or shrink when resizing the window

1 participant