0

I am using mxGraph for an application that requires to encode the graph into XML and load it whenever needed.

I'm using the following code for encoding the graph

const encoder = new mxCodec();
const result = encoder.encode(graph.getModel());
const xml = mxUtils.getXml(result, true);
console.log(xml, "encoded graph xml");

for setting up mxGraph, following code is used

const graph = new mxGraph(this.graphContainer.nativeElement);
const parent = graph.getDefaultParent();
graph.setConnectable(true);
graph.setAllowDanglingEdges(false);
graph.getModel().beginUpdate();
const source = graph.insertVertex(parent, '1', 'Node 1', 10, 10, 200, 100, "shape=image;image=assets/images/ellipse.svg");
const target = graph.insertVertex(parent, '2', 'Node 2', 200, 200, 200, 200, "shape=image;image=assets/images/circle.svg");
graph.insertEdge(parent, '12', 'hi', source, target, 'strokeColor=black;');
graph.getModel().endUpdate();

the result i am getting is 

<mxGraphModel><root><mxCell id="0"/><mxCell id="1"/><mxCell value="Node 1" style="shape=image;image=assets/images/ellipse.svg" id="2" vertex="1"><mxGeometry x="10" y="10" width="200" height="100" as="geometry"/></mxCell><mxCell value="Node 2" style="shape=image;image=assets/images/circle.svg" id="3" vertex="1"><mxGeometry x="200" y="200" width="200" height="200" as="geometry"/></mxCell><mxCell value="hi" style="strokeColor=black;" id="12" edge="1"><mxGeometry relative="1" as="geometry"/></mxCell></root></mxGraphModel>

the above XML has a mxCell element with edge="1" but the source and target are missing from that element.

I don't know what I am doing wrong here. I followed https://jgraph.github.io/mxgraph/docs/js-api/files/io/mxCodec-js.html document.

Sankalp Kataria
  • 479
  • 7
  • 24
  • The result you are getting from `mxUtils.getXml(result, true);` is the xml you posted? – NickAth Jul 10 '19 at 10:41
  • @NickAth, yes. I am not getting source, target or even parent for the edge – Sankalp Kataria Jul 10 '19 at 14:43
  • This is very strange.. what is the `this.graphContainer.nativeElement` object? Could you try create your `mxGraph` object like this? ` var model = new mxGraphModel(); graph = new mxGraph(container, model); ` where `container` is a `div` element? – NickAth Jul 10 '19 at 15:02
  • I am using angular 7 and `this.graphContainer.nativeElement` contains the div element which is the container. I will try the method you've suggested and let you know – Sankalp Kataria Jul 10 '19 at 15:28
  • then try `var model = new mxGraphModel(); var graph = new mxGraph(this.graphContainer.nativeElement, model);` – NickAth Jul 10 '19 at 15:31
  • @NickAth, I've got the parent this time but target and source are still missing – Sankalp Kataria Jul 10 '19 at 15:49
  • Did you debug? the `mxCell` object that is `edge` has any `source` and `target` values inside it? – NickAth Jul 10 '19 at 16:00
  • @NickAth Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/196301/discussion-between-sankalp-kataria-and-nickath). – Sankalp Kataria Jul 11 '19 at 06:28

0 Answers0