@rpg-engine/long-bow 0.7.68 → 0.7.71

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

@@ -9,14 +9,14 @@ import {
 } from '@rpg-engine/shared';
 
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useEffect, useState } from 'react';
-import Draggable from 'react-draggable';
+import React, { useEffect, useRef, useState } 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 { useItemSlotDragAndDrop } from './hooks/useItemSlotDragAndDrop';
+import { useDragging } from './context/DraggingContext';
 import { IContextMenuItem, generateContextMenu } from './itemContainerHelper';
 
 export const EquipmentSlotSpriteByType: any = {
@@ -61,6 +61,7 @@ interface IProps {
   onOutsideDrop?: (item: IItem, position: IPosition) => void;
   dragScale?: number;
   checkIfItemCanBeMoved?: () => boolean;
+  checkIfItemShouldDragEnd?: () => boolean;
   openQuantitySelector?: (maxQuantity: number, callback: () => void) => void;
   onPlaceDrop?: (
     item: IItem | null,
@@ -76,264 +77,454 @@ interface IProps {
   isDepotSystem?: boolean;
 }
 
-export type TooltipState = {
-  visible: boolean;
-  mobileVisible: boolean;
-};
+export const ItemSlot: React.FC<IProps> = observer(
+  ({
+    slotIndex,
+    item,
+    itemContainerType: containerType,
+    slotSpriteMask,
+    onMouseOver,
+    onMouseOut,
+    onPointerDown,
+    onSelected,
+    atlasJSON,
+    atlasIMG,
+    isContextMenuDisabled = false,
+    onDragEnd,
+    onDragStart,
+    onPlaceDrop,
+    onOutsideDrop: onDrop,
+    checkIfItemCanBeMoved,
+    openQuantitySelector,
+    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,
+    });
 
-export type ContextMenuState = {
-  position: IPosition;
-  visible: boolean;
-};
+    const {
+      isTooltipVisible,
+      isTooltipMobileVisible,
+      isContextMenuVisible,
+      contextMenuPosition,
+      isFocused,
+      wasDragged,
+      dragPosition,
+      dropPosition,
+      contextActions,
+    } = state;
 
-export type DragState = {
-  isFocused: boolean;
-  wasDragged: boolean;
-  position: IPosition;
-  dropPosition: IPosition | null;
-};
+    const dragContainer = useRef<HTMLDivElement>(null);
+    const { item: draggingItem, setDraggingItem } = useDragging();
+
+    useEffect(() => {
+      // Reset drag position and focus when item changes
+      setState(prevState => ({
+        ...prevState,
+        dragPosition: { 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
+          ),
+        }));
+      } else {
+        setState(prevState => ({
+          ...prevState,
+          contextActions: [],
+        }));
+      }
+    }, [item, isDepotSystem]);
+
+    useEffect(() => {
+      // Handle outside drop
+      if (onDrop && item && dropPosition) {
+        onDrop(item, dropPosition);
+      }
+    }, [dropPosition]);
+
+    const resetItem = () => {
+      setState(prevState => ({
+        ...prevState,
+        isTooltipVisible: false,
+        wasDragged: false,
+      }));
+    };
+
+    const onSuccessfulDrag = (quantity?: number) => {
+      resetItem();
+
+      if (quantity === -1) {
+        setState(prevState => ({
+          ...prevState,
+          dragPosition: { 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);
+
+      const target = e.target as HTMLElement;
+
+      console.log('handleShortcutSetter(target)');
+      handleShortcutSetter(target);
+
+      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);
+      }
+    };
+
+    /**
+     * Handles the shortcut setter logic if the target element is a shortcut setter.
+     */
+    const handleShortcutSetter = (target: HTMLElement) => {
+      if (target?.id.includes('shortcutSetter') && setItemShortcut && item) {
+        const index = parseInt(target.id.split('_')[1], 10);
+        if (!isNaN(index)) {
+          setItemShortcut(item, index);
+        }
+      }
+    };
+
+    /**
+     * Removes the dragging CSS class from the target element.
+     */
+    const removeDraggingClass = (target: HTMLElement) => {
+      target.classList.remove('react-draggable-dragging');
+    };
 
-export const ItemSlot = React.memo(
-  observer(
-    ({
-      slotIndex,
-      item,
-      itemContainerType: containerType,
-      slotSpriteMask,
-      onMouseOver,
-      onMouseOut,
-      onPointerDown,
-      onSelected,
-      atlasJSON,
-      atlasIMG,
-      isContextMenuDisabled = false,
-      onDragEnd,
-      onDragStart,
-      onPlaceDrop,
-      onOutsideDrop: onDrop,
-      checkIfItemCanBeMoved,
-      openQuantitySelector,
-      dragScale,
-      isSelectingShortcut,
-      equipmentSet,
-      setItemShortcut,
-      isDepotSystem,
-    }: IProps): JSX.Element => {
-      const [tooltipState, setTooltipState] = useState<TooltipState>({
-        visible: false,
-        mobileVisible: false,
-      });
-      const [contextMenuState, setContextMenuState] = useState<
-        ContextMenuState
-      >({
-        visible: false,
-        position: { x: 0, y: 0 },
-      });
-
-      const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
-        []
+    /**
+     * 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);
+    };
+
+    /**
+     * 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,
+          },
+        }));
+      }
+
+      setState(prevState => ({
+        ...prevState,
+        wasDragged: false,
+      }));
 
-      const {
-        dragContainer,
-        dragState,
-        draggingItem,
-        getContainerBounds,
-        onDraggableStart,
-        onDraggableProgress,
-        onDraggableStop,
-      } = useItemSlotDragAndDrop({
-        isDepotSystem: !!isDepotSystem,
-        item: item!,
-        onDrop: onDrop ?? (() => {}),
-        onDragEnd,
-        checkIfItemCanBeMoved,
-        setItemShortcut,
-        isSelectingShortcut,
-        onDragStart,
-        onPointerDown,
-        containerType: containerType!,
-        slotIndex,
-        openQuantitySelector: openQuantitySelector ?? (() => {}),
-        isContextMenuDisabled,
-        setTooltipState,
-        contextMenuState,
-        setContextMenuState,
-      });
-
-      useEffect(() => {
-        if (item && containerType) {
-          setContextActions(
-            generateContextMenu(item, containerType, isDepotSystem)
+      const targetElement = dragContainer.current;
+      if (!targetElement) return;
+
+      const { x, y } = getElementTransform(targetElement);
+      setState(prevState => ({
+        ...prevState,
+        dragPosition: { x, y },
+      }));
+
+      // Delay to ensure state updates before proceeding
+      setTimeout(() => {
+        processDragEnd(item!);
+      }, 50);
+    };
+
+    /**
+     * Retrieves the current transform position of the dragged element.
+     */
+    const getElementTransform = (
+      element: HTMLElement
+    ): { x: number; y: number } => {
+      const style = window.getComputedStyle(element);
+      const matrix = new DOMMatrixReadOnly(style.transform);
+      return { x: matrix.m41, y: matrix.m42 };
+    };
+
+    /**
+     * 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);
         }
-      }, [item, isDepotSystem]);
-
-      const bounds = getContainerBounds();
-
-      const handleInteraction = useCallback(
-        (event: React.MouseEvent | React.TouchEvent) => {
-          event.stopPropagation();
-
-          const { clientX, clientY } =
-            'touches' in event ? event.touches[0] : event;
-
-          if (item && containerType) {
-            if (onPlaceDrop && draggingItem) {
-              onPlaceDrop(item, slotIndex, containerType);
-            }
-            if (
-              onPointerDown &&
-              onDragStart === undefined &&
-              onDragEnd === undefined
-            ) {
-              onPointerDown(item.type, containerType, item);
-            }
-          }
+      } else {
+        console.log(`Debug: resetItem()`);
+        resetItem();
+        setState(prevState => ({
+          ...prevState,
+          isFocused: false,
+          dragPosition: { x: 0, y: 0 },
+        }));
+      }
+    };
 
-          setTooltipState(prev => ({ ...prev, visible: true }));
-          onMouseOver?.(event, slotIndex, item, clientX, clientY);
-        },
-        [
-          item,
-          containerType,
-          slotIndex,
-          onPlaceDrop,
-          onPointerDown,
-          onMouseOver,
-          onDragStart,
-          onDragEnd,
-        ]
-      );
+    /**
+     * Handles the context menu or tooltip display after dragging stops without a drop.
+     */
+    const handleContextMenuOrTooltip = (e: any) => {
+      let isTouchEvent = false;
 
-      const handleInteractionEnd = useCallback(
-        (event: React.MouseEvent | React.TouchEvent) => {
-          event.preventDefault();
-          event.stopPropagation();
-
-          setTooltipState(prev => ({ ...prev, visible: false }));
-          onMouseOut?.();
-
-          if (event.type === 'touchend' && 'changedTouches' in event) {
-            const { clientX, clientY } = event.changedTouches[0];
-            const simulatedEvent = new MouseEvent('mouseup', {
-              clientX,
-              clientY,
-              bubbles: true,
-            });
-            document
-              .elementFromPoint(clientX, clientY)
-              ?.dispatchEvent(simulatedEvent);
-          }
-        },
-        [onMouseOut]
-      );
+      if (
+        !isContextMenuDisabled &&
+        e.type === 'touchend' &&
+        !isSelectingShortcut
+      ) {
+        isTouchEvent = true;
+        setState(prevState => ({
+          ...prevState,
+          isTooltipMobileVisible: true,
+        }));
+      }
+
+      if (!isContextMenuDisabled && !isSelectingShortcut && !isTouchEvent) {
+        setState(prevState => ({
+          ...prevState,
+          isContextMenuVisible: !prevState.isContextMenuVisible,
+          contextMenuPosition: {
+            x: (e as MouseEvent).clientX - 10,
+            y: (e as MouseEvent).clientY - 5,
+          },
+        }));
+      }
+
+      if (item) {
+        onPointerDown(item.type, containerType ?? null, item);
+      }
+    };
+
+    const onDraggableStart: DraggableEventHandler = () => {
+      if (!item || isSelectingShortcut) {
+        return;
+      }
+
+      if (onDragStart && containerType) {
+        onDragStart(item, slotIndex, containerType);
+      }
+    };
+
+    const onDraggableProgress: DraggableEventHandler = (_e, _data) => {
+      // increment draggingDistance by 1
+
+      setState(prevState => ({
+        ...prevState,
+        draggingDistance: prevState.draggingDistance + 1,
+      }));
+
+      if (state.draggingDistance > 10) {
+        setState(prevState => ({
+          ...prevState,
+          wasDragged: true,
+          isFocused: true,
+        }));
+      }
+
+      if (!draggingItem) {
+        setDraggingItem(item);
+      }
+    };
 
-      return (
-        <Container
-          isDraggingItem={!!draggingItem}
+    return (
+      <Container
+        isDraggingItem={!!draggingItem}
+        item={item}
+        className="rpgui-icon empty-slot"
+        onMouseUp={() => {
+          const data = item ? item : null;
+          if (onPlaceDrop && containerType)
+            onPlaceDrop(data, slotIndex, containerType);
+        }}
+        onTouchEnd={e => {
+          const { clientX, clientY } = e.changedTouches[0];
+          const simulatedEvent = new MouseEvent('mouseup', {
+            clientX,
+            clientY,
+            bubbles: true,
+          });
+
+          document
+            .elementFromPoint(clientX, clientY)
+            ?.dispatchEvent(simulatedEvent);
+        }}
+        onPointerDown={
+          onDragStart !== undefined && onDragEnd !== undefined
+            ? undefined
+            : () => {
+                if (item) onPointerDown(item.type, containerType ?? null, item);
+              }
+        }
+        isSelectingShortcut={
+          isSelectingShortcut &&
+          (item?.type === ItemType.Consumable ||
+            item?.type === ItemType.Tool ||
+            item?.subType === ItemSubType.Seed)
+        }
+      >
+        <Draggable
+          axis={isSelectingShortcut ? 'none' : 'both'}
+          defaultClassName={item ? 'draggable' : 'empty-slot'}
+          scale={dragScale}
+          disabled={onDragStart === undefined || onDragEnd === undefined}
+          onStop={onDraggableStop}
+          onStart={onDraggableStart}
+          onDrag={onDraggableProgress}
+          position={dragPosition}
+          cancel=".empty-slot"
+          bounds=".item-container-body, .equipment-container-body"
+        >
+          <ItemContainer
+            ref={dragContainer}
+            isFocused={isFocused}
+            onMouseOver={event => {
+              onMouseOver?.(
+                event,
+                slotIndex,
+                item,
+                event.clientX,
+                event.clientY
+              );
+            }}
+            onMouseOut={() => {
+              if (onMouseOut) onMouseOut();
+            }}
+            onMouseEnter={() => {
+              setState(prevState => ({
+                ...prevState,
+                isTooltipVisible: true,
+              }));
+            }}
+            onMouseLeave={() => {
+              setState(prevState => ({
+                ...prevState,
+                isTooltipVisible: false,
+              }));
+            }}
+          >
+            <ItemSlotRenderer
+              item={item}
+              slotSpriteMask={slotSpriteMask}
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+              containerType={containerType}
+            />
+          </ItemContainer>
+        </Draggable>
+
+        <ItemSlotToolTips
+          isTooltipVisible={isTooltipVisible}
+          isTooltipMobileVisible={isTooltipMobileVisible}
+          setIsTooltipMobileVisible={value =>
+            setState(prevState => ({
+              ...prevState,
+              isTooltipMobileVisible: value,
+            }))
+          }
+          isFocused={isFocused}
+          isContextMenuVisible={isContextMenuVisible}
+          isContextMenuDisabled={isContextMenuDisabled}
           item={item}
-          className="rpgui-icon empty-slot"
-          isSelectingShortcut={
-            isSelectingShortcut &&
-            (item?.type === ItemType.Consumable ||
-              item?.type === ItemType.Tool ||
-              item?.subType === ItemSubType.Seed)
+          contextActions={contextActions}
+          contextMenuPosition={contextMenuPosition}
+          dragScale={dragScale}
+          setIsContextMenuVisible={value =>
+            setState(prevState => ({
+              ...prevState,
+              isContextMenuVisible: value,
+            }))
           }
-          onMouseDown={handleInteraction}
-          onTouchStart={handleInteraction}
-          onMouseUp={e => {
-            handleInteractionEnd(e);
-            const data = item ? item : null;
-            if (onPlaceDrop && containerType && draggingItem) {
-              onPlaceDrop(data, slotIndex, containerType);
-            }
-          }}
-          onTouchEnd={e => {
-            const { clientX, clientY } = e.changedTouches[0];
-            const simulatedEvent = new MouseEvent('mouseup', {
-              clientX,
-              clientY,
-              bubbles: true,
-            });
-            document
-              .elementFromPoint(clientX, clientY)
-              ?.dispatchEvent(simulatedEvent);
+          onSelected={(optionId: string, item: IItem) => {
+            setState(prevState => ({
+              ...prevState,
+              isContextMenuVisible: false,
+            }));
+            if (onSelected) onSelected(optionId, item);
           }}
-          onPointerDown={
-            onDragStart !== undefined && onDragEnd !== undefined
-              ? undefined
-              : () => {
-                  if (item)
-                    onPointerDown(item.type, containerType ?? null, item);
-                }
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          equipmentSet={equipmentSet}
+          setIsTooltipVisible={value =>
+            setState(prevState => ({
+              ...prevState,
+              isTooltipVisible: value,
+            }))
           }
-          onMouseLeave={handleInteractionEnd}
-        >
-          <Draggable
-            axis={isSelectingShortcut ? 'none' : 'both'}
-            defaultClassName={item ? 'draggable' : 'empty-slot'}
-            scale={dragScale}
-            disabled={onDragStart === undefined || onDragEnd === undefined}
-            onStop={onDraggableStop}
-            onStart={onDraggableStart}
-            onDrag={onDraggableProgress}
-            position={dragState.position}
-            cancel=".empty-slot"
-            bounds={bounds}
-          >
-            <ItemContainer
-              ref={dragContainer}
-              isFocused={dragState.isFocused}
-              onMouseOver={event => {
-                onMouseOver?.(
-                  event,
-                  slotIndex,
-                  item,
-                  event.clientX,
-                  event.clientY
-                );
-              }}
-              onMouseOut={onMouseOut}
-              onMouseEnter={() => {
-                setTooltipState(prev => ({ ...prev, visible: true }));
-              }}
-              onMouseLeave={() => {
-                setTooltipState(prev => ({ ...prev, visible: false }));
-              }}
-            >
-              <ItemSlotRenderer
-                item={item}
-                slotSpriteMask={slotSpriteMask}
-                atlasIMG={atlasIMG}
-                atlasJSON={atlasJSON}
-                containerType={containerType}
-              />
-            </ItemContainer>
-          </Draggable>
-
-          <ItemSlotToolTips
-            tooltipState={tooltipState}
-            setTooltipState={setTooltipState}
-            contextMenuState={contextMenuState}
-            setContextMenuState={setContextMenuState}
-            isFocused={dragState.isFocused}
-            isContextMenuDisabled={isContextMenuDisabled}
-            item={item}
-            contextActions={contextActions}
-            dragScale={dragScale}
-            onSelected={(optionId: string, item: IItem) => {
-              setContextMenuState(prev => ({ ...prev, visible: false }));
-              if (onSelected) onSelected(optionId, item);
-            }}
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            equipmentSet={equipmentSet}
-          />
-        </Container>
-      );
-    }
-  )
+        />
+      </Container>
+    );
+  }
 );
 
 interface ContainerTypes {
@@ -347,7 +538,7 @@ const Container = styled.div<ContainerTypes>`
   margin: 0.1rem;
 
   .react-draggable-dragging {
-    // if is dragging item, set opacity to 0
+    // If dragging item, set opacity to 0
     opacity: ${({ isDraggingItem }) => (isDraggingItem ? 0 : 1)};
   }
 
@@ -358,10 +549,8 @@ const Container = styled.div<ContainerTypes>`
     top: 1.5rem;
     left: 1.5rem;
     border-color: ${({ item }) => rarityColor(item)};
-    box-shadow: ${({ item }) => `0 0 5px 2px ${rarityColor(item)}`} inset, ${({
-  item,
-}) => `0 0 4px 3px ${rarityColor(item)}`};
-    //background-color: ${({ item }) => rarityColor(item)};
+    box-shadow: ${({ item }) => `0 0 5px 2px ${rarityColor(item)}`} inset,
+      ${({ item }) => `0 0 4px 3px ${rarityColor(item)}`};
   }
 
   &::before {