@rpg-engine/long-bow 0.1.66 → 0.1.67

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

@@ -1,17 +1,18 @@
 import {
-  ActionsByItemType,
   IItem,
   IItemContainer,
   IPayloadProps,
   ItemSocketEvents,
-  ItemType,
 } from '@rpg-engine/shared';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
+import { useOutsideClick } from '../../../hooks/useOutsideAlerter';
+import { IPosition } from '../../../types/eventTypes';
 import { DraggableContainer } from '../../DraggableContainer';
 import { ListMenu } from '../../ListMenu';
 import { RPGUIContainerTypes } from '../../RPGUIContainer';
 import { ItemCard } from '../Cards/ItemCard';
+import { handleContextMenuList } from './itemContainerHelper';
 import { ItemSlot } from './ItemSlot';
 
 export interface IItemContainerProps {
@@ -19,9 +20,10 @@ export interface IItemContainerProps {
   onClose: () => void;
   onMouseOver: (e: any, slotIndex: number, item: IItem | null) => void;
   onActionSelected: (payload: any) => void;
+  initialPosition?: { x: number; y: number };
 }
 
-interface contextItemPropx {
+interface IContextItemProps {
   visible: boolean;
   posX: number;
   posY: number;
@@ -30,127 +32,111 @@ interface contextItemPropx {
   contextActions: any;
 }
 
+interface IHoverDetailProps {
+  visible: boolean;
+  posX: number;
+  posY: number;
+  item: IItem | null;
+}
+
 export const ItemContainer: React.FC<IItemContainerProps> = ({
   itemContainer,
   onClose,
   onMouseOver,
   onActionSelected,
+  initialPosition = { x: 0, y: 0 },
 }) => {
-  const [contextData, setContextData] = useState<contextItemPropx>({
+  // we use this draggable position to offset the menu position, after the container is dragged (otherwise, it bugs!)
+  const [draggablePosition, setDraggablePosition] = useState<IPosition>(
+    initialPosition
+  );
+
+  const draggableRef = useRef(null);
+
+  useOutsideClick(draggableRef, 'item-container');
+
+  useEffect(() => {
+    document.addEventListener('clickOutside', event => {
+      const e = event as CustomEvent;
+
+      if (e.detail.id === 'item-container') {
+        clearContextMenu();
+        clearItemHoverDetail();
+      }
+    });
+
+    return () => {
+      document.removeEventListener('clickOutside', _e => {});
+    };
+  }, []);
+
+  const { x: initX, y: initY } = initialPosition;
+
+  const [contextData, setContextData] = useState<IContextItemProps>({
     visible: false,
-    posX: 0,
-    posY: 0,
+    posX: initX,
+    posY: initY,
     contextActions: [],
     slotItem: null,
   });
-  const [itemHoverDetail] = useState({
+  const [itemHoverDetail, setItemHoverDetail] = useState<IHoverDetailProps>({
     visible: false,
-    posX: 0,
-    posY: 0,
+    posX: initX,
+    posY: initY,
     item: null,
   });
-  let selectedSlotContext: number | null = null;
 
-  const handleContextMenuList = (itemType: ItemType) => {
-    const generateContextList = (actionsByTypeList: any) => {
-      let contextMenu = actionsByTypeList.map((action: string) => {
-        return { id: action, text: action };
-      });
-      return contextMenu;
-    };
-
-    let contextActionMenu: any = [];
-    switch (itemType) {
-      case ItemType.Weapon:
-      case ItemType.Armor:
-      case ItemType.Accessory:
-      case ItemType.Jewelry:
-      case ItemType.Tool:
-        contextActionMenu = generateContextList(ActionsByItemType.Equipment);
-        break;
-      case ItemType.Consumable:
-        contextActionMenu = generateContextList(ActionsByItemType.Consumable);
-        break;
-      case ItemType.CraftMaterial:
-        contextActionMenu = generateContextList(
-          ActionsByItemType.CraftMaterial
-        );
-        break;
-      case ItemType.Other:
-      case ItemType.Information:
-      case ItemType.Quest:
-      case ItemType.Container:
-        contextActionMenu = generateContextList(ActionsByItemType.Other);
-        break;
-      default:
-        contextActionMenu = generateContextList(ActionsByItemType.Other);
-        break;
-    }
-    return contextActionMenu;
+  const clearContextMenu = () => {
+    setContextData({
+      visible: false,
+      posX: 0,
+      posY: 0,
+      contextActions: [],
+      slotItem: null,
+    });
   };
 
-  useEffect(() => {
-    const contextMenuEventHandler = (event: any) => {
-      event.preventDefault();
-      if (selectedSlotContext !== null) {
-        const itemData = itemContainer.slots?.[selectedSlotContext] ?? null;
-        if (itemData) {
-          // TODO: generate a menuActionList based on type and subType of the item.
-          let contextActionMenu: any = handleContextMenuList(itemData.type);
-          setContextData({
-            ...contextData,
-            visible: true,
-            posX: event.clientX,
-            posY: event.clientY,
-            slotItem: itemData,
-            contextActions: contextActionMenu,
-          });
-        } else {
-          // console.log("Empty Slot")
-          setContextData({
-            ...contextData,
-            visible: false,
-            posX: 0,
-            posY: 0,
-            slotIndex: null,
-            slotItem: null,
-            contextActions: [],
-          });
-        }
-      }
-    };
-
-    const offClickHandler = (event: any) => {
-      console.log(event);
-      setContextData({
-        ...contextData,
-        visible: false,
-        posX: 0,
-        posY: 0,
-        slotIndex: null,
-        slotItem: null,
+  const handleOnMouseHover = (
+    event: any,
+    slotIndex: number,
+    item: IItem | null,
+    x: number,
+    y: number
+  ) => {
+    if (item) {
+      setItemHoverDetail({
+        ...itemHoverDetail,
+        visible: true,
+        item: item,
+        posX: x - draggablePosition.x,
+        posY: y - draggablePosition.y,
       });
-    };
-
-    document.addEventListener('contextmenu', contextMenuEventHandler);
-    document.addEventListener('click', offClickHandler);
-    return () => {
-      document.removeEventListener('contextmenu', contextMenuEventHandler);
-      document.removeEventListener('click', offClickHandler);
-    };
-  }, [contextData, selectedSlotContext]);
+      onMouseOver(event, slotIndex, item);
+    } else {
+      clearItemHoverDetail();
+    }
+  };
 
-  const onActionContextMenu = (event: any, slotIndex: number) => {
-    selectedSlotContext = slotIndex;
-    console.log(event);
-    // setContextData({...contextData, slotItem: slotIndex})
+  const clearItemHoverDetail = () => {
+    setItemHoverDetail({
+      ...itemHoverDetail,
+      visible: false,
+      item: null,
+    });
   };
 
-  const handleOnMouseHover = (event: any, slotIndex: number, item: any) => {
-    // TODO: Show a tip view with basic info about the item.
-    //  set a minimun hover period before show infos.
-    // setItemHoverDetail({...itemHoverDetail, visible: true, item: item, posX: event.clientX, posY: event.clientY})
-    onMouseOver(event, slotIndex, item);
+  const handleOnItemClick = (item: IItem, posX: number, posY: number) => {
+    const contextList = handleContextMenuList(item.type);
+
+    setContextData({
+      ...contextData,
+      visible: true,
+      posX,
+      posY,
+      slotItem: item,
+      contextActions: contextList,
+    });
+    clearItemHoverDetail();
   };
 
   const onSelected = (selectedActionId: ItemSocketEvents | string): void => {
@@ -158,8 +144,8 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
       actionType: selectedActionId,
       item: contextData.slotItem,
     };
-    // TODO: create a function to validate the selection set the paylod data.
     onActionSelected(payloadData);
+    clearContextMenu();
   };
 
   const onRenderSlots = () => {
@@ -172,7 +158,10 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
           slotIndex={i}
           item={itemContainer.slots?.[i] || null}
           onMouseOver={handleOnMouseHover}
-          onActionContextMenu={onActionContextMenu}
+          onClick={handleOnItemClick}
+          onCancelContextMenu={() => {
+            clearContextMenu();
+          }}
         />
       );
     }
@@ -180,31 +169,39 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   };
 
   return (
-    <DraggableContainer
-      title={itemContainer.name || 'Container'}
-      type={RPGUIContainerTypes.Framed}
-      onCloseButton={() => onClose()}
-      width="330px"
-    >
-      <ItemsContainer>{onRenderSlots()}</ItemsContainer>
-
-      {contextData.visible ? (
-        <ListMenu
-          x={contextData.posX}
-          y={contextData.posY}
-          options={contextData.contextActions}
-          onSelected={onSelected}
-        />
-      ) : null}
-
-      {itemHoverDetail.visible ? (
-        <ItemCard
-          item={itemHoverDetail.item}
-          x={itemHoverDetail.posX}
-          y={itemHoverDetail.posY}
-        />
-      ) : null}
-    </DraggableContainer>
+    <div ref={draggableRef}>
+      <DraggableContainer
+        title={itemContainer.name || 'Container'}
+        type={RPGUIContainerTypes.Framed}
+        onCloseButton={() => onClose()}
+        width="330px"
+        cancelDrag=".item-container-body"
+        onPositionChange={({ x, y }) => {
+          setDraggablePosition({ x, y });
+        }}
+      >
+        <ItemsContainer className="item-container-body">
+          {onRenderSlots()}
+        </ItemsContainer>
+
+        {contextData.visible ? (
+          <ListMenu
+            x={contextData.posX - draggablePosition.x}
+            y={contextData.posY - draggablePosition.y}
+            options={contextData.contextActions}
+            onSelected={onSelected}
+          />
+        ) : null}
+
+        {itemHoverDetail.visible ? (
+          <ItemCard
+            item={itemHoverDetail.item}
+            x={itemHoverDetail.posX}
+            y={itemHoverDetail.posY}
+          />
+        ) : null}
+      </DraggableContainer>
+    </div>
   );
 };
 

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

@@ -7,17 +7,25 @@ import { SpriteFromAtlas } from '../SpriteFromAtlas';
 interface IProps {
   slotIndex: number;
   item: IItem | null;
-  onMouseOver: (event: any, slotIndex: number, item: IItem | null) => void;
-  onActionContextMenu: (event: any, slotIndex: number) => void;
+  onMouseOver: (
+    event: any,
+    slotIndex: number,
+    item: IItem | null,
+    x: number,
+    y: number
+  ) => void;
+  onClick: (item: IItem, posX: number, posY: number) => void;
+  onCancelContextMenu: () => void;
 }
 
 export const ItemSlot: React.FC<IProps> = ({
   slotIndex,
   item,
   onMouseOver,
-  onActionContextMenu,
+  onClick,
+  onCancelContextMenu,
 }) => {
-  const getLeftPostionValue = (quantity: number) => {
+  const getLeftPositionValue = (quantity: number) => {
     if (quantity > 0 && quantity < 10) return '2.5rem';
     else if (quantity > 9 && quantity < 100) return '2.0rem';
     else if (quantity > 99) return '1rem';
@@ -26,11 +34,18 @@ export const ItemSlot: React.FC<IProps> = ({
 
   return (
     <Container
-      onContextMenu={event => {
-        onActionContextMenu(event, slotIndex);
-      }}
       className="rpgui-icon empty-slot"
-      onMouseOver={event => onMouseOver(event, slotIndex, item)}
+      onMouseOver={event =>
+        onMouseOver(event, slotIndex, item, event.clientX, event.clientY)
+      }
+      onClick={e => {
+        if (item) {
+          console.log(e);
+          onClick(item, e.clientX, e.clientY);
+        } else {
+          onCancelContextMenu();
+        }
+      }}
     >
       {item && item.texturePath ? (
         <SpriteFromAtlas
@@ -41,7 +56,7 @@ export const ItemSlot: React.FC<IProps> = ({
         />
       ) : null}
       {item && item.isStackable && item?.stackQty ? (
-        <ItemQty left={getLeftPostionValue(item.stackQty)}>
+        <ItemQty left={getLeftPositionValue(item.stackQty)}>
           {' '}
           {item.stackQty}{' '}
         </ItemQty>

package/src/components/Item/Inventory/itemContainerHelper.ts

@@ -0,0 +1,44 @@
+import { ActionsByItemType, ItemType } from '@rpg-engine/shared';
+
+interface IContextMenuItem {
+  id: string;
+  text: string;
+}
+
+export const handleContextMenuList = (itemType: ItemType) => {
+  const generateContextList = (actionsByTypeList: any) => {
+    const contextMenu: IContextMenuItem[] = actionsByTypeList.map(
+      (action: string) => {
+        return { id: action, text: action };
+      }
+    );
+    return contextMenu;
+  };
+
+  let contextActionMenu: IContextMenuItem[] = [];
+  switch (itemType) {
+    case ItemType.Weapon:
+    case ItemType.Armor:
+    case ItemType.Accessory:
+    case ItemType.Jewelry:
+    case ItemType.Tool:
+      contextActionMenu = generateContextList(ActionsByItemType.Equipment);
+      break;
+    case ItemType.Consumable:
+      contextActionMenu = generateContextList(ActionsByItemType.Consumable);
+      break;
+    case ItemType.CraftMaterial:
+      contextActionMenu = generateContextList(ActionsByItemType.CraftMaterial);
+      break;
+    case ItemType.Other:
+    case ItemType.Information:
+    case ItemType.Quest:
+    case ItemType.Container:
+      contextActionMenu = generateContextList(ActionsByItemType.Other);
+      break;
+    default:
+      contextActionMenu = generateContextList(ActionsByItemType.Other);
+      break;
+  }
+  return contextActionMenu;
+};

package/src/hooks/useOutsideAlerter.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+export function useOutsideClick(ref: any, id: string) {
+  useEffect(() => {
+    /**
+     * Alert if clicked on outside of element
+     */
+    function handleClickOutside(event: any) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        const event = new CustomEvent('clickOutside', {
+          detail: {
+            id,
+          },
+        });
+        document.dispatchEvent(event);
+      }
+    }
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+}

package/src/types/eventTypes.ts

@@ -0,0 +1,4 @@
+export interface IPosition {
+  x: number;
+  y: number;
+}