Easier touch interaction

[bergie]

Currently the dataflow UI is hard to work with on touchscreen devices even when zoomed in. We should have a smarter way of dealing with the UI when users touch it.

Initial concept:

• When user touches a node, we should watch for the direction of the move
• Moving left or right means wanting to do a connection from one of the ports
• The ports of the direction of travel should be magnified, and user could easily choose between them by moving slightly up or down (highlight the currently selected port)
• When dragging finger to another node, the ports of the receiving end should be similarly magnified and selectable
• Dragging up or down instead "detaches" the node so that it can be moved around
• Canvas panning should only happen on touches outside any node

Doing custom handling of touch interaction would eventually help in #42 as well.

[forresto]

Prototype here: http://forresto.github.io/prototyping/connect-gesture.html Discussion: https://github.com/forresto/prototyping/issues/1

[bergie]

:+1:

[bergie]

@forresto one thing to look out for is that I think there should be only one magnified port listing visible at a time per node. Or two when you're connecting (the ports list you started with, and the one you're connecting to).

[bergie]

Cut the Rope -like gesture for "cutting" a connection could be cool

[bergie]

Current thinking of pointer interactions:

Node manipulation

These gestures start from a node on the screen

• Up/down: start moving node (with snap-to-grid, and affecting other nodes based on autolayout constraints from #23)
  • On mouse devices, these require click-and-drag
• Left/right: expose in/outports
  • On mouse devices these could simply happen on hover-and-move, no clicking needed except to select. Move out of the node/ports to cancel the action (i.e. close the magnified ports list)

Graph manipulation

• Swipe across edges (starting from graph canvas, ending on graph canvas) to remove edge
• Swipe across nodes (starting from graph canvas, ending on graph canvas) to remove node

Graph panning

• Two-finger drag to pan
  • On mouse and keyboard devices, hold spacebar and move mouse, no mouse button needed
• Pinch zoom (and pan as needed), #28
  • On mouse and keyboard devices, hold ctrl and move mouse up/down, no mouse button needed

[linonetwo]

Interesting, this is why you move from this style

(https://bergie.iki.fi/blog/noflo-jekyll/)

to current flowhub's style

But most of FBP tools like https://github.com/comfyanonymous/ComfyUI is using a UI like meemoo/dataflow 's old style, including UE blurpring, what do you think? @bergie

I think this UE blueprint style allows richer widget be presented in the node, for example, and a switcher or rich text editor.