Improve cross-page PDF selection

static/reader.css

@@ -907,6 +907,8 @@ body {
   width: 100%;
   max-width: 100%;
   height: auto;
+  user-select: none;
+  -webkit-user-select: none;
 }
 .reader-content[data-mode="pdf-pages"] .reader-page {
   content-visibility: auto;
@@ -917,6 +919,8 @@ body {
   position: relative;
   width: 100%;
   height: auto;
+  user-select: none;
+  -webkit-user-select: none;
   opacity: 0;
   transition: opacity 120ms ease;
 }

static/reader.js

@@ -2180,8 +2180,35 @@ for (const type of ["wheel", "touchstart", "pointerdown"])
   viewport.addEventListener(type, notePdfScrollIntent, { passive: true });
 let pdfSelectionPointer = null;
 viewport.addEventListener("pointerdown", (event) => {
-  pdfSelectionPointer = event.target.closest?.(".reader-page")
-    ? { id: event.pointerId, x: event.clientX, y: event.clientY } : null;
+  const run = event.target.closest?.(".reader-pdf-text-run");
+  const selection = document.getSelection();
+  const selectedRun = !selection?.isCollapsed && event.target.closest?.(".reader-page")
+    ? selection.anchorNode?.parentElement?.closest(".reader-pdf-text-run") : null;
+  const origin = run || selectedRun;
+  pdfSelectionPointer = origin
+    ? { id: event.pointerId, x: event.clientX, y: event.clientY, frame: 0,
+        page: origin.closest(".reader-page"), anchorNode: run ? null : selection.anchorNode,
+        anchorOffset: run ? 0 : selection.anchorOffset } : null;
+}, { passive: true });
+document.addEventListener("pointermove", (event) => {
+  const start = pdfSelectionPointer;
+  if (!start || start.id !== event.pointerId ||
+      Math.hypot(event.clientX - start.x, event.clientY - start.y) < 6) return;
+  const selection = document.getSelection();
+  if (!start.anchorNode && selection?.rangeCount && start.page.contains(selection.anchorNode) &&
+      selection.anchorNode.parentElement?.closest(".reader-pdf-text-run")) {
+    start.anchorNode = selection.anchorNode;
+    start.anchorOffset = selection.anchorOffset;
+  }
+  if (start.anchorNode) {
+    start.endX = event.clientX;
+    start.endY = event.clientY;
+    if (!start.frame) start.frame = requestAnimationFrame(() => {
+      start.frame = 0;
+      if (pdfSelectionPointer === start)
+        correctPdfCrossPageSelection(start.endX, start.endY, start);
+    });
+  }
 }, { passive: true });
 document.addEventListener("pointerup", (event) => {
   const start = pdfSelectionPointer;
@@ -2189,7 +2216,7 @@ document.addEventListener("pointerup", (event) => {
   if (!["pdf", "pdf-pages"].includes(capability.mode) || !start || start.id !== event.pointerId ||
       Math.hypot(event.clientX - start.x, event.clientY - start.y) < 6) return;
   const x = event.clientX, y = event.clientY;
-  requestAnimationFrame(() => correctPdfCrossPageSelection(x, y));
+  requestAnimationFrame(() => correctPdfCrossPageSelection(x, y, start));
 }, { passive: true });
 document.addEventListener("pointercancel", () => { pdfSelectionPointer = null; }, { passive: true });
 window.addEventListener("pagehide", (event) => {
@@ -2723,11 +2750,22 @@ function pdfSelectionIntersects(element) {
   if (element.contains(selection.anchorNode) || element.contains(selection.focusNode)) return true;
   return !selection.isCollapsed && selection.getRangeAt(0).intersectsNode(element);
 }
-function correctPdfCrossPageSelection(x, y) {
+function correctPdfCrossPageSelection(x, y, start = null) {
   const selection = document.getSelection();
-  if (!selection?.rangeCount || selection.isCollapsed) return;
-  const origin = selection.anchorNode?.parentElement?.closest(".reader-page");
-  const target = document.elementFromPoint(x, y)?.closest(".reader-page");
+  if (!selection?.rangeCount) return;
+  const anchorNode = start?.anchorNode || selection.anchorNode;
+  const anchorOffset = start?.anchorNode ? start.anchorOffset : selection.anchorOffset;
+  if (!start?.anchorNode && selection.isCollapsed) return;
+  const origin = anchorNode?.parentElement?.closest(".reader-page");
+  let target = document.elementFromPoint(x, y)?.closest(".reader-page");
+  if (!target) {
+    let distance = Infinity;
+    for (const shell of content.querySelectorAll(".reader-page")) {
+      const rect = shell.getBoundingClientRect();
+      const gap = Math.max(rect.top - y, y - rect.bottom, 0);
+      if (gap < distance) { distance = gap; target = shell; }
+    }
+  }
   if (!origin || !target || origin === target || !content.contains(origin) || !content.contains(target)) return;
   const runs = [...target.querySelectorAll(".reader-pdf-text-run")].filter((run) => run.firstChild?.nodeType === Node.TEXT_NODE);
   if (!runs.length) return;
@@ -2757,7 +2795,7 @@ function correctPdfCrossPageSelection(x, y) {
     }
     offset = low;
   }
-  selection.setBaseAndExtent(selection.anchorNode, selection.anchorOffset, node, offset);
+  selection.setBaseAndExtent(anchorNode, anchorOffset, node, offset);
 }
 function createPdfShellWindow(total, firstShell, createShell, unobserve, defaultRatio) {
   if (total <= 256) return null;

tests/test_reader_refactor.py

@@ -254,6 +254,13 @@ class ReaderRefactorTest(unittest.TestCase):
             text: document.elementFromPoint(text.left + text.width / 2, text.top + text.height / 2) === run };
         }""")
         self.assertEqual(hit, {"image": True, "text": True})
+        self.page.evaluate("""() => {
+          window.__pdfImageMenu = false;
+          document.querySelector('.reader-page[data-page="2"] img').addEventListener('contextmenu',
+            () => { window.__pdfImageMenu = true; });
+        }""")
+        self.page.locator('.reader-page[data-page="2"] img').click(button="right", position={"x": 10, "y": 10})
+        self.assertTrue(self.page.evaluate("window.__pdfImageMenu"))
         gap = self.page.evaluate("""() => {
           const runs = document.querySelectorAll('.reader-page[data-page="2"] .reader-pdf-text-run');
           const first = runs[0].getBoundingClientRect(), second = runs[1].getBoundingClientRect();
@@ -262,6 +269,16 @@ class ReaderRefactorTest(unittest.TestCase):
         self.page.mouse.move(points[0]["x"], points[0]["y"])
         self.page.mouse.down()
         self.page.mouse.move(gap["x"], gap["y"], steps=24)
+        during = self.page.evaluate("""() => ({
+          imageSelect: getComputedStyle(document.querySelector('.reader-page[data-page="1"] img')).userSelect,
+          anchor: getSelection().anchorNode?.parentElement?.closest('.reader-page')?.dataset.page,
+          focus: getSelection().focusNode?.parentElement?.closest('.reader-page')?.dataset.page,
+          text: getSelection().toString()
+        })""")
+        self.assertEqual(during["imageSelect"], "none")
+        self.assertEqual(during["anchor"], "1")
+        self.assertEqual(during["focus"], "2")
+        self.assertNotIn("Page 2 end", during["text"])
         self.page.mouse.up()
         self.page.wait_for_function("() => !getSelection().toString().includes('Page 2 end')")
         selection = self.page.evaluate("getSelection().toString()")
@@ -269,6 +286,27 @@ class ReaderRefactorTest(unittest.TestCase):
         self.assertIn("Page 2 text", selection)
         self.assertNotIn("Page 1 text", selection)
         self.assertNotIn("Page 2 end", selection)
+        self.page.set_viewport_size({"width": 390, "height": 1500})
+        self.page.evaluate("() => { getSelection().removeAllRanges(); document.querySelector('#viewport').scrollTop = 0; }")
+        bottom = self.page.evaluate("""() => {
+          const start = document.querySelectorAll('.reader-page[data-page="1"] .reader-pdf-text-run')[2].getBoundingClientRect();
+          const end = document.querySelector('.reader-page[data-page="2"]').getBoundingClientRect();
+          return { x: start.left + 2, y: start.top + start.height / 2,
+            endX: end.left + end.width / 2, endY: end.bottom + 8 };
+        }""")
+        self.page.mouse.move(bottom["x"], bottom["y"])
+        self.page.mouse.down()
+        self.page.mouse.move(bottom["endX"], bottom["endY"], steps=36)
+        self.page.wait_for_function("() => getSelection().focusNode?.parentElement?.closest('.reader-page')?.dataset.page === '2'")
+        moving = self.page.evaluate("""() => ({
+          anchor: getSelection().anchorNode.parentElement.closest('.reader-page').dataset.page,
+          text: getSelection().toString()
+        })""")
+        self.assertEqual(moving["anchor"], "1")
+        self.assertIn("Page 1 end", moving["text"])
+        self.assertIn("Page 2 end", moving["text"])
+        self.assertNotIn("Page 1 text", moving["text"])
+        self.page.mouse.up()
         self.assertEqual(requested, [ocr_path, text_root + "/ocr/page-000001.json.gz",
                                      text_root + "/ocr/page-000002.json.gz"])