@rpg-engine/long-bow 0.7.66 → 0.7.68

package/dist/components/Item/Inventory/context/DraggingContext.d.ts

@@ -1,11 +1,26 @@
 import { IItem } from '@rpg-engine/shared';
 import React from 'react';
-export declare const useDragging: () => {
+export interface DragState {
+    isFocused: boolean;
+    wasDragged: boolean;
+    position: {
+        x: number;
+        y: number;
+    };
+    dropPosition: {
+        x: number;
+        y: number;
+    } | null;
+}
+interface DraggingContextType {
     item: IItem | null;
     setDraggingItem: React.Dispatch<React.SetStateAction<IItem | null>>;
-};
+    dragState: DragState;
+    setDragState: React.Dispatch<React.SetStateAction<DragState>>;
+}
 interface IProps {
     children: React.ReactNode;
 }
 export declare const DraggingProvider: ({ children }: IProps) => JSX.Element;
+export declare const useDragging: () => DraggingContextType;
 export {};

package/dist/components/Item/Inventory/hooks/useItemSlotDragAndDrop.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
 import { DraggableEventHandler } from 'react-draggable';
-import { ContextMenuState, DragState, TooltipState } from '../ItemSlot';
+import { ContextMenuState, TooltipState } from '../ItemSlot';
 interface IUseItemSlotDragAndDrop {
     isDepotSystem: boolean;
     item: IItem;
@@ -26,7 +26,7 @@ interface IUseItemSlotDragAndDrop {
 }
 export declare const useItemSlotDragAndDrop: ({ isDepotSystem, item, onDrop, onDragEnd, checkIfItemCanBeMoved, checkIfItemShouldDragEnd, setItemShortcut, isSelectingShortcut, onDragStart, onPointerDown, containerType, slotIndex, openQuantitySelector, isContextMenuDisabled, setTooltipState, setContextMenuState, }: IUseItemSlotDragAndDrop) => {
     dragContainer: import("react").RefObject<HTMLDivElement>;
-    dragState: DragState;
+    dragState: import("../context/DraggingContext").DragState;
     draggingItem: IItem | null;
     setDraggingItem: import("react").Dispatch<import("react").SetStateAction<IItem | null>>;
     getContainerBounds: () => {

package/dist/long-bow.cjs.development.js

@@ -27723,23 +27723,46 @@ var ItemSlotToolTips = function ItemSlotToolTips(_ref) {
 
 var DraggingContext = /*#__PURE__*/React.createContext({
   item: null,
-  setDraggingItem: function setDraggingItem() {}
+  setDraggingItem: function setDraggingItem() {},
+  dragState: {
+    isFocused: false,
+    wasDragged: false,
+    position: {
+      x: 0,
+      y: 0
+    },
+    dropPosition: null
+  },
+  setDragState: function setDragState() {}
 });
-var useDragging = function useDragging() {
-  return React.useContext(DraggingContext);
-};
 var DraggingProvider = function DraggingProvider(_ref) {
   var children = _ref.children;
   var _useState = React.useState(null),
     item = _useState[0],
     setDraggingItem = _useState[1];
+  var _useState2 = React.useState({
+      isFocused: false,
+      wasDragged: false,
+      position: {
+        x: 0,
+        y: 0
+      },
+      dropPosition: null
+    }),
+    dragState = _useState2[0],
+    setDragState = _useState2[1];
   return React__default.createElement(DraggingContext.Provider, {
     value: {
       item: item,
-      setDraggingItem: setDraggingItem
+      setDraggingItem: setDraggingItem,
+      dragState: dragState,
+      setDragState: setDragState
     }
   }, children);
 };
+var useDragging = function useDragging() {
+  return React.useContext(DraggingContext);
+};
 
 var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
   var isDepotSystem = _ref.isDepotSystem,
@@ -27761,18 +27784,9 @@ var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
   var dragContainer = React.useRef(null);
   var _useDragging = useDragging(),
     draggingItem = _useDragging.item,
-    setDraggingItem = _useDragging.setDraggingItem;
-  var _useState = React.useState({
-      isFocused: false,
-      wasDragged: false,
-      position: {
-        x: 0,
-        y: 0
-      },
-      dropPosition: null
-    }),
-    dragState = _useState[0],
-    setDragState = _useState[1];
+    setDraggingItem = _useDragging.setDraggingItem,
+    dragState = _useDragging.dragState,
+    setDragState = _useDragging.setDragState;
   React.useEffect(function () {
     setDragState(function (prev) {
       return _extends({}, prev, {
@@ -27783,7 +27797,7 @@ var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
         isFocused: false
       });
     });
-  }, [item, isDepotSystem]);
+  }, [item, isDepotSystem, setDragState]);
   React.useEffect(function () {
     if (onDrop && item && dragState.dropPosition) {
       onDrop(item, dragState.dropPosition);
@@ -27811,11 +27825,6 @@ var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
     };
   }, []);
   var resetDragState = React.useCallback(function () {
-    setTooltipState(function (prev) {
-      return _extends({}, prev, {
-        visible: false
-      });
-    });
     setDragState(function (prev) {
       return _extends({}, prev, {
         wasDragged: false,
@@ -27826,8 +27835,7 @@ var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
         }
       });
     });
-    setDraggingItem(null);
-  }, [setTooltipState]);
+  }, [setTooltipState, setDragState]);
   var handleSuccessfulDrag = React.useCallback(function (quantity) {
     resetDragState();
     if (quantity !== -1 && item) {
@@ -27844,21 +27852,22 @@ var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
     var _dragState$position = dragState.position,
       x = _dragState$position.x,
       y = _dragState$position.y;
-    if (Math.abs(data.x - x) > 20 || Math.abs(data.y - y) > 20) {
+    if (Math.abs(data.x - x) > 5 || Math.abs(data.y - y) > 5) {
       setDragState(function (prev) {
         return _extends({}, prev, {
           wasDragged: true,
           isFocused: true
         });
       });
-    } else {
-      resetDragState();
     }
     if (!draggingItem) {
       setDraggingItem(item);
     }
-  }, [dragState.position, draggingItem, item, setDraggingItem]);
+  }, [dragState.position, draggingItem, item, setDraggingItem, setDragState]);
   var onDraggableStop = React.useCallback(function (e, data) {
+    setTimeout(function () {
+      setDraggingItem(null);
+    }, 50);
     var target = e.target;
     if (!target) return;
     target.classList.remove('react-draggable-dragging');
@@ -27901,14 +27910,13 @@ var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
       }, 50);
     } else if (item) {
       var isTouch = e.type === 'touchend';
-      console.log("Debug: \n          isTouch: " + isTouch + ",\n          isSelectingShortcut: " + isSelectingShortcut + ",\n          draggingItem: " + draggingItem + ",\n          dragState.wasDragged: " + dragState.wasDragged + ",\n          dragState.isFocused: " + dragState.isFocused + "\n        ");
-      if (!isContextMenuDisabled && isTouch && !isSelectingShortcut && !draggingItem && !dragState.wasDragged && !dragState.isFocused) {
+      if (!isContextMenuDisabled && isTouch && !isSelectingShortcut && !draggingItem) {
         setTooltipState(function (prev) {
           return _extends({}, prev, {
             mobileVisible: true
           });
         });
-      } else if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch && !dragState.wasDragged && !dragState.isFocused) {
+      } else if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
         var event = e;
         setContextMenuState(function (prev) {
           return {
@@ -28204,7 +28212,6 @@ var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.obse
     },
     onTouchEnd: function onTouchEnd(e) {
       var _document$elementFrom2;
-      handleInteractionEnd(e);
       var _e$changedTouches$ = e.changedTouches[0],
         clientX = _e$changedTouches$.clientX,
         clientY = _e$changedTouches$.clientY;
@@ -28283,7 +28290,7 @@ var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.obse
 var Container$b = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
-})(["*{border:1px solid red;}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) {
+})(["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;
   return isDraggingItem ? 0 : 1;
 }, function (_ref4) {