@rpg-engine/long-bow 0.7.53 → 0.7.61

package/package.json

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

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

@@ -87,7 +87,6 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   onOutsideDrop,
   checkIfItemCanBeMoved,
   initialPosition,
-  checkIfItemShouldDragEnd,
   scale,
   shortcuts,
   setItemShortcut,
@@ -191,7 +190,6 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
           onDragEnd={onDragEnd}
           dragScale={scale}
           checkIfItemCanBeMoved={checkIfItemCanBeMoved}
-          checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
           openQuantitySelector={(maxQuantity, callback) => {
             setQuantitySelect({
               isOpen: true,

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, useRef, useState } from 'react';
-import Draggable, { DraggableEventHandler } from 'react-draggable';
+import React, { useCallback, useEffect, useState } from 'react';
+import Draggable 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 { useItemSlotDragAndDrop } from './hooks/useItemSlotDragAndDrop';
 import { IContextMenuItem, generateContextMenu } from './itemContainerHelper';
 
 export const EquipmentSlotSpriteByType: any = {
@@ -61,7 +61,6 @@ interface IProps {
   onOutsideDrop?: (item: IItem, position: IPosition) => void;
   dragScale?: number;
   checkIfItemCanBeMoved?: () => boolean;
-  checkIfItemShouldDragEnd?: () => boolean;
   openQuantitySelector?: (maxQuantity: number, callback: () => void) => void;
   onPlaceDrop?: (
     item: IItem | null,
@@ -114,7 +113,6 @@ export const ItemSlot = React.memo(
       onOutsideDrop: onDrop,
       checkIfItemCanBeMoved,
       openQuantitySelector,
-      checkIfItemShouldDragEnd,
       dragScale,
       isSelectingShortcut,
       equipmentSet,
@@ -131,31 +129,39 @@ export const ItemSlot = React.memo(
         visible: false,
         position: { x: 0, y: 0 },
       });
-      const [dragState, setDragState] = useState<DragState>({
-        isFocused: false,
-        wasDragged: false,
-        position: { x: 0, y: 0 },
-        dropPosition: null,
-      });
-      const dragContainer = useRef<HTMLDivElement>(null);
-      const { item: draggingItem, setDraggingItem } = useDragging();
+
       const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
         []
       );
-      const [touchStartTime, setTouchStartTime] = useState<number | null>(null);
-      const [
-        touchStartPosition,
-        setTouchStartPosition,
-      ] = useState<IPosition | null>(null);
-      const [isDragging, setIsDragging] = useState<boolean>(false); // New state to track dragging
 
-      useEffect(() => {
-        setDragState(prev => ({
-          ...prev,
-          position: { x: 0, y: 0 },
-          isFocused: 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)
@@ -163,293 +169,98 @@ export const ItemSlot = React.memo(
         }
       }, [item, isDepotSystem]);
 
-      useEffect(() => {
-        if (onDrop && item && dragState.dropPosition) {
-          onDrop(item, dragState.dropPosition);
-          setDragState(prev => ({
-            ...prev,
-            dropPosition: null,
-          }));
-        }
-      }, [dragState.dropPosition]);
-
-      const getContainerBounds = useCallback(() => {
-        const container = dragContainer.current;
-        if (!container) return { left: 0, top: 0, right: 0, bottom: 0 };
-        const rect = container.getBoundingClientRect();
-        return {
-          left: rect.left,
-          top: rect.top,
-          right: window.innerWidth - rect.right,
-          bottom: window.innerHeight - rect.bottom,
-        };
-      }, [dragContainer]);
-
-      const resetItem = () => {
-        setTooltipState(prev => ({
-          ...prev,
-          visible: false,
-          mobileVisible: false,
-        }));
-        setDragState(prev => ({ ...prev, wasDragged: false }));
-        setIsDragging(false); // Reset dragging flag
-      };
-
-      const onSuccessfulDrag = (quantity?: number) => {
-        resetItem();
-
-        if (quantity === -1) {
-          setDragState(prev => ({
-            ...prev,
-            position: { x: 0, y: 0 },
-            isFocused: false,
-          }));
-        } else if (item) {
-          onDragEnd?.(quantity);
-        }
-      };
-
-      const onDraggableStop: DraggableEventHandler = (e, data) => {
-        setDraggingItem(null);
-
-        const target = e.target as HTMLElement;
-        if (!target) return;
-
-        if (target?.id.includes('shortcutSetter') && setItemShortcut && item) {
-          const index = parseInt(target.id.split('_')[1]);
-          if (!isNaN(index)) {
-            setItemShortcut(item, index);
-          }
-        }
-
-        // Remove the class react-draggable-dragging from the element
-        // to prevent the item from being dragged again
-        target.classList.remove('react-draggable-dragging');
-
-        const isTouch = e.type.startsWith('touch');
-
-        if (isTouch) {
-          const touchEvent = e as TouchEvent;
-          const touch = touchEvent.changedTouches[0];
-          const touchEndTime = new Date().getTime();
-          const touchDuration = touchStartTime
-            ? touchEndTime - touchStartTime
-            : 0;
-
-          // Check if it's a short tap (less than 200ms) and hasn't moved much
-          const isShortTap = touchDuration < 200;
-          const hasMovedSignificantly =
-            touchStartPosition &&
-            (Math.abs(touch.clientX - touchStartPosition.x) > 10 ||
-              Math.abs(touch.clientY - touchStartPosition.y) > 10);
-
-          if (isShortTap && !hasMovedSignificantly) {
-            // Handle as a tap/click
-            if (item) {
-              setTooltipState(prev => ({
-                ...prev,
-                mobileVisible: true,
-              }));
-              onPointerDown(item.type, containerType ?? null, item);
-            }
-            return;
-          }
-        }
-
-        // Threshold for considering a tap/click as a drag
-        const dragThreshold = 5; // pixels
-        const isDrag =
-          Math.abs(data.x) > dragThreshold || Math.abs(data.y) > dragThreshold;
-
-        if (dragState.wasDragged && item && !isSelectingShortcut) {
-          //@ts-ignore
-          const classes: string[] = Array.from(e.target?.classList);
-
-          const isOutsideDrop =
-            classes.some(elm => {
-              return elm.includes('rpgui-content');
-            }) || classes.length === 0;
-
-          if (isOutsideDrop) {
-            setDragState(prev => ({
-              ...prev,
-              dropPosition: { x: data.x, y: data.y },
-            }));
-          }
-
-          setDragState(prev => ({ ...prev, wasDragged: false }));
-
-          const target = dragContainer.current;
-          if (!target || !dragState.wasDragged) return;
+      const bounds = getContainerBounds();
 
-          const style = window.getComputedStyle(target);
-          const matrix = new DOMMatrixReadOnly(style.transform);
-          const x = matrix.m41;
-          const y = matrix.m42;
+      const handleInteraction = useCallback(
+        (event: React.MouseEvent | React.TouchEvent) => {
+          event.stopPropagation();
 
-          setDragState(prev => ({
-            ...prev,
-            position: { x, y },
-          }));
+          const { clientX, clientY } =
+            'touches' in event ? event.touches[0] : event;
 
-          setTimeout(() => {
-            if (checkIfItemCanBeMoved && checkIfItemCanBeMoved()) {
-              if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd())
-                return;
-              if (
-                item.stackQty &&
-                item.stackQty !== 1 &&
-                openQuantitySelector
-              ) {
-                openQuantitySelector(item.stackQty, onSuccessfulDrag);
-              } else onSuccessfulDrag(item.stackQty);
-            } else {
-              resetItem();
-              setDragState(prev => ({
-                ...prev,
-                isFocused: false,
-                position: { x: 0, y: 0 },
-              }));
+          if (item && containerType) {
+            if (onPlaceDrop && draggingItem) {
+              onPlaceDrop(item, slotIndex, containerType);
             }
-          }, 50);
-        } else if (item) {
-          if (isTouch && isDragging) {
-            // If it's a touch and we were dragging, do not show context menu
-            return;
-          } else if (isTouch && !isDrag) {
-            // Handle as a tap/click
-            setTooltipState(prev => ({
-              ...prev,
-              mobileVisible: true,
-            }));
-            onPointerDown(item.type, containerType ?? null, item);
-          } else if (
-            !isTouch &&
-            !isContextMenuDisabled &&
-            !isSelectingShortcut
-          ) {
-            // Handle as context menu for mouse devices
-            setContextMenuState(prev => ({
-              ...prev,
-              visible: !contextMenuState.visible,
-            }));
-
-            const event = e as MouseEvent;
-
-            if (event.clientX && event.clientY) {
-              setContextMenuState(prev => ({
-                ...prev,
-                position: {
-                  x: event.clientX - 10,
-                  y: event.clientY - 5,
-                },
-              }));
+            if (
+              onPointerDown &&
+              onDragStart === undefined &&
+              onDragEnd === undefined
+            ) {
+              onPointerDown(item.type, containerType, item);
             }
           }
 
-          if (!isDrag && !isTouch) {
-            console.log('Calling onPointerDown');
-            onPointerDown(item.type, containerType ?? null, item);
-          }
-        }
-
-        setDragState(prev => ({ ...prev, wasDragged: false }));
-        console.log('Final dragState:', dragState);
-      };
-
-      const onDraggableStart: DraggableEventHandler = () => {
-        if (!item || isSelectingShortcut) {
-          return;
-        }
-
-        if (onDragStart && containerType) {
-          onDragStart(item, slotIndex, containerType);
-        }
-
-        setIsDragging(true); // Set dragging flag on start
-      };
-
-      const onDraggableProgress: DraggableEventHandler = (_e, data) => {
-        if (
-          Math.abs(data.x - dragState.position.x) > 5 ||
-          Math.abs(data.y - dragState.position.y) > 5
-        ) {
-          setDragState(prev => ({
-            ...prev,
-            wasDragged: true,
-            isFocused: true,
-          }));
-        }
-
-        if (!draggingItem) {
-          setDraggingItem(item);
-        }
-      };
-
-      const onTouchStartHandler = (e: React.TouchEvent) => {
-        setTouchStartTime(new Date().getTime());
-        setTouchStartPosition({
-          x: e.touches[0].clientX,
-          y: e.touches[0].clientY,
-        });
-      };
-
-      const onTouchEndHandler = (e: React.TouchEvent) => {
-        // Only prevent default if not dragging
-        if (!isDragging) {
-          e.preventDefault();
-        }
-
-        const touch = e.changedTouches[0];
-        const touchEndTime = new Date().getTime();
-        const touchDuration = touchStartTime
-          ? touchEndTime - touchStartTime
-          : 0;
-
-        // Check if it's a short tap (less than 200ms) and hasn't moved much
-        const isShortTap = touchDuration < 200;
-        const hasMovedSignificantly =
-          touchStartPosition &&
-          (Math.abs(touch.clientX - touchStartPosition.x) > 10 ||
-            Math.abs(touch.clientY - touchStartPosition.y) > 10);
+          setTooltipState(prev => ({ ...prev, visible: true }));
+          onMouseOver?.(event, slotIndex, item, clientX, clientY);
+        },
+        [
+          item,
+          containerType,
+          slotIndex,
+          onPlaceDrop,
+          onPointerDown,
+          onMouseOver,
+          onDragStart,
+          onDragEnd,
+        ]
+      );
 
-        if (isShortTap && !hasMovedSignificantly) {
-          // Handle as a tap/click
-          if (item) {
-            setTooltipState(prev => ({
-              ...prev,
-              mobileVisible: true,
-            }));
-            onPointerDown(item.type, containerType ?? null, item);
+      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);
           }
-        } else {
-          // Handle as a drag end
-          const simulatedEvent = new MouseEvent('mouseup', {
-            clientX: touch.clientX,
-            clientY: touch.clientY,
-            bubbles: true,
-          });
-
-          document
-            .elementFromPoint(touch.clientX, touch.clientY)
-            ?.dispatchEvent(simulatedEvent);
-        }
-
-        setIsDragging(false); // Reset dragging flag on touch end
-      };
+        },
+        [onMouseOut]
+      );
 
-      const bounds = getContainerBounds();
       return (
         <Container
           isDraggingItem={!!draggingItem}
           item={item}
           className="rpgui-icon empty-slot"
-          onMouseUp={() => {
+          isSelectingShortcut={
+            isSelectingShortcut &&
+            (item?.type === ItemType.Consumable ||
+              item?.type === ItemType.Tool ||
+              item?.subType === ItemSubType.Seed)
+          }
+          onMouseDown={handleInteraction}
+          onTouchStart={handleInteraction}
+          onMouseUp={e => {
+            handleInteractionEnd(e);
             const data = item ? item : null;
-            if (onPlaceDrop && containerType) {
+            if (onPlaceDrop && containerType && draggingItem) {
               onPlaceDrop(data, slotIndex, containerType);
             }
           }}
+          onTouchEnd={e => {
+            handleInteractionEnd(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
@@ -458,14 +269,7 @@ export const ItemSlot = React.memo(
                     onPointerDown(item.type, containerType ?? null, item);
                 }
           }
-          isSelectingShortcut={
-            isSelectingShortcut &&
-            (item?.type === ItemType.Consumable ||
-              item?.type === ItemType.Tool ||
-              item?.subType === ItemSubType.Seed)
-          }
-          onTouchStart={onTouchStartHandler}
-          onTouchEnd={onTouchEndHandler}
+          onMouseLeave={handleInteractionEnd}
         >
           <Draggable
             axis={isSelectingShortcut ? 'none' : 'both'}
@@ -491,9 +295,7 @@ export const ItemSlot = React.memo(
                   event.clientY
                 );
               }}
-              onMouseOut={() => {
-                if (onMouseOut) onMouseOut();
-              }}
+              onMouseOut={onMouseOut}
               onMouseEnter={() => {
                 setTooltipState(prev => ({ ...prev, visible: true }));
               }}
@@ -595,6 +397,5 @@ const ItemContainer = styled.div<{ isFocused?: boolean }>`
   height: 64px;
 
   position: relative;
-  ${({ isFocused }) =>
-    isFocused ? 'z-index: 100; pointer-events: none;' : ''};
+  ${props => props.isFocused && 'z-index: 100; pointer-events: none;'};
 `;