Gridlines API in React Diagram API component

Provides a visual guidance while dragging or arranging the objects on the Diagram surface

Properties

dotIntervals

number[]

A pattern of gaps that defines a set of horizontal/vertical grid dots

Defaults to [1, 19, 0.5, 19.5, 0.5, 19.5, 0.5, 19.5, 0.5, 19.5]

lineColor

string

Sets the line color of gridlines

Defaults to ”

lineDashArray

string

Defines the pattern of dashes and gaps used to stroke horizontal grid lines

Defaults to ”

lineIntervals

number[]

A pattern of lines and gaps that defines a set of horizontal/vertical gridlines

Defaults to [1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75]

snapIntervals

number[]

Specifies a set of intervals to snap the objects

<div id='diagram'></div>

let diagram: Diagram = new Diagram({
...
snapSettings: {
horizontalGridlines: { lineIntervals: [0.95, 9.05, 0.2, 9.75], snapIntervals: [10] },
verticalGridlines: { lineIntervals: [0.95, 9.05, 0.2, 9.75], snapIntervals: [10] }
},
...
});
diagram.appendTo('#diagram');

Defaults to [20]