SnapSettings

23 Sep 20251 minute to read

Defines the gridlines and defines how and when the objects have to be snapped

Properties

constraints SnapConstraints

Constraints for gridlines and snapping

None - Snapping does not happen
ShowHorizontalLines - Displays only the horizontal gridlines in diagram.
ShowVerticalLines - Displays only the Vertical gridlines in diagram.
ShowLines - Display both Horizontal and Vertical gridlines.
SnapToHorizontalLines - Enables the object to snap only with horizontal gridlines.
SnapToVerticalLines - Enables the object to snap only with horizontal gridlines.
SnapToLines - Enables the object to snap with both horizontal and Vertical gridlines.
snapToObject - Enables the object to snap with the other objects in the diagram.

Defaults to ‘All’

gridType GridType

Defines the diagram Grid pattern.

Lines - Render the line for the grid
Dots - Render the dot for the grid

Defaults to ‘Lines’

horizontalGridlines GridlinesModel

Defines the horizontal gridlines

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

let horizontalGridlines: GridlinesModel = {lineColor: 'black', lineDashArray: '1,1' };
let verticalGridlines: GridlinesModel = {lineColor: 'black', lineDashArray: '1,1'};
let diagram: Diagram = new Diagram({
...
snapSettings: { horizontalGridlines, verticalGridlines, constraints: SnapConstraints.ShowLines,
snapObjectDistance: 5, snapAngle: 5 },
...
});
diagram.appendTo('#diagram');

Defaults to {}

snapAngle number

Defines the angle by which the object needs to be snapped

Defaults to 5

snapLineColor string

Defines the color of snapping lines

Defaults to ‘#07EDE1’

snapObjectDistance number

Sets the minimum distance between the selected object and the nearest object