@rpg-engine/long-bow 0.7.38 → 0.7.40

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

@@ -28,5 +28,21 @@ interface IProps {
     setItemShortcut?: (item: IItem, shortcutIndex: number) => void;
     isDepotSystem?: boolean;
 }
-export declare const ItemSlot: React.FC<IProps>;
+export declare type TooltipState = {
+    visible: boolean;
+    mobileVisible: boolean;
+};
+export declare type ContextMenuState = {
+    position: IPosition;
+    visible: boolean;
+};
+export declare type DragState = {
+    isFocused: boolean;
+    wasDragged: boolean;
+    position: IPosition;
+    dropPosition: IPosition | null;
+};
+export declare const ItemSlot: React.MemoExoticComponent<(({ slotIndex, item, itemContainerType: containerType, slotSpriteMask, onMouseOver, onMouseOut, onPointerDown, onSelected, atlasJSON, atlasIMG, isContextMenuDisabled, onDragEnd, onDragStart, onPlaceDrop, onOutsideDrop: onDrop, checkIfItemCanBeMoved, openQuantitySelector, checkIfItemShouldDragEnd, dragScale, isSelectingShortcut, equipmentSet, setItemShortcut, isDepotSystem, }: IProps) => JSX.Element) & {
+    displayName: string;
+}>;
 export {};

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

@@ -1,24 +1,21 @@
-/// <reference types="react" />
 import { IEquipmentSet, IItem } from '@rpg-engine/shared';
-import { IPosition } from '../../../types/eventTypes';
+import React from 'react';
 import { IContextMenuItem } from './itemContainerHelper';
+import type { ContextMenuState, TooltipState } from './ItemSlot';
 interface IProps {
-    isTooltipVisible: boolean;
+    tooltipState: TooltipState;
+    setTooltipState: React.Dispatch<React.SetStateAction<TooltipState>>;
+    contextMenuState: ContextMenuState;
+    setContextMenuState: React.Dispatch<React.SetStateAction<ContextMenuState>>;
     isFocused: boolean;
-    isContextMenuVisible: boolean;
     isContextMenuDisabled: boolean;
     item: IItem | null;
-    isTooltipMobileVisible: boolean;
     contextActions: IContextMenuItem[];
-    contextMenuPosition: IPosition;
     dragScale: number | undefined;
-    setIsContextMenuVisible: (visible: boolean) => void;
-    setIsTooltipMobileVisible: (visible: boolean) => void;
-    setIsTooltipVisible: (visible: boolean) => void;
     onSelected?: (optionId: string, item: IItem) => void;
     atlasIMG: any;
     atlasJSON: any;
     equipmentSet?: IEquipmentSet | null;
 }
-export declare const ItemSlotToolTips: ({ isTooltipVisible, isFocused, isContextMenuVisible, isContextMenuDisabled, item, contextActions, contextMenuPosition, dragScale, setIsContextMenuVisible, setIsTooltipMobileVisible, isTooltipMobileVisible, onSelected, atlasIMG, atlasJSON, equipmentSet, }: IProps) => JSX.Element;
+export declare const ItemSlotToolTips: ({ tooltipState, setTooltipState, contextMenuState, setContextMenuState, isFocused, isContextMenuDisabled, item, contextActions, dragScale, onSelected, atlasIMG, atlasJSON, equipmentSet, }: IProps) => JSX.Element;
 export {};

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

@@ -27657,54 +27657,68 @@ var Option = /*#__PURE__*/styled__default.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 isTooltipVisible = _ref.isTooltipVisible,
+  var tooltipState = _ref.tooltipState,
+    setTooltipState = _ref.setTooltipState,
+    contextMenuState = _ref.contextMenuState,
+    setContextMenuState = _ref.setContextMenuState,
     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__default.createElement(React__default.Fragment, null, isTooltipVisible && item && !isFocused && React__default.createElement(ItemTooltip, {
+  return React__default.createElement(React__default.Fragment, null, tooltipState.visible && item && !isFocused && React__default.createElement(ItemTooltip, {
     item: item,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet
-  }), isTooltipMobileVisible && item && React__default.createElement(MobileItemTooltip, {
+  }), tooltipState.mobileVisible && item && React__default.createElement(MobileItemTooltip, {
     item: item,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet,
     closeTooltip: function closeTooltip() {
-      setIsTooltipMobileVisible(false);
+      setTooltipState(function (prev) {
+        return _extends({}, prev, {
+          mobileVisible: false
+        });
+      });
     },
     scale: dragScale,
     options: contextActions,
     onSelected: function onSelected(optionId) {
-      setIsContextMenuVisible(false);
+      setContextMenuState(function (prev) {
+        return _extends({}, prev, {
+          visible: false
+        });
+      });
       if (item) {
         _onSelected == null ? void 0 : _onSelected(optionId, item);
       }
     }
-  }), !isContextMenuDisabled && isContextMenuVisible && contextActions && React__default.createElement(RelativeListMenu, {
+  }), !isContextMenuDisabled && contextMenuState.visible && contextActions && React__default.createElement(RelativeListMenu, {
     options: contextActions,
     onSelected: function onSelected(optionId) {
-      setIsContextMenuVisible(false);
+      setContextMenuState(function (prev) {
+        return _extends({}, prev, {
+          visible: false
+        });
+      });
       if (item) {
         _onSelected == null ? void 0 : _onSelected(optionId, item);
       }
     },
     onOutsideClick: function onOutsideClick() {
-      setIsContextMenuVisible(false);
+      setContextMenuState(function (prev) {
+        return _extends({}, prev, {
+          visible: false
+        });
+      });
     },
-    pos: contextMenuPosition
+    pos: contextMenuState.position
   }));
 };
 
@@ -27865,7 +27879,7 @@ var EquipmentSlotSpriteByType = {
   RightHand: 'shields/plate-shield.png',
   Accessory: 'ranged-weapons/arrow.png'
 };
-var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
+var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.observer(function (_ref) {
   var slotIndex = _ref.slotIndex,
     item = _ref.item,
     containerType = _ref.itemContainerType,
@@ -27890,70 +27904,103 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     equipmentSet = _ref.equipmentSet,
     setItemShortcut = _ref.setItemShortcut,
     isDepotSystem = _ref.isDepotSystem;
-  var _useState = React.useState(false),
-    isTooltipVisible = _useState[0],
-    setTooltipVisible = _useState[1];
-  var _useState2 = React.useState(false),
-    isTooltipMobileVisible = _useState2[0],
-    setIsTooltipMobileVisible = _useState2[1];
-  var _useState3 = React.useState(false),
-    isContextMenuVisible = _useState3[0],
-    setIsContextMenuVisible = _useState3[1];
-  var _useState4 = React.useState({
-      x: 0,
-      y: 0
+  var _useState = React.useState({
+      visible: false,
+      mobileVisible: false
     }),
-    contextMenuPosition = _useState4[0],
-    setContextMenuPosition = _useState4[1];
-  var _useState5 = React.useState(false),
-    isFocused = _useState5[0],
-    setIsFocused = _useState5[1];
-  var _useState6 = React.useState(false),
-    wasDragged = _useState6[0],
-    setWasDragged = _useState6[1];
-  var _useState7 = React.useState({
-      x: 0,
-      y: 0
+    tooltipState = _useState[0],
+    setTooltipState = _useState[1];
+  var _useState2 = React.useState({
+      visible: false,
+      position: {
+        x: 0,
+        y: 0
+      }
+    }),
+    contextMenuState = _useState2[0],
+    setContextMenuState = _useState2[1];
+  var _useState3 = React.useState({
+      isFocused: false,
+      wasDragged: false,
+      position: {
+        x: 0,
+        y: 0
+      },
+      dropPosition: null
     }),
-    dragPosition = _useState7[0],
-    setDragPosition = _useState7[1];
-  var _useState8 = React.useState(null),
-    dropPosition = _useState8[0],
-    setDropPosition = _useState8[1];
+    dragState = _useState3[0],
+    setDragState = _useState3[1];
   var dragContainer = React.useRef(null);
   var _useDragging = useDragging(),
     draggingItem = _useDragging.item,
     setDraggingItem = _useDragging.setDraggingItem;
-  var _useState9 = React.useState([]),
-    contextActions = _useState9[0],
-    setContextActions = _useState9[1];
+  var _useState4 = React.useState([]),
+    contextActions = _useState4[0],
+    setContextActions = _useState4[1];
   React.useEffect(function () {
-    setDragPosition({
-      x: 0,
-      y: 0
+    setDragState(function (prev) {
+      return _extends({}, prev, {
+        position: {
+          x: 0,
+          y: 0
+        },
+        isFocused: false
+      });
     });
-    setIsFocused(false);
     if (item && containerType) {
       setContextActions(generateContextMenu(item, containerType, isDepotSystem));
     }
   }, [item, isDepotSystem]);
   React.useEffect(function () {
-    if (onDrop && item && dropPosition) {
-      onDrop(item, dropPosition);
+    if (onDrop && item && dragState.dropPosition) {
+      onDrop(item, dragState.dropPosition);
+      setDragState(function (prev) {
+        return _extends({}, prev, {
+          dropPosition: null
+        });
+      });
     }
-  }, [dropPosition]);
+  }, [dragState.dropPosition]);
+  var getContainerBounds = React.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
+    };
+  }, [dragContainer]);
   var resetItem = function resetItem() {
-    setTooltipVisible(false);
-    setWasDragged(false);
+    setTooltipState(function (prev) {
+      return _extends({}, prev, {
+        visible: false
+      });
+    });
+    setDragState(function (prev) {
+      return _extends({}, prev, {
+        wasDragged: false
+      });
+    });
   };
   var onSuccessfulDrag = function onSuccessfulDrag(quantity) {
     resetItem();
     if (quantity === -1) {
-      setDragPosition({
-        x: 0,
-        y: 0
+      setDragState(function (prev) {
+        return _extends({}, prev, {
+          position: {
+            x: 0,
+            y: 0
+          },
+          isFocused: false
+        });
       });
-      setIsFocused(false);
     } else if (item) {
       onDragEnd == null ? void 0 : onDragEnd(quantity);
     }
@@ -27961,6 +28008,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
   var onDraggableStop = function onDraggableStop(e, data) {
     setDraggingItem(null);
     var target = e.target;
+    if (!target) return;
     if (target != null && target.id.includes('shortcutSetter') && setItemShortcut && item) {
       var index = parseInt(target.id.split('_')[1]);
       if (!isNaN(index)) {
@@ -27970,7 +28018,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     // remove the class react-draggable-dragging from the element
     // to prevent the item from being dragged again
     target.classList.remove('react-draggable-dragging');
-    if (wasDragged && item && !isSelectingShortcut) {
+    if (dragState.wasDragged && item && !isSelectingShortcut) {
       var _e$target;
       //@ts-ignore
       var classes = Array.from((_e$target = e.target) == null ? void 0 : _e$target.classList);
@@ -27978,32 +28026,50 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
         return elm.includes('rpgui-content');
       }) || classes.length === 0;
       if (isOutsideDrop) {
-        setDropPosition({
-          x: data.x,
-          y: data.y
+        setDragState(function (prev) {
+          return _extends({}, prev, {
+            dropPosition: {
+              x: data.x,
+              y: data.y
+            }
+          });
         });
       }
-      setWasDragged(false);
+      setDragState(function (prev) {
+        return _extends({}, prev, {
+          wasDragged: false
+        });
+      });
       var _target = dragContainer.current;
-      if (!_target || !wasDragged) return;
+      if (!_target || !dragState.wasDragged) return;
       var style = window.getComputedStyle(_target);
       var matrix = new DOMMatrixReadOnly(style.transform);
       var x = matrix.m41;
       var y = matrix.m42;
-      setDragPosition({
-        x: x,
-        y: y
+      setDragState(function (prev) {
+        return _extends({}, prev, {
+          position: {
+            x: x,
+            y: y
+          }
+        });
       });
       setTimeout(function () {
-        if (checkIfItemCanBeMoved != null && checkIfItemCanBeMoved()) {
+        if (checkIfItemCanBeMoved && checkIfItemCanBeMoved()) {
           if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) return;
-          if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) openQuantitySelector(item.stackQty, onSuccessfulDrag);else onSuccessfulDrag(item.stackQty);
+          if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) {
+            openQuantitySelector(item.stackQty, onSuccessfulDrag);
+          } else onSuccessfulDrag(item.stackQty);
         } else {
           resetItem();
-          setIsFocused(false);
-          setDragPosition({
-            x: 0,
-            y: 0
+          setDragState(function (prev) {
+            return _extends({}, prev, {
+              isFocused: false,
+              position: {
+                x: 0,
+                y: 0
+              }
+            });
           });
         }
       }, 50);
@@ -28011,15 +28077,27 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       var isTouch = false;
       if (!isContextMenuDisabled && e.type === 'touchend' && !isSelectingShortcut) {
         isTouch = true;
-        setIsTooltipMobileVisible(true);
+        setTooltipState(function (prev) {
+          return _extends({}, prev, {
+            mobileVisible: true
+          });
+        });
       }
       if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
-        setIsContextMenuVisible(!isContextMenuVisible);
+        setContextMenuState(function (prev) {
+          return _extends({}, prev, {
+            visible: !contextMenuState.visible
+          });
+        });
         var event = e;
         if (event.clientX && event.clientY) {
-          setContextMenuPosition({
-            x: event.clientX - 10,
-            y: event.clientY - 5
+          setContextMenuState(function (prev) {
+            return _extends({}, prev, {
+              position: {
+                x: event.clientX - 10,
+                y: event.clientY - 5
+              }
+            });
           });
         }
       }
@@ -28035,21 +28113,28 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     }
   };
   var onDraggableProgress = function onDraggableProgress(_e, data) {
-    if (Math.abs(data.x - dragPosition.x) > 5 || Math.abs(data.y - dragPosition.y) > 5) {
-      setWasDragged(true);
-      setIsFocused(true);
+    if (Math.abs(data.x - dragState.position.x) > 5 || Math.abs(data.y - dragState.position.y) > 5) {
+      setDragState(function (prev) {
+        return _extends({}, prev, {
+          wasDragged: true,
+          isFocused: true
+        });
+      });
     }
     if (!draggingItem) {
       setDraggingItem(item);
     }
   };
+  var bounds = getContainerBounds();
   return React__default.createElement(Container$b, {
     isDraggingItem: !!draggingItem,
     item: item,
     className: "rpgui-icon empty-slot",
     onMouseUp: function onMouseUp() {
       var data = item ? item : null;
-      if (onPlaceDrop && containerType) onPlaceDrop(data, slotIndex, containerType);
+      if (onPlaceDrop && containerType) {
+        onPlaceDrop(data, slotIndex, containerType);
+      }
     },
     onTouchEnd: function onTouchEnd(e) {
       var _document$elementFrom;
@@ -28075,12 +28160,12 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     onStop: onDraggableStop,
     onStart: onDraggableStart,
     onDrag: onDraggableProgress,
-    position: dragPosition,
+    position: dragState.position,
     cancel: ".empty-slot",
-    bounds: ".item-container-body, .equipment-container-body"
+    bounds: bounds
   }, React__default.createElement(ItemContainer, {
     ref: dragContainer,
-    isFocused: isFocused,
+    isFocused: dragState.isFocused,
     onMouseOver: function onMouseOver(event) {
       _onMouseOver == null ? void 0 : _onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
     },
@@ -28088,10 +28173,18 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       if (_onMouseOut) _onMouseOut();
     },
     onMouseEnter: function onMouseEnter() {
-      setTooltipVisible(true);
+      setTooltipState(function (prev) {
+        return _extends({}, prev, {
+          visible: true
+        });
+      });
     },
     onMouseLeave: function onMouseLeave() {
-      setTooltipVisible(false);
+      setTooltipState(function (prev) {
+        return _extends({}, prev, {
+          visible: false
+        });
+      });
     }
   }, React__default.createElement(ItemSlotRenderer, {
     item: item,
@@ -28100,27 +28193,28 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     atlasJSON: atlasJSON,
     containerType: containerType
   }))), React__default.createElement(ItemSlotToolTips, {
-    isTooltipVisible: isTooltipVisible,
-    isTooltipMobileVisible: isTooltipMobileVisible,
-    setIsTooltipMobileVisible: setIsTooltipMobileVisible,
-    isFocused: isFocused,
-    isContextMenuVisible: isContextMenuVisible,
+    tooltipState: tooltipState,
+    setTooltipState: setTooltipState,
+    contextMenuState: contextMenuState,
+    setContextMenuState: setContextMenuState,
+    isFocused: dragState.isFocused,
     isContextMenuDisabled: isContextMenuDisabled,
     item: item,
     contextActions: contextActions,
-    contextMenuPosition: contextMenuPosition,
     dragScale: dragScale,
-    setIsContextMenuVisible: setIsContextMenuVisible,
     onSelected: function onSelected(optionId, item) {
-      setIsContextMenuVisible(false);
+      setContextMenuState(function (prev) {
+        return _extends({}, prev, {
+          visible: false
+        });
+      });
       if (_onSelected) _onSelected(optionId, item);
     },
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet,
-    setIsTooltipVisible: setTooltipVisible
+    equipmentSet: equipmentSet
   }));
-});
+}));
 var Container$b = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
@@ -30546,7 +30640,9 @@ var ItemContainer$1 = function ItemContainer(_ref) {
           if (settingShortcutIndex !== -1) {
             setSettingShortcutIndex(-1);
             handleSetShortcut(item, settingShortcutIndex);
-          } else if (onItemClick) onItemClick(item, itemType, containerType);
+          } else if (onItemClick) {
+            onItemClick(item, itemType, containerType);
+          }
         },
         onSelected: function onSelected(optionId, item) {
           if (_onSelected) _onSelected(optionId, item);