@rpg-engine/long-bow 0.7.51 → 0.7.52

package/dist/long-bow.esm.js

@@ -27930,6 +27930,12 @@ 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];
   useEffect(function () {
     setDragState(function (prev) {
       return _extends({}, prev, {
@@ -28012,6 +28018,27 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
     // 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;
@@ -28128,6 +28155,43 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
       setDraggingItem(item);
     }
   };
+  var onTouchStart = function onTouchStart(e) {
+    setTouchStartTime(new Date().getTime());
+    setTouchStartPosition({
+      x: e.touches[0].clientX,
+      y: e.touches[0].clientY
+    });
+  };
+  var onTouchEnd = function onTouchEnd(e) {
+    // Prevent default to stop potential unwanted behaviors
+    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);
+    }
+  };
   var bounds = getContainerBounds();
   return React.createElement(Container$b, {
     isDraggingItem: !!draggingItem,
@@ -28139,22 +28203,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: onTouchStart,
+    onTouchEnd: onTouchEnd
   }, React.createElement(Draggable, {
     axis: isSelectingShortcut ? 'none' : 'both',
     defaultClassName: item ? 'draggable' : 'empty-slot',