1

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

问题

我有一个自定义类Message，我将其对象设置为调用函数后返回cell.data的相应对象。mxCellgraph.insertVertex()

该类Message如下所示：

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

还有另一个类被称为Type封闭Message对象。这只是逻辑的需求。看起来像这样：

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

现在我在以下位置注册我的Message对象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>

将 xml 解码为图形并cell.data在控制台中打印：

代码：

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:{}

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

4

0 回答 0