add titles with width/height to scale buttons in ExportDialog (#2193)

src/components/ExportDialog.tsx

@@ -6,7 +6,7 @@ import { ToolButton } from "./ToolButton";
 import { clipboard, exportFile, link } from "./icons";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
-import { exportToCanvas } from "../scene/export";
+import { exportToCanvas, getExportSize } from "../scene/export";
 import { ActionsManagerInterface } from "../actions/types";
 import Stack from "./Stack";
 import { t } from "../i18n";
@@ -126,19 +126,33 @@ const ExportModal = ({
             {actionManager.renderAction("changeProjectName")}
           </div>
           <Stack.Row gap={2}>
-            {scales.map((s) => (
+            {scales.map((s) => {
-              <ToolButton
+              const [width, height] = getExportSize(
-                key={s}
+                exportedElements,
-                size="s"
+                exportPadding,
-                type="radio"
+                shouldAddWatermark,
-                icon={`x${s}`}
+                s,
-                name="export-canvas-scale"
+              );
-                aria-label={`Scale ${s} x`}
+
-                id="export-canvas-scale"
+              const scaleButtonTitle = `${t(
-                checked={s === scale}
+                "buttons.scale",
-                onChange={() => setScale(s)}
+              )} ${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 === scale}
+                  onChange={() => setScale(s)}
+                />
+              );
+            })}
           </Stack.Row>
         </div>
         {actionManager.renderAction("changeExportBackground")}

src/locales/en.json

@@ -81,6 +81,7 @@
     "exportToSvg": "Export to SVG",
     "copyToClipboard": "Copy to clipboard",
     "copyPngToClipboard": "Copy PNG to clipboard",
+    "scale": "Scale",
     "save": "Save",
     "saveAs": "Save as",
     "load": "Load",

src/scene/export.ts

@@ -11,6 +11,7 @@ import { t } from "../i18n";
 import { DEFAULT_FONT_FAMILY, DEFAULT_VERTICAL_ALIGN } from "../constants";
 
 export const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
+const WATERMARK_HEIGHT = 16;
 
 export const exportToCanvas = (
   elements: readonly NonDeletedExcalidrawElement[],
@@ -35,19 +36,13 @@ export const exportToCanvas = (
     return tempCanvas;
   },
 ) => {
-  let sceneElements = elements;
+  const sceneElements = getElementsAndWatermark(elements, shouldAddWatermark);
-  if (shouldAddWatermark) {
-    const [, , maxX, maxY] = getCommonBounds(elements);
-    sceneElements = [...sceneElements, getWatermarkElement(maxX, maxY)];
-  }
 
-  // calculate smallest area to fit the contents in
+  const [minX, minY, width, height] = getCanvasSize(
-  const [minX, minY, maxX, maxY] = getCommonBounds(sceneElements);
+    sceneElements,
-  const width = distance(minX, maxX) + exportPadding * 2;
+    exportPadding,
-  const height =
+    shouldAddWatermark,
-    distance(minY, maxY) +
+  );
-    exportPadding +
-    (shouldAddWatermark ? 0 : exportPadding);
 
   const tempCanvas: any = createCanvas(width, height);
 
@@ -93,19 +88,13 @@ export const exportToSvg = (
     shouldAddWatermark: boolean;
   },
 ): SVGSVGElement => {
-  let sceneElements = elements;
+  const sceneElements = getElementsAndWatermark(elements, shouldAddWatermark);
-  if (shouldAddWatermark) {
-    const [, , maxX, maxY] = getCommonBounds(elements);
-    sceneElements = [...sceneElements, getWatermarkElement(maxX, maxY)];
-  }
 
-  // calculate canvas dimensions
+  const [minX, minY, width, height] = getCanvasSize(
-  const [minX, minY, maxX, maxY] = getCommonBounds(sceneElements);
+    sceneElements,
-  const width = distance(minX, maxX) + exportPadding * 2;
+    exportPadding,
-  const height =
+    shouldAddWatermark,
-    distance(minY, maxY) +
+  );
-    exportPadding +
-    (shouldAddWatermark ? 0 : exportPadding);
 
   // initialze SVG root
   const svgRoot = document.createElementNS(SVG_NS, "svg");
@@ -149,15 +138,29 @@ export const exportToSvg = (
   return svgRoot;
 };
 
+const getElementsAndWatermark = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  shouldAddWatermark: boolean,
+): readonly NonDeletedExcalidrawElement[] => {
+  let _elements = [...elements];
+
+  if (shouldAddWatermark) {
+    const [, , maxX, maxY] = getCommonBounds(elements);
+    _elements = [..._elements, getWatermarkElement(maxX, maxY)];
+  }
+
+  return _elements;
+};
+
 const getWatermarkElement = (maxX: number, maxY: number) => {
   return newTextElement({
     text: t("labels.madeWithExcalidraw"),
-    fontSize: 16,
+    fontSize: WATERMARK_HEIGHT,
     fontFamily: DEFAULT_FONT_FAMILY,
     textAlign: "right",
     verticalAlign: DEFAULT_VERTICAL_ALIGN,
     x: maxX,
-    y: maxY + 16,
+    y: maxY + WATERMARK_HEIGHT,
     strokeColor: oc.gray[5],
     backgroundColor: "transparent",
     fillStyle: "hachure",
@@ -168,3 +171,36 @@ const getWatermarkElement = (maxX: number, maxY: number) => {
     strokeSharpness: "sharp",
   });
 };
+
+// calculate smallest area to fit the contents in
+const getCanvasSize = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  exportPadding: number,
+  shouldAddWatermark: boolean,
+): [number, number, number, number] => {
+  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
+  const width = distance(minX, maxX) + exportPadding * 2;
+  const height =
+    distance(minY, maxY) +
+    exportPadding +
+    (shouldAddWatermark ? 0 : exportPadding);
+
+  return [minX, minY, width, height];
+};
+
+export const getExportSize = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  exportPadding: number,
+  shouldAddWatermark: boolean,
+  scale: number,
+): [number, number] => {
+  const sceneElements = getElementsAndWatermark(elements, shouldAddWatermark);
+
+  const [, , width, height] = getCanvasSize(
+    sceneElements,
+    exportPadding,
+    shouldAddWatermark,
+  ).map((dimension) => Math.trunc(dimension * scale));
+
+  return [width, height];
+};