Skip to main content
  1. Index

Context menus

GoJS provides a mechanism for you to define context menus for any object or for the diagram background.

Note: GoJS context menus cannot render outside of Diagrams, because they are objects inside the Diagram and therefore drawn only on the Diagram. If you need a context menu that may be drawn partially or fully outside the Diagram, use an HTML context menu.

A GoJS context menu is an Adornment that is shown when the user context-clicks (right mouse click or long touch hold) an object that has its GraphObject.contextMenu set. The context menu is bound to the same data as the part itself.

See samples that make use of context menus in the samples index.

It is typical to implement a context menu as a "ContextMenu" Panel containing "ContextMenuButton"s, as you can see in the code below in the assignment of the Node's GraphObject.contextMenu and Diagram.contextMenu properties. Each "ContextMenu" is just a "Vertical" Panel Adornment that is shadowed. Each "ContextMenuButton" is a Panel on which you can set the GraphObject.click event handler. In the event handler obj.part will be the whole context menu Adornment. obj.part.adornedPart will be the adorned Node or Link. The bound data is obj.part.data, which will be the same as obj.part.adornedPart.data.

You can see how the "ContextMenu" and "ContextMenuButton" builders are defined at Buttons.js. There are examples of customizing buttons at the learn page on buttons. You may also wish to theme your own context menus, described on the theming learn page.

In this example each Node has its GraphObject.contextMenu property set to an Adornment that shows a single button that when clicked changes the color property of the bound model data. The diagram gets its own context menu by setting Diagram.contextMenu.

Try context clicking a node and invoking the "Change Color" command a few times. With the diagram context menu you will be able to "Undo" and/or "Redo", or you can use Ctrl + Z and/or Ctrl + Y.

Positioning

There are two ways to customize the positioning of the context menu relative to the adorned GraphObject. One way is to override ContextMenuTool.positionContextMenu. Another way is to have the context menu Adornment include a Placeholder. The Placeholder is positioned to have the same size and position as the adorned object. The context menu will not to have a background, and thus will not display a shadow by default when using a Placeholder.

HTML context menus

It is possible to define custom context menus using HTML instead of Adornments by using the HTMLInfo class. The Custom Context Menu sample and Lightbox Context Menu sample show two such custom context menus.

HTML context menus require more effort to implement than using the default GoJS "ContextMenu" and "ContextMenuButton". However you would have the full power of HTML/CSS/JavaScript to show whatever you want. This includes creating context menus that can exist or float outside of the Diagram.

There are two primary considerations when authoring HTML and CSS for context menus. The context menu should usually be a sibling Element of the Diagram and should never be nested inside a Diagram DIV:

js

And the ContextMenu may need a z-index set to ensure it is always on top. GoJS Diagrams have z-index of 2, and some tools a z-index of 100.

css

See the Custom Context Menu sample and Lightbox Context Menu sample for HTML examples. See the HTMLInteraction page for more discussion on HTML in GoJS.

Default context menu for touch-enabled devices

Touch devices are presumed to have no keyboard ability, which makes actions like copying and pasting more difficult. Because of this, GoJS provides a built-in default context menu on touch devices, implemented in HTML. The buttons on this menu are populated dynamically, depending on the target GraphObject (if any) and Diagram and their properties.

The default context menu can be disabled by setting ContextMenuTool.defaultTouchContextMenu to null. The Lightbox Context Menu sample contains a re-implementation of this menu if you wish to modify it.

If you define your own custom context menus, they will prevent the default context menu from appearing on touch devices. We recommend that your custom context menus include all common commands appropriate for your app.