Implements remarkup rendering with the drawio viewer component
Needs ReviewPublic
Actions

Authored by bekay on Sun, Apr 13, 10:42.

Details

Reviewers

mturdus

Maniphest Tasks

T15806: Use drawio viewer for rendering of diagrams

Summary

This is a big rewrite of the remarkup rendering of diagrams. This will shift the rendering from just including the the PNG image to including drawio's static viewer script and let it handle the raw XML data of the diagram.

Benefits are: crisp and always sharp rendering in any size, standalone modal with resizing, an edit button, page selection.

So what has changed?

I have added a parser to extract the diagram data from the saved PNG and use it to get the XML and to compare the versions when editing a diagram.
For rendering I used the official remote https://viewer.diagrams.net/js/viewer-static.min.js because the local version wouldn't work. To get this script to load I have whitelisted https://viewer.diagrams.net as a CSP Uri in the constructor of the DiagramApplication.
I have added/changed some remarkup options. They are now described in the new documentation.
The rendering now adds a data-mxgraph attribute to the diagram container with all important data for the viewer script. The remarkup-image script now will
- test if there is a diagram container on the page
- if there is, it will load the viewer script
- then it will process the containers rendering the diagrams with the mxgraph data
- it will repeat this after every ajax request (so the diagrams are rendered correctly in remarkup previews)

ref T15806

Test Plan

Patch your version, flush your cache and try to add diagrams with different options in different places. See if there are rendered correctly.

Diff Detail

Repository

R5 Diagrams

Branch

T15806

Lint

No Lint Coverage

Unit

No Test Coverage

Build Status

Buildable 1867
Build 1867: arc lint + arc unit

Event Timeline

bekay created this revision.Sun, Apr 13, 10:42

Herald added subscribers: Cigaryno, Matthew, valerio.bozzolan, tobiaswiese. · View Herald TranscriptSun, Apr 13, 10:42

bekay requested review of this revision.Sun, Apr 13, 10:42

Harbormaster completed remote builds in B1867: Diff 2877.Sun, Apr 13, 10:43

bekay edited the test plan for this revision. (Show Details)Sun, Apr 13, 10:52

This looks very pro !

I found one small issue:
the page parameter seems to be zero-based. Can you make it one-based, so that the first page can be accessed with page=1 instead of page=0 ?

One other request:
the rsrc/behavior-diagram-extension.js contains these lines:

// change layout settings of area where btnSave belongs to so
// that the dropdown menu is not hidden under the drawing area
btnSave.parentNode.style.position = 'fixed';

if you remove these, you are able to use a more recent draw.io version (e.g. v26.2.8 instead of v24.2.5)

In D25962#25652, @mturdus wrote:

This looks very pro !

I found one small issue:
the page parameter seems to be zero-based. Can you make it one-based, so that the first page can be accessed with page=1 instead of page=0 ?

Will do.

In D25962#25652, @mturdus wrote:
One other request:
the rsrc/behavior-diagram-extension.js contains these lines:
// change layout settings of area where btnSave belongs to so
// that the dropdown menu is not hidden under the drawing area
btnSave.parentNode.style.position = 'fixed';
if you remove these, you are able to use a more recent draw.io version (e.g. v26.2.8 instead of v24.2.5)