easy-magnify-andisor
Version:
Everything you need for magnifying images
1 lines • 50.8 kB
Source Map (JSON)
{"version":3,"sources":["../src/EasyZoomOnHover.tsx","../src/utils/useZoomImageHover.ts","../src/hooks/useMouse/use-mouse.tsx","../src/hooks/useSkeleton/Skeleton.tsx","../src/hooks/useStore/use-store.ts","../src/core/imageLoader.tsx","../src/core/clamp.ts","../src/core/createZoomImageHover.tsx","../src/utils/useZoomImageMove.ts","../src/core/cropImage.tsx","../src/core/createZoomImageMove.tsx","../src/EasyZoomOnMove.tsx"],"names":["React","useCallback","useEffect","useRef","useState","controller","EasyZoomOnHover","createZoomImageHover","createZoomImageMove"],"mappings":"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","sourcesContent":["\"use client\";\nimport React from 'react';\nimport { useZoomImageHover } from './utils';\nimport { EasySkeleton } from './hooks/useSkeleton';\n\n\nexport type EasyZoomOnHoverProps = {\n\n /**\n * Delay timer in ms for knowingly applying delay on loader and enhancing user experience\n * @default 1600\n */\n delayTimer?: number;\n\n /**\n * The distance between main image and zoomed Image in pixels.\n * @default 10\n */\n distance?: number;\n\n /**\n * The loading indicator to show when the image is loading. Provides extra user experience.\n * default: EasySkeleton with height={500} and width={500}\n */\n loadingIndicator?: React.ReactNode;\n mainImage: {\n width?: number;\n height?: number;\n src: string;\n alt?: string;\n className?: string;\n }\n zoomImage: {\n src: string;\n alt?: string;\n className?: string;\n }\n zoomContainerWidth?: number;\n zoomContainerHeight?: number;\n zoomLensScale?: number;\n onLoad?: (element: HTMLImageElement) => void;\n}\n\nexport type ImageDimensionType = {\n height: number;\n width: number;\n}\n\n\nconst EasyZoomOnHover = React.forwardRef(function EasyZoomOnHover(props: EasyZoomOnHoverProps, ref: React.Ref<HTMLDivElement>) {\n\n const { mainImage, zoomImage, loadingIndicator, delayTimer, distance = 10, zoomContainerWidth, onLoad } = props;\n const { createZoomImage: createZoomImageHover } = useZoomImageHover();\n\n const imageHoverContainerRef = React.useRef<HTMLDivElement>(null);\n const zoomTargetRef = React.useRef<HTMLDivElement>(null);\n const imgRef = React.useRef<HTMLImageElement>(null);\n\n const [imageDimension, setImageDimensions] = React.useState<ImageDimensionType>({ height: 0, width: 0 });\n const [isImageLoaded, setIsImageLoaded] = React.useState(false);\n\n const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));\n\n const handleImageLoad = async () => {\n if (imgRef.current) {\n setImageDimensions({\n width: imgRef.current.width,\n height: imgRef.current.height,\n });\n // await delay(delayTimer ?? 1600); //delay for better user experience\n setIsImageLoaded(true);\n }\n };\n\n React.useEffect(() => {\n if (isImageLoaded && imgRef.current) {\n onLoad && onLoad(imgRef.current);\n }\n }, [isImageLoaded])\n\n React.useEffect(() => {\n setIsImageLoaded(false)\n }, [mainImage.src])\n\n React.useEffect(() => {\n if (imageDimension.width > 0 && imageDimension.height > 0) {\n const imageContainer = imageHoverContainerRef.current as HTMLDivElement;\n const zoomTarget = zoomTargetRef.current as HTMLDivElement;\n createZoomImageHover(\n imageContainer, {\n zoomImageSource: zoomImage.src ?? mainImage.src,\n customZoom: {\n width: props.zoomContainerWidth ?? imageDimension.width ?? 450,\n height: props.zoomContainerHeight ?? imageDimension.height ?? 470\n },\n zoomTarget,\n scale: props.zoomLensScale ?? 3,\n });\n }\n }, [isImageLoaded, imageDimension, props?.zoomContainerHeight]);\n\n return (\n <>\n {!isImageLoaded && (loadingIndicator ??\n <EasySkeleton\n height={props.mainImage.height ?? 450}\n width={props.mainImage.width ?? 450}\n />\n )}\n <div\n ref={imageHoverContainerRef}\n className=\"EasyZoomImageHoverMainContainer\"\n style={{\n position: \"relative\",\n width: props.mainImage.width ?? imageDimension.width,\n height: \"100%\",\n display: isImageLoaded ? \"flex\" : \"none\",\n justifyItems: \"start\",\n }}\n >\n <img\n className={`EasyZoomHoverSmallImage ${mainImage?.className || \"\"}`}\n onLoad={handleImageLoad}\n ref={imgRef}\n style={{ height: \"auto\", width: \"auto\" }}\n alt={mainImage.alt ?? \"Small Pic\"}\n src={mainImage.src}\n />\n\n <div\n ref={zoomTargetRef}\n className={`EasyZoomImageZoomHoverContainer ${zoomImage?.className || \"\"}`}\n id=\"zoomTargeted\"\n style={{\n position: \"absolute\",\n maxWidth: zoomContainerWidth ?? \"450px\",\n left: `${mainImage.width ? mainImage.width + distance : imageDimension.width + distance}px`,\n }}\n ></div>\n </div>\n </>\n )\n})\n\nexport default EasyZoomOnHover;\n","\"use client\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { ZoomImageHoverState, createZoomImageHover as _createZoomImageHover } from \"../core/createZoomImageHover\"\n\n\nexport default function useZoomImageHover() {\n const result = useRef<ReturnType<typeof _createZoomImageHover>>()\n const [zoomImageState, updateZoomImageState] = useState<ZoomImageHoverState>({\n enabled: false,\n zoomedImgStatus: \"idle\",\n })\n\n const createZoomImage = useCallback((...arg: Parameters<typeof _createZoomImageHover>) => {\n result.current?.cleanup()\n result.current = _createZoomImageHover(...arg)\n updateZoomImageState(result.current.getState())\n\n result.current.subscribe(({ state }: any) => {\n updateZoomImageState(state)\n })\n }, [])\n\n useEffect(() => {\n return () => {\n result.current?.cleanup()\n }\n }, [])\n\n return {\n createZoomImage,\n zoomImageState,\n setZoomImageState: result.current?.setState ?? (() => { }),\n }\n}","\"use client\";\nimport { useEffect, useRef, useState, useCallback } from 'react';\nimport type { MouseEvent } from 'react';\n\n/**\n * This hook is used for tracking mouse position. Note: this is to be tested and not recommended as of 1.1.0\n * for use as it re-renders whole component on change of cursor position. It is to be optimized.\n */\nfunction useMouse<T extends HTMLElement = any>(\n options: { resetOnExit?: boolean } = { resetOnExit: false }\n) {\n const [position, setPosition] = useState({ x: 0, y: 0 });\n const ref = useRef<T>(null);\n const requestRef = useRef<number | null>(null);\n const positionRef = useRef(position);\n\n const setMousePosition = useCallback((event: MouseEvent<HTMLElement>) => {\n if (ref.current) {\n const rect = event.currentTarget.getBoundingClientRect();\n const x = Math.max(\n 0,\n Math.round(event.pageX - rect.left - (window.pageXOffset || window.scrollX))\n );\n const y = Math.max(\n 0,\n Math.round(event.pageY - rect.top - (window.pageYOffset || window.scrollY))\n );\n positionRef.current = { x, y };\n } else {\n positionRef.current = { x: event.clientX, y: event.clientY };\n }\n if (requestRef.current === null) {\n requestRef.current = requestAnimationFrame(() => {\n setPosition(positionRef.current);\n requestRef.current = null;\n });\n }\n }, []);\n\n const resetMousePosition = useCallback(() => {\n positionRef.current = { x: 0, y: 0 };\n setPosition({ x: 0, y: 0 });\n }, []);\n\n useEffect(() => {\n const element = ref.current || document;\n element.addEventListener('mousemove', setMousePosition as any);\n if (options.resetOnExit) element.addEventListener('mouseleave', resetMousePosition as any);\n\n return () => {\n element.removeEventListener('mousemove', setMousePosition as any);\n if (options.resetOnExit) element.removeEventListener('mouseleave', resetMousePosition as any);\n if (requestRef.current !== null) {\n cancelAnimationFrame(requestRef.current);\n }\n };\n }, [setMousePosition, resetMousePosition, options.resetOnExit]);\n\n return { ref, ...position };\n}\n\nexport default useMouse;\n","import React from \"react\";\nimport { HTMLAttributes } from 'react';\n\n\nexport interface SkeletonPropsType extends HTMLAttributes<HTMLDivElement> {\n height: number;\n width: number;\n\n /**\n * Animation of the skeleton. Default is \"pulse 2s ease-in-out 0.5s infinite\"\n */\n animation?: string;\n\n /**\n * Background color of the skeleton. Default is #0000001c\n */\n backgroundColor?: string;\n}\n\nconst EasySkeleton = (props: SkeletonPropsType) => {\n\n const { height, width, backgroundColor, animation, ...other } = props;\n\n return (\n <div className=\"easyPulseSkeleton\" style={{\n backgroundColor: backgroundColor ?? \"#0000001c\",\n height: `${height}px`,\n width: `${width}px`,\n animation: animation ?? \"pulse 2s ease-in-out 0.5s infinite\"\n }}\n {...other}\n />\n );\n};\n\nexport default EasySkeleton;","export type StoreListener<TState> = (arg: { state: TState; updatedProperties: Partial<TState> }) => void\n\nexport default function createStore<TState>(initialState: TState) {\n const listeners = new Set<StoreListener<TState>>()\n let batching = false\n let state: TState = initialState\n let updatedProperties: Partial<TState> | undefined\n\n const setState = (extraState: Partial<TState> = {}) => {\n updatedProperties = { ...updatedProperties, ...extraState }\n flush()\n }\n\n const flush = () => {\n if (batching) return\n\n let hasChanged = false\n\n if (updatedProperties) {\n for (const key in updatedProperties) {\n if (state[key] !== updatedProperties[key]) {\n hasChanged = true\n break\n }\n }\n }\n\n if (!hasChanged) {\n return\n }\n\n state = { ...state, ...updatedProperties }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n listeners.forEach((listener) => listener({ state, updatedProperties } as any))\n updatedProperties = undefined\n }\n\n const batch = (cb: () => void) => {\n batching = true\n cb()\n batching = false\n flush()\n }\n\n const subscribe = (listener: StoreListener<TState>) => {\n listeners.add(listener)\n return () => {\n listeners.delete(listener)\n }\n }\n\n const cleanup = () => listeners.clear()\n\n const getState = () => state\n\n return {\n subscribe,\n cleanup,\n getState,\n setState,\n batch,\n }\n}","import { createStore } from \"../hooks\"\n\n// There is a scenario where the image is already in the cache,\n// we don't want to trigger the loading state too quickly in that case\n// 50ms should be enough to wait before triggering the loading state\n\nconst THRESHOLD = 50;\ntype ZoomedImgStatus = \"idle\" | \"loading\" | \"loaded\" | \"error\";\n\n\nexport const makeImageLoader = () => {\n const createZoomImage = (\n img: HTMLImageElement,\n src: string,\n store: ReturnType<\n typeof createStore<{\n zoomedImgStatus: ZoomedImgStatus\n }>\n >,\n ) => {\n if (img.src === src) return\n img.src = src\n let complete = false\n\n img.onload = () => {\n complete = true\n store.setState({ zoomedImgStatus: \"loaded\" })\n }\n\n img.onerror = () => {\n complete = true\n store.setState({ zoomedImgStatus: \"error\" })\n }\n\n setTimeout(() => {\n if (!complete) store.setState({ zoomedImgStatus: \"loading\" })\n }, THRESHOLD)\n }\n\n return {\n createZoomImage,\n }\n}\n\nexport const imageLoader = makeImageLoader()","export function clamp(value: number, min: number, max: number) {\n return Math.max(min, Math.min(max, value))\n}\n\nexport function noop() { }\n\nfunction preventDefault(event: Event) {\n event.preventDefault()\n}\n\nconst keySet = new Set([\"ArrowUp\", \"ArrowRight\", \"ArrowDown\", \"ArrowLeft\"])\nfunction preventDefaultForScrollKeys(event: KeyboardEvent) {\n if (keySet.has(event.key)) {\n preventDefault(event)\n return false\n }\n}\n\nlet controller: AbortController | undefined\n\nexport function disableScroll() {\n controller = new AbortController()\n const { signal } = controller\n window.addEventListener(\"DOMMouseScroll\", preventDefault, { signal })\n window.addEventListener(\"wheel\", preventDefault, { passive: false, signal })\n window.addEventListener(\"touchmove\", preventDefault, { passive: false, signal })\n window.addEventListener(\"keydown\", preventDefaultForScrollKeys, { signal })\n}\n\nexport function enableScroll() {\n controller?.abort()\n}\n\nexport function getSourceImage(container: HTMLElement) {\n if (!container) {\n throw new Error(\"Please specify a container for the zoom image\")\n }\n\n const sourceImgElement = container.querySelector(\"img\")\n if (!sourceImgElement) {\n throw new Error(\"Please place an image inside the container\")\n }\n\n return sourceImgElement\n}\n\nexport type PointerPosition = {\n x: number\n y: number\n}\n\nexport function getPointersCenter(first: PointerPosition, second: PointerPosition) {\n return {\n x: (first.x + second.x) / 2,\n y: (first.y + second.y) / 2,\n }\n}\n\n// Given the previous and current positions of two touch inputs, compute the zoom\n// factor and the origin of the zoom gesture.\nexport function computeZoomGesture(prev: [PointerPosition, PointerPosition], curr: [PointerPosition, PointerPosition]) {\n const prevCenter = getPointersCenter(prev[0], prev[1])\n const currCenter = getPointersCenter(curr[0], curr[1])\n const centerDist = { x: currCenter.x - prevCenter.x, y: currCenter.y - prevCenter.y }\n\n const prevDistance = Math.hypot(prev[0].x - prev[1].x, prev[0].y - prev[1].y)\n const currDistance = Math.hypot(curr[0].x - curr[1].x, curr[0].y - curr[1].y)\n let scale = currDistance / prevDistance\n\n // avoid division by zero\n const eps = 0.00001\n if (Math.abs(scale - 1) < eps) {\n scale = 1 + eps\n }\n\n return {\n scale,\n center: {\n // We shift the zoom center away such that the translation part of the gesture\n // is also captured by the zoom operation.\n x: prevCenter.x + centerDist.x / (1 - scale),\n y: prevCenter.y + centerDist.y / (1 - scale),\n },\n }\n}\n\nexport function makeMaybeCallFunction<T>(predicateFn: () => boolean, fn: (arg: T) => void) {\n return (arg: T) => {\n if (predicateFn()) {\n fn(arg)\n }\n }\n}\n\nexport const scaleLinear =\n ({\n domainStart,\n domainStop,\n rangeStart,\n rangeStop,\n }: {\n domainStart: number\n domainStop: number\n rangeStart: number\n rangeStop: number\n }) =>\n (value: number) =>\n rangeStart + (rangeStop - rangeStart) * ((value - domainStart) / (domainStop - domainStart))","import { createStore } from \"../hooks\"\nimport { imageLoader } from \"./imageLoader\"\nimport { clamp, disableScroll, enableScroll, getSourceImage } from \"../core/clamp\";\n\ntype ZoomedImgStatus = \"idle\" | \"loading\" | \"loaded\" | \"error\"\n\n\nexport type ZoomImageHoverOptions = {\n customZoom: { width: number; height: number }\n zoomImageSource?: string\n zoomLensClass?: string\n zoomLensScale?: number\n zoomTarget: HTMLElement\n zoomTargetClass?: string\n scale?: number\n disableScrollLock?: boolean\n zoomImageProps?: {\n alt?: string\n }\n}\n\nexport type ZoomImageHoverState = {\n zoomedImgStatus: ZoomedImgStatus\n enabled: boolean\n}\n\nexport type ZoomImageHoverStateUpdate = { enabled: boolean }\n\nexport function createZoomImageHover(container: HTMLElement, options: ZoomImageHoverOptions) {\n const controller = new AbortController()\n const { signal } = controller\n const sourceImgElement = getSourceImage(container)\n const zoomedImgWrapper = document.createElement(\"div\")\n zoomedImgWrapper.style.overflow = \"hidden\"\n const zoomedImg = zoomedImgWrapper.appendChild(document.createElement(\"img\"))\n zoomedImg.alt = options.zoomImageProps?.alt || \"\"\n zoomedImg.style.maxWidth = \"none\"\n zoomedImg.style.display = \"none\"\n const zoomLens = container.appendChild(document.createElement(\"div\"))\n zoomLens.style.display = \"none\"\n zoomedImg.id = \"meroZoomedImg\"\n\n // Sometimes, source image element's width and height are not available until the image is loaded\n // and container size is set. These values are expected to be same as the container's width and height\n let sourceImageElementWidth = 0\n let sourceImageElementHeight = 0\n\n const finalOptions: Omit<Required<ZoomImageHoverOptions>, \"zoomImageProps\"> = {\n zoomImageSource: options.zoomImageSource || sourceImgElement.src,\n zoomLensClass: options.zoomLensClass || \"\",\n zoomTargetClass: options.zoomTargetClass || \"\",\n customZoom: options.customZoom,\n scale: options.scale || 2,\n zoomTarget: options.zoomTarget,\n zoomLensScale: options.zoomLensScale || 1,\n disableScrollLock: options.disableScrollLock || false,\n }\n\n const {\n scale,\n zoomImageSource,\n customZoom,\n zoomLensClass,\n zoomTarget,\n zoomLensScale,\n zoomTargetClass,\n disableScrollLock,\n } = finalOptions\n\n const store = createStore<ZoomImageHoverState>({\n zoomedImgStatus: \"idle\",\n enabled: true,\n })\n\n let offset: { left: number; top: number } = getOffset(sourceImgElement)\n\n function getOffset(element: HTMLElement) {\n const elRect = element.getBoundingClientRect()\n return { left: elRect.left, top: elRect.top }\n }\n\n function getLimitX(value: number) {\n return sourceImageElementWidth - value\n }\n\n function getLimitY(value: number) {\n return sourceImageElementHeight - value\n }\n\n function zoomLensLeft(left: number) {\n const minX = zoomLens.clientWidth / 2\n return clamp(left, minX, getLimitX(minX)) - minX\n }\n\n function zoomLensTop(top: number) {\n const minY = zoomLens.clientHeight / 2\n return clamp(top, minY, getLimitY(minY)) - minY\n }\n\n function processZoom(event: PointerEvent) {\n let offsetX: number\n let offsetY: number\n let backgroundX: number\n let backgroundY: number\n if (offset) {\n offsetX = zoomLensLeft(event.clientX - offset.left)\n offsetY = zoomLensTop(event.clientY - offset.top)\n backgroundX = (offsetX * scale) / zoomLensScale\n backgroundY = (offsetY * scale) / zoomLensScale\n zoomedImg.style.transform = \"translate(\" + -backgroundX + \"px,\" + -backgroundY + \"px)\"\n zoomLens.style.cssText += \"transform:\" + \"translate(\" + offsetX + \"px,\" + offsetY + \"px);\"\n }\n }\n\n async function handlePointerEnter() {\n imageLoader.createZoomImage(zoomedImg, zoomImageSource, store)\n zoomedImg.style.display = \"block\"\n zoomLens.style.display = \"block\"\n\n if (zoomTargetClass) {\n const classes = zoomTargetClass.split(\" \")\n classes.forEach((className) => zoomTarget.classList.add(className))\n }\n\n if (!disableScrollLock) disableScroll()\n }\n\n function handlePointerLeave() {\n zoomedImg.style.display = \"none\"\n zoomLens.style.display = \"none\"\n\n if (zoomTargetClass) {\n const classes = zoomTargetClass.split(\" \")\n classes.forEach((className) => zoomTarget.classList.remove(className))\n }\n\n if (!disableScrollLock) enableScroll()\n }\n\n function handleScroll() {\n offset = getOffset(sourceImgElement)\n }\n\n async function setup() {\n if (zoomLensClass) {\n zoomLens.className = zoomLensClass\n } else {\n zoomLens.style.backgroundImage = \"url(data:image/gif;base64,R0lGODlhZABkAPABAHOf4fj48yH5BAEAAAEALAAAAABkAGQAAAL+jI+py+0PowOB2oqvznz7Dn5iSI7SiabqWrbj68bwTLL2jUv0Lvf8X8sJhzmg0Yc8mojM5kmZjEKPzqp1MZVqs7Cr98rdisOXr7lJHquz57YwDV8j3XRb/C7v1vcovD8PwicY8VcISDGY2GDIKKf4mNAoKQZZeXg5aQk5yRml+dgZ2vOpKGraQpp4uhqYKsgKi+H6iln7N8sXG4u7p2s7ykvnyxos/DuMWtyGfKq8fAwd5nzGHN067VUtiv2lbV3GDfY9DhQu7p1pXoU+rr5ODk/j7sSePk9Ub33PlN+4jx8v4JJ/RQQa3EDwzcGFiBLi6AfN4UOGCyXegGjIoh0fisQ0rsD4y+NHjgZFqgB5y2Qfks1UPmEZ0OVLlIcKAAA7)\"\n zoomLens.style.cursor = \"pointer\"\n }\n\n // setup event listeners\n container.addEventListener(\"pointerdown\", processZoom, { signal })\n container.addEventListener(\"pointermove\", processZoom, { signal })\n container.addEventListener(\"pointerenter\", handlePointerEnter, { signal })\n container.addEventListener(\"pointerleave\", handlePointerLeave, { signal })\n window.addEventListener(\"scroll\", handleScroll, { signal })\n\n // Append zoomed image wrapper to zoom target\n zoomTarget.appendChild(zoomedImgWrapper)\n\n // Wait for next tick to get container size\n await new Promise((resolve) => setTimeout(resolve, 1))\n const containerRect = container.getBoundingClientRect()\n sourceImageElementWidth = containerRect.width\n sourceImageElementHeight = containerRect.height\n\n // Set up styles if custom zoom available\n if (customZoom) {\n zoomedImgWrapper.style.maxWidth = customZoom.width + \"px\"\n zoomedImgWrapper.style.height = customZoom.height + \"px\"\n } else {\n // Else default zoom to source image size\n zoomedImgWrapper.style.width = sourceImageElementWidth + \"px\"\n zoomedImgWrapper.style.height = sourceImageElementHeight + \"px\"\n }\n\n zoomedImg.width = (sourceImageElementWidth * scale) / zoomLensScale\n zoomedImg.height = (sourceImageElementHeight * scale) / zoomLensScale\n\n // Setup default zoom lens style\n const sourceImageRect = sourceImgElement.getBoundingClientRect()\n const fromLeft = sourceImageRect.left - containerRect.left\n const fromTop = sourceImageRect.top - containerRect.top\n zoomTarget.style.pointerEvents = \"none\"\n zoomLens.style.position = \"absolute\"\n zoomLens.style.left = fromLeft + \"px\"\n zoomLens.style.top = fromTop + \"px\"\n zoomLens.style.width = (customZoom.width / scale) * zoomLensScale + \"px\"\n zoomLens.style.height = (customZoom.height / scale) * zoomLensScale + \"px\"\n }\n\n setup()\n\n return {\n cleanup: () => {\n controller.abort()\n container.contains(zoomLens) && container.removeChild(zoomLens)\n\n if (zoomTarget && zoomTarget.contains(zoomedImgWrapper)) {\n zoomTarget.removeChild(zoomedImgWrapper)\n return\n }\n\n container.contains(zoomedImgWrapper) && container.removeChild(zoomedImgWrapper)\n },\n subscribe: store.subscribe,\n getState: store.getState,\n setState: (newState: ZoomImageHoverStateUpdate) => {\n store.setState(newState)\n },\n }\n}","\"use client\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { createZoomImageMove as _createZoomImageMove } from \"../core/createZoomImageMove\"\nimport type { ZoomImageMoveState } from \"../core/createZoomImageMove\"\n\nexport default function useZoomImageMove() {\n const result = useRef<ReturnType<typeof _createZoomImageMove>>()\n const [zoomImageState, updateZoomImageState] = useState<ZoomImageMoveState>({\n zoomedImgStatus: \"idle\",\n })\n\n const createZoomImage = useCallback((...arg: Parameters<typeof _createZoomImageMove>) => {\n result.current?.cleanup()\n result.current = _createZoomImageMove(...arg)\n updateZoomImageState(result.current.getState())\n\n result.current.subscribe(({ state }) => {\n updateZoomImageState(state)\n })\n }, [])\n\n useEffect(() => {\n return () => {\n result.current?.cleanup()\n }\n }, [])\n\n return {\n createZoomImage,\n zoomImageState,\n }\n}","export type CropImageArg = {\n currentZoom: number\n image: HTMLImageElement\n positionX: number\n positionY: number\n rotation?: number\n}\n\nconst cropImage = async ({ image, positionX, positionY, currentZoom, rotation = 0 }: CropImageArg) => {\n const canvas = document.createElement(\"canvas\")\n const scale = image.naturalWidth / (image.clientWidth * currentZoom)\n const normalizedRotation = rotation % 360\n const croppedImageWidth = image.clientWidth * scale\n const croppedImageHeight = image.clientHeight * scale\n canvas.width = croppedImageWidth\n canvas.height = croppedImageHeight\n const canvasContext = canvas.getContext(\"2d\") as CanvasRenderingContext2D\n\n const sx = Math.max(0, Math.abs(positionX) * scale)\n const sy = Math.max(0, Math.abs(positionY) * scale)\n\n canvasContext.drawImage(\n image,\n sx,\n sy,\n croppedImageWidth,\n croppedImageHeight,\n 0,\n 0,\n croppedImageWidth,\n croppedImageHeight,\n )\n\n const originalImage = new Image()\n originalImage.src = canvas.toDataURL()\n\n await new Promise((resolve) => setTimeout(resolve, 0))\n\n const rotatedCanvas = document.createElement(\"canvas\") as HTMLCanvasElement\n const rotatedCanvasContext = rotatedCanvas.getContext(\"2d\") as CanvasRenderingContext2D\n\n if (normalizedRotation === 90 || normalizedRotation === 270) {\n rotatedCanvas.width = originalImage.naturalHeight\n rotatedCanvas.height = originalImage.naturalWidth\n } else {\n rotatedCanvas.width = originalImage.naturalWidth\n rotatedCanvas.height = originalImage.naturalHeight\n }\n\n rotatedCanvasContext.clearRect(0, 0, canvas.width, canvas.height)\n if (normalizedRotation === 90 || normalizedRotation === 270) {\n rotatedCanvasContext.translate(originalImage.height / 2, originalImage.width / 2)\n } else {\n rotatedCanvasContext.translate(originalImage.width / 2, originalImage.height / 2)\n }\n rotatedCanvasContext.rotate((normalizedRotation * Math.PI) / 180)\n rotatedCanvasContext.drawImage(originalImage, -originalImage.width / 2, -originalImage.height / 2)\n\n return rotatedCanvas.toDataURL()\n}\nexport default cropImage;","import { createStore } from \"../hooks\"\nimport { imageLoader } from \"./imageLoader\"\nimport { disableScroll, enableScroll, getSourceImage } from \"../core\"\n\nexport type ZoomedImgStatus = \"idle\" | \"loading\" | \"loaded\" | \"error\"\n\nexport type ZoomImageMoveOptions = {\n zoomFactor?: number\n zoomImageSource?: string\n disableScrollLock?: boolean\n zoomImageProps?: {\n alt?: string\n }\n}\n\nexport type ZoomImageMoveState = {\n zoomedImgStatus: ZoomedImgStatus\n}\n\nexport function createZoomImageMove(container: HTMLElement, options: ZoomImageMoveOptions = {}) {\n const sourceImgElement = getSourceImage(container)\n const finalOptions: Omit<Required<ZoomImageMoveOptions>, \"zoomImageProps\"> = {\n zoomFactor: options.zoomFactor ?? 4,\n zoomImageSource: options.zoomImageSource ?? sourceImgElement.src,\n disableScrollLock: options.disableScrollLock ?? false,\n }\n\n const { disableScrollLock, zoomFactor, zoomImageSource } = finalOptions\n\n const store = createStore<ZoomImageMoveState>({\n zoomedImgStatus: \"idle\",\n })\n\n const zoomedImg = container.appendChild(document.createElement(\"img\"))\n zoomedImg.alt = options.zoomImageProps?.alt || \"\"\n zoomedImg.style.maxWidth = \"none\"\n zoomedImg.style.position = \"absolute\"\n zoomedImg.style.top = \"0\"\n zoomedImg.style.left = \"0\"\n\n function handlePointerEnter(event: PointerEvent) {\n zoomedImg.style.display = \"block\"\n const zoomedImgWidth = sourceImgElement.clientWidth * zoomFactor\n const zoomedImgHeight = sourceImgElement.clientHeight * zoomFactor\n zoomedImg.style.width = `${zoomedImgWidth}px`\n zoomedImg.style.height = `${zoomedImgHeight}px`\n imageLoader.createZoomImage(zoomedImg, zoomImageSource, store)\n\n processZoom(event)\n\n if (!disableScrollLock) disableScroll()\n }\n\n function handlePointerMove(event: PointerEvent) {\n processZoom(event)\n }\n\n function handlePointerLeave() {\n zoomedImg.style.display = \"none\"\n zoomedImg.style.transform = \"none\"\n if (!disableScrollLock) enableScroll()\n }\n\n const calculatePositionX = (newPositionX: number) => {\n const width = container.clientWidth\n if (newPositionX > 0) return 0\n if (newPositionX + width * zoomFactor < width) return -width * (zoomFactor - 1)\n return newPositionX\n }\n\n const calculatePositionY = (newPositionY: number) => {\n const height = container.clientHeight\n if (newPositionY > 0) return 0\n if (newPositionY + height * zoomFactor < height) return -height * (zoomFactor - 1)\n return newPositionY\n }\n\n function processZoom(event: PointerEvent) {\n zoomedImg.style.display = \"block\"\n\n const containerRect = container.getBoundingClientRect()\n const zoomPointX = event.clientX - containerRect.left\n const zoomPointY = event.clientY - containerRect.top\n\n const currentPositionX = calculatePositionX(-zoomPointX * zoomFactor + zoomPointX)\n const currentPositionY = calculatePositionY(-zoomPointY * zoomFactor + zoomPointY)\n zoomedImg.style.transform = `translate(${currentPositionX}px, ${currentPositionY}px)`\n }\n\n const controller = new AbortController()\n const { signal } = controller\n container.addEventListener(\"pointerenter\", handlePointerEnter, { signal })\n container.addEventListener(\"pointermove\", handlePointerMove, { signal })\n container.addEventListener(\"pointerleave\", handlePointerLeave, { signal })\n\n return {\n cleanup: () => {\n controller.abort()\n container.contains(zoomedImg) && container.removeChild(zoomedImg)\n container.style.width = \"100%\"\n container.style.height = \"100%\"\n store.cleanup()\n },\n subscribe: store.subscribe,\n getState: store.getState,\n }\n}","\"use client\"\nimport React from 'react'\nimport { useZoomImageMove } from './utils';\nimport { EasySkeleton } from './hooks/useSkeleton';\n\ntype EasyZoomOnMovePropsType = {\n /**\n * Delay timer in ms for knowingly applying delay on loader and enhancing user experience\n * @default 1600\n */\n delayTimer?: number;\n\n loadingIndicator?: React.ReactNode;\n mainImage: {\n width?: number;\n height?: number;\n src: string;\n alt?: string;\n };\n zoomImage: {\n src: string;\n alt?: string;\n };\n\n}\n\ntype ImageDimensionType = {\n width: number;\n height: number\n}\n\n\nconst EasyZoomOnMove = (props: EasyZoomOnMovePropsType) => {\n\n const { mainImage, zoomImage, loadingIndicator, delayTimer } = props;\n const [isImageLoaded, setIsImageLoaded] = React.useState(false);\n const { createZoomImage: createZoomImageMove } = useZoomImageMove();\n const imageMoveContainerRef = React.useRef<HTMLDivElement>(null)\n const imgRef = React.useRef<HTMLImageElement>(null)\n const [imageDimension, setImageDimensions] = React.useState<ImageDimensionType>({ height: 0, width: 0 });\n\n const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));\n\n\n React.useEffect(() => {\n if (imageDimension.width > 0 && imageDimension.height > 0) {\n\n\n }\n const imageContainer = imageMoveContainerRef.current as HTMLDivElement;\n if (imageContainer) {\n createZoomImageMove(imageContainer, {\n zoomImageSource: zoomImage.src,\n zoomImageProps: { alt: zoomImage.alt },\n });\n }\n }, [zoomImage.src, zoomImage.alt, createZoomImageMove]);\n\n const handleImageLoad = async () => {\n if (imgRef.current) {\n setImageDimensions({\n width: imgRef.current.naturalWidth,\n height: imgRef.current.naturalHeight,\n });\n await delay(delayTimer ?? 1600); //delay for better user experience\n setIsImageLoaded(true);\n }\n };\n\n\n return (\n <>\n {!isImageLoaded && (loadingIndicator ??\n <EasySkeleton\n height={props.mainImage.height ?? 450}\n width={props.mainImage.width ?? 450}\n />\n )}\n <div ref={imageMoveContainerR