This demonstrates the implementation of a custom HTML context menu using HTMLInfo. This sample is also a re-implementation of the built-in ContextMenuTool.defaultTouchContextMenu.
The implementation is contained in the files LightBoxContextMenu.js and
LightBoxContextMenu.css. The JavaScript file exposes window.myHTMLLightBox, which is
used in this file as the value of myDiagram.contextMenu.
For a more regular HTML context menu implementation, see the Custom Context Menu sample.
Right-click or tap-hold (mobile) on a Node to bring up a context menu. If you have a selection copied in the clipboard, you can bring up a context menu anywhere to paste.
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.
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.
More information can be found in the GoJS Intro.
GoJS Diagrams can be used alongside other HTML elements in a webapp. For custom Text Editors, Context Menus, and ToolTips, which are invoked and hidden via GoJS tool operations, it is best to use the HTMLInfo class.
More information can be found in the GoJS Intro.