Double click doesn't work on touchscreen && general touchscreen optimization

Crosspost of https://github.com/n8n-io/n8n/issues/277

The UI is not optimized for touchscreen usage but somewhat usable, however, double click/tap doesn’t work at all, it’s impossible to open a node settings dialog for quick edit on the go (e.g., via phone).

Steps to reproduce the behavior:

  1. Go to any workflow
  2. Zoom out with the magnifier +/- buttons until you see the nodes
  3. Pinch zoom in to a node to be able to tap on it
  4. One tap works (sometimes, depends on tap position on the node), the grey buttons appear around the node, but double tap is not recognized at all. Impossible to edit the node.

The expected behavior is that you can open the node settings dialog with double tap or please provide a settings button (e.g., grey cog icon).

Additional context:

  • It would be great to have better overall support for touch devices, this is a fun project to play with any time you have a bit of time to spend.
  • It’s also impossible to connect two nodes on a touchscreen, but editing is more important for quick settings adjustments if we need to prioritize.

If there would be a cog icon to access the edit node popup, it would provide the most basic fix for the core issue:

Very interesting. As they do only get displayed on hover I would not have expected that they would be accessible. Good to know. I will have a look.

They get displayed on a single tap most of the time if you tap over the icon. Maybe this is why double tap is not recognized, these might count towards to two single taps, not one double. However, an edit icon would solve the accessibility here.

I also experimented with FF besides Chrome, and connecting nodes works in FF and also moving nodes around (both don’t work in Chrome). However, double tap/click is also broken under FF. If this gets solved somehow, FF clearly wins for modifying workflows on the go.

Thanks a lot! That is very helpful to know! Will check it out.

FYI, Node-RED offers a popup menu on long tap (tap and hold) on any node:

1 Like

Ok, did just commit a basic fix like proposed. It should now display additionally a “cog” icon on the node after node-touch via which the node-settings can be opened. Will update here once it got released which will happen with the next version.

Thank you for this one, too!

1 Like

New version with the change just got released with [email protected]

I can confirm the new icon is there, but sadly, it’s not tappable. Could you please move it to the top right corner? It seems only the upper half of the node responds to tap events, above the node icon. Here is it on screen record in Firefox: https://gofile.io/?c=1KJOoM

hm, very strange. I will have another look before I release the next version.

Did make the change and will release it with the next version. Will update here once it is done.

1 Like

Got released with [email protected]

Thank you, it works fine now, the node settings are finally accessible on mobile! :tada:

Ah that is very great to hear!

Can anyone explain me how can I see node setting menu on touch screen?
I confirm that after upgrade I can drag node as a charm but below options is unknown for me:

  • How can I pan workflow screen in touch screens?
  • How can I see node settings on touch screens?

In my case:
I use Google chrome on Android 9

Best regards;

It’s a bit hacky, but:

  • open a workflow
  • zoom out wit the (-) button to see all the nodes
  • pinch zoom in to the nodes via touchscreen
  • tap the node above its icon
  • the new cog icon appears, tap it
  • pinch zoom out to edit the settings popup
2 Likes

Thank you my friend (@githubber) for sharing your trick.
Your trick works so random for me unfortunately.

For example:
-When I zoom on some node and then tab a node top of it’s icon, some of them have not any reaction.

My main problem is after I see setting menu when I tab on setting icon (thanks to dear @jan) I can’t see any reaction unfortunately.
Or on very less time (that I don’t know why and I can’t get it’s reason) I see node setting.

Have anyone so more stable way to see setting popup menu of one node?

Working on touch screens is very useful for me because I spend many times in metro.

Best regards;