react-resizable-panels 2.0.10 → 2.0.12
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 +8 -0
- package/dist/react-resizable-panels.browser.cjs.js +78 -48
- package/dist/react-resizable-panels.browser.development.cjs.js +78 -48
- package/dist/react-resizable-panels.browser.development.esm.js +78 -48
- package/dist/react-resizable-panels.browser.esm.js +78 -48
- package/dist/react-resizable-panels.cjs.js +78 -48
- package/dist/react-resizable-panels.development.cjs.js +78 -48
- package/dist/react-resizable-panels.development.esm.js +78 -48
- package/dist/react-resizable-panels.development.node.cjs.js +78 -48
- package/dist/react-resizable-panels.development.node.esm.js +78 -48
- package/dist/react-resizable-panels.esm.js +78 -48
- package/dist/react-resizable-panels.node.cjs.js +78 -48
- package/dist/react-resizable-panels.node.esm.js +78 -48
- package/package.json +1 -1
- package/src/PanelGroup.ts +8 -4
- package/src/hooks/useWindowSplitterPanelGroupBehavior.ts +2 -1
- package/src/utils/adjustLayoutByDelta.test.ts +268 -115
- package/src/utils/adjustLayoutByDelta.ts +51 -39
- package/src/utils/events/getResizeEventCoordinates.ts +5 -5
- package/src/utils/numbers/fuzzyLayoutsEqual.ts +22 -0
|
@@ -253,15 +253,15 @@ function isTouchEvent(event) {
|
|
|
253
253
|
function getResizeEventCoordinates(event) {
|
|
254
254
|
if (isMouseEvent(event)) {
|
|
255
255
|
return {
|
|
256
|
-
x: event.
|
|
257
|
-
y: event.
|
|
256
|
+
x: event.clientX,
|
|
257
|
+
y: event.clientY
|
|
258
258
|
};
|
|
259
259
|
} else if (isTouchEvent(event)) {
|
|
260
260
|
const touch = event.touches[0];
|
|
261
|
-
if (touch && touch.
|
|
261
|
+
if (touch && touch.clientX && touch.clientY) {
|
|
262
262
|
return {
|
|
263
|
-
x: touch.
|
|
264
|
-
y: touch.
|
|
263
|
+
x: touch.clientX,
|
|
264
|
+
y: touch.clientY
|
|
265
265
|
};
|
|
266
266
|
}
|
|
267
267
|
}
|
|
@@ -676,6 +676,20 @@ function fuzzyNumbersEqual(actual, expected, fractionDigits) {
|
|
|
676
676
|
return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
|
|
677
677
|
}
|
|
678
678
|
|
|
679
|
+
function fuzzyLayoutsEqual(actual, expected, fractionDigits) {
|
|
680
|
+
if (actual.length !== expected.length) {
|
|
681
|
+
return false;
|
|
682
|
+
}
|
|
683
|
+
for (let index = 0; index < actual.length; index++) {
|
|
684
|
+
const actualSize = actual[index];
|
|
685
|
+
const expectedSize = expected[index];
|
|
686
|
+
if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
|
|
687
|
+
return false;
|
|
688
|
+
}
|
|
689
|
+
}
|
|
690
|
+
return true;
|
|
691
|
+
}
|
|
692
|
+
|
|
679
693
|
// Panel size must be in percentages; pixel values should be pre-converted
|
|
680
694
|
function resizePanel({
|
|
681
695
|
panelConstraints: panelConstraintsArray,
|
|
@@ -711,26 +725,29 @@ function resizePanel({
|
|
|
711
725
|
// All units must be in percentages; pixel values should be pre-converted
|
|
712
726
|
function adjustLayoutByDelta({
|
|
713
727
|
delta,
|
|
714
|
-
|
|
728
|
+
initialLayout,
|
|
715
729
|
panelConstraints: panelConstraintsArray,
|
|
716
730
|
pivotIndices,
|
|
731
|
+
prevLayout,
|
|
717
732
|
trigger
|
|
718
733
|
}) {
|
|
719
734
|
if (fuzzyNumbersEqual(delta, 0)) {
|
|
720
|
-
return
|
|
735
|
+
return initialLayout;
|
|
721
736
|
}
|
|
722
|
-
const nextLayout = [...
|
|
737
|
+
const nextLayout = [...initialLayout];
|
|
723
738
|
const [firstPivotIndex, secondPivotIndex] = pivotIndices;
|
|
724
739
|
assert(firstPivotIndex != null, "Invalid first pivot index");
|
|
725
740
|
assert(secondPivotIndex != null, "Invalid second pivot index");
|
|
726
741
|
let deltaApplied = 0;
|
|
727
742
|
|
|
728
|
-
//const DEBUG = [];
|
|
729
|
-
//DEBUG.push(`adjustLayoutByDelta()
|
|
730
|
-
//DEBUG.push(`
|
|
731
|
-
//DEBUG.push(`
|
|
732
|
-
//DEBUG.push(`
|
|
733
|
-
//DEBUG.push("");
|
|
743
|
+
// const DEBUG = [];
|
|
744
|
+
// DEBUG.push(`adjustLayoutByDelta()`);
|
|
745
|
+
// DEBUG.push(` initialLayout: ${initialLayout.join(", ")}`);
|
|
746
|
+
// DEBUG.push(` prevLayout: ${prevLayout.join(", ")}`);
|
|
747
|
+
// DEBUG.push(` delta: ${delta}`);
|
|
748
|
+
// DEBUG.push(` pivotIndices: ${pivotIndices.join(", ")}`);
|
|
749
|
+
// DEBUG.push(` trigger: ${trigger}`);
|
|
750
|
+
// DEBUG.push("");
|
|
734
751
|
|
|
735
752
|
// A resizing panel affects the panels before or after it.
|
|
736
753
|
//
|
|
@@ -755,18 +772,18 @@ function adjustLayoutByDelta({
|
|
|
755
772
|
minSize = 0
|
|
756
773
|
} = panelConstraints;
|
|
757
774
|
|
|
758
|
-
//DEBUG.push(`edge case check 1: ${index}`);
|
|
759
|
-
//DEBUG.push(` -> collapsible? ${
|
|
775
|
+
// DEBUG.push(`edge case check 1: ${index}`);
|
|
776
|
+
// DEBUG.push(` -> collapsible? ${collapsible}`);
|
|
760
777
|
if (collapsible) {
|
|
761
|
-
const prevSize =
|
|
778
|
+
const prevSize = initialLayout[index];
|
|
762
779
|
assert(prevSize != null, `Previous layout not found for panel index ${index}`);
|
|
763
780
|
if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
|
|
764
781
|
const localDelta = minSize - prevSize;
|
|
765
|
-
//DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
782
|
+
// DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
766
783
|
|
|
767
784
|
if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
|
|
768
785
|
delta = delta < 0 ? 0 - localDelta : localDelta;
|
|
769
|
-
//DEBUG.push(` -> delta: ${delta}`);
|
|
786
|
+
// DEBUG.push(` -> delta: ${delta}`);
|
|
770
787
|
}
|
|
771
788
|
}
|
|
772
789
|
}
|
|
@@ -783,24 +800,24 @@ function adjustLayoutByDelta({
|
|
|
783
800
|
minSize = 0
|
|
784
801
|
} = panelConstraints;
|
|
785
802
|
|
|
786
|
-
//DEBUG.push(`edge case check 2: ${index}`);
|
|
787
|
-
//DEBUG.push(` -> collapsible? ${collapsible}`);
|
|
803
|
+
// DEBUG.push(`edge case check 2: ${index}`);
|
|
804
|
+
// DEBUG.push(` -> collapsible? ${collapsible}`);
|
|
788
805
|
if (collapsible) {
|
|
789
|
-
const prevSize =
|
|
806
|
+
const prevSize = initialLayout[index];
|
|
790
807
|
assert(prevSize != null, `Previous layout not found for panel index ${index}`);
|
|
791
808
|
if (fuzzyNumbersEqual(prevSize, minSize)) {
|
|
792
809
|
const localDelta = prevSize - collapsedSize;
|
|
793
|
-
//DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
810
|
+
// DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
794
811
|
|
|
795
812
|
if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
|
|
796
813
|
delta = delta < 0 ? 0 - localDelta : localDelta;
|
|
797
|
-
//DEBUG.push(` -> delta: ${delta}`);
|
|
814
|
+
// DEBUG.push(` -> delta: ${delta}`);
|
|
798
815
|
}
|
|
799
816
|
}
|
|
800
817
|
}
|
|
801
818
|
}
|
|
802
819
|
}
|
|
803
|
-
//DEBUG.push("");
|
|
820
|
+
// DEBUG.push("");
|
|
804
821
|
}
|
|
805
822
|
|
|
806
823
|
{
|
|
@@ -814,9 +831,9 @@ function adjustLayoutByDelta({
|
|
|
814
831
|
let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
|
|
815
832
|
let maxAvailableDelta = 0;
|
|
816
833
|
|
|
817
|
-
//DEBUG.push("pre calc...");
|
|
834
|
+
// DEBUG.push("pre calc...");
|
|
818
835
|
while (true) {
|
|
819
|
-
const prevSize =
|
|
836
|
+
const prevSize = initialLayout[index];
|
|
820
837
|
assert(prevSize != null, `Previous layout not found for panel index ${index}`);
|
|
821
838
|
const maxSafeSize = resizePanel({
|
|
822
839
|
panelConstraints: panelConstraintsArray,
|
|
@@ -824,7 +841,7 @@ function adjustLayoutByDelta({
|
|
|
824
841
|
size: 100
|
|
825
842
|
});
|
|
826
843
|
const delta = maxSafeSize - prevSize;
|
|
827
|
-
//DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
|
|
844
|
+
// DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
|
|
828
845
|
|
|
829
846
|
maxAvailableDelta += delta;
|
|
830
847
|
index += increment;
|
|
@@ -833,11 +850,11 @@ function adjustLayoutByDelta({
|
|
|
833
850
|
}
|
|
834
851
|
}
|
|
835
852
|
|
|
836
|
-
//DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
|
|
853
|
+
// DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
|
|
837
854
|
const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
|
|
838
855
|
delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
|
|
839
|
-
//DEBUG.push(` -> adjusted delta: ${delta}`);
|
|
840
|
-
//DEBUG.push("");
|
|
856
|
+
// DEBUG.push(` -> adjusted delta: ${delta}`);
|
|
857
|
+
// DEBUG.push("");
|
|
841
858
|
}
|
|
842
859
|
|
|
843
860
|
{
|
|
@@ -847,7 +864,7 @@ function adjustLayoutByDelta({
|
|
|
847
864
|
let index = pivotIndex;
|
|
848
865
|
while (index >= 0 && index < panelConstraintsArray.length) {
|
|
849
866
|
const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
|
|
850
|
-
const prevSize =
|
|
867
|
+
const prevSize = initialLayout[index];
|
|
851
868
|
assert(prevSize != null, `Previous layout not found for panel index ${index}`);
|
|
852
869
|
const unsafeSize = prevSize - deltaRemaining;
|
|
853
870
|
const safeSize = resizePanel({
|
|
@@ -871,20 +888,22 @@ function adjustLayoutByDelta({
|
|
|
871
888
|
}
|
|
872
889
|
}
|
|
873
890
|
}
|
|
874
|
-
//DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
|
|
875
|
-
//DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
876
|
-
//DEBUG.push("");
|
|
891
|
+
// DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
|
|
892
|
+
// DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
893
|
+
// DEBUG.push("");
|
|
877
894
|
|
|
878
895
|
// If we were unable to resize any of the panels panels, return the previous state.
|
|
879
896
|
// This will essentially bailout and ignore e.g. drags past a panel's boundaries
|
|
880
|
-
if (
|
|
881
|
-
//
|
|
897
|
+
if (fuzzyLayoutsEqual(prevLayout, nextLayout)) {
|
|
898
|
+
// DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
|
|
899
|
+
// console.log(DEBUG.join("\n"));
|
|
900
|
+
|
|
882
901
|
return prevLayout;
|
|
883
902
|
}
|
|
884
903
|
{
|
|
885
904
|
// Now distribute the applied delta to the panels in the other direction
|
|
886
905
|
const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
|
|
887
|
-
const prevSize =
|
|
906
|
+
const prevSize = initialLayout[pivotIndex];
|
|
888
907
|
assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
|
|
889
908
|
const unsafeSize = prevSize + deltaApplied;
|
|
890
909
|
const safeSize = resizePanel({
|
|
@@ -925,17 +944,23 @@ function adjustLayoutByDelta({
|
|
|
925
944
|
}
|
|
926
945
|
}
|
|
927
946
|
}
|
|
928
|
-
//DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
|
|
929
|
-
//DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
930
|
-
//DEBUG.push("");
|
|
947
|
+
// DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
|
|
948
|
+
// DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
949
|
+
// DEBUG.push("");
|
|
931
950
|
|
|
932
951
|
const totalSize = nextLayout.reduce((total, size) => size + total, 0);
|
|
933
|
-
//DEBUG.push(`total size: ${totalSize}`);
|
|
934
|
-
//console.log(DEBUG.join("\n"));
|
|
952
|
+
// DEBUG.push(`total size: ${totalSize}`);
|
|
935
953
|
|
|
954
|
+
// If our new layout doesn't add up to 100%, that means the requested delta can't be applied
|
|
955
|
+
// In that case, fall back to our most recent valid layout
|
|
936
956
|
if (!fuzzyNumbersEqual(totalSize, 100)) {
|
|
957
|
+
// DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
|
|
958
|
+
// console.log(DEBUG.join("\n"));
|
|
959
|
+
|
|
937
960
|
return prevLayout;
|
|
938
961
|
}
|
|
962
|
+
|
|
963
|
+
// console.log(DEBUG.join("\n"));
|
|
939
964
|
return nextLayout;
|
|
940
965
|
}
|
|
941
966
|
|
|
@@ -1125,9 +1150,10 @@ function useWindowSplitterPanelGroupBehavior({
|
|
|
1125
1150
|
if (size != null && collapsible) {
|
|
1126
1151
|
const nextLayout = adjustLayoutByDelta({
|
|
1127
1152
|
delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
|
|
1128
|
-
layout,
|
|
1153
|
+
initialLayout: layout,
|
|
1129
1154
|
panelConstraints: panelDataArray.map(panelData => panelData.constraints),
|
|
1130
1155
|
pivotIndices: determinePivotIndices(groupId, handleId, panelGroupElement),
|
|
1156
|
+
prevLayout: layout,
|
|
1131
1157
|
trigger: "keyboard"
|
|
1132
1158
|
});
|
|
1133
1159
|
if (layout !== nextLayout) {
|
|
@@ -1759,9 +1785,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1759
1785
|
const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
|
|
1760
1786
|
const nextLayout = adjustLayoutByDelta({
|
|
1761
1787
|
delta,
|
|
1762
|
-
|
|
1788
|
+
initialLayout: prevLayout,
|
|
1763
1789
|
panelConstraints: panelConstraintsArray,
|
|
1764
1790
|
pivotIndices,
|
|
1791
|
+
prevLayout,
|
|
1765
1792
|
trigger: "imperative-api"
|
|
1766
1793
|
});
|
|
1767
1794
|
if (!compareLayouts(prevLayout, nextLayout)) {
|
|
@@ -1801,9 +1828,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1801
1828
|
const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
|
|
1802
1829
|
const nextLayout = adjustLayoutByDelta({
|
|
1803
1830
|
delta,
|
|
1804
|
-
|
|
1831
|
+
initialLayout: prevLayout,
|
|
1805
1832
|
panelConstraints: panelConstraintsArray,
|
|
1806
1833
|
pivotIndices,
|
|
1834
|
+
prevLayout,
|
|
1807
1835
|
trigger: "imperative-api"
|
|
1808
1836
|
});
|
|
1809
1837
|
if (!compareLayouts(prevLayout, nextLayout)) {
|
|
@@ -1985,9 +2013,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1985
2013
|
const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
|
|
1986
2014
|
const nextLayout = adjustLayoutByDelta({
|
|
1987
2015
|
delta,
|
|
1988
|
-
|
|
2016
|
+
initialLayout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
|
|
1989
2017
|
panelConstraints,
|
|
1990
2018
|
pivotIndices,
|
|
2019
|
+
prevLayout,
|
|
1991
2020
|
trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
|
|
1992
2021
|
});
|
|
1993
2022
|
const layoutChanged = !compareLayouts(prevLayout, nextLayout);
|
|
@@ -2043,9 +2072,10 @@ function PanelGroupWithForwardedRef({
|
|
|
2043
2072
|
const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
|
|
2044
2073
|
const nextLayout = adjustLayoutByDelta({
|
|
2045
2074
|
delta,
|
|
2046
|
-
|
|
2075
|
+
initialLayout: prevLayout,
|
|
2047
2076
|
panelConstraints: panelConstraintsArray,
|
|
2048
2077
|
pivotIndices,
|
|
2078
|
+
prevLayout,
|
|
2049
2079
|
trigger: "imperative-api"
|
|
2050
2080
|
});
|
|
2051
2081
|
if (!compareLayouts(prevLayout, nextLayout)) {
|
|
@@ -247,15 +247,15 @@ function isTouchEvent(event) {
|
|
|
247
247
|
function getResizeEventCoordinates(event) {
|
|
248
248
|
if (isMouseEvent(event)) {
|
|
249
249
|
return {
|
|
250
|
-
x: event.
|
|
251
|
-
y: event.
|
|
250
|
+
x: event.clientX,
|
|
251
|
+
y: event.clientY
|
|
252
252
|
};
|
|
253
253
|
} else if (isTouchEvent(event)) {
|
|
254
254
|
const touch = event.touches[0];
|
|
255
|
-
if (touch && touch.
|
|
255
|
+
if (touch && touch.clientX && touch.clientY) {
|
|
256
256
|
return {
|
|
257
|
-
x: touch.
|
|
258
|
-
y: touch.
|
|
257
|
+
x: touch.clientX,
|
|
258
|
+
y: touch.clientY
|
|
259
259
|
};
|
|
260
260
|
}
|
|
261
261
|
}
|
|
@@ -670,6 +670,20 @@ function fuzzyNumbersEqual(actual, expected, fractionDigits) {
|
|
|
670
670
|
return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
|
|
671
671
|
}
|
|
672
672
|
|
|
673
|
+
function fuzzyLayoutsEqual(actual, expected, fractionDigits) {
|
|
674
|
+
if (actual.length !== expected.length) {
|
|
675
|
+
return false;
|
|
676
|
+
}
|
|
677
|
+
for (let index = 0; index < actual.length; index++) {
|
|
678
|
+
const actualSize = actual[index];
|
|
679
|
+
const expectedSize = expected[index];
|
|
680
|
+
if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
|
|
681
|
+
return false;
|
|
682
|
+
}
|
|
683
|
+
}
|
|
684
|
+
return true;
|
|
685
|
+
}
|
|
686
|
+
|
|
673
687
|
// Panel size must be in percentages; pixel values should be pre-converted
|
|
674
688
|
function resizePanel({
|
|
675
689
|
panelConstraints: panelConstraintsArray,
|
|
@@ -705,26 +719,29 @@ function resizePanel({
|
|
|
705
719
|
// All units must be in percentages; pixel values should be pre-converted
|
|
706
720
|
function adjustLayoutByDelta({
|
|
707
721
|
delta,
|
|
708
|
-
|
|
722
|
+
initialLayout,
|
|
709
723
|
panelConstraints: panelConstraintsArray,
|
|
710
724
|
pivotIndices,
|
|
725
|
+
prevLayout,
|
|
711
726
|
trigger
|
|
712
727
|
}) {
|
|
713
728
|
if (fuzzyNumbersEqual(delta, 0)) {
|
|
714
|
-
return
|
|
729
|
+
return initialLayout;
|
|
715
730
|
}
|
|
716
|
-
const nextLayout = [...
|
|
731
|
+
const nextLayout = [...initialLayout];
|
|
717
732
|
const [firstPivotIndex, secondPivotIndex] = pivotIndices;
|
|
718
733
|
assert(firstPivotIndex != null, "Invalid first pivot index");
|
|
719
734
|
assert(secondPivotIndex != null, "Invalid second pivot index");
|
|
720
735
|
let deltaApplied = 0;
|
|
721
736
|
|
|
722
|
-
//const DEBUG = [];
|
|
723
|
-
//DEBUG.push(`adjustLayoutByDelta()
|
|
724
|
-
//DEBUG.push(`
|
|
725
|
-
//DEBUG.push(`
|
|
726
|
-
//DEBUG.push(`
|
|
727
|
-
//DEBUG.push("");
|
|
737
|
+
// const DEBUG = [];
|
|
738
|
+
// DEBUG.push(`adjustLayoutByDelta()`);
|
|
739
|
+
// DEBUG.push(` initialLayout: ${initialLayout.join(", ")}`);
|
|
740
|
+
// DEBUG.push(` prevLayout: ${prevLayout.join(", ")}`);
|
|
741
|
+
// DEBUG.push(` delta: ${delta}`);
|
|
742
|
+
// DEBUG.push(` pivotIndices: ${pivotIndices.join(", ")}`);
|
|
743
|
+
// DEBUG.push(` trigger: ${trigger}`);
|
|
744
|
+
// DEBUG.push("");
|
|
728
745
|
|
|
729
746
|
// A resizing panel affects the panels before or after it.
|
|
730
747
|
//
|
|
@@ -749,18 +766,18 @@ function adjustLayoutByDelta({
|
|
|
749
766
|
minSize = 0
|
|
750
767
|
} = panelConstraints;
|
|
751
768
|
|
|
752
|
-
//DEBUG.push(`edge case check 1: ${index}`);
|
|
753
|
-
//DEBUG.push(` -> collapsible? ${
|
|
769
|
+
// DEBUG.push(`edge case check 1: ${index}`);
|
|
770
|
+
// DEBUG.push(` -> collapsible? ${collapsible}`);
|
|
754
771
|
if (collapsible) {
|
|
755
|
-
const prevSize =
|
|
772
|
+
const prevSize = initialLayout[index];
|
|
756
773
|
assert(prevSize != null, `Previous layout not found for panel index ${index}`);
|
|
757
774
|
if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
|
|
758
775
|
const localDelta = minSize - prevSize;
|
|
759
|
-
//DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
776
|
+
// DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
760
777
|
|
|
761
778
|
if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
|
|
762
779
|
delta = delta < 0 ? 0 - localDelta : localDelta;
|
|
763
|
-
//DEBUG.push(` -> delta: ${delta}`);
|
|
780
|
+
// DEBUG.push(` -> delta: ${delta}`);
|
|
764
781
|
}
|
|
765
782
|
}
|
|
766
783
|
}
|
|
@@ -777,24 +794,24 @@ function adjustLayoutByDelta({
|
|
|
777
794
|
minSize = 0
|
|
778
795
|
} = panelConstraints;
|
|
779
796
|
|
|
780
|
-
//DEBUG.push(`edge case check 2: ${index}`);
|
|
781
|
-
//DEBUG.push(` -> collapsible? ${collapsible}`);
|
|
797
|
+
// DEBUG.push(`edge case check 2: ${index}`);
|
|
798
|
+
// DEBUG.push(` -> collapsible? ${collapsible}`);
|
|
782
799
|
if (collapsible) {
|
|
783
|
-
const prevSize =
|
|
800
|
+
const prevSize = initialLayout[index];
|
|
784
801
|
assert(prevSize != null, `Previous layout not found for panel index ${index}`);
|
|
785
802
|
if (fuzzyNumbersEqual(prevSize, minSize)) {
|
|
786
803
|
const localDelta = prevSize - collapsedSize;
|
|
787
|
-
//DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
804
|
+
// DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
788
805
|
|
|
789
806
|
if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
|
|
790
807
|
delta = delta < 0 ? 0 - localDelta : localDelta;
|
|
791
|
-
//DEBUG.push(` -> delta: ${delta}`);
|
|
808
|
+
// DEBUG.push(` -> delta: ${delta}`);
|
|
792
809
|
}
|
|
793
810
|
}
|
|
794
811
|
}
|
|
795
812
|
}
|
|
796
813
|
}
|
|
797
|
-
//DEBUG.push("");
|
|
814
|
+
// DEBUG.push("");
|
|
798
815
|
}
|
|
799
816
|
|
|
800
817
|
{
|
|
@@ -808,9 +825,9 @@ function adjustLayoutByDelta({
|
|
|
808
825
|
let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
|
|
809
826
|
let maxAvailableDelta = 0;
|
|
810
827
|
|
|
811
|
-
//DEBUG.push("pre calc...");
|
|
828
|
+
// DEBUG.push("pre calc...");
|
|
812
829
|
while (true) {
|
|
813
|
-
const prevSize =
|
|
830
|
+
const prevSize = initialLayout[index];
|
|
814
831
|
assert(prevSize != null, `Previous layout not found for panel index ${index}`);
|
|
815
832
|
const maxSafeSize = resizePanel({
|
|
816
833
|
panelConstraints: panelConstraintsArray,
|
|
@@ -818,7 +835,7 @@ function adjustLayoutByDelta({
|
|
|
818
835
|
size: 100
|
|
819
836
|
});
|
|
820
837
|
const delta = maxSafeSize - prevSize;
|
|
821
|
-
//DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
|
|
838
|
+
// DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
|
|
822
839
|
|
|
823
840
|
maxAvailableDelta += delta;
|
|
824
841
|
index += increment;
|
|
@@ -827,11 +844,11 @@ function adjustLayoutByDelta({
|
|
|
827
844
|
}
|
|
828
845
|
}
|
|
829
846
|
|
|
830
|
-
//DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
|
|
847
|
+
// DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
|
|
831
848
|
const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
|
|
832
849
|
delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
|
|
833
|
-
//DEBUG.push(` -> adjusted delta: ${delta}`);
|
|
834
|
-
//DEBUG.push("");
|
|
850
|
+
// DEBUG.push(` -> adjusted delta: ${delta}`);
|
|
851
|
+
// DEBUG.push("");
|
|
835
852
|
}
|
|
836
853
|
|
|
837
854
|
{
|
|
@@ -841,7 +858,7 @@ function adjustLayoutByDelta({
|
|
|
841
858
|
let index = pivotIndex;
|
|
842
859
|
while (index >= 0 && index < panelConstraintsArray.length) {
|
|
843
860
|
const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
|
|
844
|
-
const prevSize =
|
|
861
|
+
const prevSize = initialLayout[index];
|
|
845
862
|
assert(prevSize != null, `Previous layout not found for panel index ${index}`);
|
|
846
863
|
const unsafeSize = prevSize - deltaRemaining;
|
|
847
864
|
const safeSize = resizePanel({
|
|
@@ -865,20 +882,22 @@ function adjustLayoutByDelta({
|
|
|
865
882
|
}
|
|
866
883
|
}
|
|
867
884
|
}
|
|
868
|
-
//DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
|
|
869
|
-
//DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
870
|
-
//DEBUG.push("");
|
|
885
|
+
// DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
|
|
886
|
+
// DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
887
|
+
// DEBUG.push("");
|
|
871
888
|
|
|
872
889
|
// If we were unable to resize any of the panels panels, return the previous state.
|
|
873
890
|
// This will essentially bailout and ignore e.g. drags past a panel's boundaries
|
|
874
|
-
if (
|
|
875
|
-
//
|
|
891
|
+
if (fuzzyLayoutsEqual(prevLayout, nextLayout)) {
|
|
892
|
+
// DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
|
|
893
|
+
// console.log(DEBUG.join("\n"));
|
|
894
|
+
|
|
876
895
|
return prevLayout;
|
|
877
896
|
}
|
|
878
897
|
{
|
|
879
898
|
// Now distribute the applied delta to the panels in the other direction
|
|
880
899
|
const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
|
|
881
|
-
const prevSize =
|
|
900
|
+
const prevSize = initialLayout[pivotIndex];
|
|
882
901
|
assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
|
|
883
902
|
const unsafeSize = prevSize + deltaApplied;
|
|
884
903
|
const safeSize = resizePanel({
|
|
@@ -919,17 +938,23 @@ function adjustLayoutByDelta({
|
|
|
919
938
|
}
|
|
920
939
|
}
|
|
921
940
|
}
|
|
922
|
-
//DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
|
|
923
|
-
//DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
924
|
-
//DEBUG.push("");
|
|
941
|
+
// DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
|
|
942
|
+
// DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
943
|
+
// DEBUG.push("");
|
|
925
944
|
|
|
926
945
|
const totalSize = nextLayout.reduce((total, size) => size + total, 0);
|
|
927
|
-
//DEBUG.push(`total size: ${totalSize}`);
|
|
928
|
-
//console.log(DEBUG.join("\n"));
|
|
946
|
+
// DEBUG.push(`total size: ${totalSize}`);
|
|
929
947
|
|
|
948
|
+
// If our new layout doesn't add up to 100%, that means the requested delta can't be applied
|
|
949
|
+
// In that case, fall back to our most recent valid layout
|
|
930
950
|
if (!fuzzyNumbersEqual(totalSize, 100)) {
|
|
951
|
+
// DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
|
|
952
|
+
// console.log(DEBUG.join("\n"));
|
|
953
|
+
|
|
931
954
|
return prevLayout;
|
|
932
955
|
}
|
|
956
|
+
|
|
957
|
+
// console.log(DEBUG.join("\n"));
|
|
933
958
|
return nextLayout;
|
|
934
959
|
}
|
|
935
960
|
|
|
@@ -1109,9 +1134,10 @@ function useWindowSplitterPanelGroupBehavior({
|
|
|
1109
1134
|
if (size != null && collapsible) {
|
|
1110
1135
|
const nextLayout = adjustLayoutByDelta({
|
|
1111
1136
|
delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
|
|
1112
|
-
layout,
|
|
1137
|
+
initialLayout: layout,
|
|
1113
1138
|
panelConstraints: panelDataArray.map(panelData => panelData.constraints),
|
|
1114
1139
|
pivotIndices: determinePivotIndices(groupId, handleId, panelGroupElement),
|
|
1140
|
+
prevLayout: layout,
|
|
1115
1141
|
trigger: "keyboard"
|
|
1116
1142
|
});
|
|
1117
1143
|
if (layout !== nextLayout) {
|
|
@@ -1653,9 +1679,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1653
1679
|
const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
|
|
1654
1680
|
const nextLayout = adjustLayoutByDelta({
|
|
1655
1681
|
delta,
|
|
1656
|
-
|
|
1682
|
+
initialLayout: prevLayout,
|
|
1657
1683
|
panelConstraints: panelConstraintsArray,
|
|
1658
1684
|
pivotIndices,
|
|
1685
|
+
prevLayout,
|
|
1659
1686
|
trigger: "imperative-api"
|
|
1660
1687
|
});
|
|
1661
1688
|
if (!compareLayouts(prevLayout, nextLayout)) {
|
|
@@ -1695,9 +1722,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1695
1722
|
const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
|
|
1696
1723
|
const nextLayout = adjustLayoutByDelta({
|
|
1697
1724
|
delta,
|
|
1698
|
-
|
|
1725
|
+
initialLayout: prevLayout,
|
|
1699
1726
|
panelConstraints: panelConstraintsArray,
|
|
1700
1727
|
pivotIndices,
|
|
1728
|
+
prevLayout,
|
|
1701
1729
|
trigger: "imperative-api"
|
|
1702
1730
|
});
|
|
1703
1731
|
if (!compareLayouts(prevLayout, nextLayout)) {
|
|
@@ -1879,9 +1907,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1879
1907
|
const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
|
|
1880
1908
|
const nextLayout = adjustLayoutByDelta({
|
|
1881
1909
|
delta,
|
|
1882
|
-
|
|
1910
|
+
initialLayout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
|
|
1883
1911
|
panelConstraints,
|
|
1884
1912
|
pivotIndices,
|
|
1913
|
+
prevLayout,
|
|
1885
1914
|
trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
|
|
1886
1915
|
});
|
|
1887
1916
|
const layoutChanged = !compareLayouts(prevLayout, nextLayout);
|
|
@@ -1937,9 +1966,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1937
1966
|
const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
|
|
1938
1967
|
const nextLayout = adjustLayoutByDelta({
|
|
1939
1968
|
delta,
|
|
1940
|
-
|
|
1969
|
+
initialLayout: prevLayout,
|
|
1941
1970
|
panelConstraints: panelConstraintsArray,
|
|
1942
1971
|
pivotIndices,
|
|
1972
|
+
prevLayout,
|
|
1943
1973
|
trigger: "imperative-api"
|
|
1944
1974
|
});
|
|
1945
1975
|
if (!compareLayouts(prevLayout, nextLayout)) {
|