英文:
How to find all cells under the selected cell
问题
当我选择一个单元格时,我想找到该单元格下面的所有连接单元格。例如,当我选择图中的椭圆单元格时,我只想找到其下面的单元格。
英文:
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
答案1
得分: 1
我会分两步完成这个任务:
- 获取与选定单元格相连接的所有单元格。
- 从相连接的单元格中,仅保留位于选定单元格下方的单元格。
要获取所有相连的单元格,您可以使用类似深度优先搜索(DFS)算法的方法(类似于这个)。
要过滤掉位于选定单元格下方的单元格,您需要比较单元格的“y”坐标(类似于这个)。
英文:
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)
答案2
得分: 0
你可以尝试以下的内置函数getCellsBeyond:
mxGraph.prototype.getCellsBeyond = function(x0, y0, parent, rightHalfpane, bottomHalfpane)
返回给定父元素中,从给定点(x0, y0)向右或向下,取决于rightHalfpane和bottomHalfpane的半面内的子元素。
参数如下:
- x0: 原点的X坐标。
- y0: 原点的Y坐标。
- parent: 可选的mxCell,应检查其子元素。默认为defaultParent。
- rightHalfpane: 布尔值,指示是否返回原点右半面的单元格。
- bottomHalfpane: 布尔值,指示是否返回原点下半面的单元格。
示例:
// 添加一个执行搜索的按钮
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);
});
在你的情况下,警报不会提供任何信息,因为你的单元格值都是空的。所以将'value'替换为'id'。
问题:该函数选择所选单元格上方和同一高度的所有单元格,还包括边和“非子元素”顶点。
我找到了一个更好的解决方案,使用graph.traverse函数:
// 添加一个执行搜索的按钮
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);
});
这返回所选顶点的“子元素”顶点。如果你有自上而下的分层布局,这是正确的解决方案。
英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论