Avoid to compute the client rect of the viewer
The container position and dimensions should be almost constant, hence it's pretty useless to query them on each rescale. Finally it avoids to trigger some reflows.
This commit is contained in:
parent
0c83bebf03
commit
c550953c6d
@ -2363,7 +2363,6 @@ function webViewerResize() {
|
||||
// Work-around issue 15324 by ignoring "resize" events during printing.
|
||||
return;
|
||||
}
|
||||
pdfViewer.updateContainerHeightCss();
|
||||
|
||||
if (!pdfDocument) {
|
||||
return;
|
||||
@ -2646,9 +2645,9 @@ function webViewerWheel(evt) {
|
||||
// left corner is restored. When the mouse wheel is used, the position
|
||||
// under the cursor should be restored instead.
|
||||
const scaleCorrectionFactor = currentScale / previousScale - 1;
|
||||
const rect = pdfViewer.container.getBoundingClientRect();
|
||||
const dx = evt.clientX - rect.left;
|
||||
const dy = evt.clientY - rect.top;
|
||||
const [top, left] = pdfViewer.containerTopLeft;
|
||||
const dx = evt.clientX - left;
|
||||
const dy = evt.clientY - top;
|
||||
pdfViewer.container.scrollLeft += dx * scaleCorrectionFactor;
|
||||
pdfViewer.container.scrollTop += dy * scaleCorrectionFactor;
|
||||
}
|
||||
|
@ -227,10 +227,14 @@ class PDFViewer {
|
||||
|
||||
#annotationMode = AnnotationMode.ENABLE_FORMS;
|
||||
|
||||
#containerTopLeft = null;
|
||||
|
||||
#enablePermissions = false;
|
||||
|
||||
#previousContainerHeight = 0;
|
||||
|
||||
#resizeObserver = new ResizeObserver(this.#resizeObserverCallback.bind(this));
|
||||
|
||||
#scrollModePageState = null;
|
||||
|
||||
#onVisibilityChange = null;
|
||||
@ -247,6 +251,8 @@ class PDFViewer {
|
||||
);
|
||||
}
|
||||
this.container = options.container;
|
||||
this.#resizeObserver.observe(this.container);
|
||||
|
||||
this.viewer = options.viewer || options.container.firstElementChild;
|
||||
|
||||
if (
|
||||
@ -330,7 +336,8 @@ class PDFViewer {
|
||||
if (this.removePageBorders) {
|
||||
this.viewer.classList.add("removePageBorders");
|
||||
}
|
||||
this.updateContainerHeightCss();
|
||||
|
||||
this.#updateContainerHeightCss();
|
||||
}
|
||||
|
||||
get pagesCount() {
|
||||
@ -1137,7 +1144,6 @@ class PDFViewer {
|
||||
if (this.defaultRenderingQueue) {
|
||||
this.update();
|
||||
}
|
||||
this.updateContainerHeightCss();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -2186,16 +2192,32 @@ class PDFViewer {
|
||||
this.currentScaleValue = newScale;
|
||||
}
|
||||
|
||||
updateContainerHeightCss() {
|
||||
const height = this.container.clientHeight;
|
||||
|
||||
#updateContainerHeightCss(height = this.container.clientHeight) {
|
||||
if (height !== this.#previousContainerHeight) {
|
||||
this.#previousContainerHeight = height;
|
||||
|
||||
docStyle.setProperty("--viewer-container-height", `${height}px`);
|
||||
}
|
||||
}
|
||||
|
||||
#resizeObserverCallback(entries) {
|
||||
for (const entry of entries) {
|
||||
if (entry.target === this.container) {
|
||||
this.#updateContainerHeightCss(
|
||||
Math.floor(entry.borderBoxSize[0].blockSize)
|
||||
);
|
||||
this.#containerTopLeft = null;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get containerTopLeft() {
|
||||
return (this.#containerTopLeft ||= [
|
||||
this.container.offsetTop,
|
||||
this.container.offsetLeft,
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
|
Loading…
x
Reference in New Issue
Block a user