SnapSettings API in JavaScript Diagram API control

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

string

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

Defaults to 5

verticalGridlines

GridlinesModel

Defines the vertical gridlines

Defaults to {}