@rpg-engine/long-bow 0.6.41 → 0.6.42

package/dist/long-bow.cjs.development.js

@@ -33228,8 +33228,8 @@ var ZoomableImage = function ZoomableImage(_ref) {
   var src = _ref.src,
     alt = _ref.alt;
   var _useState = React.useState(false),
-    isHovered = _useState[0],
-    setIsHovered = _useState[1];
+    isZoomed = _useState[0],
+    setIsZoomed = _useState[1];
   var _useState2 = React.useState({
       x: 50,
       y: 50
@@ -33249,23 +33249,37 @@ var ZoomableImage = function ZoomableImage(_ref) {
       y: y
     });
   };
+  var handleTouchMove = function handleTouchMove(e) {
+    var _e$currentTarget$getB2 = e.currentTarget.getBoundingClientRect(),
+      left = _e$currentTarget$getB2.left,
+      top = _e$currentTarget$getB2.top,
+      width = _e$currentTarget$getB2.width,
+      height = _e$currentTarget$getB2.height;
+    var touch = e.touches[0];
+    var x = (touch.clientX - left) / width * 100;
+    var y = (touch.clientY - top) / height * 100;
+    setZoomPosition({
+      x: x,
+      y: y
+    });
+  };
+  var handleZoomToggle = function handleZoomToggle() {
+    setIsZoomed(!isZoomed);
+  };
   return React__default.createElement("img", {
     src: src,
     alt: alt,
     onMouseMove: handleMouseMove,
-    onMouseEnter: function onMouseEnter() {
-      return setIsHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setIsHovered(false);
-    },
+    onTouchMove: handleTouchMove,
+    onClick: handleZoomToggle,
     style: {
       width: '100%',
       height: '100%',
       objectFit: 'cover',
-      transform: isHovered ? 'scale(1.5)' : 'scale(1)',
+      transform: isZoomed ? 'scale(1.5)' : 'scale(1)',
       transformOrigin: zoomPosition.x + "% " + zoomPosition.y + "%",
-      transition: 'transform 0.3s ease'
+      transition: 'transform 0.3s ease',
+      cursor: 'pointer'
     }
   });
 };