Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make scrollZoom speed configurable #1085

Open
rreusser opened this issue Oct 25, 2016 · 18 comments
Open

Make scrollZoom speed configurable #1085

rreusser opened this issue Oct 25, 2016 · 18 comments
Labels
feature something new P3 backlog

Comments

@rreusser
Copy link
Contributor

rreusser commented Oct 25, 2016

I find scrollZoom speed painfully slow. Making this configurable may mean propagating a scale factor to some other gl modules or something, but then again it might just be a simple scalar. Maybe scrollZoomSpeed?

(Side note: it's not clear to me why scrollZoom is camelCased and belongs to config instead of to layout.)

I don't think it's entirely straightforward to get the speed itself just right across browsers and system configs, but maybe this is something: http://stackoverflow.com/questions/5527601/normalizing-mousewheel-speed-across-browsers#answer-30134826

@rreusser rreusser added the feature something new label Oct 25, 2016
@etpinard
Copy link
Contributor

cc #2041

@mzechmeister
Copy link

Is there are progress here?
Can't see a quick way to adjust the zoom speed for the mouse wheel. It is really slow.

@mzechmeister
Copy link

As a quick hack one can adjust manually the hardcoded normalisation factor in
plotly.min.js:

var r=-e.deltaY;if(isFinite(r)||(r=e.wheelDelta/10),isFinite(r)){var n,i=Math.exp(-Math.min(Math.max(r,-20),20)/200),...

I replaced /200 by /10.

@mitja-p
Copy link

mitja-p commented Dec 11, 2019

If using in Javascript, I solved this by overtaking the wheel event (capture phase) and emitted my own event with modified deltaY. This works on cartesian plots, I did not check others.

function handler(event)
{
      if (!event.isTrusted) return;
      event.stopPropagation();
      var newEv = new WheelEvent('wheel', {
        clientX: event.clientX,
        clientY:event.clientY, 
        deltaY:event.deltaY*2,
      });
      event.target.dispatchEvent(newEv);
}

@danielfrunza
Copy link

If using in Javascript, I solved this by overtaking the wheel event (capture phase) and emitted my own event with modified deltaY. This works on cartesian plots, I did not check others.

function handler(event)
{
      if (!event.isTrusted) return;
      event.stopPropagation();
      var newEv = new WheelEvent('wheel', {
        clientX: event.clientX,
        clientY:event.clientY, 
        deltaY:event.deltaY*2,
      });
      event.target.dispatchEvent(newEv);
}

What is the element that you attached the 'handler'? I tried on 'document' and plot element and does not work....

@mitja-p
Copy link

mitja-p commented Apr 1, 2021

I attached it to plot element but on wheel event in capture mode.

@danielfrunza
Copy link

Thank you! I've missed the 'capture mode' from the initial post. Now it worked.

@caotoulei
Copy link

What's the 'capture mode' you guys talking about? Could you share the script of this part, please?

@mitja-p
Copy link

mitja-p commented Feb 21, 2022

Use the same element, Plotly.react is called on. So if you initialize plot with Plotly.react(plotEl, data, layout, options) you should do something like this:
plotEl.addEventListener('wheel', handler, true);

The last true, means capture events. For explanation on capture events, search for "event bubbling capturing"

@caotoulei
Copy link

caotoulei commented Feb 22, 2022

capture events

Thanks a lot, @mitja-p. I'm using angular-plotly.js, based on your suggestion, I did it this way, and it works now. (in case somebody using angular-plotly.js needs it in the future. )

<plotly-plot *ngIf="isPlotDataReady" [data]="graph.data" [layout]="graph.layout">
...

ngAfterViewInit() {
this.elementRef.nativeElement.addEventListener('wheel', this.handler, true);
}

public handler(event: any) {
console.log(event.deltaY);
if (!event.isTrusted) return;
event.stopPropagation();
var newEv = new WheelEvent('wheel', {
clientX: event.clientX,
clientY: event.clientY,
deltaY: event.deltaY / 20,
view: window,
bubbles: true,
cancelable: true
});

event.target.dispatchEvent(newEv);

}

@h-OUS-e
Copy link

h-OUS-e commented Mar 13, 2023

has any progress been made on this issue? I am experiencing super tiny zoom steps

@kzhang2
Copy link

kzhang2 commented Apr 26, 2023

I am also interested in this feature. It seems that the default plotly figure zoom speed in a jupyter notebook launched within vscode is very slow, so I would like to be able to make it faster.

@Thibaud-P
Copy link

Interrested too, I have been searching for a topic mentioning this and here it is

@qchenevier
Copy link

+1 zooming is so slow in a jupyter notebook in VSCode that it is not usable at all.

@cyclux
Copy link

cyclux commented Nov 11, 2023

Although we are in the JS repo here (because of top google result), also want to express my support for configurable zoom speed in plotly (python).

@RP-101
Copy link

RP-101 commented Nov 14, 2023

I am also experiencing the same slow unusable scroll speed within VSCode. Any progress exposing the zoom speed through the Python API would be amazing.

@KDeser
Copy link

KDeser commented Mar 27, 2024

Also here with the same very slow scroll speed within VS Code. The demos hosted on Plotly.com are much better.

@DavidHJong
Copy link

DavidHJong commented Jun 3, 2024

Here is another post for this issue and it contains videos to demonstrate how slow the zooming is. I don't think this issue is a feature request, but rather a bug report, because the slow zooming speed heavily interferes the proper usage of zooming. Can anyone update the tag?

@gvwilson gvwilson self-assigned this Jun 5, 2024
@gvwilson gvwilson removed their assignment Aug 2, 2024
@gvwilson gvwilson added the P3 backlog label Aug 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature something new P3 backlog
Projects
None yet
Development

No branches or pull requests