@rpg-engine/long-bow 0.7.51 → 0.7.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.7.51",
+  "version": "0.7.52",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Item/Inventory/ItemSlot.tsx

@@ -142,6 +142,11 @@ export const ItemSlot = React.memo(
       const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
         []
       );
+      const [touchStartTime, setTouchStartTime] = useState<number | null>(null);
+      const [
+        touchStartPosition,
+        setTouchStartPosition,
+      ] = useState<IPosition | null>(null);
 
       useEffect(() => {
         setDragState(prev => ({
@@ -217,6 +222,34 @@ export const ItemSlot = React.memo(
 
         const isTouch = e.type.startsWith('touch');
 
+        if (isTouch) {
+          const touchEvent = e as TouchEvent;
+          const touch = touchEvent.changedTouches[0];
+          const touchEndTime = new Date().getTime();
+          const touchDuration = touchStartTime
+            ? touchEndTime - touchStartTime
+            : 0;
+
+          // Check if it's a short tap (less than 200ms) and hasn't moved much
+          const isShortTap = touchDuration < 200;
+          const 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(prev => ({
+                ...prev,
+                mobileVisible: true,
+              }));
+              onPointerDown(item.type, containerType ?? null, item);
+            }
+            return;
+          }
+        }
+
         // Threshold for considering a tap/click as a drag
         const dragThreshold = 5; // pixels
         const isDrag =
@@ -339,6 +372,54 @@ export const ItemSlot = React.memo(
         }
       };
 
+      const onTouchStart = (e: React.TouchEvent) => {
+        setTouchStartTime(new Date().getTime());
+        setTouchStartPosition({
+          x: e.touches[0].clientX,
+          y: e.touches[0].clientY,
+        });
+      };
+
+      const onTouchEnd = (e: React.TouchEvent) => {
+        // Prevent default to stop potential unwanted behaviors
+        e.preventDefault();
+
+        const touch = e.changedTouches[0];
+        const touchEndTime = new Date().getTime();
+        const touchDuration = touchStartTime
+          ? touchEndTime - touchStartTime
+          : 0;
+
+        // Check if it's a short tap (less than 200ms) and hasn't moved much
+        const isShortTap = touchDuration < 200;
+        const 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(prev => ({
+              ...prev,
+              mobileVisible: true,
+            }));
+            onPointerDown(item.type, containerType ?? null, item);
+          }
+        } else {
+          // Handle as a drag end
+          const simulatedEvent = new MouseEvent('mouseup', {
+            clientX: touch.clientX,
+            clientY: touch.clientY,
+            bubbles: true,
+          });
+
+          document
+            .elementFromPoint(touch.clientX, touch.clientY)
+            ?.dispatchEvent(simulatedEvent);
+        }
+      };
+
       const bounds = getContainerBounds();
       return (
         <Container
@@ -351,18 +432,6 @@ export const ItemSlot = React.memo(
               onPlaceDrop(data, slotIndex, containerType);
             }
           }}
-          onTouchEnd={e => {
-            const { clientX, clientY } = e.changedTouches[0];
-            const simulatedEvent = new MouseEvent('mouseup', {
-              clientX,
-              clientY,
-              bubbles: true,
-            });
-
-            document
-              .elementFromPoint(clientX, clientY)
-              ?.dispatchEvent(simulatedEvent);
-          }}
           onPointerDown={
             onDragStart !== undefined && onDragEnd !== undefined
               ? undefined
@@ -377,6 +446,8 @@ export const ItemSlot = React.memo(
               item?.type === ItemType.Tool ||
               item?.subType === ItemSubType.Seed)
           }
+          onTouchStart={onTouchStart}
+          onTouchEnd={onTouchEnd}
         >
           <Draggable
             axis={isSelectingShortcut ? 'none' : 'both'}