🖱️

Author: willnguyen1312

.changeset/olive-moons-shave.md

@@ -0,0 +1,8 @@
+---
+"@zoom-image/core": minor
+---
+
+Expose a `maxWheelDelta` option on `createZoomImageWheel` to configure how far a single wheel event zooms
+
+The wheel delta was previously clamped to a hardcoded `0.5`. That value is now the default of the new `maxWheelDelta`
+option, so consumers can slow zooming down or speed it up to suit their input devices.

packages/core/src/createZoomImageWheel.ts

@@ -4,6 +4,7 @@ import { clamp, computeZoomGesture, disableScroll, enableScroll, makeMaybeCallFu
 
 export type ZoomImageWheelOptions = {
   maxZoom?: number
+  maxWheelDelta?: number
   wheelZoomRatio?: number
   dblTapAnimationDuration?: number
   initialState?: Partial<ZoomImageWheelStateUpdate>
@@ -15,7 +16,7 @@ export type ZoomImageWheelOptions = {
  * We need to normalize them to a consistent value.
  * https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY
  */
-const ZOOM_DELTA = 0.5
+const DEFAULT_MAX_WHEEL_DELTA = 0.5
 
 export type ZoomImageWheelState = {
   currentRotation: number
@@ -45,6 +46,7 @@ const defaultShouldZoomOnSingleTouch = () => true
 export function createZoomImageWheel(container: HTMLElement, options: ZoomImageWheelOptions = {}) {
   const finalOptions: Required<ZoomImageWheelOptions> = {
     maxZoom: options.maxZoom || 4,
+    maxWheelDelta: options.maxWheelDelta || DEFAULT_MAX_WHEEL_DELTA,
     wheelZoomRatio: options.wheelZoomRatio || 0.1,
     dblTapAnimationDuration: options.dblTapAnimationDuration || 300,
     initialState: { ...defaultInitialState, ...options.initialState },
@@ -218,7 +220,7 @@ export function createZoomImageWheel(container: HTMLElement, options: ZoomImageW
       return
     }
 
-    const delta = -clamp(event.deltaY, -ZOOM_DELTA, ZOOM_DELTA)
+    const delta = -clamp(event.deltaY, -finalOptions.maxWheelDelta, finalOptions.maxWheelDelta)
     processZoomWheel({ delta, x: event.clientX, y: event.clientY })
     updateZoom()
 

packages/core/test/createZoomImageWheel.test.ts

@@ -1,7 +1,32 @@
 import { render, screen } from "@testing-library/vue"
 import userEvent from "@testing-library/user-event"
 import TestImageZoomWheel from "./components/TestImageZoomWheel.vue"
-import { it } from "vitest"
+import { afterEach, it } from "vitest"
+import { createZoomImageWheel } from "../src"
+import type { ZoomImageWheelOptions } from "../src"
+
+let cleanupZoom: (() => void) | null = null
+
+function renderZoomWheel(options: ZoomImageWheelOptions = {}) {
+  const container = document.createElement("div")
+  container.appendChild(document.createElement("img"))
+  document.body.appendChild(container)
+
+  const zoomImageWheel = createZoomImageWheel(container, options)
+  cleanupZoom = zoomImageWheel.cleanup
+
+  function scroll(deltaY: number) {
+    container.dispatchEvent(new WheelEvent("wheel", { deltaY, cancelable: true }))
+  }
+
+  return { scroll, getZoom: () => zoomImageWheel.getState().currentZoom }
+}
+
+afterEach(() => {
+  cleanupZoom?.()
+  cleanupZoom = null
+  document.body.innerHTML = ""
+})
 
 describe("createZoomImageWheel function", () => {
   it("should display zoomed image on hover source image", async () => {
@@ -25,4 +50,28 @@ describe("createZoomImageWheel function", () => {
     const child = zoomTarget.children[0]
     expect(child.tagName).toBe("DIV")
   })
+
+  it("should zoom by the default wheel delta when none is given", () => {
+    const { scroll, getZoom } = renderZoomWheel()
+
+    scroll(-100)
+
+    expect(getZoom()).toBe(1.05)
+  })
+
+  it("should zoom by a smaller step when maxWheelDelta is lowered", () => {
+    const { scroll, getZoom } = renderZoomWheel({ maxWheelDelta: 0.05 })
+
+    scroll(-100)
+
+    expect(getZoom()).toBe(1.005)
+  })
+
+  it("should zoom by a larger step when maxWheelDelta is raised", () => {
+    const { scroll, getZoom } = renderZoomWheel({ maxWheelDelta: 1 })
+
+    scroll(-100)
+
+    expect(getZoom()).toBe(1.1)
+  })
 })

packages/docs/src/api/createZoomImageWheel.md

@@ -38,6 +38,10 @@ type ZoomImageWheelOptions = {
   // Maximum zoom scale, default is 4
   maxZoom?: number
 
+  // Upper bound applied to the delta of a wheel event, default is 0.5
+  // Lower it to zoom slower on each scroll, raise it to zoom faster
+  maxWheelDelta?: number
+
   // Zoom ratio when scrolling, default is 0.1
   wheelZoomRatio?: number
 

size.json

@@ -1,6 +1,6 @@
 {
   "@zoom-image/core": {
-    "createZoomImageWheel": "2.16 KB",
+    "createZoomImageWheel": "2.18 KB",
     "createZoomImageHover": "1.28 KB",
     "createZoomImageMove": "1.01 KB",
     "createZoomImageClick": "943 B",
@@ -9,45 +9,45 @@
     "makeCalculatePercentage": "153 B"
   },
   "@zoom-image/react": {
-    "useZoomImageWheel": "2.45 KB",
+    "useZoomImageWheel": "2.47 KB",
     "useZoomImageHover": "1.56 KB",
     "useZoomImageMove": "1.28 KB",
     "useZoomImageClick": "1.18 KB"
   },
   "@zoom-image/preact": {
-    "useZoomImageWheel": "3.32 KB",
+    "useZoomImageWheel": "3.34 KB",
     "useZoomImageHover": "2.46 KB",
     "useZoomImageMove": "2.19 KB",
     "useZoomImageClick": "2.1 KB"
   },
   "@zoom-image/qwik": {
-    "useZoomImageWheel": "2.58 KB",
+    "useZoomImageWheel": "2.61 KB",
     "useZoomImageHover": "1.67 KB",
     "useZoomImageMove": "1.38 KB",
     "useZoomImageClick": "1.29 KB"
   },
   "@zoom-image/solid": {
-    "useZoomImageWheel": "3.65 KB",
+    "useZoomImageWheel": "3.68 KB",
     "useZoomImageHover": "2.76 KB",
     "useZoomImageMove": "2.52 KB",
     "useZoomImageClick": "2.43 KB"
   },
   "@zoom-image/svelte": {
-    "useZoomImageWheel": "2.9 KB",
+    "useZoomImageWheel": "2.92 KB",
     "useZoomImageHover": "2.02 KB",
     "useZoomImageMove": "1.75 KB",
     "useZoomImageClick": "1.66 KB"
   },
   "@zoom-image/vue": {
-    "useZoomImageWheel": "2.42 KB",
+    "useZoomImageWheel": "2.44 KB",
     "useZoomImageHover": "1.54 KB",
     "useZoomImageMove": "1.26 KB",
     "useZoomImageClick": "1.17 KB"
   },
   "@zoom-image/angular": {
-    "ZoomImageClickService": "4.12 KB",
-    "ZoomImageHoverService": "4.12 KB",
-    "ZoomImageMoveService": "4.12 KB",
-    "ZoomImageWheelService": "4.12 KB"
+    "ZoomImageClickService": "4.15 KB",
+    "ZoomImageWheelService": "4.15 KB",
+    "ZoomImageHoverService": "4.15 KB",
+    "ZoomImageMoveService": "4.15 KB"
   }
 }