Description
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
-
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 -
How to generate the image
Since the plugin usesKonva.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%20compositeWe will keep the image as PNG
We need to make sure we capture only those parts of the scene that have a drawing.
-
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 :
- 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 :
- sending a command from the webview :
Activity