Controls component

This component was included in the Toolkit on the off chance that it will be useful to some people. Since release 6.2.0, in which the Toolkit began to be properly tree-shakable, we've felt a certain latitude to include extra things such as this, because if you don't reference it you won't get it in your bundle.

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.

Setup

This is for vanilla JS:

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)

For usage with Angular, React, Vue2 or Vue3, see the appropriate library integration documentation.

note

This initial release of the ControlsComponent does not offer any scope for customization, but you could use the CSS classes discussed below to selectively hide specific operations. We're open to suggestions on this - if you use it, and you'd like to see some update, by all means let us know.

CSS

There is an accompanying stylesheet for the ControlsComponent that ships with the Toolkit - jsplumbtoolkit-controls.css.

Classes assigned by the controls component are:

Class	Assigned To	Purpose
jtk-controls	Component root
jtk-selected-mode	Pan/lasso button	Assigned to the button that represents the current mode of the surface
jtk-zoom-to-fit	Zoom to fit button
jtk-select-mode	Select mode button
jtk-pan-mode	Pan mode button
jtk-undo	Undo button
jtk-redo	Redo button
jtk-clear-dataset	Clear dataset button

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

• can-undo Assigned to the .jtk-controls element, given a value of true or false depending on the undo stack.
• can-redo Assigned to the .jtk-controls element, given a value of true or false depending on the redo stack.
• data-undo Assigned to the undo button.
• data-redo Assigned to the redo button.