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

[eensander]

Is there an existing issue for this?

• I have searched the existing issues and this is a new bug.

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]

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]

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]

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

[eensander]

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.

[LincZero]

Why do we need middle drag

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.

Me too.

Another advantage of using the middle pan button is that you can still drag and drop the canvas while your mouse is over the node. This will be distinguished from the behavior of right-clicking and dragging the node.

Try middle key drag 1

• :pan-on-drag=[0, 2] will disable the middle drag function, which is not what I want.
• prevent-scrolling not effective.

Try middle key drag 2

At first, I tried to listen for middle click events. Want to block the default behavior if listening to the middle key click.
But I found, click in the canvas, I can't pass document. The addEventListener (mousedown listening to.

Try middle key drag 3

And then I came up with a solution. Just remove the outer scroll bar:

function fn_switchAllowScroll() {
  if (isAllowScroll.value) {
    isAllowScroll.value = false
    document.body.style.overflow = 'hidden';
    (document.querySelector('.markdown-source-view .cm-scroller') as HTMLElement).style.overflow = 'hidden'
  } else {
    isAllowScroll.value = true
    document.body.style.overflow = '';
    (document.querySelector('.markdown-source-view .cm-scroller') as HTMLElement).style.overflow = ''
  }
}

You can manually Lock the drag and drop behavior of the external view (like some operation permissions of the Lock canvas).
It works well !

Try middle key drag 4

Next, I want to improve the process. It is also possible to automatically call the switchAllowScroll function by focusing.

The idea is to listen for click events, click the canvas area to know that the focus is in the canvas, and vice versa.

Then I had a problem with "Try2" : I couldn't listen when I clicked on the canvas ……

---

I'm only one step away from success... Cloud you give me some advice to help me please.

Am I on the right track ?

[LincZero]

Sidebar:
I found that middle key events in the iframe are also not detected by external document listeners, and that dragging and dropping in the middle of the iframe only affects the scroll bar of the iframe (whether the iframe content has a scroll bar or not), and absolutely not the outside.

This is a point of reference, but I don't want to layer an iframe on top of my canvas