diff --git a/xray.html b/xray.html index f00ee29..80c835c 100644 --- a/xray.html +++ b/xray.html @@ -33,6 +33,10 @@ Fullscreen + + Border: + + Paint mode: diff --git a/xray.js b/xray.js index 683a345..6e196d0 100644 --- a/xray.js +++ b/xray.js @@ -11,6 +11,7 @@ let softness = 25; let width; let height; +let border = false; let fitScreen = true; let paintMode = false; @@ -261,6 +262,14 @@ document.addEventListener("DOMContentLoaded", e => { console.warn("That was a bogus softness..."); } } + if (url.searchParams.has("border")) { + try { + border = 1 == parseInt(url.searchParams.get("border")); + document.querySelector("#show-border").checked = border; + } catch { + console.warn("That was a bogus softness..."); + } + } window.addEventListener("resize", e => { if (running) { @@ -283,6 +292,11 @@ document.addEventListener("DOMContentLoaded", e => { } }); + document.querySelector("#show-border").addEventListener("change", e => { + border = e.target.checked; + setURL(); + }); + document.querySelector("#paint-mode").addEventListener("change", e => { paintMode = e.target.checked; }); @@ -439,6 +453,22 @@ function updateOverlay(points, clicked) { overlayCtx.drawImage(overlayResized, 0, 0); + + overlayCtx.globalCompositeOperation = "source-over"; + + + if (!paintMode && border) { + points.forEach(point => { + const [x, y] = point; + + overlayCtx.strokeStyle = "#000"; + overlayCtx.lineWidth = 3; + overlayCtx.beginPath(); + overlayCtx.ellipse(x, y, radius * scale, radius * scale, 0, 0, 2 * Math.PI); + overlayCtx.stroke(); + }); + } + overlayCtx.restore(); } @@ -469,5 +499,9 @@ function setURL() { shareURL.searchParams.append("radius", radius); shareURL.searchParams.append("softness", softness); + if (border) { + shareURL.searchParams.append("border", 1); + } + window.history.replaceState(null, "X-Ray Viewer", shareURL); } \ No newline at end of file