Custom HTML Context Menu for Nodes and Diagram
This demonstrates the implementation of a custom HTML context menu.
For a light-box style HTML context menu implementation, see the LightBox Context Menu sample.
Right-click or tap-hold 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.
GoJS Features in this sample
Context Menus
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 learn pages.
HTML Interaction
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 learn pages.