Revert "Set scale for export images (#416)" (#420)

This reverts commit 82f559f826.

src/components/ExportDialog.css

@@ -44,9 +44,3 @@
   justify-content: space-between;
   flex-wrap: wrap;
 }
-
-.ExportDialog__scales {
-  display: flex;
-  align-items: baseline;
-  justify-content: flex-end;
-}

src/components/ExportDialog.tsx

@@ -18,11 +18,6 @@ const probablySupportsClipboard =
   "write" in navigator.clipboard &&
   "ClipboardItem" in window;
 
-const scales = [1, 2, 3];
-const defaultScale = scales.includes(devicePixelRatio) ? devicePixelRatio : 1;
-
-type ExportCB = (elements: readonly ExcalidrawElement[], scale: number) => void;
-
 export function ExportDialog({
   elements,
   appState,
@@ -37,12 +32,11 @@ export function ExportDialog({
   exportPadding?: number;
   actionManager: ActionsManagerInterface;
   syncActionResult: UpdaterFn;
-  onExportToPng: ExportCB;
-  onExportToClipboard: ExportCB;
+  onExportToPng(elements: readonly ExcalidrawElement[]): void;
+  onExportToClipboard(elements: readonly ExcalidrawElement[]): void;
 }) {
   const someElementIsSelected = elements.some(element => element.isSelected);
   const [modalIsShown, setModalIsShown] = useState(false);
-  const [scale, setScale] = useState(defaultScale);
   const [exportSelected, setExportSelected] = useState(someElementIsSelected);
   const previeRef = useRef<HTMLDivElement>(null);
   const { exportBackground, viewBackgroundColor } = appState;
@@ -60,8 +54,7 @@ export function ExportDialog({
     const canvas = getExportCanvasPreview(exportedElements, {
       exportBackground,
       viewBackgroundColor,
-      exportPadding,
-      scale
+      exportPadding
     });
     previewNode?.appendChild(canvas);
     return () => {
@@ -72,8 +65,7 @@ export function ExportDialog({
     exportedElements,
     exportBackground,
     exportPadding,
-    viewBackgroundColor,
-    scale
+    viewBackgroundColor
   ]);
 
   function handleClose() {
@@ -106,7 +98,7 @@ export function ExportDialog({
                     icon={downloadFile}
                     title="Export to PNG"
                     aria-label="Export to PNG"
-                    onClick={() => onExportToPng(exportedElements, scale)}
+                    onClick={() => onExportToPng(exportedElements)}
                   />
 
                   {probablySupportsClipboard && (
@@ -115,9 +107,7 @@ export function ExportDialog({
                       icon={clipboard}
                       title="Copy to clipboard"
                       aria-label="Copy to clipboard"
-                      onClick={() =>
-                        onExportToClipboard(exportedElements, scale)
-                      }
+                      onClick={() => onExportToClipboard(exportedElements)}
                     />
                   )}
                 </Stack.Row>
@@ -129,21 +119,6 @@ export function ExportDialog({
                   syncActionResult
                 )}
                 <Stack.Col gap={1}>
-                  <div className="ExportDialog__scales">
-                    <Stack.Row gap={1} align="baseline">
-                      {scales.map(s => (
-                        <ToolIcon
-                          size="s"
-                          type="radio"
-                          icon={"x" + s}
-                          name="export-canvas-scale"
-                          id="export-canvas-scale"
-                          checked={scale === s}
-                          onChange={() => setScale(s)}
-                        />
-                      ))}
-                    </Stack.Row>
-                  </div>
                   {actionManager.renderAction(
                     "changeExportBackground",
                     elements,

src/components/Stack.tsx

@@ -5,7 +5,7 @@ import React from "react";
 type StackProps = {
   children: React.ReactNode;
   gap?: number;
-  align?: "start" | "center" | "end" | "baseline";
+  align?: "start" | "center" | "end";
 };
 
 function RowStack({ children, gap, align }: StackProps) {

src/components/ToolIcon.scss

@@ -20,12 +20,6 @@
   }
 }
 
-.ToolIcon_size_s .ToolIcon__icon {
-  width: 25px;
-  height: 25px;
-  font-size: 0.8em;
-}
-
 .ToolIcon_type_button {
   padding: 0;
   border: none;

src/components/ToolIcon.tsx

@@ -2,8 +2,6 @@ import "./ToolIcon.scss";
 
 import React from "react";
 
-type ToolIconSize = "s" | "m";
-
 type ToolIconProps =
   | {
       type: "button";
@@ -13,7 +11,6 @@ type ToolIconProps =
       name?: string;
       id?: string;
       onClick?(): void;
-      size?: ToolIconSize;
     }
   | {
       type: "radio";
@@ -23,17 +20,12 @@ type ToolIconProps =
       id?: string;
       checked: boolean;
       onChange?(): void;
-      size?: ToolIconSize;
     };
 
-const DEFAULT_SIZE: ToolIconSize = "m";
-
 export function ToolIcon(props: ToolIconProps) {
-  const sizeCn = `ToolIcon_size_${props.size || DEFAULT_SIZE}`;
-
   if (props.type === "button")
     return (
-      <label className={`ToolIcon ${sizeCn}`} title={props.title}>
+      <label className="ToolIcon" title={props.title}>
         <button
           className="ToolIcon_type_button"
           aria-label={props["aria-label"]}
@@ -46,7 +38,7 @@ export function ToolIcon(props: ToolIconProps) {
     );
 
   return (
-    <label className={`ToolIcon ${sizeCn}`} title={props.title}>
+    <label className="ToolIcon" title={props.title}>
       <input
         className="ToolIcon_type_radio"
         type="radio"