Canvas Grid

Basic Usage

After importing the <Grid /> component, you can set the canvas grid for <XFlowGraph />.

<XFlow>
  ...
  <Grid type="mesh" options={{ color: '#ccc', thickness: 1 }} />
</XFlow>

Grid Size

You can control the grid size by setting the size property. The default grid size is 10px, which means that when rendering nodes, they will align to the grid with 10 as the minimum unit. For example, a node positioned at { x: 24, y: 38 } will actually render at { x: 20, y: 40 } on the canvas. When moving nodes, the minimum distance moved will be 10px.

Hide Grid

You can hide the grid by adding the visible property.

Dot Grid

The dot grid, with the type property set to dot, allows you to set the grid color and width through the options property.

Fixed Dot Size Grid

The fixed dot size grid, with the type property set to fixedDot, allows you to set the grid color and width through the options property. Note: When the canvas zoom level is less than 1, the dot size scales with the canvas zoom level. When the canvas zoom level is greater than 1, the dot size is fixed to the given thickness value.

Mesh Grid

The mesh grid, with the type property set to mesh, allows you to set the grid color and width through the options property.

Double Mesh Grid

The double mesh grid, with the type property set to doubleMesh, allows you to set the color and width of the primary and secondary grid lines through the options property.

API

Grid

The options corresponding to the args parameters are as follows: