@rpg-engine/long-bow 0.7.52 → 0.7.60

package/src/components/Item/Inventory/hooks/useItemSlotDragAndDrop.ts

@@ -0,0 +1,226 @@
+import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { DraggableEventHandler } from 'react-draggable';
+import { useDragging } from '../context/DraggingContext';
+import { ContextMenuState, DragState, TooltipState } from '../ItemSlot';
+
+interface IUseItemSlotDragAndDrop {
+  isDepotSystem: boolean;
+  item: IItem;
+  onDrop: (item: IItem, dropPosition: { x: number; y: number }) => void;
+  onDragEnd?: (quantity?: number) => void;
+  checkIfItemCanBeMoved?: () => boolean;
+  checkIfItemShouldDragEnd?: () => boolean;
+  setItemShortcut?: (item: IItem, index: number) => void;
+  isSelectingShortcut?: boolean;
+  onDragStart?: (
+    item: IItem,
+    slotIndex: number,
+    containerType: ItemContainerType
+  ) => void;
+  onPointerDown: (
+    ItemType: ItemType,
+    itemContainerType: ItemContainerType | null,
+    item: IItem
+  ) => void;
+  containerType: ItemContainerType;
+  slotIndex: number;
+  openQuantitySelector: (
+    quantity: number,
+    onSuccess: (quantity?: number) => void
+  ) => void;
+  isContextMenuDisabled: boolean;
+  setTooltipState: React.Dispatch<React.SetStateAction<TooltipState>>;
+  setContextMenuState: React.Dispatch<React.SetStateAction<ContextMenuState>>;
+  contextMenuState: ContextMenuState;
+}
+
+export const useItemSlotDragAndDrop = ({
+  isDepotSystem,
+  item,
+  onDrop,
+  onDragEnd,
+  checkIfItemCanBeMoved,
+  checkIfItemShouldDragEnd,
+  setItemShortcut,
+  isSelectingShortcut,
+  onDragStart,
+  onPointerDown,
+  containerType,
+  slotIndex,
+  openQuantitySelector,
+  isContextMenuDisabled,
+  setTooltipState,
+  setContextMenuState,
+}: IUseItemSlotDragAndDrop) => {
+  const dragContainer = useRef<HTMLDivElement>(null);
+  const { item: draggingItem, setDraggingItem } = useDragging();
+
+  const [dragState, setDragState] = useState<DragState>({
+    isFocused: false,
+    wasDragged: false,
+    position: { x: 0, y: 0 },
+    dropPosition: null,
+  });
+
+  useEffect(() => {
+    setDragState(prev => ({
+      ...prev,
+      position: { x: 0, y: 0 },
+      isFocused: false,
+    }));
+  }, [item, isDepotSystem]);
+
+  useEffect(() => {
+    if (onDrop && item && dragState.dropPosition) {
+      onDrop(item, dragState.dropPosition);
+      setDragState(prev => ({ ...prev, dropPosition: null }));
+    }
+  }, [dragState.dropPosition, item, onDrop]);
+
+  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,
+    };
+  }, []);
+
+  const resetDragState = useCallback(() => {
+    setTooltipState(prev => ({ ...prev, visible: false }));
+    setDragState(prev => ({
+      ...prev,
+      wasDragged: false,
+      isFocused: false,
+      position: { x: 0, y: 0 },
+    }));
+  }, [setTooltipState]);
+
+  const handleSuccessfulDrag = useCallback(
+    (quantity?: number) => {
+      resetDragState();
+      if (quantity !== -1 && item) {
+        onDragEnd?.(quantity);
+      }
+    },
+    [item, onDragEnd, resetDragState]
+  );
+
+  const onDraggableStart: DraggableEventHandler = useCallback(() => {
+    if (!item || isSelectingShortcut) return;
+    if (onDragStart && containerType) {
+      onDragStart(item, slotIndex, containerType);
+    }
+  }, [item, isSelectingShortcut, onDragStart, containerType, slotIndex]);
+
+  const onDraggableProgress: DraggableEventHandler = useCallback(
+    (_e, data) => {
+      const { x, y } = dragState.position;
+      if (Math.abs(data.x - x) > 5 || Math.abs(data.y - y) > 5) {
+        setDragState(prev => ({ ...prev, wasDragged: true, isFocused: true }));
+      }
+      if (!draggingItem) {
+        setDraggingItem(item);
+      }
+    },
+    [dragState.position, draggingItem, item, setDraggingItem]
+  );
+
+  const onDraggableStop: DraggableEventHandler = useCallback(
+    (e, data) => {
+      setTimeout(() => {
+        setDraggingItem(null);
+      }, 50);
+      const target = e.target as HTMLElement;
+      if (!target) return;
+
+      target.classList.remove('react-draggable-dragging');
+
+      if (target?.id.includes('shortcutSetter') && setItemShortcut && item) {
+        const index = parseInt(target.id.split('_')[1]);
+        if (!isNaN(index)) {
+          setItemShortcut(item, index);
+        }
+      }
+
+      if (dragState.wasDragged && item && !isSelectingShortcut) {
+        const classes: string[] = Array.from(target.classList);
+        const isOutsideDrop =
+          classes.some(elm => elm.includes('rpgui-content')) ||
+          classes.length === 0;
+
+        if (isOutsideDrop) {
+          setDragState(prev => ({
+            ...prev,
+            dropPosition: { x: data.x, y: data.y },
+          }));
+        }
+
+        setDragState(prev => ({ ...prev, wasDragged: false }));
+
+        setTimeout(() => {
+          if (
+            checkIfItemCanBeMoved?.() &&
+            (!checkIfItemShouldDragEnd || checkIfItemShouldDragEnd())
+          ) {
+            if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) {
+              openQuantitySelector(item.stackQty, handleSuccessfulDrag);
+            } else {
+              handleSuccessfulDrag(item.stackQty);
+            }
+          } else {
+            resetDragState();
+          }
+        }, 50);
+      } else if (item) {
+        const isTouch = e.type === 'touchend';
+        if (!isContextMenuDisabled && isTouch && !isSelectingShortcut) {
+          setTooltipState(prev => ({ ...prev, mobileVisible: true }));
+        } else if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
+          const event = e as MouseEvent;
+          setContextMenuState(prev => ({
+            visible: !prev.visible,
+            position: {
+              x: event.clientX - 10,
+              y: event.clientY - 5,
+            },
+          }));
+        }
+
+        onPointerDown?.(item.type, containerType ?? null, item);
+      }
+    },
+    [
+      dragState.wasDragged,
+      item,
+      isSelectingShortcut,
+      checkIfItemCanBeMoved,
+      checkIfItemShouldDragEnd,
+      openQuantitySelector,
+      handleSuccessfulDrag,
+      resetDragState,
+      isContextMenuDisabled,
+      setTooltipState,
+      setContextMenuState,
+      onPointerDown,
+      containerType,
+      setItemShortcut,
+    ]
+  );
+
+  return {
+    dragContainer,
+    dragState,
+    draggingItem,
+    setDraggingItem,
+    getContainerBounds,
+    onDraggableStart,
+    onDraggableProgress,
+    onDraggableStop,
+    resetItem: resetDragState,
+  };
+};