diff --git a/index.html b/index.html index 511f4ab..5f9a5d3 100644 --- a/index.html +++ b/index.html @@ -69,8 +69,10 @@

+
@@ -90,6 +92,7 @@
+
@@ -108,7 +111,9 @@
- +
+ +

diff --git a/js/index.js b/js/index.js index 6f72437..16cca7c 100644 --- a/js/index.js +++ b/js/index.js @@ -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 = {}; @@ -126,6 +127,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 @@ -366,12 +368,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 @@ -423,6 +427,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; } @@ -458,13 +475,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); + } } } }