add max shape count

src/components/App.tsx

@@ -3462,7 +3462,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         await import(
           /* webpackChunkName: "pixelated-image" */ "../data/pixelated-image"
         )
-      ).pixelateImage(file, 20, event.clientX, event.clientY);
+      ).pixelateImage(file, 20, 1200, event.clientX, event.clientY);
 
       const nextElements = [
         ...this.scene.getElementsIncludingDeleted(),

src/data/pixelated-image.ts

@@ -35,6 +35,7 @@ const commonProps = {
 export const pixelateImage = async (
   blob: Blob,
   cellSize: number,
+  suggestedMaxShapeCount: number,
   x: number,
   y: number,
 ) => {
@@ -44,8 +45,20 @@ export const pixelateImage = async (
 
     // initialize canvas for pixelation
     const { width, height } = image;
-    const canvasWidth = Math.floor(width / cellSize);
+    let canvasWidth = Math.floor(width / cellSize);
-    const canvasHeight = Math.floor(height / cellSize);
+    let canvasHeight = Math.floor(height / cellSize);
+    const shapeCount = canvasHeight * canvasWidth;
+    if (shapeCount > suggestedMaxShapeCount) {
+      canvasWidth = Math.floor(
+        canvasWidth * (suggestedMaxShapeCount / shapeCount),
+      );
+      canvasHeight = Math.floor(
+        canvasHeight * (suggestedMaxShapeCount / shapeCount),
+      );
+    }
+    const xOffset = x - (canvasWidth * cellSize) / 2;
+    const yOffset = y - (canvasHeight * cellSize) / 2;
+
     const canvas =
       "OffscreenCanvas" in window
         ? new OffscreenCanvas(canvasWidth, canvasHeight)
@@ -76,8 +89,8 @@ export const pixelateImage = async (
             groupIds: [groupId],
             ...commonProps,
             type: "rectangle",
-            x: x + col * cellSize,
+            x: xOffset + col * cellSize,
-            y: y + row * cellSize,
+            y: yOffset + row * cellSize,
             width: cellSize,
             height: cellSize,
           });
@@ -85,6 +98,7 @@ export const pixelateImage = async (
         }
       }
     }
+
     return shapes;
   } finally {
     URL.revokeObjectURL(url);