Skip to main content

Snaplines

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

Snaplines - jsPlumb Toolkit, build diagrams and rich visual UIs fast

Instantiation

Snaplines can be specified in the plugins of the render options for some surface:

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

const toolkit = newInstance()
const surface = toolkit.render(document.getElementById("someElement"), {
...,
plugins:[
{
type:SnaplinesPlugin.type,
options:{

}
}
]

})

Configuration

Snaplines offers a few basic customization options:

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

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

})

Enable/disable

From 6.10.0 onwards 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

These are the classes you can use to style snaplines.

ClassDescription
jtk-snaplineAssigned to both horizontal and vertical snaplines when active
jtk-snapline-horizontalAssigned to horizontal snaplines when active
jtk-snapline-verticalAssigned to vertical snaplines when active
jtk-snapline-exactAssigned to both horizontal and vertical snaplines when the elements are exactly aligned
jtk-snapline-activeAssigned to an element attached to an active snapline
jtk-snapline-active-exactAssigned to an element attached to an active snapline and the elements on the snapline are exactly aligned

Options

Interface SnaplinesPluginOptions

Options for the snaplines plugin.

Members

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).