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

---
 .changeset/neat-taxis-search.md              |  5 +++++
 packages/core/src/createZoomImageMove.ts     | 17 ++++++++-------
 packages/docs/src/api/createZoomImageMove.md |  3 ---
 size.json                                    | 22 ++++++++++----------
 4 files changed, 26 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/neat-taxis-search.md

diff --git a/.changeset/neat-taxis-search.md b/.changeset/neat-taxis-search.md
new file mode 100644
index 00000000..991370e6
--- /dev/null
+++ b/.changeset/neat-taxis-search.md
@@ -0,0 +1,5 @@
+---
+"@zoom-image/core": patch
+---
+
+Fix zoom image move on mobile 💞
diff --git a/packages/core/src/createZoomImageMove.ts b/packages/core/src/createZoomImageMove.ts
index ecc714c9..8699ebbd 100644
--- a/packages/core/src/createZoomImageMove.ts
+++ b/packages/core/src/createZoomImageMove.ts
@@ -6,6 +6,7 @@ import { disableScroll, enableScroll, getSourceImage } from "./utils"
 export type ZoomImageMoveOptions = {
   zoomFactor?: number
   zoomImageSource?: string
+  // @deprecated
   disableScrollLock?: boolean
   zoomImageProps?: {
     alt?: string
@@ -18,13 +19,12 @@ export type ZoomImageMoveState = {
 
 export function createZoomImageMove(container: HTMLElement, options: ZoomImageMoveOptions = {}) {
   const sourceImgElement = getSourceImage(container)
-  const finalOptions: Omit<Required<ZoomImageMoveOptions>, "zoomImageProps"> = {
+  const finalOptions: Omit<Required<ZoomImageMoveOptions>, "zoomImageProps" | "disableScrollLock"> = {
     zoomFactor: options.zoomFactor ?? 4,
     zoomImageSource: options.zoomImageSource ?? sourceImgElement.src,
-    disableScrollLock: options.disableScrollLock ?? false,
   }
 
-  const { disableScrollLock, zoomFactor, zoomImageSource } = finalOptions
+  const { zoomFactor, zoomImageSource } = finalOptions
 
   const store = createStore<ZoomImageMoveState>({
     zoomedImgStatus: "idle",
@@ -47,17 +47,19 @@ export function createZoomImageMove(container: HTMLElement, options: ZoomImageMo
 
     processZoom(event)
 
-    if (!disableScrollLock) disableScroll()
+    if (event.pointerType !== "mouse") {
+      disableScroll()
+    }
   }
 
   function handlePointerMove(event: PointerEvent) {
     processZoom(event)
   }
 
-  function handlePointerLeave() {
+  function resetZoomedImg() {
     zoomedImg.style.display = "none"
     zoomedImg.style.transform = "none"
-    if (!disableScrollLock) enableScroll()
+    enableScroll()
   }
 
   const calculatePositionX = (newPositionX: number) => {
@@ -90,7 +92,8 @@ export function createZoomImageMove(container: HTMLElement, options: ZoomImageMo
   const { signal } = controller
   container.addEventListener("pointerenter", handlePointerEnter, { signal })
   container.addEventListener("pointermove", handlePointerMove, { signal })
-  container.addEventListener("pointerleave", handlePointerLeave, { signal })
+  container.addEventListener("pointerleave", resetZoomedImg, { signal })
+  container.addEventListener("pointercancel", resetZoomedImg, { signal })
 
   return {
     cleanup: () => {
diff --git a/packages/docs/src/api/createZoomImageMove.md b/packages/docs/src/api/createZoomImageMove.md
index 8b844a7f..03464669 100644
--- a/packages/docs/src/api/createZoomImageMove.md
+++ b/packages/docs/src/api/createZoomImageMove.md
@@ -35,9 +35,6 @@ type ZoomImageMoveOptions = {
 
   // The source of zoomed image, default is the same as the original image
   zoomImageSource?: string
-
-  // Disable scroll lock on zoom, default is false
-  disableScrollLock?: boolean
 }
 
 function createZoomImageMove(
diff --git a/size.json b/size.json
index 39b5b19a..1d8bf2dd 100644
--- a/size.json
+++ b/size.json
@@ -1,39 +1,39 @@
 {
   "@zoom-image/core": {
-    "createZoomImageWheel": "2.06 KB",
+    "createZoomImageWheel": "2.08 KB",
     "createZoomImageHover": "1.26 KB",
     "createZoomImageClick": "930 B",
-    "createZoomImageMove": "919 B",
+    "createZoomImageMove": "911 B",
     "cropImage": "386 B",
     "makeCalculateZoom": "132 B",
     "makeCalculatePercentage": "124 B"
   },
   "@zoom-image/react": {
-    "useZoomImageWheel": "2.36 KB",
+    "useZoomImageWheel": "2.35 KB",
     "useZoomImageHover": "1.54 KB",
     "useZoomImageClick": "1.16 KB",
-    "useZoomImageMove": "1.15 KB"
+    "useZoomImageMove": "1.14 KB"
   },
   "@zoom-image/preact": {
-    "useZoomImageWheel": "3.25 KB",
+    "useZoomImageWheel": "3.24 KB",
     "useZoomImageHover": "2.45 KB",
     "useZoomImageClick": "2.09 KB",
     "useZoomImageMove": "2.07 KB"
   },
   "@zoom-image/qwik": {
-    "useZoomImageWheel": "2.49 KB",
+    "useZoomImageWheel": "2.5 KB",
     "useZoomImageHover": "1.65 KB",
     "useZoomImageClick": "1.27 KB",
-    "useZoomImageMove": "1.26 KB"
+    "useZoomImageMove": "1.25 KB"
   },
   "@zoom-image/solid": {
     "useZoomImageWheel": "3.54 KB",
     "useZoomImageHover": "2.72 KB",
     "useZoomImageClick": "2.38 KB",
-    "useZoomImageMove": "2.37 KB"
+    "useZoomImageMove": "2.36 KB"
   },
   "@zoom-image/svelte": {
-    "useZoomImageWheel": "2.55 KB",
+    "useZoomImageWheel": "2.54 KB",
     "useZoomImageHover": "1.74 KB",
     "useZoomImageClick": "1.38 KB",
     "useZoomImageMove": "1.36 KB"
@@ -47,7 +47,7 @@
   "@zoom-image/angular": {
     "ZoomImageClickService": "3.83 KB",
     "ZoomImageHoverService": "3.83 KB",
-    "ZoomImageMoveService": "3.82 KB",
-    "ZoomImageWheelService": "3.82 KB"
+    "ZoomImageMoveService": "3.83 KB",
+    "ZoomImageWheelService": "3.83 KB"
   }
 }