search

plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
16.85k stars 1.85k forks source link

pan with mouse wheel pressed + box zoom on left button #4004

Open mzechmeister opened 5 years ago

mzechmeister commented 5 years ago

I would like to have:

Currently, all three together do not work simultaneously. One needs to toggle the zoom/pan button, which is cumbersome. So, how can I get this behaviour?

mzechmeister commented 5 years ago

A quick hack in plotly.min.js is to force to pan mode on middle button (e.buttons==4). Modify

:o="pan"),St.minDrag="lasso"

to

:o="pan"),4==e.buttons && (o="pan"),St.minDrag="lasso"

If zooming is active, the left button has naturally box zoom.

Yet, one short coming is, that the mouse pointer does not change to the pan look.

mzechmeister commented 5 years ago

From the code I also noted that the shift key toggles temporary between pan/zoom. This is currently a built-in way to toggle the behaviour with a keypress (instead of going to the modebar buttons). But it does not work with ctrl, as requested here or implied by the code with e.ctrlKey checks.

Nic30 commented 2 years ago

@mzechmeister did you manage to get pan using middle button working? Shift works (cursor has wrong icon however) but the middle button is more convenient.

mzechmeister commented 2 years ago

@mzechmeister did you manage to get pan using middle button working? Shift works (cursor has wrong icon however) but the middle button is more convenient.

Yes, I have got it running. See here for a demo.

The code line with critical hack is here: https://github.com/mzechmeister/csvplotter/blob/88c60c1aaf386dc5b86be09d147eebff4e2c2a7b/zoom_pan.js#L155