Bookhoard/foliate-js
1
0
Fork 0
mirror of https://github.com/john-okeefe/foliate-js.git synced 2026-09-09 11:29:14 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix rect hit-test denominator: use the rendered canvas for PDFs

Browse Source 
documentElement's screen rect is devicePixelRatio× smaller than the
visible page because pdf.js scales <html> by 1/dpr — using it as the
hit-test denominator made click fractions dpr× too large, so clicks
landed in the wrong place relative to stored (correct) fractions on
any dpr != 1 display. The canvas's post-transform rect is exactly the
visible page and shares the textLayer's transform space.
This commit is contained in:
john-okeefe
2026-08-17 08:32:02 -04:00
parent d0654951b5
commit 86e234d006
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fixed-layout.js
+7 -3
View File
@@ -961,6 +961,9 @@ export class FixedLayout extends HTMLElement {
// Click hit-testing for rect annotations (edit popover). Skipped while a // Click hit-testing for rect annotations (edit popover). Skipped while a
// text selection is active so drag-selecting doesn't pop the editor. // text selection is active so drag-selecting doesn't pop the editor.
// Denominator: the rendered canvas for PDFs (its post-transform rect IS
// the visible page; documentElement is dpr× too small because pdf.js
// scales <html> by 1/devicePixelRatio), the img for comics.
doc.addEventListener( doc.addEventListener(
"click", "click",
(event) => { (event) => {
@@ -968,9 +971,10 @@ export class FixedLayout extends HTMLElement {
const sel = doc.getSelection(); const sel = doc.getSelection();
if (sel && !sel.isCollapsed) return; if (sel && !sel.isCollapsed) return;
const denom = const denom =
doc.querySelector("img") || doc.documentElement; doc.querySelector("#canvas canvas") ||
const dr = denom.getBoundingClientRect(); doc.querySelector("img");
if (!dr.width || !dr.height) return; const dr = denom?.getBoundingClientRect();
if (!dr || !dr.width || !dr.height) return;
const fx = (event.clientX - dr.left) / dr.width; const fx = (event.clientX - dr.left) / dr.width;
const fy = (event.clientY - dr.top) / dr.height; const fy = (event.clientY - dr.top) / dr.height;
for (const [key, a] of this.#rectAnnotations) { for (const [key, a] of this.#rectAnnotations) {