use pointer events instead of mouse + touch

glideapps · Jun 1, 2024 · b25f9ab · b25f9ab
1 parent 5983dca
commit b25f9ab
Showing 1 changed file with 18 additions and 35 deletions.
diff --git a/packages/core/src/internal/data-grid/data-grid.tsx b/packages/core/src/internal/data-grid/data-grid.tsx
@@ -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;
@@ -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;
             }
@@ -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,
@@ -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;
@@ -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;
@@ -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);
 
@@ -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) => {