Draw on PDF pages

Stage four. Strokes are kept per page in that page's own coordinate
space — PDF points at scale 1 — not in the fixed 1200x1600 space a note's
drawing uses. A PDF cannot use one space: every page has its own size,
and a stroke belongs to the page it was drawn on.

That is what keeps a mark on the word it was drawn over at any zoom and
on any screen, and it is the only form that can be stamped back into the
file in stage seven, where page points are the only coordinates that mean
anything. Measured rather than assumed: zooming moves a stroke by 0.001
of the page.

Pen sizes are scaled by the page width. The sizes are calibrated for the
1200-unit note page, so on a 595-point A4 page the same number would have
drawn twice as thick.

Reading and drawing are separate modes. While reading the ink layer takes
no pointer events, so scrolling and selecting text reach the page beneath
it; while drawing, a finger still scrolls and only a pen or mouse marks,
because a touch-drag on a phone means scroll far more often than it means
draw. The drawing can be hidden without being erased, for reading the
original clean.

The server accepted only the single-page shape; it now takes either and
counts strokes across pages for its limit.

Carried over from notes: the save token guard, so the six-second poller
adopting a response issued before the local save cannot undo what was
just drawn. The suite waits nine seconds and checks the ink is still
there — that bug has cost strokes twice before.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

e2e/pdf.mjs

@@ -100,6 +100,87 @@ try {
     "pdf.js was fetched only once it was needed"
   );
 
+  /* ── drawing on a page ── */
+  const inkOnPage = (n) =>
+    p.evaluate((page) => {
+      const c = document.querySelector(`[data-pdf-ink="${page}"]`);
+      if (!c) return -1;
+      const d = c.getContext("2d").getImageData(0, 0, c.width, c.height).data;
+      let painted = 0;
+      for (let i = 3; i < d.length; i += 4) if (d[i] > 40) painted++;
+      return painted;
+    }, n);
+
+  /** Draws a line across the page in fractions of its box, then waits for the save. */
+  const drawOn = async (pageNo, x1, y1, x2, y2) => {
+    const box = await p.locator(`[data-pdf-page="${pageNo}"]`).boundingBox();
+    await p.mouse.move(box.x + box.width * x1, box.y + box.height * y1);
+    await p.mouse.down();
+    await p.mouse.move(box.x + box.width * x2, box.y + box.height * y2, { steps: 14 });
+    await p.mouse.up();
+    await p.waitForTimeout(1600);
+  };
+
+  check((await inkOnPage(1)) === 0, "no ink before anything is drawn");
+  await p.locator("[data-pdf-mode]").click();
+  check((await p.locator('[data-pdf-mode="draw"]').count()) === 1, "drawing mode can be switched on");
+
+  await drawOn(1, 0.2, 0.25, 0.7, 0.3);
+  const inkedFirst = await inkOnPage(1);
+  check(inkedFirst > 100, "the stroke appears on the page", `${inkedFirst} painted pixels`);
+  check((await inkOnPage(2)) === 0, "and only on the page it was drawn on");
+  await p.screenshot({ path: "/out/pdf-drawn.png" });
+
+  /* Where the stroke sits relative to the page, so zoom can be compared against it. */
+  const inkBounds = (n) =>
+    p.evaluate((page) => {
+      const c = document.querySelector(`[data-pdf-ink="${page}"]`);
+      const d = c.getContext("2d").getImageData(0, 0, c.width, c.height).data;
+      let minX = 1e9, maxX = -1, minY = 1e9, maxY = -1;
+      for (let i = 3, px = 0; i < d.length; i += 4, px++) {
+        if (d[i] <= 40) continue;
+        const x = px % c.width, y = (px / c.width) | 0;
+        if (x < minX) minX = x;
+        if (x > maxX) maxX = x;
+        if (y < minY) minY = y;
+        if (y > maxY) maxY = y;
+      }
+      // As fractions of the canvas, so they can be compared across zoom levels.
+      return { x: minX / c.width, y: minY / c.height, w: (maxX - minX) / c.width, h: (maxY - minY) / c.height };
+    }, n);
+
+  const before = await inkBounds(1);
+  await p.getByTitle("Größer").click();
+  await p.waitForTimeout(2500);
+  const after = await inkBounds(1);
+  const drift = Math.max(Math.abs(before.x - after.x), Math.abs(before.y - after.y), Math.abs(before.w - after.w));
+  check(drift < 0.02, "the stroke stays on the same spot when zoomed", `drift ${drift.toFixed(3)}`);
+  await p.getByTitle("Kleiner").click();
+  await p.waitForTimeout(1500);
+
+  /* ── hiding it ── */
+  await p.locator("[data-pdf-hide-ink]").click();
+  await p.waitForTimeout(600);
+  check((await inkOnPage(1)) >= 0, "hiding the drawing leaves the document readable");
+  const hiddenOpacity = await p.locator('[data-pdf-ink="1"]').evaluate((c) => getComputedStyle(c).opacity);
+  check(hiddenOpacity === "0", "the ink layer is hidden, not erased", hiddenOpacity);
+  await p.locator("[data-pdf-hide-ink]").click();
+  await p.waitForTimeout(600);
+
+  /* ── it survives ── */
+  await p.reload({ waitUntil: "networkidle" });
+  await p.waitForTimeout(2500);
+  await p.locator("button").filter({ hasText: "PDF Buch" }).first().click();
+  await p.waitForTimeout(1200);
+  await p.locator("[data-note-row]").first().click();
+  await p.waitForTimeout(4500);
+  const afterReload = await inkOnPage(1);
+  check(afterReload > 100, "the stroke survived a reload", `${afterReload} painted pixels`);
+
+  /* ── it must not be undone by the background poller ── */
+  await p.waitForTimeout(9000);
+  check((await inkOnPage(1)) > 100, "and is still there after the sync poller has run");
+
   /* ── it stays readable offline ── */
   // A reload lands on the dashboard, which has no note list; the notebook has
   // to be opened first before a row exists to click.