cursor.drag: Continue updating/clamping zoom box when mouse leaves chart area

#1126 · closed · 6 comments

View on GitHub ↗

GazozBaba

Hi there, I'm using uPlot with cursor.drag enabled for both axes: `uPlot.options.cursor.drag = { x: true, y: true }` While it works as expected within the chart area, I noticed that the drag/zoom box stops updating as soon as the mouse cursor leaves the `u-over` / chart area. **The Goal:** I would like the zoom box to continue updating based on the mouse position, even when the cursor is outside the chart, by clamping the coordinates to the chart boundaries. **Expected Behavior:** 1. **Horizontal Exit**: If I drag to the left/right edge and then move the cursor vertically outside the chart, the zoom box should stay clamped to the horizontal boundary but continue to expand/contract vertically. 2. **Vertical Exit**: If I drag to the top/bottom edge and then move horizontally outside, the zoom box should stay clamped vertically but continue extending horizontally. **Current Behavior:** The mousemove listener (or the internal logic) seems to stop updating the selection box once the cursor is no longer over the chart element. **Question:** Is there a native configuration or a specific hook to enable this "clamping" behavior? Or does this require a custom implementation to override the default drag logic? uPlot Version: _1.6.32_

Comments

leeoniya

this improvement makes sense, i'll take a look in the next few days.

leeoniya

you can try this: https://github.com/leeoniya/uPlot/pull/1127 i think the cursor needs to hide when releasing the drag outside the plot area, but otherwise i think it works as expected?

GazozBaba

Thanks for your quick response! I tested the fix branch and it works fine. However, I found the following minor issue: <img width="1324" height="1148" alt="Image" src="https://github.com/user-attachments/assets/4c1356ce-39a1-4254-ae95-30aee93a7f8c" /> <img width="1078" height="844" alt="Image" src="https://github.com/user-attachments/assets/ef622826-6cca-4a78-a427-cc75ee67a0ea" />

leeoniya

yeah, i noticed that too, it's from me using `incrRound` for clamping: https://github.com/leeoniya/uPlot/blob/976b207e0132a6bff685280c6de653867d0e2b17/src/uPlot.js#L3187 doesnt quite work the same when you can mousemove outside the plot area 😅

GazozBaba

You're right, that incrRound logic seems to be the issue. Also, hiding the cursor when releasing the drag outside the plot area sounds like a good idea for a clean UX. Thanks for your help with this! Let me know when the PR is updated and I'll be happy to test it again!

leeoniya

fixed on `master`