react-resizable-panels 0.0.63 → 1.0.0-rc.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/.eslintrc.cjs +1 -0
- package/CHANGELOG.md +5 -0
- package/dist/declarations/src/Panel.d.ts +19 -34
- package/dist/declarations/src/PanelGroup.d.ts +9 -13
- package/dist/declarations/src/PanelResizeHandle.d.ts +5 -7
- package/dist/declarations/src/index.d.ts +2 -2
- package/dist/declarations/src/types.d.ts +0 -7
- package/dist/declarations/src/utils/assert.d.ts +1 -0
- package/dist/declarations/src/vendor/react.d.ts +2 -2
- package/dist/react-resizable-panels.browser.cjs.js +253 -518
- package/dist/react-resizable-panels.browser.cjs.mjs +2 -1
- package/dist/react-resizable-panels.browser.development.cjs.js +279 -574
- package/dist/react-resizable-panels.browser.development.cjs.mjs +2 -1
- package/dist/react-resizable-panels.browser.development.esm.js +279 -575
- package/dist/react-resizable-panels.browser.esm.js +253 -519
- package/dist/react-resizable-panels.cjs.d.ts +88 -1
- package/dist/react-resizable-panels.cjs.d.ts.map +1 -1
- package/dist/react-resizable-panels.cjs.js +1481 -1983
- package/dist/react-resizable-panels.cjs.js.map +1 -1
- package/dist/react-resizable-panels.cjs.mjs +2 -1
- package/dist/react-resizable-panels.development.cjs.js +281 -576
- package/dist/react-resizable-panels.development.cjs.mjs +2 -1
- package/dist/react-resizable-panels.development.esm.js +281 -577
- package/dist/react-resizable-panels.development.node.cjs.js +267 -502
- package/dist/react-resizable-panels.development.node.cjs.mjs +2 -1
- package/dist/react-resizable-panels.development.node.esm.js +267 -503
- package/dist/react-resizable-panels.esm.js +1476 -1959
- package/dist/react-resizable-panels.esm.js.map +1 -1
- package/dist/react-resizable-panels.node.cjs.js +239 -444
- package/dist/react-resizable-panels.node.cjs.mjs +2 -1
- package/dist/react-resizable-panels.node.esm.js +239 -445
- package/package.json +1 -1
- package/src/Panel.test.tsx +74 -73
- package/src/Panel.ts +44 -68
- package/src/PanelGroup.test.tsx +43 -42
- package/src/PanelGroup.ts +221 -411
- package/src/PanelGroupContext.ts +2 -3
- package/src/PanelResizeHandle.test.tsx +68 -0
- package/src/PanelResizeHandle.ts +31 -22
- package/src/hooks/useWindowSplitterBehavior.ts +2 -1
- package/src/hooks/useWindowSplitterPanelGroupBehavior.ts +22 -33
- package/src/index.ts +4 -3
- package/src/types.ts +0 -9
- package/src/utils/adjustLayoutByDelta.test.ts +206 -336
- package/src/utils/adjustLayoutByDelta.ts +59 -51
- package/src/utils/assert.ts +1 -1
- package/src/utils/calculateAriaValues.test.ts +6 -11
- package/src/utils/calculateAriaValues.ts +7 -29
- package/src/utils/calculateDeltaPercentage.ts +8 -15
- package/src/utils/calculateDragOffsetPercentage.ts +11 -5
- package/src/utils/calculateUnsafeDefaultLayout.test.ts +4 -9
- package/src/utils/calculateUnsafeDefaultLayout.ts +13 -18
- package/src/utils/callPanelCallbacks.ts +11 -46
- package/src/utils/getResizeEventCursorPosition.ts +2 -0
- package/src/utils/resizePanel.test.ts +6 -52
- package/src/utils/resizePanel.ts +24 -46
- package/src/utils/test-utils.ts +6 -7
- package/src/utils/validatePanelConstraints.test.ts +12 -65
- package/src/utils/validatePanelConstraints.ts +26 -67
- package/src/utils/validatePanelGroupLayout.test.ts +27 -142
- package/src/utils/validatePanelGroupLayout.ts +17 -13
- package/src/vendor/react.ts +2 -0
- package/src/utils/computePercentagePanelConstraints.test.ts +0 -98
- package/src/utils/computePercentagePanelConstraints.ts +0 -56
- package/src/utils/convertPercentageToPixels.test.ts +0 -9
- package/src/utils/convertPercentageToPixels.ts +0 -6
- package/src/utils/convertPixelConstraintsToPercentages.test.ts +0 -47
- package/src/utils/convertPixelConstraintsToPercentages.ts +0 -72
- package/src/utils/convertPixelsToPercentage.test.ts +0 -9
- package/src/utils/convertPixelsToPercentage.ts +0 -6
- package/src/utils/getPercentageSizeFromMixedSizes.test.ts +0 -47
- package/src/utils/getPercentageSizeFromMixedSizes.ts +0 -15
- package/src/utils/shouldMonitorPixelBasedConstraints.test.ts +0 -23
- package/src/utils/shouldMonitorPixelBasedConstraints.ts +0 -13
|
@@ -1,2134 +1,1632 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
|
|
7
|
-
function _interopNamespace(e) {
|
|
8
|
-
if (e && e.__esModule) return e;
|
|
9
|
-
var n = Object.create(null);
|
|
10
|
-
if (e) {
|
|
11
|
-
Object.keys(e).forEach(function (k) {
|
|
12
|
-
if (k !== 'default') {
|
|
13
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
15
|
-
enumerable: true,
|
|
16
|
-
get: function () { return e[k]; }
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
n["default"] = e;
|
|
22
|
-
return Object.freeze(n);
|
|
1
|
+
var $2IMI0$react = require("react");
|
|
2
|
+
|
|
3
|
+
function $parcel$export(e, n, v, s) {
|
|
4
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
23
5
|
}
|
|
24
6
|
|
|
25
|
-
|
|
7
|
+
$parcel$export(module.exports, "assert", () => $3b727a2145ecd6f8$export$a7a9523472993e97);
|
|
8
|
+
$parcel$export(module.exports, "Panel", () => $45da0e827c614f1d$export$2ddb90ad54e5f587);
|
|
9
|
+
$parcel$export(module.exports, "PanelGroup", () => $cec4cafe75f3db78$export$1d05749f6f573bb);
|
|
10
|
+
$parcel$export(module.exports, "PanelResizeHandle", () => $3a26a712c9163348$export$8829ecf6b6b15484);
|
|
11
|
+
const $168036e9e9a9d9f8$export$4e09c449d6c407f7 = true;
|
|
26
12
|
|
|
27
|
-
const isBrowser = typeof window !== "undefined";
|
|
28
13
|
|
|
29
|
-
|
|
14
|
+
const $95f7f0116122f6f8$export$df77466336fe5355 = true;
|
|
30
15
|
|
|
31
|
-
// eslint-disable-next-line no-restricted-imports
|
|
32
16
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
useContext,
|
|
40
|
-
useEffect,
|
|
41
|
-
useImperativeHandle,
|
|
42
|
-
useLayoutEffect,
|
|
43
|
-
useMemo,
|
|
44
|
-
useRef,
|
|
45
|
-
useState
|
|
46
|
-
} = React__namespace;
|
|
17
|
+
// This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
|
|
18
|
+
// and limitations with ParcelJS parsing of the useId workaround (used below).
|
|
19
|
+
// For the time being, all react-resizable-panels must import "react" with the "* as React" syntax.
|
|
20
|
+
// To avoid mistakes, we use the ESLint "no-restricted-imports" to prevent "react" imports except in this file.
|
|
21
|
+
// See https://github.com/bvaughn/react-resizable-panels/issues/118
|
|
22
|
+
// eslint-disable-next-line no-restricted-imports
|
|
47
23
|
|
|
24
|
+
const { createElement: $6e687094f9ca8395$export$c8a8987d4410bf2d, createContext: $6e687094f9ca8395$export$fd42f52fd3ae1109, createRef: $6e687094f9ca8395$export$7d1e3a5e95ceca43, forwardRef: $6e687094f9ca8395$export$257a8862b851cb5b, useCallback: $6e687094f9ca8395$export$35808ee640e87ca7, useContext: $6e687094f9ca8395$export$fae74005e78b1a27, useEffect: $6e687094f9ca8395$export$6d9c69b0de29b591, useImperativeHandle: $6e687094f9ca8395$export$d5a552a76deda3c2, useLayoutEffect: $6e687094f9ca8395$export$e5c5a5f917a5871c, useMemo: $6e687094f9ca8395$export$1538c33de8887b59, useRef: $6e687094f9ca8395$export$b8f5890fc79d6aca, useState: $6e687094f9ca8395$export$60241385465d0a34 } = $2IMI0$react;
|
|
48
25
|
// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
26
|
+
const $6e687094f9ca8395$export$f680877a34711e37 = $2IMI0$react["useId".toString()];
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
const $a15c28001c46e071$export$7d8c6d083caec74a = (0, $6e687094f9ca8395$export$fd42f52fd3ae1109)(null);
|
|
30
|
+
$a15c28001c46e071$export$7d8c6d083caec74a.displayName = "PanelGroupContext";
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
const $129b5b9a317dcc10$var$useIsomorphicLayoutEffect = (0, $168036e9e9a9d9f8$export$4e09c449d6c407f7) ? (0, $6e687094f9ca8395$export$e5c5a5f917a5871c) : ()=>{};
|
|
36
|
+
var $129b5b9a317dcc10$export$2e2bcd8739ae039 = $129b5b9a317dcc10$var$useIsomorphicLayoutEffect;
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
const $b1693d8d8f570e9c$var$wrappedUseId = typeof (0, $6e687094f9ca8395$export$f680877a34711e37) === "function" ? (0, $6e687094f9ca8395$export$f680877a34711e37) : ()=>null;
|
|
41
|
+
let $b1693d8d8f570e9c$var$counter = 0;
|
|
42
|
+
function $b1693d8d8f570e9c$export$2e2bcd8739ae039(idFromParams = null) {
|
|
43
|
+
const idFromUseId = $b1693d8d8f570e9c$var$wrappedUseId();
|
|
44
|
+
const idRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)(idFromParams || idFromUseId || null);
|
|
45
|
+
if (idRef.current === null) idRef.current = "" + $b1693d8d8f570e9c$var$counter++;
|
|
46
|
+
return idFromParams !== null && idFromParams !== void 0 ? idFromParams : idRef.current;
|
|
65
47
|
}
|
|
66
48
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
} = context;
|
|
104
|
-
const panelId = useUniqueId(idFromProps);
|
|
105
|
-
const panelDataRef = useRef({
|
|
106
|
-
callbacks: {
|
|
107
|
-
onCollapse,
|
|
108
|
-
onExpand,
|
|
109
|
-
onResize
|
|
110
|
-
},
|
|
111
|
-
constraints: {
|
|
112
|
-
collapsedSizePercentage,
|
|
113
|
-
collapsedSizePixels,
|
|
114
|
-
collapsible,
|
|
115
|
-
defaultSizePercentage,
|
|
116
|
-
defaultSizePixels,
|
|
117
|
-
maxSizePercentage,
|
|
118
|
-
maxSizePixels,
|
|
119
|
-
minSizePercentage,
|
|
120
|
-
minSizePixels
|
|
121
|
-
},
|
|
122
|
-
id: panelId,
|
|
123
|
-
idIsFromProps: idFromProps !== undefined,
|
|
124
|
-
order
|
|
125
|
-
});
|
|
126
|
-
useRef({
|
|
127
|
-
didLogMissingDefaultSizeWarning: false
|
|
128
|
-
});
|
|
129
|
-
useIsomorphicLayoutEffect(() => {
|
|
130
|
-
const {
|
|
131
|
-
callbacks,
|
|
132
|
-
constraints
|
|
133
|
-
} = panelDataRef.current;
|
|
134
|
-
panelDataRef.current.id = panelId;
|
|
135
|
-
panelDataRef.current.idIsFromProps = idFromProps !== undefined;
|
|
136
|
-
panelDataRef.current.order = order;
|
|
137
|
-
callbacks.onCollapse = onCollapse;
|
|
138
|
-
callbacks.onExpand = onExpand;
|
|
139
|
-
callbacks.onResize = onResize;
|
|
140
|
-
constraints.collapsedSizePercentage = collapsedSizePercentage;
|
|
141
|
-
constraints.collapsedSizePixels = collapsedSizePixels;
|
|
142
|
-
constraints.collapsible = collapsible;
|
|
143
|
-
constraints.defaultSizePercentage = defaultSizePercentage;
|
|
144
|
-
constraints.defaultSizePixels = defaultSizePixels;
|
|
145
|
-
constraints.maxSizePercentage = maxSizePercentage;
|
|
146
|
-
constraints.maxSizePixels = maxSizePixels;
|
|
147
|
-
constraints.minSizePercentage = minSizePercentage;
|
|
148
|
-
constraints.minSizePixels = minSizePixels;
|
|
149
|
-
});
|
|
150
|
-
useIsomorphicLayoutEffect(() => {
|
|
151
|
-
const panelData = panelDataRef.current;
|
|
152
|
-
registerPanel(panelData);
|
|
153
|
-
return () => {
|
|
154
|
-
unregisterPanel(panelData);
|
|
155
|
-
};
|
|
156
|
-
}, [order, panelId, registerPanel, unregisterPanel]);
|
|
157
|
-
useImperativeHandle(forwardedRef, () => ({
|
|
158
|
-
collapse: () => {
|
|
159
|
-
collapsePanel(panelDataRef.current);
|
|
160
|
-
},
|
|
161
|
-
expand: () => {
|
|
162
|
-
expandPanel(panelDataRef.current);
|
|
163
|
-
},
|
|
164
|
-
getId() {
|
|
165
|
-
return panelId;
|
|
166
|
-
},
|
|
167
|
-
getSize() {
|
|
168
|
-
return getPanelSize(panelDataRef.current);
|
|
169
|
-
},
|
|
170
|
-
isCollapsed() {
|
|
171
|
-
return isPanelCollapsed(panelDataRef.current);
|
|
172
|
-
},
|
|
173
|
-
isExpanded() {
|
|
174
|
-
return !isPanelCollapsed(panelDataRef.current);
|
|
175
|
-
},
|
|
176
|
-
resize: mixedSizes => {
|
|
177
|
-
resizePanel(panelDataRef.current, mixedSizes);
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
function $45da0e827c614f1d$export$35d79d63a6984ee1({ children: children, className: classNameFromProps = "", collapsedSize: collapsedSize, collapsible: collapsible, defaultSize: defaultSize, forwardedRef: forwardedRef, id: idFromProps, maxSize: maxSize, minSize: minSize, onCollapse: onCollapse, onExpand: onExpand, onResize: onResize, order: order, style: styleFromProps, tagName: Type = "div", ...rest }) {
|
|
52
|
+
const context = (0, $6e687094f9ca8395$export$fae74005e78b1a27)((0, $a15c28001c46e071$export$7d8c6d083caec74a));
|
|
53
|
+
if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
|
|
54
|
+
const { collapsePanel: collapsePanel, expandPanel: expandPanel, getPanelSize: getPanelSize, getPanelStyle: getPanelStyle, groupId: groupId, isPanelCollapsed: isPanelCollapsed, registerPanel: registerPanel, resizePanel: resizePanel, unregisterPanel: unregisterPanel } = context;
|
|
55
|
+
const panelId = (0, $b1693d8d8f570e9c$export$2e2bcd8739ae039)(idFromProps);
|
|
56
|
+
const panelDataRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
|
|
57
|
+
callbacks: {
|
|
58
|
+
onCollapse: onCollapse,
|
|
59
|
+
onExpand: onExpand,
|
|
60
|
+
onResize: onResize
|
|
61
|
+
},
|
|
62
|
+
constraints: {
|
|
63
|
+
collapsedSize: collapsedSize,
|
|
64
|
+
collapsible: collapsible,
|
|
65
|
+
defaultSize: defaultSize,
|
|
66
|
+
maxSize: maxSize,
|
|
67
|
+
minSize: minSize
|
|
68
|
+
},
|
|
69
|
+
id: panelId,
|
|
70
|
+
idIsFromProps: idFromProps !== undefined,
|
|
71
|
+
order: order
|
|
72
|
+
});
|
|
73
|
+
const devWarningsRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
|
|
74
|
+
didLogMissingDefaultSizeWarning: false
|
|
75
|
+
});
|
|
76
|
+
// Normally we wouldn't log a warning during render,
|
|
77
|
+
// but effects don't run on the server, so we can't do it there
|
|
78
|
+
if (0, $95f7f0116122f6f8$export$df77466336fe5355) {
|
|
79
|
+
if (!devWarningsRef.current.didLogMissingDefaultSizeWarning) {
|
|
80
|
+
if (!(0, $168036e9e9a9d9f8$export$4e09c449d6c407f7) && defaultSize == null) {
|
|
81
|
+
devWarningsRef.current.didLogMissingDefaultSizeWarning = true;
|
|
82
|
+
console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
178
85
|
}
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
86
|
+
(0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
|
|
87
|
+
const { callbacks: callbacks, constraints: constraints } = panelDataRef.current;
|
|
88
|
+
panelDataRef.current.id = panelId;
|
|
89
|
+
panelDataRef.current.idIsFromProps = idFromProps !== undefined;
|
|
90
|
+
panelDataRef.current.order = order;
|
|
91
|
+
callbacks.onCollapse = onCollapse;
|
|
92
|
+
callbacks.onExpand = onExpand;
|
|
93
|
+
callbacks.onResize = onResize;
|
|
94
|
+
constraints.collapsedSize = collapsedSize;
|
|
95
|
+
constraints.collapsible = collapsible;
|
|
96
|
+
constraints.defaultSize = defaultSize;
|
|
97
|
+
constraints.maxSize = maxSize;
|
|
98
|
+
constraints.minSize = minSize;
|
|
99
|
+
});
|
|
100
|
+
(0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
|
|
101
|
+
const panelData = panelDataRef.current;
|
|
102
|
+
registerPanel(panelData);
|
|
103
|
+
return ()=>{
|
|
104
|
+
unregisterPanel(panelData);
|
|
105
|
+
};
|
|
106
|
+
}, [
|
|
107
|
+
order,
|
|
108
|
+
panelId,
|
|
109
|
+
registerPanel,
|
|
110
|
+
unregisterPanel
|
|
111
|
+
]);
|
|
112
|
+
(0, $6e687094f9ca8395$export$d5a552a76deda3c2)(forwardedRef, ()=>({
|
|
113
|
+
collapse: ()=>{
|
|
114
|
+
collapsePanel(panelDataRef.current);
|
|
115
|
+
},
|
|
116
|
+
expand: ()=>{
|
|
117
|
+
expandPanel(panelDataRef.current);
|
|
118
|
+
},
|
|
119
|
+
getId () {
|
|
120
|
+
return panelId;
|
|
121
|
+
},
|
|
122
|
+
getSize () {
|
|
123
|
+
return getPanelSize(panelDataRef.current);
|
|
124
|
+
},
|
|
125
|
+
isCollapsed () {
|
|
126
|
+
return isPanelCollapsed(panelDataRef.current);
|
|
127
|
+
},
|
|
128
|
+
isExpanded () {
|
|
129
|
+
return !isPanelCollapsed(panelDataRef.current);
|
|
130
|
+
},
|
|
131
|
+
resize: (size)=>{
|
|
132
|
+
resizePanel(panelDataRef.current, size);
|
|
133
|
+
}
|
|
134
|
+
}), [
|
|
135
|
+
collapsePanel,
|
|
136
|
+
expandPanel,
|
|
137
|
+
getPanelSize,
|
|
138
|
+
isPanelCollapsed,
|
|
139
|
+
panelId,
|
|
140
|
+
resizePanel
|
|
141
|
+
]);
|
|
142
|
+
const style = getPanelStyle(panelDataRef.current);
|
|
143
|
+
return (0, $6e687094f9ca8395$export$c8a8987d4410bf2d)(Type, {
|
|
144
|
+
...rest,
|
|
145
|
+
children: children,
|
|
146
|
+
className: classNameFromProps,
|
|
147
|
+
style: {
|
|
148
|
+
...style,
|
|
149
|
+
...styleFromProps
|
|
150
|
+
},
|
|
151
|
+
// CSS selectors
|
|
152
|
+
"data-panel": "",
|
|
153
|
+
"data-panel-id": panelId,
|
|
154
|
+
"data-panel-group-id": groupId,
|
|
155
|
+
// e2e test attributes
|
|
156
|
+
"data-panel-collapsible": (0, $95f7f0116122f6f8$export$df77466336fe5355) ? collapsible || undefined : undefined,
|
|
157
|
+
"data-panel-size": (0, $95f7f0116122f6f8$export$df77466336fe5355) ? parseFloat("" + style.flexGrow).toFixed(1) : undefined
|
|
158
|
+
});
|
|
207
159
|
}
|
|
160
|
+
const $45da0e827c614f1d$export$2ddb90ad54e5f587 = (0, $6e687094f9ca8395$export$257a8862b851cb5b)((props, ref)=>(0, $6e687094f9ca8395$export$c8a8987d4410bf2d)($45da0e827c614f1d$export$35d79d63a6984ee1, {
|
|
161
|
+
...props,
|
|
162
|
+
forwardedRef: ref
|
|
163
|
+
}));
|
|
164
|
+
$45da0e827c614f1d$export$35d79d63a6984ee1.displayName = "Panel";
|
|
165
|
+
$45da0e827c614f1d$export$2ddb90ad54e5f587.displayName = "forwardRef(Panel)";
|
|
208
166
|
|
|
209
|
-
function convertPixelConstraintsToPercentages(panelConstraints, groupSizePixels) {
|
|
210
|
-
let {
|
|
211
|
-
collapsedSizePercentage = 0,
|
|
212
|
-
collapsedSizePixels,
|
|
213
|
-
defaultSizePercentage,
|
|
214
|
-
defaultSizePixels,
|
|
215
|
-
maxSizePercentage = 100,
|
|
216
|
-
maxSizePixels,
|
|
217
|
-
minSizePercentage = 0,
|
|
218
|
-
minSizePixels
|
|
219
|
-
} = panelConstraints;
|
|
220
|
-
const hasPixelConstraints = collapsedSizePixels != null || defaultSizePixels != null || minSizePixels != null || maxSizePixels != null;
|
|
221
|
-
if (hasPixelConstraints && groupSizePixels <= 0) {
|
|
222
|
-
console.warn(`WARNING: Invalid group size: ${groupSizePixels}px`);
|
|
223
|
-
return {
|
|
224
|
-
collapsedSizePercentage: 0,
|
|
225
|
-
defaultSizePercentage,
|
|
226
|
-
maxSizePercentage: 0,
|
|
227
|
-
minSizePercentage: 0
|
|
228
|
-
};
|
|
229
|
-
}
|
|
230
|
-
if (collapsedSizePixels != null) {
|
|
231
|
-
collapsedSizePercentage = convertPixelsToPercentage(collapsedSizePixels, groupSizePixels);
|
|
232
|
-
}
|
|
233
|
-
if (defaultSizePixels != null) {
|
|
234
|
-
defaultSizePercentage = convertPixelsToPercentage(defaultSizePixels, groupSizePixels);
|
|
235
|
-
}
|
|
236
|
-
if (minSizePixels != null) {
|
|
237
|
-
minSizePercentage = convertPixelsToPercentage(minSizePixels, groupSizePixels);
|
|
238
|
-
}
|
|
239
|
-
if (maxSizePixels != null) {
|
|
240
|
-
maxSizePercentage = convertPixelsToPercentage(maxSizePixels, groupSizePixels);
|
|
241
|
-
}
|
|
242
|
-
return {
|
|
243
|
-
collapsedSizePercentage,
|
|
244
|
-
defaultSizePercentage,
|
|
245
|
-
maxSizePercentage,
|
|
246
|
-
minSizePercentage
|
|
247
|
-
};
|
|
248
|
-
}
|
|
249
167
|
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
const {
|
|
260
|
-
collapsedSizePercentage,
|
|
261
|
-
maxSizePercentage,
|
|
262
|
-
minSizePercentage
|
|
263
|
-
} = convertPixelConstraintsToPercentages(panelConstraintsArray[index], groupSizePixels);
|
|
264
|
-
totalMaxConstraints += maxSizePercentage;
|
|
265
|
-
totalMinConstraints += collapsible ? collapsedSizePercentage : minSizePercentage;
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
function $3b727a2145ecd6f8$export$a7a9523472993e97(expectedCondition, message = "Assertion failed!") {
|
|
174
|
+
if (!expectedCondition) {
|
|
175
|
+
console.error(message);
|
|
176
|
+
throw Error(message);
|
|
266
177
|
}
|
|
267
|
-
}
|
|
268
|
-
const {
|
|
269
|
-
collapsedSizePercentage,
|
|
270
|
-
defaultSizePercentage,
|
|
271
|
-
maxSizePercentage,
|
|
272
|
-
minSizePercentage
|
|
273
|
-
} = convertPixelConstraintsToPercentages(panelConstraintsArray[panelIndex], groupSizePixels);
|
|
274
|
-
return {
|
|
275
|
-
collapsedSizePercentage,
|
|
276
|
-
defaultSizePercentage,
|
|
277
|
-
maxSizePercentage: panelConstraintsArray.length > 1 ? Math.min(maxSizePercentage, 100 - totalMinConstraints) : maxSizePercentage,
|
|
278
|
-
minSizePercentage: panelConstraintsArray.length > 1 ? Math.max(minSizePercentage, 100 - totalMaxConstraints) : minSizePercentage
|
|
279
|
-
};
|
|
280
178
|
}
|
|
281
179
|
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
return delta > 0 ? 1 : -1;
|
|
292
|
-
}
|
|
180
|
+
|
|
181
|
+
const $9abd79656a89cd3a$export$d6d3992f3becc879 = 10;
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
function $b4416cfcd0b81788$export$1d75b1119dff900(actual, expected, fractionDigits = (0, $9abd79656a89cd3a$export$d6d3992f3becc879)) {
|
|
185
|
+
actual = parseFloat(actual.toFixed(fractionDigits));
|
|
186
|
+
expected = parseFloat(expected.toFixed(fractionDigits));
|
|
187
|
+
const delta = actual - expected;
|
|
188
|
+
if (delta === 0) return 0;
|
|
189
|
+
else return delta > 0 ? 1 : -1;
|
|
293
190
|
}
|
|
294
191
|
|
|
295
|
-
|
|
296
|
-
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
function $599218a3c5f0640f$export$db9c8bd2fae72e82(actual, expected, fractionDigits) {
|
|
195
|
+
return (0, $b4416cfcd0b81788$export$1d75b1119dff900)(actual, expected, fractionDigits) === 0;
|
|
297
196
|
}
|
|
298
197
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
return 0;
|
|
315
|
-
}
|
|
316
|
-
let {
|
|
317
|
-
collapsible
|
|
318
|
-
} = panelConstraints[panelIndex];
|
|
319
|
-
const {
|
|
320
|
-
collapsedSizePercentage,
|
|
321
|
-
maxSizePercentage,
|
|
322
|
-
minSizePercentage
|
|
323
|
-
} = computePercentagePanelConstraints(panelConstraints, panelIndex, groupSizePixels);
|
|
324
|
-
if (minSizePercentage != null) {
|
|
325
|
-
if (fuzzyCompareNumbers(size, minSizePercentage) < 0) {
|
|
326
|
-
if (collapsible) {
|
|
327
|
-
// Collapsible panels should snap closed or open only once they cross the halfway point between collapsed and min size.
|
|
328
|
-
const halfwayPoint = (collapsedSizePercentage + minSizePercentage) / 2;
|
|
329
|
-
if (fuzzyCompareNumbers(size, halfwayPoint) < 0) {
|
|
330
|
-
size = collapsedSizePercentage;
|
|
331
|
-
} else {
|
|
332
|
-
size = minSizePercentage;
|
|
333
|
-
}
|
|
334
|
-
} else {
|
|
335
|
-
size = minSizePercentage;
|
|
336
|
-
}
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
function $34bbe1da7b6ad885$export$2f98edcf4006376f({ panelConstraints: panelConstraintsArray, panelIndex: panelIndex, size: size }) {
|
|
203
|
+
const panelConstraints = panelConstraintsArray[panelIndex];
|
|
204
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelConstraints != null);
|
|
205
|
+
let { collapsedSize: collapsedSize = 0, collapsible: collapsible, maxSize: maxSize = 100, minSize: minSize = 0 } = panelConstraints;
|
|
206
|
+
if ((0, $b4416cfcd0b81788$export$1d75b1119dff900)(size, minSize) < 0) {
|
|
207
|
+
if (collapsible) {
|
|
208
|
+
// Collapsible panels should snap closed or open only once they cross the halfway point between collapsed and min size.
|
|
209
|
+
const halfwayPoint = (collapsedSize + minSize) / 2;
|
|
210
|
+
if ((0, $b4416cfcd0b81788$export$1d75b1119dff900)(size, halfwayPoint) < 0) size = collapsedSize;
|
|
211
|
+
else size = minSize;
|
|
212
|
+
} else size = minSize;
|
|
337
213
|
}
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
}
|
|
342
|
-
return size;
|
|
214
|
+
size = Math.min(maxSize, size);
|
|
215
|
+
size = parseFloat(size.toFixed((0, $9abd79656a89cd3a$export$d6d3992f3becc879)));
|
|
216
|
+
return size;
|
|
343
217
|
}
|
|
344
218
|
|
|
345
|
-
|
|
346
|
-
function
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
return prevLayout;
|
|
356
|
-
}
|
|
357
|
-
const nextLayout = [...prevLayout];
|
|
358
|
-
let deltaApplied = 0;
|
|
359
|
-
|
|
360
|
-
//const DEBUG = [];
|
|
361
|
-
//DEBUG.push(`adjustLayoutByDelta() ${prevLayout.join(", ")}`);
|
|
362
|
-
//DEBUG.push(` delta: ${delta}`);
|
|
363
|
-
//DEBUG.push(` pivotIndices: ${pivotIndices.join(", ")}`);
|
|
364
|
-
//DEBUG.push(` trigger: ${trigger}`);
|
|
365
|
-
//DEBUG.push("");
|
|
366
|
-
|
|
367
|
-
// A resizing panel affects the panels before or after it.
|
|
368
|
-
//
|
|
369
|
-
// A negative delta means the panel(s) immediately after the resize handle should grow/expand by decreasing its offset.
|
|
370
|
-
// Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.
|
|
371
|
-
//
|
|
372
|
-
// A positive delta means the panel(s) immediately before the resize handle should "expand".
|
|
373
|
-
// This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resize handle.
|
|
374
|
-
|
|
375
|
-
{
|
|
219
|
+
|
|
220
|
+
function $0c110d593c066642$export$7fead5cc734d205b({ delta: delta, layout: prevLayout, panelConstraints: panelConstraintsArray, pivotIndices: pivotIndices, trigger: trigger }) {
|
|
221
|
+
if ((0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(delta, 0)) return prevLayout;
|
|
222
|
+
const nextLayout = [
|
|
223
|
+
...prevLayout
|
|
224
|
+
];
|
|
225
|
+
const [firstPivotIndex, secondPivotIndex] = pivotIndices;
|
|
226
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(firstPivotIndex != null);
|
|
227
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(secondPivotIndex != null);
|
|
228
|
+
let deltaApplied = 0;
|
|
376
229
|
// If this is a resize triggered by a keyboard event, our logic for expanding/collapsing is different.
|
|
377
230
|
// We no longer check the halfway threshold because this may prevent the panel from expanding at all.
|
|
378
231
|
if (trigger === "keyboard") {
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
//DEBUG.push(` -> delta: ${delta}`);
|
|
232
|
+
{
|
|
233
|
+
// Check if we should expand a collapsed panel
|
|
234
|
+
const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
|
|
235
|
+
const panelConstraints = panelConstraintsArray[index];
|
|
236
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelConstraints);
|
|
237
|
+
//DEBUG.push(`edge case check 1: ${index}`);
|
|
238
|
+
//DEBUG.push(` -> collapsible? ${constraints.collapsible}`);
|
|
239
|
+
if (panelConstraints.collapsible) {
|
|
240
|
+
const prevSize = prevLayout[index];
|
|
241
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(prevSize != null);
|
|
242
|
+
const panelConstraints = panelConstraintsArray[index];
|
|
243
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelConstraints);
|
|
244
|
+
const { collapsedSize: collapsedSize = 0, minSize: minSize = 0 } = panelConstraints;
|
|
245
|
+
if ((0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(prevSize, collapsedSize)) {
|
|
246
|
+
const localDelta = minSize - prevSize;
|
|
247
|
+
//DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
248
|
+
if ((0, $b4416cfcd0b81788$export$1d75b1119dff900)(localDelta, Math.abs(delta)) > 0) delta = delta < 0 ? 0 - localDelta : localDelta;
|
|
249
|
+
}
|
|
398
250
|
}
|
|
399
|
-
}
|
|
400
251
|
}
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
delta = delta < 0 ? 0 - localDelta : localDelta;
|
|
421
|
-
//DEBUG.push(` -> delta: ${delta}`);
|
|
252
|
+
{
|
|
253
|
+
// Check if we should collapse a panel at its minimum size
|
|
254
|
+
const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
|
|
255
|
+
const panelConstraints = panelConstraintsArray[index];
|
|
256
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelConstraints);
|
|
257
|
+
const { collapsible: collapsible } = panelConstraints;
|
|
258
|
+
//DEBUG.push(`edge case check 2: ${index}`);
|
|
259
|
+
//DEBUG.push(` -> collapsible? ${collapsible}`);
|
|
260
|
+
if (collapsible) {
|
|
261
|
+
const prevSize = prevLayout[index];
|
|
262
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(prevSize != null);
|
|
263
|
+
const panelConstraints = panelConstraintsArray[index];
|
|
264
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelConstraints);
|
|
265
|
+
const { collapsedSize: collapsedSize = 0, minSize: minSize = 0 } = panelConstraints;
|
|
266
|
+
if ((0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(prevSize, minSize)) {
|
|
267
|
+
const localDelta = prevSize - collapsedSize;
|
|
268
|
+
//DEBUG.push(` -> expand delta: ${localDelta}`);
|
|
269
|
+
if ((0, $b4416cfcd0b81788$export$1d75b1119dff900)(localDelta, Math.abs(delta)) > 0) delta = delta < 0 ? 0 - localDelta : localDelta;
|
|
270
|
+
}
|
|
422
271
|
}
|
|
423
|
-
}
|
|
424
272
|
}
|
|
425
|
-
}
|
|
426
273
|
}
|
|
274
|
+
{
|
|
275
|
+
// Pre-calculate max available delta in the opposite direction of our pivot.
|
|
276
|
+
// This will be the maximum amount we're allowed to expand/contract the panels in the primary direction.
|
|
277
|
+
// If this amount is less than the requested delta, adjust the requested delta.
|
|
278
|
+
// If this amount is greater than the requested delta, that's useful information too–
|
|
279
|
+
// as an expanding panel might change from collapsed to min size.
|
|
280
|
+
const increment = delta < 0 ? 1 : -1;
|
|
281
|
+
let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
|
|
282
|
+
let maxAvailableDelta = 0;
|
|
283
|
+
//DEBUG.push("pre calc...");
|
|
284
|
+
while(true){
|
|
285
|
+
const prevSize = prevLayout[index];
|
|
286
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(prevSize != null);
|
|
287
|
+
const maxSafeSize = (0, $34bbe1da7b6ad885$export$2f98edcf4006376f)({
|
|
288
|
+
panelConstraints: panelConstraintsArray,
|
|
289
|
+
panelIndex: index,
|
|
290
|
+
size: 100
|
|
291
|
+
});
|
|
292
|
+
const delta = maxSafeSize - prevSize;
|
|
293
|
+
//DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
|
|
294
|
+
maxAvailableDelta += delta;
|
|
295
|
+
index += increment;
|
|
296
|
+
if (index < 0 || index >= panelConstraintsArray.length) break;
|
|
297
|
+
}
|
|
298
|
+
//DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
|
|
299
|
+
const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
|
|
300
|
+
delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
|
|
301
|
+
//DEBUG.push(` -> adjusted delta: ${delta}`);
|
|
427
302
|
//DEBUG.push("");
|
|
428
|
-
}
|
|
429
|
-
|
|
430
|
-
{
|
|
431
|
-
// Pre-calculate max available delta in the opposite direction of our pivot.
|
|
432
|
-
// This will be the maximum amount we're allowed to expand/contract the panels in the primary direction.
|
|
433
|
-
// If this amount is less than the requested delta, adjust the requested delta.
|
|
434
|
-
// If this amount is greater than the requested delta, that's useful information too–
|
|
435
|
-
// as an expanding panel might change from collapsed to min size.
|
|
436
|
-
|
|
437
|
-
const increment = delta < 0 ? 1 : -1;
|
|
438
|
-
let index = delta < 0 ? pivotIndices[1] : pivotIndices[0];
|
|
439
|
-
let maxAvailableDelta = 0;
|
|
440
|
-
|
|
441
|
-
//DEBUG.push("pre calc...");
|
|
442
|
-
while (true) {
|
|
443
|
-
const prevSize = prevLayout[index];
|
|
444
|
-
const maxSafeSize = resizePanel({
|
|
445
|
-
groupSizePixels,
|
|
446
|
-
panelConstraints,
|
|
447
|
-
panelIndex: index,
|
|
448
|
-
size: 100
|
|
449
|
-
});
|
|
450
|
-
const delta = maxSafeSize - prevSize;
|
|
451
|
-
//DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
|
|
452
|
-
|
|
453
|
-
maxAvailableDelta += delta;
|
|
454
|
-
index += increment;
|
|
455
|
-
if (index < 0 || index >= panelConstraints.length) {
|
|
456
|
-
break;
|
|
457
|
-
}
|
|
458
303
|
}
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
304
|
+
{
|
|
305
|
+
// Delta added to a panel needs to be subtracted from other panels (within the constraints that those panels allow).
|
|
306
|
+
const pivotIndex = delta < 0 ? firstPivotIndex : secondPivotIndex;
|
|
307
|
+
let index = pivotIndex;
|
|
308
|
+
while(index >= 0 && index < panelConstraintsArray.length){
|
|
309
|
+
const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
|
|
310
|
+
const prevSize = prevLayout[index];
|
|
311
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(prevSize != null);
|
|
312
|
+
const unsafeSize = prevSize - deltaRemaining;
|
|
313
|
+
const safeSize = (0, $34bbe1da7b6ad885$export$2f98edcf4006376f)({
|
|
314
|
+
panelConstraints: panelConstraintsArray,
|
|
315
|
+
panelIndex: index,
|
|
316
|
+
size: unsafeSize
|
|
317
|
+
});
|
|
318
|
+
if (!(0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(prevSize, safeSize)) {
|
|
319
|
+
deltaApplied += prevSize - safeSize;
|
|
320
|
+
nextLayout[index] = safeSize;
|
|
321
|
+
if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
|
|
322
|
+
numeric: true
|
|
323
|
+
}) >= 0) break;
|
|
324
|
+
}
|
|
325
|
+
if (delta < 0) index--;
|
|
326
|
+
else index++;
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
//DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
|
|
330
|
+
//DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
464
331
|
//DEBUG.push("");
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
332
|
+
// If we were unable to resize any of the panels panels, return the previous state.
|
|
333
|
+
// This will essentially bailout and ignore e.g. drags past a panel's boundaries
|
|
334
|
+
if ((0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(deltaApplied, 0)) //console.log(DEBUG.join("\n"));
|
|
335
|
+
return prevLayout;
|
|
336
|
+
{
|
|
337
|
+
// Now distribute the applied delta to the panels in the other direction
|
|
338
|
+
const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
|
|
339
|
+
const prevSize = prevLayout[pivotIndex];
|
|
340
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(prevSize != null);
|
|
341
|
+
const unsafeSize = prevSize + deltaApplied;
|
|
342
|
+
const safeSize = (0, $34bbe1da7b6ad885$export$2f98edcf4006376f)({
|
|
343
|
+
panelConstraints: panelConstraintsArray,
|
|
344
|
+
panelIndex: pivotIndex,
|
|
345
|
+
size: unsafeSize
|
|
346
|
+
});
|
|
347
|
+
// Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
|
|
348
|
+
nextLayout[pivotIndex] = safeSize;
|
|
349
|
+
// Edge case where expanding or contracting one panel caused another one to change collapsed state
|
|
350
|
+
if (!(0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(safeSize, unsafeSize)) {
|
|
351
|
+
let deltaRemaining = unsafeSize - safeSize;
|
|
352
|
+
const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
|
|
353
|
+
let index = pivotIndex;
|
|
354
|
+
while(index >= 0 && index < panelConstraintsArray.length){
|
|
355
|
+
const prevSize = nextLayout[index];
|
|
356
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(prevSize != null);
|
|
357
|
+
const unsafeSize = prevSize + deltaRemaining;
|
|
358
|
+
const safeSize = (0, $34bbe1da7b6ad885$export$2f98edcf4006376f)({
|
|
359
|
+
panelConstraints: panelConstraintsArray,
|
|
360
|
+
panelIndex: index,
|
|
361
|
+
size: unsafeSize
|
|
362
|
+
});
|
|
363
|
+
if (!(0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(prevSize, safeSize)) {
|
|
364
|
+
deltaRemaining -= safeSize - prevSize;
|
|
365
|
+
nextLayout[index] = safeSize;
|
|
366
|
+
}
|
|
367
|
+
if ((0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(deltaRemaining, 0)) break;
|
|
368
|
+
if (delta > 0) index--;
|
|
369
|
+
else index++;
|
|
370
|
+
}
|
|
489
371
|
}
|
|
490
|
-
}
|
|
491
|
-
if (delta < 0) {
|
|
492
|
-
index--;
|
|
493
|
-
} else {
|
|
494
|
-
index++;
|
|
495
|
-
}
|
|
496
372
|
}
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
// If we were unable to resize any of the panels panels, return the previous state.
|
|
503
|
-
// This will essentially bailout and ignore e.g. drags past a panel's boundaries
|
|
504
|
-
if (fuzzyNumbersEqual(deltaApplied, 0)) {
|
|
373
|
+
//DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
|
|
374
|
+
//DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
375
|
+
//DEBUG.push("");
|
|
376
|
+
const totalSize = nextLayout.reduce((total, size)=>size + total, 0);
|
|
377
|
+
//DEBUG.push(`total size: ${totalSize}`);
|
|
505
378
|
//console.log(DEBUG.join("\n"));
|
|
506
|
-
return prevLayout;
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
// Now distribute the applied delta to the panels in the other direction
|
|
510
|
-
const pivotIndex = delta < 0 ? pivotIndices[1] : pivotIndices[0];
|
|
511
|
-
const unsafeSize = prevLayout[pivotIndex] + deltaApplied;
|
|
512
|
-
const safeSize = resizePanel({
|
|
513
|
-
groupSizePixels,
|
|
514
|
-
panelConstraints,
|
|
515
|
-
panelIndex: pivotIndex,
|
|
516
|
-
size: unsafeSize
|
|
517
|
-
});
|
|
379
|
+
if (!(0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(totalSize, 100)) return prevLayout;
|
|
380
|
+
return nextLayout;
|
|
381
|
+
}
|
|
518
382
|
|
|
519
|
-
// Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
|
|
520
|
-
nextLayout[pivotIndex] = safeSize;
|
|
521
383
|
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
nextLayout[index] = safeSize;
|
|
539
|
-
}
|
|
540
|
-
if (fuzzyNumbersEqual(deltaRemaining, 0)) {
|
|
541
|
-
break;
|
|
542
|
-
}
|
|
543
|
-
if (delta > 0) {
|
|
544
|
-
index--;
|
|
384
|
+
|
|
385
|
+
|
|
386
|
+
function $ec200dcdf140f2a9$export$b8372a468ba36f7d({ layout: layout, panelsArray: panelsArray, pivotIndices: pivotIndices }) {
|
|
387
|
+
let currentMinSize = 0;
|
|
388
|
+
let currentMaxSize = 100;
|
|
389
|
+
let totalMinSize = 0;
|
|
390
|
+
let totalMaxSize = 0;
|
|
391
|
+
const firstIndex = pivotIndices[0];
|
|
392
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(firstIndex != null);
|
|
393
|
+
// A panel's effective min/max sizes also need to account for other panel's sizes.
|
|
394
|
+
panelsArray.forEach((panelData, index)=>{
|
|
395
|
+
const { constraints: constraints } = panelData;
|
|
396
|
+
const { maxSize: maxSize = 100, minSize: minSize = 0 } = constraints;
|
|
397
|
+
if (index === firstIndex) {
|
|
398
|
+
currentMinSize = minSize;
|
|
399
|
+
currentMaxSize = maxSize;
|
|
545
400
|
} else {
|
|
546
|
-
|
|
401
|
+
totalMinSize += minSize;
|
|
402
|
+
totalMaxSize += maxSize;
|
|
547
403
|
}
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
//DEBUG.push(`total size: ${totalSize}`);
|
|
558
|
-
//DEBUG.push(` deltaApplied: ${deltaApplied}`);
|
|
559
|
-
//console.log(DEBUG.join("\n"));
|
|
560
|
-
|
|
561
|
-
if (!fuzzyNumbersEqual(totalSize, 100)) {
|
|
562
|
-
return prevLayout;
|
|
563
|
-
}
|
|
564
|
-
return nextLayout;
|
|
404
|
+
});
|
|
405
|
+
const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
|
|
406
|
+
const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
|
|
407
|
+
const valueNow = layout[firstIndex];
|
|
408
|
+
return {
|
|
409
|
+
valueMax: valueMax,
|
|
410
|
+
valueMin: valueMin,
|
|
411
|
+
valueNow: valueNow
|
|
412
|
+
};
|
|
565
413
|
}
|
|
566
414
|
|
|
567
|
-
function assert(expectedCondition, message = "Assertion failed!") {
|
|
568
|
-
if (!expectedCondition) {
|
|
569
|
-
console.error(message);
|
|
570
|
-
throw Error(message);
|
|
571
|
-
}
|
|
572
|
-
}
|
|
573
415
|
|
|
574
|
-
function
|
|
575
|
-
|
|
576
|
-
sizePixels
|
|
577
|
-
}, groupSizePixels) {
|
|
578
|
-
if (sizePercentage != null) {
|
|
579
|
-
return sizePercentage;
|
|
580
|
-
} else if (sizePixels != null) {
|
|
581
|
-
return convertPixelsToPercentage(sizePixels, groupSizePixels);
|
|
582
|
-
}
|
|
583
|
-
return undefined;
|
|
416
|
+
function $ef847a5e9ce851d7$export$63eb605e437b214f(groupId) {
|
|
417
|
+
return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
|
|
584
418
|
}
|
|
585
419
|
|
|
586
|
-
function calculateAriaValues({
|
|
587
|
-
groupSizePixels,
|
|
588
|
-
layout,
|
|
589
|
-
panelsArray,
|
|
590
|
-
pivotIndices
|
|
591
|
-
}) {
|
|
592
|
-
let currentMinSize = 0;
|
|
593
|
-
let currentMaxSize = 100;
|
|
594
|
-
let totalMinSize = 0;
|
|
595
|
-
let totalMaxSize = 0;
|
|
596
|
-
|
|
597
|
-
// A panel's effective min/max sizes also need to account for other panel's sizes.
|
|
598
|
-
panelsArray.forEach((panelData, index) => {
|
|
599
|
-
var _getPercentageSizeFro, _getPercentageSizeFro2;
|
|
600
|
-
const {
|
|
601
|
-
constraints
|
|
602
|
-
} = panelData;
|
|
603
|
-
const {
|
|
604
|
-
maxSizePercentage,
|
|
605
|
-
maxSizePixels,
|
|
606
|
-
minSizePercentage,
|
|
607
|
-
minSizePixels
|
|
608
|
-
} = constraints;
|
|
609
|
-
const minSize = (_getPercentageSizeFro = getPercentageSizeFromMixedSizes({
|
|
610
|
-
sizePercentage: minSizePercentage,
|
|
611
|
-
sizePixels: minSizePixels
|
|
612
|
-
}, groupSizePixels)) !== null && _getPercentageSizeFro !== void 0 ? _getPercentageSizeFro : 0;
|
|
613
|
-
const maxSize = (_getPercentageSizeFro2 = getPercentageSizeFromMixedSizes({
|
|
614
|
-
sizePercentage: maxSizePercentage,
|
|
615
|
-
sizePixels: maxSizePixels
|
|
616
|
-
}, groupSizePixels)) !== null && _getPercentageSizeFro2 !== void 0 ? _getPercentageSizeFro2 : 100;
|
|
617
|
-
if (index === pivotIndices[0]) {
|
|
618
|
-
currentMinSize = minSize;
|
|
619
|
-
currentMaxSize = maxSize;
|
|
620
|
-
} else {
|
|
621
|
-
totalMinSize += minSize;
|
|
622
|
-
totalMaxSize += maxSize;
|
|
623
|
-
}
|
|
624
|
-
});
|
|
625
|
-
const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
|
|
626
|
-
const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
|
|
627
|
-
const valueNow = layout[pivotIndices[0]];
|
|
628
|
-
return {
|
|
629
|
-
valueMax,
|
|
630
|
-
valueMin,
|
|
631
|
-
valueNow
|
|
632
|
-
};
|
|
633
|
-
}
|
|
634
420
|
|
|
635
|
-
function
|
|
636
|
-
|
|
421
|
+
function $645e6f06f14b1fbf$export$4c92fedbbc2381ca(groupId, id) {
|
|
422
|
+
const handles = (0, $ef847a5e9ce851d7$export$63eb605e437b214f)(groupId);
|
|
423
|
+
const index = handles.findIndex((handle)=>handle.getAttribute("data-panel-resize-handle-id") === id);
|
|
424
|
+
return index !== null && index !== void 0 ? index : null;
|
|
637
425
|
}
|
|
638
426
|
|
|
639
|
-
function getResizeHandleElementIndex(groupId, id) {
|
|
640
|
-
const handles = getResizeHandleElementsForGroup(groupId);
|
|
641
|
-
const index = handles.findIndex(handle => handle.getAttribute("data-panel-resize-handle-id") === id);
|
|
642
|
-
return index !== null && index !== void 0 ? index : null;
|
|
643
|
-
}
|
|
644
427
|
|
|
645
|
-
function
|
|
646
|
-
|
|
647
|
-
|
|
428
|
+
function $28ee5ac1ce973de1$export$cf92598869f99b8f(groupId, dragHandleId) {
|
|
429
|
+
const index = (0, $645e6f06f14b1fbf$export$4c92fedbbc2381ca)(groupId, dragHandleId);
|
|
430
|
+
return index != null ? [
|
|
431
|
+
index,
|
|
432
|
+
index + 1
|
|
433
|
+
] : [
|
|
434
|
+
-1,
|
|
435
|
+
-1
|
|
436
|
+
];
|
|
648
437
|
}
|
|
649
438
|
|
|
650
|
-
function getPanelGroupElement(id) {
|
|
651
|
-
const element = document.querySelector(`[data-panel-group][data-panel-group-id="${id}"]`);
|
|
652
|
-
if (element) {
|
|
653
|
-
return element;
|
|
654
|
-
}
|
|
655
|
-
return null;
|
|
656
|
-
}
|
|
657
439
|
|
|
658
|
-
function
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
return
|
|
662
|
-
}
|
|
663
|
-
const direction = panelGroupElement.getAttribute("data-panel-group-direction");
|
|
664
|
-
const resizeHandles = getResizeHandleElementsForGroup(groupId);
|
|
665
|
-
if (direction === "horizontal") {
|
|
666
|
-
return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
|
|
667
|
-
return accumulated + handle.offsetWidth;
|
|
668
|
-
}, 0);
|
|
669
|
-
} else {
|
|
670
|
-
return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
|
|
671
|
-
return accumulated + handle.offsetHeight;
|
|
672
|
-
}, 0);
|
|
673
|
-
}
|
|
440
|
+
function $2119d3fcdfae277d$export$4e72aefa594058df(id) {
|
|
441
|
+
const element = document.querySelector(`[data-panel-group][data-panel-group-id="${id}"]`);
|
|
442
|
+
if (element) return element;
|
|
443
|
+
return null;
|
|
674
444
|
}
|
|
675
445
|
|
|
676
|
-
function getAvailableGroupSizePixels(groupId) {
|
|
677
|
-
const panelGroupElement = getPanelGroupElement(groupId);
|
|
678
|
-
if (panelGroupElement == null) {
|
|
679
|
-
return NaN;
|
|
680
|
-
}
|
|
681
|
-
const direction = panelGroupElement.getAttribute("data-panel-group-direction");
|
|
682
|
-
const resizeHandles = getResizeHandleElementsForGroup(groupId);
|
|
683
|
-
if (direction === "horizontal") {
|
|
684
|
-
return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
|
|
685
|
-
return accumulated + handle.offsetWidth;
|
|
686
|
-
}, 0);
|
|
687
|
-
} else {
|
|
688
|
-
return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
|
|
689
|
-
return accumulated + handle.offsetHeight;
|
|
690
|
-
}, 0);
|
|
691
|
-
}
|
|
692
|
-
}
|
|
693
446
|
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
return element;
|
|
698
|
-
|
|
699
|
-
return null;
|
|
447
|
+
|
|
448
|
+
function $58762ed3a79a85a2$export$4c5229c874a62620(id) {
|
|
449
|
+
const element = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
|
|
450
|
+
if (element) return element;
|
|
451
|
+
return null;
|
|
700
452
|
}
|
|
701
453
|
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
454
|
+
|
|
455
|
+
|
|
456
|
+
function $76ab5cd6038e6c4f$export$68d3a33c21dfbe27(groupId, handleId, panelsArray) {
|
|
457
|
+
var _panelsArray_index, _panelsArray_;
|
|
458
|
+
const handle = (0, $58762ed3a79a85a2$export$4c5229c874a62620)(handleId);
|
|
459
|
+
const handles = (0, $ef847a5e9ce851d7$export$63eb605e437b214f)(groupId);
|
|
460
|
+
const index = handle ? handles.indexOf(handle) : -1;
|
|
461
|
+
var _panelsArray_index_id;
|
|
462
|
+
const idBefore = (_panelsArray_index_id = (_panelsArray_index = panelsArray[index]) === null || _panelsArray_index === void 0 ? void 0 : _panelsArray_index.id) !== null && _panelsArray_index_id !== void 0 ? _panelsArray_index_id : null;
|
|
463
|
+
var _panelsArray__id;
|
|
464
|
+
const idAfter = (_panelsArray__id = (_panelsArray_ = panelsArray[index + 1]) === null || _panelsArray_ === void 0 ? void 0 : _panelsArray_.id) !== null && _panelsArray__id !== void 0 ? _panelsArray__id : null;
|
|
465
|
+
return [
|
|
466
|
+
idBefore,
|
|
467
|
+
idAfter
|
|
468
|
+
];
|
|
710
469
|
}
|
|
711
470
|
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
const resizeHandleElement = resizeHandleElements[index];
|
|
740
|
-
if (resizeHandleElement == null) ; else {
|
|
741
|
-
resizeHandleElement.setAttribute("aria-controls", panelDataArray[index].id);
|
|
742
|
-
resizeHandleElement.setAttribute("aria-valuemax", "" + Math.round(valueMax));
|
|
743
|
-
resizeHandleElement.setAttribute("aria-valuemin", "" + Math.round(valueMin));
|
|
744
|
-
resizeHandleElement.setAttribute("aria-valuenow", "" + Math.round(valueNow));
|
|
745
|
-
}
|
|
746
|
-
}
|
|
747
|
-
return () => {
|
|
748
|
-
resizeHandleElements.forEach((resizeHandleElement, index) => {
|
|
749
|
-
resizeHandleElement.removeAttribute("aria-controls");
|
|
750
|
-
resizeHandleElement.removeAttribute("aria-valuemax");
|
|
751
|
-
resizeHandleElement.removeAttribute("aria-valuemin");
|
|
752
|
-
resizeHandleElement.removeAttribute("aria-valuenow");
|
|
753
|
-
});
|
|
754
|
-
};
|
|
755
|
-
}, [groupId, layout, panelDataArray]);
|
|
756
|
-
useEffect(() => {
|
|
757
|
-
const {
|
|
758
|
-
panelDataArray
|
|
759
|
-
} = eagerValuesRef.current;
|
|
760
|
-
const groupElement = getPanelGroupElement(groupId);
|
|
761
|
-
assert(groupElement != null, `No group found for id "${groupId}"`);
|
|
762
|
-
const handles = getResizeHandleElementsForGroup(groupId);
|
|
763
|
-
const cleanupFunctions = handles.map(handle => {
|
|
764
|
-
const handleId = handle.getAttribute("data-panel-resize-handle-id");
|
|
765
|
-
const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelDataArray);
|
|
766
|
-
if (idBefore == null || idAfter == null) {
|
|
767
|
-
return () => {};
|
|
768
|
-
}
|
|
769
|
-
const onKeyDown = event => {
|
|
770
|
-
if (event.defaultPrevented) {
|
|
771
|
-
return;
|
|
772
|
-
}
|
|
773
|
-
switch (event.key) {
|
|
774
|
-
case "Enter":
|
|
775
|
-
{
|
|
776
|
-
event.preventDefault();
|
|
777
|
-
const index = panelDataArray.findIndex(panelData => panelData.id === idBefore);
|
|
778
|
-
if (index >= 0) {
|
|
779
|
-
const panelData = panelDataArray[index];
|
|
780
|
-
const size = layout[index];
|
|
781
|
-
if (size != null && panelData.constraints.collapsible) {
|
|
782
|
-
var _getPercentageSizeFro, _getPercentageSizeFro2;
|
|
783
|
-
const groupSizePixels = getAvailableGroupSizePixels(groupId);
|
|
784
|
-
const collapsedSize = (_getPercentageSizeFro = getPercentageSizeFromMixedSizes({
|
|
785
|
-
sizePercentage: panelData.constraints.collapsedSizePercentage,
|
|
786
|
-
sizePixels: panelData.constraints.collapsedSizePixels
|
|
787
|
-
}, groupSizePixels)) !== null && _getPercentageSizeFro !== void 0 ? _getPercentageSizeFro : 0;
|
|
788
|
-
const minSize = (_getPercentageSizeFro2 = getPercentageSizeFromMixedSizes({
|
|
789
|
-
sizePercentage: panelData.constraints.minSizePercentage,
|
|
790
|
-
sizePixels: panelData.constraints.minSizePixels
|
|
791
|
-
}, groupSizePixels)) !== null && _getPercentageSizeFro2 !== void 0 ? _getPercentageSizeFro2 : 0;
|
|
792
|
-
const nextLayout = adjustLayoutByDelta({
|
|
793
|
-
delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
|
|
794
|
-
groupSizePixels,
|
|
795
|
-
layout,
|
|
796
|
-
panelConstraints: panelDataArray.map(panelData => panelData.constraints),
|
|
797
|
-
pivotIndices: determinePivotIndices(groupId, handleId),
|
|
798
|
-
trigger: "keyboard"
|
|
799
|
-
});
|
|
800
|
-
if (layout !== nextLayout) {
|
|
801
|
-
setLayout(nextLayout);
|
|
802
|
-
}
|
|
471
|
+
|
|
472
|
+
|
|
473
|
+
|
|
474
|
+
|
|
475
|
+
function $c682b4ad8fc26d8e$export$d9fcbe062527d159({ committedValuesRef: committedValuesRef, eagerValuesRef: eagerValuesRef, groupId: groupId, layout: layout, panelDataArray: panelDataArray, setLayout: setLayout }) {
|
|
476
|
+
const devWarningsRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
|
|
477
|
+
didWarnAboutMissingResizeHandle: false
|
|
478
|
+
});
|
|
479
|
+
(0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
|
|
480
|
+
const resizeHandleElements = (0, $ef847a5e9ce851d7$export$63eb605e437b214f)(groupId);
|
|
481
|
+
for(let index = 0; index < panelDataArray.length - 1; index++){
|
|
482
|
+
const { valueMax: valueMax, valueMin: valueMin, valueNow: valueNow } = (0, $ec200dcdf140f2a9$export$b8372a468ba36f7d)({
|
|
483
|
+
layout: layout,
|
|
484
|
+
panelsArray: panelDataArray,
|
|
485
|
+
pivotIndices: [
|
|
486
|
+
index,
|
|
487
|
+
index + 1
|
|
488
|
+
]
|
|
489
|
+
});
|
|
490
|
+
const resizeHandleElement = resizeHandleElements[index];
|
|
491
|
+
if (resizeHandleElement == null) {
|
|
492
|
+
if (0, $95f7f0116122f6f8$export$df77466336fe5355) {
|
|
493
|
+
const { didWarnAboutMissingResizeHandle: didWarnAboutMissingResizeHandle } = devWarningsRef.current;
|
|
494
|
+
if (!didWarnAboutMissingResizeHandle) {
|
|
495
|
+
devWarningsRef.current.didWarnAboutMissingResizeHandle = true;
|
|
496
|
+
console.warn(`WARNING: Missing resize handle for PanelGroup "${groupId}"`);
|
|
497
|
+
}
|
|
803
498
|
}
|
|
804
|
-
|
|
805
|
-
|
|
499
|
+
} else {
|
|
500
|
+
const panelData = panelDataArray[index];
|
|
501
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelData);
|
|
502
|
+
resizeHandleElement.setAttribute("aria-controls", panelData.id);
|
|
503
|
+
resizeHandleElement.setAttribute("aria-valuemax", "" + Math.round(valueMax));
|
|
504
|
+
resizeHandleElement.setAttribute("aria-valuemin", "" + Math.round(valueMin));
|
|
505
|
+
resizeHandleElement.setAttribute("aria-valuenow", valueNow != null ? "" + Math.round(valueNow) : "");
|
|
806
506
|
}
|
|
807
507
|
}
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
}
|
|
817
|
-
|
|
508
|
+
return ()=>{
|
|
509
|
+
resizeHandleElements.forEach((resizeHandleElement, index)=>{
|
|
510
|
+
resizeHandleElement.removeAttribute("aria-controls");
|
|
511
|
+
resizeHandleElement.removeAttribute("aria-valuemax");
|
|
512
|
+
resizeHandleElement.removeAttribute("aria-valuemin");
|
|
513
|
+
resizeHandleElement.removeAttribute("aria-valuenow");
|
|
514
|
+
});
|
|
515
|
+
};
|
|
516
|
+
}, [
|
|
517
|
+
groupId,
|
|
518
|
+
layout,
|
|
519
|
+
panelDataArray
|
|
520
|
+
]);
|
|
521
|
+
(0, $6e687094f9ca8395$export$6d9c69b0de29b591)(()=>{
|
|
522
|
+
const eagerValues = eagerValuesRef.current;
|
|
523
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(eagerValues);
|
|
524
|
+
const { panelDataArray: panelDataArray } = eagerValues;
|
|
525
|
+
const groupElement = (0, $2119d3fcdfae277d$export$4e72aefa594058df)(groupId);
|
|
526
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(groupElement != null, `No group found for id "${groupId}"`);
|
|
527
|
+
const handles = (0, $ef847a5e9ce851d7$export$63eb605e437b214f)(groupId);
|
|
528
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(handles);
|
|
529
|
+
const cleanupFunctions = handles.map((handle)=>{
|
|
530
|
+
const handleId = handle.getAttribute("data-panel-resize-handle-id");
|
|
531
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(handleId);
|
|
532
|
+
const [idBefore, idAfter] = (0, $76ab5cd6038e6c4f$export$68d3a33c21dfbe27)(groupId, handleId, panelDataArray);
|
|
533
|
+
if (idBefore == null || idAfter == null) return ()=>{};
|
|
534
|
+
const onKeyDown = (event)=>{
|
|
535
|
+
if (event.defaultPrevented) return;
|
|
536
|
+
switch(event.key){
|
|
537
|
+
case "Enter":
|
|
538
|
+
{
|
|
539
|
+
event.preventDefault();
|
|
540
|
+
const index = panelDataArray.findIndex((panelData)=>panelData.id === idBefore);
|
|
541
|
+
if (index >= 0) {
|
|
542
|
+
const panelData = panelDataArray[index];
|
|
543
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelData);
|
|
544
|
+
const size = layout[index];
|
|
545
|
+
const { collapsedSize: collapsedSize = 0, collapsible: collapsible, minSize: minSize = 0 } = panelData.constraints;
|
|
546
|
+
if (size != null && collapsible) {
|
|
547
|
+
const nextLayout = (0, $0c110d593c066642$export$7fead5cc734d205b)({
|
|
548
|
+
delta: (0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
|
|
549
|
+
layout: layout,
|
|
550
|
+
panelConstraints: panelDataArray.map((panelData)=>panelData.constraints),
|
|
551
|
+
pivotIndices: (0, $28ee5ac1ce973de1$export$cf92598869f99b8f)(groupId, handleId),
|
|
552
|
+
trigger: "keyboard"
|
|
553
|
+
});
|
|
554
|
+
if (layout !== nextLayout) setLayout(nextLayout);
|
|
555
|
+
}
|
|
556
|
+
}
|
|
557
|
+
break;
|
|
558
|
+
}
|
|
559
|
+
}
|
|
560
|
+
};
|
|
561
|
+
handle.addEventListener("keydown", onKeyDown);
|
|
562
|
+
return ()=>{
|
|
563
|
+
handle.removeEventListener("keydown", onKeyDown);
|
|
564
|
+
};
|
|
565
|
+
});
|
|
566
|
+
return ()=>{
|
|
567
|
+
cleanupFunctions.forEach((cleanupFunction)=>cleanupFunction());
|
|
568
|
+
};
|
|
569
|
+
}, [
|
|
570
|
+
committedValuesRef,
|
|
571
|
+
eagerValuesRef,
|
|
572
|
+
groupId,
|
|
573
|
+
layout,
|
|
574
|
+
panelDataArray,
|
|
575
|
+
setLayout
|
|
576
|
+
]);
|
|
818
577
|
}
|
|
819
578
|
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
return false;
|
|
579
|
+
|
|
580
|
+
|
|
581
|
+
function $d31ef7445a11a6c5$export$b141efd0b0fb9174(arrayA, arrayB) {
|
|
582
|
+
if (arrayA.length !== arrayB.length) return false;
|
|
583
|
+
for(let index = 0; index < arrayA.length; index++){
|
|
584
|
+
if (arrayA[index] !== arrayB[index]) return false;
|
|
827
585
|
}
|
|
828
|
-
|
|
829
|
-
return true;
|
|
586
|
+
return true;
|
|
830
587
|
}
|
|
831
588
|
|
|
832
|
-
|
|
833
|
-
|
|
589
|
+
|
|
590
|
+
|
|
591
|
+
|
|
592
|
+
|
|
593
|
+
|
|
594
|
+
|
|
595
|
+
function $601a2b3c71af04bb$export$e7bf60a870f429b0(event) {
|
|
596
|
+
return event.type === "keydown";
|
|
834
597
|
}
|
|
835
|
-
function
|
|
836
|
-
|
|
598
|
+
function $601a2b3c71af04bb$export$764db16956f554f8(event) {
|
|
599
|
+
return event.type.startsWith("mouse");
|
|
837
600
|
}
|
|
838
|
-
function
|
|
839
|
-
|
|
601
|
+
function $601a2b3c71af04bb$export$c4dfce035d43d1e0(event) {
|
|
602
|
+
return event.type.startsWith("touch");
|
|
840
603
|
}
|
|
841
604
|
|
|
842
|
-
function getResizeEventCursorPosition(direction, event) {
|
|
843
|
-
const isHorizontal = direction === "horizontal";
|
|
844
|
-
if (isMouseEvent(event)) {
|
|
845
|
-
return isHorizontal ? event.clientX : event.clientY;
|
|
846
|
-
} else if (isTouchEvent(event)) {
|
|
847
|
-
const firstTouch = event.touches[0];
|
|
848
|
-
return isHorizontal ? firstTouch.screenX : firstTouch.screenY;
|
|
849
|
-
} else {
|
|
850
|
-
throw Error(`Unsupported event type "${event.type}"`);
|
|
851
|
-
}
|
|
852
|
-
}
|
|
853
605
|
|
|
854
|
-
function
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
const groupElement = getPanelGroupElement(groupId);
|
|
863
|
-
const groupRect = groupElement.getBoundingClientRect();
|
|
864
|
-
const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
|
|
865
|
-
const offsetPixels = cursorPosition - initialCursorPosition;
|
|
866
|
-
const offsetPercentage = offsetPixels / groupSizeInPixels * 100;
|
|
867
|
-
return offsetPercentage;
|
|
606
|
+
function $9b677018bf1ac728$export$ae0c59ca751ba81d(direction, event) {
|
|
607
|
+
const isHorizontal = direction === "horizontal";
|
|
608
|
+
if ((0, $601a2b3c71af04bb$export$764db16956f554f8)(event)) return isHorizontal ? event.clientX : event.clientY;
|
|
609
|
+
else if ((0, $601a2b3c71af04bb$export$c4dfce035d43d1e0)(event)) {
|
|
610
|
+
const firstTouch = event.touches[0];
|
|
611
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(firstTouch);
|
|
612
|
+
return isHorizontal ? firstTouch.screenX : firstTouch.screenY;
|
|
613
|
+
} else throw Error(`Unsupported event type "${event.type}"`);
|
|
868
614
|
}
|
|
869
615
|
|
|
870
|
-
|
|
871
|
-
function
|
|
872
|
-
if (isKeyDown(event)) {
|
|
616
|
+
|
|
617
|
+
function $2d702ed7231bedb6$export$e3b8a38f1f6abc89(event, dragHandleId, direction, initialDragState) {
|
|
873
618
|
const isHorizontal = direction === "horizontal";
|
|
874
|
-
const
|
|
875
|
-
|
|
876
|
-
const
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
619
|
+
const handleElement = (0, $58762ed3a79a85a2$export$4c5229c874a62620)(dragHandleId);
|
|
620
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(handleElement);
|
|
621
|
+
const groupId = handleElement.getAttribute("data-panel-group-id");
|
|
622
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(groupId);
|
|
623
|
+
let { initialCursorPosition: initialCursorPosition } = initialDragState;
|
|
624
|
+
const cursorPosition = (0, $9b677018bf1ac728$export$ae0c59ca751ba81d)(direction, event);
|
|
625
|
+
const groupElement = (0, $2119d3fcdfae277d$export$4e72aefa594058df)(groupId);
|
|
626
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(groupElement);
|
|
627
|
+
const groupRect = groupElement.getBoundingClientRect();
|
|
628
|
+
const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
|
|
629
|
+
const offsetPixels = cursorPosition - initialCursorPosition;
|
|
630
|
+
const offsetPercentage = offsetPixels / groupSizeInPixels * 100;
|
|
631
|
+
return offsetPercentage;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
|
|
635
|
+
|
|
636
|
+
function $6c41c8262084553c$export$b08134b65f9db46a(event, dragHandleId, direction, initialDragState, keyboardResizeBy) {
|
|
637
|
+
if ((0, $601a2b3c71af04bb$export$e7bf60a870f429b0)(event)) {
|
|
638
|
+
const isHorizontal = direction === "horizontal";
|
|
639
|
+
let delta = 0;
|
|
640
|
+
if (event.shiftKey) delta = 100;
|
|
641
|
+
else if (keyboardResizeBy != null) delta = keyboardResizeBy;
|
|
642
|
+
else delta = 10;
|
|
643
|
+
let movement = 0;
|
|
644
|
+
switch(event.key){
|
|
645
|
+
case "ArrowDown":
|
|
646
|
+
movement = isHorizontal ? 0 : delta;
|
|
647
|
+
break;
|
|
648
|
+
case "ArrowLeft":
|
|
649
|
+
movement = isHorizontal ? -delta : 0;
|
|
650
|
+
break;
|
|
651
|
+
case "ArrowRight":
|
|
652
|
+
movement = isHorizontal ? delta : 0;
|
|
653
|
+
break;
|
|
654
|
+
case "ArrowUp":
|
|
655
|
+
movement = isHorizontal ? 0 : -delta;
|
|
656
|
+
break;
|
|
657
|
+
case "End":
|
|
658
|
+
movement = 100;
|
|
659
|
+
break;
|
|
660
|
+
case "Home":
|
|
661
|
+
movement = -100;
|
|
662
|
+
break;
|
|
663
|
+
}
|
|
664
|
+
return movement;
|
|
884
665
|
} else {
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
let movement = 0;
|
|
888
|
-
switch (event.key) {
|
|
889
|
-
case "ArrowDown":
|
|
890
|
-
movement = isHorizontal ? 0 : delta;
|
|
891
|
-
break;
|
|
892
|
-
case "ArrowLeft":
|
|
893
|
-
movement = isHorizontal ? -delta : 0;
|
|
894
|
-
break;
|
|
895
|
-
case "ArrowRight":
|
|
896
|
-
movement = isHorizontal ? delta : 0;
|
|
897
|
-
break;
|
|
898
|
-
case "ArrowUp":
|
|
899
|
-
movement = isHorizontal ? 0 : -delta;
|
|
900
|
-
break;
|
|
901
|
-
case "End":
|
|
902
|
-
movement = 100;
|
|
903
|
-
break;
|
|
904
|
-
case "Home":
|
|
905
|
-
movement = -100;
|
|
906
|
-
break;
|
|
666
|
+
if (initialDragState == null) return 0;
|
|
667
|
+
return (0, $2d702ed7231bedb6$export$e3b8a38f1f6abc89)(event, dragHandleId, direction, initialDragState);
|
|
907
668
|
}
|
|
908
|
-
return movement;
|
|
909
|
-
} else {
|
|
910
|
-
return calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState);
|
|
911
|
-
}
|
|
912
669
|
}
|
|
913
670
|
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
remainingSize -= defaultSizePercentage;
|
|
671
|
+
|
|
672
|
+
|
|
673
|
+
function $17c359958d4c9de7$export$47337a21c443778e({ panelDataArray: panelDataArray }) {
|
|
674
|
+
const layout = Array(panelDataArray.length);
|
|
675
|
+
const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
|
|
676
|
+
let numPanelsWithSizes = 0;
|
|
677
|
+
let remainingSize = 100;
|
|
678
|
+
// Distribute default sizes first
|
|
679
|
+
for(let index = 0; index < panelDataArray.length; index++){
|
|
680
|
+
const panelConstraints = panelConstraintsArray[index];
|
|
681
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelConstraints);
|
|
682
|
+
const { defaultSize: defaultSize } = panelConstraints;
|
|
683
|
+
if (defaultSize != null) {
|
|
684
|
+
numPanelsWithSizes++;
|
|
685
|
+
layout[index] = defaultSize;
|
|
686
|
+
remainingSize -= defaultSize;
|
|
687
|
+
}
|
|
932
688
|
}
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
689
|
+
// Remaining size should be distributed evenly between panels without default sizes
|
|
690
|
+
for(let index = 0; index < panelDataArray.length; index++){
|
|
691
|
+
const panelConstraints = panelConstraintsArray[index];
|
|
692
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelConstraints);
|
|
693
|
+
const { defaultSize: defaultSize } = panelConstraints;
|
|
694
|
+
if (defaultSize != null) continue;
|
|
695
|
+
const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
|
|
696
|
+
const size = remainingSize / numRemainingPanels;
|
|
697
|
+
numPanelsWithSizes++;
|
|
698
|
+
layout[index] = size;
|
|
699
|
+
remainingSize -= size;
|
|
942
700
|
}
|
|
943
|
-
|
|
944
|
-
const size = remainingSize / numRemainingPanels;
|
|
945
|
-
numPanelsWithSizes++;
|
|
946
|
-
layout[index] = size;
|
|
947
|
-
remainingSize -= size;
|
|
948
|
-
}
|
|
949
|
-
return layout;
|
|
701
|
+
return layout;
|
|
950
702
|
}
|
|
951
703
|
|
|
952
|
-
function convertPercentageToPixels(percentage, groupSizePixels) {
|
|
953
|
-
return percentage / 100 * groupSizePixels;
|
|
954
|
-
}
|
|
955
704
|
|
|
956
|
-
|
|
957
|
-
function
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
collapsible
|
|
973
|
-
} = constraints;
|
|
974
|
-
const mixedSizes = {
|
|
975
|
-
sizePercentage,
|
|
976
|
-
sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
|
|
977
|
-
};
|
|
978
|
-
const lastNotifiedMixedSizes = panelIdToLastNotifiedMixedSizesMap[panelId];
|
|
979
|
-
if (lastNotifiedMixedSizes == null || mixedSizes.sizePercentage !== lastNotifiedMixedSizes.sizePercentage || mixedSizes.sizePixels !== lastNotifiedMixedSizes.sizePixels) {
|
|
980
|
-
panelIdToLastNotifiedMixedSizesMap[panelId] = mixedSizes;
|
|
981
|
-
const {
|
|
982
|
-
onCollapse,
|
|
983
|
-
onExpand,
|
|
984
|
-
onResize
|
|
985
|
-
} = callbacks;
|
|
986
|
-
if (onResize) {
|
|
987
|
-
onResize(mixedSizes, lastNotifiedMixedSizes);
|
|
988
|
-
}
|
|
989
|
-
if (collapsible && (onCollapse || onExpand)) {
|
|
990
|
-
var _getPercentageSizeFro;
|
|
991
|
-
const collapsedSize = (_getPercentageSizeFro = getPercentageSizeFromMixedSizes({
|
|
992
|
-
sizePercentage: constraints.collapsedSizePercentage,
|
|
993
|
-
sizePixels: constraints.collapsedSizePixels
|
|
994
|
-
}, groupSizePixels)) !== null && _getPercentageSizeFro !== void 0 ? _getPercentageSizeFro : 0;
|
|
995
|
-
const size = getPercentageSizeFromMixedSizes(mixedSizes, groupSizePixels);
|
|
996
|
-
if (onExpand && (lastNotifiedMixedSizes == null || lastNotifiedMixedSizes.sizePercentage === collapsedSize) && size !== collapsedSize) {
|
|
997
|
-
onExpand();
|
|
998
|
-
}
|
|
999
|
-
if (onCollapse && (lastNotifiedMixedSizes == null || lastNotifiedMixedSizes.sizePercentage !== collapsedSize) && size === collapsedSize) {
|
|
1000
|
-
onCollapse();
|
|
705
|
+
|
|
706
|
+
function $3c80a05711c0e5f5$export$b8e48269e4faa934(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
|
|
707
|
+
layout.forEach((size, index)=>{
|
|
708
|
+
const panelData = panelsArray[index];
|
|
709
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelData);
|
|
710
|
+
const { callbacks: callbacks, constraints: constraints, id: panelId } = panelData;
|
|
711
|
+
const { collapsedSize: collapsedSize = 0, collapsible: collapsible } = constraints;
|
|
712
|
+
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[panelId];
|
|
713
|
+
if (lastNotifiedSize == null || size !== lastNotifiedSize) {
|
|
714
|
+
panelIdToLastNotifiedSizeMap[panelId] = size;
|
|
715
|
+
const { onCollapse: onCollapse, onExpand: onExpand, onResize: onResize } = callbacks;
|
|
716
|
+
if (onResize) onResize(size, lastNotifiedSize);
|
|
717
|
+
if (collapsible && (onCollapse || onExpand)) {
|
|
718
|
+
if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) onExpand();
|
|
719
|
+
if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) onCollapse();
|
|
720
|
+
}
|
|
1001
721
|
}
|
|
1002
|
-
|
|
1003
|
-
}
|
|
1004
|
-
});
|
|
722
|
+
});
|
|
1005
723
|
}
|
|
1006
724
|
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
return false;
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
if (a[index] != b[index]) {
|
|
1013
|
-
return false;
|
|
1014
|
-
}
|
|
725
|
+
|
|
726
|
+
function $11f1460202e20b00$export$a10903e2e57656c1(a, b) {
|
|
727
|
+
if (a.length !== b.length) return false;
|
|
728
|
+
else for(let index = 0; index < a.length; index++){
|
|
729
|
+
if (a[index] != b[index]) return false;
|
|
1015
730
|
}
|
|
1016
|
-
|
|
1017
|
-
return true;
|
|
731
|
+
return true;
|
|
1018
732
|
}
|
|
1019
733
|
|
|
1020
|
-
// This method returns a number between 1 and 100 representing
|
|
1021
734
|
|
|
1022
|
-
//
|
|
1023
|
-
function
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
precision = 3
|
|
1029
|
-
}) {
|
|
1030
|
-
const size = layout[panelIndex];
|
|
1031
|
-
let flexGrow;
|
|
1032
|
-
if (panelData.length === 1) {
|
|
1033
|
-
flexGrow = "1";
|
|
1034
|
-
} else if (size == null) {
|
|
1035
|
-
// Initial render (before panels have registered themselves)
|
|
735
|
+
// This method returns a number between 1 and 100 representing
|
|
736
|
+
function $dd3efaf0847631d3$export$fc25f3248e61edf5({ dragState: dragState, layout: layout, panelData: panelData, panelIndex: panelIndex, precision: precision = 3 }) {
|
|
737
|
+
const size = layout[panelIndex];
|
|
738
|
+
let flexGrow;
|
|
739
|
+
if (panelData.length === 1) flexGrow = "1";
|
|
740
|
+
else if (size == null) // Initial render (before panels have registered themselves)
|
|
1036
741
|
flexGrow = "1";
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
pointerEvents: dragState !== null ? "none" : undefined
|
|
1049
|
-
};
|
|
742
|
+
else flexGrow = size.toPrecision(precision);
|
|
743
|
+
return {
|
|
744
|
+
flexBasis: 0,
|
|
745
|
+
flexGrow: flexGrow,
|
|
746
|
+
flexShrink: 1,
|
|
747
|
+
// Without this, Panel sizes may be unintentionally overridden by their content
|
|
748
|
+
overflow: "hidden",
|
|
749
|
+
// Disable pointer events inside of a panel during resize
|
|
750
|
+
// This avoid edge cases like nested iframes
|
|
751
|
+
pointerEvents: dragState !== null ? "none" : undefined
|
|
752
|
+
};
|
|
1050
753
|
}
|
|
1051
754
|
|
|
1052
|
-
|
|
1053
|
-
let
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
755
|
+
|
|
756
|
+
let $08745f7373322b05$var$currentState = null;
|
|
757
|
+
let $08745f7373322b05$var$element = null;
|
|
758
|
+
function $08745f7373322b05$export$fa35f3322c52262f(state) {
|
|
759
|
+
switch(state){
|
|
760
|
+
case "horizontal":
|
|
761
|
+
return "ew-resize";
|
|
762
|
+
case "horizontal-max":
|
|
763
|
+
return "w-resize";
|
|
764
|
+
case "horizontal-min":
|
|
765
|
+
return "e-resize";
|
|
766
|
+
case "vertical":
|
|
767
|
+
return "ns-resize";
|
|
768
|
+
case "vertical-max":
|
|
769
|
+
return "n-resize";
|
|
770
|
+
case "vertical-min":
|
|
771
|
+
return "s-resize";
|
|
772
|
+
}
|
|
1069
773
|
}
|
|
1070
|
-
function
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
774
|
+
function $08745f7373322b05$export$b61932ee18f96e08() {
|
|
775
|
+
if ($08745f7373322b05$var$element !== null) {
|
|
776
|
+
document.head.removeChild($08745f7373322b05$var$element);
|
|
777
|
+
$08745f7373322b05$var$currentState = null;
|
|
778
|
+
$08745f7373322b05$var$element = null;
|
|
779
|
+
}
|
|
1076
780
|
}
|
|
1077
|
-
function
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
}
|
|
1087
|
-
element.innerHTML = `*{cursor: ${style}!important;}`;
|
|
781
|
+
function $08745f7373322b05$export$d395b5dfd066a659(state) {
|
|
782
|
+
if ($08745f7373322b05$var$currentState === state) return;
|
|
783
|
+
$08745f7373322b05$var$currentState = state;
|
|
784
|
+
const style = $08745f7373322b05$export$fa35f3322c52262f(state);
|
|
785
|
+
if ($08745f7373322b05$var$element === null) {
|
|
786
|
+
$08745f7373322b05$var$element = document.createElement("style");
|
|
787
|
+
document.head.appendChild($08745f7373322b05$var$element);
|
|
788
|
+
}
|
|
789
|
+
$08745f7373322b05$var$element.innerHTML = `*{cursor: ${style}!important;}`;
|
|
1088
790
|
}
|
|
1089
791
|
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
}
|
|
1099
|
-
|
|
1100
|
-
return callable;
|
|
792
|
+
|
|
793
|
+
function $2e8572579e31d898$export$2e2bcd8739ae039(callback, durationMs = 10) {
|
|
794
|
+
let timeoutId = null;
|
|
795
|
+
let callable = (...args)=>{
|
|
796
|
+
if (timeoutId !== null) clearTimeout(timeoutId);
|
|
797
|
+
timeoutId = setTimeout(()=>{
|
|
798
|
+
callback(...args);
|
|
799
|
+
}, durationMs);
|
|
800
|
+
};
|
|
801
|
+
return callable;
|
|
1101
802
|
}
|
|
1102
803
|
|
|
1103
|
-
|
|
1104
|
-
|
|
804
|
+
|
|
805
|
+
|
|
806
|
+
function $3ffc7498c21f3969$export$80bbb698e7429afe(groupId) {
|
|
807
|
+
return Array.from(document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
|
|
1105
808
|
}
|
|
1106
809
|
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
function
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
810
|
+
|
|
811
|
+
|
|
812
|
+
|
|
813
|
+
|
|
814
|
+
function $75a06c6e1ca05a58$export$cb0adc12c8406347(storageObject) {
|
|
815
|
+
try {
|
|
816
|
+
if (typeof localStorage !== "undefined") {
|
|
817
|
+
// Bypass this check for future calls
|
|
818
|
+
storageObject.getItem = (name)=>{
|
|
819
|
+
return localStorage.getItem(name);
|
|
820
|
+
};
|
|
821
|
+
storageObject.setItem = (name, value)=>{
|
|
822
|
+
localStorage.setItem(name, value);
|
|
823
|
+
};
|
|
824
|
+
} else throw new Error("localStorage not supported in this environment");
|
|
825
|
+
} catch (error) {
|
|
826
|
+
console.error(error);
|
|
827
|
+
storageObject.getItem = ()=>null;
|
|
828
|
+
storageObject.setItem = ()=>{};
|
|
1123
829
|
}
|
|
1124
|
-
} catch (error) {
|
|
1125
|
-
console.error(error);
|
|
1126
|
-
storageObject.getItem = () => null;
|
|
1127
|
-
storageObject.setItem = () => {};
|
|
1128
|
-
}
|
|
1129
830
|
}
|
|
1130
831
|
|
|
832
|
+
|
|
1131
833
|
// Note that Panel ids might be user-provided (stable) or useId generated (non-deterministic)
|
|
1132
834
|
// so they should not be used as part of the serialization key.
|
|
1133
835
|
// Using the min/max size attributes should work well enough as a backup.
|
|
1134
836
|
// Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
|
|
1135
|
-
function getSerializationKey(panels) {
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
order
|
|
1142
|
-
} = panel;
|
|
1143
|
-
if (idIsFromProps) {
|
|
1144
|
-
return id;
|
|
1145
|
-
} else {
|
|
1146
|
-
return `${order}:${JSON.stringify(constraints)}`;
|
|
1147
|
-
}
|
|
1148
|
-
}).sort((a, b) => a.localeCompare(b)).join(",");
|
|
837
|
+
function $f9cb001fbb908626$var$getSerializationKey(panels) {
|
|
838
|
+
return panels.map((panel)=>{
|
|
839
|
+
const { constraints: constraints, id: id, idIsFromProps: idIsFromProps, order: order } = panel;
|
|
840
|
+
if (idIsFromProps) return id;
|
|
841
|
+
else return `${order}:${JSON.stringify(constraints)}`;
|
|
842
|
+
}).sort((a, b)=>a.localeCompare(b)).join(",");
|
|
1149
843
|
}
|
|
1150
|
-
function loadSerializedPanelGroupState(autoSaveId, storage) {
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
} catch (error) {}
|
|
1160
|
-
return null;
|
|
844
|
+
function $f9cb001fbb908626$var$loadSerializedPanelGroupState(autoSaveId, storage) {
|
|
845
|
+
try {
|
|
846
|
+
const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
|
|
847
|
+
if (serialized) {
|
|
848
|
+
const parsed = JSON.parse(serialized);
|
|
849
|
+
if (typeof parsed === "object" && parsed != null) return parsed;
|
|
850
|
+
}
|
|
851
|
+
} catch (error) {}
|
|
852
|
+
return null;
|
|
1161
853
|
}
|
|
1162
|
-
function
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
854
|
+
function $f9cb001fbb908626$export$9c80c6617f0386da(autoSaveId, panels, storage) {
|
|
855
|
+
const state = $f9cb001fbb908626$var$loadSerializedPanelGroupState(autoSaveId, storage);
|
|
856
|
+
if (state) {
|
|
857
|
+
const key = $f9cb001fbb908626$var$getSerializationKey(panels);
|
|
858
|
+
var _state_key;
|
|
859
|
+
return (_state_key = state[key]) !== null && _state_key !== void 0 ? _state_key : null;
|
|
860
|
+
}
|
|
861
|
+
return null;
|
|
1170
862
|
}
|
|
1171
|
-
function
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
863
|
+
function $f9cb001fbb908626$export$af183b313c61be4f(autoSaveId, panels, sizes, storage) {
|
|
864
|
+
const key = $f9cb001fbb908626$var$getSerializationKey(panels);
|
|
865
|
+
const state = $f9cb001fbb908626$var$loadSerializedPanelGroupState(autoSaveId, storage) || {};
|
|
866
|
+
state[key] = sizes;
|
|
867
|
+
try {
|
|
868
|
+
storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
|
|
869
|
+
} catch (error) {
|
|
870
|
+
console.error(error);
|
|
871
|
+
}
|
|
1180
872
|
}
|
|
1181
873
|
|
|
1182
|
-
function shouldMonitorPixelBasedConstraints(constraints) {
|
|
1183
|
-
return constraints.some(constraints => {
|
|
1184
|
-
return constraints.collapsedSizePixels !== undefined || constraints.maxSizePixels !== undefined || constraints.minSizePixels !== undefined;
|
|
1185
|
-
});
|
|
1186
|
-
}
|
|
1187
874
|
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
panelIndex: index,
|
|
1209
|
-
size: unsafeSize
|
|
1210
|
-
});
|
|
1211
|
-
if (unsafeSize != safeSize) {
|
|
1212
|
-
remainingSize += unsafeSize - safeSize;
|
|
1213
|
-
nextLayout[index] = safeSize;
|
|
1214
|
-
}
|
|
1215
|
-
}
|
|
1216
|
-
|
|
1217
|
-
// If there is additional, left over space, assign it to any panel(s) that permits it
|
|
1218
|
-
// (It's not worth taking multiple additional passes to evenly distribute)
|
|
1219
|
-
if (!fuzzyNumbersEqual(remainingSize, 0)) {
|
|
1220
|
-
for (let index = 0; index < panelConstraints.length; index++) {
|
|
1221
|
-
const prevSize = nextLayout[index];
|
|
1222
|
-
const unsafeSize = prevSize + remainingSize;
|
|
1223
|
-
const safeSize = resizePanel({
|
|
1224
|
-
groupSizePixels,
|
|
1225
|
-
panelConstraints,
|
|
1226
|
-
panelIndex: index,
|
|
1227
|
-
size: unsafeSize
|
|
1228
|
-
});
|
|
1229
|
-
if (prevSize !== safeSize) {
|
|
1230
|
-
remainingSize -= safeSize - prevSize;
|
|
1231
|
-
nextLayout[index] = safeSize;
|
|
1232
|
-
|
|
1233
|
-
// Once we've used up the remainder, bail
|
|
1234
|
-
if (fuzzyNumbersEqual(remainingSize, 0)) {
|
|
1235
|
-
break;
|
|
875
|
+
|
|
876
|
+
|
|
877
|
+
function $0531c662514b8c6a$export$d00cfefa2c395b39({ panelConstraints: panelConstraintsArray, panelId: panelId, panelIndex: panelIndex }) {
|
|
878
|
+
if (0, $95f7f0116122f6f8$export$df77466336fe5355) {
|
|
879
|
+
const warnings = [];
|
|
880
|
+
const panelConstraints = panelConstraintsArray[panelIndex];
|
|
881
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelConstraints);
|
|
882
|
+
const { collapsedSize: collapsedSize = 0, defaultSize: defaultSize, maxSize: maxSize = 100, minSize: minSize = 0 } = panelConstraints;
|
|
883
|
+
if (minSize > maxSize) warnings.push(`min size (${minSize}%) should not be greater than max size (${maxSize}%)`);
|
|
884
|
+
if (defaultSize != null) {
|
|
885
|
+
if (defaultSize < 0) warnings.push("default size should not be less than 0");
|
|
886
|
+
else if (defaultSize < minSize) warnings.push("default size should not be less than min size");
|
|
887
|
+
if (defaultSize > 100) warnings.push("default size should not be greater than 100");
|
|
888
|
+
else if (defaultSize > maxSize) warnings.push("default size should not be greater than max size");
|
|
889
|
+
}
|
|
890
|
+
if (collapsedSize > minSize) warnings.push("collapsed size should not be greater than min size");
|
|
891
|
+
if (warnings.length > 0) {
|
|
892
|
+
const name = panelId != null ? `Panel "${panelId}"` : "Panel";
|
|
893
|
+
console.warn(`${name} has an invalid configuration:\n\n${warnings.join("\n")}`);
|
|
894
|
+
return false;
|
|
1236
895
|
}
|
|
1237
|
-
}
|
|
1238
896
|
}
|
|
1239
|
-
|
|
1240
|
-
return nextLayout;
|
|
897
|
+
return true;
|
|
1241
898
|
}
|
|
1242
899
|
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
keyboardResizeByPercentage = null,
|
|
1265
|
-
keyboardResizeByPixels = null,
|
|
1266
|
-
storage = defaultStorage,
|
|
1267
|
-
style: styleFromProps,
|
|
1268
|
-
tagName: Type = "div"
|
|
1269
|
-
}) {
|
|
1270
|
-
const groupId = useUniqueId(idFromProps);
|
|
1271
|
-
const [dragState, setDragState] = useState(null);
|
|
1272
|
-
const [layout, setLayout] = useState([]);
|
|
1273
|
-
const panelIdToLastNotifiedMixedSizesMapRef = useRef({});
|
|
1274
|
-
const panelSizeBeforeCollapseRef = useRef(new Map());
|
|
1275
|
-
const prevDeltaRef = useRef(0);
|
|
1276
|
-
const committedValuesRef = useRef({
|
|
1277
|
-
autoSaveId,
|
|
1278
|
-
direction,
|
|
1279
|
-
dragState,
|
|
1280
|
-
id: groupId,
|
|
1281
|
-
keyboardResizeByPercentage,
|
|
1282
|
-
keyboardResizeByPixels,
|
|
1283
|
-
onLayout,
|
|
1284
|
-
storage
|
|
1285
|
-
});
|
|
1286
|
-
const eagerValuesRef = useRef({
|
|
1287
|
-
layout,
|
|
1288
|
-
panelDataArray: []
|
|
1289
|
-
});
|
|
1290
|
-
useRef({
|
|
1291
|
-
didLogIdAndOrderWarning: false,
|
|
1292
|
-
didLogPanelConstraintsWarning: false,
|
|
1293
|
-
prevPanelIds: []
|
|
1294
|
-
});
|
|
1295
|
-
useImperativeHandle(forwardedRef, () => ({
|
|
1296
|
-
getId: () => committedValuesRef.current.id,
|
|
1297
|
-
getLayout: () => {
|
|
1298
|
-
const {
|
|
1299
|
-
id: groupId
|
|
1300
|
-
} = committedValuesRef.current;
|
|
1301
|
-
const {
|
|
1302
|
-
layout
|
|
1303
|
-
} = eagerValuesRef.current;
|
|
1304
|
-
const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
|
|
1305
|
-
return layout.map(sizePercentage => {
|
|
1306
|
-
return {
|
|
1307
|
-
sizePercentage,
|
|
1308
|
-
sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
|
|
1309
|
-
};
|
|
1310
|
-
});
|
|
1311
|
-
},
|
|
1312
|
-
setLayout: mixedSizes => {
|
|
1313
|
-
const {
|
|
1314
|
-
id: groupId,
|
|
1315
|
-
onLayout
|
|
1316
|
-
} = committedValuesRef.current;
|
|
1317
|
-
const {
|
|
1318
|
-
layout: prevLayout,
|
|
1319
|
-
panelDataArray
|
|
1320
|
-
} = eagerValuesRef.current;
|
|
1321
|
-
const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
|
|
1322
|
-
const unsafeLayout = mixedSizes.map(mixedSize => getPercentageSizeFromMixedSizes(mixedSize, groupSizePixels));
|
|
1323
|
-
const safeLayout = validatePanelGroupLayout({
|
|
1324
|
-
groupSizePixels,
|
|
1325
|
-
layout: unsafeLayout,
|
|
1326
|
-
panelConstraints: panelDataArray.map(panelData => panelData.constraints)
|
|
1327
|
-
});
|
|
1328
|
-
if (!areEqual(prevLayout, safeLayout)) {
|
|
1329
|
-
setLayout(safeLayout);
|
|
1330
|
-
eagerValuesRef.current.layout = safeLayout;
|
|
1331
|
-
if (onLayout) {
|
|
1332
|
-
onLayout(safeLayout.map(sizePercentage => ({
|
|
1333
|
-
sizePercentage,
|
|
1334
|
-
sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
|
|
1335
|
-
})));
|
|
1336
|
-
}
|
|
1337
|
-
callPanelCallbacks(groupId, panelDataArray, safeLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
|
|
1338
|
-
}
|
|
1339
|
-
}
|
|
1340
|
-
}), []);
|
|
1341
|
-
useIsomorphicLayoutEffect(() => {
|
|
1342
|
-
committedValuesRef.current.autoSaveId = autoSaveId;
|
|
1343
|
-
committedValuesRef.current.direction = direction;
|
|
1344
|
-
committedValuesRef.current.dragState = dragState;
|
|
1345
|
-
committedValuesRef.current.id = groupId;
|
|
1346
|
-
committedValuesRef.current.onLayout = onLayout;
|
|
1347
|
-
committedValuesRef.current.storage = storage;
|
|
1348
|
-
|
|
1349
|
-
// panelDataArray and layout are updated in-sync with scheduled state updates.
|
|
1350
|
-
// TODO [217] Move these values into a separate ref
|
|
1351
|
-
});
|
|
1352
|
-
|
|
1353
|
-
useWindowSplitterPanelGroupBehavior({
|
|
1354
|
-
committedValuesRef,
|
|
1355
|
-
eagerValuesRef,
|
|
1356
|
-
groupId,
|
|
1357
|
-
layout,
|
|
1358
|
-
panelDataArray: eagerValuesRef.current.panelDataArray,
|
|
1359
|
-
setLayout
|
|
1360
|
-
});
|
|
1361
|
-
useEffect(() => {
|
|
1362
|
-
const {
|
|
1363
|
-
panelDataArray
|
|
1364
|
-
} = eagerValuesRef.current;
|
|
1365
|
-
|
|
1366
|
-
// If this panel has been configured to persist sizing information, save sizes to local storage.
|
|
1367
|
-
if (autoSaveId) {
|
|
1368
|
-
if (layout.length === 0 || layout.length !== panelDataArray.length) {
|
|
1369
|
-
return;
|
|
1370
|
-
}
|
|
1371
|
-
|
|
1372
|
-
// Limit the frequency of localStorage updates.
|
|
1373
|
-
if (!debounceMap[autoSaveId]) {
|
|
1374
|
-
debounceMap[autoSaveId] = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
|
|
1375
|
-
}
|
|
1376
|
-
debounceMap[autoSaveId](autoSaveId, panelDataArray, layout, storage);
|
|
1377
|
-
}
|
|
1378
|
-
}, [autoSaveId, layout, storage]);
|
|
1379
|
-
useIsomorphicLayoutEffect(() => {
|
|
1380
|
-
const {
|
|
1381
|
-
layout: prevLayout,
|
|
1382
|
-
panelDataArray
|
|
1383
|
-
} = eagerValuesRef.current;
|
|
1384
|
-
const constraints = panelDataArray.map(({
|
|
1385
|
-
constraints
|
|
1386
|
-
}) => constraints);
|
|
1387
|
-
if (!shouldMonitorPixelBasedConstraints(constraints)) {
|
|
1388
|
-
// Avoid the overhead of ResizeObserver if no pixel constraints require monitoring
|
|
1389
|
-
return;
|
|
1390
|
-
}
|
|
1391
|
-
if (typeof ResizeObserver === "undefined") {
|
|
1392
|
-
console.warn(`WARNING: Pixel based constraints require ResizeObserver but it is not supported by the current browser.`);
|
|
1393
|
-
} else {
|
|
1394
|
-
const resizeObserver = new ResizeObserver(() => {
|
|
1395
|
-
const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
|
|
1396
|
-
const {
|
|
1397
|
-
onLayout
|
|
1398
|
-
} = committedValuesRef.current;
|
|
1399
|
-
const nextLayout = validatePanelGroupLayout({
|
|
1400
|
-
groupSizePixels,
|
|
1401
|
-
layout: prevLayout,
|
|
1402
|
-
panelConstraints: panelDataArray.map(panelData => panelData.constraints)
|
|
1403
|
-
});
|
|
1404
|
-
if (!areEqual(prevLayout, nextLayout)) {
|
|
1405
|
-
setLayout(nextLayout);
|
|
1406
|
-
eagerValuesRef.current.layout = nextLayout;
|
|
1407
|
-
if (onLayout) {
|
|
1408
|
-
onLayout(nextLayout.map(sizePercentage => ({
|
|
1409
|
-
sizePercentage,
|
|
1410
|
-
sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
|
|
1411
|
-
})));
|
|
1412
|
-
}
|
|
1413
|
-
callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
|
|
900
|
+
|
|
901
|
+
|
|
902
|
+
|
|
903
|
+
|
|
904
|
+
|
|
905
|
+
function $aa44a0a11da9fc89$export$64432a52a1035c18({ layout: prevLayout, panelConstraints: panelConstraints }) {
|
|
906
|
+
const nextLayout = [
|
|
907
|
+
...prevLayout
|
|
908
|
+
];
|
|
909
|
+
const nextLayoutTotalSize = nextLayout.reduce((accumulated, current)=>accumulated + current, 0);
|
|
910
|
+
// Validate layout expectations
|
|
911
|
+
if (nextLayout.length !== panelConstraints.length) throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map((size)=>`${size}%`).join(", ")}`);
|
|
912
|
+
else if (!(0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(nextLayoutTotalSize, 100)) {
|
|
913
|
+
// This is not ideal so we should warn about it, but it may be recoverable in some cases
|
|
914
|
+
// (especially if the amount is small)
|
|
915
|
+
if (0, $95f7f0116122f6f8$export$df77466336fe5355) console.warn(`WARNING: Invalid layout total size: ${nextLayout.map((size)=>`${size}%`).join(", ")}. Layout normalization will be applied.`);
|
|
916
|
+
for(let index = 0; index < panelConstraints.length; index++){
|
|
917
|
+
const unsafeSize = nextLayout[index];
|
|
918
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(unsafeSize != null);
|
|
919
|
+
const safeSize = 100 / nextLayoutTotalSize * unsafeSize;
|
|
920
|
+
nextLayout[index] = safeSize;
|
|
1414
921
|
}
|
|
1415
|
-
});
|
|
1416
|
-
resizeObserver.observe(getPanelGroupElement(groupId));
|
|
1417
|
-
return () => {
|
|
1418
|
-
resizeObserver.disconnect();
|
|
1419
|
-
};
|
|
1420
922
|
}
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
onLayout
|
|
1431
|
-
} = committedValuesRef.current;
|
|
1432
|
-
const {
|
|
1433
|
-
layout: prevLayout,
|
|
1434
|
-
panelDataArray
|
|
1435
|
-
} = eagerValuesRef.current;
|
|
1436
|
-
if (panelData.constraints.collapsible) {
|
|
1437
|
-
const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
|
|
1438
|
-
const {
|
|
1439
|
-
collapsedSizePercentage,
|
|
1440
|
-
panelSizePercentage,
|
|
1441
|
-
pivotIndices,
|
|
1442
|
-
groupSizePixels
|
|
1443
|
-
} = panelDataHelper(groupId, panelDataArray, panelData, prevLayout);
|
|
1444
|
-
if (panelSizePercentage !== collapsedSizePercentage) {
|
|
1445
|
-
// Store size before collapse;
|
|
1446
|
-
// This is the size that gets restored if the expand() API is used.
|
|
1447
|
-
panelSizeBeforeCollapseRef.current.set(panelData.id, panelSizePercentage);
|
|
1448
|
-
const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
|
|
1449
|
-
const delta = isLastPanel ? panelSizePercentage - collapsedSizePercentage : collapsedSizePercentage - panelSizePercentage;
|
|
1450
|
-
const nextLayout = adjustLayoutByDelta({
|
|
1451
|
-
delta,
|
|
1452
|
-
groupSizePixels,
|
|
1453
|
-
layout: prevLayout,
|
|
1454
|
-
panelConstraints: panelConstraintsArray,
|
|
1455
|
-
pivotIndices,
|
|
1456
|
-
trigger: "imperative-api"
|
|
923
|
+
let remainingSize = 0;
|
|
924
|
+
// First pass: Validate the proposed layout given each panel's constraints
|
|
925
|
+
for(let index = 0; index < panelConstraints.length; index++){
|
|
926
|
+
const unsafeSize = nextLayout[index];
|
|
927
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(unsafeSize != null);
|
|
928
|
+
const safeSize = (0, $34bbe1da7b6ad885$export$2f98edcf4006376f)({
|
|
929
|
+
panelConstraints: panelConstraints,
|
|
930
|
+
panelIndex: index,
|
|
931
|
+
size: unsafeSize
|
|
1457
932
|
});
|
|
1458
|
-
if (
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
if (onLayout) {
|
|
1462
|
-
onLayout(nextLayout.map(sizePercentage => ({
|
|
1463
|
-
sizePercentage,
|
|
1464
|
-
sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
|
|
1465
|
-
})));
|
|
1466
|
-
}
|
|
1467
|
-
callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
|
|
933
|
+
if (unsafeSize != safeSize) {
|
|
934
|
+
remainingSize += unsafeSize - safeSize;
|
|
935
|
+
nextLayout[index] = safeSize;
|
|
1468
936
|
}
|
|
1469
|
-
}
|
|
1470
937
|
}
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
} = eagerValuesRef.current;
|
|
1482
|
-
if (panelData.constraints.collapsible) {
|
|
1483
|
-
const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
|
|
1484
|
-
const {
|
|
1485
|
-
collapsedSizePercentage,
|
|
1486
|
-
panelSizePercentage,
|
|
1487
|
-
minSizePercentage,
|
|
1488
|
-
pivotIndices,
|
|
1489
|
-
groupSizePixels
|
|
1490
|
-
} = panelDataHelper(groupId, panelDataArray, panelData, prevLayout);
|
|
1491
|
-
if (panelSizePercentage === collapsedSizePercentage) {
|
|
1492
|
-
// Restore this panel to the size it was before it was collapsed, if possible.
|
|
1493
|
-
const prevPanelSizePercentage = panelSizeBeforeCollapseRef.current.get(panelData.id);
|
|
1494
|
-
const baseSizePercentage = prevPanelSizePercentage != null && prevPanelSizePercentage >= minSizePercentage ? prevPanelSizePercentage : minSizePercentage;
|
|
1495
|
-
const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
|
|
1496
|
-
const delta = isLastPanel ? panelSizePercentage - baseSizePercentage : baseSizePercentage - panelSizePercentage;
|
|
1497
|
-
const nextLayout = adjustLayoutByDelta({
|
|
1498
|
-
delta,
|
|
1499
|
-
groupSizePixels,
|
|
1500
|
-
layout: prevLayout,
|
|
1501
|
-
panelConstraints: panelConstraintsArray,
|
|
1502
|
-
pivotIndices,
|
|
1503
|
-
trigger: "imperative-api"
|
|
938
|
+
// If there is additional, left over space, assign it to any panel(s) that permits it
|
|
939
|
+
// (It's not worth taking multiple additional passes to evenly distribute)
|
|
940
|
+
if (!(0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(remainingSize, 0)) for(let index = 0; index < panelConstraints.length; index++){
|
|
941
|
+
const prevSize = nextLayout[index];
|
|
942
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(prevSize != null);
|
|
943
|
+
const unsafeSize = prevSize + remainingSize;
|
|
944
|
+
const safeSize = (0, $34bbe1da7b6ad885$export$2f98edcf4006376f)({
|
|
945
|
+
panelConstraints: panelConstraints,
|
|
946
|
+
panelIndex: index,
|
|
947
|
+
size: unsafeSize
|
|
1504
948
|
});
|
|
1505
|
-
if (
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
sizePercentage,
|
|
1511
|
-
sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
|
|
1512
|
-
})));
|
|
1513
|
-
}
|
|
1514
|
-
callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
|
|
949
|
+
if (prevSize !== safeSize) {
|
|
950
|
+
remainingSize -= safeSize - prevSize;
|
|
951
|
+
nextLayout[index] = safeSize;
|
|
952
|
+
// Once we've used up the remainder, bail
|
|
953
|
+
if ((0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(remainingSize, 0)) break;
|
|
1515
954
|
}
|
|
1516
|
-
}
|
|
1517
|
-
}
|
|
1518
|
-
}, [groupId]);
|
|
1519
|
-
|
|
1520
|
-
// External APIs are safe to memoize via committed values ref
|
|
1521
|
-
const getPanelSize = useCallback(panelData => {
|
|
1522
|
-
const {
|
|
1523
|
-
layout,
|
|
1524
|
-
panelDataArray
|
|
1525
|
-
} = eagerValuesRef.current;
|
|
1526
|
-
const {
|
|
1527
|
-
panelSizePercentage,
|
|
1528
|
-
panelSizePixels
|
|
1529
|
-
} = panelDataHelper(groupId, panelDataArray, panelData, layout);
|
|
1530
|
-
return {
|
|
1531
|
-
sizePercentage: panelSizePercentage,
|
|
1532
|
-
sizePixels: panelSizePixels
|
|
1533
|
-
};
|
|
1534
|
-
}, [groupId]);
|
|
1535
|
-
|
|
1536
|
-
// This API should never read from committedValuesRef
|
|
1537
|
-
const getPanelStyle = useCallback(panelData => {
|
|
1538
|
-
const {
|
|
1539
|
-
panelDataArray
|
|
1540
|
-
} = eagerValuesRef.current;
|
|
1541
|
-
const panelIndex = panelDataArray.indexOf(panelData);
|
|
1542
|
-
return computePanelFlexBoxStyle({
|
|
1543
|
-
dragState,
|
|
1544
|
-
layout,
|
|
1545
|
-
panelData: panelDataArray,
|
|
1546
|
-
panelIndex
|
|
1547
|
-
});
|
|
1548
|
-
}, [dragState, layout]);
|
|
1549
|
-
|
|
1550
|
-
// External APIs are safe to memoize via committed values ref
|
|
1551
|
-
const isPanelCollapsed = useCallback(panelData => {
|
|
1552
|
-
const {
|
|
1553
|
-
layout,
|
|
1554
|
-
panelDataArray
|
|
1555
|
-
} = eagerValuesRef.current;
|
|
1556
|
-
const {
|
|
1557
|
-
collapsedSizePercentage,
|
|
1558
|
-
collapsible,
|
|
1559
|
-
panelSizePercentage
|
|
1560
|
-
} = panelDataHelper(groupId, panelDataArray, panelData, layout);
|
|
1561
|
-
return collapsible === true && panelSizePercentage === collapsedSizePercentage;
|
|
1562
|
-
}, [groupId]);
|
|
1563
|
-
|
|
1564
|
-
// External APIs are safe to memoize via committed values ref
|
|
1565
|
-
const isPanelExpanded = useCallback(panelData => {
|
|
1566
|
-
const {
|
|
1567
|
-
layout,
|
|
1568
|
-
panelDataArray
|
|
1569
|
-
} = eagerValuesRef.current;
|
|
1570
|
-
const {
|
|
1571
|
-
collapsedSizePercentage,
|
|
1572
|
-
collapsible,
|
|
1573
|
-
panelSizePercentage
|
|
1574
|
-
} = panelDataHelper(groupId, panelDataArray, panelData, layout);
|
|
1575
|
-
return !collapsible || panelSizePercentage > collapsedSizePercentage;
|
|
1576
|
-
}, [groupId]);
|
|
1577
|
-
const registerPanel = useCallback(panelData => {
|
|
1578
|
-
const {
|
|
1579
|
-
autoSaveId,
|
|
1580
|
-
id: groupId,
|
|
1581
|
-
onLayout,
|
|
1582
|
-
storage
|
|
1583
|
-
} = committedValuesRef.current;
|
|
1584
|
-
const {
|
|
1585
|
-
layout: prevLayout,
|
|
1586
|
-
panelDataArray
|
|
1587
|
-
} = eagerValuesRef.current;
|
|
1588
|
-
panelDataArray.push(panelData);
|
|
1589
|
-
panelDataArray.sort((panelA, panelB) => {
|
|
1590
|
-
const orderA = panelA.order;
|
|
1591
|
-
const orderB = panelB.order;
|
|
1592
|
-
if (orderA == null && orderB == null) {
|
|
1593
|
-
return 0;
|
|
1594
|
-
} else if (orderA == null) {
|
|
1595
|
-
return -1;
|
|
1596
|
-
} else if (orderB == null) {
|
|
1597
|
-
return 1;
|
|
1598
|
-
} else {
|
|
1599
|
-
return orderA - orderB;
|
|
1600
|
-
}
|
|
1601
|
-
});
|
|
1602
|
-
|
|
1603
|
-
// Wait until all panels have registered before we try to compute layout;
|
|
1604
|
-
// doing it earlier is both wasteful and may trigger misleading warnings in development mode.
|
|
1605
|
-
const panelElements = getPanelElementsForGroup(groupId);
|
|
1606
|
-
if (panelElements.length !== panelDataArray.length) {
|
|
1607
|
-
return;
|
|
1608
955
|
}
|
|
956
|
+
return nextLayout;
|
|
957
|
+
}
|
|
1609
958
|
|
|
1610
|
-
// If this panel has been configured to persist sizing information,
|
|
1611
|
-
// default size should be restored from local storage if possible.
|
|
1612
|
-
let unsafeLayout = null;
|
|
1613
|
-
if (autoSaveId) {
|
|
1614
|
-
unsafeLayout = loadPanelLayout(autoSaveId, panelDataArray, storage);
|
|
1615
|
-
}
|
|
1616
|
-
const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
|
|
1617
|
-
if (groupSizePixels <= 0) {
|
|
1618
|
-
if (shouldMonitorPixelBasedConstraints(panelDataArray.map(({
|
|
1619
|
-
constraints
|
|
1620
|
-
}) => constraints))) {
|
|
1621
|
-
// Wait until the group has rendered a non-zero size before computing layout.
|
|
1622
|
-
return;
|
|
1623
|
-
}
|
|
1624
|
-
}
|
|
1625
|
-
if (unsafeLayout == null) {
|
|
1626
|
-
unsafeLayout = calculateUnsafeDefaultLayout({
|
|
1627
|
-
groupSizePixels,
|
|
1628
|
-
panelDataArray
|
|
1629
|
-
});
|
|
1630
|
-
}
|
|
1631
959
|
|
|
1632
|
-
// Validate even saved layouts in case something has changed since last render
|
|
1633
|
-
// e.g. for pixel groups, this could be the size of the window
|
|
1634
|
-
const nextLayout = validatePanelGroupLayout({
|
|
1635
|
-
groupSizePixels,
|
|
1636
|
-
layout: unsafeLayout,
|
|
1637
|
-
panelConstraints: panelDataArray.map(panelData => panelData.constraints)
|
|
1638
|
-
});
|
|
1639
960
|
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
|
|
1650
|
-
})));
|
|
1651
|
-
}
|
|
1652
|
-
callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
|
|
961
|
+
const $cec4cafe75f3db78$var$LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
|
|
962
|
+
const $cec4cafe75f3db78$var$defaultStorage = {
|
|
963
|
+
getItem: (name)=>{
|
|
964
|
+
(0, $75a06c6e1ca05a58$export$cb0adc12c8406347)($cec4cafe75f3db78$var$defaultStorage);
|
|
965
|
+
return $cec4cafe75f3db78$var$defaultStorage.getItem(name);
|
|
966
|
+
},
|
|
967
|
+
setItem: (name, value)=>{
|
|
968
|
+
(0, $75a06c6e1ca05a58$export$cb0adc12c8406347)($cec4cafe75f3db78$var$defaultStorage);
|
|
969
|
+
$cec4cafe75f3db78$var$defaultStorage.setItem(name, value);
|
|
1653
970
|
}
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
971
|
+
};
|
|
972
|
+
const $cec4cafe75f3db78$var$debounceMap = {};
|
|
973
|
+
function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSaveId = null, children: children, className: classNameFromProps = "", direction: direction, forwardedRef: forwardedRef, id: idFromProps = null, onLayout: onLayout = null, keyboardResizeBy: keyboardResizeBy = null, storage: storage = $cec4cafe75f3db78$var$defaultStorage, style: styleFromProps, tagName: Type = "div", ...rest }) {
|
|
974
|
+
const groupId = (0, $b1693d8d8f570e9c$export$2e2bcd8739ae039)(idFromProps);
|
|
975
|
+
const [dragState, setDragState] = (0, $6e687094f9ca8395$export$60241385465d0a34)(null);
|
|
976
|
+
const [layout, setLayout] = (0, $6e687094f9ca8395$export$60241385465d0a34)([]);
|
|
977
|
+
const panelIdToLastNotifiedSizeMapRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({});
|
|
978
|
+
const panelSizeBeforeCollapseRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)(new Map());
|
|
979
|
+
const prevDeltaRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)(0);
|
|
980
|
+
const committedValuesRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
|
|
981
|
+
autoSaveId: autoSaveId,
|
|
982
|
+
direction: direction,
|
|
983
|
+
dragState: dragState,
|
|
1661
984
|
id: groupId,
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
layout:
|
|
1668
|
-
panelDataArray
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
985
|
+
keyboardResizeBy: keyboardResizeBy,
|
|
986
|
+
onLayout: onLayout,
|
|
987
|
+
storage: storage
|
|
988
|
+
});
|
|
989
|
+
const eagerValuesRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
|
|
990
|
+
layout: layout,
|
|
991
|
+
panelDataArray: []
|
|
992
|
+
});
|
|
993
|
+
const devWarningsRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
|
|
994
|
+
didLogIdAndOrderWarning: false,
|
|
995
|
+
didLogPanelConstraintsWarning: false,
|
|
996
|
+
prevPanelIds: []
|
|
997
|
+
});
|
|
998
|
+
(0, $6e687094f9ca8395$export$d5a552a76deda3c2)(forwardedRef, ()=>({
|
|
999
|
+
getId: ()=>committedValuesRef.current.id,
|
|
1000
|
+
getLayout: ()=>{
|
|
1001
|
+
const { layout: layout } = eagerValuesRef.current;
|
|
1002
|
+
return layout;
|
|
1003
|
+
},
|
|
1004
|
+
setLayout: (unsafeLayout)=>{
|
|
1005
|
+
const { onLayout: onLayout } = committedValuesRef.current;
|
|
1006
|
+
const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
|
|
1007
|
+
const safeLayout = (0, $aa44a0a11da9fc89$export$64432a52a1035c18)({
|
|
1008
|
+
layout: unsafeLayout,
|
|
1009
|
+
panelConstraints: panelDataArray.map((panelData)=>panelData.constraints)
|
|
1010
|
+
});
|
|
1011
|
+
if (!(0, $d31ef7445a11a6c5$export$b141efd0b0fb9174)(prevLayout, safeLayout)) {
|
|
1012
|
+
setLayout(safeLayout);
|
|
1013
|
+
eagerValuesRef.current.layout = safeLayout;
|
|
1014
|
+
if (onLayout) onLayout(safeLayout);
|
|
1015
|
+
(0, $3c80a05711c0e5f5$export$b8e48269e4faa934)(panelDataArray, safeLayout, panelIdToLastNotifiedSizeMapRef.current);
|
|
1016
|
+
}
|
|
1017
|
+
}
|
|
1018
|
+
}), []);
|
|
1019
|
+
(0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
|
|
1020
|
+
committedValuesRef.current.autoSaveId = autoSaveId;
|
|
1021
|
+
committedValuesRef.current.direction = direction;
|
|
1022
|
+
committedValuesRef.current.dragState = dragState;
|
|
1023
|
+
committedValuesRef.current.id = groupId;
|
|
1024
|
+
committedValuesRef.current.onLayout = onLayout;
|
|
1025
|
+
committedValuesRef.current.storage = storage;
|
|
1026
|
+
});
|
|
1027
|
+
(0, $c682b4ad8fc26d8e$export$d9fcbe062527d159)({
|
|
1028
|
+
committedValuesRef: committedValuesRef,
|
|
1029
|
+
eagerValuesRef: eagerValuesRef,
|
|
1030
|
+
groupId: groupId,
|
|
1031
|
+
layout: layout,
|
|
1032
|
+
panelDataArray: eagerValuesRef.current.panelDataArray,
|
|
1033
|
+
setLayout: setLayout
|
|
1034
|
+
});
|
|
1035
|
+
(0, $6e687094f9ca8395$export$6d9c69b0de29b591)(()=>{
|
|
1036
|
+
const { panelDataArray: panelDataArray } = eagerValuesRef.current;
|
|
1037
|
+
// If this panel has been configured to persist sizing information, save sizes to local storage.
|
|
1038
|
+
if (autoSaveId) {
|
|
1039
|
+
if (layout.length === 0 || layout.length !== panelDataArray.length) return;
|
|
1040
|
+
let debouncedSave = $cec4cafe75f3db78$var$debounceMap[autoSaveId];
|
|
1041
|
+
// Limit the frequency of localStorage updates.
|
|
1042
|
+
if (debouncedSave == null) {
|
|
1043
|
+
debouncedSave = (0, $2e8572579e31d898$export$2e2bcd8739ae039)((0, $f9cb001fbb908626$export$af183b313c61be4f), $cec4cafe75f3db78$var$LOCAL_STORAGE_DEBOUNCE_INTERVAL);
|
|
1044
|
+
$cec4cafe75f3db78$var$debounceMap[autoSaveId] = debouncedSave;
|
|
1716
1045
|
}
|
|
1717
|
-
|
|
1718
|
-
// Reset the cursor style to the the normal resize cursor.
|
|
1719
|
-
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
|
|
1720
|
-
}
|
|
1046
|
+
debouncedSave(autoSaveId, panelDataArray, layout, storage);
|
|
1721
1047
|
}
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1048
|
+
}, [
|
|
1049
|
+
autoSaveId,
|
|
1050
|
+
layout,
|
|
1051
|
+
storage
|
|
1052
|
+
]);
|
|
1053
|
+
// DEV warnings
|
|
1054
|
+
(0, $6e687094f9ca8395$export$6d9c69b0de29b591)(()=>{
|
|
1055
|
+
if (0, $95f7f0116122f6f8$export$df77466336fe5355) {
|
|
1056
|
+
const { panelDataArray: panelDataArray } = eagerValuesRef.current;
|
|
1057
|
+
const { didLogIdAndOrderWarning: didLogIdAndOrderWarning, didLogPanelConstraintsWarning: didLogPanelConstraintsWarning, prevPanelIds: prevPanelIds } = devWarningsRef.current;
|
|
1058
|
+
if (!didLogIdAndOrderWarning) {
|
|
1059
|
+
const panelIds = panelDataArray.map(({ id: id })=>id);
|
|
1060
|
+
devWarningsRef.current.prevPanelIds = panelIds;
|
|
1061
|
+
const panelsHaveChanged = prevPanelIds.length > 0 && !(0, $d31ef7445a11a6c5$export$b141efd0b0fb9174)(prevPanelIds, panelIds);
|
|
1062
|
+
if (panelsHaveChanged) {
|
|
1063
|
+
if (panelDataArray.find(({ idIsFromProps: idIsFromProps, order: order })=>!idIsFromProps || order == null)) {
|
|
1064
|
+
devWarningsRef.current.didLogIdAndOrderWarning = true;
|
|
1065
|
+
console.warn(`WARNING: Panel id and order props recommended when panels are dynamically rendered`);
|
|
1066
|
+
}
|
|
1067
|
+
}
|
|
1068
|
+
}
|
|
1069
|
+
if (!didLogPanelConstraintsWarning) {
|
|
1070
|
+
const panelConstraints = panelDataArray.map((panelData)=>panelData.constraints);
|
|
1071
|
+
for(let panelIndex = 0; panelIndex < panelConstraints.length; panelIndex++){
|
|
1072
|
+
const panelData = panelDataArray[panelIndex];
|
|
1073
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelData);
|
|
1074
|
+
const isValid = (0, $0531c662514b8c6a$export$d00cfefa2c395b39)({
|
|
1075
|
+
panelConstraints: panelConstraints,
|
|
1076
|
+
panelId: panelData.id,
|
|
1077
|
+
panelIndex: panelIndex
|
|
1078
|
+
});
|
|
1079
|
+
if (!isValid) {
|
|
1080
|
+
devWarningsRef.current.didLogPanelConstraintsWarning = true;
|
|
1081
|
+
break;
|
|
1082
|
+
}
|
|
1083
|
+
}
|
|
1084
|
+
}
|
|
1731
1085
|
}
|
|
1732
|
-
callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
|
|
1733
|
-
}
|
|
1734
|
-
};
|
|
1735
|
-
}, []);
|
|
1736
|
-
|
|
1737
|
-
// External APIs are safe to memoize via committed values ref
|
|
1738
|
-
const resizePanel = useCallback((panelData, mixedSizes) => {
|
|
1739
|
-
const {
|
|
1740
|
-
onLayout
|
|
1741
|
-
} = committedValuesRef.current;
|
|
1742
|
-
const {
|
|
1743
|
-
layout: prevLayout,
|
|
1744
|
-
panelDataArray
|
|
1745
|
-
} = eagerValuesRef.current;
|
|
1746
|
-
const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
|
|
1747
|
-
const {
|
|
1748
|
-
groupSizePixels,
|
|
1749
|
-
panelSizePercentage,
|
|
1750
|
-
pivotIndices
|
|
1751
|
-
} = panelDataHelper(groupId, panelDataArray, panelData, prevLayout);
|
|
1752
|
-
const sizePercentage = getPercentageSizeFromMixedSizes(mixedSizes, groupSizePixels);
|
|
1753
|
-
const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
|
|
1754
|
-
const delta = isLastPanel ? panelSizePercentage - sizePercentage : sizePercentage - panelSizePercentage;
|
|
1755
|
-
const nextLayout = adjustLayoutByDelta({
|
|
1756
|
-
delta,
|
|
1757
|
-
groupSizePixels,
|
|
1758
|
-
layout: prevLayout,
|
|
1759
|
-
panelConstraints: panelConstraintsArray,
|
|
1760
|
-
pivotIndices,
|
|
1761
|
-
trigger: "imperative-api"
|
|
1762
|
-
});
|
|
1763
|
-
if (!compareLayouts(prevLayout, nextLayout)) {
|
|
1764
|
-
setLayout(nextLayout);
|
|
1765
|
-
eagerValuesRef.current.layout = nextLayout;
|
|
1766
|
-
if (onLayout) {
|
|
1767
|
-
onLayout(nextLayout.map(sizePercentage => ({
|
|
1768
|
-
sizePercentage,
|
|
1769
|
-
sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
|
|
1770
|
-
})));
|
|
1771
|
-
}
|
|
1772
|
-
callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
|
|
1773
|
-
}
|
|
1774
|
-
}, [groupId]);
|
|
1775
|
-
const startDragging = useCallback((dragHandleId, event) => {
|
|
1776
|
-
const {
|
|
1777
|
-
direction
|
|
1778
|
-
} = committedValuesRef.current;
|
|
1779
|
-
const {
|
|
1780
|
-
layout
|
|
1781
|
-
} = eagerValuesRef.current;
|
|
1782
|
-
const handleElement = getResizeHandleElement(dragHandleId);
|
|
1783
|
-
const initialCursorPosition = getResizeEventCursorPosition(direction, event);
|
|
1784
|
-
setDragState({
|
|
1785
|
-
dragHandleId,
|
|
1786
|
-
dragHandleRect: handleElement.getBoundingClientRect(),
|
|
1787
|
-
initialCursorPosition,
|
|
1788
|
-
initialLayout: layout
|
|
1789
1086
|
});
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
// This is more efficient and avoids misleading warnings in development mode.
|
|
1819
|
-
// We can't check the DOM to detect this because Panel elements have not yet been removed.
|
|
1820
|
-
unregisterPanelRef.current.timeout = setTimeout(() => {
|
|
1821
|
-
const {
|
|
1822
|
-
pendingPanelIds
|
|
1823
|
-
} = unregisterPanelRef.current;
|
|
1824
|
-
const map = panelIdToLastNotifiedMixedSizesMapRef.current;
|
|
1825
|
-
|
|
1826
|
-
// TRICKY
|
|
1827
|
-
// Strict effects mode
|
|
1828
|
-
let unmountDueToStrictMode = false;
|
|
1829
|
-
pendingPanelIds.forEach(panelId => {
|
|
1830
|
-
pendingPanelIds.delete(panelId);
|
|
1831
|
-
if (panelDataArray.find(({
|
|
1832
|
-
id
|
|
1833
|
-
}) => id === panelId) == null) {
|
|
1834
|
-
unmountDueToStrictMode = true;
|
|
1835
|
-
|
|
1836
|
-
// TRICKY
|
|
1837
|
-
// When a panel is removed from the group, we should delete the most recent prev-size entry for it.
|
|
1838
|
-
// If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
|
|
1839
|
-
// Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
|
|
1840
|
-
delete map[panelData.id];
|
|
1087
|
+
// External APIs are safe to memoize via committed values ref
|
|
1088
|
+
const collapsePanel = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData)=>{
|
|
1089
|
+
const { onLayout: onLayout } = committedValuesRef.current;
|
|
1090
|
+
const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
|
|
1091
|
+
if (panelData.constraints.collapsible) {
|
|
1092
|
+
const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
|
|
1093
|
+
const { collapsedSize: collapsedSize = 0, panelSize: panelSize, pivotIndices: pivotIndices } = $cec4cafe75f3db78$var$panelDataHelper(panelDataArray, panelData, prevLayout);
|
|
1094
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelSize != null);
|
|
1095
|
+
if (panelSize !== collapsedSize) {
|
|
1096
|
+
// Store size before collapse;
|
|
1097
|
+
// This is the size that gets restored if the expand() API is used.
|
|
1098
|
+
panelSizeBeforeCollapseRef.current.set(panelData.id, panelSize);
|
|
1099
|
+
const isLastPanel = $cec4cafe75f3db78$var$findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
|
|
1100
|
+
const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
|
|
1101
|
+
const nextLayout = (0, $0c110d593c066642$export$7fead5cc734d205b)({
|
|
1102
|
+
delta: delta,
|
|
1103
|
+
layout: prevLayout,
|
|
1104
|
+
panelConstraints: panelConstraintsArray,
|
|
1105
|
+
pivotIndices: pivotIndices,
|
|
1106
|
+
trigger: "imperative-api"
|
|
1107
|
+
});
|
|
1108
|
+
if (!(0, $11f1460202e20b00$export$a10903e2e57656c1)(prevLayout, nextLayout)) {
|
|
1109
|
+
setLayout(nextLayout);
|
|
1110
|
+
eagerValuesRef.current.layout = nextLayout;
|
|
1111
|
+
if (onLayout) onLayout(nextLayout);
|
|
1112
|
+
(0, $3c80a05711c0e5f5$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
|
|
1113
|
+
}
|
|
1114
|
+
}
|
|
1841
1115
|
}
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
|
|
1116
|
+
}, []);
|
|
1117
|
+
// External APIs are safe to memoize via committed values ref
|
|
1118
|
+
const expandPanel = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData)=>{
|
|
1119
|
+
const { onLayout: onLayout } = committedValuesRef.current;
|
|
1120
|
+
const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
|
|
1121
|
+
if (panelData.constraints.collapsible) {
|
|
1122
|
+
const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
|
|
1123
|
+
const { collapsedSize: collapsedSize = 0, panelSize: panelSize, minSize: minSize = 0, pivotIndices: pivotIndices } = $cec4cafe75f3db78$var$panelDataHelper(panelDataArray, panelData, prevLayout);
|
|
1124
|
+
if (panelSize === collapsedSize) {
|
|
1125
|
+
// Restore this panel to the size it was before it was collapsed, if possible.
|
|
1126
|
+
const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
|
|
1127
|
+
const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
|
|
1128
|
+
const isLastPanel = $cec4cafe75f3db78$var$findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
|
|
1129
|
+
const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
|
|
1130
|
+
const nextLayout = (0, $0c110d593c066642$export$7fead5cc734d205b)({
|
|
1131
|
+
delta: delta,
|
|
1132
|
+
layout: prevLayout,
|
|
1133
|
+
panelConstraints: panelConstraintsArray,
|
|
1134
|
+
pivotIndices: pivotIndices,
|
|
1135
|
+
trigger: "imperative-api"
|
|
1136
|
+
});
|
|
1137
|
+
if (!(0, $11f1460202e20b00$export$a10903e2e57656c1)(prevLayout, nextLayout)) {
|
|
1138
|
+
setLayout(nextLayout);
|
|
1139
|
+
eagerValuesRef.current.layout = nextLayout;
|
|
1140
|
+
if (onLayout) onLayout(nextLayout);
|
|
1141
|
+
(0, $3c80a05711c0e5f5$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
|
|
1142
|
+
}
|
|
1143
|
+
}
|
|
1144
|
+
}
|
|
1145
|
+
}, []);
|
|
1146
|
+
// External APIs are safe to memoize via committed values ref
|
|
1147
|
+
const getPanelSize = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData)=>{
|
|
1148
|
+
const { layout: layout, panelDataArray: panelDataArray } = eagerValuesRef.current;
|
|
1149
|
+
const { panelSize: panelSize } = $cec4cafe75f3db78$var$panelDataHelper(panelDataArray, panelData, layout);
|
|
1150
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelSize != null);
|
|
1151
|
+
return panelSize;
|
|
1152
|
+
}, []);
|
|
1153
|
+
// This API should never read from committedValuesRef
|
|
1154
|
+
const getPanelStyle = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData)=>{
|
|
1155
|
+
const { panelDataArray: panelDataArray } = eagerValuesRef.current;
|
|
1156
|
+
const panelIndex = $cec4cafe75f3db78$var$findPanelDataIndex(panelDataArray, panelData);
|
|
1157
|
+
return (0, $dd3efaf0847631d3$export$fc25f3248e61edf5)({
|
|
1158
|
+
dragState: dragState,
|
|
1159
|
+
layout: layout,
|
|
1160
|
+
panelData: panelDataArray,
|
|
1161
|
+
panelIndex: panelIndex
|
|
1162
|
+
});
|
|
1163
|
+
}, [
|
|
1164
|
+
dragState,
|
|
1165
|
+
layout
|
|
1166
|
+
]);
|
|
1167
|
+
// External APIs are safe to memoize via committed values ref
|
|
1168
|
+
const isPanelCollapsed = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData)=>{
|
|
1169
|
+
const { layout: layout, panelDataArray: panelDataArray } = eagerValuesRef.current;
|
|
1170
|
+
const { collapsedSize: collapsedSize, collapsible: collapsible, panelSize: panelSize } = $cec4cafe75f3db78$var$panelDataHelper(panelDataArray, panelData, layout);
|
|
1171
|
+
return collapsible === true && panelSize === collapsedSize;
|
|
1172
|
+
}, []);
|
|
1173
|
+
// External APIs are safe to memoize via committed values ref
|
|
1174
|
+
const isPanelExpanded = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData)=>{
|
|
1175
|
+
const { layout: layout, panelDataArray: panelDataArray } = eagerValuesRef.current;
|
|
1176
|
+
const { collapsedSize: collapsedSize = 0, collapsible: collapsible, panelSize: panelSize } = $cec4cafe75f3db78$var$panelDataHelper(panelDataArray, panelData, layout);
|
|
1177
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelSize != null);
|
|
1178
|
+
return !collapsible || panelSize > collapsedSize;
|
|
1179
|
+
}, []);
|
|
1180
|
+
const registerPanel = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData)=>{
|
|
1181
|
+
const { autoSaveId: autoSaveId, id: groupId, onLayout: onLayout, storage: storage } = committedValuesRef.current;
|
|
1182
|
+
const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
|
|
1183
|
+
// HACK
|
|
1184
|
+
// This appears to be triggered by some React Suspense+Offscreen+StrictMode bug;
|
|
1185
|
+
// see app.replay.io/recording/17b6e11d-4500-4173-b23d-61dfd141fed1
|
|
1186
|
+
const index = $cec4cafe75f3db78$var$findPanelDataIndex(panelDataArray, panelData);
|
|
1187
|
+
if (index >= 0) {
|
|
1188
|
+
if (panelData.idIsFromProps) console.warn(`Panel with id "${panelData.id}" registered twice`);
|
|
1189
|
+
else console.warn(`Panel registered twice`);
|
|
1190
|
+
return;
|
|
1191
|
+
}
|
|
1192
|
+
panelDataArray.push(panelData);
|
|
1193
|
+
panelDataArray.sort((panelA, panelB)=>{
|
|
1194
|
+
const orderA = panelA.order;
|
|
1195
|
+
const orderB = panelB.order;
|
|
1196
|
+
if (orderA == null && orderB == null) return 0;
|
|
1197
|
+
else if (orderA == null) return -1;
|
|
1198
|
+
else if (orderB == null) return 1;
|
|
1199
|
+
else return orderA - orderB;
|
|
1200
|
+
});
|
|
1201
|
+
// Wait until all panels have registered before we try to compute layout;
|
|
1202
|
+
// doing it earlier is both wasteful and may trigger misleading warnings in development mode.
|
|
1203
|
+
const panelElements = (0, $3ffc7498c21f3969$export$80bbb698e7429afe)(groupId);
|
|
1204
|
+
if (panelElements.length !== panelDataArray.length) return;
|
|
1205
|
+
// If this panel has been configured to persist sizing information,
|
|
1206
|
+
// default size should be restored from local storage if possible.
|
|
1207
|
+
let unsafeLayout = null;
|
|
1208
|
+
if (autoSaveId) unsafeLayout = (0, $f9cb001fbb908626$export$9c80c6617f0386da)(autoSaveId, panelDataArray, storage);
|
|
1209
|
+
if (unsafeLayout == null) unsafeLayout = (0, $17c359958d4c9de7$export$47337a21c443778e)({
|
|
1210
|
+
panelDataArray: panelDataArray
|
|
1211
|
+
});
|
|
1212
|
+
// Validate even saved layouts in case something has changed since last render
|
|
1213
|
+
// e.g. for pixel groups, this could be the size of the window
|
|
1214
|
+
const nextLayout = (0, $aa44a0a11da9fc89$export$64432a52a1035c18)({
|
|
1215
|
+
layout: unsafeLayout,
|
|
1216
|
+
panelConstraints: panelDataArray.map((panelData)=>panelData.constraints)
|
|
1217
|
+
});
|
|
1218
|
+
// Offscreen mode makes this a bit weird;
|
|
1219
|
+
// Panels unregister when hidden and re-register when shown again,
|
|
1220
|
+
// but the overall layout doesn't change between these two cases.
|
|
1864
1221
|
setLayout(nextLayout);
|
|
1865
1222
|
eagerValuesRef.current.layout = nextLayout;
|
|
1866
|
-
if (
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
|
|
1870
|
-
})));
|
|
1223
|
+
if (!(0, $d31ef7445a11a6c5$export$b141efd0b0fb9174)(prevLayout, nextLayout)) {
|
|
1224
|
+
if (onLayout) onLayout(nextLayout);
|
|
1225
|
+
(0, $3c80a05711c0e5f5$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
|
|
1871
1226
|
}
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1227
|
+
}, []);
|
|
1228
|
+
const registerResizeHandle = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((dragHandleId)=>{
|
|
1229
|
+
return function resizeHandler(event) {
|
|
1230
|
+
event.preventDefault();
|
|
1231
|
+
const { direction: direction, dragState: dragState, id: groupId, keyboardResizeBy: keyboardResizeBy, onLayout: onLayout } = committedValuesRef.current;
|
|
1232
|
+
const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
|
|
1233
|
+
const { initialLayout: initialLayout } = dragState !== null && dragState !== void 0 ? dragState : {};
|
|
1234
|
+
const pivotIndices = (0, $28ee5ac1ce973de1$export$cf92598869f99b8f)(groupId, dragHandleId);
|
|
1235
|
+
let delta = (0, $6c41c8262084553c$export$b08134b65f9db46a)(event, dragHandleId, direction, dragState, keyboardResizeBy);
|
|
1236
|
+
if (delta === 0) return;
|
|
1237
|
+
// Support RTL layouts
|
|
1238
|
+
const isHorizontal = direction === "horizontal";
|
|
1239
|
+
if (document.dir === "rtl" && isHorizontal) delta = -delta;
|
|
1240
|
+
const panelConstraints = panelDataArray.map((panelData)=>panelData.constraints);
|
|
1241
|
+
const nextLayout = (0, $0c110d593c066642$export$7fead5cc734d205b)({
|
|
1242
|
+
delta: delta,
|
|
1243
|
+
layout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
|
|
1244
|
+
panelConstraints: panelConstraints,
|
|
1245
|
+
pivotIndices: pivotIndices,
|
|
1246
|
+
trigger: (0, $601a2b3c71af04bb$export$e7bf60a870f429b0)(event) ? "keyboard" : "mouse-or-touch"
|
|
1247
|
+
});
|
|
1248
|
+
const layoutChanged = !(0, $11f1460202e20b00$export$a10903e2e57656c1)(prevLayout, nextLayout);
|
|
1249
|
+
// Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
|
|
1250
|
+
// Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
|
|
1251
|
+
if ((0, $601a2b3c71af04bb$export$764db16956f554f8)(event) || (0, $601a2b3c71af04bb$export$c4dfce035d43d1e0)(event)) // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
|
|
1252
|
+
// In this case, Panel sizes might not change–
|
|
1253
|
+
// but updating cursor in this scenario would cause a flicker.
|
|
1254
|
+
{
|
|
1255
|
+
if (prevDeltaRef.current != delta) {
|
|
1256
|
+
prevDeltaRef.current = delta;
|
|
1257
|
+
if (!layoutChanged) {
|
|
1258
|
+
// If the pointer has moved too far to resize the panel any further,
|
|
1259
|
+
// update the cursor style for a visual clue.
|
|
1260
|
+
// This mimics VS Code behavior.
|
|
1261
|
+
if (isHorizontal) (0, $08745f7373322b05$export$d395b5dfd066a659)(delta < 0 ? "horizontal-min" : "horizontal-max");
|
|
1262
|
+
else (0, $08745f7373322b05$export$d395b5dfd066a659)(delta < 0 ? "vertical-min" : "vertical-max");
|
|
1263
|
+
} else // Reset the cursor style to the the normal resize cursor.
|
|
1264
|
+
(0, $08745f7373322b05$export$d395b5dfd066a659)(isHorizontal ? "horizontal" : "vertical");
|
|
1265
|
+
}
|
|
1266
|
+
}
|
|
1267
|
+
if (layoutChanged) {
|
|
1268
|
+
setLayout(nextLayout);
|
|
1269
|
+
eagerValuesRef.current.layout = nextLayout;
|
|
1270
|
+
if (onLayout) onLayout(nextLayout);
|
|
1271
|
+
(0, $3c80a05711c0e5f5$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
|
|
1272
|
+
}
|
|
1273
|
+
};
|
|
1274
|
+
}, []);
|
|
1275
|
+
// External APIs are safe to memoize via committed values ref
|
|
1276
|
+
const resizePanel = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData, unsafePanelSize)=>{
|
|
1277
|
+
const { onLayout: onLayout } = committedValuesRef.current;
|
|
1278
|
+
const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
|
|
1279
|
+
const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
|
|
1280
|
+
const { panelSize: panelSize, pivotIndices: pivotIndices } = $cec4cafe75f3db78$var$panelDataHelper(panelDataArray, panelData, prevLayout);
|
|
1281
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelSize != null);
|
|
1282
|
+
const isLastPanel = $cec4cafe75f3db78$var$findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
|
|
1283
|
+
const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
|
|
1284
|
+
const nextLayout = (0, $0c110d593c066642$export$7fead5cc734d205b)({
|
|
1285
|
+
delta: delta,
|
|
1286
|
+
layout: prevLayout,
|
|
1287
|
+
panelConstraints: panelConstraintsArray,
|
|
1288
|
+
pivotIndices: pivotIndices,
|
|
1289
|
+
trigger: "imperative-api"
|
|
1290
|
+
});
|
|
1291
|
+
if (!(0, $11f1460202e20b00$export$a10903e2e57656c1)(prevLayout, nextLayout)) {
|
|
1292
|
+
setLayout(nextLayout);
|
|
1293
|
+
eagerValuesRef.current.layout = nextLayout;
|
|
1294
|
+
if (onLayout) onLayout(nextLayout);
|
|
1295
|
+
(0, $3c80a05711c0e5f5$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
|
|
1296
|
+
}
|
|
1297
|
+
}, []);
|
|
1298
|
+
const startDragging = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((dragHandleId, event)=>{
|
|
1299
|
+
const { direction: direction } = committedValuesRef.current;
|
|
1300
|
+
const { layout: layout } = eagerValuesRef.current;
|
|
1301
|
+
const handleElement = (0, $58762ed3a79a85a2$export$4c5229c874a62620)(dragHandleId);
|
|
1302
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(handleElement);
|
|
1303
|
+
const initialCursorPosition = (0, $9b677018bf1ac728$export$ae0c59ca751ba81d)(direction, event);
|
|
1304
|
+
setDragState({
|
|
1305
|
+
dragHandleId: dragHandleId,
|
|
1306
|
+
dragHandleRect: handleElement.getBoundingClientRect(),
|
|
1307
|
+
initialCursorPosition: initialCursorPosition,
|
|
1308
|
+
initialLayout: layout
|
|
1309
|
+
});
|
|
1310
|
+
}, []);
|
|
1311
|
+
const stopDragging = (0, $6e687094f9ca8395$export$35808ee640e87ca7)(()=>{
|
|
1312
|
+
(0, $08745f7373322b05$export$b61932ee18f96e08)();
|
|
1313
|
+
setDragState(null);
|
|
1314
|
+
}, []);
|
|
1315
|
+
const unregisterPanelRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
|
|
1316
|
+
pendingPanelIds: new Set(),
|
|
1317
|
+
timeout: null
|
|
1318
|
+
});
|
|
1319
|
+
const unregisterPanel = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData)=>{
|
|
1320
|
+
const { onLayout: onLayout } = committedValuesRef.current;
|
|
1321
|
+
const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
|
|
1322
|
+
const index = $cec4cafe75f3db78$var$findPanelDataIndex(panelDataArray, panelData);
|
|
1323
|
+
if (index >= 0) {
|
|
1324
|
+
panelDataArray.splice(index, 1);
|
|
1325
|
+
unregisterPanelRef.current.pendingPanelIds.add(panelData.id);
|
|
1326
|
+
}
|
|
1327
|
+
if (unregisterPanelRef.current.timeout != null) clearTimeout(unregisterPanelRef.current.timeout);
|
|
1328
|
+
// Batch panel unmounts so that we only calculate layout once;
|
|
1329
|
+
// This is more efficient and avoids misleading warnings in development mode.
|
|
1330
|
+
// We can't check the DOM to detect this because Panel elements have not yet been removed.
|
|
1331
|
+
unregisterPanelRef.current.timeout = setTimeout(()=>{
|
|
1332
|
+
const { pendingPanelIds: pendingPanelIds } = unregisterPanelRef.current;
|
|
1333
|
+
const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
|
|
1334
|
+
// TRICKY
|
|
1335
|
+
// Strict effects mode
|
|
1336
|
+
let unmountDueToStrictMode = false;
|
|
1337
|
+
pendingPanelIds.forEach((panelId)=>{
|
|
1338
|
+
pendingPanelIds.delete(panelId);
|
|
1339
|
+
if (panelDataArray.find(({ id: id })=>id === panelId) != null) unmountDueToStrictMode = true;
|
|
1340
|
+
else // TRICKY
|
|
1341
|
+
// When a panel is removed from the group, we should delete the most recent prev-size entry for it.
|
|
1342
|
+
// If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
|
|
1343
|
+
// Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
|
|
1344
|
+
delete panelIdToLastNotifiedSizeMap[panelId];
|
|
1345
|
+
});
|
|
1346
|
+
if (unmountDueToStrictMode) return;
|
|
1347
|
+
if (panelDataArray.length === 0) // The group is unmounting; skip layout calculation.
|
|
1348
|
+
return;
|
|
1349
|
+
let unsafeLayout = (0, $17c359958d4c9de7$export$47337a21c443778e)({
|
|
1350
|
+
panelDataArray: panelDataArray
|
|
1351
|
+
});
|
|
1352
|
+
// Validate even saved layouts in case something has changed since last render
|
|
1353
|
+
// e.g. for pixel groups, this could be the size of the window
|
|
1354
|
+
const nextLayout = (0, $aa44a0a11da9fc89$export$64432a52a1035c18)({
|
|
1355
|
+
layout: unsafeLayout,
|
|
1356
|
+
panelConstraints: panelDataArray.map((panelData)=>panelData.constraints)
|
|
1357
|
+
});
|
|
1358
|
+
if (!(0, $d31ef7445a11a6c5$export$b141efd0b0fb9174)(prevLayout, nextLayout)) {
|
|
1359
|
+
setLayout(nextLayout);
|
|
1360
|
+
eagerValuesRef.current.layout = nextLayout;
|
|
1361
|
+
if (onLayout) onLayout(nextLayout);
|
|
1362
|
+
(0, $3c80a05711c0e5f5$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
|
|
1363
|
+
}
|
|
1364
|
+
}, 0);
|
|
1365
|
+
}, []);
|
|
1366
|
+
const context = (0, $6e687094f9ca8395$export$1538c33de8887b59)(()=>({
|
|
1367
|
+
collapsePanel: collapsePanel,
|
|
1368
|
+
direction: direction,
|
|
1369
|
+
dragState: dragState,
|
|
1370
|
+
expandPanel: expandPanel,
|
|
1371
|
+
getPanelSize: getPanelSize,
|
|
1372
|
+
getPanelStyle: getPanelStyle,
|
|
1373
|
+
groupId: groupId,
|
|
1374
|
+
isPanelCollapsed: isPanelCollapsed,
|
|
1375
|
+
isPanelExpanded: isPanelExpanded,
|
|
1376
|
+
registerPanel: registerPanel,
|
|
1377
|
+
registerResizeHandle: registerResizeHandle,
|
|
1378
|
+
resizePanel: resizePanel,
|
|
1379
|
+
startDragging: startDragging,
|
|
1380
|
+
stopDragging: stopDragging,
|
|
1381
|
+
unregisterPanel: unregisterPanel
|
|
1382
|
+
}), [
|
|
1383
|
+
collapsePanel,
|
|
1384
|
+
dragState,
|
|
1385
|
+
direction,
|
|
1386
|
+
expandPanel,
|
|
1387
|
+
getPanelSize,
|
|
1388
|
+
getPanelStyle,
|
|
1389
|
+
groupId,
|
|
1390
|
+
isPanelCollapsed,
|
|
1391
|
+
isPanelExpanded,
|
|
1392
|
+
registerPanel,
|
|
1393
|
+
registerResizeHandle,
|
|
1394
|
+
resizePanel,
|
|
1395
|
+
startDragging,
|
|
1396
|
+
stopDragging,
|
|
1397
|
+
unregisterPanel
|
|
1398
|
+
]);
|
|
1399
|
+
const style = {
|
|
1400
|
+
display: "flex",
|
|
1401
|
+
flexDirection: direction === "horizontal" ? "row" : "column",
|
|
1402
|
+
height: "100%",
|
|
1403
|
+
overflow: "hidden",
|
|
1404
|
+
width: "100%"
|
|
1405
|
+
};
|
|
1406
|
+
return (0, $6e687094f9ca8395$export$c8a8987d4410bf2d)((0, $a15c28001c46e071$export$7d8c6d083caec74a).Provider, {
|
|
1407
|
+
value: context
|
|
1408
|
+
}, (0, $6e687094f9ca8395$export$c8a8987d4410bf2d)(Type, {
|
|
1409
|
+
...rest,
|
|
1410
|
+
children: children,
|
|
1411
|
+
className: classNameFromProps,
|
|
1412
|
+
style: {
|
|
1413
|
+
...style,
|
|
1414
|
+
...styleFromProps
|
|
1415
|
+
},
|
|
1416
|
+
// CSS selectors
|
|
1417
|
+
"data-panel-group": "",
|
|
1418
|
+
"data-panel-group-direction": direction,
|
|
1419
|
+
"data-panel-group-id": groupId
|
|
1420
|
+
}));
|
|
1915
1421
|
}
|
|
1916
|
-
const
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
}));
|
|
1920
|
-
PanelGroupWithForwardedRef.displayName = "PanelGroup";
|
|
1921
|
-
|
|
1922
|
-
function
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1422
|
+
const $cec4cafe75f3db78$export$1d05749f6f573bb = (0, $6e687094f9ca8395$export$257a8862b851cb5b)((props, ref)=>(0, $6e687094f9ca8395$export$c8a8987d4410bf2d)($cec4cafe75f3db78$var$PanelGroupWithForwardedRef, {
|
|
1423
|
+
...props,
|
|
1424
|
+
forwardedRef: ref
|
|
1425
|
+
}));
|
|
1426
|
+
$cec4cafe75f3db78$var$PanelGroupWithForwardedRef.displayName = "PanelGroup";
|
|
1427
|
+
$cec4cafe75f3db78$export$1d05749f6f573bb.displayName = "forwardRef(PanelGroup)";
|
|
1428
|
+
function $cec4cafe75f3db78$var$findPanelDataIndex(panelDataArray, panelData) {
|
|
1429
|
+
return panelDataArray.findIndex((prevPanelData)=>prevPanelData === panelData || prevPanelData.id === panelData.id);
|
|
1430
|
+
}
|
|
1431
|
+
function $cec4cafe75f3db78$var$panelDataHelper(panelDataArray, panelData, layout) {
|
|
1432
|
+
const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
|
|
1433
|
+
const panelIndex = $cec4cafe75f3db78$var$findPanelDataIndex(panelDataArray, panelData);
|
|
1434
|
+
const panelConstraints = panelConstraintsArray[panelIndex];
|
|
1435
|
+
const isLastPanel = panelIndex === panelDataArray.length - 1;
|
|
1436
|
+
const pivotIndices = isLastPanel ? [
|
|
1437
|
+
panelIndex - 1,
|
|
1438
|
+
panelIndex
|
|
1439
|
+
] : [
|
|
1440
|
+
panelIndex,
|
|
1441
|
+
panelIndex + 1
|
|
1442
|
+
];
|
|
1443
|
+
const panelSize = layout[panelIndex];
|
|
1444
|
+
return {
|
|
1445
|
+
...panelConstraints,
|
|
1446
|
+
panelSize: panelSize,
|
|
1447
|
+
pivotIndices: pivotIndices
|
|
1448
|
+
};
|
|
1940
1449
|
}
|
|
1941
1450
|
|
|
1942
|
-
// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
|
|
1943
1451
|
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1452
|
+
|
|
1453
|
+
|
|
1454
|
+
|
|
1455
|
+
|
|
1456
|
+
|
|
1457
|
+
|
|
1458
|
+
|
|
1459
|
+
function $a695670cc57a5969$export$33b0bea6ac3ffb03({ disabled: disabled, handleId: handleId, resizeHandler: resizeHandler }) {
|
|
1460
|
+
(0, $6e687094f9ca8395$export$6d9c69b0de29b591)(()=>{
|
|
1461
|
+
if (disabled || resizeHandler == null) return;
|
|
1462
|
+
const handleElement = (0, $58762ed3a79a85a2$export$4c5229c874a62620)(handleId);
|
|
1463
|
+
if (handleElement == null) return;
|
|
1464
|
+
const onKeyDown = (event)=>{
|
|
1465
|
+
if (event.defaultPrevented) return;
|
|
1466
|
+
switch(event.key){
|
|
1467
|
+
case "ArrowDown":
|
|
1468
|
+
case "ArrowLeft":
|
|
1469
|
+
case "ArrowRight":
|
|
1470
|
+
case "ArrowUp":
|
|
1471
|
+
case "End":
|
|
1472
|
+
case "Home":
|
|
1473
|
+
event.preventDefault();
|
|
1474
|
+
resizeHandler(event);
|
|
1475
|
+
break;
|
|
1476
|
+
case "F6":
|
|
1477
|
+
{
|
|
1478
|
+
event.preventDefault();
|
|
1479
|
+
const groupId = handleElement.getAttribute("data-panel-group-id");
|
|
1480
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(groupId);
|
|
1481
|
+
const handles = (0, $ef847a5e9ce851d7$export$63eb605e437b214f)(groupId);
|
|
1482
|
+
const index = (0, $645e6f06f14b1fbf$export$4c92fedbbc2381ca)(groupId, handleId);
|
|
1483
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(index !== null);
|
|
1484
|
+
const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
|
|
1485
|
+
const nextHandle = handles[nextIndex];
|
|
1486
|
+
nextHandle.focus();
|
|
1487
|
+
break;
|
|
1488
|
+
}
|
|
1489
|
+
}
|
|
1490
|
+
};
|
|
1491
|
+
handleElement.addEventListener("keydown", onKeyDown);
|
|
1492
|
+
return ()=>{
|
|
1493
|
+
handleElement.removeEventListener("keydown", onKeyDown);
|
|
1494
|
+
};
|
|
1495
|
+
}, [
|
|
1496
|
+
disabled,
|
|
1497
|
+
handleId,
|
|
1498
|
+
resizeHandler
|
|
1499
|
+
]);
|
|
1992
1500
|
}
|
|
1993
1501
|
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
})
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
1502
|
+
|
|
1503
|
+
|
|
1504
|
+
|
|
1505
|
+
|
|
1506
|
+
function $3a26a712c9163348$export$8829ecf6b6b15484({ children: children = null, className: classNameFromProps = "", disabled: disabled = false, id: idFromProps, onDragging: onDragging, style: styleFromProps = {}, tabIndex: tabIndex = 0, tagName: Type = "div", ...rest }) {
|
|
1507
|
+
const divElementRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)(null);
|
|
1508
|
+
// Use a ref to guard against users passing inline props
|
|
1509
|
+
const callbacksRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
|
|
1510
|
+
onDragging: onDragging
|
|
1511
|
+
});
|
|
1512
|
+
(0, $6e687094f9ca8395$export$6d9c69b0de29b591)(()=>{
|
|
1513
|
+
callbacksRef.current.onDragging = onDragging;
|
|
1514
|
+
});
|
|
1515
|
+
const panelGroupContext = (0, $6e687094f9ca8395$export$fae74005e78b1a27)((0, $a15c28001c46e071$export$7d8c6d083caec74a));
|
|
1516
|
+
if (panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
|
|
1517
|
+
const { direction: direction, dragState: dragState, groupId: groupId, registerResizeHandle: registerResizeHandle, startDragging: startDragging, stopDragging: stopDragging } = panelGroupContext;
|
|
1518
|
+
const resizeHandleId = (0, $b1693d8d8f570e9c$export$2e2bcd8739ae039)(idFromProps);
|
|
1519
|
+
const isDragging = (dragState === null || dragState === void 0 ? void 0 : dragState.dragHandleId) === resizeHandleId;
|
|
1520
|
+
const [isFocused, setIsFocused] = (0, $6e687094f9ca8395$export$60241385465d0a34)(false);
|
|
1521
|
+
const [resizeHandler, setResizeHandler] = (0, $6e687094f9ca8395$export$60241385465d0a34)(null);
|
|
1522
|
+
const stopDraggingAndBlur = (0, $6e687094f9ca8395$export$35808ee640e87ca7)(()=>{
|
|
1523
|
+
// Clicking on the drag handle shouldn't leave it focused;
|
|
1524
|
+
// That would cause the PanelGroup to think it was still active.
|
|
1525
|
+
const divElement = divElementRef.current;
|
|
1526
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(divElement);
|
|
1527
|
+
divElement.blur();
|
|
1528
|
+
stopDragging();
|
|
1529
|
+
const { onDragging: onDragging } = callbacksRef.current;
|
|
1530
|
+
if (onDragging) onDragging(false);
|
|
1531
|
+
}, [
|
|
1532
|
+
stopDragging
|
|
1533
|
+
]);
|
|
1534
|
+
(0, $6e687094f9ca8395$export$6d9c69b0de29b591)(()=>{
|
|
1535
|
+
if (disabled) setResizeHandler(null);
|
|
1536
|
+
else {
|
|
1537
|
+
const resizeHandler = registerResizeHandle(resizeHandleId);
|
|
1538
|
+
setResizeHandler(()=>resizeHandler);
|
|
1539
|
+
}
|
|
1540
|
+
}, [
|
|
1541
|
+
disabled,
|
|
1542
|
+
resizeHandleId,
|
|
1543
|
+
registerResizeHandle
|
|
1544
|
+
]);
|
|
1545
|
+
(0, $6e687094f9ca8395$export$6d9c69b0de29b591)(()=>{
|
|
1546
|
+
if (disabled || resizeHandler == null || !isDragging) return;
|
|
1547
|
+
const onMove = (event)=>{
|
|
1548
|
+
resizeHandler(event);
|
|
1549
|
+
};
|
|
1550
|
+
const onMouseLeave = (event)=>{
|
|
1551
|
+
resizeHandler(event);
|
|
1552
|
+
};
|
|
1553
|
+
const divElement = divElementRef.current;
|
|
1554
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(divElement);
|
|
1555
|
+
const targetDocument = divElement.ownerDocument;
|
|
1556
|
+
targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
|
|
1557
|
+
targetDocument.body.addEventListener("mousemove", onMove);
|
|
1558
|
+
targetDocument.body.addEventListener("touchmove", onMove);
|
|
1559
|
+
targetDocument.body.addEventListener("mouseleave", onMouseLeave);
|
|
1560
|
+
window.addEventListener("mouseup", stopDraggingAndBlur);
|
|
1561
|
+
window.addEventListener("touchend", stopDraggingAndBlur);
|
|
1562
|
+
return ()=>{
|
|
1563
|
+
targetDocument.body.removeEventListener("contextmenu", stopDraggingAndBlur);
|
|
1564
|
+
targetDocument.body.removeEventListener("mousemove", onMove);
|
|
1565
|
+
targetDocument.body.removeEventListener("touchmove", onMove);
|
|
1566
|
+
targetDocument.body.removeEventListener("mouseleave", onMouseLeave);
|
|
1567
|
+
window.removeEventListener("mouseup", stopDraggingAndBlur);
|
|
1568
|
+
window.removeEventListener("touchend", stopDraggingAndBlur);
|
|
1569
|
+
};
|
|
1570
|
+
}, [
|
|
1571
|
+
direction,
|
|
1572
|
+
disabled,
|
|
1573
|
+
isDragging,
|
|
1574
|
+
resizeHandler,
|
|
1575
|
+
stopDraggingAndBlur
|
|
1576
|
+
]);
|
|
1577
|
+
(0, $a695670cc57a5969$export$33b0bea6ac3ffb03)({
|
|
1578
|
+
disabled: disabled,
|
|
1579
|
+
handleId: resizeHandleId,
|
|
1580
|
+
resizeHandler: resizeHandler
|
|
1581
|
+
});
|
|
1582
|
+
const style = {
|
|
1583
|
+
cursor: (0, $08745f7373322b05$export$fa35f3322c52262f)(direction),
|
|
1584
|
+
touchAction: "none",
|
|
1585
|
+
userSelect: "none"
|
|
2075
1586
|
};
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
role: "separator",
|
|
2115
|
-
style: {
|
|
2116
|
-
...style,
|
|
2117
|
-
...styleFromProps
|
|
2118
|
-
},
|
|
2119
|
-
tabIndex: 0,
|
|
2120
|
-
...dataAttributes,
|
|
2121
|
-
// CSS selectors
|
|
2122
|
-
"data-panel-group-direction": direction,
|
|
2123
|
-
"data-panel-group-id": groupId,
|
|
2124
|
-
"data-resize-handle": "",
|
|
2125
|
-
"data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
|
|
2126
|
-
"data-panel-resize-handle-enabled": !disabled,
|
|
2127
|
-
"data-panel-resize-handle-id": resizeHandleId
|
|
2128
|
-
});
|
|
1587
|
+
return (0, $6e687094f9ca8395$export$c8a8987d4410bf2d)(Type, {
|
|
1588
|
+
...rest,
|
|
1589
|
+
children: children,
|
|
1590
|
+
className: classNameFromProps,
|
|
1591
|
+
onBlur: ()=>setIsFocused(false),
|
|
1592
|
+
onFocus: ()=>setIsFocused(true),
|
|
1593
|
+
onMouseDown: (event)=>{
|
|
1594
|
+
startDragging(resizeHandleId, event.nativeEvent);
|
|
1595
|
+
const callbacks = callbacksRef.current;
|
|
1596
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(callbacks);
|
|
1597
|
+
const { onDragging: onDragging } = callbacks;
|
|
1598
|
+
if (onDragging) onDragging(true);
|
|
1599
|
+
},
|
|
1600
|
+
onMouseUp: stopDraggingAndBlur,
|
|
1601
|
+
onTouchCancel: stopDraggingAndBlur,
|
|
1602
|
+
onTouchEnd: stopDraggingAndBlur,
|
|
1603
|
+
onTouchStart: (event)=>{
|
|
1604
|
+
startDragging(resizeHandleId, event.nativeEvent);
|
|
1605
|
+
const callbacks = callbacksRef.current;
|
|
1606
|
+
(0, $3b727a2145ecd6f8$export$a7a9523472993e97)(callbacks);
|
|
1607
|
+
const { onDragging: onDragging } = callbacks;
|
|
1608
|
+
if (onDragging) onDragging(true);
|
|
1609
|
+
},
|
|
1610
|
+
ref: divElementRef,
|
|
1611
|
+
role: "separator",
|
|
1612
|
+
style: {
|
|
1613
|
+
...style,
|
|
1614
|
+
...styleFromProps
|
|
1615
|
+
},
|
|
1616
|
+
tabIndex: tabIndex,
|
|
1617
|
+
// CSS selectors
|
|
1618
|
+
"data-panel-group-direction": direction,
|
|
1619
|
+
"data-panel-group-id": groupId,
|
|
1620
|
+
"data-resize-handle": "",
|
|
1621
|
+
"data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
|
|
1622
|
+
"data-panel-resize-handle-enabled": !disabled,
|
|
1623
|
+
"data-panel-resize-handle-id": resizeHandleId
|
|
1624
|
+
});
|
|
2129
1625
|
}
|
|
2130
|
-
|
|
1626
|
+
$3a26a712c9163348$export$8829ecf6b6b15484.displayName = "PanelResizeHandle";
|
|
1627
|
+
|
|
1628
|
+
|
|
1629
|
+
|
|
1630
|
+
|
|
2131
1631
|
|
|
2132
|
-
|
|
2133
|
-
exports.PanelGroup = PanelGroup;
|
|
2134
|
-
exports.PanelResizeHandle = PanelResizeHandle;
|
|
1632
|
+
//# sourceMappingURL=react-resizable-panels.cjs.js.map
|