diff --git a/src/display/editor/editor.js b/src/display/editor/editor.js index c6a1a2460..cd5f11453 100644 --- 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 index 83740623b..a7df4892a 100644 --- 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);