Выделите несколько ячеек с помощью mxCellHighlight

mxCellHighlight может выделять только одну ячейку. Вы можете просто проверить его исходный код, это довольно маленький (связанные строки)

Итак, я мог бы подумать о следующих вариантах:

Создайте несколько бликов, например:

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)));

Вы можете сохранить их в массиве, чтобы сбросить позже, если это необходимо. Совершенно неэффективно, но просто. Или вы можете изменить класс для поддержки нескольких форм. Но это было бы, вероятно, сложнее, в основном это похоже на написание с нуля.

В качестве альтернативы вы можете попробовать выбрать фигуры и изменить стиль выделения, чтобы он выглядел как выделение, изменив некоторые константы. Это может работать, если вы не заботитесь о выборе. Ознакомьтесь со списком констант, которые вы можете переопределить здесь. В общем, я имею в виду что-то вроде этого:

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 фильтр, например (с реальным эффектом свечения, если хотите).

Как объяснил @Nikolay, mxCellHighlight предназначен для выделения одной ячейки: он добавляет дополнительную форму к той, которую вы хотите выделить, и управляет слушателями (мышь входит/уходит за вас). Вы также можете проверить, соответствуют ли 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 управляет внутренней транзакцией и позволяет изменять только один ключ/значение стиля. Поэтому вам, возможно, придется вызвать mxUtils.setCellStyles несколько раз или воспроизвести логику установки ключей/значений стиля, как в https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/util/mxUtils.js#L3453 или создайте специальный стиль и примените его непосредственно к ячейке с 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)

Контент скринкаста

• 1-й выделите ячейку (красным) и примените к ней наложение, затем удалите его
• 2-я активация обнаружения пути: изменена непрозрачность ячеек в ячейках обнаруженного пути