react-resizable-panels 2.0.11 → 2.0.13

package/src/utils/adjustLayoutByDelta.ts

@@ -1,28 +1,31 @@
 import { PanelConstraints } from "../Panel";
 import { assert } from "./assert";
 import { fuzzyCompareNumbers } from "./numbers/fuzzyCompareNumbers";
+import { fuzzyLayoutsEqual } from "./numbers/fuzzyLayoutsEqual";
 import { fuzzyNumbersEqual } from "./numbers/fuzzyNumbersEqual";
 import { resizePanel } from "./resizePanel";
 
 // All units must be in percentages; pixel values should be pre-converted
 export function adjustLayoutByDelta({
   delta,
-  layout: prevLayout,
+  initialLayout,
   panelConstraints: panelConstraintsArray,
   pivotIndices,
+  prevLayout,
   trigger,
 }: {
   delta: number;
-  layout: number[];
+  initialLayout: number[];
   panelConstraints: PanelConstraints[];
   pivotIndices: number[];
+  prevLayout: number[];
   trigger: "imperative-api" | "keyboard" | "mouse-or-touch";
 }): number[] {
   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");
@@ -30,12 +33,14 @@ 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("");
+  // 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.
   //
@@ -64,10 +69,10 @@ export 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}`
@@ -75,11 +80,11 @@ export function adjustLayoutByDelta({
 
           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}`);
             }
           }
         }
@@ -100,10 +105,10 @@ export 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}`
@@ -111,17 +116,17 @@ export function adjustLayoutByDelta({
 
           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("");
   }
 
   {
@@ -136,9 +141,9 @@ export 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}`
@@ -150,7 +155,7 @@ export function adjustLayoutByDelta({
         size: 100,
       });
       const delta = maxSafeSize - prevSize;
-      //DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
+      // DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
 
       maxAvailableDelta += delta;
       index += increment;
@@ -160,11 +165,11 @@ export 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("");
   }
 
   {
@@ -175,7 +180,7 @@ export function adjustLayoutByDelta({
     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}`
@@ -211,14 +216,16 @@ export 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;
   }
 
@@ -226,7 +233,7 @@ export function adjustLayoutByDelta({
     // 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}`
@@ -280,17 +287,22 @@ export 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;
 }

package/src/utils/numbers/fuzzyLayoutsEqual.ts

@@ -0,0 +1,22 @@
+import { fuzzyNumbersEqual } from "./fuzzyNumbersEqual";
+
+export function fuzzyLayoutsEqual(
+  actual: number[],
+  expected: number[],
+  fractionDigits?: number
+): boolean {
+  if (actual.length !== expected.length) {
+    return false;
+  }
+
+  for (let index = 0; index < actual.length; index++) {
+    const actualSize = actual[index] as number;
+    const expectedSize = expected[index] as number;
+
+    if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/vendor/stacking-order.ts

@@ -1,5 +1,6 @@
 // Forked from NPM stacking-order@2.0.0
 // Background at https://github.com/Rich-Harris/stacking-order/issues/3
+// Background at https://github.com/Rich-Harris/stacking-order/issues/6
 
 import { assert } from "..";
 
@@ -61,7 +62,8 @@ const props =
 
 /** @param {HTMLElement} node */
 function is_flex_item(node: HTMLElement) {
-  const display = getComputedStyle(get_parent(node)).display;
+  // @ts-ignore
+  const display = getComputedStyle(get_parent(node) ?? node).display;
   return display === "flex" || display === "inline-flex";
 }
 
@@ -115,11 +117,12 @@ function get_z_index(node: HTMLElement | null) {
 }
 
 /** @param {HTMLElement} node */
-function get_ancestors(node: HTMLElement) {
+function get_ancestors(node: HTMLElement | null) {
   const ancestors = [];
 
   while (node) {
     ancestors.push(node);
+    // @ts-ignore
     node = get_parent(node);
   }
 
@@ -128,6 +131,9 @@ function get_ancestors(node: HTMLElement) {
 
 /** @param {HTMLElement} node */
 function get_parent(node: HTMLElement) {
-  // @ts-ignore
-  return node.parentNode?.host || node.parentNode;
+  const { parentNode } = node;
+  if (parentNode && parentNode instanceof ShadowRoot) {
+    return parentNode.host
+  }
+  return parentNode;
 }