Snaplines

Snaplines provide visual cues to allow your users to fine-tune their layouts.

Setup

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance,
	SnaplinesPlugin } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "plugins": [
    SnaplinesPlugin.type
  ]
});

This will add the snaplines plugin with its default settings.

Configuration

Snaplines offers a few basic customization options:

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance,
	SnaplinesPlugin } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "plugins": [
    {
      "type": SnaplinesPlugin.type,
      "options": {
        "showEdges": true,
        "showCenters": true,
        "tolerance": 15
      }
    }
  ]
});

Enable/disable

You can switch the snaplines plugin on and off via its setEnabled(..) method. To do this, you need to get a reference to the plugin and then call the method:

const snaplinesPlugin = surface.getPlugin(SnaplinesPlugin.type)
snaplinesPlugin.setEnabled(false)

CSS

Classes used by the Snaplines plugin.

Default values specified in the jsplumbtoolkit.css stylesheet

Class	Description
jtk-snapline	Assigned to both horizontal and vertical snaplines when active
jtk-snapline-horizontal	Assigned to horizontal snaplines when active
jtk-snapline-vertical	Assigned to vertical snaplines when active
jtk-snapline-exact	Assigned to both horizontal and vertical snaplines when the elements are exactly aligned
jtk-snapline-active	Assigned to an element attached to an active snapline
jtk-snapline-active-exact	Assigned to an element attached to an active snapline and the elements on the snapline are exactly aligned

Options

Interface SnaplinesPluginOptions

Name	Type	Description
enabled?	boolean	Defaults to true. If false, you can start the plugin in disabled mode.
showCenters?	boolean	Whether or not to show center snaplines. Defaults to true.
showEdges?	boolean	Whether or not to show edge snaplines. Defaults to true.
tolerance?	number	The tolerance either side of a snapline inside which an element must be before the snapline is activated. Defaults to 10 pixels (either side of the line).