Gridlines

12 Sep 20251 minute to read

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]