feat: center content in canvas expanded to aspect ratio

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),
+      scrollX:
-      scrollY: -minY + (onlyExportingSingleFrame ? 0 : padding),
+        -minX + (onlyExportingSingleFrame ? 0 : padding + scrollXAdjustment),
+      scrollY:
+        -minY + (onlyExportingSingleFrame ? 0 : padding + scrollYAdjustment),
       zoom: defaultAppState.zoom,
       shouldCacheIgnoreZoom: false,
       theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT,

src/utils.ts

@@ -1038,11 +1038,11 @@ export const expandToAspectRatio = (
   let newWidth = Math.round(originalWidth);
   let newHeight = Math.round(originalHeight);
 
-  // Expand by width
+  // Original is landscape, expand width
-  if (originalAspectRatio > targetAspectRatio) {
+  if (originalAspectRatio < targetAspectRatio) {
     newWidth = Math.round(originalHeight * targetAspectRatio);
   }
-  // Expand by height
+  // Original is portrait or square, expand height
   else {
     newHeight = Math.round(originalWidth / targetAspectRatio);
   }