@rpg-engine/long-bow 0.1.792 → 0.1.794

package/package.json

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

package/src/components/Equipment/EquipmentSet.tsx

@@ -130,7 +130,7 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = observer(
         cancelDrag=".equipment-container-body"
         onPositionChange={({ x, y }) => {
           setDraggablePosition({ x, y });
-          // uiStore.setDraggablePosition({ x, y });
+          console.log(draggablePosition)
         }}
         onOutsideClick={() => {
           uiStore.clearContextMenu();
@@ -145,8 +145,8 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = observer(
 
         {uiStore.contextMenu?.visible ? (
           <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}
           />

package/src/components/store/UI.store.ts

@@ -122,6 +122,9 @@ class UIStore {
       this.clearItemHoverDetail();
       return;
     }
+
+    this.setDraggablePosition(this.getOffsets())
+
     switch (slotContainerType) {
       case SlotContainerType.EQUIPMENT_SET:
         this.setEquipContextMenu(
@@ -170,10 +173,11 @@ class UIStore {
     onMouseOver: any
   ): void => {
     if (item) {
+      this.setDraggablePosition(this.getOffsets())
       this.setItemHoverDetail({
         visible: true,
-        posX,
-        posY,
+        posX: posX,
+        posY: posY,
         item: item,
       });
     }
@@ -196,9 +200,32 @@ class UIStore {
     this.clearContextMenu!();
   }
 
-public setDraggablePosition(currentPosition: IPosition){
-  this.draggablePosition = { ...currentPosition }
-}
+  public setDraggablePosition(currentPosition: IPosition){
+    this.draggablePosition = { ...currentPosition }
+  }
+
+  private getOffsets = () => {
+    const p = { x: 0, y: 0};
+    // const body = document.getElementsByTagName('body')
+    let body = document.querySelector('body') as any | null;
+    
+    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;    
+  }
 
 }