@rpg-engine/long-bow 0.7.64 → 0.7.66

package/package.json

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

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

@@ -345,6 +345,11 @@ interface ContainerTypes {
 }
 
 const Container = styled.div<ContainerTypes>`
+
+*  {
+  border: 1px solid red;
+}
+
   margin: 0.1rem;
 
   .react-draggable-dragging {

package/src/components/Item/Inventory/hooks/useItemSlotDragAndDrop.ts

@@ -98,6 +98,7 @@ export const useItemSlotDragAndDrop = ({
       isFocused: false,
       position: { x: 0, y: 0 },
     }));
+    setDraggingItem(null);
   }, [setTooltipState]);
 
   const handleSuccessfulDrag = useCallback(
@@ -120,8 +121,10 @@ export const useItemSlotDragAndDrop = ({
   const onDraggableProgress: DraggableEventHandler = useCallback(
     (_e, data) => {
       const { x, y } = dragState.position;
-      if (Math.abs(data.x - x) > 5 || Math.abs(data.y - y) > 5) {
+      if (Math.abs(data.x - x) > 20 || Math.abs(data.y - y) > 20) {
         setDragState(prev => ({ ...prev, wasDragged: true, isFocused: true }));
+      } else {
+        resetDragState();
       }
       if (!draggingItem) {
         setDraggingItem(item);
@@ -132,9 +135,6 @@ export const useItemSlotDragAndDrop = ({
 
   const onDraggableStop: DraggableEventHandler = useCallback(
     (e, data) => {
-      setTimeout(() => {
-        setDraggingItem(null);
-      }, 50);
       const target = e.target as HTMLElement;
       if (!target) return;
 
@@ -178,14 +178,31 @@ export const useItemSlotDragAndDrop = ({
         }, 50);
       } else if (item) {
         const isTouch = e.type === 'touchend';
+
+        console.log(`Debug: 
+          isTouch: ${isTouch},
+          isSelectingShortcut: ${isSelectingShortcut},
+          draggingItem: ${draggingItem},
+          dragState.wasDragged: ${dragState.wasDragged},
+          dragState.isFocused: ${dragState.isFocused}
+        `);
+
         if (
           !isContextMenuDisabled &&
           isTouch &&
           !isSelectingShortcut &&
-          !draggingItem
+          !draggingItem &&
+          !dragState.wasDragged &&
+          !dragState.isFocused
         ) {
           setTooltipState(prev => ({ ...prev, mobileVisible: true }));
-        } else if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
+        } else if (
+          !isContextMenuDisabled &&
+          !isSelectingShortcut &&
+          !isTouch &&
+          !dragState.wasDragged &&
+          !dragState.isFocused
+        ) {
           const event = e as MouseEvent;
           setContextMenuState(prev => ({
             visible: !prev.visible,