Skip to main content
Version: 4.1

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​

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​

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 is window.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 and max 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 and max 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-selected 15 to 15px),
  • [optional] value is a number specifying the initial value of the range.

Events​

redo​

class redo extends button { }

Insert a redo button into the Toolbar, which can communicate with a CommandManager instance to redo next change in the diagram. It is implemented as a button-type input field. See the Toolbar Widget redo section for a demo.

Available options​

  • [optional] autoToggle is a boolean specifying whether the button should get disabled when there are no more actions in the history to redo. It is false by default. The Widget type's autoToggle property allows you to override the global Toolbar setting (ui.Toolbar.options.autoToggle) for a particular Toolbar Widget.

selectBox​

class selectBox extends Widget {
    selectBox: SelectBox
}

Insert an instance of SelectBox into the Toolbar. See the Toolbar Widget selectBox section for a demo.

See the SelectBox documentation for details about available options.

selectButtonGroup​

class selectButtonGroup extends Widget {
    selectButtonGroup: SelectButtonGroup
}

Insert an instance of SelectButtonGroup into the Toolbar. See the Toolbar Widget selectButtonGroup section for a demo.

See the SelectButtonGroup documentation for details about available options.

separator​

class separator extends Widget { }

Insert a vertical line into the Toolbar. See the Toolbar Widget separator section for a demo.

Available options​

  • [optional] width is a number specifying the width of the space around the separator.

textarea​

class textarea extends Widget { }

Insert a textarea element into the Toolbar. See the Toolbar Widget textarea section for a demo.

Available options​

  • [optional] label is a string specifying the label placed next to the textarea,
  • [optional] value is a string specifying the initial value of the textarea.

Events​

toggle​

class toggle extends Widget { }

Insert a toggle into the Toolbar. It is implemented as a checkbox-type input field. See the Toolbar Widget toggle section for a demo.

Available options​

  • [optional] label is a string specifying the label placed next to the toggle,
  • [optional] value is a boolean specifying the initial value of the toggle.

Events​

undo​

class undo extends button { }

Insert an undo button into the Toolbar, which can communicate with a CommandManager instance to undo previous change in the diagram. It is implemented as a button-type input field. See the Toolbar Widget undo section for a demo.

Available options​

  • [optional] autoToggle is a boolean specifying whether the button should get disabled when there are no more actions in the history to undo. It is false by default. The Widget type's autoToggle property allows you to override the global Toolbar setting (ui.Toolbar.options.autoToggle) for a particular Toolbar Widget.

zoomIn​

class zoomIn extends button { }

Insert a zoom-in button into the Toolbar, which can communicate with a PaperScroller instance to trigger zoom. It is implemented as a button-type input field. See the Toolbar Widget zoomIn section for a demo.

Available options​

  • [optional] autoToggle is a boolean specifying whether the button should get disabled when maximum zoom level is reached. It is false by default. The Widget type's autoToggle property allows you to override the global Toolbar setting (ui.Toolbar.options.autoToggle) for a particular Toolbar Widget,
  • [optional] min and max are numbers specifying the minimum and maximum values of the zoom level range. They are 0.2 and 5 by default, respectively,
  • [optional] step is a number specifying the increment value of the zoom level range. It is 0.2 by default.

zoomOut​

class zoomOut extends button { }

Insert a zoom-out button into the Toolbar, which can communicate with a PaperScroller instance to trigger zoom. It is implemented as a button-type input field. See the Toolbar Widget zoomOut section for a demo.

Available options​

  • [optional] autoToggle is a boolean specifying whether the button should get disabled when minimum zoom level is reached. It is false by default. The Widget type's autoToggle property allows you to override the global Toolbar setting (ui.Toolbar.options.autoToggle) for a particular Toolbar Widget,
  • [optional] min and max are numbers specifying the minimum and maximum values of the zoom level range. They are 0.2 and 5 by default, respectively,
  • [optional] step is a number specifying the increment value of the zoom level range. It is 0.2 by default.

zoomSlider​

class zoomSlider extends range { }

Insert a zoom slider into the Toolbar, which can communicate with a PaperScroller instance to trigger zoom. It is implemented as a range-type input field. See the Toolbar Widget zoomSlider section for a demo.

Available options​

  • [optional] min and max are numbers specifying the minimum and maximum values of the zoom slider range. They are 20 and 500 by default, respectively,
  • [optional] step is a number specifying the increment value of the zoom slider range. It is 20 by default,
  • [optional] unit is a string specifying the unit of the zoom slider range (e.g. %, to transform user-selected 20 to 20%). It is % by default,
  • [optional] value is a number specifying the initial value of the zoom slider range. It is 100 by default.

zoomToFit​

class zoomToFit extends button { }

Insert a zoom-to-fit button into the Toolbar, which can communicate with a PaperScroller instance to trigger zoom. It is implemented as a button-type input field. See the Toolbar Widget zoomToFit section for a demo.

Available options​

  • [optional] min and max are numbers specifying the minimum and maximum values of the zoom level range. They are 0.2 and 5 by default, respectively,
  • [optional] padding is a number specifying the minimum amount of padding around diagram content in the zoomed-to-fit viewport (in px). It is 20 by default,
  • [optional] step is a number specifying the increment value of the zoom level range. It is 0.2 by default,
  • [optional] useModelGeometry is a boolean specifying whether the dimensions of diagram content should be calculated from the dimensions of Cell models (instead of CellViews). It is false by default. See dia.Paper.getContentArea() for more information.

Types​

The plugin uses the following type:

WidgetMap​

interface WidgetMap {
    button: button,
    checkbox: checkbox,
    'color-picker': colorPicker,
    fullscreen: fullscreen,
    'input-number': inputNumber,
    'input-text': inputText,
    label: label,
    range: range,
    redo: redo,
    'select-box': selectBox,
    'select-button-group': selectButtonGroup,
    separator: separator,
    textarea: textarea,
    toggle: toggle,
    undo: undo,
    'zoom-in': zoomIn,
    'zoom-out': zoomOut,
    'zoom-slider': zoomSlider,
    'zoom-to-fit': zoomToFit,
}

Stay in the know

Be where thousands of diagramming enthusiasts meet

Star us on GitHub