finos / legend-studio

Legend Studio
https://legend.finos.org
Apache License 2.0
89 stars 114 forks source link

Feature request: Allow exporting/downloading diagram as an image (PNG/SVG) #127

Open beekemarie opened 3 years ago

beekemarie commented 3 years ago

🚀 Feature Request

Motivation

Right now diagrams are already rendered in a canvas, would be nice to be able to convert this to PNG/SVG if possible so people can download and use this elsewhere.

akphi commented 3 years ago

Looks like ->PNG direction is simple enough - See https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf

For the ->SVG we can use library like https://www.npmjs.com/package/canvas2svg

import * as canvas2svg from 'canvas2svg';

declare module 'canvas2svg';

this.ctx = new canvas2svg.default({
      document: document,
    }) as CanvasRenderingContext2D;

The idea is to clone the diagram renderer bring over the settings and dimensions, and then swap out this.ctx with canvas2svg context and do the print then save the data to SVG. We can use the same strategy to render PNG without background and with customized size, etc.

Or we can just code something similar to https://github.com/gliffy/canvas2svg/blob/eaab317a36a57421711a297d996bc80318185e44/canvas2svg.js but just the part we need