javascript - 如何获取 maxGraph 单元格内容的 ID

Question

我创建了一个图表并通过拖放将单元格设置到图表上。但是，当发生放置或单击时，我找不到被单击的单元格的 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

    }

})

更新:因此，当创建可拖动项目时，我使用 value.setAttribute('htmlLabel', label); 将 html 添加到单元格中。但是 htmlLabel 似乎并不是 evt 对象中任何地方的关键。

Answer 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 的单元格样式表。