Grid lines in EJ2 TypeScript Diagram control
18 Apr 202319 minutes to read
Gridlines are the pattern of lines drawn behind the diagram elements. It provides a visual guidance while dragging or arranging the objects on the diagram surface.
The model’s snapSettings
property is used to customize the gridlines and control the snapping behavior in the diagram.
Customize the gridlines visibility
The snapSettings.snapConstraints
enables you to show/hide the gridlines. The following code example illustrates how to show or hide gridlines.
If you need to enable snapping, then inject snapping module into the diagram.
import {Diagram, SnapConstraints,SnapSettingsModel,Snapping} from '@syncfusion/ej2-diagrams';
Diagram.Inject(Snapping);
let snapSettings: SnapSettingsModel = {
// Display both Horizontal and Vertical gridlines
constraints: SnapConstraints.ShowLines };
let diagram: Diagram = new Diagram({
width: '100%', height: '500px',
snapSettings: snapSettings
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
To show only horizontal/vertical gridlines or to hide gridlines, refer to Constraints
.
Appearance
The appearance of the gridlines can be customized by using a set of predefined properties.
-
The
horizontalGridLines
and theverticalGridLines
properties allow to customize the appearance of the horizontal and vertical gridlines respectively. -
The horizontal gridlines
lineColor
andlineDashArray
properties are used to customizes the line color and line style of the horizontal gridlines. -
The vertical gridlines
lineColor
andlineDashArray
properties are used to customizes the line color and line style of the vertical gridlines.
The following code example illustrates how to customize the appearance of gridlines.
import {Diagram,SnapConstraints,SnapSettingsModel,Snapping} from '@syncfusion/ej2-diagrams';
Diagram.Inject(Snapping);
let snapSettings: SnapSettingsModel = {
// Define the Constraints for gridlines and snapping
constraints: SnapConstraints.ShowLines,
// Defines the horizontalGridlines for SnapSettings
horizontalGridlines: {
// Sets the line color of gridlines
lineColor: 'blue',
// Defines the lineDashArray of gridlines
lineDashArray: '2 2'
},
// Defines the verticalGridlines for SnapSettings
verticalGridlines: {
lineColor: 'blue',
lineDashArray: '2 2'
}
};
let diagram: Diagram = new Diagram({
width: '100%',
height: '500px',
// Define the snap setting for the diagram
snapSettings: snapSettings
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Line intervals
Thickness and the space between gridlines can be customized by using horizontal gridlines’s linesInterval
and vertical gridlines’s linesInterval
properties. In the lines interval collections, values at the odd places are referred as the thickness of lines and values at the even places are referred as the space between gridlines.
The following code example illustrates how to customize the thickness of lines and the line intervals.
import {Diagram,SnapConstraints,SnapSettingsModel,Snapping} from '@syncfusion/ej2-diagrams';
Diagram.Inject(Snapping);
let snapSettings: SnapSettingsModel = {
constraints: SnapConstraints.ShowLines,
horizontalGridlines: {
// Sets the lineIntervals of Gridlines
lineIntervals: [1.25, 14, 0.25, 15, 0.25, 15, 0.25, 15, 0.25, 15],
lineColor: 'blue',
lineDashArray: '2 2'
},
verticalGridlines: {
// Sets the lineIntervals of Gridlines
lineIntervals: [1.25, 14, 0.25, 15, 0.25, 15, 0.25, 15, 0.25, 15],
lineColor: 'blue',
lineDashArray: '2 2'
}
};
let diagram: Diagram = new Diagram({
width: '100%',
height: '500px',
snapSettings: snapSettings
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Snapping
Snap to lines
This feature allows the diagram objects to snap to the nearest intersection of gridlines while being dragged or resized. This feature enables easier alignment during layout or design.
Snapping to gridlines can be enabled/disabled with the snapSettings.snapConstraints
. The following code example illustrates how to enable/disable the snapping to gridlines.
import {Diagram,SnapConstraints,SnapSettingsModel,Snapping,NodeModel} from '@syncfusion/ej2-diagrams';
Diagram.Inject(Snapping);
let snapSettings: SnapSettingsModel = {
// Enables the object to snap with both horizontal and Vertical gridlines
constraints: SnapConstraints.SnapToLines | SnapConstraints.ShowLines
};
let nodes: NodeModel[] = [{
id: 'node1',
style:{fill:'#6BA5D7',strokeColor:'#6BA5D7'},
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
}];
let diagram: Diagram = new Diagram({
width: '100%',
height: '500px',
nodes: nodes,
snapSettings: snapSettings
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Customization of snap intervals
By default, the objects are snapped towards the nearest gridline. The gridline or position towards where the diagram object snaps can be customized with the horizontal gridlines’s snapInterval
and the vertical gridlines’s snapInterval
properties.
import {Diagram,SnapConstraints,SnapSettingsModel,Snapping,NodeModel} from '@syncfusion/ej2-diagrams';
Diagram.Inject(Snapping);
let snapSettings: SnapSettingsModel = {
horizontalGridlines: {
// Defines the snap interval for object
snapIntervals: [10]
},
verticalGridlines: {
snapIntervals: [10]
},
constraints: SnapConstraints.All
};
let nodes: NodeModel[] = [{
id: 'node1',
width: 100,
style:{fill:'#6BA5D7',strokeColor:'#6BA5D7'},
height: 100,
offsetX: 100,
offsetY: 100
}];
let diagram: Diagram = new Diagram({
width: '100%',
height: '500px',
nodes: nodes,
snapSettings: snapSettings
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Snap to objects
The snap to object provides visual cues to assist with aligning and spacing diagram elements. A node can be snapped with its neighboring objects based on certain alignments. Such alignments are visually represented as smart guides.
The snapObjectDistance
property allows you to define minimum distance between the selected object and the nearest object.
The snapAngle
property allows you to define the snap angle by which the object needs to be rotated.
The snapConstraints
property allows you to enable or disable the certain features of the snapping, refer to snapConstraints
.
The snapLineColor
property allows you to define the color of the snapline.
import {Diagram,SnapConstraints,SnapSettingsModel,Snapping,NodeModel} from '@syncfusion/ej2-diagrams';
Diagram.Inject(Snapping);
let nodes: NodeModel[] = [{
id: 'node1',
style:{fill:'#6BA5D7',strokeColor:'#6BA5D7'},
width: 100,
height: 100,
offsetX: 100,
offsetY: 100
},{
id: 'node2',
style:{fill:'#6BA5D7',strokeColor:'#6BA5D7'},
width: 100,
height: 100,
offsetX: 300,
offsetY: 100
}];
let snapSettings: SnapSettingsModel = {
// Enable snap to object constraint
constraints: SnapConstraints.SnapToObject|SnapConstraints.ShowLines,
// Sets the Snap object distance
snapObjectDistance: 10,
// Snap Angle for object
snapAngle: 10,
// Set the Snapline color
snapLineColor: 'red'
};
let diagram: Diagram = new Diagram({
width: '100%',
height: '500px',
nodes: nodes,
snapSettings: snapSettings
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>