Canvas Customization

The canvas background of the flow editor can be customized by the application in the following ways.

Snap to grid

Nodes and comments displayed by Common Canvas can be made to “snap-to-grid”. The snap behavior can be either during the drag operation or after the drag operation has ended. The snap to grid behavior can be set in the enableSnapToGridType config property.

    const config = {
        enableSnapToGridType: "During"
    };
    ...
    ...
    return (<CommonCanvas config={config} />);

enableSnapToGridType can be set to “None”, “During” or “After”.

In addition to enableSnapToGridType, the application can set the size of the grid increments in the X and Y direction by specifying the enableSnapToGridX and enableSnapToGridY properties of the config. They can be expressed as:

• a number which will be a distance within the canvas coordinate system or
• a percentage (for example “25%”) which will be the percentage of the default width or height of the node.

Display Grid

Common Canvas can display four types of background grid underneath the nodes, links and comments.

The type and dimensions of the grid can be specified using the enableCanvasLayout object which is a property of the canvas config.

    const config = {
        enableCanvasLayout: {
            displayGridType: "Dots"
        }
    };
    ...
    ...
    return (<CommonCanvas config={config} />);

displayGridType can be set to “None”, “Dots”, “Boxes”, “DotsAndLines” or “BoxesAndLines”

In addition to displayGridType, the application can set the size of the displayed grid of dots or boxes using:

• displayGridMinorX
• displayGridMinorY

If the grid type is set to either “DotsAandLines” or BoxesAndLines” the following properties can be used to set the size of the line grid:

• displayGridMajorX
• displayGridMajorY

These display grid properties can be expressed as:

• a number which will be a distance within the canvas coordinate system or
• a percentage (for example “25%”) which will be the percentage of the default width or height of the node.

By default, the displayed grid will take its dimensions from the snap-to-grid dimensions.