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