react-resizable-panels 1.0.9 → 2.0.0

package/src/PanelGroup.ts

@@ -6,6 +6,13 @@ import {
   ResizeEvent,
   TPanelGroupContext,
 } from "./PanelGroupContext";
+import {
+  EXCEEDED_HORIZONTAL_MAX,
+  EXCEEDED_HORIZONTAL_MIN,
+  EXCEEDED_VERTICAL_MAX,
+  EXCEEDED_VERTICAL_MIN,
+  reportConstraintsViolation,
+} from "./PanelResizeHandleRegistry";
 import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 import useUniqueId from "./hooks/useUniqueId";
 import { useWindowSplitterPanelGroupBehavior } from "./hooks/useWindowSplitterPanelGroupBehavior";
@@ -23,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,
@@ -571,6 +578,7 @@ function PanelGroupWithForwardedRef({
       if (!panelGroupElement) {
         return () => null;
       }
+
       const {
         direction,
         dragState,
@@ -630,20 +638,21 @@ function PanelGroupWithForwardedRef({
           prevDeltaRef.current = delta;
 
           if (!layoutChanged) {
-            // If the pointer has moved too far to resize the panel any further,
-            // update the cursor style for a visual clue.
+            // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
-
             if (isHorizontal) {
-              setGlobalCursorStyle(
-                delta < 0 ? "horizontal-min" : "horizontal-max"
+              reportConstraintsViolation(
+                dragHandleId,
+                delta < 0 ? EXCEEDED_HORIZONTAL_MIN : EXCEEDED_HORIZONTAL_MAX
               );
             } else {
-              setGlobalCursorStyle(delta < 0 ? "vertical-min" : "vertical-max");
+              reportConstraintsViolation(
+                dragHandleId,
+                delta < 0 ? EXCEEDED_VERTICAL_MIN : EXCEEDED_VERTICAL_MAX
+              );
             }
           } else {
-            // Reset the cursor style to the the normal resize cursor.
-            setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
+            reportConstraintsViolation(dragHandleId, 0);
           }
         }
       }
@@ -726,15 +735,11 @@ function PanelGroupWithForwardedRef({
       const {
         collapsedSize: prevCollapsedSize = 0,
         collapsible: prevCollapsible,
-        defaultSize: prevDefaultSize,
-        maxSize: prevMaxSize = 100,
-        minSize: prevMinSize = 0,
       } = prevConstraints;
 
       const {
         collapsedSize: nextCollapsedSize = 0,
         collapsible: nextCollapsible,
-        defaultSize: nextDefaultSize,
         maxSize: nextMaxSize = 100,
         minSize: nextMinSize = 0,
       } = panelData.constraints;
@@ -749,10 +754,13 @@ function PanelGroupWithForwardedRef({
       if (
         prevCollapsible &&
         nextCollapsible &&
-        prevCollapsedSize !== nextCollapsedSize &&
         prevPanelSize === prevCollapsedSize
       ) {
-        resizePanel(panelData, nextCollapsedSize);
+        if (prevCollapsedSize !== nextCollapsedSize) {
+          resizePanel(panelData, nextCollapsedSize);
+        } else {
+          // Stay collapsed
+        }
       } else if (prevPanelSize < nextMinSize) {
         resizePanel(panelData, nextMinSize);
       } else if (prevPanelSize > nextMaxSize) {
@@ -791,7 +799,6 @@ function PanelGroupWithForwardedRef({
   );
 
   const stopDragging = useCallback(() => {
-    resetGlobalCursorStyle();
     setDragState(null);
   }, []);
 

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,