From e2a6d3439a4ec3a4c41f80ce0b269cfc6c69d435 Mon Sep 17 00:00:00 2001
From: Jake Teton-Landis <just.1.jake@gmail.com>
Date: Sun, 27 Nov 2022 13:12:26 -0800
Subject: [PATCH] Allow inverting mask for inpainting and img2img

---
 electron_app/package-lock.json                |  4 ++--
 electron_app/src/components/Img2Img.vue       |  4 +++-
 electron_app/src/components/Inpainting.vue    |  4 +++-
 .../src/components_bare/ImageCanvas.vue       | 23 ++++++++++++++++++-
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/electron_app/package-lock.json b/electron_app/package-lock.json
index e99b4781..cf3d5af9 100644
--- a/electron_app/package-lock.json
+++ b/electron_app/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "DiffusionBee",
-  "version": "1.4.4",
+  "version": "1.5.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "DiffusionBee",
-      "version": "1.4.4",
+      "version": "1.5.1",
       "hasInstallScript": true,
       "dependencies": {
         "@codekraft-studio/vue-record": "^0.0.3",
diff --git a/electron_app/src/components/Img2Img.vue b/electron_app/src/components/Img2Img.vue
index 8d23da84..f11d64d2 100644
--- a/electron_app/src/components/Img2Img.vue
+++ b/electron_app/src/components/Img2Img.vue
@@ -8,7 +8,7 @@
          -->
 
             <div v-if="inp_img" @drop.prevent="onDragFile" @dragover.prevent class="image_area" :class="{ crosshair_cur  : is_inpaint }"  style="height: calc(100% - 200px);  border-radius: 16px; padding:5px;">
-                <ImageCanvas ref="inp_img_canvas" :is_inpaint="is_inpaint" :image_source="inp_img"  :is_disabled="!stable_diffusion.is_input_avail" canvas_id="img2imgcan" canvas_d_id="img2imgcand" ></ImageCanvas>
+                <ImageCanvas ref="inp_img_canvas" :is_invert="is_invert" :is_inpaint="is_inpaint" :image_source="inp_img"  :is_disabled="!stable_diffusion.is_input_avail" canvas_id="img2imgcan" canvas_d_id="img2imgcand" ></ImageCanvas>
             </div>
                 <div v-else @drop.prevent="onDragFile" @dragover.prevent @click="open_input_image" class="image_area" :class="{ pointer_cursor  : is_sd_active }" style="height: calc(100% - 200px);  border-radius: 16px; padding:5px;">
                     <center>
@@ -20,6 +20,7 @@
             <div v-if="inp_img && stable_diffusion.is_input_avail" class="l_button" @click="inp_img =''">Clear</div>
             <div v-if="inp_img && stable_diffusion.is_input_avail && !is_inpaint" class="l_button" @click="is_inpaint = !is_inpaint ">Draw Mask</div>
             <div v-if="inp_img && stable_diffusion.is_input_avail && is_inpaint" class="l_button" @click="is_inpaint = !is_inpaint ">Remove Mask</div>
+            <div v-if="inp_img && stable_diffusion.is_input_avail && is_inpaint" class="l_button" @click="is_invert = !is_invert ">Invert Mask</div>
 
             <br> <br> 
             <textarea 
@@ -134,6 +135,7 @@ export default {
             img_h : 512 , 
             img_w : 512 , 
             is_inpaint : false,
+            is_invert : false,
             guidence_scale : 7.5 , 
 
             is_negative_prompt_avail : false, 
diff --git a/electron_app/src/components/Inpainting.vue b/electron_app/src/components/Inpainting.vue
index f6a94730..0a6bcac7 100644
--- a/electron_app/src/components/Inpainting.vue
+++ b/electron_app/src/components/Inpainting.vue
@@ -5,6 +5,7 @@
             <div v-if="inp_img && stable_diffusion.is_input_avail" class="l_button" style="float:right " @click="clear" > Reset</div>
             <div v-if="undo_history.length > 0  && stable_diffusion.is_input_avail" class="l_button" style="float:right " @click="do_undo" > Undo</div>
             <div v-if="inp_img " class="l_button" style="float:right " @click="save_img" > Save Image</div>
+            <div v-if="inp_img " class="l_button" style="float:right " @click="is_invert = !is_invert" > Invert Mask</div>
             <div v-if="retry_params  && stable_diffusion.is_input_avail" class="l_button" style="float:right "   @click="generate(true)"> Retry</div>
             
             
@@ -18,7 +19,7 @@
         </div>
 
         <div class="inapint_container" @drop.prevent="onDragFile" @dragover.prevent>
-            <ImageCanvas style="cursor: crosshair;"  v-if="inp_img"  ref="inp_img_canvas" :is_inpaint="true" :image_source="inp_img"  :is_disabled="!stable_diffusion.is_input_avail" id="inpaint"  canvas_id="inpaintcan" canvas_d_id="inpaintcand" :stroke_size_no="stroke_size_no" ></ImageCanvas>
+            <ImageCanvas style="cursor: crosshair;"  v-if="inp_img"  ref="inp_img_canvas" :is_inpaint="true" :is_invert="is_invert" :image_source="inp_img"  :is_disabled="!stable_diffusion.is_input_avail" id="inpaint"  canvas_id="inpaintcan" canvas_d_id="inpaintcand" :stroke_size_no="stroke_size_no" ></ImageCanvas>
             <div v-else @click="open_input_image" style=" "  :class="{ pointer_cursor  : is_sd_active }" >
                 <center>
                     <p style="padding-top: calc( 50vh - 115px);padding-bottom: calc( 50vh - 155px);  opacity: 70%;" >Click to add input image and draw a mask</p>
@@ -95,6 +96,7 @@ export default {
             undo_history : [],
             retry_params: undefined,
             stroke_size_no : "30",
+            is_invert: false,
             "history_key" : "",
         };
     },
diff --git a/electron_app/src/components_bare/ImageCanvas.vue b/electron_app/src/components_bare/ImageCanvas.vue
index 6f4344d8..87a75f73 100644
--- a/electron_app/src/components_bare/ImageCanvas.vue
+++ b/electron_app/src/components_bare/ImageCanvas.vue
@@ -27,6 +27,7 @@ export default {
         canvas_d_id : String, 
         canvas_id: String,
         stroke_size_no : String,
+        is_invert: Boolean,
     },
     components: {},
     computed: {
@@ -192,6 +193,19 @@ export default {
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             this.is_something_drawn = false 
         },
+        invert_inpaint(){
+            let canvas = document.getElementById(this.canvas_id);
+            let ctx = canvas.getContext("2d");
+
+            let prevCompositionState = ctx.globalCompositeOperation
+            try {
+                ctx.globalCompositeOperation = 'xor'
+                ctx.fillStyle = this.stroke_color;
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+            } finally {
+                ctx.globalCompositeOperation = prevCompositionState
+            }
+        },
         on_img_change(){
             let that = this;
             addImageProcess('file://'+this.image_source).then(function(img_tag){
@@ -261,7 +275,14 @@ export default {
                 }
             },
             deep: true
-        } , 
+        }, 
+
+        'is_invert': {
+            handler: function() {
+                this.invert_inpaint();
+            },
+            deep: true
+        }
     }
 }
 </script>