@rpg-engine/long-bow 0.5.35 → 0.5.37

package/dist/long-bow.esm.js

@@ -15666,6 +15666,54 @@ var SlotsContainer = function SlotsContainer(_ref) {
   }, children);
 };
 
+var useScrollOnDrag = function useScrollOnDrag(_ref) {
+  var containerRef = _ref.containerRef,
+    threshold = _ref.threshold,
+    scrollStep = _ref.scrollStep;
+  var animationFrameId = useRef(null);
+  var startScrolling = useCallback(function (clientY) {
+    var scroll = function scroll() {
+      if (containerRef.current) {
+        var _containerRef$current = containerRef.current.getBoundingClientRect(),
+          top = _containerRef$current.top,
+          bottom = _containerRef$current.bottom;
+        var maxScrollTop = containerRef.current.scrollHeight - containerRef.current.clientHeight;
+        var distanceFromTop = clientY - top;
+        var distanceFromBottom = bottom - clientY;
+        if (distanceFromTop < threshold && containerRef.current.scrollTop > 0) {
+          containerRef.current.scrollTop -= scrollStep;
+          animationFrameId.current = requestAnimationFrame(scroll);
+        } else if (distanceFromBottom < threshold && containerRef.current.scrollTop < maxScrollTop) {
+          containerRef.current.scrollTop += scrollStep;
+          animationFrameId.current = requestAnimationFrame(scroll);
+        } else {
+          // Stop scrolling if neither condition is met
+          stopScrolling();
+        }
+      }
+    };
+    var stopScrolling = function stopScrolling() {
+      if (animationFrameId.current !== null) {
+        cancelAnimationFrame(animationFrameId.current);
+        animationFrameId.current = null;
+      }
+    };
+    //@ts-ignore
+    cancelAnimationFrame(animationFrameId.current); // Cancel any existing animation frame
+    animationFrameId.current = requestAnimationFrame(scroll);
+  }, [containerRef, threshold, scrollStep]);
+  var stopScrolling = useCallback(function () {
+    if (animationFrameId.current !== null) {
+      cancelAnimationFrame(animationFrameId.current);
+      animationFrameId.current = null;
+    }
+  }, []);
+  return {
+    startScrolling: startScrolling,
+    stopScrolling: stopScrolling
+  };
+};
+
 var ShortcutsSetter = function ShortcutsSetter(_ref) {
   var setSettingShortcutIndex = _ref.setSettingShortcutIndex,
     settingShortcutIndex = _ref.settingShortcutIndex,
@@ -15968,11 +16016,47 @@ var ItemContainer$1 = function ItemContainer(_ref) {
   var _useState2 = useState(-1),
     settingShortcutIndex = _useState2[0],
     setSettingShortcutIndex = _useState2[1];
+  var containerRef = useRef(null);
+  var _useScrollOnDrag = useScrollOnDrag({
+      containerRef: containerRef,
+      threshold: 50,
+      scrollStep: 4
+    }),
+    startScrolling = _useScrollOnDrag.startScrolling,
+    stopScrolling = _useScrollOnDrag.stopScrolling;
   var handleSetShortcut = function handleSetShortcut(item, index) {
     if (item.type === ItemType.Consumable || item.type === ItemType.Tool) {
       setItemShortcut == null ? void 0 : setItemShortcut(item.key, index);
     }
   };
+  var handleMouseMove = useCallback(function (e) {
+    startScrolling(e.clientY);
+  }, [startScrolling]);
+  var onDragStartScrollingEvents = useCallback(function () {
+    document.addEventListener('pointermove', handleMouseMove);
+    document.addEventListener('pointerup', function () {
+      stopScrolling();
+      document.removeEventListener('pointermove', handleMouseMove);
+    });
+  }, [handleMouseMove, onItemDragStart, stopScrolling]);
+  var onDragEndScrollingEvents = useCallback(function () {
+    stopScrolling();
+    document.removeEventListener('pointermove', handleMouseMove);
+  }, [handleMouseMove, onItemDragStart, stopScrolling]);
+  var onDragStart = function onDragStart(item, slotIndex, itemContainerType) {
+    console.log('DRAG START');
+    if (onItemDragStart) {
+      onItemDragStart(item, slotIndex, itemContainerType);
+    }
+    onDragStartScrollingEvents();
+  };
+  var onDragEnd = function onDragEnd(quantity) {
+    console.log('DRAG END');
+    if (onItemDragEnd) {
+      onItemDragEnd(quantity);
+    }
+    onDragEndScrollingEvents();
+  };
   var onRenderSlots = function onRenderSlots() {
     var slots = [];
     for (var i = 0; i < itemContainer.slotQty; i++) {
@@ -15995,12 +16079,8 @@ var ItemContainer$1 = function ItemContainer(_ref) {
         onSelected: function onSelected(optionId, item) {
           if (_onSelected) _onSelected(optionId, item);
         },
-        onDragStart: function onDragStart(item, slotIndex, itemContainerType) {
-          if (onItemDragStart) onItemDragStart(item, slotIndex, itemContainerType);
-        },
-        onDragEnd: function onDragEnd(quantity) {
-          if (onItemDragEnd) onItemDragEnd(quantity);
-        },
+        onDragStart: onDragStart,
+        onDragEnd: onDragEnd,
         dragScale: scale,
         checkIfItemCanBeMoved: checkIfItemCanBeMoved,
         checkIfItemShouldDragEnd: checkIfItemShouldDragEnd,
@@ -16012,10 +16092,18 @@ var ItemContainer$1 = function ItemContainer(_ref) {
           });
         },
         onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
-          if (onItemPlaceDrop) onItemPlaceDrop(item, slotIndex, itemContainerType);
+          if (onItemPlaceDrop) {
+            onItemPlaceDrop(item, slotIndex, itemContainerType);
+          }
+          console.log('PLACE DROP');
+          onDragEndScrollingEvents();
         },
         onOutsideDrop: function onOutsideDrop(item, position) {
-          if (_onOutsideDrop) _onOutsideDrop(item, position);
+          if (_onOutsideDrop) {
+            _onOutsideDrop(item, position);
+          }
+          console.log('OUTSIDE DROP');
+          onDragEndScrollingEvents();
         },
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON,
@@ -16046,7 +16134,8 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON
   }), React.createElement(ItemsContainer, {
-    className: "item-container-body"
+    className: "item-container-body",
+    ref: containerRef
   }, onRenderSlots())), quantitySelect.isOpen && React.createElement(ItemQuantitySelectorModal, {
     quantitySelect: quantitySelect,
     setQuantitySelect: setQuantitySelect
@@ -17448,7 +17537,7 @@ var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
 var Container$o = /*#__PURE__*/styled.div.withConfig({
   displayName: "RPGUIScrollbar__Container",
   componentId: "sc-p3msmb-0"
-})([".rpgui-content ::-webkit-scrollbar,.rpgui-content::-webkit-scrollbar{width:25px;}.rpgui-content ::-webkit-scrollbar-track,.rpgui-content::-webkit-scrollbar-track{background-size:25px 60px;}"]);
+})([".rpgui-content ::-webkit-scrollbar,.rpgui-content::-webkit-scrollbar{width:25px !important;}.rpgui-content ::-webkit-scrollbar-track,.rpgui-content::-webkit-scrollbar-track{background-size:25px 60px !important;}"]);
 
 var RPGUIOverrides = function RPGUIOverrides(_ref) {
   var children = _ref.children;