Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Editor] Make editors draggable with touchscreens

Browse Source
This commit is contained in:
Calixte Denizet 2024-01-15 23:20:55 +01:00
parent 7769018316
commit b8aab5d14e
2 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/display/editor/editor.js
View File

@ -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,

4
web/annotation_editor_layer_builder.css
View File

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