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 :

  db-schema-visualizer/packages/json-table-schema-visualizer/src/components/DiagramViewer/DiagramWrapper.tsx

  Line 28 in d872d32

  const stageRef = useRef<null | CoreStage>(null);

• 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 :

  db-schema-visualizer/packages/extension-shared/extension/views/helper.ts

  Lines 44 to 45 in d872d32

  	public static handleWebviewMessage(
  	command: string,

  
  - sending a command from the webview :

  db-schema-visualizer/packages/extension-shared/src/App.tsx

  Line 37 in d872d32

  window.vsCodeWebviewAPI?.postMessage(updateThemeMessage);

---

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