Thank you very much for your answer. Now I have a question I want to ask you.In ContextMenu, the Top button is not displayed at first.The TOP button is displayed when the mouse is on the RIGHT button and hidden when the mouse is off.What should I write in this case?Thank you again
Start by making the “TOP” button not visible.
This then does what you are asking for:
myDiagram.nodeTemplate.contextMenu =
$("ContextMenu", "Spot",
$(go.Placeholder),
$("ContextMenuButton", $(go.TextBlock, "Top"),
{ name: "TOP", alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom,
visible: false,
click: function(e, button) { console.log("Top"); }
}),
$("ContextMenuButton", $(go.TextBlock, "Right"),
{ name: "RIGHT", alignment: go.Spot.Right, alignmentFocus: go.Spot.Left,
click: function(e, button) { console.log("Right"); },
mouseEnter: function(e, button) { button.part.findObject("TOP").visible = true; },
mouseLeave: function(e, button) { button.part.findObject("TOP").visible = false; }
})
);
BUT it seems unlikely that is what you really want, because there is no way for the user to interact with the “TOP” button.
Instead I suggest something like:
myDiagram.nodeTemplate.contextMenu =
$("ContextMenu", "Spot",
$(go.Placeholder),
$("ContextMenuButton", $(go.TextBlock, "Top"),
{ name: "TOP", alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom,
visible: false,
click: function(e, button) { console.log("Top"); },
mouseLeave: function(e, button) { button.visible = false; }
}),
$("ContextMenuButton", $(go.TextBlock, "Right"),
{ name: "RIGHT", alignment: go.Spot.Right, alignmentFocus: go.Spot.Left,
click: function(e, button) { console.log("Right"); },
mouseEnter: function(e, button) { button.part.findObject("TOP").visible = true; }
})
);
1 Like
Thank you very much for your help.It’s so useful