Skip to main content

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, the active filtering code, the concept of "ui states", and logical drag groups - 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. The Svelte integration does not provide a wrapper as one is not needed. Discussed in detail on this page.

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​

PropertyModifiersTypeDescription
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​

PropertyModifiersTypeDescription
filter?string(Optional) Optional CSS3 filter identifying elements you do not want to lasso.
includeEdges?boolean(Optional) Defaults to false. If true, edges are included in the lasso selection.
invert?boolean(Optional) Defaults to false, meaning the lasso is drawn as a rectangle. If true, the lasso is drawn as a set of masks, with the lasso area drawn as a "hole" in the masks.
onEnd?Function(Optional) Optional function to call when lasso selection ends.
onSelect?Function(Optional) Optional function to call when one or more objects has been selected by the lasso.
onStart?Function(Optional) Optional function to call when lasso selection starts.
selectionFilter?(o: Edge | Vertex) => boolean(Optional) Optional filter that is passed every vertex/edge that the lasso would ordinarily select, and if this function returns false then the vertex/edge is not added to the selection

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​

Options for the pan buttons plugin.

Signature:

export interface PanButtonsPluginOptions extends SurfacePluginOptions

Extends: SurfacePluginOptions

Properties​

PropertyModifiersTypeDescription
panDistancenumberAmount in pixels to pan the surface by when one of the buttons is pressed and released. Defaults to 50.
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

Name: drawingTools

Options:

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

DrawingToolsPluginOptions interface​

Signature:

export interface DrawingToolsPluginOptions extends SurfacePluginOptions

Extends: SurfacePluginOptions

Properties​

PropertyModifiersTypeDescription
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

Name: activeFiltering

Options:

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

ActiveFilteringPluginOptions interface​

Signature:

export interface ActiveFilteringPluginOptions extends SurfacePluginOptions

Extends: SurfacePluginOptions

UI States​

Provides the ability to change the appearance of vertices by associating them to certain "states". Discussed in detail on this page.

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

Name: ui-states

Options:

Home > @jsplumbtoolkit/browser-ui-plugin-ui-states > UiStatesPluginOptions

UiStatesPluginOptions interface​

Signature:

export interface UiStatesPluginOptions extends SurfacePluginOptions

Extends: SurfacePluginOptions

Drag Groups​

Provides the ability to manage logical drag groups.

Package: @jsplumbtoolkit/browser-ui-plugin-drag-groups

Name: dragGroups

Options:

Home > @jsplumbtoolkit/browser-ui-plugin-drag-groups > DragGroupsPluginOptions

DragGroupsPluginOptions interface​

Signature:

export interface DragGroupsPluginOptions extends SurfacePluginOptions

Extends: SurfacePluginOptions

Properties​

PropertyModifiersTypeDescription
assignDragGroup(v: Vertex) => DragGroupSpec