Add Auto-Connect Feature

[philippfromme]

The introduction of auto-place has made modeling (especially when modeling from scratch) a lot faster. With a single click, you can append an element without having to worry about the position of the element. With a little bit of logic, connections could be created automatically, too. When the user hovers the connect entry of the context pad, a possible connection could be previewed, which can then be created on click.

Implementation Notes

• [ ] context pad supports hover callbacks (both mouseover and mouseout)
• [ ] auto-connect feature finds suitable candidate for connecting
  • [ ] if candidate is found it is connected on click
  • [ ] if not candidate found connect tool is activated on click
• [ ] allow hooking into finding suitable candidate through event bus (e.g. prevent suggesting connection between participants)

[philippfromme]

I've created a prototype of this feature using the element detection feature. On hover, (with a slight delay) a suitable candidate is searched for in a rectangular area right of the selected element (assuming left-to-right modeling).

The closest one that can be connected is suggested out of all candidates. If a candidate is already connected to the selected element, it is not suggested. No connection is suggested if the selected element is not a gateway and already has an outgoing connection or if the candidate is not a gateway and already has an incoming connection.

If no suitable candidate is found, the rectangular area is increased.

More rules should be added to prevent suggestions like this one:

Branch: https://github.com/bpmn-io/bpmn-js/tree/auto-connect

[linux-lukas]

I think the work in this issue is very good!