search

KNowledgeOnWebScale / dataflow-visualization

https://knowledgeonwebscale.github.io/dataflow-visualization/
MIT License
5 stars 2 forks source link

download converted flow visualizations #50

Open elsdvlee opened 2 years ago

elsdvlee commented 2 years ago

I would like to be able to download the converted flow visualizations as png, svg or animated gif so it can be easily integrated in presentations and deliverables. It would also be nice to have the option to adapt the image size when downloading. Similar to the actions in https://mermaid.live/.

TiboStr commented 2 years ago

For future reference

Capturing a part of a screen is relatively new (https://w3c.github.io/mediacapture-region/).

The demo (https://github.com/w3c/mediacapture-region/tree/main/demo) does not work yet for me.

There is an easy-to-use React hook to capture your screen (https://github.com/tylerbuchea/use-screen-recording), but you can only capture your entire screen. I don't see how this is more useful than third-party solutions that let you capture a part of your screen, such as peek, which I am using.

TiboStr commented 2 years ago

@elsdvlee, could you take a look at https://knowledgeonwebscale.github.io/dataflow-visualization/#/recording and https://knowledgeonwebscale.github.io/dataflow-visualization/#/recording2.

Do you want me to implement the screenshot and/or capture feature? Personally, I think this is not more useful than using third-party software to capture your screen as webm/gif or use the key combination provided by your OS to take a screenshot.

But if you still want these features, I'll do my best to implement them.

TiboStr commented 2 years ago

There are libraries that let you screenshot a React component, but that does nor work in combination with ReactFlow. Something like this is the result: img

So I think the only way to do it is by doing it like https://knowledgeonwebscale.github.io/dataflow-visualization/#/recording2.

elsdvlee commented 2 years ago

@TiboStr Indeed, this is not more useful than using third-party software to capture your screen as webm/gif or use the key combination provided by your OS to take a screenshot. I was hoping for a Mermaid-like solution (https://mermaid.live/) where you can set a higher resolution for more complicated images. Maybe not close this issue yet, but focus first on other issues.