Normalize layouts not totalling to 100%

Resolves bvaughn#227
tsufiev · Dec 7, 2023 · b7e05d2 · b7e05d2
1 parent 1133472
commit b7e05d2
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 26 deletions.
diff --git a/packages/react-resizable-panels/src/utils/validatePanelGroupLayout.test.ts b/packages/react-resizable-panels/src/utils/validatePanelGroupLayout.test.ts
@@ -12,26 +12,25 @@ describe("validatePanelGroupLayout", () => {
     ).toEqual([10, 60, 30]);
   });
 
-  it("should reject layouts that do not total 100%", () => {
-    verifyExpectedWarnings(
-      () =>
-        validatePanelGroupLayout({
-          groupSizePixels: NaN,
-          layout: [10, 20, 30],
-          panelConstraints: [{}, {}, {}],
-        }),
-      "Invalid layout total size"
-    );
+  it("should normalize layouts that do not total 100%", () => {
+    let layout;
+    verifyExpectedWarnings(() => {
+      layout = validatePanelGroupLayout({
+        groupSizePixels: NaN,
+        layout: [10, 20, 20],
+        panelConstraints: [{}, {}, {}],
+      });
+    }, "Invalid layout total size");
+    expect(layout).toEqual([20, 40, 40]);
 
-    verifyExpectedWarnings(
-      () =>
-        validatePanelGroupLayout({
-          groupSizePixels: NaN,
-          layout: [50, 100, 150],
-          panelConstraints: [{}, {}, {}],
-        }),
-      "Invalid layout total size"
-    );
+    verifyExpectedWarnings(() => {
+      layout = validatePanelGroupLayout({
+        groupSizePixels: NaN,
+        layout: [50, 100, 50],
+        panelConstraints: [{}, {}, {}],
+      });
+    }, "Invalid layout total size");
+    expect(layout).toEqual([25, 50, 25]);
   });
 
   it("should reject layouts that do not match the number of panels", () => {

diff --git a/packages/react-resizable-panels/src/utils/validatePanelGroupLayout.ts b/packages/react-resizable-panels/src/utils/validatePanelGroupLayout.ts
@@ -14,6 +14,10 @@ export function validatePanelGroupLayout({
   panelConstraints: PanelConstraints[];
 }): number[] {
   const nextLayout = [...prevLayout];
+  const nextLayoutTotalSize = nextLayout.reduce(
+    (accumulated, current) => accumulated + current,
+    0
+  );
 
   // Validate layout expectations
   if (nextLayout.length !== panelConstraints.length) {
@@ -22,21 +26,21 @@ export function validatePanelGroupLayout({
         .map((size) => `${size}%`)
         .join(", ")}`
     );
-  } else if (
-    !fuzzyNumbersEqual(
-      nextLayout.reduce((accumulated, current) => accumulated + current, 0),
-      100
-    )
-  ) {
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
     // This is not ideal so we should warn about it, but it may be recoverable in some cases
     // (especially if the amount is small)
     if (isDevelopment) {
       console.warn(
         `WARNING: Invalid layout total size: ${nextLayout
           .map((size) => `${size}%`)
-          .join(", ")}`
+          .join(", ")}. Layout normalization will be applied.`
       );
     }
+    for (let index = 0; index < panelConstraints.length; index++) {
+      const unsafeSize = nextLayout[index]!;
+      const safeSize = (100 / nextLayoutTotalSize) * unsafeSize;
+      nextLayout[index] = safeSize;
+    }
   }
 
   let remainingSize = 0;