brush: fix brush jumping around after mouseup #1836
Conversation
|
thanks 👍 |
|
Hi @tfineberg4, thanks for the PR! The before/after videos look good. Nice work. The fix for the root problem looks right to me, but would you mind updating this PR without bringing in the @lodash/debounce dependency? Fine to just add a local debounce function in the file itself. We try to avoid dependencies if we can to keep package size down and reduce maintenance burden. Thank you again, excited to close these long standing issues! |
|
Hey @hshoff ! Oops, my bad! Totally thought lodash was already a dependency here. I slipped the debounce function into Thanks so much for an awesome set of packages, as well as your quick response here 👍 |
| @@ -320,6 +320,8 @@ export default class BaseBrush extends React.Component<BaseBrushProps, BaseBrush | |||
| } | |||
| }; | |||
|
|
|||
| debouncedHandleWindowPointerMove = debounce(this.handleWindowPointerMove, 1); | |||
There was a problem hiding this comment.
could potentially add a comment for why we need this debounce since it was such a cryptic issue before!
There was a problem hiding this comment.
I pulled your branch down and ran the demo brush component locally and compared it to https://airbnb.io/visx/brush. Can confirm bug fixed.
Interesting to discover the bug isn't present in Safari on https://airbnb.io/visx/brush, but present in Chrome.
Fix looks good to me, thanks again for contributing to visx!
|
🎉 This PR is included in version |
🐛 Bug Fix
How to induce?
resize the brush window by dragging and releasing one handle quickly, or quickly drag the brush window and release (harder to induce this way)
Impact?
Handle ends up quite far away from the mouse pointer's location. Sometimes the location of both handles will be updated, resulting in a drastic resize of the brush window.
Two relevant issue have been linked below- I believe this PR should resolve both of them!
Issue 1
Issue 2
Root cause
mouseupaction is supposed to disable subsequent dragging of the handle uponmousemove. This is achieved by updating the brush's state. However, when moving quickly,mousemoveactions can triggerhandleWindowPointerMovebefore the state change is complete. This leads to handle movement aftermouseup. Additionally, the stale state causes the occasionally erratic placement of the handle(s).Before
Screen.Recording.2024-05-21.at.3.08.32.PM.mov
After
Can't induce the bug anymore, even with very quick use of the brush.
Screen.Recording.2024-05-21.at.3.12.11.PM.mov