mxDefaultToolbarCodec

Custom codec for configuring mxDefaultToolbars. This class is created and registered dynamically at load time and used implicitly via mxCodec and the mxCodecRegistry. This codec only reads configuration data for existing toolbars handlers, it does not encode or create toolbars.

Summary

mxDefaultToolbarCodec	Custom codec for configuring mxDefaultToolbars.
Functions
encode	Returns null.
decode	Reads a sequence of the following child nodes and attributes:
Variables
allowEval	Static global switch that specifies if the use of eval is allowed for evaluating text content.

Functions

encode

codec.encode = function( enc,
obj )

Returns null.

decode

codec.decode = function( dec,
node,
into )

Reads a sequence of the following child nodes and attributes:

Child Nodes

add	Adds a new item to the toolbar. See below for attributes.
separator	Adds a vertical separator. No attributes.
hr	Adds a horizontal separator. No attributes.
br	Adds a linefeed. No attributes.

Attributes

as	Resource key for the label.
action	Name of the action to execute in enclosing editor.
mode	Modename (see below).
template	Template name for cell insertion.
style	Optional style to override the template style.
icon	Icon (relative/absolute URL).
pressedIcon	Optional icon for pressed state (relative/absolute URL).
id	Optional ID to be used for the created DOM element.
toggle	Optional 0 or 1 to disable toggling of the element. Default is 1 (true).

The action, mode and template attributes are mutually exclusive. The style can only be used with the template attribute. The add node may contain another sequence of add nodes with as and action attributes to create a combo box in the toolbar. If the icon is specified then a list of the child node is expected to have its template attribute set and the action is ignored instead.

Nodes with a specified template may define a function to be used for inserting the cloned template into the graph. Here is an example of such a node:

<add as="Swimlane" template="swimlane" icon="images/swimlane.gif"><![CDATA[
  function (editor, cell, evt, targetCell)
  {
    let pt = mxUtils.convertPoint(
      editor.graph.container, mxEvent.getClientX(evt),
        mxEvent.getClientY(evt));
    return editor.addVertex(targetCell, cell, pt.x, pt.y);
  }
]]></add>

In the above function, editor is the enclosing mxEditor instance, cell is the clone of the template, evt is the mouse event that represents the drop and targetCell is the cell under the mousepointer where the drop occurred. The targetCell is retrieved using mxGraph.getCellAt.

Futhermore, nodes with the mode attribute may define a function to be executed upon selection of the respective toolbar icon. In the example below, the default edge style is set when this specific connect-mode is activated:

<add as="connect" mode="connect"><![CDATA[
  function (editor)
  {
    if (editor.defaultEdge != null)
    {
      editor.defaultEdge.style = 'straightEdge';
    }
  }
]]></add>

Both functions require mxDefaultToolbarCodec.allowEval to be set to true.

Modes

select	Left mouse button used for rubberband- & cell-selection.
connect	Allows connecting vertices by inserting new edges.
pan	Disables selection and switches to panning on the left button.

Example

To add items to the toolbar

<mxDefaultToolbar as="toolbar">
  <add as="save" action="save" icon="images/save.gif"/>
  <br/><hr/>
  <add as="select" mode="select" icon="images/select.gif"/>
  <add as="connect" mode="connect" icon="images/connect.gif"/>
</mxDefaultToolbar>

Variables

allowEval

mxDefaultToolbarCodec.allowEval

Static global switch that specifies if the use of eval is allowed for evaluating text content. Default is true. Set this to false if stylesheets may contain user input