react-resizable-panels 2.0.3 → 2.0.5

package/src/PanelResizeHandle.ts

@@ -7,6 +7,7 @@ import {
   ReactElement,
   useContext,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
 } from "./vendor/react";
@@ -21,11 +22,11 @@ import {
   PointerHitAreaMargins,
   registerResizeHandle,
   ResizeHandlerAction,
-  ResizeHandlerState,
 } from "./PanelResizeHandleRegistry";
 import { assert } from "./utils/assert";
 
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
+export type ResizeHandlerState = "drag" | "hover" | "inactive";
 
 export type PanelResizeHandleProps = Omit<
   HTMLAttributes<keyof HTMLElementTagNameMap>,
@@ -90,6 +91,16 @@ export function PanelResizeHandle({
     null
   );
 
+  const committedValuesRef = useRef<{
+    state: ResizeHandlerState;
+  }>({
+    state,
+  });
+
+  useLayoutEffect(() => {
+    committedValuesRef.current.state = state;
+  });
+
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);
@@ -109,37 +120,46 @@ export function PanelResizeHandle({
 
     const setResizeHandlerState = (
       action: ResizeHandlerAction,
-      state: ResizeHandlerState,
+      isActive: boolean,
       event: ResizeEvent
     ) => {
-      setState(state);
+      if (isActive) {
+        switch (action) {
+          case "down": {
+            setState("drag");
+
+            startDragging(resizeHandleId, event);
+
+            const { onDragging } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(true);
+            }
+            break;
+          }
+          case "move": {
+            const { state } = committedValuesRef.current;
 
-      switch (action) {
-        case "down": {
-          startDragging(resizeHandleId, event);
+            if (state !== "drag") {
+              setState("hover");
+            }
 
-          const { onDragging } = callbacksRef.current;
-          if (onDragging) {
-            onDragging(true);
+            resizeHandler(event);
+            break;
           }
-          break;
-        }
-        case "up": {
-          stopDragging();
+          case "up": {
+            setState("hover");
 
-          const { onDragging } = callbacksRef.current;
-          if (onDragging) {
-            onDragging(false);
-          }
-          break;
-        }
-      }
+            stopDragging();
 
-      switch (state) {
-        case "drag": {
-          resizeHandler(event);
-          break;
+            const { onDragging } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(false);
+            }
+            break;
+          }
         }
+      } else {
+        setState("inactive");
       }
     };
 

package/src/PanelResizeHandleRegistry.ts

@@ -1,13 +1,14 @@
+import { compare } from "stacking-order";
 import { Direction, ResizeEvent } from "./types";
 import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
 import { getResizeEventCoordinates } from "./utils/events/getResizeEventCoordinates";
 import { getInputType } from "./utils/getInputType";
+import { intersects } from "./utils/rects/intersects";
 
 export type ResizeHandlerAction = "down" | "move" | "up";
-export type ResizeHandlerState = "drag" | "hover" | "inactive";
 export type SetResizeHandlerState = (
   action: ResizeHandlerAction,
-  state: ResizeHandlerState,
+  isActive: boolean,
   event: ResizeEvent
 ) => void;
 
@@ -76,11 +77,12 @@ export function registerResizeHandle(
 }
 
 function handlePointerDown(event: ResizeEvent) {
+  const { target } = event;
   const { x, y } = getResizeEventCoordinates(event);
 
   isPointerDown = true;
 
-  recalculateIntersectingHandles({ x, y });
+  recalculateIntersectingHandles({ target, x, y });
   updateListeners();
 
   if (intersectingHandles.length > 0) {
@@ -93,27 +95,27 @@ function handlePointerDown(event: ResizeEvent) {
 function handlePointerMove(event: ResizeEvent) {
   const { x, y } = getResizeEventCoordinates(event);
 
-  if (isPointerDown) {
-    intersectingHandles.forEach((data) => {
-      const { setResizeHandlerState } = data;
+  if (!isPointerDown) {
+    const { target } = event;
 
-      setResizeHandlerState("move", "drag", event);
-    });
-
-    // Update cursor based on return value(s) from active handles
-    updateCursor();
-  } else {
-    recalculateIntersectingHandles({ x, y });
-    updateResizeHandlerStates("move", event);
-    updateCursor();
+    // Recalculate intersecting handles whenever the pointer moves, except if it has already been pressed
+    // at that point, the handles may not move with the pointer (depending on constraints)
+    // but the same set of active handles should be locked until the pointer is released
+    recalculateIntersectingHandles({ target, x, y });
   }
 
+  updateResizeHandlerStates("move", event);
+
+  // Update cursor based on return value(s) from active handles
+  updateCursor();
+
   if (intersectingHandles.length > 0) {
     event.preventDefault();
   }
 }
 
 function handlePointerUp(event: ResizeEvent) {
+  const { target } = event;
   const { x, y } = getResizeEventCoordinates(event);
 
   panelConstraintFlags.clear();
@@ -123,31 +125,92 @@ function handlePointerUp(event: ResizeEvent) {
     event.preventDefault();
   }
 
-  recalculateIntersectingHandles({ x, y });
   updateResizeHandlerStates("up", event);
+  recalculateIntersectingHandles({ target, x, y });
   updateCursor();
 
   updateListeners();
 }
 
-function recalculateIntersectingHandles({ x, y }: { x: number; y: number }) {
+function recalculateIntersectingHandles({
+  target,
+  x,
+  y,
+}: {
+  target: EventTarget | null;
+  x: number;
+  y: number;
+}) {
   intersectingHandles.splice(0);
 
+  let targetElement: HTMLElement | null = null;
+  if (target instanceof HTMLElement) {
+    targetElement = target;
+  }
+
   registeredResizeHandlers.forEach((data) => {
-    const { element, hitAreaMargins } = data;
-    const { bottom, left, right, top } = element.getBoundingClientRect();
+    const { element: dragHandleElement, hitAreaMargins } = data;
+
+    const dragHandleRect = dragHandleElement.getBoundingClientRect();
+    const { bottom, left, right, top } = dragHandleRect;
 
     const margin = isCoarsePointer
       ? hitAreaMargins.coarse
       : hitAreaMargins.fine;
 
-    const intersects =
+    const eventIntersects =
       x >= left - margin &&
       x <= right + margin &&
       y >= top - margin &&
       y <= bottom + margin;
 
-    if (intersects) {
+    if (eventIntersects) {
+      // TRICKY
+      // We listen for pointers events at the root in order to support hit area margins
+      // (determining when the pointer is close enough to an element to be considered a "hit")
+      // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
+      // so at this point we need to compare stacking order of a potentially intersecting drag handle,
+      // and the element that was actually clicked/touched
+      if (
+        targetElement !== null &&
+        dragHandleElement !== targetElement &&
+        !dragHandleElement.contains(targetElement) &&
+        !targetElement.contains(dragHandleElement) &&
+        // Calculating stacking order has a cost, so we should avoid it if possible
+        // That is why we only check potentially intersecting handles,
+        // and why we skip if the event target is within the handle's DOM
+        compare(targetElement, dragHandleElement) > 0
+      ) {
+        // If the target is above the drag handle, then we also need to confirm they overlap
+        // If they are beside each other (e.g. a panel and its drag handle) then the handle is still interactive
+        //
+        // It's not enough to compare only the target
+        // The target might be a small element inside of a larger container
+        // (For example, a SPAN or a DIV inside of a larger modal dialog)
+        let currentElement: HTMLElement | null = targetElement;
+        let didIntersect = false;
+        while (currentElement) {
+          if (currentElement.contains(dragHandleElement)) {
+            break;
+          } else if (
+            intersects(
+              currentElement.getBoundingClientRect(),
+              dragHandleRect,
+              true
+            )
+          ) {
+            didIntersect = true;
+            break;
+          }
+
+          currentElement = currentElement.parentElement;
+        }
+
+        if (didIntersect) {
+          return;
+        }
+      }
+
       intersectingHandles.push(data);
     }
   });
@@ -250,14 +313,8 @@ function updateResizeHandlerStates(
   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);
-    }
+    const isActive = intersectingHandles.includes(data);
+
+    setResizeHandlerState(action, isActive, event);
   });
 }

package/src/index.ts

@@ -9,6 +9,8 @@ import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
 import { getResizeHandleElementIndex } from "./utils/dom/getResizeHandleElementIndex";
 import { getResizeHandleElementsForGroup } from "./utils/dom/getResizeHandleElementsForGroup";
 import { getResizeHandlePanelIds } from "./utils/dom/getResizeHandlePanelIds";
+import { getIntersectingRectangle } from "./utils/rects/getIntersectingRectangle";
+import { intersects } from "./utils/rects/intersects";
 
 import type {
   ImperativePanelHandle,
@@ -49,6 +51,8 @@ export {
 
   // Utility methods
   assert,
+  getIntersectingRectangle,
+  intersects,
 
   // DOM helpers
   getPanelElement,

package/src/utils/rects/getIntersectingRectangle.test.ts

@@ -0,0 +1,198 @@
+import { getIntersectingRectangle } from "./getIntersectingRectangle";
+import { Rectangle } from "./types";
+
+const emptyRect = { x: 0, y: 0, width: 0, height: 0 };
+const rect = { x: 25, y: 25, width: 50, height: 50 };
+
+function forkRect(partial: Partial<Rectangle>, baseRect: Rectangle = rect) {
+  return { ...rect, ...partial };
+}
+
+describe("getIntersectingRectangle", () => {
+  let strict: boolean = false;
+
+  function verify(rectOne: Rectangle, rectTwo: Rectangle, expected: Rectangle) {
+    const actual = getIntersectingRectangle(rectOne, rectTwo, strict);
+
+    try {
+      expect(actual).toEqual(expected);
+    } catch (thrown) {
+      console.log(
+        "Expect",
+        strict ? "strict mode" : "loose mode",
+        "\n",
+        rectOne,
+        "\n",
+        rectTwo,
+        "\n\nto intersect as:\n",
+        expected,
+        "\n\nbut got:\n",
+        actual
+      );
+
+      throw thrown;
+    }
+  }
+
+  describe("loose", () => {
+    beforeEach(() => {
+      strict = false;
+    });
+
+    it("should support empty rects", () => {
+      verify(emptyRect, emptyRect, emptyRect);
+    });
+
+    it("should support fully overlapping rects", () => {
+      verify(rect, forkRect({ x: 35, width: 30 }), {
+        x: 35,
+        y: 25,
+        width: 30,
+        height: 50,
+      });
+
+      verify(rect, forkRect({ y: 35, height: 30 }), {
+        x: 25,
+        y: 35,
+        width: 50,
+        height: 30,
+      });
+
+      verify(
+        rect,
+        forkRect({
+          x: 35,
+          y: 35,
+          width: 30,
+          height: 30,
+        }),
+
+        {
+          x: 35,
+          y: 35,
+          width: 30,
+          height: 30,
+        }
+      );
+    });
+
+    it("should support partially overlapping rects", () => {
+      verify(rect, forkRect({ x: 10, y: 10 }), {
+        x: 25,
+        y: 25,
+        width: 35,
+        height: 35,
+      });
+
+      verify(rect, forkRect({ x: 45, y: 30 }), {
+        x: 45,
+        y: 30,
+        width: 30,
+        height: 45,
+      });
+    });
+
+    it("should support non-overlapping rects", () => {
+      verify(rect, forkRect({ x: 100, y: 100 }), emptyRect);
+    });
+
+    it("should support all negative coordinates", () => {
+      verify(
+        {
+          x: -100,
+          y: -100,
+          width: 50,
+          height: 50,
+        },
+        { x: -80, y: -80, width: 50, height: 50 },
+        {
+          x: -80,
+          y: -80,
+          width: 30,
+          height: 30,
+        }
+      );
+    });
+  });
+
+  describe("strict", () => {
+    beforeEach(() => {
+      strict = true;
+    });
+
+    it("should support empty rects", () => {
+      verify(emptyRect, emptyRect, emptyRect);
+    });
+
+    it("should support fully overlapping rects", () => {
+      verify(rect, forkRect({ x: 35, width: 30 }), {
+        x: 35,
+        y: 25,
+        width: 30,
+        height: 50,
+      });
+
+      verify(rect, forkRect({ y: 35, height: 30 }), {
+        x: 25,
+        y: 35,
+        width: 50,
+        height: 30,
+      });
+
+      verify(
+        rect,
+        forkRect({
+          x: 35,
+          y: 35,
+          width: 30,
+          height: 30,
+        }),
+
+        {
+          x: 35,
+          y: 35,
+          width: 30,
+          height: 30,
+        }
+      );
+    });
+
+    it("should support partially overlapping rects", () => {
+      verify(rect, forkRect({ x: 10, y: 10 }), {
+        x: 25,
+        y: 25,
+        width: 35,
+        height: 35,
+      });
+
+      verify(rect, forkRect({ x: 45, y: 30 }), {
+        x: 45,
+        y: 30,
+        width: 30,
+        height: 45,
+      });
+    });
+
+    it("should support non-overlapping rects", () => {
+      verify(rect, forkRect({ x: 100, y: 100 }), emptyRect);
+    });
+
+    it("should support all negative coordinates", () => {
+      verify(
+        {
+          x: -100,
+          y: -100,
+          width: 50,
+          height: 50,
+        },
+        { x: -80, y: -80, width: 50, height: 50 },
+        {
+          x: -80,
+          y: -80,
+          width: 30,
+          height: 30,
+        }
+      );
+    });
+  });
+});

package/src/utils/rects/getIntersectingRectangle.ts

@@ -0,0 +1,28 @@
+import { intersects } from "./intersects";
+import { Rectangle } from "./types";
+
+export function getIntersectingRectangle(
+  rectOne: Rectangle,
+  rectTwo: Rectangle,
+  strict: boolean
+): Rectangle {
+  if (!intersects(rectOne, rectTwo, strict)) {
+    return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+    };
+  }
+
+  return {
+    x: Math.max(rectOne.x, rectTwo.x),
+    y: Math.max(rectOne.y, rectTwo.y),
+    width:
+      Math.min(rectOne.x + rectOne.width, rectTwo.x + rectTwo.width) -
+      Math.max(rectOne.x, rectTwo.x),
+    height:
+      Math.min(rectOne.y + rectOne.height, rectTwo.y + rectTwo.height) -
+      Math.max(rectOne.y, rectTwo.y),
+  };
+}