Skip to content

Commit

Permalink
[Editor] Disallow to have multiple pointers while dragging an editor
Browse files Browse the repository at this point in the history
It'll let the user dragging with two fingers.
  • Loading branch information
calixteman committed Nov 26, 2024
1 parent 079eb24 commit 7dd764e
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 25 deletions.
65 changes: 44 additions & 21 deletions src/display/editor/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ class AnnotationEditor {

#disabled = false;

#dragPointerId = null;

#keepAspectRatio = false;

#resizersDiv = null;
Expand Down Expand Up @@ -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);
Expand Down
33 changes: 33 additions & 0 deletions test/integration/stamp_editor_spec.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
});
});
});
4 changes: 0 additions & 4 deletions web/annotation_editor_layer_builder.css
Original file line number Diff line number Diff line change
Expand Up @@ -170,10 +170,6 @@
cursor: move;
}

&.moving {
touch-action: none;
}

&.selectedEditor {
border: var(--focus-outline);
outline: var(--focus-outline-around);
Expand Down

0 comments on commit 7dd764e

Please sign in to comment.