react-resizable-panels 2.0.10 → 2.0.12

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/events/getResizeEventCoordinates.ts

@@ -4,15 +4,15 @@ import { isMouseEvent, isTouchEvent } from ".";
 export function getResizeEventCoordinates(event: ResizeEvent) {
   if (isMouseEvent(event)) {
     return {
-      x: event.pageX,
-      y: event.pageY,
+      x: event.clientX,
+      y: event.clientY,
     };
   } else if (isTouchEvent(event)) {
     const touch = event.touches[0];
-    if (touch && touch.pageX && touch.pageY) {
+    if (touch && touch.clientX && touch.clientY) {
       return {
-        x: touch.pageX,
-        y: touch.pageY,
+        x: touch.clientX,
+        y: touch.clientY,
       };
     }
   }

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;
+}