我在将新顶点注入(inject)现有 mxgraph 图形时遇到问题。
我可以使用默认编解码器来序列化/反序列化整个图形模型。但是,我还希望能够将单个顶点注入(inject)到现有图中。顶点表示为 mxgraph XML 字符串的 JSON 数组 - 第一个元素是主顶点,所有后续元素是端口。
["<mxCell id=\"47\" style=\"Zerply\" vertex=\"1\" connectable=\"0\" parent=\"1\">
<Object type=\"component\" label=\"Zerply\" attribute1=\"value1\" as=\"value\"/>
<mxGeometry x=\"573\" y=\"224\" width=\"150\" height=\"110\" as=\"geometry\"/>
</mxCell>",
"<mxCell id=\"48\" style=\"ZerplyInputLeft\" vertex=\"1\" parent=\"47\">
<Object type=\"port\" label=\"label 2\" attribute1=\"value1\" as=\"value\"/>
<mxGeometry y=\"0.5\" width=\"10\" height=\"10\" relative=\"1\" as=\"geometry\">
<mxPoint x=\"-5\" y=\"-5\" as=\"offset\"/>
</mxGeometry>
</mxCell>",
"<mxCell id=\"49\" style=\"ZerplyOutputRight\" vertex=\"1\" parent=\"47\">
<Object type=\"port\" label=\"label 2\" attribute1=\"value1\" as=\"value\"/>
<mxGeometry x=\"1\" y=\"0.25\" width=\"10\" height=\"10\" relative=\"1\" as=\"geometry\">
<mxPoint x=\"-5\" y=\"-5\" as=\"offset\"/>
</mxGeometry>
</mxCell>",
"<mxCell id=\"50\" style=\"ZerplyOutputRight\" vertex=\"1\" parent=\"47\">
<Object type=\"port\" label=\"label 2\" attribute1=\"value1\" as=\"value\"/>
<mxGeometry x=\"1\" y=\"0.75\" width=\"10\" height=\"10\" relative=\"1\" as=\"geometry\">
<mxPoint x=\"-5\" y=\"-5\" as=\"offset\"/>
</mxGeometry>
</mxCell>"]
这里有一些简单的代码来尝试将顶点注入(inject)到图中:
var componentNode;
for (var i = 0; i < xmlArray.length; i++) {
var mxXML = xmlArray[i];
var xmlDocument = mxUtils.parseXml(mxXML);
var decoder = new mxCodec(xmlDocument);
var node = xmlDocument.documentElement;
var newCell = decoder.decode(node);
if (i == 0) {
vertex = graph.insertVertex(root, null, newCell, x, y, 150, 110,
this.dragElement.id);
componentNode = vertex;
} else {
componentNode.insert(newCell);
}
vertex.connectable = 0;
}
这成功地将顶点(及其子顶点/端口)注入(inject)到现有图中。当我们尝试序列化新图时,问题就出现了——我们在第一个顶点中得到了一个额外的子节点:
<mxGraphModel>
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="2" style="Zerply" vertex="1" connectable="0">
<Object type="component" label="Zerply" attribute1="value1" as="value"/>
<mxGeometry x="573" y="224" width="150" height="110" as="geometry"/>
**<mxCell style="Zerply" vertex="1" parent="1">
<mxGeometry x="615" y="252" width="150" height="110" as="geometry"/>
</mxCell>**
</mxCell>
<mxCell id="48" style="ZerplyInputLeft" parent="2" vertex="1">
<Object type="port" label="label 2" attribute1="value1" as="value"/>
<mxGeometry y="0.5" width="10" height="10" relative="1" as="geometry">
<mxPoint x="-5" y="-5" as="offset"/>
</mxGeometry>
</mxCell>
<mxCell id="49" style="ZerplyOutputRight" parent="2" vertex="1">
<Object type="port" label="label 2" attribute1="value1" as="value"/>
<mxGeometry x="1" y="0.25" width="10" height="10" relative="1" as="geometry">
<mxPoint x="-5" y="-5" as="offset"/>
</mxGeometry>
</mxCell>
<mxCell id="50" style="ZerplyOutputRight" parent="2" vertex="1">
<Object type="port" label="label 2" attribute1="value1" as="value"/>
<mxGeometry x="1" y="0.75" width="10" height="10" relative="1" as="geometry">
<mxPoint x="-5" y="-5" as="offset"/>
</mxGeometry>
</mxCell>
</root>
</mxGraphModel>
我的做法是错误的吗?..或者这似乎是一个错误?
最佳答案
这是我有效的“粘贴”功能:
// deserialize cells
var doc = mxUtils.parseXml(decodeURIComponent(serializedCells));
var codec = new mxCodec(doc);
var cells = new Array();
for (var i = 0; i < doc.documentElement.childNodes.length; i++) {
cells[i] = codec.decodeCell(doc.documentElement.childNodes[i]);
}
// import cells into the graph
var delta = mxClipboard.insertCount * mxClipboard.STEPSIZE;
var parent = graph.getDefaultParent();
graph.model.beginUpdate();
try
{
for (var i = 0; i < cells.length; i++)
{
cells[i] = graph.importCells([cells[i]], delta, delta, parent)[0];
}
}
finally
{
graph.model.endUpdate();
}
// Increments the counter and selects the inserted cells
mxClipboard.insertCount++;
graph.setSelectionCells(cells);
忽略 mxClipboard.insertCount,当用户多次点击“粘贴”时,我用它来增加粘贴偏移量。
serializedCells 是 HTML 编码的 XML 字符串(从 mxCell 的 javascript Array() 序列化)。
我的每个单元格都附加了一个用户对象,这就是我使用decodeCell() 的原因 - 该函数执行用户对象 xml 节点与 mxCell 节点的反转。
然后我使用 graph.importCells() 导入每个单元格。
我使用 graph.model.beginUpdate() 和 .endUpdate() 因为我允许“撤消”功能。
setSelectionCells() 选择粘贴的单元格。
关于javascript - 如何将顶点的 XML 表示形式注入(inject)现有的 mxgraph 图中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18857651/