Skip to content

Commit

Permalink
Fix left offset when scrolling to search result
Browse files Browse the repository at this point in the history
When computing the left offset of the highlighted text, we cannot use
.offsetLeft because the text might have been scaled through CSS, and it
needs to be taken into account.

Use `.getClientRects()`/`.getBoundingClientRect()` instead, which will
return measurements scaled appropriately.
  • Loading branch information
nicolo-ribaudo committed Dec 16, 2024
1 parent 8985d80 commit 4e2aabc
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 1 deletion.
27 changes: 27 additions & 0 deletions test/integration/find_spec.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -126,4 +126,31 @@ describe("find bar", () => {
);
});
});

describe("issue19207.pdf", () => {
let pages;

beforeAll(async () => {
pages = await loadAndWait("issue19207.pdf", ".textLayer", 200);
});

afterAll(async () => {
await closePages(pages);
});

it("must scroll to the search result text", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
// Search for "40"
await page.click("#viewFindButton");
await page.waitForSelector("#viewFindButton", { hidden: false });
await page.type("#findInput", "40");

const highlight = await page.waitForSelector(".textLayer .highlight");

expect(await highlight.isIntersectingViewport()).toBeTrue();
})
);
});
});
});
1 change: 1 addition & 0 deletions test/pdfs/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -690,3 +690,4 @@
!inks_basic.pdf
!issue19182.pdf
!issue18911.pdf
!issue19207.pdf
Binary file added test/pdfs/issue19207.pdf
Binary file not shown.
9 changes: 8 additions & 1 deletion web/text_highlighter.js
Original file line number Diff line number Diff line change
Expand Up @@ -193,8 +193,15 @@ class TextHighlighter {
span.className = `${className} appended`;
span.append(node);
div.append(span);
return className.includes("selected") ? span.offsetLeft : 0;

if (className.includes("selected")) {
const { left } = span.getClientRects()[0];
const parentLeft = div.getBoundingClientRect().left;
return left - parentLeft;
}
return 0;
}

div.append(node);
return 0;
}
Expand Down

0 comments on commit 4e2aabc

Please sign in to comment.