@rpg-engine/long-bow 0.8.87 → 0.8.89
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/long-bow.cjs.development.js +55 -38
- package/dist/long-bow.cjs.development.js.map +1 -1
- package/dist/long-bow.cjs.production.min.js +1 -1
- package/dist/long-bow.cjs.production.min.js.map +1 -1
- package/dist/long-bow.esm.js +55 -38
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +2 -2
- package/src/components/DraggableContainer.tsx +12 -10
- package/src/components/ProgressBar.tsx +5 -4
- package/src/components/RelativeListMenu.tsx +12 -10
- package/src/components/Shortcuts/Shortcuts.tsx +8 -7
- package/src/components/Shortcuts/useShortcutCooldown.ts +33 -12
|
@@ -27191,19 +27191,36 @@ var useShortcutCooldown = function useShortcutCooldown(onShortcutCast) {
|
|
|
27191
27191
|
var _useState = React.useState(0),
|
|
27192
27192
|
shortcutCooldown = _useState[0],
|
|
27193
27193
|
setShortcutCooldown = _useState[1];
|
|
27194
|
-
var
|
|
27195
|
-
var
|
|
27196
|
-
if (
|
|
27194
|
+
var intervalRef = React.useRef(null);
|
|
27195
|
+
var clearCooldownInterval = React.useCallback(function () {
|
|
27196
|
+
if (intervalRef.current) {
|
|
27197
|
+
clearInterval(intervalRef.current);
|
|
27198
|
+
intervalRef.current = null;
|
|
27199
|
+
}
|
|
27200
|
+
}, []);
|
|
27201
|
+
var handleShortcutCast = React.useCallback(function (index) {
|
|
27202
|
+
if (shortcutCooldown <= 0) {
|
|
27203
|
+
setShortcutCooldown(1.5);
|
|
27204
|
+
}
|
|
27197
27205
|
onShortcutCast(index);
|
|
27198
|
-
};
|
|
27206
|
+
}, [shortcutCooldown, onShortcutCast]);
|
|
27199
27207
|
React.useEffect(function () {
|
|
27200
|
-
if (
|
|
27201
|
-
|
|
27202
|
-
|
|
27203
|
-
|
|
27208
|
+
if (shortcutCooldown > 0 && !intervalRef.current) {
|
|
27209
|
+
intervalRef.current = setInterval(function () {
|
|
27210
|
+
setShortcutCooldown(function (prev) {
|
|
27211
|
+
var next = prev - 0.1;
|
|
27212
|
+
if (next <= 0) {
|
|
27213
|
+
clearCooldownInterval();
|
|
27214
|
+
return 0;
|
|
27215
|
+
}
|
|
27216
|
+
return next;
|
|
27217
|
+
});
|
|
27204
27218
|
}, 100);
|
|
27205
27219
|
}
|
|
27206
|
-
|
|
27220
|
+
return function () {
|
|
27221
|
+
clearCooldownInterval();
|
|
27222
|
+
};
|
|
27223
|
+
}, [shortcutCooldown > 0, clearCooldownInterval]);
|
|
27207
27224
|
return {
|
|
27208
27225
|
shortcutCooldown: shortcutCooldown,
|
|
27209
27226
|
handleShortcutCast: handleShortcutCast
|
|
@@ -27458,19 +27475,18 @@ var DraggableContainer = function DraggableContainer(_ref) {
|
|
|
27458
27475
|
height = '100%';
|
|
27459
27476
|
}
|
|
27460
27477
|
useOutsideClick(draggableRef, 'item-container');
|
|
27478
|
+
var handleClickOutside = React.useCallback(function (event) {
|
|
27479
|
+
var e = event;
|
|
27480
|
+
if (e.detail.id === 'item-container') {
|
|
27481
|
+
onOutsideClick == null ? void 0 : onOutsideClick();
|
|
27482
|
+
}
|
|
27483
|
+
}, [onOutsideClick]);
|
|
27461
27484
|
React.useEffect(function () {
|
|
27462
|
-
document.addEventListener('clickOutside',
|
|
27463
|
-
var e = event;
|
|
27464
|
-
if (e.detail.id === 'item-container') {
|
|
27465
|
-
if (onOutsideClick) {
|
|
27466
|
-
onOutsideClick();
|
|
27467
|
-
}
|
|
27468
|
-
}
|
|
27469
|
-
});
|
|
27485
|
+
document.addEventListener('clickOutside', handleClickOutside);
|
|
27470
27486
|
return function () {
|
|
27471
|
-
document.removeEventListener('clickOutside',
|
|
27487
|
+
document.removeEventListener('clickOutside', handleClickOutside);
|
|
27472
27488
|
};
|
|
27473
|
-
}, []);
|
|
27489
|
+
}, [handleClickOutside]);
|
|
27474
27490
|
return React__default.createElement(Draggable, {
|
|
27475
27491
|
cancel: ".container-close,input,button," + cancelDrag,
|
|
27476
27492
|
disabled: dragDisabled,
|
|
@@ -30572,19 +30588,18 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
|
|
|
30572
30588
|
pos = _ref.pos;
|
|
30573
30589
|
var ref = React.useRef(null);
|
|
30574
30590
|
useOutsideClick(ref, 'relative-context-menu');
|
|
30591
|
+
var handleClickOutside = React.useCallback(function (event) {
|
|
30592
|
+
var e = event;
|
|
30593
|
+
if (e.detail.id === 'relative-context-menu') {
|
|
30594
|
+
onOutsideClick == null ? void 0 : onOutsideClick();
|
|
30595
|
+
}
|
|
30596
|
+
}, [onOutsideClick]);
|
|
30575
30597
|
React.useEffect(function () {
|
|
30576
|
-
document.addEventListener('clickOutside',
|
|
30577
|
-
var e = event;
|
|
30578
|
-
if (e.detail.id === 'relative-context-menu') {
|
|
30579
|
-
if (onOutsideClick) {
|
|
30580
|
-
onOutsideClick();
|
|
30581
|
-
}
|
|
30582
|
-
}
|
|
30583
|
-
});
|
|
30598
|
+
document.addEventListener('clickOutside', handleClickOutside);
|
|
30584
30599
|
return function () {
|
|
30585
|
-
document.removeEventListener('clickOutside',
|
|
30600
|
+
document.removeEventListener('clickOutside', handleClickOutside);
|
|
30586
30601
|
};
|
|
30587
|
-
}, []);
|
|
30602
|
+
}, [handleClickOutside]);
|
|
30588
30603
|
return React__default.createElement(ModalPortal, null, React__default.createElement(Container$k, Object.assign({
|
|
30589
30604
|
fontSize: fontSize,
|
|
30590
30605
|
ref: ref
|
|
@@ -36035,8 +36050,6 @@ var ProgressBar$1 = function ProgressBar(_ref) {
|
|
|
36035
36050
|
minWidth = _ref$minWidth === void 0 ? 100 : _ref$minWidth,
|
|
36036
36051
|
style = _ref.style,
|
|
36037
36052
|
mobileScale = _ref.mobileScale;
|
|
36038
|
-
value = Math.round(value);
|
|
36039
|
-
max = Math.round(max);
|
|
36040
36053
|
var calculatePercentageValue = function calculatePercentageValue(max, value) {
|
|
36041
36054
|
if (value > max) {
|
|
36042
36055
|
value = max;
|
|
@@ -36044,6 +36057,9 @@ var ProgressBar$1 = function ProgressBar(_ref) {
|
|
|
36044
36057
|
var percentage = value * 100 / max;
|
|
36045
36058
|
return Math.min(99.99, percentage);
|
|
36046
36059
|
};
|
|
36060
|
+
// Round only for display, not for calculation
|
|
36061
|
+
var displayValue = Math.round(value);
|
|
36062
|
+
var displayMax = Math.round(max);
|
|
36047
36063
|
return React__default.createElement(Container$B, {
|
|
36048
36064
|
className: "rpgui-progress",
|
|
36049
36065
|
"data-value": calculatePercentageValue(max, value) / 100,
|
|
@@ -36052,7 +36068,7 @@ var ProgressBar$1 = function ProgressBar(_ref) {
|
|
|
36052
36068
|
minWidth: minWidth,
|
|
36053
36069
|
style: style,
|
|
36054
36070
|
mobileScale: mobileScale
|
|
36055
|
-
}, displayText && React__default.createElement(TextOverlay$1, null, React__default.createElement(ProgressBarText, null,
|
|
36071
|
+
}, displayText && React__default.createElement(TextOverlay$1, null, React__default.createElement(ProgressBarText, null, displayValue, "/", displayMax)), React__default.createElement("div", {
|
|
36056
36072
|
className: " rpgui-progress-track"
|
|
36057
36073
|
}, React__default.createElement("div", {
|
|
36058
36074
|
className: "rpgui-progress-fill " + color + " ",
|
|
@@ -36350,6 +36366,8 @@ var Shortcuts = function Shortcuts(_ref) {
|
|
|
36350
36366
|
var _useShortcutCooldown = useShortcutCooldown(onShortcutCast),
|
|
36351
36367
|
handleShortcutCast = _useShortcutCooldown.handleShortcutCast,
|
|
36352
36368
|
shortcutCooldown = _useShortcutCooldown.shortcutCooldown;
|
|
36369
|
+
// Use a Set to track active timeouts - automatically cleaned when they complete
|
|
36370
|
+
var activeTimeouts = React.useRef(new Set());
|
|
36353
36371
|
var handleKeyDown = React.useCallback(function (e) {
|
|
36354
36372
|
if (isBlockedCastingByKeyboard) return;
|
|
36355
36373
|
var shortcutIndex = Number(e.key) - 1;
|
|
@@ -36360,21 +36378,20 @@ var Shortcuts = function Shortcuts(_ref) {
|
|
|
36360
36378
|
var timeoutId = setTimeout(function () {
|
|
36361
36379
|
var _shortcutsRefs$curren2;
|
|
36362
36380
|
(_shortcutsRefs$curren2 = shortcutsRefs.current[shortcutIndex]) == null ? void 0 : _shortcutsRefs$curren2.classList.remove('active');
|
|
36381
|
+
activeTimeouts.current["delete"](timeoutId);
|
|
36363
36382
|
}, 150);
|
|
36364
|
-
|
|
36365
|
-
timeoutIds.current.push(timeoutId);
|
|
36383
|
+
activeTimeouts.current.add(timeoutId);
|
|
36366
36384
|
}
|
|
36367
36385
|
}, [isBlockedCastingByKeyboard, handleShortcutCast]);
|
|
36368
|
-
// Initialize a ref to store the timeout ids
|
|
36369
|
-
var timeoutIds = React.useRef([]);
|
|
36370
36386
|
React.useEffect(function () {
|
|
36371
36387
|
window.addEventListener('keydown', handleKeyDown);
|
|
36372
36388
|
return function () {
|
|
36373
36389
|
window.removeEventListener('keydown', handleKeyDown);
|
|
36374
|
-
// Clear all timeouts when the component unmounts
|
|
36375
|
-
|
|
36390
|
+
// Clear all active timeouts when the component unmounts
|
|
36391
|
+
activeTimeouts.current.forEach(function (id) {
|
|
36376
36392
|
return clearTimeout(id);
|
|
36377
36393
|
});
|
|
36394
|
+
activeTimeouts.current.clear();
|
|
36378
36395
|
};
|
|
36379
36396
|
}, [handleKeyDown]);
|
|
36380
36397
|
return React__default.createElement(List$1, null, Array.from({
|