react-resizable-panels 1.0.10 → 2.0.0

package/src/PanelResizeHandle.ts

@@ -5,9 +5,6 @@ import {
   HTMLAttributes,
   PropsWithChildren,
   ReactElement,
-  MouseEvent as ReactMouseEvent,
-  TouchEvent,
-  useCallback,
   useContext,
   useEffect,
   useRef,
@@ -20,8 +17,13 @@ import {
   ResizeEvent,
   ResizeHandler,
 } from "./PanelGroupContext";
+import {
+  PointerHitAreaMargins,
+  registerResizeHandle,
+  ResizeHandlerAction,
+  ResizeHandlerState,
+} from "./PanelResizeHandleRegistry";
 import { assert } from "./utils/assert";
-import { getCursorStyle } from "./utils/cursor";
 
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 
@@ -32,6 +34,7 @@ export type PanelResizeHandleProps = Omit<
   PropsWithChildren<{
     className?: string;
     disabled?: boolean;
+    hitAreaMargins?: PointerHitAreaMargins;
     id?: string | null;
     onDragging?: PanelResizeHandleOnDragging;
     style?: CSSProperties;
@@ -43,6 +46,7 @@ export function PanelResizeHandle({
   children = null,
   className: classNameFromProps = "",
   disabled = false,
+  hitAreaMargins,
   id: idFromProps,
   onDragging,
   style: styleFromProps = {},
@@ -69,16 +73,16 @@ export function PanelResizeHandle({
 
   const {
     direction,
-    dragState,
     groupId,
-    registerResizeHandle,
+    registerResizeHandle: registerResizeHandleWithParentGroup,
     startDragging,
     stopDragging,
     panelGroupElement,
   } = panelGroupContext;
 
   const resizeHandleId = useUniqueId(idFromProps);
-  const isDragging = dragState?.dragHandleId === resizeHandleId;
+
+  const [state, setState] = useState<ResizeHandlerState>("inactive");
 
   const [isFocused, setIsFocused] = useState(false);
 
@@ -86,67 +90,71 @@ export function PanelResizeHandle({
     null
   );
 
-  const stopDraggingAndBlur = useCallback(() => {
-    // Clicking on the drag handle shouldn't leave it focused;
-    // That would cause the PanelGroup to think it was still active.
-    const element = elementRef.current;
-    assert(element);
-    element.blur();
-
-    stopDragging();
-
-    const { onDragging } = callbacksRef.current;
-    if (onDragging) {
-      onDragging(false);
-    }
-  }, [stopDragging]);
-
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);
     } else {
-      const resizeHandler = registerResizeHandle(resizeHandleId);
+      const resizeHandler = registerResizeHandleWithParentGroup(resizeHandleId);
       setResizeHandler(() => resizeHandler);
     }
-  }, [disabled, resizeHandleId, registerResizeHandle]);
+  }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
 
   useEffect(() => {
-    if (disabled || resizeHandler == null || !isDragging) {
+    if (disabled || resizeHandler == null) {
       return;
     }
 
-    const onMove = (event: ResizeEvent) => {
-      resizeHandler(event);
-    };
-
-    const onMouseLeave = (event: MouseEvent) => {
-      resizeHandler(event);
-    };
-
     const element = elementRef.current;
     assert(element);
 
-    const targetDocument = element.ownerDocument;
-
-    targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
-    targetDocument.body.addEventListener("mousemove", onMove);
-    targetDocument.body.addEventListener("touchmove", onMove);
-    targetDocument.body.addEventListener("mouseleave", onMouseLeave);
-    window.addEventListener("mouseup", stopDraggingAndBlur);
-    window.addEventListener("touchend", stopDraggingAndBlur);
-
-    return () => {
-      targetDocument.body.removeEventListener(
-        "contextmenu",
-        stopDraggingAndBlur
-      );
-      targetDocument.body.removeEventListener("mousemove", onMove);
-      targetDocument.body.removeEventListener("touchmove", onMove);
-      targetDocument.body.removeEventListener("mouseleave", onMouseLeave);
-      window.removeEventListener("mouseup", stopDraggingAndBlur);
-      window.removeEventListener("touchend", stopDraggingAndBlur);
+    const setResizeHandlerState = (
+      action: ResizeHandlerAction,
+      state: ResizeHandlerState,
+      event: ResizeEvent
+    ) => {
+      setState(state);
+
+      switch (action) {
+        case "down": {
+          startDragging(resizeHandleId, event);
+          break;
+        }
+        case "up": {
+          stopDragging();
+          break;
+        }
+      }
+
+      switch (state) {
+        case "drag": {
+          resizeHandler(event);
+          break;
+        }
+      }
     };
-  }, [direction, disabled, isDragging, resizeHandler, stopDraggingAndBlur]);
+
+    return registerResizeHandle(
+      resizeHandleId,
+      element,
+      direction,
+      {
+        // Coarse inputs (e.g. finger/touch)
+        coarse: hitAreaMargins?.coarse ?? 15,
+        // Fine inputs (e.g. mouse)
+        fine: hitAreaMargins?.fine ?? 5,
+      },
+      setResizeHandlerState
+    );
+  }, [
+    direction,
+    disabled,
+    hitAreaMargins,
+    registerResizeHandleWithParentGroup,
+    resizeHandleId,
+    resizeHandler,
+    startDragging,
+    stopDragging,
+  ]);
 
   useWindowSplitterResizeHandlerBehavior({
     disabled,
@@ -156,7 +164,6 @@ export function PanelResizeHandle({
   });
 
   const style: CSSProperties = {
-    cursor: getCursorStyle(direction),
     touchAction: "none",
     userSelect: "none",
   };
@@ -168,29 +175,6 @@ export function PanelResizeHandle({
     className: classNameFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
-    onMouseDown: (event: ReactMouseEvent) => {
-      startDragging(resizeHandleId, event.nativeEvent);
-
-      const callbacks = callbacksRef.current;
-      assert(callbacks);
-      const { onDragging } = callbacks;
-      if (onDragging) {
-        onDragging(true);
-      }
-    },
-    onMouseUp: stopDraggingAndBlur,
-    onTouchCancel: stopDraggingAndBlur,
-    onTouchEnd: stopDraggingAndBlur,
-    onTouchStart: (event: TouchEvent) => {
-      startDragging(resizeHandleId, event.nativeEvent);
-
-      const callbacks = callbacksRef.current;
-      assert(callbacks);
-      const { onDragging } = callbacks;
-      if (onDragging) {
-        onDragging(true);
-      }
-    },
     ref: elementRef,
     role: "separator",
     style: {
@@ -203,11 +187,9 @@ export function PanelResizeHandle({
     "data-panel-group-direction": direction,
     "data-panel-group-id": groupId,
     "data-resize-handle": "",
-    "data-resize-handle-active": isDragging
-      ? "pointer"
-      : isFocused
-      ? "keyboard"
-      : undefined,
+    "data-resize-handle-active":
+      state === "drag" ? "pointer" : isFocused ? "keyboard" : undefined,
+    "data-resize-handle-state": state,
     "data-panel-resize-handle-enabled": !disabled,
     "data-panel-resize-handle-id": resizeHandleId,
   });

package/src/PanelResizeHandleRegistry.ts

@@ -0,0 +1,263 @@
+import { Direction, ResizeEvent } from "./types";
+import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
+import { getResizeEventCoordinates } from "./utils/events/getResizeEventCoordinates";
+import { getInputType } from "./utils/getInputType";
+
+export type ResizeHandlerAction = "down" | "move" | "up";
+export type ResizeHandlerState = "drag" | "hover" | "inactive";
+export type SetResizeHandlerState = (
+  action: ResizeHandlerAction,
+  state: ResizeHandlerState,
+  event: ResizeEvent
+) => void;
+
+export type PointerHitAreaMargins = {
+  coarse: number;
+  fine: number;
+};
+
+export type ResizeHandlerData = {
+  direction: Direction;
+  element: HTMLElement;
+  hitAreaMargins: PointerHitAreaMargins;
+  setResizeHandlerState: SetResizeHandlerState;
+};
+
+export const EXCEEDED_HORIZONTAL_MIN = 0b0001;
+export const EXCEEDED_HORIZONTAL_MAX = 0b0010;
+export const EXCEEDED_VERTICAL_MIN = 0b0100;
+export const EXCEEDED_VERTICAL_MAX = 0b1000;
+
+const isCoarsePointer = getInputType() === "coarse";
+
+let intersectingHandles: ResizeHandlerData[] = [];
+let isPointerDown = false;
+let ownerDocumentCounts: Map<Document, number> = new Map();
+let panelConstraintFlags: Map<string, number> = new Map();
+
+const registeredResizeHandlers = new Set<ResizeHandlerData>();
+
+export function registerResizeHandle(
+  resizeHandleId: string,
+  element: HTMLElement,
+  direction: Direction,
+  hitAreaMargins: PointerHitAreaMargins,
+  setResizeHandlerState: SetResizeHandlerState
+) {
+  const { ownerDocument } = element;
+
+  const data: ResizeHandlerData = {
+    direction,
+    element,
+    hitAreaMargins,
+    setResizeHandlerState,
+  };
+
+  const count = ownerDocumentCounts.get(ownerDocument) ?? 0;
+  ownerDocumentCounts.set(ownerDocument, count + 1);
+
+  registeredResizeHandlers.add(data);
+
+  updateListeners();
+
+  return function unregisterResizeHandle() {
+    panelConstraintFlags.delete(resizeHandleId);
+    registeredResizeHandlers.delete(data);
+
+    const count = ownerDocumentCounts.get(ownerDocument) ?? 1;
+    ownerDocumentCounts.set(ownerDocument, count - 1);
+
+    updateListeners();
+
+    if (count === 1) {
+      ownerDocumentCounts.delete(ownerDocument);
+    }
+  };
+}
+
+function handlePointerDown(event: ResizeEvent) {
+  const { x, y } = getResizeEventCoordinates(event);
+
+  isPointerDown = true;
+
+  updateResizeHandlerStates("down", event);
+
+  recalculateIntersectingHandles({ x, y });
+  updateListeners();
+
+  if (intersectingHandles.length > 0) {
+    event.preventDefault();
+  }
+}
+
+function handlePointerMove(event: ResizeEvent) {
+  const { x, y } = getResizeEventCoordinates(event);
+
+  if (isPointerDown) {
+    intersectingHandles.forEach((data) => {
+      const { setResizeHandlerState } = data;
+
+      setResizeHandlerState("move", "drag", event);
+    });
+
+    // Update cursor based on return value(s) from active handles
+    updateCursor();
+  } else {
+    recalculateIntersectingHandles({ x, y });
+    updateResizeHandlerStates("move", event);
+    updateCursor();
+  }
+
+  if (intersectingHandles.length > 0) {
+    event.preventDefault();
+  }
+}
+
+function handlePointerUp(event: ResizeEvent) {
+  const { x, y } = getResizeEventCoordinates(event);
+
+  panelConstraintFlags.clear();
+  isPointerDown = false;
+
+  if (intersectingHandles.length > 0) {
+    event.preventDefault();
+  }
+
+  recalculateIntersectingHandles({ x, y });
+  updateResizeHandlerStates("up", event);
+  updateCursor();
+
+  updateListeners();
+}
+
+function recalculateIntersectingHandles({ x, y }: { x: number; y: number }) {
+  intersectingHandles.splice(0);
+
+  registeredResizeHandlers.forEach((data) => {
+    const { element, hitAreaMargins } = data;
+    const { bottom, left, right, top } = element.getBoundingClientRect();
+
+    const margin = isCoarsePointer
+      ? hitAreaMargins.coarse
+      : hitAreaMargins.fine;
+
+    const intersects =
+      x >= left - margin &&
+      x <= right + margin &&
+      y >= top - margin &&
+      y <= bottom + margin;
+
+    if (intersects) {
+      intersectingHandles.push(data);
+    }
+  });
+}
+
+export function reportConstraintsViolation(
+  resizeHandleId: string,
+  flag: number
+) {
+  panelConstraintFlags.set(resizeHandleId, flag);
+}
+
+function updateCursor() {
+  let intersectsHorizontal = false;
+  let intersectsVertical = false;
+
+  intersectingHandles.forEach((data) => {
+    const { direction } = data;
+
+    if (direction === "horizontal") {
+      intersectsHorizontal = true;
+    } else {
+      intersectsVertical = true;
+    }
+  });
+
+  let constraintFlags = 0;
+  panelConstraintFlags.forEach((flag) => {
+    constraintFlags |= flag;
+  });
+
+  if (intersectsHorizontal && intersectsVertical) {
+    setGlobalCursorStyle("intersection", constraintFlags);
+  } else if (intersectsHorizontal) {
+    setGlobalCursorStyle("horizontal", constraintFlags);
+  } else if (intersectsVertical) {
+    setGlobalCursorStyle("vertical", constraintFlags);
+  } else {
+    resetGlobalCursorStyle();
+  }
+}
+
+function updateListeners() {
+  ownerDocumentCounts.forEach((_, ownerDocument) => {
+    const { body } = ownerDocument;
+
+    body.removeEventListener("contextmenu", handlePointerUp);
+    body.removeEventListener("mousedown", handlePointerDown);
+    body.removeEventListener("mouseleave", handlePointerMove);
+    body.removeEventListener("mousemove", handlePointerMove);
+    body.removeEventListener("touchmove", handlePointerMove);
+    body.removeEventListener("touchstart", handlePointerDown);
+  });
+
+  window.removeEventListener("mouseup", handlePointerUp);
+  window.removeEventListener("touchcancel", handlePointerUp);
+  window.removeEventListener("touchend", handlePointerUp);
+
+  if (registerResizeHandle.length > 0) {
+    if (isPointerDown) {
+      if (intersectingHandles.length > 0) {
+        ownerDocumentCounts.forEach((count, ownerDocument) => {
+          const { body } = ownerDocument;
+
+          if (count > 0) {
+            body.addEventListener("contextmenu", handlePointerUp);
+            body.addEventListener("mouseleave", handlePointerMove);
+            body.addEventListener("mousemove", handlePointerMove);
+            body.addEventListener("touchmove", handlePointerMove, {
+              passive: false,
+            });
+          }
+        });
+      }
+
+      window.addEventListener("mouseup", handlePointerUp);
+      window.addEventListener("touchcancel", handlePointerUp);
+      window.addEventListener("touchend", handlePointerUp);
+    } else {
+      ownerDocumentCounts.forEach((count, ownerDocument) => {
+        const { body } = ownerDocument;
+
+        if (count > 0) {
+          body.addEventListener("mousedown", handlePointerDown);
+          body.addEventListener("mousemove", handlePointerMove);
+          body.addEventListener("touchmove", handlePointerMove, {
+            passive: false,
+          });
+          body.addEventListener("touchstart", handlePointerDown);
+        }
+      });
+    }
+  }
+}
+
+function updateResizeHandlerStates(
+  action: ResizeHandlerAction,
+  event: ResizeEvent
+) {
+  registeredResizeHandlers.forEach((data) => {
+    const { setResizeHandlerState } = data;
+
+    if (intersectingHandles.includes(data)) {
+      if (isPointerDown) {
+        setResizeHandlerState(action, "drag", event);
+      } else {
+        setResizeHandlerState(action, "hover", event);
+      }
+    } else {
+      setResizeHandlerState(action, "inactive", event);
+    }
+  });
+}

package/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,

package/src/utils/cursor.ts

@@ -1,54 +1,84 @@
-type CursorState =
-  | "horizontal"
-  | "horizontal-max"
-  | "horizontal-min"
-  | "vertical"
-  | "vertical-max"
-  | "vertical-min";
-
-let currentState: CursorState | null = null;
-let element: HTMLStyleElement | null = null;
-
-export function getCursorStyle(state: CursorState): string {
+import {
+  EXCEEDED_HORIZONTAL_MAX,
+  EXCEEDED_HORIZONTAL_MIN,
+  EXCEEDED_VERTICAL_MAX,
+  EXCEEDED_VERTICAL_MIN,
+} from "../PanelResizeHandleRegistry";
+
+type CursorState = "horizontal" | "intersection" | "vertical";
+
+let currentCursorStyle: string | null = null;
+let styleElement: HTMLStyleElement | null = null;
+
+export function getCursorStyle(
+  state: CursorState,
+  constraintFlags: number
+): string {
+  if (constraintFlags) {
+    const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
+    const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
+    const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
+    const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
+
+    if (horizontalMin) {
+      if (verticalMin) {
+        return "se-resize";
+      } else if (verticalMax) {
+        return "ne-resize";
+      } else {
+        return "e-resize";
+      }
+    } else if (horizontalMax) {
+      if (verticalMin) {
+        return "sw-resize";
+      } else if (verticalMax) {
+        return "nw-resize";
+      } else {
+        return "w-resize";
+      }
+    } else if (verticalMin) {
+      return "s-resize";
+    } else if (verticalMax) {
+      return "n-resize";
+    }
+  }
+
   switch (state) {
     case "horizontal":
       return "ew-resize";
-    case "horizontal-max":
-      return "w-resize";
-    case "horizontal-min":
-      return "e-resize";
+    case "intersection":
+      return "move";
     case "vertical":
       return "ns-resize";
-    case "vertical-max":
-      return "n-resize";
-    case "vertical-min":
-      return "s-resize";
   }
 }
 
 export function resetGlobalCursorStyle() {
-  if (element !== null) {
-    document.head.removeChild(element);
+  if (styleElement !== null) {
+    document.head.removeChild(styleElement);
 
-    currentState = null;
-    element = null;
+    currentCursorStyle = null;
+    styleElement = null;
   }
 }
 
-export function setGlobalCursorStyle(state: CursorState) {
-  if (currentState === state) {
+export function setGlobalCursorStyle(
+  state: CursorState,
+  constraintFlags: number
+) {
+  const style = getCursorStyle(state, constraintFlags);
+
+  if (currentCursorStyle === style) {
     return;
   }
 
-  currentState = state;
-
-  const style = getCursorStyle(state);
+  currentCursorStyle = style;
 
-  if (element === null) {
-    element = document.createElement("style");
+  if (styleElement === null) {
+    styleElement = document.createElement("style");
 
-    document.head.appendChild(element);
+    document.head.appendChild(styleElement);
   }
 
-  element.innerHTML = `*{cursor: ${style}!important;}`;
+  styleElement.innerHTML = `*{cursor: ${style}!important;}`;
 }

package/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,
+  };
+}

package/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;
+}

package/src/utils/{events.ts → 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";

package/src/utils/getInputType.ts

@@ -0,0 +1,5 @@
+export function getInputType(): "coarse" | "fine" | undefined {
+  if (typeof matchMedia === "function") {
+    return matchMedia("(pointer:coarse)").matches ? "coarse" : "fine";
+  }
+}

package/src/utils/getResizeEventCursorPosition.ts

@@ -1,21 +0,0 @@
-import { ResizeEvent } from "../PanelGroupContext";
-import { Direction } from "../types";
-import { assert } from "./assert";
-import { isMouseEvent, isTouchEvent } from "./events";
-
-export function getResizeEventCursorPosition(
-  direction: Direction,
-  event: ResizeEvent
-): number {
-  const isHorizontal = direction === "horizontal";
-
-  if (isMouseEvent(event)) {
-    return isHorizontal ? event.clientX : event.clientY;
-  } else if (isTouchEvent(event)) {
-    const firstTouch = event.touches[0];
-    assert(firstTouch);
-    return isHorizontal ? firstTouch.screenX : firstTouch.screenY;
-  } else {
-    throw Error(`Unsupported event type "${event.type}"`);
-  }
-}