sneedgroup-holder/openOutpaint
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixes issue 10

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

fixes that too
This commit is contained in:
tim h 2022-11-19 16:11:48 -06:00
parent 085aa5a33a
commit 9be9dd3479
4 changed files with 28 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -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)

12
css/index.css
View file

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

6
index.html
View file

@ -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>

42
js/index.js
View file

@ -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) {
// odd number, snaps to center of cell, oops
scaleOffset = (basePixelCount / 2);
if (scaled) {
if (scaleFactor % 2 != 0) {
// 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);
snapOffsetY = snap(canvasY);
snapOffsetX = snap(canvasX, false);
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.y = evt.clientY - ((basePixelCount * scaleFactor) / 2) - rect.top; //TODO make a way to set the origin to numpad dirs?
nextBox.w = basePixelCount * scaleFactor;
nextBox.h = basePixelCount * scaleFactor;
nextBox.x = evt.offsetX;
nextBox.y = evt.offsetY;
nextBox.w = arbitraryImageData.width;
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);
snapOffsetY = snap(target.y);
snapOffsetX = snap(target.x, false);
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);