feat: simplify the rendering

src/scene/export.ts

@@ -6,6 +6,8 @@ import { distance, isOnlyExportingSingleFrame } from "../utils";
 import { AppState, BinaryFiles } from "../types";
 import {
   DEFAULT_EXPORT_PADDING,
+  FANCY_BG_BORDER_RADIUS,
+  FANCY_BG_PADDING,
   SVG_NS,
   THEME,
   THEME_FILTER,
@@ -45,9 +47,17 @@ export const exportToCanvas = async (
     return { canvas, scale: appState.exportScale };
   },
 ) => {
-  const [minX, minY, width, height] = getCanvasSize(elements, exportPadding);
+  const exportWithFancyBackground =
+    exportBackground &&
+    !!appState.fancyBackgroundImageUrl &&
+    elements.length > 0;
+  const padding = !exportWithFancyBackground
+    ? exportPadding
+    : exportPadding + FANCY_BG_PADDING + FANCY_BG_BORDER_RADIUS;
 
-  let { canvas, scale = 1 } = createCanvas(width, height);
+  const [minX, minY, width, height] = getCanvasSize(elements, padding);
+
+  const { canvas, scale = 1 } = createCanvas(width, height);
 
   const defaultAppState = getDefaultAppState();
 
@@ -61,13 +71,13 @@ export const exportToCanvas = async (
 
   const onlyExportingSingleFrame = isOnlyExportingSingleFrame(elements);
 
-  let renderConfig: RenderConfig = {
+  const renderConfig: RenderConfig = {
     viewBackgroundColor:
       exportBackground && !appState.fancyBackgroundImageUrl
         ? viewBackgroundColor
         : null,
-    scrollX: -minX + (onlyExportingSingleFrame ? 0 : exportPadding),
+    scrollX: -minX + (onlyExportingSingleFrame ? 0 : padding),
-    scrollY: -minY + (onlyExportingSingleFrame ? 0 : exportPadding),
+    scrollY: -minY + (onlyExportingSingleFrame ? 0 : padding),
     zoom: defaultAppState.zoom,
     remotePointerViewportCoords: {},
     remoteSelectedElementIds: {},
@@ -83,22 +93,12 @@ export const exportToCanvas = async (
     exportBackgroundImage: appState.fancyBackgroundImageUrl,
   };
 
-  if (exportBackground && appState.fancyBackgroundImageUrl) {
+  if (exportWithFancyBackground) {
-    const contentBounds = getCommonBounds(elements);
+    await applyFancyBackground({
-    const updatedRenderProps = await applyFancyBackground({
       canvas,
-      fancyBackgroundImageUrl: appState.fancyBackgroundImageUrl,
+      fancyBackgroundImageUrl: appState.fancyBackgroundImageUrl!,
       backgroundColor: viewBackgroundColor,
-      scale,
-      renderConfig,
-      contentDimensions: {
-        w: contentBounds[2] - contentBounds[0],
-        h: contentBounds[3] - contentBounds[1],
-      },
     });
-
-    renderConfig = updatedRenderProps.renderConfig;
-    scale = updatedRenderProps.scale;
   }
 
   renderScene({

src/scene/fancyBackground.ts

@@ -1,12 +1,7 @@
-import {
+import { FANCY_BG_BORDER_RADIUS, FANCY_BG_PADDING } from "../constants";
-  DEFAULT_EXPORT_PADDING,
-  FANCY_BG_BORDER_RADIUS,
-  FANCY_BG_PADDING,
-} from "../constants";
 import { loadHTMLImageElement } from "../element/image";
 import { roundRect } from "../renderer/roundRect";
 import { DataURL } from "../types";
-import { RenderConfig } from "./types";
 
 type Dimensions = { w: number; h: number };
 
@@ -19,15 +14,6 @@ const getScaleToFill = (contentSize: Dimensions, containerSize: Dimensions) => {
   return scale;
 };
 
-const getScaleToFit = (contentSize: Dimensions, containerSize: Dimensions) => {
-  const scale = Math.min(
-    containerSize.w / contentSize.w,
-    containerSize.h / contentSize.h,
-  );
-
-  return scale;
-};
-
 const addImageBackground = (
   context: CanvasRenderingContext2D,
   canvasDimensions: Dimensions,
@@ -134,47 +120,14 @@ const addContentBackground = (
   });
 };
 
-const updateRenderConfig = (
-  renderConfig: RenderConfig,
-  canvasDimensions: Dimensions,
-  contentDimensions: Dimensions,
-): { scale: number; renderConfig: RenderConfig } => {
-  const totalPadding =
-    FANCY_BG_PADDING + FANCY_BG_BORDER_RADIUS + DEFAULT_EXPORT_PADDING;
-
-  const scale = getScaleToFit(contentDimensions, {
-    w: canvasDimensions.w - totalPadding * 2,
-    h: canvasDimensions.h - totalPadding * 2,
-  });
-
-  const centeredScrollX =
-    (canvasDimensions.w - contentDimensions.w * scale) / 2;
-  const centeredScrollY =
-    (canvasDimensions.h - contentDimensions.h * scale) / 2;
-
-  return {
-    renderConfig: {
-      ...renderConfig,
-      scrollX: centeredScrollX + renderConfig.scrollX,
-      scrollY: centeredScrollY + renderConfig.scrollY,
-    },
-    scale,
-  };
-};
-
 export const applyFancyBackground = async ({
   canvas,
   fancyBackgroundImageUrl,
   backgroundColor,
-  renderConfig,
-  contentDimensions,
 }: {
   canvas: HTMLCanvasElement;
   fancyBackgroundImageUrl: DataURL;
   backgroundColor: string;
-  scale: number;
-  renderConfig: RenderConfig;
-  contentDimensions: Dimensions;
 }) => {
   const context = canvas.getContext("2d")!;
 
@@ -184,14 +137,7 @@ export const applyFancyBackground = async ({
 
   const canvasDimensions: Dimensions = { w: canvas.width, h: canvas.height };
 
-  // const normalizedDimensions: Dimensions = {
-  //   w: canvas.width / scale,
-  //   h: canvas.height / scale,
-  // };
-
   addImageBackground(context, canvasDimensions, fancyBackgroundImage);
 
   addContentBackground(context, canvasDimensions, backgroundColor);
-
-  return updateRenderConfig(renderConfig, canvasDimensions, contentDimensions);
 };