Fixed edge case constraints revalidation bug

Author: bvaughn

integrations/vite/src/routes/Decoder.tsx

@@ -69,7 +69,7 @@ export function Decoder() {
   return (
     <Box className="p-2" direction="column" gap={2}>
       <div>{children}</div>
-      <Box className="p-2" direction="row" gap={2} wrap>
+      <Box className="p-2 overflow-auto" direction="row" gap={2} wrap>
         <DebugData
           data={{
             layout: state.layout,

integrations/vite/tests/resize-events.spec.tsx

@@ -38,6 +38,42 @@ test.describe("resize events", () => {
     await expect(page.getByText('"right": 46')).toBeVisible();
   });
 
+  test("resizing the window should revalidate group layout constraints alt", async ({
+    page
+  }) => {
+    await goToUrl(
+      page,
+      <Group>
+        <Panel id="left" minSize={50} />
+        <Separator />
+        <Panel id="right" minSize={50} />
+      </Group>
+    );
+
+    await expect(page.getByText('"onLayoutCount": 1')).toBeVisible();
+    await expect(page.getByText('"left": 50')).toBeVisible();
+    await expect(page.getByText('"right": 50')).toBeVisible();
+
+    await page.setViewportSize({
+      width: 500,
+      height: 500
+    });
+
+    await expect(page.getByText('"onLayoutCount": 1')).toBeVisible();
+    await expect(page.getByText('"left": 50')).toBeVisible();
+    await expect(page.getByText('"right": 50')).toBeVisible();
+
+    const bounds = (await page.getByRole("separator").boundingBox())!;
+    await page.mouse.move(bounds.x, bounds.y);
+    await page.mouse.down();
+    await page.mouse.move(0, bounds.y);
+
+    // Left would be 5% if the constraints were stale
+    await expect(page.getByText('"onLayoutCount": 2')).toBeVisible();
+    await expect(page.getByText('"left": 11')).toBeVisible();
+    await expect(page.getByText('"right": 89')).toBeVisible();
+  });
+
   test("resizing the window should notify Panel resize handlers", async ({
     page
   }) => {

lib/global/mountGroup.ts

@@ -12,6 +12,7 @@ import { update, type SeparatorToPanelsMap } from "./mutableState";
 import { calculateDefaultLayout } from "./utils/calculateDefaultLayout";
 import { layoutsEqual } from "./utils/layoutsEqual";
 import { notifyPanelOnResize } from "./utils/notifyPanelOnResize";
+import { objectsEqual } from "./utils/objectsEqual";
 import { validatePanelGroupLayout } from "./utils/validatePanelGroupLayout";
 
 export function mountGroup(group: RegisteredGroup) {
@@ -52,7 +53,11 @@ export function mountGroup(group: RegisteredGroup) {
 
               if (
                 !match.defaultLayoutDeferred &&
-                layoutsEqual(prevLayout, nextLayout)
+                layoutsEqual(prevLayout, nextLayout) &&
+                objectsEqual(
+                  match.derivedPanelConstraints,
+                  nextDerivedPanelConstraints
+                )
               ) {
                 return prevState;
               }

lib/global/utils/objectsEqual.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, test } from "vitest";
+import { objectsEqual } from "./objectsEqual";
+
+const EMPTY = {};
+const A = { a: 25, b: 75 };
+const B = { a: 75, b: 25 };
+const C = { a: 75 };
+
+describe("objectsEqual", () => {
+  test.each([
+    [EMPTY, EMPTY, true],
+    [A, A, true],
+    [B, B, true],
+    [EMPTY, A, false],
+    [A, EMPTY, false],
+    [A, B, false],
+    [B, A, false],
+    [A, C, false],
+    [C, A, false]
+  ])("objectsEqual: %o, %o -> %o", (a, b, expected) => {
+    expect(objectsEqual(a, b)).toBe(expected);
+  });
+});

lib/global/utils/objectsEqual.ts

@@ -0,0 +1,14 @@
+export function objectsEqual(a: object, b: object) {
+  const keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length) {
+    return false;
+  }
+
+  for (const key in a) {
+    if (a[key as keyof typeof a] !== b[key as keyof typeof b]) {
+      return false;
+    }
+  }
+
+  return true;
+}