search

damonsk / vscode-wardley-maps

A Wardley Maps for Visual Studio Code extension supporting rendering and editing maps-as-code.
https://onlinewardleymaps.com/
MIT License
66 stars 12 forks source link

Is there any possibility of being able to export the displayed map to PNG from VSCode? #20

Closed damonsk closed 9 months ago

damonsk commented 10 months ago 
          Is there any possibility of being able to export the displayed map to PNG from VSCode?  Right now, I have to go to https://onlinewardleymaps.com and paste in my markup from VSCode, then use the web PNG export...Kind of a drag.

Originally posted by @jaxley in https://github.com/damonsk/onlinewardleymaps/issues/71#issuecomment-925044179

dkokic commented 10 months ago

Also, SVG would be nice. 🤓 I am new to VS Code Extensions and wonder if this could be a good exercise to dive into it.

damonsk commented 10 months ago

My thoughts on how this could be achieved..

We have html2canvas which would generate the PNG.

https://github.com/damonsk/onlinewardleymaps/blob/b8ef17c8032587006e236aa2b293c86478c51d97/frontend/src/components/MapEnvironment.js#L293

For SVG it would be the same process but getting the svg markup from the map.

https://github.com/damonsk/onlinewardleymaps/blob/b8ef17c8032587006e236aa2b293c86478c51d97/frontend/src/components/MapEnvironment.js#L303

This example shows how to save a file - https://github.com/microsoft/vscode-extension-samples/blob/94c1b179c75242072e69fff8199d08e2e5ff4335/fsconsumer-sample/src/extension.ts#L71 to write the file.

Another way would be to create a new file tab, and set the text to be that of the svg (which is just xml) and allow the user to save via VSCode.

https://code.visualstudio.com/api/references/vscode-api#WorkspaceEdit - createFile.