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