react-resizable-panels 0.0.55 → 0.0.57

package/src/utils/callPanelCallbacks.ts

@@ -0,0 +1,81 @@
+import { PanelData } from "../Panel";
+import { MixedSizes } from "../types";
+import { calculateAvailablePanelSizeInPixels } from "../utils/dom/calculateAvailablePanelSizeInPixels";
+import { convertPercentageToPixels } from "./convertPercentageToPixels";
+import { getPercentageSizeFromMixedSizes } from "./getPercentageSizeFromMixedSizes";
+
+// Layout should be pre-converted into percentages
+export function callPanelCallbacks(
+  groupId: string,
+  panelsArray: PanelData[],
+  layout: number[],
+  panelIdToLastNotifiedMixedSizesMap: Record<string, MixedSizes>
+) {
+  const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+
+  layout.forEach((sizePercentage, index) => {
+    const panelData = panelsArray[index];
+    if (!panelData) {
+      // Handle initial mount (when panels are registered too late to be in the panels array)
+      // The subsequent render+effects will handle the resize notification
+      return;
+    }
+
+    const { callbacks, constraints, id: panelId } = panelData;
+    const { collapsible } = constraints;
+
+    const mixedSizes: MixedSizes = {
+      sizePercentage,
+      sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels),
+    };
+
+    const lastNotifiedMixedSizes = panelIdToLastNotifiedMixedSizesMap[panelId];
+    if (
+      lastNotifiedMixedSizes == null ||
+      mixedSizes.sizePercentage !== lastNotifiedMixedSizes.sizePercentage ||
+      mixedSizes.sizePixels !== lastNotifiedMixedSizes.sizePixels
+    ) {
+      panelIdToLastNotifiedMixedSizesMap[panelId] = mixedSizes;
+
+      const { onCollapse, onExpand, onResize } = callbacks;
+
+      if (onResize) {
+        onResize(mixedSizes, lastNotifiedMixedSizes);
+      }
+
+      if (collapsible && (onCollapse || onExpand)) {
+        const collapsedSize =
+          getPercentageSizeFromMixedSizes(
+            {
+              sizePercentage: constraints.collapsedSizePercentage,
+              sizePixels: constraints.collapsedSizePixels,
+            },
+            groupSizePixels
+          ) ?? 0;
+
+        const size = getPercentageSizeFromMixedSizes(
+          mixedSizes,
+          groupSizePixels
+        );
+
+        if (
+          onExpand &&
+          (lastNotifiedMixedSizes == null ||
+            lastNotifiedMixedSizes.sizePercentage === collapsedSize) &&
+          size !== collapsedSize
+        ) {
+          onExpand();
+        }
+
+        if (
+          onCollapse &&
+          (lastNotifiedMixedSizes == null ||
+            lastNotifiedMixedSizes.sizePercentage !== collapsedSize) &&
+          size === collapsedSize
+        ) {
+          onCollapse();
+        }
+      }
+    }
+  });
+}

package/src/utils/compareLayouts.test.ts

@@ -0,0 +1,9 @@
+import { compareLayouts } from "./compareLayouts";
+
+describe("compareLayouts", () => {
+  it("should work", () => {
+    expect(compareLayouts([1, 2], [1])).toBe(false);
+    expect(compareLayouts([1], [1, 2])).toBe(false);
+    expect(compareLayouts([1, 2, 3], [1, 2, 3])).toBe(true);
+  });
+});

package/src/utils/compareLayouts.ts

@@ -0,0 +1,12 @@
+export function compareLayouts(a: number[], b: number[]) {
+  if (a.length !== b.length) {
+    return false;
+  } else {
+    for (let index = 0; index < a.length; index++) {
+      if (a[index] != b[index]) {
+        return false;
+      }
+    }
+  }
+  return true;
+}

package/src/utils/computePanelFlexBoxStyle.ts

@@ -0,0 +1,44 @@
+// This method returns a number between 1 and 100 representing
+
+import { PanelData } from "../Panel";
+import { DragState } from "../PanelGroupContext";
+import { CSSProperties } from "../vendor/react";
+
+// the % of the group's overall space this panel should occupy.
+export function computePanelFlexBoxStyle({
+  dragState,
+  layout,
+  panelData,
+  panelIndex,
+  precision = 3,
+}: {
+  layout: number[];
+  dragState: DragState | null;
+  panelData: PanelData[];
+  panelIndex: number;
+  precision?: number;
+}): CSSProperties {
+  const size = layout[panelIndex];
+
+  let flexGrow;
+  if (panelData.length === 1) {
+    flexGrow = "100";
+  } else if (size == null) {
+    flexGrow = "0";
+  } else {
+    flexGrow = size.toPrecision(precision);
+  }
+
+  return {
+    flexBasis: 0,
+    flexGrow,
+    flexShrink: 1,
+
+    // Without this, Panel sizes may be unintentionally overridden by their content
+    overflow: "hidden",
+
+    // Disable pointer events inside of a panel during resize
+    // This avoid edge cases like nested iframes
+    pointerEvents: dragState !== null ? "none" : undefined,
+  };
+}

package/src/utils/computePercentagePanelConstraints.test.ts

@@ -0,0 +1,98 @@
+import { PanelConstraints } from "../Panel";
+import { computePercentagePanelConstraints } from "./computePercentagePanelConstraints";
+
+describe("computePercentagePanelConstraints", () => {
+  it("should compute reasonable defaults with no constraints", () => {
+    expect(computePercentagePanelConstraints([{}, {}], 0, 100))
+      .toMatchInlineSnapshot(`
+{
+  "collapsedSizePercentage": 0,
+  "defaultSizePercentage": undefined,
+  "maxSizePercentage": 100,
+  "minSizePercentage": 0,
+}
+`);
+
+    expect(computePercentagePanelConstraints([{}, {}], 1, 100))
+      .toMatchInlineSnapshot(`
+{
+  "collapsedSizePercentage": 0,
+  "defaultSizePercentage": undefined,
+  "maxSizePercentage": 100,
+  "minSizePercentage": 0,
+}
+`);
+  });
+
+  it("should compute percentage based constraints based on a mix of pixels and percentages", () => {
+    const constraints: PanelConstraints[] = [
+      {
+        maxSizePixels: 20,
+        minSizePixels: 10,
+      },
+      {
+        minSizePixels: 10,
+      },
+      {
+        minSizePixels: 10,
+      },
+    ];
+
+    expect(computePercentagePanelConstraints(constraints, 0, 100))
+      .toMatchInlineSnapshot(`
+{
+  "collapsedSizePercentage": 0,
+  "defaultSizePercentage": undefined,
+  "maxSizePercentage": 20,
+  "minSizePercentage": 10,
+}
+`);
+
+    expect(computePercentagePanelConstraints(constraints, 1, 100))
+      .toMatchInlineSnapshot(`
+{
+  "collapsedSizePercentage": 0,
+  "defaultSizePercentage": undefined,
+  "maxSizePercentage": 80,
+  "minSizePercentage": 10,
+}
+`);
+
+    expect(computePercentagePanelConstraints(constraints, 2, 100))
+      .toMatchInlineSnapshot(`
+{
+  "collapsedSizePercentage": 0,
+  "defaultSizePercentage": undefined,
+  "maxSizePercentage": 80,
+  "minSizePercentage": 10,
+}
+`);
+  });
+
+  it("should compute reasonable percentage based constraints from pixels if group size is negative", () => {
+    jest.spyOn(console, "warn").mockImplementation(() => {});
+
+    expect(
+      computePercentagePanelConstraints(
+        [
+          {
+            minSizePixels: 25,
+            maxSizePixels: 100,
+          },
+        ],
+
+        0,
+        -100
+      )
+    ).toMatchInlineSnapshot(`
+{
+  "collapsedSizePercentage": 0,
+  "defaultSizePercentage": undefined,
+  "maxSizePercentage": 0,
+  "minSizePercentage": 0,
+}
+`);
+
+    expect(console.warn).toHaveBeenCalledTimes(1);
+  });
+});

package/src/utils/computePercentagePanelConstraints.ts

@@ -0,0 +1,56 @@
+import { PanelConstraints } from "../Panel";
+import { convertPixelConstraintsToPercentages } from "./convertPixelConstraintsToPercentages";
+
+export function computePercentagePanelConstraints(
+  panelConstraintsArray: PanelConstraints[],
+  panelIndex: number,
+  groupSizePixels: number
+): {
+  collapsedSizePercentage: number;
+  defaultSizePercentage: number | undefined;
+  maxSizePercentage: number;
+  minSizePercentage: number;
+} {
+  // All panel constraints, excluding the current one
+  let totalMinConstraints = 0;
+  let totalMaxConstraints = 0;
+
+  for (let index = 0; index < panelConstraintsArray.length; index++) {
+    if (index !== panelIndex) {
+      const { collapsible } = panelConstraintsArray[index]!;
+      const { collapsedSizePercentage, maxSizePercentage, minSizePercentage } =
+        convertPixelConstraintsToPercentages(
+          panelConstraintsArray[index]!,
+          groupSizePixels
+        );
+
+      totalMaxConstraints += maxSizePercentage;
+      totalMinConstraints += collapsible
+        ? collapsedSizePercentage
+        : minSizePercentage;
+    }
+  }
+
+  const {
+    collapsedSizePercentage,
+    defaultSizePercentage,
+    maxSizePercentage,
+    minSizePercentage,
+  } = convertPixelConstraintsToPercentages(
+    panelConstraintsArray[panelIndex]!,
+    groupSizePixels
+  );
+
+  return {
+    collapsedSizePercentage,
+    defaultSizePercentage,
+    maxSizePercentage:
+      panelConstraintsArray.length > 1
+        ? Math.min(maxSizePercentage, 100 - totalMinConstraints)
+        : maxSizePercentage,
+    minSizePercentage:
+      panelConstraintsArray.length > 1
+        ? Math.max(minSizePercentage, 100 - totalMaxConstraints)
+        : minSizePercentage,
+  };
+}

package/src/utils/convertPercentageToPixels.test.ts

@@ -0,0 +1,9 @@
+import { convertPercentageToPixels } from "./convertPercentageToPixels";
+
+describe("convertPercentageToPixels", () => {
+  it("should convert percentages to pixels", () => {
+    expect(convertPercentageToPixels(0, 100_000)).toBe(0);
+    expect(convertPercentageToPixels(50, 100_000)).toBe(50_000);
+    expect(convertPercentageToPixels(100, 100_000)).toBe(100_000);
+  });
+});

package/src/utils/convertPercentageToPixels.ts

@@ -0,0 +1,6 @@
+export function convertPercentageToPixels(
+  percentage: number,
+  groupSizePixels: number
+): number {
+  return (percentage / 100) * groupSizePixels;
+}

package/src/utils/convertPixelConstraintsToPercentages.test.ts

@@ -0,0 +1,47 @@
+import { convertPixelConstraintsToPercentages } from "./convertPixelConstraintsToPercentages";
+
+describe("convertPixelConstraintsToPercentages", () => {
+  it("should respect percentage panel constraints if group size is negative", () => {
+    jest.spyOn(console, "warn").mockImplementation(() => {});
+
+    expect(
+      convertPixelConstraintsToPercentages(
+        {
+          minSizePercentage: 25,
+          defaultSizePercentage: 50,
+          maxSizePercentage: 75,
+        },
+        -100
+      )
+    ).toEqual({
+      collapsedSizePercentage: 0,
+      defaultSizePercentage: 50,
+      maxSizePercentage: 75,
+      minSizePercentage: 25,
+    });
+
+    expect(console.warn).toHaveBeenCalledTimes(0);
+  });
+
+  // Edge case test (issues/206)
+  it("should ignore pixel panel constraints if group size is negative", () => {
+    jest.spyOn(console, "warn").mockImplementation(() => {});
+
+    expect(
+      convertPixelConstraintsToPercentages(
+        {
+          minSizePixels: 25,
+          maxSizePixels: 75,
+        },
+        -100
+      )
+    ).toEqual({
+      collapsedSizePercentage: 0,
+      defaultSizePercentage: undefined,
+      maxSizePercentage: 0,
+      minSizePercentage: 0,
+    });
+
+    expect(console.warn).toHaveBeenCalledTimes(1);
+  });
+});

package/src/utils/convertPixelConstraintsToPercentages.ts

@@ -0,0 +1,72 @@
+import { PanelConstraints } from "../Panel";
+import { convertPixelsToPercentage } from "./convertPixelsToPercentage";
+
+export function convertPixelConstraintsToPercentages(
+  panelConstraints: PanelConstraints,
+  groupSizePixels: number
+): {
+  collapsedSizePercentage: number;
+  defaultSizePercentage: number | undefined;
+  maxSizePercentage: number;
+  minSizePercentage: number;
+} {
+  let {
+    collapsedSizePercentage = 0,
+    collapsedSizePixels,
+    defaultSizePercentage,
+    defaultSizePixels,
+    maxSizePercentage = 100,
+    maxSizePixels,
+    minSizePercentage = 0,
+    minSizePixels,
+  } = panelConstraints;
+
+  const hasPixelConstraints =
+    collapsedSizePixels != null ||
+    defaultSizePixels != null ||
+    minSizePixels != null ||
+    maxSizePixels != null;
+
+  if (hasPixelConstraints && groupSizePixels <= 0) {
+    console.warn(`WARNING: Invalid group size: ${groupSizePixels}px`);
+
+    return {
+      collapsedSizePercentage: 0,
+      defaultSizePercentage,
+      maxSizePercentage: 0,
+      minSizePercentage: 0,
+    };
+  }
+
+  if (collapsedSizePixels != null) {
+    collapsedSizePercentage = convertPixelsToPercentage(
+      collapsedSizePixels,
+      groupSizePixels
+    );
+  }
+  if (defaultSizePixels != null) {
+    defaultSizePercentage = convertPixelsToPercentage(
+      defaultSizePixels,
+      groupSizePixels
+    );
+  }
+  if (minSizePixels != null) {
+    minSizePercentage = convertPixelsToPercentage(
+      minSizePixels,
+      groupSizePixels
+    );
+  }
+  if (maxSizePixels != null) {
+    maxSizePercentage = convertPixelsToPercentage(
+      maxSizePixels,
+      groupSizePixels
+    );
+  }
+
+  return {
+    collapsedSizePercentage,
+    defaultSizePercentage,
+    maxSizePercentage,
+    minSizePercentage,
+  };
+}

package/src/utils/convertPixelsToPercentage.test.ts

@@ -0,0 +1,9 @@
+import { convertPixelsToPercentage } from "./convertPixelsToPercentage";
+
+describe("convertPixelsToPercentage", () => {
+  it("should convert pixels to percentages", () => {
+    expect(convertPixelsToPercentage(0, 100_000)).toBe(0);
+    expect(convertPixelsToPercentage(50_000, 100_000)).toBe(50);
+    expect(convertPixelsToPercentage(100_000, 100_000)).toBe(100);
+  });
+});

package/src/utils/convertPixelsToPercentage.ts

@@ -0,0 +1,6 @@
+export function convertPixelsToPercentage(
+  pixels: number,
+  groupSizePixels: number
+): number {
+  return (pixels / groupSizePixels) * 100;
+}

package/src/utils/determinePivotIndices.ts

@@ -0,0 +1,10 @@
+import { getResizeHandleElementIndex } from "../utils/dom/getResizeHandleElementIndex";
+
+export function determinePivotIndices(
+  groupId: string,
+  dragHandleId: string
+): [indexBefore: number, indexAfter: number] {
+  const index = getResizeHandleElementIndex(groupId, dragHandleId);
+
+  return index != null ? [index, index + 1] : [-1, -1];
+}

package/src/utils/dom/calculateAvailablePanelSizeInPixels.ts

@@ -0,0 +1,29 @@
+import { getPanelGroupElement } from "./getPanelGroupElement";
+import { getResizeHandleElementsForGroup } from "./getResizeHandleElementsForGroup";
+
+export function calculateAvailablePanelSizeInPixels(groupId: string): number {
+  const panelGroupElement = getPanelGroupElement(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+
+  const direction = panelGroupElement.getAttribute(
+    "data-panel-group-direction"
+  );
+  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  if (direction === "horizontal") {
+    return (
+      panelGroupElement.offsetWidth -
+      resizeHandles.reduce((accumulated, handle) => {
+        return accumulated + handle.offsetWidth;
+      }, 0)
+    );
+  } else {
+    return (
+      panelGroupElement.offsetHeight -
+      resizeHandles.reduce((accumulated, handle) => {
+        return accumulated + handle.offsetHeight;
+      }, 0)
+    );
+  }
+}

package/src/utils/dom/getAvailableGroupSizePixels.ts

@@ -0,0 +1,29 @@
+import { getPanelGroupElement } from "./getPanelGroupElement";
+import { getResizeHandleElementsForGroup } from "./getResizeHandleElementsForGroup";
+
+export function getAvailableGroupSizePixels(groupId: string): number {
+  const panelGroupElement = getPanelGroupElement(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+
+  const direction = panelGroupElement.getAttribute(
+    "data-panel-group-direction"
+  );
+  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  if (direction === "horizontal") {
+    return (
+      panelGroupElement.offsetWidth -
+      resizeHandles.reduce((accumulated, handle) => {
+        return accumulated + handle.offsetWidth;
+      }, 0)
+    );
+  } else {
+    return (
+      panelGroupElement.offsetHeight -
+      resizeHandles.reduce((accumulated, handle) => {
+        return accumulated + handle.offsetHeight;
+      }, 0)
+    );
+  }
+}

package/src/utils/dom/getPanelElement.ts

@@ -0,0 +1,7 @@
+export function getPanelElement(id: string): HTMLDivElement | null {
+  const element = document.querySelector(`[data-panel-id="${id}"]`);
+  if (element) {
+    return element as HTMLDivElement;
+  }
+  return null;
+}

package/src/utils/dom/getPanelGroupElement.ts

@@ -0,0 +1,9 @@
+export function getPanelGroupElement(id: string): HTMLDivElement | null {
+  const element = document.querySelector(
+    `[data-panel-group][data-panel-group-id="${id}"]`
+  );
+  if (element) {
+    return element as HTMLDivElement;
+  }
+  return null;
+}

package/src/utils/dom/getResizeHandleElement.ts

@@ -0,0 +1,9 @@
+export function getResizeHandleElement(id: string): HTMLDivElement | null {
+  const element = document.querySelector(
+    `[data-panel-resize-handle-id="${id}"]`
+  );
+  if (element) {
+    return element as HTMLDivElement;
+  }
+  return null;
+}

package/src/utils/dom/getResizeHandleElementIndex.ts

@@ -0,0 +1,12 @@
+import { getResizeHandleElementsForGroup } from "./getResizeHandleElementsForGroup";
+
+export function getResizeHandleElementIndex(
+  groupId: string,
+  id: string
+): number | null {
+  const handles = getResizeHandleElementsForGroup(groupId);
+  const index = handles.findIndex(
+    (handle) => handle.getAttribute("data-panel-resize-handle-id") === id
+  );
+  return index ?? null;
+}

package/src/utils/dom/getResizeHandleElementsForGroup.ts

@@ -0,0 +1,9 @@
+export function getResizeHandleElementsForGroup(
+  groupId: string
+): HTMLDivElement[] {
+  return Array.from(
+    document.querySelectorAll(
+      `[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`
+    )
+  );
+}

package/src/utils/dom/getResizeHandlePanelIds.ts

@@ -0,0 +1,18 @@
+import { PanelData } from "../../Panel";
+import { getResizeHandleElement } from "./getResizeHandleElement";
+import { getResizeHandleElementsForGroup } from "./getResizeHandleElementsForGroup";
+
+export function getResizeHandlePanelIds(
+  groupId: string,
+  handleId: string,
+  panelsArray: PanelData[]
+): [idBefore: string | null, idAfter: string | null] {
+  const handle = getResizeHandleElement(handleId);
+  const handles = getResizeHandleElementsForGroup(groupId);
+  const index = handle ? handles.indexOf(handle) : -1;
+
+  const idBefore: string | null = panelsArray[index]?.id ?? null;
+  const idAfter: string | null = panelsArray[index + 1]?.id ?? null;
+
+  return [idBefore, idAfter];
+}

package/src/utils/events.ts

@@ -0,0 +1,13 @@
+import { ResizeEvent } from "../PanelGroupContext";
+
+export function isKeyDown(event: ResizeEvent): event is KeyboardEvent {
+  return event.type === "keydown";
+}
+
+export function isMouseEvent(event: ResizeEvent): event is MouseEvent {
+  return event.type.startsWith("mouse");
+}
+
+export function isTouchEvent(event: ResizeEvent): event is TouchEvent {
+  return event.type.startsWith("touch");
+}

package/src/utils/getPercentageSizeFromMixedSizes.test.ts

@@ -0,0 +1,47 @@
+import { getPercentageSizeFromMixedSizes } from "./getPercentageSizeFromMixedSizes";
+
+describe("getPercentageSizeFromMixedSizes", () => {
+  it("should return percentage sizes as-is", () => {
+    expect(
+      getPercentageSizeFromMixedSizes(
+        {
+          sizePercentage: 50,
+        },
+        100_000
+      )
+    ).toBe(50);
+    expect(
+      getPercentageSizeFromMixedSizes(
+        {
+          sizePercentage: 25,
+          sizePixels: 100,
+        },
+        100_000
+      )
+    ).toBe(25);
+  });
+
+  it("should convert pixels to percentages", () => {
+    expect(
+      getPercentageSizeFromMixedSizes(
+        {
+          sizePixels: 50_000,
+        },
+        100_000
+      )
+    ).toBe(50);
+    expect(
+      getPercentageSizeFromMixedSizes(
+        {
+          sizePercentage: 25,
+          sizePixels: 50_000,
+        },
+        100_000
+      )
+    ).toBe(25);
+  });
+
+  it("should return undefined if neither pixel nor percentage sizes specified", () => {
+    expect(getPercentageSizeFromMixedSizes({}, 100_000)).toBeUndefined();
+  });
+});

package/src/utils/getPercentageSizeFromMixedSizes.ts

@@ -0,0 +1,15 @@
+import { MixedSizes } from "../types";
+import { convertPixelsToPercentage } from "./convertPixelsToPercentage";
+
+export function getPercentageSizeFromMixedSizes(
+  { sizePercentage, sizePixels }: Partial<MixedSizes>,
+  groupSizePixels: number
+): number | undefined {
+  if (sizePercentage != null) {
+    return sizePercentage;
+  } else if (sizePixels != null) {
+    return convertPixelsToPercentage(sizePixels, groupSizePixels);
+  }
+
+  return undefined;
+}