feat(editor): the overview strip becomes a real horizontal scrollbar - #325
Conversation
|
Warning Review limit reached
Next review available in: 24 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (7)
📝 WalkthroughWalkthroughThe PR centralizes zoom bounds and adds a draggable minimap scrollbar with thumb dragging, grip-based zoom resizing, zoom-to-fit double-click behavior, updated cursor and event routing, and regression coverage for geometry and interaction edge cases. ChangesMinimap scrollbar and zoom behavior
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/mouse.js`:
- Around line 436-449: Move the minimap hover handling in the ruler hover path
ahead of the drum-edit and tempo-map hover guards so _minimapHitPure and the
corresponding cursor assignment always run when the pointer is over the minimap.
Preserve the existing mode-specific guards and mousedown behavior after this
early minimap handling.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 56a83c3b-93bf-4889-a937-a03986d29f1e
📒 Files selected for processing (7)
CHANGELOG.mdsrc/geometry.jssrc/main.jssrc/mouse.jssrc/ruler.jstests/keyboard_gutter_dblclick.test.mjstests/minimap_scrollbar.test.mjs
The minimap already painted a viewport window, but it was a one-pixel outline nobody could grab, and mousedown always re-centred the view on the click — so there was no way to drag the timeline precisely, and the strip read as decoration. Christian's words on seeing it: "is this the scroll bar? because it doesn't work currently." The window is now a thumb: - grab the body and the view tracks the pointer 1:1, no jump on press - drag either edge to zoom, opposite edge anchored - double-click the strip to fit the whole song - clicking the empty track still jumps there (unchanged) Painted as a filled block with edge grips, with cursor feedback (grab on the body, ew-resize on a grip) and a minimum thumb width so a deeply zoomed-in view still leaves something to hold. The grip half-width is capped at a third of the thumb so a floored thumb keeps a draggable body between its two grips. Modelled on Ableton Live's Arrangement Overview (Live 12 manual p.151: "click and drag horizontally to scroll left or right, or click and drag vertically to zoom in or out. To zoom out to the full Arrangement, double-click anywhere within") and its resizable Clip View Selector (p.210). Logic Pro splits the same job across a horizontal scroll bar and a Horizontal Zoom slider (Logic Pro user guide, p.297); one strip doing both is the tighter fit for a canvas with 14px of chrome to spend. Zoom-to-fit forced a second fix. The zoom floor was 20px/s inlined at each writer, which capped the widest view at ~50 seconds — fit-to-song would have been a no-op for any real song. ZOOM_MIN/ZOOM_MAX/clampZoom() now live in geometry.js at a 2px/s floor (~8 minutes), shared by the wheel, the zoom buttons and the scrollbar. Verified in a browser against a 3:35 song, not just in unit tests: grabbing 25% into the thumb moves it 0px on press (the old model would have leapt ~100px) and tracks +199px over a +200px drag; double-click drops zoom 100→5 with the thumb spanning the full strip; dragging the end grip takes the thumb 403→652px and zoom 15→9. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017xGPjDBF8NTwTK7VQvizix
169b474 to
360c2cb
Compare
1 participant
What
The minimap already painted a viewport window, but it was a one-pixel outline nobody could grab, and mousedown always re-centred the view on the click. So there was no way to drag the timeline precisely, and the strip read as decoration rather than a control.
The window is now a proper scrollbar thumb:
It paints as a filled block with edge grips, the cursor spells out which gesture you'll get (
grabon the body,ew-resizeon a grip), and a very short thumb floors at a grabbable width instead of thinning to a hairline. The grip half-width is capped at a third of the thumb, so a floored thumb still keeps a draggable body between its two grips.Where it comes from
Ableton Live's Arrangement Overview — Live 12 manual p.151: "click and drag horizontally to scroll left or right, or click and drag vertically to zoom in or out. To zoom out to the full Arrangement, double-click anywhere within" — plus its resizable Clip View Selector (p.210). Logic Pro splits the same job across a horizontal scroll bar and a Horizontal Zoom slider (Logic Pro user guide, p.297); one strip doing both is the tighter fit for a canvas with 14px of chrome to spend.
The zoom floor had to move
Zoom-to-fit forced a second fix. The floor was
20px/s, inlined at each zoom writer, which capped the widest possible view at ~50 seconds — so fit-to-song would have been a no-op for any real song, and "zoom out to see the arrangement" was simply unreachable.ZOOM_MIN/ZOOM_MAX/clampZoom()now live insrc/geometry.jsat a 2px/s floor (~8 minutes on a typical canvas), shared by the wheel, the zoom buttons and the scrollbar. The painters already degrade gracefully down there — bar labels thin out via_rulerBarLabelSkipPure, note bodies hold atMIN_NOTE_W.Verification
Unit tests cover the geometry, but the interesting part was checked in a real browser against a 3:35 song, because the pure functions can't prove the wiring:
grab/ew-resize. No page errors.tests/minimap_scrollbar.test.mjspins the geometry (thumb extent, min-width flooring and end-of-song containment, hit-test precedence, anchored resize incl. the clamped case, fit, and degenerate/NaN inputs).tests/keyboard_gutter_dblclick.test.mjsgains a case assertingonDblClickconsults the minimap before the parts/drum/tempo mode guards — that one fails on main ("onDblClick must consult the minimap first").231/231 JS tests pass; lint clean (the 3 remaining warnings are pre-existing in
create.js/main.js).Notes for review
_drumLaneIdxToYandmidiToYhave no scroll term, so on a short canvas the kick and snare lanes are unreachable) and that wants its own change.🤖 Generated with Claude Code
https://claude.ai/code/session_017xGPjDBF8NTwTK7VQvizix
Summary by CodeRabbit
New Features
Improvements