feat: save exportScale in AppState (#3580)

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

src/actions/actionExport.tsx

@@ -13,6 +13,10 @@ import { KEYS } from "../keys";
 import { register } from "./register";
 import { supported as fsSupported } from "browser-fs-access";
 import { CheckboxItem } from "../components/CheckboxItem";
+import { getExportSize } from "../scene/export";
+import { DEFAULT_EXPORT_PADDING, EXPORT_SCALES } from "../constants";
+import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { getNonDeletedElements } from "../element";
 
 export const actionChangeProjectName = register({
   name: "changeProjectName",
@@ -32,6 +36,54 @@ export const actionChangeProjectName = register({
   ),
 });
 
+export const actionChangeExportScale = register({
+  name: "changeExportScale",
+  perform: (_elements, appState, value) => {
+    return {
+      appState: { ...appState, exportScale: value },
+      commitToHistory: false,
+    };
+  },
+  PanelComponent: ({ elements: allElements, appState, updateData }) => {
+    const elements = getNonDeletedElements(allElements);
+    const exportSelected = isSomeElementSelected(elements, appState);
+    const exportedElements = exportSelected
+      ? getSelectedElements(elements, appState)
+      : elements;
+
+    return (
+      <>
+        {EXPORT_SCALES.map((s) => {
+          const [width, height] = getExportSize(
+            exportedElements,
+            DEFAULT_EXPORT_PADDING,
+            s,
+          );
+
+          const scaleButtonTitle = `${t(
+            "buttons.scale",
+          )} ${s}x (${width}x${height})`;
+
+          return (
+            <ToolButton
+              key={s}
+              size="s"
+              type="radio"
+              icon={`${s}x`}
+              name="export-canvas-scale"
+              title={scaleButtonTitle}
+              aria-label={scaleButtonTitle}
+              id="export-canvas-scale"
+              checked={s === appState.exportScale}
+              onChange={() => updateData(s)}
+            />
+          );
+        })}
+      </>
+    );
+  },
+});
+
 export const actionChangeExportBackground = register({
   name: "changeExportBackground",
   perform: (_elements, appState, value) => {

src/actions/types.ts

@@ -66,6 +66,7 @@ export type ActionName =
   | "changeProjectName"
   | "changeExportBackground"
   | "changeExportEmbedScene"
+  | "changeExportScale"
   | "saveToActiveFile"
   | "saveFileToDisk"
   | "loadScene"

src/appState.ts

@@ -3,11 +3,16 @@ import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   DEFAULT_TEXT_ALIGN,
+  EXPORT_SCALES,
 } from "./constants";
 import { t } from "./i18n";
 import { AppState, NormalizedZoomValue } from "./types";
 import { getDateTime } from "./utils";
 
+const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
+  ? devicePixelRatio
+  : 1;
+
 export const getDefaultAppState = (): Omit<
   AppState,
   "offsetTop" | "offsetLeft" | "width" | "height"
@@ -39,6 +44,7 @@ export const getDefaultAppState = (): Omit<
     elementType: "selection",
     errorMessage: null,
     exportBackground: true,
+    exportScale: defaultExportScale,
     exportEmbedScene: false,
     exportWithDarkMode: false,
     fileHandle: null,
@@ -117,6 +123,7 @@ const APP_STATE_STORAGE_CONF = (<
   errorMessage: { browser: false, export: false },
   exportBackground: { browser: true, export: false },
   exportEmbedScene: { browser: true, export: false },
+  exportScale: { browser: true, export: false },
   exportWithDarkMode: { browser: true, export: false },
   fileHandle: { browser: false, export: false },
   gridSize: { browser: true, export: true },

src/components/ImageExportDialog.tsx

@@ -8,20 +8,17 @@ import { CanvasError } from "../errors";
 import { t } from "../i18n";
 import { useIsMobile } from "./App";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
-import { exportToCanvas, getExportSize } from "../scene/export";
+import { exportToCanvas } from "../scene/export";
 import { AppState } from "../types";
 import { Dialog } from "./Dialog";
 import { clipboard, exportImage } from "./icons";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
-
 import "./ExportDialog.scss";
 import { supported as fsSupported } from "browser-fs-access";
 import OpenColor from "open-color";
 import { CheckboxItem } from "./CheckboxItem";
-
-const scales = [1, 2, 3];
-const defaultScale = scales.includes(devicePixelRatio) ? devicePixelRatio : 1;
+import { DEFAULT_EXPORT_PADDING } from "../constants";
 
 const supportsContextFilters =
   "filter" in document.createElement("canvas").getContext("2d")!;
@@ -82,7 +79,7 @@ const ExportButton: React.FC<{
 const ImageExportModal = ({
   elements,
   appState,
-  exportPadding = 10,
+  exportPadding = DEFAULT_EXPORT_PADDING,
   actionManager,
   onExportToPng,
   onExportToSvg,
@@ -98,7 +95,6 @@ const ImageExportModal = ({
   onCloseRequest: () => void;
 }) => {
   const someElementIsSelected = isSomeElementSelected(elements, appState);
-  const [scale, setScale] = useState(defaultScale);
   const [exportSelected, setExportSelected] = useState(someElementIsSelected);
   const previewRef = useRef<HTMLDivElement>(null);
   const { exportBackground, viewBackgroundColor } = appState;
@@ -121,7 +117,6 @@ const ImageExportModal = ({
         exportBackground,
         viewBackgroundColor,
         exportPadding,
-        scale,
       });
 
       // if converting to blob fails, there's some problem that will
@@ -144,7 +139,6 @@ const ImageExportModal = ({
     exportBackground,
     exportPadding,
     viewBackgroundColor,
-    scale,
   ]);
 
   return (
@@ -175,33 +169,8 @@ const ImageExportModal = ({
         </div>
       </div>
       <div style={{ display: "flex", alignItems: "center", marginTop: ".6em" }}>
-        <Stack.Row gap={2} justifyContent={"center"}>
-          {scales.map((_scale) => {
-            const [width, height] = getExportSize(
-              exportedElements,
-              exportPadding,
-              _scale,
-            );
-
-            const scaleButtonTitle = `${t(
-              "buttons.scale",
-            )} ${_scale}x (${width}x${height})`;
-
-            return (
-              <ToolButton
-                key={_scale}
-                size="s"
-                type="radio"
-                icon={`${_scale}x`}
-                name="export-canvas-scale"
-                title={scaleButtonTitle}
-                aria-label={scaleButtonTitle}
-                id="export-canvas-scale"
-                checked={_scale === scale}
-                onChange={() => setScale(_scale)}
-              />
-            );
-          })}
+        <Stack.Row gap={2}>
+          {actionManager.renderAction("changeExportScale")}
         </Stack.Row>
         <p style={{ marginLeft: "1em", userSelect: "none" }}>Scale</p>
       </div>
@@ -220,7 +189,7 @@ const ImageExportModal = ({
           color="indigo"
           title={t("buttons.exportToPng")}
           aria-label={t("buttons.exportToPng")}
-          onClick={() => onExportToPng(exportedElements, scale)}
+          onClick={() => onExportToPng(exportedElements)}
         >
           PNG
         </ExportButton>
@@ -228,14 +197,14 @@ const ImageExportModal = ({
           color="red"
           title={t("buttons.exportToSvg")}
           aria-label={t("buttons.exportToSvg")}
-          onClick={() => onExportToSvg(exportedElements, scale)}
+          onClick={() => onExportToSvg(exportedElements)}
         >
           SVG
         </ExportButton>
         {probablySupportsClipboardBlob && (
           <ExportButton
             title={t("buttons.copyPngToClipboard")}
-            onClick={() => onExportToClipboard(exportedElements, scale)}
+            onClick={() => onExportToClipboard(exportedElements)}
             color="gray"
             shade={7}
           >
@@ -250,7 +219,7 @@ const ImageExportModal = ({
 export const ImageExportDialog = ({
   elements,
   appState,
-  exportPadding = 10,
+  exportPadding = DEFAULT_EXPORT_PADDING,
   actionManager,
   onExportToPng,
   onExportToSvg,

src/components/LayerUI.tsx

@@ -400,13 +400,11 @@ const LayerUI = ({
 
     const createExporter = (type: ExportType): ExportCB => async (
       exportedElements,
-      scale,
     ) => {
       await exportCanvas(type, exportedElements, appState, {
         exportBackground: appState.exportBackground,
         name: appState.name,
         viewBackgroundColor: appState.viewBackgroundColor,
-        scale,
       })
         .catch(muteFSAbortError)
         .catch((error) => {

src/constants.ts

@@ -144,3 +144,6 @@ export const MQ_MAX_WIDTH_LANDSCAPE = 1000;
 export const MQ_MAX_HEIGHT_LANDSCAPE = 500;
 
 export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
+
+export const EXPORT_SCALES = [1, 2, 3];
+export const DEFAULT_EXPORT_PADDING = 10; // px

src/data/index.ts

@@ -3,6 +3,7 @@ import {
   copyBlobToClipboardAsPng,
   copyTextToSystemClipboard,
 } from "../clipboard";
+import { DEFAULT_EXPORT_PADDING } from "../constants";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { exportToCanvas, exportToSvg } from "../scene/export";
@@ -20,16 +21,14 @@ export const exportCanvas = async (
   appState: AppState,
   {
     exportBackground,
-    exportPadding = 10,
+    exportPadding = DEFAULT_EXPORT_PADDING,
     viewBackgroundColor,
     name,
-    scale = 1,
   }: {
     exportBackground: boolean;
     exportPadding?: number;
     viewBackgroundColor: string;
     name: string;
-    scale?: number;
   },
 ) => {
   if (elements.length === 0) {
@@ -41,7 +40,7 @@ export const exportCanvas = async (
       exportWithDarkMode: appState.exportWithDarkMode,
       viewBackgroundColor,
       exportPadding,
-      scale,
+      exportScale: appState.exportScale,
       metadata:
         appState.exportEmbedScene && type === "svg"
           ? await (
@@ -67,7 +66,6 @@ export const exportCanvas = async (
     exportBackground,
     viewBackgroundColor,
     exportPadding,
-    scale,
   });
   tempCanvas.style.display = "none";
   document.body.appendChild(tempCanvas);

src/index-node.ts

@@ -69,7 +69,6 @@ const canvas = exportToCanvas(
   {
     exportBackground: true,
     viewBackgroundColor: "#ffffff",
-    scale: 1,
   },
   createCanvas,
 );

src/scene/export.ts

@@ -4,7 +4,7 @@ import { getCommonBounds } from "../element/bounds";
 import { renderScene, renderSceneToSvg } from "../renderer/renderScene";
 import { distance, SVG_NS } from "../utils";
 import { AppState } from "../types";
-import { THEME_FILTER } from "../constants";
+import { DEFAULT_EXPORT_PADDING, THEME_FILTER } from "../constants";
 import { getDefaultAppState } from "../appState";
 
 export const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
@@ -14,39 +14,34 @@ export const exportToCanvas = (
   appState: AppState,
   {
     exportBackground,
-    exportPadding = 10,
+    exportPadding = DEFAULT_EXPORT_PADDING,
     viewBackgroundColor,
-    scale = 1,
   }: {
     exportBackground: boolean;
     exportPadding?: number;
-    scale?: number;
     viewBackgroundColor: string;
   },
   createCanvas: (
     width: number,
     height: number,
   ) => { canvas: HTMLCanvasElement; scale: number } = (width, height) => {
-    const tempCanvas = document.createElement("canvas");
-    tempCanvas.width = width * scale;
-    tempCanvas.height = height * scale;
-    return { canvas: tempCanvas, scale };
+    const canvas = document.createElement("canvas");
+    canvas.width = width * appState.exportScale;
+    canvas.height = height * appState.exportScale;
+    return { canvas, scale: appState.exportScale };
   },
 ) => {
   const [minX, minY, width, height] = getCanvasSize(elements, exportPadding);
 
-  const { canvas: tempCanvas, scale: newScale = scale } = createCanvas(
-    width,
-    height,
-  );
+  const { canvas, scale = 1 } = createCanvas(width, height);
 
   renderScene(
     elements,
     appState,
     null,
-    newScale,
-    rough.canvas(tempCanvas),
-    tempCanvas,
+    scale,
+    rough.canvas(canvas),
+    canvas,
     {
       viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
       exportWithDarkMode: appState.exportWithDarkMode,
@@ -67,22 +62,22 @@ export const exportToCanvas = (
     },
   );
 
-  return tempCanvas;
+  return canvas;
 };
 
 export const exportToSvg = (
   elements: readonly NonDeletedExcalidrawElement[],
   {
     exportBackground,
-    exportPadding = 10,
+    exportPadding = DEFAULT_EXPORT_PADDING,
     viewBackgroundColor,
     exportWithDarkMode,
-    scale = 1,
+    exportScale = 1,
     metadata = "",
   }: {
     exportBackground: boolean;
     exportPadding?: number;
-    scale?: number;
+    exportScale?: number;
     viewBackgroundColor: string;
     exportWithDarkMode?: boolean;
     metadata?: string;
@@ -95,8 +90,8 @@ export const exportToSvg = (
   svgRoot.setAttribute("version", "1.1");
   svgRoot.setAttribute("xmlns", SVG_NS);
   svgRoot.setAttribute("viewBox", `0 0 ${width} ${height}`);
-  svgRoot.setAttribute("width", `${width * scale}`);
-  svgRoot.setAttribute("height", `${height * scale}`);
+  svgRoot.setAttribute("width", `${width * exportScale}`);
+  svgRoot.setAttribute("height", `${height * exportScale}`);
   if (exportWithDarkMode) {
     svgRoot.setAttribute("filter", THEME_FILTER);
   }

src/tests/__snapshots__/contextmenu.test.tsx.snap

@@ -28,6 +28,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -194,6 +195,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -506,6 +508,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -818,6 +821,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -984,6 +988,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -1183,6 +1188,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -1435,6 +1441,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -1765,6 +1772,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -2497,6 +2505,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -2809,6 +2818,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -3121,6 +3131,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -3507,6 +3518,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -3765,6 +3777,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -4098,6 +4111,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -4199,6 +4213,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -4278,6 +4293,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -28,6 +28,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -496,6 +497,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -970,6 +972,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -1759,6 +1762,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -1966,6 +1970,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -2431,6 +2436,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -2687,6 +2693,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -2853,6 +2860,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -3301,6 +3309,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -3541,6 +3550,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -3748,6 +3758,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -3996,6 +4007,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -4251,6 +4263,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -4638,6 +4651,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -4936,6 +4950,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -5212,6 +5227,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -5422,6 +5438,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -5588,6 +5605,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -6048,6 +6066,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -6370,6 +6389,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -8427,6 +8447,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -8793,6 +8814,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -9049,6 +9071,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -9269,6 +9292,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -9552,6 +9576,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -9718,6 +9743,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -9884,6 +9910,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -10050,6 +10077,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -10246,6 +10274,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -10442,6 +10471,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -10650,6 +10680,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -10846,6 +10877,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -11012,6 +11044,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -11178,6 +11211,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -11374,6 +11408,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -11540,6 +11575,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -11748,6 +11784,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -12474,6 +12511,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -12730,6 +12768,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -12833,6 +12872,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -12934,6 +12974,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -13103,6 +13144,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -13428,6 +13470,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -13631,6 +13674,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -14466,6 +14510,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -14567,6 +14612,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -15335,6 +15381,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -15744,6 +15791,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -16020,6 +16068,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -16123,6 +16172,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -16626,6 +16676,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
@@ -16727,6 +16778,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,

src/tests/packages/__snapshots__/utils.test.ts.snap

@@ -29,6 +29,7 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportPadding": undefined,
+  "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,

src/tests/scene/export.test.ts

@@ -69,7 +69,7 @@ describe("exportToSvg", () => {
     const svgElement = exportUtils.exportToSvg(ELEMENTS, {
       ...DEFAULT_OPTIONS,
       exportPadding: 0,
-      scale: SCALE,
+      exportScale: SCALE,
     });
 
     expect(svgElement).toHaveAttribute(

src/types.ts

@@ -58,6 +58,7 @@ export type AppState = {
   exportBackground: boolean;
   exportEmbedScene: boolean;
   exportWithDarkMode: boolean;
+  exportScale: number;
   currentItemStrokeColor: string;
   currentItemBackgroundColor: string;
   currentItemFillStyle: ExcalidrawElement["fillStyle"];