react-resizable-panels 2.0.3 → 2.0.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2.0.5
+
+- Resize handle hit detection considers [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) when determining hit detection (#291)
+
+## 2.0.4
+
+- Fixed `PanelResizeHandle` `onDragging` prop to only be called for the handle being dragged (#289)
+
 ## 2.0.3
 
 - Fix resize handle onDragging callback (#278)

package/dist/declarations/src/PanelResizeHandle.d.ts

@@ -1,6 +1,7 @@
 import { CSSProperties, HTMLAttributes, PropsWithChildren, ReactElement } from "./vendor/react.js";
 import { PointerHitAreaMargins } from "./PanelResizeHandleRegistry.js";
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
+export type ResizeHandlerState = "drag" | "hover" | "inactive";
 export type PanelResizeHandleProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & PropsWithChildren<{
     className?: string;
     disabled?: boolean;

package/dist/declarations/src/PanelResizeHandleRegistry.d.ts

@@ -1,7 +1,6 @@
 import { Direction, ResizeEvent } from "./types.js";
 export type ResizeHandlerAction = "down" | "move" | "up";
-export type ResizeHandlerState = "drag" | "hover" | "inactive";
-export type SetResizeHandlerState = (action: ResizeHandlerAction, state: ResizeHandlerState, event: ResizeEvent) => void;
+export type SetResizeHandlerState = (action: ResizeHandlerAction, isActive: boolean, event: ResizeEvent) => void;
 export type PointerHitAreaMargins = {
     coarse: number;
     fine: number;

package/dist/declarations/src/index.d.ts

@@ -9,7 +9,9 @@ import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement.js";
 import { getResizeHandleElementIndex } from "./utils/dom/getResizeHandleElementIndex.js";
 import { getResizeHandleElementsForGroup } from "./utils/dom/getResizeHandleElementsForGroup.js";
 import { getResizeHandlePanelIds } from "./utils/dom/getResizeHandlePanelIds.js";
+import { getIntersectingRectangle } from "./utils/rects/getIntersectingRectangle.js";
+import { intersects } from "./utils/rects/intersects.js";
 import type { ImperativePanelHandle, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps } from "./Panel.js";
 import type { ImperativePanelGroupHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage } from "./PanelGroup.js";
 import type { PanelResizeHandleOnDragging, PanelResizeHandleProps } from "./PanelResizeHandle.js";
-export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, Panel, PanelGroup, PanelResizeHandle, assert, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, };
+export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, Panel, PanelGroup, PanelResizeHandle, assert, getIntersectingRectangle, intersects, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, };

package/dist/declarations/src/utils/rects/getIntersectingRectangle.d.ts

@@ -0,0 +1,2 @@
+import { Rectangle } from "./types.js";
+export declare function getIntersectingRectangle(rectOne: Rectangle, rectTwo: Rectangle, strict: boolean): Rectangle;

package/dist/declarations/src/utils/rects/intersects.d.ts

@@ -0,0 +1,2 @@
+import { Rectangle } from "./types.js";
+export declare function intersects(rectOne: Rectangle, rectTwo: Rectangle, strict: boolean): boolean;

package/dist/declarations/src/utils/rects/types.d.ts

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

package/dist/react-resizable-panels.browser.cjs.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var stackingOrder = require('stacking-order');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -294,6 +295,14 @@ function getInputType() {
   }
 }
 
+function intersects(rectOne, rectTwo, strict) {
+  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;
+  }
+}
+
 const EXCEEDED_HORIZONTAL_MIN = 0b0001;
 const EXCEEDED_HORIZONTAL_MAX = 0b0010;
 const EXCEEDED_VERTICAL_MIN = 0b0100;
@@ -332,12 +341,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
   };
 }
 function handlePointerDown(event) {
+  const {
+    target
+  } = event;
   const {
     x,
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
   recalculateIntersectingHandles({
+    target,
     x,
     y
   });
@@ -352,29 +365,32 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
-  if (isPointerDown) {
-    intersectingHandles.forEach(data => {
-      const {
-        setResizeHandlerState
-      } = data;
-      setResizeHandlerState("move", "drag", event);
-    });
+  if (!isPointerDown) {
+    const {
+      target
+    } = event;
 
-    // Update cursor based on return value(s) from active handles
-    updateCursor();
-  } else {
+    // 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);
-    updateCursor();
   }
+  updateResizeHandlerStates("move", event);
+
+  // Update cursor based on return value(s) from active handles
+  updateCursor();
   if (intersectingHandles.length > 0) {
     event.preventDefault();
   }
 }
 function handlePointerUp(event) {
+  const {
+    target
+  } = event;
   const {
     x,
     y
@@ -384,33 +400,72 @@ function handlePointerUp(event) {
   if (intersectingHandles.length > 0) {
     event.preventDefault();
   }
+  updateResizeHandlerStates("up", event);
   recalculateIntersectingHandles({
+    target,
     x,
     y
   });
-  updateResizeHandlerStates("up", event);
   updateCursor();
   updateListeners();
 }
 function recalculateIntersectingHandles({
+  target,
   x,
   y
 }) {
   intersectingHandles.splice(0);
+  let targetElement = null;
+  if (target instanceof HTMLElement) {
+    targetElement = target;
+  }
   registeredResizeHandlers.forEach(data => {
     const {
-      element,
+      element: dragHandleElement,
       hitAreaMargins
     } = data;
+    const dragHandleRect = dragHandleElement.getBoundingClientRect();
     const {
       bottom,
       left,
       right,
       top
-    } = element.getBoundingClientRect();
+    } = dragHandleRect;
     const margin = isCoarsePointer ? hitAreaMargins.coarse : hitAreaMargins.fine;
-    const intersects = x >= left - margin && x <= right + margin && y >= top - margin && y <= bottom + margin;
-    if (intersects) {
+    const eventIntersects = x >= left - margin && x <= right + margin && y >= top - margin && y <= bottom + margin;
+    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
+      stackingOrder.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 = 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);
     }
   });
@@ -502,15 +557,8 @@ function updateResizeHandlerStates(action, event) {
     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);
   });
 }
 
@@ -2047,6 +2095,12 @@ function PanelResizeHandle({
   const [state, setState] = useState("inactive");
   const [isFocused, setIsFocused] = useState(false);
   const [resizeHandler, setResizeHandler] = useState(null);
+  const committedValuesRef = useRef({
+    state
+  });
+  useLayoutEffect(() => {
+    committedValuesRef.current.state = state;
+  });
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);
@@ -2062,38 +2116,47 @@ function PanelResizeHandle({
     }
     const element = elementRef.current;
     assert(element);
-    const setResizeHandlerState = (action, state, event) => {
-      setState(state);
-      switch (action) {
-        case "down":
-          {
-            startDragging(resizeHandleId, event);
-            const {
-              onDragging
-            } = callbacksRef.current;
-            if (onDragging) {
-              onDragging(true);
+    const setResizeHandlerState = (action, isActive, event) => {
+      if (isActive) {
+        switch (action) {
+          case "down":
+            {
+              setState("drag");
+              startDragging(resizeHandleId, event);
+              const {
+                onDragging
+              } = callbacksRef.current;
+              if (onDragging) {
+                onDragging(true);
+              }
+              break;
             }
-            break;
-          }
-        case "up":
-          {
-            stopDragging();
-            const {
-              onDragging
-            } = callbacksRef.current;
-            if (onDragging) {
-              onDragging(false);
+          case "move":
+            {
+              const {
+                state
+              } = committedValuesRef.current;
+              if (state !== "drag") {
+                setState("hover");
+              }
+              resizeHandler(event);
+              break;
             }
-            break;
-          }
-      }
-      switch (state) {
-        case "drag":
-          {
-            resizeHandler(event);
-            break;
-          }
+          case "up":
+            {
+              setState("hover");
+              stopDragging();
+              const {
+                onDragging
+              } = callbacksRef.current;
+              if (onDragging) {
+                onDragging(false);
+              }
+              break;
+            }
+        }
+      } else {
+        setState("inactive");
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
@@ -2150,10 +2213,28 @@ function getPanelElementsForGroup(groupId, scope = document) {
   return Array.from(scope.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
 }
 
+function getIntersectingRectangle(rectOne, rectTwo, strict) {
+  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)
+  };
+}
+
 exports.Panel = Panel;
 exports.PanelGroup = PanelGroup;
 exports.PanelResizeHandle = PanelResizeHandle;
 exports.assert = assert;
+exports.getIntersectingRectangle = getIntersectingRectangle;
 exports.getPanelElement = getPanelElement;
 exports.getPanelElementsForGroup = getPanelElementsForGroup;
 exports.getPanelGroupElement = getPanelGroupElement;
@@ -2161,3 +2242,4 @@ exports.getResizeHandleElement = getResizeHandleElement;
 exports.getResizeHandleElementIndex = getResizeHandleElementIndex;
 exports.getResizeHandleElementsForGroup = getResizeHandleElementsForGroup;
 exports.getResizeHandlePanelIds = getResizeHandlePanelIds;
+exports.intersects = intersects;

package/dist/react-resizable-panels.browser.cjs.mjs

@@ -3,11 +3,13 @@ export {
   PanelGroup,
   PanelResizeHandle,
   assert,
+  getIntersectingRectangle,
   getPanelElement,
   getPanelElementsForGroup,
   getPanelGroupElement,
   getResizeHandleElement,
   getResizeHandleElementIndex,
   getResizeHandleElementsForGroup,
-  getResizeHandlePanelIds
+  getResizeHandlePanelIds,
+  intersects
 } from "./react-resizable-panels.browser.cjs.js";