Diagrams are not shown on print preview

[slauriere]

Steps to reproduce

1. Create a diagram
2. Add a shape to it
3. Save and view the page
4. Check that the files "diagram.png" and "diagram.svg" are present as page attachments
5. Hit More Actions > Print Preview

Actual result

• The diagram shows up for a few milliseconds and disappears instead of remaining visible

NB: there is no error in the JavaScript console

Expected result

• The diagram is present on the page and remains visible without disappearing

Environment

• Diagram Pro 1.15.5
• XWiki 13.0
• Firefox or Chrome

[lucaa]

@slauriere please add the "expected result" to this ticket (even if it may seem obvious) so that it's explicit what doesn't actually work. Also, detail a little point 4 from the steps to reproduce: the "check" means that at that point the 2 files are expected to be present as page attachments?

[slauriere]

@lucaa I've updated the ticket description indeed: "Expected result" section added + point 4 about the file check slightly reworded

[ane-gabriela]

Issue reproduces on XWiki 12.10.5 and 9.11, Chrome 89, Diagram Application (Pro) 1.16-rc-2

Diagram:

More actions > Print Preview:

[mflorea]

The print preview loads print.css which forces this style:

#body, #xwikimaincontainer, #xwikimaincontainerinner, #xwikicontent, #mainContentArea {
  ...
  width: auto !important;
}

which makes the diagram container (child of #xwikicontent) have 0 width. This in turn triggers this code from GraphViewer.js:

if (this.checkVisibleState && container.offsetWidth == 0 && typeof MutObs !== 'undefined') {
  // Delayed rendering if inside hidden container and event available
  ...

Basically draw.io thinks the diagram container is hidden and thus delays (by default) the rendering until it becomes visible. Which doesn't happen in our case because our diagram container is visible but has 0 width. The easy fix is to set a minimum width on the diagram container.