widgets
The namespace provides a built-in collection of tool definitions (Widget type definitions) for the Toolbar component, which allow the user to interact with a JointJS diagram.
To learn more about the plugin, check out the Widget types section.
Classes​
The plugin provides the following classes:
button​
class button extends Widget { }
Insert a button-type input field to the Toolbar. See the Toolbar Widget button section for a demo.
Available options​
- [optional]
text
is a string specifying the text inside the button.
Events​
- click
- pointerclick (click)
- pointerdown
- pointerup
checkbox​
class checkbox extends Widget { }
Insert a checkbox-type input field to the Toolbar. See the Toolbar Widget checkbox section for a demo.
Available options​
- [optional]
label
is a string specifying the label placed next to the checkbox, - [optional]
value
is a boolean specifying the initial value of the checkbox.
Events​
- change
- click
- input
- pointerclick (click)
- pointerdown
- pointerup
colorPicker​
class colorPicker extends Widget {
setValue: (value: string, opt?: { silent: boolean }) => void
}
Insert a color-type input field to the Toolbar. See the Toolbar Widget colorPicker section for a demo.
Available options​
- [optional]
value
is a string specifying the initial value of the color picker. It is#FFFFFF
by default.
Events​
fullscreen​
class fullscreen extends button { }
Insert a fullscreen button into the Toolbar, which can trigger the browser's full-screen mode for a specific HTML Element. It is implemented as a button-type input field. See the Toolbar Widget fullscreen section for a demo.
Available options​
- [optional]
target
is an HTMLElement or a string selector specifying the target HTML Element to be presented in full-screen mode. It iswindow.top.document.body
by default.
inputNumber​
class inputNumber extends Widget { }
Insert a number-type input field into the Toolbar. See the Toolbar Widget inputNumber section for a demo.
Available options​
- [optional]
label
is a string specifying the label placed next to the inputNumber, - [optional]
min
andmax
are numbers specifying the minimum and maximum values of the inputNumber range, - [optional]
value
is a number specifying the initial value of the inputNumber.
Events​
inputText​
class inputText extends Widget { }
Insert a text-type input field into the Toolbar. See the Toolbar Widget inputText section for a demo.
Available options​
- [optional]
label
is a string specifying the label placed next to the inputText, - [optional]
value
is a string specifying the initial value of the inputText.
Events​
label​
class label extends Widget { }
Insert a piece of text into the Toolbar. See the Toolbar Widget label section for a demo.
Available options​
- [optional]
text
is a string specifying the text of the label.
range​
class range extends Widget {
setValue: (value: number, opt?: { silent: boolean }) => void;
}
Insert a range-type input field into the Toolbar. See the Toolbar Widget range section for a demo.
Available options​
- [optional]
min
andmax
are numbers specifying the minimum and maximum values of the range, - [optional]
step
is a number specifying the increment value of the range, - [optional]
unit
is a string specifying the unit of the range (e.g.px
, to transform user-selected15
to15px
), - [optional]
value
is a number specifying the initial value of the range.