From e00764a9374ab2a4fec7f6763d3ff21d58ed323e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Tue, 22 Aug 2023 21:33:04 +0200
Subject: [PATCH] feat: center content in canvas expanded to aspect ratio

---
 src/scene/export.ts | 18 ++++++++++++++++--
 src/utils.ts        |  6 +++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/scene/export.ts b/src/scene/export.ts
index aeb20b479..0d218882d 100644
--- a/src/scene/export.ts
+++ b/src/scene/export.ts
@@ -82,6 +82,9 @@ export const exportToCanvas = async (
 
   const onlyExportingSingleFrame = isOnlyExportingSingleFrame(elements);
 
+  let scrollXAdjustment = 0;
+  let scrollYAdjustment = 0;
+
   if (
     exportWithFancyBackground &&
     appState.fancyBackgroundImageKey !== "solid"
@@ -93,6 +96,15 @@ export const exportToCanvas = async (
       exportScale: scale,
       theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT,
     });
+
+    const commonBounds = getCommonBounds(elements);
+    const contentSize: Dimensions = {
+      width: distance(commonBounds[0], commonBounds[2]),
+      height: distance(commonBounds[1], commonBounds[3]),
+    };
+
+    scrollXAdjustment = (width - contentSize.width - padding * 2) / 2;
+    scrollYAdjustment = (height - contentSize.height - padding * 2) / 2;
   }
 
   renderStaticScene({
@@ -107,8 +119,10 @@ export const exportToCanvas = async (
         exportBackground && !exportWithFancyBackground
           ? viewBackgroundColor
           : null,
-      scrollX: -minX + (onlyExportingSingleFrame ? 0 : padding),
-      scrollY: -minY + (onlyExportingSingleFrame ? 0 : padding),
+      scrollX:
+        -minX + (onlyExportingSingleFrame ? 0 : padding + scrollXAdjustment),
+      scrollY:
+        -minY + (onlyExportingSingleFrame ? 0 : padding + scrollYAdjustment),
       zoom: defaultAppState.zoom,
       shouldCacheIgnoreZoom: false,
       theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT,
diff --git a/src/utils.ts b/src/utils.ts
index f111a9414..908e696f9 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1038,11 +1038,11 @@ export const expandToAspectRatio = (
   let newWidth = Math.round(originalWidth);
   let newHeight = Math.round(originalHeight);
 
-  // Expand by width
-  if (originalAspectRatio > targetAspectRatio) {
+  // Original is landscape, expand width
+  if (originalAspectRatio < targetAspectRatio) {
     newWidth = Math.round(originalHeight * targetAspectRatio);
   }
-  // Expand by height
+  // Original is portrait or square, expand height
   else {
     newHeight = Math.round(originalWidth / targetAspectRatio);
   }