feat: export background => fancy background

src/actions/actionExport.tsx

@@ -12,9 +12,9 @@ import { register } from "./register";
 import { CheckboxItem } from "../components/CheckboxItem";
 import { getExportSize } from "../scene/export";
 import {
-  DEFAULT_EXPORT_BACKGROUND_IMAGE,
+  DEFAULT_FANCY_BACKGROUND_IMAGE,
   DEFAULT_EXPORT_PADDING,
-  EXPORT_BACKGROUND_IMAGES,
+  FANCY_BACKGROUND_IMAGES,
   EXPORT_SCALES,
   THEME,
 } from "../constants";
@@ -114,21 +114,21 @@ export const actionChangeExportBackground = register({
   ),
 });
 
-export const actionChangeExportBackgroundImage = register({
+export const actionChangeFancyBackgroundImageUrl = register({
-  name: "changeExportBackgroundImage",
+  name: "changeFancyBackgroundImageUrl",
   trackEvent: { category: "export", action: "toggleBackgroundImage" },
   perform: (_elements, appState, value) => {
     return {
-      appState: { ...appState, exportBackgroundImage: value },
+      appState: { ...appState, fancyBackgroundImageUrl: value },
       commitToHistory: false,
     };
   },
   PanelComponent: ({ updateData }) => (
     <Select
-      items={EXPORT_BACKGROUND_IMAGES}
+      items={FANCY_BACKGROUND_IMAGES}
       ariaLabel={t("imageExportDialog.label.backgroundImage")}
       placeholder={t("imageExportDialog.label.backgroundImage")}
-      value={DEFAULT_EXPORT_BACKGROUND_IMAGE}
+      value={DEFAULT_FANCY_BACKGROUND_IMAGE}
       onChange={(value) => {
         updateData(value);
       }}

src/actions/types.ts

@@ -124,7 +124,7 @@ export type ActionName =
   | "setEmbeddableAsActiveTool"
   | "createContainerFromText"
   | "wrapTextInContainer"
-  | "changeExportBackgroundImage";
+  | "changeFancyBackgroundImageUrl";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];

src/appState.ts

@@ -1,11 +1,11 @@
 import { COLOR_PALETTE } from "./colors";
 import {
   DEFAULT_ELEMENT_PROPS,
-  DEFAULT_EXPORT_BACKGROUND_IMAGE,
+  DEFAULT_FANCY_BACKGROUND_IMAGE,
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   DEFAULT_TEXT_ALIGN,
-  EXPORT_BACKGROUND_IMAGES,
+  FANCY_BACKGROUND_IMAGES,
   EXPORT_SCALES,
   THEME,
 } from "./constants";
@@ -102,7 +102,7 @@ export const getDefaultAppState = (): Omit<
     showHyperlinkPopup: false,
     selectedLinearElement: null,
     fancyBackgroundImageUrl:
-      EXPORT_BACKGROUND_IMAGES[DEFAULT_EXPORT_BACKGROUND_IMAGE].path,
+      FANCY_BACKGROUND_IMAGES[DEFAULT_FANCY_BACKGROUND_IMAGE].path,
   };
 };
 
@@ -210,7 +210,7 @@ const APP_STATE_STORAGE_CONF = (<
   pendingImageElementId: { browser: false, export: false, server: false },
   showHyperlinkPopup: { browser: false, export: false, server: false },
   selectedLinearElement: { browser: true, export: false, server: false },
-  exportBackgroundImage: { browser: false, export: false, server: false },
+  fancyBackgroundImageUrl: { browser: false, export: false, server: false },
 });
 
 const _clearAppStateForStorage = <

src/components/ImageExportDialog.tsx

@@ -10,7 +10,7 @@ import {
   actionChangeExportEmbedScene,
   actionChangeExportScale,
   actionChangeProjectName,
-  actionChangeExportBackgroundImage,
+  actionChangeFancyBackgroundImageUrl,
 } from "../actions/actionExport";
 import { probablySupportsClipboardBlob } from "../clipboard";
 import {
@@ -18,8 +18,8 @@ import {
   EXPORT_IMAGE_TYPES,
   isFirefox,
   EXPORT_SCALES,
-  EXPORT_BACKGROUND_IMAGES,
+  FANCY_BACKGROUND_IMAGES,
-  DEFAULT_EXPORT_BACKGROUND_IMAGE,
+  DEFAULT_FANCY_BACKGROUND_IMAGE,
 } from "../constants";
 
 import { canvasToBlob } from "../data/blob";
@@ -65,8 +65,8 @@ type ImageExportModalProps = {
 
 function isBackgroundImageKey(
   key: string,
-): key is keyof typeof EXPORT_BACKGROUND_IMAGES {
+): key is keyof typeof FANCY_BACKGROUND_IMAGES {
-  return key in EXPORT_BACKGROUND_IMAGES;
+  return key in FANCY_BACKGROUND_IMAGES;
 }
 
 const ImageExportModal = ({
@@ -86,8 +86,8 @@ const ImageExportModal = ({
     appState.exportBackground,
   );
   const [exportBackgroundImage, setExportBackgroundImage] = useState<
-    keyof typeof EXPORT_BACKGROUND_IMAGES
+    keyof typeof FANCY_BACKGROUND_IMAGES
-  >(DEFAULT_EXPORT_BACKGROUND_IMAGE);
+  >(DEFAULT_FANCY_BACKGROUND_IMAGE);
 
   const [exportDarkMode, setExportDarkMode] = useState(
     appState.exportWithDarkMode,
@@ -199,7 +199,7 @@ const ImageExportModal = ({
         >
           {exportWithBackground && (
             <Select
-              items={EXPORT_BACKGROUND_IMAGES}
+              items={FANCY_BACKGROUND_IMAGES}
               ariaLabel={t("imageExportDialog.label.backgroundImage")}
               placeholder={t("imageExportDialog.label.backgroundImage")}
               value={exportBackgroundImage}
@@ -207,9 +207,9 @@ const ImageExportModal = ({
                 if (isBackgroundImageKey(value)) {
                   setExportBackgroundImage(value);
                   actionManager.executeAction(
-                    actionChangeExportBackgroundImage,
+                    actionChangeFancyBackgroundImageUrl,
                     "ui",
-                    EXPORT_BACKGROUND_IMAGES[value].path,
+                    FANCY_BACKGROUND_IMAGES[value].path,
                   );
                 }
               }}

src/constants.ts

@@ -225,8 +225,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 FANCY_BG_PADDING = 24; // px
-export const EXPORT_BG_BORDER_RADIUS = 12; // px
+export const FANCY_BG_BORDER_RADIUS = 12; // px
 
 export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
 
@@ -318,7 +318,7 @@ export const DEFAULT_SIDEBAR = {
 
 export const LIBRARY_DISABLED_TYPES = new Set(["embeddable", "image"] as const);
 
-export const EXPORT_BACKGROUND_IMAGES = {
+export const FANCY_BACKGROUND_IMAGES = {
   solid: { path: null, label: "solid color" },
   bubbles: { path: "/backgrounds/bubbles.svg" as DataURL, label: "bubbles" },
   bubbles2: {
@@ -330,5 +330,5 @@ export const EXPORT_BACKGROUND_IMAGES = {
   lines2: { path: "/backgrounds/lines2.svg" as DataURL, label: "lines 2" },
 } as const;
 
-export const DEFAULT_EXPORT_BACKGROUND_IMAGE: keyof typeof EXPORT_BACKGROUND_IMAGES =
+export const DEFAULT_FANCY_BACKGROUND_IMAGE: keyof typeof FANCY_BACKGROUND_IMAGES =
   "solid" as const;

src/scene/fancyBackground.ts

@@ -1,4 +1,4 @@
-import { EXPORT_BG_BORDER_RADIUS, EXPORT_BG_PADDING } from "../constants";
+import { FANCY_BG_BORDER_RADIUS, FANCY_BG_PADDING } from "../constants";
 import { loadHTMLImageElement } from "../element/image";
 import { roundRect } from "../renderer/roundRect";
 import { DataURL } from "../types";
@@ -32,16 +32,9 @@ const addImageBackground = (
   context.save();
   context.beginPath();
   if (context.roundRect) {
-    context.roundRect(0, 0, canvasWidth, canvasHeight, EXPORT_BG_BORDER_RADIUS);
+    context.roundRect(0, 0, canvasWidth, canvasHeight, FANCY_BG_BORDER_RADIUS);
   } else {
-    roundRect(
+    roundRect(context, 0, 0, canvasWidth, canvasHeight, FANCY_BG_BORDER_RADIUS);
-      context,
-      0,
-      0,
-      canvasWidth,
-      canvasHeight,
-      EXPORT_BG_BORDER_RADIUS,
-    );
   }
   const scale = getScaleToFill(
     { w: fancyBackgroundImage.width, h: fancyBackgroundImage.height },
@@ -99,20 +92,20 @@ const addContentBackground = (
 
     if (context.roundRect) {
       context.roundRect(
-        EXPORT_BG_PADDING,
+        FANCY_BG_PADDING,
-        EXPORT_BG_PADDING,
+        FANCY_BG_PADDING,
-        canvasWidth - EXPORT_BG_PADDING * 2,
+        canvasWidth - FANCY_BG_PADDING * 2,
-        canvasHeight - EXPORT_BG_PADDING * 2,
+        canvasHeight - FANCY_BG_PADDING * 2,
-        EXPORT_BG_BORDER_RADIUS,
+        FANCY_BG_BORDER_RADIUS,
       );
     } else {
       roundRect(
         context,
-        EXPORT_BG_PADDING,
+        FANCY_BG_PADDING,
-        EXPORT_BG_PADDING,
+        FANCY_BG_PADDING,
-        canvasWidth - EXPORT_BG_PADDING * 2,
+        canvasWidth - FANCY_BG_PADDING * 2,
-        canvasHeight - EXPORT_BG_PADDING * 2,
+        canvasHeight - FANCY_BG_PADDING * 2,
-        EXPORT_BG_BORDER_RADIUS,
+        FANCY_BG_BORDER_RADIUS,
       );
     }