mxGraph xml to json方法

mxGraph xml to json方法：
显示效果：

获取节点值

getValue(atts, name) {
    
    
      for (var i = 0; i < atts.length; i++) {
    
    
        if (atts[i].name == name) {
    
    
          return atts[i].value;
        }
      }
      return null;
    },

xml转json格式对象

    xmlToJson(xml) {
    
    
      console.log('xml', xml);
      var gModel = [];
      for (var i = 0; i < xml.children.length; i++) {
    
    
        var mxgraph_model = xml.children[i];
        var vModel = {
    
     childs: [] };
        for (var r = 0; r < mxgraph_model.children.length; r++) {
    
    
          var root = mxgraph_model.children[r];
          var vRoot = {
    
     childs: [] };
          for (var c = 0; c < root.children.length; c++) {
    
    
            var cell = root.children[c];
            var t_id = cell.id;
            var t_vertex = this.getValue(cell.attributes, "vertex");  //cell.vertex;
            var t_value = this.getValue(cell.attributes, "value");    //cell.value;                   

            var vCell = {
    
     id: t_id, vertex: t_vertex, value: t_value, childs: [] };

            var t_edge = this.getValue(cell.attributes, "edge");
            debugger
            if (t_edge) {
    
    
              vCell["edge"] = t_edge;
              var t_source = this.getValue(cell.attributes, "source");
              var t_target = this.getValue(cell.attributes, "target");
              vCell["source"] = t_source;
              vCell["target"] = t_target;
              var t_parent = this.getValue(cell.attributes, "parent");
              vCell["parent"] = t_parent;
            }
            for (var g = 0; g < cell.children.length; g++) {
    
    
              var cc = cell.children[g];
              var as = this.getValue(cc.attributes, "as");
              if (cc.nodeName == "mxGeometry" || as == "geometry") {
    
    
                //mxGeometry处理
                var t_x = this.getValue(cc.attributes, "x");
                var t_y = this.getValue(cc.attributes, "y");
                var t_width = this.getValue(cc.attributes, "width");
                var t_height = this.getValue(cc.attributes, "height");
                //
                var t_mxGeometry = {
    
     x: t_x, y: t_y, width: t_width, height: t_height };
                vCell.childs.push({
    
     mxGeometry: t_mxGeometry });
              }
              if (cc.nodeName == "JsonProperty" || as == "data") {
    
    
                //JsonProperty处理
                var vData = cc.innerHTML;
                vCell.childs.push({
    
     data: vData });
              }
            }

            vRoot.childs.push({
    
     "mxCell": vCell })
          }
          vModel.childs.push({
    
     root: vRoot });
        }
        vModel["mxGraphModel"] = vModel;
        gModel.push(vModel);
      }
      return gModel;
    },
        

加载xml到mxGraph组件显示

importXml(xml) {
    
    
      var parent = this.graph.getDefaultParent();
      var xml = mxUtils.parseXml(xml);//this.xml为string格式数据
      var json = this.xmlToJson(xml);
      let mxGraphModelObj = json[0].mxGraphModel,
        root = mxGraphModelObj.childs[0].root,
        mxCells = root.childs;
      let cellsObj = {
    
    },
        edges = [];
      this.graph.getModel().beginUpdate();
      try {
    
    
        //循环处理节点cell 同时找出对应关系的线
        for (let i = 0; i < mxCells.length; i++) {
    
    
          let mxCell = mxCells[i].mxCell;
          if (mxCell.vertex) {
    
    
            const geometry = mxCell.childs[0].mxGeometry;
            var vertex = this.graph.insertVertex(
              parent,
              null,
              mxCell.value,
              geometry.x,
              geometry.y,
              geometry.width,
              geometry.height
            );
            vertex.id = mxCell.id;
            cellsObj["vertex" + vertex.id] = vertex;
          } else if (mxCell.edge) {
    
    
            edges.push(mxCell);
          } else {
    
    
            continue;
          }
        }
        //拼接节点关联线
        for (let i = 0; i < edges.length; i++) {
    
    
          let edge = edges[i],
            geometry = edge.childs[0].mxGeometry;
          this.graph
            .insertEdge(
              parent,
              null,
              edge.value,
              cellsObj["vertex" + edge.source],
              cellsObj["vertex" + edge.target]
            )
            .setId(edge.id);
        }
      } finally {
    
    
        this.graph.getModel().endUpdate();
      }

    },

转为xml字符串

toXml() {
    
    
      var xml = mxUtils.getXml(new mxCodec().encode(this.graph.getModel()));
      //console.log(xml)
      return xml;
    },

—the—end—