@rpg-engine/long-bow 0.3.82 → 0.3.84

package/dist/long-bow.esm.js

@@ -1,6 +1,6 @@
 import React, { Component, useState, useEffect, useRef, useMemo, Fragment } from 'react';
 import styled from 'styled-components';
-import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemRarities, ItemSubType, ItemSlotType, isMobileOrTablet, getSPForLevel, PeriodOfDay } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemRarities, ItemSubType, ItemSlotType, isMobileOrTablet, getSPForLevel, PeriodOfDay } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { RxPaperPlane } from 'react-icons/rx';
@@ -33215,6 +33215,8 @@ var DraggableContainer = function DraggableContainer(_ref) {
     imgWidth = _ref$imgWidth === void 0 ? '20px' : _ref$imgWidth,
     cancelDrag = _ref.cancelDrag,
     onPositionChange = _ref.onPositionChange,
+    onPositionChangeEnd = _ref.onPositionChangeEnd,
+    onPositionChangeStart = _ref.onPositionChangeStart,
     onOutsideClick = _ref.onOutsideClick,
     _ref$initialPosition = _ref.initialPosition,
     initialPosition = _ref$initialPosition === void 0 ? {
@@ -33247,6 +33249,22 @@ var DraggableContainer = function DraggableContainer(_ref) {
         });
       }
     },
+    onStop: function onStop(_e, data) {
+      if (onPositionChangeEnd) {
+        onPositionChangeEnd({
+          x: data.x,
+          y: data.y
+        });
+      }
+    },
+    onStart: function onStart(_e, data) {
+      if (onPositionChangeStart) {
+        onPositionChangeStart({
+          x: data.x,
+          y: data.y
+        });
+      }
+    },
     defaultPosition: initialPosition,
     scale: scale
   }, React.createElement(Container$6, {
@@ -33379,7 +33397,8 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
     onSelected = _ref.onSelected,
     onOutsideClick = _ref.onOutsideClick,
     _ref$fontSize = _ref.fontSize,
-    fontSize = _ref$fontSize === void 0 ? 0.8 : _ref$fontSize;
+    fontSize = _ref$fontSize === void 0 ? 0.8 : _ref$fontSize,
+    pos = _ref.pos;
   var ref = useRef(null);
   useOutsideClick(ref, 'relative-context-menu');
   useEffect(function () {
@@ -33395,10 +33414,10 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       document.removeEventListener('clickOutside', function (_e) {});
     };
   }, []);
-  return React.createElement(Container$9, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$9, Object.assign({
     fontSize: fontSize,
     ref: ref
-  }, React.createElement("ul", {
+  }, pos), React.createElement("ul", {
     className: "rpgui-list-imp",
     style: {
       overflow: 'hidden'
@@ -33410,12 +33429,16 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
         onSelected(params == null ? void 0 : params.id);
       }
     }, (params == null ? void 0 : params.text) || 'No text');
-  })));
+  }))));
 };
 var Container$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "RelativeListMenu__Container",
   componentId: "sc-7hohf-0"
-})(["position:absolute;top:1rem;left:4rem;display:flex;flex-direction:column;width:max-content;justify-content:start;align-items:flex-start;li{font-size:", "em;}"], function (props) {
+})(["position:absolute;top:", "px;left:", "px;display:flex;flex-direction:column;width:max-content;justify-content:start;align-items:flex-start;li{font-size:", "em;}"], function (props) {
+  return props.y;
+}, function (props) {
+  return props.x;
+}, function (props) {
   return props.fontSize;
 });
 var ListElement = /*#__PURE__*/styled.li.withConfig({
@@ -33488,7 +33511,7 @@ var generateContextMenuListOptions = function generateContextMenuListOptions(act
   });
   return contextMenu;
 };
-var generateContextMenu = function generateContextMenu(item, itemContainerType) {
+var generateContextMenu = function generateContextMenu(item, itemContainerType, isDepotSystem) {
   var contextActionMenu = [];
   if (itemContainerType === ItemContainerType.Inventory) {
     switch (item.type) {
@@ -33514,6 +33537,12 @@ var generateContextMenu = function generateContextMenu(item, itemContainerType)
         contextActionMenu = generateContextMenuListOptions(ActionsForInventory.Other);
         break;
     }
+    if (isDepotSystem) {
+      contextActionMenu.push({
+        id: DepotSocketEvents.Deposit,
+        text: 'Deposit'
+      });
+    }
   }
   if (itemContainerType === ItemContainerType.Equipment) {
     switch (item.type) {
@@ -33577,6 +33606,15 @@ var generateContextMenu = function generateContextMenu(item, itemContainerType)
       });
     }
   }
+  if (itemContainerType === ItemContainerType.Depot) {
+    contextActionMenu = [{
+      id: ItemSocketEvents.GetItemInfo,
+      text: ItemSocketEventsDisplayLabels.GetItemInfo
+    }, {
+      id: DepotSocketEvents.Withdraw,
+      text: 'Withdraw'
+    }];
+  }
   return contextActionMenu;
 };
 
@@ -33614,7 +33652,8 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
     dragScale = _ref.dragScale,
     isSelectingShortcut = _ref.isSelectingShortcut,
-    equipmentSet = _ref.equipmentSet;
+    equipmentSet = _ref.equipmentSet,
+    isDepotSystem = _ref.isDepotSystem;
   var _useState = useState(false),
     isTooltipVisible = _useState[0],
     setTooltipVisible = _useState[1];
@@ -33624,25 +33663,31 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
   var _useState3 = useState(false),
     isContextMenuVisible = _useState3[0],
     setIsContextMenuVisible = _useState3[1];
-  var _useState4 = useState(false),
-    isFocused = _useState4[0],
-    setIsFocused = _useState4[1];
+  var _useState4 = useState({
+      x: 0,
+      y: 0
+    }),
+    contextMenuPosition = _useState4[0],
+    setContextMenuPosition = _useState4[1];
   var _useState5 = useState(false),
-    wasDragged = _useState5[0],
-    setWasDragged = _useState5[1];
-  var _useState6 = useState({
+    isFocused = _useState5[0],
+    setIsFocused = _useState5[1];
+  var _useState6 = useState(false),
+    wasDragged = _useState6[0],
+    setWasDragged = _useState6[1];
+  var _useState7 = useState({
       x: 0,
       y: 0
     }),
-    dragPosition = _useState6[0],
-    setDragPosition = _useState6[1];
-  var _useState7 = useState(null),
-    dropPosition = _useState7[0],
-    setDropPosition = _useState7[1];
+    dragPosition = _useState7[0],
+    setDragPosition = _useState7[1];
+  var _useState8 = useState(null),
+    dropPosition = _useState8[0],
+    setDropPosition = _useState8[1];
   var dragContainer = useRef(null);
-  var _useState8 = useState([]),
-    contextActions = _useState8[0],
-    setContextActions = _useState8[1];
+  var _useState9 = useState([]),
+    contextActions = _useState9[0],
+    setContextActions = _useState9[1];
   useEffect(function () {
     setDragPosition({
       x: 0,
@@ -33650,9 +33695,9 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     });
     setIsFocused(false);
     if (item) {
-      setContextActions(generateContextMenu(item, containerType));
+      setContextActions(generateContextMenu(item, containerType, isDepotSystem));
     }
-  }, [item]);
+  }, [item, isDepotSystem]);
   useEffect(function () {
     if (onDrop && item && dropPosition) {
       onDrop(item, dropPosition);
@@ -33834,7 +33879,16 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
           isTouch = true;
           setIsTooltipMobileVisible(true);
         }
-        if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) setIsContextMenuVisible(!isContextMenuVisible);
+        if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
+          setIsContextMenuVisible(!isContextMenuVisible);
+          var event = e;
+          if (event.clientX && event.clientY) {
+            setContextMenuPosition({
+              x: event.clientX - 10,
+              y: event.clientY - 5
+            });
+          }
+        }
         onPointerDown(item.type, containerType, item);
       }
     },
@@ -33900,7 +33954,8 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     },
     onOutsideClick: function onOutsideClick() {
       setIsContextMenuVisible(false);
-    }
+    },
+    pos: contextMenuPosition
   }));
 });
 var rarityColor = function rarityColor(item) {
@@ -34442,7 +34497,10 @@ var EquipmentSet = function EquipmentSet(_ref) {
     onItemOutsideDrop = _ref.onItemOutsideDrop,
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
     checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
-    scale = _ref.scale;
+    scale = _ref.scale,
+    initialPosition = _ref.initialPosition,
+    onPositionChangeEnd = _ref.onPositionChangeEnd,
+    onPositionChangeStart = _ref.onPositionChangeStart;
   var neck = equipmentSet.neck,
     leftHand = equipmentSet.leftHand,
     ring = equipmentSet.ring,
@@ -34509,7 +34567,10 @@ var EquipmentSet = function EquipmentSet(_ref) {
     },
     width: "330px",
     cancelDrag: ".equipment-container-body",
-    scale: scale
+    scale: scale,
+    initialPosition: initialPosition,
+    onPositionChangeEnd: onPositionChangeEnd,
+    onPositionChangeStart: onPositionChangeStart
   }, React.createElement(EquipmentSetContainer, {
     className: "equipment-container-body"
   }, React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(0, 3)), React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(3, 7)), React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(7, 10))));
@@ -35068,6 +35129,8 @@ var SlotsContainer = function SlotsContainer(_ref) {
     title = _ref.title,
     onClose = _ref.onClose,
     _onPositionChange = _ref.onPositionChange,
+    _onPositionChangeEnd = _ref.onPositionChangeEnd,
+    _onPositionChangeStart = _ref.onPositionChangeStart,
     onOutsideClick = _ref.onOutsideClick,
     initialPosition = _ref.initialPosition,
     scale = _ref.scale;
@@ -35091,6 +35154,26 @@ var SlotsContainer = function SlotsContainer(_ref) {
         });
       }
     },
+    onPositionChangeEnd: function onPositionChangeEnd(_ref3) {
+      var x = _ref3.x,
+        y = _ref3.y;
+      if (_onPositionChangeEnd) {
+        _onPositionChangeEnd({
+          x: x,
+          y: y
+        });
+      }
+    },
+    onPositionChangeStart: function onPositionChangeStart(_ref4) {
+      var x = _ref4.x,
+        y = _ref4.y;
+      if (_onPositionChangeStart) {
+        _onPositionChangeStart({
+          x: x,
+          y: y
+        });
+      }
+    },
     onOutsideClick: onOutsideClick,
     initialPosition: initialPosition,
     scale: scale
@@ -35340,7 +35423,10 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     shortcuts = _ref.shortcuts,
     setItemShortcut = _ref.setItemShortcut,
     removeShortcut = _ref.removeShortcut,
-    equipmentSet = _ref.equipmentSet;
+    equipmentSet = _ref.equipmentSet,
+    isDepotSystem = _ref.isDepotSystem,
+    onPositionChangeEnd = _ref.onPositionChangeEnd,
+    onPositionChangeStart = _ref.onPositionChangeStart;
   var _useState = useState({
       isOpen: false,
       maxQuantity: 1,
@@ -35400,7 +35486,8 @@ var ItemContainer$1 = function ItemContainer(_ref) {
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON,
         isSelectingShortcut: settingShortcutIndex !== -1,
-        equipmentSet: equipmentSet
+        equipmentSet: equipmentSet,
+        isDepotSystem: isDepotSystem
       }));
     }
     return slots;
@@ -35409,7 +35496,9 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     title: itemContainer.name || 'Container',
     onClose: onClose,
     initialPosition: initialPosition,
-    scale: scale
+    scale: scale,
+    onPositionChangeEnd: onPositionChangeEnd,
+    onPositionChangeStart: onPositionChangeStart
   }, type === ItemContainerType.Inventory && shortcuts && removeShortcut && React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,