mirror of
https://github.com/mozilla/pdf.js.git
synced 2025-04-20 15:18:08 +02:00
Add origin
parameter to updateScale
This parameter allows defining which point should remain fixed while scaling the document. It can be used, for example, to implement "zoom around the cursor" or "zoom around pinch center". The logic was previously implemented in `web/app.js`, but moving it to the viewer scaling utilities themselves makes it easier to implement similar zooming functionalities in other embedders.
This commit is contained in:
parent
161c7045f6
commit
b7933d8750
3 changed files with 105 additions and 33 deletions
|
@ -17,10 +17,90 @@ import {
|
|||
awaitPromise,
|
||||
closePages,
|
||||
createPromise,
|
||||
getSpanRectFromText,
|
||||
loadAndWait,
|
||||
} from "./test_utils.mjs";
|
||||
|
||||
describe("PDF viewer", () => {
|
||||
describe("Zoom origin", () => {
|
||||
let pages;
|
||||
|
||||
beforeAll(async () => {
|
||||
pages = await loadAndWait(
|
||||
"tracemonkey.pdf",
|
||||
".textLayer .endOfContent",
|
||||
"page-width",
|
||||
null,
|
||||
{ page: 2 }
|
||||
);
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
await closePages(pages);
|
||||
});
|
||||
|
||||
async function getTextAt(page, pageNumber, coordX, coordY) {
|
||||
await page.waitForFunction(
|
||||
pageNum =>
|
||||
!document.querySelector(
|
||||
`.page[data-page-number="${pageNum}"] > .textLayer`
|
||||
).hidden,
|
||||
{},
|
||||
pageNumber
|
||||
);
|
||||
return page.evaluate(
|
||||
(x, y) => document.elementFromPoint(x, y)?.textContent,
|
||||
coordX,
|
||||
coordY
|
||||
);
|
||||
}
|
||||
|
||||
it("supports specifiying a custom origin", async () => {
|
||||
await Promise.all(
|
||||
pages.map(async ([browserName, page]) => {
|
||||
// We use this text span of page 2 because:
|
||||
// - it's in the visible area even when zooming at page-width
|
||||
// - it's small, so it easily catches if the page moves too much
|
||||
// - it's in a "random" position: not near the center of the
|
||||
// viewport, and not near the borders
|
||||
const text = "guards";
|
||||
|
||||
const rect = await getSpanRectFromText(page, 2, text);
|
||||
const originX = rect.x + rect.width / 2;
|
||||
const originY = rect.y + rect.height / 2;
|
||||
|
||||
await page.evaluate(
|
||||
origin => {
|
||||
window.PDFViewerApplication.pdfViewer.increaseScale({
|
||||
scaleFactor: 2,
|
||||
origin,
|
||||
});
|
||||
},
|
||||
[originX, originY]
|
||||
);
|
||||
const textAfterZoomIn = await getTextAt(page, 2, originX, originY);
|
||||
expect(textAfterZoomIn)
|
||||
.withContext(`In ${browserName}, zoom in`)
|
||||
.toBe(text);
|
||||
|
||||
await page.evaluate(
|
||||
origin => {
|
||||
window.PDFViewerApplication.pdfViewer.decreaseScale({
|
||||
scaleFactor: 0.8,
|
||||
origin,
|
||||
});
|
||||
},
|
||||
[originX, originY]
|
||||
);
|
||||
const textAfterZoomOut = await getTextAt(page, 2, originX, originY);
|
||||
expect(textAfterZoomOut)
|
||||
.withContext(`In ${browserName}, zoom out`)
|
||||
.toBe(text);
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Zoom with the mouse wheel", () => {
|
||||
let pages;
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue