@rpg-engine/long-bow 0.7.72 → 0.7.73

package/package.json

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

package/src/components/Equipment/EquipmentSet.tsx

@@ -2,6 +2,7 @@ import {
   IEquipmentSet,
   IItem,
   IItemContainer,
+  isMobile,
   ItemContainerType,
   ItemSlotType,
   ItemType,
@@ -10,9 +11,11 @@ import React from 'react';
 import styled from 'styled-components';
 import { IPosition } from '../../types/eventTypes';
 import { DraggableContainer } from '../DraggableContainer';
+import { ItemSlotDetailsProvider } from '../Item/Inventory/context/ItemSlotDetailsContext';
+import { ItemSlotDraggingProvider } from '../Item/Inventory/context/ItemSlotDraggingContext';
 import DraggedItem from '../Item/Inventory/DraggedItem';
 import { ItemSlot } from '../Item/Inventory/ItemSlot';
-import { DraggingProvider } from '../Item/Inventory/context/DraggingContext';
+import { ItemSlotToolTips } from '../Item/Inventory/ItemSlotTooltips';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
 
 export interface IEquipmentSetProps {
@@ -129,9 +132,6 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
           onPointerDown={(itemType, ContainerType) => {
             if (onItemClick) onItemClick(itemType, item, ContainerType);
           }}
-          onSelected={(optionId: string) => {
-            if (onSelected) onSelected(optionId);
-          }}
           onDragStart={(item, slotIndex, itemContainerType) => {
             if (!item) {
               return;
@@ -161,28 +161,45 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
   };
 
   return (
-    <DraggingProvider>
-      <DraggedItem atlasIMG={atlasIMG} atlasJSON={atlasJSON} scale={scale} />
-      <DraggableContainer
-        title={'Equipments'}
-        type={RPGUIContainerTypes.Framed}
-        onCloseButton={() => {
-          if (onClose) onClose();
-        }}
-        width="330px"
-        cancelDrag=".equipment-container-body"
-        scale={scale}
-        initialPosition={initialPosition}
-        onPositionChangeEnd={onPositionChangeEnd}
-        onPositionChangeStart={onPositionChangeStart}
-      >
-        <EquipmentSetContainer className="equipment-container-body">
-          <EquipmentColumn>{onRenderEquipmentSlotRange(0, 3)}</EquipmentColumn>
-          <EquipmentColumn>{onRenderEquipmentSlotRange(3, 7)}</EquipmentColumn>
-          <EquipmentColumn>{onRenderEquipmentSlotRange(7, 10)}</EquipmentColumn>
-        </EquipmentSetContainer>
-      </DraggableContainer>
-    </DraggingProvider>
+    <ItemSlotDraggingProvider>
+      <ItemSlotDetailsProvider>
+        <DraggedItem atlasIMG={atlasIMG} atlasJSON={atlasJSON} scale={scale} />
+        <DraggableContainer
+          title={'Equipments'}
+          type={RPGUIContainerTypes.Framed}
+          onCloseButton={() => {
+            if (onClose) onClose();
+          }}
+          width="330px"
+          cancelDrag=".equipment-container-body"
+          scale={scale}
+          initialPosition={initialPosition}
+          onPositionChangeEnd={onPositionChangeEnd}
+          onPositionChangeStart={onPositionChangeStart}
+        >
+          <EquipmentSetContainer className="equipment-container-body">
+            <EquipmentColumn>
+              {onRenderEquipmentSlotRange(0, 3)}
+            </EquipmentColumn>
+            <EquipmentColumn>
+              {onRenderEquipmentSlotRange(3, 7)}
+            </EquipmentColumn>
+            <EquipmentColumn>
+              {onRenderEquipmentSlotRange(7, 10)}
+            </EquipmentColumn>
+          </EquipmentSetContainer>
+        </DraggableContainer>
+
+        <ItemSlotToolTips
+          dragScale={scale}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          equipmentSet={equipmentSet}
+          onSelected={onSelected}
+          isContextMenuDisabled={isMobile()}
+        />
+      </ItemSlotDetailsProvider>
+    </ItemSlotDraggingProvider>
   );
 };
 

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

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { useCursorPosition } from '../../../hooks/useCursorPosition';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { onRenderStackInfo } from './ItemSlotQty/ItemSlotQty';
-import { useDragging } from './context/DraggingContext';
+import { useItemSlotDragging } from './context/ItemSlotDraggingContext';
 
 const CONTAINER_SIZE = 32;
 const OFFSET = CONTAINER_SIZE / 2;
@@ -20,7 +20,9 @@ export const DraggedItem = ({
   atlasIMG,
   scale,
 }: IProps): JSX.Element | null => {
-  const { item } = useDragging();
+  const { draggingState } = useItemSlotDragging();
+
+  const { item } = draggingState;
 
   const { x, y } = useCursorPosition({
     scale,

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

@@ -7,17 +7,19 @@ import {
   ItemSubType,
   ItemType,
 } from '@rpg-engine/shared';
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useMemo, 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 { ItemSlotDetailsProvider } from './context/ItemSlotDetailsContext';
+import { ItemSlotDraggingProvider } from './context/ItemSlotDraggingContext';
 import { DraggedItem } from './DraggedItem';
 import { ItemQuantitySelectorModal } from './ItemQuantitySelectorModal';
 import { ItemSlot } from './ItemSlot';
-import { DraggingProvider } from './context/DraggingContext';
+import { ItemSlotToolTips } from './ItemSlotTooltips';
 
 export interface IItemContainerProps {
   itemContainer: IItemContainer;
@@ -71,207 +73,272 @@ type onDragEnd = ((quantity?: number) => void) | undefined;
 
 const MIN_SLOTS_FOR_SCROLL = 20;
 
-export const ItemContainer: React.FC<IItemContainerProps> = ({
-  itemContainer,
-  onClose,
-  onMouseOver,
-  onSelected,
-  onItemClick,
-  type,
-  atlasJSON,
-  atlasIMG,
-  disableContextMenu = false,
-  onItemDragEnd,
-  onItemDragStart,
-  onItemPlaceDrop,
-  onOutsideDrop,
-  checkIfItemCanBeMoved,
-  initialPosition,
-  checkIfItemShouldDragEnd,
-  scale,
-  shortcuts,
-  setItemShortcut,
-  removeShortcut,
-  equipmentSet,
-  isDepotSystem,
-  onPositionChangeEnd,
-  onPositionChangeStart,
-  isFullScreen,
-  opacity,
-}) => {
-  const [quantitySelect, setQuantitySelect] = useState({
-    isOpen: false,
-    maxQuantity: 1,
-    callback: (_quantity: number) => {},
-  });
-  const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
+export const ItemContainer: React.FC<IItemContainerProps> = React.memo(
+  ({
+    itemContainer,
+    onClose,
+    onMouseOver,
+    onSelected,
+    onItemClick,
+    type,
+    atlasJSON,
+    atlasIMG,
+    disableContextMenu = false,
+    onItemDragEnd,
+    onItemDragStart,
+    onItemPlaceDrop,
+    onOutsideDrop,
+    checkIfItemCanBeMoved,
+    initialPosition,
+    checkIfItemShouldDragEnd,
+    scale,
+    shortcuts,
+    setItemShortcut,
+    removeShortcut,
+    equipmentSet,
+    isDepotSystem,
+    onPositionChangeEnd,
+    onPositionChangeStart,
+    isFullScreen,
+    opacity,
+  }) => {
+    const [quantitySelect, setQuantitySelect] = useState({
+      isOpen: false,
+      maxQuantity: 1,
+      callback: (_quantity: number) => {},
+    });
+    const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
 
-  const containerRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
 
-  const { startScrolling, stopScrolling } = useScrollOnDrag({
-    containerRef,
-    threshold: 50,
-    scrollStep: 4,
-  });
+    const { startScrolling, stopScrolling } = useScrollOnDrag({
+      containerRef,
+      threshold: 50,
+      scrollStep: 4,
+    });
 
-  const handleSetShortcut = (item: IItem, index: number) => {
-    if (
-      item.type === ItemType.Consumable ||
-      item.type === ItemType.Tool ||
-      item.subType === ItemSubType.Seed
-    ) {
-      setItemShortcut?.(item.key, index);
-    }
-  };
+    const handleSetShortcut = useCallback(
+      (item: IItem, index: number) => {
+        if (
+          item.type === ItemType.Consumable ||
+          item.type === ItemType.Tool ||
+          item.subType === ItemSubType.Seed
+        ) {
+          setItemShortcut?.(item.key, index);
+        }
+      },
+      [setItemShortcut]
+    );
 
-  const handleMouseMove = useCallback(
-    (e: MouseEvent) => {
-      startScrolling(e.clientY);
-    },
-    [startScrolling]
-  );
+    const handleMouseMove = useCallback(
+      (e: MouseEvent) => {
+        startScrolling(e.clientY);
+      },
+      [startScrolling]
+    );
 
-  const onDragStartScrollingEvents = useCallback(() => {
-    document.addEventListener('pointermove', handleMouseMove);
-    document.addEventListener('pointerup', () => {
+    const onDragStartScrollingEvents = useCallback(() => {
+      document.addEventListener('pointermove', handleMouseMove);
+      document.addEventListener(
+        'pointerup',
+        () => {
+          stopScrolling();
+          document.removeEventListener('pointermove', handleMouseMove);
+        },
+        { once: true }
+      );
+    }, [handleMouseMove, stopScrolling]);
+
+    const onDragEndScrollingEvents = useCallback(() => {
       stopScrolling();
       document.removeEventListener('pointermove', handleMouseMove);
-    });
-  }, [handleMouseMove, onItemDragStart, stopScrolling]);
+    }, [handleMouseMove, stopScrolling]);
 
-  const onDragEndScrollingEvents = useCallback(() => {
-    stopScrolling();
-    document.removeEventListener('pointermove', handleMouseMove);
-  }, [handleMouseMove, onItemDragStart, stopScrolling]);
+    const onDragStartHandler: onDragStart = useCallback(
+      (
+        item: IItem,
+        slotIndex: number,
+        itemContainerType: ItemContainerType | null
+      ) => {
+        if (onItemDragStart) {
+          onItemDragStart(item, slotIndex, itemContainerType);
+        }
 
-  const onDragStart: onDragStart = (item, slotIndex, itemContainerType) => {
-    if (onItemDragStart) {
-      onItemDragStart(item, slotIndex, itemContainerType);
-    }
+        onDragStartScrollingEvents();
+      },
+      [onItemDragStart, onDragStartScrollingEvents]
+    );
 
-    onDragStartScrollingEvents();
-  };
+    const onDragEndHandler: onDragEnd = useCallback(
+      (quantity: number | undefined) => {
+        if (onItemDragEnd) {
+          onItemDragEnd(quantity);
+        }
+        onDragEndScrollingEvents();
+      },
+      [onItemDragEnd, onDragEndScrollingEvents]
+    );
 
-  const onDragEnd: onDragEnd = quantity => {
-    if (onItemDragEnd) {
-      onItemDragEnd(quantity);
-    }
-    onDragEndScrollingEvents();
-  };
+    // Memoize handleSetShortcut to prevent unnecessary re-renders
+    const memoizedHandleSetShortcut = useCallback(
+      (item: IItem, index: number) => {
+        handleSetShortcut(item, index);
+      },
+      [handleSetShortcut]
+    );
 
-  const onRenderSlots = () => {
-    const slots = [];
+    // Memoize onRenderSlots to prevent re-creating the slots array on every render
+    const onRenderSlots = useMemo(() => {
+      const slots = [];
 
-    for (let i = 0; i < itemContainer.slotQty; i++) {
-      slots.push(
-        <ItemSlot
-          isContextMenuDisabled={disableContextMenu}
-          key={i}
-          slotIndex={i}
-          item={itemContainer.slots?.[i] || null}
-          itemContainerType={type}
-          onMouseOver={(event, slotIndex, item) => {
-            if (onMouseOver) onMouseOver(event, slotIndex, item);
-          }}
-          onPointerDown={(itemType, containerType, item) => {
-            if (settingShortcutIndex !== -1) {
-              setSettingShortcutIndex(-1);
+      for (let i = 0; i < itemContainer.slotQty; i++) {
+        const currentItem = itemContainer.slots?.[i] || null;
 
-              handleSetShortcut(item, settingShortcutIndex);
-            } else if (onItemClick) {
-              onItemClick(item, itemType, containerType);
-            }
-          }}
-          onSelected={(optionId: string, item: IItem) => {
-            if (onSelected) onSelected(optionId, item);
-          }}
-          onDragStart={onDragStart}
-          onDragEnd={onDragEnd}
-          dragScale={scale}
-          checkIfItemCanBeMoved={checkIfItemCanBeMoved}
-          checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
-          openQuantitySelector={(maxQuantity, callback) => {
-            setQuantitySelect({
-              isOpen: true,
-              maxQuantity,
-              callback,
-            });
-          }}
-          onPlaceDrop={(item, slotIndex, itemContainerType) => {
-            if (onItemPlaceDrop) {
-              onItemPlaceDrop(item, slotIndex, itemContainerType);
+        slots.push(
+          <ItemSlot
+            key={i}
+            slotIndex={i}
+            item={currentItem}
+            itemContainerType={type}
+            onMouseOver={
+              onMouseOver
+                ? (event, slotIndex, item) =>
+                    onMouseOver(event, slotIndex, item)
+                : undefined
             }
+            onMouseOut={undefined} // Assuming you don't need onMouseOut here
+            onPointerDown={(itemType, containerType, item) => {
+              if (settingShortcutIndex !== -1) {
+                setSettingShortcutIndex(-1);
+                memoizedHandleSetShortcut(item, settingShortcutIndex);
+              } else if (onItemClick) {
+                onItemClick(item, itemType, containerType);
+              }
+            }}
+            onDragStart={onDragStartHandler}
+            onDragEnd={onDragEndHandler}
+            dragScale={scale}
+            checkIfItemCanBeMoved={checkIfItemCanBeMoved}
+            checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
+            openQuantitySelector={(maxQuantity, callback) => {
+              setQuantitySelect({
+                isOpen: true,
+                maxQuantity,
+                callback,
+              });
+            }}
+            onPlaceDrop={(item, slotIndex, itemContainerType) => {
+              if (onItemPlaceDrop) {
+                onItemPlaceDrop(item, slotIndex, itemContainerType);
+              }
 
-            console.log('PLACE DROP');
+              console.log('PLACE DROP');
 
-            onDragEndScrollingEvents();
-          }}
-          onOutsideDrop={(item, position) => {
-            if (onOutsideDrop) {
-              onOutsideDrop(item, position);
-            }
+              onDragEndScrollingEvents();
+            }}
+            onOutsideDrop={(item, position) => {
+              if (onOutsideDrop) {
+                onOutsideDrop(item, position);
+              }
 
-            console.log('OUTSIDE DROP');
+              console.log('OUTSIDE DROP');
 
-            onDragEndScrollingEvents();
-          }}
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          isSelectingShortcut={settingShortcutIndex !== -1}
-          equipmentSet={equipmentSet}
-          setItemShortcut={
-            type === ItemContainerType.Inventory ? handleSetShortcut : undefined
-          }
-          isDepotSystem={isDepotSystem}
-        />
-      );
-    }
-    return slots;
-  };
+              onDragEndScrollingEvents();
+            }}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            isSelectingShortcut={settingShortcutIndex !== -1}
+            equipmentSet={equipmentSet}
+            setItemShortcut={
+              type === ItemContainerType.Inventory
+                ? memoizedHandleSetShortcut
+                : undefined
+            }
+            isDepotSystem={isDepotSystem}
+          />
+        );
+      }
+      return slots;
+    }, [
+      itemContainer.slotQty,
+      itemContainer.slots,
+      type,
+      onMouseOver,
+      settingShortcutIndex,
+      memoizedHandleSetShortcut,
+      onItemClick,
+      onDragStartHandler,
+      onDragEndHandler,
+      scale,
+      checkIfItemCanBeMoved,
+      checkIfItemShouldDragEnd,
+      onItemPlaceDrop,
+      onOutsideDrop,
+      atlasIMG,
+      atlasJSON,
+      equipmentSet,
+      isDepotSystem,
+      onDragEndScrollingEvents,
+    ]);
 
-  return (
-    <DraggingProvider>
-      <DraggedItem atlasIMG={atlasIMG} atlasJSON={atlasJSON} scale={scale} />
-      <SlotsContainer
-        title={itemContainer.name || 'Container'}
-        onClose={onClose}
-        initialPosition={initialPosition}
-        scale={scale}
-        onPositionChangeEnd={onPositionChangeEnd}
-        onPositionChangeStart={onPositionChangeStart}
-        isFullScreen={isFullScreen}
-        opacity={opacity}
-      >
-        {type === ItemContainerType.Inventory &&
-          shortcuts &&
-          removeShortcut && (
-            <ShortcutsSetter
-              setSettingShortcutIndex={setSettingShortcutIndex}
-              settingShortcutIndex={settingShortcutIndex}
-              shortcuts={shortcuts}
-              removeShortcut={removeShortcut}
-              atlasIMG={atlasIMG}
-              atlasJSON={atlasJSON}
+    return (
+      <ItemSlotDraggingProvider>
+        <ItemSlotDetailsProvider>
+          <DraggedItem
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            scale={scale}
+          />
+          <SlotsContainer
+            title={itemContainer.name || 'Container'}
+            onClose={onClose}
+            initialPosition={initialPosition}
+            scale={scale}
+            onPositionChangeEnd={onPositionChangeEnd}
+            onPositionChangeStart={onPositionChangeStart}
+            isFullScreen={isFullScreen}
+            opacity={opacity}
+          >
+            {type === ItemContainerType.Inventory &&
+              shortcuts &&
+              removeShortcut && (
+                <ShortcutsSetter
+                  setSettingShortcutIndex={setSettingShortcutIndex}
+                  settingShortcutIndex={settingShortcutIndex}
+                  shortcuts={shortcuts}
+                  removeShortcut={removeShortcut}
+                  atlasIMG={atlasIMG}
+                  atlasJSON={atlasJSON}
+                />
+              )}
+            <ItemsContainer
+              className="item-container-body"
+              ref={containerRef}
+              isScrollable={itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL}
+              isFullScreen={isFullScreen}
+            >
+              {onRenderSlots}
+            </ItemsContainer>
+          </SlotsContainer>
+          {quantitySelect.isOpen && (
+            <ItemQuantitySelectorModal
+              quantitySelect={quantitySelect}
+              setQuantitySelect={setQuantitySelect}
             />
           )}
-        <ItemsContainer
-          className="item-container-body"
-          ref={containerRef}
-          isScrollable={itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL}
-          isFullScreen={isFullScreen}
-        >
-          {onRenderSlots()}
-        </ItemsContainer>
-      </SlotsContainer>
-      {quantitySelect.isOpen && (
-        <ItemQuantitySelectorModal
-          quantitySelect={quantitySelect}
-          setQuantitySelect={setQuantitySelect}
-        />
-      )}
-    </DraggingProvider>
-  );
-};
+          <ItemSlotToolTips
+            dragScale={scale}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            equipmentSet={equipmentSet}
+            isContextMenuDisabled={disableContextMenu}
+            onSelected={onSelected}
+          />
+        </ItemSlotDetailsProvider>
+      </ItemSlotDraggingProvider>
+    );
+  }
+);
 
 interface IItemsContainerProps {
   isScrollable: boolean;