如何获取 maxGraph 单元格内容的 id答案

【问题标题】：How to get the id of an maxGraph cell's content如何获取 maxGraph 单元格内容的 id
【发布时间】：2018-11-17 00:14:12
【问题描述】：

我已经创建了一个图表，并正在通过拖放将单元格设置到它上面。但是，当发生拖放或单击时，我找不到单击的单元格的 html 以供使用。

例如，我试图在mxEvent.CLICK 中获取被拖动元素的 ID。

graph.addListener(mxEvent.CLICK, function(sender, evt){

    var cell = evt.properties.cell;
    // cell.id is the cell id, not an id of html that's inside of it.
    if(cell) {

        var outer = cell.value.outerHTML; // I can see the HTML here encoded

    }

})

更新：所以当我的可拖动项目被创建时，我将 html 添加到带有value.setAttribute('htmlLabel', label); 的单元格中。但是 htmlLabel 似乎不是 evt 对象中任何地方的键。

【问题讨论】：

标签： javascript mxgraph

【解决方案1】：

我已经在一个大型项目中使用 MxGraph 几个月了，虽然它是一个很棒的库，但在某些领域使用起来有点麻烦。

了解 HTML 就是其中之一。

首先，您需要使用“MxGraph”工具集抓取事件的对象，如下：

graph.addListener(mxEvent.CLICK, function(sender, event){

    var mouseEvent = event.getProperty('event');
    var selectedCell = event.getProperty('cell');

});

正如您已经解决的那样，您可以通过其 ID 属性从所选单元格中获取单元格 ID，但除此之外，该对象上没有太多其他内容。

要更深入，您需要深入了解您也获得的鼠标事件。

这只是一个普通的 HTML 事件，因此具有您希望找到的常规属性。

你的情况

mouseEvent.currentTarget.innerHTML

将为您提供您单击的元素的 HTML（您可能需要在调试器中探索不同的路径，但这在最新版本的 chrome 中肯定对我有用）

您需要注意的一件事是，MxGraph 使用 SVG 渲染它的所有输出，据我所知，渲染标签上没有标准的 HTML ID 属性，实际上渲染的图形元素似乎都没有有身份证。

一周前我遇到了这个问题，当时我试图抓取 MxGraph 生成的输出来进行一些图像处理，因为我不能可靠地抓取单个图像，我不得不求助于使用 Base64 编码的字符串和操作使用 MxGraph 的 API 的单元格样式表。

【讨论】：

任何时候。如果它可以帮助某人跳过我花了很多天来解决它，那是值得的 :-)

【解决方案2】：

我使用xml创建图表：

...
<mxCell id="start" value="Start" style="start" vertex="1" parent="1"><mxGeometry x="0" y="0" width="30" height="30" as="geometry"/></mxCell>
...

所以我得到了这个代码的 ID：

graph.addListener(mxEvent.CLICK, function (sender, evt) {
     var cell = evt.getProperty("cell");
     var id = cell.id;
}

版本 3.9.11

【讨论】：

【解决方案3】：

在 3.9.8 版本中我尝试使用上面的代码，但是发现（graph）有错误，通过更多的搜索和尝试，我发现合适的是（mxGraph.prototype），所以这个代码应该是：

mxGraph.prototype.addListener(mxEvent.CLICK, function(sender, event){

var mouseEvent = event.getProperty('event');
var selectedCell = event.getProperty('cell');
});

【讨论】：