Some shapes are rendered as rectangles

[mark-az]

Hi, I am developing a custom viewer for the drawio diagrams, it is based on the App.min.js library and I am able to load and display diagrams but some objects are rendered as square, for example circles and triangles.

are rendered in this way

In my page I have the following links:
<script src="http://localhost:8080/myviewer/mxgraph/js/app.min.js? type="text/javascript"></script>
<script src="http://localhost:8080/myviewer/mxgraph/js/extensions.min.js? type="text/javascript"></script>
<script src="http://localhost:8080/myviewer/mxgraph/js/shapes.min.js? type="text/javascript"></script>
<script src="http://localhost:8080/myviewer/mxgraph/js/stencils.min.js? type="text/javascript"></script>

what else I need to make all shapes display correctly in my application as they do in drawio application?
thanks in advance,
Marco

[mark-az]

I made some investigations and find that in App.js the module shapes-14-6-5.min.js is loaded (instead of shapes.min.js) but trying to load it gives this error Uncaught TypeError: Cannot read properties of undefined (reading 'prototype') Why ??
Based on this post I also included the Shapes.js from GraphEditor example but the problem is still there.
Any suggestion would be very appreciated.
Marco

[mararad]

"I eventually arranged a test enviroment with JSitor where you can experiment the problem.
You can access the enviroment here: https://jsitor.com/uBUFX0E02

At the moment I have configured only the main JS library (app.min-js) of draw.io, extracted from the official WAR file 16.x and deployed on my own server.
I noted that adding also other libraries (shapes.js, extensions.js, etc ) seems to not give any benefits in order to get the correct shapes and instead some errors are raised, like the following:

Uncaught ReferenceError: mxUtils is not defined at line 1 col 119
Uncaught ReferenceError: mxStencilRegistry is not defined at line 199 col 9

If you can give it a a look would be very helpful"

DID 4625

[mark-az]

Ok, I found what is the problem. The culprit is the 'style' attribute or, better, the shape value in the xml diagram definition. For example, the following tag is not rendered properly

  <mxCell style="triangle;whiteSpace=wrap;html=1" parent="1" vertex="1">
     <mxGeometry x="300" y="230" width="60" height="80" as="geometry" />
  </mxCell>

but adding 'shape=' in the style attribute as in: style="shape=triangle;whiteSpace=wrap;html=1"

solves the problem.
I'd like to know why in some cases the shape value is expliceted and sometimes it is not...

[davidjgraph]

As a general rule use "shape=....". There are a few shapes that have their own style, but you cannot depend on that mechanism.

[mark-az]

Hi David, thanks for this suggestion. Anyway, all these xml that I am using are generated by draw.io not by myself so the problem peraphs resides in how draw.io generates the xml file during save operation. Anyway, I will add "shapes=" everywhere it is missing.

[davidjgraph]

You're probably not loading the default.xml stylesheet

[mark-az]

Hi David, in my viewer I am referencing App.min.js and I see that it dinamically load the default.xml throught this line: mxStyleRegistry.dynamicLoading?mxUtils.load(STYLE_PATH+"/default.xml").getDocumentElement() do you suspect that it can't find the file? In this case I should see some 404 errors in the browser console but they there aren't. Have you a tip on how I could deeper investigate this aspect? thanks, Marco Il giorno mer 13 apr 2022 alle ore 17:47 David Benson < ***@***.***> ha scritto:

…

You're probably not loading the default.xml stylesheet — Reply to this email directly, view it on GitHub <#2536 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMGULSKMBSOKQ3WOTGAZJE3VE3UBFANCNFSM5LUGOESQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[addzz24]

Hi @davidjgraph and @mark-az ,

I'm also facing same problem, I would like to know in-depth about the issue. Following is my style object, Which has radio button shape and "shape=" key is also present still my custom mxgraph viewer is not able to load the custom view.

Reference style object = "html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;"

Thanks,
Addzz

[mark-az]

I don't know... is it rendered as a square?
Have you also tried with shape=radioButton2 or even shape=radioButton ?