fix(ui): fix canvas bbox autoscale

invokeai/frontend/web/src/features/canvas/util/createMaskStage.ts

@@ -9,7 +9,8 @@ import { IRect } from 'konva/lib/types';
  */
 const createMaskStage = async (
   lines: CanvasMaskLine[],
-  boundingBox: IRect
+  boundingBox: IRect,
+  shouldInvertMask: boolean
 ): Promise<Konva.Stage> => {
   // create an offscreen canvas and add the mask to it
   const { width, height } = boundingBox;
@@ -29,7 +30,7 @@ const createMaskStage = async (
   baseLayer.add(
     new Konva.Rect({
       ...boundingBox,
-      fill: 'white',
+      fill: shouldInvertMask ? 'black' : 'white',
     })
   );
 
@@ -37,7 +38,7 @@ const createMaskStage = async (
     maskLayer.add(
       new Konva.Line({
         points: line.points,
-        stroke: 'black',
+        stroke: shouldInvertMask ? 'white' : 'black',
         strokeWidth: line.strokeWidth * 2,
         tension: 0,
         lineCap: 'round',

invokeai/frontend/web/src/features/canvas/util/getCanvasData.ts

@@ -25,6 +25,7 @@ export const getCanvasData = async (state: RootState) => {
     boundingBoxCoordinates,
     boundingBoxDimensions,
     isMaskEnabled,
+    shouldPreserveMaskedArea,
   } = state.canvas;
 
   const boundingBox = {
@@ -58,7 +59,8 @@ export const getCanvasData = async (state: RootState) => {
   // For the mask layer, use the normal boundingBox
   const maskStage = await createMaskStage(
     isMaskEnabled ? objects.filter(isCanvasMaskLine) : [], // only include mask lines, and only if mask is enabled
-    boundingBox
+    boundingBox,
+    shouldPreserveMaskedArea
   );
   const maskBlob = await konvaNodeToBlob(maskStage, boundingBox);
   const maskImageData = await konvaNodeToImageData(maskStage, boundingBox);