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

zoomWithWheel does not account for the delta value #586

Open
Foshkey opened this issue Oct 22, 2021 · 2 comments
Open

zoomWithWheel does not account for the delta value #586

Foshkey opened this issue Oct 22, 2021 · 2 comments

Comments

@Foshkey
Copy link

Foshkey commented Oct 22, 2021

Describe the bug

First of all, great library.

One slight issue with zoomWithWheel is this line:

    const wheel = delta < 0 ? 1 : -1

While we were implementing this library, I (using windows) got into a bit of a disagreement with our designer (using a mac) about the zoom speed. He was saying it was way too fast, while I was saying it felt just right.

That's when I discovered polling rates and what exactly deltaY means. In short: mac trackpads have a much higher polling rate, and therefore a lower delta value, and vice versa for my mouse wheel. If you want a consistent experience with zoomWithWheel, I advise taking the delta into consideration, as different mice/trackpads will have different polling rates and delta values.

We ended up doing the calculation ourselves, but if you're curious what the code is:

    const delta =
      event.deltaY === 0 && event.deltaX ? event.deltaX : event.deltaY;
    const scale = panzoom.getScale();
    const toScale = scale * Math.exp((delta * step * -1) / 300);
    const result = panzoom.zoom(toScale);

This resulted in a consistent experience and the designer and myself both agree that the zooming now feels right.

Your environment

  • Version of panzoom
    • 4.4.2
  • Browser and browser version
    • Edge Version 94.0.992.50 (Official build) (64-bit)
@timmywil
Copy link
Owner

Thanks for the suggestion! I'll look into this. Getting zoom rate right across all browsers/devices has constantly been in flux.

@jtran
Copy link

jtran commented Jan 14, 2022

The above calculation worked well for me on a Mac with a trackpad.

Correct me if I'm wrong, but shouldn't you gate the above suggested calculation behind a check that event.deltaMode is 0? Presumably, the existence of event.deltaMode means that not all devices have a real pixel delta where such a calculation makes sense. For other values of deltaMode, maybe the current implementation with a step makes more sense.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants