@rpg-engine/long-bow 0.7.67 → 0.7.68

package/package.json

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

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

@@ -9,7 +9,7 @@ import {
 } from '@rpg-engine/shared';
 
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Draggable from 'react-draggable';
 import styled from 'styled-components';
 import { IPosition } from '../../../types/eventTypes';
@@ -134,18 +134,6 @@ export const ItemSlot = React.memo(
         []
       );
 
-      const isDraggingDisabled = useMemo(() => {
-        return (
-          contextMenuState.visible ||
-          onDragStart === undefined ||
-          onDragEnd === undefined
-        );
-      }, [contextMenuState.visible, onDragStart, onDragEnd]);
-
-      useEffect(() => {
-        console.log('isDraggingDisabled', isDraggingDisabled);
-      }, [isDraggingDisabled]);
-
       const {
         dragContainer,
         dragState,
@@ -241,18 +229,6 @@ export const ItemSlot = React.memo(
         [onMouseOut]
       );
 
-      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 +250,6 @@ export const ItemSlot = React.memo(
             }
           }}
           onTouchEnd={e => {
-            handleInteractionEnd(e);
             const { clientX, clientY } = e.changedTouches[0];
             const simulatedEvent = new MouseEvent('mouseup', {
               clientX,
@@ -299,7 +274,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}
@@ -323,13 +298,8 @@ export const ItemSlot = React.memo(
               onMouseEnter={() => {
                 setTooltipState(prev => ({ ...prev, visible: true }));
               }}
-              onMouseLeave={e => {
-                if (
-                  !e.relatedTarget ||
-                  !dragContainer.current?.contains(e.relatedTarget as Node)
-                ) {
-                  setTooltipState(prev => ({ ...prev, visible: false }));
-                }
+              onMouseLeave={() => {
+                setTooltipState(prev => ({ ...prev, visible: false }));
               }}
             >
               <ItemSlotRenderer
@@ -359,9 +329,6 @@ export const ItemSlot = React.memo(
             atlasIMG={atlasIMG}
             atlasJSON={atlasJSON}
             equipmentSet={equipmentSet}
-            isDragging={!!draggingItem}
-            isSelectingShortcut={!!isSelectingShortcut}
-            showTooltipDelayed={showTooltipDelayed}
           />
         </Container>
       );

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

@@ -20,9 +20,6 @@ interface IProps {
   atlasIMG: any;
   atlasJSON: any;
   equipmentSet?: IEquipmentSet | null;
-  isDragging: boolean;
-  isSelectingShortcut: boolean;
-  showTooltipDelayed: boolean;
 }
 
 export const ItemSlotToolTips = ({
@@ -39,15 +36,10 @@ export const ItemSlotToolTips = ({
   atlasIMG,
   atlasJSON,
   equipmentSet,
-  isDragging,
-  isSelectingShortcut,
-  showTooltipDelayed,
 }: IProps): JSX.Element => {
-    const canShow = !isDragging || !isSelectingShortcut || showTooltipDelayed;
-
   return (
     <>
-      {tooltipState.visible && item && !isFocused && canShow && (
+      {tooltipState.visible && item && !isFocused && (
         <ItemTooltip
           item={item}
           atlasIMG={atlasIMG}
@@ -56,7 +48,7 @@ export const ItemSlotToolTips = ({
         />
       )}
 
-      {tooltipState.mobileVisible && item && canShow && (
+      {tooltipState.mobileVisible && item && (
         <MobileItemTooltip
           item={item}
           atlasIMG={atlasIMG}
@@ -76,7 +68,7 @@ export const ItemSlotToolTips = ({
         />
       )}
 
-      {!isContextMenuDisabled && contextMenuState.visible && contextActions && canShow && (
+      {!isContextMenuDisabled && contextMenuState.visible && contextActions && (
         <RelativeListMenu
           options={contextActions}
           onSelected={(optionId: string) => {

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

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

package/src/components/Item/Inventory/hooks/useItemSlotDragAndDrop.ts

@@ -1,8 +1,8 @@
 import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { DraggableEventHandler } from 'react-draggable';
 import { useDragging } from '../context/DraggingContext';
-import { ContextMenuState, DragState, TooltipState } from '../ItemSlot';
+import { ContextMenuState, TooltipState } from '../ItemSlot';
 
 interface IUseItemSlotDragAndDrop {
   isDepotSystem: boolean;
@@ -54,14 +54,12 @@ export const useItemSlotDragAndDrop = ({
   setContextMenuState,
 }: IUseItemSlotDragAndDrop) => {
   const dragContainer = useRef<HTMLDivElement>(null);
-  const { item: draggingItem, setDraggingItem } = useDragging();
-
-  const [dragState, setDragState] = useState<DragState>({
-    isFocused: false,
-    wasDragged: false,
-    position: { x: 0, y: 0 },
-    dropPosition: null,
-  });
+  const {
+    item: draggingItem,
+    setDraggingItem,
+    dragState,
+    setDragState,
+  } = useDragging();
 
   useEffect(() => {
     setDragState(prev => ({
@@ -69,7 +67,7 @@ export const useItemSlotDragAndDrop = ({
       position: { x: 0, y: 0 },
       isFocused: false,
     }));
-  }, [item, isDepotSystem]);
+  }, [item, isDepotSystem, setDragState]);
 
   useEffect(() => {
     if (onDrop && item && dragState.dropPosition) {
@@ -91,14 +89,13 @@ export const useItemSlotDragAndDrop = ({
   }, []);
 
   const resetDragState = useCallback(() => {
-    setTooltipState(prev => ({ ...prev, visible: false }));
     setDragState(prev => ({
       ...prev,
       wasDragged: false,
       isFocused: false,
       position: { x: 0, y: 0 },
     }));
-  }, [setTooltipState]);
+  }, [setTooltipState, setDragState]);
 
   const handleSuccessfulDrag = useCallback(
     (quantity?: number) => {
@@ -127,7 +124,7 @@ export const useItemSlotDragAndDrop = ({
         setDraggingItem(item);
       }
     },
-    [dragState.position, draggingItem, item, setDraggingItem]
+    [dragState.position, draggingItem, item, setDraggingItem, setDragState]
   );
 
   const onDraggableStop: DraggableEventHandler = useCallback(