Exporting a graph with 2000+ signal to png fails

[Matjaz-B]

Expected Behavior

Be able to export graph to PNG.

Current Behavior

• In online interpreter pressing on export to PNG does nothing
• In mscgen-preview (Atom) it generates a file on disk, with few bytes in it

Steps to Reproduce (for bugs)

1. Open https://www.dropbox.com/s/a7oric0l7x55g8j/error_producer.msc?dl=1 (little less than 3000 signals)
2. The preview will be shown and it will be correct (on online interpreter, and in atom)
3. Export to SVG will work
4. Export to PNG will fail

Context

I'm trying to generate a graph of actual communication between two nodes.

Your Environment

• Version used: Online v1.12.3; atom-mscgen-preview v1.12.3 (Atom 1.20.1)
• Browser Name and version: Firefox 55.0.3 (64-bit)
• Operating System and version (desktop or mobile): desktop

[sverweij]

• Hi @Matjaz-B I've reproduced the problem (in firefox and chrome) and will do a root cause analysis in the coming days. It might be that we bump into limits of the canvas element in chrome and ff (which both the online version and atom use for transformation to png/jpeg).

Alternatives in the mean time:

• If you'r on a Mac: export in safari does work
• If you're on Linux or Mac: the mscgen command line (mscgenjs-cli ) can convert your chart to png as well (msgenjs -T png error_producer.msc)

[Matjaz-B]

Hello sverweij,

Thanks for quick response. I also think that issue must lie in some limits of export.

Currently this is more of annoyance to me, but not a problem - as SVG export works fine.

[sverweij]

The root cause is indeed restrictions on the canvas element in various browsers.

• In theory the canvas can be quite big (width & height are unsigned long) so (2³²-1) * (2³²-1)). Your chart would fit in that comfortably, being "only" 72481 pixels high.
• Browsers, however implement their own limits:
  • Firefox & chrome support about 32000 pixels width & height (conspicuously close to the max of a signed short; 2¹⁵-1).
  • Safari 11 supports max(width * height) < 2³¹ - 1
• All browser engines seem to fail silently when asked to render something too big.

Next steps:

• mscgen.js.org: Add an info box when someone attempts to export a chart too big for the browser's canvas to handle.
  (In the browser here's no practical means to convert svg to png other than canvas).
• atom-mscgen-preview:
  • The same.
  • Look into alternatives to do svg -> png conversions?
    When I implemented mscgen-preview the alternatives were unpractical, unreliable or both - but that might have changed.

References:

• Whatwg definition of the canvas element.
• Stack overflow entry with a (still mostly accurate) list of canvas dimension maximums per browser
• A jsfiddle to determine the max dimensions of a canvas - it's one of the answers to the above stack overflow question.
• Wikipedia article with the maximums of various integer variants.

[sverweij]

@Matjaz-B thanks for raising this issue! It's making mscgen_js a better product.

• I've updated mscgen.js.org to include some information when the chart is too big for the browser to handle. As noted in the previous comment: it's the best I can do at the moment (as far as I can see - suggestions are welcome!)
• atom-mscgen-preview will follow suit (as will atom-graphviz-preview-plus and atom-state-machine-cat-preview which will bump into the same issue when presented with big output) - but probably not this weekend.

[Matjaz-B]

Great. I also think that your fix is sufficient.

I've been playing around with some SVG to PNG (or other bitmap formats) and none of them seems to work correctly. Some of them cannot generate bitmap image at all. SVG format is sufficiently supported and it makes sense to use it.

Thanks for fast analysis and fix.