Fix a bug with touch event handling

packages/react-resizable-panels-website/src/components/ResizeHandle.module.css

@@ -11,7 +11,7 @@
   background-color: var(--color-resize-bar-drag);
 }
 
-@media (max-width: 500px) {
+@media (pointer: coarse) {
   .ResizeHandle {
     flex: 0 0 1rem;
   }

packages/react-resizable-panels-website/src/components/VisibleCursor.tsx

@@ -1,5 +1,6 @@
 import { useLayoutEffect } from "react";
 import styles from "./VisibleCursor.module.css";
+import { getResizeEventCoordinates } from "../../../react-resizable-panels/src/utils/events/getResizeEventCoordinates";
 
 export function VisibleCursor() {
   useLayoutEffect(() => {
@@ -13,9 +14,10 @@ export function VisibleCursor() {
       element.setAttribute("data-state", "down");
     };
 
-    const onMouseMove = (event: MouseEvent) => {
-      element.style.left = event.pageX + "px";
-      element.style.top = event.pageY + "px";
+    const onMouseMove = (event: MouseEvent | TouchEvent) => {
+      const { x, y } = getResizeEventCoordinates(event);
+      element.style.left = x + "px";
+      element.style.top = y + "px";
     };
 
     const onMouseUp = () => {
@@ -25,13 +27,21 @@ export function VisibleCursor() {
     document.addEventListener("mousedown", onMouseDown, true);
     document.addEventListener("mousemove", onMouseMove, true);
     document.addEventListener("mouseup", onMouseUp, true);
+    document.addEventListener("touchcancel", onMouseUp, true);
+    document.addEventListener("touchend", onMouseUp, true);
+    document.addEventListener("touchmove", onMouseMove, true);
+    document.addEventListener("touchstart", onMouseDown, true);
 
     return () => {
       document.body.removeChild(element);
 
       document.removeEventListener("mousedown", onMouseDown, true);
       document.removeEventListener("mousemove", onMouseMove, true);
       document.removeEventListener("mouseup", onMouseUp, true);
+      document.removeEventListener("touchcancel", onMouseUp, true);
+      document.removeEventListener("touchend", onMouseUp, true);
+      document.removeEventListener("touchmove", onMouseMove, true);
+      document.removeEventListener("touchstart", onMouseDown, true);
     };
   });
 

packages/react-resizable-panels-website/src/routes/examples/Collapsible.module.css

@@ -15,7 +15,7 @@
   background-color: var(--color-button-background-hover);
 }
 
-@media (max-width: 500px) {
+@media (pointer: coarse) {
   .ResizeHandle,
   .ResizeHandleCollapsed {
     width: 1rem;

packages/react-resizable-panels/src/PanelGroup.ts

@@ -30,7 +30,7 @@ import debounce from "./utils/debounce";
 import { determinePivotIndices } from "./utils/determinePivotIndices";
 import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
 import { isKeyDown, isMouseEvent, isTouchEvent } from "./utils/events";
-import { getResizeEventCursorPosition } from "./utils/getResizeEventCursorPosition";
+import { getResizeEventCursorPosition } from "./utils/events/getResizeEventCursorPosition";
 import { initializeDefaultStorage } from "./utils/initializeDefaultStorage";
 import {
   loadPanelGroupState,

packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts

@@ -1,6 +1,6 @@
 import { Direction, ResizeEvent } from "./types";
 import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
-import { isMouseEvent, isTouchEvent } from "./utils/events";
+import { getResizeEventCoordinates } from "./utils/events/getResizeEventCoordinates";
 
 export type ResizeHandlerAction = "down" | "move" | "up";
 export type ResizeHandlerState = "drag" | "hover" | "inactive";
@@ -67,33 +67,14 @@ export function registerResizeHandle(
   };
 }
 
-function getEventCoordinates(event: ResizeEvent) {
-  if (isMouseEvent(event)) {
-    return {
-      x: event.pageX,
-      y: event.pageY,
-    };
-  } else if (isTouchEvent(event)) {
-    const touch = event.touches[0];
-    if (touch && touch.pageX && touch.pageY) {
-      return {
-        x: touch.pageX,
-        y: touch.pageY,
-      };
-    }
-  }
-
-  return {
-    x: Infinity,
-    y: Infinity,
-  };
-}
-
 function handlePointerDown(event: ResizeEvent) {
+  const { x, y } = getResizeEventCoordinates(event);
+
   isPointerDown = true;
 
   updateResizeHandlerStates("down", event);
 
+  recalculateIntersectingHandles({ x, y });
   updateListeners();
 
   if (intersectingHandles.length > 0) {
@@ -102,7 +83,7 @@ function handlePointerDown(event: ResizeEvent) {
 }
 
 function handlePointerMove(event: ResizeEvent) {
-  const { x, y } = getEventCoordinates(event);
+  const { x, y } = getResizeEventCoordinates(event);
 
   if (isPointerDown) {
     intersectingHandles.forEach((data) => {
@@ -125,7 +106,7 @@ function handlePointerMove(event: ResizeEvent) {
 }
 
 function handlePointerUp(event: ResizeEvent) {
-  const { x, y } = getEventCoordinates(event);
+  const { x, y } = getResizeEventCoordinates(event);
 
   panelConstraintFlags.clear();
   isPointerDown = false;
@@ -232,11 +213,11 @@ function updateListeners() {
 
           if (count > 0) {
             body.addEventListener("contextmenu", handlePointerUp);
+            body.addEventListener("mouseleave", handlePointerMove);
             body.addEventListener("mousemove", handlePointerMove);
             body.addEventListener("touchmove", handlePointerMove, {
               passive: false,
             });
-            body.addEventListener("mouseleave", handlePointerMove);
           }
         });
       }

packages/react-resizable-panels/src/utils/calculateDragOffsetPercentage.ts

@@ -3,7 +3,7 @@ import { Direction } from "../types";
 import { assert } from "./assert";
 import { getPanelGroupElement } from "./dom/getPanelGroupElement";
 import { getResizeHandleElement } from "./dom/getResizeHandleElement";
-import { getResizeEventCursorPosition } from "./getResizeEventCursorPosition";
+import { getResizeEventCursorPosition } from "./events/getResizeEventCursorPosition";
 
 export function calculateDragOffsetPercentage(
   event: ResizeEvent,

packages/react-resizable-panels/src/utils/events/getResizeEventCoordinates.ts

@@ -0,0 +1,24 @@
+import { ResizeEvent } from "../../types";
+import { isMouseEvent, isTouchEvent } from ".";
+
+export function getResizeEventCoordinates(event: ResizeEvent) {
+  if (isMouseEvent(event)) {
+    return {
+      x: event.pageX,
+      y: event.pageY,
+    };
+  } else if (isTouchEvent(event)) {
+    const touch = event.touches[0];
+    if (touch && touch.pageX && touch.pageY) {
+      return {
+        x: touch.pageX,
+        y: touch.pageY,
+      };
+    }
+  }
+
+  return {
+    x: Infinity,
+    y: Infinity,
+  };
+}

packages/react-resizable-panels/src/utils/events/getResizeEventCursorPosition.ts

@@ -0,0 +1,14 @@
+import { ResizeEvent } from "../../PanelGroupContext";
+import { Direction } from "../../types";
+import { getResizeEventCoordinates } from "./getResizeEventCoordinates";
+
+export function getResizeEventCursorPosition(
+  direction: Direction,
+  event: ResizeEvent
+): number {
+  const isHorizontal = direction === "horizontal";
+
+  const { x, y } = getResizeEventCoordinates(event);
+
+  return isHorizontal ? x : y;
+}

packages/react-resizable-panels/src/utils/events.ts → packages/react-resizable-panels/src/utils/events/index.ts

@@ -1,4 +1,4 @@
-import { ResizeEvent } from "../PanelGroupContext";
+import { ResizeEvent } from "../../PanelGroupContext";
 
 export function isKeyDown(event: ResizeEvent): event is KeyboardEvent {
   return event.type === "keydown";