Skip to content

Link Customization

Common Canvas provides a number of ways the links can be displayed. Links can be customized by the application in the following ways:

  • Setting the link fields in the canvas configuration.
  • Customizing comment appearance with CSS (see below).

The two major config fields to customize link display are:

  • enableLinkType that can be set to “Curve”, “Elbow”, “Parallax” or “Straight”
  • enableLinkMethod that can be set to “Ports” or “Freeform”.

When enableLinkMethod is set to “Ports”, the positions of ports on nodes affect the direction that links are drawn to/fom the ports. See this overriding port positions section in the node customization page for more details.

Customizing comment appearance with CSS

Links are drawn on the canvas using SVG elements in the DOM. Each link has a top level group <g> element and inside it some SVG paths. The first displayed path is the selection area. This is invisible but provides a selection/hover area for mouse interactions on the link. The second is a path to represent the link itself which is drawn over the top of the selection area path:

The DOM elements that make up a link can be customized using CSS styles. This is done by either overriding the common-canvas CSS directly or, if customization is needed on a link-by-link basis, by assigning a class name to the group <g> element that is the container for all the link elements. The class can be applied to the group object in a number of different ways:

  1. By specifying it in the app_data.ui_data.class_name field of the link in the pipeline flow document that is provided to Common Canvas using CanvasController.setPipelineFlow(pFlow)
  2. By specifying it using the following API methods:
    • CanvasController.setLinkProperties(linkId, properties, pipelineId)
    • CanvasController.setLinksClassName(linkIds, newClassName, pipelineId)

You can see the svg-canvas-d3.scss file for full details about what elements in the comment can be styled but here are a list of some basic parts of the comment:

Classes

Purpose DOM tag Classes Notes
Group g d3-link-group Classes specified for the link in the class_name field of the link object will be added here.
⮕ Selection area path d3-link-selection-area
⮕ Link line path d3-link-line
⮕ Arrow head path d3-link-line-arrow-head Only when enableLinkType is set to “Straight”
⮕ Decorations g d3-link-decorations-group Will contain decoration elements, for example, image, path etc

Note: The main link group will also have one of these classes: d3-node-link (for data links), d3-object-link (for association links) or d3-comment-link (for comment links).

Note: You can use the enableParentClass canvas config field to make you CSS rulesets specific so your styles are picked up in preference to the common-canvas default styles.

If a data link is retrieved from the canvas controller API it will have the following important fields:

  • id - the unique identifier for the link.
  • type - set to “nodeLink”.
  • srcNodeId - the ID of the node the link is connected from.
  • srcNodePortId - the ID of the output port on the source node the link is connected from. Note: If this is undefined it indicates the node is connected to the first output port of the source node.
  • trgNodeId - the ID of the node the link is connected to.
  • trgNodePortId - the ID of the input port on the target node the link is connected to. Note: If this is undefined it indicates the node is connected to the first input port of the target node.
  • decorations - an array of decorations specified for the link.
  • app_data - any application specific data that was previously specified for the link in the pipeline flow or through the canvas controller API.

Note: Typically data links must be drawn between nodes however, if the config field enableLinkSelectionType is set to Detachable, the links are allowed to be drawn to and/or from arbitrary points on the canvas. If a link is drawn either semi-detached (from one node) or fully-detached (from both nodes) the following fields will be in the link object:

  • srcPos - this is an object with two fields x_pos and y_pos. These provide the coordinates of the point on the canvas that the link is drawn from. If this exist then srcNodeId and srnNodePortId are not specified in the link object.
  • trgPos - this is an object with two fields x_pos and y_pos. These provide the coordinates of the point on the canvas that the link is drawn to. If this exist then srcNodeId and srnNodePortId are not specified in the link object.

(Note : internally, association links do have a srcNodeId and trgNodeId but that is just to keep the field names consistent with the data links.) Association links do not reference ports.

If an association link is retrieved from the canvas controller API it will have the following important fields:

  • id - the unique identifier for the link.
  • type - set to “associationLink”.
  • srcNodeId - the ID of one of the nodes in the association.
  • trgNodeId - the ID of the other node in the association.
  • decorations - an array of decorations specified for the link.
  • app_data - any application specific data that was previously specified for the link in the pipeline flow or through the canvas controller API.

If a comment link is retrieved from the canvas controller API it will have the following important fields:

  • id - the unique identifier for the link
  • type - set to “commentLink”
  • srcNodeId - the ID of comment.
  • trgNodeId - the ID of the node the comment is connected to.
  • app_data - any application specific data that was previously specified for the link in the pipeline flow or through the canvas controller API.