@rpg-engine/long-bow 0.7.50 → 0.7.52

package/package.json

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

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

@@ -142,7 +142,11 @@ export const ItemSlot = React.memo(
       const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
         []
       );
-      const [dragStartTime, setDragStartTime] = useState<number | null>(null);
+      const [touchStartTime, setTouchStartTime] = useState<number | null>(null);
+      const [
+        touchStartPosition,
+        setTouchStartPosition,
+      ] = useState<IPosition | null>(null);
 
       useEffect(() => {
         setDragState(prev => ({
@@ -216,8 +220,40 @@ export const ItemSlot = React.memo(
         // to prevent the item from being dragged again
         target.classList.remove('react-draggable-dragging');
 
-        const dragEndTime = Date.now();
-        const dragDuration = dragStartTime ? dragEndTime - dragStartTime : 0;
+        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 =
+          Math.abs(data.x) > dragThreshold || Math.abs(data.y) > dragThreshold;
 
         if (dragState.wasDragged && item && !isSelectingShortcut) {
           //@ts-ignore
@@ -270,23 +306,16 @@ export const ItemSlot = React.memo(
               }));
             }
           }, 50);
-        } else if (item && dragDuration < 200) {
-          // Consider it a click if drag duration is less than 200ms
-          let isTouch = false;
-          if (
+        } else if (item) {
+          if (isTouch && !isDrag) {
+            setTooltipState(prev => ({
+              ...prev,
+              mobileVisible: true,
+            }));
+          } else if (
+            !isTouch &&
             !isContextMenuDisabled &&
-            e.type === 'touchend' &&
             !isSelectingShortcut
-          ) {
-            isTouch = true;
-            setTooltipState(prev => ({ ...prev, mobileVisible: true }));
-          }
-
-          if (
-            !isContextMenuDisabled &&
-            !isSelectingShortcut &&
-            !isTouch &&
-            !dragState.wasDragged
           ) {
             setContextMenuState(prev => ({
               ...prev,
@@ -306,8 +335,14 @@ export const ItemSlot = React.memo(
             }
           }
 
-          onPointerDown(item.type, containerType ?? null, item);
+          if (!isDrag || !isTouch) {
+            console.log('Calling onPointerDown');
+            onPointerDown(item.type, containerType ?? null, item);
+          }
         }
+
+        setDragState(prev => ({ ...prev, wasDragged: false }));
+        console.log('Final dragState:', dragState);
       };
 
       const onDraggableStart: DraggableEventHandler = () => {
@@ -315,8 +350,6 @@ export const ItemSlot = React.memo(
           return;
         }
 
-        setDragStartTime(Date.now());
-
         if (onDragStart && containerType) {
           onDragStart(item, slotIndex, containerType);
         }
@@ -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'}