Skip to content

Commit

Permalink
fix bug when click happens on touch device
Browse files Browse the repository at this point in the history
  • Loading branch information
emilefokkema committed Oct 5, 2024
1 parent 1773bc4 commit 3e67ada
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,9 @@ export class HandledOrFilteredEventCollection extends BaseEventCollection<keyof
private transformUsingPointer(mouseEv: MouseEvent, pointerEv: PointerEvent): void{
this.rectangleManager.measure();
const anchor: PointerAnchor = this.anchorSet.getAnchorForPointerEvent(pointerEv);
if(!anchor){
return;
}
if(pointerEv.button === 1 && this.config.rotationEnabled){
mouseEv.preventDefault();
this.transformer.addRotationAnchor(anchor.anchor)
Expand Down
50 changes: 50 additions & 0 deletions test-e2e/touch-click-bug.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { describe, it, beforeAll, afterAll, expect } from 'vitest'
import type { Page } from 'puppeteer'
import {
getPage,
getResultAfter,
getTouchCollection,
type InPageEventListener,
type EventListenerAdder,
type TouchCollection,
ensureNoError
} from './utils'

describe('when a click happens in a touch way', () => {
let page: Page;
let cleanup: () => Promise<void>;
let addEventListenerInPage: EventListenerAdder;
let touchCollection: TouchCollection;
let clicked: InPageEventListener<MouseEvent>

beforeAll(async () => {
({page, cleanup, addEventListenerInPage} = await getPage());
const infCanvas = await page.evaluateHandle(() => window.TestPageLib.initializeInfiniteCanvas({
styleWidth: '400px',
styleHeight: '400px',
canvasWidth: 400,
canvasHeight: 400,
spaceBelowCanvas: 2000,
drawing: (ctx: any) => {
ctx.fillRect(10, 10, 100, 100)
}
}))
touchCollection = await getTouchCollection(page);
clicked = await addEventListenerInPage(infCanvas, 'click');
})

it('should send a click event and throw no error', async () => {
const [{offsetX}] = await getResultAfter(async () => {
const touch = await touchCollection.start(200, 200);
touch.end();
}, [
() => clicked.getNext(),
() => ensureNoError(page, 500)
] as const)
expect(offsetX).toEqual(200)
})

afterAll(async () => {
await cleanup();
})
})

0 comments on commit 3e67ada

Please sign in to comment.