Skip to main contentElyra

Customizing node layout

Node layout properties define how all the elements of a node are displayed such as: the position and size of the main image; the position of the main label; even the shape of the node itself!

Properties override

You can change just about anything to do with the way the nodes appear in your canvas. So you can get a very different looking canvas to suit your needs.

Default properties from Common canvas

There are two possible sets of node layout properties provided by common-canvas. The set of properties that are used by common-canvas are controlled by the enableNodeFormatType configuration property which can be set to either “Horizontal” or “Vertical”.

Default values

The possible node layout properties (that are currently supported) are shown below with the values they have when enableNodeFormatType = "Horizontal". You can see the values for the other two sets of properties by looking at the layout-dimensions.js program. 

// Default node sizes. The height might be overridden for nodes with more ports
// than will fit in the default size.
defaultNodeWidth: 160,
defaultNodeHeight: 40,


// Default node shape. Can be "rectangle" or "port-arcs"
nodeShape: "port-arcs",


// SVG path strings to define the shape of your node and its

Notes

All coordinate positions for elements are based on one of nine anchor points around the node:

       "topLeft", "topCenter", "topRight",  
       "middleLeft", "middleCenter", "middleRight",   
       "bottomLeft", "bottomCenter", "bottomRight".

The PosX and PosY position for each element is an offset from the associated anchor point where PosX is the number of pixels to the right of the anchor point and PosY is a number of pixels down from the anchor point. Negative values can be provided to specify an offset to the left and up from the anchor point. The default anchor point for all elements is topLeft. By the way, the top left corner of the node is also the point that the node will be positioned at based on its x_pos and y_pos fields in the pipelineFlow document.

Elements like the node image and vertical ellipsis are positioned based on the top left corner of that element. Text is positioned based on the top left corner of its containing <div>.

The values for bodyPath and selectionPath must be SVG path strings which describe how to draw the node body shape and its selection highlight shape. For example, the following would draw a triangular node body and a triangular selection outline 5 pixels away from it:

    bodyPath: "     M  0 0 L  70 35  0 70 Z",
    selectionPath: "M -5 -5 L 75 35 -5 75 Z",

Default properties override

There are a couple of ways to do this depending on your needs. First, if you just want to change the look of all nodes on your canvas you can specify the enableNodeLayout configuration parameter in the main canvas configuration object. The properties from this object will replace any properties in the default set, which was chosen based on the settings of enableNodeFormatType. So you don’t need to provide all of the properties; just the ones you want to replace.

Let’s say you want to go crazy and have your nodes be displayed as ellipses. You could provide the following settings in enableNodeLayout:

 {
    bodyPath: "     M  0 30 Q  0  0 60  0 Q 120  0 120 30 Q 120 60 60 60 Q  0 60  0 30 Z",
    selectionPath: "M -5 30 Q -5 -5 60 -5 Q 125 -5 125 30 Q 125 65 60 65 Q -5 65 -5 30 Z",
    defaultNodeWidth: 120,
    defaultNodeHeight: 60,
    imageWidth: 30,
    imageHeight: 30,
    imagePosX: 20,
    imagePosY: 10,

Notes

In the test harness you can see some of these layout values in action by:

  1. Opening the Common Canvas side panel (click the hamburger icon)
  2. Select the Blue Ellipses example app. You should see all the nodes shown as blue ellipses. 3 Checkout some of the other sample apps to see how the default styling has been overridden.

If you experiment, you will see the nodes can be selected, moved and manipulated just like regular nodes. Even if you drag a node from the palette, it will appear with the overridden layout properties.

Customizing individual nodes

If you want each node to have a different layout based on some criteria you can use the second method for overriding the node layout properties. This employs the layoutHandler callback method. When you specify this callback method to common canvas your layout handler method will be called for each node on the canvas, during initialization and occasionally at other times.

The method should return a simple Javascript object that contains any node layout properties you want to override from the defaults and the ones specified in enableNodeLayout config field. This is an important point: there are three levels of properties provided where each overrides the previous set:

  1. First we take the full default set of node layout properties based on the value for enableNodeFormatType.
  2. Then we override these with the properties from the enableNodeLayout field in the config object, if any are provided.
  3. Finally we override the combined set with any properties from the object returned from the layoutHandler method if one is specified.

The callback is provided with a parameter data which is the node object from the pipelineFlow so your code can examine the node object and return node layout properties as appropriate.

Here is a simple example of a layoutHandler callback method which will override the width of the node based on the width of the main label for any node where the node’s op field is set to Sort:

layoutHandler(data) {
    let nodeFormat = {};
    if (data.op === "Sort") {
        const labLen = data.label ? data.label.length : 0;
        const width = (labLen * 9) + 30; // Allow 9 pixels for each character and a bit extra for padding
        nodeFormat = {
            defaultNodeWidth: width // Override default width with calculated width
        };
    }

OK, it’s not a very complicated example but hopefully you get the message :)

You can see an example application that use the layoutHandler callback method. In the test harness:

  1. Open the Common Canvas side panel (click the hamburger icon)
  2. Select the Explain sample application

You will see the nodes have different shapes and colors based on their type. You can examine the Explain sample app code to see how it works. This involves these three parts:

  1. This line sets the `enableConnectionType` which will set all nodeLayout properties to their defaults.
  2. This line will override the node layout defaults with ones specified for all nodes.
  3. The layout handler will override layout properties on a node by node basis.
Previous
Common Canvas: Flow validation API
Next
Common Canvas: Context menu wrapper