add target info to events and fix mask impl

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

index.html

@@ -69,9 +69,6 @@
             <input type="checkbox" id="cbxEnableErasing" onchange="changeEnableErasing()"><br />
             <label for="cbxPaint">Mask mode?</label>
             <input type="checkbox" id="cbxPaint" onchange="changePaintMode()"><br />
-            <!-- Having to tick a box to erase is a bad user experience, same goes for image erasing( cold be remedied by a temp confirm div) -->
-            <!-- <label for="cbxErase"><s>Erase mask?</s></label>
-            <input type="checkbox" id="cbxErase" onchange="changeEraseMode()" disabled="disabled"><br /> -->
 
             <label for="cbxHRFix">Auto txt2img HRfix?</label>
             <input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()"><br />

js/index.js

@@ -109,7 +109,6 @@ const basePixelCount = 64; //64 px - ALWAYS 64 PX
 var scaleFactor = 8; //x64 px
 var snapToGrid = true;
 var paintMode = false;
-var eraseMode = false; //TODO this is broken, functionality still exists in code but UI element is just naively disabled
 var backupMaskPaintCanvas; //???
 var backupMaskPaintCtx; //...? look i am bad at this
 var backupMaskChunk = null;
@@ -434,7 +433,7 @@ function mouseMove(evt) {
  * Mask implementation
  */
 mouse.listen.canvas.onmousemove.on((evn) => {
-    if (paintMode) {
+    if (paintMode && evn.target.id === 'overlayCanvas') {
         // draw big translucent red blob cursor
         ovCtx.beginPath();
         ovCtx.arc(evn.x, evn.y, 4 * scaleFactor, 0, 2 * Math.PI, true); // for some reason 4x on an arc is === to 8x on a line???
@@ -444,7 +443,7 @@ mouse.listen.canvas.onmousemove.on((evn) => {
 });
 
 mouse.listen.canvas.left.onpaint.on((evn) => {
-    if (paintMode) {
+    if (paintMode && evn.target.id === 'overlayCanvas') {
         maskPaintCtx.globalCompositeOperation = 'source-over';
         maskPaintCtx.strokeStyle = '#FF6A6A';
 
@@ -458,7 +457,7 @@ mouse.listen.canvas.left.onpaint.on((evn) => {
 });
 
 mouse.listen.canvas.right.onpaint.on((evn) => {
-    if (paintMode) {
+    if (paintMode && evn.target.id === 'overlayCanvas') {
         maskPaintCtx.globalCompositeOperation = 'destination-out';
         maskPaintCtx.strokeStyle = '#FFFFFFFF';
 

js/input.js

@@ -97,6 +97,7 @@ window.onmousedown = (evn) => {
             // ondclick event
             ['window', 'canvas', 'world'].forEach((ctx) =>
                 mouse.listen[ctx][key].ondclick.emit({
+                    target: evn.target,
                     buttonId: evn.button,
                     x: mouse[ctx].pos.x,
                     y: mouse[ctx].pos.y,
@@ -115,6 +116,7 @@ window.onmousedown = (evn) => {
         _drag_start_timeout[key] = setTimeout(() => {
             ['window', 'canvas', 'world'].forEach((ctx) => {
                 mouse.listen[ctx][key].ondragstart.emit({
+                    target: evn.target,
                     buttonId: evn.button,
                     x: mouse[ctx].pos.x,
                     y: mouse[ctx].pos.y,
@@ -134,6 +136,7 @@ window.onmousedown = (evn) => {
 
             // onpaintstart event
             mouse.listen[ctx][key].onpaintstart.emit({
+                target: evn.target,
                 buttonId: evn.button,
                 x: mouse[ctx].pos.x,
                 y: mouse[ctx].pos.y,
@@ -170,6 +173,7 @@ window.onmouseup = (evn) => {
                     inputConfig.clickRadius * inputConfig.clickRadius
             )
                 mouse.listen[ctx][key].onclick.emit({
+                    target: evn.target,
                     buttonId: evn.button,
                     x: mouse[ctx].pos.x,
                     y: mouse[ctx].pos.y,
@@ -178,6 +182,7 @@ window.onmouseup = (evn) => {
 
             // onpaintend event
             mouse.listen[ctx][key].onpaintend.emit({
+                target: evn.target,
                 buttonId: evn.button,
                 x: mouse[ctx].pos.x,
                 y: mouse[ctx].pos.y,
@@ -187,6 +192,7 @@ window.onmouseup = (evn) => {
             // ondragend event
             if (mouse[ctx].dragging[key].drag)
                 mouse.listen[ctx][key].ondragend.emit({
+                    target: evn.target,
                     buttonId: evn.button,
                     x: mouse[ctx].pos.x,
                     y: mouse[ctx].pos.y,
@@ -232,6 +238,7 @@ window.onmousemove = (evn) => {
 
     ['window', 'canvas', 'world'].forEach((ctx) => {
         mouse.listen[ctx].onmousemove.emit({
+            target: evn.target,
             px: mouse[ctx].prev.x,
             py: mouse[ctx].prev.y,
             x: mouse[ctx].pos.x,
@@ -242,6 +249,7 @@ window.onmousemove = (evn) => {
             // ondrag event
             if (mouse[ctx].dragging[key] && mouse[ctx].dragging[key].drag)
                 mouse.listen[ctx][key].ondrag.emit({
+                    target: evn.target,
                     px: mouse[ctx].prev.x,
                     py: mouse[ctx].prev.y,
                     x: mouse[ctx].pos.x,
@@ -252,6 +260,7 @@ window.onmousemove = (evn) => {
             // onpaint event
             if (mouse[ctx].dragging[key])
                 mouse.listen[ctx][key].onpaint.emit({
+                    target: evn.target,
                     px: mouse[ctx].prev.x,
                     py: mouse[ctx].prev.y,
                     x: mouse[ctx].pos.x,