@asup/context-menu 2.1.0 → 2.2.1
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/cjs/main.js +246 -146
- package/dist/cjs/main.js.map +1 -1
- package/dist/context-menu.d.ts +17 -1
- package/dist/context-menu.d.ts.map +1 -1
- package/dist/main.js +245 -147
- package/dist/main.js.map +1 -1
- package/package.json +9 -9
package/dist/cjs/main.js
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
require("./main.css");
|
|
2
|
-
var $gTuX4$swchelperscjs_object_spreadcjs = require("@swc/helpers/cjs/_object_spread.cjs");
|
|
3
|
-
var $gTuX4$swchelperscjs_object_spread_propscjs = require("@swc/helpers/cjs/_object_spread_props.cjs");
|
|
4
|
-
var $gTuX4$swchelperscjs_object_without_propertiescjs = require("@swc/helpers/cjs/_object_without_properties.cjs");
|
|
5
2
|
var $gTuX4$reactjsxruntime = require("react/jsx-runtime");
|
|
6
3
|
var $gTuX4$react = require("react");
|
|
7
4
|
var $gTuX4$reactdom = require("react-dom");
|
|
@@ -32,6 +29,8 @@ function $parcel$interopDefault(a) {
|
|
|
32
29
|
return a && a.__esModule ? a.default : a;
|
|
33
30
|
}
|
|
34
31
|
|
|
32
|
+
$parcel$export(module.exports, "useMouseMove", function () { return $847f433873d20215$export$f93615b9594453fc; });
|
|
33
|
+
|
|
35
34
|
|
|
36
35
|
var $a68bd8a6c0fd98c2$exports = {};
|
|
37
36
|
|
|
@@ -42,9 +41,6 @@ $parcel$export($a68bd8a6c0fd98c2$exports, "ContextMenuHandler", function () { re
|
|
|
42
41
|
$parcel$export($a68bd8a6c0fd98c2$exports, "ContextWindow", function () { return $46fb0088a1bbb6d8$export$1af8984c69ba1b24; });
|
|
43
42
|
|
|
44
43
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
44
|
var $796f463330153c24$exports = {};
|
|
49
45
|
|
|
50
46
|
$parcel$export($796f463330153c24$exports, "autoHeightInner", function () { return $796f463330153c24$export$df919f6b0f7f84e6; }, function (v) { return $796f463330153c24$export$df919f6b0f7f84e6 = v; });
|
|
@@ -55,12 +51,7 @@ $796f463330153c24$export$df919f6b0f7f84e6 = `aiw-AutoHeight-module-pDlSVW-autoHe
|
|
|
55
51
|
$796f463330153c24$export$563bd8f955c52746 = `aiw-AutoHeight-module-pDlSVW-autoHeightWrapper`;
|
|
56
52
|
|
|
57
53
|
|
|
58
|
-
function $95149596d5a7ed2b$export$77bf000da9303d1(
|
|
59
|
-
var { children: children, hide: hide = false, duration: duration = 300 } = _param, rest = (0, $gTuX4$swchelperscjs_object_without_propertiescjs._)(_param, [
|
|
60
|
-
"children",
|
|
61
|
-
"hide",
|
|
62
|
-
"duration"
|
|
63
|
-
]);
|
|
54
|
+
function $95149596d5a7ed2b$export$77bf000da9303d1({ children: children, hide: hide = false, duration: duration = 300, ...rest }) {
|
|
64
55
|
const wrapperRef = (0, $gTuX4$react.useRef)(null);
|
|
65
56
|
const innerRef = (0, $gTuX4$react.useRef)(null);
|
|
66
57
|
const [height, setHeight] = (0, $gTuX4$react.useState)(null);
|
|
@@ -143,20 +134,22 @@ function $95149596d5a7ed2b$export$77bf000da9303d1(_param) {
|
|
|
143
134
|
}
|
|
144
135
|
};
|
|
145
136
|
}, []);
|
|
146
|
-
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div",
|
|
137
|
+
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
138
|
+
...rest,
|
|
147
139
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($796f463330153c24$exports))).autoHeightWrapper,
|
|
148
140
|
ref: wrapperRef,
|
|
149
|
-
style:
|
|
141
|
+
style: {
|
|
142
|
+
...rest.style,
|
|
150
143
|
display: animationState === "closed" ? "none" : undefined,
|
|
151
144
|
height: height ? `${height}px` : "auto",
|
|
152
145
|
transitionDuration: `${duration}ms`
|
|
153
|
-
}
|
|
146
|
+
},
|
|
154
147
|
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
155
148
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($796f463330153c24$exports))).autoHeightInner,
|
|
156
149
|
ref: innerRef,
|
|
157
150
|
children: targetChildren
|
|
158
151
|
})
|
|
159
|
-
})
|
|
152
|
+
});
|
|
160
153
|
}
|
|
161
154
|
$95149596d5a7ed2b$export$77bf000da9303d1.displayName = "AutoHeight";
|
|
162
155
|
|
|
@@ -166,9 +159,6 @@ $95149596d5a7ed2b$export$77bf000da9303d1.displayName = "AutoHeight";
|
|
|
166
159
|
|
|
167
160
|
|
|
168
161
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
162
|
var $da5a7b95ca760552$exports = {};
|
|
173
163
|
|
|
174
164
|
$parcel$export($da5a7b95ca760552$exports, "anchor", function () { return $da5a7b95ca760552$export$2e2992790a6f69a8; }, function (v) { return $da5a7b95ca760552$export$2e2992790a6f69a8 = v; });
|
|
@@ -209,13 +199,9 @@ $da5a7b95ca760552$export$664c6d24e3175067 = `aiw-ContextMenu-module-WinFxq-visib
|
|
|
209
199
|
|
|
210
200
|
|
|
211
201
|
|
|
212
|
-
|
|
213
|
-
const $d35a356381c44181$export$7e4e6110f96afd7e = ({ entries: entries, toClose: toClose })=>{
|
|
214
|
-
const [visible, setVisible] = (0, $gTuX4$react.useState)(false);
|
|
202
|
+
const $d35a356381c44181$export$7e4e6110f96afd7e = ({ entries: entries, toClose: toClose, visible: visible })=>{
|
|
215
203
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("span", {
|
|
216
204
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).caretHolder,
|
|
217
|
-
onMouseEnter: ()=>setVisible(true),
|
|
218
|
-
onMouseLeave: ()=>setVisible(false),
|
|
219
205
|
children: [
|
|
220
206
|
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("svg", {
|
|
221
207
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -245,11 +231,18 @@ $d35a356381c44181$export$7e4e6110f96afd7e.displayName = "ContextSubMenu";
|
|
|
245
231
|
|
|
246
232
|
const $1e1f300656d89038$export$c868ef28d2ba36f1 = ({ entry: entry, toClose: toClose })=>{
|
|
247
233
|
const [target, setTarget] = (0, $gTuX4$react.useState)(null);
|
|
234
|
+
const [subMenuVisible, setSubMenuVisible] = (0, $gTuX4$react.useState)(false);
|
|
248
235
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
|
|
249
236
|
className: [
|
|
250
237
|
(0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).contextMenuItem,
|
|
251
238
|
entry.disabled ? (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).disabled : ""
|
|
252
239
|
].filter((c)=>c !== "").join(" "),
|
|
240
|
+
onMouseEnter: entry.group ? ()=>{
|
|
241
|
+
setSubMenuVisible(true);
|
|
242
|
+
} : undefined,
|
|
243
|
+
onMouseLeave: entry.group ? ()=>{
|
|
244
|
+
setSubMenuVisible(false);
|
|
245
|
+
} : undefined,
|
|
253
246
|
children: [
|
|
254
247
|
typeof entry.label === "string" ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
|
|
255
248
|
"aria-label": entry.label,
|
|
@@ -275,7 +268,8 @@ const $1e1f300656d89038$export$c868ef28d2ba36f1 = ({ entry: entry, toClose: toCl
|
|
|
275
268
|
}) : entry.label,
|
|
276
269
|
entry.group && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $d35a356381c44181$export$7e4e6110f96afd7e), {
|
|
277
270
|
toClose: toClose,
|
|
278
|
-
entries: entry.group
|
|
271
|
+
entries: entry.group,
|
|
272
|
+
visible: subMenuVisible
|
|
279
273
|
})
|
|
280
274
|
]
|
|
281
275
|
});
|
|
@@ -332,12 +326,7 @@ $5150b66b01c99189$export$8dc6765e8be191c7.displayName = "ContextMenu";
|
|
|
332
326
|
|
|
333
327
|
|
|
334
328
|
|
|
335
|
-
const $a79b75d040e03c92$export$d4ebdd58e04c6ace = (
|
|
336
|
-
var { id: id, menuItems: menuItems, children: children } = _param, rest = (0, $gTuX4$swchelperscjs_object_without_propertiescjs._)(_param, [
|
|
337
|
-
"id",
|
|
338
|
-
"menuItems",
|
|
339
|
-
"children"
|
|
340
|
-
]);
|
|
329
|
+
const $a79b75d040e03c92$export$d4ebdd58e04c6ace = ({ id: id, menuItems: menuItems, children: children, ...rest })=>{
|
|
341
330
|
// Menu state
|
|
342
331
|
const [menuInDom, setMenuInDom] = (0, $gTuX4$react.useState)(false);
|
|
343
332
|
const [menuVisible, setMenuVisible] = (0, $gTuX4$react.useState)(false);
|
|
@@ -387,10 +376,10 @@ const $a79b75d040e03c92$export$d4ebdd58e04c6ace = (_param)=>{
|
|
|
387
376
|
]);
|
|
388
377
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)((0, $gTuX4$reactjsxruntime.Fragment), {
|
|
389
378
|
children: [
|
|
390
|
-
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div",
|
|
379
|
+
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
380
|
+
...rest,
|
|
391
381
|
id: id,
|
|
392
382
|
onClick: (e)=>{
|
|
393
|
-
var _rest_onClick;
|
|
394
383
|
if (menuItems) {
|
|
395
384
|
setMenuInDom(true);
|
|
396
385
|
e.preventDefault();
|
|
@@ -401,10 +390,10 @@ const $a79b75d040e03c92$export$d4ebdd58e04c6ace = (_param)=>{
|
|
|
401
390
|
setMenuXPos(e.pageX);
|
|
402
391
|
setMenuYPos(e.pageY);
|
|
403
392
|
}, 1);
|
|
404
|
-
} else
|
|
393
|
+
} else rest.onClick?.(e);
|
|
405
394
|
},
|
|
406
395
|
children: children
|
|
407
|
-
})
|
|
396
|
+
}),
|
|
408
397
|
menuInDom && menuItems && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
409
398
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).anchor,
|
|
410
399
|
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), {
|
|
@@ -432,9 +421,6 @@ $a79b75d040e03c92$export$d4ebdd58e04c6ace.displayName = "ClickForMenu";
|
|
|
432
421
|
|
|
433
422
|
|
|
434
423
|
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
424
|
var $63cdf2819565020c$exports = {};
|
|
439
425
|
|
|
440
426
|
$parcel$export($63cdf2819565020c$exports, "caretHolder", function () { return $63cdf2819565020c$export$6ed5f4fbab298e07; }, function (v) { return $63cdf2819565020c$export$6ed5f4fbab298e07 = v; });
|
|
@@ -530,10 +516,9 @@ const $b34598671fff4a77$export$aafc28aea571c4bc = ({ entry: entry })=>{
|
|
|
530
516
|
setTarget(null);
|
|
531
517
|
},
|
|
532
518
|
onClick: (e)=>{
|
|
533
|
-
var _entry_action;
|
|
534
519
|
e.preventDefault();
|
|
535
520
|
e.stopPropagation();
|
|
536
|
-
if (!entry.disabled)
|
|
521
|
+
if (!entry.disabled) entry.action?.(target);
|
|
537
522
|
},
|
|
538
523
|
children: [
|
|
539
524
|
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
|
|
@@ -579,12 +564,7 @@ const $3c568ee547c732c3$export$fc58dc71afe92de2 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
579
564
|
function $3c568ee547c732c3$var$isDivider(label) {
|
|
580
565
|
return typeof label !== "string" && label.type === "hr";
|
|
581
566
|
}
|
|
582
|
-
const $3c568ee547c732c3$export$ed4f9641643dc7e4 = (
|
|
583
|
-
var { children: children, menuItems: menuItems, showLowMenu: showLowMenu = false } = _param, rest = (0, $gTuX4$swchelperscjs_object_without_propertiescjs._)(_param, [
|
|
584
|
-
"children",
|
|
585
|
-
"menuItems",
|
|
586
|
-
"showLowMenu"
|
|
587
|
-
]);
|
|
567
|
+
const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuItems: menuItems, showLowMenu: showLowMenu = false, ...rest })=>{
|
|
588
568
|
// Check for higher content menu
|
|
589
569
|
const higherContext = (0, $gTuX4$react.useContext)($3c568ee547c732c3$export$fc58dc71afe92de2);
|
|
590
570
|
const thisMenuItems = [
|
|
@@ -629,7 +609,7 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = (_param)=>{
|
|
|
629
609
|
window.addEventListener("scroll", updatePos, true);
|
|
630
610
|
let ro = null;
|
|
631
611
|
if (typeof ResizeObserver !== "undefined" && divHandlderRef.current) {
|
|
632
|
-
ro = new ResizeObserver(
|
|
612
|
+
ro = new ResizeObserver(updatePos);
|
|
633
613
|
ro.observe(divHandlderRef.current);
|
|
634
614
|
}
|
|
635
615
|
return ()=>{
|
|
@@ -644,8 +624,7 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = (_param)=>{
|
|
|
644
624
|
]);
|
|
645
625
|
// Handle click off the menu
|
|
646
626
|
const handleClick = (0, $gTuX4$react.useCallback)((e)=>{
|
|
647
|
-
|
|
648
|
-
if (menuRef.current && (e.target instanceof Element && !((_menuRef_current = menuRef.current) === null || _menuRef_current === void 0 ? void 0 : _menuRef_current.contains(e.target)) || !(e.target instanceof Element))) setMenuVisible(false);
|
|
627
|
+
if (menuRef.current && (e.target instanceof Element && !menuRef.current?.contains(e.target) || !(e.target instanceof Element))) setMenuVisible(false);
|
|
649
628
|
}, []);
|
|
650
629
|
// Update the document click handler
|
|
651
630
|
(0, $gTuX4$react.useEffect)(()=>{
|
|
@@ -676,9 +655,9 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = (_param)=>{
|
|
|
676
655
|
menuItems: thisMenuItems
|
|
677
656
|
},
|
|
678
657
|
children: [
|
|
679
|
-
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div",
|
|
680
|
-
ref: divHandlderRef
|
|
681
|
-
|
|
658
|
+
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
659
|
+
ref: divHandlderRef,
|
|
660
|
+
...rest,
|
|
682
661
|
className: [
|
|
683
662
|
(0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).contextMenuHandler,
|
|
684
663
|
rest.className
|
|
@@ -697,7 +676,6 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = (_param)=>{
|
|
|
697
676
|
}
|
|
698
677
|
},
|
|
699
678
|
onMouseEnter: async (e)=>{
|
|
700
|
-
var _rest_onMouseEnter;
|
|
701
679
|
if (showLowMenu) {
|
|
702
680
|
setMenuInDom(true);
|
|
703
681
|
setMouseOverHandlerDiv(false);
|
|
@@ -706,19 +684,18 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = (_param)=>{
|
|
|
706
684
|
setMouseOverHandlerDiv(true);
|
|
707
685
|
}, 1);
|
|
708
686
|
}
|
|
709
|
-
|
|
687
|
+
rest.onMouseEnter?.(e);
|
|
710
688
|
},
|
|
711
689
|
onMouseLeave: async (e)=>{
|
|
712
|
-
var _rest_onMouseLeave;
|
|
713
690
|
if (showLowMenu) {
|
|
714
691
|
removeController.current.abort();
|
|
715
692
|
removeController.current = new AbortController();
|
|
716
693
|
setMouseOverHandlerDiv(false);
|
|
717
694
|
}
|
|
718
|
-
|
|
695
|
+
rest.onMouseLeave?.(e);
|
|
719
696
|
},
|
|
720
697
|
children: children
|
|
721
|
-
})
|
|
698
|
+
}),
|
|
722
699
|
menuInDom && divHandlerPos && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
723
700
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).anchor,
|
|
724
701
|
onMouseEnter: ()=>{
|
|
@@ -757,9 +734,6 @@ $3c568ee547c732c3$export$ed4f9641643dc7e4.displayName = "ContextMenuHandler";
|
|
|
757
734
|
|
|
758
735
|
|
|
759
736
|
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
737
|
const $c986bcdcae4b83bd$export$d81cfea7c54be196 = (divRef)=>{
|
|
764
738
|
if (!divRef.current) return {
|
|
765
739
|
translateX: 0,
|
|
@@ -782,6 +756,137 @@ const $c986bcdcae4b83bd$export$d81cfea7c54be196 = (divRef)=>{
|
|
|
782
756
|
};
|
|
783
757
|
|
|
784
758
|
|
|
759
|
+
|
|
760
|
+
const $847f433873d20215$export$f93615b9594453fc = ({ onMouseDown: onMouseDownCallback, onMouseMove: onMouseMoveCallback, onMouseUp: onMouseUpCallback, onInteractionEnd: onInteractionEndCallback, interactionEndEnabled: interactionEndEnabled = true, onViewportResize: onViewportResizeCallback, viewportResizeEnabled: viewportResizeEnabled = true })=>{
|
|
761
|
+
const mouseMoveRef = (0, $gTuX4$react.useRef)(null);
|
|
762
|
+
const mouseUpRef = (0, $gTuX4$react.useRef)(null);
|
|
763
|
+
const mouseDownElementRef = (0, $gTuX4$react.useRef)(null);
|
|
764
|
+
const mouseDownUserSelectRef = (0, $gTuX4$react.useRef)(null);
|
|
765
|
+
const interactionEndRef = (0, $gTuX4$react.useRef)(null);
|
|
766
|
+
const interactionEndCallbackRef = (0, $gTuX4$react.useRef)(onInteractionEndCallback);
|
|
767
|
+
const viewportResizeCallbackRef = (0, $gTuX4$react.useRef)(onViewportResizeCallback);
|
|
768
|
+
(0, $gTuX4$react.useEffect)(()=>{
|
|
769
|
+
interactionEndCallbackRef.current = onInteractionEndCallback;
|
|
770
|
+
}, [
|
|
771
|
+
onInteractionEndCallback
|
|
772
|
+
]);
|
|
773
|
+
(0, $gTuX4$react.useEffect)(()=>{
|
|
774
|
+
viewportResizeCallbackRef.current = onViewportResizeCallback;
|
|
775
|
+
}, [
|
|
776
|
+
onViewportResizeCallback
|
|
777
|
+
]);
|
|
778
|
+
const removeMouseListeners = (0, $gTuX4$react.useCallback)(()=>{
|
|
779
|
+
if (mouseMoveRef.current) {
|
|
780
|
+
document.removeEventListener("mousemove", mouseMoveRef.current);
|
|
781
|
+
document.removeEventListener("pointermove", mouseMoveRef.current);
|
|
782
|
+
}
|
|
783
|
+
if (mouseUpRef.current) {
|
|
784
|
+
document.removeEventListener("mouseup", mouseUpRef.current);
|
|
785
|
+
document.removeEventListener("pointerup", mouseUpRef.current);
|
|
786
|
+
}
|
|
787
|
+
}, []);
|
|
788
|
+
const restoreMouseDownUserSelect = (0, $gTuX4$react.useCallback)(()=>{
|
|
789
|
+
if (mouseDownElementRef.current) {
|
|
790
|
+
/* v8 ignore next */ mouseDownElementRef.current.style.userSelect = mouseDownUserSelectRef.current ?? "";
|
|
791
|
+
mouseDownElementRef.current = null;
|
|
792
|
+
mouseDownUserSelectRef.current = null;
|
|
793
|
+
}
|
|
794
|
+
}, []);
|
|
795
|
+
const removeInteractionEndListeners = (0, $gTuX4$react.useCallback)(()=>{
|
|
796
|
+
if (interactionEndRef.current) {
|
|
797
|
+
document.removeEventListener("mouseup", interactionEndRef.current, true);
|
|
798
|
+
document.removeEventListener("pointerup", interactionEndRef.current, true);
|
|
799
|
+
interactionEndRef.current = null;
|
|
800
|
+
}
|
|
801
|
+
}, []);
|
|
802
|
+
const onMouseMove = (0, $gTuX4$react.useCallback)((e)=>{
|
|
803
|
+
e.preventDefault();
|
|
804
|
+
e.stopPropagation();
|
|
805
|
+
onMouseMoveCallback?.(e);
|
|
806
|
+
}, [
|
|
807
|
+
onMouseMoveCallback
|
|
808
|
+
]);
|
|
809
|
+
const onMouseUp = (0, $gTuX4$react.useCallback)((e)=>{
|
|
810
|
+
e.preventDefault();
|
|
811
|
+
e.stopPropagation();
|
|
812
|
+
removeMouseListeners();
|
|
813
|
+
restoreMouseDownUserSelect();
|
|
814
|
+
onMouseUpCallback?.(e);
|
|
815
|
+
}, [
|
|
816
|
+
onMouseUpCallback,
|
|
817
|
+
removeMouseListeners,
|
|
818
|
+
restoreMouseDownUserSelect
|
|
819
|
+
]);
|
|
820
|
+
const onMouseDown = (0, $gTuX4$react.useCallback)((e)=>{
|
|
821
|
+
restoreMouseDownUserSelect();
|
|
822
|
+
mouseDownElementRef.current = e.currentTarget;
|
|
823
|
+
mouseDownUserSelectRef.current = e.currentTarget.style.userSelect;
|
|
824
|
+
e.currentTarget.style.userSelect = "none";
|
|
825
|
+
mouseMoveRef.current = onMouseMove;
|
|
826
|
+
mouseUpRef.current = onMouseUp;
|
|
827
|
+
document.addEventListener("mousemove", onMouseMove);
|
|
828
|
+
document.addEventListener("pointermove", onMouseMove);
|
|
829
|
+
document.addEventListener("mouseup", onMouseUp);
|
|
830
|
+
document.addEventListener("pointerup", onMouseUp);
|
|
831
|
+
onMouseDownCallback?.(e);
|
|
832
|
+
}, [
|
|
833
|
+
onMouseDownCallback,
|
|
834
|
+
onMouseMove,
|
|
835
|
+
onMouseUp,
|
|
836
|
+
restoreMouseDownUserSelect
|
|
837
|
+
]);
|
|
838
|
+
const armInteractionEnd = (0, $gTuX4$react.useCallback)(()=>{
|
|
839
|
+
if (!interactionEndEnabled || interactionEndRef.current) return;
|
|
840
|
+
const onInteractionEnd = (e)=>{
|
|
841
|
+
removeInteractionEndListeners();
|
|
842
|
+
interactionEndCallbackRef.current?.(e);
|
|
843
|
+
};
|
|
844
|
+
interactionEndRef.current = onInteractionEnd;
|
|
845
|
+
document.addEventListener("mouseup", onInteractionEnd, true);
|
|
846
|
+
document.addEventListener("pointerup", onInteractionEnd, true);
|
|
847
|
+
}, [
|
|
848
|
+
interactionEndEnabled,
|
|
849
|
+
removeInteractionEndListeners
|
|
850
|
+
]);
|
|
851
|
+
(0, $gTuX4$react.useEffect)(()=>{
|
|
852
|
+
if (!interactionEndEnabled) removeInteractionEndListeners();
|
|
853
|
+
}, [
|
|
854
|
+
interactionEndEnabled,
|
|
855
|
+
removeInteractionEndListeners
|
|
856
|
+
]);
|
|
857
|
+
(0, $gTuX4$react.useEffect)(()=>{
|
|
858
|
+
if (!viewportResizeEnabled || !viewportResizeCallbackRef.current || !onViewportResizeCallback) return;
|
|
859
|
+
const onViewportResize = (e)=>{
|
|
860
|
+
viewportResizeCallbackRef.current?.(e);
|
|
861
|
+
};
|
|
862
|
+
window.addEventListener("resize", onViewportResize);
|
|
863
|
+
return ()=>{
|
|
864
|
+
window.removeEventListener("resize", onViewportResize);
|
|
865
|
+
};
|
|
866
|
+
}, [
|
|
867
|
+
onViewportResizeCallback,
|
|
868
|
+
viewportResizeEnabled
|
|
869
|
+
]);
|
|
870
|
+
(0, $gTuX4$react.useEffect)(()=>{
|
|
871
|
+
return ()=>{
|
|
872
|
+
removeMouseListeners();
|
|
873
|
+
removeInteractionEndListeners();
|
|
874
|
+
restoreMouseDownUserSelect();
|
|
875
|
+
};
|
|
876
|
+
}, [
|
|
877
|
+
removeInteractionEndListeners,
|
|
878
|
+
removeMouseListeners,
|
|
879
|
+
restoreMouseDownUserSelect
|
|
880
|
+
]);
|
|
881
|
+
return {
|
|
882
|
+
onMouseDown: onMouseDown,
|
|
883
|
+
onMouseMove: onMouseMove,
|
|
884
|
+
onMouseUp: onMouseUp,
|
|
885
|
+
armInteractionEnd: armInteractionEnd
|
|
886
|
+
};
|
|
887
|
+
};
|
|
888
|
+
|
|
889
|
+
|
|
785
890
|
var $7c5fb3f6c1601913$exports = {};
|
|
786
891
|
|
|
787
892
|
$parcel$export($7c5fb3f6c1601913$exports, "contextWindow", function () { return $7c5fb3f6c1601913$export$72cad2e5ad4d2674; }, function (v) { return $7c5fb3f6c1601913$export$72cad2e5ad4d2674 = v; });
|
|
@@ -822,22 +927,10 @@ const $46fb0088a1bbb6d8$var$getMaxZIndex = (componentMinZIndex)=>{
|
|
|
822
927
|
});
|
|
823
928
|
return maxZIndex;
|
|
824
929
|
};
|
|
825
|
-
const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $gTuX4$react.forwardRef)((
|
|
826
|
-
var { id: id, visible: visible, title: title, titleElement: titleElement, children: children, onOpen: onOpen, onClose: onClose, minZIndex: minZIndex = $46fb0088a1bbb6d8$export$4f9fb66ac71c7da5 } = _param, rest = (0, $gTuX4$swchelperscjs_object_without_propertiescjs._)(_param, [
|
|
827
|
-
"id",
|
|
828
|
-
"visible",
|
|
829
|
-
"title",
|
|
830
|
-
"titleElement",
|
|
831
|
-
"children",
|
|
832
|
-
"onOpen",
|
|
833
|
-
"onClose",
|
|
834
|
-
"minZIndex"
|
|
835
|
-
]);
|
|
836
|
-
var _rest_style, _rest_style1, _rest_style2, _rest_style3;
|
|
930
|
+
const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $gTuX4$react.forwardRef)(({ id: id, visible: visible, title: title, titleElement: titleElement, children: children, onOpen: onOpen, onClose: onClose, minZIndex: minZIndex = $46fb0088a1bbb6d8$export$4f9fb66ac71c7da5, ...rest }, ref)=>{
|
|
837
931
|
const divRef = (0, $gTuX4$react.useRef)(null);
|
|
838
932
|
const windowRef = (0, $gTuX4$react.useRef)(null);
|
|
839
933
|
const [zIndex, setZIndex] = (0, $gTuX4$react.useState)(minZIndex);
|
|
840
|
-
const resizeListenerRef = (0, $gTuX4$react.useRef)(null);
|
|
841
934
|
// Track internal state: whether window is in DOM and whether it's been positioned
|
|
842
935
|
const [windowInDOM, setWindowInDOM] = (0, $gTuX4$react.useState)(false);
|
|
843
936
|
const [windowVisible, setWindowVisible] = (0, $gTuX4$react.useState)(false);
|
|
@@ -849,51 +942,31 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
849
942
|
});
|
|
850
943
|
const [moving, setMoving] = (0, $gTuX4$react.useState)(false);
|
|
851
944
|
const move = (0, $gTuX4$react.useCallback)((x, y)=>{
|
|
852
|
-
if (windowRef.current
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
pos.y += y;
|
|
857
|
-
window1.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
|
|
945
|
+
if (windowRef.current) {
|
|
946
|
+
windowPos.current.x += x;
|
|
947
|
+
windowPos.current.y += y;
|
|
948
|
+
windowRef.current.style.transform = `translate(${windowPos.current.x}px, ${windowPos.current.y}px)`;
|
|
858
949
|
}
|
|
859
950
|
}, []);
|
|
951
|
+
const fitToViewport = (0, $gTuX4$react.useCallback)(()=>{
|
|
952
|
+
if (!windowRef.current) return;
|
|
953
|
+
const viewportPadding = 32;
|
|
954
|
+
const availableWidth = Math.max(0, window.innerWidth - viewportPadding);
|
|
955
|
+
const availableHeight = Math.max(0, window.innerHeight - viewportPadding);
|
|
956
|
+
const rect = windowRef.current.getBoundingClientRect();
|
|
957
|
+
const horizontalChrome = rect.width - windowRef.current.clientWidth;
|
|
958
|
+
const verticalChrome = rect.height - windowRef.current.clientHeight;
|
|
959
|
+
if (rect.width > availableWidth) windowRef.current.style.width = `${Math.max(0, availableWidth - horizontalChrome)}px`;
|
|
960
|
+
if (rect.height > availableHeight) windowRef.current.style.height = `${Math.max(0, availableHeight - verticalChrome)}px`;
|
|
961
|
+
}, []);
|
|
860
962
|
const checkPosition = (0, $gTuX4$react.useCallback)(()=>{
|
|
861
963
|
const chkPos = (0, $c986bcdcae4b83bd$export$d81cfea7c54be196)(windowRef);
|
|
862
964
|
move(chkPos.translateX, chkPos.translateY);
|
|
965
|
+
fitToViewport();
|
|
863
966
|
}, [
|
|
967
|
+
fitToViewport,
|
|
864
968
|
move
|
|
865
969
|
]);
|
|
866
|
-
const mouseMove = (0, $gTuX4$react.useCallback)((e)=>{
|
|
867
|
-
e.preventDefault();
|
|
868
|
-
e.stopPropagation();
|
|
869
|
-
move(e.movementX, e.movementY);
|
|
870
|
-
}, [
|
|
871
|
-
move
|
|
872
|
-
]);
|
|
873
|
-
const mouseMoveRef = (0, $gTuX4$react.useRef)(mouseMove);
|
|
874
|
-
const mouseUpRef = (0, $gTuX4$react.useRef)(()=>{});
|
|
875
|
-
const mouseUp = (0, $gTuX4$react.useCallback)((e)=>{
|
|
876
|
-
e.preventDefault();
|
|
877
|
-
e.stopPropagation();
|
|
878
|
-
setMoving(false);
|
|
879
|
-
checkPosition();
|
|
880
|
-
if (mouseMoveRef.current) document.removeEventListener("mousemove", mouseMoveRef.current);
|
|
881
|
-
if (mouseUpRef.current) document.removeEventListener("mouseup", mouseUpRef.current);
|
|
882
|
-
if (resizeListenerRef.current) {
|
|
883
|
-
window.removeEventListener("resize", resizeListenerRef.current);
|
|
884
|
-
resizeListenerRef.current = null;
|
|
885
|
-
}
|
|
886
|
-
if (e.target && (e.target instanceof HTMLElement || e.target instanceof SVGElement)) e.target.style.userSelect = "auto";
|
|
887
|
-
}, [
|
|
888
|
-
checkPosition
|
|
889
|
-
]);
|
|
890
|
-
(0, $gTuX4$react.useEffect)(()=>{
|
|
891
|
-
mouseMoveRef.current = mouseMove;
|
|
892
|
-
mouseUpRef.current = mouseUp;
|
|
893
|
-
}, [
|
|
894
|
-
mouseMove,
|
|
895
|
-
mouseUp
|
|
896
|
-
]);
|
|
897
970
|
// Helper function to push this window to the top
|
|
898
971
|
const pushToTop = (0, $gTuX4$react.useCallback)(()=>{
|
|
899
972
|
const maxZIndex = $46fb0088a1bbb6d8$var$getMaxZIndex(minZIndex);
|
|
@@ -901,6 +974,39 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
901
974
|
}, [
|
|
902
975
|
minZIndex
|
|
903
976
|
]);
|
|
977
|
+
const parseTranslate = (transform)=>{
|
|
978
|
+
const match = transform?.match(/translate\((-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px\)/);
|
|
979
|
+
if (match) return {
|
|
980
|
+
x: Number.parseFloat(match[1]),
|
|
981
|
+
y: Number.parseFloat(match[2])
|
|
982
|
+
};
|
|
983
|
+
/* v8 ignore next */ return {
|
|
984
|
+
x: 0,
|
|
985
|
+
y: 0
|
|
986
|
+
};
|
|
987
|
+
};
|
|
988
|
+
const { onMouseDown: onMouseDown, armInteractionEnd: armInteractionEnd } = (0, $847f433873d20215$export$f93615b9594453fc)({
|
|
989
|
+
onMouseDown: ()=>{
|
|
990
|
+
windowPos.current = parseTranslate(windowRef.current?.style.transform);
|
|
991
|
+
setMoving(true);
|
|
992
|
+
pushToTop();
|
|
993
|
+
},
|
|
994
|
+
onMouseMove: (e)=>{
|
|
995
|
+
move(e.movementX, e.movementY);
|
|
996
|
+
},
|
|
997
|
+
onMouseUp: ()=>{
|
|
998
|
+
checkPosition();
|
|
999
|
+
setMoving(false);
|
|
1000
|
+
},
|
|
1001
|
+
onInteractionEnd: ()=>{
|
|
1002
|
+
checkPosition();
|
|
1003
|
+
},
|
|
1004
|
+
interactionEndEnabled: windowVisible,
|
|
1005
|
+
onViewportResize: ()=>{
|
|
1006
|
+
checkPosition();
|
|
1007
|
+
},
|
|
1008
|
+
viewportResizeEnabled: windowVisible
|
|
1009
|
+
});
|
|
904
1010
|
// Expose pushToTop method via ref
|
|
905
1011
|
(0, $gTuX4$react.useImperativeHandle)(ref, ()=>({
|
|
906
1012
|
pushToTop: pushToTop
|
|
@@ -934,14 +1040,15 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
934
1040
|
windowRef.current.style.left = `${parentPos.left}px`;
|
|
935
1041
|
windowRef.current.style.top = `${parentPos.bottom + windowHeight < window.innerHeight ? parentPos.bottom : Math.max(0, parentPos.top - windowHeight)}px`;
|
|
936
1042
|
windowRef.current.style.transform = "";
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
1043
|
+
const checkedPosition = (0, $c986bcdcae4b83bd$export$d81cfea7c54be196)(windowRef);
|
|
1044
|
+
windowRef.current.style.transform = `translate(${checkedPosition.translateX}px, ${checkedPosition.translateY}px)`;
|
|
1045
|
+
if (windowPos && windowPos.current) windowPos.current = {
|
|
1046
|
+
x: checkedPosition.translateX,
|
|
1047
|
+
y: checkedPosition.translateY
|
|
940
1048
|
};
|
|
941
|
-
checkPosition();
|
|
942
1049
|
// Update z-index and make visible - use startTransition
|
|
943
1050
|
const maxZ = $46fb0088a1bbb6d8$var$getMaxZIndex(minZIndex);
|
|
944
|
-
onOpen
|
|
1051
|
+
onOpen?.();
|
|
945
1052
|
startTransition(()=>{
|
|
946
1053
|
setZIndex(maxZ + 1);
|
|
947
1054
|
setWindowVisible(true);
|
|
@@ -951,28 +1058,29 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
951
1058
|
windowInDOM,
|
|
952
1059
|
windowVisible,
|
|
953
1060
|
visible,
|
|
954
|
-
checkPosition,
|
|
955
1061
|
minZIndex,
|
|
956
1062
|
onOpen,
|
|
957
1063
|
startTransition
|
|
958
1064
|
]);
|
|
959
|
-
//
|
|
1065
|
+
// When CSS resize handle is used, defer checkPosition until resize interaction ends.
|
|
960
1066
|
(0, $gTuX4$react.useEffect)(()=>{
|
|
1067
|
+
if (!windowVisible || !windowRef.current || typeof ResizeObserver === "undefined") return;
|
|
1068
|
+
const observer = new ResizeObserver(()=>{
|
|
1069
|
+
armInteractionEnd();
|
|
1070
|
+
});
|
|
1071
|
+
observer.observe(windowRef.current);
|
|
961
1072
|
return ()=>{
|
|
962
|
-
|
|
963
|
-
if (mouseMoveRef.current) document.removeEventListener("mousemove", mouseMoveRef.current);
|
|
964
|
-
if (mouseUpRef.current) document.removeEventListener("mouseup", mouseUpRef.current);
|
|
965
|
-
if (resizeListenerRef.current) {
|
|
966
|
-
window.removeEventListener("resize", resizeListenerRef.current);
|
|
967
|
-
resizeListenerRef.current = null;
|
|
968
|
-
}
|
|
1073
|
+
observer.disconnect();
|
|
969
1074
|
};
|
|
970
|
-
}, [
|
|
971
|
-
|
|
1075
|
+
}, [
|
|
1076
|
+
armInteractionEnd,
|
|
1077
|
+
windowVisible
|
|
1078
|
+
]);
|
|
972
1079
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
973
1080
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowAnchor,
|
|
974
1081
|
ref: divRef,
|
|
975
|
-
children: windowInDOM && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div",
|
|
1082
|
+
children: windowInDOM && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
|
|
1083
|
+
...rest,
|
|
976
1084
|
ref: windowRef,
|
|
977
1085
|
id: id,
|
|
978
1086
|
[$46fb0088a1bbb6d8$var$CONTEXT_WINDOW_DATA_ATTR]: "true",
|
|
@@ -980,19 +1088,19 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
980
1088
|
(0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindow,
|
|
981
1089
|
rest.className
|
|
982
1090
|
].filter((c)=>c).join(" "),
|
|
983
|
-
style:
|
|
1091
|
+
style: {
|
|
1092
|
+
...rest.style,
|
|
984
1093
|
opacity: moving ? 0.8 : windowVisible ? 1 : 0,
|
|
985
1094
|
visibility: windowVisible ? "visible" : "hidden",
|
|
986
1095
|
zIndex: zIndex,
|
|
987
|
-
minHeight:
|
|
988
|
-
minWidth:
|
|
989
|
-
maxHeight:
|
|
990
|
-
maxWidth:
|
|
991
|
-
}
|
|
1096
|
+
minHeight: rest.style?.minHeight ?? "150px",
|
|
1097
|
+
minWidth: rest.style?.minWidth ?? "200px",
|
|
1098
|
+
maxHeight: rest.style?.maxHeight ?? "1000px",
|
|
1099
|
+
maxWidth: rest.style?.maxWidth ?? "1000px"
|
|
1100
|
+
},
|
|
992
1101
|
onClickCapture: (e)=>{
|
|
993
|
-
var _rest_onClickCapture;
|
|
994
1102
|
pushToTop();
|
|
995
|
-
|
|
1103
|
+
rest.onClickCapture?.(e);
|
|
996
1104
|
},
|
|
997
1105
|
children: [
|
|
998
1106
|
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
|
|
@@ -1000,16 +1108,7 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
1000
1108
|
(0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowTitle,
|
|
1001
1109
|
moving ? (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).moving : ""
|
|
1002
1110
|
].filter((c)=>c !== "").join(" "),
|
|
1003
|
-
onMouseDown:
|
|
1004
|
-
if (e.target && (e.target instanceof HTMLElement || e.target instanceof SVGElement)) e.target.style.userSelect = "none";
|
|
1005
|
-
setMoving(true);
|
|
1006
|
-
pushToTop();
|
|
1007
|
-
document.addEventListener("mouseup", mouseUp);
|
|
1008
|
-
document.addEventListener("mousemove", mouseMove);
|
|
1009
|
-
const resizeListener = ()=>checkPosition();
|
|
1010
|
-
resizeListenerRef.current = resizeListener;
|
|
1011
|
-
window.addEventListener("resize", resizeListener);
|
|
1012
|
-
},
|
|
1111
|
+
onMouseDown: onMouseDown,
|
|
1013
1112
|
children: [
|
|
1014
1113
|
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
1015
1114
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowTitleText,
|
|
@@ -1042,7 +1141,7 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
1042
1141
|
})
|
|
1043
1142
|
})
|
|
1044
1143
|
]
|
|
1045
|
-
})
|
|
1144
|
+
}), document.body)
|
|
1046
1145
|
});
|
|
1047
1146
|
});
|
|
1048
1147
|
$46fb0088a1bbb6d8$export$1af8984c69ba1b24.displayName = "ContextWindow";
|
|
@@ -1050,6 +1149,7 @@ $46fb0088a1bbb6d8$export$1af8984c69ba1b24.displayName = "ContextWindow";
|
|
|
1050
1149
|
|
|
1051
1150
|
|
|
1052
1151
|
|
|
1152
|
+
|
|
1053
1153
|
$parcel$exportWildcard(module.exports, $a68bd8a6c0fd98c2$exports);
|
|
1054
1154
|
|
|
1055
1155
|
|