Creating links

The ConnectionAdorner class allows you to create new links in the Diagram. Before a link is created, a function is called in the Diagram to verify if the action is allowed. This function can be bound to the DiagramEditor through the allowCreateLinkFunction markup, that has the following format:
allowCreateLinkFunction: function(DiagramEditor, startNode, endNode)
When a new link is created, a function is called to enable the modification of the new link:
onLinkUpdated: function (diagram, link, isNew, undoAction)
where:
  • diagram is the current diagram.
  • link is the created link.
  • isNew is a boolean that indicates if the link is new (true for a newly created link).
  • undoAction is the ConnectAction created for this update. You can set customized actions for undo and redo, and add any other data necessary for this action.

The ConnectAction class

The ConnectAction class allows you to undo and redo the connection action. You can customize this action by adding user functions that are typically called from the onLinkUpdated function. It contains the following methods:

Using the connection handle

The connection handle is represented by a triangle placed on each side of the bounding box of the element. Like the resize handles, these handles are highlighted when the cursor hovers over them, indicating that an action can be performed. When you click the handle, a link is created between the selected handle (creating a BasicPort at the specified position) and the mouse cursor. The new link is created when you drag the held end point to a port in another node or subgraph.
The destination ports are displayed in the entities when you hover over them. The destination ports look exactly like the ports of origin. If a drop action is performed over one of the ports, a BasicPort is created on the side of the element, and the link end is attached to it. If no connection target handle is specified, and the mouse button is released directly over the target component, an AutomaticPort is created.
While pressing the Ctrl key, you can create an AutomaticPort at the origin of the link, in which case the link can originate at any port.
Note
  • While dragging the connection handle, the function allowCreateLink is evaluated at every mouse over event and the mouse cursor changes to show whether the connection action is allowed in that place.
  • After the link is created, the start and end elements are evaluated, and the link is reassigned to the first level common parent. For example, if both elements belong to the same subgraph, the link parent is the same subgraph too.