From 55fd0b62fb420475fc7090f02f3cfd2605359ec2 Mon Sep 17 00:00:00 2001
From: Nam Nguyen <nam.nguyen.node@gmail.com>
Date: Fri, 7 Jun 2024 17:48:22 -0300
Subject: [PATCH] =?UTF-8?q?Fix=20zoom=20image=20move=20-=20zoomed=20image?=
 =?UTF-8?q?=20distorted=20on=20mobile=20phone=20=F0=9F=92=9E=20(#305)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/eighty-spiders-float.md       |  5 +++++
 packages/core/src/createZoomImageMove.ts | 11 ++++++++---
 size.json                                | 22 +++++++++++-----------
 3 files changed, 24 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/eighty-spiders-float.md

diff --git a/.changeset/eighty-spiders-float.md b/.changeset/eighty-spiders-float.md
new file mode 100644
index 00000000..6de54212
--- /dev/null
+++ b/.changeset/eighty-spiders-float.md
@@ -0,0 +1,5 @@
+---
+"@zoom-image/core": patch
+---
+
+Fix zoom image move - zoomed image distorted on mobile phone 💞
diff --git a/packages/core/src/createZoomImageMove.ts b/packages/core/src/createZoomImageMove.ts
index e6b060b2..5d1b80e6 100644
--- a/packages/core/src/createZoomImageMove.ts
+++ b/packages/core/src/createZoomImageMove.ts
@@ -56,9 +56,7 @@ export function createZoomImageMove(container: HTMLElement, options: ZoomImageMo
 
     processZoom(event)
 
-    if (event.pointerType !== "mouse") {
-      disableScroll()
-    }
+    event.pointerType !== "mouse" && disableScroll()
   }
 
   function handlePointerMove(event: PointerEvent) {
@@ -103,6 +101,13 @@ export function createZoomImageMove(container: HTMLElement, options: ZoomImageMo
   container.addEventListener("pointermove", handlePointerMove, { signal })
   container.addEventListener("pointerleave", resetZoomedImg, { signal })
   container.addEventListener("pointercancel", resetZoomedImg, { signal })
+  container.addEventListener(
+    "touchstart",
+    (event) => {
+      disabledContextMenu && event.preventDefault()
+    },
+    { signal },
+  )
 
   return {
     cleanup: () => {
diff --git a/size.json b/size.json
index fc3a6ca1..546bdeb7 100644
--- a/size.json
+++ b/size.json
@@ -2,7 +2,7 @@
   "@zoom-image/core": {
     "createZoomImageWheel": "2.08 KB",
     "createZoomImageHover": "1.26 KB",
-    "createZoomImageMove": "973 B",
+    "createZoomImageMove": "991 B",
     "createZoomImageClick": "930 B",
     "cropImage": "386 B",
     "makeCalculateZoom": "132 B",
@@ -11,43 +11,43 @@
   "@zoom-image/react": {
     "useZoomImageWheel": "2.35 KB",
     "useZoomImageHover": "1.54 KB",
-    "useZoomImageMove": "1.21 KB",
+    "useZoomImageMove": "1.22 KB",
     "useZoomImageClick": "1.16 KB"
   },
   "@zoom-image/preact": {
     "useZoomImageWheel": "3.24 KB",
     "useZoomImageHover": "2.45 KB",
-    "useZoomImageMove": "2.14 KB",
+    "useZoomImageMove": "2.15 KB",
     "useZoomImageClick": "2.09 KB"
   },
   "@zoom-image/qwik": {
     "useZoomImageWheel": "2.5 KB",
     "useZoomImageHover": "1.65 KB",
-    "useZoomImageMove": "1.31 KB",
+    "useZoomImageMove": "1.33 KB",
     "useZoomImageClick": "1.27 KB"
   },
   "@zoom-image/solid": {
     "useZoomImageWheel": "3.54 KB",
     "useZoomImageHover": "2.72 KB",
-    "useZoomImageMove": "2.42 KB",
+    "useZoomImageMove": "2.44 KB",
     "useZoomImageClick": "2.38 KB"
   },
   "@zoom-image/svelte": {
     "useZoomImageWheel": "2.54 KB",
     "useZoomImageHover": "1.74 KB",
-    "useZoomImageMove": "1.42 KB",
+    "useZoomImageMove": "1.44 KB",
     "useZoomImageClick": "1.38 KB"
   },
   "@zoom-image/vue": {
     "useZoomImageWheel": "2.34 KB",
     "useZoomImageHover": "1.53 KB",
-    "useZoomImageMove": "1.19 KB",
+    "useZoomImageMove": "1.21 KB",
     "useZoomImageClick": "1.15 KB"
   },
   "@zoom-image/angular": {
-    "ZoomImageClickService": "3.91 KB",
-    "ZoomImageHoverService": "3.91 KB",
-    "ZoomImageMoveService": "3.91 KB",
-    "ZoomImageWheelService": "3.91 KB"
+    "ZoomImageClickService": "3.92 KB",
+    "ZoomImageHoverService": "3.92 KB",
+    "ZoomImageMoveService": "3.92 KB",
+    "ZoomImageWheelService": "3.92 KB"
   }
 }