@rpg-engine/long-bow 0.7.80 → 0.7.82
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/hooks/useTouchTarget.d.ts +5 -0
- package/dist/long-bow.cjs.development.js +37 -17
- 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 +38 -18
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Item/Inventory/ItemSlot.tsx +51 -25
- package/src/hooks/useTouchTarget.ts +38 -0
package/dist/long-bow.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useEffect, Component, useRef, useContext, createContext,
|
|
1
|
+
import React, { useState, useEffect, Component, useRef, useCallback, useContext, createContext, useMemo, Fragment } from 'react';
|
|
2
2
|
import styled, { css, keyframes } from 'styled-components';
|
|
3
3
|
import { BeatLoader } from 'react-spinners';
|
|
4
4
|
import { v4 } from 'uuid';
|
|
@@ -27371,6 +27371,23 @@ var Container$8 = /*#__PURE__*/styled.div.withConfig({
|
|
|
27371
27371
|
componentId: "sc-dgmp04-0"
|
|
27372
27372
|
})(["position:static !important;"]);
|
|
27373
27373
|
|
|
27374
|
+
function useTouchTarget() {
|
|
27375
|
+
var getTouchTarget = useCallback(function (e) {
|
|
27376
|
+
// Check if it's a touch event
|
|
27377
|
+
if ('changedTouches' in e || 'touches' in e) {
|
|
27378
|
+
var _touchEvent$changedTo, _touchEvent$touches;
|
|
27379
|
+
var touchEvent = e;
|
|
27380
|
+
var touch = ((_touchEvent$changedTo = touchEvent.changedTouches) == null ? void 0 : _touchEvent$changedTo[0]) || ((_touchEvent$touches = touchEvent.touches) == null ? void 0 : _touchEvent$touches[0]);
|
|
27381
|
+
if (touch) {
|
|
27382
|
+
return document.elementFromPoint(touch.clientX, touch.clientY);
|
|
27383
|
+
}
|
|
27384
|
+
}
|
|
27385
|
+
// If it's not a touch event or touch is not available, fallback to target
|
|
27386
|
+
return e.target || document.body;
|
|
27387
|
+
}, []);
|
|
27388
|
+
return getTouchTarget;
|
|
27389
|
+
}
|
|
27390
|
+
|
|
27374
27391
|
var rarityColor = function rarityColor(item) {
|
|
27375
27392
|
switch (item == null ? void 0 : item.rarity) {
|
|
27376
27393
|
case ItemRarities.Uncommon:
|
|
@@ -27814,7 +27831,9 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
|
|
|
27814
27831
|
detailsState = _useItemSlotDetails.detailsState,
|
|
27815
27832
|
updateDetailsState = _useItemSlotDetails.updateDetailsState,
|
|
27816
27833
|
setContextActions = _useItemSlotDetails.setContextActions;
|
|
27834
|
+
var getTouchTarget = useTouchTarget();
|
|
27817
27835
|
var isContextMenuVisible = detailsState.isContextMenuVisible,
|
|
27836
|
+
clearDetailsState = detailsState.clearDetailsState,
|
|
27818
27837
|
clearContextActions = detailsState.clearContextActions;
|
|
27819
27838
|
var dragContainer = useRef(null);
|
|
27820
27839
|
var _useItemSlotDragging = useItemSlotDragging(),
|
|
@@ -27834,12 +27853,17 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
|
|
|
27834
27853
|
isFocused: false
|
|
27835
27854
|
});
|
|
27836
27855
|
}, [containerType, isDepotSystem, setContextActions, clearContextActions, isContextMenuDisabled]);
|
|
27856
|
+
useEffect(function () {
|
|
27857
|
+
// Reset drag position and focus when item changes
|
|
27858
|
+
clearDraggingState();
|
|
27859
|
+
// Clear context actions when component unmounts or dependencies change
|
|
27860
|
+
return function () {
|
|
27861
|
+
clearContextActions();
|
|
27862
|
+
};
|
|
27863
|
+
}, [containerType, isDepotSystem, setContextActions, clearContextActions, isContextMenuDisabled, updateDraggingState]);
|
|
27837
27864
|
var resetItem = function resetItem() {
|
|
27838
27865
|
clearDraggingState();
|
|
27839
|
-
|
|
27840
|
-
item: item,
|
|
27841
|
-
isTooltipVisible: false
|
|
27842
|
-
});
|
|
27866
|
+
clearDetailsState();
|
|
27843
27867
|
};
|
|
27844
27868
|
var onSuccessfulDrag = function onSuccessfulDrag(quantity) {
|
|
27845
27869
|
resetItem();
|
|
@@ -27864,6 +27888,9 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
|
|
|
27864
27888
|
item: null
|
|
27865
27889
|
});
|
|
27866
27890
|
var target = e.target;
|
|
27891
|
+
if (isMobile()) {
|
|
27892
|
+
target = getTouchTarget(e);
|
|
27893
|
+
}
|
|
27867
27894
|
handleShortcutSetter(target);
|
|
27868
27895
|
removeDraggingClass(target);
|
|
27869
27896
|
var shouldHandleDraggedItemResult = shouldHandleDraggedItem();
|
|
@@ -27945,12 +27972,12 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
|
|
|
27945
27972
|
y: matrix.m42
|
|
27946
27973
|
};
|
|
27947
27974
|
};
|
|
27948
|
-
|
|
27949
|
-
* Processes the end of a drag event, handling quantity selection or resetting state.
|
|
27950
|
-
*/
|
|
27951
|
-
var processDragEnd = function processDragEnd(item) {
|
|
27975
|
+
var processDragEnd = useCallback(function (item) {
|
|
27952
27976
|
if (checkIfItemCanBeMoved != null && checkIfItemCanBeMoved()) {
|
|
27953
|
-
if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd())
|
|
27977
|
+
if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) {
|
|
27978
|
+
resetItem();
|
|
27979
|
+
return;
|
|
27980
|
+
}
|
|
27954
27981
|
if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) {
|
|
27955
27982
|
openQuantitySelector(item.stackQty, onSuccessfulDrag);
|
|
27956
27983
|
} else {
|
|
@@ -27958,15 +27985,8 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
|
|
|
27958
27985
|
}
|
|
27959
27986
|
} else {
|
|
27960
27987
|
resetItem();
|
|
27961
|
-
updateDraggingState({
|
|
27962
|
-
isFocused: false,
|
|
27963
|
-
position: {
|
|
27964
|
-
x: 0,
|
|
27965
|
-
y: 0
|
|
27966
|
-
}
|
|
27967
|
-
});
|
|
27968
27988
|
}
|
|
27969
|
-
};
|
|
27989
|
+
}, [checkIfItemCanBeMoved, checkIfItemShouldDragEnd, openQuantitySelector, onSuccessfulDrag, resetItem]);
|
|
27970
27990
|
/**
|
|
27971
27991
|
* Handles the context menu or tooltip display after dragging stops without a drop.
|
|
27972
27992
|
*/
|