@rpg-engine/long-bow 0.7.51 → 0.7.53

package/dist/long-bow.esm.js

@@ -27930,6 +27930,15 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
   var _useState4 = useState([]),
     contextActions = _useState4[0],
     setContextActions = _useState4[1];
+  var _useState5 = useState(null),
+    touchStartTime = _useState5[0],
+    setTouchStartTime = _useState5[1];
+  var _useState6 = useState(null),
+    touchStartPosition = _useState6[0],
+    setTouchStartPosition = _useState6[1];
+  var _useState7 = useState(false),
+    isDragging = _useState7[0],
+    setIsDragging = _useState7[1]; // New state to track dragging
   useEffect(function () {
     setDragState(function (prev) {
       return _extends({}, prev, {
@@ -27973,7 +27982,8 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
   var resetItem = function resetItem() {
     setTooltipState(function (prev) {
       return _extends({}, prev, {
-        visible: false
+        visible: false,
+        mobileVisible: false
       });
     });
     setDragState(function (prev) {
@@ -27981,6 +27991,7 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
         wasDragged: false
       });
     });
+    setIsDragging(false); // Reset dragging flag
   };
   var onSuccessfulDrag = function onSuccessfulDrag(quantity) {
     resetItem();
@@ -28008,10 +28019,31 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
         setItemShortcut(item, index);
       }
     }
-    // remove the class react-draggable-dragging from the element
+    // Remove the class react-draggable-dragging from the element
     // to prevent the item from being dragged again
     target.classList.remove('react-draggable-dragging');
     var isTouch = e.type.startsWith('touch');
+    if (isTouch) {
+      var touchEvent = e;
+      var touch = touchEvent.changedTouches[0];
+      var touchEndTime = new Date().getTime();
+      var touchDuration = touchStartTime ? touchEndTime - touchStartTime : 0;
+      // Check if it's a short tap (less than 200ms) and hasn't moved much
+      var isShortTap = touchDuration < 200;
+      var hasMovedSignificantly = touchStartPosition && (Math.abs(touch.clientX - touchStartPosition.x) > 10 || Math.abs(touch.clientY - touchStartPosition.y) > 10);
+      if (isShortTap && !hasMovedSignificantly) {
+        // Handle as a tap/click
+        if (item) {
+          setTooltipState(function (prev) {
+            return _extends({}, prev, {
+              mobileVisible: true
+            });
+          });
+          onPointerDown(item.type, containerType != null ? containerType : null, item);
+        }
+        return;
+      }
+    }
     // Threshold for considering a tap/click as a drag
     var dragThreshold = 5; // pixels
     var isDrag = Math.abs(data.x) > dragThreshold || Math.abs(data.y) > dragThreshold;
@@ -28071,13 +28103,19 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
         }
       }, 50);
     } else if (item) {
-      if (isTouch && !isDrag) {
+      if (isTouch && isDragging) {
+        // If it's a touch and we were dragging, do not show context menu
+        return;
+      } else if (isTouch && !isDrag) {
+        // Handle as a tap/click
         setTooltipState(function (prev) {
           return _extends({}, prev, {
             mobileVisible: true
           });
         });
+        onPointerDown(item.type, containerType != null ? containerType : null, item);
       } else if (!isTouch && !isContextMenuDisabled && !isSelectingShortcut) {
+        // Handle as context menu for mouse devices
         setContextMenuState(function (prev) {
           return _extends({}, prev, {
             visible: !contextMenuState.visible
@@ -28095,7 +28133,7 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
           });
         }
       }
-      if (!isDrag || !isTouch) {
+      if (!isDrag && !isTouch) {
         console.log('Calling onPointerDown');
         onPointerDown(item.type, containerType != null ? containerType : null, item);
       }
@@ -28114,6 +28152,7 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
     if (onDragStart && containerType) {
       onDragStart(item, slotIndex, containerType);
     }
+    setIsDragging(true); // Set dragging flag on start
   };
   var onDraggableProgress = function onDraggableProgress(_e, data) {
     if (Math.abs(data.x - dragState.position.x) > 5 || Math.abs(data.y - dragState.position.y) > 5) {
@@ -28128,6 +28167,46 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
       setDraggingItem(item);
     }
   };
+  var onTouchStartHandler = function onTouchStartHandler(e) {
+    setTouchStartTime(new Date().getTime());
+    setTouchStartPosition({
+      x: e.touches[0].clientX,
+      y: e.touches[0].clientY
+    });
+  };
+  var onTouchEndHandler = function onTouchEndHandler(e) {
+    // Only prevent default if not dragging
+    if (!isDragging) {
+      e.preventDefault();
+    }
+    var touch = e.changedTouches[0];
+    var touchEndTime = new Date().getTime();
+    var touchDuration = touchStartTime ? touchEndTime - touchStartTime : 0;
+    // Check if it's a short tap (less than 200ms) and hasn't moved much
+    var isShortTap = touchDuration < 200;
+    var hasMovedSignificantly = touchStartPosition && (Math.abs(touch.clientX - touchStartPosition.x) > 10 || Math.abs(touch.clientY - touchStartPosition.y) > 10);
+    if (isShortTap && !hasMovedSignificantly) {
+      // Handle as a tap/click
+      if (item) {
+        setTooltipState(function (prev) {
+          return _extends({}, prev, {
+            mobileVisible: true
+          });
+        });
+        onPointerDown(item.type, containerType != null ? containerType : null, item);
+      }
+    } else {
+      var _document$elementFrom;
+      // Handle as a drag end
+      var simulatedEvent = new MouseEvent('mouseup', {
+        clientX: touch.clientX,
+        clientY: touch.clientY,
+        bubbles: true
+      });
+      (_document$elementFrom = document.elementFromPoint(touch.clientX, touch.clientY)) == null ? void 0 : _document$elementFrom.dispatchEvent(simulatedEvent);
+    }
+    setIsDragging(false); // Reset dragging flag on touch end
+  };
   var bounds = getContainerBounds();
   return React.createElement(Container$b, {
     isDraggingItem: !!draggingItem,
@@ -28139,22 +28218,12 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
         onPlaceDrop(data, slotIndex, containerType);
       }
     },
-    onTouchEnd: function onTouchEnd(e) {
-      var _document$elementFrom;
-      var _e$changedTouches$ = e.changedTouches[0],
-        clientX = _e$changedTouches$.clientX,
-        clientY = _e$changedTouches$.clientY;
-      var simulatedEvent = new MouseEvent('mouseup', {
-        clientX: clientX,
-        clientY: clientY,
-        bubbles: true
-      });
-      (_document$elementFrom = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _document$elementFrom.dispatchEvent(simulatedEvent);
-    },
     onPointerDown: onDragStart !== undefined && onDragEnd !== undefined ? undefined : function () {
       if (item) onPointerDown(item.type, containerType != null ? containerType : null, item);
     },
-    isSelectingShortcut: isSelectingShortcut && ((item == null ? void 0 : item.type) === ItemType.Consumable || (item == null ? void 0 : item.type) === ItemType.Tool || (item == null ? void 0 : item.subType) === ItemSubType.Seed)
+    isSelectingShortcut: isSelectingShortcut && ((item == null ? void 0 : item.type) === ItemType.Consumable || (item == null ? void 0 : item.type) === ItemType.Tool || (item == null ? void 0 : item.subType) === ItemSubType.Seed),
+    onTouchStart: onTouchStartHandler,
+    onTouchEnd: onTouchEndHandler
   }, React.createElement(Draggable, {
     axis: isSelectingShortcut ? 'none' : 'both',
     defaultClassName: item ? 'draggable' : 'empty-slot',
@@ -28240,8 +28309,9 @@ var Container$b = /*#__PURE__*/styled.div.withConfig({
 var ItemContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__ItemContainer",
   componentId: "sc-l2j5ef-1"
-})(["width:64px;height:64px;position:relative;", ";"], function (props) {
-  return props.isFocused && 'z-index: 100; pointer-events: none;';
+})(["width:64px;height:64px;position:relative;", ";"], function (_ref7) {
+  var isFocused = _ref7.isFocused;
+  return isFocused ? 'z-index: 100; pointer-events: none;' : '';
 });
 
 var statisticsToDisplay = [{