fix: panning in a by CSS rotated plot doesn't work correctly

[mariobuikhuizen]

In Firefox and Safari, panning doesn't work correctly when a plot's parent is rotated by CSS.

The panning issue is caused by getScreenCTM() in https://github.com/d3/d3-selection/blob/679346930e41a4037ef72d937b425bbe4d865ab1/src/point.js#L7, which doesn't take the viewport transforms into account in Firefox (https://stackoverflow.com/questions/71368779/svg-getscreenctm-does-not-account-for-css-transforms-in-firefox) and Safari

As seen here: spacetelescope/jdaviz#1384 (comment)

To reproduce, run the following code in Firefox or Safari:

from bqplot.interacts import PanZoom
import ipywidgets as widgets
import bqplot as bq
from traitlets import link
from collections import OrderedDict
import ipyvue

import numpy as np

x_sc = bq.LinearScale()
y_sc = bq.LinearScale()

x_data = np.arange(500)
y_data = np.random.randn(3, 500)

line_chart = bq.Lines(x=x_data, y=y_data, scales= {'x': x_sc, 'y': y_sc}, 
                       display_legend=True, labels=["line 1", "line 2", "line 3"] )

ax_x = bq.Axis(scale=x_sc)
ax_y = bq.Axis(scale=y_sc, orientation='vertical', tick_format='0.2f')

fig = bq.Figure(marks=[line_chart], axes=[ax_x, ax_y])
fig.layout.width = '95%'

pz = PanZoom(scales={'x': [x_sc], 'y': [y_sc]})
pzx = PanZoom(scales={'x': [x_sc]})
pzy = PanZoom(scales={'y': [y_sc], })

zoom_interacts = widgets.ToggleButtons(
                                        options=OrderedDict([
                                            ('xy ', pz), 
                                            ('x ', pzx), 
                                            ('y ', pzy),   
                                            (' ', None)]),
                                        )

link((zoom_interacts, 'value'), (fig, 'interaction'))
ipyvue.Html(
    tag="div",
    style_= "transform: rotate(45deg)",
    children=[fig]
)

References

Code changes

This commit checks whether the browser is not Chrome and has a rotated parent, then determines the mouse position differently.

User-facing changes

Panning now also works correctly for non-Chrome browsers for plots with CSS rotated parents, with a small difference in behavior: panning stops if the mouse leaves the plot element.

[pllim]

Is the CI failure related?

[maartenbreddels]

No, I think we need to port #1550 to the 0.12.x branch first

[maartenbreddels]

@mariobuikhuizen can you rebase now that #1550 is in?

[maartenbreddels]

Ah, I can do that from the github UI :)

[maartenbreddels]

Great work mario, GPT4 and Maarten approved :)

[maartenbreddels]

meeseeksdev please backport to master

[lumberbot-app]

Owee, I'm MrMeeseeks, Look at me.

There seem to be a conflict, please backport manually. Here are approximate instructions:

1. Checkout backport branch and update it.

git checkout master
git pull

2. Cherry pick the first parent branch of the this PR on top of the older branch:

git cherry-pick -x -m1 02fdfde10ad1708959bc25fffd49260adbb662fb

3. You will likely have some merge/cherry-pick conflict here, fix them and commit:

git commit -am "Backport PR #1585: fix: panning in a by CSS rotated plot doesn't work correctly"

4. Push to a named branch:

git push YOURFORK master:auto-backport-of-pr-1585-on-master

5. Create a PR against branch master, I would have named this PR:

"Backport PR #1585 on branch master (fix: panning in a by CSS rotated plot doesn't work correctly)"

And apply the correct labels and milestones.

Congratulations — you did some good work! Hopefully your backport PR will be tested by the continuous integration and merged soon!

Remember to remove the Still Needs Manual Backport label once the PR gets merged.

If these instructions are inaccurate, feel free to suggest an improvement.