Snaplines

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

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.

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

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