Search results

SnapSettings API in React Diagram API component

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

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 {}