@rpg-engine/long-bow 0.7.41 → 0.7.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.7.41",
+  "version": "0.7.42",
   "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 [isClicking, setIsClicking] = useState(false);
+      const clickTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+      // Add a ref to track touch events
+      const isTouchEventRef = useRef(false);
 
       useEffect(() => {
         setDragState(prev => ({
@@ -327,20 +332,59 @@ export const ItemSlot = React.memo(
         }
       };
 
+      const handleMouseDown = (_e: React.MouseEvent) => {
+        setIsClicking(true);
+        clickTimeoutRef.current = setTimeout(() => {
+          setIsClicking(false);
+          // Allow dragging by setting wasDragged to true
+          setDragState(prev => ({
+            ...prev,
+            wasDragged: true,
+            isFocused: true,
+          }));
+        }, 200); // 200ms threshold for distinguishing click vs. hold
+      };
+
+      const handleMouseUp = (_e: React.MouseEvent) => {
+        if (clickTimeoutRef.current) {
+          clearTimeout(clickTimeoutRef.current);
+          clickTimeoutRef.current = null;
+        }
+
+        if (isClicking && item) {
+          // Always open the mobile menu when clicking an item
+          setTooltipState(prev => ({ ...prev, mobileVisible: true }));
+          setContextMenuState(prev => ({ ...prev, visible: false })); // Ensure desktop menu is closed
+          onPointerDown(item.type, containerType ?? null, item);
+          setIsClicking(false);
+        } else if (onPlaceDrop && containerType) {
+          // Handle item placement if not clicking (i.e., after dragging)
+          const data = item ? item : null;
+          onPlaceDrop(data, slotIndex, containerType);
+        }
+
+        // Reset drag state
+        setDragState(prev => ({ ...prev, wasDragged: false }));
+      };
+
+      const handleMouseLeave = () => {
+        if (clickTimeoutRef.current) {
+          clearTimeout(clickTimeoutRef.current);
+          clickTimeoutRef.current = null;
+        }
+        setIsClicking(false);
+      };
+
       const bounds = getContainerBounds();
       return (
         <Container
           isDraggingItem={!!draggingItem}
           item={item}
           className="rpgui-icon empty-slot"
-          onMouseUp={() => {
-            const data = item ? item : null;
-            if (onPlaceDrop && containerType) {
-              onPlaceDrop(data, slotIndex, containerType);
-            }
-          }}
           onTouchEnd={e => {
             const { clientX, clientY } = e.changedTouches[0];
+            // Set the flag to indicate a touch event
+            isTouchEventRef.current = true;
             const simulatedEvent = new MouseEvent('mouseup', {
               clientX,
               clientY,
@@ -365,12 +409,17 @@ export const ItemSlot = React.memo(
               item?.type === ItemType.Tool ||
               item?.subType === ItemSubType.Seed)
           }
+          onMouseDown={handleMouseDown}
+          onMouseUp={handleMouseUp}
+          onMouseLeave={handleMouseLeave}
         >
           <Draggable
             axis={isSelectingShortcut ? 'none' : 'both'}
             defaultClassName={item ? 'draggable' : 'empty-slot'}
             scale={dragScale}
-            disabled={onDragStart === undefined || onDragEnd === undefined}
+            disabled={
+              isClicking || onDragStart === undefined || onDragEnd === undefined
+            }
             onStop={onDraggableStop}
             onStart={onDraggableStart}
             onDrag={onDraggableProgress}