react-resizable-panels 0.0.9 → 0.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/react-resizable-panels.d.ts.map +1 -1
- package/dist/react-resizable-panels.js +80 -131
- package/dist/react-resizable-panels.js.map +1 -1
- package/dist/react-resizable-panels.module.js +80 -131
- package/dist/react-resizable-panels.module.js.map +1 -1
- package/package.json +1 -1
- package/src/PanelGroup.tsx +3 -21
- package/src/PanelResizeHandle.tsx +28 -9
- package/src/utils/coordinates.ts +31 -69
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.0.11
|
|
4
|
+
* Drag UX change: Reversing drag after dragging past the min/max size of a panel will no longer have an effect until the pointer overlaps with the resize handle. (Thanks @davidkpiano for the suggestion!)
|
|
5
|
+
* Bug fix: Resize handles are no longer left in a "focused" state after a touch/mouse event.
|
|
6
|
+
|
|
7
|
+
## 0.0.10
|
|
8
|
+
* Corrupt build artifact. Don't use this version.
|
|
9
|
+
|
|
3
10
|
## 0.0.9
|
|
4
11
|
* [#13](https://github.com/bvaughn/react-resizable-panels/issues/13): `PanelResizeHandle` should declare "separator" role and implement the recommended ["Window Splitter" pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/)
|
|
5
12
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";AAAA,iBAAwB,YAAY,GAAG,UAAU,CAAC;ACIlD,OAAO,MAAM;oBACK,MAAM,GAAG,IAAI;EAChB,CAAC;ACChB,sBAA8B,EAC5B,QAAe,EACf,SAAc,EACd,WAAiB,EACjB,EAAE,EACF,OAAa,EACb,KAAY,GACb,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,eA6CA;AO/BD,aAAa;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAMF,2BAAmC,EACjC,UAAU,EACV,QAAe,EACf,SAAc,EACd,SAAS,EACT,MAAM,EACN,KAAK,GACN,EAAE,KAAK,
|
|
1
|
+
{"mappings":";AAAA,iBAAwB,YAAY,GAAG,UAAU,CAAC;ACIlD,OAAO,MAAM;oBACK,MAAM,GAAG,IAAI;EAChB,CAAC;ACChB,sBAA8B,EAC5B,QAAe,EACf,SAAc,EACd,WAAiB,EACjB,EAAE,EACF,OAAa,EACb,KAAY,GACb,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,eA6CA;AO/BD,aAAa;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAMF,2BAAmC,EACjC,UAAU,EACV,QAAe,EACf,SAAc,EACd,SAAS,EACT,MAAM,EACN,KAAK,GACN,EAAE,KAAK,eA4NP;ACrQD,kCAA0C,EACxC,QAAe,EACf,SAAc,EACd,QAAgB,EAChB,EAAE,EAAE,MAAa,GAClB,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB,eAqGA","sources":["packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.tsx","packages/react-resizable-panels/src/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/src/utils/serialization.ts","packages/react-resizable-panels/src/src/constants.ts","packages/react-resizable-panels/src/src/utils/group.ts","packages/react-resizable-panels/src/src/utils/coordinates.ts","packages/react-resizable-panels/src/src/hooks/useWindowSplitterBehavior.ts","packages/react-resizable-panels/src/src/PanelGroup.tsx","packages/react-resizable-panels/src/src/PanelResizeHandle.tsx","packages/react-resizable-panels/src/src/index.ts","packages/react-resizable-panels/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,"import Panel from \"./Panel\";\nimport { PanelContext } from \"./PanelContexts\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelContext, PanelGroup, PanelResizeHandle };\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var $b2QPe$
|
|
1
|
+
var $b2QPe$reactjsxruntime = require("react/jsx-runtime");
|
|
2
2
|
var $b2QPe$react = require("react");
|
|
3
3
|
|
|
4
4
|
function $parcel$export(e, n, v, s) {
|
|
@@ -44,17 +44,13 @@ function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null ,
|
|
|
44
44
|
unregisterPanel
|
|
45
45
|
]);
|
|
46
46
|
const style = getPanelStyle(id);
|
|
47
|
-
return /*#__PURE__*/ (0, $b2QPe$
|
|
47
|
+
return /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)("div", {
|
|
48
48
|
className: className,
|
|
49
49
|
"data-panel-id": id,
|
|
50
50
|
id: `data-panel-id-${id}`,
|
|
51
51
|
style: style,
|
|
52
52
|
children: children
|
|
53
|
-
}
|
|
54
|
-
fileName: "packages/react-resizable-panels/src/Panel.tsx",
|
|
55
|
-
lineNumber: 58,
|
|
56
|
-
columnNumber: 5
|
|
57
|
-
}, this);
|
|
53
|
+
});
|
|
58
54
|
}
|
|
59
55
|
|
|
60
56
|
|
|
@@ -97,82 +93,6 @@ function $e045b0dd313f33c7$export$af183b313c61be4f(autoSaveId, panelIds, sizes)
|
|
|
97
93
|
}
|
|
98
94
|
|
|
99
95
|
|
|
100
|
-
const $f5af57c8e042a4ad$var$element = document.createElement("div");
|
|
101
|
-
$f5af57c8e042a4ad$var$element.getBoundingClientRect();
|
|
102
|
-
function $f5af57c8e042a4ad$export$70637efcd850e4ef(event, prevCoordinates, dimensions, direction) {
|
|
103
|
-
const { screenX: prevScreenX , screenY: prevScreenY } = prevCoordinates;
|
|
104
|
-
const { height: height , width: width } = dimensions;
|
|
105
|
-
const getMovementBetween = (current, prev)=>prev === 0 ? 0 : current - prev;
|
|
106
|
-
if ($f5af57c8e042a4ad$export$e7bf60a870f429b0(event)) {
|
|
107
|
-
let movementX = 0;
|
|
108
|
-
let movementY = 0;
|
|
109
|
-
const size = direction === "horizontal" ? width : height;
|
|
110
|
-
const denominator = event.shiftKey ? 10 : 100;
|
|
111
|
-
const delta = size / denominator;
|
|
112
|
-
switch(event.key){
|
|
113
|
-
case "ArrowDown":
|
|
114
|
-
movementY = delta;
|
|
115
|
-
break;
|
|
116
|
-
case "ArrowLeft":
|
|
117
|
-
movementX = -delta;
|
|
118
|
-
break;
|
|
119
|
-
case "ArrowRight":
|
|
120
|
-
movementX = delta;
|
|
121
|
-
break;
|
|
122
|
-
case "ArrowUp":
|
|
123
|
-
movementY = -delta;
|
|
124
|
-
break;
|
|
125
|
-
case "End":
|
|
126
|
-
if (direction === "horizontal") movementX = size;
|
|
127
|
-
else movementY = size;
|
|
128
|
-
break;
|
|
129
|
-
case "Home":
|
|
130
|
-
if (direction === "horizontal") movementX = -size;
|
|
131
|
-
else movementY = -size;
|
|
132
|
-
break;
|
|
133
|
-
}
|
|
134
|
-
// Estimate screen X/Y to be the center of the resize handle.
|
|
135
|
-
// Otherwise the first mouse/touch event after a keyboard event will appear to "jump"
|
|
136
|
-
let screenX = 0;
|
|
137
|
-
let screenY = 0;
|
|
138
|
-
if (document.activeElement) {
|
|
139
|
-
const rect = document.activeElement.getBoundingClientRect();
|
|
140
|
-
screenX = rect.left + rect.width / 2;
|
|
141
|
-
screenY = rect.top + rect.height / 2;
|
|
142
|
-
}
|
|
143
|
-
return {
|
|
144
|
-
movementX: movementX,
|
|
145
|
-
movementY: movementY,
|
|
146
|
-
screenX: screenX,
|
|
147
|
-
screenY: screenY
|
|
148
|
-
};
|
|
149
|
-
} else if ($f5af57c8e042a4ad$export$ce897e7f0aa63661(event)) {
|
|
150
|
-
const firstTouch = event.touches[0];
|
|
151
|
-
return {
|
|
152
|
-
movementX: getMovementBetween(firstTouch.screenX, prevScreenX),
|
|
153
|
-
movementY: getMovementBetween(firstTouch.screenY, prevScreenY),
|
|
154
|
-
screenX: firstTouch.screenX,
|
|
155
|
-
screenY: firstTouch.screenY
|
|
156
|
-
};
|
|
157
|
-
} else if ($f5af57c8e042a4ad$export$5107d838cdd17dee(event)) return {
|
|
158
|
-
movementX: getMovementBetween(event.screenX, prevScreenX),
|
|
159
|
-
movementY: getMovementBetween(event.screenY, prevScreenY),
|
|
160
|
-
screenX: event.screenX,
|
|
161
|
-
screenY: event.screenY
|
|
162
|
-
};
|
|
163
|
-
else throw Error(`Unsupported event type: "${event.type}"`);
|
|
164
|
-
}
|
|
165
|
-
function $f5af57c8e042a4ad$export$e7bf60a870f429b0(event) {
|
|
166
|
-
return event.type === "keydown";
|
|
167
|
-
}
|
|
168
|
-
function $f5af57c8e042a4ad$export$5107d838cdd17dee(event) {
|
|
169
|
-
return event.type === "mousemove";
|
|
170
|
-
}
|
|
171
|
-
function $f5af57c8e042a4ad$export$ce897e7f0aa63661(event) {
|
|
172
|
-
return event.type === "touchmove";
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
|
|
176
96
|
const $3237bc4a138172cd$export$d6d3992f3becc879 = 5;
|
|
177
97
|
|
|
178
98
|
|
|
@@ -271,6 +191,55 @@ function $d520236daad9c5d5$export$31b21d0167753bb4(panels, id, direction, sizes,
|
|
|
271
191
|
}
|
|
272
192
|
|
|
273
193
|
|
|
194
|
+
const $f5af57c8e042a4ad$var$element = document.createElement("div");
|
|
195
|
+
$f5af57c8e042a4ad$var$element.getBoundingClientRect();
|
|
196
|
+
function $f5af57c8e042a4ad$export$354b17c0684607ed(event, handleId, { height: height , width: width }, direction) {
|
|
197
|
+
const isHorizontal = direction === "horizontal";
|
|
198
|
+
const size = isHorizontal ? width : height;
|
|
199
|
+
if ($f5af57c8e042a4ad$export$e7bf60a870f429b0(event)) {
|
|
200
|
+
const denominator = event.shiftKey ? 10 : 100;
|
|
201
|
+
const delta = size / denominator;
|
|
202
|
+
switch(event.key){
|
|
203
|
+
case "ArrowDown":
|
|
204
|
+
return delta;
|
|
205
|
+
case "ArrowLeft":
|
|
206
|
+
return -delta;
|
|
207
|
+
case "ArrowRight":
|
|
208
|
+
return delta;
|
|
209
|
+
case "ArrowUp":
|
|
210
|
+
return -delta;
|
|
211
|
+
case "End":
|
|
212
|
+
if (isHorizontal) return size;
|
|
213
|
+
else return size;
|
|
214
|
+
case "Home":
|
|
215
|
+
if (isHorizontal) return -size;
|
|
216
|
+
else return -size;
|
|
217
|
+
}
|
|
218
|
+
} else {
|
|
219
|
+
const handleElement = (0, $d520236daad9c5d5$export$2e27d3a347680388)(handleId);
|
|
220
|
+
const rect = handleElement.getBoundingClientRect();
|
|
221
|
+
const elementOffset = isHorizontal ? rect.left : rect.top;
|
|
222
|
+
let pointerOffset = 0;
|
|
223
|
+
if ($f5af57c8e042a4ad$export$5107d838cdd17dee(event)) pointerOffset = isHorizontal ? event.clientX : event.clientY;
|
|
224
|
+
else {
|
|
225
|
+
const firstTouch = event.touches[0];
|
|
226
|
+
pointerOffset = isHorizontal ? firstTouch.screenX : firstTouch.screenY;
|
|
227
|
+
}
|
|
228
|
+
return pointerOffset - elementOffset;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
function $f5af57c8e042a4ad$export$e7bf60a870f429b0(event) {
|
|
232
|
+
return event.type === "keydown";
|
|
233
|
+
}
|
|
234
|
+
function $f5af57c8e042a4ad$export$5107d838cdd17dee(event) {
|
|
235
|
+
return event.type === "mousemove";
|
|
236
|
+
}
|
|
237
|
+
function $f5af57c8e042a4ad$export$ce897e7f0aa63661(event) {
|
|
238
|
+
return event.type === "touchmove";
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
|
|
242
|
+
|
|
274
243
|
|
|
275
244
|
|
|
276
245
|
|
|
@@ -385,12 +354,6 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
|
|
|
385
354
|
sizes: sizes,
|
|
386
355
|
width: width
|
|
387
356
|
});
|
|
388
|
-
// Tracks the most recent coordinates of a touch/mouse event.
|
|
389
|
-
// This is needed to calculate movement (because TouchEvent doesn't support movementX and movementY).
|
|
390
|
-
const prevCoordinatesRef = (0, $b2QPe$react.useRef)({
|
|
391
|
-
screenX: 0,
|
|
392
|
-
screenY: 0
|
|
393
|
-
});
|
|
394
357
|
(0, $b2QPe$react.useLayoutEffect)(()=>{
|
|
395
358
|
committedValuesRef.current.direction = direction;
|
|
396
359
|
committedValuesRef.current.height = height;
|
|
@@ -483,16 +446,11 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
|
|
|
483
446
|
const panelsArray = (0, $d520236daad9c5d5$export$a861c0ad45885494)(panels);
|
|
484
447
|
const [idBefore, idAfter] = (0, $d520236daad9c5d5$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
|
|
485
448
|
if (idBefore == null || idAfter == null) return;
|
|
486
|
-
const
|
|
449
|
+
const movement = (0, $f5af57c8e042a4ad$export$354b17c0684607ed)(event, handleId, {
|
|
487
450
|
height: height,
|
|
488
451
|
width: width
|
|
489
452
|
}, direction);
|
|
490
|
-
prevCoordinatesRef.current = {
|
|
491
|
-
screenX: nextCoordinates.screenX,
|
|
492
|
-
screenY: nextCoordinates.screenY
|
|
493
|
-
};
|
|
494
453
|
const isHorizontal = direction === "horizontal";
|
|
495
|
-
const movement = isHorizontal ? nextCoordinates.movementX : nextCoordinates.movementY;
|
|
496
454
|
const delta = isHorizontal ? movement / width : movement / height;
|
|
497
455
|
const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes);
|
|
498
456
|
if (prevSizes !== nextSizes) setSizes(nextSizes);
|
|
@@ -518,10 +476,6 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
|
|
|
518
476
|
startDragging: (id)=>setActiveHandleId(id),
|
|
519
477
|
stopDragging: ()=>{
|
|
520
478
|
setActiveHandleId(null);
|
|
521
|
-
prevCoordinatesRef.current = {
|
|
522
|
-
screenX: 0,
|
|
523
|
-
screenY: 0
|
|
524
|
-
};
|
|
525
479
|
},
|
|
526
480
|
unregisterPanel: unregisterPanel
|
|
527
481
|
}), [
|
|
@@ -537,28 +491,16 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
|
|
|
537
491
|
}), [
|
|
538
492
|
activeHandleId
|
|
539
493
|
]);
|
|
540
|
-
return /*#__PURE__*/ (0, $b2QPe$
|
|
494
|
+
return /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)((0, $3251d17c1c3bce6c$export$f34532ac99e32150).Provider, {
|
|
541
495
|
value: panelContext,
|
|
542
|
-
children: /*#__PURE__*/ (0, $b2QPe$
|
|
496
|
+
children: /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a).Provider, {
|
|
543
497
|
value: panelGroupContext,
|
|
544
|
-
children: /*#__PURE__*/ (0, $b2QPe$
|
|
498
|
+
children: /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)("div", {
|
|
545
499
|
className: className,
|
|
546
500
|
children: children
|
|
547
|
-
}
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
columnNumber: 9
|
|
551
|
-
}, this)
|
|
552
|
-
}, void 0, false, {
|
|
553
|
-
fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
|
|
554
|
-
lineNumber: 289,
|
|
555
|
-
columnNumber: 7
|
|
556
|
-
}, this)
|
|
557
|
-
}, void 0, false, {
|
|
558
|
-
fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
|
|
559
|
-
lineNumber: 288,
|
|
560
|
-
columnNumber: 5
|
|
561
|
-
}, this);
|
|
501
|
+
})
|
|
502
|
+
})
|
|
503
|
+
});
|
|
562
504
|
}
|
|
563
505
|
|
|
564
506
|
|
|
@@ -568,6 +510,7 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
|
|
|
568
510
|
|
|
569
511
|
|
|
570
512
|
function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false , id: idProp = null }) {
|
|
513
|
+
const divElementRef = (0, $b2QPe$react.useRef)(null);
|
|
571
514
|
const panelContext = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$f34532ac99e32150));
|
|
572
515
|
const panelGroupContext = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
|
|
573
516
|
if (panelContext === null || panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
|
|
@@ -576,6 +519,15 @@ function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null ,
|
|
|
576
519
|
const { direction: direction , groupId: groupId , registerResizeHandle: registerResizeHandle , startDragging: startDragging , stopDragging: stopDragging } = panelGroupContext;
|
|
577
520
|
const isDragging = activeHandleId === id;
|
|
578
521
|
const [resizeHandler, setResizeHandler] = (0, $b2QPe$react.useState)(null);
|
|
522
|
+
const stopDraggingAndBlur = (0, $b2QPe$react.useCallback)(()=>{
|
|
523
|
+
// Clicking on the drag handle shouldn't leave it focused;
|
|
524
|
+
// That would cause the PanelGroup to think it was still active.
|
|
525
|
+
const div = divElementRef.current;
|
|
526
|
+
div.blur();
|
|
527
|
+
stopDragging();
|
|
528
|
+
}, [
|
|
529
|
+
stopDragging
|
|
530
|
+
]);
|
|
579
531
|
(0, $b2QPe$react.useEffect)(()=>{
|
|
580
532
|
if (disabled) setResizeHandler(null);
|
|
581
533
|
else {
|
|
@@ -593,39 +545,40 @@ function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null ,
|
|
|
593
545
|
const onMove = (event)=>{
|
|
594
546
|
resizeHandler(event);
|
|
595
547
|
};
|
|
596
|
-
document.body.addEventListener("mouseleave",
|
|
548
|
+
document.body.addEventListener("mouseleave", stopDraggingAndBlur);
|
|
597
549
|
document.body.addEventListener("mousemove", onMove);
|
|
598
550
|
document.body.addEventListener("touchmove", onMove);
|
|
599
|
-
document.body.addEventListener("mouseup",
|
|
551
|
+
document.body.addEventListener("mouseup", stopDraggingAndBlur);
|
|
600
552
|
return ()=>{
|
|
601
553
|
document.body.style.cursor = "";
|
|
602
|
-
document.body.removeEventListener("mouseleave",
|
|
554
|
+
document.body.removeEventListener("mouseleave", stopDraggingAndBlur);
|
|
603
555
|
document.body.removeEventListener("mousemove", onMove);
|
|
604
556
|
document.body.removeEventListener("touchmove", onMove);
|
|
605
|
-
document.body.removeEventListener("mouseup",
|
|
557
|
+
document.body.removeEventListener("mouseup", stopDraggingAndBlur);
|
|
606
558
|
};
|
|
607
559
|
}, [
|
|
608
560
|
direction,
|
|
609
561
|
disabled,
|
|
610
562
|
isDragging,
|
|
611
563
|
resizeHandler,
|
|
612
|
-
|
|
564
|
+
stopDraggingAndBlur
|
|
613
565
|
]);
|
|
614
566
|
(0, $63be9a96d8675f03$export$33b0bea6ac3ffb03)({
|
|
615
567
|
disabled: disabled,
|
|
616
568
|
handleId: id,
|
|
617
569
|
resizeHandler: resizeHandler
|
|
618
570
|
});
|
|
619
|
-
return /*#__PURE__*/ (0, $b2QPe$
|
|
571
|
+
return /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)("div", {
|
|
620
572
|
className: className,
|
|
621
573
|
"data-panel-group-id": groupId,
|
|
622
574
|
"data-panel-resize-handle-enabled": !disabled,
|
|
623
575
|
"data-panel-resize-handle-id": id,
|
|
624
576
|
onMouseDown: ()=>startDragging(id),
|
|
625
|
-
onMouseUp:
|
|
626
|
-
onTouchCancel:
|
|
627
|
-
onTouchEnd:
|
|
577
|
+
onMouseUp: stopDraggingAndBlur,
|
|
578
|
+
onTouchCancel: stopDraggingAndBlur,
|
|
579
|
+
onTouchEnd: stopDraggingAndBlur,
|
|
628
580
|
onTouchStart: ()=>startDragging(id),
|
|
581
|
+
ref: divElementRef,
|
|
629
582
|
role: "separator",
|
|
630
583
|
style: {
|
|
631
584
|
cursor: direction === "horizontal" ? "ew-resize" : "ns-resize",
|
|
@@ -633,11 +586,7 @@ function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null ,
|
|
|
633
586
|
},
|
|
634
587
|
tabIndex: 0,
|
|
635
588
|
children: children
|
|
636
|
-
}
|
|
637
|
-
fileName: "packages/react-resizable-panels/src/PanelResizeHandle.tsx",
|
|
638
|
-
lineNumber: 87,
|
|
639
|
-
columnNumber: 5
|
|
640
|
-
}, this);
|
|
589
|
+
});
|
|
641
590
|
}
|
|
642
591
|
|
|
643
592
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react-resizable-panels/src/index.ts","packages/react-resizable-panels/src/Panel.tsx","packages/react-resizable-panels/src/PanelContexts.ts","packages/react-resizable-panels/src/PanelGroup.tsx","packages/react-resizable-panels/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/utils/serialization.ts","packages/react-resizable-panels/src/utils/coordinates.ts","packages/react-resizable-panels/src/utils/group.ts","packages/react-resizable-panels/src/constants.ts","packages/react-resizable-panels/src/hooks/useWindowSplitterBehavior.ts","packages/react-resizable-panels/src/PanelResizeHandle.tsx"],"sourcesContent":["import Panel from \"./Panel\";\nimport { PanelContext } from \"./PanelContexts\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelContext, PanelGroup, PanelResizeHandle };\n","import { ReactNode, useContext, useLayoutEffect } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\n\n// TODO [panels]\n// Support min pixel size too.\n// PanelGroup should warn if total width is less min pixel widths.\nexport default function Panel({\n children = null,\n className = \"\",\n defaultSize = 0.1,\n id,\n minSize = 0.1,\n order = null,\n}: {\n children?: ReactNode;\n className?: string;\n defaultSize?: number;\n id: string;\n minSize?: number;\n order?: number | null;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `Panel components must be rendered within a PanelGroup container`\n );\n }\n\n if (minSize > defaultSize) {\n console.error(\n `Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`\n );\n\n defaultSize = minSize;\n }\n\n const { getPanelStyle, registerPanel, unregisterPanel } = context;\n\n useLayoutEffect(() => {\n const panel = {\n defaultSize,\n id,\n minSize,\n order,\n };\n\n registerPanel(id, panel);\n\n return () => {\n unregisterPanel(id);\n };\n }, [defaultSize, id, minSize, order, registerPanel, unregisterPanel]);\n\n const style = getPanelStyle(id);\n\n return (\n <div\n className={className}\n data-panel-id={id}\n id={`data-panel-id-${id}`}\n style={style}\n >\n {children}\n </div>\n );\n}\n","import { CSSProperties, createContext } from \"react\";\n\nimport { PanelData, ResizeHandler } from \"./types\";\n\nexport const PanelContext = createContext<{\n activeHandleId: string | null;\n} | null>(null);\n\nexport const PanelGroupContext = createContext<{\n direction: \"horizontal\" | \"vertical\";\n getPanelStyle: (id: string) => CSSProperties;\n groupId: string;\n registerPanel: (id: string, panel: PanelData) => void;\n registerResizeHandle: (id: string) => ResizeHandler;\n startDragging: (id: string) => void;\n stopDragging: () => void;\n unregisterPanel: (id: string) => void;\n} | null>(null);\n","import {\n CSSProperties,\n ReactNode,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport useUniqueId from \"./hooks/useUniqueId\";\n\nimport { PanelContext, PanelGroupContext } from \"./PanelContexts\";\nimport { Direction, PanelData, ResizeEvent } from \"./types\";\nimport { loadPanelLayout, savePanelGroupLayout } from \"./utils/serialization\";\nimport { Coordinates, getUpdatedCoordinates } from \"./utils/coordinates\";\nimport {\n adjustByDelta,\n getOffset,\n getResizeHandlePanelIds,\n getSize,\n panelsMapToSortedArray,\n} from \"./utils/group\";\nimport { useWindowSplitterPanelGroupBehavior } from \"./hooks/useWindowSplitterBehavior\";\n\nexport type CommittedValues = {\n direction: Direction;\n height: number;\n panels: Map<string, PanelData>;\n sizes: number[];\n width: number;\n};\n\nexport type PanelDataMap = Map<string, PanelData>;\n\ntype Props = {\n autoSaveId?: string;\n children?: ReactNode;\n className?: string;\n direction: Direction;\n height: number;\n width: number;\n};\n\n// TODO [panels]\n// Within an active drag, remember original positions to refine more easily on expand.\n// Look at what the Chrome devtools Sources does.\n\nexport default function PanelGroup({\n autoSaveId,\n children = null,\n className = \"\",\n direction,\n height,\n width,\n}: Props) {\n const groupId = useUniqueId();\n\n const [activeHandleId, setActiveHandleId] = useState<string | null>(null);\n const [panels, setPanels] = useState<PanelDataMap>(new Map());\n\n // 0-1 values representing the relative size of each panel.\n const [sizes, setSizes] = useState<number[]>([]);\n\n // Store committed values to avoid unnecessarily re-running memoization/effects functions.\n const committedValuesRef = useRef<CommittedValues>({\n direction,\n height,\n panels,\n sizes,\n width,\n });\n\n // Tracks the most recent coordinates of a touch/mouse event.\n // This is needed to calculate movement (because TouchEvent doesn't support movementX and movementY).\n const prevCoordinatesRef = useRef<Coordinates>({\n screenX: 0,\n screenY: 0,\n });\n\n useLayoutEffect(() => {\n committedValuesRef.current.direction = direction;\n committedValuesRef.current.height = height;\n committedValuesRef.current.panels = panels;\n committedValuesRef.current.sizes = sizes;\n committedValuesRef.current.width = width;\n });\n\n useWindowSplitterPanelGroupBehavior({\n committedValuesRef,\n groupId,\n panels,\n setSizes,\n sizes,\n });\n\n // Once all panels have registered themselves,\n // Compute the initial sizes based on default weights.\n // This assumes that panels register during initial mount (no conditional rendering)!\n useLayoutEffect(() => {\n const sizes = committedValuesRef.current.sizes;\n if (sizes.length === panels.size) {\n return;\n }\n\n // TODO [panels]\n // Validate that the total minSize is <= 1.\n\n // If this panel has been configured to persist sizing information,\n // default size should be restored from local storage if possible.\n let defaultSizes: number[] | undefined = undefined;\n if (autoSaveId) {\n const panelIds = panelsMapToSortedArray(panels).map((panel) => panel.id);\n defaultSizes = loadPanelLayout(autoSaveId, panelIds);\n }\n\n if (defaultSizes != null) {\n setSizes(defaultSizes);\n } else {\n const panelsArray = panelsMapToSortedArray(panels);\n const totalWeight = panelsArray.reduce((weight, panel) => {\n return weight + panel.defaultSize;\n }, 0);\n\n setSizes(panelsArray.map((panel) => panel.defaultSize / totalWeight));\n }\n }, [autoSaveId, panels]);\n\n useEffect(() => {\n // If this panel has been configured to persist sizing information, save sizes to local storage.\n if (autoSaveId) {\n if (sizes.length === 0 || sizes.length !== panels.size) {\n return;\n }\n\n const panelIds = panelsMapToSortedArray(panels).map((panel) => panel.id);\n savePanelGroupLayout(autoSaveId, panelIds, sizes);\n }\n }, [autoSaveId, panels, sizes]);\n\n const getPanelStyle = useCallback(\n (id: string): CSSProperties => {\n const { panels } = committedValuesRef.current;\n\n const offset = getOffset(panels, id, direction, sizes, height, width);\n const size = getSize(panels, id, direction, sizes, height, width);\n\n if (direction === \"horizontal\") {\n return {\n height: \"100%\",\n position: \"absolute\",\n left: offset,\n top: 0,\n width: size,\n };\n } else {\n return {\n height: size,\n position: \"absolute\",\n left: 0,\n top: offset,\n width: \"100%\",\n };\n }\n },\n [direction, height, sizes, width]\n );\n\n const registerPanel = useCallback((id: string, panel: PanelData) => {\n setPanels((prevPanels) => {\n if (prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.set(id, panel);\n\n return nextPanels;\n });\n }, []);\n\n const registerResizeHandle = useCallback(\n (handleId: string) => {\n const resizeHandler = (event: ResizeEvent) => {\n event.preventDefault();\n\n const {\n direction,\n height,\n panels,\n sizes: prevSizes,\n width,\n } = committedValuesRef.current;\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const [idBefore, idAfter] = getResizeHandlePanelIds(\n groupId,\n handleId,\n panelsArray\n );\n if (idBefore == null || idAfter == null) {\n return;\n }\n\n const nextCoordinates = getUpdatedCoordinates(\n event,\n prevCoordinatesRef.current,\n { height, width },\n direction\n );\n prevCoordinatesRef.current = {\n screenX: nextCoordinates.screenX,\n screenY: nextCoordinates.screenY,\n };\n\n const isHorizontal = direction === \"horizontal\";\n const movement = isHorizontal\n ? nextCoordinates.movementX\n : nextCoordinates.movementY;\n const delta = isHorizontal ? movement / width : movement / height;\n\n const nextSizes = adjustByDelta(\n panels,\n idBefore,\n idAfter,\n delta,\n prevSizes\n );\n if (prevSizes !== nextSizes) {\n setSizes(nextSizes);\n }\n };\n\n return resizeHandler;\n },\n [groupId]\n );\n\n const unregisterPanel = useCallback((id: string) => {\n setPanels((prevPanels) => {\n if (!prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.delete(id);\n\n return nextPanels;\n });\n }, []);\n\n const panelGroupContext = useMemo(\n () => ({\n direction,\n getPanelStyle,\n groupId,\n registerPanel,\n registerResizeHandle,\n startDragging: (id: string) => setActiveHandleId(id),\n stopDragging: () => {\n setActiveHandleId(null);\n prevCoordinatesRef.current = {\n screenX: 0,\n screenY: 0,\n };\n },\n unregisterPanel,\n }),\n [\n direction,\n getPanelStyle,\n groupId,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n ]\n );\n\n const panelContext = useMemo(\n () => ({\n activeHandleId,\n }),\n [activeHandleId]\n );\n\n return (\n <PanelContext.Provider value={panelContext}>\n <PanelGroupContext.Provider value={panelGroupContext}>\n <div className={className}>{children}</div>\n </PanelGroupContext.Provider>\n </PanelContext.Provider>\n );\n}\n","import { useRef } from \"react\";\n\nlet counter = 0;\n\nexport default function useUniqueId(id: string | null = null): string {\n const idRef = useRef<string | null>(id);\n if (idRef.current === null) {\n idRef.current = \"\" + counter++;\n }\n\n return idRef.current;\n}\n","import { PanelData } from \"../types\";\n\ntype SerializedPanelGroupState = { [panelIds: string]: number[] };\n\nfunction loadSerializedPanelGroupState(\n autoSaveId: string\n): SerializedPanelGroupState | null {\n try {\n const serialized = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);\n if (serialized) {\n const parsed = JSON.parse(serialized);\n if (typeof parsed === \"object\" && parsed != null) {\n return parsed;\n }\n }\n } catch (error) {}\n\n return null;\n}\n\nexport function loadPanelLayout(\n autoSaveId: string,\n panelIds: string[]\n): number[] | null {\n const state = loadSerializedPanelGroupState(autoSaveId);\n if (state) {\n return state[panelIds.join(\",\")] ?? null;\n }\n\n return null;\n}\n\nexport function savePanelGroupLayout(\n autoSaveId: string,\n panelIds: string[],\n sizes: number[]\n): void {\n const state = loadSerializedPanelGroupState(autoSaveId) || {};\n state[panelIds.join(\",\")] = sizes;\n\n try {\n localStorage.setItem(\n `PanelGroup:sizes:${autoSaveId}`,\n JSON.stringify(state)\n );\n } catch (error) {\n console.error(error);\n }\n}\n","import { Direction, ResizeEvent } from \"../types\";\n\nexport type Coordinates = {\n screenX: number;\n screenY: number;\n};\n\nexport type Dimensions = {\n height: number;\n width: number;\n};\n\nexport type Movement = {\n movementX: number;\n movementY: number;\n};\n\nconst element = document.createElement(\"div\");\nelement.getBoundingClientRect();\n\n// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX\nexport function getUpdatedCoordinates(\n event: ResizeEvent,\n prevCoordinates: Coordinates,\n dimensions: Dimensions,\n direction: Direction\n): Coordinates & Movement {\n const { screenX: prevScreenX, screenY: prevScreenY } = prevCoordinates;\n const { height, width } = dimensions;\n\n const getMovementBetween = (current: number, prev: number) =>\n prev === 0 ? 0 : current - prev;\n\n if (isKeyDown(event)) {\n let movementX = 0;\n let movementY = 0;\n\n const size = direction === \"horizontal\" ? width : height;\n const denominator = event.shiftKey ? 10 : 100;\n const delta = size / denominator;\n\n switch (event.key) {\n case \"ArrowDown\":\n movementY = delta;\n break;\n case \"ArrowLeft\":\n movementX = -delta;\n break;\n case \"ArrowRight\":\n movementX = delta;\n break;\n case \"ArrowUp\":\n movementY = -delta;\n break;\n case \"End\":\n if (direction === \"horizontal\") {\n movementX = size;\n } else {\n movementY = size;\n }\n break;\n case \"Home\":\n if (direction === \"horizontal\") {\n movementX = -size;\n } else {\n movementY = -size;\n }\n break;\n }\n\n // Estimate screen X/Y to be the center of the resize handle.\n // Otherwise the first mouse/touch event after a keyboard event will appear to \"jump\"\n let screenX = 0;\n let screenY = 0;\n if (document.activeElement) {\n const rect = document.activeElement.getBoundingClientRect();\n screenX = rect.left + rect.width / 2;\n screenY = rect.top + rect.height / 2;\n }\n\n return {\n movementX,\n movementY,\n screenX,\n screenY,\n };\n } else if (isTouchMoveEvent(event)) {\n const firstTouch = event.touches[0];\n\n return {\n movementX: getMovementBetween(firstTouch.screenX, prevScreenX),\n movementY: getMovementBetween(firstTouch.screenY, prevScreenY),\n screenX: firstTouch.screenX,\n screenY: firstTouch.screenY,\n };\n } else if (isMouseMoveEvent(event)) {\n return {\n movementX: getMovementBetween(event.screenX, prevScreenX),\n movementY: getMovementBetween(event.screenY, prevScreenY),\n screenX: event.screenX,\n screenY: event.screenY,\n };\n } else {\n throw Error(`Unsupported event type: \"${(event as any).type}\"`);\n }\n}\n\nexport function isKeyDown(event: ResizeEvent): event is KeyboardEvent {\n return event.type === \"keydown\";\n}\n\nexport function isMouseMoveEvent(event: ResizeEvent): event is MouseEvent {\n return event.type === \"mousemove\";\n}\n\nexport function isTouchMoveEvent(event: ResizeEvent): event is TouchEvent {\n return event.type === \"touchmove\";\n}\n","import { PRECISION } from \"../constants\";\nimport { Direction, PanelData } from \"../types\";\n\nexport function adjustByDelta(\n panels: Map<string, PanelData>,\n idBefore: string,\n idAfter: string,\n delta: number,\n prevSizes: number[]\n): number[] {\n if (delta === 0) {\n return prevSizes;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const nextSizes = prevSizes.concat();\n\n let deltaApplied = 0;\n\n // A resizing panel affects the panels before or after it.\n //\n // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.\n // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.\n //\n // A positive delta means the panel immediately before the resizer should \"expand\".\n // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.\n let pivotId = delta < 0 ? idBefore : idAfter;\n let index = panelsArray.findIndex((panel) => panel.id === pivotId);\n while (true) {\n const panel = panelsArray[index];\n const prevSize = prevSizes[index];\n const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);\n if (prevSize !== nextSize) {\n deltaApplied += prevSize - nextSize;\n\n nextSizes[index] = nextSize;\n\n if (deltaApplied.toPrecision(PRECISION) >= delta.toPrecision(PRECISION)) {\n break;\n }\n }\n\n if (delta < 0) {\n if (--index < 0) {\n break;\n }\n } else {\n if (++index >= panelsArray.length) {\n break;\n }\n }\n }\n\n // If we were unable to resize any of the panels panels, return the previous state.\n // This will essentially bailout and ignore the \"mousemove\" event.\n if (deltaApplied === 0) {\n return prevSizes;\n }\n\n // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.\n pivotId = delta < 0 ? idAfter : idBefore;\n index = panelsArray.findIndex((panel) => panel.id === pivotId);\n nextSizes[index] = prevSizes[index] + deltaApplied;\n\n return nextSizes;\n}\n\nexport function getOffset(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const panelsArray = panelsMapToSortedArray(panels);\n\n let index = panelsArray.findIndex((panel) => panel.id === id);\n if (index < 0) {\n return 0;\n }\n\n let scaledOffset = 0;\n\n for (index = index - 1; index >= 0; index--) {\n const panel = panelsArray[index];\n scaledOffset += getSize(panels, panel.id, direction, sizes, height, width);\n }\n\n return Math.round(scaledOffset);\n}\n\nexport function getPanel(id: string): HTMLDivElement | null {\n const element = document.querySelector(`[data-panel-id=\"${id}\"]`);\n if (element) {\n return element as HTMLDivElement;\n }\n return null;\n}\n\nexport function getResizeHandle(id: string): HTMLDivElement | null {\n const element = document.querySelector(\n `[data-panel-resize-handle-id=\"${id}\"]`\n );\n if (element) {\n return element as HTMLDivElement;\n }\n return null;\n}\n\nexport function getResizeHandleIndex(id: string): number | null {\n const handles = getResizeHandles();\n const index = handles.findIndex(\n (handle) => handle.getAttribute(\"data-panel-resize-handle-id\") === id\n );\n return index ?? null;\n}\n\nexport function getResizeHandles(): HTMLDivElement[] {\n return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id]`));\n}\n\nexport function getResizeHandlesForGroup(groupId: string): HTMLDivElement[] {\n return Array.from(\n document.querySelectorAll(\n `[data-panel-resize-handle-id][data-panel-group-id=\"${groupId}\"]`\n )\n );\n}\n\nexport function getResizeHandlePanelIds(\n groupId: string,\n handleId: string,\n panelsArray: PanelData[]\n): [idBefore: string | null, idAfter: string | null] {\n const handle = getResizeHandle(handleId);\n const handles = getResizeHandlesForGroup(groupId);\n const index = handles.indexOf(handle);\n\n const idBefore: string | null = panelsArray[index]?.id ?? null;\n const idAfter: string | null = panelsArray[index + 1]?.id ?? null;\n\n return [idBefore, idAfter];\n}\n\nexport function panelsMapToSortedArray(\n panels: Map<string, PanelData>\n): PanelData[] {\n return Array.from(panels.values()).sort((a, b) => a.order - b.order);\n}\n\nexport function getSize(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const totalSize = direction === \"horizontal\" ? width : height;\n\n if (panels.size === 1) {\n return totalSize;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const index = panelsArray.findIndex((panel) => panel.id === id);\n const size = sizes[index];\n if (size == null) {\n return 0;\n }\n\n return Math.round(size * totalSize);\n}\n","export const PRECISION = 5;\n","import { RefObject, useEffect } from \"react\";\nimport { PRECISION } from \"../constants\";\n\nimport { CommittedValues, PanelDataMap } from \"../PanelGroup\";\nimport { ResizeHandler } from \"../types\";\nimport {\n adjustByDelta,\n getPanel,\n getResizeHandle,\n getResizeHandleIndex,\n getResizeHandlePanelIds,\n getResizeHandles,\n getResizeHandlesForGroup,\n getSize,\n panelsMapToSortedArray,\n} from \"../utils/group\";\n\n// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/\n\nexport function useWindowSplitterPanelGroupBehavior({\n committedValuesRef,\n groupId,\n panels,\n setSizes,\n sizes,\n}: {\n committedValuesRef: RefObject<CommittedValues>;\n groupId: string;\n panels: PanelDataMap;\n setSizes: (sizes: number[]) => void;\n sizes: number[];\n}): void {\n useEffect(() => {\n const { direction, height, panels, width } = committedValuesRef.current;\n\n const handles = getResizeHandlesForGroup(groupId);\n const cleanupFunctions = handles.map((handle) => {\n const handleId = handle.getAttribute(\"data-panel-resize-handle-id\");\n const panelsArray = panelsMapToSortedArray(panels);\n\n const [idBefore, idAfter] = getResizeHandlePanelIds(\n groupId,\n handleId,\n panelsArray\n );\n if (idBefore == null || idAfter == null) {\n return () => {};\n }\n\n const ariaValueMax = panelsArray.reduce((difference, panel) => {\n if (panel.id !== idBefore) {\n return difference - panel.minSize;\n }\n return difference;\n }, 1);\n\n const ariaValueMin =\n panelsArray.find((panel) => panel.id == idBefore)?.minSize ?? 0;\n\n const size = getSize(panels, idBefore, direction, sizes, height, width);\n const ariaValueNow = size / (direction === \"horizontal\" ? width : height);\n\n handle.setAttribute(\"aria-valuemax\", \"\" + Math.round(100 * ariaValueMax));\n handle.setAttribute(\"aria-valuemin\", \"\" + Math.round(100 * ariaValueMin));\n handle.setAttribute(\"aria-valuenow\", \"\" + Math.round(100 * ariaValueNow));\n\n const onKeyDown = (event: KeyboardEvent) => {\n switch (event.key) {\n case \"Enter\": {\n const index = panelsArray.findIndex(\n (panel) => panel.id === idBefore\n );\n if (index >= 0) {\n const panelData = panelsArray[index];\n const size = sizes[index];\n if (size != null) {\n let delta = 0;\n if (\n size.toPrecision(PRECISION) <=\n panelData.minSize.toPrecision(PRECISION)\n ) {\n delta = direction === \"horizontal\" ? width : height;\n } else {\n delta = -(direction === \"horizontal\" ? width : height);\n }\n\n const nextSizes = adjustByDelta(\n panels,\n idBefore,\n idAfter,\n delta,\n sizes\n );\n if (sizes !== nextSizes) {\n setSizes(nextSizes);\n }\n }\n }\n break;\n }\n }\n };\n\n handle.addEventListener(\"keydown\", onKeyDown);\n\n const panelBefore = getPanel(idBefore);\n if (panelBefore != null) {\n handle.setAttribute(\"aria-controls\", panelBefore.id);\n }\n\n return () => {\n handle.removeAttribute(\"aria-valuemax\");\n handle.removeAttribute(\"aria-valuemin\");\n handle.removeAttribute(\"aria-valuenow\");\n\n handle.removeEventListener(\"keydown\", onKeyDown);\n\n if (panelBefore != null) {\n handle.removeAttribute(\"aria-controls\");\n }\n };\n });\n\n return () => {\n cleanupFunctions.forEach((cleanupFunction) => cleanupFunction());\n };\n }, [groupId, panels, sizes]);\n}\n\nexport function useWindowSplitterResizeHandlerBehavior({\n disabled,\n handleId,\n resizeHandler,\n}: {\n disabled: boolean;\n handleId: string;\n resizeHandler: ResizeHandler | null;\n}): void {\n useEffect(() => {\n if (disabled || resizeHandler == null) {\n return;\n }\n\n const handleElement = getResizeHandle(handleId);\n if (handleElement == null) {\n return;\n }\n\n const onKeyDown = (event: KeyboardEvent) => {\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowLeft\":\n case \"ArrowRight\":\n case \"ArrowUp\":\n case \"End\":\n case \"Home\": {\n resizeHandler(event);\n break;\n }\n case \"F6\": {\n const handles = getResizeHandles();\n const index = getResizeHandleIndex(handleId);\n\n const nextIndex = event.shiftKey\n ? index > 0\n ? index - 1\n : handles.length - 1\n : index + 1 < handles.length\n ? index + 1\n : 0;\n\n const nextHandle = handles[nextIndex] as HTMLDivElement;\n nextHandle.focus();\n\n break;\n }\n }\n };\n\n handleElement.addEventListener(\"keydown\", onKeyDown);\n return () => {\n handleElement.removeEventListener(\"keydown\", onKeyDown);\n };\n }, [disabled, handleId, resizeHandler]);\n}\n","import { ReactNode, useContext, useEffect, useState } from \"react\";\n\nimport useUniqueId from \"./hooks/useUniqueId\";\nimport { useWindowSplitterResizeHandlerBehavior } from \"./hooks/useWindowSplitterBehavior\";\nimport { PanelContext, PanelGroupContext } from \"./PanelContexts\";\nimport type { ResizeHandler, ResizeEvent } from \"./types\";\n\nexport default function PanelResizeHandle({\n children = null,\n className = \"\",\n disabled = false,\n id: idProp = null,\n}: {\n children?: ReactNode;\n className?: string;\n disabled?: boolean;\n id?: string | null;\n}) {\n const panelContext = useContext(PanelContext);\n const panelGroupContext = useContext(PanelGroupContext);\n if (panelContext === null || panelGroupContext === null) {\n throw Error(\n `PanelResizeHandle components must be rendered within a PanelGroup container`\n );\n }\n\n const id = useUniqueId(idProp);\n\n const { activeHandleId } = panelContext;\n const {\n direction,\n groupId,\n registerResizeHandle,\n startDragging,\n stopDragging,\n } = panelGroupContext;\n\n const isDragging = activeHandleId === id;\n\n const [resizeHandler, setResizeHandler] = useState<ResizeHandler | null>(\n null\n );\n\n useEffect(() => {\n if (disabled) {\n setResizeHandler(null);\n } else {\n const resizeHandler = registerResizeHandle(id);\n setResizeHandler(() => resizeHandler);\n }\n }, [disabled, id, registerResizeHandle]);\n\n useEffect(() => {\n if (disabled || resizeHandler == null || !isDragging) {\n return;\n }\n\n document.body.style.cursor =\n direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\";\n\n const onMove = (event: ResizeEvent) => {\n resizeHandler(event);\n };\n\n document.body.addEventListener(\"mouseleave\", stopDragging);\n document.body.addEventListener(\"mousemove\", onMove);\n document.body.addEventListener(\"touchmove\", onMove);\n document.body.addEventListener(\"mouseup\", stopDragging);\n\n return () => {\n document.body.style.cursor = \"\";\n\n document.body.removeEventListener(\"mouseleave\", stopDragging);\n document.body.removeEventListener(\"mousemove\", onMove);\n document.body.removeEventListener(\"touchmove\", onMove);\n document.body.removeEventListener(\"mouseup\", stopDragging);\n };\n }, [direction, disabled, isDragging, resizeHandler, stopDragging]);\n\n useWindowSplitterResizeHandlerBehavior({\n disabled,\n handleId: id,\n resizeHandler,\n });\n\n return (\n <div\n className={className}\n data-panel-group-id={groupId}\n data-panel-resize-handle-enabled={!disabled}\n data-panel-resize-handle-id={id}\n onMouseDown={() => startDragging(id)}\n onMouseUp={stopDragging}\n onTouchCancel={stopDragging}\n onTouchEnd={stopDragging}\n onTouchStart={() => startDragging(id)}\n role=\"separator\"\n style={{\n cursor: direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\",\n touchAction: \"none\",\n }}\n tabIndex={0}\n >\n {children}\n </div>\n );\n}\n"],"names":[],"version":3,"file":"react-resizable-panels.js.map","sourceRoot":"../../../"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-resizable-panels/src/index.ts","packages/react-resizable-panels/src/Panel.tsx","packages/react-resizable-panels/src/PanelContexts.ts","packages/react-resizable-panels/src/PanelGroup.tsx","packages/react-resizable-panels/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/utils/serialization.ts","packages/react-resizable-panels/src/utils/coordinates.ts","packages/react-resizable-panels/src/utils/group.ts","packages/react-resizable-panels/src/constants.ts","packages/react-resizable-panels/src/hooks/useWindowSplitterBehavior.ts","packages/react-resizable-panels/src/PanelResizeHandle.tsx"],"sourcesContent":["import Panel from \"./Panel\";\nimport { PanelContext } from \"./PanelContexts\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelContext, PanelGroup, PanelResizeHandle };\n","import { ReactNode, useContext, useLayoutEffect } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\n\n// TODO [panels]\n// Support min pixel size too.\n// PanelGroup should warn if total width is less min pixel widths.\nexport default function Panel({\n children = null,\n className = \"\",\n defaultSize = 0.1,\n id,\n minSize = 0.1,\n order = null,\n}: {\n children?: ReactNode;\n className?: string;\n defaultSize?: number;\n id: string;\n minSize?: number;\n order?: number | null;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `Panel components must be rendered within a PanelGroup container`\n );\n }\n\n if (minSize > defaultSize) {\n console.error(\n `Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`\n );\n\n defaultSize = minSize;\n }\n\n const { getPanelStyle, registerPanel, unregisterPanel } = context;\n\n useLayoutEffect(() => {\n const panel = {\n defaultSize,\n id,\n minSize,\n order,\n };\n\n registerPanel(id, panel);\n\n return () => {\n unregisterPanel(id);\n };\n }, [defaultSize, id, minSize, order, registerPanel, unregisterPanel]);\n\n const style = getPanelStyle(id);\n\n return (\n <div\n className={className}\n data-panel-id={id}\n id={`data-panel-id-${id}`}\n style={style}\n >\n {children}\n </div>\n );\n}\n","import { CSSProperties, createContext } from \"react\";\n\nimport { PanelData, ResizeHandler } from \"./types\";\n\nexport const PanelContext = createContext<{\n activeHandleId: string | null;\n} | null>(null);\n\nexport const PanelGroupContext = createContext<{\n direction: \"horizontal\" | \"vertical\";\n getPanelStyle: (id: string) => CSSProperties;\n groupId: string;\n registerPanel: (id: string, panel: PanelData) => void;\n registerResizeHandle: (id: string) => ResizeHandler;\n startDragging: (id: string) => void;\n stopDragging: () => void;\n unregisterPanel: (id: string) => void;\n} | null>(null);\n","import {\n CSSProperties,\n ReactNode,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport useUniqueId from \"./hooks/useUniqueId\";\n\nimport { PanelContext, PanelGroupContext } from \"./PanelContexts\";\nimport { Direction, PanelData, ResizeEvent } from \"./types\";\nimport { loadPanelLayout, savePanelGroupLayout } from \"./utils/serialization\";\nimport { getMovement } from \"./utils/coordinates\";\nimport {\n adjustByDelta,\n getOffset,\n getResizeHandlePanelIds,\n getSize,\n panelsMapToSortedArray,\n} from \"./utils/group\";\nimport { useWindowSplitterPanelGroupBehavior } from \"./hooks/useWindowSplitterBehavior\";\n\nexport type CommittedValues = {\n direction: Direction;\n height: number;\n panels: Map<string, PanelData>;\n sizes: number[];\n width: number;\n};\n\nexport type PanelDataMap = Map<string, PanelData>;\n\ntype Props = {\n autoSaveId?: string;\n children?: ReactNode;\n className?: string;\n direction: Direction;\n height: number;\n width: number;\n};\n\n// TODO [panels]\n// Within an active drag, remember original positions to refine more easily on expand.\n// Look at what the Chrome devtools Sources does.\n\nexport default function PanelGroup({\n autoSaveId,\n children = null,\n className = \"\",\n direction,\n height,\n width,\n}: Props) {\n const groupId = useUniqueId();\n\n const [activeHandleId, setActiveHandleId] = useState<string | null>(null);\n const [panels, setPanels] = useState<PanelDataMap>(new Map());\n\n // 0-1 values representing the relative size of each panel.\n const [sizes, setSizes] = useState<number[]>([]);\n\n // Store committed values to avoid unnecessarily re-running memoization/effects functions.\n const committedValuesRef = useRef<CommittedValues>({\n direction,\n height,\n panels,\n sizes,\n width,\n });\n\n useLayoutEffect(() => {\n committedValuesRef.current.direction = direction;\n committedValuesRef.current.height = height;\n committedValuesRef.current.panels = panels;\n committedValuesRef.current.sizes = sizes;\n committedValuesRef.current.width = width;\n });\n\n useWindowSplitterPanelGroupBehavior({\n committedValuesRef,\n groupId,\n panels,\n setSizes,\n sizes,\n });\n\n // Once all panels have registered themselves,\n // Compute the initial sizes based on default weights.\n // This assumes that panels register during initial mount (no conditional rendering)!\n useLayoutEffect(() => {\n const sizes = committedValuesRef.current.sizes;\n if (sizes.length === panels.size) {\n return;\n }\n\n // TODO [panels]\n // Validate that the total minSize is <= 1.\n\n // If this panel has been configured to persist sizing information,\n // default size should be restored from local storage if possible.\n let defaultSizes: number[] | undefined = undefined;\n if (autoSaveId) {\n const panelIds = panelsMapToSortedArray(panels).map((panel) => panel.id);\n defaultSizes = loadPanelLayout(autoSaveId, panelIds);\n }\n\n if (defaultSizes != null) {\n setSizes(defaultSizes);\n } else {\n const panelsArray = panelsMapToSortedArray(panels);\n const totalWeight = panelsArray.reduce((weight, panel) => {\n return weight + panel.defaultSize;\n }, 0);\n\n setSizes(panelsArray.map((panel) => panel.defaultSize / totalWeight));\n }\n }, [autoSaveId, panels]);\n\n useEffect(() => {\n // If this panel has been configured to persist sizing information, save sizes to local storage.\n if (autoSaveId) {\n if (sizes.length === 0 || sizes.length !== panels.size) {\n return;\n }\n\n const panelIds = panelsMapToSortedArray(panels).map((panel) => panel.id);\n savePanelGroupLayout(autoSaveId, panelIds, sizes);\n }\n }, [autoSaveId, panels, sizes]);\n\n const getPanelStyle = useCallback(\n (id: string): CSSProperties => {\n const { panels } = committedValuesRef.current;\n\n const offset = getOffset(panels, id, direction, sizes, height, width);\n const size = getSize(panels, id, direction, sizes, height, width);\n\n if (direction === \"horizontal\") {\n return {\n height: \"100%\",\n position: \"absolute\",\n left: offset,\n top: 0,\n width: size,\n };\n } else {\n return {\n height: size,\n position: \"absolute\",\n left: 0,\n top: offset,\n width: \"100%\",\n };\n }\n },\n [direction, height, sizes, width]\n );\n\n const registerPanel = useCallback((id: string, panel: PanelData) => {\n setPanels((prevPanels) => {\n if (prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.set(id, panel);\n\n return nextPanels;\n });\n }, []);\n\n const registerResizeHandle = useCallback(\n (handleId: string) => {\n const resizeHandler = (event: ResizeEvent) => {\n event.preventDefault();\n\n const {\n direction,\n height,\n panels,\n sizes: prevSizes,\n width,\n } = committedValuesRef.current;\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const [idBefore, idAfter] = getResizeHandlePanelIds(\n groupId,\n handleId,\n panelsArray\n );\n if (idBefore == null || idAfter == null) {\n return;\n }\n\n const movement = getMovement(\n event,\n handleId,\n { height, width },\n direction\n );\n\n const isHorizontal = direction === \"horizontal\";\n const delta = isHorizontal ? movement / width : movement / height;\n\n const nextSizes = adjustByDelta(\n panels,\n idBefore,\n idAfter,\n delta,\n prevSizes\n );\n if (prevSizes !== nextSizes) {\n setSizes(nextSizes);\n }\n };\n\n return resizeHandler;\n },\n [groupId]\n );\n\n const unregisterPanel = useCallback((id: string) => {\n setPanels((prevPanels) => {\n if (!prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.delete(id);\n\n return nextPanels;\n });\n }, []);\n\n const panelGroupContext = useMemo(\n () => ({\n direction,\n getPanelStyle,\n groupId,\n registerPanel,\n registerResizeHandle,\n startDragging: (id: string) => setActiveHandleId(id),\n stopDragging: () => {\n setActiveHandleId(null);\n },\n unregisterPanel,\n }),\n [\n direction,\n getPanelStyle,\n groupId,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n ]\n );\n\n const panelContext = useMemo(\n () => ({\n activeHandleId,\n }),\n [activeHandleId]\n );\n\n return (\n <PanelContext.Provider value={panelContext}>\n <PanelGroupContext.Provider value={panelGroupContext}>\n <div className={className}>{children}</div>\n </PanelGroupContext.Provider>\n </PanelContext.Provider>\n );\n}\n","import { useRef } from \"react\";\n\nlet counter = 0;\n\nexport default function useUniqueId(id: string | null = null): string {\n const idRef = useRef<string | null>(id);\n if (idRef.current === null) {\n idRef.current = \"\" + counter++;\n }\n\n return idRef.current;\n}\n","import { PanelData } from \"../types\";\n\ntype SerializedPanelGroupState = { [panelIds: string]: number[] };\n\nfunction loadSerializedPanelGroupState(\n autoSaveId: string\n): SerializedPanelGroupState | null {\n try {\n const serialized = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);\n if (serialized) {\n const parsed = JSON.parse(serialized);\n if (typeof parsed === \"object\" && parsed != null) {\n return parsed;\n }\n }\n } catch (error) {}\n\n return null;\n}\n\nexport function loadPanelLayout(\n autoSaveId: string,\n panelIds: string[]\n): number[] | null {\n const state = loadSerializedPanelGroupState(autoSaveId);\n if (state) {\n return state[panelIds.join(\",\")] ?? null;\n }\n\n return null;\n}\n\nexport function savePanelGroupLayout(\n autoSaveId: string,\n panelIds: string[],\n sizes: number[]\n): void {\n const state = loadSerializedPanelGroupState(autoSaveId) || {};\n state[panelIds.join(\",\")] = sizes;\n\n try {\n localStorage.setItem(\n `PanelGroup:sizes:${autoSaveId}`,\n JSON.stringify(state)\n );\n } catch (error) {\n console.error(error);\n }\n}\n","import { Direction, ResizeEvent } from \"../types\";\nimport { getResizeHandle } from \"./group\";\n\nexport type Coordinates = {\n movement: number;\n offset: number;\n};\n\nexport type Size = {\n height: number;\n width: number;\n};\n\nconst element = document.createElement(\"div\");\nelement.getBoundingClientRect();\n\n// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX\nexport function getMovement(\n event: ResizeEvent,\n handleId: string,\n { height, width }: Size,\n direction: Direction\n): number {\n const isHorizontal = direction === \"horizontal\";\n const size = isHorizontal ? width : height;\n\n if (isKeyDown(event)) {\n const denominator = event.shiftKey ? 10 : 100;\n const delta = size / denominator;\n\n switch (event.key) {\n case \"ArrowDown\":\n return delta;\n case \"ArrowLeft\":\n return -delta;\n case \"ArrowRight\":\n return delta;\n case \"ArrowUp\":\n return -delta;\n case \"End\":\n if (isHorizontal) {\n return size;\n } else {\n return size;\n }\n case \"Home\":\n if (isHorizontal) {\n return -size;\n } else {\n return -size;\n }\n }\n } else {\n const handleElement = getResizeHandle(handleId)!;\n const rect = handleElement.getBoundingClientRect();\n const elementOffset = isHorizontal ? rect.left : rect.top;\n\n let pointerOffset = 0;\n if (isMouseMoveEvent(event)) {\n pointerOffset = isHorizontal ? event.clientX : event.clientY;\n } else {\n const firstTouch = event.touches[0];\n pointerOffset = isHorizontal ? firstTouch.screenX : firstTouch.screenY;\n }\n\n return pointerOffset - elementOffset;\n }\n}\n\nexport function isKeyDown(event: ResizeEvent): event is KeyboardEvent {\n return event.type === \"keydown\";\n}\n\nexport function isMouseMoveEvent(event: ResizeEvent): event is MouseEvent {\n return event.type === \"mousemove\";\n}\n\nexport function isTouchMoveEvent(event: ResizeEvent): event is TouchEvent {\n return event.type === \"touchmove\";\n}\n","import { PRECISION } from \"../constants\";\nimport { Direction, PanelData } from \"../types\";\n\nexport function adjustByDelta(\n panels: Map<string, PanelData>,\n idBefore: string,\n idAfter: string,\n delta: number,\n prevSizes: number[]\n): number[] {\n if (delta === 0) {\n return prevSizes;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const nextSizes = prevSizes.concat();\n\n let deltaApplied = 0;\n\n // A resizing panel affects the panels before or after it.\n //\n // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.\n // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.\n //\n // A positive delta means the panel immediately before the resizer should \"expand\".\n // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.\n let pivotId = delta < 0 ? idBefore : idAfter;\n let index = panelsArray.findIndex((panel) => panel.id === pivotId);\n while (true) {\n const panel = panelsArray[index];\n const prevSize = prevSizes[index];\n const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);\n if (prevSize !== nextSize) {\n deltaApplied += prevSize - nextSize;\n\n nextSizes[index] = nextSize;\n\n if (deltaApplied.toPrecision(PRECISION) >= delta.toPrecision(PRECISION)) {\n break;\n }\n }\n\n if (delta < 0) {\n if (--index < 0) {\n break;\n }\n } else {\n if (++index >= panelsArray.length) {\n break;\n }\n }\n }\n\n // If we were unable to resize any of the panels panels, return the previous state.\n // This will essentially bailout and ignore the \"mousemove\" event.\n if (deltaApplied === 0) {\n return prevSizes;\n }\n\n // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.\n pivotId = delta < 0 ? idAfter : idBefore;\n index = panelsArray.findIndex((panel) => panel.id === pivotId);\n nextSizes[index] = prevSizes[index] + deltaApplied;\n\n return nextSizes;\n}\n\nexport function getOffset(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const panelsArray = panelsMapToSortedArray(panels);\n\n let index = panelsArray.findIndex((panel) => panel.id === id);\n if (index < 0) {\n return 0;\n }\n\n let scaledOffset = 0;\n\n for (index = index - 1; index >= 0; index--) {\n const panel = panelsArray[index];\n scaledOffset += getSize(panels, panel.id, direction, sizes, height, width);\n }\n\n return Math.round(scaledOffset);\n}\n\nexport function getPanel(id: string): HTMLDivElement | null {\n const element = document.querySelector(`[data-panel-id=\"${id}\"]`);\n if (element) {\n return element as HTMLDivElement;\n }\n return null;\n}\n\nexport function getResizeHandle(id: string): HTMLDivElement | null {\n const element = document.querySelector(\n `[data-panel-resize-handle-id=\"${id}\"]`\n );\n if (element) {\n return element as HTMLDivElement;\n }\n return null;\n}\n\nexport function getResizeHandleIndex(id: string): number | null {\n const handles = getResizeHandles();\n const index = handles.findIndex(\n (handle) => handle.getAttribute(\"data-panel-resize-handle-id\") === id\n );\n return index ?? null;\n}\n\nexport function getResizeHandles(): HTMLDivElement[] {\n return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id]`));\n}\n\nexport function getResizeHandlesForGroup(groupId: string): HTMLDivElement[] {\n return Array.from(\n document.querySelectorAll(\n `[data-panel-resize-handle-id][data-panel-group-id=\"${groupId}\"]`\n )\n );\n}\n\nexport function getResizeHandlePanelIds(\n groupId: string,\n handleId: string,\n panelsArray: PanelData[]\n): [idBefore: string | null, idAfter: string | null] {\n const handle = getResizeHandle(handleId);\n const handles = getResizeHandlesForGroup(groupId);\n const index = handles.indexOf(handle);\n\n const idBefore: string | null = panelsArray[index]?.id ?? null;\n const idAfter: string | null = panelsArray[index + 1]?.id ?? null;\n\n return [idBefore, idAfter];\n}\n\nexport function panelsMapToSortedArray(\n panels: Map<string, PanelData>\n): PanelData[] {\n return Array.from(panels.values()).sort((a, b) => a.order - b.order);\n}\n\nexport function getSize(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const totalSize = direction === \"horizontal\" ? width : height;\n\n if (panels.size === 1) {\n return totalSize;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const index = panelsArray.findIndex((panel) => panel.id === id);\n const size = sizes[index];\n if (size == null) {\n return 0;\n }\n\n return Math.round(size * totalSize);\n}\n","export const PRECISION = 5;\n","import { RefObject, useEffect } from \"react\";\nimport { PRECISION } from \"../constants\";\n\nimport { CommittedValues, PanelDataMap } from \"../PanelGroup\";\nimport { ResizeHandler } from \"../types\";\nimport {\n adjustByDelta,\n getPanel,\n getResizeHandle,\n getResizeHandleIndex,\n getResizeHandlePanelIds,\n getResizeHandles,\n getResizeHandlesForGroup,\n getSize,\n panelsMapToSortedArray,\n} from \"../utils/group\";\n\n// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/\n\nexport function useWindowSplitterPanelGroupBehavior({\n committedValuesRef,\n groupId,\n panels,\n setSizes,\n sizes,\n}: {\n committedValuesRef: RefObject<CommittedValues>;\n groupId: string;\n panels: PanelDataMap;\n setSizes: (sizes: number[]) => void;\n sizes: number[];\n}): void {\n useEffect(() => {\n const { direction, height, panels, width } = committedValuesRef.current;\n\n const handles = getResizeHandlesForGroup(groupId);\n const cleanupFunctions = handles.map((handle) => {\n const handleId = handle.getAttribute(\"data-panel-resize-handle-id\");\n const panelsArray = panelsMapToSortedArray(panels);\n\n const [idBefore, idAfter] = getResizeHandlePanelIds(\n groupId,\n handleId,\n panelsArray\n );\n if (idBefore == null || idAfter == null) {\n return () => {};\n }\n\n const ariaValueMax = panelsArray.reduce((difference, panel) => {\n if (panel.id !== idBefore) {\n return difference - panel.minSize;\n }\n return difference;\n }, 1);\n\n const ariaValueMin =\n panelsArray.find((panel) => panel.id == idBefore)?.minSize ?? 0;\n\n const size = getSize(panels, idBefore, direction, sizes, height, width);\n const ariaValueNow = size / (direction === \"horizontal\" ? width : height);\n\n handle.setAttribute(\"aria-valuemax\", \"\" + Math.round(100 * ariaValueMax));\n handle.setAttribute(\"aria-valuemin\", \"\" + Math.round(100 * ariaValueMin));\n handle.setAttribute(\"aria-valuenow\", \"\" + Math.round(100 * ariaValueNow));\n\n const onKeyDown = (event: KeyboardEvent) => {\n switch (event.key) {\n case \"Enter\": {\n const index = panelsArray.findIndex(\n (panel) => panel.id === idBefore\n );\n if (index >= 0) {\n const panelData = panelsArray[index];\n const size = sizes[index];\n if (size != null) {\n let delta = 0;\n if (\n size.toPrecision(PRECISION) <=\n panelData.minSize.toPrecision(PRECISION)\n ) {\n delta = direction === \"horizontal\" ? width : height;\n } else {\n delta = -(direction === \"horizontal\" ? width : height);\n }\n\n const nextSizes = adjustByDelta(\n panels,\n idBefore,\n idAfter,\n delta,\n sizes\n );\n if (sizes !== nextSizes) {\n setSizes(nextSizes);\n }\n }\n }\n break;\n }\n }\n };\n\n handle.addEventListener(\"keydown\", onKeyDown);\n\n const panelBefore = getPanel(idBefore);\n if (panelBefore != null) {\n handle.setAttribute(\"aria-controls\", panelBefore.id);\n }\n\n return () => {\n handle.removeAttribute(\"aria-valuemax\");\n handle.removeAttribute(\"aria-valuemin\");\n handle.removeAttribute(\"aria-valuenow\");\n\n handle.removeEventListener(\"keydown\", onKeyDown);\n\n if (panelBefore != null) {\n handle.removeAttribute(\"aria-controls\");\n }\n };\n });\n\n return () => {\n cleanupFunctions.forEach((cleanupFunction) => cleanupFunction());\n };\n }, [groupId, panels, sizes]);\n}\n\nexport function useWindowSplitterResizeHandlerBehavior({\n disabled,\n handleId,\n resizeHandler,\n}: {\n disabled: boolean;\n handleId: string;\n resizeHandler: ResizeHandler | null;\n}): void {\n useEffect(() => {\n if (disabled || resizeHandler == null) {\n return;\n }\n\n const handleElement = getResizeHandle(handleId);\n if (handleElement == null) {\n return;\n }\n\n const onKeyDown = (event: KeyboardEvent) => {\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowLeft\":\n case \"ArrowRight\":\n case \"ArrowUp\":\n case \"End\":\n case \"Home\": {\n resizeHandler(event);\n break;\n }\n case \"F6\": {\n const handles = getResizeHandles();\n const index = getResizeHandleIndex(handleId);\n\n const nextIndex = event.shiftKey\n ? index > 0\n ? index - 1\n : handles.length - 1\n : index + 1 < handles.length\n ? index + 1\n : 0;\n\n const nextHandle = handles[nextIndex] as HTMLDivElement;\n nextHandle.focus();\n\n break;\n }\n }\n };\n\n handleElement.addEventListener(\"keydown\", onKeyDown);\n return () => {\n handleElement.removeEventListener(\"keydown\", onKeyDown);\n };\n }, [disabled, handleId, resizeHandler]);\n}\n","import {\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport useUniqueId from \"./hooks/useUniqueId\";\nimport { useWindowSplitterResizeHandlerBehavior } from \"./hooks/useWindowSplitterBehavior\";\nimport { PanelContext, PanelGroupContext } from \"./PanelContexts\";\nimport type { ResizeHandler, ResizeEvent } from \"./types\";\n\nexport default function PanelResizeHandle({\n children = null,\n className = \"\",\n disabled = false,\n id: idProp = null,\n}: {\n children?: ReactNode;\n className?: string;\n disabled?: boolean;\n id?: string | null;\n}) {\n const divElementRef = useRef<HTMLDivElement>(null);\n\n const panelContext = useContext(PanelContext);\n const panelGroupContext = useContext(PanelGroupContext);\n if (panelContext === null || panelGroupContext === null) {\n throw Error(\n `PanelResizeHandle components must be rendered within a PanelGroup container`\n );\n }\n\n const id = useUniqueId(idProp);\n\n const { activeHandleId } = panelContext;\n const {\n direction,\n groupId,\n registerResizeHandle,\n startDragging,\n stopDragging,\n } = panelGroupContext;\n\n const isDragging = activeHandleId === id;\n\n const [resizeHandler, setResizeHandler] = useState<ResizeHandler | null>(\n null\n );\n\n const stopDraggingAndBlur = useCallback(() => {\n // Clicking on the drag handle shouldn't leave it focused;\n // That would cause the PanelGroup to think it was still active.\n const div = divElementRef.current!;\n div.blur();\n\n stopDragging();\n }, [stopDragging]);\n\n useEffect(() => {\n if (disabled) {\n setResizeHandler(null);\n } else {\n const resizeHandler = registerResizeHandle(id);\n setResizeHandler(() => resizeHandler);\n }\n }, [disabled, id, registerResizeHandle]);\n\n useEffect(() => {\n if (disabled || resizeHandler == null || !isDragging) {\n return;\n }\n\n document.body.style.cursor =\n direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\";\n\n const onMove = (event: ResizeEvent) => {\n resizeHandler(event);\n };\n\n document.body.addEventListener(\"mouseleave\", stopDraggingAndBlur);\n document.body.addEventListener(\"mousemove\", onMove);\n document.body.addEventListener(\"touchmove\", onMove);\n document.body.addEventListener(\"mouseup\", stopDraggingAndBlur);\n\n return () => {\n document.body.style.cursor = \"\";\n\n document.body.removeEventListener(\"mouseleave\", stopDraggingAndBlur);\n document.body.removeEventListener(\"mousemove\", onMove);\n document.body.removeEventListener(\"touchmove\", onMove);\n document.body.removeEventListener(\"mouseup\", stopDraggingAndBlur);\n };\n }, [direction, disabled, isDragging, resizeHandler, stopDraggingAndBlur]);\n\n useWindowSplitterResizeHandlerBehavior({\n disabled,\n handleId: id,\n resizeHandler,\n });\n\n return (\n <div\n className={className}\n data-panel-group-id={groupId}\n data-panel-resize-handle-enabled={!disabled}\n data-panel-resize-handle-id={id}\n onMouseDown={() => startDragging(id)}\n onMouseUp={stopDraggingAndBlur}\n onTouchCancel={stopDraggingAndBlur}\n onTouchEnd={stopDraggingAndBlur}\n onTouchStart={() => startDragging(id)}\n ref={divElementRef}\n role=\"separator\"\n style={{\n cursor: direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\",\n touchAction: \"none\",\n }}\n tabIndex={0}\n >\n {children}\n </div>\n );\n}\n"],"names":[],"version":3,"file":"react-resizable-panels.js.map"}
|