react-resizable-panels 0.0.54 → 0.0.55

package/src/utils/group.ts

@@ -1,27 +1,29 @@
-import { InitialDragState } from "../PanelGroup";
+import { isDevelopment } from "#is-development";
+import { CommittedValues, InitialDragState } from "../PanelGroup";
 import { PRECISION } from "../constants";
-import { PanelData, ResizeEvent } from "../types";
+import { PanelData, ResizeEvent, Units } from "../types";
 
 export function adjustByDelta(
   event: ResizeEvent | null,
-  panels: Map<string, PanelData>,
+  committedValues: CommittedValues,
   idBefore: string,
   idAfter: string,
-  delta: number,
+  deltaPixels: number,
   prevSizes: number[],
   panelSizeBeforeCollapse: Map<string, number>,
   initialDragState: InitialDragState | null
 ): number[] {
+  const { id: groupId, panels, units } = committedValues;
+
+  const groupSizePixels =
+    units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN;
+
   const { sizes: initialSizes } = initialDragState || {};
 
   // If we're resizing by mouse or touch, use the initial sizes as a base.
   // This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
   const baseSizes = initialSizes || prevSizes;
 
-  if (delta === 0) {
-    return baseSizes;
-  }
-
   const panelsArray = panelsMapToSortedArray(panels);
 
   const nextSizes = baseSizes.concat();
@@ -38,14 +40,21 @@ export function adjustByDelta(
 
   // Max-bounds check the panel being expanded first.
   {
-    const pivotId = delta < 0 ? idAfter : idBefore;
+    const pivotId = deltaPixels < 0 ? idAfter : idBefore;
     const index = panelsArray.findIndex(
       (panel) => panel.current.id === pivotId
     );
     const panel = panelsArray[index];
     const baseSize = baseSizes[index];
 
-    const nextSize = safeResizePanel(panel, Math.abs(delta), baseSize, event);
+    const nextSize = safeResizePanel(
+      units,
+      groupSizePixels,
+      panel,
+      baseSize,
+      baseSize + Math.abs(deltaPixels),
+      event
+    );
     if (baseSize === nextSize) {
       // If there's no room for the pivot panel to grow, we can ignore this drag update.
       return baseSizes;
@@ -54,22 +63,24 @@ export function adjustByDelta(
         panelSizeBeforeCollapse.set(pivotId, baseSize);
       }
 
-      delta = delta < 0 ? baseSize - nextSize : nextSize - baseSize;
+      deltaPixels = deltaPixels < 0 ? baseSize - nextSize : nextSize - baseSize;
     }
   }
 
-  let pivotId = delta < 0 ? idBefore : idAfter;
+  let pivotId = deltaPixels < 0 ? idBefore : idAfter;
   let index = panelsArray.findIndex((panel) => panel.current.id === pivotId);
   while (true) {
     const panel = panelsArray[index];
     const baseSize = baseSizes[index];
 
-    const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
+    const deltaRemaining = Math.abs(deltaPixels) - Math.abs(deltaApplied);
 
     const nextSize = safeResizePanel(
+      units,
+      groupSizePixels,
       panel,
-      0 - deltaRemaining,
       baseSize,
+      baseSize - deltaRemaining,
       event
     );
     if (baseSize !== nextSize) {
@@ -84,15 +95,19 @@ export function adjustByDelta(
       if (
         deltaApplied
           .toPrecision(PRECISION)
-          .localeCompare(Math.abs(delta).toPrecision(PRECISION), undefined, {
-            numeric: true,
-          }) >= 0
+          .localeCompare(
+            Math.abs(deltaPixels).toPrecision(PRECISION),
+            undefined,
+            {
+              numeric: true,
+            }
+          ) >= 0
       ) {
         break;
       }
     }
 
-    if (delta < 0) {
+    if (deltaPixels < 0) {
       if (--index < 0) {
         break;
       }
@@ -110,7 +125,7 @@ export function adjustByDelta(
   }
 
   // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
-  pivotId = delta < 0 ? idAfter : idBefore;
+  pivotId = deltaPixels < 0 ? idAfter : idBefore;
   index = panelsArray.findIndex((panel) => panel.current.id === pivotId);
   nextSizes[index] = baseSizes[index] + deltaApplied;
 
@@ -159,6 +174,115 @@ export function callPanelCallbacks(
   });
 }
 
+export function calculateDefaultLayout({
+  groupId,
+  panels,
+  units,
+}: {
+  groupId: string;
+  panels: Map<string, PanelData>;
+  units: Units;
+}): number[] {
+  const groupSizePixels =
+    units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN;
+  const panelsArray = panelsMapToSortedArray(panels);
+  const sizes = Array<number>(panelsArray.length);
+
+  let numPanelsWithSizes = 0;
+  let remainingSize = 100;
+
+  // Assigning default sizes requires a couple of passes:
+  // First, all panels with defaultSize should be set as-is
+  for (let index = 0; index < panelsArray.length; index++) {
+    const panel = panelsArray[index];
+    const { defaultSize } = panel.current;
+
+    if (defaultSize != null) {
+      numPanelsWithSizes++;
+
+      sizes[index] =
+        units === "pixels"
+          ? (defaultSize / groupSizePixels) * 100
+          : defaultSize;
+
+      remainingSize -= sizes[index];
+    }
+  }
+
+  // Remaining total size should be distributed evenly between panels
+  // This may require two passes, depending on min/max constraints
+  for (let index = 0; index < panelsArray.length; index++) {
+    const panel = panelsArray[index];
+    let { defaultSize, id, maxSize, minSize } = panel.current;
+    if (defaultSize != null) {
+      continue;
+    }
+
+    if (units === "pixels") {
+      minSize = (minSize / groupSizePixels) * 100;
+      if (maxSize != null) {
+        maxSize = (maxSize / groupSizePixels) * 100;
+      }
+    }
+
+    const remainingPanels = panelsArray.length - numPanelsWithSizes;
+    const size = Math.min(
+      maxSize != null ? maxSize : 100,
+      Math.max(minSize, remainingSize / remainingPanels)
+    );
+
+    sizes[index] = size;
+    numPanelsWithSizes++;
+    remainingSize -= size;
+  }
+
+  // If there is additional, left over space, assign it to any panel(s) that permits it
+  // (It's not worth taking multiple additional passes to evenly distribute)
+  if (remainingSize !== 0) {
+    for (let index = 0; index < panelsArray.length; index++) {
+      const panel = panelsArray[index];
+      let { maxSize, minSize } = panel.current;
+
+      if (units === "pixels") {
+        minSize = (minSize / groupSizePixels) * 100;
+        if (maxSize != null) {
+          maxSize = (maxSize / groupSizePixels) * 100;
+        }
+      }
+
+      const size = Math.min(
+        maxSize != null ? maxSize : 100,
+        Math.max(minSize, sizes[index] + remainingSize)
+      );
+
+      if (size !== sizes[index]) {
+        remainingSize -= size - sizes[index];
+        sizes[index] = size;
+
+        // Fuzzy comparison to account for imprecise floating point math
+        if (Math.abs(remainingSize).toFixed(3) === "0.000") {
+          break;
+        }
+      }
+    }
+  }
+
+  // Finally, if there is still left-over size, log an error
+  if (Math.abs(remainingSize).toFixed(3) !== "0.000") {
+    if (isDevelopment) {
+      console.error(
+        `Invalid panel group configuration; default panel sizes should total 100% but was ${(
+          100 - remainingSize
+        ).toFixed(
+          1
+        )}%. This can cause the cursor to become misaligned while dragging.`
+      );
+    }
+  }
+
+  return sizes;
+}
+
 export function getBeforeAndAfterIds(
   id: string,
   panelsArray: PanelData[]
@@ -179,6 +303,33 @@ export function getBeforeAndAfterIds(
   return [idBefore, idAfter];
 }
 
+export function getAvailableGroupSizePixels(groupId: string): number {
+  const panelGroupElement = getPanelGroup(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+
+  const direction = panelGroupElement.getAttribute(
+    "data-panel-group-direction"
+  );
+  const resizeHandles = getResizeHandlesForGroup(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)
+    );
+  }
+}
+
 // This method returns a number between 1 and 100 representing
 // the % of the group's overall space this panel should occupy.
 export function getFlexGrow(
@@ -280,20 +431,28 @@ export function panelsMapToSortedArray(
   });
 }
 
-function safeResizePanel(
+export function safeResizePanel(
+  units: Units,
+  groupSizePixels: number,
   panel: PanelData,
-  delta: number,
   prevSize: number,
-  event: ResizeEvent | null
+  nextSize: number,
+  event: ResizeEvent | null = null
 ): number {
-  const nextSizeUnsafe = prevSize + delta;
+  let { collapsedSize, collapsible, maxSize, minSize } = panel.current;
 
-  const { collapsedSize, collapsible, maxSize, minSize } = panel.current;
+  if (units === "pixels") {
+    collapsedSize = (collapsedSize / groupSizePixels) * 100;
+    if (maxSize != null) {
+      maxSize = (maxSize / groupSizePixels) * 100;
+    }
+    minSize = (minSize / groupSizePixels) * 100;
+  }
 
   if (collapsible) {
     if (prevSize > collapsedSize) {
       // Mimic VS COde behavior; collapse a panel if it's smaller than half of its min-size
-      if (nextSizeUnsafe <= minSize / 2 + collapsedSize) {
+      if (nextSize <= minSize / 2 + collapsedSize) {
         return collapsedSize;
       }
     } else {
@@ -302,14 +461,154 @@ function safeResizePanel(
         // Keyboard events should expand a collapsed panel to the min size,
         // but mouse events should wait until the panel has reached its min size
         // to avoid a visual flickering when dragging between collapsed and min size.
-        if (nextSizeUnsafe < minSize) {
+        if (nextSize < minSize) {
           return collapsedSize;
         }
       }
     }
   }
 
-  const nextSize = Math.min(maxSize, Math.max(minSize, nextSizeUnsafe));
+  return Math.min(maxSize != null ? maxSize : 100, Math.max(minSize, nextSize));
+}
+
+export function validatePanelProps(units: Units, panelData: PanelData) {
+  const { collapsible, defaultSize, maxSize, minSize } = panelData.current;
+
+  // Basic props validation
+  if (minSize < 0 || (units === "percentages" && minSize > 100)) {
+    if (isDevelopment) {
+      console.error(`Invalid Panel minSize provided, ${minSize}`);
+    }
+
+    panelData.current.minSize = 0;
+  }
+
+  if (maxSize != null) {
+    if (maxSize < 0 || (units === "percentages" && maxSize > 100)) {
+      if (isDevelopment) {
+        console.error(`Invalid Panel maxSize provided, ${maxSize}`);
+      }
+
+      panelData.current.maxSize = null;
+    }
+  }
+
+  if (defaultSize !== null) {
+    if (defaultSize < 0 || (units === "percentages" && defaultSize > 100)) {
+      if (isDevelopment) {
+        console.error(`Invalid Panel defaultSize provided, ${defaultSize}`);
+      }
+
+      panelData.current.defaultSize = null;
+    } else if (defaultSize < minSize && !collapsible) {
+      if (isDevelopment) {
+        console.error(
+          `Panel minSize (${minSize}) cannot be greater than defaultSize (${defaultSize})`
+        );
+      }
+
+      panelData.current.defaultSize = minSize;
+    } else if (maxSize != null && defaultSize > maxSize) {
+      if (isDevelopment) {
+        console.error(
+          `Panel maxSize (${maxSize}) cannot be less than defaultSize (${defaultSize})`
+        );
+      }
+
+      panelData.current.defaultSize = maxSize;
+    }
+  }
+}
+
+export function validatePanelGroupLayout({
+  groupId,
+  panels,
+  nextSizes,
+  prevSizes,
+  units,
+}: {
+  groupId: string;
+  panels: Map<string, PanelData>;
+  nextSizes: number[];
+  prevSizes: number[];
+  units: Units;
+}): number[] {
+  // Clone because this method modifies
+  nextSizes = [...nextSizes];
+
+  const panelsArray = panelsMapToSortedArray(panels);
+
+  const groupSizePixels =
+    units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN;
+
+  let remainingSize = 0;
+
+  // First, check all of the proposed sizes against the min/max constraints
+  for (let index = 0; index < panelsArray.length; index++) {
+    const panel = panelsArray[index];
+    const prevSize = prevSizes[index];
+    const nextSize = nextSizes[index];
+    const safeNextSize = safeResizePanel(
+      units,
+      groupSizePixels,
+      panel,
+      prevSize,
+      nextSize
+    );
+    if (nextSize != safeNextSize) {
+      remainingSize += nextSize - safeNextSize;
+      nextSizes[index] = safeNextSize;
+
+      if (isDevelopment) {
+        console.error(
+          `Invalid size (${nextSize}) specified for Panel "${panel.current.id}" given the panel's min/max size constraints`
+        );
+      }
+    }
+  }
+
+  // If there is additional, left over space, assign it to any panel(s) that permits it
+  // (It's not worth taking multiple additional passes to evenly distribute)
+  if (remainingSize.toFixed(3) !== "0.000") {
+    for (let index = 0; index < panelsArray.length; index++) {
+      const panel = panelsArray[index];
+
+      let { maxSize, minSize } = panel.current;
+
+      if (units === "pixels") {
+        minSize = (minSize / groupSizePixels) * 100;
+        if (maxSize != null) {
+          maxSize = (maxSize / groupSizePixels) * 100;
+        }
+      }
+
+      const size = Math.min(
+        maxSize != null ? maxSize : 100,
+        Math.max(minSize, nextSizes[index] + remainingSize)
+      );
+
+      if (size !== nextSizes[index]) {
+        remainingSize -= size - nextSizes[index];
+        nextSizes[index] = size;
+
+        // Fuzzy comparison to account for imprecise floating point math
+        if (Math.abs(remainingSize).toFixed(3) === "0.000") {
+          break;
+        }
+      }
+    }
+  }
+
+  // If we still have remainder, the requested layout wasn't valid and we should warn about it
+  if (remainingSize.toFixed(3) !== "0.000") {
+    if (isDevelopment) {
+      console.error(
+        `"Invalid panel group configuration; default panel sizes should total 100% but was ${
+          100 - remainingSize
+        }%`
+      );
+    }
+  }
 
-  return nextSize;
+  return nextSizes;
 }