How to detect deselection of a Node in RadialLayout?


I have the following nodeClicked(ev: go.InputEvent, node: go.GraphObject) for the RadialLayout.

  • it detects if the user pressed the CTRL button to enable multiselect and if not it will be a single click query
nodeClicked(ev: go.InputEvent, node: go.GraphObject) {
    if (ev.control) {// if the user pressed the control key
        console.log("multiselect activated");

        if(node.isSelected) { // if node is selected
             // push the name of the node in an Array....
             // make an API call and store some data in variable
        } else { // if node deselected whilst the ctrl key is still pressed
             // remove node from the array
             // reset variable for API to null
    } else {
        // if the user does not press CTRL
        console.log("Multiselect off");
         if (node.isSelected) { // however a single selected node must perform something
           // push name in the array
           // make an API call for the same node name and store value in variable
         } else { /* HERE Is the tricky part*/
            // if node got deselected in non-multiselect mode
           // make the arry empty

Without CTRL I try clicking the node and the area around it and the Adornment goes away however the it never makes the array empty; which implies that the node is not deselected.

The logic works perfectly with I hold the CTRL and select the node again. If i understand correctly the default way to deselect a node in GoJS RadialLayout is via CTRL, or is it something to do with my logic?

Some Guidance would be appreciated

The literal answer to your question is to implement a “ChangedSelection” DiagramEvent listener or a Part.selectionChanged event hander.

The most common way to clear the selection is to click in the background of the diagram – i.e. not on any node or link

You probably want to distinguish between selection (a collection) and clicking (an input event). More is at GoJS Events -- Northwoods Software.

Hi Walter,

I think I am almost on the verge of figuring it out. I did create a addDiagramListener in my app as follows:

myDiagram.addDiagramListener('ChangedSelection', (e: any) => {
          // make my array empty

However I realized that this will cause problems when I do Multiselect because each time i select a node it might be considered as ChangedSelection and only add the selected node whilst clearing out the array.

The Diagram.selection is a GoJS Set, so you can easily compare it with your own Set of nodes that you are tracking in your own state. Set | GoJS API

If you’re wondering why GoJS doesn’t use the ES6 Set and Map classes, that’s because when we started this project they didn’t exist yet in any browsers, so we had to roll our own.

So I found a hack/solution for the query using the addDiagramListener and the selection as follows:

mydiagram.addDiagramListener('ChangedSelection', (e: any) => {
   // if at any point if everything is deselected 
   console.log("Selection Changed in Diagram. Selection Count: ", e.diagram.selection.count);

   if (e.diagram.selection.count === 0) {
        // make all necessary variables empty -- simply put a reset