ContextToolbar

ContextToolbar is a UI widget for displaying context toolbars (usually a set of buttons) below a certain target element (HTML or SVG).

Learn more about the ContextToolbar plugin.

constructor

constructor(opt?: ContextToolbar.Options);

The ContextToolbar constructor accepts several parameters:

tools

[optional] An array of tools. Each tool is an object that can have the following properties:

action

The name of the action. This action is then triggered on the context toolbar object so that you can react to it later.

content

The content of the button. It can be a text or an arbitrary HTML.

icon

Optionally, instead of passing content, you can just pass a path to an image.

attrs

An object with attributes that will be applied on the generated button. Useful for adding your own custom attributes such as { 'data-tooltip': 'My Tooltip' }.

target

[optional] The target element (either HTML or SVG), or an object representing a point with properties x and y representing client coordinates.

padding

[optional] The gap between the anchor of the target element and the context toolbar. The default is 20.

position

[optional] The name of the position on the target element to which the toolbar is attached. The default is 'bottom'.

anchor

[optional] The name of the position on the toolbar, where it is attached to the target. The default is 'top'.

autoClose

[optional] Determines if the context toolbar should be closed if the user clicked outside the area of the context toolbar. The default is true.

vertical

[optional] When set to true the toolbar arranges tools from top to bottom instead of left to right. The default is false.

scale

[optional] Optional parameter that sets the scale of the context toolbar.

Methods

render()

contextToolbar.render(): this;

Render the context toolbar onto the screen.

remove()

contextToolbar.remove(): this;

Remove the context toolbar. Usually, you don't have to call this method as the context toolbar is closed automatically if the user clicked outside the area of the context toolbar (unless you set the autoClose option to false).

on()

contextToolbar.on(eventName: string, callback: EventHandler, context?: any): this;

Register a handler function that will be called whenever eventName is triggered. The optional context is an object that will be the context of the handler function (the this).

Static Methods

close()

ui.ContextToolbar.close(): void;

This is a static method that closes any context toolbar that is currently open.

update()

ui.ContextToolbar.update(): void;

This is a static method that updates the position of the opened context toolbar (if any). Call this method if your target element changes its position while you still want to keep the context toolbar opened.

Events

The ui.ContextToolbar object triggers events that correspond to the actions that you defined in the tools array. Events can be handled by using the on() method.

action:[action]

Triggered when the user clicks on one of the buttons in the context toolbar.

close

Triggered when the context toolbar gets closed.

Types

Options

interface Options extends mvc.ViewOptions<undefined> {
    padding?: number;
    autoClose?: boolean;
    vertical?: boolean;
    type?: string;
    tools?: { [key: string]: any };
    root?: HTMLElement;
    target?: mvc.$Element | dia.Point;
    anchor?: dia.PositionName;
    position?: dia.PositionName;
    scale?: number;
}