Improve the resizing

diff --git a/src/app/importActions.ts b/src/app/importActions.ts
index 8f72fcb8aa47de6f397eba9c4264d5d0a56c512e..68d904c30a5e09370044a68335220277be87fd3c 100644 (file)
--- a/src/app/importActions.ts
+++ b/src/app/importActions.ts
@@ -15,11 +15,11 @@ export type FormState = {
 }
 
 export async function importBoard(prevState: FormState, formData: FormData): Promise<FormState> {
-    const boardIdsRaw = formData.get('board');
+    const boardIdsRaw = formData.getAll('board');
     if (!boardIdsRaw) {
         return prevState;
     }
-    const boardIds: string[] = Array.isArray(boardIdsRaw) ? boardIdsRaw : [boardIdsRaw] as string[];
+    const boardIds: string[] = Array.isArray(boardIdsRaw) ? boardIdsRaw as string[] : [boardIdsRaw] as string[];
 
     // Get board from Miro API
     const { miro, userId } = initMiroAPI();
@@ -139,6 +139,8 @@ function transformBoardIntoNeoboardCoordinates(board: Whiteboard): Whiteboard {
     // The coordinate system in Miro is different from the coordinate system in Neoboard.
     // In Neoboard the frames are only neoboardWhiteboardWidth wide and whiteboardHeight tall.
 
+    const neoboardPadding = 10;
+
     // The first step is to find the bounding box of all the slides.
     let minX = Number.MAX_SAFE_INTEGER;
     let minY = Number.MAX_SAFE_INTEGER;
@@ -173,7 +175,7 @@ function transformBoardIntoNeoboardCoordinates(board: Whiteboard): Whiteboard {
     // The second step is to scale all the elements to fit within the bounding box.
     const width = maxX - minX;
     const height = maxY - minY;
-    const scale = Math.min((neoboardWhiteboardWidth - 5) / width, (neoboardWhiteboardHeight - 5) / height);
+    const scale = Math.min((neoboardWhiteboardWidth - neoboardPadding) / width, (neoboardWhiteboardHeight - neoboardPadding) / height);
 
     const transformedBoard: Whiteboard = {
         version: board.version,
@@ -243,6 +245,8 @@ function convertShape(item: ShapeItem): Shape | undefined {
         borderRadius = 25;
     }
 
+    const neoboardPadding = 5;
+
     const opacity = item.style?.fillOpacity ?? (item.style?.fillColor ? "1.0" : "0.0");
     const borderColorOpacity = item.style?.borderOpacity ?? "1.0";
 
@@ -253,8 +257,8 @@ function convertShape(item: ShapeItem): Shape | undefined {
             x: item.position?.x ?? 0,
             y: item.position?.y ?? 0,
         },
-        width: item.geometry?.width ?? 1,
-        height: item.geometry?.height ?? 1,
+        width: (item.geometry?.width ?? 1) + neoboardPadding,
+        height: (item.geometry?.height ?? 1) + neoboardPadding,
         fillColor: opacity === "1.0" ? (item.style?.fillColor ?? "#ffffff") : "transparent",
         strokeColor: borderColorOpacity === "1.0" ? (item.style?.borderColor ?? "#1a1a1a") : "transparent",
         strokeWidth: parseFloat(item.style?.borderWidth ?? "2.0"),