Skip to content

Commit 20809be

Browse files
lukasmasuchlukasmasuch
committed
Revert "Use pointer events instead of mouse + touch (#960)"
This reverts commit 1e493de.
1 parent 5795ea7 commit 20809be

File tree

7 files changed

+165
-154
lines changed

7 files changed

+165
-154
lines changed

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

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

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

1920
public componentWillUnmount() {
2021
const eventTarget = this.props.customEventTarget ?? document;
21-
eventTarget.removeEventListener("pointerdown", this.clickOutside, true);
22+
eventTarget.removeEventListener("touchend", this.clickOutside, true);
23+
eventTarget.removeEventListener("mousedown", this.clickOutside, true);
2224
eventTarget.removeEventListener("contextmenu", this.clickOutside, true);
2325
}
2426

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

Lines changed: 37 additions & 20 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 | PointerEvent): GridMouseEventArgs => {
510+
(canvas: HTMLCanvasElement, posX: number, posY: number, ev?: MouseEvent | TouchEvent): GridMouseEventArgs => {
511511
const rect = canvas.getBoundingClientRect();
512512
const scale = rect.width / width;
513513
const x = (posX - rect.left) / scale;
@@ -518,11 +518,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
518518

519519
let button = 0;
520520
let buttons = 0;
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) {
521+
if (ev instanceof MouseEvent) {
526522
button = ev.button;
527523
buttons = ev.buttons;
528524
}
@@ -548,6 +544,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
548544
const shiftKey = ev?.shiftKey === true;
549545
const ctrlKey = ev?.ctrlKey === true;
550546
const metaKey = ev?.metaKey === true;
547+
const isTouch = (ev !== undefined && !(ev instanceof MouseEvent)) || (ev as any)?.pointerType === "touch";
551548

552549
const scrollEdge: GridMouseEventArgs["scrollEdge"] = [
553550
x < 0 ? -1 : width < x ? 1 : 0,
@@ -1040,16 +1037,22 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
10401037
const downTime = React.useRef(0);
10411038
const downPosition = React.useRef<Item>();
10421039
const mouseDown = React.useRef(false);
1043-
const onPointerDown = React.useCallback(
1044-
(ev: PointerEvent) => {
1040+
const onMouseDownImpl = React.useCallback(
1041+
(ev: MouseEvent | TouchEvent) => {
10451042
const canvas = ref.current;
10461043
const eventTarget = eventTargetRef?.current;
10471044
if (canvas === null || (ev.target !== canvas && ev.target !== eventTarget)) return;
10481045
mouseDown.current = true;
10491046

1050-
const clientX = ev.clientX;
1051-
const clientY = ev.clientY;
1052-
1047+
let clientX: number;
1048+
let clientY: number;
1049+
if (ev instanceof MouseEvent) {
1050+
clientX = ev.clientX;
1051+
clientY = ev.clientY;
1052+
} else {
1053+
clientX = ev.touches[0].clientX;
1054+
clientY = ev.touches[0].clientY;
1055+
}
10531056
if (ev.target === eventTarget && eventTarget !== null) {
10541057
const bounds = eventTarget.getBoundingClientRect();
10551058
if (clientX > bounds.right || clientY > bounds.bottom) return;
@@ -1098,12 +1101,13 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
10981101
onMouseDown,
10991102
]
11001103
);
1101-
useEventListener("pointerdown", onPointerDown, windowEventTarget, false);
1104+
useEventListener("touchstart", onMouseDownImpl, windowEventTarget, false);
1105+
useEventListener("mousedown", onMouseDownImpl, windowEventTarget, false);
11021106

11031107
const lastUpTime = React.useRef(0);
11041108

1105-
const onPointerUp = React.useCallback(
1106-
(ev: PointerEvent) => {
1109+
const onMouseUpImpl = React.useCallback(
1110+
(ev: MouseEvent | TouchEvent) => {
11071111
const lastUpTimeValue = lastUpTime.current;
11081112
lastUpTime.current = Date.now();
11091113
const canvas = ref.current;
@@ -1112,9 +1116,21 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
11121116
const eventTarget = eventTargetRef?.current;
11131117

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

11191135
let args = getMouseArgsForPosition(canvas, clientX, clientY, ev);
11201136

@@ -1162,7 +1178,8 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
11621178
},
11631179
[onMouseUp, eventTargetRef, getMouseArgsForPosition, isOverHeaderElement, groupHeaderActionForEvent]
11641180
);
1165-
useEventListener("pointerup", onPointerUp, windowEventTarget, false);
1181+
useEventListener("mouseup", onMouseUpImpl, windowEventTarget, false);
1182+
useEventListener("touchend", onMouseUpImpl, windowEventTarget, false);
11661183

11671184
const onClickImpl = React.useCallback(
11681185
(ev: MouseEvent | TouchEvent) => {
@@ -1267,7 +1284,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
12671284
}, [getCellContent, getCellRenderer, hoveredItem]);
12681285

12691286
const hoveredRef = React.useRef<GridMouseEventArgs>();
1270-
const onPointerMove = React.useCallback(
1287+
const onMouseMoveImpl = React.useCallback(
12711288
(ev: MouseEvent) => {
12721289
const canvas = ref.current;
12731290
if (canvas === null) return;
@@ -1350,7 +1367,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
13501367
damageInternal,
13511368
]
13521369
);
1353-
useEventListener("pointermove", onPointerMove, windowEventTarget, true);
1370+
useEventListener("mousemove", onMouseMoveImpl, windowEventTarget, true);
13541371

13551372
const onKeyDownImpl = React.useCallback(
13561373
(event: React.KeyboardEvent<HTMLCanvasElement>) => {

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

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ 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";
1615

1716
const makeCell = (cell: Item): GridCell => {
1817
const [col, row] = cell;
@@ -224,8 +223,6 @@ describe("data-editor-input", () => {
224223
});
225224

226225
beforeEach(() => {
227-
standardBeforeEach();
228-
229226
Element.prototype.scrollTo = vi.fn() as any;
230227
Element.prototype.scrollBy = vi.fn() as any;
231228
Object.assign(navigator, {
@@ -270,17 +267,17 @@ a new line char ""more quotes"" plus a tab ." https://google.com`)
270267
prep();
271268
const canvas = screen.getByTestId("data-grid-canvas");
272269

273-
fireEvent.pointerDown(canvas, {
270+
fireEvent.mouseDown(canvas, {
274271
clientX: 350,
275272
clientY: 36 + 32 * 2 + 16,
276273
});
277274

278-
fireEvent.pointerMove(canvas, {
275+
fireEvent.mouseMove(canvas, {
279276
clientX: 650,
280277
clientY: 36 + 32 * 12 + 16,
281278
});
282279

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

322-
fireEvent.pointerDown(canvas, {
319+
fireEvent.mouseDown(canvas, {
323320
ctrlKey: true,
324321
clientX: 350,
325322
clientY: 36 + 32 * 2 + 16,
326323
});
327324

328-
fireEvent.pointerMove(canvas, {
325+
fireEvent.mouseMove(canvas, {
329326
ctrlKey: true,
330327
clientX: 650,
331328
clientY: 36 + 32 * 12 + 16,
332329
});
333330

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

378-
fireEvent.pointerDown(canvas, {
375+
fireEvent.mouseDown(canvas, {
379376
ctrlKey: true,
380377
clientX: 20,
381378
clientY: 36 + 32 * 3 + 16,
382379
});
383380

384-
fireEvent.pointerMove(canvas, {
381+
fireEvent.mouseMove(canvas, {
385382
ctrlKey: true,
386383
clientX: 20,
387384
clientY: 36 + 32 * 3 + 16,
388385
});
389386

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

435-
fireEvent.pointerDown(canvas, {
432+
fireEvent.mouseDown(canvas, {
436433
ctrlKey: true,
437434
clientX: 20,
438435
clientY: 36 + 32 * 3 + 16,
439436
});
440437

441-
fireEvent.pointerMove(canvas, {
438+
fireEvent.mouseMove(canvas, {
442439
ctrlKey: true,
443440
clientX: 20,
444441
clientY: 36 + 32 * 3 + 16,
445442
});
446443

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

491-
fireEvent.pointerDown(canvas, {
488+
fireEvent.mouseDown(canvas, {
492489
ctrlKey: true,
493490
clientX: 220,
494491
clientY: 16,
495492
});
496493

497-
fireEvent.pointerMove(canvas, {
494+
fireEvent.mouseMove(canvas, {
498495
ctrlKey: true,
499496
clientX: 220,
500497
clientY: 16,
501498
});
502499

503-
fireEvent.pointerUp(canvas, {
500+
fireEvent.mouseUp(canvas, {
504501
ctrlKey: true,
505502
clientX: 220,
506503
clientY: 16,
@@ -545,19 +542,19 @@ a new line char ""more quotes"" plus a tab ." https://google.com`)
545542
prep();
546543
const canvas = screen.getByTestId("data-grid-canvas");
547544

548-
fireEvent.pointerDown(canvas, {
545+
fireEvent.mouseDown(canvas, {
549546
ctrlKey: true,
550547
clientX: 220,
551548
clientY: 16,
552549
});
553550

554-
fireEvent.pointerMove(canvas, {
551+
fireEvent.mouseMove(canvas, {
555552
ctrlKey: true,
556553
clientX: 220,
557554
clientY: 16,
558555
});
559556

560-
fireEvent.pointerUp(canvas, {
557+
fireEvent.mouseUp(canvas, {
561558
ctrlKey: true,
562559
clientX: 220,
563560
clientY: 16,

0 commit comments

Comments
 (0)