diff --git a/web/grab_to_pan.js b/web/grab_to_pan.js index a985afc6b..c564802b2 100644 --- a/web/grab_to_pan.js +++ b/web/grab_to_pan.js @@ -21,18 +21,10 @@ class GrabToPan { /** * Construct a GrabToPan instance for a given HTML element. * @param {Element} options.element - * @param {function} [options.ignoreTarget] - See `ignoreTarget(node)`. - * @param {function(boolean)} [options.onActiveChanged] - Called when - * grab-to-pan is (de)activated. The first argument is a boolean that - * shows whether grab-to-pan is activated. */ - constructor(options) { - this.element = options.element; - this.document = options.element.ownerDocument; - if (typeof options.ignoreTarget === "function") { - this.ignoreTarget = options.ignoreTarget; - } - this.onActiveChanged = options.onActiveChanged; + constructor({ element }) { + this.element = element; + this.document = element.ownerDocument; // Bind the contexts to ensure that `this` always points to // the GrabToPan instance. @@ -57,8 +49,6 @@ class GrabToPan { this.active = true; this.element.addEventListener("mousedown", this._onMouseDown, true); this.element.classList.add(CSS_CLASS_GRAB); - - this.onActiveChanged?.(true); } } @@ -71,8 +61,6 @@ class GrabToPan { this.element.removeEventListener("mousedown", this._onMouseDown, true); this._endPan(); this.element.classList.remove(CSS_CLASS_GRAB); - - this.onActiveChanged?.(false); } } @@ -140,18 +128,12 @@ class GrabToPan { } const xDiff = event.clientX - this.clientXStart; const yDiff = event.clientY - this.clientYStart; - const scrollTop = this.scrollTopStart - yDiff; - const scrollLeft = this.scrollLeftStart - xDiff; - if (this.element.scrollTo) { - this.element.scrollTo({ - top: scrollTop, - left: scrollLeft, - behavior: "instant", - }); - } else { - this.element.scrollTop = scrollTop; - this.element.scrollLeft = scrollLeft; - } + this.element.scrollTo({ + top: this.scrollTopStart - yDiff, + left: this.scrollLeftStart - xDiff, + behavior: "instant", + }); + if (!this.overlay.parentNode) { document.body.append(this.overlay); } diff --git a/web/pdf_cursor_tools.js b/web/pdf_cursor_tools.js index 2d2eb8258..416122b13 100644 --- a/web/pdf_cursor_tools.js +++ b/web/pdf_cursor_tools.js @@ -13,8 +13,8 @@ * limitations under the License. */ +import { AnnotationEditorType, shadow } from "pdfjs-lib"; import { CursorTool, PresentationModeState } from "./ui_utils.js"; -import { AnnotationEditorType } from "pdfjs-lib"; import { GrabToPan } from "./grab_to_pan.js"; /** @@ -27,6 +27,10 @@ import { GrabToPan } from "./grab_to_pan.js"; */ class PDFCursorTools { + #active = CursorTool.SELECT; + + #prevActive = null; + /** * @param {PDFCursorToolsOptions} options */ @@ -34,13 +38,6 @@ class PDFCursorTools { this.container = container; this.eventBus = eventBus; - this.active = CursorTool.SELECT; - this.previouslyActive = null; - - this.handTool = new GrabToPan({ - element: this.container, - }); - this.#addEventListeners(); // Defer the initial `switchTool` call, to give other viewer components @@ -54,7 +51,7 @@ class PDFCursorTools { * @type {number} One of the values in {CursorTool}. */ get activeTool() { - return this.active; + return this.#active; } /** @@ -62,20 +59,20 @@ class PDFCursorTools { * must be one of the values in {CursorTool}. */ switchTool(tool) { - if (this.previouslyActive !== null) { + if (this.#prevActive !== null) { // Cursor tools cannot be used in PresentationMode/AnnotationEditor. return; } - if (tool === this.active) { + if (tool === this.#active) { return; // The requested tool is already active. } const disableActiveTool = () => { - switch (this.active) { + switch (this.#active) { case CursorTool.SELECT: break; case CursorTool.HAND: - this.handTool.deactivate(); + this._handTool.deactivate(); break; case CursorTool.ZOOM: /* falls through */ @@ -89,7 +86,7 @@ class PDFCursorTools { break; case CursorTool.HAND: disableActiveTool(); - this.handTool.activate(); + this._handTool.activate(); break; case CursorTool.ZOOM: /* falls through */ @@ -99,15 +96,11 @@ class PDFCursorTools { } // Update the active tool *after* it has been validated above, // in order to prevent setting it to an invalid state. - this.active = tool; + this.#active = tool; - this.#dispatchEvent(); - } - - #dispatchEvent() { this.eventBus.dispatch("cursortoolchanged", { source: this, - tool: this.active, + tool, }); } @@ -120,26 +113,26 @@ class PDFCursorTools { presentationModeState = PresentationModeState.NORMAL; const disableActive = () => { - const previouslyActive = this.active; + const prevActive = this.#active; this.switchTool(CursorTool.SELECT); - this.previouslyActive ??= previouslyActive; // Keep track of the first one. + this.#prevActive ??= prevActive; // Keep track of the first one. }; const enableActive = () => { - const previouslyActive = this.previouslyActive; + const prevActive = this.#prevActive; if ( - previouslyActive !== null && + prevActive !== null && annotationEditorMode === AnnotationEditorType.NONE && presentationModeState === PresentationModeState.NORMAL ) { - this.previouslyActive = null; - this.switchTool(previouslyActive); + this.#prevActive = null; + this.switchTool(prevActive); } }; this.eventBus._on("secondarytoolbarreset", evt => { - if (this.previouslyActive !== null) { + if (this.#prevActive !== null) { annotationEditorMode = AnnotationEditorType.NONE; presentationModeState = PresentationModeState.NORMAL; @@ -167,6 +160,19 @@ class PDFCursorTools { } }); } + + /** + * @private + */ + get _handTool() { + return shadow( + this, + "_handTool", + new GrabToPan({ + element: this.container, + }) + ); + } } export { PDFCursorTools };