@rpg-engine/long-bow 0.7.68 → 0.7.71

package/dist/long-bow.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, Component, useRef, useContext, createContext, useCallback, useMemo, Fragment } from 'react';
+import React, { useState, useEffect, Component, useRef, useContext, createContext, useMemo, useCallback, Fragment } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import { BeatLoader } from 'react-spinners';
 import { v4 } from 'uuid';
@@ -27650,293 +27650,76 @@ var Option = /*#__PURE__*/styled.button.withConfig({
 })(["padding:1rem;background-color:#333;color:white;border:none;border-radius:3px;width:8rem;transition:background-color 0.1s;&:hover{background-color:#555;}@media (max-width:640px){padding:1rem 0.5rem;}"]);
 
 var ItemSlotToolTips = function ItemSlotToolTips(_ref) {
-  var tooltipState = _ref.tooltipState,
-    setTooltipState = _ref.setTooltipState,
-    contextMenuState = _ref.contextMenuState,
-    setContextMenuState = _ref.setContextMenuState,
+  var isTooltipVisible = _ref.isTooltipVisible,
     isFocused = _ref.isFocused,
+    isContextMenuVisible = _ref.isContextMenuVisible,
     isContextMenuDisabled = _ref.isContextMenuDisabled,
     item = _ref.item,
     contextActions = _ref.contextActions,
+    contextMenuPosition = _ref.contextMenuPosition,
     dragScale = _ref.dragScale,
+    setIsContextMenuVisible = _ref.setIsContextMenuVisible,
+    setIsTooltipMobileVisible = _ref.setIsTooltipMobileVisible,
+    isTooltipMobileVisible = _ref.isTooltipMobileVisible,
     _onSelected = _ref.onSelected,
     atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
     equipmentSet = _ref.equipmentSet;
-  return React.createElement(React.Fragment, null, tooltipState.visible && item && !isFocused && React.createElement(ItemTooltip, {
+  return React.createElement(React.Fragment, null, isTooltipVisible && item && !isFocused && React.createElement(ItemTooltip, {
     item: item,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet
-  }), tooltipState.mobileVisible && item && React.createElement(MobileItemTooltip, {
+  }), isTooltipMobileVisible && item && React.createElement(MobileItemTooltip, {
     item: item,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet,
     closeTooltip: function closeTooltip() {
-      setTooltipState(function (prev) {
-        return _extends({}, prev, {
-          mobileVisible: false
-        });
-      });
+      setIsTooltipMobileVisible(false);
     },
     scale: dragScale,
     options: contextActions,
     onSelected: function onSelected(optionId) {
-      setContextMenuState(function (prev) {
-        return _extends({}, prev, {
-          visible: false
-        });
-      });
+      setIsContextMenuVisible(false);
       if (item) {
         _onSelected == null ? void 0 : _onSelected(optionId, item);
       }
     }
-  }), !isContextMenuDisabled && contextMenuState.visible && contextActions && React.createElement(RelativeListMenu, {
+  }), !isContextMenuDisabled && isContextMenuVisible && contextActions && React.createElement(RelativeListMenu, {
     options: contextActions,
     onSelected: function onSelected(optionId) {
-      setContextMenuState(function (prev) {
-        return _extends({}, prev, {
-          visible: false
-        });
-      });
+      setIsContextMenuVisible(false);
       if (item) {
         _onSelected == null ? void 0 : _onSelected(optionId, item);
       }
     },
     onOutsideClick: function onOutsideClick() {
-      setContextMenuState(function (prev) {
-        return _extends({}, prev, {
-          visible: false
-        });
-      });
+      setIsContextMenuVisible(false);
     },
-    pos: contextMenuState.position
+    pos: contextMenuPosition
   }));
 };
 
 var DraggingContext = /*#__PURE__*/createContext({
   item: null,
-  setDraggingItem: function setDraggingItem() {},
-  dragState: {
-    isFocused: false,
-    wasDragged: false,
-    position: {
-      x: 0,
-      y: 0
-    },
-    dropPosition: null
-  },
-  setDragState: function setDragState() {}
+  setDraggingItem: function setDraggingItem() {}
 });
+var useDragging = function useDragging() {
+  return useContext(DraggingContext);
+};
 var DraggingProvider = function DraggingProvider(_ref) {
   var children = _ref.children;
   var _useState = useState(null),
     item = _useState[0],
     setDraggingItem = _useState[1];
-  var _useState2 = useState({
-      isFocused: false,
-      wasDragged: false,
-      position: {
-        x: 0,
-        y: 0
-      },
-      dropPosition: null
-    }),
-    dragState = _useState2[0],
-    setDragState = _useState2[1];
   return React.createElement(DraggingContext.Provider, {
     value: {
       item: item,
-      setDraggingItem: setDraggingItem,
-      dragState: dragState,
-      setDragState: setDragState
+      setDraggingItem: setDraggingItem
     }
   }, children);
 };
-var useDragging = function useDragging() {
-  return useContext(DraggingContext);
-};
-
-var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
-  var isDepotSystem = _ref.isDepotSystem,
-    item = _ref.item,
-    onDrop = _ref.onDrop,
-    onDragEnd = _ref.onDragEnd,
-    checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
-    checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
-    setItemShortcut = _ref.setItemShortcut,
-    isSelectingShortcut = _ref.isSelectingShortcut,
-    onDragStart = _ref.onDragStart,
-    onPointerDown = _ref.onPointerDown,
-    containerType = _ref.containerType,
-    slotIndex = _ref.slotIndex,
-    openQuantitySelector = _ref.openQuantitySelector,
-    isContextMenuDisabled = _ref.isContextMenuDisabled,
-    setTooltipState = _ref.setTooltipState,
-    setContextMenuState = _ref.setContextMenuState;
-  var dragContainer = useRef(null);
-  var _useDragging = useDragging(),
-    draggingItem = _useDragging.item,
-    setDraggingItem = _useDragging.setDraggingItem,
-    dragState = _useDragging.dragState,
-    setDragState = _useDragging.setDragState;
-  useEffect(function () {
-    setDragState(function (prev) {
-      return _extends({}, prev, {
-        position: {
-          x: 0,
-          y: 0
-        },
-        isFocused: false
-      });
-    });
-  }, [item, isDepotSystem, setDragState]);
-  useEffect(function () {
-    if (onDrop && item && dragState.dropPosition) {
-      onDrop(item, dragState.dropPosition);
-      setDragState(function (prev) {
-        return _extends({}, prev, {
-          dropPosition: null
-        });
-      });
-    }
-  }, [dragState.dropPosition, item, onDrop]);
-  var getContainerBounds = useCallback(function () {
-    var container = dragContainer.current;
-    if (!container) return {
-      left: 0,
-      top: 0,
-      right: 0,
-      bottom: 0
-    };
-    var rect = container.getBoundingClientRect();
-    return {
-      left: rect.left,
-      top: rect.top,
-      right: window.innerWidth - rect.right,
-      bottom: window.innerHeight - rect.bottom
-    };
-  }, []);
-  var resetDragState = useCallback(function () {
-    setDragState(function (prev) {
-      return _extends({}, prev, {
-        wasDragged: false,
-        isFocused: false,
-        position: {
-          x: 0,
-          y: 0
-        }
-      });
-    });
-  }, [setTooltipState, setDragState]);
-  var handleSuccessfulDrag = useCallback(function (quantity) {
-    resetDragState();
-    if (quantity !== -1 && item) {
-      onDragEnd == null ? void 0 : onDragEnd(quantity);
-    }
-  }, [item, onDragEnd, resetDragState]);
-  var onDraggableStart = useCallback(function () {
-    if (!item || isSelectingShortcut) return;
-    if (onDragStart && containerType) {
-      onDragStart(item, slotIndex, containerType);
-    }
-  }, [item, isSelectingShortcut, onDragStart, containerType, slotIndex]);
-  var onDraggableProgress = useCallback(function (_e, data) {
-    var _dragState$position = dragState.position,
-      x = _dragState$position.x,
-      y = _dragState$position.y;
-    if (Math.abs(data.x - x) > 5 || Math.abs(data.y - y) > 5) {
-      setDragState(function (prev) {
-        return _extends({}, prev, {
-          wasDragged: true,
-          isFocused: true
-        });
-      });
-    }
-    if (!draggingItem) {
-      setDraggingItem(item);
-    }
-  }, [dragState.position, draggingItem, item, setDraggingItem, setDragState]);
-  var onDraggableStop = useCallback(function (e, data) {
-    setTimeout(function () {
-      setDraggingItem(null);
-    }, 50);
-    var target = e.target;
-    if (!target) return;
-    target.classList.remove('react-draggable-dragging');
-    if (target != null && target.id.includes('shortcutSetter') && setItemShortcut && item) {
-      var index = parseInt(target.id.split('_')[1]);
-      if (!isNaN(index)) {
-        setItemShortcut(item, index);
-      }
-    }
-    if (dragState.wasDragged && item && !isSelectingShortcut) {
-      var classes = Array.from(target.classList);
-      var isOutsideDrop = classes.some(function (elm) {
-        return elm.includes('rpgui-content');
-      }) || classes.length === 0;
-      if (isOutsideDrop) {
-        setDragState(function (prev) {
-          return _extends({}, prev, {
-            dropPosition: {
-              x: data.x,
-              y: data.y
-            }
-          });
-        });
-      }
-      setDragState(function (prev) {
-        return _extends({}, prev, {
-          wasDragged: false
-        });
-      });
-      setTimeout(function () {
-        if (checkIfItemCanBeMoved != null && checkIfItemCanBeMoved() && (!checkIfItemShouldDragEnd || checkIfItemShouldDragEnd())) {
-          if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) {
-            openQuantitySelector(item.stackQty, handleSuccessfulDrag);
-          } else {
-            handleSuccessfulDrag(item.stackQty);
-          }
-        } else {
-          resetDragState();
-        }
-      }, 50);
-    } else if (item) {
-      var isTouch = e.type === 'touchend';
-      if (!isContextMenuDisabled && isTouch && !isSelectingShortcut && !draggingItem) {
-        setTooltipState(function (prev) {
-          return _extends({}, prev, {
-            mobileVisible: true
-          });
-        });
-      } else if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
-        var event = e;
-        setContextMenuState(function (prev) {
-          return {
-            visible: !prev.visible,
-            position: {
-              x: event.clientX - 10,
-              y: event.clientY - 5
-            }
-          };
-        });
-      }
-      onPointerDown == null ? void 0 : onPointerDown(item.type, containerType != null ? containerType : null, item);
-    }
-  }, [dragState.wasDragged, item, isSelectingShortcut, checkIfItemCanBeMoved, checkIfItemShouldDragEnd, openQuantitySelector, handleSuccessfulDrag, resetDragState, isContextMenuDisabled, setTooltipState, setContextMenuState, onPointerDown, containerType, setItemShortcut]);
-  return {
-    dragContainer: dragContainer,
-    dragState: dragState,
-    draggingItem: draggingItem,
-    setDraggingItem: setDraggingItem,
-    getContainerBounds: getContainerBounds,
-    onDraggableStart: onDraggableStart,
-    onDraggableProgress: onDraggableProgress,
-    onDraggableStop: onDraggableStop,
-    resetItem: resetDragState
-  };
-};
 
 var generateContextMenuListOptions = function generateContextMenuListOptions(actionsByTypeList) {
   var contextMenu = actionsByTypeList.map(function (action) {
@@ -28075,13 +27858,13 @@ var EquipmentSlotSpriteByType = {
   RightHand: 'shields/plate-shield.png',
   Accessory: 'ranged-weapons/arrow.png'
 };
-var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
+var ItemSlot = /*#__PURE__*/observer(function (_ref) {
   var slotIndex = _ref.slotIndex,
     item = _ref.item,
     containerType = _ref.itemContainerType,
     slotSpriteMask = _ref.slotSpriteMask,
     _onMouseOver = _ref.onMouseOver,
-    onMouseOut = _ref.onMouseOut,
+    _onMouseOut = _ref.onMouseOut,
     onPointerDown = _ref.onPointerDown,
     _onSelected = _ref.onSelected,
     atlasJSON = _ref.atlasJSON,
@@ -28094,118 +27877,292 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
     onDrop = _ref.onOutsideDrop,
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
     openQuantitySelector = _ref.openQuantitySelector,
+    checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
     dragScale = _ref.dragScale,
     isSelectingShortcut = _ref.isSelectingShortcut,
     equipmentSet = _ref.equipmentSet,
     setItemShortcut = _ref.setItemShortcut,
     isDepotSystem = _ref.isDepotSystem;
+  // Centralized state using a single useState hook
   var _useState = useState({
-      visible: false,
-      mobileVisible: false
-    }),
-    tooltipState = _useState[0],
-    setTooltipState = _useState[1];
-  var _useState2 = useState({
-      visible: false,
-      position: {
+      isTooltipVisible: false,
+      isTooltipMobileVisible: false,
+      isContextMenuVisible: false,
+      contextMenuPosition: {
         x: 0,
         y: 0
-      }
-    }),
-    contextMenuState = _useState2[0],
-    setContextMenuState = _useState2[1];
-  var _useState3 = useState([]),
-    contextActions = _useState3[0],
-    setContextActions = _useState3[1];
-  var _useItemSlotDragAndDr = useItemSlotDragAndDrop({
-      isDepotSystem: !!isDepotSystem,
-      item: item,
-      onDrop: onDrop != null ? onDrop : function () {},
-      onDragEnd: onDragEnd,
-      checkIfItemCanBeMoved: checkIfItemCanBeMoved,
-      setItemShortcut: setItemShortcut,
-      isSelectingShortcut: isSelectingShortcut,
-      onDragStart: onDragStart,
-      onPointerDown: onPointerDown,
-      containerType: containerType,
-      slotIndex: slotIndex,
-      openQuantitySelector: openQuantitySelector != null ? openQuantitySelector : function () {},
-      isContextMenuDisabled: isContextMenuDisabled,
-      setTooltipState: setTooltipState,
-      contextMenuState: contextMenuState,
-      setContextMenuState: setContextMenuState
+      },
+      isFocused: false,
+      wasDragged: false,
+      dragPosition: {
+        x: 0,
+        y: 0
+      },
+      dropPosition: null,
+      contextActions: [],
+      draggingDistance: 0
     }),
-    dragContainer = _useItemSlotDragAndDr.dragContainer,
-    dragState = _useItemSlotDragAndDr.dragState,
-    draggingItem = _useItemSlotDragAndDr.draggingItem,
-    getContainerBounds = _useItemSlotDragAndDr.getContainerBounds,
-    onDraggableStart = _useItemSlotDragAndDr.onDraggableStart,
-    onDraggableProgress = _useItemSlotDragAndDr.onDraggableProgress,
-    onDraggableStop = _useItemSlotDragAndDr.onDraggableStop;
+    state = _useState[0],
+    setState = _useState[1];
+  var isTooltipVisible = state.isTooltipVisible,
+    isTooltipMobileVisible = state.isTooltipMobileVisible,
+    isContextMenuVisible = state.isContextMenuVisible,
+    contextMenuPosition = state.contextMenuPosition,
+    isFocused = state.isFocused,
+    wasDragged = state.wasDragged,
+    dragPosition = state.dragPosition,
+    dropPosition = state.dropPosition,
+    contextActions = state.contextActions;
+  var dragContainer = useRef(null);
+  var _useDragging = useDragging(),
+    draggingItem = _useDragging.item,
+    setDraggingItem = _useDragging.setDraggingItem;
   useEffect(function () {
+    // Reset drag position and focus when item changes
+    setState(function (prevState) {
+      return _extends({}, prevState, {
+        dragPosition: {
+          x: 0,
+          y: 0
+        },
+        isFocused: false
+      });
+    });
+    // Update context actions when item or depot system changes
     if (item && containerType) {
-      setContextActions(generateContextMenu(item, containerType, isDepotSystem));
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          contextActions: generateContextMenu(item, containerType, isDepotSystem)
+        });
+      });
+    } else {
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          contextActions: []
+        });
+      });
     }
   }, [item, isDepotSystem]);
-  var bounds = getContainerBounds();
-  var handleInteraction = useCallback(function (event) {
-    event.stopPropagation();
-    var _ref2 = 'touches' in event ? event.touches[0] : event,
-      clientX = _ref2.clientX,
-      clientY = _ref2.clientY;
-    if (item && containerType) {
-      if (onPlaceDrop && draggingItem) {
-        onPlaceDrop(item, slotIndex, containerType);
-      }
-      if (onPointerDown && onDragStart === undefined && onDragEnd === undefined) {
-        onPointerDown(item.type, containerType, item);
+  useEffect(function () {
+    // Handle outside drop
+    if (onDrop && item && dropPosition) {
+      onDrop(item, dropPosition);
+    }
+  }, [dropPosition]);
+  var resetItem = function resetItem() {
+    setState(function (prevState) {
+      return _extends({}, prevState, {
+        isTooltipVisible: false,
+        wasDragged: false
+      });
+    });
+  };
+  var onSuccessfulDrag = function onSuccessfulDrag(quantity) {
+    resetItem();
+    if (quantity === -1) {
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          dragPosition: {
+            x: 0,
+            y: 0
+          },
+          isFocused: false
+        });
+      });
+    } else if (item) {
+      onDragEnd == null ? void 0 : onDragEnd(quantity);
+    }
+  };
+  var onDraggableStop = function onDraggableStop(e, data) {
+    console.log('>>> ON_DRAGGABLE_STOP');
+    // Stop the dragging state
+    console.log('setDraggingItem(null)');
+    setDraggingItem(null);
+    var target = e.target;
+    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.
+   */
+  var handleShortcutSetter = function handleShortcutSetter(target) {
+    if (target != null && target.id.includes('shortcutSetter') && setItemShortcut && item) {
+      var index = parseInt(target.id.split('_')[1], 10);
+      if (!isNaN(index)) {
+        setItemShortcut(item, index);
       }
     }
-    setTooltipState(function (prev) {
-      return _extends({}, prev, {
-        visible: true
+  };
+  /**
+   * Removes the dragging CSS class from the target element.
+   */
+  var removeDraggingClass = function removeDraggingClass(target) {
+    target.classList.remove('react-draggable-dragging');
+  };
+  /**
+   * Determines whether the dragged item should be processed.
+   */
+  var shouldHandleDraggedItem = function shouldHandleDraggedItem() {
+    console.log("Debug: shouldHandleDraggedItem()", "wasDragged: " + wasDragged, "item: " + item, "isSelectingShortcut: " + isSelectingShortcut);
+    return !!(wasDragged && item && !isSelectingShortcut);
+  };
+  /**
+   * Handles the logic when an item has been dragged.
+   */
+  var handleDraggedItem = function handleDraggedItem(e, data) {
+    var targetClasses = Array.from(e.target.classList);
+    var isOutsideDrop = targetClasses.some(function (elm) {
+      return elm.includes('rpgui-content');
+    }) || targetClasses.length === 0;
+    if (isOutsideDrop) {
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          dropPosition: {
+            x: data.x,
+            y: data.y
+          }
+        });
+      });
+    }
+    setState(function (prevState) {
+      return _extends({}, prevState, {
+        wasDragged: false
       });
     });
-    _onMouseOver == null ? void 0 : _onMouseOver(event, slotIndex, item, clientX, clientY);
-  }, [item, containerType, slotIndex, onPlaceDrop, onPointerDown, _onMouseOver, onDragStart, onDragEnd]);
-  var handleInteractionEnd = useCallback(function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-    setTooltipState(function (prev) {
-      return _extends({}, prev, {
-        visible: false
+    var targetElement = dragContainer.current;
+    if (!targetElement) return;
+    var _getElementTransform = getElementTransform(targetElement),
+      x = _getElementTransform.x,
+      y = _getElementTransform.y;
+    setState(function (prevState) {
+      return _extends({}, prevState, {
+        dragPosition: {
+          x: x,
+          y: y
+        }
       });
     });
-    onMouseOut == null ? void 0 : onMouseOut();
-    if (event.type === 'touchend' && 'changedTouches' in event) {
-      var _document$elementFrom;
-      var _event$changedTouches = event.changedTouches[0],
-        clientX = _event$changedTouches.clientX,
-        clientY = _event$changedTouches.clientY;
-      var simulatedEvent = new MouseEvent('mouseup', {
-        clientX: clientX,
-        clientY: clientY,
-        bubbles: true
+    // Delay to ensure state updates before proceeding
+    setTimeout(function () {
+      processDragEnd(item);
+    }, 50);
+  };
+  /**
+   * Retrieves the current transform position of the dragged element.
+   */
+  var getElementTransform = function getElementTransform(element) {
+    var style = window.getComputedStyle(element);
+    var 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.
+   */
+  var processDragEnd = function processDragEnd(item) {
+    console.log("Debug: processDragEnd(item)", "item: " + item);
+    if (checkIfItemCanBeMoved != null && checkIfItemCanBeMoved()) {
+      console.log("Debug: checkIfItemCanBeMoved()", "result: " + checkIfItemCanBeMoved());
+      if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) return;
+      console.log("Debug: checkIfItemShouldDragEnd()", "result: " + (checkIfItemShouldDragEnd == null ? void 0 : 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(function (prevState) {
+        return _extends({}, prevState, {
+          isFocused: false,
+          dragPosition: {
+            x: 0,
+            y: 0
+          }
+        });
       });
-      (_document$elementFrom = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _document$elementFrom.dispatchEvent(simulatedEvent);
     }
-  }, [onMouseOut]);
+  };
+  /**
+   * Handles the context menu or tooltip display after dragging stops without a drop.
+   */
+  var handleContextMenuOrTooltip = function handleContextMenuOrTooltip(e) {
+    var isTouchEvent = false;
+    if (!isContextMenuDisabled && e.type === 'touchend' && !isSelectingShortcut) {
+      isTouchEvent = true;
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          isTooltipMobileVisible: true
+        });
+      });
+    }
+    if (!isContextMenuDisabled && !isSelectingShortcut && !isTouchEvent) {
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          isContextMenuVisible: !prevState.isContextMenuVisible,
+          contextMenuPosition: {
+            x: e.clientX - 10,
+            y: e.clientY - 5
+          }
+        });
+      });
+    }
+    if (item) {
+      onPointerDown(item.type, containerType != null ? containerType : null, item);
+    }
+  };
+  var onDraggableStart = function onDraggableStart() {
+    if (!item || isSelectingShortcut) {
+      return;
+    }
+    if (onDragStart && containerType) {
+      onDragStart(item, slotIndex, containerType);
+    }
+  };
+  var onDraggableProgress = function onDraggableProgress(_e, _data) {
+    // increment draggingDistance by 1
+    setState(function (prevState) {
+      return _extends({}, prevState, {
+        draggingDistance: prevState.draggingDistance + 1
+      });
+    });
+    if (state.draggingDistance > 10) {
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          wasDragged: true,
+          isFocused: true
+        });
+      });
+    }
+    if (!draggingItem) {
+      setDraggingItem(item);
+    }
+  };
   return React.createElement(Container$b, {
     isDraggingItem: !!draggingItem,
     item: item,
     className: "rpgui-icon empty-slot",
-    isSelectingShortcut: isSelectingShortcut && ((item == null ? void 0 : item.type) === ItemType.Consumable || (item == null ? void 0 : item.type) === ItemType.Tool || (item == null ? void 0 : item.subType) === ItemSubType.Seed),
-    onMouseDown: handleInteraction,
-    onTouchStart: handleInteraction,
-    onMouseUp: function onMouseUp(e) {
-      handleInteractionEnd(e);
+    onMouseUp: function onMouseUp() {
       var data = item ? item : null;
-      if (onPlaceDrop && containerType && draggingItem) {
-        onPlaceDrop(data, slotIndex, containerType);
-      }
+      if (onPlaceDrop && containerType) onPlaceDrop(data, slotIndex, containerType);
     },
     onTouchEnd: function onTouchEnd(e) {
-      var _document$elementFrom2;
+      var _document$elementFrom;
       var _e$changedTouches$ = e.changedTouches[0],
         clientX = _e$changedTouches$.clientX,
         clientY = _e$changedTouches$.clientY;
@@ -28214,12 +28171,12 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
         clientY: clientY,
         bubbles: true
       });
-      (_document$elementFrom2 = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _document$elementFrom2.dispatchEvent(simulatedEvent);
+      (_document$elementFrom = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _document$elementFrom.dispatchEvent(simulatedEvent);
     },
     onPointerDown: onDragStart !== undefined && onDragEnd !== undefined ? undefined : function () {
       if (item) onPointerDown(item.type, containerType != null ? containerType : null, item);
     },
-    onMouseLeave: handleInteractionEnd
+    isSelectingShortcut: isSelectingShortcut && ((item == null ? void 0 : item.type) === ItemType.Consumable || (item == null ? void 0 : item.type) === ItemType.Tool || (item == null ? void 0 : item.subType) === ItemSubType.Seed)
   }, React.createElement(Draggable, {
     axis: isSelectingShortcut ? 'none' : 'both',
     defaultClassName: item ? 'draggable' : 'empty-slot',
@@ -28228,27 +28185,29 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
     onStop: onDraggableStop,
     onStart: onDraggableStart,
     onDrag: onDraggableProgress,
-    position: dragState.position,
+    position: dragPosition,
     cancel: ".empty-slot",
-    bounds: bounds
+    bounds: ".item-container-body, .equipment-container-body"
   }, React.createElement(ItemContainer, {
     ref: dragContainer,
-    isFocused: dragState.isFocused,
+    isFocused: isFocused,
     onMouseOver: function onMouseOver(event) {
       _onMouseOver == null ? void 0 : _onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
     },
-    onMouseOut: onMouseOut,
+    onMouseOut: function onMouseOut() {
+      if (_onMouseOut) _onMouseOut();
+    },
     onMouseEnter: function onMouseEnter() {
-      setTooltipState(function (prev) {
-        return _extends({}, prev, {
-          visible: true
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          isTooltipVisible: true
         });
       });
     },
     onMouseLeave: function onMouseLeave() {
-      setTooltipState(function (prev) {
-        return _extends({}, prev, {
-          visible: false
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          isTooltipVisible: false
         });
       });
     }
@@ -28259,45 +28218,66 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
     atlasJSON: atlasJSON,
     containerType: containerType
   }))), React.createElement(ItemSlotToolTips, {
-    tooltipState: tooltipState,
-    setTooltipState: setTooltipState,
-    contextMenuState: contextMenuState,
-    setContextMenuState: setContextMenuState,
-    isFocused: dragState.isFocused,
+    isTooltipVisible: isTooltipVisible,
+    isTooltipMobileVisible: isTooltipMobileVisible,
+    setIsTooltipMobileVisible: function setIsTooltipMobileVisible(value) {
+      return setState(function (prevState) {
+        return _extends({}, prevState, {
+          isTooltipMobileVisible: value
+        });
+      });
+    },
+    isFocused: isFocused,
+    isContextMenuVisible: isContextMenuVisible,
     isContextMenuDisabled: isContextMenuDisabled,
     item: item,
     contextActions: contextActions,
+    contextMenuPosition: contextMenuPosition,
     dragScale: dragScale,
+    setIsContextMenuVisible: function setIsContextMenuVisible(value) {
+      return setState(function (prevState) {
+        return _extends({}, prevState, {
+          isContextMenuVisible: value
+        });
+      });
+    },
     onSelected: function onSelected(optionId, item) {
-      setContextMenuState(function (prev) {
-        return _extends({}, prev, {
-          visible: false
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          isContextMenuVisible: false
         });
       });
       if (_onSelected) _onSelected(optionId, item);
     },
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet
+    equipmentSet: equipmentSet,
+    setIsTooltipVisible: function setIsTooltipVisible(value) {
+      return setState(function (prevState) {
+        return _extends({}, prevState, {
+          isTooltipVisible: value
+        });
+      });
+    }
   }));
-}));
+});
 var Container$b = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
-})(["margin:0.1rem;.react-draggable-dragging{opacity:", ";}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref3) {
-  var isDraggingItem = _ref3.isDraggingItem;
+})(["margin:0.1rem;.react-draggable-dragging{opacity:", ";}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
+  var isDraggingItem = _ref2.isDraggingItem;
   return isDraggingItem ? 0 : 1;
+}, function (_ref3) {
+  var item = _ref3.item;
+  return rarityColor(item);
 }, function (_ref4) {
   var item = _ref4.item;
-  return rarityColor(item);
+  return "0 0 5px 2px " + rarityColor(item);
 }, function (_ref5) {
   var item = _ref5.item;
-  return "0 0 5px 2px " + rarityColor(item);
-}, function (_ref6) {
-  var item = _ref6.item;
   return "0 0 4px 3px " + rarityColor(item);
-}, function (_ref7) {
-  var isSelectingShortcut = _ref7.isSelectingShortcut;
+}, function (_ref6) {
+  var isSelectingShortcut = _ref6.isSelectingShortcut;
   return isSelectingShortcut ? 'bg-color-change 1s infinite' : 'none';
 });
 var ItemContainer = /*#__PURE__*/styled.div.withConfig({
@@ -30630,6 +30610,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     _onOutsideDrop = _ref.onOutsideDrop,
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
     initialPosition = _ref.initialPosition,
+    checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
     scale = _ref.scale,
     shortcuts = _ref.shortcuts,
     setItemShortcut = _ref.setItemShortcut,
@@ -30678,14 +30659,12 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     document.removeEventListener('pointermove', handleMouseMove);
   }, [handleMouseMove, onItemDragStart, stopScrolling]);
   var onDragStart = function onDragStart(item, slotIndex, itemContainerType) {
-    console.log('DRAG START');
     if (onItemDragStart) {
       onItemDragStart(item, slotIndex, itemContainerType);
     }
     onDragStartScrollingEvents();
   };
   var onDragEnd = function onDragEnd(quantity) {
-    console.log('DRAG END');
     if (onItemDragEnd) {
       onItemDragEnd(quantity);
     }
@@ -30719,6 +30698,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
         onDragEnd: onDragEnd,
         dragScale: scale,
         checkIfItemCanBeMoved: checkIfItemCanBeMoved,
+        checkIfItemShouldDragEnd: checkIfItemShouldDragEnd,
         openQuantitySelector: function openQuantitySelector(maxQuantity, callback) {
           setQuantitySelect({
             isOpen: true,