From c08b5b2a94e1b6e4ffdc3336808c70aecfacfe5d Mon Sep 17 00:00:00 2001 From: Calixte Denizet Date: Thu, 21 Nov 2024 23:25:15 +0100 Subject: [PATCH] [Editor] Avoid to use event.movementX/Y when resizing an editor Those propertie can have some non-expected values so use screenX/Y instead. --- src/display/editor/editor.js | 37 ++++++++++++++++++++++++++++++------ 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/src/display/editor/editor.js b/src/display/editor/editor.js index 6320d7a59..038e3f386 100644 --- a/src/display/editor/editor.js +++ b/src/display/editor/editor.js @@ -52,6 +52,8 @@ class AnnotationEditor { #resizersDiv = null; + #lastPointerCoords = null; + #savedDimensions = null; #focusAC = null; @@ -736,6 +738,7 @@ class AnnotationEditor { const savedDraggable = this._isDraggable; this._isDraggable = false; + this.#lastPointerCoords = [event.screenX, event.screenY]; const ac = new AbortController(); const signal = this._uiManager.combinedSignal(ac); @@ -746,6 +749,14 @@ class AnnotationEditor { this.#resizerPointermove.bind(this, name), { passive: true, capture: true, signal } ); + window.addEventListener( + "touchmove", + e => { + // Prevent the page from scrolling. + e.preventDefault(); + }, + { passive: false, signal } + ); window.addEventListener("contextmenu", noContextMenu, { signal }); const savedX = this.x; const savedY = this.y; @@ -886,10 +897,23 @@ class AnnotationEditor { let ratioX = 1; let ratioY = 1; - let [deltaX, deltaY] = this.screenToPageTranslation( - event.movementX, - event.movementY - ); + let deltaX, deltaY; + + if (!event.fromKeyboard) { + // We can't use event.movementX/Y because they're not reliable: + // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX + // (it was buggy on a laptop with a touch screen). + const { screenX, screenY } = event; + const [lastScreenX, lastScreenY] = this.#lastPointerCoords; + [deltaX, deltaY] = this.screenToPageTranslation( + screenX - lastScreenX, + screenY - lastScreenY + ); + this.#lastPointerCoords[0] = screenX; + this.#lastPointerCoords[1] = screenY; + } else { + ({ deltaX, deltaY } = event); + } [deltaX, deltaY] = invTransf(deltaX / parentWidth, deltaY / parentHeight); if (isDiagonal) { @@ -1559,8 +1583,9 @@ class AnnotationEditor { return; } this.#resizerPointermove(this.#focusedResizerName, { - movementX: x, - movementY: y, + deltaX: x, + deltaY: y, + fromKeyboard: true, }); }