From 8321e9236805720d37e929fa243cd3d6e79abba8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Thu, 10 Aug 2023 21:35:05 +0200
Subject: [PATCH] feat: use elements dimensions for scaling

---
 src/scene/export.ts          | 6 +++++-
 src/scene/fancyBackground.ts | 7 +++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/scene/export.ts b/src/scene/export.ts
index f7009b67b..edd91e6d2 100644
--- a/src/scene/export.ts
+++ b/src/scene/export.ts
@@ -84,15 +84,19 @@ export const exportToCanvas = async (
   };
 
   if (appState.fancyBackgroundImageUrl) {
+    const contentBounds = getCommonBounds(elements);
     const updatedRenderProps = await applyFancyBackground({
       canvas,
       fancyBackgroundImageUrl: appState.fancyBackgroundImageUrl,
       backgroundColor: viewBackgroundColor,
       scale,
       renderConfig,
+      contentDimensions: {
+        w: contentBounds[2] - contentBounds[0],
+        h: contentBounds[3] - contentBounds[1],
+      },
     });
 
-    console.log(scale, updatedRenderProps.scale);
     renderConfig = updatedRenderProps.renderConfig;
     scale = updatedRenderProps.scale;
   }
diff --git a/src/scene/fancyBackground.ts b/src/scene/fancyBackground.ts
index 63f9a40d8..a14eb6edc 100644
--- a/src/scene/fancyBackground.ts
+++ b/src/scene/fancyBackground.ts
@@ -137,6 +137,7 @@ const addContentBackground = (
 const updateRenderConfig = (
   renderConfig: RenderConfig,
   canvasDimensions: Dimensions,
+  contentDimesions: Dimensions,
 ): { scale: number; renderConfig: RenderConfig } => {
   const totalPadding =
     FANCY_BG_PADDING + FANCY_BG_BORDER_RADIUS + DEFAULT_EXPORT_PADDING;
@@ -147,7 +148,7 @@ const updateRenderConfig = (
       scrollX: renderConfig.scrollX + totalPadding,
       scrollY: renderConfig.scrollY + totalPadding,
     },
-    scale: getScaleToFit(canvasDimensions, {
+    scale: getScaleToFit(contentDimesions, {
       w: canvasDimensions.w - totalPadding * 2,
       h: canvasDimensions.h - totalPadding * 2,
     }),
@@ -159,12 +160,14 @@ export const applyFancyBackground = async ({
   fancyBackgroundImageUrl,
   backgroundColor,
   renderConfig,
+  contentDimensions,
 }: {
   canvas: HTMLCanvasElement;
   fancyBackgroundImageUrl: DataURL;
   backgroundColor: string;
   scale: number;
   renderConfig: RenderConfig;
+  contentDimensions: Dimensions;
 }) => {
   const context = canvas.getContext("2d")!;
 
@@ -183,5 +186,5 @@ export const applyFancyBackground = async ({
 
   addContentBackground(context, canvasDimensions, backgroundColor);
 
-  return updateRenderConfig(renderConfig, canvasDimensions);
+  return updateRenderConfig(renderConfig, canvasDimensions, contentDimensions);
 };