@rpg-engine/long-bow 0.2.87 → 0.2.88

package/package.json

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

package/src/components/Equipment/EquipmentSet.tsx

@@ -119,6 +119,10 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
             if (onSelected) onSelected(optionId);
           }}
           onDragStart={(item, slotIndex, itemContainerType) => {
+            if (!item) {
+              return;
+            }
+
             if (onItemDragStart)
               onItemDragStart(item, slotIndex, itemContainerType);
           }}
@@ -127,6 +131,9 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
           }}
           checkIfItemCanBeMoved={checkIfItemCanBeMoved}
           onPlaceDrop={(item, slotIndex, itemContainerType) => {
+            if (!item) {
+              return;
+            }
             if (onItemPlaceDrop)
               onItemPlaceDrop(item, slotIndex, itemContainerType);
           }}

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

@@ -2,8 +2,8 @@ import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { Button, ButtonTypes } from '../../Button';
 import { Input } from '../../Input';
-import { RangeSlider, RangeSliderType } from '../../RangeSlider';
 import { RPGUIContainer, RPGUIContainerTypes } from '../../RPGUIContainer';
+import { RangeSlider, RangeSliderType } from '../../RangeSlider';
 
 export interface IItemQuantitySelectorProps {
   quantity: number;
@@ -74,6 +74,11 @@ export const ItemQuantitySelector: React.FC<IItemQuantitySelectorProps> = ({
           max={quantity}
           value={value}
           onChange={e => {
+            if (Number(e.target.value) >= quantity) {
+              setValue(quantity);
+              return;
+            }
+
             setValue((e.target.value as unknown) as number);
           }}
           onBlur={e => {

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

@@ -267,78 +267,82 @@ export const ItemSlot: React.FC<IProps> = observer(
             ?.dispatchEvent(simulatedEvent);
         }}
       >
-        {item && (
-          <Draggable
-            onStop={() => {
-              if (wasDragged) {
-                setWasDragged(false);
-
-                const target = dragContainer.current;
-                if (!target || !wasDragged) return;
-
-                const style = window.getComputedStyle(target);
-                const matrix = new DOMMatrixReadOnly(style.transform);
-                const x = matrix.m41;
-                const y = matrix.m42;
-
-                setDragPosition({ x, y });
-
-                setTimeout(() => {
-                  if (checkIfItemCanBeMoved()) {
-                    if (
-                      item.stackQty &&
-                      item.stackQty !== 1 &&
-                      openQuantitySelector
-                    )
-                      openQuantitySelector(item.stackQty, onSuccesfulDrag);
-                    else onSuccesfulDrag(item.stackQty);
-                  } else {
-                    resetItem();
-                    setDragPosition({ x: 0, y: 0 });
-                  }
-                }, 100);
-              } else if (item) {
-                if (!isContextMenuDisabled)
-                  setIsContextMenuVisible(!isContextMenuVisible);
-
-                onClick(item.type, containerType, item);
-              }
+        <Draggable
+          defaultClassName={item ? 'draggable' : 'empty-slot'}
+          onStop={() => {
+            if (!item) {
+              return;
+            }
+
+            if (wasDragged) {
+              setWasDragged(false);
+
+              const target = dragContainer.current;
+              if (!target || !wasDragged) return;
+
+              const style = window.getComputedStyle(target);
+              const matrix = new DOMMatrixReadOnly(style.transform);
+              const x = matrix.m41;
+              const y = matrix.m42;
+
+              setDragPosition({ x, y });
+
+              setTimeout(() => {
+                if (checkIfItemCanBeMoved()) {
+                  if (
+                    item.stackQty &&
+                    item.stackQty !== 1 &&
+                    openQuantitySelector
+                  )
+                    openQuantitySelector(item.stackQty, onSuccesfulDrag);
+                  else onSuccesfulDrag(item.stackQty);
+                } else {
+                  resetItem();
+                  setDragPosition({ x: 0, y: 0 });
+                }
+              }, 100);
+            } else if (item) {
+              if (!isContextMenuDisabled)
+                setIsContextMenuVisible(!isContextMenuVisible);
+
+              onClick(item.type, containerType, item);
+            }
+          }}
+          onStart={() => {
+            if (!item) {
+              return;
+            }
+
+            if (onDragStart) {
+              onDragStart(item, slotIndex, containerType);
+            }
+          }}
+          onDrag={() => {
+            setWasDragged(true);
+            setIsFocused(true);
+          }}
+          position={dragPosition}
+          cancel=".empty-slot"
+        >
+          <ItemContainer
+            ref={dragContainer}
+            isFocused={isFocused}
+            onMouseOver={event => {
+              onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
             }}
-            onStart={() => {
-              if (onDragStart) onDragStart(item, slotIndex, containerType);
+            onMouseOut={() => {
+              if (onMouseOut) onMouseOut();
             }}
-            onDrag={() => {
-              setWasDragged(true);
-              setIsFocused(true);
+            onMouseEnter={() => {
+              setTooltipVisible(true);
+            }}
+            onMouseLeave={() => {
+              setTooltipVisible(false);
             }}
-            position={dragPosition}
           >
-            <ItemContainer
-              ref={dragContainer}
-              isFocused={isFocused}
-              onMouseOver={event => {
-                onMouseOver(
-                  event,
-                  slotIndex,
-                  item,
-                  event.clientX,
-                  event.clientY
-                );
-              }}
-              onMouseOut={() => {
-                if (onMouseOut) onMouseOut();
-              }}
-              onMouseEnter={() => {
-                setTooltipVisible(true);
-              }}
-              onMouseLeave={() => {
-                setTooltipVisible(false);
-              }}
-            >
-              {onRenderSlot(item)}
-            </ItemContainer>
-          </Draggable>
-        )}
+            {onRenderSlot(item)}
+          </ItemContainer>
+        </Draggable>
 
         {isTooltipVisible && item && <ItemTooltip label={item.name} />}