@rpg-engine/long-bow 0.3.82 → 0.3.84

package/package.json

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

package/src/components/Abstractions/SlotsContainer.tsx

@@ -8,6 +8,8 @@ interface IProps {
   title: string;
   onClose?: () => void;
   onPositionChange?: (position: IPosition) => void;
+  onPositionChangeEnd?: (position: IPosition) => void;
+  onPositionChangeStart?: (position: IPosition) => void;
   onOutsideClick?: () => void;
   initialPosition?: IPosition;
   scale?: number;
@@ -18,6 +20,8 @@ export const SlotsContainer: React.FC<IProps> = ({
   title,
   onClose,
   onPositionChange,
+  onPositionChangeEnd,
+  onPositionChangeStart,
   onOutsideClick,
   initialPosition,
   scale,
@@ -38,6 +42,16 @@ export const SlotsContainer: React.FC<IProps> = ({
           onPositionChange({ x, y });
         }
       }}
+      onPositionChangeEnd={({ x, y }) => {
+        if (onPositionChangeEnd) {
+          onPositionChangeEnd({ x, y });
+        }
+      }}
+      onPositionChangeStart={({ x, y }) => {
+        if (onPositionChangeStart) {
+          onPositionChangeStart({ x, y });
+        }
+      }}
       onOutsideClick={onOutsideClick}
       initialPosition={initialPosition}
       scale={scale}

package/src/components/DraggableContainer.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import Draggable, { DraggableData } from 'react-draggable';
+import Draggable from 'react-draggable';
 import styled from 'styled-components';
 import { uiFonts } from '../constants/uiFonts';
 import { useOutsideClick } from '../hooks/useOutsideAlerter';
@@ -18,6 +18,8 @@ export interface IDraggableContainerProps {
   onCloseButton?: () => void;
   cancelDrag?: string;
   onPositionChange?: (position: IPosition) => void;
+  onPositionChangeEnd?: (position: IPosition) => void;
+  onPositionChangeStart?: (position: IPosition) => void;
   onOutsideClick?: () => void;
   initialPosition?: IPosition;
   scale?: number;
@@ -35,6 +37,8 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
   imgWidth = '20px',
   cancelDrag,
   onPositionChange,
+  onPositionChangeEnd,
+  onPositionChangeStart,
   onOutsideClick,
   initialPosition = { x: 0, y: 0 },
   scale,
@@ -62,7 +66,7 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
   return (
     <Draggable
       cancel={`.container-close,${cancelDrag}`}
-      onDrag={(_e, data: DraggableData) => {
+      onDrag={(_e, data) => {
         if (onPositionChange) {
           onPositionChange({
             x: data.x,
@@ -70,6 +74,22 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
           });
         }
       }}
+      onStop={(_e, data) => {
+        if (onPositionChangeEnd) {
+          onPositionChangeEnd({
+            x: data.x,
+            y: data.y,
+          });
+        }
+      }}
+      onStart={(_e, data) => {
+        if (onPositionChangeStart) {
+          onPositionChangeStart({
+            x: data.x,
+            y: data.y,
+          });
+        }
+      }}
       defaultPosition={initialPosition}
       scale={scale}
     >

package/src/components/Equipment/EquipmentSet.tsx

@@ -42,6 +42,8 @@ export interface IEquipmentSetProps {
   type: ItemContainerType | null;
   atlasIMG: any;
   atlasJSON: any;
+  onPositionChangeEnd?: (position: IPosition) => void;
+  onPositionChangeStart?: (position: IPosition) => void;
 }
 
 export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
@@ -59,6 +61,9 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
   checkIfItemCanBeMoved,
   checkIfItemShouldDragEnd,
   scale,
+  initialPosition,
+  onPositionChangeEnd,
+  onPositionChangeStart,
 }) => {
   const {
     neck,
@@ -163,6 +168,9 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
       width="330px"
       cancelDrag=".equipment-container-body"
       scale={scale}
+      initialPosition={initialPosition}
+      onPositionChangeEnd={onPositionChangeEnd}
+      onPositionChangeStart={onPositionChangeStart}
     >
       <EquipmentSetContainer className="equipment-container-body">
         <EquipmentColumn>{onRenderEquipmentSlotRange(0, 3)}</EquipmentColumn>

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

@@ -50,6 +50,9 @@ export interface IItemContainerProps {
   setItemShortcut?: (key: string, index: number) => void;
   removeShortcut?: (index: number) => void;
   equipmentSet?: IEquipmentSet | null;
+  isDepotSystem?: boolean;
+  onPositionChangeEnd?: (position: IPosition) => void;
+  onPositionChangeStart?: (position: IPosition) => void;
 }
 
 export const ItemContainer: React.FC<IItemContainerProps> = ({
@@ -74,6 +77,9 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   setItemShortcut,
   removeShortcut,
   equipmentSet,
+  isDepotSystem,
+  onPositionChangeEnd,
+  onPositionChangeStart,
 }) => {
   const [quantitySelect, setQuantitySelect] = useState({
     isOpen: false,
@@ -139,6 +145,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
           atlasJSON={atlasJSON}
           isSelectingShortcut={settingShortcutIndex !== -1}
           equipmentSet={equipmentSet}
+          isDepotSystem={isDepotSystem}
         />
       );
     }
@@ -152,6 +159,8 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
         onClose={onClose}
         initialPosition={initialPosition}
         scale={scale}
+        onPositionChangeEnd={onPositionChangeEnd}
+        onPositionChangeStart={onPositionChangeStart}
       >
         {type === ItemContainerType.Inventory &&
           shortcuts &&

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

@@ -78,6 +78,7 @@ interface IProps {
   isContextMenuDisabled?: boolean;
   isSelectingShortcut?: boolean;
   equipmentSet?: IEquipmentSet | null;
+  isDepotSystem?: boolean;
 }
 
 export const ItemSlot: React.FC<IProps> = observer(
@@ -103,11 +104,16 @@ export const ItemSlot: React.FC<IProps> = observer(
     dragScale,
     isSelectingShortcut,
     equipmentSet,
+    isDepotSystem,
   }) => {
     const [isTooltipVisible, setTooltipVisible] = useState(false);
     const [isTooltipMobileVisible, setIsTooltipMobileVisible] = useState(false);
 
     const [isContextMenuVisible, setIsContextMenuVisible] = useState(false);
+    const [contextMenuPosition, setContextMenuPosition] = useState({
+      x: 0,
+      y: 0,
+    });
 
     const [isFocused, setIsFocused] = useState(false);
     const [wasDragged, setWasDragged] = useState(false);
@@ -124,9 +130,11 @@ export const ItemSlot: React.FC<IProps> = observer(
       setIsFocused(false);
 
       if (item) {
-        setContextActions(generateContextMenu(item, containerType));
+        setContextActions(
+          generateContextMenu(item, containerType, isDepotSystem)
+        );
       }
-    }, [item]);
+    }, [item, isDepotSystem]);
 
     useEffect(() => {
       if (onDrop && item && dropPosition) {
@@ -357,8 +365,17 @@ export const ItemSlot: React.FC<IProps> = observer(
                 setIsTooltipMobileVisible(true);
               }
 
-              if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch)
+              if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
                 setIsContextMenuVisible(!isContextMenuVisible);
+                const event = e as MouseEvent;
+
+                if (event.clientX && event.clientY) {
+                  setContextMenuPosition({
+                    x: event.clientX - 10,
+                    y: event.clientY - 5,
+                  });
+                }
+              }
 
               onPointerDown(item.type, containerType, item);
             }
@@ -445,6 +462,7 @@ export const ItemSlot: React.FC<IProps> = observer(
             onOutsideClick={() => {
               setIsContextMenuVisible(false);
             }}
+            pos={contextMenuPosition}
           />
         )}
       </Container>

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

@@ -3,8 +3,10 @@ import {
   ActionsForInventory,
   ActionsForLoot,
   ActionsForMapContainer,
+  DepotSocketEvents,
   IItem,
   ItemContainerType,
+  ItemSocketEvents,
   ItemSocketEventsDisplayLabels,
   ItemType,
 } from '@rpg-engine/shared';
@@ -25,7 +27,8 @@ const generateContextMenuListOptions = (actionsByTypeList: any) => {
 
 export const generateContextMenu = (
   item: IItem,
-  itemContainerType: ItemContainerType | null
+  itemContainerType: ItemContainerType | null,
+  isDepotSystem?: boolean
 ) => {
   let contextActionMenu: IContextMenuItem[] = [];
 
@@ -66,6 +69,13 @@ export const generateContextMenu = (
         );
         break;
     }
+
+    if (isDepotSystem) {
+      contextActionMenu.push({
+        id: DepotSocketEvents.Deposit,
+        text: 'Deposit',
+      });
+    }
   }
   if (itemContainerType === ItemContainerType.Equipment) {
     switch (item.type) {
@@ -151,6 +161,15 @@ export const generateContextMenu = (
       contextActionMenu.push({ id: 'use-with', text: 'Use with...' });
     }
   }
+  if (itemContainerType === ItemContainerType.Depot) {
+    contextActionMenu = [
+      {
+        id: ItemSocketEvents.GetItemInfo,
+        text: ItemSocketEventsDisplayLabels.GetItemInfo,
+      },
+      { id: DepotSocketEvents.Withdraw, text: 'Withdraw' },
+    ];
+  }
 
   return contextActionMenu;
 };

package/src/components/RelativeListMenu.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { useOutsideClick } from '../hooks/useOutsideAlerter';
+import ModalPortal from './Abstractions/ModalPortal';
 
 interface IListMenuOption {
   id: string;
@@ -12,6 +13,7 @@ export interface IRelativeMenuProps {
   onSelected: (selectedOptionId: string) => void;
   fontSize?: number;
   onOutsideClick?: () => void;
+  pos: { x: number; y: number };
 }
 
 export const RelativeListMenu: React.FC<IRelativeMenuProps> = ({
@@ -19,6 +21,7 @@ export const RelativeListMenu: React.FC<IRelativeMenuProps> = ({
   onSelected,
   onOutsideClick,
   fontSize = 0.8,
+  pos,
 }) => {
   const ref = useRef(null);
 
@@ -41,31 +44,35 @@ export const RelativeListMenu: React.FC<IRelativeMenuProps> = ({
   }, []);
 
   return (
-    <Container fontSize={fontSize} ref={ref}>
-      <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
-        {options.map((params, index) => (
-          <ListElement
-            key={params?.id || index}
-            onPointerDown={() => {
-              onSelected(params?.id);
-            }}
-          >
-            {params?.text || 'No text'}
-          </ListElement>
-        ))}
-      </ul>
-    </Container>
+    <ModalPortal>
+      <Container fontSize={fontSize} ref={ref} {...pos}>
+        <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
+          {options.map((params, index) => (
+            <ListElement
+              key={params?.id || index}
+              onPointerDown={() => {
+                onSelected(params?.id);
+              }}
+            >
+              {params?.text || 'No text'}
+            </ListElement>
+          ))}
+        </ul>
+      </Container>
+    </ModalPortal>
   );
 };
 
 interface IContainerProps {
   fontSize?: number;
+  x: number;
+  y: number;
 }
 
 const Container = styled.div<IContainerProps>`
   position: absolute;
-  top: 1rem;
-  left: 4rem;
+  top: ${props => props.y}px;
+  left: ${props => props.x}px;
 
   display: flex;
   flex-direction: column;

package/src/stories/ItemContainer.stories.tsx

@@ -192,6 +192,7 @@ const Template: Story<IItemContainerProps> = () => {
         setItemShortcut={setItemShortcut}
         removeShortcut={removeShortcut}
         equipmentSet={equipmentSetMock}
+        isDepotSystem
       />
     </RPGUIRoot>
   );