Plugins

The Surface component has a plugin architecture. Several pieces of functionality - the miniview, the lasso tool, the nudge buttons, the active filtering code, the concept of "ui states", and logical drag groups - are implemented as plugins, and the drawing tools have been refactored to conform to the plugin architecture. It is also possible to write your own.

Syntax

Plugins are declared in the render params for some surface:

Vanilla JS

React

Angular

Vue

Svelte

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

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

The syntax used to define them is the same as that used to define anchors, connectors, endpoints and overlays:

{
    type:string,
    options:Record<string, any>
}

You can also just use the name of a plugin, if you don't need to configure it:

Vanilla JS

React

Angular

Vue

Svelte

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

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

Miniview

A miniview is a small window displaying the structure of the UI, which is independently pannable and zoomable, and which controls the viewport of its related surface. It is zoomed out to such an extent that all of the vertices in the surface are visible within its viewport, and contains a "panner" element that maps the current visible viewport of the Surface to which it is related.

Read Miniview documentation

---

Lasso

The lasso plugin allows users to select nodes, group and edges with the mouse.

Read lasso plugin documentation

---

Pan Buttons

Provides the buttons around the perimeter of the Surface canvas that allow the user to nudge the pan.

Read pan buttons plugin documentation

---

Drawing Tools

This plugin provides the tools to assist in resizing nodes/groups.

Read the drawing tools plugin documentation

---

Active Filtering

Active filtering is the ability to disable drag targets programmatically when a new connection is dragged.

Read the active filtering plugin documentation

---

UI States

Provides the ability to change the appearance of vertices by associating them to certain "states".

Read the UI states plugin documentation

---

Drag Groups

Provides the ability to manage logical drag groups.

Name: dragGroups

Interface DragGroupsPluginOptions

Name	Type	Description

Read the DragGroups plugin documentation

---

Snaplines

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

Read the snaplines plugin documentation

---

Background

Name: background

Usage

The background plugin acts as a wrapper around one of a few subtypes. You need to supply the type of background you wish to use. Discussed in detail on this page.

Generated grid backgrounds

To use the generated grid background, set the type to GeneratedGridBackground.type:

plugins:[
    {
        type:BackgroundPlugin.type,    // <-- add the wrapper
        options:{
            type:GeneratedGridBackground.type,     // <-- set the subtype
            ... other options ... 
        }
    }    
    
]

The full list of options available for the generated grid background are:

Interface GeneratedGridBackgroundOptions

Name	Type	Description
autoShrink?	boolean	Defaults to true, and instructs the grid that if the grid has grown beyond any minimum value set in either axis, if the content bounds subsequently shrink in that axis below the minimum, the grid should shrink back to the minimum. If you set this to false the grid will never shrink back to its minimum values once they have been exceeded.
dotRadius?	number	The radius for dots representing grid positions (when gridType id GridTypes.dotted). Defaults to 2.
grid?	Grid	The grid to use. This is optional; if you do not supply one the background will attempt to read the grid definition from the Surface. If that is also not set then a default grid of 50x50 pixels will be used.
gridType?		Type of grid - lines or dots. Defaults to lines.
maxHeight?	number	The maximum height for the grid. The value you provided is divided by 2 and then the grid is guaranteed to never exceed the range of (-maxHeight / 2) - (maxHeight / 2). maxHeight takes precedence over minHeight.
maxWidth?	number	The maximum width for the grid. The value you provided is divided by 2 and then the grid is guaranteed to never exceed the range of (-maxWidth / 2) - (maxWidth / 2). maxWidth takes precedence over minWidth.
minHeight?	number	The minimum height for the grid. The value you provided is divided by 2 and then the grid is guaranteed to always at least span the range of (-minHeight / 2) - (minHeight / 2).
minWidth?	number	The minimum width for the grid. The value you provided is divided by 2 and then the grid is guaranteed to always at least span the range of (-minWidth / 2) - (minWidth / 2).
onBackgroundReady?	OnBackgroundReadyCallback	Optional function to call when the image has loaded (or otherwise claims to be ready)
showBorder?	boolean	Whether or not to show a thick border around the entire background. Defaults to false.
showTickMarks?	boolean	If true (which is the default), the grid will also draw tick marks between the grid lines.
tickDotRadius?	number	The radius for dots representing grid tick marks (when gridType id GridTypes.dotted). Defaults to 1.
tickMarksPerCell?	number	Number of tick marks to draw per cell. Defaults to 2.
type	string	Type of background to render.
visible?	boolean	Whether or not the background is initially visible. Defaults to true.

---

Vertex Drawing

This plugin provides a means for users to draw new vertices onto the canvas.

Read the vertex drawing plugin documentation