Add button to export svg

src/pages/ModelizerDrawPage.vue

@@ -1,7 +1,7 @@
 <template>
   <q-page class="bg-grey-3">
     <div
-      id="root"
+      id="view-port"
       data-cy="draw-container"
       @dragover.prevent
       @drop.prevent="dropHandler"
@@ -10,8 +10,9 @@
     </div>
 
     <q-page-sticky :offset="[20, 20]">
-      <q-btn-group>
+      <div class="row">
         <q-btn
+          class="q-mr-md"
           icon="fa-solid fa-sitemap"
           :label="$t('page.diagrams.actions.rearrange')"
           stack
@@ -21,7 +22,17 @@
           data-cy="rearrange-button"
           @click="arrangeComponentsPosition()"
         />
-      </q-btn-group>
+        <q-btn
+          icon="fa-solid fa-image"
+          :label="$t('page.diagrams.actions.export')"
+          stack
+          no-caps
+          color="white"
+          text-color="black"
+          data-cy="export-button"
+          @click="exportSvg()"
+        />
+      </div>
     </q-page-sticky>
   </q-page>
 </template>
@@ -183,6 +194,27 @@ async function onRequestEvent(event) {
   }
 }
 
+/**
+ * Export diagram as svg.
+ */
+function exportSvg() {
+  const content = data.plugin.exportSvg('view-port');
+  const blob = new Blob([content], { type: 'image/svg+xml' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+
+  a.href = url;
+  a.download = 'diagram.svg';
+
+  document.body.appendChild(a);
+
+  a.click();
+
+  document.body.removeChild(a);
+
+  URL.revokeObjectURL(url);
+}
+
 /**
  * Update plugin, draw components and update component templates array.
  * @returns {Promise<void>} Promise with nothing on success.
@@ -200,7 +232,7 @@ async function initView() {
       data.plugin,
       query.value.path,
     ).then(() => {
-      data.plugin.initDrawer('root', false);
+      data.plugin.initDrawer('view-port', false);
       data.plugin.arrangeComponentsPosition(null, true);
       data.plugin.draw();
     }),
@@ -303,7 +335,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-#root {
+#view-port {
   height: calc(100vh - 76px);
   width: 100%;
 }
@@ -312,7 +344,7 @@ onUnmounted(() => {
 <style lang="scss">
 // Quasar sets overflow to 'hidden' on all svg.
 // In our case, it needs to be set to 'visible' to manage position with % in plugin models.
-div#root svg {
+div#view-port svg {
   overflow: visible !important;
   display: unset;
   height: 100%;

tests/unit/pages/ModelizerDrawPage.spec.js

@@ -51,6 +51,7 @@ jest.mock('src/composables/PluginManager', () => ({
     resetDrawerActions: jest.fn(),
     addComponent: jest.fn(),
     resize: jest.fn(),
+    exportSvg: jest.fn(() => 'content'),
   })),
   initComponents: jest.fn(() => Promise.resolve()),
   renderConfiguration: jest.fn(() => Promise.resolve()),
@@ -159,7 +160,7 @@ describe('Test page component: ModelizerDrawPage', () => {
   });
 
   describe('Test function: initView', () => {
-    it('should call draw with "root" parameter', async () => {
+    it('should call draw with "view-port" parameter', async () => {
       const initComponentsMock = jest.fn(() => Promise.resolve());
 
       PluginManager.initComponents.mockImplementation(initComponentsMock);
@@ -168,7 +169,7 @@ describe('Test page component: ModelizerDrawPage', () => {
       await wrapper.vm.initView();
 
       expect(PluginManager.initComponents).toHaveBeenCalled();
-      expect(wrapper.vm.data.plugin.initDrawer).toHaveBeenCalledWith('root', false);
+      expect(wrapper.vm.data.plugin.initDrawer).toHaveBeenCalledWith('view-port', false);
       expect(wrapper.vm.data.plugin.draw).toHaveBeenCalled();
     });
 
@@ -182,6 +183,18 @@ describe('Test page component: ModelizerDrawPage', () => {
     });
   });
 
+  describe('Test function: exportSvg', () => {
+    it('should call exportSvg with "view-port" parameter', () => {
+      global.URL.createObjectURL = jest.fn();
+      global.URL.revokeObjectURL = jest.fn();
+      expect(wrapper.vm.data.plugin.exportSvg).toHaveBeenCalledTimes(0);
+
+      wrapper.vm.exportSvg();
+
+      expect(wrapper.vm.data.plugin.exportSvg).toHaveBeenCalledWith('view-port');
+    });
+  });
+
   describe('Test function: dropHandler', () => {
     it('should call plugin.addComponent if component is not a template and call renderModel', async () => {
       const param = {