Vue 2 - Org Chart - Hide & Show Context Menu Based on Conditions of the node data

Versions: Go.js 2.1.33 & Vue 2 & Nuxt 2
Issues: There are topics in this forum, where how to hide a context menu option is discussed. But how do we display it again based on the node condition?
Let’s say there’s index.vue and contextmenu.js

When I call the contextMenu() (which resides as export function in contextmenu.js) from index.vue
Then it is done on initial render. And now when my parameter/prop/variable in index.vue is updated to True
I want the context menu to be shown. If it’s false (default value) then the context menu to be hidden.
let’s say, isContextEnable : false,

Issue here is whenever the variable is updated, unable to update the hide/show condition for context menu. Only the initially passed condition is taken which is false.


Please do help me in understanding the root cause here. Thanks in advance.

A context menu is either an Adornment or an HTMLInfo that is independent of any particular Part (i.e. Node or Link) that might show that context menu.

There is no property on Part that controls whether or not its context menu is visible. The reason for that is that if there were such a property, that property might be set to true (or whatever was designed to cause the context menu to appear) on more than on Part at the same time. But there is only one context menu that can be shown at one time, by the ContextMenuTool, so it is impossible to show multiple context menus for multiple Parts at the same time. (Furthermore, even if the goal were to have a single context menu for multiple Parts, to which data would the context menu’s be data bound?)

So when you want to use a data property value to control whether a context menu is shown for the corresponding Part (a Node in your case), you will first need to decide what to do when more than one such data property is set to true, since the ContextMenuTool will not be able to show multiple context menus at the same time.

If you decide that that situation can never happen, then you merely need to implement a Changed listener on your model to detect when that data property changes value on any node data object. It’s easiest to either call Diagram.addModelChangedListener or specify a “ModelChanged” option when constructing a Diagram. If the value changes to true, you find the corresponding Node and then call the diagram’s CommandHandler.showContextMenu on that Node. If the value changes to false, you can just call ContextMenuTool.hideContextMenu on the diagram’s ToolManager.contextMenuTool.

A further complication is that when the user does something to cause the context menu to be hidden (either by invoking a context menu button or by just clicking elsewhere), you’ll need to make sure that data property is set to false again. Override ContextMenuTool.hideContextMenu to do that. You can look at the value of ContextMenuTool.currentObject, if it is non-null, to find the Part whose should be modified.