Comment Customization¶
Comments can be customized by the application in the following ways:
- Setting the enableMarkdownInComments field in the canvas configuration.
- Customizing comment appearance with CSS (see below).
Customizing comment appearance with CSS¶
Comment DOM Construction¶
Comment elements are drawn as SVG elements in the SVG area provided by the Flow Editor and are grouped together using a group <g> element.
The DOM elements that make up a comment can be customized using CSS styles. This is done by either overriding the common-canvas CSS directly or, if customization is needed on a comment-by-comment basis, by assigning a class name to the group <g> element that is the container for all the comment elements. The class can be applied to the group object in a number of different ways:
- By specifying it in the
app_data.ui_data.class_namefield of the comment in the pipeline flow document that is provided to Common Canvas usingCanvasController.setPipelineFlow(pFlow) - By specifying it using the following API methods:
- CanvasController.setCommentProperties(commentId, properties, pipelineId)
- CanvasController.setCommentsClassName(commentIds, 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-comment-group | Classes specified for the comment in the class_name field of the node object will be added here. |
| ⮕ Sizing area | path | d3-comment-sizing | |
| ⮕ Selection area | path | d3-comment-selection-highlight | |
| ⮕ Background | path | d3-comment-rect | |
| ⮕ Text | foreignObject | d3-foreign-object-comment-text | Will contain a div that contains the comment text |
| ⮕ Decorations | g | d3-comment-decorations-group | Will contain decoration elements, for example, image, path etc |
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.