First, when I try your node template, I get the errors that “Horizontal” and “Auto” are undefined Shape.figure values. I hope you have defined those figures in your app.
Second, when I define your click event handlers and add a setting of InputEvent.handled, I find that a click on the nested panel does not result in calling the node’s click event handler:
myDiagram.nodeTemplate =
$(go.Node, "Spot",
{
click: function (e, node) {
console.log("node " + node.key);
}
},
$(go.Shape, //"Horizontal",
new go.Binding("fill", "color")),
$(go.TextBlock, "Switch Node",
new go.Binding("text", "key")),
$(go.Panel, "Horizontal",
$(go.Shape, //"Auto",
{ fill: "lightgoldenrodyellow" }),
$(go.TextBlock, "Context Menu",
{ margin: 4 }),
{
click: function (e, panel) {
e.handled = true;
console.log("panel");
}
}
)
);
So the event bubbling is working correctly, with the bubbling stopped when the event handler sets InputEvent.handled to true.
Adding those overrides to ContextMenuTool.canStart and standardMouseClick has no effect because left click events do not normally invoke the ContextMenuTool. (I think your override of canStart doesn’t change any behavior anyway.) So that makes me think that your button click event handler is calling CommandHandler.showContextMenu. So I try:
myDiagram.nodeTemplate =
$(go.Node, "Spot",
{
click: function (e, node) {
console.log("node " + node.key);
},
contextMenu:
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Context Menu for Node")
)
)
},
$(go.Shape, //"Horizontal",
new go.Binding("fill", "color")),
$(go.TextBlock, "Switch Node",
new go.Binding("text", "key")),
$(go.Panel, "Horizontal",
$(go.Shape, //"Auto",
{ fill: "lightgoldenrodyellow" }),
$(go.TextBlock, "Context Menu",
{ margin: 4 }),
{
click: function (e, panel) {
e.handled = true;
console.log("panel");
e.diagram.commandHandler.showContextMenu(panel);
},
contextMenu:
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Context Menu for Panel")
)
)
}
)
);
Everything still works exactly as they are supposed to work. A click on the nested panel only calls its click event handler and not the node’s click event handler, and it shows the panel’s contextMenu because that was what was passed to the CommandHandler.showContextMenu method.
A right click on the panel shows the panel’s contextMenu, and a right click on some object other than the nested panel shows the node’s contextMenu. This is still with both of those ContextMenuTool overrides defined when initializing the Diagram.
So I am still confused – everything is working correctly. How is your situation different?
