Fix zoom outside of chart area

[gopal-panigrahi]

trafficstars

Fix: #770 Fix: #807

Changes:

1. Attaches mousemove event to canvas.ownerDocument for calculating drag rectangle even when cursor is outside the chart area.
2. checks if endpoint of drag rectangle is outside the chart area then endpoint is calculated based on clientX/Y - chartArea.left/top
3. clips drag rectangle to the chart area.

[gopal-panigrahi]

Hi @kurkle, Please can you review the PR.

[zloveless]

Hi @gopal-panigrahi I believe this would fix an issue we're having in our charts. Is there any portable solution I can try on my end to see if it works?

[gopal-panigrahi]

Hi @zloveless, In our project, I had to create a patch file for these changes, you can try the same. I used the patch-package library.

[zloveless]

Hi @zloveless, In our project, I had to create a patch file for these changes, you can try the same. I used the patch-package library.

Thanks! I found some code in one of the tracking issues on this here... I just used added a callback to onZoomStart() to check if the zoom action is in the chart area. I still wish one of these PR's that fix it would get merged.

[joshkel]

Thanks for working on this, @gopal-panigrahi. I'm curious about the changes in d9fd526d225f7b5b8e335662b386719301a52f96 - to me, the behavior feels cleaner without this change (letting the drag rectangle pin to the edges of the chart area, instead of the edges of the canvas). Were there specific issues that you ran into, or is it more of a UX preference?

[gopal-panigrahi]

Hi @joshkel , I had bounded the drag rectangle to pin to the edges of the chart area, instead of the edges of the canvas but then zoom is enabled for x and y axis region, which causes issues while creating rectangles.

If we enable zoom for only chart area then we can pin the drag rectangle to the edges of chart area.