Options
All
  • Public
  • Public/Protected
  • All
Menu

Class mxDefaultToolbar

Toolbar for the editor. This modifies the state of the graph or inserts new cells upon mouse clicks.

example:

Create a toolbar with a button to copy the selection into the clipboard, and a combo box with one action to paste the selection from the clipboard into the graph.

var toolbar = new mxDefaultToolbar(container, editor);
toolbar.addItem('Copy', null, 'copy');

var combo = toolbar.addActionCombo('More actions...');
toolbar.addActionOption(combo, 'Paste', 'paste');
codec:

This class uses the {@link mxDefaultToolbarCodec} to read configuration data into an existing instance. See {@link mxDefaultToolbarCodec} for a description of the configuration format.

Hierarchy

  • mxDefaultToolbar

Indexable

[key: string]: any

Toolbar for the editor. This modifies the state of the graph or inserts new cells upon mouse clicks.

Index

Constructors

Properties

Methods

Constructors

constructor

  • Constructs a new toolbar for the given container and editor. The container and editor may be null if a prototypical instance for a {@link mxDefaultKeyHandlerCodec} is created.

    Parameters

    • container: HTMLElement

      DOM node that contains the toolbar.

    • editor: mxEditor

      Reference to the enclosing mxEditor.

    Returns mxDefaultToolbar

Properties

connectOnDrop

connectOnDrop: boolean

Specifies if elements should be connected if new cells are dropped onto connectable elements.

default

is false.

editor

editor: mxEditor

Reference to the enclosing mxEditor.

resetHandler

resetHandler: Function

Reference to the function used to reset the toolbar.

spacing

spacing: number

Defines the spacing between existing and new vertices in gridSize units when a new vertex is dropped on an existing cell. Default is 4 (40 pixels).

default

is 4

toolbar

toolbar: mxToolbar

Holds the internal mxToolbar.

Methods

addActionOption

  • addActionOption(title: string): HTMLElement
  • addActionOption(combo: HTMLElement, title: string, action: string): void

  • Helper method to invoke mxToolbar.addActionCombo on toolbar using the given title and return the resulting DOM node.

    Parameters

    • title: string

      String that represents the title of the combo.

    Returns HTMLElement

  • Binds the given action to a option with the specified label in the given combo. Combo is an object returned from an earlier call to addCombo or addActionCombo.

    Parameters

    • combo: HTMLElement

      DOM node that represents the combo box.

    • title: string

      String that represents the title of the combo.

    • action: string

      Name of the action to execute in editor.

    Returns void

addCombo

  • addCombo(): HTMLElement

addItem

  • addItem(title: string, icon: string, action: string, pressed?: string): any

  • Adds a new item that executes the given action in editor. The title, icon and pressedIcon are used to display the toolbar item.

    Parameters

    • title: string

      String that represents the title (tooltip) for the item.

    • icon: string

      URL of the icon to be used for displaying the item.

    • action: string

      Name of the action to execute when the item is clicked.

    • Optional pressed: string

      Optional URL of the icon for the pressed state.

    Returns any

addMode

  • addMode(title: string, icon: string, mode: string, pressed?: string, funct?: Function): any

  • Creates an item for selecting the given mode in the editor's graph. Supported modenames are select, connect and pan.

    Parameters

    • title: string

      String that represents the title of the item.

    • icon: string

      URL of the icon that represents the item.

    • mode: string

      String that represents the mode name to be used in mxEditor.setMode.

    • Optional pressed: string

      Optional URL of the icon that represents the pressed state.

    • Optional funct: Function

      Optional JavaScript function that takes the mxEditor as the first and only argument that is executed after the mode has been selected.

    Returns any

addOption

  • addOption(combo: HTMLElement, title: string, value: object): HTMLElement

  • Helper method to invoke mxToolbar.addOption on toolbar and return the resulting DOM node that represents the option.

    Parameters

    • combo: HTMLElement

      DOM node that represents the combo box.

    • title: string

      String that represents the title of the combo.

    • value: object

      Object that represents the value of the option.

    Returns HTMLElement

addPrototype

  • addPrototype(title: string, icon: string, ptype: Function | mxCell, pressed?: string, insert?: Function, toggle?: boolean): null | mxCell

  • Creates an item for inserting a clone of the specified prototype cell into the editor's graph. The ptype may either be a cell or a function that returns a cell.

    Parameters

    • title: string

      String that represents the title of the item.

    • icon: string

      URL of the icon that represents the item.

    • ptype: Function | mxCell

      Function or object that represents the prototype cell. If ptype is a function then it is invoked with no arguments to create new instances.

    • Optional pressed: string

      Optional URL of the icon that represents the pressed state.

    • Optional insert: Function

      Optional JavaScript function that handles an insert of the new cell. This function takes the mxEditor, new cell to be inserted, mouse event and optional mxCell under the mouse pointer as arguments.

    • Optional toggle: boolean

      Optional boolean that specifies if the item can be toggled. Default is true.

    Returns null | mxCell

addSeparator

  • addSeparator(icon?: string): void

  • Adds a vertical separator using the optional icon.

    Parameters

    • Optional icon: string

      Optional URL of the icon that represents the vertical separator. Default is {@link mxClient.imageBasePath} + ‘/separator.gif’.

    Returns void

connect

  • connect(vertex: mxCell, evt: MouseEvent, source?: mxCell): void

  • Handles a drop by connecting the given vertex to the given source cell.

    Parameters

    • vertex: mxCell

      mxCell to be inserted.

    • evt: MouseEvent

      Mouse event that represents the drop.

    • Optional source: mxCell

      Optional mxCell that represents the source terminal.

    Returns void

destroy

  • destroy(): void

  • Destroys the toolbar associated with this object and removes all installed listeners. This does normally not need to be called, the toolbar is destroyed automatically when the window unloads (in IE) by mxEditor.

    Returns void

drop

  • drop(vertex: mxCell, evt: MouseEvent, target?: mxCell): void

  • Handles a drop from a toolbar item to the graph. The given vertex represents the new cell to be inserted. This invokes insert or connect depending on the given target cell.

    Parameters:

    Parameters

    • vertex: mxCell

      mxCell to be inserted.

    • evt: MouseEvent

      Mouse event that represents the drop.

    • Optional target: mxCell

      Optional mxCell that represents the drop target.

    Returns void

init

  • init(container: HTMLElement): void

insert

  • insert(vertex: mxCell, evt: MouseEvent, target?: mxCell): any

  • Handles a drop by inserting the given vertex into the given parent cell or the default parent if no parent is specified.

    Parameters

    • vertex: mxCell

      mxCell to be inserted.

    • evt: MouseEvent

      Mouse event that represents the drop.

    • Optional target: mxCell

      Optional mxCell that represents the parent.

    Returns any

installDropHandler

  • installDropHandler(img: HTMLElement, dropHandler: Function): void

  • Makes the given img draggable using the given function for handling a drop event.

    Parameters

    • img: HTMLElement

      DOM node that represents the image.

    • dropHandler: Function

      Function that handles a drop of the image.

    Returns void

Generated using TypeDoc