How To Get The Id Of An MaxGraph Cell's Content

I've created a graph and am setting cells onto it via drag and drop. However when a drop or click happens I cannot find the clicked cell's html for use. For instance I'm trying to

Solution 1:

I've been working with MxGraph for a few months now on a large project, and while it's a great library, it's a bit cumbersome to use in some areas.

Getting at the HTML is one of those areas.

First off, you need to grab the objects of the event using the "MxGraph" tool set, as follows:

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

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

});

As you've already worked out, you can get the cell ID from the selected cell, via it's ID property, but other than that, there's not a great deal of other things on that object.

To go deeper, you need to drill down in the mouse event that you also get.

It's just a normal HTML event and as such has the regular properties on it you would expect to find.

In your case

mouseEvent.currentTarget.innerHTML

Will get you the HTML of the element you clicked on (You may need to explore different paths in your debugger, but that certainly works for me in the latest version of chrome)

One thing you need to be aware of though, MxGraph renders ALL of it's output using SVG and as far as I can see there is NO standard HTML ID attribute on the rendered tag, in fact none of the rendered graph elements appear to have ID's on them.

I hit this problem a week ago when I was trying to grab the output generated by MxGraph to do some image manipulation, and because I couldn't reliably grab a single image, I had to resort to using Base64 encoded strings and manipulating the cell stylesheets using MxGraph's API.

Solution 2:

I used xml to create the diagram:

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

So I get the ID with this code:

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

Version 3.9.11

Solution 3:

in version 3.9.8 I tried to use the above code, but found error with (graph), with more search and try, I found the suitable is (mxGraph.prototype), so this code should be:

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

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