@rpg-engine/long-bow 0.7.80 → 0.7.82

package/package.json

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

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

@@ -13,6 +13,7 @@ import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect, useRef } from 'react';
 import Draggable, { DraggableEventHandler } from 'react-draggable';
 import styled from 'styled-components';
+import useTouchTarget from '../../../hooks/useTouchTarget';
 import { IPosition } from '../../../types/eventTypes';
 import { rarityColor } from './ItemSlotRarity';
 import { ItemSlotRenderer } from './ItemSlotRenderer';
@@ -151,9 +152,11 @@ export const ItemSlot: React.FC<IProps> = observer(
       setContextActions,
     } = useItemSlotDetails();
 
+    const getTouchTarget = useTouchTarget();
+
     const {
       isContextMenuVisible,
-
+      clearDetailsState,
       clearContextActions,
     } = detailsState;
 
@@ -181,12 +184,26 @@ export const ItemSlot: React.FC<IProps> = observer(
       isContextMenuDisabled, // Added missing dependency
     ]);
 
+    useEffect(() => {
+      // Reset drag position and focus when item changes
+      clearDraggingState();
+
+      // Clear context actions when component unmounts or dependencies change
+      return () => {
+        clearContextActions();
+      };
+    }, [
+      containerType,
+      isDepotSystem,
+      setContextActions,
+      clearContextActions,
+      isContextMenuDisabled,
+      updateDraggingState, // Add this dependency
+    ]);
+
     const resetItem = () => {
       clearDraggingState();
-      updateDetailsState({
-        item,
-        isTooltipVisible: false,
-      });
+      clearDetailsState();
     };
 
     const onSuccessfulDrag = (quantity?: number) => {
@@ -217,7 +234,12 @@ export const ItemSlot: React.FC<IProps> = observer(
           item: null,
         });
 
-        const target = e.target as HTMLElement;
+        let target = e.target as HTMLElement;
+
+        if (isMobile()) {
+          target = getTouchTarget(e as MouseEvent);
+        }
+
         handleShortcutSetter(target);
         removeDraggingClass(target);
 
@@ -312,27 +334,31 @@ export const ItemSlot: React.FC<IProps> = observer(
       return { x: matrix.m41, y: matrix.m42 };
     };
 
-    /**
-     * Processes the end of a drag event, handling quantity selection or resetting state.
-     */
-    const processDragEnd = (item: IItem) => {
-      if (checkIfItemCanBeMoved?.()) {
-        if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) return;
-
-        if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) {
-          openQuantitySelector(item.stackQty, onSuccessfulDrag);
+    const processDragEnd = useCallback(
+      (item: IItem) => {
+        if (checkIfItemCanBeMoved?.()) {
+          if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) {
+            resetItem();
+            return;
+          }
+
+          if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) {
+            openQuantitySelector(item.stackQty, onSuccessfulDrag);
+          } else {
+            onSuccessfulDrag(item.stackQty);
+          }
         } else {
-          onSuccessfulDrag(item.stackQty);
+          resetItem();
         }
-      } else {
-        resetItem();
-
-        updateDraggingState({
-          isFocused: false,
-          position: { x: 0, y: 0 },
-        });
-      }
-    };
+      },
+      [
+        checkIfItemCanBeMoved,
+        checkIfItemShouldDragEnd,
+        openQuantitySelector,
+        onSuccessfulDrag,
+        resetItem,
+      ]
+    );
 
     /**
      * Handles the context menu or tooltip display after dragging stops without a drop.

package/src/hooks/useTouchTarget.ts

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+
+interface IEventWithTarget {
+  target: EventTarget | null;
+}
+
+interface ITouchEvent extends IEventWithTarget {
+  changedTouches?: TouchList;
+
+  touches?: TouchList;
+}
+
+export function useTouchTarget() {
+  const getTouchTarget = useCallback(
+    (e: MouseEvent | TouchEvent | IEventWithTarget): HTMLElement => {
+      // Check if it's a touch event
+      if ('changedTouches' in e || 'touches' in e) {
+        const touchEvent = e as ITouchEvent;
+        const touch = touchEvent.changedTouches?.[0] || touchEvent.touches?.[0];
+
+        if (touch) {
+          return document.elementFromPoint(
+            touch.clientX,
+            touch.clientY
+          ) as HTMLElement;
+        }
+      }
+
+      // If it's not a touch event or touch is not available, fallback to target
+      return (e.target as HTMLElement) || document.body;
+    },
+    []
+  );
+
+  return getTouchTarget;
+}
+
+export default useTouchTarget;