react-resizable-panels 0.0.14 → 0.0.16

package/src/utils/coordinates.ts

@@ -1,5 +1,5 @@
 import { Direction, ResizeEvent } from "../types";
-import { getResizeHandle } from "./group";
+import { getPanelGroup, getResizeHandle } from "./group";
 
 export type Coordinates = {
   movement: number;
@@ -39,13 +39,16 @@ export function getDragOffset(
 // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
 export function getMovement(
   event: ResizeEvent,
+  groupId: string,
   handleId: string,
-  { height, width }: Size,
   direction: Direction,
   initialOffset: number
 ): number {
   const isHorizontal = direction === "horizontal";
-  const size = isHorizontal ? width : height;
+
+  const groupElement = getPanelGroup(groupId);
+  const rect = groupElement.getBoundingClientRect();
+  const size = isHorizontal ? rect.width : rect.height;
 
   if (isKeyDown(event)) {
     const denominator = event.shiftKey ? 10 : 100;
@@ -53,13 +56,13 @@ export function getMovement(
 
     switch (event.key) {
       case "ArrowDown":
-        return delta;
+        return isHorizontal ? 0 : delta;
       case "ArrowLeft":
-        return -delta;
+        return isHorizontal ? -delta : 0;
       case "ArrowRight":
-        return delta;
+        return isHorizontal ? delta : 0;
       case "ArrowUp":
-        return -delta;
+        return isHorizontal ? 0 : -delta;
       case "End":
         if (isHorizontal) {
           return size;

package/src/utils/group.ts

@@ -1,5 +1,5 @@
 import { PRECISION } from "../constants";
-import { Direction, PanelData } from "../types";
+import { PanelData } from "../types";
 
 export function adjustByDelta(
   panels: Map<string, PanelData>,
@@ -66,29 +66,26 @@ export function adjustByDelta(
   return nextSizes;
 }
 
-export function getOffset(
+// This method returns a number between 1 and 100 representing
+// the % of the group's overall space this panel should occupy.
+export function getFlexGrow(
   panels: Map<string, PanelData>,
   id: string,
-  direction: Direction,
-  sizes: number[],
-  height: number,
-  width: number
-): number {
-  const panelsArray = panelsMapToSortedArray(panels);
-
-  let index = panelsArray.findIndex((panel) => panel.id === id);
-  if (index < 0) {
-    return 0;
+  sizes: number[]
+): string {
+  if (panels.size === 1) {
+    return "100";
   }
 
-  let scaledOffset = 0;
+  const panelsArray = panelsMapToSortedArray(panels);
 
-  for (index = index - 1; index >= 0; index--) {
-    const panel = panelsArray[index];
-    scaledOffset += getSize(panels, panel.id, direction, sizes, height, width);
+  const index = panelsArray.findIndex((panel) => panel.id === id);
+  const size = sizes[index];
+  if (size == null) {
+    return "0";
   }
 
-  return Math.round(scaledOffset);
+  return size.toPrecision(PRECISION);
 }
 
 export function getPanel(id: string): HTMLDivElement | null {
@@ -99,6 +96,14 @@ export function getPanel(id: string): HTMLDivElement | null {
   return null;
 }
 
+export function getPanelGroup(id: string): HTMLDivElement | null {
+  const element = document.querySelector(`[data-panel-group-id="${id}"]`);
+  if (element) {
+    return element as HTMLDivElement;
+  }
+  return null;
+}
+
 export function getResizeHandle(id: string): HTMLDivElement | null {
   const element = document.querySelector(
     `[data-panel-resize-handle-id="${id}"]`
@@ -149,28 +154,3 @@ export function panelsMapToSortedArray(
 ): PanelData[] {
   return Array.from(panels.values()).sort((a, b) => a.order - b.order);
 }
-
-export function getSize(
-  panels: Map<string, PanelData>,
-  id: string,
-  direction: Direction,
-  sizes: number[],
-  height: number,
-  width: number
-): number {
-  const totalSize = direction === "horizontal" ? width : height;
-
-  if (panels.size === 1) {
-    return totalSize;
-  }
-
-  const panelsArray = panelsMapToSortedArray(panels);
-
-  const index = panelsArray.findIndex((panel) => panel.id === id);
-  const size = sizes[index];
-  if (size == null) {
-    return 0;
-  }
-
-  return Math.round(size * totalSize);
-}

package/src/utils/serialization.ts

@@ -8,8 +8,11 @@ type SerializedPanelGroupState = { [panelIds: string]: number[] };
 // Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
 function getSerializationKey(panels: PanelData[]): string {
   return panels
-    .map((panel) => panel.minSize.toPrecision(2))
-    .sort()
+    .map((panel) => {
+      const { minSize, order } = panel;
+      return order ? `${order}:${minSize}` : `${minSize}`;
+    })
+    .sort((a, b) => a.localeCompare(b))
     .join(",");
 }