Javascript 无法使用mxObjectDecode将mxGraph单元格数据从xml解码到对象

我在我的项目中使用mxGraph JS库来构建图形。 我能够构造图形，将其编码为xml，并将xml解码为图形

问题

我有一个自定义类

Message

，调用

graph.insertVertex（）

函数后返回的相应

mxCell

的

cell.data

中设置了该类的对象

消息

类如下所示：

class Message {
    constructor(title) {
        this.attributes = {};
        this.attributes.title = title;
        this.attributes.audioPath = "";
    }     

class Type{
  constructor(a,b){
    this.object = a;
    this.type = b;
  }
}

Message m=new Message(); //new Message object
m.attributes.title="Sample"; //setting message attributes

cell = graph.insertVertex(parent, null, this.attributes.title, 20, 40, 80, 30); //inserting vertex in graph

Type type=new Type(); //new Type object
type.type="msg"; 
type.object=m;

cell.data=m; //Setting type to cell data

还有另一个名为

Type

的类来封装

消息

对象。这正是逻辑的要求。看起来像这样：

class Message {
    constructor(title) {
        this.attributes = {};
        this.attributes.title = title;
        this.attributes.audioPath = "";
    }     

class Type{
  constructor(a,b){
    this.object = a;
    this.type = b;
  }
}

Message m=new Message(); //new Message object
m.attributes.title="Sample"; //setting message attributes

cell = graph.insertVertex(parent, null, this.attributes.title, 20, 40, 80, 30); //inserting vertex in graph

Type type=new Type(); //new Type object
type.type="msg"; 
type.object=m;

cell.data=m; //Setting type to cell data

我在图形中插入顶点，并按如下方式设置单元数据：

class Message {
    constructor(title) {
        this.attributes = {};
        this.attributes.title = title;
        this.attributes.audioPath = "";
    }     

class Type{
  constructor(a,b){
    this.object = a;
    this.type = b;
  }
}

Message m=new Message(); //new Message object
m.attributes.title="Sample"; //setting message attributes

cell = graph.insertVertex(parent, null, this.attributes.title, 20, 40, 80, 30); //inserting vertex in graph

Type type=new Type(); //new Type object
type.type="msg"; 
type.object=m;

cell.data=m; //Setting type to cell data

现在我在

mxCodecRegistry

中注册我的

消息

对象：

var messageCodec = new mxObjectCodec(new Message());
messageCodec.encode = function(enc, obj) {
    var node = enc.document.createElement('message');
    mxUtils.setTextContent(node, JSON.stringify(obj.attributes));
    return node;
};
messageCodec.decode = function(dec, node, into) {
    var obj = JSON.parse(mxUtils.getTextContent(node));
    obj.constructor = Message;

    return obj;
};

mxCodecRegistry.register(messageCodec);

在此之后，我将图形编码为xml。以下是代码和输出xml：

代码：

var encoder  = new mxCodec();
var node = encoder.encode(graph.getModel());
xml = mxUtils.getXml(node);

//mxUtils.popup(xml, true);
return xml;

<?xml version="1.0" encoding="UTF-8"?>
<mxGraphModel>
   <root>
      <mxCell id="0" />
      <mxCell id="1" parent="0" />
      <mxCell id="8" value="Sample" vertex="1" parent="1">
         <mxGeometry x="338.5" y="180" width="40" height="20" as="geometry" />
         <Type type="msg" as="data">
            <message as="object">{"title":"Insert_1"}</message>
         </Type>
      </mxCell>
   </root>
</mxGraphModel>

var doc = mxUtils.parseXml(xml);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
for(var i in graph2.getChildCells() ) {
        console.log("cell" + i + ":" + JSON.stringify(graph.getChildCells()[i].data));
}

cell0:{}
cell1:{}

输出：

var encoder  = new mxCodec();
var node = encoder.encode(graph.getModel());
xml = mxUtils.getXml(node);

//mxUtils.popup(xml, true);
return xml;

<?xml version="1.0" encoding="UTF-8"?>
<mxGraphModel>
   <root>
      <mxCell id="0" />
      <mxCell id="1" parent="0" />
      <mxCell id="8" value="Sample" vertex="1" parent="1">
         <mxGeometry x="338.5" y="180" width="40" height="20" as="geometry" />
         <Type type="msg" as="data">
            <message as="object">{"title":"Insert_1"}</message>
         </Type>
      </mxCell>
   </root>
</mxGraphModel>

var doc = mxUtils.parseXml(xml);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
for(var i in graph2.getChildCells() ) {
        console.log("cell" + i + ":" + JSON.stringify(graph.getChildCells()[i].data));
}

cell0:{}
cell1:{}

输出：

var encoder  = new mxCodec();
var node = encoder.encode(graph.getModel());
xml = mxUtils.getXml(node);

//mxUtils.popup(xml, true);
return xml;

<?xml version="1.0" encoding="UTF-8"?>
<mxGraphModel>
   <root>
      <mxCell id="0" />
      <mxCell id="1" parent="0" />
      <mxCell id="8" value="Sample" vertex="1" parent="1">
         <mxGeometry x="338.5" y="180" width="40" height="20" as="geometry" />
         <Type type="msg" as="data">
            <message as="object">{"title":"Insert_1"}</message>
         </Type>
      </mxCell>
   </root>
</mxGraphModel>

var doc = mxUtils.parseXml(xml);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
for(var i in graph2.getChildCells() ) {
        console.log("cell" + i + ":" + JSON.stringify(graph.getChildCells()[i].data));
}

cell0:{}
cell1:{}

请帮帮我。我希望单元格数据转换回对象，以便我可以直接访问所有属性