+
)}
{zoomType.value === "hover" && (
-
+
-
+
+
+ )}
+
+ {zoomType.value === "move" && (
+
+
)}
diff --git a/examples/react-ts/src/App.tsx b/examples/react-ts/src/App.tsx
index 0e8b4290..4aa8dd4c 100644
--- a/examples/react-ts/src/App.tsx
+++ b/examples/react-ts/src/App.tsx
@@ -1,5 +1,5 @@
import { useRef, useEffect, useState, useMemo } from "react"
-import { createZoomImageHover, createZoomImageWheel } from "@zoom-image/core"
+import { createZoomImageHover, createZoomImageMove, createZoomImageWheel } from "@zoom-image/core"
function App() {
const [tabs, setTabs] = useState<
@@ -7,15 +7,18 @@ function App() {
name: string
href: string
current: boolean
- value: "wheel" | "hover"
+ value: "wheel" | "hover" | "move"
}[]
>([
{ name: "Zoom Image Wheel", href: "#", current: true, value: "wheel" },
{ name: "Zoom Image Hover", href: "#", current: false, value: "hover" },
+ { name: "Zoom Image Move", href: "#", current: false, value: "move" },
])
+
const zoomType = useMemo(() => tabs.find((tab) => tab.current)?.value, [tabs])
const imageWheelContainerRef = useRef
(null)
const imageHoverContainerRef = useRef(null)
+ const imageMoveContainerRef = useRef(null)
const zoomTargetRef = useRef(null)
const makeHandleTabClick = (tab: (typeof tabs)[0]) => () => {
@@ -53,6 +56,14 @@ function App() {
cleanup = result.cleanup
}
+ if (zoomType === "move") {
+ const imageContainer = imageMoveContainerRef.current as HTMLDivElement
+ const result = createZoomImageMove(imageContainer, {
+ zoomImageSource: "/large.webp",
+ })
+ cleanup = result.cleanup
+ }
+
return cleanup
}, [zoomType])
@@ -80,20 +91,22 @@ function App() {
{zoomType === "wheel" && (
<>
Scroll inside the image to see zoom in-out effect
-
+
)}
{zoomType === "hover" && (
-
+
-
+
+
+ )}
+
+ {zoomType === "move" && (
+
+
)}
diff --git a/examples/solid-ts/src/App.tsx b/examples/solid-ts/src/App.tsx
index 17ffe816..205972ad 100644
--- a/examples/solid-ts/src/App.tsx
+++ b/examples/solid-ts/src/App.tsx
@@ -1,22 +1,24 @@
import type { Component } from "solid-js"
import { createSignal, createMemo, createEffect, For } from "solid-js"
-import { createZoomImageHover, createZoomImageWheel } from "@zoom-image/core"
+import { createZoomImageHover, createZoomImageWheel, createZoomImageMove } from "@zoom-image/core"
type Tab = {
name: string
href: string
current: boolean
- value: "wheel" | "hover"
+ value: "wheel" | "hover" | "move"
}
const App: Component = () => {
const [tabs, setTabs] = createSignal
([
{ name: "Zoom Image Wheel", href: "#", current: true, value: "wheel" },
{ name: "Zoom Image Hover", href: "#", current: false, value: "hover" },
+ { name: "Zoom Image Move", href: "#", current: false, value: "move" },
])
const zoomType = createMemo(() => tabs().find((tab) => tab.current).value)
let imageWheelContainer: HTMLDivElement
let imageHoverContainer: HTMLDivElement
+ let imageMoveContainer: HTMLDivElement
let zoomTarget: HTMLDivElement
const makeHandleTabClick = (tab: Tab) => () => {
@@ -51,6 +53,14 @@ const App: Component = () => {
const result = createZoomImageWheel(imageContainer)
cleanup = result.cleanup
}
+
+ if (zoomType() === "move") {
+ const imageContainer = imageMoveContainer
+ const result = createZoomImageMove(imageContainer, {
+ zoomImageSource: "/large.webp",
+ })
+ cleanup = result.cleanup
+ }
})
return (
@@ -76,16 +86,22 @@ const App: Component = () => {
{zoomType() === "wheel" && (
<>
Scroll inside the image to see zoom in-out effect
-
+
)}
{zoomType() === "hover" && (
-
+
-
+
+
+ )}
+
+ {zoomType() === "move" && (
+
+
)}
diff --git a/examples/svelte-ts/src/App.svelte b/examples/svelte-ts/src/App.svelte
index 7e566f23..53730981 100644
--- a/examples/svelte-ts/src/App.svelte
+++ b/examples/svelte-ts/src/App.svelte
@@ -1,19 +1,21 @@
diff --git a/examples/vanilla-ts/src/main.ts b/examples/vanilla-ts/src/main.ts
index 642ee25d..9c5a11ab 100644
--- a/examples/vanilla-ts/src/main.ts
+++ b/examples/vanilla-ts/src/main.ts
@@ -1,6 +1,6 @@
// eslint-disable-next-line import/no-unresolved
import "uno.css"
-import { createZoomImageHover, createZoomImageWheel } from "@zoom-image/core"
+import { createZoomImageHover, createZoomImageWheel, createZoomImageMove } from "@zoom-image/core"
function createSimpleState
(initialState: T) {
const listeners = new Set<(value: T) => void>()
@@ -14,10 +14,9 @@ function createSimpleState(initialState: T) {
}
},
set: (value: T) => {
- if (state === value) {
+ if (Object.is(state, value)) {
return
}
-
state = value
listeners.forEach((listener) => listener(state))
},
@@ -26,19 +25,22 @@ function createSimpleState(initialState: T) {
const zoomWheelLink = document.getElementById("zoom-image-wheel") as HTMLAnchorElement
const zoomHoverLink = document.getElementById("zoom-image-hover") as HTMLAnchorElement
+const zoomMouseLink = document.getElementById("zoom-image-move") as HTMLAnchorElement
+
+type ZoomType = "wheel" | "hover" | "move"
-const makeImageWheel = (id: "image-wheel" | "image-hover") => {
+const makeImageTemplate = (id: "image-wheel" | "image-hover" | "image-move") => {
const template = document.getElementById(id) as HTMLTemplateElement
return template.content.cloneNode(true)
}
const parent = document.getElementById("parent") as HTMLDivElement
-const state = createSimpleState<"wheel" | "hover" | "">("")
+const state = createSimpleState("")
const makeUpdateUIFunc = () => {
let cleanupZoom: () => void = () => {}
- return (state: "wheel" | "hover" | "") => {
+ return (state: ZoomType | "") => {
if (state === "") {
return
}
@@ -47,7 +49,7 @@ const makeUpdateUIFunc = () => {
parent.replaceChildren()
if (state === "wheel") {
- const imageWheel = makeImageWheel("image-wheel")
+ const imageWheel = makeImageTemplate("image-wheel")
parent.replaceChildren(imageWheel)
const container = document.getElementById("image-wheel-container") as HTMLDivElement
@@ -55,7 +57,7 @@ const makeUpdateUIFunc = () => {
}
if (state === "hover") {
- const imageHover = makeImageWheel("image-hover")
+ const imageHover = makeImageTemplate("image-hover")
parent.replaceChildren(imageHover)
const container = document.getElementById("image-hover-container") as HTMLDivElement
@@ -68,20 +70,34 @@ const makeUpdateUIFunc = () => {
scaleFactor: 0.5,
}).cleanup
}
+
+ if (state === "move") {
+ const imageHover = makeImageTemplate("image-move")
+ parent.replaceChildren(imageHover)
+
+ const container = document.getElementById("image-move-container") as HTMLDivElement
+
+ cleanupZoom = createZoomImageMove(container, {
+ zoomImageSource: "/large.webp",
+ }).cleanup
+ }
}
}
state.subscribe(makeUpdateUIFunc())
-state.set("wheel")
-zoomWheelLink.addEventListener("click", () => {
- state.set("wheel")
- zoomWheelLink.classList.add("bg-gray-200")
- zoomHoverLink.classList.remove("bg-gray-200")
+const links: { element: HTMLElement; type: ZoomType }[] = [
+ { element: zoomWheelLink, type: "wheel" },
+ { element: zoomHoverLink, type: "hover" },
+ { element: zoomMouseLink, type: "move" },
+]
+
+links.forEach((link) => {
+ link.element.addEventListener("click", () => {
+ state.set(link.type)
+ links.forEach((link) => link.element.classList.remove("bg-gray-200"))
+ link.element.classList.add("bg-gray-200")
+ })
})
-zoomHoverLink.addEventListener("click", () => {
- state.set("hover")
- zoomHoverLink.classList.add("bg-gray-200")
- zoomWheelLink.classList.remove("bg-gray-200")
-})
+zoomWheelLink.click()
diff --git a/examples/vue-ts/src/App.vue b/examples/vue-ts/src/App.vue
index 279e3db0..79c0efad 100644
--- a/examples/vue-ts/src/App.vue
+++ b/examples/vue-ts/src/App.vue
@@ -1,5 +1,5 @@
- 