Skip to content

Styling Canvas Objects

There are multiple was to specify the styles for the objects Common Canvas displays:

  • A class name can be provided for nodes either within the pipelineFlow document or
  • The common-canvas default styes can be overriden within your CSS or SCSS file

For more precise styling of objects the style specification object can be used to provide a number of styles to Common Canvas to set the inline styles on numerous elements of an object. For example, a node is made up of: a selection outline; a node body (rectangle); an image, a label etc.

Style specifications may be applied to common-canvas objects using the following Canvas Controller methods: 

setObjectsStyle()
setObjectsMultiStyle()
setLinksStyle()
setLinksMultiStyle()
setSubdueStyle()
and may be retrieved for objects using: 
getNodeStyle()
getCommentStyle()
getLinkStyle()

The style spec for a node can set the styles for all these elements in one shot. Here is a template of a style spec for a node: 

{
    body: { default: <css_snippet>, hover: <css_snippet> },
    image: { default: <css_snippet> },
    label: { default: <css_snippet> },
    selection_outline: { default: <css_snippet> }
}
 ```
And here is a real example:
```js
{
    body: {
        default: "fill: coral; stroke: red;",
        hover: "fill: cornflowerblue; stroke: blue;"
    }
};

Here is a template for styling a comment:

{
    body: { default: <css_snippet>, hover: <css_snippet> },
    text: { default: <css_snippet> },
    selection_outline: { default: <css_snippet> },
}

And here is a template for styling a link: 

{
    line: { default: <css_snippet> , hover: <css_snippet>  }
}

  • <css_snippet> - is a string containing any CSS code that can be added inline to an SVG object. That means, for example, you need to use fill and stroke for colors etc It is recommended NOT to change the sizes of text fonts.

The CSS will be applied to the element of the object specified, either as the default inline style or as the style when the pointer hovers over the object.

When a hover style is applied to a graphical element it is applied in addition to the default style so there is no need to repeat styles in the hover <css_snippet> because they will augment the default style.

Because styles are applied as in-line styles they will override any styles provided in your application’s CSS and specified to Common Canvas through the class_name field of canvas objects.

If the <css_snippet> is specified as null the current style will be removed from the specified element of the object.

Finally, styles can be applied to your nodes, comments and links as either temporary or permanent styles by specifying the temporary boolean in the API methods. A temporary style is just applied for the duration of the session and are not persisted. You should use temporary=true styles that represent transient attributes of an object that should not be persisted in the pipelineFlow document. Use temporary=false styles for styles that you want to persist in the pipelineFlow document.