jgraph / mxgraph

mxGraph is a fully client side JavaScript diagramming library
Other
6.83k stars 2.06k forks source link

[BUG] source and target not encoded when using mxCodec #423

Closed mbmaeso closed 4 years ago

mbmaeso commented 4 years ago

Hello, I found out that this code example from mxCodec to encode a graph model does not work as expected:

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

When a normal mxGraph instance is provided, everything is encoded correctly except the attributes 'source' and 'target' of an edge, the same that happens in this stackoverflow chat, which is not resolved yet (if @Nickath eventually discovered why that happens, it would be really a big help).

While debugging, the method mxCodec.prototype.getId() returns false when it checks if an Edge is an instance of mxCell. How could it be fixed?

Working code:

const encoder = new mx.mxCodec();
const xmlNode = encoder.encode(graph.getModel());

Input graph: graph

Graph information: graph_info

Edge when encode() is called edge_encode

Encoding source and value of the edge edge_encodeObject(source)

method getId() that returns null when checking source's value edge_getId(source)

Also, I am using the mxObjectCodec.encode written in the jsondata.html example:

  constructor(private _electronService: ElectronService) {
    this.objectCodec = new mx.mxObjectCodec(new EdgeData());
    this.objectCodec.encode = (enc, obj) => {
      const node = enc.document.createElement('EdgeData');
      mx.mxUtils.setTextContent(node, JSON.stringify(obj));
      return node;
    };
    mx.mxCodecRegistry.register(this.objectCodec);
  }

Output when encode is finished:

<mxGraphModel>
    <root>
        <mxCell value="Started" id="2" vertex="1">
            <mxGeometry x="140" y="30" width="80" height="40" as="geometry"/>
        </mxCell>
        <mxCell value="Stopped" id="3" vertex="1">
            <mxGeometry x="140" y="190" width="80" height="40" as="geometry"/>
        </mxCell>
        <mxCell id="4" edge="1">
            <EdgeData as="value">{"name":"stopCar","parameters":[]}</EdgeData>
            <mxGeometry relative="1" as="geometry"/>
        </mxCell>
    </root>
</mxGraphModel>

I am developing this using angular 7, electron and the version 4.0.5 of mxgraph.

Thank you in advance!

davidjgraph commented 4 years ago

Do you have a https://stackoverflow.com/help/minimal-reproducible-example in plain JavaScript with Angular or Electron?

mbmaeso commented 4 years ago

I tried to recreate it through a Stackblitz app, but it is not performing the same behavior as in local. If someone encounters this problem again, I would recommend to continue the discussion here. However, many thanks for your interest