More intuitive connection mode

[nick87720z]

Current way, starting connection with right click and ending with double click, is far from intuitive.
For comparison:

• draw.io simply places everything (nodes, connections) isolated, allowing to manually connect it, what is enough intuitive despite more cubersome.
• Dotedit does connection through dialog, which is also cumbersom but hard to misunderstand.

What I could propose for this, with minimum workflow breakage, connection could be done by simple drag with same button as for node selection. Of course, if drag start events may be handled independently of simple clicks, as in some gui toolkits I know (not for web though). In this way simple click would still select objects.

Or second, seemingly easier for implementation - toolbutton, starting connection for selected object, to be ended with same default click (not double).

Btw, even before all this - having ending button with single click of starting button would be great step forward in UX.

[magjac]

Thanks for the suggestions. I'm not totally happy with this part of the U/I myself, but it's not so easy to support all the interactions with the graph that you want to have an intuitive way. That said, I'll consider your proposals in a future major release.

Supporting drawing edges only by dragging is however not an option, since you must be able to pan and zoom in large graphs while trying to find the head node to attach the edge to after having attached the edge to the tail node.

[ferdnyc]

Current way, starting connection with right click and ending with double click, is far from intuitive.

Agreed, the double-click being especially obtuse. (WHY??) But the right-click is pretty bad too. Plus, the weird-bound right-click interaction makes it impossible to have a context menu for existing nodes and edges, which would be the obvious way to implement modifiability.

What I could propose for this, with minimum workflow breakage, connection could be done by simple drag with same button as for node selection.

Ugh. Dragging is the devil, so I'm not very into this, personally. Edge-drawing should be possible without having to hold down a mouse button.

you must be able to pan and zoom in large graphs while trying to find the head node to attach the edge to after having attached the edge to the tail node.

...Though, that's not particularly the reason why dragging is the devil.

My suggestion for that would be, add automatic panning at the edges of the graph while dragging — or just while in edge-creation mode in general. If you've started an edge, and you move the mouse to the left border of the graph, the canvas begins panning left in reasonable steps. (Say 15-25% of the total area per jump, maybe.) And so on for the other four directions.

Coupled with mouse-wheel scrolling (which can be supported even during a drag), that gets you the ability to navigate the canvas even while actively dragging, and it's a very familiar interaction model.

Modeless == function-overload

As far as the mouse interactions in general go, IMHO they suffer from the interface being completely modeless, and attempting to make all actions available at all times through complicated and unintuitive combinations of mouse clicks/gestures.

I think it would be far simpler, more discoverable, and more intuitive to provide a more typical mode-selection system, with a toolbar for switching between a few basic tool modes that govern how left-click interactions are interpreted. The selectable modes could be:

1. Selection/Manipulation — Left-clicking an existing node selects it, box-drawing selects all nodes inside the area, Shift- and Ctrl-clicks provide typical selection-editing functions. Dragging a node or a selected group could allow repositioning, dragging corners of nodes or selections could permit resizing.
2. Node Creation — Each left-click inserts a new node based on the shape selected in the Insert panel. Bonus points if the mouse pointer gains an attached ghost outline of that node shape, while in this mode. Activating this mode could auto-open the Insert panel, as well.
3. Edge Drawing — Each left-click starts an edge at the clicked existing node. A second left-click completes the edge. Dragging from the first node to the second does the same, but isn't required. Some possible enhanced interactions:
   • Shift-click the second node to simultaneously terminate the current edge there, and start a new one from there. (For chaining up a series of edge-connected nodes.)
   • Complete an in-progress edge by box-selecting a group of nodes, to create a cluster of those nodes as the edge terminus.

There might be additional advanced-user features that combine modes. Perhaps, when in Node Creation mode, using Shift-clicks could create a series of new nodes connected by edges, the same way Shift-click in Edge Drawing mode does for existing nodes. (In other words...):

1. Activate Node Creation mode in the toolbar
2. Shift-click on the canvas to drop node A, and start drawing an edge from there
3. move the mouse to another location
4. Shift-click to drop node B, terminate the edge A -> B, and start a new edge from B
5. move the mouse again
6. left-click (unshifted) to drop node C, terminate edge B -> C, and complete the sequence. (If the user Shift-clicks before realizing they're done, Esc should abort the in-progress edge creation just like it does in the current interface.)

Those are just some examples of how more-discoverable, more-familiar types of interactions could be bound to just the left mouse button, a mode-selection toolbar, and possibly some keyboard modifiers. Without having to rely on awkward bindings of middle-, right-, or double-clicks to perform those same actions.

Regardless which mode is selected, middle-mouse drag would always be available for panning, the mouse wheel would always be available for zooming, and the right button would always be available for context menu operations (should any be added).

[magjac]

Thanks for the detailed feedback and suggestions.

Agreed, the double-click being especially obtuse. (WHY??)

If I remember correctly I did it like this instead of single-click because single-click was triggered when panning and it was important to be able to pan and zoom even during edge drawing.

Ugh. Dragging is the devil, so I'm not very into this, personally. Edge-drawing should be possible without having to hold down a mouse button.

I definitively agree. It was a very a deliberate choice to not implement that back in the day.

That said, when I created the editor, I for some reason didn't think of having different modes and it's something I've been thinking of changing since then. Hopefully I can find time to do something about this in the not too distant future. I will certainly take your suggestions into consideration when if I do, so big thanks again for the detailing them.