From e331ba77b9d74f18a1aac8a3fb5e7f658079cd5c Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Sun, 13 Feb 2022 08:40:49 -0800
Subject: [PATCH] Fix export to images

---
 .../components/export/BinaryImageExporter.ts  | 51 ++++++++++---------
 .../action-dispatcher/export-dialog/index.tsx |  3 +-
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/packages/mindplot/src/components/export/BinaryImageExporter.ts b/packages/mindplot/src/components/export/BinaryImageExporter.ts
index 5285c786..ad93411b 100644
--- a/packages/mindplot/src/components/export/BinaryImageExporter.ts
+++ b/packages/mindplot/src/components/export/BinaryImageExporter.ts
@@ -43,37 +43,38 @@ class BinaryImageExporter extends Exporter {
     throw new Error('Images can not be exporeted');
   }
 
-  async exportAndEndcode(): Promise<string> {
+  exportAndEncode(): Promise<string> {
     const svgExporter = new SVGExporter(this.svgElement);
-    const svgUrl = await svgExporter.exportAndEncode();
+    const svgUrl = svgExporter.exportAndEncode();
+    return svgUrl.then((value: string) => {
+      // Get the device pixel ratio, falling back to 1. But, I will double the resolution to look nicer.
+      const dpr = (window.devicePixelRatio || 1) * 2;
 
-    // Get the device pixel ratio, falling back to 1. But, I will double the resolution to look nicer.
-    const dpr = (window.devicePixelRatio || 1) * 2;
+      // Create canvas ...
+      const canvas = document.createElement('canvas');
+      canvas.setAttribute('width', (this.width * dpr).toString());
+      canvas.setAttribute('height', (this.height * dpr).toString());
 
-    // Create canvas ...
-    const canvas = document.createElement('canvas');
-    canvas.setAttribute('width', (this.width * dpr).toString());
-    canvas.setAttribute('height', (this.height * dpr).toString());
+      // Render the image and wait for the response ...
+      const img = new Image();
+      const result = new Promise<string>((resolve) => {
+        img.onload = () => {
+          const ctx = canvas.getContext('2d');
+          // Scale for retina ...
+          ctx.scale(dpr, dpr);
+          ctx.drawImage(img, 0, 0);
 
-    // Render the image and wait for the response ...
-    const img = new Image();
-    const result = new Promise<string>((resolve) => {
-      img.onload = () => {
-        const ctx = canvas.getContext('2d');
-        // Scale for retina ...
-        ctx.scale(dpr, dpr);
-        ctx.drawImage(img, 0, 0);
+          const imgDataUri = canvas
+            .toDataURL(this.getContentType())
+            .replace('image/png', 'octet/stream');
 
-        const imgDataUri = canvas
-          .toDataURL(this.getContentType())
-          .replace('image/png', 'octet/stream');
-
-        URL.revokeObjectURL(svgUrl);
-        resolve(imgDataUri);
-      };
+          URL.revokeObjectURL(value);
+          resolve(imgDataUri);
+        };
+      });
+      img.src = value;
+      return result;
     });
-    img.src = svgUrl;
-    return result;
   }
 }
 export default BinaryImageExporter;
diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx
index be4ec8a5..7ad3d011 100644
--- a/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx
@@ -15,6 +15,7 @@ import Client from '../../../../classes/client';
 import { activeInstance } from '../../../../redux/clientSlice';
 
 import { useSelector } from 'react-redux';
+import SizeType from '@wisemapping/mindplot/src/components/SizeType';
 
 type ExportFormat = 'svg' | 'jpg' | 'png' | 'txt' | 'mm' | 'wxml' | 'xls' | 'md';
 type ExportGroup = 'image' | 'document' | 'mindmap-tool';
@@ -77,7 +78,7 @@ const ExportDialog = ({
 
     const exporter = (formatType: ExportFormat): Promise<string> => {
         let svgElement: Element | null = null;
-        let size;
+        let size: SizeType;
         let mindmap: Mindmap;
 
         const designer: Designer = global.designer;