@rpg-engine/long-bow 0.7.66 → 0.7.67

package/dist/long-bow.esm.js

@@ -27662,13 +27662,17 @@ var ItemSlotToolTips = function ItemSlotToolTips(_ref) {
     _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, {
+    equipmentSet = _ref.equipmentSet,
+    isDragging = _ref.isDragging,
+    isSelectingShortcut = _ref.isSelectingShortcut,
+    showTooltipDelayed = _ref.showTooltipDelayed;
+  var canShow = !isDragging || !isSelectingShortcut || showTooltipDelayed;
+  return React.createElement(React.Fragment, null, tooltipState.visible && item && !isFocused && canShow && React.createElement(ItemTooltip, {
     item: item,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet
-  }), tooltipState.mobileVisible && item && React.createElement(MobileItemTooltip, {
+  }), tooltipState.mobileVisible && item && canShow && React.createElement(MobileItemTooltip, {
     item: item,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
@@ -27692,7 +27696,7 @@ var ItemSlotToolTips = function ItemSlotToolTips(_ref) {
         _onSelected == null ? void 0 : _onSelected(optionId, item);
       }
     }
-  }), !isContextMenuDisabled && contextMenuState.visible && contextActions && React.createElement(RelativeListMenu, {
+  }), !isContextMenuDisabled && contextMenuState.visible && contextActions && canShow && React.createElement(RelativeListMenu, {
     options: contextActions,
     onSelected: function onSelected(optionId) {
       setContextMenuState(function (prev) {
@@ -27820,7 +27824,6 @@ var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
         }
       });
     });
-    setDraggingItem(null);
   }, [setTooltipState]);
   var handleSuccessfulDrag = useCallback(function (quantity) {
     resetDragState();
@@ -27838,21 +27841,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 = useCallback(function (e, data) {
+    setTimeout(function () {
+      setDraggingItem(null);
+    }, 50);
     var target = e.target;
     if (!target) return;
     target.classList.remove('react-draggable-dragging');
@@ -27895,14 +27899,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 {
@@ -28109,6 +28112,12 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
   var _useState3 = useState([]),
     contextActions = _useState3[0],
     setContextActions = _useState3[1];
+  var isDraggingDisabled = useMemo(function () {
+    return contextMenuState.visible || onDragStart === undefined || onDragEnd === undefined;
+  }, [contextMenuState.visible, onDragStart, onDragEnd]);
+  useEffect(function () {
+    console.log('isDraggingDisabled', isDraggingDisabled);
+  }, [isDraggingDisabled]);
   var _useItemSlotDragAndDr = useItemSlotDragAndDrop({
       isDepotSystem: !!isDepotSystem,
       item: item,
@@ -28182,6 +28191,22 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
       (_document$elementFrom = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _document$elementFrom.dispatchEvent(simulatedEvent);
     }
   }, [onMouseOut]);
+  var _useState4 = useState(false),
+    showTooltipDelayed = _useState4[0],
+    setShowTooltipDelayed = _useState4[1];
+  //@ts-ignore
+  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.createElement(Container$b, {
     isDraggingItem: !!draggingItem,
     item: item,
@@ -28217,7 +28242,7 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
     axis: isSelectingShortcut ? 'none' : 'both',
     defaultClassName: item ? 'draggable' : 'empty-slot',
     scale: dragScale,
-    disabled: onDragStart === undefined || onDragEnd === undefined,
+    disabled: isDraggingDisabled,
     onStop: onDraggableStop,
     onStart: onDraggableStart,
     onDrag: onDraggableProgress,
@@ -28238,12 +28263,15 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
         });
       });
     },
-    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.createElement(ItemSlotRenderer, {
     item: item,
@@ -28271,13 +28299,16 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
     },
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet
+    equipmentSet: equipmentSet,
+    isDragging: !!draggingItem,
+    isSelectingShortcut: !!isSelectingShortcut,
+    showTooltipDelayed: showTooltipDelayed
   }));
 }));
 var Container$b = /*#__PURE__*/styled.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) {