Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

use pointer events instead of mouse + touch #960

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

use pointer events instead of mouse + touch #960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b25f9ab
use pointer events instead of mouse + touch
BrianHung Jun 1, 2024
ff52ecb
fix tests to use pointer instead of mouse or touch
BrianHung Jun 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions packages/core/src/internal/click-outside-container/click-outside-container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,12 @@ export default class ClickOutsideContainer extends React.PureComponent<Props> {
private wrapperRef = React.createRef<HTMLDivElement>();

public componentDidMount() {
document.addEventListener("touchend", this.clickOutside, true);
document.addEventListener("mousedown", this.clickOutside, true);
document.addEventListener("pointerdown", this.clickOutside, true);
document.addEventListener("contextmenu", this.clickOutside, true);
}

public componentWillUnmount() {
document.removeEventListener("touchend", this.clickOutside, true);
document.removeEventListener("mousedown", this.clickOutside, true);
document.removeEventListener("pointerdown", this.clickOutside, true);
document.removeEventListener("contextmenu", this.clickOutside, true);
}

Expand Down
57 changes: 20 additions & 37 deletions packages/core/src/internal/data-grid/data-grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -501,7 +501,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
);

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

let button = 0;
let buttons = 0;
if (ev instanceof MouseEvent) {

const isMouse = ev instanceof MouseEvent || (ev instanceof PointerEvent && ev.pointerType === 'mouse')
const isTouch = ev instanceof TouchEvent || (ev instanceof PointerEvent && ev.pointerType === 'touch')

if (isMouse) {
button = ev.button;
buttons = ev.buttons;
}
Expand All @@ -538,7 +542,6 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
const shiftKey = ev?.shiftKey === true;
const ctrlKey = ev?.ctrlKey === true;
const metaKey = ev?.metaKey === true;
const isTouch = (ev !== undefined && !(ev instanceof MouseEvent)) || (ev as any)?.pointerType === "touch";

const scrollEdge: GridMouseEventArgs["scrollEdge"] = [
x < 0 ? -1 : width < x ? 1 : 0,
Expand Down Expand Up @@ -1030,22 +1033,16 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
const downTime = React.useRef(0);
const downPosition = React.useRef<Item>();
const mouseDown = React.useRef(false);
const onMouseDownImpl = React.useCallback(
(ev: MouseEvent | TouchEvent) => {
const onPointerDown = React.useCallback(
(ev: PointerEvent) => {
const canvas = ref.current;
const eventTarget = eventTargetRef?.current;
if (canvas === null || (ev.target !== canvas && ev.target !== eventTarget)) return;
mouseDown.current = true;

let clientX: number;
let clientY: number;
if (ev instanceof MouseEvent) {
clientX = ev.clientX;
clientY = ev.clientY;
} else {
clientX = ev.touches[0].clientX;
clientY = ev.touches[0].clientY;
}
const clientX = ev.clientX;
const clientY = ev.clientY;

if (ev.target === eventTarget && eventTarget !== null) {
const bounds = eventTarget.getBoundingClientRect();
if (clientX > bounds.right || clientY > bounds.bottom) return;
Expand Down Expand Up @@ -1094,13 +1091,12 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
onMouseDown,
]
);
useEventListener("touchstart", onMouseDownImpl, windowEventTarget, false);
useEventListener("mousedown", onMouseDownImpl, windowEventTarget, false);
useEventListener("pointerdown", onPointerDown, windowEventTarget, false);

const lastUpTime = React.useRef(0);

const onMouseUpImpl = React.useCallback(
(ev: MouseEvent | TouchEvent) => {
const onPointerUp = React.useCallback(
(ev: PointerEvent) => {
const lastUpTimeValue = lastUpTime.current;
lastUpTime.current = Date.now();
const canvas = ref.current;
Expand All @@ -1109,21 +1105,9 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
const eventTarget = eventTargetRef?.current;

const isOutside = ev.target !== canvas && ev.target !== eventTarget;

let clientX: number;
let clientY: number;
let canCancel = true;
if (ev instanceof MouseEvent) {
clientX = ev.clientX;
clientY = ev.clientY;
canCancel = ev.button < 3;
if ((ev as any).pointerType === "touch") {
return;
}
} else {
clientX = ev.changedTouches[0].clientX;
clientY = ev.changedTouches[0].clientY;
}
const clientX = ev.clientX;
const clientY = ev.clientY;
const canCancel = ev.pointerType === 'mouse' ? ev.button < 3 : true;

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

Expand Down Expand Up @@ -1171,8 +1155,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
},
[onMouseUp, eventTargetRef, getMouseArgsForPosition, isOverHeaderElement, groupHeaderActionForEvent]
);
useEventListener("mouseup", onMouseUpImpl, windowEventTarget, false);
useEventListener("touchend", onMouseUpImpl, windowEventTarget, false);
useEventListener("pointerup", onPointerUp, windowEventTarget, false);

const onClickImpl = React.useCallback(
(ev: MouseEvent | TouchEvent) => {
Expand Down Expand Up @@ -1277,7 +1260,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
}, [getCellContent, getCellRenderer, hoveredItem]);

const hoveredRef = React.useRef<GridMouseEventArgs>();
const onMouseMoveImpl = React.useCallback(
const onPointerMove = React.useCallback(
(ev: MouseEvent) => {
const canvas = ref.current;
if (canvas === null) return;
Expand Down Expand Up @@ -1360,7 +1343,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
damageInternal,
]
);
useEventListener("mousemove", onMouseMoveImpl, windowEventTarget, true);
useEventListener("pointermove", onPointerMove, windowEventTarget, true);

const onKeyDownImpl = React.useCallback(
(event: React.KeyboardEvent<HTMLCanvasElement>) => {
Expand Down
39 changes: 21 additions & 18 deletions packages/core/test/data-editor-input.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
import type { DataEditorRef } from "../src/data-editor/data-editor.js";
import { CompactSelection } from "../src/internal/data-grid/data-grid-types.js";
import { vi, expect, describe, test, beforeEach, afterEach } from "vitest";
import { standardBeforeEach } from "./test-utils.js";

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

beforeEach(() => {
standardBeforeEach();

Element.prototype.scrollTo = vi.fn() as any;
Element.prototype.scrollBy = vi.fn() as any;
Object.assign(navigator, {
Expand Down Expand Up @@ -267,17 +270,17 @@ a new line char ""more quotes"" plus a tab ." https://google.com`)
prep();
const canvas = screen.getByTestId("data-grid-canvas");

fireEvent.mouseDown(canvas, {
fireEvent.pointerDown(canvas, {
clientX: 350,
clientY: 36 + 32 * 2 + 16,
});

fireEvent.mouseMove(canvas, {
fireEvent.pointerMove(canvas, {
clientX: 650,
clientY: 36 + 32 * 12 + 16,
});

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

fireEvent.mouseDown(canvas, {
fireEvent.pointerDown(canvas, {
ctrlKey: true,
clientX: 350,
clientY: 36 + 32 * 2 + 16,
});

fireEvent.mouseMove(canvas, {
fireEvent.pointerMove(canvas, {
ctrlKey: true,
clientX: 650,
clientY: 36 + 32 * 12 + 16,
});

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

fireEvent.mouseDown(canvas, {
fireEvent.pointerDown(canvas, {
ctrlKey: true,
clientX: 20,
clientY: 36 + 32 * 3 + 16,
});

fireEvent.mouseMove(canvas, {
fireEvent.pointerMove(canvas, {
ctrlKey: true,
clientX: 20,
clientY: 36 + 32 * 3 + 16,
});

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

fireEvent.mouseDown(canvas, {
fireEvent.pointerDown(canvas, {
ctrlKey: true,
clientX: 20,
clientY: 36 + 32 * 3 + 16,
});

fireEvent.mouseMove(canvas, {
fireEvent.pointerMove(canvas, {
ctrlKey: true,
clientX: 20,
clientY: 36 + 32 * 3 + 16,
});

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

fireEvent.mouseDown(canvas, {
fireEvent.pointerDown(canvas, {
ctrlKey: true,
clientX: 220,
clientY: 16,
});

fireEvent.mouseMove(canvas, {
fireEvent.pointerMove(canvas, {
ctrlKey: true,
clientX: 220,
clientY: 16,
});

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

fireEvent.mouseDown(canvas, {
fireEvent.pointerDown(canvas, {
ctrlKey: true,
clientX: 220,
clientY: 16,
});

fireEvent.mouseMove(canvas, {
fireEvent.pointerMove(canvas, {
ctrlKey: true,
clientX: 220,
clientY: 16,
});

fireEvent.mouseUp(canvas, {
fireEvent.pointerUp(canvas, {
ctrlKey: true,
clientX: 220,
clientY: 16,
Expand Down
Loading
Loading