Not sure if i understood clearly . since am not getting that point for button.getDocumentBounds().
Asa workaround is there any way to get whether its left click or right click inside diagram.toolManager.contextMenuTool.positionContextMenu function ? So based on that i can give the x and y coordinates
OR
is there any other way to capture the click is coming from 3 dots menu ? like any parameter to identify
Any help will be highly helpful
Could you please show us all of the relevant code that you have? Please elide unrelated code.
@walter This is my function i used
diagram.toolManager.contextMenuTool.positionContextMenu = function (contextmenu, obj) {
if (contextmenu.placeholder !== null) return;
debugger; // eslint-disable-line no-debugger
const diagram = this.diagram;
const p = diagram.lastInput.documentPoint.copy();
const coordinates = obj?.part?.location;
let xCord = coordinates.x;
let yCord = coordinates.y;
p.x = xCord;
p.y = +yCord + +50;
contextmenu.position = p;
};
And this is my 3 dots code
$(
go.Picture,
{
width: 16,
height: 16,
column: 0,
source: `assets/img/threedots.svg`,
margin: new go.Margin(-20, 1, 2, 220),
imageAlignment: go.Spot.Right,
name: 'ThreeDotsExpanded',
},
{
click: (e, node) => e.diagram.commandHandler.showContextMenu(node),
}
),
This is context menu code
contextMenu: $(
'ContextMenu',
{ width: 160 },
$(
'ContextMenuButton',
$(go.TextBlock, 'View Price', {
stroke: '#161616',
alignment: go.Spot.Left,
margin: new go.Margin(1, 1, 1, 1),
}),
{
click: (e, node) => viewPriceDetails(e, node),
}
),
),
Now what happens is if you check above mockup diagram i sent , always view prices is coming near to 3 dots places. irrespective of user right clicked in the bottom of the node, Imagine node length is more than expected and somehow he scrolls to bottom and if we right click , he cant see context menu , since its showing in top of node , near to 3 dots
SO as per deisgn , 2 ways to see context menu ,
→ one is right click anywhere in node and there itself they can see the context menu (may be user scrolls to bottom of page and he right click bottom of node, there he can see context menu , exactly where he right clicked )
→ Other option is clicking in 3 dots , where context menu always shows next to it or adjacent to it
So either we need to know if its right or left clicked. Or for 3 dots menu click , is there any way i can send one parameter like ang get the same parameter in this function diagram.toolManager.contextMenuTool.positionContextMenu
{
click: (e, node) => e.diagram.commandHandler.showContextMenu(node,'clickFrom3dots'),
}
Is there any reason why you did not adopt my suggestion, above, for how to distinguish whether the mouse was in the button area or not?
@walter in above code always button.getDocumentBounds().containsPoint(diagram.lastInput.documentPoint) always getting false, thats why checked for alternative to get right/left click identification. or sending params
Even when the user clicks that button?
@walter not sure on that , we had given click function to 3 dots like this
{
click: (e, node) => e.diagram.commandHandler.showContextMenu(node),
}
So this will lead to the function we already added and there we are not getting
button.getDocumentBounds().containsPoint(diagram.lastInput.documentPoint))
First, note that your click event handler is on your Picture, not on the “Button”, and certainly not on the Node, as the name of the parameter would imply.
Second, I had forgotten that the CommandHandler.showContextMenu command simulates a context click at the middle of the given GraphObject. Sorry about that. Since the button is presumably not at the center of the node, the InputEvent doesn’t happen within the button when the context menu is invoked from showContextMenu.
Since we’re talking about clicks, it would be safe to use Diagram.firstInput instead of Diagram.lastInput. Here’s my example app:
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<script src="https://unpkg.com/gojs"></script>
<script id="code">
const $ = go.GraphObject.make;
const myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"contextMenuTool.positionContextMenu": function(ad, obj) {
const button = obj.part.findObject("ThreeDotsExpanded");
if (button && button.getDocumentBounds().containsPoint(obj.diagram.firstInput.documentPoint)) {
const loc = obj.part.location;
ad.position = new go.Point(loc.x, loc.y+50);
} else {
go.ContextMenuTool.prototype.positionContextMenu.call(this, ad, obj);
}
}
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{
width: 100, height: 500,
contextMenu:
$("ContextMenu",
$("ContextMenuButton", $(go.Shape, "Diamond"))
)
},
$(go.Shape, { fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock, { margin: 8 },
new go.Binding("text")),
$("Button",
$(go.Shape, "Triangle", { width: 8, height: 8 }),
{
name: "ThreeDotsExpanded",
alignment: go.Spot.BottomRight,
click: (e, button) => e.diagram.commandHandler.showContextMenu(button.part),
contextClick: (e, button) => e.diagram.commandHandler.showContextMenu(button.part)
}
)
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
],
[
{ from: 1, to: 2 },
]);
</script>
</body>
</html>
I’m not sure what you are asking. Try it and then if you can’t figure it out, ask a more specific question.