fix: zoom on wheel when pointer leave 💞 (#71)

willnguyen1312 · May 13, 2023 · d228668 · d228668
1 parent 3a283d1
commit d228668
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/.changeset/selfish-rings-return.md b/.changeset/selfish-rings-return.md
@@ -0,0 +1,5 @@
+---
+"@zoom-image/core": patch
+---
+
+Fix zoom image on wheel when pointer leave
diff --git a/packages/core/src/createZoomImageWheel.ts b/packages/core/src/createZoomImageWheel.ts
@@ -187,24 +187,37 @@ export function createZoomImageWheel(container: HTMLElement, options: ZoomImageW
     lastPositionY = currentPositionY
   }
 
+  function _handlePointerLeave() {
+    pointerMap.clear()
+    isOnMove = false
+    prevDistance = -1
+    if (!enabledScroll) {
+      enableScroll()
+      enabledScroll = true
+    }
+  }
+
   function checkZoomEnabled() {
     return store.getState().enable
   }
 
   const onWheel = makeMaybeCallFunction(checkZoomEnabled, _onWheel)
   const handlePointerDown = makeMaybeCallFunction(checkZoomEnabled, _handlePointerDown)
+  const handlePointerLeave = makeMaybeCallFunction(checkZoomEnabled, _handlePointerLeave)
   const handlePointerMove = makeMaybeCallFunction(checkZoomEnabled, _handlePointerMove)
   const handlePointerUp = makeMaybeCallFunction(checkZoomEnabled, _handlePointerUp)
 
   container.addEventListener("wheel", onWheel)
   container.addEventListener("pointerdown", handlePointerDown)
+  container.addEventListener("pointerleave", handlePointerLeave)
   container.addEventListener("pointermove", handlePointerMove)
   container.addEventListener("pointerup", handlePointerUp)
 
   return {
     cleanup() {
       container.removeEventListener("wheel", onWheel)
       container.removeEventListener("pointerdown", handlePointerDown)
+      container.removeEventListener("pointerleave", handlePointerLeave)
       container.removeEventListener("pointermove", handlePointerMove)
       container.removeEventListener("pointerup", handlePointerUp)
       store.cleanup()