theseus/bundled-addons/pdf-editor/lib/tools.js

// Pointer behaviour for every tool.
//
// The editor is modal: one tool is armed, and what a drag does depends only on
// which. The alternative — inferring intent from what is under the cursor — is
// what makes PDF annotators infuriating, because a drag meant to draw a box
// selects a paragraph instead. Modality is enforced in CSS (see the
// body[data-mode] rules): with a drawing tool armed, the text and form layers
// stop taking pointer events entirely, so a drag cannot be stolen.
//
// Highlight is the deliberate exception. It works BY selecting text — the
// text layer stays live, the browser does the selection, and on release we
// convert the selection's client rects into user space. Rebuilding text
// selection from scratch over pdf.js's span soup would be worse at it.

import { boundsOf, normBox, translatePatch } from "./shape.js";

const MIN_DRAG = 3;          // CSS px before a press counts as a drag
const SIG_WIDTH_PT = 170;    // default placed width of a signature

export class Tools {
  constructor({ strip, model, host }) {
    this.strip = strip;
    this.model = model;
    this.host = host;          // editor.js: {toast, openTextModal, openSignaturePad, signature(), onChange}
    this.tool = "select";
    this.color = "#ffd400";
    this.width = 2.5;
    this.selected = null;
    this.drag = null;
    // Opening a second document builds a second Tools over the same container.
    // Without a way to unbind, the first one stays subscribed, keeps pointing
    // at a torn-down strip, and throws on the next click — so every listener
    // goes on one signal and destroy() drops the lot.
    this._abort = new AbortController();
    const opts = { signal: this._abort.signal };
    const c = strip.container;
    c.addEventListener("pointerdown", (e) => this.onDown(e), opts);
    c.addEventListener("pointermove", (e) => this.onMove(e), opts);
    window.addEventListener("pointerup", (e) => this.onUp(e), opts);
  }

  destroy() {
    this._abort.abort();
    this.drag = null;
    this.selected = null;
  }

  get mode() {
    if (this.tool === "select") return "select";
    if (this.tool === "highlight") return "highlight";
    if (this.tool === "text" || this.tool === "signature") return "stamp";
    return "draw";
  }

  setTool(t) {
    this.tool = t;
    this.selected = null;
    document.body.dataset.mode = this.mode;
    this.strip.refreshAllOverlays(null);
    this.host.onChange?.();
  }
  setColor(c) { this.color = c; if (this.selected) this._recolorSelected(c); }
  setWidth(w) { this.width = w; }

  _recolorSelected(c) {
    const a = this.model.annot(this.selected);
    if (!a || a.kind === "redact") return;
    this.model.moveAnnot(a.id, { color: c });
    this.strip.refreshAllOverlays(this.selected);
  }

  deleteSelected() {
    if (!this.selected) return false;
    const ok = this.model.removeAnnot(this.selected);
    this.selected = null;
    this.strip.refreshAllOverlays(null);
    return ok;
  }

  // ---- pointer ------------------------------------------------------
  onDown(e) {
    if (e.button !== 0) return;
    const hit = this.strip.pageAt(e.clientX, e.clientY);
    if (!hit) return;
    const ov = this.strip.overlayFor(hit.uid);
    if (!ov || !ov.viewport) return;

    if (this.tool === "highlight") { this._selDirty = false; return; }  // let the browser select

    const [x, y] = ov.toPdf(hit.vx, hit.vy);

    if (this.tool === "select") {
      const id = e.target?.closest?.(".mark")?.dataset?.id || null;
      this.selected = id;
      this.strip.refreshAllOverlays(id);
      if (id) {
        const a = this.model.annot(id);
        this.drag = { kind: "move", uid: hit.uid, id, x0: x, y0: y, orig: structuredClone(a), moved: false };
        e.preventDefault();
      }
      return;
    }

    if (this.tool === "text") {
      this.host.openTextModal({ uid: hit.uid, x, y });
      e.preventDefault();
      return;
    }
    if (this.tool === "signature") {
      this._placeSignature(hit.uid, x, y);
      e.preventDefault();
      return;
    }

    // Drawing tools: start a drag with a live preview.
    this.drag = { kind: this.tool, uid: hit.uid, x0: x, y0: y, x, y,
                  pts: this.tool === "pen" ? [[x, y]] : null,
                  cx: e.clientX, cy: e.clientY, moved: false };
    e.preventDefault();
  }

  onMove(e) {
    const d = this.drag;
    if (!d) return;
    const ov = this.strip.overlayFor(d.uid);
    if (!ov || !ov.viewport) return;
    const view = this.strip.views.get(d.uid);
    if (!view) { this.drag = null; return; }
    const rect = view.pv.div.getBoundingClientRect();
    // A drag that wanders off the page stays on it. Marks outside the page
    // box are invisible in any PDF reader, so letting one be drawn there
    // would only produce something that disappears on save.
    const cx = Math.min(Math.max(e.clientX, rect.left), rect.right);
    const cy = Math.min(Math.max(e.clientY, rect.top), rect.bottom);
    const [x, y] = ov.toPdf(cx - rect.left, cy - rect.top);
    d.x = x; d.y = y;
    if (!d.moved && Math.hypot(e.clientX - (d.cx ?? e.clientX), e.clientY - (d.cy ?? e.clientY)) > MIN_DRAG) d.moved = true;

    if (d.kind === "move") {
      const a = this.model.annot(d.id);
      if (!a) return;
      const patch = translatePatch(d.orig, x - d.x0, y - d.y0);
      Object.assign(a, patch);          // live, un-journalled; committed on up
      d.moved = true;
      this.strip.refreshOverlay(d.uid, d.id);
      return;
    }
    if (d.kind === "pen") { d.pts.push([x, y]); }
    this.strip.setPreview(d.uid, this._previewAnnot(d));
  }

  onUp(e) {
    if (this.tool === "highlight") { this._commitHighlight(); return; }
    const d = this.drag;
    this.drag = null;
    if (!d) return;
    this.strip.setPreview(null, null);

    if (d.kind === "move") {
      const a = this.model.annot(d.id);
      if (!a || !d.moved) { this.strip.refreshOverlay(d.uid, this.selected); return; }
      // Put the mark back where it started, then move it through the model so
      // the whole gesture lands on the undo stack as one step.
      const moved = structuredClone(a);
      Object.assign(a, d.orig);
      const patch = {};
      for (const k of Object.keys(moved)) if (k !== "id" && k !== "page" && k !== "kind") patch[k] = moved[k];
      this.model.moveAnnot(d.id, patch);
      this.strip.refreshAllOverlays(d.id);
      return;
    }

    const a = this._previewAnnot(d, true);
    if (a) {
      const made = this.model.addAnnot(a);
      this.selected = this.tool === "select" ? made.id : null;
    }
    this.strip.refreshAllOverlays(this.selected);
    this.host.onChange?.();
  }

  // The mark a drag currently describes. `final` rejects degenerate ones so a
  // stray click does not leave an invisible zero-size rectangle behind.
  _previewAnnot(d, final = false) {
    const common = { page: d.uid, color: this.color, width: this.width };
    switch (d.kind) {
      case "pen": {
        if (final && d.pts.length < 2) return null;
        return { kind: "pen", ...common, pts: d.pts.slice() };
      }
      case "arrow": {
        if (final && !d.moved) return null;
        return { kind: "arrow", ...common, x1: d.x0, y1: d.y0, x2: d.x, y2: d.y };
      }
      case "rect": case "ellipse": case "redact": {
        const b = normBox(d.x0, d.y0, d.x, d.y);
        if (final && (b.w < 2 || b.h < 2)) return null;
        if (d.kind === "redact") return { kind: "redact", page: d.uid, ...b };
        return { kind: d.kind, ...common, ...b };
      }
      default: return null;
    }
  }

  // ---- highlight ----------------------------------------------------
  // Take the live selection's client rects, drop them onto whichever page
  // each one sits on, and convert to user space. A selection spanning a page
  // break therefore produces one highlight mark per page, which is also what
  // the PDF format wants.
  _commitHighlight() {
    const sel = window.getSelection();
    if (!sel || sel.isCollapsed || sel.rangeCount === 0) return;
    const byPage = new Map();
    for (let i = 0; i < sel.rangeCount; i++) {
      for (const cr of sel.getRangeAt(i).getClientRects()) {
        if (cr.width < 0.5 || cr.height < 0.5) continue;
        const hit = this.strip.pageAt(cr.left + cr.width / 2, cr.top + cr.height / 2);
        if (!hit) continue;
        const ov = this.strip.overlayFor(hit.uid);
        if (!ov || !ov.viewport) continue;
        const r = this.strip.views.get(hit.uid).pv.div.getBoundingClientRect();
        const [ax, ay] = ov.toPdf(cr.left - r.left, cr.top - r.top);
        const [bx, by] = ov.toPdf(cr.right - r.left, cr.bottom - r.top);
        const box = normBox(ax, ay, bx, by);
        if (box.w < 0.5 || box.h < 0.5) continue;
        if (!byPage.has(hit.uid)) byPage.set(hit.uid, []);
        byPage.get(hit.uid).push(box);
      }
    }
    if (!byPage.size) return;
    for (const [uid, rects] of byPage) {
      this.model.addAnnot({ kind: "highlight", page: uid, color: this.color, opacity: 0.38, rects: mergeRows(rects) });
    }
    sel.removeAllRanges();
    this.strip.refreshAllOverlays(null);
    this.host.onChange?.();
  }

  // ---- stamps -------------------------------------------------------
  placeText({ uid, x, y }, text, size) {
    if (!String(text || "").trim()) return null;
    const a = this.model.addAnnot({ kind: "text", page: uid, color: this.color, size, x, y, text });
    this.strip.refreshAllOverlays(a.id);
    this.selected = a.id;
    this.host.onChange?.();
    return a;
  }

  async _placeSignature(uid, x, y) {
    let sig = this.host.signature();
    if (!sig) {
      sig = await this.host.openSignaturePad();
      if (!sig) return;
    }
    const w = SIG_WIDTH_PT;
    const h = w * (sig.aspect || 0.34);
    const a = this.model.addAnnot({
      kind: "signature", page: uid, color: this.color === "#ffd400" ? "#1a1f2b" : this.color,
      width: 1.6, x, y: y - h, w, h, strokes: sig.strokes,
    });
    this.selected = a.id;
    this.strip.refreshAllOverlays(a.id);
    this.host.onChange?.();
  }

  /** Bounds of the current selection, for the status line. */
  selectedBounds() {
    const a = this.model.annot(this.selected);
    return a ? boundsOf(a) : null;
  }
}

// Client rects for a text selection come one per text run, so a single
// highlighted line arrives as a dozen slivers. Merging the ones that share a
// baseline turns them back into one band per line — fewer objects in the saved
// file, and no seams where two slivers overlap at 38% opacity.
function mergeRows(rects) {
  const rows = [];
  for (const r of rects.slice().sort((a, b) => b.y - a.y || a.x - b.x)) {
    const row = rows.find((q) => Math.abs((q.y + q.h / 2) - (r.y + r.h / 2)) < Math.min(q.h, r.h) * 0.5);
    if (!row) { rows.push({ ...r }); continue; }
    const x0 = Math.min(row.x, r.x), x1 = Math.max(row.x + row.w, r.x + r.w);
    const y0 = Math.min(row.y, r.y), y1 = Math.max(row.y + row.h, r.y + r.h);
    row.x = x0; row.w = x1 - x0; row.y = y0; row.h = y1 - y0;
  }
  return rows;
}