Controls component

The controls component draws a set of buttons that offer some basic functionality to interact with a Surface:

You can see this component in use in various starter apps and feature demos, such as the Flowchart Builder, or the Network Topology Diagram Builder

Setup

Vanilla JS

React

Angular

Vue

Svelte

In vanilla JsPlumb you create a ControlsComponent programmatically, passing in the surface to which to attach:

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

const toolkit = newInstance()
const canvasElement = ...
const controlsElement = ...

const surface = toolkit.render(canvasElement, {...})
const controls = new ControlsComponent(controlsElement, surface)

Features

The controls component will always, by default, display:

• a 'zoom to fit' button
• a 'clear dataset' button
• an 'undo' button
• a 'redo' button

If you have a lasso plugin installed on your surface, the controls component will also display:

• a 'select mode' button
• a 'lasso mode' button

Options

Vanilla JS

React

Angular

Vue

Svelte

The constructor takes an optional third argument containing options, for example:

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

const toolkit = newInstance()
const canvasElement = ...
const controlsElement = ...

const surface = toolkit.render(canvasElement, {...})
const controls = new ControlsComponent(controlsElement, surface, {
    undoRedo:false,
    clear:false
})

The full list of options is:

Name	Type	Description
buttons?	ControlsComponentButtons	Optional extra buttons to add to the controls component.
clear?	boolean	Whether or not to show the clear button, defaults to true.
clearMessage?	string	Optional message to show the user when prompting them to confirm they want to clear the dataset
orientation?		Optional orientation for the controls. Defaults to 'row'.
undoRedo?	boolean	Whether or not to show undo/redo buttons, defaults to true
zoomToExtents?	boolean	Whether or not to show the zoom to extents button, defaults to true

CSS

Classes assigned by the controls component

Default values specified in the jsplumbtoolkit-controls.css stylesheet

Class	Description
jtk-controls	Assigned to the component root
jtk-selected-mode	Assigned to the button that toggles the current mode of the surface
jtk-zoom-to-fit	Assigned to the Zoom to fit button
jtk-select-mode	Assigned to the Select mode button
jtk-pan-mode	Assigned to the Pan mode button
jtk-undo	Assigned to the Undo button
jtk-redo	Assigned to the Redo button
jtk-clear-dataset	Assigned to the Clear dataset button

Additionally, the controls component uses several attributes to reflect the current state:

Attribute	Type	Description
can-undo	'true'|'false'	Assigned to the `.jtk-controls` element, given a value of true or false depending on the undo stack.
can-redo	'true'|'false'	Assigned to the `.jtk-controls` element, given a value of true or false depending on the redo stack.
data-undo	blank	Assigned to the undo button.
data-redo	blank	Assigned to the redo button.

ExportControlsComponent