LightBox Style HTML Context Menu
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
the CSS is at the top of this HTML page. 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.
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.