connect-gesture.html

[forresto]

http://forresto.github.io/prototyping/connect-gesture.html

Today I did this prototype based on a conversation with @bergie. Thinking about touchability while not having separate modes for moving and connecting. Have not implemented wires, so you'll have to imagine.

• Drag a node up/down to "unsnap" it and move it.
• Left to start an edge from an input.
• Right to start and edge from an output.

Also snapping everything to a grid too see what that's like.

Comments?

[bergie]

I'm wondering if on mouse-driven systems we should utilize hover for also triggering magnification when you're in the right or left-hand side of the node.

[forresto]

Drag and drop is a pain with mac trackpad.

Could also click to show ports, which could automatically show compatible ports, then click to connect.

[bergie]

So, instead of dragging, the interaction would be:

• Swipe right (or mouse hover) to magnify outports
• Click to select a port (or drag "out" from a particular port)
• Click on a receiving node to magnify
• Click to select port

That could work. Could use another round of prototyping. And once you've selected the starting port, you need a way to cancel that action (maybe through a menucard)

[forresto]

This could also be a good place to prototype keyboard bindings meemoo/dataflow#57 ... something that makes since to type into the awesome box also as a means of making edges.

[forresto]

http://the-grid.github.io/the-graph/the-graph-editor/ has caught up and surpassed this prototype now 😄