feat: export with solid color only

src/components/ImageExportDialog.scss

@@ -87,6 +87,18 @@
           }
         }
 
+        &--img-bcg {
+          padding: 0;
+          background: none;
+          border: none;
+          border-radius: 0;
+
+          & > canvas {
+            max-width: calc(100%);
+            max-height: calc(100%);
+          }
+        }
+
         @include isMobile {
           margin-top: 24px;
           max-width: unset;

src/components/ImageExportDialog.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
 
 import type { ActionManager } from "../actions/manager";
 import type { AppClassProperties, BinaryFiles, UIAppState } from "../types";
@@ -62,6 +63,12 @@ type ImageExportModalProps = {
   onExportImage: AppClassProperties["onExportImage"];
 };
 
+function isBackgroundImageKey(
+  key: string,
+): key is keyof typeof EXPORT_BACKGROUND_IMAGES {
+  return key in EXPORT_BACKGROUND_IMAGES;
+}
+
 const ImageExportModal = ({
   appState,
   elements,
@@ -78,9 +85,9 @@ const ImageExportModal = ({
   const [exportWithBackground, setExportWithBackground] = useState(
     appState.exportBackground,
   );
-  const [exportBackgroundImage, setExportBackgroundImage] = useState<string>(
+  const [exportBackgroundImage, setExportBackgroundImage] = useState<
-    DEFAULT_EXPORT_BACKGROUND_IMAGE,
+    keyof typeof EXPORT_BACKGROUND_IMAGES
-  );
+  >(DEFAULT_EXPORT_BACKGROUND_IMAGE);
 
   const [exportDarkMode, setExportDarkMode] = useState(
     appState.exportWithDarkMode,
@@ -105,6 +112,7 @@ const ImageExportModal = ({
     }
     const maxWidth = previewNode.offsetWidth;
     const maxHeight = previewNode.offsetHeight;
+
     if (!maxWidth) {
       return;
     }
@@ -127,13 +135,25 @@ const ImageExportModal = ({
         console.error(error);
         setRenderError(error);
       });
-  }, [appState, files, exportedElements]);
+  }, [
+    appState,
+    appState.exportBackground,
+    appState.exportBackgroundImage,
+    files,
+    exportedElements,
+  ]);
 
   return (
     <div className="ImageExportModal">
       <h3>{t("imageExportDialog.header")}</h3>
       <div className="ImageExportModal__preview">
-        <div className="ImageExportModal__preview__canvas" ref={previewRef}>
+        <div
+          className={clsx("ImageExportModal__preview__canvas", {
+            "ImageExportModal__preview__canvas--img-bcg":
+              appState.exportBackground && appState.exportBackgroundImage,
+          })}
+          ref={previewRef}
+        >
           {renderError && <ErrorCanvasPreview />}
         </div>
       </div>
@@ -183,12 +203,14 @@ const ImageExportModal = ({
             placeholder={t("imageExportDialog.label.backgroundImage")}
             value={exportBackgroundImage}
             onChange={(value) => {
-              setExportBackgroundImage(value);
+              if (isBackgroundImageKey(value)) {
-              actionManager.executeAction(
+                setExportBackgroundImage(value);
-                actionChangeExportBackgroundImage,
+                actionManager.executeAction(
-                "ui",
+                  actionChangeExportBackgroundImage,
-                value,
+                  "ui",
-              );
+                  EXPORT_BACKGROUND_IMAGES[value].path,
+                );
+              }
             }}
           />
           <Switch

src/components/Select.tsx

@@ -4,7 +4,7 @@ import * as RadixSelect from "@radix-ui/react-select";
 import "./Select.scss";
 import { tablerChevronDownIcon, tablerChevronUpIcon } from "./icons";
 
-type SelectItems = Record<string, string>;
+type SelectItems = Record<string, { path: string | null; label: string }>;
 
 export type SelectProps = {
   items: SelectItems;
@@ -43,7 +43,7 @@ const Select = ({
       <RadixSelect.Viewport className="Select__viewport">
         {Object.entries(items).map(([itemValue, itemLabel]) => (
           <SelectItem value={itemValue} key={itemValue}>
-            {itemLabel}
+            {itemLabel.label}
           </SelectItem>
         ))}
       </RadixSelect.Viewport>

src/constants.ts

@@ -226,6 +226,8 @@ export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 
 export const EXPORT_SCALES = [1, 2, 3];
 export const DEFAULT_EXPORT_PADDING = 10; // px
+export const EXPORT_BG_PADDING = 24; // px
+export const EXPORT_BG_BORDER_RADIUS = 12; // px
 
 export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
 
@@ -318,13 +320,13 @@ export const DEFAULT_SIDEBAR = {
 export const LIBRARY_DISABLED_TYPES = new Set(["embeddable", "image"] as const);
 
 export const EXPORT_BACKGROUND_IMAGES = {
-  "/backgrounds/bubbles.svg": "bubbles",
+  solid: { path: null, label: "solid color" },
-  "/backgrounds/bubbles2.svg": "bubbles 2",
+  bubbles: { path: "/backgrounds/bubbles.svg", label: "bubbles" },
-  "/backgrounds/bricks.svg": "bricks",
+  bubbles2: { path: "/backgrounds/bubbles2.svg", label: "bubbles 2" },
-  "/backgrounds/lines.svg": "lines",
+  bricks: { path: "/backgrounds/bricks.svg", label: "bricks" },
-  "/backgrounds/lines2.svg": "lines 2",
+  lines: { path: "/backgrounds/lines.svg", label: "lines" },
+  lines2: { path: "/backgrounds/lines2.svg", label: "lines 2" },
 } as const;
 
-export const DEFAULT_EXPORT_BACKGROUND_IMAGE = Object.keys(
+export const DEFAULT_EXPORT_BACKGROUND_IMAGE: keyof typeof EXPORT_BACKGROUND_IMAGES =
-  EXPORT_BACKGROUND_IMAGES,
+  "solid" as const;
-)[0];