Comments (15)
we will check it!
from xyflow.
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.
from xyflow.
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 😬
from xyflow.
👀
from xyflow.
Do you guys have any leads on this? I'd be happy to help investigate the issue and try to open a PR.
from xyflow.
Hey @aleib, are you using a kind of trackpad to pinch zoom?
from xyflow.
@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?
from xyflow.
Hello,
I have exactly the same issue.
Have you identified the problem?
Thanks !
from xyflow.
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.
- Do you have Windows setups where pinch zooming leads to wheel events with
ctrl=true
? Does the React Flow Figma example work for you on that machine? (Make sure you focus the example first) - Are your users able to zoom with ctrl + scroll regardless?
- Are there any known workarounds?
from xyflow.
Sorry I took so long to reply. Here you go:
- The code sandbox example you gave me correctly identifies when I'm pinching and when I'm just scrolling up or down.
- The React Flow Figma example works but I zoom in very very slowly. I'm not sure how related that might be to the issue. On my platform, it doesn't work at all.
- My users can zoom with ctrl + scroll regardless. Most newbies don't know about that shortcut though and it's probably the most common complaint about our platform.
from xyflow.
@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)
from xyflow.
- Windows 11
- Touchpad on a brand new Lenovo Legion with the latest drivers
- I use Chrome but it doesn't work in Edge either. I tried with Firefox and everything turned out the exact same.
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.
from xyflow.
@tubarao312 We currently hit a roadblock with this issue. Any help is greatly appreciated!
from xyflow.
@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?
from xyflow.
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.
from xyflow.
Related Issues (20)
- SvelteFlow on:selectionchange doesn't get called HOT 3
- RollupError: 'const' declarations must be initialized HOT 3
- Rotatable parent node HOT 5
- Resizing rotated node HOT 2
- Adding multiple Buttons in on the node and Multiple trees in same react flow canvas
- SvelteFlow `on:nodedrag`, `on:nodedragstart`, and `on:nodedragstop` not emitted when multiple nodes selected HOT 3
- [Svelte Flow] connectingto doesn't behave the same as connecting used to HOT 4
- Excalidraw's canvas not usable with ReactFlow component HOT 1
- Check if we can use static width/height for the computed values as well HOT 1
- Multi Select functionality using shift key not working properly
- Adjust graph edges and nodes by changing one node height or width dynamically HOT 4
- React Flow v12: Cancel Connection does not work anymore HOT 1
- Update all example apps to v12
- Intersection helpers: used pass node values HOT 2
- `React.forwardRef` type definition is broken in `@xyflow/react: 12.0.0-next.11` HOT 2
- Reactflow holding Shift key acts werid and doesn't get released when we open context menu(browser's) HOT 2
- Support JSON Canvas HOT 1
- [Svelte Flow] contenteditable span/div are not editable HOT 2
- Node height dynamic HOT 2
- Unexpected connection behaviour when using a updateNodeInternals HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from xyflow.