@rpg-engine/long-bow 0.5.24 → 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 +5 -5
- package/dist/long-bow.cjs.development.js +27 -14
- 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 +27 -14
- package/dist/long-bow.esm.js.map +1 -1
- package/dist/stories/ItemContainer.stories.d.ts +2 -0
- package/package.json +1 -1
- package/src/components/Equipment/EquipmentSet.tsx +1 -1
- package/src/components/Item/Inventory/DraggedItem.tsx +5 -1
- package/src/components/Item/Inventory/ItemContainer.tsx +1 -1
- 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 +25 -9
- package/src/stories/ItemContainer.stories.tsx +94 -70
package/dist/long-bow.esm.js
CHANGED
|
@@ -14752,7 +14752,9 @@ var Details = /*#__PURE__*/styled.p.withConfig({
|
|
|
14752
14752
|
componentId: "sc-kaa0h9-0"
|
|
14753
14753
|
})(["font-size:", " !important;"], uiFonts.size.xsmall);
|
|
14754
14754
|
|
|
14755
|
-
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;
|
|
14756
14758
|
var _useState = useState({
|
|
14757
14759
|
x: 0,
|
|
14758
14760
|
y: 0
|
|
@@ -14760,26 +14762,32 @@ var useCursorPosition = function useCursorPosition() {
|
|
|
14760
14762
|
position = _useState[0],
|
|
14761
14763
|
setPosition = _useState[1];
|
|
14762
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;
|
|
14763
14768
|
if ('touches' in e) {
|
|
14764
|
-
|
|
14765
|
-
|
|
14766
|
-
y: e.touches[0].clientY
|
|
14767
|
-
});
|
|
14769
|
+
x = e.touches[0].clientX;
|
|
14770
|
+
y = e.touches[0].clientY;
|
|
14768
14771
|
} else {
|
|
14769
|
-
|
|
14770
|
-
|
|
14771
|
-
y: e.clientY
|
|
14772
|
-
});
|
|
14772
|
+
x = e.clientX;
|
|
14773
|
+
y = e.clientY;
|
|
14773
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
|
|
14780
|
+
});
|
|
14774
14781
|
};
|
|
14775
14782
|
useEffect(function () {
|
|
14776
14783
|
window.addEventListener('mousemove', setFromEvent);
|
|
14777
14784
|
window.addEventListener('touchmove', setFromEvent);
|
|
14785
|
+
console.log("SCALE IS ", scale);
|
|
14778
14786
|
return function () {
|
|
14779
14787
|
window.removeEventListener('mousemove', setFromEvent);
|
|
14780
14788
|
window.removeEventListener('touchmove', setFromEvent);
|
|
14781
14789
|
};
|
|
14782
|
-
}, []);
|
|
14790
|
+
}, [scale]);
|
|
14783
14791
|
return position;
|
|
14784
14792
|
};
|
|
14785
14793
|
|
|
@@ -14788,10 +14796,13 @@ var OFFSET = CONTAINER_SIZE / 2;
|
|
|
14788
14796
|
var DraggedItem = function DraggedItem(_ref) {
|
|
14789
14797
|
var _item$_id, _item$stackQty;
|
|
14790
14798
|
var atlasJSON = _ref.atlasJSON,
|
|
14791
|
-
atlasIMG = _ref.atlasIMG
|
|
14799
|
+
atlasIMG = _ref.atlasIMG,
|
|
14800
|
+
scale = _ref.scale;
|
|
14792
14801
|
var _useDragging = useDragging(),
|
|
14793
14802
|
item = _useDragging.item;
|
|
14794
|
-
var _useCursorPosition = useCursorPosition(
|
|
14803
|
+
var _useCursorPosition = useCursorPosition({
|
|
14804
|
+
scale: scale
|
|
14805
|
+
}),
|
|
14795
14806
|
x = _useCursorPosition.x,
|
|
14796
14807
|
y = _useCursorPosition.y;
|
|
14797
14808
|
if (!item) {
|
|
@@ -14912,7 +14923,8 @@ var EquipmentSet = function EquipmentSet(_ref) {
|
|
|
14912
14923
|
};
|
|
14913
14924
|
return React.createElement(DraggingProvider, null, React.createElement(DraggedItem, {
|
|
14914
14925
|
atlasIMG: atlasIMG,
|
|
14915
|
-
atlasJSON: atlasJSON
|
|
14926
|
+
atlasJSON: atlasJSON,
|
|
14927
|
+
scale: scale
|
|
14916
14928
|
}), React.createElement(DraggableContainer, {
|
|
14917
14929
|
title: 'Equipments',
|
|
14918
14930
|
type: RPGUIContainerTypes.Framed,
|
|
@@ -15992,7 +16004,8 @@ var ItemContainer$1 = function ItemContainer(_ref) {
|
|
|
15992
16004
|
};
|
|
15993
16005
|
return React.createElement(DraggingProvider, null, React.createElement(DraggedItem, {
|
|
15994
16006
|
atlasIMG: atlasIMG,
|
|
15995
|
-
atlasJSON: atlasJSON
|
|
16007
|
+
atlasJSON: atlasJSON,
|
|
16008
|
+
scale: scale
|
|
15996
16009
|
}), React.createElement(SlotsContainer, {
|
|
15997
16010
|
title: itemContainer.name || 'Container',
|
|
15998
16011
|
onClose: onClose,
|