Brush drag gets stuck when the mouse leaves the chart area

[tmtron]

Version

4.2.1

Reproduction link

https://jsfiddle.net/tmtron/kdaqhpjv/108//

Note: the jsfiddle example still uses V4.1.0 (but in our app we can also see the issue with V 4.2.0)

Steps to reproduce

• left-click in the chart area and HOLD the left button
• now the brush-drag is active: we can move the mouse around and the area will follow
• but when we exit the chart area (e.g. far to the right on the grey area) and then release the mouse button (still on the grey area), the brush-drag mode gets stuck
  • what I mean is, when you now move the mouse back to the chart area, the brush-drag is still active: i.e. the mouse move will resize the brush area although the left-mouse button is NOT pressed down anymore
  • this will only stop when you make another click inside the chart area

What is expected?

the brush mode should stop (same as releasing the pressed mouse button)

What is actually happening?

the brush mode ist stuck: when you release the mouse button outside the canvas, and reenter, the brush is still following the mouse movements

As a workaround I tried to fire a 'mouseup' event when the 'globalout' event occurs, but that does not work.

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

Have a nice day! 🍵

[vivsvaan]

@tmtron I used Mouse Events to release the mouse click when we leave chart view/area.
When we use <div echarts ...> to produce our chart, it generated an < canvas > element in HTML.
You just have to trigger a mouseup event on that < canvas > element when mouse leaves the chart view/area.