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