@rpg-engine/long-bow 0.7.70 → 0.7.71

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

@@ -1,248 +0,0 @@
-import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
-import { useCallback, useEffect, useRef } from 'react';
-import { DraggableEventHandler } from 'react-draggable';
-import { useItemSlotDragging } from '../context/ItemSlotDraggingContext';
-import { useItemSlotTooltip } from '../context/ItemSlotTooltipContext';
-
-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;
-}
-
-export const useItemSlotDragAndDrop = ({
-  isDepotSystem,
-  item,
-  onDrop,
-  onDragEnd,
-  checkIfItemCanBeMoved,
-  checkIfItemShouldDragEnd,
-  setItemShortcut,
-  isSelectingShortcut,
-  onDragStart,
-  onPointerDown,
-  containerType,
-  slotIndex,
-  openQuantitySelector,
-  isContextMenuDisabled,
-}: IUseItemSlotDragAndDrop) => {
-  const dragContainer = useRef<HTMLDivElement>(null);
-  const {
-    item: draggingItem,
-    setDraggingItem,
-    dragState,
-    setDragState,
-  } = useItemSlotDragging();
-
-  const { updateItemDetails, itemDetails } = useItemSlotTooltip();
-
-  useEffect(() => {
-    setDragState(prev => ({
-      ...prev,
-      position: { x: 0, y: 0 },
-      isFocused: false,
-    }));
-  }, [item, isDepotSystem, setDragState]);
-
-  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(() => {
-    console.log('RESET_DRAG_STATE!');
-    setDragState(prev => ({
-      ...prev,
-      wasDragged: false,
-      isFocused: false,
-      position: { x: 0, y: 0 },
-    }));
-    setDraggingItem(null);
-
-    // Reset tooltip visibility
-    updateItemDetails({
-      tooltip: { visible: false, mobileVisible: false },
-    });
-  }, [updateItemDetails, setDragState]);
-
-  const handleSuccessfulDrag = useCallback(
-    (quantity?: number) => {
-      console.log('HANDLE_SUCCESSFUL_DRAG!');
-      resetDragState();
-      if (quantity !== -1 && item) {
-        onDragEnd?.(quantity);
-      }
-    },
-    [item, onDragEnd, resetDragState]
-  );
-
-  const onDraggableStart: DraggableEventHandler = useCallback(() => {
-    console.log('ON_DRAGGABLE_START!');
-    if (!item || isSelectingShortcut) return;
-    if (onDragStart && containerType) {
-      onDragStart(item, slotIndex, containerType);
-    }
-
-    if (!draggingItem && item) {
-      console.log('!!! SETTING DRAGGING ITEM ', item._id);
-      setDraggingItem(item);
-    }
-  }, [item, isSelectingShortcut, onDragStart, containerType, slotIndex]);
-
-  const onDraggableProgress: DraggableEventHandler = useCallback(
-    (_e, data) => {
-      console.log('ON_DRAGGABLE_PROGRESS!');
-      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 }));
-      }
-    },
-    [dragState.position, draggingItem, item, setDraggingItem, setDragState]
-  );
-
-  const onDraggableStop: DraggableEventHandler = useCallback(
-    (e, data) => {
-      console.log('ON_DRAGGABLE_STOP!');
-
-      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';
-
-        console.log(`Debug: 
-          isTouch: ${isTouch},
-          isSelectingShortcut: ${isSelectingShortcut},
-          draggingItem: ${draggingItem},
-          dragginState: ${JSON.stringify(dragState)}
-        `);
-
-        if (!isContextMenuDisabled && isTouch && !isSelectingShortcut) {
-          updateItemDetails({
-            item,
-            tooltip: { mobileVisible: true },
-          });
-        } else if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
-          const event = e as MouseEvent;
-
-          updateItemDetails({
-            item,
-            contextMenu: {
-              visible: !itemDetails?.contextMenu?.visible,
-              position: {
-                x: event.clientX - 10,
-                y: event.clientY - 5,
-              },
-            },
-          });
-        }
-
-        onPointerDown?.(item.type, containerType ?? null, item);
-      }
-
-      console.log('setting draggingItem to null');
-      setDraggingItem(null);
-    },
-    [
-      dragState.wasDragged,
-      item,
-      isSelectingShortcut,
-      checkIfItemCanBeMoved,
-      checkIfItemShouldDragEnd,
-      openQuantitySelector,
-      handleSuccessfulDrag,
-      resetDragState,
-      isContextMenuDisabled,
-      onPointerDown,
-      containerType,
-      setItemShortcut,
-    ]
-  );
-
-  return {
-    dragContainer,
-    dragState,
-    draggingItem,
-    setDraggingItem,
-    getContainerBounds,
-    onDraggableStart,
-    onDraggableProgress,
-    onDraggableStop,
-    resetItem: resetDragState,
-  };
-};