Skip to main content

Surface Plugins

The Surface widget has a plugin architecture, which is new in 5.x. Several pieces of functionality - the miniview, the lasso tool, the nudge buttons and the active filtering code - have all been moved to 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:


import { MiniviewPlugin } from "@jsplumbtoolkit/browser-ui-plugin-miniview"
const surface = toolkitInstance.render(someElement, {    plugins:[        {            type:MiniviewPlugin.type,            options:{                container:someMiniviewElement            }        }    ]})

The syntax used to define them is the same as that used in 5.x 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:


import { ActiveFilteringPlugin } from "@jsplumbtoolkit/browser-ui-plugin-active-filtering"
const surface = toolkitInstance.render(someElement, {    plugins:[        ActiveFilteringPlugin.type    ]})

Available Plugins#

This is the full list of plugins that ship with the Toolkit:

Miniview#

Provides the miniview widget. The Angular, Vue and React libraries declare this package as a peer dependency, since they contain a wrapper around this plugin.

Package: @jsplumbtoolkit/browser-ui-plugin-miniview

Name: miniview

Options:

Home > @jsplumbtoolkit/browser-ui-plugin-miniview > MiniviewPluginOptions

MiniviewPluginOptions interface#

Signature:

export interface MiniviewPluginOptions extends SurfacePluginOptions 

Extends: SurfacePluginOptions

Properties#

PropertyTypeDescription
collapsible?boolean(Optional)
containerElement
elementFilter?(v: Vertex) => boolean(Optional)
enableWheelZoom?boolean(Optional)
suspended?boolean(Optional)
typeFunction?(v: Node | Group) => string(Optional)
visible?boolean(Optional)
wheelReverse?boolean(Optional)
wheelSensitivity?number(Optional)

Lasso#

Provides the Lasso tool.

Package: @jsplumbtoolkit/browser-ui-plugin-lasso

Name: lasso

Options:

Home > @jsplumbtoolkit/browser-ui-plugin-lasso > LassoPluginOptions

LassoPluginOptions interface#

Signature:

export interface LassoPluginOptions extends SurfacePluginOptions 

Extends: SurfacePluginOptions

Properties#

PropertyTypeDescription
filter?string(Optional)
includeEdges?boolean(Optional)
invert?boolean(Optional)
onEnd?Function(Optional)
onSelect?Function(Optional)
onStart?Function(Optional)
selectionFilter?(o: Edge | Vertex) => boolean(Optional)

Pan Buttons#

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

Package: @jsplumbtoolkit/browser-ui-plugin-pan-buttons

Name: pan-buttons

Options:

Home > @jsplumbtoolkit/browser-ui-plugin-pan-buttons > PanButtonsPluginOptions

PanButtonsPluginOptions interface#

Signature:

export interface PanButtonsPluginOptions extends SurfacePluginOptions 

Extends: SurfacePluginOptions

Properties#

PropertyTypeDescription
panRepeatDistance?number(Optional) Amount in pixels to adjust pan by each time the timer fires. Defaults to 10.
panRepeatInterval?number(Optional) Time in milliseconds between successive adjustment to the pan. Defaults to 60.
startPanTimeout?number(Optional) Time in milliseconds after the mouse button is pressed before panning should start. Defaults to 150.

Drawing Tools#

Provides the tools to assist in resizing nodes/groups.

Package: @jsplumbtoolkit/browser-ui-plugin-drawing-tools

Options:

Home > @jsplumbtoolkit/browser-ui-plugin-drawing-tools > DrawingToolsPluginOptions

DrawingToolsPluginOptions interface#

Signature:

export interface DrawingToolsPluginOptions extends SurfacePluginOptions 

Extends: SurfacePluginOptions

Properties#

PropertyTypeDescription
heightAttribute?string(Optional)
ignoreGrid?boolean(Optional)
leftAttribute?string(Optional)
minimumHeight?number(Optional)
minimumWidth?number(Optional)
onDemand?boolean(Optional)
onEdit?() => any(Optional)
topAttribute?string(Optional)
widthAttribute?string(Optional)

Active Filtering#

Provides the 'active filtering' code - the ability to disable drag targets programmatically when a new connection is dragged.

Package: @jsplumbtoolkit/browser-ui-plugin-active-filtering

Options:

Home > @jsplumbtoolkit/browser-ui-plugin-active-filtering > ActiveFilteringPluginOptions

ActiveFilteringPluginOptions interface#

Signature:

export interface ActiveFilteringPluginOptions extends SurfacePluginOptions 

Extends: SurfacePluginOptions