diff --git a/frontend/src/common/util/parameterTranslation.ts b/frontend/src/common/util/parameterTranslation.ts index 638e972d03..a3038ee5fb 100644 --- a/frontend/src/common/util/parameterTranslation.ts +++ b/frontend/src/common/util/parameterTranslation.ts @@ -114,7 +114,7 @@ export const frontendToBackendParameters = ( generationParameters.strength = img2imgStrength; generationParameters.fit = false; - const maskDataURL = generateMask(maskImageElement, lines, boundingBox); + const maskDataURL = generateMask(maskImageElement, lines); generationParameters.init_mask = maskDataURL.split( 'data:image/png;base64,' diff --git a/frontend/src/features/tabs/Inpainting/util/boundingBoxAnchorBoundDragFunc.ts b/frontend/src/features/tabs/Inpainting/util/boundingBoxAnchorBoundDragFunc.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/frontend/src/features/tabs/Inpainting/util/checkIsMaskEmpty.ts b/frontend/src/features/tabs/Inpainting/util/checkIsMaskEmpty.ts new file mode 100644 index 0000000000..372d2f4228 --- /dev/null +++ b/frontend/src/features/tabs/Inpainting/util/checkIsMaskEmpty.ts @@ -0,0 +1,47 @@ +import Konva from 'konva'; +import { MaskLine } from '../inpaintingSlice'; + +/** + * Converts canvas into pixel buffer and checks if it is empty (all pixels full alpha). + */ +const checkIsMaskEmpty = (image: HTMLImageElement, lines: MaskLine[]) => { + const offscreenContainer = document.createElement('div'); + + const { width, height } = image; + + const stage = new Konva.Stage({ + container: offscreenContainer, + width: width, + height: height, + }); + + const layer = new Konva.Layer(); + + stage.add(layer); + + lines.forEach((line) => + layer.add( + new Konva.Line({ + points: line.points, + stroke: 'rgb(255,255,255)', + strokeWidth: line.strokeWidth * 2, + tension: 0, + lineCap: 'round', + lineJoin: 'round', + shadowForStrokeEnabled: false, + globalCompositeOperation: + line.tool === 'brush' ? 'source-over' : 'destination-out', + }) + ) + ); + + offscreenContainer.remove(); + + const pixelBuffer = new Uint32Array( + layer.getContext().getImageData(0, 0, width, height).data.buffer + ); + + return !pixelBuffer.some((color) => color !== 0); +}; + +export default checkIsMaskEmpty; diff --git a/frontend/src/features/tabs/Inpainting/util/generateMask.ts b/frontend/src/features/tabs/Inpainting/util/generateMask.ts index 7e294198fc..d8c6e60b06 100644 --- a/frontend/src/features/tabs/Inpainting/util/generateMask.ts +++ b/frontend/src/features/tabs/Inpainting/util/generateMask.ts @@ -1,5 +1,4 @@ import Konva from 'konva'; -import { IRect } from 'konva/lib/types'; import { MaskLine } from '../inpaintingSlice'; /** @@ -12,11 +11,7 @@ import { MaskLine } from '../inpaintingSlice'; * drawing the mask and compositing everything correctly to output a valid * mask image. */ -const generateMask = ( - image: HTMLImageElement, - lines: MaskLine[], - boundingBox: IRect -) => { +const generateMask = (image: HTMLImageElement, lines: MaskLine[]) => { const { width, height } = image; const offscreenContainer = document.createElement('div');