react-resizable-panels 2.0.11 → 2.0.12

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

@@ -696,6 +696,20 @@ function fuzzyNumbersEqual(actual, expected, fractionDigits) {
   return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
 }
 
+function fuzzyLayoutsEqual(actual, expected, fractionDigits) {
+  if (actual.length !== expected.length) {
+    return false;
+  }
+  for (let index = 0; index < actual.length; index++) {
+    const actualSize = actual[index];
+    const expectedSize = expected[index];
+    if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
+      return false;
+    }
+  }
+  return true;
+}
+
 // Panel size must be in percentages; pixel values should be pre-converted
 function resizePanel({
   panelConstraints: panelConstraintsArray,
@@ -731,26 +745,29 @@ function resizePanel({
 // All units must be in percentages; pixel values should be pre-converted
 function adjustLayoutByDelta({
   delta,
-  layout: prevLayout,
+  initialLayout,
   panelConstraints: panelConstraintsArray,
   pivotIndices,
+  prevLayout,
   trigger
 }) {
   if (fuzzyNumbersEqual(delta, 0)) {
-    return prevLayout;
+    return initialLayout;
   }
-  const nextLayout = [...prevLayout];
+  const nextLayout = [...initialLayout];
   const [firstPivotIndex, secondPivotIndex] = pivotIndices;
   assert(firstPivotIndex != null, "Invalid first pivot index");
   assert(secondPivotIndex != null, "Invalid second pivot index");
   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("");
+  // const DEBUG = [];
+  // DEBUG.push(`adjustLayoutByDelta()`);
+  // DEBUG.push(`  initialLayout: ${initialLayout.join(", ")}`);
+  // DEBUG.push(`  prevLayout: ${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.
   //
@@ -775,18 +792,18 @@ function adjustLayoutByDelta({
           minSize = 0
         } = panelConstraints;
 
-        //DEBUG.push(`edge case check 1: ${index}`);
-        //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
+        // DEBUG.push(`edge case check 1: ${index}`);
+        // DEBUG.push(`  -> collapsible? ${collapsible}`);
         if (collapsible) {
-          const prevSize = prevLayout[index];
+          const prevSize = initialLayout[index];
           assert(prevSize != null, `Previous layout not found for panel index ${index}`);
           if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
             const localDelta = minSize - prevSize;
-            //DEBUG.push(`  -> expand delta: ${localDelta}`);
+            // DEBUG.push(`  -> expand delta: ${localDelta}`);
 
             if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
               delta = delta < 0 ? 0 - localDelta : localDelta;
-              //DEBUG.push(`  -> delta: ${delta}`);
+              // DEBUG.push(`  -> delta: ${delta}`);
             }
           }
         }
@@ -803,24 +820,24 @@ function adjustLayoutByDelta({
           minSize = 0
         } = panelConstraints;
 
-        //DEBUG.push(`edge case check 2: ${index}`);
-        //DEBUG.push(`  -> collapsible? ${collapsible}`);
+        // DEBUG.push(`edge case check 2: ${index}`);
+        // DEBUG.push(`  -> collapsible? ${collapsible}`);
         if (collapsible) {
-          const prevSize = prevLayout[index];
+          const prevSize = initialLayout[index];
           assert(prevSize != null, `Previous layout not found for panel index ${index}`);
           if (fuzzyNumbersEqual(prevSize, minSize)) {
             const localDelta = prevSize - collapsedSize;
-            //DEBUG.push(`  -> expand delta: ${localDelta}`);
+            // DEBUG.push(`  -> expand delta: ${localDelta}`);
 
             if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
               delta = delta < 0 ? 0 - localDelta : localDelta;
-              //DEBUG.push(`  -> delta: ${delta}`);
+              // DEBUG.push(`  -> delta: ${delta}`);
             }
           }
         }
       }
     }
-    //DEBUG.push("");
+    // DEBUG.push("");
   }
 
   {
@@ -834,9 +851,9 @@ function adjustLayoutByDelta({
     let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
     let maxAvailableDelta = 0;
 
-    //DEBUG.push("pre calc...");
+    // DEBUG.push("pre calc...");
     while (true) {
-      const prevSize = prevLayout[index];
+      const prevSize = initialLayout[index];
       assert(prevSize != null, `Previous layout not found for panel index ${index}`);
       const maxSafeSize = resizePanel({
         panelConstraints: panelConstraintsArray,
@@ -844,7 +861,7 @@ function adjustLayoutByDelta({
         size: 100
       });
       const delta = maxSafeSize - prevSize;
-      //DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
+      // DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
 
       maxAvailableDelta += delta;
       index += increment;
@@ -853,11 +870,11 @@ function adjustLayoutByDelta({
       }
     }
 
-    //DEBUG.push(`  -> max available delta: ${maxAvailableDelta}`);
+    // 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("");
+    // DEBUG.push(`  -> adjusted delta: ${delta}`);
+    // DEBUG.push("");
   }
 
   {
@@ -867,7 +884,7 @@ function adjustLayoutByDelta({
     let index = pivotIndex;
     while (index >= 0 && index < panelConstraintsArray.length) {
       const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
-      const prevSize = prevLayout[index];
+      const prevSize = initialLayout[index];
       assert(prevSize != null, `Previous layout not found for panel index ${index}`);
       const unsafeSize = prevSize - deltaRemaining;
       const safeSize = resizePanel({
@@ -891,20 +908,22 @@ function adjustLayoutByDelta({
       }
     }
   }
-  //DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
-  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
-  //DEBUG.push("");
+  // 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"));
+  if (fuzzyLayoutsEqual(prevLayout, nextLayout)) {
+    // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
+    // console.log(DEBUG.join("\n"));
+
     return prevLayout;
   }
   {
     // Now distribute the applied delta to the panels in the other direction
     const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
-    const prevSize = prevLayout[pivotIndex];
+    const prevSize = initialLayout[pivotIndex];
     assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
     const unsafeSize = prevSize + deltaApplied;
     const safeSize = resizePanel({
@@ -945,17 +964,23 @@ function adjustLayoutByDelta({
       }
     }
   }
-  //DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
-  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
-  //DEBUG.push("");
+  // DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
+  // DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+  // DEBUG.push("");
 
   const totalSize = nextLayout.reduce((total, size) => size + total, 0);
-  //DEBUG.push(`total size: ${totalSize}`);
-  //console.log(DEBUG.join("\n"));
+  // DEBUG.push(`total size: ${totalSize}`);
 
+  // If our new layout doesn't add up to 100%, that means the requested delta can't be applied
+  // In that case, fall back to our most recent valid layout
   if (!fuzzyNumbersEqual(totalSize, 100)) {
+    // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
+    // console.log(DEBUG.join("\n"));
+
     return prevLayout;
   }
+
+  // console.log(DEBUG.join("\n"));
   return nextLayout;
 }
 
@@ -1135,9 +1160,10 @@ function useWindowSplitterPanelGroupBehavior({
                 if (size != null && collapsible) {
                   const nextLayout = adjustLayoutByDelta({
                     delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
-                    layout,
+                    initialLayout: layout,
                     panelConstraints: panelDataArray.map(panelData => panelData.constraints),
                     pivotIndices: determinePivotIndices(groupId, handleId, panelGroupElement),
+                    prevLayout: layout,
                     trigger: "keyboard"
                   });
                   if (layout !== nextLayout) {
@@ -1679,9 +1705,10 @@ function PanelGroupWithForwardedRef({
         const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
-          layout: prevLayout,
+          initialLayout: prevLayout,
           panelConstraints: panelConstraintsArray,
           pivotIndices,
+          prevLayout,
           trigger: "imperative-api"
         });
         if (!compareLayouts(prevLayout, nextLayout)) {
@@ -1721,9 +1748,10 @@ function PanelGroupWithForwardedRef({
         const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
-          layout: prevLayout,
+          initialLayout: prevLayout,
           panelConstraints: panelConstraintsArray,
           pivotIndices,
+          prevLayout,
           trigger: "imperative-api"
         });
         if (!compareLayouts(prevLayout, nextLayout)) {
@@ -1905,9 +1933,10 @@ function PanelGroupWithForwardedRef({
       const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
       const nextLayout = adjustLayoutByDelta({
         delta,
-        layout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
+        initialLayout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
         panelConstraints,
         pivotIndices,
+        prevLayout,
         trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
       });
       const layoutChanged = !compareLayouts(prevLayout, nextLayout);
@@ -1963,9 +1992,10 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
     const nextLayout = adjustLayoutByDelta({
       delta,
-      layout: prevLayout,
+      initialLayout: prevLayout,
       panelConstraints: panelConstraintsArray,
       pivotIndices,
+      prevLayout,
       trigger: "imperative-api"
     });
     if (!compareLayouts(prevLayout, nextLayout)) {

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

@@ -707,6 +707,20 @@ function fuzzyNumbersEqual(actual, expected, fractionDigits) {
   return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
 }
 
+function fuzzyLayoutsEqual(actual, expected, fractionDigits) {
+  if (actual.length !== expected.length) {
+    return false;
+  }
+  for (let index = 0; index < actual.length; index++) {
+    const actualSize = actual[index];
+    const expectedSize = expected[index];
+    if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
+      return false;
+    }
+  }
+  return true;
+}
+
 // Panel size must be in percentages; pixel values should be pre-converted
 function resizePanel({
   panelConstraints: panelConstraintsArray,
@@ -742,26 +756,29 @@ function resizePanel({
 // All units must be in percentages; pixel values should be pre-converted
 function adjustLayoutByDelta({
   delta,
-  layout: prevLayout,
+  initialLayout,
   panelConstraints: panelConstraintsArray,
   pivotIndices,
+  prevLayout,
   trigger
 }) {
   if (fuzzyNumbersEqual(delta, 0)) {
-    return prevLayout;
+    return initialLayout;
   }
-  const nextLayout = [...prevLayout];
+  const nextLayout = [...initialLayout];
   const [firstPivotIndex, secondPivotIndex] = pivotIndices;
   assert(firstPivotIndex != null, "Invalid first pivot index");
   assert(secondPivotIndex != null, "Invalid second pivot index");
   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("");
+  // const DEBUG = [];
+  // DEBUG.push(`adjustLayoutByDelta()`);
+  // DEBUG.push(`  initialLayout: ${initialLayout.join(", ")}`);
+  // DEBUG.push(`  prevLayout: ${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.
   //
@@ -786,18 +803,18 @@ function adjustLayoutByDelta({
           minSize = 0
         } = panelConstraints;
 
-        //DEBUG.push(`edge case check 1: ${index}`);
-        //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
+        // DEBUG.push(`edge case check 1: ${index}`);
+        // DEBUG.push(`  -> collapsible? ${collapsible}`);
         if (collapsible) {
-          const prevSize = prevLayout[index];
+          const prevSize = initialLayout[index];
           assert(prevSize != null, `Previous layout not found for panel index ${index}`);
           if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
             const localDelta = minSize - prevSize;
-            //DEBUG.push(`  -> expand delta: ${localDelta}`);
+            // DEBUG.push(`  -> expand delta: ${localDelta}`);
 
             if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
               delta = delta < 0 ? 0 - localDelta : localDelta;
-              //DEBUG.push(`  -> delta: ${delta}`);
+              // DEBUG.push(`  -> delta: ${delta}`);
             }
           }
         }
@@ -814,24 +831,24 @@ function adjustLayoutByDelta({
           minSize = 0
         } = panelConstraints;
 
-        //DEBUG.push(`edge case check 2: ${index}`);
-        //DEBUG.push(`  -> collapsible? ${collapsible}`);
+        // DEBUG.push(`edge case check 2: ${index}`);
+        // DEBUG.push(`  -> collapsible? ${collapsible}`);
         if (collapsible) {
-          const prevSize = prevLayout[index];
+          const prevSize = initialLayout[index];
           assert(prevSize != null, `Previous layout not found for panel index ${index}`);
           if (fuzzyNumbersEqual(prevSize, minSize)) {
             const localDelta = prevSize - collapsedSize;
-            //DEBUG.push(`  -> expand delta: ${localDelta}`);
+            // DEBUG.push(`  -> expand delta: ${localDelta}`);
 
             if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
               delta = delta < 0 ? 0 - localDelta : localDelta;
-              //DEBUG.push(`  -> delta: ${delta}`);
+              // DEBUG.push(`  -> delta: ${delta}`);
             }
           }
         }
       }
     }
-    //DEBUG.push("");
+    // DEBUG.push("");
   }
 
   {
@@ -845,9 +862,9 @@ function adjustLayoutByDelta({
     let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
     let maxAvailableDelta = 0;
 
-    //DEBUG.push("pre calc...");
+    // DEBUG.push("pre calc...");
     while (true) {
-      const prevSize = prevLayout[index];
+      const prevSize = initialLayout[index];
       assert(prevSize != null, `Previous layout not found for panel index ${index}`);
       const maxSafeSize = resizePanel({
         panelConstraints: panelConstraintsArray,
@@ -855,7 +872,7 @@ function adjustLayoutByDelta({
         size: 100
       });
       const delta = maxSafeSize - prevSize;
-      //DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
+      // DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
 
       maxAvailableDelta += delta;
       index += increment;
@@ -864,11 +881,11 @@ function adjustLayoutByDelta({
       }
     }
 
-    //DEBUG.push(`  -> max available delta: ${maxAvailableDelta}`);
+    // 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("");
+    // DEBUG.push(`  -> adjusted delta: ${delta}`);
+    // DEBUG.push("");
   }
 
   {
@@ -878,7 +895,7 @@ function adjustLayoutByDelta({
     let index = pivotIndex;
     while (index >= 0 && index < panelConstraintsArray.length) {
       const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
-      const prevSize = prevLayout[index];
+      const prevSize = initialLayout[index];
       assert(prevSize != null, `Previous layout not found for panel index ${index}`);
       const unsafeSize = prevSize - deltaRemaining;
       const safeSize = resizePanel({
@@ -902,20 +919,22 @@ function adjustLayoutByDelta({
       }
     }
   }
-  //DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
-  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
-  //DEBUG.push("");
+  // 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"));
+  if (fuzzyLayoutsEqual(prevLayout, nextLayout)) {
+    // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
+    // console.log(DEBUG.join("\n"));
+
     return prevLayout;
   }
   {
     // Now distribute the applied delta to the panels in the other direction
     const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
-    const prevSize = prevLayout[pivotIndex];
+    const prevSize = initialLayout[pivotIndex];
     assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
     const unsafeSize = prevSize + deltaApplied;
     const safeSize = resizePanel({
@@ -956,17 +975,23 @@ function adjustLayoutByDelta({
       }
     }
   }
-  //DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
-  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
-  //DEBUG.push("");
+  // DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
+  // DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+  // DEBUG.push("");
 
   const totalSize = nextLayout.reduce((total, size) => size + total, 0);
-  //DEBUG.push(`total size: ${totalSize}`);
-  //console.log(DEBUG.join("\n"));
+  // DEBUG.push(`total size: ${totalSize}`);
 
+  // If our new layout doesn't add up to 100%, that means the requested delta can't be applied
+  // In that case, fall back to our most recent valid layout
   if (!fuzzyNumbersEqual(totalSize, 100)) {
+    // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
+    // console.log(DEBUG.join("\n"));
+
     return prevLayout;
   }
+
+  // console.log(DEBUG.join("\n"));
   return nextLayout;
 }
 
@@ -1156,9 +1181,10 @@ function useWindowSplitterPanelGroupBehavior({
                 if (size != null && collapsible) {
                   const nextLayout = adjustLayoutByDelta({
                     delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
-                    layout,
+                    initialLayout: layout,
                     panelConstraints: panelDataArray.map(panelData => panelData.constraints),
                     pivotIndices: determinePivotIndices(groupId, handleId, panelGroupElement),
+                    prevLayout: layout,
                     trigger: "keyboard"
                   });
                   if (layout !== nextLayout) {
@@ -1790,9 +1816,10 @@ function PanelGroupWithForwardedRef({
         const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
-          layout: prevLayout,
+          initialLayout: prevLayout,
           panelConstraints: panelConstraintsArray,
           pivotIndices,
+          prevLayout,
           trigger: "imperative-api"
         });
         if (!compareLayouts(prevLayout, nextLayout)) {
@@ -1832,9 +1859,10 @@ function PanelGroupWithForwardedRef({
         const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
-          layout: prevLayout,
+          initialLayout: prevLayout,
           panelConstraints: panelConstraintsArray,
           pivotIndices,
+          prevLayout,
           trigger: "imperative-api"
         });
         if (!compareLayouts(prevLayout, nextLayout)) {
@@ -2016,9 +2044,10 @@ function PanelGroupWithForwardedRef({
       const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
       const nextLayout = adjustLayoutByDelta({
         delta,
-        layout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
+        initialLayout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
         panelConstraints,
         pivotIndices,
+        prevLayout,
         trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
       });
       const layoutChanged = !compareLayouts(prevLayout, nextLayout);
@@ -2074,9 +2103,10 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
     const nextLayout = adjustLayoutByDelta({
       delta,
-      layout: prevLayout,
+      initialLayout: prevLayout,
       panelConstraints: panelConstraintsArray,
       pivotIndices,
+      prevLayout,
       trigger: "imperative-api"
     });
     if (!compareLayouts(prevLayout, nextLayout)) {