Merge pull request #19109 from calixteman/click_when_dragging

[Editor] Disallow to have multiple pointers while dragging an editor

src/display/display_utils.js

@@ -411,6 +411,11 @@ function noContextMenu(e) {
   e.preventDefault();
 }
 
+function stopEvent(e) {
+  e.preventDefault();
+  e.stopPropagation();
+}
+
 // Deprecated API function -- display regardless of the `verbosity` setting.
 function deprecated(details) {
   // eslint-disable-next-line no-console
@@ -657,5 +662,6 @@ export {
   RenderingCancelledException,
   setLayerDimensions,
   StatTimer,
+  stopEvent,
   SVG_NS,
 };

src/display/editor/editor.js

@@ -23,9 +23,9 @@ import {
   KeyboardManager,
 } from "./tools.js";
 import { FeatureTest, shadow, unreachable } from "../../shared/util.js";
+import { noContextMenu, stopEvent } from "../display_utils.js";
 import { AltText } from "./alt_text.js";
 import { EditorToolbar } from "./toolbar.js";
-import { noContextMenu } from "../display_utils.js";
 
 /**
  * @typedef {Object} AnnotationEditorParameters
@@ -48,6 +48,10 @@ class AnnotationEditor {
 
   #disabled = false;
 
+  #dragPointerId = null;
+
+  #dragPointerType = "";
+
   #keepAspectRatio = false;
 
   #resizersDiv = null;
@@ -751,10 +755,7 @@ class AnnotationEditor {
     );
     window.addEventListener(
       "touchmove",
-      e => {
+      stopEvent /* Prevent the page from scrolling */,
-        // Prevent the page from scrolling.
-        e.preventDefault();
-      },
       { passive: false, signal }
     );
     window.addEventListener("contextmenu", noContextMenu, { signal });
@@ -1138,46 +1139,67 @@ class AnnotationEditor {
 
     const ac = new AbortController();
     const signal = this._uiManager.combinedSignal(ac);
+    const opts = { capture: true, passive: false, signal };
+    const cancelDrag = e => {
+      ac.abort();
+
+      this.#dragPointerId = null;
+      this.#hasBeenClicked = false;
+      if (!this._uiManager.endDragSession()) {
+        this.#selectOnPointerEvent(e);
+      }
+    };
 
     if (isSelected) {
-      this.div.classList.add("moving");
       this.#prevDragX = event.clientX;
       this.#prevDragY = event.clientY;
-      const pointerMoveCallback = e => {
+      this.#dragPointerId = event.pointerId;
-        const { clientX: x, clientY: y } = e;
+      this.#dragPointerType = event.pointerType;
-        const [tx, ty] = this.screenToPageTranslation(
+      window.addEventListener(
-          x - this.#prevDragX,
+        "pointermove",
-          y - this.#prevDragY
+        e => {
-        );
+          const { clientX: x, clientY: y, pointerId } = e;
-        this.#prevDragX = x;
+          if (pointerId !== this.#dragPointerId) {
-        this.#prevDragY = y;
+            stopEvent(e);
-        this._uiManager.dragSelectedEditors(tx, ty);
+            return;
-      };
+          }
-      window.addEventListener("pointermove", pointerMoveCallback, {
+          const [tx, ty] = this.screenToPageTranslation(
-        passive: true,
+            x - this.#prevDragX,
-        capture: true,
+            y - this.#prevDragY
-        signal,
+          );
-      });
+          this.#prevDragX = x;
+          this.#prevDragY = y;
+          this._uiManager.dragSelectedEditors(tx, ty);
+        },
+        opts
+      );
       window.addEventListener(
         "touchmove",
+        stopEvent /* Prevent the page from scrolling */,
+        opts
+      );
+      window.addEventListener(
+        "pointerdown",
+        // If the user drags with one finger and then clicks with another.
         e => {
-          // Prevent the page from scrolling.
+          if (e.isPrimary && e.pointerType === this.#dragPointerType) {
-          e.preventDefault();
+            // We cannot have two primaries at the same time.
+            // It's possible to be in this state with Firefox and Gnome when
+            // trying to drag with three fingers (see bug 1933716).
+            cancelDrag(e);
+          }
+          stopEvent(e);
         },
-        { passive: false, signal }
+        opts
       );
     }
 
-    const pointerUpCallback = () => {
+    const pointerUpCallback = e => {
-      ac.abort();
+      if (!this.#dragPointerId || this.#dragPointerId === e.pointerId) {
-      if (isSelected) {
+        cancelDrag(e);
-        this.div.classList.remove("moving");
+        return;
-      }
-
-      this.#hasBeenClicked = false;
-      if (!this._uiManager.endDragSession()) {
-        this.#selectOnPointerEvent(event);
       }
+      stopEvent(e);
     };
     window.addEventListener("pointerup", pointerUpCallback, { signal });
     // If the user is using alt+tab during the dragging session, the pointerup

test/integration/stamp_editor_spec.mjs

@@ -1492,4 +1492,42 @@ describe("Stamp Editor", () => {
       );
     });
   });
+
+  describe("Drag a stamp annotation and click on a touchscreen", () => {
+    let pages;
+
+    beforeAll(async () => {
+      pages = await loadAndWait("empty.pdf", ".annotationEditorLayer");
+    });
+
+    afterAll(async () => {
+      await closePages(pages);
+    });
+
+    it("must check that the annotation isn't unselected when an other finger taps on the screen", async () => {
+      // Run sequentially to avoid clipboard issues.
+      for (const [browserName, page] of pages) {
+        if (browserName === "chrome") {
+          // TODO: remove this check when puppeteer supports multiple touch
+          // events (it works in v23.9.1).
+          return;
+        }
+        await switchToStamp(page);
+
+        await copyImage(page, "../images/firefox_logo.png", 0);
+        const editorSelector = getEditorSelector(0);
+        const stampRect = await getRect(page, editorSelector);
+
+        await page.touchscreen.tap(stampRect.x + 10, stampRect.y + 10);
+        await waitForSelectedEditor(page, editorSelector);
+
+        await page.touchscreen.touchStart(stampRect.x + 10, stampRect.y + 10);
+        await page.touchscreen.touchMove(stampRect.x + 20, stampRect.y + 20);
+        await page.touchscreen.tap(stampRect.x - 10, stampRect.y - 10);
+        await page.touchscreen.touchEnd();
+
+        await waitForSelectedEditor(page, editorSelector);
+      }
+    });
+  });
 });

web/annotation_editor_layer_builder.css

@@ -170,10 +170,6 @@
     cursor: move;
   }
 
-  &.moving {
-    touch-action: none;
-  }
-
   &.selectedEditor {
     border: var(--focus-outline);
     outline: var(--focus-outline-around);