@rpg-engine/long-bow 0.7.77 → 0.7.79

package/package.json

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

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

@@ -10,7 +10,7 @@ import {
 } from '@rpg-engine/shared';
 
 import { observer } from 'mobx-react-lite';
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import Draggable, { DraggableEventHandler } from 'react-draggable';
 import styled from 'styled-components';
 import { IPosition } from '../../../types/eventTypes';
@@ -151,7 +151,11 @@ export const ItemSlot: React.FC<IProps> = observer(
       setContextActions,
     } = useItemSlotDetails();
 
-    const { isContextMenuVisible, clearContextActions } = detailsState;
+    const {
+      isContextMenuVisible,
+
+      clearContextActions,
+    } = detailsState;
 
     const dragContainer = useRef<HTMLDivElement>(null);
 
@@ -184,13 +188,10 @@ export const ItemSlot: React.FC<IProps> = observer(
 
     useEffect(() => {
       // Handle outside drop
-      if (onDrop && draggingState.item && dropPosition) {
-        console.log('ITEM SLOT: Outside drop', draggingState.item.key);
-        onDrop(draggingState.item, dropPosition);
-
-        clearDraggingState();
+      if (onDrop && item && dropPosition) {
+        onDrop(item, dropPosition);
       }
-    }, [dropPosition, onDrop, draggingState.item]);
+    }, [dropPosition, onDrop, item]);
 
     const resetItem = () => {
       clearDraggingState();
@@ -271,38 +272,46 @@ export const ItemSlot: React.FC<IProps> = observer(
     /**
      * Handles the logic when an item has been dragged.
      */
-    const handleDraggedItem = (e: any, data: any) => {
-      requestAnimationFrame(() => {
+    const handleDraggedItem = useCallback(
+      (e: any, data: any) => {
         const targetClasses = Array.from((e.target as HTMLElement).classList);
         const isOutsideDrop =
           targetClasses.some(elm => elm.includes('rpgui-content')) ||
           targetClasses.length === 0;
 
-        if (isOutsideDrop) {
+        if (isOutsideDrop && draggingState.isDragging && draggingState.item) {
+          console.log('ITEM SLOT: Outside drop', draggingState.item.key);
+          onDrop?.(draggingState.item, { x: data.x, y: data.y });
+          clearDraggingState();
+        } else {
           updateDraggingState({
             dropPosition: {
               x: data.x,
               y: data.y,
             },
+            isDragging: false,
           });
-        }
-
-        updateDraggingState({
-          isDragging: false,
-        });
 
-        const targetElement = dragContainer.current;
-        if (!targetElement) return;
+          const targetElement = dragContainer.current;
+          if (!targetElement) return;
 
-        const { x, y } = getElementTransform(targetElement);
+          const { x, y } = getElementTransform(targetElement);
 
-        updateDraggingState({
-          position: { x, y },
-        });
+          updateDraggingState({
+            position: { x, y },
+          });
 
-        processDragEnd(item!);
-      });
-    };
+          processDragEnd(item!);
+        }
+      },
+      [
+        draggingState.isDragging,
+        draggingState.item,
+        onDrop,
+        clearDraggingState,
+        updateDraggingState,
+      ]
+    );
 
     /**
      * Retrieves the current transform position of the dragged element.

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

@@ -89,14 +89,12 @@ export const ItemSlotDetailsProvider: React.FC<IProps> = ({ children }) => {
       isDepotSystem: boolean,
       isContextMenuDisabled: boolean
     ): void => {
-      console.log('ITEM SLOT: Set context actions for', item?.key);
       if (item && containerType && !isContextMenuDisabled) {
         const newContextActions = generateContextMenu(
           item,
           containerType as ItemContainerType,
           isDepotSystem
         );
-        console.log('ITEM SLOT: New context actions:', newContextActions);
         updateDetailsState({ contextActions: newContextActions });
       } else {
         updateDetailsState({ contextActions: [] });