We have been using a custom context menu for each node in the diagram using HTMLInfo.
Each node will have an ellipsis icon, and when user clicks (like a button click, i.e., left click) it opens a context menu on the node.
Currently we are relying on diagram’s lastInput property to determine the position to pop context menu.
But this won’t work for all nodes, as we have nodes with different size, even expandable/ collapsible nodes.
So what is the better way to popup context menu at right position. I am looking for a way to popup just below the ellipsis button, irrespective all above facts.
Below is a screen shot of how it currently looks on various nodes:
As we can see, currently it pops at different positions on each node. Below is the code that we are using to place the context menu:
// Grab the last input event on the diagram and place the context menu appropriately.
... cxElement is the context menu DOM.
var mousePt = diagram.lastInput.viewPoint;
cxElement.style.left = mousePt.x + 5 + "px";
cxElement.style.top = mousePt.y + "px";`
I am looking for a way to position context menu based on ellipsis icon’s position on each node. That way it would always pop at right position.
Is there a way to get that position and manipulate context menu element’s position ?
Also other issue that I noticed with custom context menu on left click is that, though we suppressed right click using contextClick option on each Node/Group, it pops up when user clicks right click twice. Below is the handler, that I was using to suppress the right click:
{
...
contextClick : function(e) { //Disable contextMenu on right click
e.handled = true;
}
...
}
Call getDocumentPoint on the ellipsis button to get the button’s point in document coordinates.
Call Diagram.transformDocToView to convert that Point to viewport coordinates. GraphObject | GoJS API Diagram | GoJS API
I cannot reproduce the problem. Could you please provide enough information for me to be able to reproduce the situation that you have?
Your “contextClick” event handler doesn’t do anything. If you have set GraphObject.contextMenu on the node or something like that, that is enough to get the ContextMenuTool to be able to show that context menu. Or maybe you have set that event handler on some other object?
It is odd that you are trying to prevent a context click from showing a context menu that you have declared on the node, if that is what you are trying to do. I’m just guessing.
Oh, maybe you are getting a double right/context click? Does it only happen if the user context clicks twice quickly at the same point?
In that case, you could override ContextMenuTool.canStart to return false:
Thank you , this has resolved the issue.
To answer your questions, we need to pop context menu on click of a button, not on right/ context click.
With the contextClick option that I shared previously, we could stop it on a single right/ context click.
But it was being opened when user does right click twice. With the above contextMenuTool.canStart, we were able to fix the issue.
