@rpg-engine/long-bow 0.5.36 → 0.5.38

package/dist/hooks/useScrollOnDrag.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface IUseScrollOnDragProps {
+    containerRef: React.RefObject<HTMLDivElement>;
+    threshold: number;
+    scrollStep: number;
+}
+export declare const useScrollOnDrag: ({ containerRef, threshold, scrollStep, }: IUseScrollOnDragProps) => {
+    startScrolling: (clientY: number) => void;
+    stopScrolling: () => void;
+};
+export {};

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

@@ -14020,7 +14020,8 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     onStart: onDraggableStart,
     onDrag: onDraggableProgress,
     position: dragPosition,
-    cancel: ".empty-slot"
+    cancel: ".empty-slot",
+    bounds: ".item-container-body"
   }, React__default.createElement(ItemContainer, {
     ref: dragContainer,
     isFocused: isFocused,
@@ -15669,6 +15670,54 @@ var SlotsContainer = function SlotsContainer(_ref) {
   }, children);
 };
 
+var useScrollOnDrag = function useScrollOnDrag(_ref) {
+  var containerRef = _ref.containerRef,
+    threshold = _ref.threshold,
+    scrollStep = _ref.scrollStep;
+  var animationFrameId = React.useRef(null);
+  var startScrolling = React.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 = React.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,
@@ -15970,11 +16019,47 @@ var ItemContainer$1 = function ItemContainer(_ref) {
   var _useState2 = React.useState(-1),
     settingShortcutIndex = _useState2[0],
     setSettingShortcutIndex = _useState2[1];
+  var containerRef = React.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 === shared.ItemType.Consumable || item.type === shared.ItemType.Tool) {
       setItemShortcut == null ? void 0 : setItemShortcut(item.key, index);
     }
   };
+  var handleMouseMove = React.useCallback(function (e) {
+    startScrolling(e.clientY);
+  }, [startScrolling]);
+  var onDragStartScrollingEvents = React.useCallback(function () {
+    document.addEventListener('pointermove', handleMouseMove);
+    document.addEventListener('pointerup', function () {
+      stopScrolling();
+      document.removeEventListener('pointermove', handleMouseMove);
+    });
+  }, [handleMouseMove, onItemDragStart, stopScrolling]);
+  var onDragEndScrollingEvents = React.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++) {
@@ -15997,12 +16082,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,
@@ -16014,10 +16095,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,
@@ -16048,7 +16137,8 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON
   }), React__default.createElement(ItemsContainer, {
-    className: "item-container-body"
+    className: "item-container-body",
+    ref: containerRef
   }, onRenderSlots())), quantitySelect.isOpen && React__default.createElement(ItemQuantitySelectorModal, {
     quantitySelect: quantitySelect,
     setQuantitySelect: setQuantitySelect