We are trying to implement a context menu on the node. We would like to show the context menu on left click of the hamburger image on the node. How can we achieve that?
If you have set its contextMenu, implement its click event handler to call CommandHandler | GoJS API.
I followed the steps mentioned above. My context menu is now working as expected on a left click. But it is still working on a right click as well. Is there any means by which i can disable it opening on right click? I want only the left click to work.
Here is the code snippet:
contextMenu: // define a context menu for each node
('ContextMenu', // that has one button
(‘ContextMenuButton’,
{ ‘ButtonBorder.fill’: ‘white’, ‘_buttonFillOver’: ‘lightgray’ },
(go.TextBlock, 'Delete',
{ margin: 12 }
),
{ click: (e, obj) => { this.deleteComponent(obj); } }),
(‘ContextMenuButton’,
{ ‘ButtonBorder.fill’: ‘white’, ‘_buttonFillOver’: ‘lightgray’ },
$(go.TextBlock, ‘Duplicate’,
{ margin: 12 }
),
{ click: (e, pt, compInstance) => this.duplicateComponent(compInstance, pt, e) })
),
click: (e, node) => e.diagram.commandHandler.showContextMenu(node)
You didn’t say that was also desired. Do you still want context clicks to work on other objects?
If not, just disable the ContextMenuTool. In your Diagram initialization:
$(go.Diagram, . . .,
{ . . .,
"contextMenuTool.isEnabled": false
})
We still need context menu to work on our links. We just want this menu on the component to work on left click.
$(go.Node, . . .,
{
contextMenu:
$("ContextMenu",
. . .,
$("ContextMenuButton",
$(go.TextBlock, "some command"),
{
click: function(e, button) {
alert("some context menu command for " + button.part.adornedPart.key);
}
}
)
),
click: function(e, node) {
e.diagram.commandHandler.showContextMenu(node);
},
contextClick: function(e, node) {
e.handled = true;
}
},
. . .
After enabling the context menu on the left click, when we click on the hamburger shape icon to view the context menu it also triggers the click event on the node. Is there a way to isolate the clicks?