[SvelteFlow] panOnScroll shift+scroll horizontal does not work after clicking canvas

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.06k stars 1.46k forks source link

[SvelteFlow] panOnScroll shift+scroll horizontal does not work after clicking canvas #4282

Open Everduin94 opened 1 month ago

Everduin94 commented 1 month ago

Describe the Bug

Horizontal scroll via the mouse wheel when panOnScroll=true is broken in svelte flow after focusing / clicking the canvas

Your Example Website or App

Reproduction: https://stackblitz.com/edit/hhoaya?file=src%2Fexample%2FApp.svelte

Steps to Reproduce the Bug or Issue

Steps to reproduce:

Hover your mouse over the canvas. Hold shift, scroll. The canvas will scroll horizontal. Works as expected
Click the canvas. Hold shift, scroll. The canvas will not scroll horizontal.
Click outside the canvas. Hold shift, scroll. The canvas will scroll horizontal again.

Expected behavior

It should always scroll horizontally when holding shift and scrolling 😅

Screenshots or Videos

No response

Platform

OS: MacOS
Browser: Chome
Version: "@xyflow/svelte": "0.1.3"

Additional context

No response

peterkogo commented 3 weeks ago

Holding shift activates the selection box, but weird that it stops panning by scrolling. Definitely a bug, thanks!

Everduin94 commented 3 weeks ago

@peterkogo - Just to clarify. Doesn't shift+mouse-down+drag activate the selection box?

If shift+scroll is not meant for scrolling horizontally (like in figma, obsidian, excalidraw, native overflow-x) what is the key-bind for scrolling horizontally 😅? panOnScrollMode references moving both directions / horizontally. Is this only possible on a trackpad and not with a mouse scroll wheel?

peterkogo commented 3 weeks ago

Sorry, haven't used a mouse without a horizontal scroll wheel in a while. Totally forgot that shift+scroll is horizontal scrolling... Now I understand the problem. I guess we are doing preventDefault when pressing down the shift button for drawing selectionBox. If you set selectionKey to something other than "Shift" it works.

Everduin94 commented 3 weeks ago

haven't used a mouse without a horizontal scroll wheel in a while

I read this and thought "Wow, I didn't even know that existed". So I googled mouse with horizontal scroll wheel, only to find my exact mouse was the first mouse that popped up. I never realize that thingy on the side was a horizontal scroll 🤣.

Thanks for the selectionKey workaround! I'll give that a shot!