@asup/context-menu 2.2.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 +236 -140
- 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 +235 -141
- 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; });
|
|
@@ -336,12 +326,7 @@ $5150b66b01c99189$export$8dc6765e8be191c7.displayName = "ContextMenu";
|
|
|
336
326
|
|
|
337
327
|
|
|
338
328
|
|
|
339
|
-
const $a79b75d040e03c92$export$d4ebdd58e04c6ace = (
|
|
340
|
-
var { id: id, menuItems: menuItems, children: children } = _param, rest = (0, $gTuX4$swchelperscjs_object_without_propertiescjs._)(_param, [
|
|
341
|
-
"id",
|
|
342
|
-
"menuItems",
|
|
343
|
-
"children"
|
|
344
|
-
]);
|
|
329
|
+
const $a79b75d040e03c92$export$d4ebdd58e04c6ace = ({ id: id, menuItems: menuItems, children: children, ...rest })=>{
|
|
345
330
|
// Menu state
|
|
346
331
|
const [menuInDom, setMenuInDom] = (0, $gTuX4$react.useState)(false);
|
|
347
332
|
const [menuVisible, setMenuVisible] = (0, $gTuX4$react.useState)(false);
|
|
@@ -391,10 +376,10 @@ const $a79b75d040e03c92$export$d4ebdd58e04c6ace = (_param)=>{
|
|
|
391
376
|
]);
|
|
392
377
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)((0, $gTuX4$reactjsxruntime.Fragment), {
|
|
393
378
|
children: [
|
|
394
|
-
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div",
|
|
379
|
+
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
380
|
+
...rest,
|
|
395
381
|
id: id,
|
|
396
382
|
onClick: (e)=>{
|
|
397
|
-
var _rest_onClick;
|
|
398
383
|
if (menuItems) {
|
|
399
384
|
setMenuInDom(true);
|
|
400
385
|
e.preventDefault();
|
|
@@ -405,10 +390,10 @@ const $a79b75d040e03c92$export$d4ebdd58e04c6ace = (_param)=>{
|
|
|
405
390
|
setMenuXPos(e.pageX);
|
|
406
391
|
setMenuYPos(e.pageY);
|
|
407
392
|
}, 1);
|
|
408
|
-
} else
|
|
393
|
+
} else rest.onClick?.(e);
|
|
409
394
|
},
|
|
410
395
|
children: children
|
|
411
|
-
})
|
|
396
|
+
}),
|
|
412
397
|
menuInDom && menuItems && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
413
398
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).anchor,
|
|
414
399
|
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), {
|
|
@@ -436,9 +421,6 @@ $a79b75d040e03c92$export$d4ebdd58e04c6ace.displayName = "ClickForMenu";
|
|
|
436
421
|
|
|
437
422
|
|
|
438
423
|
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
424
|
var $63cdf2819565020c$exports = {};
|
|
443
425
|
|
|
444
426
|
$parcel$export($63cdf2819565020c$exports, "caretHolder", function () { return $63cdf2819565020c$export$6ed5f4fbab298e07; }, function (v) { return $63cdf2819565020c$export$6ed5f4fbab298e07 = v; });
|
|
@@ -534,10 +516,9 @@ const $b34598671fff4a77$export$aafc28aea571c4bc = ({ entry: entry })=>{
|
|
|
534
516
|
setTarget(null);
|
|
535
517
|
},
|
|
536
518
|
onClick: (e)=>{
|
|
537
|
-
var _entry_action;
|
|
538
519
|
e.preventDefault();
|
|
539
520
|
e.stopPropagation();
|
|
540
|
-
if (!entry.disabled)
|
|
521
|
+
if (!entry.disabled) entry.action?.(target);
|
|
541
522
|
},
|
|
542
523
|
children: [
|
|
543
524
|
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
|
|
@@ -583,12 +564,7 @@ const $3c568ee547c732c3$export$fc58dc71afe92de2 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
583
564
|
function $3c568ee547c732c3$var$isDivider(label) {
|
|
584
565
|
return typeof label !== "string" && label.type === "hr";
|
|
585
566
|
}
|
|
586
|
-
const $3c568ee547c732c3$export$ed4f9641643dc7e4 = (
|
|
587
|
-
var { children: children, menuItems: menuItems, showLowMenu: showLowMenu = false } = _param, rest = (0, $gTuX4$swchelperscjs_object_without_propertiescjs._)(_param, [
|
|
588
|
-
"children",
|
|
589
|
-
"menuItems",
|
|
590
|
-
"showLowMenu"
|
|
591
|
-
]);
|
|
567
|
+
const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuItems: menuItems, showLowMenu: showLowMenu = false, ...rest })=>{
|
|
592
568
|
// Check for higher content menu
|
|
593
569
|
const higherContext = (0, $gTuX4$react.useContext)($3c568ee547c732c3$export$fc58dc71afe92de2);
|
|
594
570
|
const thisMenuItems = [
|
|
@@ -633,7 +609,7 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = (_param)=>{
|
|
|
633
609
|
window.addEventListener("scroll", updatePos, true);
|
|
634
610
|
let ro = null;
|
|
635
611
|
if (typeof ResizeObserver !== "undefined" && divHandlderRef.current) {
|
|
636
|
-
ro = new ResizeObserver(
|
|
612
|
+
ro = new ResizeObserver(updatePos);
|
|
637
613
|
ro.observe(divHandlderRef.current);
|
|
638
614
|
}
|
|
639
615
|
return ()=>{
|
|
@@ -648,8 +624,7 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = (_param)=>{
|
|
|
648
624
|
]);
|
|
649
625
|
// Handle click off the menu
|
|
650
626
|
const handleClick = (0, $gTuX4$react.useCallback)((e)=>{
|
|
651
|
-
|
|
652
|
-
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);
|
|
653
628
|
}, []);
|
|
654
629
|
// Update the document click handler
|
|
655
630
|
(0, $gTuX4$react.useEffect)(()=>{
|
|
@@ -680,9 +655,9 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = (_param)=>{
|
|
|
680
655
|
menuItems: thisMenuItems
|
|
681
656
|
},
|
|
682
657
|
children: [
|
|
683
|
-
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div",
|
|
684
|
-
ref: divHandlderRef
|
|
685
|
-
|
|
658
|
+
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
659
|
+
ref: divHandlderRef,
|
|
660
|
+
...rest,
|
|
686
661
|
className: [
|
|
687
662
|
(0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).contextMenuHandler,
|
|
688
663
|
rest.className
|
|
@@ -701,7 +676,6 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = (_param)=>{
|
|
|
701
676
|
}
|
|
702
677
|
},
|
|
703
678
|
onMouseEnter: async (e)=>{
|
|
704
|
-
var _rest_onMouseEnter;
|
|
705
679
|
if (showLowMenu) {
|
|
706
680
|
setMenuInDom(true);
|
|
707
681
|
setMouseOverHandlerDiv(false);
|
|
@@ -710,19 +684,18 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = (_param)=>{
|
|
|
710
684
|
setMouseOverHandlerDiv(true);
|
|
711
685
|
}, 1);
|
|
712
686
|
}
|
|
713
|
-
|
|
687
|
+
rest.onMouseEnter?.(e);
|
|
714
688
|
},
|
|
715
689
|
onMouseLeave: async (e)=>{
|
|
716
|
-
var _rest_onMouseLeave;
|
|
717
690
|
if (showLowMenu) {
|
|
718
691
|
removeController.current.abort();
|
|
719
692
|
removeController.current = new AbortController();
|
|
720
693
|
setMouseOverHandlerDiv(false);
|
|
721
694
|
}
|
|
722
|
-
|
|
695
|
+
rest.onMouseLeave?.(e);
|
|
723
696
|
},
|
|
724
697
|
children: children
|
|
725
|
-
})
|
|
698
|
+
}),
|
|
726
699
|
menuInDom && divHandlerPos && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
727
700
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).anchor,
|
|
728
701
|
onMouseEnter: ()=>{
|
|
@@ -761,9 +734,6 @@ $3c568ee547c732c3$export$ed4f9641643dc7e4.displayName = "ContextMenuHandler";
|
|
|
761
734
|
|
|
762
735
|
|
|
763
736
|
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
737
|
const $c986bcdcae4b83bd$export$d81cfea7c54be196 = (divRef)=>{
|
|
768
738
|
if (!divRef.current) return {
|
|
769
739
|
translateX: 0,
|
|
@@ -786,6 +756,137 @@ const $c986bcdcae4b83bd$export$d81cfea7c54be196 = (divRef)=>{
|
|
|
786
756
|
};
|
|
787
757
|
|
|
788
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
|
+
|
|
789
890
|
var $7c5fb3f6c1601913$exports = {};
|
|
790
891
|
|
|
791
892
|
$parcel$export($7c5fb3f6c1601913$exports, "contextWindow", function () { return $7c5fb3f6c1601913$export$72cad2e5ad4d2674; }, function (v) { return $7c5fb3f6c1601913$export$72cad2e5ad4d2674 = v; });
|
|
@@ -826,22 +927,10 @@ const $46fb0088a1bbb6d8$var$getMaxZIndex = (componentMinZIndex)=>{
|
|
|
826
927
|
});
|
|
827
928
|
return maxZIndex;
|
|
828
929
|
};
|
|
829
|
-
const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $gTuX4$react.forwardRef)((
|
|
830
|
-
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, [
|
|
831
|
-
"id",
|
|
832
|
-
"visible",
|
|
833
|
-
"title",
|
|
834
|
-
"titleElement",
|
|
835
|
-
"children",
|
|
836
|
-
"onOpen",
|
|
837
|
-
"onClose",
|
|
838
|
-
"minZIndex"
|
|
839
|
-
]);
|
|
840
|
-
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)=>{
|
|
841
931
|
const divRef = (0, $gTuX4$react.useRef)(null);
|
|
842
932
|
const windowRef = (0, $gTuX4$react.useRef)(null);
|
|
843
933
|
const [zIndex, setZIndex] = (0, $gTuX4$react.useState)(minZIndex);
|
|
844
|
-
const resizeListenerRef = (0, $gTuX4$react.useRef)(null);
|
|
845
934
|
// Track internal state: whether window is in DOM and whether it's been positioned
|
|
846
935
|
const [windowInDOM, setWindowInDOM] = (0, $gTuX4$react.useState)(false);
|
|
847
936
|
const [windowVisible, setWindowVisible] = (0, $gTuX4$react.useState)(false);
|
|
@@ -853,51 +942,31 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
853
942
|
});
|
|
854
943
|
const [moving, setMoving] = (0, $gTuX4$react.useState)(false);
|
|
855
944
|
const move = (0, $gTuX4$react.useCallback)((x, y)=>{
|
|
856
|
-
if (windowRef.current
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
pos.y += y;
|
|
861
|
-
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)`;
|
|
862
949
|
}
|
|
863
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
|
+
}, []);
|
|
864
962
|
const checkPosition = (0, $gTuX4$react.useCallback)(()=>{
|
|
865
963
|
const chkPos = (0, $c986bcdcae4b83bd$export$d81cfea7c54be196)(windowRef);
|
|
866
964
|
move(chkPos.translateX, chkPos.translateY);
|
|
965
|
+
fitToViewport();
|
|
867
966
|
}, [
|
|
967
|
+
fitToViewport,
|
|
868
968
|
move
|
|
869
969
|
]);
|
|
870
|
-
const mouseMove = (0, $gTuX4$react.useCallback)((e)=>{
|
|
871
|
-
e.preventDefault();
|
|
872
|
-
e.stopPropagation();
|
|
873
|
-
move(e.movementX, e.movementY);
|
|
874
|
-
}, [
|
|
875
|
-
move
|
|
876
|
-
]);
|
|
877
|
-
const mouseMoveRef = (0, $gTuX4$react.useRef)(mouseMove);
|
|
878
|
-
const mouseUpRef = (0, $gTuX4$react.useRef)(()=>{});
|
|
879
|
-
const mouseUp = (0, $gTuX4$react.useCallback)((e)=>{
|
|
880
|
-
e.preventDefault();
|
|
881
|
-
e.stopPropagation();
|
|
882
|
-
setMoving(false);
|
|
883
|
-
checkPosition();
|
|
884
|
-
if (mouseMoveRef.current) document.removeEventListener("mousemove", mouseMoveRef.current);
|
|
885
|
-
if (mouseUpRef.current) document.removeEventListener("mouseup", mouseUpRef.current);
|
|
886
|
-
if (resizeListenerRef.current) {
|
|
887
|
-
window.removeEventListener("resize", resizeListenerRef.current);
|
|
888
|
-
resizeListenerRef.current = null;
|
|
889
|
-
}
|
|
890
|
-
if (e.target && (e.target instanceof HTMLElement || e.target instanceof SVGElement)) e.target.style.userSelect = "auto";
|
|
891
|
-
}, [
|
|
892
|
-
checkPosition
|
|
893
|
-
]);
|
|
894
|
-
(0, $gTuX4$react.useEffect)(()=>{
|
|
895
|
-
mouseMoveRef.current = mouseMove;
|
|
896
|
-
mouseUpRef.current = mouseUp;
|
|
897
|
-
}, [
|
|
898
|
-
mouseMove,
|
|
899
|
-
mouseUp
|
|
900
|
-
]);
|
|
901
970
|
// Helper function to push this window to the top
|
|
902
971
|
const pushToTop = (0, $gTuX4$react.useCallback)(()=>{
|
|
903
972
|
const maxZIndex = $46fb0088a1bbb6d8$var$getMaxZIndex(minZIndex);
|
|
@@ -905,6 +974,39 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
905
974
|
}, [
|
|
906
975
|
minZIndex
|
|
907
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
|
+
});
|
|
908
1010
|
// Expose pushToTop method via ref
|
|
909
1011
|
(0, $gTuX4$react.useImperativeHandle)(ref, ()=>({
|
|
910
1012
|
pushToTop: pushToTop
|
|
@@ -938,14 +1040,15 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
938
1040
|
windowRef.current.style.left = `${parentPos.left}px`;
|
|
939
1041
|
windowRef.current.style.top = `${parentPos.bottom + windowHeight < window.innerHeight ? parentPos.bottom : Math.max(0, parentPos.top - windowHeight)}px`;
|
|
940
1042
|
windowRef.current.style.transform = "";
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
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
|
|
944
1048
|
};
|
|
945
|
-
checkPosition();
|
|
946
1049
|
// Update z-index and make visible - use startTransition
|
|
947
1050
|
const maxZ = $46fb0088a1bbb6d8$var$getMaxZIndex(minZIndex);
|
|
948
|
-
onOpen
|
|
1051
|
+
onOpen?.();
|
|
949
1052
|
startTransition(()=>{
|
|
950
1053
|
setZIndex(maxZ + 1);
|
|
951
1054
|
setWindowVisible(true);
|
|
@@ -955,28 +1058,29 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
955
1058
|
windowInDOM,
|
|
956
1059
|
windowVisible,
|
|
957
1060
|
visible,
|
|
958
|
-
checkPosition,
|
|
959
1061
|
minZIndex,
|
|
960
1062
|
onOpen,
|
|
961
1063
|
startTransition
|
|
962
1064
|
]);
|
|
963
|
-
//
|
|
1065
|
+
// When CSS resize handle is used, defer checkPosition until resize interaction ends.
|
|
964
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);
|
|
965
1072
|
return ()=>{
|
|
966
|
-
|
|
967
|
-
if (mouseMoveRef.current) document.removeEventListener("mousemove", mouseMoveRef.current);
|
|
968
|
-
if (mouseUpRef.current) document.removeEventListener("mouseup", mouseUpRef.current);
|
|
969
|
-
if (resizeListenerRef.current) {
|
|
970
|
-
window.removeEventListener("resize", resizeListenerRef.current);
|
|
971
|
-
resizeListenerRef.current = null;
|
|
972
|
-
}
|
|
1073
|
+
observer.disconnect();
|
|
973
1074
|
};
|
|
974
|
-
}, [
|
|
975
|
-
|
|
1075
|
+
}, [
|
|
1076
|
+
armInteractionEnd,
|
|
1077
|
+
windowVisible
|
|
1078
|
+
]);
|
|
976
1079
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
977
1080
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowAnchor,
|
|
978
1081
|
ref: divRef,
|
|
979
|
-
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,
|
|
980
1084
|
ref: windowRef,
|
|
981
1085
|
id: id,
|
|
982
1086
|
[$46fb0088a1bbb6d8$var$CONTEXT_WINDOW_DATA_ATTR]: "true",
|
|
@@ -984,19 +1088,19 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
984
1088
|
(0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindow,
|
|
985
1089
|
rest.className
|
|
986
1090
|
].filter((c)=>c).join(" "),
|
|
987
|
-
style:
|
|
1091
|
+
style: {
|
|
1092
|
+
...rest.style,
|
|
988
1093
|
opacity: moving ? 0.8 : windowVisible ? 1 : 0,
|
|
989
1094
|
visibility: windowVisible ? "visible" : "hidden",
|
|
990
1095
|
zIndex: zIndex,
|
|
991
|
-
minHeight:
|
|
992
|
-
minWidth:
|
|
993
|
-
maxHeight:
|
|
994
|
-
maxWidth:
|
|
995
|
-
}
|
|
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
|
+
},
|
|
996
1101
|
onClickCapture: (e)=>{
|
|
997
|
-
var _rest_onClickCapture;
|
|
998
1102
|
pushToTop();
|
|
999
|
-
|
|
1103
|
+
rest.onClickCapture?.(e);
|
|
1000
1104
|
},
|
|
1001
1105
|
children: [
|
|
1002
1106
|
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
|
|
@@ -1004,16 +1108,7 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
1004
1108
|
(0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowTitle,
|
|
1005
1109
|
moving ? (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).moving : ""
|
|
1006
1110
|
].filter((c)=>c !== "").join(" "),
|
|
1007
|
-
onMouseDown:
|
|
1008
|
-
if (e.target && (e.target instanceof HTMLElement || e.target instanceof SVGElement)) e.target.style.userSelect = "none";
|
|
1009
|
-
setMoving(true);
|
|
1010
|
-
pushToTop();
|
|
1011
|
-
document.addEventListener("mouseup", mouseUp);
|
|
1012
|
-
document.addEventListener("mousemove", mouseMove);
|
|
1013
|
-
const resizeListener = ()=>checkPosition();
|
|
1014
|
-
resizeListenerRef.current = resizeListener;
|
|
1015
|
-
window.addEventListener("resize", resizeListener);
|
|
1016
|
-
},
|
|
1111
|
+
onMouseDown: onMouseDown,
|
|
1017
1112
|
children: [
|
|
1018
1113
|
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
1019
1114
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowTitleText,
|
|
@@ -1046,7 +1141,7 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
1046
1141
|
})
|
|
1047
1142
|
})
|
|
1048
1143
|
]
|
|
1049
|
-
})
|
|
1144
|
+
}), document.body)
|
|
1050
1145
|
});
|
|
1051
1146
|
});
|
|
1052
1147
|
$46fb0088a1bbb6d8$export$1af8984c69ba1b24.displayName = "ContextWindow";
|
|
@@ -1054,6 +1149,7 @@ $46fb0088a1bbb6d8$export$1af8984c69ba1b24.displayName = "ContextWindow";
|
|
|
1054
1149
|
|
|
1055
1150
|
|
|
1056
1151
|
|
|
1152
|
+
|
|
1057
1153
|
$parcel$exportWildcard(module.exports, $a68bd8a6c0fd98c2$exports);
|
|
1058
1154
|
|
|
1059
1155
|
|