Shapes are cutted

[update-freak]

I recognised that the shapes are cutted.
E.g.
Left side of the circle

or top/bottom side of the box

Would be great if you can fix this. Thanks a lot

[jdehaan]

Looks like the clipping around the svg is too hard.. I need to reproduce and then hope it is something I can solve from "outside" the bpmn library. I let you know the progress as soon there are news, latest by next week.

[jdehaan]

Unfortunately I could not reproduce the issue straightforwardly and failed in trying harder. When I edit the diagrams I always get some padding that avoids the issue. Could you give me the source xml for your examples and maybe tell me which other plugins and template you have installed? I think there might be some interaction between styles from another plugin (unsure but I need the info to verify) or the base styles applied to your wiki instance.

[jdehaan]

If you feel technically able to, can you also use the browser built-in css inspector and look at the styles applied to the svg parts being cut? That information is actually the first thing I would look at to compare it to the normal situation without extra plugins/template installed. The difference is likely the thing that needs a more precise style to avoid the conflict if that is the case. If not I will try to reproduce based on your info, but if you currently observe the situation that might shortcut the debugging process.

[update-freak]

I tried again with a clean installation of dokuwiki (local on Windows, not my NAS) (no plugins installed, only bpmnio).
Then I created the attached chart in camunda modeler (https://github.com/camunda/camunda-modeler/releases) and had the same issue. (I changed the extension bpmn to txt )
diagram_1.txt

[jdehaan]

I will look at this in detail on monday. Thanks for providing me with the information!

[jdehaan]

I tried to reproduce but I always get enough padding to not observe the cut-off...:

If you can right click + inspect and then go to the svg region and below observe when the blue highlighted area starts to look incorrect, can you let me know which css attributes you can see? Unfortunately without a reproduction I can only hope you can provide me with the details I need...

It would be interesting for me if you see the width and height at 100% and what is the transform coordinates you see on the line with the viewport?

I suspect the problem is maybe there because these coordinates are calculated dynamically and maybe in a bad way on your machine for some reason. Which browser do you use? I test with Firefox and chrome

[jdehaan]

Ah I just noticed in your case the text in the box is wrapped and in mine it's not... As the rendering is from the library and should yield the same results this might be one of the differences we have... I see 12px Arial sans... Likely on your side it's something else?

[jdehaan]

It's really weird even if I put wrong values I cannot really get to the same point as in your screenshot. I have tried to exaggerate the sizes and put overflow: visible in some places probably that is one element of the fix. But I could not manage to get a plausible place where to put that... I really need your help to find out... We could manage to have a call with screen share if it's possible to you to clarify the things but as it's a hobby project I work only late CET on it.... But can do an exception. I believe something is coming from the environment like font sizes, default fonts, browser styles that makes the size computation either from the plugin or from the bpmnjs lib go off by one pixel somewhere leading to the cut-off. But guessing is really a bad idea because so many things can go wrong that it's better to investigate and analyze the real situation...

[update-freak]

Thanks for investigating. Here is the result with the investigate button:

I'm using Windows 11 24H2 with Firefox 137.0
On my Android phone with Fennec 136 I got the same issue.
We can also have a call to check it

[jdehaan]

Could you attach a saved page via the "save as html" function of the browser?. I believe then I will be able to see the differences between the html and css on your and my side and in that case I will be able to remedy to it. The Pic is unsharp but it becomes clear the svg has no margin at all opposed to what happens on my side. I am sorry to have to let you do half technical things... I wished it would have been easy for me to reproduce it on my side. Best regards