Fix zoom outside of chart area

[gopal-panigrahi]

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 d9fd526 - 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.

[ronneldavis]

@gopal-panigrahi I believe it will fix an issue I'm having where if I start zooming into one chart but end the drag in another chart, the zoom behaviour is all messed up. However I don't think this repo is alive anymore, would it be possible to apply this PR here - https://github.com/trullock/chartjs-plugin-zoom
This is still actively developed and if so could help us all

[gopal-panigrahi]

Hi @kurkle ,
Are there any comments on this change?.
It fixes the issue of drag rectangle not updating when the cursor moved out of the chart.
Do you have an opinion on the boundary of the drag rectangle ?

[kurkle]

Hi @kurkle , Are there any comments on this change?. It fixes the issue of drag rectangle not updating when the cursor moved out of the chart. Do you have an opinion on the boundary of the drag rectangle ?

Hi @gopal-panigrahi, and than you for the PR.

I'm not sure if the ownerDocument works for all use cases, maybe there should be an option to enable this?
For the boundary, intuitively I'd think it should be chartArea. But not sure about that either.
Why did you go for canvas area?

[gopal-panigrahi]

Hi @kurkle ,

1. I used ownerDocument for mousemove, because the mouseup event was also attached to ownerDocument, and seemed to work fine.
2. Chose canvasArea instead of chartArea because the zoom trigger is allowed outside the chartArea also, like on the axis, and that creates issues with drag rectangle calculations

With boundary fixed to chartArea: https://jsbin.com/doxidebene/1/edit?js,output, Try creating drag rectangle at across the axis to chartArea

With boundary fixed to canvasArea: https://jsbin.com/vunezavomu/1/edit?js,output

[kurkle]

Hi @kurkle ,

1. I used ownerDocument for mousemove, because the mouseup event was also attached to ownerDocument, and seemed to work fine.
2. Chose canvasArea instead of chartArea because the zoom trigger is allowed outside the chartArea also, like on the axis, and that creates issues with drag rectangle calculations

With boundary fixed to chartArea: https://jsbin.com/doxidebene/1/edit?js,output, Try creating drag rectangle at across the axis to chartArea

With boundary fixed to canvasArea: https://jsbin.com/vunezavomu/1/edit?js,output

Thanks!
Looks like the getPointPosition function is not really needed, because the added min/max limits do the job already. Am I missing something?

[gopal-panigrahi]

I had written getPointPosition function specifically for endPoint outside of canvas area.
When we use getRelativePosition for points outside chart area, it mis-calculates the end point position, therefore i changed the calculation for points outside the canvas area.

code sample : https://jsbin.com/culesidobe/1/edit?html,output

screen-capture.webm