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

marching ants during image generation

Browse source 
i uh also decided to useTabs in prettier and it now looks like i rewrote the entire application again :badpokerface:
This commit is contained in:
tim h 2022-11-20 17:10:03 -06:00
parent bef6b214f4
commit 959bb4f8b1
4 changed files with 896 additions and 873 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.prettierrc.json
View file

@ -14,6 +14,6 @@
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false,
"useTabs": true,
"vueIndentScriptAndStyle": false
}

37
js/index.js
View file

@ -124,6 +124,9 @@ var arbitraryImageBitmap;
var arbitraryImageBase64; // seriously js cmon work with me here
var placingArbitraryImage = false; // for when the user has loaded an existing image from their computer
var enableErasing = false; // accidental right-click erase if the user isn't trying to erase is a bad thing
var marchOffset = 0;
var marching = false;
var marchCoords = {};
// info div, sometimes hidden
let mouseXInfo = document.getElementById("mouseX");
@ -251,6 +254,7 @@ function imageAcceptReject(x, y, data) {
function accept(evt) {
// write image to imgcanvas
marching = false;
clearBackupMask();
placeImage();
removeChoiceButtons();
@ -260,6 +264,7 @@ function accept(evt) {
function reject(evt) {
// remove image entirely
marching = false;
restoreBackupMask();
clearBackupMask();
clearTargetMask();
@ -379,6 +384,25 @@ function snap(i, scaled = true) {
return -snapOffset;
}
function march() {
if (marching) {
marchOffset++;
if (marchOffset > 16) {
marchOffset = 0;
}
drawMarchingAnts();
setTimeout(march, 20);
}
}
function drawMarchingAnts() {
clearTargetMask();
tgtCtx.strokeStyle = "#333333FF"; //"#55000077";
tgtCtx.setLineDash([4, 2]);
tgtCtx.lineDashOffset = -marchOffset;
tgtCtx.strokeRect(marchCoords.x, marchCoords.y, marchCoords.w, marchCoords.h);
}
function mouseMove(evt) {
const rect = ovCanvas.getBoundingClientRect(); // not-quite pixel offset was driving me insane
const canvasOffsetX = rect.left;
@ -544,8 +568,7 @@ function mouseUp(evt) {
if (!blockNewImages) {
//TODO seriously, refactor this
blockNewImages = true;
clearTargetMask();
tgtCtx.strokeStyle = "#55000077";
marching = true;
var drawIt = {}; //why am i doing this????
var target = drawTargets[drawTargets.length - 1]; //get the last one... why am i storing all of them?
var oddOffset = 0;
@ -561,11 +584,11 @@ function mouseUp(evt) {
finalX = snapOffsetX + target.x - oddOffset;
finalY = snapOffsetY + target.y - oddOffset;
drawThis.x = finalX;
drawThis.y = finalY;
drawThis.w = target.w;
drawThis.h = target.h;
tgtCtx.strokeRect(finalX, finalY, target.w, target.h);
drawThis.x = marchCoords.x = finalX;
drawThis.y = marchCoords.y = finalY;
drawThis.w = marchCoords.w = target.w;
drawThis.h = marchCoords.h = target.h;
march(finalX, finalY, target.w, target.h);
drawIt = drawThis; //TODO this is WRONG but also explicitly only draws the last image ... i think
//check if there's image data already there
// console.log(downX + ":" + downY + " :: " + this.isCanvasBlank(downX, downY));