react-resizable-panels 0.0.57 → 0.0.59

package/src/hooks/useWindowSplitterPanelGroupBehavior.ts

@@ -1,6 +1,5 @@
 import { isDevelopment } from "#is-development";
 import { PanelData } from "../Panel";
-import { PRECISION } from "../constants";
 import { Direction } from "../types";
 import { adjustLayoutByDelta } from "../utils/adjustLayoutByDelta";
 import { assert } from "../utils/assert";
@@ -12,6 +11,7 @@ import { getPanelGroupElement } from "../utils/dom/getPanelGroupElement";
 import { getResizeHandleElementsForGroup } from "../utils/dom/getResizeHandleElementsForGroup";
 import { getResizeHandlePanelIds } from "../utils/dom/getResizeHandlePanelIds";
 import { getPercentageSizeFromMixedSizes } from "../utils/getPercentageSizeFromMixedSizes";
+import { fuzzyNumbersEqual } from "../utils/numbers/fuzzyNumbersEqual";
 import { RefObject, useEffect, useRef } from "../vendor/react";
 import useIsomorphicLayoutEffect from "./useIsomorphicEffect";
 
@@ -95,13 +95,11 @@ export function useWindowSplitterPanelGroupBehavior({
   }, [groupId, layout, panelDataArray]);
 
   useEffect(() => {
-    const { direction, panelDataArray } = committedValuesRef.current!;
+    const { panelDataArray } = committedValuesRef.current!;
 
     const groupElement = getPanelGroupElement(groupId);
     assert(groupElement != null, `No group found for id "${groupId}"`);
 
-    const { height, width } = groupElement.getBoundingClientRect();
-
     const handles = getResizeHandleElementsForGroup(groupId);
     const cleanupFunctions = handles.map((handle) => {
       const handleId = handle.getAttribute("data-panel-resize-handle-id")!;
@@ -130,9 +128,18 @@ export function useWindowSplitterPanelGroupBehavior({
             if (index >= 0) {
               const panelData = panelDataArray[index];
               const size = layout[index];
-              if (size != null) {
+              if (size != null && panelData.constraints.collapsible) {
                 const groupSizePixels = getAvailableGroupSizePixels(groupId);
 
+                const collapsedSize =
+                  getPercentageSizeFromMixedSizes(
+                    {
+                      sizePercentage:
+                        panelData.constraints.collapsedSizePercentage,
+                      sizePixels: panelData.constraints.collapsedSizePixels,
+                    },
+                    groupSizePixels
+                  ) ?? 0;
                 const minSize =
                   getPercentageSizeFromMixedSizes(
                     {
@@ -142,17 +149,10 @@ export function useWindowSplitterPanelGroupBehavior({
                     groupSizePixels
                   ) ?? 0;
 
-                let delta = 0;
-                if (
-                  size.toPrecision(PRECISION) <= minSize.toPrecision(PRECISION)
-                ) {
-                  delta = direction === "horizontal" ? width : height;
-                } else {
-                  delta = -(direction === "horizontal" ? width : height);
-                }
-
                 const nextLayout = adjustLayoutByDelta({
-                  delta,
+                  delta: fuzzyNumbersEqual(size, collapsedSize)
+                    ? minSize - collapsedSize
+                    : collapsedSize - size,
                   groupSizePixels,
                   layout,
                   panelConstraints: panelDataArray.map(

package/src/types.ts

@@ -7,3 +7,7 @@ export type MixedSizes = {
 
 export type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;
 export type ResizeHandler = (event: ResizeEvent) => void;
+
+export type DataAttributes = {
+  [attribute: string]: string | number | boolean | undefined;
+};

package/src/utils/adjustLayoutByDelta.test.ts

@@ -82,7 +82,7 @@ describe("adjustLayoutByDelta", () => {
   it("[1++,2]", () => {
     expect(
       adjustLayoutByDelta({
-        delta: 30,
+        delta: 40,
         groupSizePixels: 100,
         layout: [50, 50],
         panelConstraints: [
@@ -122,7 +122,7 @@ describe("adjustLayoutByDelta", () => {
   });
 
   // Edge case
-  // Expanding from a collapsed state to less than the min size via keyboard should snap to min size
+  // Keyboard interactions should always expand a collapsed panel
   it("[1++,2]", () => {
     expect(
       adjustLayoutByDelta({
@@ -143,6 +143,27 @@ describe("adjustLayoutByDelta", () => {
     ).toEqual([25, 75]);
   });
 
+  // Edge case
+  // Keyboard interactions should always collapse a collapsible panel once it's at the minimum size
+  it("[1++,2]", () => {
+    expect(
+      adjustLayoutByDelta({
+        delta: 5,
+        groupSizePixels: NaN,
+        layout: [75, 25],
+        panelConstraints: [
+          {},
+          {
+            collapsible: true,
+            minSizePercentage: 25,
+          },
+        ],
+        pivotIndices: [0, 1],
+        trigger: "keyboard",
+      })
+    ).toEqual([100, 0]);
+  });
+
   // Edge case
   // Expanding from a collapsed state to less than the min size via imperative API should do nothing
   it("[1++,2]", () => {
@@ -174,6 +195,7 @@ describe("adjustLayoutByDelta", () => {
   // Expanding from a collapsed state to less than the min size via keyboard should snap to min size
   it("[1++,2]", () => {
     // collapsed 4%, min size 6%, max size 15%
+
     expect(
       adjustLayoutByDelta({
         delta: 1,
@@ -395,6 +417,24 @@ describe("adjustLayoutByDelta", () => {
         pivotIndices: [0, 1],
         trigger: "imperative-api",
       })
+    ).toEqual([25, 75]);
+
+    expect(
+      adjustLayoutByDelta({
+        delta: -36,
+        groupSizePixels: 100,
+        layout: [50, 50],
+        panelConstraints: [
+          {
+            collapsedSizePercentage: 5,
+            collapsible: true,
+            minSizePercentage: 25,
+          },
+          {},
+        ],
+        pivotIndices: [0, 1],
+        trigger: "imperative-api",
+      })
     ).toEqual([5, 95]);
   });
 
@@ -420,6 +460,50 @@ describe("adjustLayoutByDelta", () => {
     ).toEqual([25, 75]);
   });
 
+  // Edge case
+  // Keyboard interactions should always expand a collapsed panel
+  it("[1--,2]", () => {
+    expect(
+      adjustLayoutByDelta({
+        delta: -5,
+        groupSizePixels: NaN,
+        layout: [90, 10],
+        panelConstraints: [
+          {},
+          {
+            collapsedSizePercentage: 10,
+            collapsible: true,
+            minSizePercentage: 25,
+          },
+        ],
+        pivotIndices: [0, 1],
+        trigger: "keyboard",
+      })
+    ).toEqual([75, 25]);
+  });
+
+  // Edge case
+  // Keyboard interactions should always collapse a collapsible panel once it's at the minimum size
+  it("[1++,2]", () => {
+    expect(
+      adjustLayoutByDelta({
+        delta: -5,
+        groupSizePixels: NaN,
+        layout: [25, 75],
+        panelConstraints: [
+          {
+            collapsedSizePercentage: 10,
+            collapsible: true,
+            minSizePercentage: 25,
+          },
+          {},
+        ],
+        pivotIndices: [0, 1],
+        trigger: "keyboard",
+      })
+    ).toEqual([10, 90]);
+  });
+
   it("[1++,2,3]", () => {
     expect(
       adjustLayoutByDelta({
@@ -722,7 +806,7 @@ describe("adjustLayoutByDelta", () => {
         pivotIndices: [0, 1],
         trigger: "imperative-api",
       })
-    ).toEqual([45, 50, 5]);
+    ).toEqual([25, 50, 25]);
   });
 
   it("[1,2++,3]", () => {
@@ -834,6 +918,21 @@ describe("adjustLayoutByDelta", () => {
         pivotIndices: [1, 2],
         trigger: "imperative-api",
       })
+    ).toEqual([25, 55, 20]);
+
+    expect(
+      adjustLayoutByDelta({
+        delta: 16,
+        groupSizePixels: 100,
+        layout: [25, 50, 25],
+        panelConstraints: [
+          {},
+          {},
+          { collapsible: true, minSizePercentage: 20 },
+        ],
+        pivotIndices: [1, 2],
+        trigger: "imperative-api",
+      })
     ).toEqual([25, 75, 0]);
   });
 
@@ -907,15 +1006,53 @@ describe("adjustLayoutByDelta", () => {
         pivotIndices: [1, 2],
         trigger: "imperative-api",
       })
+    ).toEqual([20, 20, 60]);
+
+    expect(
+      adjustLayoutByDelta({
+        delta: -40,
+        groupSizePixels: 100,
+        layout: [25, 50, 25],
+        panelConstraints: [
+          {},
+          {
+            collapsedSizePercentage: 5,
+            collapsible: true,
+            minSizePercentage: 20,
+          },
+          {},
+        ],
+        pivotIndices: [1, 2],
+        trigger: "imperative-api",
+      })
     ).toEqual([25, 5, 70]);
   });
 
   it("[1,2--,3]", () => {
     expect(
       adjustLayoutByDelta({
-        delta: -60,
+        delta: -10,
         groupSizePixels: 100,
-        layout: [25, 50, 25],
+        layout: [25, 0, 75],
+        panelConstraints: [
+          {
+            collapsedSizePercentage: 5,
+            collapsible: true,
+            minSizePercentage: 20,
+          },
+          {},
+          {},
+        ],
+        pivotIndices: [1, 2],
+        trigger: "imperative-api",
+      })
+    ).toEqual([20, 0, 80]);
+
+    expect(
+      adjustLayoutByDelta({
+        delta: -20,
+        groupSizePixels: 100,
+        layout: [25, 0, 75],
         panelConstraints: [
           {
             collapsedSizePercentage: 5,
@@ -1041,6 +1178,34 @@ describe("adjustLayoutByDelta", () => {
         pivotIndices: [0, 1],
         trigger: "imperative-api",
       })
+    ).toEqual([35, 20, 20, 25]);
+
+    expect(
+      adjustLayoutByDelta({
+        delta: 15,
+        groupSizePixels: 100,
+        layout: [25, 25, 25, 25],
+        panelConstraints: [
+          {},
+          {
+            collapsedSizePercentage: 5,
+            collapsible: true,
+            minSizePercentage: 20,
+          },
+          {
+            collapsedSizePercentage: 5,
+            collapsible: true,
+            minSizePercentage: 20,
+          },
+          {
+            collapsedSizePercentage: 5,
+            collapsible: true,
+            minSizePercentage: 20,
+          },
+        ],
+        pivotIndices: [0, 1],
+        trigger: "imperative-api",
+      })
     ).toEqual([45, 5, 25, 25]);
   });
 
@@ -1153,7 +1318,7 @@ describe("adjustLayoutByDelta", () => {
         pivotIndices: [0, 1],
         trigger: "imperative-api",
       })
-    ).toEqual([15, 35, 25, 25]);
+    ).toEqual([0, 35, 40, 25]);
   });
 
   it("[1--,2,3,4]", () => {
@@ -1175,6 +1340,26 @@ describe("adjustLayoutByDelta", () => {
         pivotIndices: [0, 1],
         trigger: "imperative-api",
       })
+    ).toEqual([20, 30, 25, 25]);
+
+    expect(
+      adjustLayoutByDelta({
+        delta: -15,
+        groupSizePixels: 100,
+        layout: [25, 25, 25, 25],
+        panelConstraints: [
+          {
+            collapsedSizePercentage: 5,
+            collapsible: true,
+            minSizePercentage: 20,
+          },
+          {},
+          {},
+          {},
+        ],
+        pivotIndices: [0, 1],
+        trigger: "imperative-api",
+      })
     ).toEqual([5, 45, 25, 25]);
   });
 
@@ -1197,6 +1382,26 @@ describe("adjustLayoutByDelta", () => {
         pivotIndices: [0, 1],
         trigger: "imperative-api",
       })
+    ).toEqual([20, 30, 25, 25]);
+
+    expect(
+      adjustLayoutByDelta({
+        delta: -15,
+        groupSizePixels: 100,
+        layout: [25, 25, 25, 25],
+        panelConstraints: [
+          {
+            collapsedSizePercentage: 5,
+            collapsible: true,
+            minSizePercentage: 20,
+          },
+          { maxSizePercentage: 35 },
+          {},
+          {},
+        ],
+        pivotIndices: [0, 1],
+        trigger: "imperative-api",
+      })
     ).toEqual([5, 35, 35, 25]);
   });
 
@@ -1256,7 +1461,9 @@ describe("adjustLayoutByDelta", () => {
     ).toEqual([20, 30, 25, 25]);
   });
 
+  // Edge case (issues/210)
   it("[1--,2,3,4]", () => {
+    // If the size doesn't drop below the halfway point, the panel should not collapse
     expect(
       adjustLayoutByDelta({
         delta: -10,
@@ -1275,6 +1482,29 @@ describe("adjustLayoutByDelta", () => {
         pivotIndices: [0, 1],
         trigger: "imperative-api",
       })
+    ).toEqual([20, 30, 25, 25]);
+
+    // If the size drops below the halfway point, the panel should collapse
+    // In this case it needs to add sizes to multiple other panels in order to collapse
+    // because the nearest neighbor panel's max size constraints won't allow it to expand to cover all of the difference
+    expect(
+      adjustLayoutByDelta({
+        delta: -20,
+        groupSizePixels: 100,
+        layout: [25, 25, 25, 25],
+        panelConstraints: [
+          {
+            collapsedSizePercentage: 5,
+            collapsible: true,
+            minSizePercentage: 20,
+          },
+          { maxSizePercentage: 35 },
+          { maxSizePercentage: 35 },
+          { maxSizePercentage: 35 },
+        ],
+        pivotIndices: [0, 1],
+        trigger: "imperative-api",
+      })
     ).toEqual([5, 35, 35, 25]);
   });
 
@@ -1327,7 +1557,7 @@ describe("adjustLayoutByDelta", () => {
         pivotIndices: [1, 2],
         trigger: "imperative-api",
       })
-    ).toEqual([25, 35, 15, 25]);
+    ).toEqual([65, 35, 0, 0]);
   });
 
   it("[1,2++,3,4]", () => {
@@ -1581,7 +1811,7 @@ describe("adjustLayoutByDelta", () => {
         pivotIndices: [2, 3],
         trigger: "imperative-api",
       })
-    ).toEqual([25, 25, 40, 10]);
+    ).toEqual([25, 35, 40, 0]);
   });
 
   it("[1,2,3++,4]", () => {

package/src/utils/adjustLayoutByDelta.ts

@@ -1,9 +1,8 @@
+import { PanelConstraints } from "../Panel";
 import { computePercentagePanelConstraints } from "./computePercentagePanelConstraints";
+import { fuzzyCompareNumbers } from "./numbers/fuzzyCompareNumbers";
 import { fuzzyNumbersEqual } from "./numbers/fuzzyNumbersEqual";
 import { resizePanel } from "./resizePanel";
-import { PanelConstraints } from "../Panel";
-
-let isCheckingForInfiniteLoop = false;
 
 // All units must be in percentages; pixel values should be pre-converted
 export function adjustLayoutByDelta({
@@ -29,59 +28,124 @@ export function adjustLayoutByDelta({
 
   let deltaApplied = 0;
 
+  //const DEBUG = [];
+  //DEBUG.push(`adjustLayoutByDelta() ${prevLayout.join(", ")}`);
+  //DEBUG.push(`  delta: ${delta}`);
+  //DEBUG.push(`  pivotIndices: ${pivotIndices.join(", ")}`);
+  //DEBUG.push(`  trigger: ${trigger}`);
+  //DEBUG.push("");
+
   // A resizing panel affects the panels before or after it.
   //
-  // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.
+  // A negative delta means the panel(s) immediately after the resize handle should grow/expand by decreasing its offset.
   // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.
   //
-  // A positive delta means the panel immediately before the resizer should "expand".
-  // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.
+  // A positive delta means the panel(s) immediately before the resize handle should "expand".
+  // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resize handle.
 
-  // First, check the panel we're pivoting around;
-  // We should only expand or contract by as much as its constraints allow
   {
-    const pivotIndex = delta < 0 ? pivotIndices[1]! : pivotIndices[0]!;
-    const initialSize = nextLayout[pivotIndex]!;
+    // If this is a resize triggered by a keyboard event, our logic for expanding/collapsing is different.
+    // We no longer check the halfway threshold because this may prevent the panel from expanding at all.
+    if (trigger === "keyboard") {
+      {
+        // Check if we should expand a collapsed panel
+        const index = delta < 0 ? pivotIndices[1]! : pivotIndices[0]!;
+        const constraints = panelConstraints[index]!;
+        //DEBUG.push(`edge case check 1: ${index}`);
+        //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
+        if (constraints.collapsible) {
+          const prevSize = prevLayout[index]!;
+          const { collapsedSizePercentage, minSizePercentage } =
+            computePercentagePanelConstraints(
+              panelConstraints,
+              index,
+              groupSizePixels
+            );
+
+          if (fuzzyNumbersEqual(prevSize, collapsedSizePercentage)) {
+            const localDelta = minSizePercentage - prevSize;
+            //DEBUG.push(`  -> expand delta: ${localDelta}`);
+
+            if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
+              delta = delta < 0 ? 0 - localDelta : localDelta;
+              //DEBUG.push(`  -> delta: ${delta}`);
+            }
+          }
+        }
+      }
 
-    const { collapsible } = panelConstraints[pivotIndex]!;
-    const { collapsedSizePercentage, minSizePercentage } =
-      computePercentagePanelConstraints(
-        panelConstraints,
-        pivotIndex,
-        groupSizePixels
-      );
-
-    const isCollapsed =
-      collapsible && fuzzyNumbersEqual(initialSize, collapsedSizePercentage);
-
-    let unsafeSize = initialSize + Math.abs(delta);
-    if (isCollapsed) {
-      switch (trigger) {
-        case "keyboard":
-          if (minSizePercentage > unsafeSize) {
-            unsafeSize = minSizePercentage;
+      {
+        // Check if we should collapse a panel at its minimum size
+        const index = delta < 0 ? pivotIndices[0]! : pivotIndices[1]!;
+        const constraints = panelConstraints[index]!;
+        //DEBUG.push(`edge case check 2: ${index}`);
+        //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
+        if (constraints.collapsible) {
+          const prevSize = prevLayout[index]!;
+          const { collapsedSizePercentage, minSizePercentage } =
+            computePercentagePanelConstraints(
+              panelConstraints,
+              index,
+              groupSizePixels
+            );
+
+          if (fuzzyNumbersEqual(prevSize, minSizePercentage)) {
+            const localDelta = prevSize - collapsedSizePercentage;
+            //DEBUG.push(`  -> expand delta: ${localDelta}`);
+
+            if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
+              delta = delta < 0 ? 0 - localDelta : localDelta;
+              //DEBUG.push(`  -> delta: ${delta}`);
+            }
           }
+        }
       }
     }
+    //DEBUG.push("");
+  }
 
-    const safeSize = resizePanel({
-      groupSizePixels,
-      panelConstraints,
-      panelIndex: pivotIndex,
-      size: unsafeSize,
-    });
+  {
+    // Pre-calculate max available delta in the opposite direction of our pivot.
+    // This will be the maximum amount we're allowed to expand/contract the panels in the primary direction.
+    // If this amount is less than the requested delta, adjust the requested delta.
+    // If this amount is greater than the requested delta, that's useful information too–
+    // as an expanding panel might change from collapsed to min size.
+
+    const increment = delta < 0 ? 1 : -1;
+
+    let index = delta < 0 ? pivotIndices[1]! : pivotIndices[0]!;
+    let maxAvailableDelta = 0;
 
-    if (fuzzyNumbersEqual(initialSize, safeSize)) {
-      // If there's no room for the pivot panel to grow, we should ignore this change
-      return nextLayout;
-    } else {
-      delta = delta < 0 ? initialSize - safeSize : safeSize - initialSize;
+    //DEBUG.push("pre calc...");
+    while (true) {
+      const prevSize = prevLayout[index];
+      const maxSafeSize = resizePanel({
+        groupSizePixels,
+        panelConstraints,
+        panelIndex: index,
+        size: 100,
+      });
+      const delta = maxSafeSize - prevSize;
+      //DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
+
+      maxAvailableDelta += delta;
+      index += increment;
+
+      if (index < 0 || index >= panelConstraints.length) {
+        break;
+      }
     }
+
+    //DEBUG.push(`  -> max available delta: ${maxAvailableDelta}`);
+    const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
+    delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
+    //DEBUG.push(`  -> adjusted delta: ${delta}`);
+    //DEBUG.push("");
   }
 
-  // Delta added to a panel needs to be subtracted from other panels
-  // within the constraints that those panels allow
   {
+    // Delta added to a panel needs to be subtracted from other panels (within the constraints that those panels allow).
+
     const pivotIndex = delta < 0 ? pivotIndices[0]! : pivotIndices[1]!;
     let index = pivotIndex;
     while (index >= 0 && index < panelConstraints.length) {
@@ -89,8 +153,7 @@ export function adjustLayoutByDelta({
 
       const prevSize = prevLayout[index]!;
       const unsafeSize = prevSize - deltaRemaining;
-
-      let safeSize = resizePanel({
+      const safeSize = resizePanel({
         groupSizePixels,
         panelConstraints,
         panelIndex: index,
@@ -120,14 +183,19 @@ export function adjustLayoutByDelta({
       }
     }
   }
+  //DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
+  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+  //DEBUG.push("");
 
   // If we were unable to resize any of the panels panels, return the previous state.
   // This will essentially bailout and ignore e.g. drags past a panel's boundaries
   if (fuzzyNumbersEqual(deltaApplied, 0)) {
+    //console.log(DEBUG.join("\n"));
     return prevLayout;
   }
 
   {
+    // Now distribute the applied delta to the panels in the other direction
     const pivotIndex = delta < 0 ? pivotIndices[1]! : pivotIndices[0]!;
 
     const unsafeSize = prevLayout[pivotIndex]! + deltaApplied;
@@ -173,38 +241,20 @@ export function adjustLayoutByDelta({
           index++;
         }
       }
+    }
+  }
+  //DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
+  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+  //DEBUG.push("");
 
-      // If we can't redistribute, this layout is invalid;
-      // There may be an incremental layout that is valid though
-      if (!fuzzyNumbersEqual(deltaRemaining, 0)) {
-        let didSetInfiniteLoopCheckCounter = false;
-        if (isCheckingForInfiniteLoop === null) {
-          didSetInfiniteLoopCheckCounter = true;
-          isCheckingForInfiniteLoop = true;
-        }
+  const totalSize = nextLayout.reduce((total, size) => size + total, 0);
+  deltaApplied = 100 - totalSize;
+  //DEBUG.push(`total size: ${totalSize}`);
+  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+  //console.log(DEBUG.join("\n"));
 
-        try {
-          return adjustLayoutByDelta({
-            delta: delta < 0 ? delta + 1 : delta - 1,
-            groupSizePixels,
-            layout: prevLayout,
-            panelConstraints,
-            pivotIndices,
-            trigger,
-          });
-        } catch (error) {
-          if (error instanceof RangeError) {
-            console.error(`Could not apply delta ${delta} to layout`);
-
-            return prevLayout;
-          }
-        } finally {
-          if (didSetInfiniteLoopCheckCounter) {
-            isCheckingForInfiniteLoop = false;
-          }
-        }
-      }
-    }
+  if (!fuzzyNumbersEqual(totalSize, 100)) {
+    return prevLayout;
   }
 
   return nextLayout;