🎉 JointJS has new documentation! ðŸ¥³

JointJS+ Toolbar

ui.Toolbar

With the Toolbar plugin you can easily enrich your application with various tools. Either use built-in controls to manage other JointJS+ plugins (e.g zoom for PaperScroller, undo/redo for CommandManager) or custom tools of your desire - just choose a type of UI primitive ('slider', 'input', 'button' etc.) and attach an action. Toolbar is a container for this tools - called 'widgets'.

Create a Toolbar


var toolbar = new joint.ui.Toolbar({
    tools: [
        { type: 'checkbox' },
        { type: 'range', name: 'slider', min: 0, max: 10, step: 1 },
        { type: 'separator' },
        { type: 'toggle', name: 'toggle', label: ''},
        'separator',  // also possible, use defaults
        { type: 'inputText' },
        { type: 'button', name: 'ok', text: 'Ok' },
        { type: 'button', name: 'cancel', text: 'Cancel' },
        { type: 'separator' }
    ]
});

$('body').append(toolbar.render().el);

Toolbar configuration

tools Array<object> | Array<string> An array of tools defined as a plain JavasScript object. For more information visit Toolbar configuration section.
references object `key => value` storage. Some widgets require additional references for their functionality. Whenever you use such a widget (e.g. `undo/redo` requires `joint.dia.CommandManager`, `zoom` requires `joint.ui.PaperScroller`) you need to pass the required reference into the toolbar as well.
autoToggle boolean When set to true, the widgets switch their state (enabled/disabled) automatically based on the their references.
groups object

Split the widgets defined in `tools` option into groups. Groups could be aligned and ordered in the context of the Toolbar.

groups.align string Can be `left` or `right`.
groups.index number Set the order of the group.
widgetNamespace object A namespace with all available widgets. It points to joint.ui.widgets by default.

Tool configuration

type string Set the type of the widget. Available widgets are listed in the Toolbar widgets section.
name string `name` is used to differentiate multiple widgets with the same `type` and has to be unique in the context of the toolbar. Note that the toolbar uses the `name` as a prefix for events triggered on widgets. More information can be found in the Events section.
group string Name of the group where a widget belongs to.
attrs object JointJS style attribute definition. Additional DOM element attributes can be defined here.
theme string Allow to override the global `theme`.

Toolbar API

getWidgetByName(name) <joint.ui.Widget> Return an instance of `joint.ui.Widget` with the matching `name`.
getWidgets() Array<joint.ui.Widget> Return an array of `joint.ui.Widget` instances included in the toolbar.

Toolbar widgets

checkbox
nametypedefault
valueboolean 
labelstring 

Events: change, pointerdown, pointerclick, pointerup, click

toggle
valueboolean
labelstring

Events: change, pointerdown, pointerclick, pointerup, click

separator Vertical line by default.
widthnumber
label
textstring
range
valueboolean
unitstring
minnumber
maxnumber
stepnumber

Events: change

selectBox Configuration is described in ui.SelectBox section.
button
textstring

Events: pointerclick, pointerdown, pointerup, click

inputText
labelstring
valuestring

Events: pointerclick, pointerdown, pointerup, pointerfocusout, pointerfocusin

inputNumber
labelstring
valuenumber
minnumber
maxnumber

Events: pointerclick, pointerdown, pointerup, pointerfocusout, pointerfocusin

textarea
labelstring
valuestring

Events: pointerclick, pointerdown, pointerup, pointerfocusout, pointerfocusin

selectButtonGroup Configuration is described in the ui.SelectButtonGroup section.
zoomIn | zoomOut
minnumber0.2
maxnumber5
stepnumber0.2
autoTogglebooleanfalse

 

Required references:

paperScroller ui.PaperScroller instance

zoomToFit
minnumber0.2
maxnumber5
stepnumber0.2
paddingnumber20
useModelGeometrybooleanfalse/td>

 

Required references:

paperScroller ui.PaperScroller instance

zoomSlider
minnumber20
maxnumber500
stepnumber20
valuenumber100
unitnumber'%'

 

Required references:

paperScroller ui.PaperScroller instance

undo | redo
autoTogglebooleanfalse

 

Required references:

commandManager dia.CommandManager instance

fullscreen

Presents an element (target) in full-screen mode. The fullscreen feature is available only if the target is not displayed within an iframe (the button is hidden otherwise).

targetHTMLElement|string selectorwindow.top.document.body
colorPicker
valuestring#FFFFFF

Events: change, input

Every widget has the following API:

enable() Enable the widget. Example:
toolbar.getWidgetByName('undo').enable();
disable() Disable the widget (make the widget not to respond to user actions)
isDisabled() Return true if the widget is disabled. Return false otherwise.

Events

The toolbar behaves as a proxy for widgets events. An event triggered on a single widget could be also caught on the Toolbar instance. Event names are prefixed with the widget's name followed by a colon : to recognize from which tool (widget) is the event coming from.

var toolbar = new joint.ui.Toolbar({
    tools: [
        { type: 'toggle', name: 'toggle' },
        { type: 'button', name: 'ok', text: 'Ok' },
        { type: 'button', name: 'cancel', text: 'Cancel' },
    ]
});

toolbar.on('toggle:change', function(value, event) {
    console.log(value, event);
});

toolbar.on('ok:pointerclick', function(event) {
    console.log('ok clicked');
});

toolbar.on('cancel:pointerclick', function(event) {
    console.log('cancel clicked');
});

$('body').append(toolbar.render().el);

Demo


var paperScroller = new joint.ui.PaperScroller({
    paper: paper,
    autoResizePaper: true
});

var commandManager = new joint.dia.CommandManager({
    graph: graph
});

var toolbar = new joint.ui.Toolbar({
    // initialize tools with default settings
    tools: ['zoomIn', 'zoomOut', 'zoomToFit', 'zoomSlider', 'undo', 'redo'],
    references: {
        paperScroller: paperScroller,
        commandManager: commandManager
    }
});