mxGraph - 通过加载 XML 来显示图表

Question

在How to get the XML from mxGrpah diagram? 的帮助下，能够从图形编辑器中获取动态 XML。 现在，我需要通过加载 XML（反向算法）来显示图表

Answer 1

好的，类似于How to get the XML from mxGrpah diagram? 的回答，我还不清楚如何获取保存整个图形的graph 对象，因此我提出以下解决方法：

1) 获取原始图形对象的引用到您的 index.html 代码中

我。在 index.html 中添加一个全局变量来获取graph 对象的引用

var universalGraph;

ii. 进入一个已创建 graph 对象的 .js 文件（例如转到 installListeners 函数上的 js/view/mxGraphView并将图形对象的实例分配给您的全局可访问引用

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 

正如您将看到的，现在建议使用全局Graph.xml 的解决方案here 是多余的，因为现在您将始终可以访问graph 对象:)。

2) 由于您现在有了 graph 对象，您可以将它用于任何您想要的目的（导出/导入 xml 状态）

编辑

我还发布了一个示例，说明您应该如何在 index.html 中上传 xml

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);

    }

Answer 2

非常感谢@NickAth，另外，我尝试了自己的分析发现以下解决方案运行良好。

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