react-resizable-panels 2.0.3 → 2.0.5

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { compare } from 'stacking-order';
 
 const isBrowser = typeof window !== "undefined";
 
@@ -272,6 +273,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;
@@ -310,12 +319,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
   };
 }
 function handlePointerDown(event) {
+  const {
+    target
+  } = event;
   const {
     x,
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
   recalculateIntersectingHandles({
+    target,
     x,
     y
   });
@@ -330,29 +343,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
@@ -362,33 +378,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);
     }
   });
@@ -480,15 +535,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);
   });
 }
 
@@ -2025,6 +2073,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);
@@ -2040,38 +2094,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, {
@@ -2128,4 +2191,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 };

package/dist/react-resizable-panels.node.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;
@@ -259,6 +260,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;
@@ -297,12 +306,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
   };
 }
 function handlePointerDown(event) {
+  const {
+    target
+  } = event;
   const {
     x,
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
   recalculateIntersectingHandles({
+    target,
     x,
     y
   });
@@ -317,29 +330,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
@@ -349,33 +365,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);
     }
   });
@@ -467,15 +522,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);
   });
 }
 
@@ -1828,6 +1876,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);
@@ -1843,38 +1897,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, {
@@ -1931,10 +1994,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;
@@ -1942,3 +2023,4 @@ exports.getResizeHandleElement = getResizeHandleElement;
 exports.getResizeHandleElementIndex = getResizeHandleElementIndex;
 exports.getResizeHandleElementsForGroup = getResizeHandleElementsForGroup;
 exports.getResizeHandlePanelIds = getResizeHandlePanelIds;
+exports.intersects = intersects;

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

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