Snaplines for elements

JointJS+ provides a Snaplines plugin that is great for guiding the user in aligning elements in your application.

Installation

---

Access Snaplines via the ui namespace, and create an instance. A paper instance is needed.

import { ui } from '@joint/plus';

const snaplines = new ui.Snaplines({
    paper: paper
});

There is also a UMD version available

Include joint.ui.snaplines.js and joint.ui.snaplines.css in your HTML:

index.html

<link rel="stylesheet" type="text/css" href="joint.ui.snaplines.css">
<script src="joint.ui.snaplines.js"></script>

Access Snaplines through the joint.ui namespace:

index.js

const snaplines = new joint.ui.Snaplines({
    paper: paper
});

How do Snaplines work?

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.

Snaplines example

The following example creates an instance of Snaplines. The required paper is also provided as an option. Users can trigger snaplines by dragging an element.

Open Sandbox

Styling Snaplines

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.

Open Sandbox