Class EditorToolbar

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.

const toolbar = new EditorToolbar(container, editor);
toolbar.addItem('Copy', null, 'copy');

const combo = toolbar.addActionCombo('More actions...');
toolbar.addActionOption(combo, 'Paste', 'paste');

Codec

This class uses the DefaultToolbarCodec to read configuration data into an existing instance. See DefaultToolbarCodec for a description of the configuration format.

Index

Constructors

constructor

new EditorToolbar(
container?: null | HTMLElement,
editor?: null | Editor,
): EditorToolbar
Parameters
- container: null | HTMLElement = null
- editor: null | Editor = null
Returns EditorToolbar
- Defined in editor/EditorToolbar.ts:60

Properties

connectOnDrop

connectOnDrop: boolean = false

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

Default

is false.

editor

editor: null | Editor

Reference to the enclosing Editor.

resetHandler

resetHandler: null | Function = null

Reference to the function used to reset the toolbar.

spacing

spacing: number = 4

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: null | MaxToolbar = null

Holds the internal MaxToolbar.

Methods

addActionCombo

addActionCombo(title: string): HTMLSelectElement
Helper method to invoke <MaxToolbar.addActionCombo> on using the given title and return the resulting DOM node.
Parameters
- title: string
  String that represents the title of the combo.
Returns HTMLSelectElement
- Defined in editor/EditorToolbar.ts:178

addActionOption

addActionOption(combo: HTMLSelectElement, title: string, action: string): void
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: HTMLSelectElement
  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
- Defined in editor/EditorToolbar.ts:189

addCombo

addCombo(): HTMLElement
Helper method to invoke MaxToolbar.addCombo on toolbar and return the resulting DOM node.

Returns HTMLElement
- Defined in editor/EditorToolbar.ts:168

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.
- Optionalpressed: string
  Optional URL of the icon for the pressed state.
Returns any
- Defined in editor/EditorToolbar.ts:146

addMode

addMode(
    title: string,
    icon: string,
    mode: string,
    pressed?: null | string,
    funct?: null | 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 Editor.setMode.
- pressed: null | string = null
  Optional URL of the icon that represents the pressed state.
- funct: null | Function = null
  Optional JavaScript function that takes the Editor as the first and only argument that is executed after the mode has been selected.
Returns any
- Defined in editor/EditorToolbar.ts:222

addOption

addOption(
    combo: HTMLSelectElement,
    title: string,
    value: null | string | ((evt: any) => void),
): HTMLElement
Helper method to invoke MaxToolbar.addOption on toolbar and return the resulting DOM node that represents the option.
Parameters
- combo: HTMLSelectElement
  DOM node that represents the combo box.
- title: string
  String that represents the title of the combo.
- value: null | string | ((evt: any) => void)
  Object that represents the value of the option.
Returns HTMLElement
- Defined in editor/EditorToolbar.ts:204

addPrototype

addPrototype(
    title: string,
    icon: string,
    ptype: Function | Cell,
    pressed: string,
    insert: (
        editor: Editor,
        cell: Cell,
        me: MouseEvent,
        cellUnderMousePointer?: null | Cell,
    ) => void,
    toggle?: boolean,
): HTMLImageElement | HTMLButtonElement
Creates an item for inserting a clone of the specified prototype cell into the '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 | Cell
  Function or object that represents the prototype cell. If ptype is a function then it is invoked with no arguments to create new instances.
- pressed: string
  Optional URL of the icon that represents the pressed state.
- insert: (
      editor: Editor,
      cell: Cell,
      me: MouseEvent,
      cellUnderMousePointer?: null | Cell,
  ) => void
  Optional JavaScript function that handles an insert of the new cell. This function takes the , new cell to be inserted, mouse event and optional under the mouse pointer as arguments.
- toggle: boolean = true
  Optional boolean that specifies if the item can be toggled. Default is true.
Returns HTMLImageElement | HTMLButtonElement
- Defined in editor/EditorToolbar.ts:256

addSeparator

addSeparator(icon?: string): void
Adds a vertical separator using the optional icon.
Parameters
- Optionalicon: string
  Optional URL of the icon that represents the vertical separator. Default is Client.imageBasePath + ‘/separator.gif’.
Returns void
- Defined in editor/EditorToolbar.ts:160

connect

connect(vertex: Cell, evt: MouseEvent, source?: null | Cell): void
Handles a drop by connecting the given vertex to the given source cell.
Parameters
- vertex: Cell
  Cell to be inserted.
- evt: MouseEvent
  Mouse event that represents the drop.
- source: null | Cell = null
  Optional Cell that represents the source terminal.
Returns void
- Defined in editor/EditorToolbar.ts:380

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 Editor.

Returns void
- Defined in editor/EditorToolbar.ts:468

drop

drop(vertex: Cell, evt: MouseEvent, target?: null | Cell): 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
- vertex: Cell
  Cell to be inserted.
- evt: MouseEvent
  Mouse event that represents the drop.
- target: null | Cell = null
  Optional Cell that represents the drop target.
Returns void
- Defined in editor/EditorToolbar.ts:325

init

init(container: HTMLElement): void
Constructs the toolbar for the given container and installs a listener that updates the Editor.insertFunction on editor if an item is selected in the toolbar. This assumes that editor is not null.
Parameters
- container: HTMLElement
Returns void
- Defined in editor/EditorToolbar.ts:100

insert

insert(vertex: Cell, evt: MouseEvent, target?: null | Cell): 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: Cell
  Cell to be inserted.
- evt: MouseEvent
  Mouse event that represents the drop.
- target: null | Cell = null
  Optional Cell that represents the parent.
Returns any
- Defined in editor/EditorToolbar.ts:352

installDropHandler

installDropHandler(img: HTMLElement, dropHandler: DropHandler): 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: DropHandler
  Function that handles a drop of the image.
Returns void
- Defined in editor/EditorToolbar.ts:445

Class EditorToolbar

Example

Codec

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns EditorToolbar

Properties

connectOnDrop

Default

editor

resetHandler

spacing

Default

toolbar

Methods

addActionCombo

Parameters

Returns HTMLSelectElement

addActionOption

Parameters

Returns void

addCombo

Returns HTMLElement

addItem

Parameters

Returns any

addMode

Parameters

Returns any

addOption

Parameters

Returns HTMLElement

addPrototype

Parameters

Returns HTMLImageElement | HTMLButtonElement

addSeparator

Parameters

Returns void

connect

Parameters

Returns void

destroy

Returns void

drop

Parameters

Returns void

init

Parameters

Returns void

insert

Parameters

Returns any

installDropHandler

Parameters

Returns void

Settings

On This Page