react-resizable-panels 2.1.6 → 2.1.8

package/src/utils/numbers/fuzzyLayoutsEqual.ts

@@ -1,22 +0,0 @@
-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/utils/numbers/fuzzyNumbersEqual.ts

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

package/src/utils/rects/getIntersectingRectangle.test.ts

@@ -1,198 +0,0 @@
-import { getIntersectingRectangle } from "./getIntersectingRectangle";
-import { Rectangle } from "./types";
-
-const emptyRect = { x: 0, y: 0, width: 0, height: 0 };
-const rect = { x: 25, y: 25, width: 50, height: 50 };
-
-function forkRect(partial: Partial<Rectangle>, baseRect: Rectangle = rect) {
-  return { ...rect, ...partial };
-}
-
-describe("getIntersectingRectangle", () => {
-  let strict: boolean = false;
-
-  function verify(rectOne: Rectangle, rectTwo: Rectangle, expected: Rectangle) {
-    const actual = getIntersectingRectangle(rectOne, rectTwo, strict);
-
-    try {
-      expect(actual).toEqual(expected);
-    } catch (thrown) {
-      console.log(
-        "Expect",
-        strict ? "strict mode" : "loose mode",
-        "\n",
-        rectOne,
-        "\n",
-        rectTwo,
-        "\n\nto intersect as:\n",
-        expected,
-        "\n\nbut got:\n",
-        actual
-      );
-
-      throw thrown;
-    }
-  }
-
-  describe("loose", () => {
-    beforeEach(() => {
-      strict = false;
-    });
-
-    it("should support empty rects", () => {
-      verify(emptyRect, emptyRect, emptyRect);
-    });
-
-    it("should support fully overlapping rects", () => {
-      verify(rect, forkRect({ x: 35, width: 30 }), {
-        x: 35,
-        y: 25,
-        width: 30,
-        height: 50,
-      });
-
-      verify(rect, forkRect({ y: 35, height: 30 }), {
-        x: 25,
-        y: 35,
-        width: 50,
-        height: 30,
-      });
-
-      verify(
-        rect,
-        forkRect({
-          x: 35,
-          y: 35,
-          width: 30,
-          height: 30,
-        }),
-
-        {
-          x: 35,
-          y: 35,
-          width: 30,
-          height: 30,
-        }
-      );
-    });
-
-    it("should support partially overlapping rects", () => {
-      verify(rect, forkRect({ x: 10, y: 10 }), {
-        x: 25,
-        y: 25,
-        width: 35,
-        height: 35,
-      });
-
-      verify(rect, forkRect({ x: 45, y: 30 }), {
-        x: 45,
-        y: 30,
-        width: 30,
-        height: 45,
-      });
-    });
-
-    it("should support non-overlapping rects", () => {
-      verify(rect, forkRect({ x: 100, y: 100 }), emptyRect);
-    });
-
-    it("should support all negative coordinates", () => {
-      verify(
-        {
-          x: -100,
-          y: -100,
-          width: 50,
-          height: 50,
-        },
-        { x: -80, y: -80, width: 50, height: 50 },
-        {
-          x: -80,
-          y: -80,
-          width: 30,
-          height: 30,
-        }
-      );
-    });
-  });
-
-  describe("strict", () => {
-    beforeEach(() => {
-      strict = true;
-    });
-
-    it("should support empty rects", () => {
-      verify(emptyRect, emptyRect, emptyRect);
-    });
-
-    it("should support fully overlapping rects", () => {
-      verify(rect, forkRect({ x: 35, width: 30 }), {
-        x: 35,
-        y: 25,
-        width: 30,
-        height: 50,
-      });
-
-      verify(rect, forkRect({ y: 35, height: 30 }), {
-        x: 25,
-        y: 35,
-        width: 50,
-        height: 30,
-      });
-
-      verify(
-        rect,
-        forkRect({
-          x: 35,
-          y: 35,
-          width: 30,
-          height: 30,
-        }),
-
-        {
-          x: 35,
-          y: 35,
-          width: 30,
-          height: 30,
-        }
-      );
-    });
-
-    it("should support partially overlapping rects", () => {
-      verify(rect, forkRect({ x: 10, y: 10 }), {
-        x: 25,
-        y: 25,
-        width: 35,
-        height: 35,
-      });
-
-      verify(rect, forkRect({ x: 45, y: 30 }), {
-        x: 45,
-        y: 30,
-        width: 30,
-        height: 45,
-      });
-    });
-
-    it("should support non-overlapping rects", () => {
-      verify(rect, forkRect({ x: 100, y: 100 }), emptyRect);
-    });
-
-    it("should support all negative coordinates", () => {
-      verify(
-        {
-          x: -100,
-          y: -100,
-          width: 50,
-          height: 50,
-        },
-        { x: -80, y: -80, width: 50, height: 50 },
-        {
-          x: -80,
-          y: -80,
-          width: 30,
-          height: 30,
-        }
-      );
-    });
-  });
-});

package/src/utils/rects/getIntersectingRectangle.ts

@@ -1,28 +0,0 @@
-import { intersects } from "./intersects";
-import { Rectangle } from "./types";
-
-export function getIntersectingRectangle(
-  rectOne: Rectangle,
-  rectTwo: Rectangle,
-  strict: boolean
-): Rectangle {
-  if (!intersects(rectOne, rectTwo, strict)) {
-    return {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-    };
-  }
-
-  return {
-    x: Math.max(rectOne.x, rectTwo.x),
-    y: Math.max(rectOne.y, rectTwo.y),
-    width:
-      Math.min(rectOne.x + rectOne.width, rectTwo.x + rectTwo.width) -
-      Math.max(rectOne.x, rectTwo.x),
-    height:
-      Math.min(rectOne.y + rectOne.height, rectTwo.y + rectTwo.height) -
-      Math.max(rectOne.y, rectTwo.y),
-  };
-}

package/src/utils/rects/intersects.test.ts

@@ -1,197 +0,0 @@
-import { intersects } from "./intersects";
-import { Rectangle } from "./types";
-
-const emptyRect = { x: 0, y: 0, width: 0, height: 0 };
-const rect = { x: 25, y: 25, width: 50, height: 50 };
-
-function forkRect(partial: Partial<Rectangle>, baseRect: Rectangle = rect) {
-  return { ...rect, ...partial };
-}
-
-describe("intersects", () => {
-  let strict: boolean = false;
-
-  function verify(rectOne: Rectangle, rectTwo: Rectangle, expected: boolean) {
-    const actual = intersects(rectOne, rectTwo, strict);
-
-    try {
-      expect(actual).toBe(expected);
-    } catch (thrown) {
-      console.log(
-        "Expected",
-        rectOne,
-        "to",
-        expected ? "intersect" : "not intersect",
-        rectTwo,
-        strict ? "in strict mode" : "in loose mode"
-      );
-
-      throw thrown;
-    }
-  }
-
-  describe("loose", () => {
-    beforeEach(() => {
-      strict = false;
-    });
-
-    it("should handle empty rects", () => {
-      verify(emptyRect, emptyRect, true);
-    });
-
-    it("should support fully overlapping rects", () => {
-      verify(rect, rect, true);
-
-      verify(rect, forkRect({ x: 35, width: 30 }), true);
-      verify(rect, forkRect({ y: 35, height: 30 }), true);
-      verify(
-        rect,
-        forkRect({
-          x: 35,
-          y: 35,
-          width: 30,
-          height: 30,
-        }),
-        true
-      );
-
-      verify(rect, forkRect({ x: 10, width: 100 }), true);
-      verify(rect, forkRect({ y: 10, height: 100 }), true);
-      verify(
-        rect,
-        forkRect({
-          x: 10,
-          y: 10,
-          width: 100,
-          height: 100,
-        }),
-        true
-      );
-    });
-
-    it("should support partially overlapping rects", () => {
-      const cases: Partial<Rectangle>[] = [
-        { x: 0 },
-        { y: 0 },
-
-        // Loose mode only
-        { x: -25 },
-        { x: 75 },
-        { y: -25 },
-        { y: 75 },
-        { x: -25, y: -25 },
-        { x: 75, y: 75 },
-      ];
-
-      cases.forEach((partial) => {
-        verify(forkRect(partial), rect, true);
-      });
-    });
-
-    it("should support non-overlapping rects", () => {
-      const cases: Partial<Rectangle>[] = [
-        { x: 100 },
-        { x: -100 },
-        { y: 100 },
-        { y: -100 },
-        { x: -100, y: -100 },
-        { x: 100, y: 100 },
-      ];
-
-      cases.forEach((partial) => {
-        verify(forkRect(partial), rect, false);
-      });
-    });
-
-    it("should support all negative coordinates", () => {
-      expect(
-        intersects(
-          { x: -100, y: -100, width: 50, height: 50 },
-          { x: -110, y: -90, width: 50, height: 50 },
-          false
-        )
-      ).toBe(true);
-    });
-  });
-
-  describe("strict", () => {
-    beforeEach(() => {
-      strict = true;
-    });
-
-    it("should handle empty rects", () => {
-      verify(emptyRect, emptyRect, false);
-    });
-
-    it("should support fully overlapping rects", () => {
-      verify(rect, rect, true);
-
-      verify(rect, forkRect({ x: 35, width: 30 }), true);
-      verify(rect, forkRect({ y: 35, height: 30 }), true);
-      verify(
-        rect,
-        forkRect({
-          x: 35,
-          y: 35,
-          width: 30,
-          height: 30,
-        }),
-        true
-      );
-
-      verify(rect, forkRect({ x: 10, width: 100 }), true);
-      verify(rect, forkRect({ y: 10, height: 100 }), true);
-      verify(
-        rect,
-        forkRect({
-          x: 10,
-          y: 10,
-          width: 100,
-          height: 100,
-        }),
-        true
-      );
-    });
-
-    it("should support partially overlapping rects", () => {
-      const cases: Partial<Rectangle>[] = [{ x: 0 }, { y: 0 }];
-
-      cases.forEach((partial) => {
-        verify(forkRect(partial), rect, true);
-      });
-    });
-
-    it("should support non-overlapping rects", () => {
-      const cases: Partial<Rectangle>[] = [
-        { x: 100 },
-        { x: -100 },
-        { y: 100 },
-        { y: -100 },
-        { x: -100, y: -100 },
-        { x: 100, y: 100 },
-
-        // Strict mode only
-        { x: -25 },
-        { x: 75 },
-        { y: -25 },
-        { y: 75 },
-        { x: -25, y: -25 },
-        { x: 75, y: 75 },
-      ];
-
-      cases.forEach((partial) => {
-        verify(forkRect(partial), rect, false);
-      });
-    });
-
-    it("should support all negative coordinates", () => {
-      expect(
-        intersects(
-          { x: -100, y: -100, width: 50, height: 50 },
-          { x: -110, y: -90, width: 50, height: 50 },
-          true
-        )
-      ).toBe(true);
-    });
-  });
-});

package/src/utils/rects/intersects.ts

@@ -1,23 +0,0 @@
-import { Rectangle } from "./types";
-
-export function intersects(
-  rectOne: Rectangle,
-  rectTwo: Rectangle,
-  strict: boolean
-): boolean {
-  if (strict) {
-    return (
-      rectOne.x < rectTwo.x + rectTwo.width &&
-      rectOne.x + rectOne.width > rectTwo.x &&
-      rectOne.y < rectTwo.y + rectTwo.height &&
-      rectOne.y + rectOne.height > rectTwo.y
-    );
-  } else {
-    return (
-      rectOne.x <= rectTwo.x + rectTwo.width &&
-      rectOne.x + rectOne.width >= rectTwo.x &&
-      rectOne.y <= rectTwo.y + rectTwo.height &&
-      rectOne.y + rectOne.height >= rectTwo.y
-    );
-  }
-}

package/src/utils/rects/types.ts

@@ -1,6 +0,0 @@
-export interface Rectangle {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}

package/src/utils/resizePanel.test.ts

@@ -1,59 +0,0 @@
-import { resizePanel } from "./resizePanel";
-
-describe("resizePanel", () => {
-  it("should not collapse (or expand) until a panel size dips below the halfway point between min size and collapsed size", () => {
-    expect(
-      resizePanel({
-        panelConstraints: [
-          {
-            collapsible: true,
-            collapsedSize: 10,
-            minSize: 20,
-          },
-        ],
-        panelIndex: 0,
-        size: 15,
-      })
-    ).toBe(20);
-
-    expect(
-      resizePanel({
-        panelConstraints: [
-          {
-            collapsible: true,
-            collapsedSize: 10,
-            minSize: 20,
-          },
-        ],
-        panelIndex: 0,
-        size: 14,
-      })
-    ).toBe(10);
-
-    expect(
-      resizePanel({
-        panelConstraints: [
-          {
-            collapsible: true,
-            minSize: 20,
-          },
-        ],
-        panelIndex: 0,
-        size: 10,
-      })
-    ).toBe(20);
-
-    expect(
-      resizePanel({
-        panelConstraints: [
-          {
-            collapsible: true,
-            minSize: 20,
-          },
-        ],
-        panelIndex: 0,
-        size: 9,
-      })
-    ).toBe(0);
-  });
-});

package/src/utils/resizePanel.ts

@@ -1,47 +0,0 @@
-import { PanelConstraints } from "../Panel";
-import { PRECISION } from "../constants";
-import { assert } from "./assert";
-import { fuzzyCompareNumbers } from "./numbers/fuzzyCompareNumbers";
-
-// Panel size must be in percentages; pixel values should be pre-converted
-export function resizePanel({
-  panelConstraints: panelConstraintsArray,
-  panelIndex,
-  size,
-}: {
-  panelConstraints: PanelConstraints[];
-  panelIndex: number;
-  size: number;
-}) {
-  const panelConstraints = panelConstraintsArray[panelIndex];
-  assert(
-    panelConstraints != null,
-    `Panel constraints not found for index ${panelIndex}`
-  );
-
-  let {
-    collapsedSize = 0,
-    collapsible,
-    maxSize = 100,
-    minSize = 0,
-  } = panelConstraints;
-
-  if (fuzzyCompareNumbers(size, minSize) < 0) {
-    if (collapsible) {
-      // Collapsible panels should snap closed or open only once they cross the halfway point between collapsed and min size.
-      const halfwayPoint = (collapsedSize + minSize) / 2;
-      if (fuzzyCompareNumbers(size, halfwayPoint) < 0) {
-        size = collapsedSize;
-      } else {
-        size = minSize;
-      }
-    } else {
-      size = minSize;
-    }
-  }
-
-  size = Math.min(maxSize, size);
-  size = parseFloat(size.toFixed(PRECISION));
-
-  return size;
-}

package/src/utils/serialization.ts

@@ -1,87 +0,0 @@
-import { PanelData } from "../Panel";
-import { PanelGroupStorage } from "../PanelGroup";
-
-export type PanelConfigurationState = {
-  expandToSizes: {
-    [panelId: string]: number;
-  };
-  layout: number[];
-};
-
-export type SerializedPanelGroupState = {
-  [panelIds: string]: PanelConfigurationState;
-};
-
-function getPanelGroupKey(autoSaveId: string): string {
-  return `react-resizable-panels:${autoSaveId}`;
-}
-
-// 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 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 getPanelKey(panels: PanelData[]): string {
-  return panels
-    .map((panel) => {
-      const { constraints, id, idIsFromProps, order } = panel;
-      if (idIsFromProps) {
-        return id;
-      } else {
-        return order
-          ? `${order}:${JSON.stringify(constraints)}`
-          : JSON.stringify(constraints);
-      }
-    })
-    .sort((a, b) => a.localeCompare(b))
-    .join(",");
-}
-
-function loadSerializedPanelGroupState(
-  autoSaveId: string,
-  storage: PanelGroupStorage
-): SerializedPanelGroupState | null {
-  try {
-    const panelGroupKey = getPanelGroupKey(autoSaveId);
-    const serialized = storage.getItem(panelGroupKey);
-    if (serialized) {
-      const parsed = JSON.parse(serialized);
-      if (typeof parsed === "object" && parsed != null) {
-        return parsed as SerializedPanelGroupState;
-      }
-    }
-  } catch (error) {}
-
-  return null;
-}
-
-export function loadPanelGroupState(
-  autoSaveId: string,
-  panels: PanelData[],
-  storage: PanelGroupStorage
-): PanelConfigurationState | null {
-  const state = loadSerializedPanelGroupState(autoSaveId, storage) ?? {};
-  const panelKey = getPanelKey(panels);
-  return state[panelKey] ?? null;
-}
-
-export function savePanelGroupState(
-  autoSaveId: string,
-  panels: PanelData[],
-  panelSizesBeforeCollapse: Map<string, number>,
-  sizes: number[],
-  storage: PanelGroupStorage
-): void {
-  const panelGroupKey = getPanelGroupKey(autoSaveId);
-  const panelKey = getPanelKey(panels);
-  const state = loadSerializedPanelGroupState(autoSaveId, storage) ?? {};
-  state[panelKey] = {
-    expandToSizes: Object.fromEntries(panelSizesBeforeCollapse.entries()),
-    layout: sizes,
-  };
-
-  try {
-    storage.setItem(panelGroupKey, JSON.stringify(state));
-  } catch (error) {
-    console.error(error);
-  }
-}