From 4d0d844e390e8b41d059f1fe646783c0465d1a41 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Tue, 18 Apr 2023 15:27:51 +0200
Subject: [PATCH] feat: constrain export dialog preview size (#6475)

---
 src/components/ImageExportDialog.tsx | 24 +++++++++++-------------
 src/packages/utils.ts                |  6 +++++-
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/ImageExportDialog.tsx b/src/components/ImageExportDialog.tsx
index fb2c1ec8..0e4eff36 100644
--- a/src/components/ImageExportDialog.tsx
+++ b/src/components/ImageExportDialog.tsx
@@ -4,7 +4,6 @@ import { canvasToBlob } from "../data/blob";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
-import { exportToCanvas } from "../scene/export";
 import { AppState, BinaryFiles } from "../types";
 import { Dialog } from "./Dialog";
 import { clipboard } from "./icons";
@@ -15,6 +14,7 @@ import { CheckboxItem } from "./CheckboxItem";
 import { DEFAULT_EXPORT_PADDING, isFirefox } from "../constants";
 import { nativeFileSystemSupported } from "../data/filesystem";
 import { ActionManager } from "../actions/manager";
+import { exportToCanvas } from "../packages/utils";
 
 const supportsContextFilters =
   "filter" in document.createElement("canvas").getContext("2d")!;
@@ -83,7 +83,6 @@ const ImageExportModal = ({
   const someElementIsSelected = isSomeElementSelected(elements, appState);
   const [exportSelected, setExportSelected] = useState(someElementIsSelected);
   const previewRef = useRef<HTMLDivElement>(null);
-  const { exportBackground, viewBackgroundColor } = appState;
   const [renderError, setRenderError] = useState<Error | null>(null);
 
   const exportedElements = exportSelected
@@ -99,10 +98,16 @@ const ImageExportModal = ({
     if (!previewNode) {
       return;
     }
-    exportToCanvas(exportedElements, appState, files, {
-      exportBackground,
-      viewBackgroundColor,
+    const maxWidth = previewNode.offsetWidth;
+    if (!maxWidth) {
+      return;
+    }
+    exportToCanvas({
+      elements: exportedElements,
+      appState,
+      files,
       exportPadding,
+      maxWidthOrHeight: maxWidth,
     })
       .then((canvas) => {
         setRenderError(null);
@@ -116,14 +121,7 @@ const ImageExportModal = ({
         console.error(error);
         setRenderError(error);
       });
-  }, [
-    appState,
-    files,
-    exportedElements,
-    exportBackground,
-    exportPadding,
-    viewBackgroundColor,
-  ]);
+  }, [appState, files, exportedElements, exportPadding]);
 
   return (
     <div className="ExportDialog">
diff --git a/src/packages/utils.ts b/src/packages/utils.ts
index 1fb6cd3d..560fa13c 100644
--- a/src/packages/utils.ts
+++ b/src/packages/utils.ts
@@ -79,7 +79,11 @@ export const exportToCanvas = ({
 
         const max = Math.max(width, height);
 
-        const scale = maxWidthOrHeight / max;
+        // if content is less then maxWidthOrHeight, fallback on supplied scale
+        const scale =
+          maxWidthOrHeight < max
+            ? maxWidthOrHeight / max
+            : appState?.exportScale ?? 1;
 
         canvas.width = width * scale;
         canvas.height = height * scale;