Missing
";
+ return;
+ }
+ let res;
+ try { res = await loadFromAddon(NAME); }
+ catch (e) {
+ console.warn("editor load failed:", e);
+ empty.classList.add("err");
+ empty.innerHTML = `?name β open a capture from the Screenshot sidebar.Couldn't load capture: ${(e && e.message || e)}
`;
+ return;
}
let img;
- try { img = await loadImage(dataUrl); }
- catch (e) { toast("Couldn't load capture: " + e.message, true); return; }
+ try { img = await loadImage(res.dataUrl); }
+ catch (e) {
+ empty.classList.add("err");
+ empty.innerHTML = `Couldn't decode capture bytes (${res.bytes || 0} B)
`;
+ return;
+ }
sizeCanvases(img.naturalWidth, img.naturalHeight);
- cctx.drawImage(img, 0, 0);
+ bctx.drawImage(img, 0, 0);
undo = [];
redo = [];
- pushSnapshot(); // baseline so the very first edit is undoable
- updateUndoButtons();
+ pushSnapshot();
+ empty.hidden = true;
+ stage.hidden = false;
fitBoard();
- const t = initialTool || toolFromPending;
- if (t) setTool(t);
}
+window.addEventListener("resize", () => { if (!stage.hidden) fitBoard(); });
-// Scale the stage to fit within the board when the image is bigger than
-// the viewport, so users see the whole shot without scrolling. We scale
-// visually (CSS transform); drawing math still uses natural canvas
-// coordinates.
-let stageScale = 1;
-function fitBoard() {
- const availW = board.clientWidth - 40;
- const availH = board.clientHeight - 40;
- const s = Math.min(1, availW / committed.width, availH / committed.height);
- stageScale = s > 0 ? s : 1;
- stage.style.transform = `scale(${stageScale})`;
- stage.style.transformOrigin = "top left";
- // Reserve room so the scaled stage isn't clipped by the flex layout.
- stage.style.width = (committed.width * stageScale) + "px";
- stage.style.height = (committed.height * stageScale) + "px";
- // Undo the reservation on the inner canvases β they must stay at natural
- // size so the transform can scale them uniformly.
- for (const c of [committed, draw, overlay]) {
- c.style.width = committed.width + "px";
- c.style.height = committed.height + "px";
- }
- // Keep the "reserved" outer wrapper's natural children visible.
- stage.style.position = "relative";
- committed.style.position = "static";
-}
-window.addEventListener("resize", () => fitBoard());
-
-// ---------------------------------------------------------------------------
-// Tool selection
-// ---------------------------------------------------------------------------
+// -- tool selection --------------------------------------------------------
function setTool(name) {
state.tool = name;
stage.dataset.tool = name;
- for (const b of document.querySelectorAll(".tool[data-tool]")) {
+ for (const b of document.querySelectorAll(".tool")) {
b.classList.toggle("active", b.dataset.tool === name);
}
- // Crop has a two-step commit; show its buttons when relevant.
- const isCrop = name === "crop";
- applyCropBtn.hidden = !isCrop || !state.cropRect;
- cancelCropBtn.hidden = !isCrop || !state.cropRect;
- if (!isCrop) { state.cropRect = null; clearOverlay(); }
- clearDraw();
- const hints = {
- crop: "Drag a rectangle, then Apply crop",
- arrow: "Drag to draw an arrow",
- rect: "Drag to draw a rectangle",
- ellipse: "Drag to draw an ellipse",
- pen: "Draw freehand",
- text: "Click to place a label",
- blur: "Drag a rectangle to pixelate",
- select: "",
- };
- showHint(hints[name] || "");
+ cancelTextInput();
}
-for (const b of document.querySelectorAll(".tool[data-tool]")) {
+for (const b of document.querySelectorAll(".tool")) {
b.addEventListener("click", () => setTool(b.dataset.tool));
}
-
for (const b of document.querySelectorAll(".swatch")) {
b.addEventListener("click", () => {
state.color = b.dataset.color;
@@ -221,401 +221,264 @@ for (const b of document.querySelectorAll(".swatch")) {
}
for (const b of document.querySelectorAll(".width")) {
b.addEventListener("click", () => {
- state.width = Number(b.dataset.width);
+ state.width = Number(b.dataset.width) || 5;
for (const x of document.querySelectorAll(".width")) x.classList.toggle("active", x === b);
});
}
-// ---------------------------------------------------------------------------
-// Drawing primitives on ANY 2D context β used for both the live preview
-// and the committed bake. Coordinates are in natural canvas px.
-// ---------------------------------------------------------------------------
-function drawArrow(ctx, x1, y1, x2, y2, color, width) {
- ctx.save();
- ctx.strokeStyle = color; ctx.fillStyle = color;
- ctx.lineWidth = width; ctx.lineCap = "round"; ctx.lineJoin = "round";
- ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
- const dx = x2 - x1, dy = y2 - y1;
- const len = Math.hypot(dx, dy) || 1;
- const head = Math.max(10, width * 3);
- const ux = dx / len, uy = dy / len;
- const px = -uy, py = ux;
- const tipX = x2, tipY = y2;
- const baseX = x2 - ux * head, baseY = y2 - uy * head;
- ctx.beginPath();
- ctx.moveTo(tipX, tipY);
- ctx.lineTo(baseX + px * head * 0.5, baseY + py * head * 0.5);
- ctx.lineTo(baseX - px * head * 0.5, baseY - py * head * 0.5);
- ctx.closePath();
- ctx.fill();
- ctx.restore();
-}
-function drawRect(ctx, x, y, w, h, color, width) {
- ctx.save();
- ctx.strokeStyle = color; ctx.lineWidth = width;
- // Half-pixel offset for crisp 1px lines is not worth the branching at
- // small width; the visible fuzz is negligible past width 2.
- ctx.strokeRect(x, y, w, h);
- ctx.restore();
-}
-function drawEllipse(ctx, x, y, w, h, color, width) {
- ctx.save();
- ctx.strokeStyle = color; ctx.lineWidth = width;
- ctx.beginPath();
- ctx.ellipse(x + w / 2, y + h / 2, Math.abs(w / 2), Math.abs(h / 2), 0, 0, Math.PI * 2);
- ctx.stroke();
- ctx.restore();
-}
-function drawPen(ctx, points, color, width) {
- if (!points || points.length < 2) return;
- ctx.save();
- ctx.strokeStyle = color; ctx.lineWidth = width;
- ctx.lineCap = "round"; ctx.lineJoin = "round";
- ctx.beginPath();
- ctx.moveTo(points[0].x, points[0].y);
- for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);
- ctx.stroke();
- ctx.restore();
-}
-function drawTextLabel(ctx, x, y, text, color) {
- if (!text) return;
- ctx.save();
- ctx.font = `600 18px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif`;
- ctx.textBaseline = "top";
- const metrics = ctx.measureText(text);
- const w = Math.ceil(metrics.width) + 8, h = 22;
- // Backdrop for legibility over any background.
- ctx.fillStyle = "rgba(0,0,0,.65)";
- ctx.fillRect(x - 4, y - 2, w, h);
- ctx.fillStyle = color;
- ctx.fillText(text, x, y);
- ctx.restore();
+// -- drawing ---------------------------------------------------------------
+function clearOver() { octx.clearRect(0, 0, over.width, over.height); }
+
+function strokeStyle() {
+ octx.strokeStyle = state.color;
+ octx.fillStyle = state.color;
+ octx.lineWidth = state.width;
+ octx.lineCap = "round";
+ octx.lineJoin = "round";
}
-// Mosaic pixelation: sample the region into a small offscreen, then draw
-// back at full size with imageSmoothingEnabled off so each sample lands as
-// a chunky square. Block size scales with stroke width for a "coarser /
-// finer" knob on the same tool.
-function applyMosaic(ctx, x, y, w, h, width) {
- if (w <= 0 || h <= 0) return;
- const block = Math.max(6, Math.min(40, width * 3));
- const sw = Math.max(1, Math.round(w / block));
- const sh = Math.max(1, Math.round(h / block));
- const tmp = document.createElement("canvas");
- tmp.width = sw; tmp.height = sh;
- const tctx = tmp.getContext("2d");
- tctx.imageSmoothingEnabled = false;
- tctx.drawImage(ctx.canvas, x, y, w, h, 0, 0, sw, sh);
- ctx.save();
- ctx.imageSmoothingEnabled = false;
- ctx.drawImage(tmp, 0, 0, sw, sh, x, y, w, h);
- ctx.restore();
+function drawArrow(a, b) {
+ strokeStyle();
+ octx.beginPath();
+ octx.moveTo(a.x, a.y); octx.lineTo(b.x, b.y); octx.stroke();
+ // arrowhead
+ const dx = b.x - a.x, dy = b.y - a.y;
+ const len = Math.hypot(dx, dy);
+ if (len < 1) return;
+ const head = Math.max(10, state.width * 3);
+ const ang = Math.atan2(dy, dx);
+ const spread = Math.PI / 6;
+ octx.beginPath();
+ octx.moveTo(b.x, b.y);
+ octx.lineTo(b.x - head * Math.cos(ang - spread), b.y - head * Math.sin(ang - spread));
+ octx.moveTo(b.x, b.y);
+ octx.lineTo(b.x - head * Math.cos(ang + spread), b.y - head * Math.sin(ang + spread));
+ octx.stroke();
}
-function clearDraw() { dctx.clearRect(0, 0, draw.width, draw.height); }
-function clearOverlay() { octx.clearRect(0, 0, overlay.width, overlay.height); }
-
-function drawSelectionChrome(rect) {
- clearOverlay();
- if (!rect) return;
- // Dim the surrounding area so the crop rect stands out.
- octx.save();
- octx.fillStyle = "rgba(0,0,0,.45)";
- octx.fillRect(0, 0, overlay.width, overlay.height);
- octx.clearRect(rect.x, rect.y, rect.w, rect.h);
- octx.strokeStyle = "#d6ff3d";
- octx.lineWidth = 1.5;
- octx.setLineDash([6, 4]);
- octx.strokeRect(rect.x + 0.5, rect.y + 0.5, rect.w - 1, rect.h - 1);
- octx.restore();
-}
-
-// ---------------------------------------------------------------------------
-// Pointer wiring
-// ---------------------------------------------------------------------------
-function pointerToCanvas(ev) {
- const r = draw.getBoundingClientRect();
- // r.width / draw.width gives us CSS px per canvas px, i.e. our current
- // stageScale β computing it from the rect keeps us honest even if the
- // fit-to-board math ever drifts.
- const sx = draw.width / r.width;
- const sy = draw.height / r.height;
- return { x: (ev.clientX - r.left) * sx, y: (ev.clientY - r.top) * sy };
-}
-
-function normRect(a, b) {
+function drawRect(a, b) {
+ strokeStyle();
const x = Math.min(a.x, b.x), y = Math.min(a.y, b.y);
- const w = Math.abs(a.x - b.x), h = Math.abs(a.y - b.y);
- return { x: Math.round(x), y: Math.round(y), w: Math.round(w), h: Math.round(h) };
+ const w = Math.abs(b.x - a.x), h = Math.abs(b.y - a.y);
+ octx.strokeRect(x, y, w, h);
}
-draw.addEventListener("pointerdown", (ev) => {
- if (state.tool === "select") return;
- if (state.tool === "text") {
- beginText(ev);
- return;
- }
- draw.setPointerCapture(ev.pointerId);
- state.dragging = true;
- state.start = pointerToCanvas(ev);
- state.end = state.start;
- if (state.tool === "pen") state.path = [state.start];
-});
-
-draw.addEventListener("pointermove", (ev) => {
- if (!state.dragging) return;
- state.end = pointerToCanvas(ev);
- if (state.tool === "pen") {
- state.path.push(state.end);
- // Live-render the whole path each move; simpler than incremental and
- // fine at freehand cadence.
- clearDraw();
- drawPen(dctx, state.path, state.color, state.width);
- return;
- }
- const r = normRect(state.start, state.end);
- if (state.tool === "crop" || state.tool === "blur") {
- drawSelectionChrome(r);
- return;
- }
- clearDraw();
- if (state.tool === "arrow") drawArrow(dctx, state.start.x, state.start.y, state.end.x, state.end.y, state.color, state.width);
- if (state.tool === "rect") drawRect(dctx, r.x, r.y, r.w, r.h, state.color, state.width);
- if (state.tool === "ellipse") drawEllipse(dctx, r.x, r.y, r.w, r.h, state.color, state.width);
-});
-
-draw.addEventListener("pointerup", (ev) => {
- if (!state.dragging) return;
- state.dragging = false;
- try { draw.releasePointerCapture(ev.pointerId); } catch {}
- const r = normRect(state.start, state.end);
- if (state.tool === "pen") {
- if (state.path && state.path.length > 1) {
- drawPen(cctx, state.path, state.color, state.width);
- pushSnapshot();
- }
- state.path = null;
- clearDraw();
- return;
- }
- if (state.tool === "arrow") {
- if (Math.hypot(state.end.x - state.start.x, state.end.y - state.start.y) > 3) {
- drawArrow(cctx, state.start.x, state.start.y, state.end.x, state.end.y, state.color, state.width);
- pushSnapshot();
- }
- clearDraw();
- return;
- }
- if (state.tool === "rect" || state.tool === "ellipse") {
- if (r.w > 3 && r.h > 3) {
- (state.tool === "rect" ? drawRect : drawEllipse)(cctx, r.x, r.y, r.w, r.h, state.color, state.width);
- pushSnapshot();
- }
- clearDraw();
- return;
- }
- if (state.tool === "blur") {
- if (r.w > 3 && r.h > 3) {
- applyMosaic(cctx, r.x, r.y, r.w, r.h, state.width);
- pushSnapshot();
- }
- clearOverlay();
- return;
- }
- if (state.tool === "crop") {
- if (r.w > 3 && r.h > 3) {
- state.cropRect = r;
- applyCropBtn.hidden = false;
- cancelCropBtn.hidden = false;
- } else {
- state.cropRect = null;
- clearOverlay();
- applyCropBtn.hidden = true;
- cancelCropBtn.hidden = true;
- }
- }
-});
-
-// Escape unwinds progressively: in-flight text placement β in-flight
-// crop rectangle β whole editor (drops the screenshot and closes the tab).
-window.addEventListener("keydown", (ev) => {
- if (ev.key === "Escape") {
- if (state.textInput) { cancelText(); ev.preventDefault(); return; }
- if (state.tool === "crop" && state.cropRect) { state.cropRect = null; clearOverlay(); applyCropBtn.hidden = true; cancelCropBtn.hidden = true; return; }
- discard(); ev.preventDefault(); return;
- }
- // Undo / redo shortcuts.
- const meta = ev.ctrlKey || ev.metaKey;
- if (meta && !ev.shiftKey && ev.key.toLowerCase() === "z") { doUndo(); ev.preventDefault(); return; }
- if (meta && ev.shiftKey && ev.key.toLowerCase() === "z") { doRedo(); ev.preventDefault(); return; }
- if (meta && ev.key.toLowerCase() === "y") { doRedo(); ev.preventDefault(); return; }
- if (meta && ev.key.toLowerCase() === "s") { save(); ev.preventDefault(); return; }
- if (meta && ev.key.toLowerCase() === "c" && !state.textInput) { copy(); ev.preventDefault(); return; }
-});
-
-// ---------------------------------------------------------------------------
-// Text tool: click places an input; blur/Enter commits, Escape cancels.
-// ---------------------------------------------------------------------------
-function beginText(ev) {
- if (state.textInput) commitText();
- const p = pointerToCanvas(ev);
- const inp = document.createElement("input");
- inp.type = "text";
- inp.className = "text-input";
- inp.placeholder = "text";
- // Place using viewport coords β body isn't positioned, so absolute
- // left/top match clientX/Y as long as the board isn't scrolled.
- inp.style.left = (ev.clientX + board.scrollLeft) + "px";
- inp.style.top = (ev.clientY + board.scrollTop) + "px";
- inp.style.color = state.color;
- document.body.appendChild(inp);
- inp.focus();
- state.textInput = { x: p.x, y: p.y, el: inp, color: state.color };
- inp.addEventListener("keydown", (e) => {
- if (e.key === "Enter") { e.preventDefault(); commitText(); }
- else if (e.key === "Escape") { e.preventDefault(); cancelText(); }
- });
- inp.addEventListener("blur", () => setTimeout(commitText, 0));
+function drawEllipse(a, b) {
+ strokeStyle();
+ const cx = (a.x + b.x) / 2, cy = (a.y + b.y) / 2;
+ const rx = Math.abs(b.x - a.x) / 2, ry = Math.abs(b.y - a.y) / 2;
+ octx.beginPath();
+ octx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+ octx.stroke();
}
-function commitText() {
- const t = state.textInput; if (!t) return;
- const text = t.el.value.trim();
- t.el.remove();
- state.textInput = null;
- if (!text) return;
- drawTextLabel(cctx, t.x, t.y, text, t.color);
+
+function drawPen(points) {
+ if (!points || points.length < 2) return;
+ strokeStyle();
+ octx.beginPath();
+ octx.moveTo(points[0].x, points[0].y);
+ for (let i = 1; i < points.length; i++) octx.lineTo(points[i].x, points[i].y);
+ octx.stroke();
+}
+
+function commitOver() {
+ bctx.drawImage(over, 0, 0);
+ clearOver();
pushSnapshot();
}
-function cancelText() {
- const t = state.textInput; if (!t) return;
- t.el.remove();
+
+// -- input --------------------------------------------------------------
+over.style.pointerEvents = "none"; // draw layer never blocks input; base receives
+base.addEventListener("pointerdown", (ev) => {
+ if (state.tool === "select") return;
+ if (state.tool === "text") { openTextInput(pointToCanvas(ev)); return; }
+ base.setPointerCapture(ev.pointerId);
+ const p = pointToCanvas(ev);
+ if (state.tool === "pen") { state.pen = [p]; }
+ else { state.drag = { x0: p.x, y0: p.y, x: p.x, y: p.y }; }
+});
+base.addEventListener("pointermove", (ev) => {
+ const p = pointToCanvas(ev);
+ if (state.tool === "pen" && state.pen) {
+ state.pen.push(p);
+ clearOver();
+ drawPen(state.pen);
+ return;
+ }
+ if (!state.drag) return;
+ state.drag.x = p.x; state.drag.y = p.y;
+ clearOver();
+ const a = { x: state.drag.x0, y: state.drag.y0 }, b = { x: p.x, y: p.y };
+ if (state.tool === "arrow") drawArrow(a, b);
+ else if (state.tool === "rect") drawRect(a, b);
+ else if (state.tool === "ellipse") drawEllipse(a, b);
+});
+base.addEventListener("pointerup", (ev) => {
+ try { base.releasePointerCapture(ev.pointerId); } catch {}
+ if (state.tool === "pen" && state.pen) {
+ if (state.pen.length >= 2) commitOver();
+ else clearOver();
+ state.pen = null;
+ return;
+ }
+ if (!state.drag) return;
+ const dx = state.drag.x - state.drag.x0, dy = state.drag.y - state.drag.y0;
+ if (Math.hypot(dx, dy) < 2) { clearOver(); state.drag = null; return; }
+ commitOver();
+ state.drag = null;
+});
+
+// -- text tool -----------------------------------------------------------
+function openTextInput(pt) {
+ cancelTextInput();
+ const el = document.createElement("input");
+ el.type = "text";
+ el.className = "text-input";
+ el.placeholder = "textβ¦";
+ el.style.color = state.color;
+ el.style.font = `${Math.max(14, state.width * 4)}px system-ui, -apple-system, Segoe UI, Roboto, sans-serif`;
+ const rect = base.getBoundingClientRect();
+ const scale = stage._scale || 1;
+ const cssX = pt.x * scale + rect.left;
+ const cssY = pt.y * scale + rect.top;
+ el.style.left = cssX + "px";
+ el.style.top = (cssY - 14) + "px";
+ document.body.appendChild(el);
+ el.focus();
+ state.textInput = { x: pt.x, y: pt.y, el };
+ el.addEventListener("keydown", (ev) => {
+ if (ev.key === "Enter") { commitTextInput(); ev.preventDefault(); }
+ else if (ev.key === "Escape") { cancelTextInput(); ev.preventDefault(); }
+ });
+ el.addEventListener("blur", commitTextInput);
+}
+function commitTextInput() {
+ const ti = state.textInput;
+ if (!ti) return;
+ const value = ti.el.value.trim();
+ ti.el.remove();
+ state.textInput = null;
+ if (!value) return;
+ const size = Math.max(14, state.width * 4);
+ bctx.fillStyle = state.color;
+ bctx.font = `${size}px system-ui, -apple-system, Segoe UI, Roboto, sans-serif`;
+ bctx.textBaseline = "alphabetic";
+ bctx.fillText(value, ti.x, ti.y);
+ pushSnapshot();
+}
+function cancelTextInput() {
+ if (!state.textInput) return;
+ state.textInput.el.remove();
state.textInput = null;
}
-// ---------------------------------------------------------------------------
-// Undo / redo
-// ---------------------------------------------------------------------------
+// -- undo / redo -------------------------------------------------------
function doUndo() {
if (undo.length <= 1) return;
const cur = undo.pop();
redo.push(cur);
- const prev = undo[undo.length - 1];
- restoreSnapshot(prev);
- clearDraw(); clearOverlay();
- state.cropRect = null;
- applyCropBtn.hidden = true;
- cancelCropBtn.hidden = true;
- updateUndoButtons();
+ restoreSnapshot(undo[undo.length - 1]);
+ updateUndoRedo();
}
function doRedo() {
- if (!redo.length) return;
const snap = redo.pop();
+ if (!snap) return;
undo.push(snap);
restoreSnapshot(snap);
- updateUndoButtons();
+ updateUndoRedo();
}
undoBtn.addEventListener("click", doUndo);
redoBtn.addEventListener("click", doRedo);
-// ---------------------------------------------------------------------------
-// Crop apply
-// ---------------------------------------------------------------------------
-applyCropBtn.addEventListener("click", () => {
- const r = state.cropRect; if (!r) return;
- // Clamp to canvas.
- const x = Math.max(0, r.x), y = Math.max(0, r.y);
- const w = Math.min(r.w, committed.width - x);
- const h = Math.min(r.h, committed.height - y);
- if (w <= 0 || h <= 0) { toast("Crop out of bounds", true); return; }
- const tmp = document.createElement("canvas");
- tmp.width = w; tmp.height = h;
- tmp.getContext("2d").drawImage(committed, x, y, w, h, 0, 0, w, h);
- sizeCanvases(w, h);
- cctx.drawImage(tmp, 0, 0);
- state.cropRect = null;
- clearOverlay(); clearDraw();
- applyCropBtn.hidden = true;
- cancelCropBtn.hidden = true;
- pushSnapshot();
- fitBoard();
-});
-cancelCropBtn.addEventListener("click", () => {
- state.cropRect = null;
- clearOverlay();
- applyCropBtn.hidden = true;
- cancelCropBtn.hidden = true;
-});
-
-// ---------------------------------------------------------------------------
-// Save & copy
-// ---------------------------------------------------------------------------
+// -- save / copy ------------------------------------------------------
function canvasBlob() {
- return new Promise((resolve, reject) => {
- committed.toBlob((b) => b ? resolve(b) : reject(new Error("toBlob returned null")), "image/png");
- });
+ return new Promise((resolve, reject) =>
+ base.toBlob((b) => b ? resolve(b) : reject(new Error("toBlob returned null")), "image/png"));
}
-
async function save() {
try {
const blob = await canvasBlob();
- // Chromium's will-download listener catches this via the download attr;
- // no separate capability needed.
const url = URL.createObjectURL(blob);
- const a = $("download-link");
- a.href = url;
- a.download = baseName || "screenshot.png";
- a.click();
- // Blob URLs are cheap but leak; release once the browser has had a beat
- // to start the download.
- setTimeout(() => URL.revokeObjectURL(url), 4000);
- toast(`Saved ${baseName} (${(blob.size / 1024).toFixed(1)} KB)`);
+ dl.href = url;
+ dl.download = NAME || "screenshot.png";
+ dl.click();
+ setTimeout(() => URL.revokeObjectURL(url), 5000);
+ playSave();
+ toast(`Saved ${dl.download} (${(blob.size / 1024).toFixed(1)} KB)`);
} catch (e) {
- toast("Save failed: " + e.message, true);
+ toast("Save failed: " + (e && e.message || e), true);
}
}
-
async function copy() {
try {
const blob = await canvasBlob();
await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
+ playCopy();
toast("Copied to clipboard");
} catch (e) {
- toast("Copy failed: " + e.message, true);
+ toast("Copy failed: " + (e && e.message || e), true);
}
}
-
$("save").addEventListener("click", save);
$("copy").addEventListener("click", copy);
-$("discard").addEventListener("click", discard);
-// Back button β navigate the sidebar view back to panel.html. Same
-// webContents, so it's just a location swap; no IPC needed.
-const backBtn = $("back");
-if (backBtn) backBtn.addEventListener("click", () => { location.href = "panel.html"; });
+// -- top-bar navigation ----------------------------------------------
+$("back").addEventListener("click", () => { playDiscard(); location.href = "panel.html"; });
+
+// Sound-toggle button β mirrors the sidebar panel's, both persist via
+// silentmode.storage so opening either surface reflects the same setting.
+const soundBtn = $("toggle-sound");
+function paintSoundIcon() {
+ if (!soundBtn) return;
+ soundBtn.title = soundOn ? "Sounds on β click to mute" : "Sounds off β click to enable";
+ soundBtn.innerHTML = soundOn
+ ? ''
+ : '';
+}
+(async () => {
+ try {
+ const v = await window.silentmode?.storage?.get("soundOn", true);
+ soundOn = v !== false;
+ } catch {}
+ paintSoundIcon();
+})();
+if (soundBtn) soundBtn.addEventListener("click", async () => {
+ soundOn = !soundOn;
+ paintSoundIcon();
+ try { await window.silentmode?.storage?.set("soundOn", soundOn); } catch {}
+ if (soundOn) playSave();
+});
-// Maximize / restore β asks the sidebar host to widen its view to the full
-// window and back. Icon reflects state via silentmode.sidebar.onMaxChange.
const maxBtn = $("toggle-max");
-if (maxBtn && window.silentmode?.sidebar) {
+async function paintMaxIcon(isMax) {
+ maxBtn.title = isMax ? "Restore sidebar width" : "Expand the sidebar to full window";
+ maxBtn.innerHTML = isMax
+ ? ''
+ : '';
+}
+if (window.silentmode?.sidebar) {
maxBtn.addEventListener("click", async () => {
try { await window.silentmode.sidebar.toggleMax(); }
catch (e) { console.warn("toggleMax failed:", e); }
});
- const paint = (isMax) => {
- maxBtn.title = isMax ? "Restore sidebar width" : "Expand the sidebar to full window";
- maxBtn.innerHTML = isMax
- ? ''
- : '';
- };
- window.silentmode.sidebar.onMaxChange(paint);
- window.silentmode.sidebar.isMax().then(paint).catch(() => {});
+ window.silentmode.sidebar.onMaxChange(paintMaxIcon);
+ window.silentmode.sidebar.isMax().then(paintMaxIcon).catch(() => {});
}
-// Drop the working screenshot and go back to the sidebar panel. Used by
-// the Discard button and the top-level Escape shortcut.
-async function discard() {
- try { if (window.silentmode?.storage) await window.silentmode.storage.set("__pending", null); } catch {}
- location.href = "panel.html";
-}
+// -- keyboard shortcuts ---------------------------------------------
+window.addEventListener("keydown", (ev) => {
+ if (state.textInput) return;
+ const meta = ev.ctrlKey || ev.metaKey;
+ if (meta && ev.key.toLowerCase() === "z" && !ev.shiftKey) { doUndo(); ev.preventDefault(); return; }
+ if (meta && ev.key.toLowerCase() === "z" && ev.shiftKey) { doRedo(); ev.preventDefault(); return; }
+ if (meta && ev.key.toLowerCase() === "s") { save(); ev.preventDefault(); return; }
+ if (meta && ev.key.toLowerCase() === "c") { copy(); ev.preventDefault(); return; }
+ if (ev.key === "a") setTool("arrow");
+ else if (ev.key === "r") setTool("rect");
+ else if (ev.key === "o") setTool("ellipse");
+ else if (ev.key === "p") setTool("pen");
+ else if (ev.key === "t") setTool("text");
+ else if (ev.key === "Escape") setTool("select");
+});
init();
diff --git a/bundled-addons/screenshot/index.js b/bundled-addons/screenshot/index.js
index 70255ad..c165824 100644
--- a/bundled-addons/screenshot/index.js
+++ b/bundled-addons/screenshot/index.js
@@ -101,24 +101,10 @@ module.exports = {
};
});
- // panel invokes "arm" right before it navigates itself to editor.html
- // (in-sidebar navigation β SAME webContents, so the editor's storage-
- // based load path Just Works). We rewrite __pending fresh here so
- // whichever capture is currently previewed becomes the one the editor
- // draws, even if a previous edit session already drained the entry.
- api.onMessage("arm", (payload) => {
- const wantedName = payload && payload.name ? String(payload.name) : "";
- let recent = api.storage.get("recent", []);
- if (!Array.isArray(recent)) recent = [];
- recent = pruneRecent(recent);
- api.storage.set("recent", recent);
- const hit = wantedName ? recent.find((r) => r.id === wantedName) : recent[0];
- if (!hit) throw new Error("no capture to edit β take one first");
- const dataUrl = readAsDataUrl(hit.path);
- api.storage.set("__pending", { name: hit.name, dataUrl, at: Date.now() });
- api.log(`arm β editor.html?name=${hit.name}`);
- return { ok: true, name: hit.name };
- });
+ // (The old "arm" handler that pre-armed a __pending storage entry is
+ // gone: editor.html now pulls its bytes via getBytes on load, so there
+ // is nothing to hand off in advance. Idempotent β reopening the editor
+ // in the sidebar just re-fetches the bytes.)
// Read the ring for a "recent captures" strip in the sidebar. Bytes are
// reported; the actual images are pulled through "getBytes" on demand
@@ -155,6 +141,6 @@ module.exports = {
return { ok: true };
});
- api.log("registered screenshot v0.3.0 sidebar panel");
+ api.log("registered screenshot v0.5.0 sidebar panel");
},
};
diff --git a/bundled-addons/screenshot/panel.html b/bundled-addons/screenshot/panel.html
index 7f2275c..86c9cc6 100644
--- a/bundled-addons/screenshot/panel.html
+++ b/bundled-addons/screenshot/panel.html
@@ -59,15 +59,33 @@
}
.meta { color: var(--dim); font-size: 11.5px; display: flex; justify-content: space-between; gap: 8px; }
.meta .host { color: var(--mut); }
- .actions { display: flex; gap: 6px; }
+ .actions { display: flex; gap: 6px; flex-wrap: wrap; }
+ .actions .row { display: flex; gap: 6px; flex: 1 1 100%; }
button.act {
- flex: 1; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px;
+ flex: 1; padding: 9px 8px; border: 1px solid var(--line); border-radius: 8px;
background: var(--btn); color: var(--ink); cursor: pointer; font: inherit;
+ display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+ line-height: 1;
}
+ button.act svg { width: 14px; height: 14px; display: block; }
button.act.primary { background: var(--acid); color: #101418; border-color: transparent; font-weight: 600; }
button.act:hover:not(:disabled) { background: var(--btn-h); }
- button.act.primary:hover:not(:disabled) { filter: brightness(1.05); }
+ button.act.primary:hover:not(:disabled) { filter: brightness(1.05); background: var(--acid); }
button.act:disabled { opacity: .45; cursor: default; }
+ .confirm {
+ display: none; gap: 6px; align-items: center;
+ padding: 8px 10px; border: 1px solid rgba(255,91,91,.40); border-radius: 8px;
+ background: rgba(255,91,91,.06); font-size: 12px;
+ }
+ .confirm.on { display: flex; }
+ .confirm .msg { flex: 1; color: var(--mut); }
+ .confirm button {
+ padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px;
+ background: var(--btn); color: var(--ink); cursor: pointer; font: inherit;
+ }
+ .confirm button.yes { background: #ff5b5b; color: #101418; border-color: transparent; font-weight: 600; }
+ .confirm button:hover { background: var(--btn-h); }
+ .confirm button.yes:hover { filter: brightness(1.05); background: #ff5b5b; }
.status { color: var(--mut); font-size: 12px; min-height: 16px; }
.status.err { color: var(--err); }
.status.ok { color: var(--acid); }
@@ -91,6 +109,7 @@
πΈ Screenshot
+