Custom viewer doesn't render correctly some shapes

631 Views Asked by At

I realized a custom viewer to display diagrams realized with diagrams.net editor. More or less my code is:

<script src="http://localhost:8080/my-viewer/mxgraph/js/app.min.js type="text/javascript"></script>
<script src="http://localhost:8080/my-viewer/mxgraph/js/shapes.min.js type="text/javascript"></script>
<script src="http://localhost:8080/my-viewer/mxgraph/js/stencils.min.js type="text/javascript"></script>
<script src="http://localhost:8080/my-viewer/mxgraph/js/extensions.min.js type="text/javascript"></script>

    var graph = new mxGraph(container)
    diagram = mxUtils.parseXml(xmlDiagram);
    codec = new mxCodec(diagram);
    codec.decode(diagram.documentElement, graph.getModel());
    graph.fit();

It works quite well but I noticed that some shapes are rendered as rectangles instead of circles,triangles and ellipses, like in the following picture where on the right I highlighted in red the wrong shapes: enter image description here

I suppose I am missing to include something concerning styles or shapes (JS module, xml file, ...) from draw.io webapp but I can't figure out which one. Can anyone give me some hint? Thanks in advance, Marco

1

There are 1 best solutions below

0
On

I eventually found the solution. The problem is that some shapes in the diagram definition file doesn't have the 'shape' property. For example, triangle is generated by this tag:

<mxCell style="triangle;whiteSpace=wrap;html=1" ...>

but it should be

<mxCell style="shape=triangle;whiteSpace=wrap;html=1" ...>

See here the full discussion on draw.io project Github.