From 059c0759feda48b5f18f95b089ef9eda270c8d23 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Fri, 25 Nov 2022 19:39:38 -0300
Subject: [PATCH] fix border mask rendering

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 js/ui/tool/dream.js | 70 +++++++++++++++++++++++----------------------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js
index 500be7a..1431b19 100644
--- a/js/ui/tool/dream.js
+++ b/js/ui/tool/dream.js
@@ -307,42 +307,44 @@ const img2imgTool = () =>
 
 				state.mousemovecb = (evn) => {
 					_reticle_draw(evn, state.snapToGrid);
-					const bb = getBoundingBox(
-						evn.x,
-						evn.y,
-						basePixelCount * scaleFactor,
-						basePixelCount * scaleFactor,
-						state.snapToGrid && basePixelCount
-					);
-
-					// For displaying border mask
-					const auxCanvas = document.createElement("canvas");
-					auxCanvas.width = bb.w;
-					auxCanvas.height = bb.h;
-					const auxCtx = auxCanvas.getContext("2d");
-
-					if (state.borderMaskSize > 0) {
-						auxCtx.fillStyle = "#FF6A6A50";
-						auxCtx.fillRect(0, 0, state.borderMaskSize, bb.h);
-						auxCtx.fillRect(0, 0, bb.w, state.borderMaskSize);
-						auxCtx.fillRect(
-							bb.w - state.borderMaskSize,
-							0,
-							state.borderMaskSize,
-							bb.h
-						);
-						auxCtx.fillRect(
-							0,
-							bb.h - state.borderMaskSize,
-							bb.w,
-							state.borderMaskSize
+					if (evn.target.id === "overlayCanvas") {
+						const bb = getBoundingBox(
+							evn.x,
+							evn.y,
+							basePixelCount * scaleFactor,
+							basePixelCount * scaleFactor,
+							state.snapToGrid && basePixelCount
 						);
+
+						// For displaying border mask
+						const auxCanvas = document.createElement("canvas");
+						auxCanvas.width = bb.w;
+						auxCanvas.height = bb.h;
+						const auxCtx = auxCanvas.getContext("2d");
+
+						if (state.borderMaskSize > 0) {
+							auxCtx.fillStyle = "#FF6A6A50";
+							auxCtx.fillRect(0, 0, state.borderMaskSize, bb.h);
+							auxCtx.fillRect(0, 0, bb.w, state.borderMaskSize);
+							auxCtx.fillRect(
+								bb.w - state.borderMaskSize,
+								0,
+								state.borderMaskSize,
+								bb.h
+							);
+							auxCtx.fillRect(
+								0,
+								bb.h - state.borderMaskSize,
+								bb.w,
+								state.borderMaskSize
+							);
+						}
+
+						const tmp = ovCtx.globalAlpha;
+						ovCtx.globalAlpha = 0.4;
+						ovCtx.drawImage(auxCanvas, bb.x, bb.y);
+						ovCtx.globalAlpha = tmp;
 					}
-
-					const tmp = ovCtx.globalAlpha;
-					ovCtx.globalAlpha = 0.4;
-					ovCtx.drawImage(auxCanvas, bb.x, bb.y);
-					ovCtx.globalAlpha = tmp;
 				};
 				state.dreamcb = (evn) => {
 					dream_img2img_callback(evn, state);