Skip to content

Links

Introduction

Common Canvas will display one link line on the canvas for each link defined in the pipeline flow. There are three categories of links supported by Common Canvas:

  • Data links - a directional link between the ports on two nodes
  • Association links - a relationsjip link between two nodes with no implied direction
  • Comment links - a link from a comment to a node

The appearance and behavior of links can be customized by:

Data links are designed to model a flow from a source node to a target node. Data links are specified in the pipeline flow to connect a port on the source node to a port on the target node. Data links are typically displayed with an arrow head to display the flow along the link from source to target.

There are 4 types of data link:

  • Curve
  • Elbow
  • Parallax
  • Straight

These can be changed by specifying the enableLinkType configuration field.

Also, data links can be drawn either:

  • between ports on the source and target nodes or
  • “freeform” which means the link is drawn from and to the source node ignoring port positions. Typically with “freeform” links the application customizes the canvas to NOT display ports.

This choice can be changed by specifying the enableLinkMethod configuration field.

This table shows the different combinations:

Type Ports Freeform
Curve
Elbow
Parallax
Straight

The enableLinkMethod config field can be set to “Freeform”. With this option, links are drawn directly between nodes without any reference to ports.

Here is an example of a “Freeform” link with a “Straight link type:

The “Freeform” display is useful for flows where no particular direction of the flow needs to be enforced and also where the flow has nodes with multiple ports but the ports do not need to be shown in any particular order or context.

When more than one link enters or exits into/from one side of the node the freeform links will be drawn to maintain some reasonable separation like this:

When enableLinkMethod is set to “Ports”, Common Canvas draws the links to maintain the flow from output ports to input ports regardless of where the nodes are positioned relative to one another.

Here is an example of the “Ports” links method with a “Curve” link type:

Links between ports can be useful if the application wants to allow the user to create loops in the flow, like this:

Applications can configure Common Canvas to position ports by default in one of four different orientations:

  • For “LeftRight” output ports will be on the right of the node and input ports will be on the left of the node
  • For “RightLeft” output ports will be on the left of the node and input ports will be on the right of the node
  • For “TopBottom” output ports will be on the bottom of the node and input ports will be on the top of the node
  • For “BottomTop” output ports will be on the top of the node and input ports will be on the bottom of the node

The application can further customize the position of the ports on the node if desired.

The position of the ports will affect the way links are drawn from/to the port.

This can result in this kind of display where links draw into/out of ports in multiple different directions:

If the enableSelfRefLinks canvas config field is set to true, the user can create links that loop back to the node they originated from. These are created by the user dragging from the output port on the node and dropping the new link onto a input port, or the body, of the same node.

Here’s an example of a self-referencing link using a “Freeform” link method with an “Elbow” link type.

Self-referencing links behave the same as other links and can be displayed in the same combinations of link types (Curve, Elbow, Parallax and Straight) and link methods (Freeform or Ports) as other links.

Note: Typically data links must be drawn between nodes however, if the config field enableLinkSelection is set to Detachable, the links are allowed to be drawn to and/or from arbitrary points on the canvas.

With this option, the start and end of existing links can be dragged away from the nodes they are connected to and dropped onto an arbitrary point on the canvas to create a ‘detached’ link. Additionally, the end of any detached link that originates from, or points to, a point on the canvas can be dragged to a node to form a connection. Also, nodes can be dragged to the available ends of those ‘detached’ links to form a connection.

Association links are designed to capture a relationship between two nodes where there is no implied direction. By default these are displayed as a single straight link line in a dashed style. There are no arrow heads by default for that type of link.

Comment links connect a comment to one or more nodes. They can be created by the user by: (a) pulling out the small handle/circle that appears below a comment and dropping it on a node. (2) by selecting nodes before the comment is selected and then creating the comment. This will automatically create a comment link from the selected nodes to the newly created comment.