@rpg-engine/long-bow 0.7.39 → 0.7.41

package/package.json

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

package/src/components/Equipment/EquipmentSet.tsx

@@ -193,6 +193,7 @@ const EquipmentSetContainer = styled.div`
   flex-wrap: wrap;
   flex-direction: row;
   touch-action: none;
+  overflow: hidden;
 `;
 
 const EquipmentColumn = styled.div`

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

@@ -180,7 +180,9 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
               setSettingShortcutIndex(-1);
 
               handleSetShortcut(item, settingShortcutIndex);
-            } else if (onItemClick) onItemClick(item, itemType, containerType);
+            } else if (onItemClick) {
+              onItemClick(item, itemType, containerType);
+            }
           }}
           onSelected={(optionId: string, item: IItem) => {
             if (onSelected) onSelected(optionId, item);

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

@@ -9,7 +9,7 @@ import {
 } from '@rpg-engine/shared';
 
 import { observer } from 'mobx-react-lite';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Draggable, { DraggableEventHandler } from 'react-draggable';
 import styled from 'styled-components';
 import { IPosition } from '../../../types/eventTypes';
@@ -77,299 +77,361 @@ interface IProps {
   isDepotSystem?: boolean;
 }
 
-export const ItemSlot: React.FC<IProps> = observer(
-  ({
-    slotIndex,
-    item,
-    itemContainerType: containerType,
-    slotSpriteMask,
-    onMouseOver,
-    onMouseOut,
-    onPointerDown,
-    onSelected,
-    atlasJSON,
-    atlasIMG,
-    isContextMenuDisabled = false,
-    onDragEnd,
-    onDragStart,
-    onPlaceDrop,
-    onOutsideDrop: onDrop,
-    checkIfItemCanBeMoved,
-    openQuantitySelector,
-    checkIfItemShouldDragEnd,
-    dragScale,
-    isSelectingShortcut,
-    equipmentSet,
-    setItemShortcut,
-    isDepotSystem,
-  }) => {
-    const [isTooltipVisible, setTooltipVisible] = useState(false);
-    const [isTooltipMobileVisible, setIsTooltipMobileVisible] = useState(false);
-
-    const [isContextMenuVisible, setIsContextMenuVisible] = useState(false);
-    const [contextMenuPosition, setContextMenuPosition] = useState({
-      x: 0,
-      y: 0,
-    });
-
-    const [isFocused, setIsFocused] = useState(false);
-    const [wasDragged, setWasDragged] = useState(false);
-    const [dragPosition, setDragPosition] = useState<IPosition>({ x: 0, y: 0 });
-    const [dropPosition, setDropPosition] = useState<IPosition | null>(null);
-    const dragContainer = useRef<HTMLDivElement>(null);
-
-    const { item: draggingItem, setDraggingItem } = useDragging();
-
-    const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
-      []
-    );
-
-    useEffect(() => {
-      setDragPosition({ x: 0, y: 0 });
-      setIsFocused(false);
-
-      if (item && containerType) {
-        setContextActions(
-          generateContextMenu(item, containerType, isDepotSystem)
-        );
-      }
-    }, [item, isDepotSystem]);
-
-    useEffect(() => {
-      if (onDrop && item && dropPosition) {
-        onDrop(item, dropPosition);
-      }
-    }, [dropPosition]);
+export type TooltipState = {
+  visible: boolean;
+  mobileVisible: boolean;
+};
 
-    const resetItem = () => {
-      setTooltipVisible(false);
-      setWasDragged(false);
-    };
+export type ContextMenuState = {
+  position: IPosition;
+  visible: boolean;
+};
 
-    const onSuccessfulDrag = (quantity?: number) => {
-      resetItem();
+export type DragState = {
+  isFocused: boolean;
+  wasDragged: boolean;
+  position: IPosition;
+  dropPosition: IPosition | null;
+};
 
-      if (quantity === -1) {
-        setDragPosition({ x: 0, y: 0 });
-        setIsFocused(false);
-      } else if (item) {
-        onDragEnd?.(quantity);
-      }
-    };
+export const ItemSlot = React.memo(
+  observer(
+    ({
+      slotIndex,
+      item,
+      itemContainerType: containerType,
+      slotSpriteMask,
+      onMouseOver,
+      onMouseOut,
+      onPointerDown,
+      onSelected,
+      atlasJSON,
+      atlasIMG,
+      isContextMenuDisabled = false,
+      onDragEnd,
+      onDragStart,
+      onPlaceDrop,
+      onOutsideDrop: onDrop,
+      checkIfItemCanBeMoved,
+      openQuantitySelector,
+      checkIfItemShouldDragEnd,
+      dragScale,
+      isSelectingShortcut,
+      equipmentSet,
+      setItemShortcut,
+      isDepotSystem,
+    }: IProps): JSX.Element => {
+      const [tooltipState, setTooltipState] = useState<TooltipState>({
+        visible: false,
+        mobileVisible: false,
+      });
+      const [contextMenuState, setContextMenuState] = useState<
+        ContextMenuState
+      >({
+        visible: false,
+        position: { x: 0, y: 0 },
+      });
+      const [dragState, setDragState] = useState<DragState>({
+        isFocused: false,
+        wasDragged: false,
+        position: { x: 0, y: 0 },
+        dropPosition: null,
+      });
+      const dragContainer = useRef<HTMLDivElement>(null);
+      const { item: draggingItem, setDraggingItem } = useDragging();
+      const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
+        []
+      );
+
+      useEffect(() => {
+        setDragState(prev => ({
+          ...prev,
+          position: { x: 0, y: 0 },
+          isFocused: false,
+        }));
+
+        if (item && containerType) {
+          setContextActions(
+            generateContextMenu(item, containerType, isDepotSystem)
+          );
+        }
+      }, [item, isDepotSystem]);
+
+      useEffect(() => {
+        if (onDrop && item && dragState.dropPosition) {
+          onDrop(item, dragState.dropPosition);
+          setDragState(prev => ({
+            ...prev,
+            dropPosition: null,
+          }));
+        }
+      }, [dragState.dropPosition]);
+
+      const getContainerBounds = useCallback(() => {
+        const container = dragContainer.current;
+        if (!container) return { left: 0, top: 0, right: 0, bottom: 0 };
+        const rect = container.getBoundingClientRect();
+        return {
+          left: rect.left,
+          top: rect.top,
+          right: window.innerWidth - rect.right,
+          bottom: window.innerHeight - rect.bottom,
+        };
+      }, [dragContainer]);
+
+      const resetItem = () => {
+        setTooltipState(prev => ({ ...prev, visible: false }));
+        setDragState(prev => ({ ...prev, wasDragged: false }));
+      };
+
+      const onSuccessfulDrag = (quantity?: number) => {
+        resetItem();
+
+        if (quantity === -1) {
+          setDragState(prev => ({
+            ...prev,
+            position: { x: 0, y: 0 },
+            isFocused: false,
+          }));
+        } else if (item) {
+          onDragEnd?.(quantity);
+        }
+      };
 
-    const onDraggableStop: DraggableEventHandler = (e, data) => {
-      setDraggingItem(null);
+      const onDraggableStop: DraggableEventHandler = (e, data) => {
+        setDraggingItem(null);
 
-      const target = e.target as HTMLElement;
+        const target = e.target as HTMLElement;
+        if (!target) return;
 
-      if (target?.id.includes('shortcutSetter') && setItemShortcut && item) {
-        const index = parseInt(target.id.split('_')[1]);
-        if (!isNaN(index)) {
-          setItemShortcut(item, index);
+        if (target?.id.includes('shortcutSetter') && setItemShortcut && item) {
+          const index = parseInt(target.id.split('_')[1]);
+          if (!isNaN(index)) {
+            setItemShortcut(item, index);
+          }
         }
-      }
 
-      // remove the class react-draggable-dragging from the element
-      // to prevent the item from being dragged again
+        // remove the class react-draggable-dragging from the element
+        // to prevent the item from being dragged again
+        target.classList.remove('react-draggable-dragging');
 
-      target.classList.remove('react-draggable-dragging');
+        if (dragState.wasDragged && item && !isSelectingShortcut) {
+          //@ts-ignore
+          const classes: string[] = Array.from(e.target?.classList);
 
-      if (wasDragged && item && !isSelectingShortcut) {
-        //@ts-ignore
-        const classes: string[] = Array.from(e.target?.classList);
+          const isOutsideDrop =
+            classes.some(elm => {
+              return elm.includes('rpgui-content');
+            }) || classes.length === 0;
 
-        const isOutsideDrop =
-          classes.some(elm => {
-            return elm.includes('rpgui-content');
-          }) || classes.length === 0;
-
-        if (isOutsideDrop) {
-          setDropPosition({
-            x: data.x,
-            y: data.y,
-          });
-        }
+          if (isOutsideDrop) {
+            setDragState(prev => ({
+              ...prev,
+              dropPosition: { x: data.x, y: data.y },
+            }));
+          }
 
-        setWasDragged(false);
+          setDragState(prev => ({ ...prev, wasDragged: false }));
+
+          const target = dragContainer.current;
+          if (!target || !dragState.wasDragged) return;
+
+          const style = window.getComputedStyle(target);
+          const matrix = new DOMMatrixReadOnly(style.transform);
+          const x = matrix.m41;
+          const y = matrix.m42;
+
+          setDragState(prev => ({
+            ...prev,
+            position: { x, y },
+          }));
+
+          setTimeout(() => {
+            if (checkIfItemCanBeMoved && checkIfItemCanBeMoved()) {
+              if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd())
+                return;
+              if (
+                item.stackQty &&
+                item.stackQty !== 1 &&
+                openQuantitySelector
+              ) {
+                openQuantitySelector(item.stackQty, onSuccessfulDrag);
+              } else onSuccessfulDrag(item.stackQty);
+            } else {
+              resetItem();
+              setDragState(prev => ({
+                ...prev,
+                isFocused: false,
+                position: { x: 0, y: 0 },
+              }));
+            }
+          }, 50);
+        } else if (item) {
+          let isTouch = false;
+          if (
+            !isContextMenuDisabled &&
+            e.type === 'touchend' &&
+            !isSelectingShortcut
+          ) {
+            isTouch = true;
+            setTooltipState(prev => ({ ...prev, mobileVisible: true }));
+          }
 
-        const target = dragContainer.current;
-        if (!target || !wasDragged) return;
+          if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
+            setContextMenuState(prev => ({
+              ...prev,
+              visible: !contextMenuState.visible,
+            }));
+
+            const event = e as MouseEvent;
+
+            if (event.clientX && event.clientY) {
+              setContextMenuState(prev => ({
+                ...prev,
+                position: {
+                  x: event.clientX - 10,
+                  y: event.clientY - 5,
+                },
+              }));
+            }
+          }
 
-        const style = window.getComputedStyle(target);
-        const matrix = new DOMMatrixReadOnly(style.transform);
-        const x = matrix.m41;
-        const y = matrix.m42;
+          onPointerDown(item.type, containerType ?? null, item);
+        }
+      };
 
-        setDragPosition({ x, y });
+      const onDraggableStart: DraggableEventHandler = () => {
+        if (!item || isSelectingShortcut) {
+          return;
+        }
 
-        setTimeout(() => {
-          if (checkIfItemCanBeMoved?.()) {
-            if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) return;
+        if (onDragStart && containerType) {
+          onDragStart(item, slotIndex, containerType);
+        }
+      };
 
-            if (item.stackQty && item.stackQty !== 1 && openQuantitySelector)
-              openQuantitySelector(item.stackQty, onSuccessfulDrag);
-            else onSuccessfulDrag(item.stackQty);
-          } else {
-            resetItem();
-            setIsFocused(false);
-            setDragPosition({ x: 0, y: 0 });
-          }
-        }, 50);
-      } else if (item) {
-        let isTouch = false;
+      const onDraggableProgress: DraggableEventHandler = (_e, data) => {
         if (
-          !isContextMenuDisabled &&
-          e.type === 'touchend' &&
-          !isSelectingShortcut
+          Math.abs(data.x - dragState.position.x) > 5 ||
+          Math.abs(data.y - dragState.position.y) > 5
         ) {
-          isTouch = true;
-          setIsTooltipMobileVisible(true);
+          setDragState(prev => ({
+            ...prev,
+            wasDragged: true,
+            isFocused: true,
+          }));
         }
 
-        if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
-          setIsContextMenuVisible(!isContextMenuVisible);
-          const event = e as MouseEvent;
-
-          if (event.clientX && event.clientY) {
-            setContextMenuPosition({
-              x: event.clientX - 10,
-              y: event.clientY - 5,
-            });
-          }
+        if (!draggingItem) {
+          setDraggingItem(item);
         }
+      };
 
-        onPointerDown(item.type, containerType ?? null, item);
-      }
-    };
-
-    const onDraggableStart: DraggableEventHandler = () => {
-      if (!item || isSelectingShortcut) {
-        return;
-      }
-
-      if (onDragStart && containerType) {
-        onDragStart(item, slotIndex, containerType);
-      }
-    };
-
-    const onDraggableProgress: DraggableEventHandler = (_e, data) => {
-      if (
-        Math.abs(data.x - dragPosition.x) > 5 ||
-        Math.abs(data.y - dragPosition.y) > 5
-      ) {
-        setWasDragged(true);
-        setIsFocused(true);
-      }
+      const bounds = getContainerBounds();
+      return (
+        <Container
+          isDraggingItem={!!draggingItem}
+          item={item}
+          className="rpgui-icon empty-slot"
+          onMouseUp={() => {
+            const data = item ? item : null;
+            if (onPlaceDrop && containerType) {
+              onPlaceDrop(data, slotIndex, containerType);
+            }
+          }}
+          onTouchEnd={e => {
+            const { clientX, clientY } = e.changedTouches[0];
+            const simulatedEvent = new MouseEvent('mouseup', {
+              clientX,
+              clientY,
+              bubbles: true,
+            });
 
-      if (!draggingItem) {
-        setDraggingItem(item);
-      }
-    };
-
-    return (
-      <Container
-        isDraggingItem={!!draggingItem}
-        item={item}
-        className="rpgui-icon empty-slot"
-        onMouseUp={() => {
-          const data = item ? item : null;
-          if (onPlaceDrop && containerType)
-            onPlaceDrop(data, slotIndex, containerType);
-        }}
-        onTouchEnd={e => {
-          const { clientX, clientY } = e.changedTouches[0];
-          const simulatedEvent = new MouseEvent('mouseup', {
-            clientX,
-            clientY,
-            bubbles: true,
-          });
-
-          document
-            .elementFromPoint(clientX, clientY)
-            ?.dispatchEvent(simulatedEvent);
-        }}
-        onPointerDown={
-          onDragStart !== undefined && onDragEnd !== undefined
-            ? undefined
-            : () => {
-                if (item) onPointerDown(item.type, containerType ?? null, item);
-              }
-        }
-        isSelectingShortcut={
-          isSelectingShortcut &&
-          (item?.type === ItemType.Consumable ||
-            item?.type === ItemType.Tool ||
-            item?.subType === ItemSubType.Seed)
-        }
-      >
-        <Draggable
-          axis={isSelectingShortcut ? 'none' : 'both'}
-          defaultClassName={item ? 'draggable' : 'empty-slot'}
-          scale={dragScale}
-          disabled={onDragStart === undefined || onDragEnd === undefined}
-          onStop={onDraggableStop}
-          onStart={onDraggableStart}
-          onDrag={onDraggableProgress}
-          position={dragPosition}
-          cancel=".empty-slot"
-          bounds=".item-container-body, .equipment-container-body"
+            document
+              .elementFromPoint(clientX, clientY)
+              ?.dispatchEvent(simulatedEvent);
+          }}
+          onPointerDown={
+            onDragStart !== undefined && onDragEnd !== undefined
+              ? undefined
+              : () => {
+                  if (item)
+                    onPointerDown(item.type, containerType ?? null, item);
+                }
+          }
+          isSelectingShortcut={
+            isSelectingShortcut &&
+            (item?.type === ItemType.Consumable ||
+              item?.type === ItemType.Tool ||
+              item?.subType === ItemSubType.Seed)
+          }
         >
-          <ItemContainer
-            ref={dragContainer}
-            isFocused={isFocused}
-            onMouseOver={event => {
-              onMouseOver?.(
-                event,
-                slotIndex,
-                item,
-                event.clientX,
-                event.clientY
-              );
-            }}
-            onMouseOut={() => {
-              if (onMouseOut) onMouseOut();
-            }}
-            onMouseEnter={() => {
-              setTooltipVisible(true);
-            }}
-            onMouseLeave={() => {
-              setTooltipVisible(false);
-            }}
+          <Draggable
+            axis={isSelectingShortcut ? 'none' : 'both'}
+            defaultClassName={item ? 'draggable' : 'empty-slot'}
+            scale={dragScale}
+            disabled={onDragStart === undefined || onDragEnd === undefined}
+            onStop={onDraggableStop}
+            onStart={onDraggableStart}
+            onDrag={onDraggableProgress}
+            position={dragState.position}
+            cancel=".empty-slot"
+            bounds={bounds}
           >
-            <ItemSlotRenderer
-              item={item}
-              slotSpriteMask={slotSpriteMask}
-              atlasIMG={atlasIMG}
-              atlasJSON={atlasJSON}
-              containerType={containerType}
-            />
-          </ItemContainer>
-        </Draggable>
-
-        <ItemSlotToolTips
-          isTooltipVisible={isTooltipVisible}
-          isTooltipMobileVisible={isTooltipMobileVisible}
-          setIsTooltipMobileVisible={setIsTooltipMobileVisible}
-          isFocused={isFocused}
-          isContextMenuVisible={isContextMenuVisible}
-          isContextMenuDisabled={isContextMenuDisabled}
-          item={item}
-          contextActions={contextActions}
-          contextMenuPosition={contextMenuPosition}
-          dragScale={dragScale}
-          setIsContextMenuVisible={setIsContextMenuVisible}
-          onSelected={(optionId: string, item: IItem) => {
-            setIsContextMenuVisible(false);
-            if (onSelected) onSelected(optionId, item);
-          }}
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          equipmentSet={equipmentSet}
-          setIsTooltipVisible={setTooltipVisible}
-        />
-      </Container>
-    );
-  }
+            <ItemContainer
+              ref={dragContainer}
+              isFocused={dragState.isFocused}
+              onMouseOver={event => {
+                onMouseOver?.(
+                  event,
+                  slotIndex,
+                  item,
+                  event.clientX,
+                  event.clientY
+                );
+              }}
+              onMouseOut={() => {
+                if (onMouseOut) onMouseOut();
+              }}
+              onMouseEnter={() => {
+                setTooltipState(prev => ({ ...prev, visible: true }));
+              }}
+              onMouseLeave={() => {
+                setTooltipState(prev => ({ ...prev, visible: false }));
+              }}
+            >
+              <ItemSlotRenderer
+                item={item}
+                slotSpriteMask={slotSpriteMask}
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                containerType={containerType}
+              />
+            </ItemContainer>
+          </Draggable>
+
+          <ItemSlotToolTips
+            tooltipState={tooltipState}
+            setTooltipState={setTooltipState}
+            contextMenuState={contextMenuState}
+            setContextMenuState={setContextMenuState}
+            isFocused={dragState.isFocused}
+            isContextMenuDisabled={isContextMenuDisabled}
+            item={item}
+            contextActions={contextActions}
+            dragScale={dragScale}
+            onSelected={(optionId: string, item: IItem) => {
+              setContextMenuState(prev => ({ ...prev, visible: false }));
+              if (onSelected) onSelected(optionId, item);
+            }}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            equipmentSet={equipmentSet}
+          />
+        </Container>
+      );
+    }
+  )
 );
 
 interface ContainerTypes {