Context menu query


We are trying to use GoJS library for the flow diagram app,

For this we want to display the node as a Text and image, and image will be clickable (left click) which will open up a menu which will again have a list of panels. each panel will have an image and a link, on the click of the link we will create a new node.

For the above we are trying to use context menu, but there are 2 challenges that I can see.

  1. Opening Context Menu on the left click.

  2. Having a list of panel inside a context menu.

I have traversed through all the example and was not able to find out any thing close to what we want.

Please suggest how to achieve this.

Thanks in advance.


Try selecting a node in the State Chart sample. The selection Adornment includes a Button that creates a new node and a link to that new node.

But your adornment can have as many things in it as you like, including Pictures and Buttons. Try selecting a node in the Grafcet diagrams sample. Nodes with no links coming out of them have more buttons.

Thanks a lot for the pointers Walter, this looks promising we will try all this with our use case in a day or two and let you know how it goes.


Hi Walter,

Thanks for this, this is working for us as required, but there is only one issue with this that is remaining and I am not able to get around it, the issue is.

When the selectionAdornmentTemplate open on the click of the node it has 5 Items in it but this menu get hidden under the canvas and user is not able to see them, is there any way that these item will flow out of canvas or the diagram can be re-positioned so that the menu is visible.

Thanks in advance.


Hi Walter,

One more thing I have noticed that in the Grafcet Diagrams Example Also if you click on the node # 17 all the options are hidden under the canvas, this is the same issue we are facing.

Nitin Mittal

Try a “SelectionChanged” DiagramEvent listener that calls e.diagram.scrollToRect with a Rect that is appropriately bigger than the actualBounds of the selected Part.

You might want to limit this behavior to only operate on the first selected part.