Implementing the saving of the diagram as an image

[BOCOVO]

Implementing the saving of the diagram as an image

This issue is about saving of the diagram as an image in a file.

The user flow

To implement that, we will add a new button to the toolbar. When the user clicks on this button, the VsCode saving dialog should be open and asks him where to save the file. When the user selects a location, the image will be saved in the location.

Some documentation

1. How to open the VsCode saving dialogs Here is the documentation : https://code.visualstudio.com/api/references/vscode-api#:~:text=or%20undefined.-,showSaveDialog,-(options%3F An usage example : https://github.com/Durandal14/vscode-extension-dbml-viewer/blob/main/src/extension.ts#L118C37-L118C51

2. How to generate the image Since the plugin uses Konva.js we that use the provided method for create image. Here is the documentation : https://konvajs.org/api/Konva.Node.html#toImage:~:text=()%3B-,toDataURL(config),-Creates%20a%20composite

   We will keep the image as PNG

   We need to make sure we capture only those parts of the scene that have a drawing.

3. Some indication about the code

   • The toolbar component : https://github.com/BOCOVO/db-schema-visualizer/blob/6ad2a76db6d362b89c4822a0344f1c10d397c396/packages/json-table-schema-visualizer/src/components/Toolbar/Toolbar.tsx
   • The scene reference : https://github.com/BOCOVO/db-schema-visualizer/blob/d872d329628113a7b8ff418d205aaaff017d1898/packages/json-table-schema-visualizer/src/components/DiagramViewer/DiagramWrapper.tsx#L28
   • Sending message from the UI to the extension "Backend" The documentation : https://code.visualstudio.com/api/extension-guides/webview#passing-messages-from-an-extension-to-a-webview How it is implemented in the plugin :
     • handling the command server-side : https://github.com/BOCOVO/db-schema-visualizer/blob/d872d329628113a7b8ff418d205aaaff017d1898/packages/extension-shared/extension/views/helper.ts#L44-L45
     • sending a command from the webview : https://github.com/BOCOVO/db-schema-visualizer/blob/d872d329628113a7b8ff418d205aaaff017d1898/packages/extension-shared/src/App.tsx#L37

---

hi @ayushsaini12

[AleDiazACTIU]

When can we expect the release version so that we can export .png, .svg or .pdf?

[ayushsaini12]

currently a little busy with work and festivals give me few weeks will be updating you soon