How to find all cells under the selected cell

Question

When I select a cell, I want to find all the connected cells under that cell. For example, when I choose the ellipse cell as in the picture, I just want to find the cells under it

Answer 1

I would approach this task in two steps:

• get all cells that are connected to the selected one.
• from the connected cells, leave only cells that are below the selected one.

To get all connected cells, you may use something like DFS (depth first search) algorithm (something similar to this).

To filter out the cells that are below the selected one, you need to compare "y" coordinates of the cells (something like this)

Answer 2

You could try the following built-in function getCellsBeyond:

mxGraph.prototype.getCellsBeyond = function(x0, y0, parent, rightHalfpane, bottomHalfpane)

Returns the children of the given parent that are contained in the halfpane from the given point (x0, y0) rightwards or downwards depending on rightHalfpane and bottomHalfpane. Parameters are:

• x0: X-coordinate of the origin.
• y0: Y-coordinate of the origin.
• parent: Optional mxCell whose children should be checked. Default is defaultParent.
• rightHalfpane: Boolean indicating if the cells in the right halfpane from the origin should be returned.
• bottomHalfpane: Boolean indicating if the cells in the bottom halfpane from the origin should be returned.

Example:

 // Adds a button to execute the search
          var button = document.createElement('button');
          mxUtils.write(button, 'Run');
          
          mxEvent.addListener(button, 'click', function(evt)
          {
                var msg = '';
                var cell = graph.getSelectionCell();
                var geo = cell.geometry;
                msg += 'Cell ' + cell.value + ' is selected!\n';
                msg += 'x: ' + geo.x + '/ y: ' + geo.y + '\n';
                var cells = graph.getCellsBeyond(geo.x, geo.y, graph.getDefaultParent(), false, true);
                msg += 'Number of children: ' + cells.length + '\n';
                var i_del;
                for (let i = 0; i < cells.length; i++) {
                  if (cells[i] == cell)
                    i_del = i;
                  else  
                    msg += 'Child: ' + cells[i].value + "\n";
                }
                cells.splice(i_del, 1);
                alert(msg);
                graph.setSelectionCells(cells);
          });

In your case the alert will give no information because your cell values are all empty. So replace 'value' by 'id'.

Problem: the function selects all cells beyond and on the same height of the selected cell, also edges and "non children" vertices.

I found a better solution using the graph.traverse function:

// Adds a button to execute the search var button = document.createElement('button'); mxUtils.write(button, 'Run');

          mxEvent.addListener(button, 'click', function(evt)
          {
                var msg = '';
                var cell = graph.getSelectionCell();
                var geo = cell.geometry;
                msg += 'Cell ' + cell.value + ' is selected!\n';
                msg += 'x: ' + geo.x + '/ y: ' + geo.y + '\n';
                var cells = [];
                graph.traverse(cell, true, function(vertex)
                {
                    cells.push(vertex);
                });
                var l = cells.length-1;
                msg += 'Number of children: ' + l + '\n';
                var i_del;
                for (var i = 0; i < cells.length; i++) {
                  if (cells[i] == cell)
                    i_del = i;
                  else  
                    msg += 'Child: ' + cells[i].value + "\n";
                }
                cells.splice(i_del, 1);
                alert(msg);
                graph.setSelectionCells(cells);
          });

This returns the "child" vertices of the selected vertex. If you have a top-down hierarchical layout that's the right solution.