使用 mxCellHighlight 突出显示多个单元格

Question

我想在 chromeless 模式下突出显示 draw.io 图表中的一系列单元格。 objective是为了说明包含顶点和边的路径：

使用助手 class mxCellHighlight，我主要尝试以下操作：

var highlight = new mxCellHighlight(graph, '#ff0000', 2);
highlight.highlight(graph.view.getState(cell1)));
highlight.highlight(graph.view.getState(cell2)));
...

这不起作用，一次只能突出显示一个单元格。我知道 resetHandler 在单元格的当前根更改时隐藏突出显示标记，但不幸的是我未能正确覆盖它以防止这种影响。

非常感谢任何帮助，谢谢。

Answer 1

mxCellHighlight 可以突出显示 只有一个单元格 。你可以简单地查看它的源代码，它是 quite small (related lines)

所以，我可以想到以下选项：

创建多个亮点，像这样：

var h1 = new mxCellHighlight(graph, '#ff0000', 2);
h1.highlight(graph.view.getState(cell1)));
var h2 = new mxCellHighlight(graph, '#ff0000', 2);
h2.highlight(graph.view.getState(cell2)));

如果需要，您可以将它们保存在数组中以便稍后重置。完全无效，但很简单。或者您可以修改 class 以支持多种形状。不过这样估计会比较复杂，基本上和从头写一样好。

或者，您可以尝试选择形状，并通过更改一些常量将选择样式更改为看起来像“突出显示”。如果您不关心选择，这可以工作。查看可以重新定义的常量列表 here。基本上，我的意思是这样的：

mxConstants.HANDLE_SIZE = 0;
mxConstants.VERTEX_SELECTION_COLOR = '#00ff0080';
mxConstants.EDGE_SELECTION_COLOR = '#00ff0080';
mxConstants.EDGE_SELECTION_STROKEWIDTH = 2;
mxConstants.VERTEX_SELECTION_STROKEWIDTH = 2;
mxConstants.VERTEX_SELECTION_DASHED = false;
mxConstants.EDGE_SELECTION_DASHED = false;

graph.getSelectionModel().setCells([cell1, cell2]);

或者，您可以不作弊并修改单元格渲染器（mxSvgCanvas2D.prototype.rect 我猜您的情况），这将根据您的形状渲染高光。这可能有点复杂，但是这样你就可以用样式（“突出显示”）来控制你的形状，所以你可以在代码中为样式设置该值，然后从渲染器中读取，和例如添加 svg 过滤器（使用真实的 "glow" effect，如果你想要的话）。

Answer 2

正如@Nikolay 所解释的，mxCellHighlight 用于突出显示单个单元格：它为您要突出显示的单元格添加一个额外的形状并管理听众（鼠标 enter/leave 为您服务）。您还可以检查 mxCellTracker 和 mxCellMarker 是否符合您的需要。

高亮可以看作是改变单元格的样式，所以你可以直接在模型上改变单元格的样式。假设您知道要突出显示的单元格，即您有一个单元格数组，您可以执行以下操作以使用 https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/util/mxUtils.js#L3430

更新单元格不透明度

const cells = []; // the cells you want to highlight

graph.getModel().beginUpdate(); // required if you want to apply the highlight to all cells in a single transaction
  try {
    mxUtils.setCellStyles(graph.getModel(), cells, 'opacity', 20);
  } finally {
    // Updates the display
    graph.getModel().endUpdate();
  }

注意 mxUtils.setCellStyles 管理一个内部事务并且只允许更改单个样式 key/value。因此，您可能需要多次调用 mxUtils.setCellStyles 或复制 https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/util/mxUtils.js#L3453 中设置样式 keys/values 的逻辑，或者创建专用样式并直接将其应用到带有 model.setStyle(cells[i], style) 的单元格. mxUtils 提供了几个函数来更新字符串或数组的样式，以帮助您解决该主题。

要删除已应用的样式，您可能必须保留非突出显示的样式值才能在以后重新应用它。

我已使用此技术突出显示路径，如以下截屏所示（路径，即要突出显示的单元格是在鼠标输入时计算的，并由图形鼠标侦听器管理 https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/mxGraph.js#L12628）

https://github.com/tbouffard/mxgraph-js-playground/pull/1 中可用的代码（丑陋的，这是一个 POC）

截屏内容

首先突出显示一个单元格（红色）并对其应用覆盖，然后将其删除
第二次激活路径检测：检测到的路径的单元格上的单元格不透明度发生变化

使用 mxCellHighlight 突出显示多个单元格

Highlight multiple cells using mxCellHighlight

mxgraph

draw.io