@rpg-engine/long-bow 0.5.26 → 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);
       }
     },
@@ -14761,10 +14761,14 @@ var useCursorPosition = function useCursorPosition(_ref) {
     }),
     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;
-    var viewportCenterX = window.innerWidth / 2 - GRID_WIDTH;
-    var viewportCenterY = window.innerHeight / -GRID_HEIGHT;
     if ('touches' in e) {
       x = e.touches[0].clientX;
       y = e.touches[0].clientY;
@@ -14772,22 +14776,30 @@ var useCursorPosition = function useCursorPosition(_ref) {
       x = e.clientX;
       y = e.clientY;
     }
-    // Adjusting for the global scale
-    // Assuming the element is centrally located
+    var scaledPosition = scalePosition(x, y);
+    setPosition(scaledPosition);
+  }, [scale, scalePosition]);
+  var cleanup = useCallback(function () {
     setPosition({
-      x: (x - viewportCenterX) / scale + viewportCenterX,
-      y: (y - viewportCenterY) / scale + viewportCenterY
+      x: 0,
+      y: 0
     });
-  };
+  }, []);
   useEffect(function () {
-    window.addEventListener('mousemove', setFromEvent);
-    window.addEventListener('touchmove', setFromEvent);
-    console.log("SCALE IS ", scale);
+    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);
     };
-  }, [scale]);
+  }, [setFromEvent, cleanup]);
   return position;
 };
 
@@ -14808,6 +14820,9 @@ var DraggedItem = function DraggedItem(_ref) {
   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);