search

bcakmakoglu / vue-flow

A highly customizable Flowchart component for Vue 3. Features seamless zoom & pan 🔎, additional components like a Minimap 🗺 and utilities to interact with state and graph.
https://vueflow.dev/
MIT License
3.74k stars 242 forks source link

🐛 [BUG]: scroll wheel not hidden when dragging with middle mouse button #1557

Closed eensander closed 1 month ago

eensander commented 1 month ago

Is there an existing issue for this?

Current Behavior

When browsing through the demos on vue-flow's website, I noticed that, when dragging with the middle-mouse button, the scrolling-cursor still apeared in my browser, and continued it's default behavior of scrolling when enough space was available. Unfortunately, my screenshot tool does not include the cursor in screenshots, so posting one would be trivial.

Expected Behavior

I expect that when I am using the middle mouse button for navigating in the canvas, the cursor gets hidden and the scrolling behavior stops. Similar to other diagramming or node-composition tools on the internet like diagrams-js and diagrams.net

Steps To Reproduce

  1. Go to any demo,
  2. Press down the middle mouse button on the canvas
  3. Start dragging

Relevant log output

No response

Anything else?

Tested on Firefox 128.0 (64bit)

bcakmakoglu commented 1 month ago

Not a bug since you can configure which mouse buttons trigger panning on drag with :pan-on-drag=[0, 2] (or whatever mouse button you want to allow).

eensander commented 1 month ago

Thanks for your quick reply!

If I understand correctly, that means I can disable the middle mouse button to trigger the panning, or specify other mouse button(s) for this effect.

My personal preference would be to use (atleast) the middle mouse button for panning since I am used to from other applications I use daily (diagrams.net, figma.com). Although these tools usually have a different action associated with the left-mouse button, usually the middle one is used for panning.

Since it is configurable, I think that when one configures the middle mouse button for panning, the expected behavior should be prevent the browsers scrolling effect.

If implementing this in the core is not an option, could you tell me if it is possible to intercept the event and perform a preventDefault() from this side?

Look forward to hearing from you.

bcakmakoglu commented 1 month ago

Browser scrolling is already disabled by default, there is a prop called prevent-scrolling (default value is true)

eensander commented 1 month ago

Ah. Although I didn't know, this setting seemed to have no effect on my issue. Though, I just noticed (and should've tested earlier) that the issue is only occuring in Firefox for me; Chrome seems to work fine. Interestingly, setting prevent-scrolling to false doesn't cause the problem to occur in Chrome as well.