How do I customize the context popup menu in mxGraph?

asked 23 Mar '11, 06:52

David's gravatar image

David
4.9k21831
accept rate: 47%

edited 23 Mar '11, 11:29


It is possible to customize the context popup menu in mxGraph using XML configuration. The mxEditor class contains various application helper functionality, including a number of UI XML configuration options.

\n

In the uiconfig.html example, under javascript/examples in the evaluation or purchase package you'll find:

\n
var editor = new mxEditor();\nvar config = mxUtils.load('uiconfig.xml').getDocumentElement();\neditor.configure(config);\n
\n

In the same directory you'll find uiconfig.xml. This is the XML description of the various UI members that can be customized that is loaded into the mxEditor in the above code. The three parts we're concerned with are:

\n
<ui>\n    <add as="graph" element="graph"/>\n</ui>\n
\n

This creates your graph instance on the editor instance.

\n
<mxDefaultPopupMenu as="popupHandler">  \n    <add as="Show XML (Custom)" action="myFirstAction" icon="images/icons48/gear.png"/>\n    <separator/>\n    <add as="Delete (Built-in)" action="delete" icon="images/icons48/keys.png" if="cell"/>\n</mxDefaultPopupMenu>\n
\n

This creates a popup menu and adds two items. The complete format is described below.

\n
<Array as="actions">\n    <add as="myFirstAction"><![CDATA[\n        function (editor, cell)\n        {\n            var encoder = new mxCodec();\n            var node = encoder.encode(editor.graph.getModel());\n            mxUtils.popup(mxUtils.getPrettyXml(node), true);\n        }\n    ]]></add>\n</Array>\n
\n

Actions can be added to the XML configuration in JavaScript by embedding the JS within a CDATA section. In this case the action is named "myFirstAction" and encodes the model as XML and displays it.

\n

XML format for popup menu

\n

add - Adds a new menu item. See below for attributes.

\n

separator - Adds a separator. No attributes.

\n

condition - Adds a custom condition. Name attribute.

\n

The add-node may have a child XML node that defines a function to be invoked before the action is executed (or instead of an action to be executed).

\n

Attributes

\n

as - Resource key for the label, this needs entry in a property file.

\n

action - Name of the action to execute in enclosing editor.

\n

icon - Optional icon (relative/absolute URL).

\n

if - Optional name of condition that must be true(see below).

\n

name - Name of custom condition. Only for condition nodes.

\n

Conditions

\n

nocell - No cell under the mouse.

\n

ncells - More than one cell selected.

\n

notRoot - Drilling position is other than home.

\n

cell - Cell under the mouse.

\n

notEmpty - Exactly one cell with children under mouse.

\n

expandable - Exactly one expandable cell under mouse.

\n

collapsable - Exactly one collapsable cell under mouse.

\n

validRoot - Exactly one cell which is a possible root under mouse.

\n

swimlane - Exactly one cell which is a swimlane under mouse.

\n

Example:

\n

To add a new item for a given action to the popupmenu:

\n
<mxDefaultPopupMenu as="popupHandler">\n  <add as="delete" action="delete" icon="images/delete.gif" if="cell"/>\n</mxDefaultPopupMenu>\n
\n

To add a new item for a custom function:

\n
<mxDefaultPopupMenu as="popupHandler">\n <add as="action1"><![CDATA[\n function (editor, cell)\n {\n  editor.execute('action1', cell, 'myArg');\n }\n  ]]></add>\n</mxDefaultPopupMenu>\n
\n

The above example invokes action1 with an additional third argument via the editor instance. The third argument is passed to the function that defines action1. If the add-node has no action-attribute, then only the function defined in the text content is executed, otherwise first the function and then the action defined in the action-attribute is executed.

\n

Custom Conditions

\n

To add a new condition for popupmenu items:

\n
<condition name="condition1"><![CDATA[\n  function (editor, cell, evt)\n  {\n    return cell != null;\n  }\n]]></condition>\n
\n

The new condition can then be used in any item as follows:

\n
<add as="action1" action="action1" icon="action1.gif" if="condition1"/>\n
\n

The order in which the items and conditions appear is not significant as all connditions are evaluated before any items are created.

link

answered 23 Mar '11, 11:28

David's gravatar image

David
4.9k21831
accept rate: 47%

Is there a way to do it from javascript without having to use the XML?

(01 Jan '12, 14:06) jarito

Just call the various methods of mx(Default)PopupMenu:

\n
addItem = function(title, image, funct, parent)\ncreateSubmenu = function(parent)\naddSeparator = function(parent)\n
\n

etc, see the API specs for mxPopupMenu

(02 Jan '12, 02:52) David
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×228
×2
×1
×1
×1

Asked: 23 Mar '11, 06:52

Seen: 6,993 times

Last updated: 02 Jan '12, 02:58