@rpg-engine/long-bow 0.5.24 → 0.5.27

package/dist/long-bow.esm.js

@@ -1,4 +1,4 @@
-import React, { Component, useState, useEffect, useRef, useContext, createContext, useMemo, Fragment } from 'react';
+import React, { Component, useState, useEffect, useRef, useContext, createContext, useMemo, useCallback, Fragment } from 'react';
 import styled from 'styled-components';
 import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemRarities, ItemSubType, ItemSlotType, isMobileOrTablet, CharacterClass, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
@@ -13982,8 +13982,8 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
       if (!item || isSelectingShortcut) {
         return;
       }
-      setDraggingItem(item);
       if (onDragStart && containerType) {
+        setDraggingItem(item);
         onDragStart(item, slotIndex, containerType);
       }
     },
@@ -14752,34 +14752,54 @@ var Details = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-kaa0h9-0"
 })(["font-size:", " !important;"], uiFonts.size.xsmall);
 
-var useCursorPosition = function useCursorPosition() {
+var useCursorPosition = function useCursorPosition(_ref) {
+  var _ref$scale = _ref.scale,
+    scale = _ref$scale === void 0 ? 1 : _ref$scale;
   var _useState = useState({
       x: 0,
       y: 0
     }),
     position = _useState[0],
     setPosition = _useState[1];
-  var setFromEvent = function setFromEvent(e) {
+  var scalePosition = useCallback(function (x, y) {
+    return {
+      x: (x - GRID_WIDTH / 2) / scale + GRID_WIDTH / 2,
+      y: (y - GRID_HEIGHT / 2) / scale + GRID_HEIGHT / 2
+    };
+  }, [scale]);
+  var setFromEvent = useCallback(function (e) {
+    var x, y;
     if ('touches' in e) {
-      setPosition({
-        x: e.touches[0].clientX,
-        y: e.touches[0].clientY
-      });
+      x = e.touches[0].clientX;
+      y = e.touches[0].clientY;
     } else {
-      setPosition({
-        x: e.clientX,
-        y: e.clientY
-      });
+      x = e.clientX;
+      y = e.clientY;
     }
-  };
+    var scaledPosition = scalePosition(x, y);
+    setPosition(scaledPosition);
+  }, [scale, scalePosition]);
+  var cleanup = useCallback(function () {
+    setPosition({
+      x: 0,
+      y: 0
+    });
+  }, []);
   useEffect(function () {
-    window.addEventListener('mousemove', setFromEvent);
-    window.addEventListener('touchmove', setFromEvent);
+    var handleEvent = function handleEvent(e) {
+      return setFromEvent(e);
+    };
+    window.addEventListener('mousemove', handleEvent);
+    window.addEventListener('touchmove', handleEvent);
+    window.addEventListener('mouseup', cleanup);
+    window.addEventListener('touchend', cleanup);
     return function () {
-      window.removeEventListener('mousemove', setFromEvent);
-      window.removeEventListener('touchmove', setFromEvent);
+      window.removeEventListener('mousemove', handleEvent);
+      window.removeEventListener('touchmove', handleEvent);
+      window.removeEventListener('mouseup', cleanup);
+      window.removeEventListener('touchend', cleanup);
     };
-  }, []);
+  }, [setFromEvent, cleanup]);
   return position;
 };
 
@@ -14788,15 +14808,21 @@ var OFFSET = CONTAINER_SIZE / 2;
 var DraggedItem = function DraggedItem(_ref) {
   var _item$_id, _item$stackQty;
   var atlasJSON = _ref.atlasJSON,
-    atlasIMG = _ref.atlasIMG;
+    atlasIMG = _ref.atlasIMG,
+    scale = _ref.scale;
   var _useDragging = useDragging(),
     item = _useDragging.item;
-  var _useCursorPosition = useCursorPosition(),
+  var _useCursorPosition = useCursorPosition({
+      scale: scale
+    }),
     x = _useCursorPosition.x,
     y = _useCursorPosition.y;
   if (!item) {
     return null;
   }
+  if (x === 0 && y === 0) {
+    return null;
+  }
   var centeredX = x - OFFSET;
   var centeredY = y - OFFSET;
   var stackInfo = onRenderStackInfo((_item$_id = item == null ? void 0 : item._id) != null ? _item$_id : '', (_item$stackQty = item == null ? void 0 : item.stackQty) != null ? _item$stackQty : 0);
@@ -14912,7 +14938,8 @@ var EquipmentSet = function EquipmentSet(_ref) {
   };
   return React.createElement(DraggingProvider, null, React.createElement(DraggedItem, {
     atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON
+    atlasJSON: atlasJSON,
+    scale: scale
   }), React.createElement(DraggableContainer, {
     title: 'Equipments',
     type: RPGUIContainerTypes.Framed,
@@ -15992,7 +16019,8 @@ var ItemContainer$1 = function ItemContainer(_ref) {
   };
   return React.createElement(DraggingProvider, null, React.createElement(DraggedItem, {
     atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON
+    atlasJSON: atlasJSON,
+    scale: scale
   }), React.createElement(SlotsContainer, {
     title: itemContainer.name || 'Container',
     onClose: onClose,