Increase resolution of Draw.io diagrams

[vincentbernat]

Describe the feature you'd like

Draw.io diagrams should be generated at double the resolution.

Describe the benefits this would bring to existing BookStack users

This will make diagrams look nicer on HiDPI devices. Currently, they look a bit blurry, notably the fonts. This may also be noticeable on regular displays.

Can the goal of this request already be achieved via other means?

Another possibility would be to render them as SVG (see #1170). As we don't need them to be interactive, they can be rendered in <img> tags (but this does not solve all the problems reported in #1170).

Have you searched for an existing open/closed issue?

• I have searched for existing issues and none cover my fundemental request

How long have you been using BookStack?

0 to 6 months

Additional context

No response

[vincentbernat]

As a proof of concept, I tried this patch:

diff --git a/resources/js/services/drawio.js b/resources/js/services/drawio.js
index 67ac4cc0ecb3..4b1389afa6df 100644
--- a/resources/js/services/drawio.js
+++ b/resources/js/services/drawio.js
@@ -55,7 +55,7 @@ function drawEventExport(message) {
 }
 
 function drawEventSave(message) {
-    drawPostMessage({action: 'export', format: 'xmlpng', xml: message.xml, spin: 'Updating drawing'});
+    drawPostMessage({action: 'export', format: 'xmlpng', scale: 2, xml: message.xml, spin: 'Updating drawing'});
 }
 
 function drawEventInit() {
diff --git a/resources/js/wysiwyg/plugin-drawio.js b/resources/js/wysiwyg/plugin-drawio.js
index 9f4a065adf86..57fbb9629795 100644
--- a/resources/js/wysiwyg/plugin-drawio.js
+++ b/resources/js/wysiwyg/plugin-drawio.js
@@ -26,7 +26,7 @@ function showDrawingManager(mceEditor, selectedNode = null) {
                 pageEditor.dom.setAttrib(selectedNode, 'drawio-diagram', image.id);
             });
         } else {
-            const imgHTML = `<div drawio-diagram="${image.id}" contenteditable="false"><img src="${image.url}"></div>`;
+            const imgHTML = `<div drawio-diagram="${image.id}" contenteditable="false"><img src="${image.url}" style="with:50%;height:50%;"></div>`;
             pageEditor.insertContent(imgHTML);
         }
     }, 'drawio');

It does not work:

• draw.io seems to ignore the "scale" parameter (I have looked at the source code to find it, but I am a bit unsure)
• the style attribute is not applied (but maybe there is some sanitizing?)

I'll investigate more later.

[ssddanbrown]

Thanks @vincentbernat.
I remember having a quick play with this a while back.

Just to confirm, are you building the JS via the npm commands upon source change? The sources are not used directly.

I have it in mind that the export size change is simple (Just the scale change as you've set) but juggling the dimensions is tricky. Ideally you'd want to set actual height/width attributes on the images of the correct original (half-image-file-dimensions after 2x scale) sizes. I think width/height via styles are going to be relative the the wrapper/parent el, so not really viable. You can scale via transforms but that's really a hack, and not a direction I'd want to go since it'll have other offset affects (blurriness, portability).
Should be do-able but would require storing and/or query of image dimensions at multiple stages (Insert, Edit, Replace etc...), complicated a little further with back-compat in mind.

[vincentbernat]

No, I didn't rebuild the JS. I'll try that.

I know that transform won't work as it will leave the space blank. This SO question contains various solutions that could be tested: https://stackoverflow.com/questions/8397049/how-can-i-resize-an-image-to-a-percentage-of-itself-with-css.

[davidjgraph]

Does bookstack have the ability to apply an XML config? If yes, we can add a config option for default PNG resolution.

[ssddanbrown]

Hi @davidjgraph 👋!

Does bookstack have the ability to apply an XML config?

I'm not sure about the XML aspect of that question.
Although I don't use the configure event specifically by default, we do already expose it for users to hook in and set their own default config where desired, so if there's an option exposed there we could make use of it.

[davidjgraph]

Sorry, brainfart, I meant JSON.

Added as jgraph/drawio#3497

[ssddanbrown]

Thanks @davidjgraph!

I have just tested this though, and the scale option on the export postMessage seems to work fine and as I'd expect, so not sure we'd specifically need the extra option to change the default, so please don't spend time on that on our account since it's not needed unless I've misunderstood something.

[vincentbernat]

FI, since my instance of BookStack was empty, I just switched from xmlpng to xmlsvg and image/png to image/svg+xml, modify extension for storing images to .svg and it works fine.

[ssddanbrown]

I realised this is already open under #3743 so I'm going to close this off as a duplicate.