@rpg-engine/long-bow 0.7.66 → 0.7.67

package/dist/components/Item/Inventory/ItemSlotTooltips.d.ts

@@ -16,6 +16,9 @@ interface IProps {
     atlasIMG: any;
     atlasJSON: any;
     equipmentSet?: IEquipmentSet | null;
+    isDragging: boolean;
+    isSelectingShortcut: boolean;
+    showTooltipDelayed: boolean;
 }
-export declare const ItemSlotToolTips: ({ tooltipState, setTooltipState, contextMenuState, setContextMenuState, isFocused, isContextMenuDisabled, item, contextActions, dragScale, onSelected, atlasIMG, atlasJSON, equipmentSet, }: IProps) => JSX.Element;
+export declare const ItemSlotToolTips: ({ tooltipState, setTooltipState, contextMenuState, setContextMenuState, isFocused, isContextMenuDisabled, item, contextActions, dragScale, onSelected, atlasIMG, atlasJSON, equipmentSet, isDragging, isSelectingShortcut, showTooltipDelayed, }: IProps) => JSX.Element;
 export {};

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

@@ -27668,13 +27668,17 @@ var ItemSlotToolTips = function ItemSlotToolTips(_ref) {
     _onSelected = _ref.onSelected,
     atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
-    equipmentSet = _ref.equipmentSet;
-  return React__default.createElement(React__default.Fragment, null, tooltipState.visible && item && !isFocused && React__default.createElement(ItemTooltip, {
+    equipmentSet = _ref.equipmentSet,
+    isDragging = _ref.isDragging,
+    isSelectingShortcut = _ref.isSelectingShortcut,
+    showTooltipDelayed = _ref.showTooltipDelayed;
+  var canShow = !isDragging || !isSelectingShortcut || showTooltipDelayed;
+  return React__default.createElement(React__default.Fragment, null, tooltipState.visible && item && !isFocused && canShow && React__default.createElement(ItemTooltip, {
     item: item,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet
-  }), tooltipState.mobileVisible && item && React__default.createElement(MobileItemTooltip, {
+  }), tooltipState.mobileVisible && item && canShow && React__default.createElement(MobileItemTooltip, {
     item: item,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
@@ -27698,7 +27702,7 @@ var ItemSlotToolTips = function ItemSlotToolTips(_ref) {
         _onSelected == null ? void 0 : _onSelected(optionId, item);
       }
     }
-  }), !isContextMenuDisabled && contextMenuState.visible && contextActions && React__default.createElement(RelativeListMenu, {
+  }), !isContextMenuDisabled && contextMenuState.visible && contextActions && canShow && React__default.createElement(RelativeListMenu, {
     options: contextActions,
     onSelected: function onSelected(optionId) {
       setContextMenuState(function (prev) {
@@ -27826,7 +27830,6 @@ var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
         }
       });
     });
-    setDraggingItem(null);
   }, [setTooltipState]);
   var handleSuccessfulDrag = React.useCallback(function (quantity) {
     resetDragState();
@@ -27844,21 +27847,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]);
   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 +27905,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 {
@@ -28115,6 +28118,12 @@ var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.obse
   var _useState3 = React.useState([]),
     contextActions = _useState3[0],
     setContextActions = _useState3[1];
+  var isDraggingDisabled = React.useMemo(function () {
+    return contextMenuState.visible || onDragStart === undefined || onDragEnd === undefined;
+  }, [contextMenuState.visible, onDragStart, onDragEnd]);
+  React.useEffect(function () {
+    console.log('isDraggingDisabled', isDraggingDisabled);
+  }, [isDraggingDisabled]);
   var _useItemSlotDragAndDr = useItemSlotDragAndDrop({
       isDepotSystem: !!isDepotSystem,
       item: item,
@@ -28188,6 +28197,22 @@ var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.obse
       (_document$elementFrom = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _document$elementFrom.dispatchEvent(simulatedEvent);
     }
   }, [onMouseOut]);
+  var _useState4 = React.useState(false),
+    showTooltipDelayed = _useState4[0],
+    setShowTooltipDelayed = _useState4[1];
+  //@ts-ignore
+  React.useEffect(function () {
+    if (tooltipState.visible && !isDraggingDisabled) {
+      var timer = setTimeout(function () {
+        return setShowTooltipDelayed(true);
+      }, 50);
+      return function () {
+        return clearTimeout(timer);
+      };
+    } else {
+      setShowTooltipDelayed(false);
+    }
+  }, [tooltipState.visible, isDraggingDisabled]);
   return React__default.createElement(Container$b, {
     isDraggingItem: !!draggingItem,
     item: item,
@@ -28223,7 +28248,7 @@ var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.obse
     axis: isSelectingShortcut ? 'none' : 'both',
     defaultClassName: item ? 'draggable' : 'empty-slot',
     scale: dragScale,
-    disabled: onDragStart === undefined || onDragEnd === undefined,
+    disabled: isDraggingDisabled,
     onStop: onDraggableStop,
     onStart: onDraggableStart,
     onDrag: onDraggableProgress,
@@ -28244,12 +28269,15 @@ var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.obse
         });
       });
     },
-    onMouseLeave: function onMouseLeave() {
-      setTooltipState(function (prev) {
-        return _extends({}, prev, {
-          visible: false
+    onMouseLeave: function onMouseLeave(e) {
+      var _dragContainer$curren;
+      if (!e.relatedTarget || !((_dragContainer$curren = dragContainer.current) != null && _dragContainer$curren.contains(e.relatedTarget))) {
+        setTooltipState(function (prev) {
+          return _extends({}, prev, {
+            visible: false
+          });
         });
-      });
+      }
     }
   }, React__default.createElement(ItemSlotRenderer, {
     item: item,
@@ -28277,13 +28305,16 @@ var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.obse
     },
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet
+    equipmentSet: equipmentSet,
+    isDragging: !!draggingItem,
+    isSelectingShortcut: !!isSelectingShortcut,
+    showTooltipDelayed: showTooltipDelayed
   }));
 }));
 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) {