@rpg-engine/long-bow 0.7.70 → 0.7.72

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

@@ -1,15 +1,24 @@
 import { IEquipmentSet, IItem } from '@rpg-engine/shared';
 import React from 'react';
+import { IPosition } from '../../../types/eventTypes';
 import { RelativeListMenu } from '../../RelativeListMenu';
 import { ItemTooltip } from '../Cards/ItemTooltip';
 import { MobileItemTooltip } from '../Cards/MobileItemTooltip';
-import { useItemSlotTooltip } from './context/ItemSlotTooltipContext';
+import { IContextMenuItem } from './itemContainerHelper';
 
 interface IProps {
+  isTooltipVisible: boolean;
   isFocused: boolean;
+  isContextMenuVisible: boolean;
   isContextMenuDisabled: boolean;
-
+  item: IItem | null;
+  isTooltipMobileVisible: boolean;
+  contextActions: IContextMenuItem[];
+  contextMenuPosition: IPosition;
   dragScale: number | undefined;
+  setIsContextMenuVisible: (visible: boolean) => void;
+  setIsTooltipMobileVisible: (visible: boolean) => void;
+  setIsTooltipVisible: (visible: boolean) => void;
   onSelected?: (optionId: string, item: IItem) => void;
   atlasIMG: any;
   atlasJSON: any;
@@ -17,48 +26,25 @@ interface IProps {
 }
 
 export const ItemSlotToolTips = ({
+  isTooltipVisible,
   isFocused,
+  isContextMenuVisible,
   isContextMenuDisabled,
-
+  item,
+  contextActions,
+  contextMenuPosition,
   dragScale,
+  setIsContextMenuVisible,
+  setIsTooltipMobileVisible,
+  isTooltipMobileVisible,
   onSelected,
   atlasIMG,
   atlasJSON,
   equipmentSet,
 }: IProps): JSX.Element => {
-  const { itemDetails, updateItemDetails } = useItemSlotTooltip();
-
-  const item = itemDetails.item;
-
-  const handleCloseTooltip = () => {
-    updateItemDetails({
-      item,
-      tooltip: { mobileVisible: false },
-    });
-  };
-
-  const handleContextMenuSelect = (optionId: string) => {
-    updateItemDetails({
-      item,
-      contextMenu: { visible: false },
-    });
-    if (item) {
-      onSelected?.(optionId, item);
-    }
-  };
-
-  const handleOutsideClick = () => {
-    updateItemDetails({
-      item,
-      contextMenu: { visible: false },
-    });
-  };
-
-  // monitor why mobileVisible is not working
-
   return (
     <>
-      {itemDetails.tooltip?.visible && item && !isFocused && (
+      {isTooltipVisible && item && !isFocused && (
         <ItemTooltip
           item={item}
           atlasIMG={atlasIMG}
@@ -67,29 +53,41 @@ export const ItemSlotToolTips = ({
         />
       )}
 
-      {itemDetails.tooltip?.mobileVisible && item && (
+      {isTooltipMobileVisible && item && (
         <MobileItemTooltip
           item={item}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
           equipmentSet={equipmentSet}
-          closeTooltip={handleCloseTooltip}
+          closeTooltip={() => {
+            setIsTooltipMobileVisible(false);
+          }}
           scale={dragScale}
-          options={itemDetails.contextMenu?.actions || []}
-          onSelected={handleContextMenuSelect}
+          options={contextActions}
+          onSelected={(optionId: string) => {
+            setIsContextMenuVisible(false);
+            if (item) {
+              onSelected?.(optionId, item);
+            }
+          }}
         />
       )}
 
-      {!isContextMenuDisabled &&
-        itemDetails.contextMenu?.visible &&
-        itemDetails.contextMenu.actions && (
-          <RelativeListMenu
-            options={itemDetails.contextMenu.actions}
-            onSelected={handleContextMenuSelect}
-            onOutsideClick={handleOutsideClick}
-            pos={itemDetails.contextMenu.position!}
-          />
-        )}
+      {!isContextMenuDisabled && isContextMenuVisible && contextActions && (
+        <RelativeListMenu
+          options={contextActions}
+          onSelected={(optionId: string) => {
+            setIsContextMenuVisible(false);
+            if (item) {
+              onSelected?.(optionId, item);
+            }
+          }}
+          onOutsideClick={() => {
+            setIsContextMenuVisible(false);
+          }}
+          pos={contextMenuPosition}
+        />
+      )}
     </>
   );
 };

package/src/components/Item/Inventory/context/DraggingContext.tsx

@@ -0,0 +1,26 @@
+import { IItem } from '@rpg-engine/shared';
+import React, { createContext, useContext, useState } from 'react';
+
+const DraggingContext = createContext<{
+  item: IItem | null;
+  setDraggingItem: React.Dispatch<React.SetStateAction<IItem | null>>;
+}>({
+  item: null,
+  setDraggingItem: () => {},
+});
+
+export const useDragging = () => useContext(DraggingContext);
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+export const DraggingProvider = ({ children }: IProps) => {
+  const [item, setDraggingItem] = useState<IItem | null>(null);
+
+  return (
+    <DraggingContext.Provider value={{ item, setDraggingItem }}>
+      {children}
+    </DraggingContext.Provider>
+  );
+};

package/src/hooks/useCursorPosition.ts

@@ -6,46 +6,37 @@ interface ICursorPositionProps {
   scale?: number;
 }
 
-export const useCursorPosition = ({
-  scale = 1,
-}: ICursorPositionProps): IPosition => {
+export const useCursorPosition = ({ scale = 1 }: ICursorPositionProps): IPosition => {
   const [position, setPosition] = useState<IPosition>({ x: 0, y: 0 });
 
-  const scalePosition = useCallback(
-    (x: number, y: number): IPosition => {
-      return {
-        x: (x - GRID_WIDTH / 2) / scale + GRID_WIDTH / 2,
-        y: (y - GRID_HEIGHT / 2) / scale + GRID_HEIGHT / 2,
-      };
-    },
-    [scale]
-  );
+  const scalePosition = useCallback((x: number, y: number): IPosition => {
+    return {
+      x: ((x - GRID_WIDTH / 2) / scale) + GRID_WIDTH / 2,
+      y: ((y - GRID_HEIGHT / 2) / scale) + GRID_HEIGHT / 2,
+    };
+  }, [scale]);
 
-  const setFromEvent = useCallback(
-    (e: MouseEvent | TouchEvent) => {
-      let x, y;
+  const setFromEvent = useCallback((e: MouseEvent | TouchEvent) => {
+    let x, y;
 
-      if ('touches' in e) {
-        x = e.touches[0].clientX;
-        y = e.touches[0].clientY;
-      } else {
-        x = e.clientX;
-        y = e.clientY;
-      }
+    if ('touches' in e) {
+      x = e.touches[0].clientX;
+      y = e.touches[0].clientY;
+    } else {
+      x = e.clientX;
+      y = e.clientY;
+    }
 
-      const scaledPosition = scalePosition(x, y);
-      setPosition(scaledPosition);
-    },
-    [scale, scalePosition]
-  );
+    const scaledPosition = scalePosition(x, y);
+    setPosition(scaledPosition);
+  }, [scale, scalePosition]);
 
   const cleanup = useCallback(() => {
     setPosition({ x: 0, y: 0 });
   }, []);
 
   useEffect(() => {
-    const handleEvent = (e: Event) =>
-      setFromEvent(e as MouseEvent | TouchEvent);
+    const handleEvent = (e: Event) => setFromEvent(e as MouseEvent | TouchEvent);
 
     window.addEventListener('mousemove', handleEvent);
     window.addEventListener('touchmove', handleEvent);

package/src/stories/UI/containers/ItemContainer.stories.tsx

@@ -1,4 +1,4 @@
-import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
+import { IItem, ItemContainerType } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
 import React, { useState } from 'react';
 import {
@@ -21,26 +21,10 @@ const meta: Meta = {
 
 export default meta;
 
-const onMouseOver = (_event: any, slotIndex: number, item: IItem | null) => {
-  if (!item) {
-    console.log(`Free at ${slotIndex}`);
-    return;
-  }
-  console.log(`${item.name} at ${slotIndex}`);
-};
-
 const onSelected = (payload: string, item: IItem) => {
   console.log('onSelected', payload, item);
 };
 
-const onItemClick = (
-  item: IItem,
-  ItemType: ItemType,
-  itemContainerType: ItemContainerType | null
-) => {
-  console.log(item, ItemType, itemContainerType, 'was clicked!');
-};
-
 // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
 let dragItem: IItem | null = null;
 let dropItem: IItem | null = null;
@@ -69,9 +53,9 @@ const Template: Story<IItemContainerProps & ITemplateProps> = ({
     <ItemContainer
       itemContainer={itemContainer}
       onClose={() => console.log('closing item container')}
-      onMouseOver={onMouseOver}
+      onMouseOver={() => {}}
       onSelected={onSelected}
-      onItemClick={onItemClick}
+      onItemClick={() => {}}
       checkIfItemCanBeMoved={() => allowedToDrop}
       onItemDragEnd={quantity => {
         // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
@@ -115,22 +99,11 @@ const Template: Story<IItemContainerProps & ITemplateProps> = ({
       onItemPlaceDrop={(item, slotIndex) => {
         // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
 
-        console.log({
-          item: item?.name,
-          sI: slotIndex,
-          dragK: dragItem?.key,
-          itemK: item?.key,
-          dragSlot,
-          slotIndex,
-        });
-
         if (!item || (dragItem?.key === item?.key && dragSlot !== slotIndex)) {
-          console.log('allow');
           allowedToDrop = true;
           dropSlot = slotIndex;
           dropItem = item ? item : null;
         } else {
-          console.log('not allowing drop');
           allowedToDrop = false;
           dropSlot = -1;
           dropItem = null;

package/dist/components/Item/Inventory/context/ItemSlotDraggingContext.d.ts

@@ -1,26 +0,0 @@
-import { IItem } from '@rpg-engine/shared';
-import React from 'react';
-export interface IDragState {
-    isFocused: boolean;
-    wasDragged: boolean;
-    position: {
-        x: number;
-        y: number;
-    };
-    dropPosition: {
-        x: number;
-        y: number;
-    } | null;
-}
-interface IDraggingContextType {
-    item: IItem | null;
-    setDraggingItem: React.Dispatch<React.SetStateAction<IItem | null>>;
-    dragState: IDragState;
-    setDragState: React.Dispatch<React.SetStateAction<IDragState>>;
-}
-interface IProps {
-    children: React.ReactNode;
-}
-export declare const ItemSlotDraggingProvider: ({ children }: IProps) => JSX.Element;
-export declare const useItemSlotDragging: () => IDraggingContextType;
-export {};

package/dist/components/Item/Inventory/context/ItemSlotTooltipContext.d.ts

@@ -1,28 +0,0 @@
-import { IItem } from '@rpg-engine/shared';
-import { FC, ReactNode } from 'react';
-import { IPosition } from '../../../../types/eventTypes';
-import { IContextMenuItem } from '../itemContainerHelper';
-interface TooltipState {
-    visible?: boolean;
-    mobileVisible?: boolean;
-}
-interface ContextMenuState {
-    visible?: boolean;
-    position?: IPosition;
-    actions?: IContextMenuItem[];
-}
-interface ItemDetails {
-    item?: IItem | null;
-    tooltip?: TooltipState;
-    contextMenu?: ContextMenuState;
-}
-interface ItemSlotTooltipContextProps {
-    itemDetails: ItemDetails;
-    updateItemDetails: (updates: Partial<ItemDetails>) => void;
-    clearItemDetails: () => void;
-}
-export declare const ItemSlotTooltipProvider: FC<{
-    children: ReactNode;
-}>;
-export declare const useItemSlotTooltip: () => ItemSlotTooltipContextProps;
-export {};

package/dist/components/Item/Inventory/hooks/useItemSlotDragAndDrop.d.ts

@@ -1,39 +0,0 @@
-/// <reference types="react" />
-import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
-import { DraggableEventHandler } from 'react-draggable';
-interface IUseItemSlotDragAndDrop {
-    isDepotSystem: boolean;
-    item: IItem;
-    onDrop: (item: IItem, dropPosition: {
-        x: number;
-        y: number;
-    }) => void;
-    onDragEnd?: (quantity?: number) => void;
-    checkIfItemCanBeMoved?: () => boolean;
-    checkIfItemShouldDragEnd?: () => boolean;
-    setItemShortcut?: (item: IItem, index: number) => void;
-    isSelectingShortcut?: boolean;
-    onDragStart?: (item: IItem, slotIndex: number, containerType: ItemContainerType) => void;
-    onPointerDown: (ItemType: ItemType, itemContainerType: ItemContainerType | null, item: IItem) => void;
-    containerType: ItemContainerType;
-    slotIndex: number;
-    openQuantitySelector: (quantity: number, onSuccess: (quantity?: number) => void) => void;
-    isContextMenuDisabled: boolean;
-}
-export declare const useItemSlotDragAndDrop: ({ isDepotSystem, item, onDrop, onDragEnd, checkIfItemCanBeMoved, checkIfItemShouldDragEnd, setItemShortcut, isSelectingShortcut, onDragStart, onPointerDown, containerType, slotIndex, openQuantitySelector, isContextMenuDisabled, }: IUseItemSlotDragAndDrop) => {
-    dragContainer: import("react").RefObject<HTMLDivElement>;
-    dragState: import("../context/ItemSlotDraggingContext").IDragState;
-    draggingItem: IItem | null;
-    setDraggingItem: import("react").Dispatch<import("react").SetStateAction<IItem | null>>;
-    getContainerBounds: () => {
-        left: number;
-        top: number;
-        right: number;
-        bottom: number;
-    };
-    onDraggableStart: DraggableEventHandler;
-    onDraggableProgress: DraggableEventHandler;
-    onDraggableStop: DraggableEventHandler;
-    resetItem: () => void;
-};
-export {};

package/src/components/Item/Inventory/context/ItemSlotDraggingContext.tsx

@@ -1,52 +0,0 @@
-import { IItem } from '@rpg-engine/shared';
-import React, { createContext, useContext, useState } from 'react';
-
-export interface IDragState {
-  isFocused: boolean;
-  wasDragged: boolean;
-  position: { x: number; y: number };
-  dropPosition: { x: number; y: number } | null;
-}
-
-interface IDraggingContextType {
-  item: IItem | null;
-  setDraggingItem: React.Dispatch<React.SetStateAction<IItem | null>>;
-  dragState: IDragState;
-  setDragState: React.Dispatch<React.SetStateAction<IDragState>>;
-}
-
-const ItemSlotDraggingContext = createContext<IDraggingContextType>({
-  item: null,
-  setDraggingItem: () => {},
-  dragState: {
-    isFocused: false,
-    wasDragged: false,
-    position: { x: 0, y: 0 },
-    dropPosition: null,
-  },
-  setDragState: () => {},
-});
-
-interface IProps {
-  children: React.ReactNode;
-}
-
-export const ItemSlotDraggingProvider = ({ children }: IProps) => {
-  const [item, setDraggingItem] = useState<IItem | null>(null);
-  const [dragState, setDragState] = useState<IDragState>({
-    isFocused: false,
-    wasDragged: false,
-    position: { x: 0, y: 0 },
-    dropPosition: null,
-  });
-
-  return (
-    <ItemSlotDraggingContext.Provider
-      value={{ item, setDraggingItem, dragState, setDragState }}
-    >
-      {children}
-    </ItemSlotDraggingContext.Provider>
-  );
-};
-
-export const useItemSlotDragging = () => useContext(ItemSlotDraggingContext);

package/src/components/Item/Inventory/context/ItemSlotTooltipContext.tsx

@@ -1,95 +0,0 @@
-import { IItem } from '@rpg-engine/shared';
-import React, {
-  createContext,
-  FC,
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
-import { IPosition } from '../../../../types/eventTypes';
-import { IContextMenuItem } from '../itemContainerHelper';
-
-// Define smaller, focused interfaces for better readability
-interface TooltipState {
-  visible?: boolean;
-  mobileVisible?: boolean;
-}
-
-interface ContextMenuState {
-  visible?: boolean;
-  position?: IPosition;
-  actions?: IContextMenuItem[];
-}
-
-interface ItemDetails {
-  item?: IItem | null;
-  tooltip?: TooltipState;
-  contextMenu?: ContextMenuState;
-}
-
-interface ItemSlotTooltipContextProps {
-  itemDetails: ItemDetails;
-  updateItemDetails: (updates: Partial<ItemDetails>) => void;
-  clearItemDetails: () => void;
-}
-
-// Set default state with clearly defined initial values
-const defaultItemDetails: ItemDetails = {
-  item: null,
-  tooltip: { visible: false, mobileVisible: false },
-  contextMenu: { visible: false, position: { x: 0, y: 0 }, actions: [] },
-};
-
-// Create context with default values
-const ItemSlotTooltipContext = createContext<ItemSlotTooltipContextProps>({
-  itemDetails: defaultItemDetails,
-  updateItemDetails: () => {},
-  clearItemDetails: () => {},
-});
-
-// Provider component
-export const ItemSlotTooltipProvider: FC<{ children: ReactNode }> = ({
-  children,
-}) => {
-  const [itemDetails, setItemDetails] = useState<ItemDetails>(
-    defaultItemDetails
-  );
-
-  useEffect(() => {
-    console.log('itemDetails', itemDetails);
-  }, [itemDetails]);
-
-  // Memoize the update function to optimize performance
-  const updateItemDetails = useCallback((updates: Partial<ItemDetails>) => {
-    setItemDetails(prev => ({
-      ...prev,
-      ...updates,
-      tooltip: { ...prev.tooltip, ...updates.tooltip },
-      contextMenu: {
-        ...prev.contextMenu,
-        ...updates.contextMenu,
-        // Ensure actions are properly merged or overridden
-        actions: updates.contextMenu?.actions ?? prev.contextMenu?.actions,
-      },
-    }));
-  }, []);
-
-  const clearItemDetails = useCallback(() => {
-    setItemDetails(defaultItemDetails);
-  }, []);
-
-  return (
-    <ItemSlotTooltipContext.Provider
-      value={{ itemDetails, updateItemDetails, clearItemDetails }}
-    >
-      {children}
-    </ItemSlotTooltipContext.Provider>
-  );
-};
-
-// Custom hook for consuming the context
-export const useItemSlotTooltip = (): ItemSlotTooltipContextProps => {
-  return useContext(ItemSlotTooltipContext);
-};