react-resizable-panels 1.0.2 → 1.0.3

package/src/utils/serialization.ts

@@ -1,13 +1,26 @@
 import { PanelData } from "../Panel";
 import { PanelGroupStorage } from "../PanelGroup";
 
-type SerializedPanelGroupState = { [panelIds: string]: number[] };
+export type PanelConfigurationState = {
+  expandToSizes: {
+    [panelId: string]: number;
+  };
+  layout: number[];
+};
+
+export type SerializedPanelGroupState = {
+  [panelIds: string]: PanelConfigurationState;
+};
+
+function getPanelGroupKey(autoSaveId: string): string {
+  return `react-resizable-panels:${autoSaveId}`;
+}
 
 // Note that Panel ids might be user-provided (stable) or useId generated (non-deterministic)
 // so they should not be used as part of the serialization key.
 // Using the min/max size attributes should work well enough as a backup.
 // Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
-function getSerializationKey(panels: PanelData[]): string {
+function getPanelKey(panels: PanelData[]): string {
   return panels
     .map((panel) => {
       const { constraints, id, idIsFromProps, order } = panel;
@@ -28,11 +41,12 @@ function loadSerializedPanelGroupState(
   storage: PanelGroupStorage
 ): SerializedPanelGroupState | null {
   try {
-    const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
+    const panelGroupKey = getPanelGroupKey(autoSaveId);
+    const serialized = storage.getItem(panelGroupKey);
     if (serialized) {
       const parsed = JSON.parse(serialized);
       if (typeof parsed === "object" && parsed != null) {
-        return parsed;
+        return parsed as SerializedPanelGroupState;
       }
     }
   } catch (error) {}
@@ -40,32 +54,33 @@ function loadSerializedPanelGroupState(
   return null;
 }
 
-export function loadPanelLayout(
+export function loadPanelGroupState(
   autoSaveId: string,
   panels: PanelData[],
   storage: PanelGroupStorage
-): number[] | null {
-  const state = loadSerializedPanelGroupState(autoSaveId, storage);
-  if (state) {
-    const key = getSerializationKey(panels);
-    return state[key] ?? null;
-  }
-
-  return null;
+): PanelConfigurationState | null {
+  const state = loadSerializedPanelGroupState(autoSaveId, storage) ?? {};
+  const panelKey = getPanelKey(panels);
+  return state[panelKey] ?? null;
 }
 
-export function savePanelGroupLayout(
+export function savePanelGroupState(
   autoSaveId: string,
   panels: PanelData[],
+  panelSizesBeforeCollapse: Map<string, number>,
   sizes: number[],
   storage: PanelGroupStorage
 ): void {
-  const key = getSerializationKey(panels);
-  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
-  state[key] = sizes;
+  const panelGroupKey = getPanelGroupKey(autoSaveId);
+  const panelKey = getPanelKey(panels);
+  const state = loadSerializedPanelGroupState(autoSaveId, storage) ?? {};
+  state[panelKey] = {
+    expandToSizes: Object.fromEntries(panelSizesBeforeCollapse.entries()),
+    layout: sizes,
+  };
 
   try {
-    storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
+    storage.setItem(panelGroupKey, JSON.stringify(state));
   } catch (error) {
     console.error(error);
   }