@lightworkai.official/debug-capture 0.6.0

package/src/ui/annotator.ts

@@ -0,0 +1,698 @@
+/**
+ * Draw on the screenshot before filing it.
+ *
+ * "The button on the right" is not a bug report; a red box around it is. This is
+ * the highest-value thing in the widget, because it turns a picture of a whole
+ * screen into a picture of the problem.
+ *
+ * The original does this with fabric.js and gets selection, handles and a delete
+ * control for free. This is plain canvas — fabric is ~290 kB, and a scene graph
+ * to draw four shapes is not a cost every host app should carry. What it must
+ * NOT be is a downgrade, so everything a person actually does to an annotation
+ * is here: draw, select, move, resize from any handle, delete from the ✕ on the
+ * selection, retype a label, clear.
+ *
+ * Rotation is the one thing fabric gives that this does not. Nobody rotates a
+ * box drawn around a broken button.
+ */
+
+import { arrowPath } from "./arrow";
+
+export type AnnotatorTool = "rect" | "arrow" | "highlight" | "text";
+
+interface Shape {
+  tool: AnnotatorTool;
+  /** Image-space, so a shape survives the canvas being laid out at any width. */
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  text?: string;
+  /** Text only: drawn height of the glyphs, resized by its handle. */
+  size?: number;
+}
+
+/*
+ * The same ink as the support app's own annotator.
+ *
+ * The two are separate implementations on purpose — fabric there, plain canvas
+ * here — but a box drawn in one has to look like a box drawn in the other, or
+ * the same person annotating from two screens produces two different-looking
+ * tickets. These constants are the whole of that agreement, so they are the
+ * first thing to check when either side changes.
+ */
+const STROKE = "#f44336";
+const HIGHLIGHT = "rgba(250, 204, 21, 0.4)";
+/** Matches the app's FONT_SIZE. */
+const TEXT_SIZE = 22;
+const SELECTED = "#2563eb";
+/** Handle and control sizes, in CSS pixels — constant however the image scales. */
+const HANDLE = 9;
+const DELETE_R = 11;
+const DELETE_GAP = 18;
+/** A drag shorter than this was a click that missed, not a shape. */
+const CLICK_SLOP = 4;
+const MIN_SIZE = 8;
+
+/** Corner and edge handles, as unit offsets within the shape's box. */
+const GRIPS = [
+  { id: "nw", fx: 0, fy: 0, cursor: "nwse-resize" },
+  { id: "n", fx: 0.5, fy: 0, cursor: "ns-resize" },
+  { id: "ne", fx: 1, fy: 0, cursor: "nesw-resize" },
+  { id: "e", fx: 1, fy: 0.5, cursor: "ew-resize" },
+  { id: "se", fx: 1, fy: 1, cursor: "nwse-resize" },
+  { id: "s", fx: 0.5, fy: 1, cursor: "ns-resize" },
+  { id: "sw", fx: 0, fy: 1, cursor: "nesw-resize" },
+  { id: "w", fx: 0, fy: 0.5, cursor: "ew-resize" },
+] as const;
+
+type GripId = (typeof GRIPS)[number]["id"] | "tail" | "head" | "size";
+
+export interface Annotator {
+  setTool(tool: AnnotatorTool | null): void;
+  deleteSelected(): void;
+  clear(): void;
+  /** The annotated image at FULL resolution — never the on-screen scale. */
+  toDataUrl(): string;
+  hasShapes(): boolean;
+  hasSelection(): boolean;
+  destroy(): void;
+}
+
+interface Box {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+
+export function createAnnotator(
+  canvas: HTMLCanvasElement,
+  image: HTMLImageElement,
+  /**
+   * The drawing or the active tool changed — the toolbar mirrors both, so it
+   * has to hear about a tool being consumed as well as a shape being added.
+   */
+  notify: () => void,
+): Annotator {
+  const shapes: Shape[] = [];
+  let tool: AnnotatorTool | null = null;
+  let selected = -1;
+  let drafting: Shape | null = null;
+  /** What the current pointer drag is doing to the selection. */
+  let grabbing: { grip: GripId | "body"; x: number; y: number; start: Shape } | null = null;
+
+  const ctx = canvas.getContext("2d");
+
+  /**
+   * Image pixels per CSS pixel. The canvas backing store is the image's own
+   * size and CSS scales it down, so a handle drawn at a fixed backing-store size
+   * would shrink on a big screenshot. Everything chrome-sized multiplies by this.
+   */
+  function px(): number {
+    const width = canvas.getBoundingClientRect().width;
+    return width > 0 ? canvas.width / width : 1;
+  }
+
+  function pointAt(event: PointerEvent): { x: number; y: number } {
+    const box = canvas.getBoundingClientRect();
+    return {
+      x: ((event.clientX - box.left) / box.width) * canvas.width,
+      y: ((event.clientY - box.top) / box.height) * canvas.height,
+    };
+  }
+
+  /* --------------------------------------------------------- geometry ---- */
+
+  function textWidth(s: Shape): number {
+    const size = s.size ?? TEXT_SIZE;
+    if (!ctx) return (s.text?.length ?? 0) * size * 0.6;
+    ctx.save();
+    ctx.font = `600 ${size}px system-ui, sans-serif`;
+    const w = ctx.measureText(s.text ?? "").width;
+    ctx.restore();
+    return w;
+  }
+
+  function boxOf(s: Shape): Box {
+    if (s.tool === "text") {
+      const size = s.size ?? TEXT_SIZE;
+      return { left: s.x1, top: s.y1, right: s.x1 + textWidth(s), bottom: s.y1 + size * 1.25 };
+    }
+    return {
+      left: Math.min(s.x1, s.x2),
+      top: Math.min(s.y1, s.y2),
+      right: Math.max(s.x1, s.x2),
+      bottom: Math.max(s.y1, s.y2),
+    };
+  }
+
+  /** Which handles a shape offers. An arrow has two ends, not eight sides. */
+  function gripsOf(s: Shape): { id: GripId; x: number; y: number; cursor: string }[] {
+    if (s.tool === "arrow") {
+      return [
+        { id: "tail", x: s.x1, y: s.y1, cursor: "move" },
+        { id: "head", x: s.x2, y: s.y2, cursor: "move" },
+      ];
+    }
+    const b = boxOf(s);
+    if (s.tool === "text") {
+      return [{ id: "size", x: b.right, y: b.bottom, cursor: "nwse-resize" }];
+    }
+    return GRIPS.map((g) => ({
+      id: g.id as GripId,
+      x: b.left + (b.right - b.left) * g.fx,
+      y: b.top + (b.bottom - b.top) * g.fy,
+      cursor: g.cursor,
+    }));
+  }
+
+  function deleteAt(s: Shape): { x: number; y: number } {
+    const b = boxOf(s);
+    return { x: b.right + DELETE_GAP * px(), y: b.top - DELETE_GAP * px() };
+  }
+
+  /* ---------------------------------------------------------- drawing ---- */
+
+  function drawArrow(c: CanvasRenderingContext2D, s: Shape, scale: number): void {
+    // The SAME scale the caller used for lineWidth. Reading px() here instead
+    // meant the exported arrow kept a full-size head on a hairline shaft,
+    // because the export draws at a different scale from the screen.
+    const { shaft, head } = arrowPath(
+      { x: s.x1, y: s.y1 },
+      { x: s.x2, y: s.y2 },
+      Math.max(10, 16 * scale),
+    );
+    if (shaft) {
+      // Butt cap: a round cap would bulge past the head's base edge and put
+      // back the spur this geometry exists to remove.
+      c.lineCap = "butt";
+      c.beginPath();
+      c.moveTo(shaft.from.x, shaft.from.y);
+      c.lineTo(shaft.to.x, shaft.to.y);
+      c.stroke();
+    }
+    c.beginPath();
+    c.moveTo(head[0].x, head[0].y);
+    c.lineTo(head[1].x, head[1].y);
+    c.lineTo(head[2].x, head[2].y);
+    c.closePath();
+    c.fill();
+  }
+
+  function drawShape(c: CanvasRenderingContext2D, s: Shape, scale: number): void {
+    c.save();
+    c.lineWidth = Math.max(2, 3 * scale);
+    c.strokeStyle = STROKE;
+    c.fillStyle = STROKE;
+    const b = boxOf(s);
+
+    if (s.tool === "rect") {
+      c.strokeRect(b.left, b.top, b.right - b.left, b.bottom - b.top);
+    } else if (s.tool === "arrow") {
+      drawArrow(c, s, scale);
+    } else if (s.tool === "highlight") {
+      c.fillStyle = HIGHLIGHT;
+      c.fillRect(b.left, b.top, b.right - b.left, b.bottom - b.top);
+    } else if (s.tool === "text" && s.text) {
+      const size = s.size ?? TEXT_SIZE;
+      c.font = `600 ${size}px system-ui, sans-serif`;
+      c.textBaseline = "top";
+      // A plate behind it: red text on an arbitrary screenshot is unreadable
+      // about half the time.
+      const pad = size * 0.22;
+      c.fillStyle = "rgba(255,255,255,0.92)";
+      c.fillRect(b.left - pad, b.top - pad, b.right - b.left + pad * 2, b.bottom - b.top + pad * 2);
+      c.fillStyle = STROKE;
+      c.fillText(s.text, b.left, b.top);
+    }
+    c.restore();
+  }
+
+  function drawSelection(c: CanvasRenderingContext2D, s: Shape, scale: number): void {
+    const b = boxOf(s);
+    c.save();
+    c.strokeStyle = SELECTED;
+    c.lineWidth = Math.max(1, 1.5 * scale);
+    c.setLineDash([6 * scale, 4 * scale]);
+    c.strokeRect(b.left, b.top, b.right - b.left, b.bottom - b.top);
+    c.setLineDash([]);
+
+    const size = HANDLE * scale;
+    for (const g of gripsOf(s)) {
+      c.fillStyle = "#fff";
+      c.strokeStyle = SELECTED;
+      c.lineWidth = Math.max(1, 1.5 * scale);
+      c.beginPath();
+      c.rect(g.x - size / 2, g.y - size / 2, size, size);
+      c.fill();
+      c.stroke();
+    }
+
+    // The ✕, as the original's delete control: on the selection, not in a menu.
+    const d = deleteAt(s);
+    const r = DELETE_R * scale;
+    c.beginPath();
+    c.arc(d.x, d.y, r, 0, Math.PI * 2);
+    c.fillStyle = "#dc2626";
+    c.fill();
+    c.strokeStyle = "#fff";
+    c.lineWidth = Math.max(1.5, 2 * scale);
+    c.beginPath();
+    c.moveTo(d.x - r * 0.4, d.y - r * 0.4);
+    c.lineTo(d.x + r * 0.4, d.y + r * 0.4);
+    c.moveTo(d.x + r * 0.4, d.y - r * 0.4);
+    c.lineTo(d.x - r * 0.4, d.y + r * 0.4);
+    c.stroke();
+    c.restore();
+  }
+
+  function render(): void {
+    if (!ctx) return;
+    const scale = px();
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+    shapes.forEach((s, i) => {
+      if (i !== editing) drawShape(ctx, s, scale);
+    });
+    if (drafting) drawShape(ctx, drafting, scale);
+    const current = shapes[selected];
+    if (current && !drafting) drawSelection(ctx, current, scale);
+  }
+
+  /* ------------------------------------------------------- hit testing ---- */
+
+  function near(ax: number, ay: number, bx: number, by: number, radius: number): boolean {
+    return Math.abs(ax - bx) <= radius && Math.abs(ay - by) <= radius;
+  }
+
+  function gripAt(x: number, y: number): GripId | null {
+    const s = shapes[selected];
+    if (!s) return null;
+    const r = (HANDLE * px()) / 2 + 3 * px();
+    for (const g of gripsOf(s)) if (near(x, y, g.x, g.y, r)) return g.id;
+    return null;
+  }
+
+  function overDelete(x: number, y: number): boolean {
+    const s = shapes[selected];
+    if (!s) return false;
+    const d = deleteAt(s);
+    return near(x, y, d.x, d.y, DELETE_R * px());
+  }
+
+  /** Topmost first — the shape drawn last is the one the eye treats as on top. */
+  function shapeAt(x: number, y: number): number {
+    const pad = 6 * px();
+    for (let i = shapes.length - 1; i >= 0; i -= 1) {
+      const s = shapes[i]!;
+      if (s.tool === "arrow") {
+        // A line has no area; measure distance to the segment instead.
+        const dx = s.x2 - s.x1;
+        const dy = s.y2 - s.y1;
+        const len = Math.hypot(dx, dy) || 1;
+        const t = Math.max(0, Math.min(1, ((x - s.x1) * dx + (y - s.y1) * dy) / (len * len)));
+        if (Math.hypot(x - (s.x1 + t * dx), y - (s.y1 + t * dy)) <= pad + 4 * px()) return i;
+        continue;
+      }
+      const b = boxOf(s);
+      if (x >= b.left - pad && x <= b.right + pad && y >= b.top - pad && y <= b.bottom + pad) return i;
+    }
+    return -1;
+  }
+
+  /* ------------------------------------------------------------ input ---- */
+
+  function resize(s: Shape, grip: GripId, start: Shape, dx: number, dy: number): void {
+    if (grip === "tail") {
+      s.x1 = start.x1 + dx;
+      s.y1 = start.y1 + dy;
+      return;
+    }
+    if (grip === "head") {
+      s.x2 = start.x2 + dx;
+      s.y2 = start.y2 + dy;
+      return;
+    }
+    if (grip === "size") {
+      const grown = (start.size ?? 24) + dy;
+      s.size = Math.max(10, grown);
+      return;
+    }
+    const b = boxOf(start);
+    let { left, top, right, bottom } = b;
+    if (grip.includes("w")) left = Math.min(right - MIN_SIZE, left + dx);
+    if (grip.includes("e")) right = Math.max(left + MIN_SIZE, right + dx);
+    if (grip.includes("n")) top = Math.min(bottom - MIN_SIZE, top + dy);
+    if (grip.includes("s")) bottom = Math.max(top + MIN_SIZE, bottom + dy);
+    s.x1 = left;
+    s.y1 = top;
+    s.x2 = right;
+    s.y2 = bottom;
+  }
+
+  function move(s: Shape, start: Shape, dx: number, dy: number): void {
+    s.x1 = start.x1 + dx;
+    s.y1 = start.y1 + dy;
+    s.x2 = start.x2 + dx;
+    s.y2 = start.y2 + dy;
+  }
+
+  /* ------------------------------------------------------ text editing ---- */
+
+  /**
+   * Type on the image, not in a dialog.
+   *
+   * This was `window.prompt`, which is the wrong shape for the job in every
+   * way: it steals focus from the page, it renders nowhere near the place you
+   * clicked, it cannot show the text at the size and colour it will actually
+   * be, and on a report dialog it stacks a system modal on top of a modal.
+   * fabric and every canvas tool put a caret where you clicked, so this does.
+   *
+   * A real <input> positioned over the canvas, matched to the shape's own font,
+   * committed on Enter or blur and abandoned on Escape. The shape being edited
+   * is hidden from the canvas while its editor is open, so the text does not
+   * render twice.
+   */
+  let editor: HTMLInputElement | null = null;
+  /** Index of the shape being edited, or -1 while composing a new one. */
+  let editing = -1;
+  let editorAt = { x: 0, y: 0, size: 24 };
+
+  /** CSS pixels per image pixel — the inverse of px(). */
+  function viewScale(): number {
+    const width = canvas.getBoundingClientRect().width;
+    return width > 0 ? width / canvas.width : 1;
+  }
+
+  function measure(text: string, sizePx: number): number {
+    if (!ctx) return text.length * sizePx * 0.6;
+    ctx.save();
+    ctx.font = `600 ${sizePx}px system-ui, sans-serif`;
+    const w = ctx.measureText(text || " ").width;
+    ctx.restore();
+    return w;
+  }
+
+  function placeEditor(): void {
+    if (!editor) return;
+    const host = canvas.parentElement;
+    if (!host) return;
+    const rect = canvas.getBoundingClientRect();
+    const hostRect = host.getBoundingClientRect();
+    const scale = viewScale();
+    const fontPx = editorAt.size * scale;
+    editor.style.left = `${rect.left - hostRect.left + editorAt.x * scale}px`;
+    editor.style.top = `${rect.top - hostRect.top + editorAt.y * scale}px`;
+    editor.style.fontSize = `${fontPx}px`;
+    // Grow with the text, like a caret on a canvas rather than a form field.
+    editor.style.width = `${Math.max(40, measure(editor.value, fontPx) + fontPx)}px`;
+  }
+
+  function closeEditor(commit: boolean): void {
+    const input = editor;
+    if (!input) return;
+    editor = null; // cleared first: removing it fires blur, which re-enters here
+    const value = input.value.trim();
+    const index = editing;
+    editing = -1;
+    input.remove();
+
+    if (commit && value) {
+      if (index >= 0 && shapes[index]) {
+        shapes[index]!.text = value;
+        selected = index;
+      } else {
+        shapes.push({
+          tool: "text",
+          x1: editorAt.x,
+          y1: editorAt.y,
+          x2: editorAt.x,
+          y2: editorAt.y,
+          text: value,
+          size: editorAt.size,
+        });
+        selected = shapes.length - 1;
+      }
+      notify();
+    } else if (index >= 0) {
+      selected = index;
+    }
+    canvas.focus();
+    render();
+  }
+
+  function openEditor(x: number, y: number, index = -1): void {
+    closeEditor(true);
+    const host = canvas.parentElement;
+    if (!host) return;
+    if (getComputedStyle(host).position === "static") host.style.position = "relative";
+
+    const existing = index >= 0 ? shapes[index] : undefined;
+    editing = index;
+    editorAt = {
+      x: existing?.x1 ?? x,
+      y: existing?.y1 ?? y,
+      size: existing?.size ?? Math.round(24 * px()),
+    };
+
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "text-edit";
+    input.value = existing?.text ?? "";
+    input.setAttribute("aria-label", "ข้อความบนภาพ");
+    // "ข้อความ", not "พิมพ์ข้อความ": the app seeds a new text shape with exactly
+    // this word, so an empty box in either tool reads the same.
+    input.placeholder = "ข้อความ";
+    editor = input;
+    host.append(input);
+    placeEditor();
+
+    input.addEventListener("input", placeEditor);
+    input.addEventListener("keydown", (event) => {
+      // Stop here: the canvas listens for Delete and Escape, and a Backspace
+      // while typing must edit the word, not delete the shape.
+      event.stopPropagation();
+      if (event.key === "Enter") closeEditor(true);
+      else if (event.key === "Escape") closeEditor(false);
+    });
+    /*
+     * Focus on the next frame, and only start listening for blur once it has
+     * actually landed.
+     *
+     * The canvas carries tabIndex=0 so it can take Delete and Escape, which
+     * means the browser's own focus-on-mousedown moves focus to the CANVAS
+     * after this handler returns. Focusing the input synchronously here lost
+     * the race: the input blurred immediately, committed an empty value, and
+     * removed itself before a single key could be typed — the tool looked like
+     * it did nothing at all.
+     */
+    requestAnimationFrame(() => {
+      if (editor !== input) return; // superseded while we waited
+      input.focus();
+      input.select();
+      input.addEventListener("blur", () => closeEditor(true));
+    });
+    render();
+  }
+
+  function onPointerDown(event: PointerEvent): void {
+    const { x, y } = pointAt(event);
+    canvas.setPointerCapture(event.pointerId);
+
+    // The ✕ and the handles belong to the current selection, so they are tested
+    // before anything else — they sit outside the shape and would otherwise be
+    // swallowed by whatever is behind them.
+    if (overDelete(x, y)) {
+      deleteSelected();
+      return;
+    }
+    const grip = gripAt(x, y);
+    if (grip && shapes[selected]) {
+      grabbing = { grip, x, y, start: { ...shapes[selected]! } };
+      return;
+    }
+
+    if (tool === "text") {
+      // Stop the canvas taking focus from the caret we are about to place.
+      event.preventDefault();
+      if (canvas.hasPointerCapture(event.pointerId)) canvas.releasePointerCapture(event.pointerId);
+      tool = null;
+      // Tell the toolbar the tool is spent, HERE and not once text is
+      // committed. It used to fire only on commit, so cancelling an empty
+      // caret left the button stuck pressed while the tool was already null —
+      // and the next click on ข้อความ read "pressed" and toggled it OFF, so
+      // clicking the image did nothing until you pressed the button twice.
+      notify();
+      openEditor(x, y);
+      return;
+    }
+
+    if (tool) {
+      drafting = { tool, x1: x, y1: y, x2: x, y2: y };
+      selected = -1;
+      return;
+    }
+
+    const hit = shapeAt(x, y);
+    selected = hit;
+    grabbing = hit >= 0 ? { grip: "body", x, y, start: { ...shapes[hit]! } } : null;
+    render();
+  }
+
+  function onPointerMove(event: PointerEvent): void {
+    const { x, y } = pointAt(event);
+
+    if (drafting) {
+      drafting.x2 = x;
+      drafting.y2 = y;
+      render();
+      return;
+    }
+
+    if (grabbing) {
+      const s = shapes[selected];
+      if (!s) return;
+      const dx = x - grabbing.x;
+      const dy = y - grabbing.y;
+      if (grabbing.grip === "body") move(s, grabbing.start, dx, dy);
+      else resize(s, grabbing.grip, grabbing.start, dx, dy);
+      render();
+      return;
+    }
+
+    // Cursor as the affordance: a handle that does not say it is draggable is a
+    // handle nobody drags.
+    if (tool) {
+      canvas.style.cursor = "crosshair";
+      return;
+    }
+    if (overDelete(x, y)) {
+      canvas.style.cursor = "pointer";
+      return;
+    }
+    const grip = gripAt(x, y);
+    if (grip) {
+      const found = shapes[selected] ? gripsOf(shapes[selected]!).find((g) => g.id === grip) : null;
+      canvas.style.cursor = found?.cursor ?? "pointer";
+      return;
+    }
+    canvas.style.cursor = shapeAt(x, y) >= 0 ? "move" : "default";
+  }
+
+  function onPointerUp(): void {
+    if (drafting) {
+      const tiny =
+        Math.abs(drafting.x2 - drafting.x1) < CLICK_SLOP &&
+        Math.abs(drafting.y2 - drafting.y1) < CLICK_SLOP;
+      if (!tiny) {
+        shapes.push(drafting);
+        selected = shapes.length - 1;
+        // One shape per tool press, as the original does: it stops a stray drag
+        // from covering the screenshot in boxes, and it hands the new shape to
+        // you selected so you can immediately move or resize it.
+        tool = null;
+        notify();
+      }
+      drafting = null;
+    }
+    if (grabbing) {
+      grabbing = null;
+      notify();
+    }
+    render();
+  }
+
+  /** Retype a label without deleting and redrawing it. */
+  function onDoubleClick(event: MouseEvent): void {
+    const box = canvas.getBoundingClientRect();
+    const x = ((event.clientX - box.left) / box.width) * canvas.width;
+    const y = ((event.clientY - box.top) / box.height) * canvas.height;
+    const hit = shapeAt(x, y);
+    const s = shapes[hit];
+    if (!s || s.tool !== "text") return;
+    event.preventDefault();
+    openEditor(s.x1, s.y1, hit);
+  }
+
+  function onKeyDown(event: KeyboardEvent): void {
+    if (selected < 0) return;
+    if (event.key === "Delete" || event.key === "Backspace") {
+      event.preventDefault();
+      deleteSelected();
+    } else if (event.key === "Escape") {
+      selected = -1;
+      render();
+    }
+  }
+
+  function deleteSelected(): void {
+    if (selected < 0) return;
+    shapes.splice(selected, 1);
+    selected = -1;
+    notify();
+    render();
+  }
+
+  canvas.addEventListener("pointerdown", onPointerDown);
+  canvas.addEventListener("pointermove", onPointerMove);
+  canvas.addEventListener("pointerup", onPointerUp);
+  canvas.addEventListener("pointercancel", onPointerUp);
+  canvas.addEventListener("dblclick", onDoubleClick);
+  // On the canvas, not the window: a Backspace meant for the note field must not
+  // delete a shape.
+  canvas.tabIndex = 0;
+  canvas.addEventListener("keydown", onKeyDown);
+
+  render();
+
+  return {
+    setTool(next) {
+      tool = next;
+      selected = -1;
+      canvas.style.cursor = next ? "crosshair" : "default";
+      render();
+    },
+    deleteSelected,
+    clear() {
+      shapes.length = 0;
+      selected = -1;
+      notify();
+      render();
+    },
+    hasShapes: () => shapes.length > 0,
+    hasSelection: () => selected >= 0,
+    toDataUrl() {
+      // Redrawn at the image's own resolution and WITHOUT the selection chrome:
+      // exporting the on-screen canvas would ship handles and a ✕ into the
+      // ticket, at whatever size the dialog happened to be.
+      const full = document.createElement("canvas");
+      full.width = image.naturalWidth;
+      full.height = image.naturalHeight;
+      const c = full.getContext("2d");
+      if (!c) return canvas.toDataURL("image/png");
+      c.drawImage(image, 0, 0);
+      /*
+       * The scale the user drew at, NOT 1.
+       *
+       * Shapes live in image space, and on screen a stroke is `3 * px()` image
+       * pixels so that it LOOKS 3 CSS pixels wide. Exporting at 1 made every
+       * stroke 3 image pixels — on a Retina screenshot that is a quarter of
+       * what was drawn, so the box someone put round a broken button arrived in
+       * the ticket as a hairline.
+       */
+      const scale = px();
+      for (const s of shapes) drawShape(c, s, scale);
+      return full.toDataURL("image/png");
+    },
+    destroy() {
+      closeEditor(false);
+      canvas.removeEventListener("pointerdown", onPointerDown);
+      canvas.removeEventListener("pointermove", onPointerMove);
+      canvas.removeEventListener("pointerup", onPointerUp);
+      canvas.removeEventListener("pointercancel", onPointerUp);
+      canvas.removeEventListener("dblclick", onDoubleClick);
+      canvas.removeEventListener("keydown", onKeyDown);
+    },
+  };
+}