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   
            }
        }        
    ]
 
})

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

Home > @jsplumbtoolkit/browser-ui > SnaplinesPluginOptions

SnaplinesPluginOptions interface

Options for the snaplines plugin.

Signature:

export interface SnaplinesPluginOptions extends SurfacePluginOptions 

Extends: SurfacePluginOptions

Properties

Property	Modifiers	Type	Description
showCenters?		boolean	(Optional) Whether or not to show center snaplines. Defaults to true.
showEdges?		boolean	(Optional) Whether or not to show edge snaplines. Defaults to true.
tolerance?		number	(Optional) 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).