@rpg-engine/long-bow 0.1.66 → 0.1.67

package/dist/long-bow.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import dayjs from 'dayjs';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -6,7 +6,7 @@ import Draggable from 'react-draggable';
 import { v4 } from 'uuid';
 import 'rpgui/rpgui.min.css';
 import 'rpgui/rpgui.min.js';
-import { GRID_WIDTH, GRID_HEIGHT, ItemType, ActionsByItemType } from '@rpg-engine/shared';
+import { ItemType, ActionsByItemType, GRID_WIDTH, GRID_HEIGHT } from '@rpg-engine/shared';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -295,14 +295,23 @@ var DraggableContainer = function DraggableContainer(_ref) {
       title = _ref.title,
       imgSrc = _ref.imgSrc,
       _ref$imgWidth = _ref.imgWidth,
-      imgWidth = _ref$imgWidth === void 0 ? '20px' : _ref$imgWidth;
+      imgWidth = _ref$imgWidth === void 0 ? '20px' : _ref$imgWidth,
+      cancelDrag = _ref.cancelDrag,
+      onPositionChange = _ref.onPositionChange;
   return React.createElement(Draggable, {
-    handle: ".drag-handdler",
-    cancel: ".container-close"
+    cancel: ".container-close," + cancelDrag,
+    onDrag: function onDrag(_e, data) {
+      if (onPositionChange) {
+        onPositionChange({
+          x: data.x,
+          y: data.y
+        });
+      }
+    }
   }, React.createElement(Container$2, {
     width: width,
     height: height || 'auto',
-    className: "rpgui-container " + type + " " + className + " rpgui-draggable"
+    className: "rpgui-container " + type + " " + className
   }, React.createElement(TitleContainer, {
     className: "drag-handler"
   }, React.createElement(Title, null, imgSrc && React.createElement(Icon, {
@@ -389,6 +398,32 @@ var Dropdown = function Dropdown(_ref) {
   }));
 };
 
+function useOutsideClick(ref, id) {
+  useEffect(function () {
+    /**
+     * Alert if clicked on outside of element
+     */
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        var _event = new CustomEvent('clickOutside', {
+          detail: {
+            id: id
+          }
+        });
+
+        document.dispatchEvent(_event);
+      }
+    } // Bind the event listener
+
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+}
+
 var ListMenu = function ListMenu(_ref) {
   var options = _ref.options,
       onSelected = _ref.onSelected,
@@ -441,12 +476,57 @@ var ItemCard = function ItemCard(_ref) {
 var Container$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemCard__Container",
   componentId: "sc-170rits-0"
-})(["position:absolute;top:", "px;left:", "px;font-size:7px;color:white;"], function (props) {
+})(["position:absolute;top:", "px;left:", "px;font-size:0.5rem;color:white;background-color:black;border-radius:5px;padding:0.5rem;min-width:20px;opacity:0.5;"], function (props) {
   return props.y || 0;
 }, function (props) {
   return props.x || 0;
 });
 
+var handleContextMenuList = function handleContextMenuList(itemType) {
+  var generateContextList = function generateContextList(actionsByTypeList) {
+    var contextMenu = actionsByTypeList.map(function (action) {
+      return {
+        id: action,
+        text: action
+      };
+    });
+    return contextMenu;
+  };
+
+  var contextActionMenu = [];
+
+  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;
+};
+
 var frames = {
 	"accessories/bandana.png": {
 		frame: {
@@ -2199,20 +2279,27 @@ var ItemSlot = function ItemSlot(_ref) {
   var slotIndex = _ref.slotIndex,
       item = _ref.item,
       _onMouseOver = _ref.onMouseOver,
-      onActionContextMenu = _ref.onActionContextMenu;
+      _onClick = _ref.onClick,
+      onCancelContextMenu = _ref.onCancelContextMenu;
 
-  var getLeftPostionValue = function getLeftPostionValue(quantity) {
+  var getLeftPositionValue = function getLeftPositionValue(quantity) {
     if (quantity > 0 && quantity < 10) return '2.5rem';else if (quantity > 9 && quantity < 100) return '2.0rem';else if (quantity > 99) return '1rem';
     return '2.5rem';
   };
 
   return React.createElement(Container$6, {
-    onContextMenu: function onContextMenu(event) {
-      onActionContextMenu(event, slotIndex);
-    },
     className: "rpgui-icon empty-slot",
     onMouseOver: function onMouseOver(event) {
-      return _onMouseOver(event, slotIndex, item);
+      return _onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
+    },
+    onClick: function onClick(e) {
+      if (item) {
+        console.log(e);
+
+        _onClick(item, e.clientX, e.clientY);
+      } else {
+        onCancelContextMenu();
+      }
     }
   }, item && item.texturePath ? React.createElement(SpriteFromAtlas, {
     atlasIMG: img,
@@ -2220,7 +2307,7 @@ var ItemSlot = function ItemSlot(_ref) {
     spriteKey: item.texturePath,
     scale: 3
   }) : null, item && item.isStackable && item != null && item.stackQty ? React.createElement(ItemQty, {
-    left: getLeftPostionValue(item.stackQty)
+    left: getLeftPositionValue(item.stackQty)
   }, ' ', item.stackQty, ' ') : null);
 };
 var Container$6 = /*#__PURE__*/styled.div.withConfig({
@@ -2238,181 +2325,158 @@ var ItemContainer = function ItemContainer(_ref) {
   var itemContainer = _ref.itemContainer,
       onClose = _ref.onClose,
       onMouseOver = _ref.onMouseOver,
-      onActionSelected = _ref.onActionSelected;
+      onActionSelected = _ref.onActionSelected,
+      _ref$initialPosition = _ref.initialPosition,
+      initialPosition = _ref$initialPosition === void 0 ? {
+    x: 0,
+    y: 0
+  } : _ref$initialPosition;
+
+  // we use this draggable position to offset the menu position, after the container is dragged (otherwise, it bugs!)
+  var _useState = useState(initialPosition),
+      draggablePosition = _useState[0],
+      setDraggablePosition = _useState[1];
+
+  var draggableRef = useRef(null);
+  useOutsideClick(draggableRef, 'item-container');
+  useEffect(function () {
+    document.addEventListener('clickOutside', function (event) {
+      var e = event;
+
+      if (e.detail.id === 'item-container') {
+        clearContextMenu();
+        clearItemHoverDetail();
+      }
+    });
+    return function () {
+      document.removeEventListener('clickOutside', function (_e) {});
+    };
+  }, []);
+  var initX = initialPosition.x,
+      initY = initialPosition.y;
 
-  var _useState = useState({
+  var _useState2 = useState({
     visible: false,
-    posX: 0,
-    posY: 0,
+    posX: initX,
+    posY: initY,
     contextActions: [],
     slotItem: null
   }),
-      contextData = _useState[0],
-      setContextData = _useState[1];
+      contextData = _useState2[0],
+      setContextData = _useState2[1];
 
-  var _useState2 = useState({
+  var _useState3 = useState({
     visible: false,
-    posX: 0,
-    posY: 0,
+    posX: initX,
+    posY: initY,
     item: null
   }),
-      itemHoverDetail = _useState2[0];
-
-  var selectedSlotContext = null;
-
-  var handleContextMenuList = function handleContextMenuList(itemType) {
-    var generateContextList = function generateContextList(actionsByTypeList) {
-      var contextMenu = actionsByTypeList.map(function (action) {
-        return {
-          id: action,
-          text: action
-        };
-      });
-      return contextMenu;
-    };
-
-    var contextActionMenu = [];
-
-    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;
+      itemHoverDetail = _useState3[0],
+      setItemHoverDetail = _useState3[1];
+
+  var clearContextMenu = function clearContextMenu() {
+    setContextData({
+      visible: false,
+      posX: 0,
+      posY: 0,
+      contextActions: [],
+      slotItem: null
+    });
   };
 
-  useEffect(function () {
-    var contextMenuEventHandler = function contextMenuEventHandler(event) {
-      event.preventDefault();
-
-      if (selectedSlotContext !== null) {
-        var _itemContainer$slots$, _itemContainer$slots;
-
-        var itemData = (_itemContainer$slots$ = (_itemContainer$slots = itemContainer.slots) == null ? void 0 : _itemContainer$slots[selectedSlotContext]) != null ? _itemContainer$slots$ : null;
-
-        if (itemData) {
-          // TODO: generate a menuActionList based on type and subType of the item.
-          var contextActionMenu = handleContextMenuList(itemData.type);
-          setContextData(_extends({}, contextData, {
-            visible: true,
-            posX: event.clientX,
-            posY: event.clientY,
-            slotItem: itemData,
-            contextActions: contextActionMenu
-          }));
-        } else {
-          // console.log("Empty Slot")
-          setContextData(_extends({}, contextData, {
-            visible: false,
-            posX: 0,
-            posY: 0,
-            slotIndex: null,
-            slotItem: null,
-            contextActions: []
-          }));
-        }
-      }
-    };
-
-    var offClickHandler = function offClickHandler(event) {
-      console.log(event);
-      setContextData(_extends({}, contextData, {
-        visible: false,
-        posX: 0,
-        posY: 0,
-        slotIndex: null,
-        slotItem: null
+  var handleOnMouseHover = function handleOnMouseHover(event, slotIndex, item, x, y) {
+    if (item) {
+      setItemHoverDetail(_extends({}, itemHoverDetail, {
+        visible: true,
+        item: item,
+        posX: x - draggablePosition.x,
+        posY: y - draggablePosition.y
       }));
-    };
-
-    document.addEventListener('contextmenu', contextMenuEventHandler);
-    document.addEventListener('click', offClickHandler);
-    return function () {
-      document.removeEventListener('contextmenu', contextMenuEventHandler);
-      document.removeEventListener('click', offClickHandler);
-    };
-  }, [contextData, selectedSlotContext]);
+      onMouseOver(event, slotIndex, item);
+    } else {
+      clearItemHoverDetail();
+    }
+  };
 
-  var onActionContextMenu = function onActionContextMenu(event, slotIndex) {
-    selectedSlotContext = slotIndex;
-    console.log(event); // setContextData({...contextData, slotItem: slotIndex})
+  var clearItemHoverDetail = function clearItemHoverDetail() {
+    setItemHoverDetail(_extends({}, itemHoverDetail, {
+      visible: false,
+      item: null
+    }));
   };
 
-  var handleOnMouseHover = function handleOnMouseHover(event, slotIndex, item) {
-    // 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);
+  var handleOnItemClick = function handleOnItemClick(item, posX, posY) {
+    var contextList = handleContextMenuList(item.type);
+    setContextData(_extends({}, contextData, {
+      visible: true,
+      posX: posX,
+      posY: posY,
+      slotItem: item,
+      contextActions: contextList
+    }));
+    clearItemHoverDetail();
   };
 
   var onSelected = function onSelected(selectedActionId) {
     var payloadData = {
       actionType: selectedActionId,
       item: contextData.slotItem
-    }; // TODO: create a function to validate the selection set the paylod data.
-
+    };
     onActionSelected(payloadData);
+    clearContextMenu();
   };
 
   var onRenderSlots = function onRenderSlots() {
     var slots = [];
 
     for (var i = 0; i < itemContainer.slotQty; i++) {
-      var _itemContainer$slots2;
+      var _itemContainer$slots;
 
       slots.push(React.createElement(ItemSlot, {
         key: i,
         slotIndex: i,
-        item: ((_itemContainer$slots2 = itemContainer.slots) == null ? void 0 : _itemContainer$slots2[i]) || null,
+        item: ((_itemContainer$slots = itemContainer.slots) == null ? void 0 : _itemContainer$slots[i]) || null,
         onMouseOver: handleOnMouseHover,
-        onActionContextMenu: onActionContextMenu
+        onClick: handleOnItemClick,
+        onCancelContextMenu: function onCancelContextMenu() {
+          clearContextMenu();
+        }
       }));
     }
 
     return slots;
   };
 
-  return React.createElement(DraggableContainer, {
+  return React.createElement("div", {
+    ref: draggableRef
+  }, React.createElement(DraggableContainer, {
     title: itemContainer.name || 'Container',
     type: RPGUIContainerTypes.Framed,
     onCloseButton: function onCloseButton() {
       return onClose();
     },
-    width: "330px"
-  }, React.createElement(ItemsContainer, null, onRenderSlots()), contextData.visible ? React.createElement(ListMenu, {
-    x: contextData.posX,
-    y: contextData.posY,
+    width: "330px",
+    cancelDrag: ".item-container-body",
+    onPositionChange: function onPositionChange(_ref2) {
+      var x = _ref2.x,
+          y = _ref2.y;
+      setDraggablePosition({
+        x: x,
+        y: y
+      });
+    }
+  }, React.createElement(ItemsContainer, {
+    className: "item-container-body"
+  }, onRenderSlots()), contextData.visible ? React.createElement(ListMenu, {
+    x: contextData.posX - draggablePosition.x,
+    y: contextData.posY - draggablePosition.y,
     options: contextData.contextActions,
     onSelected: onSelected
   }) : null, itemHoverDetail.visible ? React.createElement(ItemCard, {
     item: itemHoverDetail.item,
     x: itemHoverDetail.posX,
     y: itemHoverDetail.posY
-  }) : null);
+  }) : null));
 };
 var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__ItemsContainer",