goJS context menu copying over to other links

GoJS
1

Hey guys,

So I have created a context menu on my link template in order to show information on a right click. I’m not using the context menu for anything else other than displaying info so the button’s click functionality is not set. Thing is I only need to show this information on certain types of links and for that reason have the text set to a go.Binding. The links that do not display information simply don’t have the binding set and thus show a button with an empty string. Ideally the user shouldn’t see the empty string button either, but that’s not the major problem here. While the page loads correctly with empty buttons on the links that don’t need to show information, upon right clicking a link with information followed by any link without it, the information gets copied over and populates that link’s context menu as well. How would I fix something like this? Thanks in advance.

2

Could you show us what your link templates look like and what your model is?

Instead of showing empty buttons, you can bind the visible property to your text, and if the text is empty, don’t show it.

new go.Binding("visible", "text", function(t) { return t !== ""; })
3

There is a lot going on in our link template, but the issue lies with the context menu all the way at the end. We used the variable gmk instead of the $ as the $ was being used by jquery already. I’m not following along with how I should change the context menu to not show if the string is empty. Additionally I set the data binding with another function on load before depending on which link is in question so the actual data array wouldn’t be of much help with this issue.

the link template is as follows:
myDiagram.linkTemplate =
gmk(go.Link,
// curves the lines linking node together based on to
// and from locations
{ curve: go.Link.Bezier},

            gmk(go.Shape, 
            		// colors the link based on data in linkDataArray
            		new go.Binding("stroke","color"),
                    new go.Binding("strokeWidth", "thick")),
             
            // label added to force the links away from each other or
			// display information requested
            gmk(go.TextBlock, {margin: 30, segmentOffset: new go.Point (0, 4)},
                   	new go.Binding("text", "label")),

// new go.Binding(“fromSpot”, “fromSpot”, go.Spot.parse),
// new go.Binding(“toSpot”, “toSpot”, go.Spot.parse),
// adds a from port label
gmk(go.TextBlock, { segmentIndex: 0, segmentFraction: .4, segmentOffset: new go.Point(0, -7)},
new go.Binding (“text”, “fromPort”)),
// adds a from port label
gmk(go.TextBlock, { segmentIndex: 2, segmentFraction: .4, segmentOffset: new go.Point(0, -7)},
new go.Binding (“text”, “toPort”)),
// extra information can be used using these blank bindings
gmk(go.TextBlock, {segmentIndex: 1, segmentFraction: .5, segmentOffset: new go.Point(0, -7),
segmentOrientation: go.Link.OrientUpright}, new go.Binding (“text”, “topText”)),
gmk(go.TextBlock, {segmentIndex: 1, segmentFraction: .5, segmentOffset: new go.Point(0, 2),
segmentOrientation: go.Link.OrientUpright}, new go.Binding (“text”, “bottomText”)),
{
contextMenu: // define a context menu for each node
gmk(go.Adornment, “Vertical”, // that has one button
gmk(“ContextMenuButton”,
gmk(go.TextBlock, new go.Binding (“text”, “contextMenu”))
)
// more ContextMenuButtons would go here
) // end Adornment
}
);

4

Also, would a context menu be the best way to display text on a right click or would there be a better alternative? One that might not have this copy over issue

5

For optimization purposes, we use one context menu that is shared by all links using a particular link template.

You can still use a context menu, but you will want to use an empty string binding to ensure that it gets updated properly. You probably don’t need to use “ContextMenuButton” unless you actually mean to give it some click functionality. See this codepen, and try right clicking Alpha-Beta and Gamma-Delta, along with the other links:

7

hey jhardy,

I figured out the issue so thanks so much for all of your help!

8

One last question about the context menu though, upon right clicking on a link it stays highlighted after one click away from the link, making the user double click to dehighlight, once to get rid of the actual context menu and once to dehighlight the link. Is there a way to make it so that the user only needs to click away once? Would this be a property of the context menu or the selection adornment? Once again, thanks so much for your help! I promise this is my last question on this topic.

9

You could override hideContextMenu to deselect upon hiding:

/**
 * Override method to also deselect upon hiding the context menu
 */
myDiagram.toolManager.contextMenuTool.hideContextMenu = function() {
  if (this.currentContextMenu !== null) this.diagram.clearSelection();
  go.ContextMenuTool.prototype.hideContextMenu.call(this);
}