From 7dd764e11dc7f94b21817cf7ee44c7147d396a8d Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Tue, 26 Nov 2024 15:59:10 +0100
Subject: [PATCH] [Editor] Disallow to have multiple pointers while dragging an
 editor

It'll let the user dragging with two fingers.
---
 src/display/editor/editor.js            | 65 +++++++++++++++++--------
 test/integration/stamp_editor_spec.mjs  | 33 +++++++++++++
 web/annotation_editor_layer_builder.css |  4 --
 3 files changed, 77 insertions(+), 25 deletions(-)

diff --git a/src/display/editor/editor.js b/src/display/editor/editor.js
index 2ace781179e4e..a27c49745c264 100644
--- a/src/display/editor/editor.js
+++ b/src/display/editor/editor.js
@@ -48,6 +48,8 @@ class AnnotationEditor {
 
   #disabled = false;
 
+  #dragPointerId = null;
+
   #keepAspectRatio = false;
 
   #resizersDiv = null;
@@ -1140,40 +1142,61 @@ class AnnotationEditor {
     const signal = this._uiManager.combinedSignal(ac);
 
     if (isSelected) {
-      this.div.classList.add("moving");
       this.#prevDragX = event.clientX;
       this.#prevDragY = event.clientY;
-      const pointerMoveCallback = e => {
-        const { clientX: x, clientY: y } = e;
-        const [tx, ty] = this.screenToPageTranslation(
-          x - this.#prevDragX,
-          y - this.#prevDragY
-        );
-        this.#prevDragX = x;
-        this.#prevDragY = y;
-        this._uiManager.dragSelectedEditors(tx, ty);
-      };
-      window.addEventListener("pointermove", pointerMoveCallback, {
-        passive: true,
-        capture: true,
-        signal,
-      });
+      this.#dragPointerId = event.pointerId;
+      window.addEventListener(
+        "pointermove",
+        e => {
+          const { clientX: x, clientY: y, pointerId } = e;
+          if (pointerId !== this.#dragPointerId) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+          }
+          const [tx, ty] = this.screenToPageTranslation(
+            x - this.#prevDragX,
+            y - this.#prevDragY
+          );
+          this.#prevDragX = x;
+          this.#prevDragY = y;
+          this._uiManager.dragSelectedEditors(tx, ty);
+        },
+        {
+          passive: false,
+          capture: true,
+          signal,
+        }
+      );
       window.addEventListener(
         "touchmove",
         e => {
           // Prevent the page from scrolling.
           e.preventDefault();
+          e.stopPropagation();
+        },
+        { capture: true, passive: false, signal }
+      );
+      window.addEventListener(
+        "pointerdown",
+        e => {
+          // If the user drags with one finger and then clicks with another.
+          e.preventDefault();
+          e.stopPropagation();
         },
-        { passive: false, signal }
+        { capture: true, passive: false, signal }
       );
     }
 
-    const pointerUpCallback = () => {
-      ac.abort();
-      if (isSelected) {
-        this.div.classList.remove("moving");
+    const pointerUpCallback = e => {
+      if (this.#dragPointerId && this.#dragPointerId !== e.pointerId) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
       }
+      ac.abort();
 
+      this.#dragPointerId = null;
       this.#hasBeenClicked = false;
       if (!this._uiManager.endDragSession()) {
         this.#selectOnPointerEvent(event);
diff --git a/test/integration/stamp_editor_spec.mjs b/test/integration/stamp_editor_spec.mjs
index 224e6cf2ab5a5..dd059f1712f96 100644
--- a/test/integration/stamp_editor_spec.mjs
+++ b/test/integration/stamp_editor_spec.mjs
@@ -1492,4 +1492,37 @@ 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 [, page] of pages) {
+        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);
+      }
+    });
+  });
 });
diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
index 9592b9a744f24..21671995bddae 100644
--- a/web/annotation_editor_layer_builder.css
+++ b/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);