react-resizable-panels 2.0.11 → 2.0.13
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/.parcel-cache/0e613961dce44a82 +0 -0
- package/.parcel-cache/13776de4870b0ae4.txt +2 -0
- package/.parcel-cache/35c20fb91e350b46 +0 -0
- package/.parcel-cache/data.mdb +0 -0
- package/.parcel-cache/lock.mdb +0 -0
- package/CHANGELOG.md +8 -0
- package/LICENSE +21 -0
- package/dist/react-resizable-panels.browser.cjs.js +84 -47
- package/dist/react-resizable-panels.browser.development.cjs.js +84 -47
- package/dist/react-resizable-panels.browser.development.esm.js +84 -47
- package/dist/react-resizable-panels.browser.esm.js +84 -47
- package/dist/react-resizable-panels.cjs.js +84 -47
- package/dist/react-resizable-panels.development.cjs.js +84 -47
- package/dist/react-resizable-panels.development.esm.js +84 -47
- package/dist/react-resizable-panels.development.node.cjs.js +84 -47
- package/dist/react-resizable-panels.development.node.esm.js +84 -47
- package/dist/react-resizable-panels.esm.js +84 -47
- package/dist/react-resizable-panels.node.cjs.js +84 -47
- package/dist/react-resizable-panels.node.esm.js +84 -47
- package/package.json +9 -9
- 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/numbers/fuzzyLayoutsEqual.ts +22 -0
- package/src/vendor/stacking-order.ts +10 -4
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 2.0.13
|
|
4
|
+
|
|
5
|
+
- Fix potential cycle in stacking-order logic for an unmounted node (#317)
|
|
6
|
+
|
|
7
|
+
## 2.0.12
|
|
8
|
+
|
|
9
|
+
- Improve resize for edge cases with collapsed panels; intermediate resize states should now fall back to the most recent valid layout rather than the initial layout (#311)
|
|
10
|
+
|
|
3
11
|
## 2.0.11
|
|
4
12
|
|
|
5
13
|
- Fix resize handle cursor hit detection when when viewport is scrolled (#305)
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 Brian Vaughn
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -349,7 +349,9 @@ const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMo
|
|
|
349
349
|
|
|
350
350
|
/** @param {HTMLElement} node */
|
|
351
351
|
function is_flex_item(node) {
|
|
352
|
-
|
|
352
|
+
var _get_parent;
|
|
353
|
+
// @ts-ignore
|
|
354
|
+
const display = getComputedStyle((_get_parent = get_parent(node)) !== null && _get_parent !== void 0 ? _get_parent : node).display;
|
|
353
355
|
return display === "flex" || display === "inline-flex";
|
|
354
356
|
}
|
|
355
357
|
|
|
@@ -399,6 +401,7 @@ function get_ancestors(node) {
|
|
|
399
401
|
const ancestors = [];
|
|
400
402
|
while (node) {
|
|
401
403
|
ancestors.push(node);
|
|
404
|
+
// @ts-ignore
|
|
402
405
|
node = get_parent(node);
|
|
403
406
|
}
|
|
404
407
|
return ancestors; // [ node, ... <body>, <html>, document ]
|
|
@@ -406,9 +409,13 @@ function get_ancestors(node) {
|
|
|
406
409
|
|
|
407
410
|
/** @param {HTMLElement} node */
|
|
408
411
|
function get_parent(node) {
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
+
const {
|
|
413
|
+
parentNode
|
|
414
|
+
} = node;
|
|
415
|
+
if (parentNode && parentNode instanceof ShadowRoot) {
|
|
416
|
+
return parentNode.host;
|
|
417
|
+
}
|
|
418
|
+
return parentNode;
|
|
412
419
|
}
|
|
413
420
|
|
|
414
421
|
const EXCEEDED_HORIZONTAL_MIN = 0b0001;
|
|
@@ -694,6 +701,20 @@ function fuzzyNumbersEqual(actual, expected, fractionDigits) {
|
|
|
694
701
|
return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
|
|
695
702
|
}
|
|
696
703
|
|
|
704
|
+
function fuzzyLayoutsEqual(actual, expected, fractionDigits) {
|
|
705
|
+
if (actual.length !== expected.length) {
|
|
706
|
+
return false;
|
|
707
|
+
}
|
|
708
|
+
for (let index = 0; index < actual.length; index++) {
|
|
709
|
+
const actualSize = actual[index];
|
|
710
|
+
const expectedSize = expected[index];
|
|
711
|
+
if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
|
|
712
|
+
return false;
|
|
713
|
+
}
|
|
714
|
+
}
|
|
715
|
+
return true;
|
|
716
|
+
}
|
|
717
|
+
|
|
697
718
|
// Panel size must be in percentages; pixel values should be pre-converted
|
|
698
719
|
function resizePanel({
|
|
699
720
|
panelConstraints: panelConstraintsArray,
|
|
@@ -729,26 +750,29 @@ function resizePanel({
|
|
|
729
750
|
// All units must be in percentages; pixel values should be pre-converted
|
|
730
751
|
function adjustLayoutByDelta({
|
|
731
752
|
delta,
|
|
732
|
-
|
|
753
|
+
initialLayout,
|
|
733
754
|
panelConstraints: panelConstraintsArray,
|
|
734
755
|
pivotIndices,
|
|
756
|
+
prevLayout,
|
|
735
757
|
trigger
|
|
736
758
|
}) {
|
|
737
759
|
if (fuzzyNumbersEqual(delta, 0)) {
|
|
738
|
-
return
|
|
760
|
+
return initialLayout;
|
|
739
761
|
}
|
|
740
|
-
const nextLayout = [...
|
|
762
|
+
const nextLayout = [...initialLayout];
|
|
741
763
|
const [firstPivotIndex, secondPivotIndex] = pivotIndices;
|
|
742
764
|
assert(firstPivotIndex != null, "Invalid first pivot index");
|
|
743
765
|
assert(secondPivotIndex != null, "Invalid second pivot index");
|
|
744
766
|
let deltaApplied = 0;
|
|
745
767
|
|
|
746
|
-
//const DEBUG = [];
|
|
747
|
-
//DEBUG.push(`adjustLayoutByDelta()
|
|
748
|
-
//DEBUG.push(`
|
|
749
|
-
//DEBUG.push(`
|
|
750
|
-
//DEBUG.push(`
|
|
751
|
-
//DEBUG.push("");
|
|
768
|
+
// const DEBUG = [];
|
|
769
|
+
// DEBUG.push(`adjustLayoutByDelta()`);
|
|
770
|
+
// DEBUG.push(` initialLayout: ${initialLayout.join(", ")}`);
|
|
771
|
+
// DEBUG.push(` prevLayout: ${prevLayout.join(", ")}`);
|
|
772
|
+
// DEBUG.push(` delta: ${delta}`);
|
|
773
|
+
// DEBUG.push(` pivotIndices: ${pivotIndices.join(", ")}`);
|
|
774
|
+
// DEBUG.push(` trigger: ${trigger}`);
|
|
775
|
+
// DEBUG.push("");
|
|
752
776
|
|
|
753
777
|
// A resizing panel affects the panels before or after it.
|
|
754
778
|
//
|
|
@@ -773,18 +797,18 @@ function adjustLayoutByDelta({
|
|
|
773
797
|
minSize = 0
|
|
774
798
|
} = panelConstraints;
|
|
775
799
|
|
|
776
|
-
//DEBUG.push(`edge case check 1: ${index}`);
|
|
777
|
-
//DEBUG.push(` -> collapsible? ${
|
|
800
|
+
// DEBUG.push(`edge case check 1: ${index}`);
|
|
801
|
+
// DEBUG.push(` -> collapsible? ${collapsible}`);
|
|
778
802
|
if (collapsible) {
|
|
779
|
-
const prevSize =
|
|
803
|
+
const prevSize = initialLayout[index];
|
|
780
804
|
assert(prevSize != null, `Previous layout not found for panel index ${index}`);
|
|
781
805
|
if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
|
|
782
806
|
const localDelta = minSize - prevSize;
|
|
783
|
-
//DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
807
|
+
// DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
784
808
|
|
|
785
809
|
if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
|
|
786
810
|
delta = delta < 0 ? 0 - localDelta : localDelta;
|
|
787
|
-
//DEBUG.push(` -> delta: ${delta}`);
|
|
811
|
+
// DEBUG.push(` -> delta: ${delta}`);
|
|
788
812
|
}
|
|
789
813
|
}
|
|
790
814
|
}
|
|
@@ -801,24 +825,24 @@ function adjustLayoutByDelta({
|
|
|
801
825
|
minSize = 0
|
|
802
826
|
} = panelConstraints;
|
|
803
827
|
|
|
804
|
-
//DEBUG.push(`edge case check 2: ${index}`);
|
|
805
|
-
//DEBUG.push(` -> collapsible? ${collapsible}`);
|
|
828
|
+
// DEBUG.push(`edge case check 2: ${index}`);
|
|
829
|
+
// DEBUG.push(` -> collapsible? ${collapsible}`);
|
|
806
830
|
if (collapsible) {
|
|
807
|
-
const prevSize =
|
|
831
|
+
const prevSize = initialLayout[index];
|
|
808
832
|
assert(prevSize != null, `Previous layout not found for panel index ${index}`);
|
|
809
833
|
if (fuzzyNumbersEqual(prevSize, minSize)) {
|
|
810
834
|
const localDelta = prevSize - collapsedSize;
|
|
811
|
-
//DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
835
|
+
// DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
812
836
|
|
|
813
837
|
if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
|
|
814
838
|
delta = delta < 0 ? 0 - localDelta : localDelta;
|
|
815
|
-
//DEBUG.push(` -> delta: ${delta}`);
|
|
839
|
+
// DEBUG.push(` -> delta: ${delta}`);
|
|
816
840
|
}
|
|
817
841
|
}
|
|
818
842
|
}
|
|
819
843
|
}
|
|
820
844
|
}
|
|
821
|
-
//DEBUG.push("");
|
|
845
|
+
// DEBUG.push("");
|
|
822
846
|
}
|
|
823
847
|
|
|
824
848
|
{
|
|
@@ -832,9 +856,9 @@ function adjustLayoutByDelta({
|
|
|
832
856
|
let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
|
|
833
857
|
let maxAvailableDelta = 0;
|
|
834
858
|
|
|
835
|
-
//DEBUG.push("pre calc...");
|
|
859
|
+
// DEBUG.push("pre calc...");
|
|
836
860
|
while (true) {
|
|
837
|
-
const prevSize =
|
|
861
|
+
const prevSize = initialLayout[index];
|
|
838
862
|
assert(prevSize != null, `Previous layout not found for panel index ${index}`);
|
|
839
863
|
const maxSafeSize = resizePanel({
|
|
840
864
|
panelConstraints: panelConstraintsArray,
|
|
@@ -842,7 +866,7 @@ function adjustLayoutByDelta({
|
|
|
842
866
|
size: 100
|
|
843
867
|
});
|
|
844
868
|
const delta = maxSafeSize - prevSize;
|
|
845
|
-
//DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
|
|
869
|
+
// DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
|
|
846
870
|
|
|
847
871
|
maxAvailableDelta += delta;
|
|
848
872
|
index += increment;
|
|
@@ -851,11 +875,11 @@ function adjustLayoutByDelta({
|
|
|
851
875
|
}
|
|
852
876
|
}
|
|
853
877
|
|
|
854
|
-
//DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
|
|
878
|
+
// DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
|
|
855
879
|
const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
|
|
856
880
|
delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
|
|
857
|
-
//DEBUG.push(` -> adjusted delta: ${delta}`);
|
|
858
|
-
//DEBUG.push("");
|
|
881
|
+
// DEBUG.push(` -> adjusted delta: ${delta}`);
|
|
882
|
+
// DEBUG.push("");
|
|
859
883
|
}
|
|
860
884
|
|
|
861
885
|
{
|
|
@@ -865,7 +889,7 @@ function adjustLayoutByDelta({
|
|
|
865
889
|
let index = pivotIndex;
|
|
866
890
|
while (index >= 0 && index < panelConstraintsArray.length) {
|
|
867
891
|
const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
|
|
868
|
-
const prevSize =
|
|
892
|
+
const prevSize = initialLayout[index];
|
|
869
893
|
assert(prevSize != null, `Previous layout not found for panel index ${index}`);
|
|
870
894
|
const unsafeSize = prevSize - deltaRemaining;
|
|
871
895
|
const safeSize = resizePanel({
|
|
@@ -889,20 +913,22 @@ function adjustLayoutByDelta({
|
|
|
889
913
|
}
|
|
890
914
|
}
|
|
891
915
|
}
|
|
892
|
-
//DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
|
|
893
|
-
//DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
894
|
-
//DEBUG.push("");
|
|
916
|
+
// DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
|
|
917
|
+
// DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
918
|
+
// DEBUG.push("");
|
|
895
919
|
|
|
896
920
|
// If we were unable to resize any of the panels panels, return the previous state.
|
|
897
921
|
// This will essentially bailout and ignore e.g. drags past a panel's boundaries
|
|
898
|
-
if (
|
|
899
|
-
//
|
|
922
|
+
if (fuzzyLayoutsEqual(prevLayout, nextLayout)) {
|
|
923
|
+
// DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
|
|
924
|
+
// console.log(DEBUG.join("\n"));
|
|
925
|
+
|
|
900
926
|
return prevLayout;
|
|
901
927
|
}
|
|
902
928
|
{
|
|
903
929
|
// Now distribute the applied delta to the panels in the other direction
|
|
904
930
|
const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
|
|
905
|
-
const prevSize =
|
|
931
|
+
const prevSize = initialLayout[pivotIndex];
|
|
906
932
|
assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
|
|
907
933
|
const unsafeSize = prevSize + deltaApplied;
|
|
908
934
|
const safeSize = resizePanel({
|
|
@@ -943,17 +969,23 @@ function adjustLayoutByDelta({
|
|
|
943
969
|
}
|
|
944
970
|
}
|
|
945
971
|
}
|
|
946
|
-
//DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
|
|
947
|
-
//DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
948
|
-
//DEBUG.push("");
|
|
972
|
+
// DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
|
|
973
|
+
// DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
974
|
+
// DEBUG.push("");
|
|
949
975
|
|
|
950
976
|
const totalSize = nextLayout.reduce((total, size) => size + total, 0);
|
|
951
|
-
//DEBUG.push(`total size: ${totalSize}`);
|
|
952
|
-
//console.log(DEBUG.join("\n"));
|
|
977
|
+
// DEBUG.push(`total size: ${totalSize}`);
|
|
953
978
|
|
|
979
|
+
// If our new layout doesn't add up to 100%, that means the requested delta can't be applied
|
|
980
|
+
// In that case, fall back to our most recent valid layout
|
|
954
981
|
if (!fuzzyNumbersEqual(totalSize, 100)) {
|
|
982
|
+
// DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
|
|
983
|
+
// console.log(DEBUG.join("\n"));
|
|
984
|
+
|
|
955
985
|
return prevLayout;
|
|
956
986
|
}
|
|
987
|
+
|
|
988
|
+
// console.log(DEBUG.join("\n"));
|
|
957
989
|
return nextLayout;
|
|
958
990
|
}
|
|
959
991
|
|
|
@@ -1133,9 +1165,10 @@ function useWindowSplitterPanelGroupBehavior({
|
|
|
1133
1165
|
if (size != null && collapsible) {
|
|
1134
1166
|
const nextLayout = adjustLayoutByDelta({
|
|
1135
1167
|
delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
|
|
1136
|
-
layout,
|
|
1168
|
+
initialLayout: layout,
|
|
1137
1169
|
panelConstraints: panelDataArray.map(panelData => panelData.constraints),
|
|
1138
1170
|
pivotIndices: determinePivotIndices(groupId, handleId, panelGroupElement),
|
|
1171
|
+
prevLayout: layout,
|
|
1139
1172
|
trigger: "keyboard"
|
|
1140
1173
|
});
|
|
1141
1174
|
if (layout !== nextLayout) {
|
|
@@ -1677,9 +1710,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1677
1710
|
const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
|
|
1678
1711
|
const nextLayout = adjustLayoutByDelta({
|
|
1679
1712
|
delta,
|
|
1680
|
-
|
|
1713
|
+
initialLayout: prevLayout,
|
|
1681
1714
|
panelConstraints: panelConstraintsArray,
|
|
1682
1715
|
pivotIndices,
|
|
1716
|
+
prevLayout,
|
|
1683
1717
|
trigger: "imperative-api"
|
|
1684
1718
|
});
|
|
1685
1719
|
if (!compareLayouts(prevLayout, nextLayout)) {
|
|
@@ -1719,9 +1753,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1719
1753
|
const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
|
|
1720
1754
|
const nextLayout = adjustLayoutByDelta({
|
|
1721
1755
|
delta,
|
|
1722
|
-
|
|
1756
|
+
initialLayout: prevLayout,
|
|
1723
1757
|
panelConstraints: panelConstraintsArray,
|
|
1724
1758
|
pivotIndices,
|
|
1759
|
+
prevLayout,
|
|
1725
1760
|
trigger: "imperative-api"
|
|
1726
1761
|
});
|
|
1727
1762
|
if (!compareLayouts(prevLayout, nextLayout)) {
|
|
@@ -1903,9 +1938,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1903
1938
|
const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
|
|
1904
1939
|
const nextLayout = adjustLayoutByDelta({
|
|
1905
1940
|
delta,
|
|
1906
|
-
|
|
1941
|
+
initialLayout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
|
|
1907
1942
|
panelConstraints,
|
|
1908
1943
|
pivotIndices,
|
|
1944
|
+
prevLayout,
|
|
1909
1945
|
trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
|
|
1910
1946
|
});
|
|
1911
1947
|
const layoutChanged = !compareLayouts(prevLayout, nextLayout);
|
|
@@ -1961,9 +1997,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1961
1997
|
const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
|
|
1962
1998
|
const nextLayout = adjustLayoutByDelta({
|
|
1963
1999
|
delta,
|
|
1964
|
-
|
|
2000
|
+
initialLayout: prevLayout,
|
|
1965
2001
|
panelConstraints: panelConstraintsArray,
|
|
1966
2002
|
pivotIndices,
|
|
2003
|
+
prevLayout,
|
|
1967
2004
|
trigger: "imperative-api"
|
|
1968
2005
|
});
|
|
1969
2006
|
if (!compareLayouts(prevLayout, nextLayout)) {
|
|
@@ -355,7 +355,9 @@ const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMo
|
|
|
355
355
|
|
|
356
356
|
/** @param {HTMLElement} node */
|
|
357
357
|
function is_flex_item(node) {
|
|
358
|
-
|
|
358
|
+
var _get_parent;
|
|
359
|
+
// @ts-ignore
|
|
360
|
+
const display = getComputedStyle((_get_parent = get_parent(node)) !== null && _get_parent !== void 0 ? _get_parent : node).display;
|
|
359
361
|
return display === "flex" || display === "inline-flex";
|
|
360
362
|
}
|
|
361
363
|
|
|
@@ -405,6 +407,7 @@ function get_ancestors(node) {
|
|
|
405
407
|
const ancestors = [];
|
|
406
408
|
while (node) {
|
|
407
409
|
ancestors.push(node);
|
|
410
|
+
// @ts-ignore
|
|
408
411
|
node = get_parent(node);
|
|
409
412
|
}
|
|
410
413
|
return ancestors; // [ node, ... <body>, <html>, document ]
|
|
@@ -412,9 +415,13 @@ function get_ancestors(node) {
|
|
|
412
415
|
|
|
413
416
|
/** @param {HTMLElement} node */
|
|
414
417
|
function get_parent(node) {
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
+
const {
|
|
419
|
+
parentNode
|
|
420
|
+
} = node;
|
|
421
|
+
if (parentNode && parentNode instanceof ShadowRoot) {
|
|
422
|
+
return parentNode.host;
|
|
423
|
+
}
|
|
424
|
+
return parentNode;
|
|
418
425
|
}
|
|
419
426
|
|
|
420
427
|
const EXCEEDED_HORIZONTAL_MIN = 0b0001;
|
|
@@ -700,6 +707,20 @@ function fuzzyNumbersEqual(actual, expected, fractionDigits) {
|
|
|
700
707
|
return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
|
|
701
708
|
}
|
|
702
709
|
|
|
710
|
+
function fuzzyLayoutsEqual(actual, expected, fractionDigits) {
|
|
711
|
+
if (actual.length !== expected.length) {
|
|
712
|
+
return false;
|
|
713
|
+
}
|
|
714
|
+
for (let index = 0; index < actual.length; index++) {
|
|
715
|
+
const actualSize = actual[index];
|
|
716
|
+
const expectedSize = expected[index];
|
|
717
|
+
if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
|
|
718
|
+
return false;
|
|
719
|
+
}
|
|
720
|
+
}
|
|
721
|
+
return true;
|
|
722
|
+
}
|
|
723
|
+
|
|
703
724
|
// Panel size must be in percentages; pixel values should be pre-converted
|
|
704
725
|
function resizePanel({
|
|
705
726
|
panelConstraints: panelConstraintsArray,
|
|
@@ -735,26 +756,29 @@ function resizePanel({
|
|
|
735
756
|
// All units must be in percentages; pixel values should be pre-converted
|
|
736
757
|
function adjustLayoutByDelta({
|
|
737
758
|
delta,
|
|
738
|
-
|
|
759
|
+
initialLayout,
|
|
739
760
|
panelConstraints: panelConstraintsArray,
|
|
740
761
|
pivotIndices,
|
|
762
|
+
prevLayout,
|
|
741
763
|
trigger
|
|
742
764
|
}) {
|
|
743
765
|
if (fuzzyNumbersEqual(delta, 0)) {
|
|
744
|
-
return
|
|
766
|
+
return initialLayout;
|
|
745
767
|
}
|
|
746
|
-
const nextLayout = [...
|
|
768
|
+
const nextLayout = [...initialLayout];
|
|
747
769
|
const [firstPivotIndex, secondPivotIndex] = pivotIndices;
|
|
748
770
|
assert(firstPivotIndex != null, "Invalid first pivot index");
|
|
749
771
|
assert(secondPivotIndex != null, "Invalid second pivot index");
|
|
750
772
|
let deltaApplied = 0;
|
|
751
773
|
|
|
752
|
-
//const DEBUG = [];
|
|
753
|
-
//DEBUG.push(`adjustLayoutByDelta()
|
|
754
|
-
//DEBUG.push(`
|
|
755
|
-
//DEBUG.push(`
|
|
756
|
-
//DEBUG.push(`
|
|
757
|
-
//DEBUG.push("");
|
|
774
|
+
// const DEBUG = [];
|
|
775
|
+
// DEBUG.push(`adjustLayoutByDelta()`);
|
|
776
|
+
// DEBUG.push(` initialLayout: ${initialLayout.join(", ")}`);
|
|
777
|
+
// DEBUG.push(` prevLayout: ${prevLayout.join(", ")}`);
|
|
778
|
+
// DEBUG.push(` delta: ${delta}`);
|
|
779
|
+
// DEBUG.push(` pivotIndices: ${pivotIndices.join(", ")}`);
|
|
780
|
+
// DEBUG.push(` trigger: ${trigger}`);
|
|
781
|
+
// DEBUG.push("");
|
|
758
782
|
|
|
759
783
|
// A resizing panel affects the panels before or after it.
|
|
760
784
|
//
|
|
@@ -779,18 +803,18 @@ function adjustLayoutByDelta({
|
|
|
779
803
|
minSize = 0
|
|
780
804
|
} = panelConstraints;
|
|
781
805
|
|
|
782
|
-
//DEBUG.push(`edge case check 1: ${index}`);
|
|
783
|
-
//DEBUG.push(` -> collapsible? ${
|
|
806
|
+
// DEBUG.push(`edge case check 1: ${index}`);
|
|
807
|
+
// DEBUG.push(` -> collapsible? ${collapsible}`);
|
|
784
808
|
if (collapsible) {
|
|
785
|
-
const prevSize =
|
|
809
|
+
const prevSize = initialLayout[index];
|
|
786
810
|
assert(prevSize != null, `Previous layout not found for panel index ${index}`);
|
|
787
811
|
if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
|
|
788
812
|
const localDelta = minSize - prevSize;
|
|
789
|
-
//DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
813
|
+
// DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
790
814
|
|
|
791
815
|
if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
|
|
792
816
|
delta = delta < 0 ? 0 - localDelta : localDelta;
|
|
793
|
-
//DEBUG.push(` -> delta: ${delta}`);
|
|
817
|
+
// DEBUG.push(` -> delta: ${delta}`);
|
|
794
818
|
}
|
|
795
819
|
}
|
|
796
820
|
}
|
|
@@ -807,24 +831,24 @@ function adjustLayoutByDelta({
|
|
|
807
831
|
minSize = 0
|
|
808
832
|
} = panelConstraints;
|
|
809
833
|
|
|
810
|
-
//DEBUG.push(`edge case check 2: ${index}`);
|
|
811
|
-
//DEBUG.push(` -> collapsible? ${collapsible}`);
|
|
834
|
+
// DEBUG.push(`edge case check 2: ${index}`);
|
|
835
|
+
// DEBUG.push(` -> collapsible? ${collapsible}`);
|
|
812
836
|
if (collapsible) {
|
|
813
|
-
const prevSize =
|
|
837
|
+
const prevSize = initialLayout[index];
|
|
814
838
|
assert(prevSize != null, `Previous layout not found for panel index ${index}`);
|
|
815
839
|
if (fuzzyNumbersEqual(prevSize, minSize)) {
|
|
816
840
|
const localDelta = prevSize - collapsedSize;
|
|
817
|
-
//DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
841
|
+
// DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
818
842
|
|
|
819
843
|
if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
|
|
820
844
|
delta = delta < 0 ? 0 - localDelta : localDelta;
|
|
821
|
-
//DEBUG.push(` -> delta: ${delta}`);
|
|
845
|
+
// DEBUG.push(` -> delta: ${delta}`);
|
|
822
846
|
}
|
|
823
847
|
}
|
|
824
848
|
}
|
|
825
849
|
}
|
|
826
850
|
}
|
|
827
|
-
//DEBUG.push("");
|
|
851
|
+
// DEBUG.push("");
|
|
828
852
|
}
|
|
829
853
|
|
|
830
854
|
{
|
|
@@ -838,9 +862,9 @@ function adjustLayoutByDelta({
|
|
|
838
862
|
let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
|
|
839
863
|
let maxAvailableDelta = 0;
|
|
840
864
|
|
|
841
|
-
//DEBUG.push("pre calc...");
|
|
865
|
+
// DEBUG.push("pre calc...");
|
|
842
866
|
while (true) {
|
|
843
|
-
const prevSize =
|
|
867
|
+
const prevSize = initialLayout[index];
|
|
844
868
|
assert(prevSize != null, `Previous layout not found for panel index ${index}`);
|
|
845
869
|
const maxSafeSize = resizePanel({
|
|
846
870
|
panelConstraints: panelConstraintsArray,
|
|
@@ -848,7 +872,7 @@ function adjustLayoutByDelta({
|
|
|
848
872
|
size: 100
|
|
849
873
|
});
|
|
850
874
|
const delta = maxSafeSize - prevSize;
|
|
851
|
-
//DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
|
|
875
|
+
// DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
|
|
852
876
|
|
|
853
877
|
maxAvailableDelta += delta;
|
|
854
878
|
index += increment;
|
|
@@ -857,11 +881,11 @@ function adjustLayoutByDelta({
|
|
|
857
881
|
}
|
|
858
882
|
}
|
|
859
883
|
|
|
860
|
-
//DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
|
|
884
|
+
// DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
|
|
861
885
|
const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
|
|
862
886
|
delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
|
|
863
|
-
//DEBUG.push(` -> adjusted delta: ${delta}`);
|
|
864
|
-
//DEBUG.push("");
|
|
887
|
+
// DEBUG.push(` -> adjusted delta: ${delta}`);
|
|
888
|
+
// DEBUG.push("");
|
|
865
889
|
}
|
|
866
890
|
|
|
867
891
|
{
|
|
@@ -871,7 +895,7 @@ function adjustLayoutByDelta({
|
|
|
871
895
|
let index = pivotIndex;
|
|
872
896
|
while (index >= 0 && index < panelConstraintsArray.length) {
|
|
873
897
|
const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
|
|
874
|
-
const prevSize =
|
|
898
|
+
const prevSize = initialLayout[index];
|
|
875
899
|
assert(prevSize != null, `Previous layout not found for panel index ${index}`);
|
|
876
900
|
const unsafeSize = prevSize - deltaRemaining;
|
|
877
901
|
const safeSize = resizePanel({
|
|
@@ -895,20 +919,22 @@ function adjustLayoutByDelta({
|
|
|
895
919
|
}
|
|
896
920
|
}
|
|
897
921
|
}
|
|
898
|
-
//DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
|
|
899
|
-
//DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
900
|
-
//DEBUG.push("");
|
|
922
|
+
// DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
|
|
923
|
+
// DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
924
|
+
// DEBUG.push("");
|
|
901
925
|
|
|
902
926
|
// If we were unable to resize any of the panels panels, return the previous state.
|
|
903
927
|
// This will essentially bailout and ignore e.g. drags past a panel's boundaries
|
|
904
|
-
if (
|
|
905
|
-
//
|
|
928
|
+
if (fuzzyLayoutsEqual(prevLayout, nextLayout)) {
|
|
929
|
+
// DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
|
|
930
|
+
// console.log(DEBUG.join("\n"));
|
|
931
|
+
|
|
906
932
|
return prevLayout;
|
|
907
933
|
}
|
|
908
934
|
{
|
|
909
935
|
// Now distribute the applied delta to the panels in the other direction
|
|
910
936
|
const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
|
|
911
|
-
const prevSize =
|
|
937
|
+
const prevSize = initialLayout[pivotIndex];
|
|
912
938
|
assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
|
|
913
939
|
const unsafeSize = prevSize + deltaApplied;
|
|
914
940
|
const safeSize = resizePanel({
|
|
@@ -949,17 +975,23 @@ function adjustLayoutByDelta({
|
|
|
949
975
|
}
|
|
950
976
|
}
|
|
951
977
|
}
|
|
952
|
-
//DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
|
|
953
|
-
//DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
954
|
-
//DEBUG.push("");
|
|
978
|
+
// DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
|
|
979
|
+
// DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
980
|
+
// DEBUG.push("");
|
|
955
981
|
|
|
956
982
|
const totalSize = nextLayout.reduce((total, size) => size + total, 0);
|
|
957
|
-
//DEBUG.push(`total size: ${totalSize}`);
|
|
958
|
-
//console.log(DEBUG.join("\n"));
|
|
983
|
+
// DEBUG.push(`total size: ${totalSize}`);
|
|
959
984
|
|
|
985
|
+
// If our new layout doesn't add up to 100%, that means the requested delta can't be applied
|
|
986
|
+
// In that case, fall back to our most recent valid layout
|
|
960
987
|
if (!fuzzyNumbersEqual(totalSize, 100)) {
|
|
988
|
+
// DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
|
|
989
|
+
// console.log(DEBUG.join("\n"));
|
|
990
|
+
|
|
961
991
|
return prevLayout;
|
|
962
992
|
}
|
|
993
|
+
|
|
994
|
+
// console.log(DEBUG.join("\n"));
|
|
963
995
|
return nextLayout;
|
|
964
996
|
}
|
|
965
997
|
|
|
@@ -1149,9 +1181,10 @@ function useWindowSplitterPanelGroupBehavior({
|
|
|
1149
1181
|
if (size != null && collapsible) {
|
|
1150
1182
|
const nextLayout = adjustLayoutByDelta({
|
|
1151
1183
|
delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
|
|
1152
|
-
layout,
|
|
1184
|
+
initialLayout: layout,
|
|
1153
1185
|
panelConstraints: panelDataArray.map(panelData => panelData.constraints),
|
|
1154
1186
|
pivotIndices: determinePivotIndices(groupId, handleId, panelGroupElement),
|
|
1187
|
+
prevLayout: layout,
|
|
1155
1188
|
trigger: "keyboard"
|
|
1156
1189
|
});
|
|
1157
1190
|
if (layout !== nextLayout) {
|
|
@@ -1783,9 +1816,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1783
1816
|
const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
|
|
1784
1817
|
const nextLayout = adjustLayoutByDelta({
|
|
1785
1818
|
delta,
|
|
1786
|
-
|
|
1819
|
+
initialLayout: prevLayout,
|
|
1787
1820
|
panelConstraints: panelConstraintsArray,
|
|
1788
1821
|
pivotIndices,
|
|
1822
|
+
prevLayout,
|
|
1789
1823
|
trigger: "imperative-api"
|
|
1790
1824
|
});
|
|
1791
1825
|
if (!compareLayouts(prevLayout, nextLayout)) {
|
|
@@ -1825,9 +1859,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1825
1859
|
const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
|
|
1826
1860
|
const nextLayout = adjustLayoutByDelta({
|
|
1827
1861
|
delta,
|
|
1828
|
-
|
|
1862
|
+
initialLayout: prevLayout,
|
|
1829
1863
|
panelConstraints: panelConstraintsArray,
|
|
1830
1864
|
pivotIndices,
|
|
1865
|
+
prevLayout,
|
|
1831
1866
|
trigger: "imperative-api"
|
|
1832
1867
|
});
|
|
1833
1868
|
if (!compareLayouts(prevLayout, nextLayout)) {
|
|
@@ -2009,9 +2044,10 @@ function PanelGroupWithForwardedRef({
|
|
|
2009
2044
|
const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
|
|
2010
2045
|
const nextLayout = adjustLayoutByDelta({
|
|
2011
2046
|
delta,
|
|
2012
|
-
|
|
2047
|
+
initialLayout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
|
|
2013
2048
|
panelConstraints,
|
|
2014
2049
|
pivotIndices,
|
|
2050
|
+
prevLayout,
|
|
2015
2051
|
trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
|
|
2016
2052
|
});
|
|
2017
2053
|
const layoutChanged = !compareLayouts(prevLayout, nextLayout);
|
|
@@ -2067,9 +2103,10 @@ function PanelGroupWithForwardedRef({
|
|
|
2067
2103
|
const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
|
|
2068
2104
|
const nextLayout = adjustLayoutByDelta({
|
|
2069
2105
|
delta,
|
|
2070
|
-
|
|
2106
|
+
initialLayout: prevLayout,
|
|
2071
2107
|
panelConstraints: panelConstraintsArray,
|
|
2072
2108
|
pivotIndices,
|
|
2109
|
+
prevLayout,
|
|
2073
2110
|
trigger: "imperative-api"
|
|
2074
2111
|
});
|
|
2075
2112
|
if (!compareLayouts(prevLayout, nextLayout)) {
|