@rpg-engine/long-bow 0.7.52 → 0.7.53

package/package.json

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

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

@@ -147,6 +147,7 @@ export const ItemSlot = React.memo(
         touchStartPosition,
         setTouchStartPosition,
       ] = useState<IPosition | null>(null);
+      const [isDragging, setIsDragging] = useState<boolean>(false); // New state to track dragging
 
       useEffect(() => {
         setDragState(prev => ({
@@ -185,8 +186,13 @@ export const ItemSlot = React.memo(
       }, [dragContainer]);
 
       const resetItem = () => {
-        setTooltipState(prev => ({ ...prev, visible: false }));
+        setTooltipState(prev => ({
+          ...prev,
+          visible: false,
+          mobileVisible: false,
+        }));
         setDragState(prev => ({ ...prev, wasDragged: false }));
+        setIsDragging(false); // Reset dragging flag
       };
 
       const onSuccessfulDrag = (quantity?: number) => {
@@ -216,7 +222,7 @@ export const ItemSlot = React.memo(
           }
         }
 
-        // 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');
 
@@ -307,16 +313,22 @@ export const ItemSlot = React.memo(
             }
           }, 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(prev => ({
               ...prev,
               mobileVisible: true,
             }));
+            onPointerDown(item.type, containerType ?? null, item);
           } else if (
             !isTouch &&
             !isContextMenuDisabled &&
             !isSelectingShortcut
           ) {
+            // Handle as context menu for mouse devices
             setContextMenuState(prev => ({
               ...prev,
               visible: !contextMenuState.visible,
@@ -335,7 +347,7 @@ export const ItemSlot = React.memo(
             }
           }
 
-          if (!isDrag || !isTouch) {
+          if (!isDrag && !isTouch) {
             console.log('Calling onPointerDown');
             onPointerDown(item.type, containerType ?? null, item);
           }
@@ -353,6 +365,8 @@ export const ItemSlot = React.memo(
         if (onDragStart && containerType) {
           onDragStart(item, slotIndex, containerType);
         }
+
+        setIsDragging(true); // Set dragging flag on start
       };
 
       const onDraggableProgress: DraggableEventHandler = (_e, data) => {
@@ -372,7 +386,7 @@ export const ItemSlot = React.memo(
         }
       };
 
-      const onTouchStart = (e: React.TouchEvent) => {
+      const onTouchStartHandler = (e: React.TouchEvent) => {
         setTouchStartTime(new Date().getTime());
         setTouchStartPosition({
           x: e.touches[0].clientX,
@@ -380,9 +394,11 @@ export const ItemSlot = React.memo(
         });
       };
 
-      const onTouchEnd = (e: React.TouchEvent) => {
-        // Prevent default to stop potential unwanted behaviors
-        e.preventDefault();
+      const onTouchEndHandler = (e: React.TouchEvent) => {
+        // Only prevent default if not dragging
+        if (!isDragging) {
+          e.preventDefault();
+        }
 
         const touch = e.changedTouches[0];
         const touchEndTime = new Date().getTime();
@@ -418,6 +434,8 @@ export const ItemSlot = React.memo(
             .elementFromPoint(touch.clientX, touch.clientY)
             ?.dispatchEvent(simulatedEvent);
         }
+
+        setIsDragging(false); // Reset dragging flag on touch end
       };
 
       const bounds = getContainerBounds();
@@ -446,8 +464,8 @@ export const ItemSlot = React.memo(
               item?.type === ItemType.Tool ||
               item?.subType === ItemSubType.Seed)
           }
-          onTouchStart={onTouchStart}
-          onTouchEnd={onTouchEnd}
+          onTouchStart={onTouchStartHandler}
+          onTouchEnd={onTouchEndHandler}
         >
           <Draggable
             axis={isSelectingShortcut ? 'none' : 'both'}
@@ -577,5 +595,6 @@ const ItemContainer = styled.div<{ isFocused?: boolean }>`
   height: 64px;
 
   position: relative;
-  ${props => props.isFocused && 'z-index: 100; pointer-events: none;'};
+  ${({ isFocused }) =>
+    isFocused ? 'z-index: 100; pointer-events: none;' : ''};
 `;