@rpg-engine/long-bow 0.2.89 → 0.2.91

package/dist/components/Equipment/EquipmentSet.d.ts

@@ -1,5 +1,6 @@
 import { IEquipmentSet, IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
 import React from 'react';
+import { IPosition } from '../../types/eventTypes';
 export interface IEquipmentSetProps {
     equipmentSet: IEquipmentSet;
     onClose?: () => void;
@@ -7,6 +8,7 @@ export interface IEquipmentSetProps {
     onItemDragStart?: (item: IItem, slotIndex: number, itemContainerType: ItemContainerType | null) => void;
     onItemDragEnd?: (quantity?: number) => void;
     onItemPlaceDrop?: (item: IItem | null, 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;

package/dist/components/Item/Inventory/ItemContainer.d.ts

@@ -1,11 +1,13 @@
 import { IItem, IItemContainer, ItemContainerType } from '@rpg-engine/shared';
 import React from 'react';
+import { IPosition } from '../../../types/eventTypes';
 export interface IItemContainerProps {
     itemContainer: IItemContainer;
     onClose?: () => void;
     onItemClick?: (item: IItem, ItemType: IItem['type'], itemContainerType: ItemContainerType | null) => void;
     onItemDragStart?: (item: IItem, slotIndex: number, itemContainerType: ItemContainerType | null) => void;
     onItemDragEnd?: (quantity?: number) => void;
+    onOutsideDrop?: (item: IItem, position: IPosition) => void;
     onItemPlaceDrop?: (item: IItem | null, slotIndex: number, itemContainerType: ItemContainerType | null) => void;
     checkIfItemCanBeMoved: () => boolean;
     onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;

package/dist/components/Item/Inventory/ItemSlot.d.ts

@@ -1,5 +1,6 @@
 import { IItem, IItemContainer, ItemContainerType, ItemSlotType, ItemType } from '@rpg-engine/shared';
 import React from 'react';
+import { IPosition } from '../../../types/eventTypes';
 interface IProps {
     slotIndex: number;
     item: IItem | null;
@@ -12,6 +13,7 @@ interface IProps {
     onClick: (ItemType: ItemType, itemContainerType: ItemContainerType | null, item: IItem) => void;
     onDragStart: (item: IItem, slotIndex: number, itemContainerType: ItemContainerType | null) => void;
     onDragEnd: (quantity?: number) => void;
+    onOutsideDrop?: (item: IItem, position: IPosition) => void;
     checkIfItemCanBeMoved: () => boolean;
     openQuantitySelector?: (maxQuantity: number, callback: () => void) => void;
     onPlaceDrop: (item: IItem | null, slotIndex: number, itemContainerType: ItemContainerType | null) => void;

package/dist/long-bow.cjs.development.js

@@ -33482,6 +33482,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     onDragEnd = _ref.onDragEnd,
     onDragStart = _ref.onDragStart,
     onPlaceDrop = _ref.onPlaceDrop,
+    onDrop = _ref.onOutsideDrop,
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
     openQuantitySelector = _ref.openQuantitySelector;
   var _useState = React.useState(false),
@@ -33502,10 +33503,13 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     }),
     dragPosition = _useState5[0],
     setDragPosition = _useState5[1];
+  var _useState6 = React.useState(null),
+    dropPosition = _useState6[0],
+    setDropPosition = _useState6[1];
   var dragContainer = React.useRef(null);
-  var _useState6 = React.useState([]),
-    contextActions = _useState6[0],
-    setContextActions = _useState6[1];
+  var _useState7 = React.useState([]),
+    contextActions = _useState7[0],
+    setContextActions = _useState7[1];
   React.useEffect(function () {
     setDragPosition({
       x: 0,
@@ -33515,6 +33519,11 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       setContextActions(generateContextMenu(item, containerType));
     }
   }, [item]);
+  React.useEffect(function () {
+    if (onDrop && item && dropPosition) {
+      onDrop(item, dropPosition);
+    }
+  }, [dropPosition]);
   var getStackInfo = function getStackInfo(itemId, stackQty) {
     // if (itemToRender?.isStackable && itemToRender?.stackQty) {
     var isFractionalStackQty = stackQty % 1 !== 0;
@@ -33637,11 +33646,21 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     }
   }, React__default.createElement(Draggable, {
     defaultClassName: item ? 'draggable' : 'empty-slot',
-    onStop: function onStop() {
-      if (!item) {
-        return;
-      }
-      if (wasDragged) {
+    onStop: function onStop(e, data) {
+      if (wasDragged && item) {
+        var _e$target;
+        //@ts-ignore
+        var classes = Array.from((_e$target = e.target) == null ? void 0 : _e$target.classList);
+        var isOutsideDrop = classes.some(function (elm) {
+          //elm matches ItemContainer string
+          return elm.includes('rpgui-content');
+        });
+        if (isOutsideDrop) {
+          setDropPosition({
+            x: data.x,
+            y: data.y
+          });
+        }
         setWasDragged(false);
         var target = dragContainer.current;
         if (!target || !wasDragged) return;
@@ -33743,6 +33762,7 @@ var EquipmentSet = function EquipmentSet(_ref) {
     onItemDragEnd = _ref.onItemDragEnd,
     onItemDragStart = _ref.onItemDragStart,
     onItemPlaceDrop = _ref.onItemPlaceDrop,
+    onItemOutsideDrop = _ref.onItemOutsideDrop,
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved;
   var neck = equipmentSet.neck,
     leftHand = equipmentSet.leftHand,
@@ -33792,6 +33812,9 @@ var EquipmentSet = function EquipmentSet(_ref) {
         onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
           if (onItemPlaceDrop) onItemPlaceDrop(item, slotIndex, itemContainerType);
         },
+        onOutsideDrop: function onOutsideDrop(item, position) {
+          if (onItemOutsideDrop) onItemOutsideDrop(item, position);
+        },
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON
       });
@@ -34559,6 +34582,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     onItemDragEnd = _ref.onItemDragEnd,
     onItemDragStart = _ref.onItemDragStart,
     onItemPlaceDrop = _ref.onItemPlaceDrop,
+    _onOutsideDrop = _ref.onOutsideDrop,
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
     initialPosition = _ref.initialPosition;
   var _useState = React.useState({
@@ -34604,6 +34628,9 @@ var ItemContainer$1 = function ItemContainer(_ref) {
         onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
           if (onItemPlaceDrop) onItemPlaceDrop(item, slotIndex, itemContainerType);
         },
+        onOutsideDrop: function onOutsideDrop(item, position) {
+          if (_onOutsideDrop) _onOutsideDrop(item, position);
+        },
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON
       }));