react-resizable-panels 2.0.4 → 2.0.6

package/src/PanelResizeHandleRegistry.ts

@@ -1,7 +1,9 @@
+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 SetResizeHandlerState = (
@@ -75,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,10 +96,12 @@ function handlePointerMove(event: ResizeEvent) {
   const { x, y } = getResizeEventCoordinates(event);
 
   if (!isPointerDown) {
+    const { target } = event;
+
     // 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({ x, y });
+    recalculateIntersectingHandles({ target, x, y });
   }
 
   updateResizeHandlerStates("move", event);
@@ -110,6 +115,7 @@ function handlePointerMove(event: ResizeEvent) {
 }
 
 function handlePointerUp(event: ResizeEvent) {
+  const { target } = event;
   const { x, y } = getResizeEventCoordinates(event);
 
   panelConstraintFlags.clear();
@@ -119,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);
     }
   });

package/src/hooks/useIsomorphicEffect.ts

@@ -1,6 +1,8 @@
 import { isBrowser } from "#is-browser";
-import { useLayoutEffect } from "../vendor/react";
+import { useLayoutEffect_do_not_use_directly } from "../vendor/react";
 
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
+const useIsomorphicLayoutEffect = isBrowser
+  ? useLayoutEffect_do_not_use_directly
+  : () => {};
 
 export default useIsomorphicLayoutEffect;

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

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

@@ -0,0 +1,197 @@
+import { intersects } from "./intersects";
+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("intersects", () => {
+  let strict: boolean = false;
+
+  function verify(rectOne: Rectangle, rectTwo: Rectangle, expected: boolean) {
+    const actual = intersects(rectOne, rectTwo, strict);
+
+    try {
+      expect(actual).toBe(expected);
+    } catch (thrown) {
+      console.log(
+        "Expected",
+        rectOne,
+        "to",
+        expected ? "intersect" : "not intersect",
+        rectTwo,
+        strict ? "in strict mode" : "in loose mode"
+      );
+
+      throw thrown;
+    }
+  }
+
+  describe("loose", () => {
+    beforeEach(() => {
+      strict = false;
+    });
+
+    it("should handle empty rects", () => {
+      verify(emptyRect, emptyRect, true);
+    });
+
+    it("should support fully overlapping rects", () => {
+      verify(rect, rect, true);
+
+      verify(rect, forkRect({ x: 35, width: 30 }), true);
+      verify(rect, forkRect({ y: 35, height: 30 }), true);
+      verify(
+        rect,
+        forkRect({
+          x: 35,
+          y: 35,
+          width: 30,
+          height: 30,
+        }),
+        true
+      );
+
+      verify(rect, forkRect({ x: 10, width: 100 }), true);
+      verify(rect, forkRect({ y: 10, height: 100 }), true);
+      verify(
+        rect,
+        forkRect({
+          x: 10,
+          y: 10,
+          width: 100,
+          height: 100,
+        }),
+        true
+      );
+    });
+
+    it("should support partially overlapping rects", () => {
+      const cases: Partial<Rectangle>[] = [
+        { x: 0 },
+        { y: 0 },
+
+        // Loose mode only
+        { x: -25 },
+        { x: 75 },
+        { y: -25 },
+        { y: 75 },
+        { x: -25, y: -25 },
+        { x: 75, y: 75 },
+      ];
+
+      cases.forEach((partial) => {
+        verify(forkRect(partial), rect, true);
+      });
+    });
+
+    it("should support non-overlapping rects", () => {
+      const cases: Partial<Rectangle>[] = [
+        { x: 100 },
+        { x: -100 },
+        { y: 100 },
+        { y: -100 },
+        { x: -100, y: -100 },
+        { x: 100, y: 100 },
+      ];
+
+      cases.forEach((partial) => {
+        verify(forkRect(partial), rect, false);
+      });
+    });
+
+    it("should support all negative coordinates", () => {
+      expect(
+        intersects(
+          { x: -100, y: -100, width: 50, height: 50 },
+          { x: -110, y: -90, width: 50, height: 50 },
+          false
+        )
+      ).toBe(true);
+    });
+  });
+
+  describe("strict", () => {
+    beforeEach(() => {
+      strict = true;
+    });
+
+    it("should handle empty rects", () => {
+      verify(emptyRect, emptyRect, false);
+    });
+
+    it("should support fully overlapping rects", () => {
+      verify(rect, rect, true);
+
+      verify(rect, forkRect({ x: 35, width: 30 }), true);
+      verify(rect, forkRect({ y: 35, height: 30 }), true);
+      verify(
+        rect,
+        forkRect({
+          x: 35,
+          y: 35,
+          width: 30,
+          height: 30,
+        }),
+        true
+      );
+
+      verify(rect, forkRect({ x: 10, width: 100 }), true);
+      verify(rect, forkRect({ y: 10, height: 100 }), true);
+      verify(
+        rect,
+        forkRect({
+          x: 10,
+          y: 10,
+          width: 100,
+          height: 100,
+        }),
+        true
+      );
+    });
+
+    it("should support partially overlapping rects", () => {
+      const cases: Partial<Rectangle>[] = [{ x: 0 }, { y: 0 }];
+
+      cases.forEach((partial) => {
+        verify(forkRect(partial), rect, true);
+      });
+    });
+
+    it("should support non-overlapping rects", () => {
+      const cases: Partial<Rectangle>[] = [
+        { x: 100 },
+        { x: -100 },
+        { y: 100 },
+        { y: -100 },
+        { x: -100, y: -100 },
+        { x: 100, y: 100 },
+
+        // Strict mode only
+        { x: -25 },
+        { x: 75 },
+        { y: -25 },
+        { y: 75 },
+        { x: -25, y: -25 },
+        { x: 75, y: 75 },
+      ];
+
+      cases.forEach((partial) => {
+        verify(forkRect(partial), rect, false);
+      });
+    });
+
+    it("should support all negative coordinates", () => {
+      expect(
+        intersects(
+          { x: -100, y: -100, width: 50, height: 50 },
+          { x: -110, y: -90, width: 50, height: 50 },
+          true
+        )
+      ).toBe(true);
+    });
+  });
+});

package/src/utils/rects/intersects.ts

@@ -0,0 +1,23 @@
+import { Rectangle } from "./types";
+
+export function intersects(
+  rectOne: Rectangle,
+  rectTwo: Rectangle,
+  strict: boolean
+): boolean {
+  if (strict) {
+    return (
+      rectOne.x < rectTwo.x + rectTwo.width &&
+      rectOne.x + rectOne.width > rectTwo.x &&
+      rectOne.y < rectTwo.y + rectTwo.height &&
+      rectOne.y + rectOne.height > rectTwo.y
+    );
+  } else {
+    return (
+      rectOne.x <= rectTwo.x + rectTwo.width &&
+      rectOne.x + rectOne.width >= rectTwo.x &&
+      rectOne.y <= rectTwo.y + rectTwo.height &&
+      rectOne.y + rectOne.height >= rectTwo.y
+    );
+  }
+}

package/src/utils/rects/types.ts

@@ -0,0 +1,6 @@
+export interface Rectangle {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}

package/src/vendor/react.ts

@@ -39,6 +39,8 @@ const {
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = (React as any)["useId".toString()] as () => string;
 
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
+
 export {
   createElement,
   createContext,
@@ -49,7 +51,7 @@ export {
   useEffect,
   useId,
   useImperativeHandle,
-  useLayoutEffect,
+  useLayoutEffect_do_not_use_directly,
   useMemo,
   useRef,
   useState,