@rpg-engine/long-bow 0.7.66 → 0.7.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.7.66",
+  "version": "0.7.67",
   "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, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import Draggable from 'react-draggable';
 import styled from 'styled-components';
 import { IPosition } from '../../../types/eventTypes';
@@ -134,6 +134,18 @@ 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,
@@ -229,6 +241,18 @@ 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}
@@ -275,7 +299,7 @@ export const ItemSlot = React.memo(
             axis={isSelectingShortcut ? 'none' : 'both'}
             defaultClassName={item ? 'draggable' : 'empty-slot'}
             scale={dragScale}
-            disabled={onDragStart === undefined || onDragEnd === undefined}
+            disabled={isDraggingDisabled}
             onStop={onDraggableStop}
             onStart={onDraggableStart}
             onDrag={onDraggableProgress}
@@ -299,8 +323,13 @@ export const ItemSlot = React.memo(
               onMouseEnter={() => {
                 setTooltipState(prev => ({ ...prev, visible: true }));
               }}
-              onMouseLeave={() => {
-                setTooltipState(prev => ({ ...prev, visible: false }));
+              onMouseLeave={e => {
+                if (
+                  !e.relatedTarget ||
+                  !dragContainer.current?.contains(e.relatedTarget as Node)
+                ) {
+                  setTooltipState(prev => ({ ...prev, visible: false }));
+                }
               }}
             >
               <ItemSlotRenderer
@@ -330,6 +359,9 @@ export const ItemSlot = React.memo(
             atlasIMG={atlasIMG}
             atlasJSON={atlasJSON}
             equipmentSet={equipmentSet}
+            isDragging={!!draggingItem}
+            isSelectingShortcut={!!isSelectingShortcut}
+            showTooltipDelayed={showTooltipDelayed}
           />
         </Container>
       );
@@ -345,11 +377,6 @@ interface ContainerTypes {
 }
 
 const Container = styled.div<ContainerTypes>`
-
-*  {
-  border: 1px solid red;
-}
-
   margin: 0.1rem;
 
   .react-draggable-dragging {

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

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

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

@@ -98,7 +98,6 @@ export const useItemSlotDragAndDrop = ({
       isFocused: false,
       position: { x: 0, y: 0 },
     }));
-    setDraggingItem(null);
   }, [setTooltipState]);
 
   const handleSuccessfulDrag = useCallback(
@@ -121,10 +120,8 @@ export const useItemSlotDragAndDrop = ({
   const onDraggableProgress: DraggableEventHandler = useCallback(
     (_e, data) => {
       const { x, y } = dragState.position;
-      if (Math.abs(data.x - x) > 20 || Math.abs(data.y - y) > 20) {
+      if (Math.abs(data.x - x) > 5 || Math.abs(data.y - y) > 5) {
         setDragState(prev => ({ ...prev, wasDragged: true, isFocused: true }));
-      } else {
-        resetDragState();
       }
       if (!draggingItem) {
         setDraggingItem(item);
@@ -135,6 +132,9 @@ export const useItemSlotDragAndDrop = ({
 
   const onDraggableStop: DraggableEventHandler = useCallback(
     (e, data) => {
+      setTimeout(() => {
+        setDraggingItem(null);
+      }, 50);
       const target = e.target as HTMLElement;
       if (!target) return;
 
@@ -178,31 +178,14 @@ export const useItemSlotDragAndDrop = ({
         }, 50);
       } else if (item) {
         const isTouch = e.type === 'touchend';
-
-        console.log(`Debug: 
-          isTouch: ${isTouch},
-          isSelectingShortcut: ${isSelectingShortcut},
-          draggingItem: ${draggingItem},
-          dragState.wasDragged: ${dragState.wasDragged},
-          dragState.isFocused: ${dragState.isFocused}
-        `);
-
         if (
           !isContextMenuDisabled &&
           isTouch &&
           !isSelectingShortcut &&
-          !draggingItem &&
-          !dragState.wasDragged &&
-          !dragState.isFocused
+          !draggingItem
         ) {
           setTooltipState(prev => ({ ...prev, mobileVisible: true }));
-        } else if (
-          !isContextMenuDisabled &&
-          !isSelectingShortcut &&
-          !isTouch &&
-          !dragState.wasDragged &&
-          !dragState.isFocused
-        ) {
+        } else if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
           const event = e as MouseEvent;
           setContextMenuState(prev => ({
             visible: !prev.visible,