8ed051c2da
Three complaints, one cause between the first two. A line of a PDF is rarely one run. pdf.js splits it wherever the file does — a font change, a kerning adjustment, a colour change — so a heading can be three spans and an invoice line ten. Replacing the span under the cursor covered a fragment and left the rest of the line standing, which is exactly what a replacement that looks like a copy laid over the original is. A run is now the whole visual line: the spans that share its baseline and sit close enough to be spacing rather than a second column, with the spaces the geometry implies put back between them. And that line is edited on the page. The dialog that used to hold a copy of the words is gone: the cover goes down first, carrying the line's own words at the page's own size and colour, and the caret opens on it. The cover keeps its words hidden while you type, so the original never shows through the thing covering it. Escape with nothing changed lifts the cover again and leaves the page as it was found — no mark, no undo step. The rotate grip was a square like the resize handles, wearing the open hand that means drag-the-page. It is a disc with a turning arrow now, and a cursor drawn to match, since no standard cursor means turn. The inline style that was defeating the stylesheet is gone with it. Ctrl and the wheel zoom, about the pointer rather than the top-left, so the words you were reading stay where they were. A plain wheel still scrolls.
843 lines
35 KiB
JavaScript
843 lines
35 KiB
JavaScript
// 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.
|
|
//
|
|
// The text-markup tools are the deliberate exception. Highlight, underline and
|
|
// strikeout all work 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 over pdf.js's span soup would be
|
|
// worse at it.
|
|
//
|
|
// Placing something one-shot — a text stamp, a signature — drops straight back
|
|
// to the select tool with the new mark selected. Staying armed means the next
|
|
// click stamps a second copy, which is almost never what was wanted, and it
|
|
// puts the thing just placed immediately within reach of a nudge or a resize.
|
|
|
|
import { ASCENT, boundsOf, boxesOverlap, normBox, translatePatch, resizeBox, scaleToBox } from "./shape.js";
|
|
|
|
const MIN_DRAG = 3; // CSS px before a press counts as a drag
|
|
const DOUBLE_CLICK_MS = 450; // window for a second click on the same mark
|
|
const SIG_WIDTH_PT = 170; // default placed width of a signature
|
|
const DESCENDER = 0.26; // how far below the baseline a glyph can reach, as a fraction of size
|
|
|
|
/** Tools that mark up existing text rather than drawing free-hand. */
|
|
export const TEXT_MARKUP = new Set(["highlight", "underline", "strikeout"]);
|
|
/** Tools that place something with a single click. */
|
|
const STAMP_TOOLS = new Set(["signature"]);
|
|
|
|
/**
|
|
* Put `a` back exactly as `orig` was — including forgetting keys `orig`
|
|
* never had.
|
|
*
|
|
* Object.assign alone copies the keys the original HAD, so a property the
|
|
* drag introduced survives the restore. That is not a tidiness point: the
|
|
* journal snapshots the restored mark as the "before", so a first rotation
|
|
* of a never-rotated signature was recorded as already rotated, and undo
|
|
* had nothing to undo.
|
|
*/
|
|
function restoreExactly(a, orig) {
|
|
for (const k of Object.keys(a)) if (!(k in orig)) delete a[k];
|
|
Object.assign(a, orig);
|
|
}
|
|
|
|
export class Tools {
|
|
constructor({ strip, model, host }) {
|
|
this.strip = strip;
|
|
this.model = model;
|
|
// host (editor.js): { toast, onChange, selectTool, onSelectionChange,
|
|
// beginText, editRun, chooseSignature,
|
|
// signature }
|
|
this.host = host;
|
|
this.tool = "select";
|
|
this.color = "#ffd400";
|
|
this.width = 2.5;
|
|
this.fill = false; // shapes: outline only, or filled
|
|
this.fillOpacity = 0.25;
|
|
this.selected = null; // the anchor of the selection, or null
|
|
this.selection = new Set(); // every selected mark
|
|
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;
|
|
this.selection = new Set();
|
|
}
|
|
|
|
get mode() {
|
|
if (this.tool === "select") return "select";
|
|
if (TEXT_MARKUP.has(this.tool)) return "highlight";
|
|
// The text tool needs the document's own words to be hit-testable, so a
|
|
// click on them can replace them. A stamp tool must NOT, so its click
|
|
// lands on the page rather than inside a text selection.
|
|
if (this.tool === "text") return "text";
|
|
if (STAMP_TOOLS.has(this.tool)) return "stamp";
|
|
return "draw";
|
|
}
|
|
|
|
setTool(t) {
|
|
this.tool = t;
|
|
this._setSelected(null);
|
|
document.body.dataset.mode = this.mode;
|
|
this.host.onChange?.();
|
|
}
|
|
|
|
/** The one place selection changes, so the host never misses one. */
|
|
_setSelected(id) { this._setSelection(id ? [id] : []); }
|
|
/**
|
|
* Select a set of marks.
|
|
*
|
|
* `selection` is the truth; `selected` is the one of them the single-mark
|
|
* paths work on — the anchor — and is null when nothing is selected. With
|
|
* exactly one mark the two say the same thing, which is why every existing
|
|
* caller kept working when this grew from an id into a set.
|
|
*/
|
|
_setSelection(ids) {
|
|
const list = [...new Set(ids)].filter((id) => !!this.model.annot(id));
|
|
this.selection = new Set(list);
|
|
this.selected = list.length ? list[0] : null;
|
|
this.strip.refreshAllOverlays(this.selection);
|
|
this.host.onSelectionChange?.(this.selected);
|
|
}
|
|
select(id) { this._setSelected(id); }
|
|
selectMany(ids) { this._setSelection(ids); }
|
|
/** Every selected mark, as objects. */
|
|
selectedAnnots() {
|
|
return [...this.selection].map((id) => this.model.annot(id)).filter(Boolean);
|
|
}
|
|
|
|
setColor(c) {
|
|
this.color = c;
|
|
// Redaction is black because it is a redaction; it does not take a colour.
|
|
const ids = this.selectedAnnots().filter((a) => a.kind !== "redact").map((a) => a.id);
|
|
if (ids.length) this.patchSelected({ color: c }, ids);
|
|
}
|
|
setFill(on) {
|
|
this.fill = !!on;
|
|
const ids = this.selectedAnnots()
|
|
.filter((a) => a.kind === "rect" || a.kind === "ellipse").map((a) => a.id);
|
|
if (ids.length) this.patchSelected({ fill: this.fill }, ids);
|
|
}
|
|
setWidth(w) {
|
|
this.width = w;
|
|
const ids = this.selectedAnnots()
|
|
.filter((a) => a.kind !== "text" && a.kind !== "redact").map((a) => a.id);
|
|
if (ids.length) this.patchSelected({ width: w }, ids);
|
|
}
|
|
|
|
/** Change the selected marks, as one undo step. */
|
|
patchSelected(patch, ids = null) {
|
|
const list = ids || [...this.selection];
|
|
if (!list.length) return false;
|
|
const ok = list.length === 1
|
|
? this.model.moveAnnot(list[0], patch)
|
|
: this.model.moveAnnots(list, patch);
|
|
this.strip.refreshAllOverlays(this.selection);
|
|
this.host.onSelectionChange?.(this.selected);
|
|
this.host.onChange?.();
|
|
return ok;
|
|
}
|
|
|
|
deleteSelected() {
|
|
const list = [...this.selection];
|
|
if (!list.length) return false;
|
|
const ok = list.length === 1
|
|
? this.model.removeAnnot(list[0])
|
|
: this.model.removeAnnots(list);
|
|
this._setSelected(null);
|
|
this.host.onChange?.();
|
|
return ok;
|
|
}
|
|
|
|
/** Drop a copy of each selected mark, offset so they are visibly seconds. */
|
|
duplicateSelected() {
|
|
const originals = this.selectedAnnots();
|
|
if (!originals.length) return null;
|
|
const off = 12;
|
|
const clone = (a) => {
|
|
const copy = { ...structuredClone(a), ...translatePatch(a, off, -off) };
|
|
delete copy.id;
|
|
delete copy._w;
|
|
delete copy._editing;
|
|
return copy;
|
|
};
|
|
if (originals.length === 1) {
|
|
const made = this.model.addAnnot(clone(originals[0]));
|
|
this._setSelected(made.id);
|
|
this.host.onChange?.();
|
|
return made;
|
|
}
|
|
// One step for the group, and the copies end up selected so the next
|
|
// drag moves the copies rather than the originals.
|
|
const made = [];
|
|
this.model.edit(`duplicate ${originals.length} marks`, () => {
|
|
for (const a of originals) made.push(this.model.pushAnnot(clone(a)));
|
|
return true;
|
|
});
|
|
this._setSelection(made.map((m) => m.id));
|
|
this.host.onChange?.();
|
|
return made;
|
|
}
|
|
|
|
// ---- pointer ------------------------------------------------------
|
|
onDown(e) {
|
|
if (e.button !== 0) return;
|
|
|
|
// A resize handle is checked before anything else, and whatever tool is
|
|
// armed. Two reasons it comes first: it sits outside the mark's own
|
|
// bounds, so the page under it may not even be the page the mark is on;
|
|
// and a shape is selected the instant it is drawn, so grabbing a corner
|
|
// has to work right then, without a detour through the select tool to
|
|
// resize the thing you are still looking at.
|
|
//
|
|
// It cannot be confused with drawing. A handle is a 9 px square that
|
|
// exists only while something is selected; nobody aims at one by
|
|
// accident, and Escape drops the selection if the space is wanted back.
|
|
const handle = e.target?.closest?.(".handle")?.dataset?.handle;
|
|
if (handle && this.selected) {
|
|
const a = this.model.annot(this.selected);
|
|
const ov = a && this.strip.overlayFor(a.page);
|
|
if (a && ov?.viewport && handle === "rotate") {
|
|
// Turning is measured from the mark's centre, so the grip follows the
|
|
// pointer round rather than jumping to it.
|
|
const b = boundsOf(a);
|
|
this.drag = {
|
|
kind: "rotate", uid: a.page, id: a.id, orig: structuredClone(a),
|
|
cx0: a.x + a.w / 2, cy0: a.y + a.h / 2,
|
|
from: null, cx: e.clientX, cy: e.clientY, moved: false, box: b,
|
|
};
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
if (a && ov?.viewport) {
|
|
const view = this.strip.views.get(a.page);
|
|
const r = view.pv.div.getBoundingClientRect();
|
|
const [hx, hy] = ov.toPdf(e.clientX - r.left, e.clientY - r.top);
|
|
this.drag = {
|
|
kind: "resize", uid: a.page, id: a.id, handle,
|
|
x0: hx, y0: hy, orig: structuredClone(a), from: boundsOf(a),
|
|
cx: e.clientX, cy: e.clientY, moved: false,
|
|
};
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Dragging what is already selected moves it, whatever tool is armed.
|
|
// A tool drops back to select after it stamps, but a shape tool stays
|
|
// armed for the next shape — so the mark you just drew could be resized
|
|
// by its handles and not moved by its middle, which is a strange half of
|
|
// an editor. Only the SELECTED mark does this: a press anywhere else
|
|
// still draws.
|
|
if (this.selected && this.tool !== "select" &&
|
|
e.target?.closest?.(".mark")?.dataset?.id === this.selected) {
|
|
const a = this.model.annot(this.selected);
|
|
const spot = this.strip.pageAt(e.clientX, e.clientY);
|
|
const ovm = a && this.strip.overlayFor(a.page);
|
|
if (a && spot && spot.uid === a.page && ovm?.viewport) {
|
|
const [mx, my] = ovm.toPdf(spot.vx, spot.vy);
|
|
this.drag = this._beginMove(a.page, a.id, mx, my, e);
|
|
e.preventDefault();
|
|
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 (TEXT_MARKUP.has(this.tool)) return; // let the browser select text
|
|
|
|
const [x, y] = ov.toPdf(hit.vx, hit.vy);
|
|
|
|
if (this.tool === "select") {
|
|
const id = e.target?.closest?.(".mark")?.dataset?.id || null;
|
|
// Double-click is detected here rather than from a `dblclick` listener.
|
|
// Selecting a mark calls preventDefault() on the pointerdown, and that
|
|
// suppresses the compatibility mouse events the browser would otherwise
|
|
// synthesise a dblclick from — so the native event never arrives.
|
|
const now = Date.now();
|
|
const double = !!id && this._lastClick?.id === id && now - this._lastClick.t < DOUBLE_CLICK_MS;
|
|
this._lastClick = id ? { id, t: now } : null;
|
|
// A second kind of double-click, by POSITION rather than by mark: the
|
|
// page itself and the document's own words are not marks, and both
|
|
// answer to being double-clicked.
|
|
const near = this._lastPress &&
|
|
Math.hypot(e.clientX - this._lastPress.x, e.clientY - this._lastPress.y) < 6;
|
|
const doubleAnywhere = !!near && now - this._lastPress.t < DOUBLE_CLICK_MS;
|
|
this._lastPress = { x: e.clientX, y: e.clientY, t: now };
|
|
|
|
if (!id) {
|
|
const span = e.target?.closest?.(".textLayer span");
|
|
// Double-click on the document's own words: replace that run, the
|
|
// same thing the text tool does, because "edit what is there" and
|
|
// "select something" are one gesture in every editor people already
|
|
// know.
|
|
if (doubleAnywhere && span && span.textContent.trim()) {
|
|
this._setSelected(null);
|
|
e.preventDefault();
|
|
this._replaceRunAt(e, hit.uid);
|
|
return;
|
|
}
|
|
// Double-click on bare page: start typing there.
|
|
if (doubleAnywhere && !span) {
|
|
this._setSelected(null);
|
|
e.preventDefault();
|
|
this.host.beginText?.({ uid: hit.uid, x, y });
|
|
return;
|
|
}
|
|
// Empty page: start a rubber band. A press that never moves is just
|
|
// a click on nothing, and onUp treats it as one — it clears the
|
|
// selection, exactly as it always did.
|
|
this._setSelected(null);
|
|
// ...unless the press is on one of the document's own form fields.
|
|
// Starting a band there means calling preventDefault, and that is
|
|
// what gives a text field its caret, so the field would go dead.
|
|
if (e.target?.closest?.(".annotationLayer")) return;
|
|
// ...or on the document's own words, where a drag means selecting
|
|
// them to copy. A band is started from the space between things,
|
|
// which is where a hand reaches for one anyway — except on a page
|
|
// that is wall-to-wall text and has no such space, which is what
|
|
// Alt is for.
|
|
if (span && !e.altKey) return;
|
|
this.drag = { kind: "marquee", uid: hit.uid, x0: x, y0: y, x, y,
|
|
cx: e.clientX, cy: e.clientY, moved: false };
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
// Shift adds to, or takes away from, what is already selected.
|
|
if (e.shiftKey) {
|
|
const next = new Set(this.selection);
|
|
next.has(id) ? next.delete(id) : next.add(id);
|
|
this._setSelection([...next]);
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
// Pressing on a mark that is already part of a group keeps the group,
|
|
// so the drag moves all of it. Pressing on any other mark selects just
|
|
// that one.
|
|
if (!this.selection.has(id)) this._setSelected(id);
|
|
e.preventDefault();
|
|
if (double && this.selection.size === 1) {
|
|
const a = this.model.annot(id);
|
|
// A stamp is edited where it sits; a replaced run keeps its dialog,
|
|
// which is where it explains what it is replacing.
|
|
if (a?.kind === "text") { this.host.beginText?.({ id }); return; }
|
|
if (a?.kind === "textedit") { this.host.beginText?.({ id }); return; }
|
|
}
|
|
this.drag = this._beginMove(hit.uid, id, x, y, e);
|
|
return;
|
|
}
|
|
|
|
if (this.tool === "text") {
|
|
// One text tool, two jobs, told apart by what is under the click:
|
|
// words that are already in the document get replaced, and anywhere
|
|
// else gets a caret. They were two buttons, which asked the user to
|
|
// decide in advance something the click already says.
|
|
e.preventDefault();
|
|
if (this._replaceRunAt(e, hit.uid)) return;
|
|
this.host.beginText?.({ uid: hit.uid, x, y });
|
|
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();
|
|
}
|
|
|
|
/**
|
|
* If the press landed on a run of the document's own text, open it for
|
|
* replacement and say so.
|
|
*
|
|
* A text-layer span IS a run, which is why this is a one-line test: pdf.js
|
|
* groups glyphs into spans by the same runs the PDF itself declares.
|
|
* @returns true when it took the click.
|
|
*/
|
|
_replaceRunAt(e, uid) {
|
|
const span = e.target?.closest?.(".textLayer span");
|
|
if (!span || !span.textContent.trim()) return false;
|
|
const run = this.describeRun(span, uid);
|
|
if (!run) return false;
|
|
// A press on text starts a browser selection; the dialog is about to
|
|
// cover it, and a half-highlighted line underneath reads as a fault.
|
|
try { window.getSelection()?.removeAllRanges(); } catch {}
|
|
this.host.editRun?.(run);
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* A move drag, of one mark or of the whole group.
|
|
*
|
|
* `origs` holds every mark's starting geometry: each one shifts from where
|
|
* IT was, not from where the one under the cursor was.
|
|
*/
|
|
_beginMove(uid, id, x, y, e) {
|
|
const ids = this.selection.has(id) ? [...this.selection] : [id];
|
|
const origs = new Map();
|
|
for (const i of ids) {
|
|
const a = this.model.annot(i);
|
|
// A group can only be dragged within one page: a mark carries its page,
|
|
// and PDF user space means nothing across two of them.
|
|
if (a && a.page === uid) origs.set(i, structuredClone(a));
|
|
}
|
|
return { kind: "move", uid, id, x0: x, y0: y, origs,
|
|
orig: origs.get(id) || structuredClone(this.model.annot(id)),
|
|
cx: e.clientX, cy: e.clientY, moved: false };
|
|
}
|
|
|
|
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 === "marquee") {
|
|
this.strip.setPreview(d.uid, { kind: "marquee", x0: d.x0, y0: d.y0, x1: x, y1: y });
|
|
return;
|
|
}
|
|
if (d.kind === "rotate") {
|
|
const a = this.model.annot(d.id);
|
|
if (!a) return;
|
|
// User space has y upwards, so a turn that looks clockwise on screen is
|
|
// counter-clockwise here; negating keeps "drag right" meaning "turn
|
|
// right" to the person doing it.
|
|
const angle = -Math.atan2(y - d.cy0, x - d.cx0) * 180 / Math.PI - 90;
|
|
if (d.from === null) d.from = angle - (d.orig.rotate || 0);
|
|
let deg = angle - d.from;
|
|
// Shift snaps, for the common case of straightening something by a few
|
|
// degrees or turning it exactly a quarter.
|
|
if (e.shiftKey) deg = Math.round(deg / 15) * 15;
|
|
a.rotate = ((deg % 360) + 360) % 360;
|
|
d.moved = true;
|
|
this.strip.refreshOverlay(d.uid, this.selection);
|
|
this.host.rotating?.(a.rotate);
|
|
return;
|
|
}
|
|
if (d.kind === "move") {
|
|
// Live and un-journalled; the whole gesture is committed once on release
|
|
// so undo steps back over the drag, not over each mouse move.
|
|
for (const [id, orig] of d.origs) {
|
|
const a = this.model.annot(id);
|
|
if (a) Object.assign(a, translatePatch(orig, x - d.x0, y - d.y0));
|
|
}
|
|
d.moved = true;
|
|
this.strip.refreshOverlay(d.uid, this.selection);
|
|
return;
|
|
}
|
|
if (d.kind === "resize") {
|
|
const a = this.model.annot(d.id);
|
|
if (!a) return;
|
|
// Always mapped from the ORIGINAL geometry, never from the last frame,
|
|
// so a drag back to where it started restores the mark exactly.
|
|
if (d.handle === "p1" || d.handle === "p2") {
|
|
Object.assign(a, d.handle === "p1" ? { x1: x, y1: y } : { x2: x, y2: y });
|
|
} else {
|
|
const uniform = d.orig.kind === "text" || d.orig.kind === "signature";
|
|
const to = resizeBox(d.from, d.handle, x - d.x0, y - d.y0, { uniform });
|
|
Object.assign(a, scaleToBox(d.orig, d.from, to));
|
|
}
|
|
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) {
|
|
// A handle or move drag is finished here whatever tool is armed. Without
|
|
// this the text-markup tools would return on the line below and strand a
|
|
// resize half-done: applied to the live mark, never journalled, and with
|
|
// this.drag still set so the next press behaves oddly.
|
|
const inFlight = this.drag;
|
|
const live = inFlight && ["resize", "move", "rotate", "marquee"].includes(inFlight.kind);
|
|
if (!live && TEXT_MARKUP.has(this.tool)) {
|
|
this._commitTextMarkup();
|
|
return;
|
|
}
|
|
const d = inFlight;
|
|
this.drag = null;
|
|
if (!d) return;
|
|
this.strip.setPreview(null, null);
|
|
|
|
if (d.kind === "marquee") {
|
|
// A press that never moved is a click on empty space: the selection is
|
|
// already cleared, and there is nothing to gather.
|
|
if (d.moved) this._selectWithin(d.uid, d.x0, d.y0, d.x, d.y);
|
|
else this.strip.refreshAllOverlays(this.selection);
|
|
this.host.onChange?.();
|
|
return;
|
|
}
|
|
if (d.kind === "move" || d.kind === "resize" || d.kind === "rotate") {
|
|
const a = this.model.annot(d.id);
|
|
if (!a || !d.moved) { this.strip.refreshOverlay(d.uid, this.selection); return; }
|
|
if (d.origs && d.origs.size > 1) this._commitGroupMove(d);
|
|
else this._commitLiveEdit(a, d.orig);
|
|
this._setSelection([...this.selection]);
|
|
this.host.onChange?.();
|
|
return;
|
|
}
|
|
|
|
const a = this._previewAnnot(d, true);
|
|
if (a) {
|
|
const made = this.model.addAnnot(a);
|
|
this._setSelected(made.id);
|
|
} else {
|
|
this.strip.refreshAllOverlays(this.selection);
|
|
}
|
|
this.host.onChange?.();
|
|
}
|
|
|
|
// A live drag mutates the mark in place so the screen keeps up. To land it
|
|
// on the undo stack as ONE step, put the original back and re-apply the
|
|
// result through the model.
|
|
/**
|
|
* Everything the rubber band touched, on the page it was drawn on.
|
|
*
|
|
* Touching counts, not enclosing. A band you have to draw right around a
|
|
* long arrow to catch it is a band you draw twice; catching what you swept
|
|
* over is what people expect from sweeping.
|
|
*/
|
|
_selectWithin(uid, x0, y0, x1, y1) {
|
|
const box = {
|
|
x: Math.min(x0, x1), y: Math.min(y0, y1),
|
|
w: Math.abs(x1 - x0), h: Math.abs(y1 - y0),
|
|
};
|
|
const hits = this.model.annotsFor(uid)
|
|
.filter((a) => { const b = boundsOf(a); return b && boxesOverlap(b, box); })
|
|
.map((a) => a.id);
|
|
this._setSelection(hits);
|
|
// Only the empty case is worth a toast; when it caught something, the
|
|
// boxes on screen and the status line have already said so.
|
|
if (!hits.length) this.host.toast?.("Nothing in that area");
|
|
}
|
|
|
|
/** A group drag, landed on the undo stack as one step. */
|
|
_commitGroupMove(d) {
|
|
const after = new Map();
|
|
for (const id of d.origs.keys()) {
|
|
const a = this.model.annot(id);
|
|
if (a) after.set(id, structuredClone(a));
|
|
}
|
|
// Put every mark back before re-applying through the model, so the
|
|
// journal's "before" is the state the drag actually started from.
|
|
for (const [id, orig] of d.origs) {
|
|
const a = this.model.annot(id);
|
|
if (a) restoreExactly(a, orig);
|
|
}
|
|
this.model.moveAnnots([...after.keys()], (a) => {
|
|
const to = after.get(a.id);
|
|
const patch = {};
|
|
for (const k of Object.keys(to)) {
|
|
if (k !== "id" && k !== "page" && k !== "kind") patch[k] = to[k];
|
|
}
|
|
return patch;
|
|
});
|
|
}
|
|
|
|
_commitLiveEdit(a, orig) {
|
|
const after = structuredClone(a);
|
|
restoreExactly(a, orig);
|
|
const patch = {};
|
|
for (const k of Object.keys(after)) {
|
|
if (k !== "id" && k !== "page" && k !== "kind") patch[k] = after[k];
|
|
}
|
|
this.model.moveAnnot(a.id, patch);
|
|
}
|
|
|
|
// 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": case "line": {
|
|
if (final && !d.moved) return null;
|
|
return { kind: d.kind, ...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, fill: !!this.fill, opacity: this.fillOpacity ?? 0.25 };
|
|
}
|
|
default: return null;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Everything needed to replace one run of the document's text, in the
|
|
* coordinates the rest of the editor speaks.
|
|
*
|
|
* The text layer is the source: pdf.js has already placed a span over every
|
|
* run, and its `--font-height` carries the run's size in unscaled PDF points
|
|
* — so the size survives zooming, which reading it off the rendered box
|
|
* would not.
|
|
*/
|
|
/**
|
|
* The whole visual line the clicked span belongs to.
|
|
*
|
|
* A line of a PDF is rarely one span. pdf.js splits it wherever the file
|
|
* does — a font change, a kerning adjustment, a ligature — so "Quarterly
|
|
* Report" can be three spans and a real invoice line can be ten. Replacing
|
|
* one of them covered a fragment and left the rest of the line standing,
|
|
* which is what a replacement that looks like a copy laid on top of the
|
|
* original actually is.
|
|
*
|
|
* Same line means: the vertical middles agree, and the horizontal gaps are
|
|
* small enough to be spacing rather than a second column.
|
|
*/
|
|
_lineSpans(span) {
|
|
const layer = span.closest(".textLayer");
|
|
if (!layer) return [span];
|
|
const r0 = span.getBoundingClientRect();
|
|
if (!(r0.height > 0)) return [span];
|
|
const mid = r0.top + r0.height / 2;
|
|
const tol = Math.max(3, r0.height * 0.4);
|
|
const row = [...layer.querySelectorAll("span")]
|
|
.map((el) => ({ el, r: el.getBoundingClientRect() }))
|
|
.filter((s) => s.r.width > 0 && s.r.height > 0 &&
|
|
Math.abs(s.r.top + s.r.height / 2 - mid) <= tol)
|
|
.sort((a, b) => a.r.left - b.r.left);
|
|
const i = row.findIndex((s) => s.el === span);
|
|
if (i < 0) return [span];
|
|
// A gap wider than a couple of spaces is another block of text, not the
|
|
// rest of this line.
|
|
const maxGap = Math.max(8, r0.height * 1.2);
|
|
let lo = i, hi = i;
|
|
while (lo > 0 && row[lo].r.left - row[lo - 1].r.right <= maxGap) lo--;
|
|
while (hi < row.length - 1 && row[hi + 1].r.left - row[hi].r.right <= maxGap) hi++;
|
|
return row.slice(lo, hi + 1).map((s) => s.el);
|
|
}
|
|
|
|
describeRun(span, uid) {
|
|
const ov = this.strip.overlayFor(uid);
|
|
const view = this.strip.views.get(uid);
|
|
if (!ov?.viewport || !view) return null;
|
|
const pr = view.pv.div.getBoundingClientRect();
|
|
const spans = this._lineSpans(span);
|
|
const rects = spans.map((el) => el.getBoundingClientRect());
|
|
// The line's own box, and its text with the spaces the geometry implies:
|
|
// pdf.js puts no space between spans, the gap between them IS the space.
|
|
const r = {
|
|
left: Math.min(...rects.map((b) => b.left)),
|
|
right: Math.max(...rects.map((b) => b.right)),
|
|
top: Math.min(...rects.map((b) => b.top)),
|
|
bottom: Math.max(...rects.map((b) => b.bottom)),
|
|
};
|
|
r.width = r.right - r.left;
|
|
r.height = r.bottom - r.top;
|
|
let lineText = "";
|
|
for (let k = 0; k < spans.length; k++) {
|
|
const t = spans[k].textContent;
|
|
if (k > 0) {
|
|
const gap = rects[k].left - rects[k - 1].right;
|
|
if (gap > rects[k].height * 0.18 && !/\s$/.test(lineText) && !/^\s/.test(t)) lineText += " ";
|
|
}
|
|
lineText += t;
|
|
}
|
|
if (r.width < 1 || r.height < 1) return null;
|
|
const [ax, ay] = ov.toPdf(r.left - pr.left, r.bottom - pr.top);
|
|
const [bx, by] = ov.toPdf(r.right - pr.left, r.top - pr.top);
|
|
const box = normBox(ax, ay, bx, by);
|
|
const declared = parseFloat(getComputedStyle(span).getPropertyValue("--font-height"));
|
|
const size = Number.isFinite(declared) && declared > 0 ? declared : box.h * 0.8;
|
|
// PDF text sits on a baseline; the span's top is the top of the em box,
|
|
// so the baseline hangs one ascent below it.
|
|
const baseline = box.y + box.h - size * ASCENT;
|
|
// The span does NOT enclose the glyphs. pdf.js sizes it to the em box, so
|
|
// every descender — the tail of a y, a comma — falls below it, and a cover
|
|
// cut to the span leaves a row of little hooks showing under the
|
|
// replacement. Reach below the baseline far enough to take them, and a
|
|
// hair above and to the sides for accents and side bearings.
|
|
const bottom = Math.min(box.y, baseline - size * DESCENDER);
|
|
const top = box.y + box.h + size * 0.06;
|
|
return {
|
|
uid,
|
|
text: lineText,
|
|
spans: spans.length,
|
|
box: { x: box.x - 0.6, y: bottom, w: box.w + 1.2, h: top - bottom },
|
|
size,
|
|
baseline,
|
|
clientRect: { left: r.left, top: r.top, width: r.width, height: r.height },
|
|
};
|
|
}
|
|
|
|
/** Commit a replaced run as a mark, selected and ready to nudge. */
|
|
replaceRun(run, props) {
|
|
const a = this.model.addAnnot({
|
|
kind: "textedit", page: run.uid,
|
|
x: run.box.x, y: run.box.y, w: run.box.w, h: run.box.h,
|
|
baseline: run.baseline,
|
|
text: props.text, size: props.size ?? run.size,
|
|
color: props.color || "#000000",
|
|
cover: props.cover || "#ffffff",
|
|
bold: !!props.bold, italic: !!props.italic,
|
|
});
|
|
this._afterStamp(a);
|
|
return a;
|
|
}
|
|
|
|
// ---- text markup --------------------------------------------------
|
|
// 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 mark per page, which is also what the PDF format
|
|
// wants. Highlight, underline and strikeout differ only in `kind`.
|
|
_commitTextMarkup() {
|
|
const kind = this.tool;
|
|
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;
|
|
let last = null;
|
|
for (const [uid, rects] of byPage) {
|
|
last = this.model.addAnnot({
|
|
kind, page: uid, color: this.color,
|
|
opacity: kind === "highlight" ? 0.38 : 1,
|
|
width: kind === "highlight" ? undefined : Math.max(0.8, this.width * 0.55),
|
|
rects: mergeRows(rects),
|
|
});
|
|
}
|
|
sel.removeAllRanges();
|
|
this._setSelected(last ? last.id : null);
|
|
this.host.onChange?.();
|
|
}
|
|
|
|
// ---- stamps -------------------------------------------------------
|
|
/** Place a new text mark, or rewrite an existing one, as one undo step. */
|
|
/**
|
|
* The colour to write WORDS in.
|
|
*
|
|
* The palette's default is highlighter yellow, which is right for a
|
|
* highlight and unreadable as text on a white page. A signature already
|
|
* made this swap; text was left behind, and you now watch yourself type
|
|
* in it, so it is impossible to miss.
|
|
*/
|
|
get ink() { return this.color === "#ffd400" ? "#1a1f2b" : this.color; }
|
|
|
|
placeText({ uid, x, y }, props) {
|
|
if (!String(props.text || "").trim()) return null;
|
|
const a = this.model.addAnnot({
|
|
kind: "text", page: uid, color: this.ink, x, y,
|
|
size: props.size, text: props.text, bold: !!props.bold, italic: !!props.italic,
|
|
});
|
|
this._afterStamp(a);
|
|
return a;
|
|
}
|
|
|
|
updateText(id, props) {
|
|
const a = this.model.annot(id);
|
|
if (!a) return null;
|
|
if (!String(props.text || "").trim()) { this.deleteSelected(); return null; }
|
|
this.model.moveAnnot(id, {
|
|
text: props.text, size: props.size, bold: !!props.bold, italic: !!props.italic,
|
|
});
|
|
delete a._w; // width changed; let the renderer re-measure
|
|
this._setSelected(id);
|
|
this.host.onChange?.();
|
|
return a;
|
|
}
|
|
|
|
async _placeSignature(uid, x, y) {
|
|
// Which signature is decided when the tool is armed, not on every click,
|
|
// so placing three initials in three boxes is three clicks. This is only
|
|
// the fallback for a tool armed with nothing chosen yet.
|
|
let sig = this.host.signature();
|
|
if (!sig) {
|
|
sig = await this.host.chooseSignature?.();
|
|
if (!sig) return;
|
|
}
|
|
const w = SIG_WIDTH_PT;
|
|
const h = w * (sig.aspect || 0.34);
|
|
const a = this.model.addAnnot({
|
|
// The ink the signature was drawn in, not whatever swatch is armed.
|
|
kind: "signature", page: uid, color: sig.color || this.ink,
|
|
width: 1.6, x, y: y - h, w, h, strokes: sig.strokes,
|
|
});
|
|
this._afterStamp(a);
|
|
}
|
|
|
|
// Drop back to select with the new mark live, so it can be nudged, resized
|
|
// or deleted straight away and a second click does not stamp a duplicate.
|
|
_afterStamp(a) {
|
|
this.host.selectTool?.("select");
|
|
this._setSelected(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;
|
|
}
|