v13.21.0

Minor Release

Common Canvas

#2408 Canvas background with vector dots or grid option

Common Canvas now has a feature that will optionally display a grid of dots or boxes in the background of the flow editor underneath the comments, nodes and links. The Grid will zoom and pan along with the canvas objects.

The fours grid types are

Dots

DotsAndLines

Boxes

BoxesAndLines

These can be switched on using settings in the enableCanvasLayout object of the canvas config, like this:

 render() {
    const config = {
        enableCanvasLayout: {
            displayGridType: “Dots”
        }
    };
    return (
        <CommonCanvas 
            canvasController={this.canvasController} 
            config={config});
        />
    );
}

By default, the grid is displayed with the same dimensions as those used for the snap-to-grid feature. That means, the minor grid (the spacing for the individual dots and boxes) is the same as the snap to grid x and y values. Meanwhile, the major grid (that is displayed with the lines in “DotsAndLines” and “BoxesAndLines”) is set to be 100% of the default node width and 100% of the default node height.

The default snap-to-grid values, and hence the grid size, will be different depending on the value for enableNodeFormatType which can be either Horizontal or Vertical.

If you want to override the default grid sizes the grid dimensions can be set as follows:

const config = {
  enableCanvasLayout: {
    displayGridType: “BoxesAndLines”,
    displayGridMajorX: “100%”,
    displayGridMajorY: “100%”,
    displayGridMinorX:  “25%”,
    displayGridMinorY:  “20%”
  }
}

These values can be expressed as either:

• Percentage of the respective default node size (percentages are indicated by a % sign at the end of the value) or
• A number which is interpreted as a number of pixels (specified as a number without px at the end)

This feature can be switched on in the test harness as follows:

• Open the common canvas right flyout
• Scroll down to the “Canvas Contents” section of the flyout
• Select a Grid style and optionally entered dimensions for the major and minor grids.
• Optionally switch on the snap to grid feature and see how the nodes, when dragged, snap to the displayed grid

Screenshare.-.2025-03-27.5_06_16.PM.mp4

Common Properties

#2416 Custom actions in common-properties

Common-properties now support custom actions. Custom action can be displayed either on the left or right side of the control similar to Image action. Custom actions don't use actionHandler() callback because host application has full control of rendering and handling custom actions.

In the following image, overflow menu is a custom action -

To define a custom action, when calling common-properties, host application can pass an optional array of custom actions like this -

<CommonProperties customActions={[CustomOverflowAction]} / >

Following config options should be set in UIhints action_info -

control: “custom”
custom_action_id: Unique id

Custom Action Interface:

// Returns the 'custom_action_id' for the action defined in uihints 
static id() 

constructor(propertyId, controller, data) 

// Returns the content users want to display 
renderAction()

Documentation of custom actions can be found here - https://elyra-ai.github.io/canvas/04.06-custom-components/#custom-actions

Issues Resolved

• #2400 Refactor drag utils variable names etc to reflect that it is no… by @tomlyn in #2401
• #2403 Show invalid number error when entering non numeric characters in empty numberfield control by @nmgokhale in #2404
• #2405 Toolbar buttons focus lost when enableKeyboardNavigation is ena… by @tomlyn in #2406
• Bump jspdf from 2.5.1 to 3.0.1 in /canvas_modules/harness by @dependabot in #2409
• #2408 Canvas background with vector dots or grid option by @tomlyn in #2411
• #2408 Canvas background with vector dots or grid option (part 2) by @tomlyn in #2412
• #2408 Canvas background with vector dots or grid option (part 3) by @tomlyn in #2413
• #2416 Custom actions in common-properties by @nmgokhale in #2417

Full Changelog: v13.20.0...v13.21.0