@rpg-engine/long-bow 0.5.26 → 0.5.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.26",
+  "version": "0.5.28",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.8.87",
+    "@rpg-engine/shared": "^0.8.92",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

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

@@ -21,6 +21,7 @@ export const DraggedItem = ({
   scale,
 }: IProps): JSX.Element | null => {
   const { item } = useDragging();
+
   const { x, y } = useCursorPosition({
     scale,
   });
@@ -29,6 +30,10 @@ export const DraggedItem = ({
     return null;
   }
 
+  if (x === 0 && y === 0) {
+    return null;
+  }
+
   const centeredX = x - OFFSET;
   const centeredY = y - OFFSET;
 

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

@@ -286,9 +286,9 @@ export const ItemSlot: React.FC<IProps> = observer(
               return;
             }
 
-            setDraggingItem(item);
-
             if (onDragStart && containerType) {
+              setDraggingItem(item);
+
               onDragStart(item, slotIndex, containerType);
             }
           }}
@@ -433,7 +433,7 @@ const Container = styled.div<ContainerTypes>`
 const ItemContainer = styled.div<{ isFocused?: boolean }>`
   width: 64px;
   height: 64px;
-  // This fixes an issue where if you drag an item inside of a scrollable container (overflow), its cut out
+
   position: relative;
   ${props => props.isFocused && 'z-index: 100; pointer-events: none;'};
 `;

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

@@ -81,12 +81,8 @@ export const ItemSlotRenderer: React.FC<IProps> = ({
     switch (containerType) {
       case ItemContainerType.Equipment:
         return renderEquipment(itemToRender);
-      case ItemContainerType.Inventory:
-        return renderItem(itemToRender);
-      case ItemContainerType.Depot:
-        return renderItem(itemToRender);
       default:
-        return null;
+        return renderItem(itemToRender);
     }
   };
 

package/src/hooks/useCursorPosition.ts

@@ -1,5 +1,5 @@
 import { GRID_HEIGHT, GRID_WIDTH } from '@rpg-engine/shared';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { IPosition } from '../types/eventTypes';
 
 interface ICursorPositionProps {
@@ -9,10 +9,15 @@ interface ICursorPositionProps {
 export const useCursorPosition = ({ scale = 1 }: ICursorPositionProps): IPosition => {
   const [position, setPosition] = useState<IPosition>({ x: 0, y: 0 });
 
-  const setFromEvent = (e: MouseEvent | TouchEvent) => {
+  const scalePosition = useCallback((x: number, y: number): IPosition => {
+    return {
+      x: ((x - GRID_WIDTH / 2) / scale) + GRID_WIDTH / 2,
+      y: ((y - GRID_HEIGHT / 2) / scale) + GRID_HEIGHT / 2,
+    };
+  }, [scale]);
+
+  const setFromEvent = useCallback((e: MouseEvent | TouchEvent) => {
     let x, y;
-    const viewportCenterX = window.innerWidth / 2 - GRID_WIDTH;
-    const viewportCenterY = window.innerHeight / - GRID_HEIGHT;
 
     if ('touches' in e) {
       x = e.touches[0].clientX;
@@ -22,25 +27,29 @@ export const useCursorPosition = ({ scale = 1 }: ICursorPositionProps): IPositio
       y = e.clientY;
     }
 
-    // Adjusting for the global scale
-    // Assuming the element is centrally located
-    setPosition({
-      x: (x - viewportCenterX) / scale + viewportCenterX,
-      y: (y - viewportCenterY) / scale + viewportCenterY
-    });
-  };
+    const scaledPosition = scalePosition(x, y);
+    setPosition(scaledPosition);
+  }, [scale, scalePosition]);
+
+  const cleanup = useCallback(() => {
+    setPosition({ x: 0, y: 0 });
+  }, []);
 
   useEffect(() => {
-    window.addEventListener('mousemove', setFromEvent);
-    window.addEventListener('touchmove', setFromEvent);
+    const handleEvent = (e: Event) => setFromEvent(e as MouseEvent | TouchEvent);
 
-    console.log("SCALE IS ", scale)
+    window.addEventListener('mousemove', handleEvent);
+    window.addEventListener('touchmove', handleEvent);
+    window.addEventListener('mouseup', cleanup);
+    window.addEventListener('touchend', cleanup);
 
     return () => {
-      window.removeEventListener('mousemove', setFromEvent);
-      window.removeEventListener('touchmove', setFromEvent);
+      window.removeEventListener('mousemove', handleEvent);
+      window.removeEventListener('touchmove', handleEvent);
+      window.removeEventListener('mouseup', cleanup);
+      window.removeEventListener('touchend', cleanup);
     };
-  }, [scale]);
+  }, [setFromEvent, cleanup]);
 
   return position;
 };

package/src/stories/CircullarController.stories.tsx

@@ -31,7 +31,7 @@ Default.args = {
   onActionClick: () => console.log('action'),
   onCancelClick: () => console.log('cancel attack'),
   mana: 100,
-  inventory: itemContainerMock,
+  inventory: itemContainerMock(),
   atlasJSON,
   atlasIMG,
 };

package/src/stories/Shortcuts.stories.tsx

@@ -35,5 +35,5 @@ Default.args = {
   mana: 100,
   atlasIMG,
   atlasJSON,
-  inventory: itemContainerMock,
+  inventory: itemContainerMock(),
 };