@rpg-engine/long-bow 0.7.71 → 0.7.73

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

@@ -2,6 +2,7 @@ import {
   IEquipmentSet,
   IItem,
   IItemContainer,
+  isMobile,
   ItemContainerType,
   ItemSlotType,
   ItemSubType,
@@ -9,15 +10,14 @@ import {
 } from '@rpg-engine/shared';
 
 import { observer } from 'mobx-react-lite';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import Draggable, { DraggableEventHandler } from 'react-draggable';
 import styled from 'styled-components';
 import { IPosition } from '../../../types/eventTypes';
 import { rarityColor } from './ItemSlotRarity';
 import { ItemSlotRenderer } from './ItemSlotRenderer';
-import { ItemSlotToolTips } from './ItemSlotTooltips';
-import { useDragging } from './context/DraggingContext';
-import { IContextMenuItem, generateContextMenu } from './itemContainerHelper';
+import { useItemSlotDetails } from './context/ItemSlotDetailsContext';
+import { useItemSlotDragging } from './context/ItemSlotDraggingContext';
 
 export const EquipmentSlotSpriteByType: any = {
   Neck: 'accessories/corruption-necklace.png',
@@ -38,7 +38,6 @@ interface IProps {
   itemContainer?: IItemContainer | null;
   itemContainerType?: ItemContainerType | null;
   slotSpriteMask?: ItemSlotType | null;
-  onSelected?: (selectedOption: string, item: IItem) => void;
   onMouseOver?: (
     event: any,
     slotIndex: number,
@@ -86,7 +85,6 @@ export const ItemSlot: React.FC<IProps> = observer(
     onMouseOver,
     onMouseOut,
     onPointerDown,
-    onSelected,
     atlasJSON,
     atlasIMG,
     isContextMenuDisabled = false,
@@ -99,64 +97,62 @@ export const ItemSlot: React.FC<IProps> = observer(
     checkIfItemShouldDragEnd,
     dragScale,
     isSelectingShortcut,
-    equipmentSet,
+
     setItemShortcut,
     isDepotSystem,
   }) => {
-    // Centralized state using a single useState hook
-    const [state, setState] = useState({
-      isTooltipVisible: false,
-      isTooltipMobileVisible: false,
-      isContextMenuVisible: false,
-      contextMenuPosition: { x: 0, y: 0 },
-      isFocused: false,
-      wasDragged: false,
-      dragPosition: { x: 0, y: 0 } as IPosition,
-      dropPosition: null as IPosition | null,
-      contextActions: [] as IContextMenuItem[],
-      draggingDistance: 0,
-    });
+    const {
+      detailsState,
+      updateDetailsState,
+      setContextActions,
+    } = useItemSlotDetails();
 
     const {
-      isTooltipVisible,
-      isTooltipMobileVisible,
       isContextMenuVisible,
-      contextMenuPosition,
-      isFocused,
-      wasDragged,
-      dragPosition,
-      dropPosition,
-      contextActions,
-    } = state;
+
+      clearContextActions,
+    } = detailsState;
 
     const dragContainer = useRef<HTMLDivElement>(null);
-    const { item: draggingItem, setDraggingItem } = useDragging();
+
+    const {
+      draggingState,
+      updateDraggingState,
+      clearDraggingState,
+    } = useItemSlotDragging();
+
+    const {
+      isFocused,
+      dropPosition,
+      isDragging,
+      draggingDistance,
+    } = draggingState;
 
     useEffect(() => {
       // Reset drag position and focus when item changes
-      setState(prevState => ({
-        ...prevState,
-        dragPosition: { x: 0, y: 0 },
+
+      updateDraggingState({
+        position: { x: 0, y: 0 },
         isFocused: false,
-      }));
+      });
 
       // Update context actions when item or depot system changes
-      if (item && containerType) {
-        setState(prevState => ({
-          ...prevState,
-          contextActions: generateContextMenu(
-            item,
-            containerType,
-            isDepotSystem
-          ),
-        }));
+      if (item && containerType && !isContextMenuDisabled) {
+        setContextActions(
+          item,
+          containerType as ItemContainerType,
+          isDepotSystem ?? false
+        );
       } else {
-        setState(prevState => ({
-          ...prevState,
-          contextActions: [],
-        }));
+        clearContextActions();
       }
-    }, [item, isDepotSystem]);
+    }, [
+      item,
+      containerType,
+      isDepotSystem,
+      setContextActions,
+      clearContextActions,
+    ]);
 
     useEffect(() => {
       // Handle outside drop
@@ -166,50 +162,44 @@ export const ItemSlot: React.FC<IProps> = observer(
     }, [dropPosition]);
 
     const resetItem = () => {
-      setState(prevState => ({
-        ...prevState,
+      clearDraggingState();
+      updateDetailsState({
+        item,
         isTooltipVisible: false,
-        wasDragged: false,
-      }));
+      });
     };
 
     const onSuccessfulDrag = (quantity?: number) => {
       resetItem();
 
       if (quantity === -1) {
-        setState(prevState => ({
-          ...prevState,
-          dragPosition: { x: 0, y: 0 },
+        updateDraggingState({
+          position: { x: 0, y: 0 },
           isFocused: false,
-        }));
+        });
       } else if (item) {
         onDragEnd?.(quantity);
       }
     };
 
     const onDraggableStop: DraggableEventHandler = (e, data) => {
-      console.log('>>> ON_DRAGGABLE_STOP');
-      // Stop the dragging state
-
-      console.log('setDraggingItem(null)');
-      setDraggingItem(null);
+      requestAnimationFrame(() => {
+        updateDraggingState({
+          item: null,
+        });
 
-      const target = e.target as HTMLElement;
+        const target = e.target as HTMLElement;
+        handleShortcutSetter(target);
+        removeDraggingClass(target);
 
-      console.log('handleShortcutSetter(target)');
-      handleShortcutSetter(target);
+        const shouldHandleDraggedItemResult = shouldHandleDraggedItem();
 
-      console.log('removeDraggingClass(target)');
-      removeDraggingClass(target);
-
-      console.log('shouldHandleDraggedItem()');
-      if (shouldHandleDraggedItem()) {
-        console.log('handleDraggedItem(e, data)');
-        handleDraggedItem(e, data);
-      } else if (item && !wasDragged) {
-        console.log('handleContextMenuOrTooltip(e)');
-        handleContextMenuOrTooltip(e);
-      }
+        if (shouldHandleDraggedItemResult) {
+          handleDraggedItem(e, data);
+        } else if (item && !isDragging) {
+          handleContextMenuOrTooltip(e as React.MouseEvent);
+        }
+      });
     };
 
     /**
@@ -235,52 +225,43 @@ export const ItemSlot: React.FC<IProps> = observer(
      * Determines whether the dragged item should be processed.
      */
     const shouldHandleDraggedItem = (): boolean => {
-      console.log(
-        `Debug: shouldHandleDraggedItem()`,
-        `wasDragged: ${wasDragged}`,
-        `item: ${item}`,
-        `isSelectingShortcut: ${isSelectingShortcut}`
-      );
-      return !!(wasDragged && item && !isSelectingShortcut);
+      return !!(isDragging && draggingState.item && !isSelectingShortcut);
     };
 
     /**
      * Handles the logic when an item has been dragged.
      */
     const handleDraggedItem = (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) {
-        setState(prevState => ({
-          ...prevState,
-          dropPosition: {
-            x: data.x,
-            y: data.y,
-          },
-        }));
-      }
+      requestAnimationFrame(() => {
+        const targetClasses = Array.from((e.target as HTMLElement).classList);
+        const isOutsideDrop =
+          targetClasses.some(elm => elm.includes('rpgui-content')) ||
+          targetClasses.length === 0;
+
+        if (isOutsideDrop) {
+          updateDraggingState({
+            dropPosition: {
+              x: data.x,
+              y: data.y,
+            },
+          });
+        }
 
-      setState(prevState => ({
-        ...prevState,
-        wasDragged: false,
-      }));
+        updateDraggingState({
+          isDragging: false,
+        });
 
-      const targetElement = dragContainer.current;
-      if (!targetElement) return;
+        const targetElement = dragContainer.current;
+        if (!targetElement) return;
 
-      const { x, y } = getElementTransform(targetElement);
-      setState(prevState => ({
-        ...prevState,
-        dragPosition: { x, y },
-      }));
+        const { x, y } = getElementTransform(targetElement);
+
+        updateDraggingState({
+          position: { x, y },
+        });
 
-      // Delay to ensure state updates before proceeding
-      setTimeout(() => {
         processDragEnd(item!);
-      }, 50);
+      });
     };
 
     /**
@@ -298,67 +279,53 @@ export const ItemSlot: React.FC<IProps> = observer(
      * Processes the end of a drag event, handling quantity selection or resetting state.
      */
     const processDragEnd = (item: IItem) => {
-      console.log(`Debug: processDragEnd(item)`, `item: ${item}`);
       if (checkIfItemCanBeMoved?.()) {
-        console.log(
-          `Debug: checkIfItemCanBeMoved()`,
-          `result: ${checkIfItemCanBeMoved()}`
-        );
-
         if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) return;
 
-        console.log(
-          `Debug: checkIfItemShouldDragEnd()`,
-          `result: ${checkIfItemShouldDragEnd?.()}`
-        );
-
         if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) {
-          console.log(
-            `Debug: openQuantitySelector(item.stackQty, onSuccessfulDrag)`
-          );
           openQuantitySelector(item.stackQty, onSuccessfulDrag);
         } else {
-          console.log(`Debug: onSuccessfulDrag(item.stackQty)`);
           onSuccessfulDrag(item.stackQty);
         }
       } else {
-        console.log(`Debug: resetItem()`);
         resetItem();
-        setState(prevState => ({
-          ...prevState,
+
+        updateDraggingState({
           isFocused: false,
-          dragPosition: { x: 0, y: 0 },
-        }));
+          position: { x: 0, y: 0 },
+        });
       }
     };
 
     /**
      * Handles the context menu or tooltip display after dragging stops without a drop.
      */
-    const handleContextMenuOrTooltip = (e: any) => {
-      let isTouchEvent = false;
-
-      if (
-        !isContextMenuDisabled &&
-        e.type === 'touchend' &&
-        !isSelectingShortcut
-      ) {
-        isTouchEvent = true;
-        setState(prevState => ({
-          ...prevState,
+    const handleContextMenuOrTooltip = (
+      e: React.MouseEvent | React.TouchEvent
+    ) => {
+      const isTouchEvent = e.type === 'touchend';
+      const shouldShowMobileTooltip =
+        !isContextMenuDisabled && isTouchEvent && !isSelectingShortcut;
+      const shouldToggleContextMenu =
+        !isContextMenuDisabled && !isSelectingShortcut && !isTouchEvent;
+
+      if (shouldShowMobileTooltip) {
+        updateDetailsState({
+          item,
           isTooltipMobileVisible: true,
-        }));
-      }
-
-      if (!isContextMenuDisabled && !isSelectingShortcut && !isTouchEvent) {
-        setState(prevState => ({
-          ...prevState,
-          isContextMenuVisible: !prevState.isContextMenuVisible,
+          isContextMenuVisible: false, // Ensure context menu is hidden
+        });
+      } else if (shouldToggleContextMenu) {
+        const mouseEvent = e as React.MouseEvent;
+        updateDetailsState({
+          item,
+          isContextMenuVisible: !isContextMenuVisible && !isMobile(),
+          isTooltipMobileVisible: false, // Ensure mobile tooltip is hidden
           contextMenuPosition: {
-            x: (e as MouseEvent).clientX - 10,
-            y: (e as MouseEvent).clientY - 5,
+            x: mouseEvent.clientX - 10,
+            y: mouseEvent.clientY - 5,
           },
-        }));
+        });
       }
 
       if (item) {
@@ -378,28 +345,27 @@ export const ItemSlot: React.FC<IProps> = observer(
 
     const onDraggableProgress: DraggableEventHandler = (_e, _data) => {
       // increment draggingDistance by 1
+      updateDraggingState({
+        draggingDistance: draggingState.draggingDistance + 1,
+      });
 
-      setState(prevState => ({
-        ...prevState,
-        draggingDistance: prevState.draggingDistance + 1,
-      }));
-
-      if (state.draggingDistance > 10) {
-        setState(prevState => ({
-          ...prevState,
-          wasDragged: true,
+      if (draggingDistance > 10) {
+        updateDraggingState({
+          isDragging: true,
           isFocused: true,
-        }));
+        });
       }
 
-      if (!draggingItem) {
-        setDraggingItem(item);
+      if (!draggingState.item) {
+        updateDraggingState({
+          item: item,
+        });
       }
     };
 
     return (
       <Container
-        isDraggingItem={!!draggingItem}
+        isDraggingItem={!!draggingState.item}
         item={item}
         className="rpgui-icon empty-slot"
         onMouseUp={() => {
@@ -441,7 +407,7 @@ export const ItemSlot: React.FC<IProps> = observer(
           onStop={onDraggableStop}
           onStart={onDraggableStart}
           onDrag={onDraggableProgress}
-          position={dragPosition}
+          position={draggingState.position}
           cancel=".empty-slot"
           bounds=".item-container-body, .equipment-container-body"
         >
@@ -461,16 +427,16 @@ export const ItemSlot: React.FC<IProps> = observer(
               if (onMouseOut) onMouseOut();
             }}
             onMouseEnter={() => {
-              setState(prevState => ({
-                ...prevState,
+              updateDetailsState({
+                item,
                 isTooltipVisible: true,
-              }));
+              });
             }}
             onMouseLeave={() => {
-              setState(prevState => ({
-                ...prevState,
+              updateDetailsState({
+                item,
                 isTooltipVisible: false,
-              }));
+              });
             }}
           >
             <ItemSlotRenderer
@@ -482,46 +448,6 @@ export const ItemSlot: React.FC<IProps> = observer(
             />
           </ItemContainer>
         </Draggable>
-
-        <ItemSlotToolTips
-          isTooltipVisible={isTooltipVisible}
-          isTooltipMobileVisible={isTooltipMobileVisible}
-          setIsTooltipMobileVisible={value =>
-            setState(prevState => ({
-              ...prevState,
-              isTooltipMobileVisible: value,
-            }))
-          }
-          isFocused={isFocused}
-          isContextMenuVisible={isContextMenuVisible}
-          isContextMenuDisabled={isContextMenuDisabled}
-          item={item}
-          contextActions={contextActions}
-          contextMenuPosition={contextMenuPosition}
-          dragScale={dragScale}
-          setIsContextMenuVisible={value =>
-            setState(prevState => ({
-              ...prevState,
-              isContextMenuVisible: value,
-            }))
-          }
-          onSelected={(optionId: string, item: IItem) => {
-            setState(prevState => ({
-              ...prevState,
-              isContextMenuVisible: false,
-            }));
-            if (onSelected) onSelected(optionId, item);
-          }}
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          equipmentSet={equipmentSet}
-          setIsTooltipVisible={value =>
-            setState(prevState => ({
-              ...prevState,
-              isTooltipVisible: value,
-            }))
-          }
-        />
       </Container>
     );
   }
@@ -537,6 +463,10 @@ interface ContainerTypes {
 const Container = styled.div<ContainerTypes>`
   margin: 0.1rem;
 
+  * {
+    border: 1px solid yellow;
+  }
+
   .react-draggable-dragging {
     // If dragging item, set opacity to 0
     opacity: ${({ isDraggingItem }) => (isDraggingItem ? 0 : 1)};

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

@@ -1,47 +1,43 @@
 import { IEquipmentSet, IItem } from '@rpg-engine/shared';
 import React from 'react';
-import { IPosition } from '../../../types/eventTypes';
 import { RelativeListMenu } from '../../RelativeListMenu';
 import { ItemTooltip } from '../Cards/ItemTooltip';
 import { MobileItemTooltip } from '../Cards/MobileItemTooltip';
-import { IContextMenuItem } from './itemContainerHelper';
+import { useItemSlotDetails } from './context/ItemSlotDetailsContext';
+import { useItemSlotDragging } from './context/ItemSlotDraggingContext';
 
 interface IProps {
-  isTooltipVisible: boolean;
-  isFocused: boolean;
-  isContextMenuVisible: boolean;
-  isContextMenuDisabled: boolean;
-  item: IItem | null;
-  isTooltipMobileVisible: boolean;
-  contextActions: IContextMenuItem[];
-  contextMenuPosition: IPosition;
   dragScale: number | undefined;
-  setIsContextMenuVisible: (visible: boolean) => void;
-  setIsTooltipMobileVisible: (visible: boolean) => void;
-  setIsTooltipVisible: (visible: boolean) => void;
   onSelected?: (optionId: string, item: IItem) => void;
   atlasIMG: any;
   atlasJSON: any;
   equipmentSet?: IEquipmentSet | null;
+  isContextMenuDisabled?: boolean;
 }
 
 export const ItemSlotToolTips = ({
-  isTooltipVisible,
-  isFocused,
-  isContextMenuVisible,
-  isContextMenuDisabled,
-  item,
-  contextActions,
-  contextMenuPosition,
   dragScale,
-  setIsContextMenuVisible,
-  setIsTooltipMobileVisible,
-  isTooltipMobileVisible,
   onSelected,
   atlasIMG,
   atlasJSON,
   equipmentSet,
+  isContextMenuDisabled,
 }: IProps): JSX.Element => {
+  const { detailsState, updateDetailsState } = useItemSlotDetails();
+
+  const {
+    isTooltipVisible,
+    isTooltipMobileVisible,
+    isContextMenuVisible,
+    contextMenuPosition,
+    contextActions,
+    item,
+  } = detailsState;
+
+  const { draggingState } = useItemSlotDragging();
+
+  const { isFocused } = draggingState;
+
   return (
     <>
       {isTooltipVisible && item && !isFocused && (
@@ -60,12 +56,14 @@ export const ItemSlotToolTips = ({
           atlasJSON={atlasJSON}
           equipmentSet={equipmentSet}
           closeTooltip={() => {
-            setIsTooltipMobileVisible(false);
+            updateDetailsState({ isTooltipMobileVisible: false });
           }}
           scale={dragScale}
           options={contextActions}
           onSelected={(optionId: string) => {
-            setIsContextMenuVisible(false);
+            updateDetailsState({
+              isContextMenuVisible: false,
+            });
             if (item) {
               onSelected?.(optionId, item);
             }
@@ -73,21 +71,24 @@ export const ItemSlotToolTips = ({
         />
       )}
 
-      {!isContextMenuDisabled && isContextMenuVisible && contextActions && (
-        <RelativeListMenu
-          options={contextActions}
-          onSelected={(optionId: string) => {
-            setIsContextMenuVisible(false);
-            if (item) {
-              onSelected?.(optionId, item);
-            }
-          }}
-          onOutsideClick={() => {
-            setIsContextMenuVisible(false);
-          }}
-          pos={contextMenuPosition}
-        />
-      )}
+      {!isContextMenuDisabled &&
+        isContextMenuVisible &&
+        contextActions &&
+        contextActions.length > 0 && (
+          <RelativeListMenu
+            options={contextActions}
+            onSelected={(optionId: string) => {
+              updateDetailsState({ isContextMenuVisible: false });
+              if (item) {
+                onSelected?.(optionId, item);
+              }
+            }}
+            onOutsideClick={() => {
+              updateDetailsState({ isContextMenuVisible: false });
+            }}
+            pos={contextMenuPosition}
+          />
+        )}
     </>
   );
 };