CODEWITHSUNDEEP
javascriptsvgmxgraph
snv
snv

Reputation: 181

How do i get an SVG with IDs from the graph?

Currently i am using mxGraph to edit a graph and spit out an SVG according to https://github.com/jgraph/mxgraph/blob/master/java/examples/com/mxgraph/examples/web/resources/export.html

While editing the graph i add data to the cells relabelling and basically tagging them with IDs the same way it is done in the EditDataDialog: https://github.com/jgraph/mxgraph/blob/f4ec51f7049a725e32f71a5d1811790d92259716/javascript/examples/grapheditor/www/js/Dialogs.js#L1314

Somewhat like this (for a given cell and after a user selects an item from a list):

const newLabel = listItems[listItems.selectedIndex].text;                               
//create a container object for the label and the additional data
var doc = mxUtils.createXmlDocument();
var obj = doc.createElement('object');
obj.setAttribute('label', newLabel || '');

//save extra data   
obj.setAttribute("my_ID", listItems[listItems.selectedIndex].dataset["recId"]);

cell.value = obj;                               `

This works fine thus far: i can save the xml in a database and retrieve it to edit it again in the grapheditor.

I am using the extracted SVG as preview images and for read-only access, but the SVGs do not contain those IDs i tagged the mxgraph-xml with. I need to be able to identify the nodes in the SVG to add events to it (outside of mxgraph)

I have been crawling through the code but i did not find where/how the SVG nodes get actually created.

I guess i should create a custom type of element instead of object and somehow register a new translation, which will make it a SVG <g>, where i convert my_ID into a custom attribute and ideally a class. Thus i can later identify and modfiy those <g> nodes. Any pointers on how to actually do that pretty please?

Upvotes: 1

Views: 756

Answers (1)

snv
snv

Reputation: 181

Ok, found it myself.

At the end of mxImageExport.prototype.drawCellState, between this.drawShape(state, canvas); and this.drawText(state, canvas); i grab state.cell.value, filter for the attribute i want and add that to the most recently added element in the SVG like this.

if ( 
    (state.cell.value !== undefined) && 
    (state.cell.value.hasAttribute('my_ID'))
){                  
    canvas.root.lastElementChild.setAttribute('data-myid',
        state.cell.value.getAttribute('my_ID'));
}

Upvotes: 1

Related Questions