fixes issue 10

adds new bug where dropped arbitrary images now do that annoying odd-number scale garbage

fixes that too

README.md

@@ -106,6 +106,7 @@ please do! kindly indicate your OS, browser, versions of both, any errors in dev
  - ~~odd-numbered scale factors don't snap correctly~~
  - ~~arbitrary "pasted" images require clicking twice to place them and i _don't know why_ [(yes i do)](#terrible), just getting them to be arbitrarily placable was a giant pain because i'm not got the smarts~~
  - selecting an aribtrary image by double-clicking it in the file picker can sometimes trigger a dream request that errors out if your file picker is "above" the canvas; i tried to alleviate that by temporarily removing the mouse(move/down/up) handlers for the canvas context on selection of a file, but i'm POSITIVE it's an improper solution and not quite sure if it's even fully effective
+ - not sure if "bug" since it occurs in stable diffusion and not openOutpaint, but auto txt2img HRfix + odd number scale factors returns an "Exception in ASGI application" in SD console output; for example using scale factor of 9 results in "RuntimeError: Sizes of tensors must match except in dimension 1. Expected size 10 but got size 9 for tensor number 1 in the list." 
 
 ## warranty
 [lmao](https://github.com/moyix/fauxpilot#support-and-warranty)

css/index.css

@@ -69,16 +69,6 @@
     grid-row-gap: 0px;
 }
 
-.maskCanvasMonitor {
+.maskCanvasMonitor .overMaskCanvasMonitor .initImgCanvasMonitor {
     position: absolute;
-}
-
-.overMaskCanvasMonitor {
-    position: absolute;
-    left: 600px;
-}
-
-.initImgCanvasMonitor {
-    position: absolute;
-    left: 1200px;
 }

index.html

@@ -171,13 +171,13 @@
             <div>
                 <canvas id="maskCanvasMonitor" class="maskCanvasMonitor" width="512" height="512">
                     <p>lol ur browser sucks</p>
-                </canvas>
+                </canvas><br />
                 <canvas id="overMaskCanvasMonitor" class="overMaskCanvasMonitor" width="512" height="512">
                     <p>lol ur browser sucks</p>
-                </canvas>
+                </canvas><br />
                 <canvas id="initImgCanvasMonitor" class="initImgCanvasMonitor" width="512" height="512">
                     <p>lol ur browser sucks</p>
-                </canvas>
+                </canvas><br />
             </div>
         </div>
     </div>

js/index.js

@@ -314,12 +314,14 @@ function sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
 
-function snap(i) {
+function snap(i, scaled = true) {
     // very cheap test proof of concept but it works surprisingly well
     var scaleOffset = 0;
-    if (scaleFactor % 2 != 0) {
+    if (scaled) {
-        // odd number, snaps to center of cell, oops
+        if (scaleFactor % 2 != 0) {
-        scaleOffset = (basePixelCount / 2);
+            // odd number, snaps to center of cell, oops
+            scaleOffset = (basePixelCount / 2);
+        }
     }
     var snapOffset = i % basePixelCount - scaleOffset;
     if (snapOffset == 0) {
@@ -345,12 +347,12 @@ function mouseMove(evt) {
         snapOffsetX = 0;
         snapOffsetY = 0;
         if (snapToGrid) {
-            snapOffsetX = snap(canvasX);
+            snapOffsetX = snap(canvasX, false);
-            snapOffsetY = snap(canvasY);
+            snapOffsetY = snap(canvasY, false);
         }
         finalX = snapOffsetX + canvasX;
         finalY = snapOffsetY + canvasY;
-        ovCtx.drawImage(arbitraryImage, parseInt(finalX - ((basePixelCount * scaleFactor) / 2)), parseInt(finalY - ((basePixelCount * scaleFactor) / 2)));
+        ovCtx.drawImage(arbitraryImage, finalX, finalY);
     } else if (!paintMode) {
         // draw targeting square reticle thingy cursor
         ovCtx.strokeStyle = "#00000077";
@@ -397,13 +399,17 @@ function mouseMove(evt) {
 
 function mouseDown(evt) {
     const rect = ovCanvas.getBoundingClientRect()
+    var oddOffset = 0;
+    if (scaleFactor % 2 != 0) {
+        oddOffset = basePixelCount / 2;
+    }
     if (evt.button == 0) { // left click
         if (placingArbitraryImage) {
             var nextBox = {};
-            nextBox.x = evt.clientX - ((basePixelCount * scaleFactor) / 2) - rect.left; //origin is middle of the frame 
+            nextBox.x = evt.offsetX;
-            nextBox.y = evt.clientY - ((basePixelCount * scaleFactor) / 2) - rect.top; //TODO make a way to set the origin to numpad dirs?
+            nextBox.y = evt.offsetY;
-            nextBox.w = basePixelCount * scaleFactor;
+            nextBox.w = arbitraryImageData.width;
-            nextBox.h = basePixelCount * scaleFactor;
+            nextBox.h = arbitraryImageData.height;
             dropTargets.push(nextBox);
         } else if (paintMode) {
             //const rect = ovCanvas.getBoundingClientRect() // not-quite pixel offset was driving me insane
@@ -414,10 +420,6 @@ function mouseDown(evt) {
             clicked = true;
         } else {
             //const rect = ovCanvas.getBoundingClientRect()
-            var oddOffset = 0;
-            if (scaleFactor % 2 != 0) {
-                oddOffset = basePixelCount / 2;
-            }
             var nextBox = {};
             nextBox.x = evt.clientX - ((basePixelCount * scaleFactor) / 2) - rect.left + oddOffset; //origin is middle of the frame 
             nextBox.y = evt.clientY - ((basePixelCount * scaleFactor) / 2) - rect.top + oddOffset; //TODO make a way to set the origin to numpad dirs?
@@ -444,8 +446,8 @@ function mouseUp(evt) {
             snapOffsetX = 0;
             snapOffsetY = 0;
             if (snapToGrid) {
-                snapOffsetX = snap(target.x);
+                snapOffsetX = snap(target.x, false);
-                snapOffsetY = snap(target.y);
+                snapOffsetY = snap(target.y, false);
             }
             finalX = snapOffsetX + target.x;
             finalY = snapOffsetY + target.y;
@@ -495,10 +497,12 @@ function mouseUp(evt) {
                     const imgChunkData = imgChunk.data; // imagedata.data object, a big inconvenient uint8clampedarray
                     // these are the 3 mask monitors on the bottom of the page
                     var maskCanvas = document.getElementById("maskCanvasMonitor");
-                    var maskCanvasCtx = maskCanvas.getContext("2d");
                     var initImgCanvas = document.getElementById("initImgCanvasMonitor");
-                    var initImgCanvasCtx = initImgCanvas.getContext("2d");
                     var overMaskCanvas = document.getElementById("overMaskCanvasMonitor");
+                    overMaskCanvas.width = initImgCanvas.width = maskCanvas.width = target.w;
+                    overMaskCanvas.height = initImgCanvas.height = maskCanvas.height = target.h;
+                    var maskCanvasCtx = maskCanvas.getContext("2d");
+                    var initImgCanvasCtx = initImgCanvas.getContext("2d");
                     var overMaskCanvasCtx = overMaskCanvas.getContext("2d");
                     // get blank pixels to use as mask
                     const maskImgData = maskCanvasCtx.createImageData(drawIt.w, drawIt.h);