Align interactions when plot created inside scaled and/or translated elements using CSS transform

[alexhartstone]

Fixes #888.
This is the first commit of a few fixes for interactions with plots that are broken due when css transform scaling is applied.
The general aim is to undo the transform matrices applied to these elements for the interactions.

TODOs:

• clicking the end of an axis in 2D cartesian to type a new number: the text entry box shows up in the wrong place
• fixing 2D cartesian pan
• fixing zoom & pan in ternary & polar
• fixing scattermapbox hover & select
• fixing choroplethmapbox hover
• fixing the position of hover on sankey trace
• fixing the position of hover on parcats trace
• adding hover, select and drag-zoom tests for cartesian subplots
• adding hover, select and drag-zoom tests for polar subplots
• adding hover, select and drag-zoom tests for mapbox subplots i.e. choroplethmapbox and scattermapbox
• adding hover, select and drag-zoom tests for geo subplots e.g. choropleth
• adding hover, select and drag-zoom tests for ternary subplots
• test using different browsers namely Firefox, Chrome and Safari

[archmoj]

Thanks very much @alexhartstone for submitting this PR.
I spend some time testing this on different plot types.
Please view/pick my commits on this dev branch: https://github.com/plotly/plotly.js/compare/pull-5193_ms that fixes few minor issues to start.

[archmoj]

@alexhartstone FYI - I also added few more commits to that branch that may be of interest.

[archmoj]

@alexhartstone just to let you know. I am investing more time on the dev-branch today. I will let you when I was able to complete my journey.

[archmoj]

@alexhartstone please pick my commits from https://github.com/plotly/plotly.js/compare/pull-5193_ms or alternatively allow us as the maintainers access to push into your branch. Please find the instructions here https://github.com/plotly/plotly.js/blob/master/.github/PULL_REQUEST_TEMPLATE.md

With all those fixes the transforms e.g. scale, scaleX, scaleY, translate now works as expected on cartesian, geo, gl2d, gl3d, ternary and polar plots.
You should find a similar fix for the mapbox plot.
Also gl3d hovers does not scale according to the transform at the moment. It might be a desirable behaviour actually (and maybe we should try achieve the same with other subplots). However you should investigate why this is happening (if related to pixelRatio or not, etc).
Then you should start adding a number of tests for different subplots to ensure the hover, select and zoom works as expected.
Also it would be nice to catch the positioning issue when rotation is present.
Thanks!

[archmoj]

@alexhartstone I just noticed that there is a problem with the position of hover on sankey trace.
Could you please fix that?

[archmoj]

@alexhartstone Also the parcat hover position is not correct which is added to the list on the PR description.

[archmoj]

@alexcjohnson This PR is now ready for review.
FYI - @alexhartstone will address minor issues with the position of hover in parcats and sankey as well.

[archmoj]

@alexcjohnson This PR is now ready for review.
FYI - @alexhartstone will address minor issues with the position of hover in parcats and sankey as well.

Issues with parcats and sankey nodes were addressed in a2f34c9 and 9fe42b6.

So this looks ready to 💃

[archmoj]

Notable changes to mapbox as a result of this PR i.e. no longer modifying event.clientX and Y to display hover.

[alexcjohnson]

Beautiful - nice work @archmoj and @alexhartstone! Fantastic tests.

💃 pending confirmation that mapbox works right in FF looks like you've confirmed 🎉

[archmoj]

@alexhartstone please open a new issue describing why recomputing transform matrix on events is required in your particular application with a demo like this codepen.
Thank you!

[alexhartstone]

Awesome @archmoj @alexcjohnson thanks guys!

[nicolaskruchten]

Thank you so much for taking the initiative on this @alexhartstone !

[nlevari]

@alexhartstone, Thanks you so much for this fix. I spent days trying to workaround, unscaling and rescaling.
Just updated to the last version and everything works.

[alexhartstone]

@nlevari :) :) thanks for the nice comment! Much credit is due to @archmoj too for his work