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:
import { MiniviewPlugin } from "@jsplumbtoolkit/browser-ui"
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 6.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"
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.
Name: miniview
Interface MiniviewPluginOptions
Members
data-jtk-miniview-type attribute, and can be useful
for styling.Lasso
Provides the Lasso tool.
Name: lasso
Interface LassoPluginOptions
Members
Pan Buttons
Provides the buttons around the perimeter of the Surface canvas that allow the user to nudge the pan.
Name: pan-buttons
Interface PanButtonsPluginOptions
Members
Drawing Tools
Provides the tools to assist in resizing nodes/groups. When the associated surface has a grid, this plugin will constrain node/group resizing so that the dimensions of the vertex are a multiple of the grid in each axis.
The plugin automatically attaches resizing tools to any vertex that is added to a Toolkit's current selection, and removes the resizing tools when the vertex is removed from the selection. This behaviour can be changed by setting onDemand:true in the plugin options.
This plugin is discussed in detail on this page.
Name: drawingTools
Interface DrawingToolsPluginOptions
Members
Active Filtering
Provides the 'active filtering' code - the ability to disable drag targets programmatically when a new connection is dragged.
Name: activeFiltering
This plugin does not have any configurable options.
Usage
To use the active filtering plugin, you first need to provide a beforeConnect method to the constructor parameters of the Toolkit instance:
const tk = newInstance({
beforeConnect:(source:Vertex, target:Vertex) => {
// return true if the source and target are connectable,
// false otherwise.
}
})
then you declare the Active Filtering plugin in the render options:
toolkit.render(someElement, {
...
plugins:[
ActiveFilteringPlugin.type
]
})
UI States
Provides the ability to change the appearance of vertices by associating them to certain "states". Discussed in detail on this page.
Name: ui-states
Interface UiStatesPluginOptions
Members
Drag Groups
Provides the ability to manage logical drag groups.
Name: dragGroups
Interface DragGroupsPluginOptions
Members
Snaplines
This plugin is discussed in detail on this page.
Name: snaplines
Interface SnaplinesPluginOptions
Members
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: