From b20fe944e7762a8595984a1f2574ab4c52b38251 Mon Sep 17 00:00:00 2001 From: Preet Shihn <preetshihn@gmail.com> Date: Fri, 5 Feb 2021 10:27:06 -0800 Subject: [PATCH] add max shape count --- src/components/App.tsx | 2 +- src/data/pixelated-image.ts | 22 ++++++++++++++++++---- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index a71fd78c8b..32eb0bee2e 100644 --- a/src/components/App.tsx +++ b/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(), diff --git a/src/data/pixelated-image.ts b/src/data/pixelated-image.ts index 46161e892b..a88fe0452d 100644 --- a/src/data/pixelated-image.ts +++ b/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); - const canvasHeight = Math.floor(height / cellSize); + let canvasWidth = Math.floor(width / 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, - y: y + row * cellSize, + x: xOffset + col * cellSize, + y: yOffset + row * cellSize, width: cellSize, height: cellSize, }); @@ -85,6 +98,7 @@ export const pixelateImage = async ( } } } + return shapes; } finally { URL.revokeObjectURL(url);