react-resizable-panels 0.0.14 → 0.0.15

package/src/PanelGroup.tsx

@@ -15,9 +15,9 @@ import { loadPanelLayout, savePanelGroupLayout } from "./utils/serialization";
 import { getDragOffset, getMovement } from "./utils/coordinates";
 import {
   adjustByDelta,
-  getOffset,
+  getFlexGrow,
+  getPanelGroup,
   getResizeHandlePanelIds,
-  getSize,
   panelsMapToSortedArray,
 } from "./utils/group";
 import { useWindowSplitterPanelGroupBehavior } from "./hooks/useWindowSplitterBehavior";
@@ -25,10 +25,8 @@ import useUniqueId from "./hooks/useUniqueId";
 
 export type CommittedValues = {
   direction: Direction;
-  height: number;
   panels: Map<string, PanelData>;
   sizes: number[];
-  width: number;
 };
 
 export type PanelDataMap = Map<string, PanelData>;
@@ -38,9 +36,7 @@ type Props = {
   children?: ReactNode;
   className?: string;
   direction: Direction;
-  height: number;
   id?: string | null;
-  width: number;
 };
 
 // TODO [panels]
@@ -52,9 +48,7 @@ export default function PanelGroup({
   children = null,
   className = "",
   direction,
-  height,
   id: idFromProps = null,
-  width,
 }: Props) {
   const groupId = useUniqueId(idFromProps);
 
@@ -69,18 +63,14 @@ export default function PanelGroup({
   // Store committed values to avoid unnecessarily re-running memoization/effects functions.
   const committedValuesRef = useRef<CommittedValues>({
     direction,
-    height,
     panels,
     sizes,
-    width,
   });
 
   useLayoutEffect(() => {
     committedValuesRef.current.direction = direction;
-    committedValuesRef.current.height = height;
     committedValuesRef.current.panels = panels;
     committedValuesRef.current.sizes = sizes;
-    committedValuesRef.current.width = width;
   });
 
   useWindowSplitterPanelGroupBehavior({
@@ -100,9 +90,6 @@ export default function PanelGroup({
       return;
     }
 
-    // TODO [panels]
-    // Validate that the total minSize is <= 1.
-
     // If this panel has been configured to persist sizing information,
     // default size should be restored from local storage if possible.
     let defaultSizes: number[] | undefined = undefined;
@@ -115,11 +102,40 @@ export default function PanelGroup({
       setSizes(defaultSizes);
     } else {
       const panelsArray = panelsMapToSortedArray(panels);
-      const totalWeight = panelsArray.reduce((weight, panel) => {
-        return weight + panel.defaultSize;
-      }, 0);
 
-      setSizes(panelsArray.map((panel) => panel.defaultSize / totalWeight));
+      let panelsWithNullDefaultSize = 0;
+      let totalDefaultSize = 0;
+      let totalMinSize = 0;
+
+      panelsArray.forEach((panel) => {
+        totalMinSize += panel.minSize;
+
+        if (panel.defaultSize === null) {
+          panelsWithNullDefaultSize++;
+        } else {
+          totalDefaultSize += panel.defaultSize;
+        }
+      });
+
+      if (totalDefaultSize > 100) {
+        throw new Error(
+          `The sum of the defaultSize of all panels in a group cannot exceed 100.`
+        );
+      } else if (totalMinSize > 100) {
+        throw new Error(
+          `The sum of the minSize of all panels in a group cannot exceed 100.`
+        );
+      }
+
+      setSizes(
+        panelsArray.map((panel) => {
+          if (panel.defaultSize === null) {
+            return (100 - totalDefaultSize) / panelsWithNullDefaultSize;
+          }
+
+          return panel.defaultSize;
+        })
+      );
     }
   }, [autoSaveId, panels]);
 
@@ -139,28 +155,11 @@ export default function PanelGroup({
     (id: string): CSSProperties => {
       const { panels } = committedValuesRef.current;
 
-      const offset = getOffset(panels, id, direction, sizes, height, width);
-      const size = getSize(panels, id, direction, sizes, height, width);
-
-      if (direction === "horizontal") {
-        return {
-          height: "100%",
-          position: "absolute",
-          left: offset,
-          top: 0,
-          width: size,
-        };
-      } else {
-        return {
-          height: size,
-          position: "absolute",
-          left: 0,
-          top: offset,
-          width: "100%",
-        };
-      }
+      const size = getFlexGrow(panels, id, sizes);
+
+      return { flexGrow: size };
     },
-    [direction, height, sizes, width]
+    [direction, sizes]
   );
 
   const registerPanel = useCallback((id: string, panel: PanelData) => {
@@ -183,10 +182,8 @@ export default function PanelGroup({
 
         const {
           direction,
-          height,
           panels,
           sizes: prevSizes,
-          width,
         } = committedValuesRef.current;
 
         const panelsArray = panelsMapToSortedArray(panels);
@@ -202,14 +199,20 @@ export default function PanelGroup({
 
         const movement = getMovement(
           event,
+          groupId,
           handleId,
-          { height, width },
           direction,
           dragOffsetRef.current
         );
+        if (movement === 0) {
+          return;
+        }
 
+        const groupElement = getPanelGroup(groupId);
+        const rect = groupElement.getBoundingClientRect();
         const isHorizontal = direction === "horizontal";
-        const delta = isHorizontal ? movement / width : movement / height;
+        const size = isHorizontal ? rect.width : rect.height;
+        const delta = (movement / size) * 100;
 
         const nextSizes = adjustByDelta(
           panels,
@@ -275,14 +278,17 @@ export default function PanelGroup({
     [activeHandleId]
   );
 
+  const style: CSSProperties = {
+    display: "flex",
+    flexDirection: direction === "horizontal" ? "row" : "column",
+    height: "100%",
+    width: "100%",
+  };
+
   return (
     <PanelContext.Provider value={panelContext}>
       <PanelGroupContext.Provider value={panelGroupContext}>
-        <div
-          className={className}
-          data-panel-group-id={groupId}
-          style={{ height, position: "relative", width }}
-        >
+        <div className={className} data-panel-group-id={groupId} style={style}>
           {children}
         </div>
       </PanelGroupContext.Provider>

package/src/constants.ts

@@ -1 +1 @@
-export const PRECISION = 5;
+export const PRECISION = 10;

package/src/hooks/useWindowSplitterBehavior.ts

@@ -6,12 +6,13 @@ import { ResizeHandler } from "../types";
 import {
   adjustByDelta,
   getPanel,
+  getPanelGroup,
   getResizeHandle,
   getResizeHandleIndex,
   getResizeHandlePanelIds,
   getResizeHandles,
   getResizeHandlesForGroup,
-  getSize,
+  getFlexGrow,
   panelsMapToSortedArray,
 } from "../utils/group";
 
@@ -31,7 +32,10 @@ export function useWindowSplitterPanelGroupBehavior({
   sizes: number[];
 }): void {
   useEffect(() => {
-    const { direction, height, panels, width } = committedValuesRef.current;
+    const { direction, panels } = committedValuesRef.current;
+
+    const groupElement = getPanelGroup(groupId);
+    const { height, width } = groupElement.getBoundingClientRect();
 
     const handles = getResizeHandlesForGroup(groupId);
     const cleanupFunctions = handles.map((handle) => {
@@ -57,12 +61,11 @@ export function useWindowSplitterPanelGroupBehavior({
       const ariaValueMin =
         panelsArray.find((panel) => panel.id == idBefore)?.minSize ?? 0;
 
-      const size = getSize(panels, idBefore, direction, sizes, height, width);
-      const ariaValueNow = size / (direction === "horizontal" ? width : height);
+      const size = getFlexGrow(panels, idBefore, sizes);
 
       handle.setAttribute("aria-valuemax", "" + Math.round(100 * ariaValueMax));
       handle.setAttribute("aria-valuemin", "" + Math.round(100 * ariaValueMin));
-      handle.setAttribute("aria-valuenow", "" + Math.round(100 * ariaValueNow));
+      handle.setAttribute("aria-valuenow", "" + size);
 
       const onKeyDown = (event: KeyboardEvent) => {
         switch (event.key) {

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;

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(",");
 }