SnapSettingsModel API in React Diagram API component

Interface for a class SnapSettings

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.

gridType

GridType

Defines the diagram Grid pattern.

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

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');

snapAngle

number

Defines the angle by which the object needs to be snapped

snapLineColor

string

Defines the color of snapping lines

snapObjectDistance

number

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

verticalGridlines

GridlinesModel

Defines the vertical gridlines