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 />
<label for="cbxPaint">Mask mode?</label>
<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>
<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 />
<label for="overMaskPx">Overmask px (0 to disable):</label>
@ -88,6 +90,7 @@
<button onclick="downloadCanvas()">Save canvas</button><br />
<button onclick="newImage()">Clear canvas</button>
</div>
<!-- Degub info -->
<button type="button" class="collapsible">Debug info</button>
<div id="coords" class="content">
<label for="mouseX">mouseX:</label>
@ -106,7 +109,9 @@
<span id="snapX"></span>
<br />
<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 />
<hr>
</div>

32
js/index.js
View file

@ -92,6 +92,7 @@ var mouseX = 0;
var mouseY = 0;
var canvasX = 0;
var canvasY = 0;
var heldButton = 0;
var snapX = 0;
var snapY = 0;
var drawThis = {};
@ -124,6 +125,7 @@ let canvasXInfo = document.getElementById("canvasX");
let canvasYInfo = document.getElementById("canvasY");
let snapXInfo = document.getElementById("snapX");
let snapYInfo = document.getElementById("snapY");
let heldButtonInfo = document.getElementById("heldButton");
// canvases and related
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 canvasOffsetX = rect.left;
const canvasOffsetY = rect.top;
heldButton = evt.buttons;
mouseXInfo.innerText = mouseX = evt.clientX;
mouseYInfo.innerText = mouseY = evt.clientY;
canvasXInfo.innerText = canvasX = parseInt(evt.clientX - rect.left);
canvasYInfo.innerText = canvasY = parseInt(evt.clientY - rect.top);
snapXInfo.innerText = canvasX + snap(canvasX);
snapYInfo.innerText = canvasY + snap(canvasY);
heldButtonInfo.innerText = heldButton;
ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); // clear out the previous mouse cursor
if (placingArbitraryImage) {
// 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.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;
prevMouseY = mouseY;
}
@ -463,13 +480,14 @@ function mouseDown(evt) {
nextBox.h = basePixelCount * scaleFactor;
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
// erase the canvas underneath the cursor,
ctx = imgCanvas.getContext('2d');
if (snapToGrid) {
ctx.clearRect(canvasX + snap(canvasX) - ((basePixelCount * scaleFactor) / 2), canvasY + snap(canvasY) - ((basePixelCount * scaleFactor) / 2), basePixelCount * scaleFactor, basePixelCount * scaleFactor);
} else {
ctx.clearRect(canvasX - ((basePixelCount * scaleFactor) / 2), canvasY - ((basePixelCount * scaleFactor) / 2), basePixelCount * scaleFactor, basePixelCount * scaleFactor);
} else if (evt.button == 2){
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');
if (snapToGrid) {
ctx.clearRect(canvasX + snap(canvasX) - ((basePixelCount * scaleFactor) / 2), canvasY + snap(canvasY) - ((basePixelCount * scaleFactor) / 2), basePixelCount * scaleFactor, basePixelCount * scaleFactor);
} else {
ctx.clearRect(canvasX - ((basePixelCount * scaleFactor) / 2), canvasY - ((basePixelCount * scaleFactor) / 2), basePixelCount * scaleFactor, basePixelCount * scaleFactor);
}
}
}
}