diff --git a/web/app.js b/web/app.js index 2f18b6049..d5d61b82b 100644 --- a/web/app.js +++ b/web/app.js @@ -876,6 +876,7 @@ const PDFViewerApplication = { moveCaret(isUp, select) { this._caretBrowsing ||= new CaretBrowsingMode( + this._globalAbortController.signal, this.appConfig.mainContainer, this.appConfig.viewerContainer, this.appConfig.toolbar?.container diff --git a/web/caret_browsing.js b/web/caret_browsing.js index 9fc3275be..fbbc9c959 100644 --- a/web/caret_browsing.js +++ b/web/caret_browsing.js @@ -19,14 +19,32 @@ const PRECISION = 1e-1; class CaretBrowsingMode { #mainContainer; - #toolBarHeight; + #toolBarHeight = 0; #viewerContainer; - constructor(mainContainer, viewerContainer, toolbarContainer) { + constructor(abortSignal, mainContainer, viewerContainer, toolbarContainer) { this.#mainContainer = mainContainer; this.#viewerContainer = viewerContainer; - this.#toolBarHeight = toolbarContainer?.getBoundingClientRect().height ?? 0; + + if (!toolbarContainer) { + return; + } + this.#toolBarHeight = toolbarContainer.getBoundingClientRect().height; + + const toolbarObserver = new ResizeObserver(entries => { + for (const entry of entries) { + if (entry.target === toolbarContainer) { + this.#toolBarHeight = Math.floor(entry.borderBoxSize[0].blockSize); + break; + } + } + }); + toolbarObserver.observe(toolbarContainer); + + abortSignal.addEventListener("abort", () => toolbarObserver.disconnect(), { + once: true, + }); } /**