react-resizable-panels 0.0.63 → 1.0.0-rc.1

package/src/utils/adjustLayoutByDelta.ts

@@ -1,5 +1,5 @@
 import { PanelConstraints } from "../Panel";
-import { computePercentagePanelConstraints } from "./computePercentagePanelConstraints";
+import { assert } from "./assert";
 import { fuzzyCompareNumbers } from "./numbers/fuzzyCompareNumbers";
 import { fuzzyNumbersEqual } from "./numbers/fuzzyNumbersEqual";
 import { resizePanel } from "./resizePanel";
@@ -7,14 +7,12 @@ import { resizePanel } from "./resizePanel";
 // All units must be in percentages; pixel values should be pre-converted
 export function adjustLayoutByDelta({
   delta,
-  groupSizePixels,
   layout: prevLayout,
-  panelConstraints,
+  panelConstraints: panelConstraintsArray,
   pivotIndices,
   trigger,
 }: {
   delta: number;
-  groupSizePixels: number;
   layout: number[];
   panelConstraints: PanelConstraints[];
   pivotIndices: number[];
@@ -26,6 +24,10 @@ export function adjustLayoutByDelta({
 
   const nextLayout = [...prevLayout];
 
+  const [firstPivotIndex, secondPivotIndex] = pivotIndices;
+  assert(firstPivotIndex != null);
+  assert(secondPivotIndex != null);
+
   let deltaApplied = 0;
 
   //const DEBUG = [];
@@ -49,21 +51,22 @@ export function adjustLayoutByDelta({
     if (trigger === "keyboard") {
       {
         // Check if we should expand a collapsed panel
-        const index = delta < 0 ? pivotIndices[1]! : pivotIndices[0]!;
-        const constraints = panelConstraints[index]!;
+        const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
+        const panelConstraints = panelConstraintsArray[index];
+        assert(panelConstraints);
+
         //DEBUG.push(`edge case check 1: ${index}`);
         //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
-        if (constraints.collapsible) {
-          const prevSize = prevLayout[index]!;
-          const { collapsedSizePercentage, minSizePercentage } =
-            computePercentagePanelConstraints(
-              panelConstraints,
-              index,
-              groupSizePixels
-            );
-
-          if (fuzzyNumbersEqual(prevSize, collapsedSizePercentage)) {
-            const localDelta = minSizePercentage - prevSize;
+        if (panelConstraints.collapsible) {
+          const prevSize = prevLayout[index];
+          assert(prevSize != null);
+
+          const panelConstraints = panelConstraintsArray[index];
+          assert(panelConstraints);
+          const { collapsedSize = 0, minSize = 0 } = panelConstraints;
+
+          if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
+            const localDelta = minSize - prevSize;
             //DEBUG.push(`  -> expand delta: ${localDelta}`);
 
             if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
@@ -76,21 +79,23 @@ export function adjustLayoutByDelta({
 
       {
         // Check if we should collapse a panel at its minimum size
-        const index = delta < 0 ? pivotIndices[0]! : pivotIndices[1]!;
-        const constraints = panelConstraints[index]!;
+        const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
+        const panelConstraints = panelConstraintsArray[index];
+        assert(panelConstraints);
+        const { collapsible } = panelConstraints;
+
         //DEBUG.push(`edge case check 2: ${index}`);
-        //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
-        if (constraints.collapsible) {
-          const prevSize = prevLayout[index]!;
-          const { collapsedSizePercentage, minSizePercentage } =
-            computePercentagePanelConstraints(
-              panelConstraints,
-              index,
-              groupSizePixels
-            );
-
-          if (fuzzyNumbersEqual(prevSize, minSizePercentage)) {
-            const localDelta = prevSize - collapsedSizePercentage;
+        //DEBUG.push(`  -> collapsible? ${collapsible}`);
+        if (collapsible) {
+          const prevSize = prevLayout[index];
+          assert(prevSize != null);
+
+          const panelConstraints = panelConstraintsArray[index];
+          assert(panelConstraints);
+          const { collapsedSize = 0, minSize = 0 } = panelConstraints;
+
+          if (fuzzyNumbersEqual(prevSize, minSize)) {
+            const localDelta = prevSize - collapsedSize;
             //DEBUG.push(`  -> expand delta: ${localDelta}`);
 
             if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
@@ -113,15 +118,16 @@ export function adjustLayoutByDelta({
 
     const increment = delta < 0 ? 1 : -1;
 
-    let index = delta < 0 ? pivotIndices[1]! : pivotIndices[0]!;
+    let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
     let maxAvailableDelta = 0;
 
     //DEBUG.push("pre calc...");
     while (true) {
       const prevSize = prevLayout[index];
+      assert(prevSize != null);
+
       const maxSafeSize = resizePanel({
-        groupSizePixels,
-        panelConstraints,
+        panelConstraints: panelConstraintsArray,
         panelIndex: index,
         size: 100,
       });
@@ -131,7 +137,7 @@ export function adjustLayoutByDelta({
       maxAvailableDelta += delta;
       index += increment;
 
-      if (index < 0 || index >= panelConstraints.length) {
+      if (index < 0 || index >= panelConstraintsArray.length) {
         break;
       }
     }
@@ -146,16 +152,17 @@ export function adjustLayoutByDelta({
   {
     // 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]!;
+    const pivotIndex = delta < 0 ? firstPivotIndex : secondPivotIndex;
     let index = pivotIndex;
-    while (index >= 0 && index < panelConstraints.length) {
+    while (index >= 0 && index < panelConstraintsArray.length) {
       const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
 
-      const prevSize = prevLayout[index]!;
+      const prevSize = prevLayout[index];
+      assert(prevSize != null);
+
       const unsafeSize = prevSize - deltaRemaining;
       const safeSize = resizePanel({
-        groupSizePixels,
-        panelConstraints,
+        panelConstraints: panelConstraintsArray,
         panelIndex: index,
         size: unsafeSize,
       });
@@ -196,12 +203,14 @@ export function adjustLayoutByDelta({
 
   {
     // Now distribute the applied delta to the panels in the other direction
-    const pivotIndex = delta < 0 ? pivotIndices[1]! : pivotIndices[0]!;
+    const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
 
-    const unsafeSize = prevLayout[pivotIndex]! + deltaApplied;
+    const prevSize = prevLayout[pivotIndex];
+    assert(prevSize != null);
+
+    const unsafeSize = prevSize + deltaApplied;
     const safeSize = resizePanel({
-      groupSizePixels,
-      panelConstraints,
+      panelConstraints: panelConstraintsArray,
       panelIndex: pivotIndex,
       size: unsafeSize,
     });
@@ -213,14 +222,15 @@ export function adjustLayoutByDelta({
     if (!fuzzyNumbersEqual(safeSize, unsafeSize)) {
       let deltaRemaining = unsafeSize - safeSize;
 
-      const pivotIndex = delta < 0 ? pivotIndices[1]! : pivotIndices[0]!;
+      const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
       let index = pivotIndex;
-      while (index >= 0 && index < panelConstraints.length) {
-        const prevSize = nextLayout[index]!;
+      while (index >= 0 && index < panelConstraintsArray.length) {
+        const prevSize = nextLayout[index];
+        assert(prevSize != null);
+
         const unsafeSize = prevSize + deltaRemaining;
         const safeSize = resizePanel({
-          groupSizePixels,
-          panelConstraints,
+          panelConstraints: panelConstraintsArray,
           panelIndex: index,
           size: unsafeSize,
         });
@@ -248,9 +258,7 @@ export function adjustLayoutByDelta({
   //DEBUG.push("");
 
   const totalSize = nextLayout.reduce((total, size) => size + total, 0);
-  deltaApplied = 100 - totalSize;
   //DEBUG.push(`total size: ${totalSize}`);
-  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
   //console.log(DEBUG.join("\n"));
 
   if (!fuzzyNumbersEqual(totalSize, 100)) {

package/src/utils/assert.ts

@@ -1,5 +1,5 @@
 export function assert(
-  expectedCondition: boolean,
+  expectedCondition: any,
   message: string = "Assertion failed!"
 ): asserts expectedCondition {
   if (!expectedCondition) {

package/src/utils/calculateAriaValues.test.ts

@@ -27,7 +27,6 @@ describe("calculateAriaValues", () => {
   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],
@@ -40,7 +39,6 @@ describe("calculateAriaValues", () => {
 
     expect(
       calculateAriaValues({
-        groupSizePixels: 1_000,
         layout: [20, 50, 30],
         panelsArray: [createPanelData(), createPanelData(), createPanelData()],
         pivotIndices: [0, 1],
@@ -53,7 +51,6 @@ describe("calculateAriaValues", () => {
 
     expect(
       calculateAriaValues({
-        groupSizePixels: 1_000,
         layout: [20, 50, 30],
         panelsArray: [createPanelData(), createPanelData(), createPanelData()],
         pivotIndices: [1, 2],
@@ -68,12 +65,11 @@ describe("calculateAriaValues", () => {
   it("should work correctly for panels with min/max constraints", () => {
     expect(
       calculateAriaValues({
-        groupSizePixels: 1_000,
         layout: [25, 75],
         panelsArray: [
           createPanelData({
-            maxSizePercentage: 35,
-            minSizePercentage: 10,
+            maxSize: 35,
+            minSize: 10,
           }),
           createPanelData(),
         ],
@@ -87,17 +83,16 @@ describe("calculateAriaValues", () => {
 
     expect(
       calculateAriaValues({
-        groupSizePixels: 1_000,
         layout: [25, 50, 25],
         panelsArray: [
           createPanelData({
-            maxSizePercentage: 35,
-            minSizePercentage: 10,
+            maxSize: 35,
+            minSize: 10,
           }),
           createPanelData(),
           createPanelData({
-            maxSizePercentage: 35,
-            minSizePercentage: 10,
+            maxSize: 35,
+            minSize: 10,
           }),
         ],
         pivotIndices: [1, 2],

package/src/utils/calculateAriaValues.ts

@@ -1,13 +1,11 @@
 import { PanelData } from "../Panel";
-import { getPercentageSizeFromMixedSizes } from "./getPercentageSizeFromMixedSizes";
+import { assert } from "./assert";
 
 export function calculateAriaValues({
-  groupSizePixels,
   layout,
   panelsArray,
   pivotIndices,
 }: {
-  groupSizePixels: number;
   layout: number[];
   panelsArray: PanelData[];
   pivotIndices: number[];
@@ -17,35 +15,15 @@ export function calculateAriaValues({
   let totalMinSize = 0;
   let totalMaxSize = 0;
 
+  const firstIndex = pivotIndices[0];
+  assert(firstIndex != null);
+
   // 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;
+    const { maxSize = 100, minSize = 0 } = constraints;
 
-    if (index === pivotIndices[0]) {
+    if (index === firstIndex) {
       currentMinSize = minSize;
       currentMaxSize = maxSize;
     } else {
@@ -57,7 +35,7 @@ export function calculateAriaValues({
   const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
   const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
 
-  const valueNow = layout[pivotIndices[0]];
+  const valueNow = layout[firstIndex];
 
   return {
     valueMax,

package/src/utils/calculateDeltaPercentage.ts

@@ -1,35 +1,24 @@
 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;
-  }
+  initialDragState: DragState | null,
+  keyboardResizeBy: 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 if (keyboardResizeBy != null) {
+      delta = keyboardResizeBy;
     } else {
       delta = 10;
     }
@@ -58,6 +47,10 @@ export function calculateDeltaPercentage(
 
     return movement;
   } else {
+    if (initialDragState == null) {
+      return 0;
+    }
+
     return calculateDragOffsetPercentage(
       event,
       dragHandleId,

package/src/utils/calculateDragOffsetPercentage.ts

@@ -1,7 +1,8 @@
 import { DragState, ResizeEvent } from "../PanelGroupContext";
 import { Direction } from "../types";
-import { getPanelGroupElement } from "../utils/dom/getPanelGroupElement";
-import { getResizeHandleElement } from "../utils/dom/getResizeHandleElement";
+import { assert } from "./assert";
+import { getPanelGroupElement } from "./dom/getPanelGroupElement";
+import { getResizeHandleElement } from "./dom/getResizeHandleElement";
 import { getResizeEventCursorPosition } from "./getResizeEventCursorPosition";
 
 export function calculateDragOffsetPercentage(
@@ -12,14 +13,19 @@ export function calculateDragOffsetPercentage(
 ): number {
   const isHorizontal = direction === "horizontal";
 
-  const handleElement = getResizeHandleElement(dragHandleId)!;
-  const groupId = handleElement.getAttribute("data-panel-group-id")!;
+  const handleElement = getResizeHandleElement(dragHandleId);
+  assert(handleElement);
+
+  const groupId = handleElement.getAttribute("data-panel-group-id");
+  assert(groupId);
 
   let { initialCursorPosition } = initialDragState;
 
   const cursorPosition = getResizeEventCursorPosition(direction, event);
 
-  const groupElement = getPanelGroupElement(groupId)!;
+  const groupElement = getPanelGroupElement(groupId);
+  assert(groupElement);
+
   const groupRect = groupElement.getBoundingClientRect();
   const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
 

package/src/utils/calculateUnsafeDefaultLayout.test.ts

@@ -28,7 +28,6 @@ describe("calculateUnsafeDefaultLayout", () => {
   it("should assign even sizes for every panel by default", () => {
     expectToBeCloseToArray(
       calculateUnsafeDefaultLayout({
-        groupSizePixels: 100_000,
         panelDataArray: [createPanelData()],
       }),
       [100]
@@ -36,7 +35,6 @@ describe("calculateUnsafeDefaultLayout", () => {
 
     expectToBeCloseToArray(
       calculateUnsafeDefaultLayout({
-        groupSizePixels: 100_000,
         panelDataArray: [createPanelData(), createPanelData()],
       }),
       [50, 50]
@@ -44,7 +42,6 @@ describe("calculateUnsafeDefaultLayout", () => {
 
     expectToBeCloseToArray(
       calculateUnsafeDefaultLayout({
-        groupSizePixels: 100_000,
         panelDataArray: [
           createPanelData(),
           createPanelData(),
@@ -58,13 +55,12 @@ describe("calculateUnsafeDefaultLayout", () => {
   it("should respect default panel size constraints", () => {
     expectToBeCloseToArray(
       calculateUnsafeDefaultLayout({
-        groupSizePixels: 100_000,
         panelDataArray: [
           createPanelData({
-            defaultSizePercentage: 15,
+            defaultSize: 15,
           }),
           createPanelData({
-            defaultSizePercentage: 85,
+            defaultSize: 85,
           }),
         ],
       }),
@@ -75,14 +71,13 @@ describe("calculateUnsafeDefaultLayout", () => {
   it("should ignore min and max panel size constraints", () => {
     expectToBeCloseToArray(
       calculateUnsafeDefaultLayout({
-        groupSizePixels: 100_000,
         panelDataArray: [
           createPanelData({
-            minSizePercentage: 40,
+            minSize: 40,
           }),
           createPanelData(),
           createPanelData({
-            maxSizePercentage: 10,
+            maxSize: 10,
           }),
         ],
       }),

package/src/utils/calculateUnsafeDefaultLayout.ts

@@ -1,16 +1,14 @@
 import { PanelData } from "../Panel";
-import { computePercentagePanelConstraints } from "./computePercentagePanelConstraints";
+import { assert } from "./assert";
 
 export function calculateUnsafeDefaultLayout({
-  groupSizePixels,
   panelDataArray,
 }: {
-  groupSizePixels: number;
   panelDataArray: PanelData[];
 }): number[] {
   const layout = Array<number>(panelDataArray.length);
 
-  const panelDataConstraints = panelDataArray.map(
+  const panelConstraintsArray = panelDataArray.map(
     (panelData) => panelData.constraints
   );
 
@@ -19,27 +17,24 @@ export function calculateUnsafeDefaultLayout({
 
   // Distribute default sizes first
   for (let index = 0; index < panelDataArray.length; index++) {
-    const { defaultSizePercentage } = computePercentagePanelConstraints(
-      panelDataConstraints,
-      index,
-      groupSizePixels
-    );
+    const panelConstraints = panelConstraintsArray[index];
+    assert(panelConstraints);
+    const { defaultSize } = panelConstraints;
 
-    if (defaultSizePercentage != null) {
+    if (defaultSize != null) {
       numPanelsWithSizes++;
-      layout[index] = defaultSizePercentage;
-      remainingSize -= defaultSizePercentage;
+      layout[index] = defaultSize;
+      remainingSize -= defaultSize;
     }
   }
 
   // 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) {
+    const panelConstraints = panelConstraintsArray[index];
+    assert(panelConstraints);
+    const { defaultSize } = panelConstraints;
+
+    if (defaultSize != null) {
       continue;
     }
 

package/src/utils/callPanelCallbacks.ts

@@ -1,67 +1,33 @@
 import { PanelData } from "../Panel";
-import { MixedSizes } from "../types";
-import { calculateAvailablePanelSizeInPixels } from "../utils/dom/calculateAvailablePanelSizeInPixels";
-import { convertPercentageToPixels } from "./convertPercentageToPixels";
-import { getPercentageSizeFromMixedSizes } from "./getPercentageSizeFromMixedSizes";
+import { assert } from "./assert";
 
 // Layout should be pre-converted into percentages
 export function callPanelCallbacks(
-  groupId: string,
   panelsArray: PanelData[],
   layout: number[],
-  panelIdToLastNotifiedMixedSizesMap: Record<string, MixedSizes>
+  panelIdToLastNotifiedSizeMap: Record<string, number>
 ) {
-  const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
-
-  layout.forEach((sizePercentage, index) => {
+  layout.forEach((size, 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;
-    }
+    assert(panelData);
 
     const { callbacks, constraints, id: panelId } = panelData;
-    const { collapsible } = constraints;
-
-    const mixedSizes: MixedSizes = {
-      sizePercentage,
-      sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels),
-    };
+    const { collapsedSize = 0, collapsible } = constraints;
 
-    const lastNotifiedMixedSizes = panelIdToLastNotifiedMixedSizesMap[panelId];
-    if (
-      lastNotifiedMixedSizes == null ||
-      mixedSizes.sizePercentage !== lastNotifiedMixedSizes.sizePercentage ||
-      mixedSizes.sizePixels !== lastNotifiedMixedSizes.sizePixels
-    ) {
-      panelIdToLastNotifiedMixedSizesMap[panelId] = mixedSizes;
+    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[panelId];
+    if (lastNotifiedSize == null || size !== lastNotifiedSize) {
+      panelIdToLastNotifiedSizeMap[panelId] = size;
 
       const { onCollapse, onExpand, onResize } = callbacks;
 
       if (onResize) {
-        onResize(mixedSizes, lastNotifiedMixedSizes);
+        onResize(size, lastNotifiedSize);
       }
 
       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) &&
+          (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) &&
           size !== collapsedSize
         ) {
           onExpand();
@@ -69,8 +35,7 @@ export function callPanelCallbacks(
 
         if (
           onCollapse &&
-          (lastNotifiedMixedSizes == null ||
-            lastNotifiedMixedSizes.sizePercentage !== collapsedSize) &&
+          (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) &&
           size === collapsedSize
         ) {
           onCollapse();

package/src/utils/getResizeEventCursorPosition.ts

@@ -1,5 +1,6 @@
 import { ResizeEvent } from "../PanelGroupContext";
 import { Direction } from "../types";
+import { assert } from "./assert";
 import { isMouseEvent, isTouchEvent } from "./events";
 
 export function getResizeEventCursorPosition(
@@ -12,6 +13,7 @@ export function getResizeEventCursorPosition(
     return isHorizontal ? event.clientX : event.clientY;
   } else if (isTouchEvent(event)) {
     const firstTouch = event.touches[0];
+    assert(firstTouch);
     return isHorizontal ? firstTouch.screenX : firstTouch.screenY;
   } else {
     throw Error(`Unsupported event type "${event.type}"`);