react-resizable-panels 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -1
- package/dist/react-resizable-panels.browser.cjs.js +7 -4
- package/dist/react-resizable-panels.browser.development.cjs.js +7 -4
- package/dist/react-resizable-panels.browser.development.esm.js +7 -4
- package/dist/react-resizable-panels.browser.esm.js +7 -4
- package/dist/react-resizable-panels.cjs.js +7 -4
- package/dist/react-resizable-panels.development.cjs.js +7 -4
- package/dist/react-resizable-panels.development.esm.js +7 -4
- package/dist/react-resizable-panels.development.node.cjs.js +7 -4
- package/dist/react-resizable-panels.development.node.esm.js +7 -4
- package/dist/react-resizable-panels.esm.js +7 -4
- package/dist/react-resizable-panels.node.cjs.js +7 -4
- package/dist/react-resizable-panels.node.esm.js +7 -4
- package/package.json +1 -1
- package/src/PanelGroup.ts +3 -1
- package/src/utils/serialization.ts +5 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
## 1.0.
|
|
3
|
+
## 1.0.2
|
|
4
|
+
|
|
5
|
+
- Change local storage key for persisted sizes to avoid restoring pixel-based sizes (see #233)
|
|
6
|
+
|
|
7
|
+
## 1.0.1
|
|
8
|
+
|
|
9
|
+
- Small bug fix to guard against saving an incorrect panel layout to local storage
|
|
10
|
+
|
|
11
|
+
# 1.0.0
|
|
4
12
|
|
|
5
13
|
- Remove support for pixel-based Panel constraints; (props like `defaultSizePercentage` should now be `defaultSize`)
|
|
6
14
|
- Replaced `dataAttributes` prop with `...rest` prop that supports all HTML attributes
|
|
@@ -976,13 +976,13 @@ function getSerializationKey(panels) {
|
|
|
976
976
|
if (idIsFromProps) {
|
|
977
977
|
return id;
|
|
978
978
|
} else {
|
|
979
|
-
return `${order}:${JSON.stringify(constraints)}
|
|
979
|
+
return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
|
|
980
980
|
}
|
|
981
981
|
}).sort((a, b) => a.localeCompare(b)).join(",");
|
|
982
982
|
}
|
|
983
983
|
function loadSerializedPanelGroupState(autoSaveId, storage) {
|
|
984
984
|
try {
|
|
985
|
-
const serialized = storage.getItem(`PanelGroup:
|
|
985
|
+
const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
|
|
986
986
|
if (serialized) {
|
|
987
987
|
const parsed = JSON.parse(serialized);
|
|
988
988
|
if (typeof parsed === "object" && parsed != null) {
|
|
@@ -1006,7 +1006,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
|
|
|
1006
1006
|
const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
|
|
1007
1007
|
state[key] = sizes;
|
|
1008
1008
|
try {
|
|
1009
|
-
storage.setItem(`PanelGroup:
|
|
1009
|
+
storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
|
|
1010
1010
|
} catch (error) {
|
|
1011
1011
|
console.error(error);
|
|
1012
1012
|
}
|
|
@@ -1189,7 +1189,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1189
1189
|
debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
|
|
1190
1190
|
debounceMap[autoSaveId] = debouncedSave;
|
|
1191
1191
|
}
|
|
1192
|
-
|
|
1192
|
+
|
|
1193
|
+
// Clone panel data array before saving since this array is mutated.
|
|
1194
|
+
// If we don't clone, we run the risk of saving the wrong panel and layout pair.
|
|
1195
|
+
debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
|
|
1193
1196
|
}
|
|
1194
1197
|
}, [autoSaveId, layout, storage]);
|
|
1195
1198
|
|
|
@@ -992,13 +992,13 @@ function getSerializationKey(panels) {
|
|
|
992
992
|
if (idIsFromProps) {
|
|
993
993
|
return id;
|
|
994
994
|
} else {
|
|
995
|
-
return `${order}:${JSON.stringify(constraints)}
|
|
995
|
+
return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
|
|
996
996
|
}
|
|
997
997
|
}).sort((a, b) => a.localeCompare(b)).join(",");
|
|
998
998
|
}
|
|
999
999
|
function loadSerializedPanelGroupState(autoSaveId, storage) {
|
|
1000
1000
|
try {
|
|
1001
|
-
const serialized = storage.getItem(`PanelGroup:
|
|
1001
|
+
const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
|
|
1002
1002
|
if (serialized) {
|
|
1003
1003
|
const parsed = JSON.parse(serialized);
|
|
1004
1004
|
if (typeof parsed === "object" && parsed != null) {
|
|
@@ -1022,7 +1022,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
|
|
|
1022
1022
|
const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
|
|
1023
1023
|
state[key] = sizes;
|
|
1024
1024
|
try {
|
|
1025
|
-
storage.setItem(`PanelGroup:
|
|
1025
|
+
storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
|
|
1026
1026
|
} catch (error) {
|
|
1027
1027
|
console.error(error);
|
|
1028
1028
|
}
|
|
@@ -1252,7 +1252,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1252
1252
|
debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
|
|
1253
1253
|
debounceMap[autoSaveId] = debouncedSave;
|
|
1254
1254
|
}
|
|
1255
|
-
|
|
1255
|
+
|
|
1256
|
+
// Clone panel data array before saving since this array is mutated.
|
|
1257
|
+
// If we don't clone, we run the risk of saving the wrong panel and layout pair.
|
|
1258
|
+
debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
|
|
1256
1259
|
}
|
|
1257
1260
|
}, [autoSaveId, layout, storage]);
|
|
1258
1261
|
|
|
@@ -968,13 +968,13 @@ function getSerializationKey(panels) {
|
|
|
968
968
|
if (idIsFromProps) {
|
|
969
969
|
return id;
|
|
970
970
|
} else {
|
|
971
|
-
return `${order}:${JSON.stringify(constraints)}
|
|
971
|
+
return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
|
|
972
972
|
}
|
|
973
973
|
}).sort((a, b) => a.localeCompare(b)).join(",");
|
|
974
974
|
}
|
|
975
975
|
function loadSerializedPanelGroupState(autoSaveId, storage) {
|
|
976
976
|
try {
|
|
977
|
-
const serialized = storage.getItem(`PanelGroup:
|
|
977
|
+
const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
|
|
978
978
|
if (serialized) {
|
|
979
979
|
const parsed = JSON.parse(serialized);
|
|
980
980
|
if (typeof parsed === "object" && parsed != null) {
|
|
@@ -998,7 +998,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
|
|
|
998
998
|
const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
|
|
999
999
|
state[key] = sizes;
|
|
1000
1000
|
try {
|
|
1001
|
-
storage.setItem(`PanelGroup:
|
|
1001
|
+
storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
|
|
1002
1002
|
} catch (error) {
|
|
1003
1003
|
console.error(error);
|
|
1004
1004
|
}
|
|
@@ -1228,7 +1228,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1228
1228
|
debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
|
|
1229
1229
|
debounceMap[autoSaveId] = debouncedSave;
|
|
1230
1230
|
}
|
|
1231
|
-
|
|
1231
|
+
|
|
1232
|
+
// Clone panel data array before saving since this array is mutated.
|
|
1233
|
+
// If we don't clone, we run the risk of saving the wrong panel and layout pair.
|
|
1234
|
+
debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
|
|
1232
1235
|
}
|
|
1233
1236
|
}, [autoSaveId, layout, storage]);
|
|
1234
1237
|
|
|
@@ -952,13 +952,13 @@ function getSerializationKey(panels) {
|
|
|
952
952
|
if (idIsFromProps) {
|
|
953
953
|
return id;
|
|
954
954
|
} else {
|
|
955
|
-
return `${order}:${JSON.stringify(constraints)}
|
|
955
|
+
return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
|
|
956
956
|
}
|
|
957
957
|
}).sort((a, b) => a.localeCompare(b)).join(",");
|
|
958
958
|
}
|
|
959
959
|
function loadSerializedPanelGroupState(autoSaveId, storage) {
|
|
960
960
|
try {
|
|
961
|
-
const serialized = storage.getItem(`PanelGroup:
|
|
961
|
+
const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
|
|
962
962
|
if (serialized) {
|
|
963
963
|
const parsed = JSON.parse(serialized);
|
|
964
964
|
if (typeof parsed === "object" && parsed != null) {
|
|
@@ -982,7 +982,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
|
|
|
982
982
|
const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
|
|
983
983
|
state[key] = sizes;
|
|
984
984
|
try {
|
|
985
|
-
storage.setItem(`PanelGroup:
|
|
985
|
+
storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
|
|
986
986
|
} catch (error) {
|
|
987
987
|
console.error(error);
|
|
988
988
|
}
|
|
@@ -1165,7 +1165,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1165
1165
|
debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
|
|
1166
1166
|
debounceMap[autoSaveId] = debouncedSave;
|
|
1167
1167
|
}
|
|
1168
|
-
|
|
1168
|
+
|
|
1169
|
+
// Clone panel data array before saving since this array is mutated.
|
|
1170
|
+
// If we don't clone, we run the risk of saving the wrong panel and layout pair.
|
|
1171
|
+
debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
|
|
1169
1172
|
}
|
|
1170
1173
|
}, [autoSaveId, layout, storage]);
|
|
1171
1174
|
|
|
@@ -978,13 +978,13 @@ function getSerializationKey(panels) {
|
|
|
978
978
|
if (idIsFromProps) {
|
|
979
979
|
return id;
|
|
980
980
|
} else {
|
|
981
|
-
return `${order}:${JSON.stringify(constraints)}
|
|
981
|
+
return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
|
|
982
982
|
}
|
|
983
983
|
}).sort((a, b) => a.localeCompare(b)).join(",");
|
|
984
984
|
}
|
|
985
985
|
function loadSerializedPanelGroupState(autoSaveId, storage) {
|
|
986
986
|
try {
|
|
987
|
-
const serialized = storage.getItem(`PanelGroup:
|
|
987
|
+
const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
|
|
988
988
|
if (serialized) {
|
|
989
989
|
const parsed = JSON.parse(serialized);
|
|
990
990
|
if (typeof parsed === "object" && parsed != null) {
|
|
@@ -1008,7 +1008,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
|
|
|
1008
1008
|
const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
|
|
1009
1009
|
state[key] = sizes;
|
|
1010
1010
|
try {
|
|
1011
|
-
storage.setItem(`PanelGroup:
|
|
1011
|
+
storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
|
|
1012
1012
|
} catch (error) {
|
|
1013
1013
|
console.error(error);
|
|
1014
1014
|
}
|
|
@@ -1191,7 +1191,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1191
1191
|
debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
|
|
1192
1192
|
debounceMap[autoSaveId] = debouncedSave;
|
|
1193
1193
|
}
|
|
1194
|
-
|
|
1194
|
+
|
|
1195
|
+
// Clone panel data array before saving since this array is mutated.
|
|
1196
|
+
// If we don't clone, we run the risk of saving the wrong panel and layout pair.
|
|
1197
|
+
debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
|
|
1195
1198
|
}
|
|
1196
1199
|
}, [autoSaveId, layout, storage]);
|
|
1197
1200
|
|
|
@@ -999,13 +999,13 @@ function getSerializationKey(panels) {
|
|
|
999
999
|
if (idIsFromProps) {
|
|
1000
1000
|
return id;
|
|
1001
1001
|
} else {
|
|
1002
|
-
return `${order}:${JSON.stringify(constraints)}
|
|
1002
|
+
return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
|
|
1003
1003
|
}
|
|
1004
1004
|
}).sort((a, b) => a.localeCompare(b)).join(",");
|
|
1005
1005
|
}
|
|
1006
1006
|
function loadSerializedPanelGroupState(autoSaveId, storage) {
|
|
1007
1007
|
try {
|
|
1008
|
-
const serialized = storage.getItem(`PanelGroup:
|
|
1008
|
+
const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
|
|
1009
1009
|
if (serialized) {
|
|
1010
1010
|
const parsed = JSON.parse(serialized);
|
|
1011
1011
|
if (typeof parsed === "object" && parsed != null) {
|
|
@@ -1029,7 +1029,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
|
|
|
1029
1029
|
const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
|
|
1030
1030
|
state[key] = sizes;
|
|
1031
1031
|
try {
|
|
1032
|
-
storage.setItem(`PanelGroup:
|
|
1032
|
+
storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
|
|
1033
1033
|
} catch (error) {
|
|
1034
1034
|
console.error(error);
|
|
1035
1035
|
}
|
|
@@ -1259,7 +1259,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1259
1259
|
debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
|
|
1260
1260
|
debounceMap[autoSaveId] = debouncedSave;
|
|
1261
1261
|
}
|
|
1262
|
-
|
|
1262
|
+
|
|
1263
|
+
// Clone panel data array before saving since this array is mutated.
|
|
1264
|
+
// If we don't clone, we run the risk of saving the wrong panel and layout pair.
|
|
1265
|
+
debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
|
|
1263
1266
|
}
|
|
1264
1267
|
}, [autoSaveId, layout, storage]);
|
|
1265
1268
|
|
|
@@ -975,13 +975,13 @@ function getSerializationKey(panels) {
|
|
|
975
975
|
if (idIsFromProps) {
|
|
976
976
|
return id;
|
|
977
977
|
} else {
|
|
978
|
-
return `${order}:${JSON.stringify(constraints)}
|
|
978
|
+
return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
|
|
979
979
|
}
|
|
980
980
|
}).sort((a, b) => a.localeCompare(b)).join(",");
|
|
981
981
|
}
|
|
982
982
|
function loadSerializedPanelGroupState(autoSaveId, storage) {
|
|
983
983
|
try {
|
|
984
|
-
const serialized = storage.getItem(`PanelGroup:
|
|
984
|
+
const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
|
|
985
985
|
if (serialized) {
|
|
986
986
|
const parsed = JSON.parse(serialized);
|
|
987
987
|
if (typeof parsed === "object" && parsed != null) {
|
|
@@ -1005,7 +1005,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
|
|
|
1005
1005
|
const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
|
|
1006
1006
|
state[key] = sizes;
|
|
1007
1007
|
try {
|
|
1008
|
-
storage.setItem(`PanelGroup:
|
|
1008
|
+
storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
|
|
1009
1009
|
} catch (error) {
|
|
1010
1010
|
console.error(error);
|
|
1011
1011
|
}
|
|
@@ -1235,7 +1235,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1235
1235
|
debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
|
|
1236
1236
|
debounceMap[autoSaveId] = debouncedSave;
|
|
1237
1237
|
}
|
|
1238
|
-
|
|
1238
|
+
|
|
1239
|
+
// Clone panel data array before saving since this array is mutated.
|
|
1240
|
+
// If we don't clone, we run the risk of saving the wrong panel and layout pair.
|
|
1241
|
+
debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
|
|
1239
1242
|
}
|
|
1240
1243
|
}, [autoSaveId, layout, storage]);
|
|
1241
1244
|
|
|
@@ -850,13 +850,13 @@ function getSerializationKey(panels) {
|
|
|
850
850
|
if (idIsFromProps) {
|
|
851
851
|
return id;
|
|
852
852
|
} else {
|
|
853
|
-
return `${order}:${JSON.stringify(constraints)}
|
|
853
|
+
return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
|
|
854
854
|
}
|
|
855
855
|
}).sort((a, b) => a.localeCompare(b)).join(",");
|
|
856
856
|
}
|
|
857
857
|
function loadSerializedPanelGroupState(autoSaveId, storage) {
|
|
858
858
|
try {
|
|
859
|
-
const serialized = storage.getItem(`PanelGroup:
|
|
859
|
+
const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
|
|
860
860
|
if (serialized) {
|
|
861
861
|
const parsed = JSON.parse(serialized);
|
|
862
862
|
if (typeof parsed === "object" && parsed != null) {
|
|
@@ -871,7 +871,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
|
|
|
871
871
|
const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
|
|
872
872
|
state[key] = sizes;
|
|
873
873
|
try {
|
|
874
|
-
storage.setItem(`PanelGroup:
|
|
874
|
+
storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
|
|
875
875
|
} catch (error) {
|
|
876
876
|
console.error(error);
|
|
877
877
|
}
|
|
@@ -1093,7 +1093,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1093
1093
|
debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
|
|
1094
1094
|
debounceMap[autoSaveId] = debouncedSave;
|
|
1095
1095
|
}
|
|
1096
|
-
|
|
1096
|
+
|
|
1097
|
+
// Clone panel data array before saving since this array is mutated.
|
|
1098
|
+
// If we don't clone, we run the risk of saving the wrong panel and layout pair.
|
|
1099
|
+
debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
|
|
1097
1100
|
}
|
|
1098
1101
|
}, [autoSaveId, layout, storage]);
|
|
1099
1102
|
|
|
@@ -826,13 +826,13 @@ function getSerializationKey(panels) {
|
|
|
826
826
|
if (idIsFromProps) {
|
|
827
827
|
return id;
|
|
828
828
|
} else {
|
|
829
|
-
return `${order}:${JSON.stringify(constraints)}
|
|
829
|
+
return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
|
|
830
830
|
}
|
|
831
831
|
}).sort((a, b) => a.localeCompare(b)).join(",");
|
|
832
832
|
}
|
|
833
833
|
function loadSerializedPanelGroupState(autoSaveId, storage) {
|
|
834
834
|
try {
|
|
835
|
-
const serialized = storage.getItem(`PanelGroup:
|
|
835
|
+
const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
|
|
836
836
|
if (serialized) {
|
|
837
837
|
const parsed = JSON.parse(serialized);
|
|
838
838
|
if (typeof parsed === "object" && parsed != null) {
|
|
@@ -847,7 +847,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
|
|
|
847
847
|
const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
|
|
848
848
|
state[key] = sizes;
|
|
849
849
|
try {
|
|
850
|
-
storage.setItem(`PanelGroup:
|
|
850
|
+
storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
|
|
851
851
|
} catch (error) {
|
|
852
852
|
console.error(error);
|
|
853
853
|
}
|
|
@@ -1069,7 +1069,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1069
1069
|
debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
|
|
1070
1070
|
debounceMap[autoSaveId] = debouncedSave;
|
|
1071
1071
|
}
|
|
1072
|
-
|
|
1072
|
+
|
|
1073
|
+
// Clone panel data array before saving since this array is mutated.
|
|
1074
|
+
// If we don't clone, we run the risk of saving the wrong panel and layout pair.
|
|
1075
|
+
debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
|
|
1073
1076
|
}
|
|
1074
1077
|
}, [autoSaveId, layout, storage]);
|
|
1075
1078
|
|
|
@@ -954,13 +954,13 @@ function getSerializationKey(panels) {
|
|
|
954
954
|
if (idIsFromProps) {
|
|
955
955
|
return id;
|
|
956
956
|
} else {
|
|
957
|
-
return `${order}:${JSON.stringify(constraints)}
|
|
957
|
+
return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
|
|
958
958
|
}
|
|
959
959
|
}).sort((a, b) => a.localeCompare(b)).join(",");
|
|
960
960
|
}
|
|
961
961
|
function loadSerializedPanelGroupState(autoSaveId, storage) {
|
|
962
962
|
try {
|
|
963
|
-
const serialized = storage.getItem(`PanelGroup:
|
|
963
|
+
const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
|
|
964
964
|
if (serialized) {
|
|
965
965
|
const parsed = JSON.parse(serialized);
|
|
966
966
|
if (typeof parsed === "object" && parsed != null) {
|
|
@@ -984,7 +984,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
|
|
|
984
984
|
const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
|
|
985
985
|
state[key] = sizes;
|
|
986
986
|
try {
|
|
987
|
-
storage.setItem(`PanelGroup:
|
|
987
|
+
storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
|
|
988
988
|
} catch (error) {
|
|
989
989
|
console.error(error);
|
|
990
990
|
}
|
|
@@ -1167,7 +1167,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1167
1167
|
debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
|
|
1168
1168
|
debounceMap[autoSaveId] = debouncedSave;
|
|
1169
1169
|
}
|
|
1170
|
-
|
|
1170
|
+
|
|
1171
|
+
// Clone panel data array before saving since this array is mutated.
|
|
1172
|
+
// If we don't clone, we run the risk of saving the wrong panel and layout pair.
|
|
1173
|
+
debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
|
|
1171
1174
|
}
|
|
1172
1175
|
}, [autoSaveId, layout, storage]);
|
|
1173
1176
|
|
|
@@ -839,13 +839,13 @@ function getSerializationKey(panels) {
|
|
|
839
839
|
if (idIsFromProps) {
|
|
840
840
|
return id;
|
|
841
841
|
} else {
|
|
842
|
-
return `${order}:${JSON.stringify(constraints)}
|
|
842
|
+
return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
|
|
843
843
|
}
|
|
844
844
|
}).sort((a, b) => a.localeCompare(b)).join(",");
|
|
845
845
|
}
|
|
846
846
|
function loadSerializedPanelGroupState(autoSaveId, storage) {
|
|
847
847
|
try {
|
|
848
|
-
const serialized = storage.getItem(`PanelGroup:
|
|
848
|
+
const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
|
|
849
849
|
if (serialized) {
|
|
850
850
|
const parsed = JSON.parse(serialized);
|
|
851
851
|
if (typeof parsed === "object" && parsed != null) {
|
|
@@ -860,7 +860,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
|
|
|
860
860
|
const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
|
|
861
861
|
state[key] = sizes;
|
|
862
862
|
try {
|
|
863
|
-
storage.setItem(`PanelGroup:
|
|
863
|
+
storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
|
|
864
864
|
} catch (error) {
|
|
865
865
|
console.error(error);
|
|
866
866
|
}
|
|
@@ -1035,7 +1035,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1035
1035
|
debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
|
|
1036
1036
|
debounceMap[autoSaveId] = debouncedSave;
|
|
1037
1037
|
}
|
|
1038
|
-
|
|
1038
|
+
|
|
1039
|
+
// Clone panel data array before saving since this array is mutated.
|
|
1040
|
+
// If we don't clone, we run the risk of saving the wrong panel and layout pair.
|
|
1041
|
+
debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
|
|
1039
1042
|
}
|
|
1040
1043
|
}, [autoSaveId, layout, storage]);
|
|
1041
1044
|
|
|
@@ -815,13 +815,13 @@ function getSerializationKey(panels) {
|
|
|
815
815
|
if (idIsFromProps) {
|
|
816
816
|
return id;
|
|
817
817
|
} else {
|
|
818
|
-
return `${order}:${JSON.stringify(constraints)}
|
|
818
|
+
return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
|
|
819
819
|
}
|
|
820
820
|
}).sort((a, b) => a.localeCompare(b)).join(",");
|
|
821
821
|
}
|
|
822
822
|
function loadSerializedPanelGroupState(autoSaveId, storage) {
|
|
823
823
|
try {
|
|
824
|
-
const serialized = storage.getItem(`PanelGroup:
|
|
824
|
+
const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
|
|
825
825
|
if (serialized) {
|
|
826
826
|
const parsed = JSON.parse(serialized);
|
|
827
827
|
if (typeof parsed === "object" && parsed != null) {
|
|
@@ -836,7 +836,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
|
|
|
836
836
|
const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
|
|
837
837
|
state[key] = sizes;
|
|
838
838
|
try {
|
|
839
|
-
storage.setItem(`PanelGroup:
|
|
839
|
+
storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
|
|
840
840
|
} catch (error) {
|
|
841
841
|
console.error(error);
|
|
842
842
|
}
|
|
@@ -1011,7 +1011,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1011
1011
|
debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
|
|
1012
1012
|
debounceMap[autoSaveId] = debouncedSave;
|
|
1013
1013
|
}
|
|
1014
|
-
|
|
1014
|
+
|
|
1015
|
+
// Clone panel data array before saving since this array is mutated.
|
|
1016
|
+
// If we don't clone, we run the risk of saving the wrong panel and layout pair.
|
|
1017
|
+
debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
|
|
1015
1018
|
}
|
|
1016
1019
|
}, [autoSaveId, layout, storage]);
|
|
1017
1020
|
|
package/package.json
CHANGED
package/src/PanelGroup.ts
CHANGED
|
@@ -225,7 +225,9 @@ function PanelGroupWithForwardedRef({
|
|
|
225
225
|
debounceMap[autoSaveId] = debouncedSave;
|
|
226
226
|
}
|
|
227
227
|
|
|
228
|
-
|
|
228
|
+
// Clone panel data array before saving since this array is mutated.
|
|
229
|
+
// If we don't clone, we run the risk of saving the wrong panel and layout pair.
|
|
230
|
+
debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
|
|
229
231
|
}
|
|
230
232
|
}, [autoSaveId, layout, storage]);
|
|
231
233
|
|
|
@@ -14,7 +14,9 @@ function getSerializationKey(panels: PanelData[]): string {
|
|
|
14
14
|
if (idIsFromProps) {
|
|
15
15
|
return id;
|
|
16
16
|
} else {
|
|
17
|
-
return
|
|
17
|
+
return order
|
|
18
|
+
? `${order}:${JSON.stringify(constraints)}`
|
|
19
|
+
: JSON.stringify(constraints);
|
|
18
20
|
}
|
|
19
21
|
})
|
|
20
22
|
.sort((a, b) => a.localeCompare(b))
|
|
@@ -26,7 +28,7 @@ function loadSerializedPanelGroupState(
|
|
|
26
28
|
storage: PanelGroupStorage
|
|
27
29
|
): SerializedPanelGroupState | null {
|
|
28
30
|
try {
|
|
29
|
-
const serialized = storage.getItem(`PanelGroup:
|
|
31
|
+
const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
|
|
30
32
|
if (serialized) {
|
|
31
33
|
const parsed = JSON.parse(serialized);
|
|
32
34
|
if (typeof parsed === "object" && parsed != null) {
|
|
@@ -63,7 +65,7 @@ export function savePanelGroupLayout(
|
|
|
63
65
|
state[key] = sizes;
|
|
64
66
|
|
|
65
67
|
try {
|
|
66
|
-
storage.setItem(`PanelGroup:
|
|
68
|
+
storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
|
|
67
69
|
} catch (error) {
|
|
68
70
|
console.error(error);
|
|
69
71
|
}
|