Add zoom calculation utilities 🚀 (#37)

* docs: add basic documentation for zoom calculation utilities

* chore: add changeset

.changeset/tiny-birds-confess.md

@@ -0,0 +1,5 @@
+---
+"@zoom-image/core": minor
+---
+
+Add zoom calculation utilities 🚀

docs/.vitepress/config.ts

@@ -64,6 +64,8 @@ export default defineConfig({
         items: [
           { text: "createZoomImageHover", link: "/api/createZoomImageHover" },
           { text: "createZoomImageWheel", link: "/api/createZoomImageWheel" },
+          { text: "makeCalculateZoom", link: "/api/makeCalculateZoom" },
+          { text: "makeCalculatePercentage", link: "/api/makeCalculatePercentage" },
         ],
       },
     ],

docs/api/createZoomImageWheel.md

@@ -12,7 +12,7 @@ cleanup()
 ### Type Declaration
 
 ```ts
-type ZoomImageWheelProps = {
+type ZoomImageWheelOptions = {
   // Maximum zoom scale, default is 4
   maxZoom?: number
   // Zoom ratio when scrolling, default is 0.1
@@ -28,7 +28,7 @@ type StateUpdate = { enable: boolean }
 
 function createZoomImageWheel(
   container: HTMLElement,
-  options?: ZoomImageWheelProps,
+  options?: ZoomImageWheelOptions,
 ): {
   // Remove all event listeners
   cleanup: () => void

docs/api/index.md

@@ -2,3 +2,5 @@
 
 - [createZoomImageWheel](/api/createZoomImageWheel)
 - [createZoomImageHover](/api/createZoomImageHover)
+- [makeCalculateZoom](/api/makeCalculateZoom)
+- [makeCalculatePercentage](/api/makeCalculatePercentage)

docs/api/makeCalculatePercentage.md

@@ -0,0 +1,18 @@
+# createZoomImageWheel
+
+Calculate the current percentage based on the zoom level
+
+### Basic Usage
+
+```ts
+const calculatePercentage = makeCalculatePercentage(maxZoom)
+const currentPercentage = calculatePercentage(currentZoom)
+```
+
+### Type Declaration
+
+```ts
+function makeCalculatePercentage = (maxZoom: number) => {
+  return (currentZoom: number) => number
+}
+```

docs/api/makeCalculateZoom.md

@@ -0,0 +1,18 @@
+# createZoomImageWheel
+
+Calculate the current zoom level based on the percentage
+
+### Basic Usage
+
+```ts
+const calculateZoom = makeCalculateZoom(percentage)
+const currentZoom = calculateZoom(currentZoom)
+```
+
+### Type Declaration
+
+```ts
+function makeCalculateZoom = (maxZoom: number) => {
+  return (percentage: number) => number
+}
+```

packages/core/src/createZoomImageWheel.ts

@@ -1,7 +1,7 @@
 import { clamp, disableScroll, enableScroll, getPointersCenter, getSourceImage, makeMaybeCallFunction } from "./utils"
 import type { PointerPosition } from "./utils"
 
-export type ZoomImageWheelProps = {
+export type ZoomImageWheelOptions = {
   maxZoom?: number
   wheelZoomRatio?: number
 }
@@ -19,8 +19,8 @@ type ZoomImageWheelState = {
 type Listener = (state: ZoomImageWheelState) => void
 type StateUpdate = { enable: boolean }
 
-export function createZoomImageWheel(container: HTMLElement, options: ZoomImageWheelProps = {}) {
-  const finalOptions: Required<ZoomImageWheelProps> = {
+export function createZoomImageWheel(container: HTMLElement, options: ZoomImageWheelOptions = {}) {
+  const finalOptions: Required<ZoomImageWheelOptions> = {
     maxZoom: options.maxZoom || 4,
     wheelZoomRatio: options.wheelZoomRatio || 0.1,
   }

packages/core/src/index.ts

@@ -1,11 +1,21 @@
 // Start importing createZoomImageHover
 import { createZoomImageHover } from "./createZoomImageHover"
+import type { ZoomImageHoverOptions } from "./createZoomImageHover"
 
 export { createZoomImageHover }
+export type { ZoomImageHoverOptions }
 // End importing createZoomImageHover
 
 // Start importing createZoomImageWheel
 import { createZoomImageWheel } from "./createZoomImageWheel"
+import type { ZoomImageWheelOptions } from "./createZoomImageWheel"
 
 export { createZoomImageWheel }
+export type { ZoomImageWheelOptions }
 // End importing createZoomImageWheel
+
+// Start importing utils
+import { makeCalculatePercentage, makeCalculateZoom } from "./utils"
+
+export { makeCalculatePercentage, makeCalculateZoom }
+// Stop importing utils

packages/core/src/utils.ts

@@ -79,5 +79,5 @@ const scaleLinear =
 export const makeCalculatePercentage = (maxZoom: number) =>
   scaleLinear({ domainStart: 1, domainStop: maxZoom, rangeStart: 0, rangeStop: 100 })
 
-export const makeCalculateCurrentZoom = (maxZoom: number) =>
+export const makeCalculateZoom = (maxZoom: number) =>
   scaleLinear({ domainStart: 0, domainStop: 100, rangeStart: 1, rangeStop: maxZoom })

packages/core/test/utils.test.ts

@@ -1,6 +1,6 @@
 import fc from "fast-check"
 import { faker } from "@faker-js/faker"
-import { clamp, makeCalculateCurrentZoom, makeCalculatePercentage, makeMaybeCallFunction } from "../src/utils"
+import { clamp, makeCalculateZoom, makeCalculatePercentage, makeMaybeCallFunction } from "../src/utils"
 import { it } from "vitest"
 
 describe("clamp functions", () => {
@@ -56,11 +56,11 @@ describe("makeCalculatePercentage function", () => {
   })
 })
 
-describe("makeCalculateCurrentZoom function", () => {
+describe("makeCalculateZoom function", () => {
   it("should work as expected", () => {
-    expect(makeCalculateCurrentZoom(4)(0)).toMatchInlineSnapshot("1")
-    expect(makeCalculateCurrentZoom(4)(33.33333333333333)).toMatchInlineSnapshot("1.9999999999999998")
-    expect(makeCalculateCurrentZoom(4)(66.66666666666666)).toMatchInlineSnapshot("2.9999999999999996")
-    expect(makeCalculateCurrentZoom(4)(100)).toMatchInlineSnapshot("4")
+    expect(makeCalculateZoom(4)(0)).toMatchInlineSnapshot("1")
+    expect(makeCalculateZoom(4)(33.33333333333333)).toMatchInlineSnapshot("1.9999999999999998")
+    expect(makeCalculateZoom(4)(66.66666666666666)).toMatchInlineSnapshot("2.9999999999999996")
+    expect(makeCalculateZoom(4)(100)).toMatchInlineSnapshot("4")
   })
 })