Merge pull request #17519 from calixteman/editor_movable_touchscreen

[Editor] Make editors draggable with touchscreens
mozilla · Jan 16, 2024 · 51413be · 51413be
2 parents 3110865 + b8aab5d
commit 51413be
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/src/display/editor/editor.js b/src/display/editor/editor.js
@@ -68,6 +68,10 @@ class AnnotationEditor {
 
   #moveInDOMTimeout = null;
 
+  #prevDragX = 0;
+
+  #prevDragY = 0;
+
   _initialOptions = Object.create(null);
 
   _uiManager = null;
@@ -1035,9 +1039,18 @@ class AnnotationEditor {
 
     let pointerMoveOptions, pointerMoveCallback;
     if (isSelected) {
+      this.div.classList.add("moving");
       pointerMoveOptions = { passive: true, capture: true };
+      this.#prevDragX = event.clientX;
+      this.#prevDragY = event.clientY;
       pointerMoveCallback = e => {
-        const [tx, ty] = this.screenToPageTranslation(e.movementX, e.movementY);
+        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(
@@ -1051,6 +1064,7 @@ class AnnotationEditor {
       window.removeEventListener("pointerup", pointerUpCallback);
       window.removeEventListener("blur", pointerUpCallback);
       if (isSelected) {
+        this.div.classList.remove("moving");
         window.removeEventListener(
           "pointermove",
           pointerMoveCallback,

diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
@@ -121,6 +121,10 @@
     cursor: move;
   }
 
+  &.moving {
+    touch-action: none;
+  }
+
   &.selectedEditor {
     border: var(--focus-outline);
     outline: var(--focus-outline-around);