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:getLink
: gets the modified link. This method automatically finds the correct link, even after replacements by undo actions.- setUndoUserFunction: sets the user undo function.
- getUndoUserFunction: gets the user undo function.
- setRedoUserFunction: sets the user redo function.
- getRedoUserFunction: gets the user redo function.
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.