@rpg-engine/long-bow 0.7.66 → 0.7.68

package/package.json

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

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

@@ -250,7 +250,6 @@ export const ItemSlot = React.memo(
             }
           }}
           onTouchEnd={e => {
-            handleInteractionEnd(e);
             const { clientX, clientY } = e.changedTouches[0];
             const simulatedEvent = new MouseEvent('mouseup', {
               clientX,
@@ -345,11 +344,6 @@ interface ContainerTypes {
 }
 
 const Container = styled.div<ContainerTypes>`
-
-*  {
-  border: 1px solid red;
-}
-
   margin: 0.1rem;
 
   .react-draggable-dragging {

package/src/components/Item/Inventory/context/DraggingContext.tsx

@@ -1,26 +1,52 @@
 import { IItem } from '@rpg-engine/shared';
 import React, { createContext, useContext, useState } from 'react';
 
-const DraggingContext = createContext<{
+export interface DragState {
+  isFocused: boolean;
+  wasDragged: boolean;
+  position: { x: number; y: number };
+  dropPosition: { x: number; y: number } | null;
+}
+
+interface DraggingContextType {
   item: IItem | null;
   setDraggingItem: React.Dispatch<React.SetStateAction<IItem | null>>;
-}>({
+  dragState: DragState;
+  setDragState: React.Dispatch<React.SetStateAction<DragState>>;
+}
+
+const DraggingContext = createContext<DraggingContextType>({
   item: null,
   setDraggingItem: () => {},
+  dragState: {
+    isFocused: false,
+    wasDragged: false,
+    position: { x: 0, y: 0 },
+    dropPosition: null,
+  },
+  setDragState: () => {},
 });
 
-export const useDragging = () => useContext(DraggingContext);
-
 interface IProps {
   children: React.ReactNode;
 }
 
 export const DraggingProvider = ({ children }: IProps) => {
   const [item, setDraggingItem] = useState<IItem | null>(null);
+  const [dragState, setDragState] = useState<DragState>({
+    isFocused: false,
+    wasDragged: false,
+    position: { x: 0, y: 0 },
+    dropPosition: null,
+  });
 
   return (
-    <DraggingContext.Provider value={{ item, setDraggingItem }}>
+    <DraggingContext.Provider
+      value={{ item, setDraggingItem, dragState, setDragState }}
+    >
       {children}
     </DraggingContext.Provider>
   );
 };
+
+export const useDragging = () => useContext(DraggingContext);

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

@@ -1,8 +1,8 @@
 import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { DraggableEventHandler } from 'react-draggable';
 import { useDragging } from '../context/DraggingContext';
-import { ContextMenuState, DragState, TooltipState } from '../ItemSlot';
+import { ContextMenuState, TooltipState } from '../ItemSlot';
 
 interface IUseItemSlotDragAndDrop {
   isDepotSystem: boolean;
@@ -54,14 +54,12 @@ export const useItemSlotDragAndDrop = ({
   setContextMenuState,
 }: IUseItemSlotDragAndDrop) => {
   const dragContainer = useRef<HTMLDivElement>(null);
-  const { item: draggingItem, setDraggingItem } = useDragging();
-
-  const [dragState, setDragState] = useState<DragState>({
-    isFocused: false,
-    wasDragged: false,
-    position: { x: 0, y: 0 },
-    dropPosition: null,
-  });
+  const {
+    item: draggingItem,
+    setDraggingItem,
+    dragState,
+    setDragState,
+  } = useDragging();
 
   useEffect(() => {
     setDragState(prev => ({
@@ -69,7 +67,7 @@ export const useItemSlotDragAndDrop = ({
       position: { x: 0, y: 0 },
       isFocused: false,
     }));
-  }, [item, isDepotSystem]);
+  }, [item, isDepotSystem, setDragState]);
 
   useEffect(() => {
     if (onDrop && item && dragState.dropPosition) {
@@ -91,15 +89,13 @@ export const useItemSlotDragAndDrop = ({
   }, []);
 
   const resetDragState = useCallback(() => {
-    setTooltipState(prev => ({ ...prev, visible: false }));
     setDragState(prev => ({
       ...prev,
       wasDragged: false,
       isFocused: false,
       position: { x: 0, y: 0 },
     }));
-    setDraggingItem(null);
-  }, [setTooltipState]);
+  }, [setTooltipState, setDragState]);
 
   const handleSuccessfulDrag = useCallback(
     (quantity?: number) => {
@@ -121,20 +117,21 @@ export const useItemSlotDragAndDrop = ({
   const onDraggableProgress: DraggableEventHandler = useCallback(
     (_e, data) => {
       const { x, y } = dragState.position;
-      if (Math.abs(data.x - x) > 20 || Math.abs(data.y - y) > 20) {
+      if (Math.abs(data.x - x) > 5 || Math.abs(data.y - y) > 5) {
         setDragState(prev => ({ ...prev, wasDragged: true, isFocused: true }));
-      } else {
-        resetDragState();
       }
       if (!draggingItem) {
         setDraggingItem(item);
       }
     },
-    [dragState.position, draggingItem, item, setDraggingItem]
+    [dragState.position, draggingItem, item, setDraggingItem, setDragState]
   );
 
   const onDraggableStop: DraggableEventHandler = useCallback(
     (e, data) => {
+      setTimeout(() => {
+        setDraggingItem(null);
+      }, 50);
       const target = e.target as HTMLElement;
       if (!target) return;
 
@@ -178,31 +175,14 @@ 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 &&
-          !dragState.wasDragged &&
-          !dragState.isFocused
+          !draggingItem
         ) {
           setTooltipState(prev => ({ ...prev, mobileVisible: true }));
-        } else if (
-          !isContextMenuDisabled &&
-          !isSelectingShortcut &&
-          !isTouch &&
-          !dragState.wasDragged &&
-          !dragState.isFocused
-        ) {
+        } else if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
           const event = e as MouseEvent;
           setContextMenuState(prev => ({
             visible: !prev.visible,