From f8cbef5b8a5ed22d02cb62a716a552e162f20602 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Thu, 10 Aug 2023 23:25:33 +0200
Subject: [PATCH] feat: center content

---
 src/scene/export.ts          |  2 +-
 src/scene/fancyBackground.ts | 21 ++++++++++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/scene/export.ts b/src/scene/export.ts
index edd91e6d2..c5c097969 100644
--- a/src/scene/export.ts
+++ b/src/scene/export.ts
@@ -83,7 +83,7 @@ export const exportToCanvas = async (
     exportBackgroundImage: appState.fancyBackgroundImageUrl,
   };
 
-  if (appState.fancyBackgroundImageUrl) {
+  if (exportBackground && appState.fancyBackgroundImageUrl) {
     const contentBounds = getCommonBounds(elements);
     const updatedRenderProps = await applyFancyBackground({
       canvas,
diff --git a/src/scene/fancyBackground.ts b/src/scene/fancyBackground.ts
index a14eb6edc..f77ec617d 100644
--- a/src/scene/fancyBackground.ts
+++ b/src/scene/fancyBackground.ts
@@ -137,21 +137,28 @@ const addContentBackground = (
 const updateRenderConfig = (
   renderConfig: RenderConfig,
   canvasDimensions: Dimensions,
-  contentDimesions: 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: renderConfig.scrollX + totalPadding,
-      scrollY: renderConfig.scrollY + totalPadding,
+      scrollX: centeredScrollX + renderConfig.scrollX,
+      scrollY: centeredScrollY + renderConfig.scrollY,
     },
-    scale: getScaleToFit(contentDimesions, {
-      w: canvasDimensions.w - totalPadding * 2,
-      h: canvasDimensions.h - totalPadding * 2,
-    }),
+    scale,
   };
 };