@rpg-engine/long-bow 0.5.23 → 0.5.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Item/Inventory/DraggedItem.d.ts +2 -1
- package/dist/components/shared/ScalableContainer.d.ts +7 -0
- package/dist/constants/uiBreakpoints.d.ts +2 -0
- package/dist/hooks/useCursorPosition.d.ts +6 -0
- package/dist/hooks/useShortcuts.d.ts +12 -0
- package/dist/long-bow.cjs.development.js +41 -40
- package/dist/long-bow.cjs.development.js.map +1 -1
- package/dist/long-bow.cjs.production.min.js +1 -1
- package/dist/long-bow.cjs.production.min.js.map +1 -1
- package/dist/long-bow.esm.js +41 -40
- package/dist/long-bow.esm.js.map +1 -1
- package/dist/mocks/itemContainer.mocks.d.ts +1 -1
- package/dist/stories/ItemContainer.stories.d.ts +8 -1
- package/package.json +1 -1
- package/src/components/Equipment/EquipmentSet.tsx +1 -1
- package/src/components/Item/Inventory/DraggedItem.tsx +6 -2
- package/src/components/Item/Inventory/ItemContainer.tsx +1 -1
- package/src/components/Item/Inventory/ItemSlotRenderer.tsx +2 -0
- package/src/components/Spellbook/constants.ts +1 -1
- package/src/components/shared/ScalableContainer.tsx +22 -0
- package/src/constants/uiBreakpoints.ts +3 -0
- package/src/hooks/useCursorPosition.ts +46 -0
- package/src/hooks/useShortcuts.ts +50 -0
- package/src/mocks/itemContainer.mocks.ts +38 -31
- package/src/stories/ItemContainer.stories.tsx +118 -146
- package/dist/hooks/useMousePosition.d.ts +0 -6
- package/src/hooks/useMousePosition.ts +0 -49
package/dist/long-bow.esm.js
CHANGED
|
@@ -13474,6 +13474,8 @@ var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
|
|
|
13474
13474
|
return renderEquipment(itemToRender);
|
|
13475
13475
|
case ItemContainerType.Inventory:
|
|
13476
13476
|
return renderItem(itemToRender);
|
|
13477
|
+
case ItemContainerType.Depot:
|
|
13478
|
+
return renderItem(itemToRender);
|
|
13477
13479
|
default:
|
|
13478
13480
|
return null;
|
|
13479
13481
|
}
|
|
@@ -14750,49 +14752,43 @@ var Details = /*#__PURE__*/styled.p.withConfig({
|
|
|
14750
14752
|
componentId: "sc-kaa0h9-0"
|
|
14751
14753
|
})(["font-size:", " !important;"], uiFonts.size.xsmall);
|
|
14752
14754
|
|
|
14753
|
-
var useCursorPosition = function useCursorPosition() {
|
|
14755
|
+
var useCursorPosition = function useCursorPosition(_ref) {
|
|
14756
|
+
var _ref$scale = _ref.scale,
|
|
14757
|
+
scale = _ref$scale === void 0 ? 1 : _ref$scale;
|
|
14754
14758
|
var _useState = useState({
|
|
14755
14759
|
x: 0,
|
|
14756
14760
|
y: 0
|
|
14757
14761
|
}),
|
|
14758
|
-
|
|
14759
|
-
|
|
14760
|
-
|
|
14761
|
-
var
|
|
14762
|
-
var
|
|
14763
|
-
|
|
14764
|
-
|
|
14765
|
-
|
|
14766
|
-
|
|
14767
|
-
|
|
14768
|
-
|
|
14769
|
-
|
|
14770
|
-
|
|
14771
|
-
|
|
14772
|
-
|
|
14773
|
-
|
|
14774
|
-
|
|
14775
|
-
|
|
14776
|
-
var handleTouchMove = function handleTouchMove(event) {
|
|
14777
|
-
// Prevent default touch behavior (like scrolling)
|
|
14778
|
-
event.preventDefault();
|
|
14779
|
-
if (event.touches.length > 0) {
|
|
14780
|
-
var touch = event.touches[0];
|
|
14781
|
-
updateCursorPosition(touch.clientX, touch.clientY);
|
|
14782
|
-
}
|
|
14783
|
-
};
|
|
14784
|
-
window.addEventListener('mousemove', handleMouseMove);
|
|
14785
|
-
window.addEventListener('touchmove', handleTouchMove, {
|
|
14786
|
-
passive: false
|
|
14762
|
+
position = _useState[0],
|
|
14763
|
+
setPosition = _useState[1];
|
|
14764
|
+
var setFromEvent = function setFromEvent(e) {
|
|
14765
|
+
var x, y;
|
|
14766
|
+
var viewportCenterX = window.innerWidth / 2 - GRID_WIDTH;
|
|
14767
|
+
var viewportCenterY = window.innerHeight / -GRID_HEIGHT;
|
|
14768
|
+
if ('touches' in e) {
|
|
14769
|
+
x = e.touches[0].clientX;
|
|
14770
|
+
y = e.touches[0].clientY;
|
|
14771
|
+
} else {
|
|
14772
|
+
x = e.clientX;
|
|
14773
|
+
y = e.clientY;
|
|
14774
|
+
}
|
|
14775
|
+
// Adjusting for the global scale
|
|
14776
|
+
// Assuming the element is centrally located
|
|
14777
|
+
setPosition({
|
|
14778
|
+
x: (x - viewportCenterX) / scale + viewportCenterX,
|
|
14779
|
+
y: (y - viewportCenterY) / scale + viewportCenterY
|
|
14787
14780
|
});
|
|
14788
|
-
|
|
14781
|
+
};
|
|
14782
|
+
useEffect(function () {
|
|
14783
|
+
window.addEventListener('mousemove', setFromEvent);
|
|
14784
|
+
window.addEventListener('touchmove', setFromEvent);
|
|
14785
|
+
console.log("SCALE IS ", scale);
|
|
14789
14786
|
return function () {
|
|
14790
|
-
window.removeEventListener('mousemove',
|
|
14791
|
-
window.removeEventListener('touchmove',
|
|
14792
|
-
cancelAnimationFrame(animationFrameId);
|
|
14787
|
+
window.removeEventListener('mousemove', setFromEvent);
|
|
14788
|
+
window.removeEventListener('touchmove', setFromEvent);
|
|
14793
14789
|
};
|
|
14794
|
-
}, []);
|
|
14795
|
-
return
|
|
14790
|
+
}, [scale]);
|
|
14791
|
+
return position;
|
|
14796
14792
|
};
|
|
14797
14793
|
|
|
14798
14794
|
var CONTAINER_SIZE = 32;
|
|
@@ -14800,10 +14796,13 @@ var OFFSET = CONTAINER_SIZE / 2;
|
|
|
14800
14796
|
var DraggedItem = function DraggedItem(_ref) {
|
|
14801
14797
|
var _item$_id, _item$stackQty;
|
|
14802
14798
|
var atlasJSON = _ref.atlasJSON,
|
|
14803
|
-
atlasIMG = _ref.atlasIMG
|
|
14799
|
+
atlasIMG = _ref.atlasIMG,
|
|
14800
|
+
scale = _ref.scale;
|
|
14804
14801
|
var _useDragging = useDragging(),
|
|
14805
14802
|
item = _useDragging.item;
|
|
14806
|
-
var _useCursorPosition = useCursorPosition(
|
|
14803
|
+
var _useCursorPosition = useCursorPosition({
|
|
14804
|
+
scale: scale
|
|
14805
|
+
}),
|
|
14807
14806
|
x = _useCursorPosition.x,
|
|
14808
14807
|
y = _useCursorPosition.y;
|
|
14809
14808
|
if (!item) {
|
|
@@ -14924,7 +14923,8 @@ var EquipmentSet = function EquipmentSet(_ref) {
|
|
|
14924
14923
|
};
|
|
14925
14924
|
return React.createElement(DraggingProvider, null, React.createElement(DraggedItem, {
|
|
14926
14925
|
atlasIMG: atlasIMG,
|
|
14927
|
-
atlasJSON: atlasJSON
|
|
14926
|
+
atlasJSON: atlasJSON,
|
|
14927
|
+
scale: scale
|
|
14928
14928
|
}), React.createElement(DraggableContainer, {
|
|
14929
14929
|
title: 'Equipments',
|
|
14930
14930
|
type: RPGUIContainerTypes.Framed,
|
|
@@ -16004,7 +16004,8 @@ var ItemContainer$1 = function ItemContainer(_ref) {
|
|
|
16004
16004
|
};
|
|
16005
16005
|
return React.createElement(DraggingProvider, null, React.createElement(DraggedItem, {
|
|
16006
16006
|
atlasIMG: atlasIMG,
|
|
16007
|
-
atlasJSON: atlasJSON
|
|
16007
|
+
atlasJSON: atlasJSON,
|
|
16008
|
+
scale: scale
|
|
16008
16009
|
}), React.createElement(SlotsContainer, {
|
|
16009
16010
|
title: itemContainer.name || 'Container',
|
|
16010
16011
|
onClose: onClose,
|