Snaplines (a.k.a Guidelines) are great for guiding the user in aligning elements in your application. Snaplines are vertical and horizontal lines that appear when the user is dragging an element that is vertically or horizontally close enough to some other element.
Include joint.ui.snaplines.css and joint.ui.snaplines.js files to your HTML:
<link rel="stylesheet" type="text/css" href="joint.ui.snaplines.css">
<script src="joint.ui.snaplines.js"></script>Enabling snaplines is as easy as creating a joint.ui.Snaplines object:
const snaplines = new joint.ui.Snaplines({ paper });The joint.ui.Snaplines constructor function takes the following parameters:
paper - The JointJS paper (joint.dia.Paper) object.distance - The distance in pixels between edges (center) of other elements for snapping applies. The default is 10.filter - filter allows you to filter out elements taken into account for snapping. It can either be an array
in which case the array is considered to contain cell types (or elements directly, they can even be intermixed) that should be filtered out from snapping.
Or it can be a function with the following signature: function(element) in which case the function should return true
if the element should not be taken into account for snapping.usePaperGrid - When an element is snapped to other element, adjust its top-left corner to the paper's grid. Useful when the elements in the graph (or their centers) are not aligned with the grid. The default is false.| enable() | void | Enable the snaplines. The plugin will start listening to the paper and align elements as they move. |
|---|---|---|
| disable() | void | Disable the snaplines. |
| isDisabled() | boolean | Return true if the snaplines are disabled. Otherwise, return false. The plugin is enabled by default. |
Snaplines can be customized in CSS. Snapline is a <div> HTML element that has the
snapline CSS class set. Moreover, you can customize horizontal and vertical
snaplines differently by using the horizontal and vertical CSS class:
.snapline.horizontal {
border-bottom: 2px dashed red;
box-shadow: 0 0 2px black;
}
.snapline.vertical {
border-right: 2px dotted blue;
box-shadow: 0 0 2px black;
}