How to separate out display and data mxgraph ports example

Question

I am working with mxgraph and using the mxgraph ports example as a starting point for my application. https://jgraph.github.io/mxgraph/javascript/examples/ports.html

The example passes the content of each cell through the value property of an mxcell object. The display content is an html label which is then rendered inside the cell. Example code below shows the creation of an draggable icon on the sidebar the parameters are graph, sidebar, label, image.

addSidebarIcon(graph, sidebar,
                '<h1 style="margin:0px;">Website</h1><br>'+
                '<img src="images/icons48/earth.png" width="48" height="48">'+
                '<br>'+
                '<a href="http://www.jgraph.com" target="_blank">Browse</a>',
                'images/icons48/earth.png');

The addSideBarIcon function then creates the vertex by passing it's label argument as the value property of the MxCell.

v1 = graph.insertVertex(parent, null, label, x, y, 120, 120);

I would like to be able to add a JSON object to store non display data along with the html label for display purposes in the value property of each cell. I would like to do this without modifying the underlying prototypes.

addSidebarIcon(graph,
    sidebar, {
        display: '<h1 style="margin:0px;">Process</h1><br>' +
            '<img src="images/icons48/gear.png" width="48" height="48">' +
            '<br><select><option>Value1</option><option>Value2</option></select><br>',
        data: {
            key1: val1
        },
    }

When I do this he code is interpreting the value as an html label. where as I would like it to interpret only value.display as the label. I'm not sure how to go about combining the html label and json data together and would love some suggestions.

score 0 · Answer 1 · answered Nov 07 '19 at 16:23

0

You have the implementation of the addSidebarIcon in the same file...

When you find the:

v1 = graph.insertVertex(parent, null, label, x, y, 120, 120);

You have to use there not the "label", but extract the display value from your JSON.

answered Nov 07 '19 at 16:23

Marco

246
1
9

score 0 · Answer 2 · answered May 06 '23 at 07:03

You have to change the implementation of mxGraph.getLabel, which is called by mxGraph to display label.

graph.getLabel = function(cell) {
    // extract label from cell.value
    // and return a DOM node for html or string for plain text
    return createDOMNode(cell.value.display);
}

How to separate out display and data mxgraph ports example

2 Answers2