feat: save exportScale in AppState (#3580)

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

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) => {