@rpg-engine/long-bow 0.1.78 → 0.1.794

package/dist/long-bow.esm.js

@@ -11,7 +11,7 @@ import { observer } from 'mobx-react';
 import { makeAutoObservable, toJS } from 'mobx';
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -24,7 +24,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -5975,6 +5974,10 @@ var initialHoverState = {
   posY: 0,
   item: null
 };
+var initialPosition = {
+  x: 0,
+  y: 0
+};
 
 var UIStore = /*#__PURE__*/function () {
   function UIStore() {
@@ -5982,6 +5985,7 @@ var UIStore = /*#__PURE__*/function () {
 
     this.contextMenu = initialState;
     this.onHoverDetail = initialHoverState;
+    this.draggablePosition = initialPosition;
 
     this.handleOnItemClick = function (item, posX, posY, slotContainerType) {
       var _this$contextMenu;
@@ -5994,6 +5998,8 @@ var UIStore = /*#__PURE__*/function () {
         return;
       }
 
+      _this.setDraggablePosition(_this.getOffsets());
+
       switch (slotContainerType) {
         case SlotContainerType.EQUIPMENT_SET:
           _this.setEquipContextMenu({
@@ -6030,6 +6036,8 @@ var UIStore = /*#__PURE__*/function () {
 
     this.handleOnMouseHover = function (event, slotIndex, item, posX, posY, onMouseOver) {
       if (item) {
+        _this.setDraggablePosition(_this.getOffsets());
+
         _this.setItemHoverDetail({
           visible: true,
           posX: posX,
@@ -6043,6 +6051,34 @@ var UIStore = /*#__PURE__*/function () {
       }
     };
 
+    this.getOffsets = function () {
+      var p = {
+        x: 0,
+        y: 0
+      }; // const body = document.getElementsByTagName('body')
+
+      var body = document.querySelector('body');
+
+      if (body != null) {
+        p.x = body.offsetLeft;
+        p.y = body.offsetTop;
+
+        while (body.offsetParent) {
+          console.log("offsetParent: " + body.offsetParent);
+          p.x = p.x + body.offsetLeft;
+          p.y = p.y + body.offsetTop;
+
+          if (body == document.getElementsByTagName("body")[0]) {
+            break;
+          } else {
+            body = body.offsetParent;
+          }
+        }
+      }
+
+      return p;
+    };
+
     makeAutoObservable(this);
   }
 
@@ -6096,6 +6132,10 @@ var UIStore = /*#__PURE__*/function () {
     this.clearContextMenu();
   };
 
+  _proto.setDraggablePosition = function setDraggablePosition(currentPosition) {
+    this.draggablePosition = _extends({}, currentPosition);
+  };
+
   return UIStore;
 }();
 
@@ -6125,6 +6165,7 @@ var EquipmentSet = /*#__PURE__*/observer(function (_ref) {
       accessory = equipmentSet.accessory;
   var equipmentData = [neck, leftHand, ring, head, armor, legs, boot, inventory, rightHand, accessory];
   var equipmentMaskSlots = [ItemSlotType.Neck, ItemSlotType.LeftHand, ItemSlotType.Ring, ItemSlotType.Head, ItemSlotType.Torso, ItemSlotType.Legs, ItemSlotType.Feet, ItemSlotType.Inventory, ItemSlotType.RightHand, ItemSlotType.Accessory]; // we use this draggable position to offset the menu position, after the container is dragged (otherwise, it bugs!)
+  // uiStore.setDraggablePosition(initialPosition)
 
   var _useState = useState(initialPosition),
       draggablePosition = _useState[0],
@@ -6180,6 +6221,7 @@ var EquipmentSet = /*#__PURE__*/observer(function (_ref) {
         x: x,
         y: y
       });
+      console.log(draggablePosition);
     },
     onOutsideClick: function onOutsideClick() {
       uiStore.clearContextMenu();
@@ -6188,14 +6230,14 @@ var EquipmentSet = /*#__PURE__*/observer(function (_ref) {
   }, React.createElement(EquipmentSetContainer, {
     className: "equipment-container-body"
   }, React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(0, 3)), React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(3, 7)), React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(7, 10))), (_uiStore$contextMenu = uiStore.contextMenu) != null && _uiStore$contextMenu.visible ? React.createElement(ListMenu, {
-    x: uiStore.contextMenu.posX - draggablePosition.x,
-    y: uiStore.contextMenu.posY - draggablePosition.y,
+    x: uiStore.contextMenu.posX - uiStore.draggablePosition.x,
+    y: uiStore.contextMenu.posY - uiStore.draggablePosition.y,
     options: uiStore.contextMenu.contextActions,
     onSelected: onSelected
   }) : null, (_uiStore$onHoverDetai = uiStore.onHoverDetail) != null && _uiStore$onHoverDetai.visible ? React.createElement(ItemCard, {
     item: uiStore.onHoverDetail.item,
-    x: uiStore.onHoverDetail.posX - draggablePosition.x,
-    y: uiStore.onHoverDetail.posY - draggablePosition.y
+    x: uiStore.onHoverDetail.posX,
+    y: uiStore.onHoverDetail.posY
   }) : null);
 });
 var EquipmentSetContainer = /*#__PURE__*/styled.div.withConfig({