Skip to content

Commit 1e493de

Browse files
BrianHungBrianHung
authored
Use pointer events instead of mouse + touch (#960)
* use pointer events instead of mouse + touch * fix tests to use pointer instead of mouse or touch
1 parent 7bb478c commit 1e493de

File tree

7 files changed

+154
-165
lines changed

7 files changed

+154
-165
lines changed

‎packages/core/src/internal/click-outside-container/click-outside-container.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,13 @@ export default class ClickOutsideContainer extends React.PureComponent<Props> {
1212

1313
public componentDidMount() {
1414
const eventTarget = this.props.customEventTarget ?? document;
15-
eventTarget.addEventListener("touchend", this.clickOutside, true);
16-
eventTarget.addEventListener("mousedown", this.clickOutside, true);
15+
eventTarget.addEventListener("pointerdown", this.clickOutside, true);
1716
eventTarget.addEventListener("contextmenu", this.clickOutside, true);
1817
}
1918

2019
public componentWillUnmount() {
2120
const eventTarget = this.props.customEventTarget ?? document;
22-
eventTarget.removeEventListener("touchend", this.clickOutside, true);
23-
eventTarget.removeEventListener("mousedown", this.clickOutside, true);
21+
eventTarget.removeEventListener("pointerdown", this.clickOutside, true);
2422
eventTarget.removeEventListener("contextmenu", this.clickOutside, true);
2523
}
2624

‎packages/core/src/internal/data-grid/data-grid.tsx

Lines changed: 20 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -507,7 +507,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
507507
);
508508

509509
const getMouseArgsForPosition = React.useCallback(
510-
(canvas: HTMLCanvasElement, posX: number, posY: number, ev?: MouseEvent | TouchEvent): GridMouseEventArgs => {
510+
(canvas: HTMLCanvasElement, posX: number, posY: number, ev?: MouseEvent | TouchEvent | PointerEvent): GridMouseEventArgs => {
511511
const rect = canvas.getBoundingClientRect();
512512
const scale = rect.width / width;
513513
const x = (posX - rect.left) / scale;
@@ -518,7 +518,11 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
518518

519519
let button = 0;
520520
let buttons = 0;
521-
if (ev instanceof MouseEvent) {
521+
522+
const isMouse = ev instanceof MouseEvent || (ev instanceof PointerEvent && ev.pointerType === 'mouse')
523+
const isTouch = ev instanceof TouchEvent || (ev instanceof PointerEvent && ev.pointerType === 'touch')
524+
525+
if (isMouse) {
522526
button = ev.button;
523527
buttons = ev.buttons;
524528
}
@@ -544,7 +548,6 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
544548
const shiftKey = ev?.shiftKey === true;
545549
const ctrlKey = ev?.ctrlKey === true;
546550
const metaKey = ev?.metaKey === true;
547-
const isTouch = (ev !== undefined && !(ev instanceof MouseEvent)) || (ev as any)?.pointerType === "touch";
548551

549552
const scrollEdge: GridMouseEventArgs["scrollEdge"] = [
550553
x < 0 ? -1 : width < x ? 1 : 0,
@@ -1036,22 +1039,16 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
10361039
const downTime = React.useRef(0);
10371040
const downPosition = React.useRef<Item>();
10381041
const mouseDown = React.useRef(false);
1039-
const onMouseDownImpl = React.useCallback(
1040-
(ev: MouseEvent | TouchEvent) => {
1042+
const onPointerDown = React.useCallback(
1043+
(ev: PointerEvent) => {
10411044
const canvas = ref.current;
10421045
const eventTarget = eventTargetRef?.current;
10431046
if (canvas === null || (ev.target !== canvas && ev.target !== eventTarget)) return;
10441047
mouseDown.current = true;
10451048

1046-
let clientX: number;
1047-
let clientY: number;
1048-
if (ev instanceof MouseEvent) {
1049-
clientX = ev.clientX;
1050-
clientY = ev.clientY;
1051-
} else {
1052-
clientX = ev.touches[0].clientX;
1053-
clientY = ev.touches[0].clientY;
1054-
}
1049+
const clientX = ev.clientX;
1050+
const clientY = ev.clientY;
1051+
10551052
if (ev.target === eventTarget && eventTarget !== null) {
10561053
const bounds = eventTarget.getBoundingClientRect();
10571054
if (clientX > bounds.right || clientY > bounds.bottom) return;
@@ -1100,13 +1097,12 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
11001097
onMouseDown,
11011098
]
11021099
);
1103-
useEventListener("touchstart", onMouseDownImpl, windowEventTarget, false);
1104-
useEventListener("mousedown", onMouseDownImpl, windowEventTarget, false);
1100+
useEventListener("pointerdown", onPointerDown, windowEventTarget, false);
11051101

11061102
const lastUpTime = React.useRef(0);
11071103

1108-
const onMouseUpImpl = React.useCallback(
1109-
(ev: MouseEvent | TouchEvent) => {
1104+
const onPointerUp = React.useCallback(
1105+
(ev: PointerEvent) => {
11101106
const lastUpTimeValue = lastUpTime.current;
11111107
lastUpTime.current = Date.now();
11121108
const canvas = ref.current;
@@ -1115,21 +1111,9 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
11151111
const eventTarget = eventTargetRef?.current;
11161112

11171113
const isOutside = ev.target !== canvas && ev.target !== eventTarget;
1118-
1119-
let clientX: number;
1120-
let clientY: number;
1121-
let canCancel = true;
1122-
if (ev instanceof MouseEvent) {
1123-
clientX = ev.clientX;
1124-
clientY = ev.clientY;
1125-
canCancel = ev.button < 3;
1126-
if ((ev as any).pointerType === "touch") {
1127-
return;
1128-
}
1129-
} else {
1130-
clientX = ev.changedTouches[0].clientX;
1131-
clientY = ev.changedTouches[0].clientY;
1132-
}
1114+
const clientX = ev.clientX;
1115+
const clientY = ev.clientY;
1116+
const canCancel = ev.pointerType === 'mouse' ? ev.button < 3 : true;
11331117

11341118
let args = getMouseArgsForPosition(canvas, clientX, clientY, ev);
11351119

@@ -1177,8 +1161,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
11771161
},
11781162
[onMouseUp, eventTargetRef, getMouseArgsForPosition, isOverHeaderElement, groupHeaderActionForEvent]
11791163
);
1180-
useEventListener("mouseup", onMouseUpImpl, windowEventTarget, false);
1181-
useEventListener("touchend", onMouseUpImpl, windowEventTarget, false);
1164+
useEventListener("pointerup", onPointerUp, windowEventTarget, false);
11821165

11831166
const onClickImpl = React.useCallback(
11841167
(ev: MouseEvent | TouchEvent) => {
@@ -1283,7 +1266,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
12831266
}, [getCellContent, getCellRenderer, hoveredItem]);
12841267

12851268
const hoveredRef = React.useRef<GridMouseEventArgs>();
1286-
const onMouseMoveImpl = React.useCallback(
1269+
const onPointerMove = React.useCallback(
12871270
(ev: MouseEvent) => {
12881271
const canvas = ref.current;
12891272
if (canvas === null) return;
@@ -1366,7 +1349,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
13661349
damageInternal,
13671350
]
13681351
);
1369-
useEventListener("mousemove", onMouseMoveImpl, windowEventTarget, true);
1352+
useEventListener("pointermove", onPointerMove, windowEventTarget, true);
13701353

13711354
const onKeyDownImpl = React.useCallback(
13721355
(event: React.KeyboardEvent<HTMLCanvasElement>) => {

‎packages/core/test/data-editor-input.test.tsx

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
import type { DataEditorRef } from "../src/data-editor/data-editor.js";
1313
import { CompactSelection } from "../src/internal/data-grid/data-grid-types.js";
1414
import { vi, expect, describe, test, beforeEach, afterEach } from "vitest";
15+
import { standardBeforeEach } from "./test-utils.js";
1516

1617
const makeCell = (cell: Item): GridCell => {
1718
const [col, row] = cell;
@@ -223,6 +224,8 @@ describe("data-editor-input", () => {
223224
});
224225

225226
beforeEach(() => {
227+
standardBeforeEach();
228+
226229
Element.prototype.scrollTo = vi.fn() as any;
227230
Element.prototype.scrollBy = vi.fn() as any;
228231
Object.assign(navigator, {
@@ -267,17 +270,17 @@ a new line char ""more quotes"" plus a tab ." https://google.com`)
267270
prep();
268271
const canvas = screen.getByTestId("data-grid-canvas");
269272

270-
fireEvent.mouseDown(canvas, {
273+
fireEvent.pointerDown(canvas, {
271274
clientX: 350,
272275
clientY: 36 + 32 * 2 + 16,
273276
});
274277

275-
fireEvent.mouseMove(canvas, {
278+
fireEvent.pointerMove(canvas, {
276279
clientX: 650,
277280
clientY: 36 + 32 * 12 + 16,
278281
});
279282

280-
fireEvent.mouseUp(canvas, {
283+
fireEvent.pointerUp(canvas, {
281284
clientX: 650,
282285
clientY: 36 + 32 * 12 + 16,
283286
});
@@ -316,19 +319,19 @@ a new line char ""more quotes"" plus a tab ." https://google.com`)
316319
prep();
317320
const canvas = screen.getByTestId("data-grid-canvas");
318321

319-
fireEvent.mouseDown(canvas, {
322+
fireEvent.pointerDown(canvas, {
320323
ctrlKey: true,
321324
clientX: 350,
322325
clientY: 36 + 32 * 2 + 16,
323326
});
324327

325-
fireEvent.mouseMove(canvas, {
328+
fireEvent.pointerMove(canvas, {
326329
ctrlKey: true,
327330
clientX: 650,
328331
clientY: 36 + 32 * 12 + 16,
329332
});
330333

331-
fireEvent.mouseUp(canvas, {
334+
fireEvent.pointerUp(canvas, {
332335
ctrlKey: true,
333336
clientX: 650,
334337
clientY: 36 + 32 * 12 + 16,
@@ -372,19 +375,19 @@ a new line char ""more quotes"" plus a tab ." https://google.com`)
372375
prep();
373376
const canvas = screen.getByTestId("data-grid-canvas");
374377

375-
fireEvent.mouseDown(canvas, {
378+
fireEvent.pointerDown(canvas, {
376379
ctrlKey: true,
377380
clientX: 20,
378381
clientY: 36 + 32 * 3 + 16,
379382
});
380383

381-
fireEvent.mouseMove(canvas, {
384+
fireEvent.pointerMove(canvas, {
382385
ctrlKey: true,
383386
clientX: 20,
384387
clientY: 36 + 32 * 3 + 16,
385388
});
386389

387-
fireEvent.mouseUp(canvas, {
390+
fireEvent.pointerUp(canvas, {
388391
ctrlKey: true,
389392
clientX: 20,
390393
clientY: 36 + 32 * 3 + 16,
@@ -429,19 +432,19 @@ a new line char ""more quotes"" plus a tab ." https://google.com`)
429432
prep();
430433
const canvas = screen.getByTestId("data-grid-canvas");
431434

432-
fireEvent.mouseDown(canvas, {
435+
fireEvent.pointerDown(canvas, {
433436
ctrlKey: true,
434437
clientX: 20,
435438
clientY: 36 + 32 * 3 + 16,
436439
});
437440

438-
fireEvent.mouseMove(canvas, {
441+
fireEvent.pointerMove(canvas, {
439442
ctrlKey: true,
440443
clientX: 20,
441444
clientY: 36 + 32 * 3 + 16,
442445
});
443446

444-
fireEvent.mouseUp(canvas, {
447+
fireEvent.pointerUp(canvas, {
445448
ctrlKey: true,
446449
clientX: 20,
447450
clientY: 36 + 32 * 3 + 16,
@@ -485,19 +488,19 @@ a new line char ""more quotes"" plus a tab ." https://google.com`)
485488
prep();
486489
const canvas = screen.getByTestId("data-grid-canvas");
487490

488-
fireEvent.mouseDown(canvas, {
491+
fireEvent.pointerDown(canvas, {
489492
ctrlKey: true,
490493
clientX: 220,
491494
clientY: 16,
492495
});
493496

494-
fireEvent.mouseMove(canvas, {
497+
fireEvent.pointerMove(canvas, {
495498
ctrlKey: true,
496499
clientX: 220,
497500
clientY: 16,
498501
});
499502

500-
fireEvent.mouseUp(canvas, {
503+
fireEvent.pointerUp(canvas, {
501504
ctrlKey: true,
502505
clientX: 220,
503506
clientY: 16,
@@ -542,19 +545,19 @@ a new line char ""more quotes"" plus a tab ." https://google.com`)
542545
prep();
543546
const canvas = screen.getByTestId("data-grid-canvas");
544547

545-
fireEvent.mouseDown(canvas, {
548+
fireEvent.pointerDown(canvas, {
546549
ctrlKey: true,
547550
clientX: 220,
548551
clientY: 16,
549552
});
550553

551-
fireEvent.mouseMove(canvas, {
554+
fireEvent.pointerMove(canvas, {
552555
ctrlKey: true,
553556
clientX: 220,
554557
clientY: 16,
555558
});
556559

557-
fireEvent.mouseUp(canvas, {
560+
fireEvent.pointerUp(canvas, {
558561
ctrlKey: true,
559562
clientX: 220,
560563
clientY: 16,

0 commit comments

Comments
 (0)