@rpg-engine/long-bow 0.2.89 → 0.2.91

package/package.json

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

package/src/components/Equipment/EquipmentSet.tsx

@@ -8,6 +8,7 @@ import {
 } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
+import { IPosition } from '../../types/eventTypes';
 import { DraggableContainer } from '../DraggableContainer';
 import { ItemSlot } from '../Item/Inventory/ItemSlot';
 import { RPGUIContainerTypes } from '../RPGUIContainer';
@@ -31,6 +32,7 @@ export interface IEquipmentSetProps {
     slotIndex: number,
     itemContainerType: ItemContainerType | null
   ) => void;
+  onItemOutsideDrop?: (item: IItem, position: IPosition) => void;
   checkIfItemCanBeMoved: () => boolean;
   onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
   onSelected?: (optionId: string) => void;
@@ -51,6 +53,7 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
   onItemDragEnd,
   onItemDragStart,
   onItemPlaceDrop,
+  onItemOutsideDrop,
   checkIfItemCanBeMoved,
 }) => {
   const {
@@ -134,6 +137,9 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
             if (onItemPlaceDrop)
               onItemPlaceDrop(item, slotIndex, itemContainerType);
           }}
+          onOutsideDrop={(item, position) => {
+            if (onItemOutsideDrop) onItemOutsideDrop(item, position);
+          }}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
         />

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

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { SlotsContainer } from '../../Abstractions/SlotsContainer';
 import { ItemQuantitySelector } from './ItemQuantitySelector';
 
+import { IPosition } from '../../../types/eventTypes';
 import { ItemSlot } from './ItemSlot';
 
 export interface IItemContainerProps {
@@ -20,6 +21,7 @@ export interface IItemContainerProps {
     itemContainerType: ItemContainerType | null
   ) => void;
   onItemDragEnd?: (quantity?: number) => void;
+  onOutsideDrop?: (item: IItem, position: IPosition) => void;
   onItemPlaceDrop?: (
     item: IItem | null,
     slotIndex: number,
@@ -48,6 +50,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   onItemDragEnd,
   onItemDragStart,
   onItemPlaceDrop,
+  onOutsideDrop,
   checkIfItemCanBeMoved,
   initialPosition,
 }) => {
@@ -96,6 +99,9 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
             if (onItemPlaceDrop)
               onItemPlaceDrop(item, slotIndex, itemContainerType);
           }}
+          onOutsideDrop={(item, position) => {
+            if (onOutsideDrop) onOutsideDrop(item, position);
+          }}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
         />

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

@@ -13,6 +13,7 @@ import Draggable from 'react-draggable';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 import { uiFonts } from '../../../constants/uiFonts';
+import { IPosition } from '../../../types/eventTypes';
 import { RelativeListMenu } from '../../RelativeListMenu';
 import { Ellipsis } from '../../shared/Ellipsis';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
@@ -59,6 +60,7 @@ interface IProps {
     itemContainerType: ItemContainerType | null
   ) => void;
   onDragEnd: (quantity?: number) => void;
+  onOutsideDrop?: (item: IItem, position: IPosition) => void;
   checkIfItemCanBeMoved: () => boolean;
   openQuantitySelector?: (maxQuantity: number, callback: () => void) => void;
   onPlaceDrop: (
@@ -87,6 +89,7 @@ export const ItemSlot: React.FC<IProps> = observer(
     onDragEnd,
     onDragStart,
     onPlaceDrop,
+    onOutsideDrop: onDrop,
     checkIfItemCanBeMoved,
     openQuantitySelector,
   }) => {
@@ -96,7 +99,8 @@ export const ItemSlot: React.FC<IProps> = observer(
 
     const [isFocused, setIsFocused] = useState(false);
     const [wasDragged, setWasDragged] = useState(false);
-    const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
+    const [dragPosition, setDragPosition] = useState<IPosition>({ x: 0, y: 0 });
+    const [dropPosition, setDropPosition] = useState<IPosition | null>(null);
     const dragContainer = useRef<HTMLDivElement>(null);
 
     const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
@@ -111,6 +115,12 @@ export const ItemSlot: React.FC<IProps> = observer(
       }
     }, [item]);
 
+    useEffect(() => {
+      if (onDrop && item && dropPosition) {
+        onDrop(item, dropPosition);
+      }
+    }, [dropPosition]);
+
     const getStackInfo = (itemId: string, stackQty: number) => {
       // if (itemToRender?.isStackable && itemToRender?.stackQty) {
 
@@ -269,12 +279,24 @@ export const ItemSlot: React.FC<IProps> = observer(
       >
         <Draggable
           defaultClassName={item ? 'draggable' : 'empty-slot'}
-          onStop={() => {
-            if (!item) {
-              return;
-            }
+          onStop={(e, data) => {
+            if (wasDragged && item) {
+              //@ts-ignore
+              const classes: string[] = Array.from(e.target?.classList);
+
+              const isOutsideDrop = classes.some(elm => {
+                //elm matches ItemContainer string
+
+                return elm.includes('rpgui-content');
+              });
+
+              if (isOutsideDrop) {
+                setDropPosition({
+                  x: data.x,
+                  y: data.y,
+                });
+              }
 
-            if (wasDragged) {
               setWasDragged(false);
 
               const target = dragContainer.current;

package/src/stories/EquipmentSet.stories.tsx

@@ -9,6 +9,7 @@ import { RPGUIRoot } from '../../src/components/RPGUIRoot';
 import { equipmentSetMock } from '../../src/mocks/equipmentSet.mocks';
 import atlasJSON from '../mocks/atlas/items/items.json';
 import atlasIMG from '../mocks/atlas/items/items.png';
+import { IPosition } from '../types/eventTypes';
 
 const meta: Meta = {
   title: 'Equipment Set',
@@ -36,6 +37,10 @@ const onSelected = (payload: string) => {
   console.log('dispatch', payload);
 };
 
+const onItemOutsideDrop = (item: IItem, position: IPosition) => {
+  console.log('dropped outside', item, position);
+};
+
 const Template: Story<IEquipmentSetProps> = args => (
   <RPGUIRoot>
     <EquipmentSet
@@ -52,6 +57,7 @@ const Template: Story<IEquipmentSetProps> = args => (
       type={ItemContainerType.Equipment}
       atlasIMG={atlasIMG}
       atlasJSON={atlasJSON}
+      onItemOutsideDrop={onItemOutsideDrop}
     />
   </RPGUIRoot>
 );

package/src/stories/ItemContainer.stories.tsx

@@ -111,6 +111,7 @@ const Template: Story<IItemContainerProps> = () => {
             dropItem = null;
           }
         }}
+        onOutsideDrop={(item, pos) => console.log('drop', item, pos)}
         type={ItemContainerType.Inventory}
         atlasIMG={atlasIMG}
         atlasJSON={atlasJSON}