@maxgraph/core
    Preparing search index...

    Class EditorToolbar

    Toolbar for the editor.

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

    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');

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

    Index

    Constructors

    Properties

    connectOnDrop: boolean = false

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

    is false.

    editor: null | Editor

    Reference to the enclosing Editor.

    resetHandler: null | Function = null

    Reference to the function used to reset the toolbar.

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

    is 4

    toolbar: null | MaxToolbar = null

    Holds the internal MaxToolbar.

    Methods

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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