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

Mask erasing

Browse source
This commit is contained in:
Kalekki 2022-11-20 14:26:33 +02:00 committed by Victor Seiji Hariki
parent d563e8ba3a
commit ff9d930956
2 changed files with 31 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
index.html
View file

@ -69,8 +69,10 @@
<input type="checkbox" id="cbxEnableErasing" onchange="changeEnableErasing()"><br /> <input type="checkbox" id="cbxEnableErasing" onchange="changeEnableErasing()"><br />
<label for="cbxPaint">Mask mode?</label> <label for="cbxPaint">Mask mode?</label>
<input type="checkbox" id="cbxPaint" onchange="changePaintMode()"><br /> <input type="checkbox" id="cbxPaint" onchange="changePaintMode()"><br />
<!-- Having to tick a box to erase is jank as fuck, same goes for image erasing
<label for="cbxErase"><s>Erase mask?</s></label> <label for="cbxErase"><s>Erase mask?</s></label>
<input type="checkbox" id="cbxErase" onchange="changeEraseMode()" disabled="disabled"><br /> <input type="checkbox" id="cbxErase" onchange="changeEraseMode()" disabled="disabled"><br />
-->
<label for="cbxHRFix">Auto txt2img HRfix?</label> <label for="cbxHRFix">Auto txt2img HRfix?</label>
<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()"><br /> <input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()"><br />
<label for="overMaskPx">Overmask px (0 to disable):</label> <label for="overMaskPx">Overmask px (0 to disable):</label>
@ -88,6 +90,7 @@
<button onclick="downloadCanvas()">Save canvas</button><br /> <button onclick="downloadCanvas()">Save canvas</button><br />
<button onclick="newImage()">Clear canvas</button> <button onclick="newImage()">Clear canvas</button>
</div> </div>
<!-- Degub info -->
<button type="button" class="collapsible">Debug info</button> <button type="button" class="collapsible">Debug info</button>
<div id="coords" class="content"> <div id="coords" class="content">
<label for="mouseX">mouseX:</label> <label for="mouseX">mouseX:</label>
@ -106,7 +109,9 @@
<span id="snapX"></span> <span id="snapX"></span>
<br /> <br />
<label for="snapY">snapY:</label> <label for="snapY">snapY:</label>
<span id="snapY"></span> <span id="snapY"></span><br>
<label for="heldButton">Mouse button:</label>
<span id="heldButton"></span>
<br /> <br />
<hr> <hr>
</div> </div>

32
js/index.js
View file

@ -92,6 +92,7 @@ var mouseX = 0;
var mouseY = 0; var mouseY = 0;
var canvasX = 0; var canvasX = 0;
var canvasY = 0; var canvasY = 0;
var heldButton = 0;
var snapX = 0; var snapX = 0;
var snapY = 0; var snapY = 0;
var drawThis = {}; var drawThis = {};
@ -124,6 +125,7 @@ let canvasXInfo = document.getElementById("canvasX");
let canvasYInfo = document.getElementById("canvasY"); let canvasYInfo = document.getElementById("canvasY");
let snapXInfo = document.getElementById("snapX"); let snapXInfo = document.getElementById("snapX");
let snapYInfo = document.getElementById("snapY"); let snapYInfo = document.getElementById("snapY");
let heldButtonInfo = document.getElementById("heldButton");
// canvases and related // canvases and related
const ovCanvas = document.getElementById("overlayCanvas"); // where mouse cursor renders const ovCanvas = document.getElementById("overlayCanvas"); // where mouse cursor renders
@ -371,12 +373,14 @@ function mouseMove(evt) {
const rect = ovCanvas.getBoundingClientRect() // not-quite pixel offset was driving me insane const rect = ovCanvas.getBoundingClientRect() // not-quite pixel offset was driving me insane
const canvasOffsetX = rect.left; const canvasOffsetX = rect.left;
const canvasOffsetY = rect.top; const canvasOffsetY = rect.top;
heldButton = evt.buttons;
mouseXInfo.innerText = mouseX = evt.clientX; mouseXInfo.innerText = mouseX = evt.clientX;
mouseYInfo.innerText = mouseY = evt.clientY; mouseYInfo.innerText = mouseY = evt.clientY;
canvasXInfo.innerText = canvasX = parseInt(evt.clientX - rect.left); canvasXInfo.innerText = canvasX = parseInt(evt.clientX - rect.left);
canvasYInfo.innerText = canvasY = parseInt(evt.clientY - rect.top); canvasYInfo.innerText = canvasY = parseInt(evt.clientY - rect.top);
snapXInfo.innerText = canvasX + snap(canvasX); snapXInfo.innerText = canvasX + snap(canvasX);
snapYInfo.innerText = canvasY + snap(canvasY); snapYInfo.innerText = canvasY + snap(canvasY);
heldButtonInfo.innerText = heldButton;
ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); // clear out the previous mouse cursor ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); // clear out the previous mouse cursor
if (placingArbitraryImage) { if (placingArbitraryImage) {
// ugh refactor so this isn't duplicated between arbitrary image and dream reticle modes // ugh refactor so this isn't duplicated between arbitrary image and dream reticle modes
@ -428,6 +432,19 @@ function mouseMove(evt) {
maskPaintCtx.lineJoin = maskPaintCtx.lineCap = 'round'; maskPaintCtx.lineJoin = maskPaintCtx.lineCap = 'round';
maskPaintCtx.stroke(); maskPaintCtx.stroke();
} }
// Erase mask if right button is held
// no reason to have to tick a checkbox for this, more intuitive for both erases (mask and actual images) to just work on right click and inform the user about it
if (evt.buttons == 2) {
maskPaintCtx.globalCompositeOperation = 'destination-out';
maskPaintCtx.beginPath();
maskPaintCtx.strokeStyle = "#FFFFFFFF";
maskPaintCtx.lineWidth = 8 * scaleFactor;
maskPaintCtx.moveTo(prevMouseX, prevMouseY);
maskPaintCtx.lineTo(mouseX, mouseY);
maskPaintCtx.lineJoin = maskPaintCtx.lineCap = 'round';
maskPaintCtx.stroke();
}
prevMouseX = mouseX; prevMouseX = mouseX;
prevMouseY = mouseY; prevMouseY = mouseY;
} }
@ -463,13 +480,14 @@ function mouseDown(evt) {
nextBox.h = basePixelCount * scaleFactor; nextBox.h = basePixelCount * scaleFactor;
drawTargets.push(nextBox); drawTargets.push(nextBox);
} }
} else if (evt.button == 2 && enableErasing && !paintMode) { // right click, also gotta make sure mask blob isn't being used as it's visually inconsistent with behavior of erased region } else if (evt.button == 2){
// erase the canvas underneath the cursor, if(enableErasing && !paintMode) { // right click, also gotta make sure mask blob isn't being used as it's visually inconsistent with behavior of erased region
ctx = imgCanvas.getContext('2d'); ctx = imgCanvas.getContext('2d');
if (snapToGrid) { if (snapToGrid) {
ctx.clearRect(canvasX + snap(canvasX) - ((basePixelCount * scaleFactor) / 2), canvasY + snap(canvasY) - ((basePixelCount * scaleFactor) / 2), basePixelCount * scaleFactor, basePixelCount * scaleFactor); ctx.clearRect(canvasX + snap(canvasX) - ((basePixelCount * scaleFactor) / 2), canvasY + snap(canvasY) - ((basePixelCount * scaleFactor) / 2), basePixelCount * scaleFactor, basePixelCount * scaleFactor);
} else { } else {
ctx.clearRect(canvasX - ((basePixelCount * scaleFactor) / 2), canvasY - ((basePixelCount * scaleFactor) / 2), basePixelCount * scaleFactor, basePixelCount * scaleFactor); ctx.clearRect(canvasX - ((basePixelCount * scaleFactor) / 2), canvasY - ((basePixelCount * scaleFactor) / 2), basePixelCount * scaleFactor, basePixelCount * scaleFactor);
}
} }
} }
} }