feat: improve library preview image generation on publish (#4321)

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

src/packages/excalidraw/CHANGELOG.md

@@ -13,6 +13,13 @@ Please add the latest change on the top under the correct section.
 
 ## Unreleased
 
+### Features
+
+- Changes to [`exportToCanvas`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#exportToCanvas) util function:
+
+  - Add `maxWidthOrHeight?: number` attribute.
+  - `scale` returned from `getDimensions()` is now optional (default to `1`).
+
 - Image support.
 
   NOTE: the unreleased API is highly unstable and may change significantly before the next stable release. As such it's largely undocumented at this point. You are encouraged to read through the [PR](https://github.com/excalidraw/excalidraw/pull/4011) description if you want to know more about the internals.

src/packages/excalidraw/README_NEXT.md

@@ -756,7 +756,8 @@ This function makes sure elements and state is set to appropriate values and set
 | --- | --- | --- | --- |
 | elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/src/element/types) |  | The elements to be exported to canvas |
 | appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L12) | [defaultAppState](https://github.com/excalidraw/excalidraw/blob/master/src/appState.ts#L11) | The app state of the scene |
-| getDimensions | `(width: number, height: number) => {width: number, height: number, scale: number)` | `(width, height) => ({ width, height, scale: 1 })` | A function which returns the width, height and scale with which canvas is to be exported. |
+| getDimensions | `(width: number, height: number) => { width: number, height: number, scale?: number }` | undefined | A function which returns the `width`, `height`, and optionally `scale` (defaults `1`), with which canvas is to be exported. |
+| maxWidthOrHeight | `number` | undefined | The maximum width or height of the exported image. If provided, `getDimensions` is ignored. |
 
 **How to use**
 

src/packages/utils.ts

@@ -13,17 +13,19 @@ type ExportOpts = {
   elements: readonly NonDeleted<ExcalidrawElement>[];
   appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
   files: BinaryFiles | null;
+  maxWidthOrHeight?: number;
   getDimensions?: (
     width: number,
     height: number,
-  ) => { width: number; height: number; scale: number };
+  ) => { width: number; height: number; scale?: number };
 };
 
 export const exportToCanvas = ({
   elements,
   appState,
   files,
-  getDimensions = (width, height) => ({ width, height, scale: 1 }),
+  maxWidthOrHeight,
+  getDimensions,
 }: ExportOpts) => {
   const { elements: restoredElements, appState: restoredAppState } = restore(
     { elements, appState },
@@ -38,12 +40,36 @@ export const exportToCanvas = ({
     { exportBackground, viewBackgroundColor },
     (width: number, height: number) => {
       const canvas = document.createElement("canvas");
-      const ret = getDimensions(width, height);
+
+      if (maxWidthOrHeight) {
+        if (typeof getDimensions === "function") {
+          console.warn(
+            "`getDimensions()` is ignored when `maxWidthOrHeight` is supplied.",
+          );
+        }
+
+        const max = Math.max(width, height);
+
+        const scale = maxWidthOrHeight / max;
+
+        canvas.width = width * scale;
+        canvas.height = height * scale;
+
+        return {
+          canvas,
+          scale,
+        };
+      }
+
+      const ret = getDimensions?.(width, height) || { width, height };
 
       canvas.width = ret.width;
       canvas.height = ret.height;
 
-      return { canvas, scale: ret.scale };
+      return {
+        canvas,
+        scale: ret.scale ?? 1,
+      };
     },
   );
 };