Stunner - Users don't understand how to create lines between nodes

While running the case management workshop, users are unable to create lines between the nodes on the process diagram. The problem is two fold. First, some users are unable to even locate the arrow (hover action on the selected node). Second, when the arrow was found, users nearly universally attempt to drag the arrow from node to node. This does not work. The single click to attach to the next node is not intuitive.

Acceptance Criteria

• Event Handlers: support for both click and drag behaviours for all toolbox icons, so new elements can be added from the toolbox (quick) menu as:
  • Click on arrow:
    • Click on arrow icon.
    • Move mouse around. The arrow line would track with the drag.
    • Click on a target node on the canvas to connect the arrow.
  • Click:
    • Click on some icon except arrow.
    • An appropriate node (to this icon) is created in available space on the canvas on the right side of the node.

• • Drag with arrow:
    • The user clicks on arrow icon and does not release the mouse click.
    • While moving/dragging with mouse, the arrow line would track with the drag.
    • Point with mouse to a target node on the canvas and release mouse button to connect the arrow.
  • Drag:
    • The user clicks on some icon except arrow and does not release the mouse click.
    • While moving/dragging with mouse, the arrow line as well as a new node would track with the drag.
    • Point to empty space on the canvas and release mouse button to create the node.
• UX for icons: change opacity and styles as the mock (https://marvelapp.com/45f6cfg) describes