@rpg-engine/long-bow 0.7.67 → 0.7.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.7.67",
+  "version": "0.7.70",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -30,7 +30,8 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "configure": "./environment/download-credentials.sh",
-    "update:shared-deps": "yarn add @rpg-engine/shared"
+    "update:shared-deps": "yarn add @rpg-engine/shared",
+    "prepublish": "yarn tsc"
   },
   "peerDependencies": {
     "react": ">=16"

package/src/components/Equipment/EquipmentSet.tsx

@@ -2,6 +2,7 @@ import {
   IEquipmentSet,
   IItem,
   IItemContainer,
+  isMobile,
   ItemContainerType,
   ItemSlotType,
   ItemType,
@@ -10,9 +11,17 @@ import React from 'react';
 import styled from 'styled-components';
 import { IPosition } from '../../types/eventTypes';
 import { DraggableContainer } from '../DraggableContainer';
+import {
+  ItemSlotDraggingProvider,
+  useItemSlotDragging,
+} from '../Item/Inventory/context/ItemSlotDraggingContext';
+import {
+  ItemSlotTooltipProvider,
+  useItemSlotTooltip,
+} from '../Item/Inventory/context/ItemSlotTooltipContext';
 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 {
@@ -52,7 +61,6 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
   equipmentSet,
   onClose,
   onMouseOver,
-  onSelected,
   onItemClick,
   atlasIMG,
   atlasJSON,
@@ -61,11 +69,11 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
   onItemPlaceDrop,
   onItemOutsideDrop,
   checkIfItemCanBeMoved,
-  checkIfItemShouldDragEnd,
   scale,
   initialPosition,
   onPositionChangeEnd,
   onPositionChangeStart,
+  onSelected,
 }) => {
   const {
     neck,
@@ -106,6 +114,10 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
     ItemSlotType.Accessory,
   ];
 
+  const { dragState } = useItemSlotDragging();
+
+  const { updateItemDetails } = useItemSlotTooltip();
+
   const onRenderEquipmentSlotRange = (start: number, end: number) => {
     const equipmentRange = equipmentData.slice(start, end);
     const slotMaksRange = equipmentMaskSlots.slice(start, end);
@@ -129,9 +141,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;
@@ -145,7 +154,6 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
           }}
           dragScale={scale}
           checkIfItemCanBeMoved={checkIfItemCanBeMoved}
-          checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
           onPlaceDrop={(item, slotIndex, itemContainerType) => {
             if (onItemPlaceDrop)
               onItemPlaceDrop(item, slotIndex, itemContainerType);
@@ -161,28 +169,52 @@ 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>
+      <ItemSlotTooltipProvider>
+        <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
+          isFocused={dragState.isFocused}
+          isContextMenuDisabled={isMobile()}
+          dragScale={scale}
+          onSelected={(optionId: string, item: IItem) => {
+            updateItemDetails({
+              item,
+              contextMenu: { visible: false },
+            });
+            if (onSelected) onSelected(optionId);
+          }}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          equipmentSet={equipmentSet}
+        />
+      </ItemSlotTooltipProvider>
+    </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,7 @@ export const DraggedItem = ({
   atlasIMG,
   scale,
 }: IProps): JSX.Element | null => {
-  const { item } = useDragging();
+  const { item } = useItemSlotDragging();
 
   const { x, y } = useCursorPosition({
     scale,

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

@@ -14,10 +14,18 @@ import { SlotsContainer } from '../../Abstractions/SlotsContainer';
 import { useScrollOnDrag } from '../../../hooks/useScrollOnDrag';
 import { IPosition } from '../../../types/eventTypes';
 import { ShortcutsSetter } from '../../Shortcuts/ShortcutsSetter';
+import {
+  ItemSlotDraggingProvider,
+  useItemSlotDragging,
+} from './context/ItemSlotDraggingContext';
+import {
+  ItemSlotTooltipProvider,
+  useItemSlotTooltip,
+} from './context/ItemSlotTooltipContext';
 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;
@@ -144,7 +152,6 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   }, [handleMouseMove, onItemDragStart, stopScrolling]);
 
   const onDragStart: onDragStart = (item, slotIndex, itemContainerType) => {
-    console.log('DRAG START');
     if (onItemDragStart) {
       onItemDragStart(item, slotIndex, itemContainerType);
     }
@@ -153,7 +160,6 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   };
 
   const onDragEnd: onDragEnd = quantity => {
-    console.log('DRAG END');
     if (onItemDragEnd) {
       onItemDragEnd(quantity);
     }
@@ -183,9 +189,6 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
               onItemClick(item, itemType, containerType);
             }
           }}
-          onSelected={(optionId: string, item: IItem) => {
-            if (onSelected) onSelected(optionId, item);
-          }}
           onDragStart={onDragStart}
           onDragEnd={onDragEnd}
           dragScale={scale}
@@ -218,7 +221,6 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
           isSelectingShortcut={settingShortcutIndex !== -1}
-          equipmentSet={equipmentSet}
           setItemShortcut={
             type === ItemContainerType.Inventory ? handleSetShortcut : undefined
           }
@@ -229,47 +231,69 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
     return slots;
   };
 
+  const { updateItemDetails } = useItemSlotTooltip();
+  const { dragState } = useItemSlotDragging();
+
   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}
-            />
-          )}
-        <ItemsContainer
-          className="item-container-body"
-          ref={containerRef}
-          isScrollable={itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL}
+    <ItemSlotDraggingProvider>
+      <ItemSlotTooltipProvider>
+        <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}
         >
-          {onRenderSlots()}
-        </ItemsContainer>
-      </SlotsContainer>
-      {quantitySelect.isOpen && (
-        <ItemQuantitySelectorModal
-          quantitySelect={quantitySelect}
-          setQuantitySelect={setQuantitySelect}
+          {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>
+
+        <ItemSlotToolTips
+          isFocused={dragState.isFocused}
+          isContextMenuDisabled={disableContextMenu}
+          dragScale={scale}
+          onSelected={(optionId: string, item: IItem) => {
+            updateItemDetails({
+              item,
+              contextMenu: { visible: false },
+            });
+            if (onSelected) onSelected(optionId, item);
+          }}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          equipmentSet={equipmentSet}
         />
-      )}
-    </DraggingProvider>
+
+        {quantitySelect.isOpen && (
+          <ItemQuantitySelectorModal
+            quantitySelect={quantitySelect}
+            setQuantitySelect={setQuantitySelect}
+          />
+        )}
+      </ItemSlotTooltipProvider>
+    </ItemSlotDraggingProvider>
   );
 };
 

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

@@ -1,5 +1,4 @@
 import {
-  IEquipmentSet,
   IItem,
   IItemContainer,
   ItemContainerType,
@@ -9,15 +8,16 @@ import {
 } from '@rpg-engine/shared';
 
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import Draggable from 'react-draggable';
 import styled from 'styled-components';
+import { useCursorPosition } from '../../../hooks/useCursorPosition';
 import { IPosition } from '../../../types/eventTypes';
 import { rarityColor } from './ItemSlotRarity';
 import { ItemSlotRenderer } from './ItemSlotRenderer';
-import { ItemSlotToolTips } from './ItemSlotTooltips';
+import { useItemSlotTooltip } from './context/ItemSlotTooltipContext';
 import { useItemSlotDragAndDrop } from './hooks/useItemSlotDragAndDrop';
-import { IContextMenuItem, generateContextMenu } from './itemContainerHelper';
+import { generateContextMenu } from './itemContainerHelper';
 
 export const EquipmentSlotSpriteByType: any = {
   Neck: 'accessories/corruption-necklace.png',
@@ -38,7 +38,6 @@ interface IProps {
   itemContainer?: IItemContainer | null;
   itemContainerType?: ItemContainerType | null;
   slotSpriteMask?: ItemSlotType | null;
-  onSelected?: (selectedOption: string, item: IItem) => void;
   onMouseOver?: (
     event: any,
     slotIndex: number,
@@ -71,7 +70,6 @@ interface IProps {
   atlasIMG: any;
   isContextMenuDisabled?: boolean;
   isSelectingShortcut?: boolean;
-  equipmentSet?: IEquipmentSet | null;
   setItemShortcut?: (item: IItem, shortcutIndex: number) => void;
   isDepotSystem?: boolean;
 }
@@ -103,7 +101,6 @@ export const ItemSlot = React.memo(
       onMouseOver,
       onMouseOut,
       onPointerDown,
-      onSelected,
       atlasJSON,
       atlasIMG,
       isContextMenuDisabled = false,
@@ -115,37 +112,10 @@ export const ItemSlot = React.memo(
       openQuantitySelector,
       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 [contextActions, setContextActions] = useState<IContextMenuItem[]>(
-        []
-      );
-
-      const isDraggingDisabled = useMemo(() => {
-        return (
-          contextMenuState.visible ||
-          onDragStart === undefined ||
-          onDragEnd === undefined
-        );
-      }, [contextMenuState.visible, onDragStart, onDragEnd]);
-
-      useEffect(() => {
-        console.log('isDraggingDisabled', isDraggingDisabled);
-      }, [isDraggingDisabled]);
-
       const {
         dragContainer,
         dragState,
@@ -168,16 +138,22 @@ export const ItemSlot = React.memo(
         slotIndex,
         openQuantitySelector: openQuantitySelector ?? (() => {}),
         isContextMenuDisabled,
-        setTooltipState,
-        contextMenuState,
-        setContextMenuState,
+      });
+
+      const { updateItemDetails, itemDetails } = useItemSlotTooltip();
+
+      const { x: cursorX, y: cursorY } = useCursorPosition({
+        scale: dragScale,
       });
 
       useEffect(() => {
         if (item && containerType) {
-          setContextActions(
-            generateContextMenu(item, containerType, isDepotSystem)
-          );
+          updateItemDetails({
+            item,
+            contextMenu: {
+              actions: generateContextMenu(item, containerType, isDepotSystem),
+            },
+          });
         }
       }, [item, isDepotSystem]);
 
@@ -187,8 +163,7 @@ export const ItemSlot = React.memo(
         (event: React.MouseEvent | React.TouchEvent) => {
           event.stopPropagation();
 
-          const { clientX, clientY } =
-            'touches' in event ? event.touches[0] : event;
+          console.log('handleInteraction');
 
           if (item && containerType) {
             if (onPlaceDrop && draggingItem) {
@@ -203,8 +178,7 @@ export const ItemSlot = React.memo(
             }
           }
 
-          setTooltipState(prev => ({ ...prev, visible: true }));
-          onMouseOver?.(event, slotIndex, item, clientX, clientY);
+          onMouseOver?.(event, slotIndex, item, cursorX, cursorY);
         },
         [
           item,
@@ -215,6 +189,8 @@ export const ItemSlot = React.memo(
           onMouseOver,
           onDragStart,
           onDragEnd,
+          cursorX,
+          cursorY,
         ]
       );
 
@@ -223,36 +199,30 @@ export const ItemSlot = React.memo(
           event.preventDefault();
           event.stopPropagation();
 
-          setTooltipState(prev => ({ ...prev, visible: false }));
+          console.log('handleInteractionEnd');
+
+          console.log('itemDetails', itemDetails);
           onMouseOut?.();
 
-          if (event.type === 'touchend' && 'changedTouches' in event) {
-            const { clientX, clientY } = event.changedTouches[0];
+          if (event.type === 'touchend') {
             const simulatedEvent = new MouseEvent('mouseup', {
-              clientX,
-              clientY,
+              clientX: cursorX,
+              clientY: cursorY,
               bubbles: true,
             });
             document
-              .elementFromPoint(clientX, clientY)
+              .elementFromPoint(cursorX, cursorY)
               ?.dispatchEvent(simulatedEvent);
+
+            updateItemDetails({
+              item,
+              tooltip: { visible: false },
+            });
           }
         },
-        [onMouseOut]
+        [onMouseOut, cursorX, cursorY]
       );
 
-      const [showTooltipDelayed, setShowTooltipDelayed] = useState(false);
-
-      //@ts-ignore
-      useEffect(() => {
-        if (tooltipState.visible && !isDraggingDisabled) {
-          const timer = setTimeout(() => setShowTooltipDelayed(true), 50);
-          return () => clearTimeout(timer);
-        } else {
-          setShowTooltipDelayed(false);
-        }
-      }, [tooltipState.visible, isDraggingDisabled]);
-
       return (
         <Container
           isDraggingItem={!!draggingItem}
@@ -274,7 +244,6 @@ export const ItemSlot = React.memo(
             }
           }}
           onTouchEnd={e => {
-            handleInteractionEnd(e);
             const { clientX, clientY } = e.changedTouches[0];
             const simulatedEvent = new MouseEvent('mouseup', {
               clientX,
@@ -299,7 +268,7 @@ export const ItemSlot = React.memo(
             axis={isSelectingShortcut ? 'none' : 'both'}
             defaultClassName={item ? 'draggable' : 'empty-slot'}
             scale={dragScale}
-            disabled={isDraggingDisabled}
+            disabled={onDragStart === undefined || onDragEnd === undefined}
             onStop={onDraggableStop}
             onStart={onDraggableStart}
             onDrag={onDraggableProgress}
@@ -310,26 +279,27 @@ export const ItemSlot = React.memo(
             <ItemContainer
               ref={dragContainer}
               isFocused={dragState.isFocused}
-              onMouseOver={event => {
+              onMouseOver={() => {
                 onMouseOver?.(
-                  event,
+                  {} as React.MouseEvent,
                   slotIndex,
                   item,
-                  event.clientX,
-                  event.clientY
+                  cursorX,
+                  cursorY
                 );
               }}
               onMouseOut={onMouseOut}
               onMouseEnter={() => {
-                setTooltipState(prev => ({ ...prev, visible: true }));
+                updateItemDetails({
+                  item,
+                  tooltip: { visible: true },
+                });
               }}
-              onMouseLeave={e => {
-                if (
-                  !e.relatedTarget ||
-                  !dragContainer.current?.contains(e.relatedTarget as Node)
-                ) {
-                  setTooltipState(prev => ({ ...prev, visible: false }));
-                }
+              onMouseLeave={() => {
+                updateItemDetails({
+                  item,
+                  tooltip: { visible: false },
+                });
               }}
             >
               <ItemSlotRenderer
@@ -341,28 +311,6 @@ export const ItemSlot = React.memo(
               />
             </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}
-            isDragging={!!draggingItem}
-            isSelectingShortcut={!!isSelectingShortcut}
-            showTooltipDelayed={showTooltipDelayed}
-          />
         </Container>
       );
     }