Merge pull request #16616 from Snuffleupagus/PDFCursorTools-tweaks

A couple of small tweaks of the `PDFCursorTools` class

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);
     }

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 };