react-resizable-panels 0.0.54 → 0.0.56

package/src/utils/numbers/fuzzyNumbersEqual.ts

@@ -0,0 +1,9 @@
+import { fuzzyCompareNumbers } from "./fuzzyCompareNumbers";
+
+export function fuzzyNumbersEqual(
+  actual: number,
+  expected: number,
+  fractionDigits?: number
+): boolean {
+  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
+}

package/src/utils/resizePanel.ts

@@ -0,0 +1,41 @@
+import { PanelConstraints } from "../Panel";
+import { computePercentagePanelConstraints } from "./computePercentagePanelConstraints";
+import { fuzzyCompareNumbers } from "./numbers/fuzzyCompareNumbers";
+
+// Panel size must be in percentages; pixel values should be pre-converted
+export function resizePanel({
+  groupSizePixels,
+  panelConstraints,
+  panelIndex,
+  size,
+}: {
+  groupSizePixels: number;
+  panelConstraints: PanelConstraints[];
+  panelIndex: number;
+  size: number;
+}) {
+  let { collapsible } = panelConstraints[panelIndex]!;
+
+  const { collapsedSizePercentage, maxSizePercentage, minSizePercentage } =
+    computePercentagePanelConstraints(
+      panelConstraints,
+      panelIndex,
+      groupSizePixels
+    );
+
+  if (minSizePercentage != null) {
+    if (fuzzyCompareNumbers(size, minSizePercentage) < 0) {
+      if (collapsible) {
+        size = collapsedSizePercentage;
+      } else {
+        size = minSizePercentage;
+      }
+    }
+  }
+
+  if (maxSizePercentage != null) {
+    size = Math.min(maxSizePercentage, size);
+  }
+
+  return size;
+}

package/src/utils/serialization.ts

@@ -1,16 +1,21 @@
-import { PanelData, PanelGroupStorage } from "../types";
+import { PanelData } from "../Panel";
+import { PanelGroupStorage } from "../PanelGroup";
 
 type SerializedPanelGroupState = { [panelIds: string]: number[] };
 
 // Note that Panel ids might be user-provided (stable) or useId generated (non-deterministic)
 // so they should not be used as part of the serialization key.
-// Using an attribute like minSize instead should work well enough.
+// Using the min/max size attributes should work well enough as a backup.
 // Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
 function getSerializationKey(panels: PanelData[]): string {
   return panels
     .map((panel) => {
-      const { minSize, order } = panel.current;
-      return order ? `${order}:${minSize}` : `${minSize}`;
+      const { constraints, id, idIsFromProps, order } = panel;
+      if (idIsFromProps) {
+        return id;
+      } else {
+        return `${order}:${JSON.stringify(constraints)}`;
+      }
     })
     .sort((a, b) => a.localeCompare(b))
     .join(",");

package/src/utils/shouldMonitorPixelBasedConstraints.test.ts

@@ -0,0 +1,23 @@
+import { shouldMonitorPixelBasedConstraints } from "./shouldMonitorPixelBasedConstraints";
+
+describe("shouldMonitorPixelBasedConstraints", () => {
+  it("should identify min, max, or collapsed size pixel constraints", () => {
+    expect(
+      shouldMonitorPixelBasedConstraints([{}, { collapsedSizePixels: 100 }, {}])
+    ).toBe(true);
+
+    expect(
+      shouldMonitorPixelBasedConstraints([{ minSizePixels: 100 }, {}, {}])
+    ).toBe(true);
+
+    expect(
+      shouldMonitorPixelBasedConstraints([{}, {}, { maxSizePixels: 100 }])
+    ).toBe(true);
+  });
+
+  it("should ignore default size constraints", () => {
+    expect(
+      shouldMonitorPixelBasedConstraints([{ defaultSizePixels: 100 }])
+    ).toBe(false);
+  });
+});

package/src/utils/shouldMonitorPixelBasedConstraints.ts

@@ -0,0 +1,13 @@
+import { PanelConstraints } from "../Panel";
+
+export function shouldMonitorPixelBasedConstraints(
+  constraints: PanelConstraints[]
+): boolean {
+  return constraints.some((constraints) => {
+    return (
+      constraints.collapsedSizePixels !== undefined ||
+      constraints.maxSizePixels !== undefined ||
+      constraints.minSizePixels !== undefined
+    );
+  });
+}

package/src/utils/test-utils.ts

@@ -0,0 +1,136 @@
+import { MixedSizes } from "../types";
+
+const util = require("util");
+
+export function expectToBeCloseToArray(
+  actualNumbers: number[],
+  expectedNumbers: number[]
+) {
+  expect(actualNumbers.length).toBe(expectedNumbers.length);
+
+  try {
+    actualNumbers.forEach((actualNumber, index) => {
+      const expectedNumber = expectedNumbers[index];
+      expect(actualNumber).toBeCloseTo(expectedNumber, 1);
+    });
+  } catch (error) {
+    expect(actualNumbers).toEqual(expectedNumbers);
+  }
+}
+
+export function mockPanelGroupOffsetWidthAndHeight(
+  mockWidth = 1_000,
+  mockHeight = 1_000
+) {
+  const offsetHeightPropertyDescriptor = Object.getOwnPropertyDescriptor(
+    HTMLElement.prototype,
+    "offsetHeight"
+  );
+
+  const offsetWidthPropertyDescriptor = Object.getOwnPropertyDescriptor(
+    HTMLElement.prototype,
+    "offsetWidth"
+  );
+
+  Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
+    configurable: true,
+    get: function () {
+      if (this.hasAttribute("data-resize-handle")) {
+        return 0;
+      } else if (this.hasAttribute("data-panel-group")) {
+        return mockHeight;
+      }
+    },
+  });
+
+  Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+    configurable: true,
+    get: function () {
+      if (this.hasAttribute("data-resize-handle")) {
+        return 0;
+      } else if (this.hasAttribute("data-panel-group")) {
+        return mockWidth;
+      }
+    },
+  });
+
+  return function uninstallMocks() {
+    if (offsetHeightPropertyDescriptor) {
+      Object.defineProperty(
+        HTMLElement.prototype,
+        "offsetHeight",
+        offsetHeightPropertyDescriptor
+      );
+    }
+
+    if (offsetWidthPropertyDescriptor) {
+      Object.defineProperty(
+        HTMLElement.prototype,
+        "offsetWidth",
+        offsetWidthPropertyDescriptor
+      );
+    }
+  };
+}
+
+export function verifyExpandedPanelGroupLayout(
+  actualLayout: MixedSizes[],
+  expectedPercentages: number[]
+) {
+  expect(actualLayout).toHaveLength(expectedPercentages.length);
+  expect(actualLayout.map(({ sizePercentage }) => sizePercentage)).toEqual(
+    expectedPercentages
+  );
+}
+
+export function verifyExpectedWarnings(
+  callback: Function,
+  ...expectedMessages: string[]
+) {
+  const consoleSpy = (format: any, ...args: any[]) => {
+    const message = util.format(format, ...args);
+
+    for (let index = 0; index < expectedMessages.length; index++) {
+      const expectedMessage = expectedMessages[index];
+      if (message.includes(expectedMessage)) {
+        expectedMessages.splice(index, 1);
+        return;
+      }
+    }
+
+    if (expectedMessages.length === 0) {
+      throw new Error(`Unexpected message recorded:\n\n${message}`);
+    }
+  };
+
+  const originalError = console.error;
+  const originalWarn = console.warn;
+
+  console.error = consoleSpy;
+  console.warn = consoleSpy;
+
+  let caughtError;
+  let didCatch = false;
+  try {
+    callback();
+  } catch (error) {
+    caughtError = error;
+    didCatch = true;
+  } finally {
+    console.error = originalError;
+    console.warn = originalWarn;
+
+    if (didCatch) {
+      throw caughtError;
+    }
+
+    // Any remaining messages indicate a failed expectations.
+    if (expectedMessages.length > 0) {
+      throw Error(
+        `Expected message(s) not recorded:\n\n${expectedMessages.join("\n")}`
+      );
+    }
+
+    return { pass: true };
+  }
+}

package/src/utils/validatePanelConstraints.test.ts

@@ -0,0 +1,151 @@
+import { verifyExpectedWarnings } from "./test-utils";
+import { validatePanelConstraints } from "./validatePanelConstraints";
+
+describe("validatePanelConstraints", () => {
+  it("should not warn if there are no validation errors", () => {
+    verifyExpectedWarnings(() => {
+      validatePanelConstraints({
+        groupSizePixels: 100_000,
+        panelConstraints: [{}],
+        panelIndex: 0,
+        panelId: "test",
+      });
+    });
+  });
+
+  it("should warn about conflicting percentages and pixels", () => {
+    verifyExpectedWarnings(() => {
+      validatePanelConstraints({
+        groupSizePixels: 100_000,
+        panelConstraints: [
+          {
+            collapsedSizePercentage: 5,
+            collapsedSizePixels: 10,
+          },
+        ],
+        panelIndex: 0,
+        panelId: "test",
+      });
+    }, "should not specify both percentage and pixel units for: collapsed size");
+
+    verifyExpectedWarnings(() => {
+      validatePanelConstraints({
+        groupSizePixels: 100_000,
+        panelConstraints: [
+          {
+            maxSizePercentage: 5,
+            maxSizePixels: 10,
+            minSizePercentage: 5,
+            minSizePixels: 10,
+          },
+        ],
+        panelIndex: 0,
+        panelId: "test",
+      });
+    }, "should not specify both percentage and pixel units for: max size, min size");
+
+    verifyExpectedWarnings(() => {
+      validatePanelConstraints({
+        groupSizePixels: 100_000,
+        panelConstraints: [
+          {
+            defaultSizePercentage: 5,
+            defaultSizePixels: 10,
+          },
+        ],
+        panelIndex: 0,
+        panelId: "test",
+      });
+    }, "should not specify both percentage and pixel units for: default size");
+  });
+
+  it("should warn about conflicting min/max sizes", () => {
+    verifyExpectedWarnings(() => {
+      validatePanelConstraints({
+        groupSizePixels: 100_000,
+        panelConstraints: [
+          {
+            maxSizePercentage: 5,
+            minSizePercentage: 10,
+          },
+        ],
+        panelIndex: 0,
+        panelId: "test",
+      });
+    }, "min size (10%) should not be greater than max size (5%)");
+  });
+
+  it("should warn about conflicting collapsed and min sizes", () => {
+    verifyExpectedWarnings(() => {
+      validatePanelConstraints({
+        groupSizePixels: 100_000,
+        panelConstraints: [
+          {
+            collapsedSizePercentage: 15,
+            minSizePercentage: 10,
+          },
+        ],
+        panelIndex: 0,
+        panelId: "test",
+      });
+    }, "collapsed size should not be greater than min size");
+  });
+
+  it("should warn about conflicting default and min/max sizes", () => {
+    verifyExpectedWarnings(() => {
+      validatePanelConstraints({
+        groupSizePixels: 100_000,
+        panelConstraints: [
+          {
+            defaultSizePercentage: -1,
+            minSizePercentage: 10,
+          },
+        ],
+        panelIndex: 0,
+        panelId: "test",
+      });
+    }, "default size should not be less than 0");
+
+    verifyExpectedWarnings(() => {
+      validatePanelConstraints({
+        groupSizePixels: 100_000,
+        panelConstraints: [
+          {
+            defaultSizePercentage: 5,
+            minSizePercentage: 10,
+          },
+        ],
+        panelIndex: 0,
+        panelId: "test",
+      });
+    }, "default size should not be less than min size");
+
+    verifyExpectedWarnings(() => {
+      validatePanelConstraints({
+        groupSizePixels: 100_000,
+        panelConstraints: [
+          {
+            defaultSizePercentage: 101,
+            maxSizePercentage: 10,
+          },
+        ],
+        panelIndex: 0,
+        panelId: "test",
+      });
+    }, "default size should not be greater than 100");
+
+    verifyExpectedWarnings(() => {
+      validatePanelConstraints({
+        groupSizePixels: 100_000,
+        panelConstraints: [
+          {
+            defaultSizePercentage: 15,
+            maxSizePercentage: 10,
+          },
+        ],
+        panelIndex: 0,
+        panelId: "test",
+      });
+    }, "default size should not be greater than max size");
+  });
+});

package/src/utils/validatePanelConstraints.ts

@@ -0,0 +1,103 @@
+import { isDevelopment } from "#is-development";
+import { PanelConstraints } from "../Panel";
+import { computePercentagePanelConstraints } from "./computePercentagePanelConstraints";
+
+export function validatePanelConstraints({
+  groupSizePixels,
+  panelConstraints,
+  panelId,
+  panelIndex,
+}: {
+  groupSizePixels: number;
+  panelConstraints: PanelConstraints[];
+  panelId: string | undefined;
+  panelIndex: number;
+}): boolean {
+  if (isDevelopment) {
+    const warnings = [];
+
+    {
+      const {
+        collapsedSizePercentage,
+        collapsedSizePixels,
+        defaultSizePercentage,
+        defaultSizePixels,
+        maxSizePercentage,
+        maxSizePixels,
+        minSizePercentage,
+        minSizePixels,
+      } = panelConstraints[panelIndex]!;
+
+      const conflictingUnits: string[] = [];
+
+      if (collapsedSizePercentage != null && collapsedSizePixels != null) {
+        conflictingUnits.push("collapsed size");
+      }
+      if (defaultSizePercentage != null && defaultSizePixels != null) {
+        conflictingUnits.push("default size");
+      }
+      if (maxSizePercentage != null && maxSizePixels != null) {
+        conflictingUnits.push("max size");
+      }
+      if (minSizePercentage != null && minSizePixels != null) {
+        conflictingUnits.push("min size");
+      }
+
+      if (conflictingUnits.length > 0) {
+        warnings.push(
+          `should not specify both percentage and pixel units for: ${conflictingUnits.join(
+            ", "
+          )}`
+        );
+      }
+    }
+
+    {
+      const {
+        collapsedSizePercentage,
+        defaultSizePercentage,
+        maxSizePercentage,
+        minSizePercentage,
+      } = computePercentagePanelConstraints(
+        panelConstraints,
+        panelIndex,
+        groupSizePixels
+      );
+
+      if (minSizePercentage > maxSizePercentage) {
+        warnings.push(
+          `min size (${minSizePercentage}%) should not be greater than max size (${maxSizePercentage}%)`
+        );
+      }
+
+      if (defaultSizePercentage != null) {
+        if (defaultSizePercentage < 0) {
+          warnings.push("default size should not be less than 0");
+        } else if (defaultSizePercentage < minSizePercentage) {
+          warnings.push("default size should not be less than min size");
+        }
+
+        if (defaultSizePercentage > 100) {
+          warnings.push("default size should not be greater than 100");
+        } else if (defaultSizePercentage > maxSizePercentage) {
+          warnings.push("default size should not be greater than max size");
+        }
+      }
+
+      if (collapsedSizePercentage > minSizePercentage) {
+        warnings.push("collapsed size should not be greater than min size");
+      }
+    }
+
+    if (warnings.length > 0) {
+      const name = panelId != null ? `Panel "${panelId}"` : "Panel";
+      console.warn(
+        `${name} has an invalid configuration:\n\n${warnings.join("\n")}`
+      );
+
+      return false;
+    }
+  }
+
+  return true;
+}