react-resizable-panels 0.0.54 → 0.0.56

package/src/utils/adjustLayoutByDelta.ts

@@ -0,0 +1,211 @@
+import { computePercentagePanelConstraints } from "./computePercentagePanelConstraints";
+import { fuzzyNumbersEqual } from "./numbers/fuzzyNumbersEqual";
+import { resizePanel } from "./resizePanel";
+import { PanelConstraints } from "../Panel";
+
+let isCheckingForInfiniteLoop = false;
+
+// All units must be in percentages; pixel values should be pre-converted
+export function adjustLayoutByDelta({
+  delta,
+  groupSizePixels,
+  layout: prevLayout,
+  panelConstraints,
+  pivotIndices,
+  trigger,
+}: {
+  delta: number;
+  groupSizePixels: number;
+  layout: number[];
+  panelConstraints: PanelConstraints[];
+  pivotIndices: number[];
+  trigger: "imperative-api" | "keyboard" | "mouse-or-touch";
+}): number[] {
+  if (fuzzyNumbersEqual(delta, 0)) {
+    return prevLayout;
+  }
+
+  const nextLayout = [...prevLayout];
+
+  let deltaApplied = 0;
+
+  // A resizing panel affects the panels before or after it.
+  //
+  // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.
+  // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.
+  //
+  // A positive delta means the panel immediately before the resizer should "expand".
+  // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.
+
+  // First, check the panel we're pivoting around;
+  // We should only expand or contract by as much as its constraints allow
+  {
+    const pivotIndex = delta < 0 ? pivotIndices[1]! : pivotIndices[0]!;
+    const initialSize = nextLayout[pivotIndex]!;
+
+    const { collapsible } = panelConstraints[pivotIndex]!;
+    const { collapsedSizePercentage, maxSizePercentage, minSizePercentage } =
+      computePercentagePanelConstraints(
+        panelConstraints,
+        pivotIndex,
+        groupSizePixels
+      );
+
+    const isCollapsed =
+      collapsible && fuzzyNumbersEqual(initialSize, collapsedSizePercentage);
+
+    let unsafeSize = initialSize + Math.abs(delta);
+    if (isCollapsed) {
+      switch (trigger) {
+        case "keyboard":
+          if (minSizePercentage > unsafeSize) {
+            unsafeSize = minSizePercentage;
+          }
+      }
+    }
+
+    const safeSize = resizePanel({
+      groupSizePixels,
+      panelConstraints,
+      panelIndex: pivotIndex,
+      size: unsafeSize,
+    });
+
+    if (fuzzyNumbersEqual(initialSize, safeSize)) {
+      // If there's no room for the pivot panel to grow, we should ignore this change
+      return nextLayout;
+    } else {
+      delta = delta < 0 ? initialSize - safeSize : safeSize - initialSize;
+    }
+  }
+
+  // Delta added to a panel needs to be subtracted from other panels
+  // within the constraints that those panels allow
+  {
+    const pivotIndex = delta < 0 ? pivotIndices[0]! : pivotIndices[1]!;
+    let index = pivotIndex;
+    while (index >= 0 && index < panelConstraints.length) {
+      const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
+
+      const prevSize = prevLayout[index]!;
+      const unsafeSize = prevSize - deltaRemaining;
+
+      let safeSize = resizePanel({
+        groupSizePixels,
+        panelConstraints,
+        panelIndex: index,
+        size: unsafeSize,
+      });
+
+      if (!fuzzyNumbersEqual(prevSize, safeSize)) {
+        deltaApplied += prevSize - safeSize;
+
+        nextLayout[index] = safeSize;
+
+        if (
+          deltaApplied
+            .toPrecision(3)
+            .localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+              numeric: true,
+            }) >= 0
+        ) {
+          break;
+        }
+      }
+
+      if (delta < 0) {
+        index--;
+      } else {
+        index++;
+      }
+    }
+  }
+
+  // If we were unable to resize any of the panels panels, return the previous state.
+  // This will essentially bailout and ignore e.g. drags past a panel's boundaries
+  if (fuzzyNumbersEqual(deltaApplied, 0)) {
+    return prevLayout;
+  }
+
+  {
+    const pivotIndex = delta < 0 ? pivotIndices[1]! : pivotIndices[0]!;
+
+    const unsafeSize = prevLayout[pivotIndex]! + deltaApplied;
+    const safeSize = resizePanel({
+      groupSizePixels,
+      panelConstraints,
+      panelIndex: pivotIndex,
+      size: unsafeSize,
+    });
+
+    // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
+    nextLayout[pivotIndex] = safeSize;
+
+    // Edge case where expanding or contracting one panel caused another one to change collapsed state
+    if (!fuzzyNumbersEqual(safeSize, unsafeSize)) {
+      let deltaRemaining = unsafeSize - safeSize;
+
+      const pivotIndex = delta < 0 ? pivotIndices[1]! : pivotIndices[0]!;
+      let index = pivotIndex;
+      while (index >= 0 && index < panelConstraints.length) {
+        const prevSize = nextLayout[index]!;
+        const unsafeSize = prevSize + deltaRemaining;
+        const safeSize = resizePanel({
+          groupSizePixels,
+          panelConstraints,
+          panelIndex: index,
+          size: unsafeSize,
+        });
+
+        if (!fuzzyNumbersEqual(prevSize, safeSize)) {
+          deltaRemaining -= safeSize - prevSize;
+
+          nextLayout[index] = safeSize;
+        }
+
+        if (fuzzyNumbersEqual(deltaRemaining, 0)) {
+          break;
+        }
+
+        if (delta > 0) {
+          index--;
+        } else {
+          index++;
+        }
+      }
+
+      // If we can't redistribute, this layout is invalid;
+      // There may be an incremental layout that is valid though
+      if (!fuzzyNumbersEqual(deltaRemaining, 0)) {
+        let didSetInfiniteLoopCheckCounter = false;
+        if (isCheckingForInfiniteLoop === null) {
+          didSetInfiniteLoopCheckCounter = true;
+          isCheckingForInfiniteLoop = true;
+        }
+
+        try {
+          return adjustLayoutByDelta({
+            delta: delta < 0 ? delta + 1 : delta - 1,
+            groupSizePixels,
+            layout: prevLayout,
+            panelConstraints,
+            pivotIndices,
+            trigger,
+          });
+        } catch (error) {
+          if (error instanceof RangeError) {
+            console.error(`Could not apply delta ${delta} to layout`);
+
+            return prevLayout;
+          }
+        } finally {
+          if (didSetInfiniteLoopCheckCounter) {
+            isCheckingForInfiniteLoop = false;
+          }
+        }
+      }
+    }
+  }
+
+  return nextLayout;
+}

package/src/utils/calculateAriaValues.test.ts

@@ -0,0 +1,111 @@
+import { PanelConstraints, PanelData } from "../Panel";
+import { calculateAriaValues } from "./calculateAriaValues";
+
+describe("calculateAriaValues", () => {
+  let idCounter = 0;
+  let orderCounter = 0;
+
+  function createPanelData(constraints: PanelConstraints = {}): PanelData {
+    return {
+      callbacks: {
+        onCollapse: undefined,
+        onExpand: undefined,
+        onResize: undefined,
+      },
+      constraints,
+      id: `${idCounter++}`,
+      idIsFromProps: false,
+      order: orderCounter++,
+    };
+  }
+
+  beforeEach(() => {
+    idCounter = 0;
+    orderCounter = 0;
+  });
+
+  it("should work correctly for panels with no min/max constraints", () => {
+    expect(
+      calculateAriaValues({
+        groupSizePixels: 1_000,
+        layout: [50, 50],
+        panelsArray: [createPanelData(), createPanelData()],
+        pivotIndices: [0, 1],
+      })
+    ).toEqual({
+      valueMax: 100,
+      valueMin: 0,
+      valueNow: 50,
+    });
+
+    expect(
+      calculateAriaValues({
+        groupSizePixels: 1_000,
+        layout: [20, 50, 30],
+        panelsArray: [createPanelData(), createPanelData(), createPanelData()],
+        pivotIndices: [0, 1],
+      })
+    ).toEqual({
+      valueMax: 100,
+      valueMin: 0,
+      valueNow: 20,
+    });
+
+    expect(
+      calculateAriaValues({
+        groupSizePixels: 1_000,
+        layout: [20, 50, 30],
+        panelsArray: [createPanelData(), createPanelData(), createPanelData()],
+        pivotIndices: [1, 2],
+      })
+    ).toEqual({
+      valueMax: 100,
+      valueMin: 0,
+      valueNow: 50,
+    });
+  });
+
+  it("should work correctly for panels with min/max constraints", () => {
+    expect(
+      calculateAriaValues({
+        groupSizePixels: 1_000,
+        layout: [25, 75],
+        panelsArray: [
+          createPanelData({
+            maxSizePercentage: 35,
+            minSizePercentage: 10,
+          }),
+          createPanelData(),
+        ],
+        pivotIndices: [0, 1],
+      })
+    ).toEqual({
+      valueMax: 35,
+      valueMin: 10,
+      valueNow: 25,
+    });
+
+    expect(
+      calculateAriaValues({
+        groupSizePixels: 1_000,
+        layout: [25, 50, 25],
+        panelsArray: [
+          createPanelData({
+            maxSizePercentage: 35,
+            minSizePercentage: 10,
+          }),
+          createPanelData(),
+          createPanelData({
+            maxSizePercentage: 35,
+            minSizePercentage: 10,
+          }),
+        ],
+        pivotIndices: [1, 2],
+      })
+    ).toEqual({
+      valueMax: 80,
+      valueMin: 30,
+      valueNow: 50,
+    });
+  });
+});

package/src/utils/calculateAriaValues.ts

@@ -0,0 +1,67 @@
+import { PanelData } from "../Panel";
+import { getPercentageSizeFromMixedSizes } from "./getPercentageSizeFromMixedSizes";
+
+export function calculateAriaValues({
+  groupSizePixels,
+  layout,
+  panelsArray,
+  pivotIndices,
+}: {
+  groupSizePixels: number;
+  layout: number[];
+  panelsArray: PanelData[];
+  pivotIndices: number[];
+}) {
+  let currentMinSize = 0;
+  let currentMaxSize = 100;
+  let totalMinSize = 0;
+  let totalMaxSize = 0;
+
+  // A panel's effective min/max sizes also need to account for other panel's sizes.
+  panelsArray.forEach((panelData, index) => {
+    const { constraints } = panelData;
+    const {
+      maxSizePercentage,
+      maxSizePixels,
+      minSizePercentage,
+      minSizePixels,
+    } = constraints;
+
+    const minSize =
+      getPercentageSizeFromMixedSizes(
+        {
+          sizePercentage: minSizePercentage,
+          sizePixels: minSizePixels,
+        },
+        groupSizePixels
+      ) ?? 0;
+
+    const maxSize =
+      getPercentageSizeFromMixedSizes(
+        {
+          sizePercentage: maxSizePercentage,
+          sizePixels: maxSizePixels,
+        },
+        groupSizePixels
+      ) ?? 100;
+
+    if (index === pivotIndices[0]) {
+      currentMinSize = minSize;
+      currentMaxSize = maxSize;
+    } else {
+      totalMinSize += minSize;
+      totalMaxSize += maxSize;
+    }
+  });
+
+  const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
+  const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
+
+  const valueNow = layout[pivotIndices[0]];
+
+  return {
+    valueMax,
+    valueMin,
+    valueNow,
+  };
+}

package/src/utils/calculateDeltaPercentage.ts

@@ -0,0 +1,68 @@
+import { DragState, ResizeEvent } from "../PanelGroupContext";
+import { Direction } from "../types";
+import { getPanelGroupElement } from "../utils/dom/getPanelGroupElement";
+import { calculateDragOffsetPercentage } from "./calculateDragOffsetPercentage";
+import { isKeyDown } from "./events";
+
+// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
+export function calculateDeltaPercentage(
+  event: ResizeEvent,
+  groupId: string,
+  dragHandleId: string,
+  direction: Direction,
+  initialDragState: DragState,
+  keyboardResizeByOptions: {
+    percentage: number | null;
+    pixels: number | null;
+  }
+): number {
+  if (isKeyDown(event)) {
+    const isHorizontal = direction === "horizontal";
+
+    const groupElement = getPanelGroupElement(groupId)!;
+    const rect = groupElement.getBoundingClientRect();
+    const groupSizeInPixels = isHorizontal ? rect.width : rect.height;
+
+    let delta = 0;
+    if (event.shiftKey) {
+      delta = 100;
+    } else if (keyboardResizeByOptions.percentage != null) {
+      delta = keyboardResizeByOptions.percentage;
+    } else if (keyboardResizeByOptions.pixels != null) {
+      delta = keyboardResizeByOptions.pixels / groupSizeInPixels;
+    } else {
+      delta = 10;
+    }
+
+    let movement = 0;
+    switch (event.key) {
+      case "ArrowDown":
+        movement = isHorizontal ? 0 : delta;
+        break;
+      case "ArrowLeft":
+        movement = isHorizontal ? -delta : 0;
+        break;
+      case "ArrowRight":
+        movement = isHorizontal ? delta : 0;
+        break;
+      case "ArrowUp":
+        movement = isHorizontal ? 0 : -delta;
+        break;
+      case "End":
+        movement = 100;
+        break;
+      case "Home":
+        movement = -100;
+        break;
+    }
+
+    return movement;
+  } else {
+    return calculateDragOffsetPercentage(
+      event,
+      dragHandleId,
+      direction,
+      initialDragState
+    );
+  }
+}

package/src/utils/calculateDragOffsetPercentage.ts

@@ -0,0 +1,30 @@
+import { DragState, ResizeEvent } from "../PanelGroupContext";
+import { Direction } from "../types";
+import { getPanelGroupElement } from "../utils/dom/getPanelGroupElement";
+import { getResizeHandleElement } from "../utils/dom/getResizeHandleElement";
+import { getResizeEventCursorPosition } from "./getResizeEventCursorPosition";
+
+export function calculateDragOffsetPercentage(
+  event: ResizeEvent,
+  dragHandleId: string,
+  direction: Direction,
+  initialDragState: DragState
+): number {
+  const isHorizontal = direction === "horizontal";
+
+  const handleElement = getResizeHandleElement(dragHandleId)!;
+  const groupId = handleElement.getAttribute("data-panel-group-id")!;
+
+  let { initialCursorPosition } = initialDragState;
+
+  const cursorPosition = getResizeEventCursorPosition(direction, event);
+
+  const groupElement = getPanelGroupElement(groupId)!;
+  const groupRect = groupElement.getBoundingClientRect();
+  const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
+
+  const offsetPixels = cursorPosition - initialCursorPosition;
+  const offsetPercentage = (offsetPixels / groupSizeInPixels) * 100;
+
+  return offsetPercentage;
+}

package/src/utils/calculateUnsafeDefaultLayout.test.ts

@@ -0,0 +1,92 @@
+import { PanelConstraints, PanelData } from "../Panel";
+import { calculateUnsafeDefaultLayout } from "./calculateUnsafeDefaultLayout";
+import { expectToBeCloseToArray } from "./test-utils";
+
+describe("calculateUnsafeDefaultLayout", () => {
+  let idCounter = 0;
+  let orderCounter = 0;
+
+  function createPanelData(constraints: PanelConstraints = {}): PanelData {
+    return {
+      callbacks: {
+        onCollapse: undefined,
+        onExpand: undefined,
+        onResize: undefined,
+      },
+      constraints,
+      id: `${idCounter++}`,
+      idIsFromProps: false,
+      order: orderCounter++,
+    };
+  }
+
+  beforeEach(() => {
+    idCounter = 0;
+    orderCounter = 0;
+  });
+
+  it("should assign even sizes for every panel by default", () => {
+    expectToBeCloseToArray(
+      calculateUnsafeDefaultLayout({
+        groupSizePixels: 100_000,
+        panelDataArray: [createPanelData()],
+      }),
+      [100]
+    );
+
+    expectToBeCloseToArray(
+      calculateUnsafeDefaultLayout({
+        groupSizePixels: 100_000,
+        panelDataArray: [createPanelData(), createPanelData()],
+      }),
+      [50, 50]
+    );
+
+    expectToBeCloseToArray(
+      calculateUnsafeDefaultLayout({
+        groupSizePixels: 100_000,
+        panelDataArray: [
+          createPanelData(),
+          createPanelData(),
+          createPanelData(),
+        ],
+      }),
+      [33.3, 33.3, 33.3]
+    );
+  });
+
+  it("should respect default panel size constraints", () => {
+    expectToBeCloseToArray(
+      calculateUnsafeDefaultLayout({
+        groupSizePixels: 100_000,
+        panelDataArray: [
+          createPanelData({
+            defaultSizePercentage: 15,
+          }),
+          createPanelData({
+            defaultSizePercentage: 85,
+          }),
+        ],
+      }),
+      [15, 85]
+    );
+  });
+
+  it("should ignore min and max panel size constraints", () => {
+    expectToBeCloseToArray(
+      calculateUnsafeDefaultLayout({
+        groupSizePixels: 100_000,
+        panelDataArray: [
+          createPanelData({
+            minSizePercentage: 40,
+          }),
+          createPanelData(),
+          createPanelData({
+            maxSizePercentage: 10,
+          }),
+        ],
+      }),
+      [33.3, 33.3, 33.3]
+    );
+  });
+});

package/src/utils/calculateUnsafeDefaultLayout.ts

@@ -0,0 +1,55 @@
+import { PanelData } from "../Panel";
+import { computePercentagePanelConstraints } from "./computePercentagePanelConstraints";
+
+export function calculateUnsafeDefaultLayout({
+  groupSizePixels,
+  panelDataArray,
+}: {
+  groupSizePixels: number;
+  panelDataArray: PanelData[];
+}): number[] {
+  const layout = Array<number>(panelDataArray.length);
+
+  const panelDataConstraints = panelDataArray.map(
+    (panelData) => panelData.constraints
+  );
+
+  let numPanelsWithSizes = 0;
+  let remainingSize = 100;
+
+  // Distribute default sizes first
+  for (let index = 0; index < panelDataArray.length; index++) {
+    const { defaultSizePercentage } = computePercentagePanelConstraints(
+      panelDataConstraints,
+      index,
+      groupSizePixels
+    );
+
+    if (defaultSizePercentage != null) {
+      numPanelsWithSizes++;
+      layout[index] = defaultSizePercentage;
+      remainingSize -= defaultSizePercentage;
+    }
+  }
+
+  // Remaining size should be distributed evenly between panels without default sizes
+  for (let index = 0; index < panelDataArray.length; index++) {
+    const { defaultSizePercentage } = computePercentagePanelConstraints(
+      panelDataConstraints,
+      index,
+      groupSizePixels
+    );
+    if (defaultSizePercentage != null) {
+      continue;
+    }
+
+    const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
+    const size = remainingSize / numRemainingPanels;
+
+    numPanelsWithSizes++;
+    layout[index] = size;
+    remainingSize -= size;
+  }
+
+  return layout;
+}