@rpg-engine/long-bow 0.5.35 → 0.5.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.35",
+  "version": "0.5.37",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Item/Inventory/ItemContainer.tsx

@@ -6,10 +6,11 @@ import {
   ItemContainerType,
   ItemType,
 } from '@rpg-engine/shared';
-import React, { useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { SlotsContainer } from '../../Abstractions/SlotsContainer';
 
+import { useScrollOnDrag } from '../../../hooks/useScrollOnDrag';
 import { IPosition } from '../../../types/eventTypes';
 import { ShortcutsSetter } from '../../Shortcuts/ShortcutsSetter';
 import { DraggedItem } from './DraggedItem';
@@ -56,6 +57,15 @@ export interface IItemContainerProps {
   onPositionChangeStart?: (position: IPosition) => void;
 }
 
+type onDragStart =
+  | ((
+      item: IItem,
+      slotIndex: number,
+      itemContainerType: ItemContainerType | null
+    ) => void)
+  | undefined;
+type onDragEnd = ((quantity?: number) => void) | undefined;
+
 export const ItemContainer: React.FC<IItemContainerProps> = ({
   itemContainer,
   onClose,
@@ -89,12 +99,57 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   });
   const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
 
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const { startScrolling, stopScrolling } = useScrollOnDrag({
+    containerRef,
+    threshold: 50,
+    scrollStep: 4,
+  });
+
   const handleSetShortcut = (item: IItem, index: number) => {
     if (item.type === ItemType.Consumable || item.type === ItemType.Tool) {
       setItemShortcut?.(item.key, index);
     }
   };
 
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      startScrolling(e.clientY);
+    },
+    [startScrolling]
+  );
+
+  const onDragStartScrollingEvents = useCallback(() => {
+    document.addEventListener('pointermove', handleMouseMove);
+    document.addEventListener('pointerup', () => {
+      stopScrolling();
+      document.removeEventListener('pointermove', handleMouseMove);
+    });
+  }, [handleMouseMove, onItemDragStart, stopScrolling]);
+
+  const onDragEndScrollingEvents = useCallback(() => {
+    stopScrolling();
+    document.removeEventListener('pointermove', handleMouseMove);
+  }, [handleMouseMove, onItemDragStart, stopScrolling]);
+
+  const onDragStart: onDragStart = (item, slotIndex, itemContainerType) => {
+    console.log('DRAG START');
+    if (onItemDragStart) {
+      onItemDragStart(item, slotIndex, itemContainerType);
+    }
+
+    onDragStartScrollingEvents();
+  };
+
+  const onDragEnd: onDragEnd = quantity => {
+    console.log('DRAG END');
+    if (onItemDragEnd) {
+      onItemDragEnd(quantity);
+    }
+    onDragEndScrollingEvents();
+  };
+
   const onRenderSlots = () => {
     const slots = [];
 
@@ -119,13 +174,8 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
           onSelected={(optionId: string, item: IItem) => {
             if (onSelected) onSelected(optionId, item);
           }}
-          onDragStart={(item, slotIndex, itemContainerType) => {
-            if (onItemDragStart)
-              onItemDragStart(item, slotIndex, itemContainerType);
-          }}
-          onDragEnd={quantity => {
-            if (onItemDragEnd) onItemDragEnd(quantity);
-          }}
+          onDragStart={onDragStart}
+          onDragEnd={onDragEnd}
           dragScale={scale}
           checkIfItemCanBeMoved={checkIfItemCanBeMoved}
           checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
@@ -137,11 +187,22 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
             });
           }}
           onPlaceDrop={(item, slotIndex, itemContainerType) => {
-            if (onItemPlaceDrop)
+            if (onItemPlaceDrop) {
               onItemPlaceDrop(item, slotIndex, itemContainerType);
+            }
+
+            console.log('PLACE DROP');
+
+            onDragEndScrollingEvents();
           }}
           onOutsideDrop={(item, position) => {
-            if (onOutsideDrop) onOutsideDrop(item, position);
+            if (onOutsideDrop) {
+              onOutsideDrop(item, position);
+            }
+
+            console.log('OUTSIDE DROP');
+
+            onDragEndScrollingEvents();
           }}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
@@ -180,7 +241,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
               atlasJSON={atlasJSON}
             />
           )}
-        <ItemsContainer className="item-container-body">
+        <ItemsContainer className="item-container-body" ref={containerRef}>
           {onRenderSlots()}
         </ItemsContainer>
       </SlotsContainer>

package/src/components/RPGUI/RPGUIScrollbar.tsx

@@ -14,11 +14,11 @@ const Container = styled.div`
 
   .rpgui-content ::-webkit-scrollbar,
   .rpgui-content::-webkit-scrollbar {
-    width: 25px;
+    width: 25px !important;
   }
 
   .rpgui-content ::-webkit-scrollbar-track,
   .rpgui-content::-webkit-scrollbar-track {
-    background-size: 25px 60px;
+    background-size: 25px 60px !important;
   }
 `;

package/src/hooks/useScrollOnDrag.ts

@@ -0,0 +1,78 @@
+import { useCallback, useRef } from 'react';
+
+interface IUseScrollOnDragProps {
+  containerRef: React.RefObject<HTMLDivElement>;
+  threshold: number;
+  scrollStep: number;
+}
+
+export const useScrollOnDrag = ({
+  containerRef,
+  threshold,
+  scrollStep,
+}: IUseScrollOnDragProps) => {
+  const animationFrameId = useRef<number | null>(null);
+
+  const startScrolling = useCallback(
+    (clientY: number) => {
+      const scroll = () => {
+        if (containerRef.current) {
+          const { top, bottom } = containerRef.current.getBoundingClientRect();
+
+          const maxScrollTop =
+            containerRef.current.scrollHeight -
+            containerRef.current.clientHeight;
+          const distanceFromTop = clientY - top;
+          const 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 {
+            // Check if we are near the bottom of the container
+            if (containerRef.current.scrollTop >= maxScrollTop) {
+              // You can perform any action here when the scroll hits the bottom.
+            } else {
+              // Check if we are near the top of the container
+              if (containerRef.current.scrollTop <= 0) {
+                // You can perform any action here when the scroll hits the top.
+              }
+            }
+            // Stop scrolling if neither condition is met
+            stopScrolling();
+          }
+        }
+      };
+
+      const 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]
+  );
+
+  const stopScrolling = useCallback(() => {
+    if (animationFrameId.current !== null) {
+      cancelAnimationFrame(animationFrameId.current);
+      animationFrameId.current = null;
+    }
+  }, []);
+
+  return { startScrolling, stopScrolling };
+};