react-resizable-panels 2.0.4 → 2.0.5

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # 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)

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
   });
@@ -353,10 +366,15 @@ function handlePointerMove(event) {
     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({
+      target,
       x,
       y
     });
@@ -370,6 +388,9 @@ function handlePointerMove(event) {
   }
 }
 function handlePointerUp(event) {
+  const {
+    target
+  } = event;
   const {
     x,
     y
@@ -379,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);
     }
   });
@@ -2153,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;
@@ -2164,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";

package/dist/react-resizable-panels.browser.development.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;
@@ -300,6 +301,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;
@@ -338,12 +347,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
   };
 }
 function handlePointerDown(event) {
+  const {
+    target
+  } = event;
   const {
     x,
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
   recalculateIntersectingHandles({
+    target,
     x,
     y
   });
@@ -359,10 +372,15 @@ function handlePointerMove(event) {
     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({
+      target,
       x,
       y
     });
@@ -376,6 +394,9 @@ function handlePointerMove(event) {
   }
 }
 function handlePointerUp(event) {
+  const {
+    target
+  } = event;
   const {
     x,
     y
@@ -385,33 +406,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);
     }
   });
@@ -2259,10 +2319,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;
@@ -2270,3 +2348,4 @@ exports.getResizeHandleElement = getResizeHandleElement;
 exports.getResizeHandleElementIndex = getResizeHandleElementIndex;
 exports.getResizeHandleElementsForGroup = getResizeHandleElementsForGroup;
 exports.getResizeHandlePanelIds = getResizeHandlePanelIds;
+exports.intersects = intersects;

package/dist/react-resizable-panels.browser.development.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.development.cjs.js";

package/dist/react-resizable-panels.browser.development.esm.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { compare } from 'stacking-order';
 
 // This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
 
@@ -276,6 +277,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;
@@ -314,12 +323,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
   };
 }
 function handlePointerDown(event) {
+  const {
+    target
+  } = event;
   const {
     x,
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
   recalculateIntersectingHandles({
+    target,
     x,
     y
   });
@@ -335,10 +348,15 @@ function handlePointerMove(event) {
     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({
+      target,
       x,
       y
     });
@@ -352,6 +370,9 @@ function handlePointerMove(event) {
   }
 }
 function handlePointerUp(event) {
+  const {
+    target
+  } = event;
   const {
     x,
     y
@@ -361,33 +382,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
+      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);
     }
   });
@@ -2235,4 +2295,21 @@ function getPanelElementsForGroup(groupId, scope = document) {
   return Array.from(scope.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
 }
 
-export { Panel, PanelGroup, PanelResizeHandle, assert, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds };
+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)
+  };
+}
+
+export { Panel, PanelGroup, PanelResizeHandle, assert, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects };