Show error message when canvas to export is too big (#1256) (#2210)

Co-authored-by: dwelle <luzar.david@gmail.com>

src/data/blob.ts

@@ -5,6 +5,7 @@ import { AppState } from "../types";
 import { LibraryData, ImportedDataState } from "./types";
 import { calculateScrollCenter } from "../scene";
 import { MIME_TYPES } from "../constants";
+import { CanvasError } from "../errors";
 
 export const parseFileContents = async (blob: Blob | File) => {
   let contents: string;
@@ -109,3 +110,25 @@ export const loadLibraryFromBlob = async (blob: Blob) => {
   }
   return data;
 };
+
+export const canvasToBlob = async (
+  canvas: HTMLCanvasElement,
+): Promise<Blob> => {
+  return new Promise((resolve, reject) => {
+    try {
+      canvas.toBlob((blob) => {
+        if (!blob) {
+          return reject(
+            new CanvasError(
+              t("canvasError.canvasTooBig"),
+              "CANVAS_POSSIBLY_TOO_BIG",
+            ),
+          );
+        }
+        resolve(blob);
+      });
+    } catch (error) {
+      reject(error);
+    }
+  });
+};

src/data/index.ts

@@ -19,6 +19,7 @@ import { serializeAsJSON } from "./json";
 import { ExportType } from "../scene/types";
 import { restore } from "./restore";
 import { ImportedDataState } from "./types";
+import { canvasToBlob } from "./blob";
 
 export { loadFromBlob } from "./blob";
 export { saveAsJSON, loadFromJSON } from "./json";
@@ -337,28 +338,28 @@ export const exportCanvas = async (
 
   if (type === "png") {
     const fileName = `${name}.png`;
-    tempCanvas.toBlob(async (blob) => {
-      if (blob) {
-        if (appState.exportEmbedScene) {
-          blob = await (
-            await import(/* webpackChunkName: "image" */ "./image")
-          ).encodePngMetadata({
-            blob,
-            metadata: serializeAsJSON(elements, appState),
-          });
-        }
+    let blob = await canvasToBlob(tempCanvas);
+    if (appState.exportEmbedScene) {
+      blob = await (
+        await import(/* webpackChunkName: "image" */ "./image")
+      ).encodePngMetadata({
+        blob,
+        metadata: serializeAsJSON(elements, appState),
+      });
+    }
 
-        await fileSave(blob, {
-          fileName: fileName,
-          extensions: [".png"],
-        });
-      }
+    await fileSave(blob, {
+      fileName: fileName,
+      extensions: [".png"],
     });
   } else if (type === "clipboard") {
     try {
-      copyCanvasToClipboardAsPng(tempCanvas);
-    } catch {
-      window.alert(t("alerts.couldNotCopyToClipboard"));
+      await copyCanvasToClipboardAsPng(tempCanvas);
+    } catch (error) {
+      if (error.name === "CANVAS_POSSIBLY_TOO_BIG") {
+        throw error;
+      }
+      throw new Error(t("alerts.couldNotCopyToClipboard"));
     }
   } else if (type === "backend") {
     exportToBackend(elements, {