@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/main.js
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
import "./main.css";
|
|
2
|
-
import {_ as $duWW8$_} from "@swc/helpers/_/_object_spread";
|
|
3
|
-
import {_ as $duWW8$_1} from "@swc/helpers/_/_object_spread_props";
|
|
4
|
-
import {_ as $duWW8$_2} from "@swc/helpers/_/_object_without_properties";
|
|
5
2
|
import {jsx as $duWW8$jsx, jsxs as $duWW8$jsxs, Fragment as $duWW8$Fragment} from "react/jsx-runtime";
|
|
6
3
|
import {useRef as $duWW8$useRef, useState as $duWW8$useState, useEffectEvent as $duWW8$useEffectEvent, useLayoutEffect as $duWW8$useLayoutEffect, useEffect as $duWW8$useEffect, forwardRef as $duWW8$forwardRef, createContext as $duWW8$createContext, useContext as $duWW8$useContext, useCallback as $duWW8$useCallback, useTransition as $duWW8$useTransition, useImperativeHandle as $duWW8$useImperativeHandle} from "react";
|
|
7
4
|
import {createPortal as $duWW8$createPortal} from "react-dom";
|
|
@@ -25,9 +22,6 @@ $parcel$export($b65191f6d0a0a991$exports, "ContextMenuHandler", function () { re
|
|
|
25
22
|
$parcel$export($b65191f6d0a0a991$exports, "ContextWindow", function () { return $b5e8657823def5be$export$1af8984c69ba1b24; });
|
|
26
23
|
|
|
27
24
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
25
|
var $181673e3e0e596f3$exports = {};
|
|
32
26
|
|
|
33
27
|
$parcel$export($181673e3e0e596f3$exports, "autoHeightInner", function () { return $181673e3e0e596f3$export$df919f6b0f7f84e6; }, function (v) { return $181673e3e0e596f3$export$df919f6b0f7f84e6 = v; });
|
|
@@ -38,12 +32,7 @@ $181673e3e0e596f3$export$df919f6b0f7f84e6 = `aiw-AutoHeight-module-pDlSVW-autoHe
|
|
|
38
32
|
$181673e3e0e596f3$export$563bd8f955c52746 = `aiw-AutoHeight-module-pDlSVW-autoHeightWrapper`;
|
|
39
33
|
|
|
40
34
|
|
|
41
|
-
function $62873e7e5aeec7f1$export$77bf000da9303d1(
|
|
42
|
-
var { children: children, hide: hide = false, duration: duration = 300 } = _param, rest = (0, $duWW8$_2)(_param, [
|
|
43
|
-
"children",
|
|
44
|
-
"hide",
|
|
45
|
-
"duration"
|
|
46
|
-
]);
|
|
35
|
+
function $62873e7e5aeec7f1$export$77bf000da9303d1({ children: children, hide: hide = false, duration: duration = 300, ...rest }) {
|
|
47
36
|
const wrapperRef = (0, $duWW8$useRef)(null);
|
|
48
37
|
const innerRef = (0, $duWW8$useRef)(null);
|
|
49
38
|
const [height, setHeight] = (0, $duWW8$useState)(null);
|
|
@@ -126,20 +115,22 @@ function $62873e7e5aeec7f1$export$77bf000da9303d1(_param) {
|
|
|
126
115
|
}
|
|
127
116
|
};
|
|
128
117
|
}, []);
|
|
129
|
-
return /*#__PURE__*/ (0, $duWW8$jsx)("div",
|
|
118
|
+
return /*#__PURE__*/ (0, $duWW8$jsx)("div", {
|
|
119
|
+
...rest,
|
|
130
120
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($181673e3e0e596f3$exports))).autoHeightWrapper,
|
|
131
121
|
ref: wrapperRef,
|
|
132
|
-
style:
|
|
122
|
+
style: {
|
|
123
|
+
...rest.style,
|
|
133
124
|
display: animationState === "closed" ? "none" : undefined,
|
|
134
125
|
height: height ? `${height}px` : "auto",
|
|
135
126
|
transitionDuration: `${duration}ms`
|
|
136
|
-
}
|
|
127
|
+
},
|
|
137
128
|
children: /*#__PURE__*/ (0, $duWW8$jsx)("div", {
|
|
138
129
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($181673e3e0e596f3$exports))).autoHeightInner,
|
|
139
130
|
ref: innerRef,
|
|
140
131
|
children: targetChildren
|
|
141
132
|
})
|
|
142
|
-
})
|
|
133
|
+
});
|
|
143
134
|
}
|
|
144
135
|
$62873e7e5aeec7f1$export$77bf000da9303d1.displayName = "AutoHeight";
|
|
145
136
|
|
|
@@ -149,9 +140,6 @@ $62873e7e5aeec7f1$export$77bf000da9303d1.displayName = "AutoHeight";
|
|
|
149
140
|
|
|
150
141
|
|
|
151
142
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
143
|
var $47067f35ca62d4a5$exports = {};
|
|
156
144
|
|
|
157
145
|
$parcel$export($47067f35ca62d4a5$exports, "anchor", function () { return $47067f35ca62d4a5$export$2e2992790a6f69a8; }, function (v) { return $47067f35ca62d4a5$export$2e2992790a6f69a8 = v; });
|
|
@@ -192,13 +180,9 @@ $47067f35ca62d4a5$export$664c6d24e3175067 = `aiw-ContextMenu-module-WinFxq-visib
|
|
|
192
180
|
|
|
193
181
|
|
|
194
182
|
|
|
195
|
-
|
|
196
|
-
const $6ca59110355c8bf1$export$7e4e6110f96afd7e = ({ entries: entries, toClose: toClose })=>{
|
|
197
|
-
const [visible, setVisible] = (0, $duWW8$useState)(false);
|
|
183
|
+
const $6ca59110355c8bf1$export$7e4e6110f96afd7e = ({ entries: entries, toClose: toClose, visible: visible })=>{
|
|
198
184
|
return /*#__PURE__*/ (0, $duWW8$jsxs)("span", {
|
|
199
185
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).caretHolder,
|
|
200
|
-
onMouseEnter: ()=>setVisible(true),
|
|
201
|
-
onMouseLeave: ()=>setVisible(false),
|
|
202
186
|
children: [
|
|
203
187
|
/*#__PURE__*/ (0, $duWW8$jsx)("svg", {
|
|
204
188
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -228,11 +212,18 @@ $6ca59110355c8bf1$export$7e4e6110f96afd7e.displayName = "ContextSubMenu";
|
|
|
228
212
|
|
|
229
213
|
const $813754bb7a4251f1$export$c868ef28d2ba36f1 = ({ entry: entry, toClose: toClose })=>{
|
|
230
214
|
const [target, setTarget] = (0, $duWW8$useState)(null);
|
|
215
|
+
const [subMenuVisible, setSubMenuVisible] = (0, $duWW8$useState)(false);
|
|
231
216
|
return /*#__PURE__*/ (0, $duWW8$jsxs)("div", {
|
|
232
217
|
className: [
|
|
233
218
|
(0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).contextMenuItem,
|
|
234
219
|
entry.disabled ? (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).disabled : ""
|
|
235
220
|
].filter((c)=>c !== "").join(" "),
|
|
221
|
+
onMouseEnter: entry.group ? ()=>{
|
|
222
|
+
setSubMenuVisible(true);
|
|
223
|
+
} : undefined,
|
|
224
|
+
onMouseLeave: entry.group ? ()=>{
|
|
225
|
+
setSubMenuVisible(false);
|
|
226
|
+
} : undefined,
|
|
236
227
|
children: [
|
|
237
228
|
typeof entry.label === "string" ? /*#__PURE__*/ (0, $duWW8$jsx)("span", {
|
|
238
229
|
"aria-label": entry.label,
|
|
@@ -258,7 +249,8 @@ const $813754bb7a4251f1$export$c868ef28d2ba36f1 = ({ entry: entry, toClose: toCl
|
|
|
258
249
|
}) : entry.label,
|
|
259
250
|
entry.group && /*#__PURE__*/ (0, $duWW8$jsx)((0, $6ca59110355c8bf1$export$7e4e6110f96afd7e), {
|
|
260
251
|
toClose: toClose,
|
|
261
|
-
entries: entry.group
|
|
252
|
+
entries: entry.group,
|
|
253
|
+
visible: subMenuVisible
|
|
262
254
|
})
|
|
263
255
|
]
|
|
264
256
|
});
|
|
@@ -315,12 +307,7 @@ $567ed433af94513f$export$8dc6765e8be191c7.displayName = "ContextMenu";
|
|
|
315
307
|
|
|
316
308
|
|
|
317
309
|
|
|
318
|
-
const $c3e82278b501f10c$export$d4ebdd58e04c6ace = (
|
|
319
|
-
var { id: id, menuItems: menuItems, children: children } = _param, rest = (0, $duWW8$_2)(_param, [
|
|
320
|
-
"id",
|
|
321
|
-
"menuItems",
|
|
322
|
-
"children"
|
|
323
|
-
]);
|
|
310
|
+
const $c3e82278b501f10c$export$d4ebdd58e04c6ace = ({ id: id, menuItems: menuItems, children: children, ...rest })=>{
|
|
324
311
|
// Menu state
|
|
325
312
|
const [menuInDom, setMenuInDom] = (0, $duWW8$useState)(false);
|
|
326
313
|
const [menuVisible, setMenuVisible] = (0, $duWW8$useState)(false);
|
|
@@ -370,10 +357,10 @@ const $c3e82278b501f10c$export$d4ebdd58e04c6ace = (_param)=>{
|
|
|
370
357
|
]);
|
|
371
358
|
return /*#__PURE__*/ (0, $duWW8$jsxs)((0, $duWW8$Fragment), {
|
|
372
359
|
children: [
|
|
373
|
-
/*#__PURE__*/ (0, $duWW8$jsx)("div",
|
|
360
|
+
/*#__PURE__*/ (0, $duWW8$jsx)("div", {
|
|
361
|
+
...rest,
|
|
374
362
|
id: id,
|
|
375
363
|
onClick: (e)=>{
|
|
376
|
-
var _rest_onClick;
|
|
377
364
|
if (menuItems) {
|
|
378
365
|
setMenuInDom(true);
|
|
379
366
|
e.preventDefault();
|
|
@@ -384,10 +371,10 @@ const $c3e82278b501f10c$export$d4ebdd58e04c6ace = (_param)=>{
|
|
|
384
371
|
setMenuXPos(e.pageX);
|
|
385
372
|
setMenuYPos(e.pageY);
|
|
386
373
|
}, 1);
|
|
387
|
-
} else
|
|
374
|
+
} else rest.onClick?.(e);
|
|
388
375
|
},
|
|
389
376
|
children: children
|
|
390
|
-
})
|
|
377
|
+
}),
|
|
391
378
|
menuInDom && menuItems && /*#__PURE__*/ (0, $duWW8$createPortal)(/*#__PURE__*/ (0, $duWW8$jsx)("div", {
|
|
392
379
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).anchor,
|
|
393
380
|
children: /*#__PURE__*/ (0, $duWW8$jsx)((0, $567ed433af94513f$export$8dc6765e8be191c7), {
|
|
@@ -415,9 +402,6 @@ $c3e82278b501f10c$export$d4ebdd58e04c6ace.displayName = "ClickForMenu";
|
|
|
415
402
|
|
|
416
403
|
|
|
417
404
|
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
405
|
var $c7a6ae87165004e6$exports = {};
|
|
422
406
|
|
|
423
407
|
$parcel$export($c7a6ae87165004e6$exports, "caretHolder", function () { return $c7a6ae87165004e6$export$6ed5f4fbab298e07; }, function (v) { return $c7a6ae87165004e6$export$6ed5f4fbab298e07 = v; });
|
|
@@ -513,10 +497,9 @@ const $556d6f9158abfc99$export$aafc28aea571c4bc = ({ entry: entry })=>{
|
|
|
513
497
|
setTarget(null);
|
|
514
498
|
},
|
|
515
499
|
onClick: (e)=>{
|
|
516
|
-
var _entry_action;
|
|
517
500
|
e.preventDefault();
|
|
518
501
|
e.stopPropagation();
|
|
519
|
-
if (!entry.disabled)
|
|
502
|
+
if (!entry.disabled) entry.action?.(target);
|
|
520
503
|
},
|
|
521
504
|
children: [
|
|
522
505
|
/*#__PURE__*/ (0, $duWW8$jsx)("span", {
|
|
@@ -562,12 +545,7 @@ const $1e1c1e9e0b943830$export$fc58dc71afe92de2 = /*#__PURE__*/ (0, $duWW8$creat
|
|
|
562
545
|
function $1e1c1e9e0b943830$var$isDivider(label) {
|
|
563
546
|
return typeof label !== "string" && label.type === "hr";
|
|
564
547
|
}
|
|
565
|
-
const $1e1c1e9e0b943830$export$ed4f9641643dc7e4 = (
|
|
566
|
-
var { children: children, menuItems: menuItems, showLowMenu: showLowMenu = false } = _param, rest = (0, $duWW8$_2)(_param, [
|
|
567
|
-
"children",
|
|
568
|
-
"menuItems",
|
|
569
|
-
"showLowMenu"
|
|
570
|
-
]);
|
|
548
|
+
const $1e1c1e9e0b943830$export$ed4f9641643dc7e4 = ({ children: children, menuItems: menuItems, showLowMenu: showLowMenu = false, ...rest })=>{
|
|
571
549
|
// Check for higher content menu
|
|
572
550
|
const higherContext = (0, $duWW8$useContext)($1e1c1e9e0b943830$export$fc58dc71afe92de2);
|
|
573
551
|
const thisMenuItems = [
|
|
@@ -612,7 +590,7 @@ const $1e1c1e9e0b943830$export$ed4f9641643dc7e4 = (_param)=>{
|
|
|
612
590
|
window.addEventListener("scroll", updatePos, true);
|
|
613
591
|
let ro = null;
|
|
614
592
|
if (typeof ResizeObserver !== "undefined" && divHandlderRef.current) {
|
|
615
|
-
ro = new ResizeObserver(
|
|
593
|
+
ro = new ResizeObserver(updatePos);
|
|
616
594
|
ro.observe(divHandlderRef.current);
|
|
617
595
|
}
|
|
618
596
|
return ()=>{
|
|
@@ -627,8 +605,7 @@ const $1e1c1e9e0b943830$export$ed4f9641643dc7e4 = (_param)=>{
|
|
|
627
605
|
]);
|
|
628
606
|
// Handle click off the menu
|
|
629
607
|
const handleClick = (0, $duWW8$useCallback)((e)=>{
|
|
630
|
-
|
|
631
|
-
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);
|
|
608
|
+
if (menuRef.current && (e.target instanceof Element && !menuRef.current?.contains(e.target) || !(e.target instanceof Element))) setMenuVisible(false);
|
|
632
609
|
}, []);
|
|
633
610
|
// Update the document click handler
|
|
634
611
|
(0, $duWW8$useEffect)(()=>{
|
|
@@ -659,9 +636,9 @@ const $1e1c1e9e0b943830$export$ed4f9641643dc7e4 = (_param)=>{
|
|
|
659
636
|
menuItems: thisMenuItems
|
|
660
637
|
},
|
|
661
638
|
children: [
|
|
662
|
-
/*#__PURE__*/ (0, $duWW8$jsx)("div",
|
|
663
|
-
ref: divHandlderRef
|
|
664
|
-
|
|
639
|
+
/*#__PURE__*/ (0, $duWW8$jsx)("div", {
|
|
640
|
+
ref: divHandlderRef,
|
|
641
|
+
...rest,
|
|
665
642
|
className: [
|
|
666
643
|
(0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).contextMenuHandler,
|
|
667
644
|
rest.className
|
|
@@ -680,7 +657,6 @@ const $1e1c1e9e0b943830$export$ed4f9641643dc7e4 = (_param)=>{
|
|
|
680
657
|
}
|
|
681
658
|
},
|
|
682
659
|
onMouseEnter: async (e)=>{
|
|
683
|
-
var _rest_onMouseEnter;
|
|
684
660
|
if (showLowMenu) {
|
|
685
661
|
setMenuInDom(true);
|
|
686
662
|
setMouseOverHandlerDiv(false);
|
|
@@ -689,19 +665,18 @@ const $1e1c1e9e0b943830$export$ed4f9641643dc7e4 = (_param)=>{
|
|
|
689
665
|
setMouseOverHandlerDiv(true);
|
|
690
666
|
}, 1);
|
|
691
667
|
}
|
|
692
|
-
|
|
668
|
+
rest.onMouseEnter?.(e);
|
|
693
669
|
},
|
|
694
670
|
onMouseLeave: async (e)=>{
|
|
695
|
-
var _rest_onMouseLeave;
|
|
696
671
|
if (showLowMenu) {
|
|
697
672
|
removeController.current.abort();
|
|
698
673
|
removeController.current = new AbortController();
|
|
699
674
|
setMouseOverHandlerDiv(false);
|
|
700
675
|
}
|
|
701
|
-
|
|
676
|
+
rest.onMouseLeave?.(e);
|
|
702
677
|
},
|
|
703
678
|
children: children
|
|
704
|
-
})
|
|
679
|
+
}),
|
|
705
680
|
menuInDom && divHandlerPos && /*#__PURE__*/ (0, $duWW8$createPortal)(/*#__PURE__*/ (0, $duWW8$jsx)("div", {
|
|
706
681
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).anchor,
|
|
707
682
|
onMouseEnter: ()=>{
|
|
@@ -740,9 +715,6 @@ $1e1c1e9e0b943830$export$ed4f9641643dc7e4.displayName = "ContextMenuHandler";
|
|
|
740
715
|
|
|
741
716
|
|
|
742
717
|
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
718
|
const $ab4d5d6bf03370d0$export$d81cfea7c54be196 = (divRef)=>{
|
|
747
719
|
if (!divRef.current) return {
|
|
748
720
|
translateX: 0,
|
|
@@ -765,6 +737,137 @@ const $ab4d5d6bf03370d0$export$d81cfea7c54be196 = (divRef)=>{
|
|
|
765
737
|
};
|
|
766
738
|
|
|
767
739
|
|
|
740
|
+
|
|
741
|
+
const $a7d2a7efe39e6c95$export$f93615b9594453fc = ({ onMouseDown: onMouseDownCallback, onMouseMove: onMouseMoveCallback, onMouseUp: onMouseUpCallback, onInteractionEnd: onInteractionEndCallback, interactionEndEnabled: interactionEndEnabled = true, onViewportResize: onViewportResizeCallback, viewportResizeEnabled: viewportResizeEnabled = true })=>{
|
|
742
|
+
const mouseMoveRef = (0, $duWW8$useRef)(null);
|
|
743
|
+
const mouseUpRef = (0, $duWW8$useRef)(null);
|
|
744
|
+
const mouseDownElementRef = (0, $duWW8$useRef)(null);
|
|
745
|
+
const mouseDownUserSelectRef = (0, $duWW8$useRef)(null);
|
|
746
|
+
const interactionEndRef = (0, $duWW8$useRef)(null);
|
|
747
|
+
const interactionEndCallbackRef = (0, $duWW8$useRef)(onInteractionEndCallback);
|
|
748
|
+
const viewportResizeCallbackRef = (0, $duWW8$useRef)(onViewportResizeCallback);
|
|
749
|
+
(0, $duWW8$useEffect)(()=>{
|
|
750
|
+
interactionEndCallbackRef.current = onInteractionEndCallback;
|
|
751
|
+
}, [
|
|
752
|
+
onInteractionEndCallback
|
|
753
|
+
]);
|
|
754
|
+
(0, $duWW8$useEffect)(()=>{
|
|
755
|
+
viewportResizeCallbackRef.current = onViewportResizeCallback;
|
|
756
|
+
}, [
|
|
757
|
+
onViewportResizeCallback
|
|
758
|
+
]);
|
|
759
|
+
const removeMouseListeners = (0, $duWW8$useCallback)(()=>{
|
|
760
|
+
if (mouseMoveRef.current) {
|
|
761
|
+
document.removeEventListener("mousemove", mouseMoveRef.current);
|
|
762
|
+
document.removeEventListener("pointermove", mouseMoveRef.current);
|
|
763
|
+
}
|
|
764
|
+
if (mouseUpRef.current) {
|
|
765
|
+
document.removeEventListener("mouseup", mouseUpRef.current);
|
|
766
|
+
document.removeEventListener("pointerup", mouseUpRef.current);
|
|
767
|
+
}
|
|
768
|
+
}, []);
|
|
769
|
+
const restoreMouseDownUserSelect = (0, $duWW8$useCallback)(()=>{
|
|
770
|
+
if (mouseDownElementRef.current) {
|
|
771
|
+
/* v8 ignore next */ mouseDownElementRef.current.style.userSelect = mouseDownUserSelectRef.current ?? "";
|
|
772
|
+
mouseDownElementRef.current = null;
|
|
773
|
+
mouseDownUserSelectRef.current = null;
|
|
774
|
+
}
|
|
775
|
+
}, []);
|
|
776
|
+
const removeInteractionEndListeners = (0, $duWW8$useCallback)(()=>{
|
|
777
|
+
if (interactionEndRef.current) {
|
|
778
|
+
document.removeEventListener("mouseup", interactionEndRef.current, true);
|
|
779
|
+
document.removeEventListener("pointerup", interactionEndRef.current, true);
|
|
780
|
+
interactionEndRef.current = null;
|
|
781
|
+
}
|
|
782
|
+
}, []);
|
|
783
|
+
const onMouseMove = (0, $duWW8$useCallback)((e)=>{
|
|
784
|
+
e.preventDefault();
|
|
785
|
+
e.stopPropagation();
|
|
786
|
+
onMouseMoveCallback?.(e);
|
|
787
|
+
}, [
|
|
788
|
+
onMouseMoveCallback
|
|
789
|
+
]);
|
|
790
|
+
const onMouseUp = (0, $duWW8$useCallback)((e)=>{
|
|
791
|
+
e.preventDefault();
|
|
792
|
+
e.stopPropagation();
|
|
793
|
+
removeMouseListeners();
|
|
794
|
+
restoreMouseDownUserSelect();
|
|
795
|
+
onMouseUpCallback?.(e);
|
|
796
|
+
}, [
|
|
797
|
+
onMouseUpCallback,
|
|
798
|
+
removeMouseListeners,
|
|
799
|
+
restoreMouseDownUserSelect
|
|
800
|
+
]);
|
|
801
|
+
const onMouseDown = (0, $duWW8$useCallback)((e)=>{
|
|
802
|
+
restoreMouseDownUserSelect();
|
|
803
|
+
mouseDownElementRef.current = e.currentTarget;
|
|
804
|
+
mouseDownUserSelectRef.current = e.currentTarget.style.userSelect;
|
|
805
|
+
e.currentTarget.style.userSelect = "none";
|
|
806
|
+
mouseMoveRef.current = onMouseMove;
|
|
807
|
+
mouseUpRef.current = onMouseUp;
|
|
808
|
+
document.addEventListener("mousemove", onMouseMove);
|
|
809
|
+
document.addEventListener("pointermove", onMouseMove);
|
|
810
|
+
document.addEventListener("mouseup", onMouseUp);
|
|
811
|
+
document.addEventListener("pointerup", onMouseUp);
|
|
812
|
+
onMouseDownCallback?.(e);
|
|
813
|
+
}, [
|
|
814
|
+
onMouseDownCallback,
|
|
815
|
+
onMouseMove,
|
|
816
|
+
onMouseUp,
|
|
817
|
+
restoreMouseDownUserSelect
|
|
818
|
+
]);
|
|
819
|
+
const armInteractionEnd = (0, $duWW8$useCallback)(()=>{
|
|
820
|
+
if (!interactionEndEnabled || interactionEndRef.current) return;
|
|
821
|
+
const onInteractionEnd = (e)=>{
|
|
822
|
+
removeInteractionEndListeners();
|
|
823
|
+
interactionEndCallbackRef.current?.(e);
|
|
824
|
+
};
|
|
825
|
+
interactionEndRef.current = onInteractionEnd;
|
|
826
|
+
document.addEventListener("mouseup", onInteractionEnd, true);
|
|
827
|
+
document.addEventListener("pointerup", onInteractionEnd, true);
|
|
828
|
+
}, [
|
|
829
|
+
interactionEndEnabled,
|
|
830
|
+
removeInteractionEndListeners
|
|
831
|
+
]);
|
|
832
|
+
(0, $duWW8$useEffect)(()=>{
|
|
833
|
+
if (!interactionEndEnabled) removeInteractionEndListeners();
|
|
834
|
+
}, [
|
|
835
|
+
interactionEndEnabled,
|
|
836
|
+
removeInteractionEndListeners
|
|
837
|
+
]);
|
|
838
|
+
(0, $duWW8$useEffect)(()=>{
|
|
839
|
+
if (!viewportResizeEnabled || !viewportResizeCallbackRef.current || !onViewportResizeCallback) return;
|
|
840
|
+
const onViewportResize = (e)=>{
|
|
841
|
+
viewportResizeCallbackRef.current?.(e);
|
|
842
|
+
};
|
|
843
|
+
window.addEventListener("resize", onViewportResize);
|
|
844
|
+
return ()=>{
|
|
845
|
+
window.removeEventListener("resize", onViewportResize);
|
|
846
|
+
};
|
|
847
|
+
}, [
|
|
848
|
+
onViewportResizeCallback,
|
|
849
|
+
viewportResizeEnabled
|
|
850
|
+
]);
|
|
851
|
+
(0, $duWW8$useEffect)(()=>{
|
|
852
|
+
return ()=>{
|
|
853
|
+
removeMouseListeners();
|
|
854
|
+
removeInteractionEndListeners();
|
|
855
|
+
restoreMouseDownUserSelect();
|
|
856
|
+
};
|
|
857
|
+
}, [
|
|
858
|
+
removeInteractionEndListeners,
|
|
859
|
+
removeMouseListeners,
|
|
860
|
+
restoreMouseDownUserSelect
|
|
861
|
+
]);
|
|
862
|
+
return {
|
|
863
|
+
onMouseDown: onMouseDown,
|
|
864
|
+
onMouseMove: onMouseMove,
|
|
865
|
+
onMouseUp: onMouseUp,
|
|
866
|
+
armInteractionEnd: armInteractionEnd
|
|
867
|
+
};
|
|
868
|
+
};
|
|
869
|
+
|
|
870
|
+
|
|
768
871
|
var $ddf7153c7c69b209$exports = {};
|
|
769
872
|
|
|
770
873
|
$parcel$export($ddf7153c7c69b209$exports, "contextWindow", function () { return $ddf7153c7c69b209$export$72cad2e5ad4d2674; }, function (v) { return $ddf7153c7c69b209$export$72cad2e5ad4d2674 = v; });
|
|
@@ -805,22 +908,10 @@ const $b5e8657823def5be$var$getMaxZIndex = (componentMinZIndex)=>{
|
|
|
805
908
|
});
|
|
806
909
|
return maxZIndex;
|
|
807
910
|
};
|
|
808
|
-
const $b5e8657823def5be$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $duWW8$forwardRef)((
|
|
809
|
-
var { id: id, visible: visible, title: title, titleElement: titleElement, children: children, onOpen: onOpen, onClose: onClose, minZIndex: minZIndex = $b5e8657823def5be$export$4f9fb66ac71c7da5 } = _param, rest = (0, $duWW8$_2)(_param, [
|
|
810
|
-
"id",
|
|
811
|
-
"visible",
|
|
812
|
-
"title",
|
|
813
|
-
"titleElement",
|
|
814
|
-
"children",
|
|
815
|
-
"onOpen",
|
|
816
|
-
"onClose",
|
|
817
|
-
"minZIndex"
|
|
818
|
-
]);
|
|
819
|
-
var _rest_style, _rest_style1, _rest_style2, _rest_style3;
|
|
911
|
+
const $b5e8657823def5be$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $duWW8$forwardRef)(({ id: id, visible: visible, title: title, titleElement: titleElement, children: children, onOpen: onOpen, onClose: onClose, minZIndex: minZIndex = $b5e8657823def5be$export$4f9fb66ac71c7da5, ...rest }, ref)=>{
|
|
820
912
|
const divRef = (0, $duWW8$useRef)(null);
|
|
821
913
|
const windowRef = (0, $duWW8$useRef)(null);
|
|
822
914
|
const [zIndex, setZIndex] = (0, $duWW8$useState)(minZIndex);
|
|
823
|
-
const resizeListenerRef = (0, $duWW8$useRef)(null);
|
|
824
915
|
// Track internal state: whether window is in DOM and whether it's been positioned
|
|
825
916
|
const [windowInDOM, setWindowInDOM] = (0, $duWW8$useState)(false);
|
|
826
917
|
const [windowVisible, setWindowVisible] = (0, $duWW8$useState)(false);
|
|
@@ -832,51 +923,31 @@ const $b5e8657823def5be$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $duWW8$forwa
|
|
|
832
923
|
});
|
|
833
924
|
const [moving, setMoving] = (0, $duWW8$useState)(false);
|
|
834
925
|
const move = (0, $duWW8$useCallback)((x, y)=>{
|
|
835
|
-
if (windowRef.current
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
pos.y += y;
|
|
840
|
-
window1.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
|
|
926
|
+
if (windowRef.current) {
|
|
927
|
+
windowPos.current.x += x;
|
|
928
|
+
windowPos.current.y += y;
|
|
929
|
+
windowRef.current.style.transform = `translate(${windowPos.current.x}px, ${windowPos.current.y}px)`;
|
|
841
930
|
}
|
|
842
931
|
}, []);
|
|
932
|
+
const fitToViewport = (0, $duWW8$useCallback)(()=>{
|
|
933
|
+
if (!windowRef.current) return;
|
|
934
|
+
const viewportPadding = 32;
|
|
935
|
+
const availableWidth = Math.max(0, window.innerWidth - viewportPadding);
|
|
936
|
+
const availableHeight = Math.max(0, window.innerHeight - viewportPadding);
|
|
937
|
+
const rect = windowRef.current.getBoundingClientRect();
|
|
938
|
+
const horizontalChrome = rect.width - windowRef.current.clientWidth;
|
|
939
|
+
const verticalChrome = rect.height - windowRef.current.clientHeight;
|
|
940
|
+
if (rect.width > availableWidth) windowRef.current.style.width = `${Math.max(0, availableWidth - horizontalChrome)}px`;
|
|
941
|
+
if (rect.height > availableHeight) windowRef.current.style.height = `${Math.max(0, availableHeight - verticalChrome)}px`;
|
|
942
|
+
}, []);
|
|
843
943
|
const checkPosition = (0, $duWW8$useCallback)(()=>{
|
|
844
944
|
const chkPos = (0, $ab4d5d6bf03370d0$export$d81cfea7c54be196)(windowRef);
|
|
845
945
|
move(chkPos.translateX, chkPos.translateY);
|
|
946
|
+
fitToViewport();
|
|
846
947
|
}, [
|
|
948
|
+
fitToViewport,
|
|
847
949
|
move
|
|
848
950
|
]);
|
|
849
|
-
const mouseMove = (0, $duWW8$useCallback)((e)=>{
|
|
850
|
-
e.preventDefault();
|
|
851
|
-
e.stopPropagation();
|
|
852
|
-
move(e.movementX, e.movementY);
|
|
853
|
-
}, [
|
|
854
|
-
move
|
|
855
|
-
]);
|
|
856
|
-
const mouseMoveRef = (0, $duWW8$useRef)(mouseMove);
|
|
857
|
-
const mouseUpRef = (0, $duWW8$useRef)(()=>{});
|
|
858
|
-
const mouseUp = (0, $duWW8$useCallback)((e)=>{
|
|
859
|
-
e.preventDefault();
|
|
860
|
-
e.stopPropagation();
|
|
861
|
-
setMoving(false);
|
|
862
|
-
checkPosition();
|
|
863
|
-
if (mouseMoveRef.current) document.removeEventListener("mousemove", mouseMoveRef.current);
|
|
864
|
-
if (mouseUpRef.current) document.removeEventListener("mouseup", mouseUpRef.current);
|
|
865
|
-
if (resizeListenerRef.current) {
|
|
866
|
-
window.removeEventListener("resize", resizeListenerRef.current);
|
|
867
|
-
resizeListenerRef.current = null;
|
|
868
|
-
}
|
|
869
|
-
if (e.target && (e.target instanceof HTMLElement || e.target instanceof SVGElement)) e.target.style.userSelect = "auto";
|
|
870
|
-
}, [
|
|
871
|
-
checkPosition
|
|
872
|
-
]);
|
|
873
|
-
(0, $duWW8$useEffect)(()=>{
|
|
874
|
-
mouseMoveRef.current = mouseMove;
|
|
875
|
-
mouseUpRef.current = mouseUp;
|
|
876
|
-
}, [
|
|
877
|
-
mouseMove,
|
|
878
|
-
mouseUp
|
|
879
|
-
]);
|
|
880
951
|
// Helper function to push this window to the top
|
|
881
952
|
const pushToTop = (0, $duWW8$useCallback)(()=>{
|
|
882
953
|
const maxZIndex = $b5e8657823def5be$var$getMaxZIndex(minZIndex);
|
|
@@ -884,6 +955,39 @@ const $b5e8657823def5be$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $duWW8$forwa
|
|
|
884
955
|
}, [
|
|
885
956
|
minZIndex
|
|
886
957
|
]);
|
|
958
|
+
const parseTranslate = (transform)=>{
|
|
959
|
+
const match = transform?.match(/translate\((-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px\)/);
|
|
960
|
+
if (match) return {
|
|
961
|
+
x: Number.parseFloat(match[1]),
|
|
962
|
+
y: Number.parseFloat(match[2])
|
|
963
|
+
};
|
|
964
|
+
/* v8 ignore next */ return {
|
|
965
|
+
x: 0,
|
|
966
|
+
y: 0
|
|
967
|
+
};
|
|
968
|
+
};
|
|
969
|
+
const { onMouseDown: onMouseDown, armInteractionEnd: armInteractionEnd } = (0, $a7d2a7efe39e6c95$export$f93615b9594453fc)({
|
|
970
|
+
onMouseDown: ()=>{
|
|
971
|
+
windowPos.current = parseTranslate(windowRef.current?.style.transform);
|
|
972
|
+
setMoving(true);
|
|
973
|
+
pushToTop();
|
|
974
|
+
},
|
|
975
|
+
onMouseMove: (e)=>{
|
|
976
|
+
move(e.movementX, e.movementY);
|
|
977
|
+
},
|
|
978
|
+
onMouseUp: ()=>{
|
|
979
|
+
checkPosition();
|
|
980
|
+
setMoving(false);
|
|
981
|
+
},
|
|
982
|
+
onInteractionEnd: ()=>{
|
|
983
|
+
checkPosition();
|
|
984
|
+
},
|
|
985
|
+
interactionEndEnabled: windowVisible,
|
|
986
|
+
onViewportResize: ()=>{
|
|
987
|
+
checkPosition();
|
|
988
|
+
},
|
|
989
|
+
viewportResizeEnabled: windowVisible
|
|
990
|
+
});
|
|
887
991
|
// Expose pushToTop method via ref
|
|
888
992
|
(0, $duWW8$useImperativeHandle)(ref, ()=>({
|
|
889
993
|
pushToTop: pushToTop
|
|
@@ -917,14 +1021,15 @@ const $b5e8657823def5be$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $duWW8$forwa
|
|
|
917
1021
|
windowRef.current.style.left = `${parentPos.left}px`;
|
|
918
1022
|
windowRef.current.style.top = `${parentPos.bottom + windowHeight < window.innerHeight ? parentPos.bottom : Math.max(0, parentPos.top - windowHeight)}px`;
|
|
919
1023
|
windowRef.current.style.transform = "";
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
1024
|
+
const checkedPosition = (0, $ab4d5d6bf03370d0$export$d81cfea7c54be196)(windowRef);
|
|
1025
|
+
windowRef.current.style.transform = `translate(${checkedPosition.translateX}px, ${checkedPosition.translateY}px)`;
|
|
1026
|
+
if (windowPos && windowPos.current) windowPos.current = {
|
|
1027
|
+
x: checkedPosition.translateX,
|
|
1028
|
+
y: checkedPosition.translateY
|
|
923
1029
|
};
|
|
924
|
-
checkPosition();
|
|
925
1030
|
// Update z-index and make visible - use startTransition
|
|
926
1031
|
const maxZ = $b5e8657823def5be$var$getMaxZIndex(minZIndex);
|
|
927
|
-
onOpen
|
|
1032
|
+
onOpen?.();
|
|
928
1033
|
startTransition(()=>{
|
|
929
1034
|
setZIndex(maxZ + 1);
|
|
930
1035
|
setWindowVisible(true);
|
|
@@ -934,28 +1039,29 @@ const $b5e8657823def5be$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $duWW8$forwa
|
|
|
934
1039
|
windowInDOM,
|
|
935
1040
|
windowVisible,
|
|
936
1041
|
visible,
|
|
937
|
-
checkPosition,
|
|
938
1042
|
minZIndex,
|
|
939
1043
|
onOpen,
|
|
940
1044
|
startTransition
|
|
941
1045
|
]);
|
|
942
|
-
//
|
|
1046
|
+
// When CSS resize handle is used, defer checkPosition until resize interaction ends.
|
|
943
1047
|
(0, $duWW8$useEffect)(()=>{
|
|
1048
|
+
if (!windowVisible || !windowRef.current || typeof ResizeObserver === "undefined") return;
|
|
1049
|
+
const observer = new ResizeObserver(()=>{
|
|
1050
|
+
armInteractionEnd();
|
|
1051
|
+
});
|
|
1052
|
+
observer.observe(windowRef.current);
|
|
944
1053
|
return ()=>{
|
|
945
|
-
|
|
946
|
-
if (mouseMoveRef.current) document.removeEventListener("mousemove", mouseMoveRef.current);
|
|
947
|
-
if (mouseUpRef.current) document.removeEventListener("mouseup", mouseUpRef.current);
|
|
948
|
-
if (resizeListenerRef.current) {
|
|
949
|
-
window.removeEventListener("resize", resizeListenerRef.current);
|
|
950
|
-
resizeListenerRef.current = null;
|
|
951
|
-
}
|
|
1054
|
+
observer.disconnect();
|
|
952
1055
|
};
|
|
953
|
-
}, [
|
|
954
|
-
|
|
1056
|
+
}, [
|
|
1057
|
+
armInteractionEnd,
|
|
1058
|
+
windowVisible
|
|
1059
|
+
]);
|
|
955
1060
|
return /*#__PURE__*/ (0, $duWW8$jsx)("div", {
|
|
956
1061
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowAnchor,
|
|
957
1062
|
ref: divRef,
|
|
958
|
-
children: windowInDOM && /*#__PURE__*/ (0, $duWW8$createPortal)(/*#__PURE__*/ (0, $duWW8$jsxs)("div",
|
|
1063
|
+
children: windowInDOM && /*#__PURE__*/ (0, $duWW8$createPortal)(/*#__PURE__*/ (0, $duWW8$jsxs)("div", {
|
|
1064
|
+
...rest,
|
|
959
1065
|
ref: windowRef,
|
|
960
1066
|
id: id,
|
|
961
1067
|
[$b5e8657823def5be$var$CONTEXT_WINDOW_DATA_ATTR]: "true",
|
|
@@ -963,19 +1069,19 @@ const $b5e8657823def5be$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $duWW8$forwa
|
|
|
963
1069
|
(0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindow,
|
|
964
1070
|
rest.className
|
|
965
1071
|
].filter((c)=>c).join(" "),
|
|
966
|
-
style:
|
|
1072
|
+
style: {
|
|
1073
|
+
...rest.style,
|
|
967
1074
|
opacity: moving ? 0.8 : windowVisible ? 1 : 0,
|
|
968
1075
|
visibility: windowVisible ? "visible" : "hidden",
|
|
969
1076
|
zIndex: zIndex,
|
|
970
|
-
minHeight:
|
|
971
|
-
minWidth:
|
|
972
|
-
maxHeight:
|
|
973
|
-
maxWidth:
|
|
974
|
-
}
|
|
1077
|
+
minHeight: rest.style?.minHeight ?? "150px",
|
|
1078
|
+
minWidth: rest.style?.minWidth ?? "200px",
|
|
1079
|
+
maxHeight: rest.style?.maxHeight ?? "1000px",
|
|
1080
|
+
maxWidth: rest.style?.maxWidth ?? "1000px"
|
|
1081
|
+
},
|
|
975
1082
|
onClickCapture: (e)=>{
|
|
976
|
-
var _rest_onClickCapture;
|
|
977
1083
|
pushToTop();
|
|
978
|
-
|
|
1084
|
+
rest.onClickCapture?.(e);
|
|
979
1085
|
},
|
|
980
1086
|
children: [
|
|
981
1087
|
/*#__PURE__*/ (0, $duWW8$jsxs)("div", {
|
|
@@ -983,16 +1089,7 @@ const $b5e8657823def5be$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $duWW8$forwa
|
|
|
983
1089
|
(0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowTitle,
|
|
984
1090
|
moving ? (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).moving : ""
|
|
985
1091
|
].filter((c)=>c !== "").join(" "),
|
|
986
|
-
onMouseDown:
|
|
987
|
-
if (e.target && (e.target instanceof HTMLElement || e.target instanceof SVGElement)) e.target.style.userSelect = "none";
|
|
988
|
-
setMoving(true);
|
|
989
|
-
pushToTop();
|
|
990
|
-
document.addEventListener("mouseup", mouseUp);
|
|
991
|
-
document.addEventListener("mousemove", mouseMove);
|
|
992
|
-
const resizeListener = ()=>checkPosition();
|
|
993
|
-
resizeListenerRef.current = resizeListener;
|
|
994
|
-
window.addEventListener("resize", resizeListener);
|
|
995
|
-
},
|
|
1092
|
+
onMouseDown: onMouseDown,
|
|
996
1093
|
children: [
|
|
997
1094
|
/*#__PURE__*/ (0, $duWW8$jsx)("div", {
|
|
998
1095
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowTitleText,
|
|
@@ -1025,7 +1122,7 @@ const $b5e8657823def5be$export$1af8984c69ba1b24 = /*#__PURE__*/ (0, $duWW8$forwa
|
|
|
1025
1122
|
})
|
|
1026
1123
|
})
|
|
1027
1124
|
]
|
|
1028
|
-
})
|
|
1125
|
+
}), document.body)
|
|
1029
1126
|
});
|
|
1030
1127
|
});
|
|
1031
1128
|
$b5e8657823def5be$export$1af8984c69ba1b24.displayName = "ContextWindow";
|
|
@@ -1035,5 +1132,6 @@ $b5e8657823def5be$export$1af8984c69ba1b24.displayName = "ContextWindow";
|
|
|
1035
1132
|
|
|
1036
1133
|
|
|
1037
1134
|
|
|
1038
|
-
|
|
1135
|
+
|
|
1136
|
+
export {$a7d2a7efe39e6c95$export$f93615b9594453fc as useMouseMove, $62873e7e5aeec7f1$export$77bf000da9303d1 as AutoHeight, $c3e82278b501f10c$export$d4ebdd58e04c6ace as ClickForMenu, $567ed433af94513f$export$8dc6765e8be191c7 as ContextMenu, $1e1c1e9e0b943830$export$ed4f9641643dc7e4 as ContextMenuHandler, $b5e8657823def5be$export$1af8984c69ba1b24 as ContextWindow};
|
|
1039
1137
|
//# sourceMappingURL=main.js.map
|