Fix Workspace Flow Tab Scroll Direction

Currently, the workspace Flow tabs scroll in the "wrong" direction when using the mousewheel - one has to scroll down to get to the first Flow tab and up to get to the end of the list.

This could be something that "feels" different based on different OSes - I know for example that Macs use inverted scrolling by default.

The fix for me is to change the:

sl -= evt.originalEvent.deltaY;

line in @node-red/editor-client/src/js/ui/common/tabs.js to:

sl += evt.originalEvent.deltaY;

(Or rather the equivalent spot in red.min.js.)

Posting here first rather than just making a PR in case I missed something and there's an option floating around somewhere to change the behaviour.

Welcome to the forum @bjpw

That does seem non-intuitive to me too.

It feels so wrong the way it is now. I have a lot of flows, so I've just reverted to using the information sidebar to scroll through a vertical list to select them.

And therein lies the problem. Whichever direction it scrolls will feel 'wrong' to some users. So a PR that simply flips the direction wouldn't actually solve it properly.

I'm not sure if simple detecting Mac is sufficient to picking the right scroll direction - but could be good enough.

If someone wants to a PR an appropriate fix along these lines we'd certainly look at it.

@bjpw in addition there is a setting on the Mac that allow you to inverse the direction of the scroll.

Note that I don't know that it currently feels "right" to Mac users, so - Mac users - does it currently seem to scroll in the correct direction for you when using wheel or trackpad?

Would be good to resolve this before doing a PR.

I'm a Mac user. When I push the mouse sheel from bact to front of mouse, the flow window scrolls up, just as it does looking t a thread on this forum. To me it is like I put my finger on the screen and pushed the window up. Same effect using my iPad.

If I invert my mouse scroll direction it feels unnatural.

How about a flag in settings.js? Then people can choose for themselves. In fact, I thought there was a flag somewhere but perhaps that was just an idea?

I thought we were talking about the sideways scroll when you hover over the flow tab headers.

Correct - the horizontal scrolling of workspace Flow tabs.

That's where my head is at too. A combination of a settings.js flag and perhaps using event.webkitDirectionInvertedFromDevice (relates to "natural scroll" on OS X) if nothing set in settings.js to provide a reasonable default.

1 Like

That doesn’t do anything in safari…

What do you mean? It's primarily meant for Safari - but it has to be inside a "wheel" event.

Sorry, I needed more tabs on tm screen.

So when I push the scroll wheel to the front, the tabs scroll left to right and right to left when I pull the wheel towards my hand. It feels natural to me.

I would also like this setting. The way it currently works for me, in Vivaldi on Windows, is definitely backwards.

If I scroll in the direction that should be "down", I expect the tabs to scroll to the end. Instead they scroll to the beginning.