mxGraph - Displaying a diagram by loading a XML

问题

With the help of How to get the XML from mxGrpah diagram? able to get the dynamic XML from the graph editor. Now, I need to display the diagram by loading a XML (reverse algorithm)

回答1:

Ok, similarly to How to get the XML from mxGrpah diagram? answer, it is not again clear to me how to get the graph object in which the whole graph is saved so I propose the following workaround:

1) Get the reference of the original graph object into your index.html code

i. Add a global variable into index.html to get the reference of the graph object

var universalGraph;

ii. Go into a .js file where the graph object has already been created (for example go to js/view/mxGraphView on installListeners function and assign the instance of the graph object to your global accessible reference

mxGraphView.prototype.installListeners = function(){
var graph = this.graph;
var container = graph.container;
universalGraph = graph; //this way, you will have access from .index.html to the graph object and you will be able to import the xml as shown in the example here https://stackoverflow.com/questions/56664578/mxgraph-save-functionality-not-working-locally/56735153#56735153

As you will see, now the solution with the global Graph.xml was proposed here is redundant since now this way you will have always access into the graph object :) .

2) Since you have now the graph object, you can use it for any purpose you wany (export/import the xml state)

EDIT

I post also an example of how you should upload the xml in index.html

function uploadXML(){
        let xml = '<thexml_you_got_from_the_export><thexml_you_got_from_the_export/>';
        let doc = mxUtils.parseXml(xml);
        let codec = new mxCodec(doc);
        codec.decode(doc.documentElement, universalGraph.getModel());
        let elt = doc.documentElement.firstChild;
        let cells = [];
        while (elt != null)
        {
            let cell = codec.decode(elt)
            if(cell != undefined){
                if(cell.id != undefined && cell.parent != undefined && (cell.id == cell.parent)){
                    elt = elt.nextSibling;
                    continue;
                }
                cells.push(cell);
            }
            elt = elt.nextSibling;
        }
        universalGraph.addCells(cells);

    }

回答2:

Many thanks @NickAth, Also, I tried my own analysis found that the following solution is working fine.

var xml = {xml};
var ui = new EditorUi(new Editor());
var doc = mxUtils.parseXml(xml);
ui.editor.setGraphXml(doc.documentElement);

来源：https://stackoverflow.com/questions/57075352/mxgraph-displaying-a-diagram-by-loading-a-xml

标签

javascript

php

mxgraph