Add a PNG output to LegendRenderer

[jahow]

This PR refactors the LegendRenderer class to externalize all "rendering" logic (i.e. using D3 and SVG) to a separate SvgOutput class with atomic operations (add image, add label, etc.).

Then, another PngOutput class is added and LegendRenderer can essentially use both interchangeably. Also added a renderAsImage method to the LegendRenderer API in order to obtain an image without providing a container, useful when the legend is intended to be downloaded instead of being added to the DOM.

To use PNG output:

const renderer = new LegendRenderer({
  // ...
});
renderer.render(target, 'png');

// or
const canvas = await renderer.renderAsImage('png'); // returns a HTMLCanvasElement

The important part is that the default behavior of LegendRenderer (generating an SVG and appending it) is almost entirely unchanged. The only difference is about the root svg namespace which is sometimes added when it was not before (see commits).

Caveat: labels are not shortened in the PNG output. This will need a bit more refactoring so I thought I'd leave that for later.

Remaining to do:

• rewrite tests
• add a small test app to compare different outputs side by side

Also I think it would be nice to set up some wider regression tests so that it's easier to add more features, e.g. automatic width adjustment, more options to customize layout, etc.!

Fixes #390

[jansule]

From a first glance, this looks really good! Thanks @jahow

Could you let us know, when this is ready for review?

[jahow]

Sure, hopefully in the coming days!

[jahow]

Making slow progress on this but I haven't forgotten 🤓

[jahow]

@jansule the test coverage is now pretty good, this is ready for review.

I couldn't make a test app yet but this is in my plans for later. At least this PR should keep the default behaviour unchanged and not break anything!

[jansule]

This is great work @jahow! Thanks

[jahow]

@jansule this is good to merge!