@rpg-engine/long-bow 0.7.50 → 0.7.52

package/dist/long-bow.esm.js

@@ -27931,8 +27931,11 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
     contextActions = _useState4[0],
     setContextActions = _useState4[1];
   var _useState5 = useState(null),
-    dragStartTime = _useState5[0],
-    setDragStartTime = _useState5[1];
+    touchStartTime = _useState5[0],
+    setTouchStartTime = _useState5[1];
+  var _useState6 = useState(null),
+    touchStartPosition = _useState6[0],
+    setTouchStartPosition = _useState6[1];
   useEffect(function () {
     setDragState(function (prev) {
       return _extends({}, prev, {
@@ -28014,8 +28017,31 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
     // remove the class react-draggable-dragging from the element
     // to prevent the item from being dragged again
     target.classList.remove('react-draggable-dragging');
-    var dragEndTime = Date.now();
-    var dragDuration = dragStartTime ? dragEndTime - dragStartTime : 0;
+    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;
     if (dragState.wasDragged && item && !isSelectingShortcut) {
       var _e$target;
       //@ts-ignore
@@ -28071,18 +28097,14 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
           });
         }
       }, 50);
-    } else if (item && dragDuration < 200) {
-      // Consider it a click if drag duration is less than 200ms
-      var isTouch = false;
-      if (!isContextMenuDisabled && e.type === 'touchend' && !isSelectingShortcut) {
-        isTouch = true;
+    } else if (item) {
+      if (isTouch && !isDrag) {
         setTooltipState(function (prev) {
           return _extends({}, prev, {
             mobileVisible: true
           });
         });
-      }
-      if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch && !dragState.wasDragged) {
+      } else if (!isTouch && !isContextMenuDisabled && !isSelectingShortcut) {
         setContextMenuState(function (prev) {
           return _extends({}, prev, {
             visible: !contextMenuState.visible
@@ -28100,14 +28122,22 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
           });
         }
       }
-      onPointerDown(item.type, containerType != null ? containerType : null, item);
+      if (!isDrag || !isTouch) {
+        console.log('Calling onPointerDown');
+        onPointerDown(item.type, containerType != null ? containerType : null, item);
+      }
     }
+    setDragState(function (prev) {
+      return _extends({}, prev, {
+        wasDragged: false
+      });
+    });
+    console.log('Final dragState:', dragState);
   };
   var onDraggableStart = function onDraggableStart() {
     if (!item || isSelectingShortcut) {
       return;
     }
-    setDragStartTime(Date.now());
     if (onDragStart && containerType) {
       onDragStart(item, slotIndex, containerType);
     }
@@ -28125,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,
@@ -28136,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',