search

xyflow / xyflow

React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.
https://xyflow.com
MIT License
22.07k stars 1.46k forks source link

Zoom on pinch not working on Windows #3759

Closed aleib closed 1 month ago

aleib commented 5 months ago

Describe the Bug

Zoom on pinch does not appear to work when using Windows and panOnScroll is set to true.

Can be demonstrated in the Reactflow Figma-like example on the doc site.

This works on Mac.

Your Example Website or App

https://codesandbox.io/p/sandbox/thirsty-darkness-qdwrp6

Steps to Reproduce the Bug or Issue

  1. Use a Windows machine (or Browserstack, or Parallels, etc), I tested on Windows 11
  2. Load any browser (I tried Chrome & Edge)
  3. Go to the Reactflow Figma-like example: https://reactflow.dev/learn/concepts/the-viewport#figma-like-viewport-controls
  4. Try pinch to zoom

Expected behavior

Expected: Viewport zooms in and out Reality: Viewport scrolls

Screenshots or Videos

No response

Platform

Additional context

We've had multiple support requests for this on our product, and it appears to be the case for all Windows users.

Setting zoomOnPinch={true} does nothing (as it is already the default).

moklick commented 5 months ago

Hey @aleib, are you using a kind of trackpad to pinch zoom?

aleib commented 5 months ago

Hey @aleib, are you using a kind of trackpad to pinch zoom?

Hey @moklick, I'm using the built in macbook touchpad to pinch zoom (and simulating the issue in Windows through Browserstack & Parallels).

The users that reported the issue are using Windows 11 laptops and their built in touchpads as far as I know.

tubarao312 commented 5 months ago

@moklick @aleib Wanted to add that TypeForm's implementation of Figma-like controls with the zoom on pinch does work even on Windows! However. I can confirm that neither my app nor the example in the documentation works. Any idea what it could be?

rsdouglas commented 5 months ago

Just checking in on this. We're getting a lot of bug reports from users and it's making our product pretty tough to use on Windows 😬

moklick commented 5 months ago

we will check it!

tpihen commented 4 months ago

Hello, I have exactly the same issue. Have you identified the problem?

Thanks !

rsdouglas commented 4 months ago

👀

peterkogo commented 4 months ago

We did some extensive investigation into this issue.

On macOS pinch zooming on a trackpad generates wheel events with ctrlKey=true. Looking at ctrlKey is the only way to distinguish between normal scrolling and pinch zooming. As a side note, this is not an officially agreed upon standard and was a way for Apple to make pinch zooming work on the web.

On Windows however, both actions emit wheel events and we can't find a way to differentiate them. To add to the confusion, on certain setups (Windows Desktop PC + pinch zooming on Wacom tablet) a wheel event is emitted with ctrlKey set to true. We can assume that certain trackpad drivers (just guessing here) generate macOS like wheel events for pinch zooming.

@tubarao312 I was able to reproduce the same faulty behaviour on Typeform, with the 'pinch to zoom in and out' setting. Zooming also leads to erratic panning there. Maybe you have a setup where the wheel events are correctly dispatched?

You can check the wheel event with this codesandbox.

If anyone has some information regarding this issue, your help is greatly appreciated.

tubarao312 commented 4 months ago

@peterkogo

Sorry I took so long to reply. Here you go:

peterkogo commented 4 months ago

@tubarao312 What Windows version do you use (10, 11) and what kind of input device & browser are you using? (Maybe the laptop make & model might also be an indicator, just poking around in the dark here)

tubarao312 commented 4 months ago

Also I realized in my last comment I said the Figma zoom on pinch example worked. My bad, I used the wrong example, it actually doesn't zoom in it all with pinch.

tubarao312 commented 3 months ago

Do you guys have any leads on this? I'd be happy to help investigate the issue and try to open a PR.

peterkogo commented 3 months ago

@tubarao312 We currently hit a roadblock with this issue. Any help is greatly appreciated!

tubarao312 commented 3 months ago

@tubarao312 We currently hit a roadblock with this issue. Any help is greatly appreciated!

Do you know anything other than what you posted in the thread?

peterkogo commented 3 months ago

No this is pretty much it. If it runs on one device, it does not mean it runs on another. I found that it never works on macOS through Browserstack (Windows) for me.

moklick commented 2 months ago

I checked this issue again with Windows 11 (via Paralles Desktop on a Macbook). The figma example should pinch but it pans. So it's definitely still an issue.

In our zoom pane we have an isMacOs and event.ctrlKey check that handles pinch zoom if true. When I remove the isMacOs condition, it works with my Windows setup, but I am not sure if this is the case because I am using it with a Macbook touchpad 🤔 However it would be awesome if anyone (@tubarao312 maybe :)) with a real windows machine could check if this works. For this you need to pull the v11 branch and then remove the isMacOs check here: https://github.com/xyflow/xyflow/blob/v11/packages/core/src/container/ZoomPane/index.tsx#L134

Could anyone double check?

moklick commented 1 month ago

We finally got a windows machine 🙌 This is fixed in 11.11.3 and 12.0.0-next.17.