@embedpdf/plugin-zoom 1.0.20 → 1.0.21

package/dist/preact/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/preact"),t=require("@embedpdf/plugin-zoom");require("preact");const n=require("preact/hooks"),o=require("preact/jsx-runtime"),r=()=>e.useCapability(t.ZoomPlugin.id);function i(){const{provides:t}=e.useCapability("viewport"),{provides:o}=r(),i=n.useRef(null);return n.useEffect((()=>{const e=i.current;if(!e||!t||!o)return;if("undefined"==typeof window)return;let n,r=0,s={x:0,y:0};const a=()=>{e.style.transform="none",e.style.transformOrigin="0 0"},l=n=>{var i;r=o.getState().currentZoomLevel;const a=t.getBoundingRect();s={x:n.center.x-a.origin.x,y:n.center.y-a.origin.y};const l=e.getBoundingClientRect();e.style.transformOrigin=`${n.center.x-l.left}px ${n.center.y-l.top}px`,(null==(i=n.srcEvent)?void 0:i.cancelable)&&(n.srcEvent.preventDefault(),n.srcEvent.stopPropagation())},c=t=>{var n,o;o=t.scale,e.style.transform=`scale(${o})`,(null==(n=t.srcEvent)?void 0:n.cancelable)&&(t.srcEvent.preventDefault(),t.srcEvent.stopPropagation())},u=e=>{const t=(e.scale-1)*r;o.requestZoomBy(t,{vx:s.x,vy:s.y}),a(),r=0};return(async()=>{try{const t=(await Promise.resolve().then((()=>require("../hammer-Bs-QCG8V.cjs"))).then((e=>e.hammer))).default,o=(()=>{const e="ontouchstart"in window||navigator.maxTouchPoints>0;return e&&/mobile|tablet|ip(ad|hone|od)|android/i.test(navigator.userAgent)?t.TouchInput:e?t.TouchMouseInput:t.MouseInput})();n=new t(e,{touchAction:"pan-x pan-y",inputClass:o}),n.get("pinch").set({enable:!0,pointers:2,threshold:.1}),n.on("pinchstart",l),n.on("pinchmove",c),n.on("pinchend",u)}catch(t){console.warn("Failed to load HammerJS:",t)}})(),()=>{null==n||n.destroy(),a()}}),[t,o]),{elementRef:i}}exports.MarqueeZoom=({pageIndex:e,scale:t,className:i,stroke:s="rgba(33,150,243,0.8)",fill:a="rgba(33,150,243,0.15)"})=>{const{provides:l}=r(),[c,u]=n.useState(null);return n.useEffect((()=>{if(l)return l.registerMarqueeOnPage({pageIndex:e,scale:t,callback:{onPreview:u}})}),[l,e,t]),c?o.jsx("div",{style:{position:"absolute",pointerEvents:"none",left:c.origin.x*t,top:c.origin.y*t,width:c.size.width*t,height:c.size.height*t,border:`1px solid ${s}`,background:a,boxSizing:"border-box"},className:i}):null},exports.PinchWrapper=function({children:e,style:t,...n}){const{elementRef:r}=i();return o.jsx("div",{ref:r,...n,style:{...t,display:"block",width:"fit-content",overflow:"visible",boxSizing:"border-box",margin:"0px auto"},children:e})},exports.usePinch=i,exports.useZoom=()=>{const{provides:e}=r(),[o,i]=n.useState(t.initialState);return n.useEffect((()=>null==e?void 0:e.onStateChange((e=>{i(e)}))),[e]),{state:o,provides:e}},exports.useZoomCapability=r,exports.useZoomPlugin=()=>e.usePlugin(t.ZoomPlugin.id);
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/preact"),t=require("@embedpdf/plugin-zoom");require("preact");const o=require("preact/hooks"),n=require("preact/jsx-runtime"),r=()=>e.useCapability(t.ZoomPlugin.id);function i({element:e,viewportProvides:t,zoomProvides:o}){if("undefined"==typeof window)return()=>{};let n,r=0,i={x:0,y:0};const s=()=>{e.style.transform="none",e.style.transformOrigin="0 0"},a=n=>{var s;r=o.getState().currentZoomLevel;const a=t.getBoundingRect();i={x:n.center.x-a.origin.x,y:n.center.y-a.origin.y};const l=e.getBoundingClientRect();e.style.transformOrigin=`${n.center.x-l.left}px ${n.center.y-l.top}px`,(null==(s=n.srcEvent)?void 0:s.cancelable)&&(n.srcEvent.preventDefault(),n.srcEvent.stopPropagation())},l=t=>{var o,n;n=t.scale,e.style.transform=`scale(${n})`,(null==(o=t.srcEvent)?void 0:o.cancelable)&&(t.srcEvent.preventDefault(),t.srcEvent.stopPropagation())},c=e=>{const t=(e.scale-1)*r;o.requestZoomBy(t,{vx:i.x,vy:i.y}),s(),r=0};return(async()=>{try{const t=(await Promise.resolve().then((()=>require("../hammer-Bs-QCG8V.cjs"))).then((e=>e.hammer))).default,o=(()=>{const e="ontouchstart"in window||navigator.maxTouchPoints>0;return e&&/mobile|tablet|ip(ad|hone|od)|android/i.test(navigator.userAgent)?t.TouchInput:e?t.TouchMouseInput:t.MouseInput})();n=new t(e,{touchAction:"pan-x pan-y",inputClass:o}),n.get("pinch").set({enable:!0,pointers:2,threshold:.1}),n.on("pinchstart",a),n.on("pinchmove",l),n.on("pinchend",c)}catch(t){console.warn("Failed to load HammerJS:",t)}})(),()=>{null==n||n.destroy(),s()}}function s(){const{provides:t}=e.useCapability("viewport"),{provides:n}=r(),s=o.useRef(null);return o.useEffect((()=>{const e=s.current;if(e&&t&&n)return i({element:e,viewportProvides:t,zoomProvides:n})}),[t,n]),{elementRef:s}}exports.MarqueeZoom=({pageIndex:e,scale:t,className:i,stroke:s="rgba(33,150,243,0.8)",fill:a="rgba(33,150,243,0.15)"})=>{const{provides:l}=r(),[c,u]=o.useState(null);return o.useEffect((()=>{if(l)return l.registerMarqueeOnPage({pageIndex:e,scale:t,callback:{onPreview:u}})}),[l,e,t]),c?n.jsx("div",{style:{position:"absolute",pointerEvents:"none",left:c.origin.x*t,top:c.origin.y*t,width:c.size.width*t,height:c.size.height*t,border:`1px solid ${s}`,background:a,boxSizing:"border-box"},className:i}):null},exports.PinchWrapper=function({children:e,style:t,...o}){const{elementRef:r}=s();return n.jsx("div",{ref:r,...o,style:{...t,display:"block",width:"fit-content",overflow:"visible",boxSizing:"border-box",margin:"0px auto"},children:e})},exports.usePinch=s,exports.useZoom=()=>{const{provides:e}=r(),[n,i]=o.useState(t.initialState);return o.useEffect((()=>null==e?void 0:e.onStateChange((e=>{i(e)}))),[e]),{state:n,provides:e}},exports.useZoomCapability=r,exports.useZoomPlugin=()=>e.usePlugin(t.ZoomPlugin.id),Object.keys(t).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})}));
 //# sourceMappingURL=index.cjs.map

package/dist/preact/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-zoom.ts","../../src/shared/hooks/use-pinch-zoom.ts","../../src/shared/components/marquee-zoom.tsx","../../src/shared/components/pinch-wrapper.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { initialState, ZoomPlugin, ZoomState } from '@embedpdf/plugin-zoom';\nimport { useEffect, useState } from '@framework';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\nexport const useZoom = () => {\n  const { provides } = useZoomCapability();\n  const [state, setState] = useState<ZoomState>(initialState);\n\n  useEffect(() => {\n    return provides?.onStateChange((action) => {\n      setState(action);\n    });\n  }, [provides]);\n\n  return {\n    state,\n    provides,\n  };\n};\n","import { useEffect, useRef } from '@framework';\nimport { useCapability } from '@embedpdf/core/@framework';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\nimport { ZoomState } from '@embedpdf/plugin-zoom';\n\nimport { useZoomCapability } from './use-zoom';\n\nexport function usePinch() {\n  const { provides: viewportProvides } = useCapability<ViewportPlugin>('viewport');\n  const { provides: zoomProvides } = useZoomCapability();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !viewportProvides || !zoomProvides) {\n      return;\n    }\n\n    // Check if we're on the client side\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    let hammer: any | undefined;\n    let initialZoom = 0; // numeric scale at pinchstart\n    let lastCenter = { x: 0, y: 0 };\n\n    const getState = (): ZoomState => zoomProvides.getState();\n\n    const updateTransform = (scale: number) => {\n      // 1 → no scale; we only scale *relatively* to the start\n      element.style.transform = `scale(${scale})`;\n    };\n\n    const resetTransform = () => {\n      element.style.transform = 'none';\n      element.style.transformOrigin = '0 0';\n    };\n\n    const pinchStart = (e: HammerInput) => {\n      initialZoom = getState().currentZoomLevel;\n\n      const contRect = viewportProvides.getBoundingRect();\n\n      lastCenter = {\n        x: e.center.x - contRect.origin.x,\n        y: e.center.y - contRect.origin.y,\n      };\n\n      // put the transform-origin under the fingers so the preview feels right\n      const innerRect = element.getBoundingClientRect();\n      element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;\n\n      // stop the browser’s own pinch-zoom\n      if (e.srcEvent?.cancelable) {\n        e.srcEvent.preventDefault();\n        e.srcEvent.stopPropagation();\n      }\n    };\n\n    const pinchMove = (e: HammerInput) => {\n      updateTransform(e.scale); // *only* CSS, no real zoom yet\n      if (e.srcEvent?.cancelable) {\n        e.srcEvent.preventDefault();\n        e.srcEvent.stopPropagation();\n      }\n    };\n\n    const pinchEnd = (e: HammerInput) => {\n      // translate the relative hammer scale into a delta for requestZoomBy\n      const delta = (e.scale - 1) * initialZoom;\n      zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });\n\n      resetTransform();\n      initialZoom = 0;\n    };\n\n    // Dynamically import and setup Hammer\n    const setupHammer = async () => {\n      try {\n        const Hammer = (await import('hammerjs')).default;\n\n        /* ------------------------------------------------------------------ */\n        /* Hammer setup                                                        */\n        /* ------------------------------------------------------------------ */\n        const inputClass = (() => {\n          const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;\n          const SUPPORT_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n          const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);\n          if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;\n          if (!SUPPORT_TOUCH) return Hammer.MouseInput;\n          return Hammer.TouchMouseInput;\n        })();\n\n        hammer = new Hammer(element, {\n          touchAction: 'pan-x pan-y', // allow scroll in every direction\n          inputClass,\n        });\n\n        hammer.get('pinch').set({ enable: true, pointers: 2, threshold: 0.1 });\n\n        hammer.on('pinchstart', pinchStart);\n        hammer.on('pinchmove', pinchMove);\n        hammer.on('pinchend', pinchEnd);\n      } catch (error) {\n        console.warn('Failed to load HammerJS:', error);\n      }\n    };\n\n    setupHammer();\n\n    return () => {\n      hammer?.destroy();\n      resetTransform();\n    };\n  }, [viewportProvides, zoomProvides]);\n\n  return { elementRef };\n}\n","import { useEffect, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\nimport { useZoomCapability } from '../hooks/use-zoom';\n\ninterface MarqueeZoomProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nexport const MarqueeZoom = ({\n  pageIndex,\n  scale,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  const { provides: zoomPlugin } = useZoomCapability();\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  useEffect(() => {\n    if (!zoomPlugin) return;\n    return zoomPlugin.registerMarqueeOnPage({\n      pageIndex,\n      scale,\n      callback: {\n        onPreview: setRect,\n      },\n    });\n  }, [zoomPlugin, pageIndex, scale]);\n\n  if (!rect) return null;\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none',\n        left: rect.origin.x * scale,\n        top: rect.origin.y * scale,\n        width: rect.size.width * scale,\n        height: rect.size.height * scale,\n        border: `1px solid ${stroke}`,\n        background: fill,\n        boxSizing: 'border-box',\n      }}\n      className={className}\n    />\n  );\n};\n","import { ReactNode, HTMLAttributes, CSSProperties } from '@framework';\n\nimport { usePinch } from '../hooks';\n\ntype PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  children: ReactNode;\n  style?: CSSProperties;\n};\n\nexport function PinchWrapper({ children, style, ...props }: PinchWrapperProps) {\n  const { elementRef } = usePinch();\n\n  return (\n    <div\n      ref={elementRef}\n      {...props}\n      style={{\n        ...style,\n        display: 'block',\n        width: 'fit-content',\n        overflow: 'visible',\n        boxSizing: 'border-box',\n        margin: '0px auto',\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["useZoomCapability","useCapability","ZoomPlugin","id","usePinch","provides","viewportProvides","zoomProvides","elementRef","useRef","useEffect","element","current","window","hammer","initialZoom","lastCenter","x","y","resetTransform","style","transform","transformOrigin","pinchStart","e","getState","currentZoomLevel","contRect","getBoundingRect","center","origin","innerRect","getBoundingClientRect","left","top","_a","srcEvent","cancelable","preventDefault","stopPropagation","pinchMove","scale","pinchEnd","delta","requestZoomBy","vx","vy","async","Hammer","Promise","resolve","then","require","n","default","inputClass","SUPPORT_TOUCH","navigator","maxTouchPoints","test","userAgent","TouchInput","TouchMouseInput","MouseInput","touchAction","get","set","enable","pointers","threshold","on","error","console","warn","setupHammer","destroy","pageIndex","className","stroke","fill","zoomPlugin","rect","setRect","useState","registerMarqueeOnPage","callback","onPreview","jsxRuntime","jsx","position","pointerEvents","width","size","height","border","background","boxSizing","children","props","ref","display","overflow","margin","state","setState","initialState","onStateChange","action","usePlugin"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-zoom.ts","../../src/shared/utils/pinch-zoom-logic.ts","../../src/shared/hooks/use-pinch-zoom.ts","../../src/shared/components/marquee-zoom.tsx","../../src/shared/components/pinch-wrapper.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { initialState, ZoomPlugin, ZoomState } from '@embedpdf/plugin-zoom';\nimport { useEffect, useState } from '@framework';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\nexport const useZoom = () => {\n  const { provides } = useZoomCapability();\n  const [state, setState] = useState<ZoomState>(initialState);\n\n  useEffect(() => {\n    return provides?.onStateChange((action) => {\n      setState(action);\n    });\n  }, [provides]);\n\n  return {\n    state,\n    provides,\n  };\n};\n","import type { ViewportCapability } from '@embedpdf/plugin-viewport';\nimport type { ZoomCapability, ZoomState } from '@embedpdf/plugin-zoom';\n\nexport interface PinchZoomDeps {\n  element: HTMLDivElement;\n  viewportProvides: ViewportCapability;\n  zoomProvides: ZoomCapability;\n}\n\nexport function setupPinchZoom({ element, viewportProvides, zoomProvides }: PinchZoomDeps) {\n  // Check if we're on the client side\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  let hammer: any | undefined;\n  let initialZoom = 0; // numeric scale at pinchstart\n  let lastCenter = { x: 0, y: 0 };\n\n  const getState = (): ZoomState => zoomProvides.getState();\n\n  const updateTransform = (scale: number) => {\n    // 1 → no scale; we only scale *relatively* to the start\n    element.style.transform = `scale(${scale})`;\n  };\n\n  const resetTransform = () => {\n    element.style.transform = 'none';\n    element.style.transformOrigin = '0 0';\n  };\n\n  const pinchStart = (e: HammerInput) => {\n    initialZoom = getState().currentZoomLevel;\n\n    const contRect = viewportProvides.getBoundingRect();\n\n    lastCenter = {\n      x: e.center.x - contRect.origin.x,\n      y: e.center.y - contRect.origin.y,\n    };\n\n    // put the transform-origin under the fingers so the preview feels right\n    const innerRect = element.getBoundingClientRect();\n    element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;\n\n    // stop the browser's own pinch-zoom\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchMove = (e: HammerInput) => {\n    updateTransform(e.scale); // *only* CSS, no real zoom yet\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchEnd = (e: HammerInput) => {\n    // translate the relative hammer scale into a delta for requestZoomBy\n    const delta = (e.scale - 1) * initialZoom;\n    zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });\n\n    resetTransform();\n    initialZoom = 0;\n  };\n\n  // Async Hammer setup (internal)\n  const setupHammer = async () => {\n    try {\n      const Hammer = (await import('hammerjs')).default;\n\n      /* ------------------------------------------------------------------ */\n      /* Hammer setup                                                        */\n      /* ------------------------------------------------------------------ */\n      const inputClass = (() => {\n        const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;\n        const SUPPORT_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n        const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);\n        if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;\n        if (!SUPPORT_TOUCH) return Hammer.MouseInput;\n        return Hammer.TouchMouseInput;\n      })();\n\n      hammer = new Hammer(element, {\n        touchAction: 'pan-x pan-y', // allow scroll in every direction\n        inputClass,\n      });\n\n      hammer.get('pinch').set({ enable: true, pointers: 2, threshold: 0.1 });\n\n      hammer.on('pinchstart', pinchStart);\n      hammer.on('pinchmove', pinchMove);\n      hammer.on('pinchend', pinchEnd);\n    } catch (error) {\n      console.warn('Failed to load HammerJS:', error);\n    }\n  };\n\n  setupHammer(); // Fire and forget\n\n  // Return cleanup immediately\n  return () => {\n    hammer?.destroy();\n    resetTransform();\n  };\n}\n","import { useEffect, useRef } from '@framework';\nimport { useCapability } from '@embedpdf/core/@framework';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nimport { setupPinchZoom } from '../utils/pinch-zoom-logic';\nimport { useZoomCapability } from './use-zoom';\n\nexport function usePinch() {\n  const { provides: viewportProvides } = useCapability<ViewportPlugin>('viewport');\n  const { provides: zoomProvides } = useZoomCapability();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !viewportProvides || !zoomProvides) {\n      return;\n    }\n\n    return setupPinchZoom({ element, viewportProvides, zoomProvides });\n  }, [viewportProvides, zoomProvides]);\n\n  return { elementRef };\n}\n","import { useEffect, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\nimport { useZoomCapability } from '../hooks/use-zoom';\n\ninterface MarqueeZoomProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nexport const MarqueeZoom = ({\n  pageIndex,\n  scale,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  const { provides: zoomPlugin } = useZoomCapability();\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  useEffect(() => {\n    if (!zoomPlugin) return;\n    return zoomPlugin.registerMarqueeOnPage({\n      pageIndex,\n      scale,\n      callback: {\n        onPreview: setRect,\n      },\n    });\n  }, [zoomPlugin, pageIndex, scale]);\n\n  if (!rect) return null;\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none',\n        left: rect.origin.x * scale,\n        top: rect.origin.y * scale,\n        width: rect.size.width * scale,\n        height: rect.size.height * scale,\n        border: `1px solid ${stroke}`,\n        background: fill,\n        boxSizing: 'border-box',\n      }}\n      className={className}\n    />\n  );\n};\n","import { ReactNode, HTMLAttributes, CSSProperties } from '@framework';\n\nimport { usePinch } from '../hooks';\n\ntype PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  children: ReactNode;\n  style?: CSSProperties;\n};\n\nexport function PinchWrapper({ children, style, ...props }: PinchWrapperProps) {\n  const { elementRef } = usePinch();\n\n  return (\n    <div\n      ref={elementRef}\n      {...props}\n      style={{\n        ...style,\n        display: 'block',\n        width: 'fit-content',\n        overflow: 'visible',\n        boxSizing: 'border-box',\n        margin: '0px auto',\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["useZoomCapability","useCapability","ZoomPlugin","id","setupPinchZoom","element","viewportProvides","zoomProvides","window","hammer","initialZoom","lastCenter","x","y","resetTransform","style","transform","transformOrigin","pinchStart","e","getState","currentZoomLevel","contRect","getBoundingRect","center","origin","innerRect","getBoundingClientRect","left","top","_a","srcEvent","cancelable","preventDefault","stopPropagation","pinchMove","scale","pinchEnd","delta","requestZoomBy","vx","vy","async","Hammer","Promise","resolve","then","require","n","default","inputClass","SUPPORT_TOUCH","navigator","maxTouchPoints","test","userAgent","TouchInput","TouchMouseInput","MouseInput","touchAction","get","set","enable","pointers","threshold","on","error","console","warn","setupHammer","destroy","usePinch","provides","elementRef","useRef","useEffect","current","pageIndex","className","stroke","fill","zoomPlugin","rect","setRect","useState","registerMarqueeOnPage","callback","onPreview","jsxRuntime","jsx","position","pointerEvents","width","size","height","border","background","boxSizing","children","props","ref","display","overflow","margin","state","setState","initialState","onStateChange","action","usePlugin"],"mappings":"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"}

package/dist/preact/index.js

@@ -1,5 +1,6 @@
 import { useCapability, usePlugin } from "@embedpdf/core/preact";
 import { ZoomPlugin, initialState } from "@embedpdf/plugin-zoom";
+export * from "@embedpdf/plugin-zoom";
 import "preact";
 import { useState, useEffect, useRef } from "preact/hooks";
 import { jsx } from "preact/jsx-runtime";
@@ -18,6 +19,81 @@ const useZoom = () => {
     provides
   };
 };
+function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
+  if (typeof window === "undefined") {
+    return () => {
+    };
+  }
+  let hammer;
+  let initialZoom = 0;
+  let lastCenter = { x: 0, y: 0 };
+  const getState = () => zoomProvides.getState();
+  const updateTransform = (scale) => {
+    element.style.transform = `scale(${scale})`;
+  };
+  const resetTransform = () => {
+    element.style.transform = "none";
+    element.style.transformOrigin = "0 0";
+  };
+  const pinchStart = (e) => {
+    var _a;
+    initialZoom = getState().currentZoomLevel;
+    const contRect = viewportProvides.getBoundingRect();
+    lastCenter = {
+      x: e.center.x - contRect.origin.x,
+      y: e.center.y - contRect.origin.y
+    };
+    const innerRect = element.getBoundingClientRect();
+    element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;
+    if ((_a = e.srcEvent) == null ? void 0 : _a.cancelable) {
+      e.srcEvent.preventDefault();
+      e.srcEvent.stopPropagation();
+    }
+  };
+  const pinchMove = (e) => {
+    var _a;
+    updateTransform(e.scale);
+    if ((_a = e.srcEvent) == null ? void 0 : _a.cancelable) {
+      e.srcEvent.preventDefault();
+      e.srcEvent.stopPropagation();
+    }
+  };
+  const pinchEnd = (e) => {
+    const delta = (e.scale - 1) * initialZoom;
+    zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });
+    resetTransform();
+    initialZoom = 0;
+  };
+  const setupHammer = async () => {
+    try {
+      const Hammer = (await import("../hammer-e1aXHboh.js").then((n) => n.h)).default;
+      const inputClass = (() => {
+        const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
+        const SUPPORT_TOUCH = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+        const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);
+        if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;
+        if (!SUPPORT_TOUCH) return Hammer.MouseInput;
+        return Hammer.TouchMouseInput;
+      })();
+      hammer = new Hammer(element, {
+        touchAction: "pan-x pan-y",
+        // allow scroll in every direction
+        inputClass
+      });
+      hammer.get("pinch").set({ enable: true, pointers: 2, threshold: 0.1 });
+      hammer.on("pinchstart", pinchStart);
+      hammer.on("pinchmove", pinchMove);
+      hammer.on("pinchend", pinchEnd);
+    } catch (error) {
+      console.warn("Failed to load HammerJS:", error);
+    }
+  };
+  setupHammer();
+  return () => {
+    hammer == null ? void 0 : hammer.destroy();
+    resetTransform();
+  };
+}
 function usePinch() {
   const { provides: viewportProvides } = useCapability("viewport");
   const { provides: zoomProvides } = useZoomCapability();
@@ -27,78 +103,7 @@ function usePinch() {
     if (!element || !viewportProvides || !zoomProvides) {
       return;
     }
-    if (typeof window === "undefined") {
-      return;
-    }
-    let hammer;
-    let initialZoom = 0;
-    let lastCenter = { x: 0, y: 0 };
-    const getState = () => zoomProvides.getState();
-    const updateTransform = (scale) => {
-      element.style.transform = `scale(${scale})`;
-    };
-    const resetTransform = () => {
-      element.style.transform = "none";
-      element.style.transformOrigin = "0 0";
-    };
-    const pinchStart = (e) => {
-      var _a;
-      initialZoom = getState().currentZoomLevel;
-      const contRect = viewportProvides.getBoundingRect();
-      lastCenter = {
-        x: e.center.x - contRect.origin.x,
-        y: e.center.y - contRect.origin.y
-      };
-      const innerRect = element.getBoundingClientRect();
-      element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;
-      if ((_a = e.srcEvent) == null ? void 0 : _a.cancelable) {
-        e.srcEvent.preventDefault();
-        e.srcEvent.stopPropagation();
-      }
-    };
-    const pinchMove = (e) => {
-      var _a;
-      updateTransform(e.scale);
-      if ((_a = e.srcEvent) == null ? void 0 : _a.cancelable) {
-        e.srcEvent.preventDefault();
-        e.srcEvent.stopPropagation();
-      }
-    };
-    const pinchEnd = (e) => {
-      const delta = (e.scale - 1) * initialZoom;
-      zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });
-      resetTransform();
-      initialZoom = 0;
-    };
-    const setupHammer = async () => {
-      try {
-        const Hammer = (await import("../hammer-e1aXHboh.js").then((n) => n.h)).default;
-        const inputClass = (() => {
-          const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
-          const SUPPORT_TOUCH = "ontouchstart" in window || navigator.maxTouchPoints > 0;
-          const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);
-          if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;
-          if (!SUPPORT_TOUCH) return Hammer.MouseInput;
-          return Hammer.TouchMouseInput;
-        })();
-        hammer = new Hammer(element, {
-          touchAction: "pan-x pan-y",
-          // allow scroll in every direction
-          inputClass
-        });
-        hammer.get("pinch").set({ enable: true, pointers: 2, threshold: 0.1 });
-        hammer.on("pinchstart", pinchStart);
-        hammer.on("pinchmove", pinchMove);
-        hammer.on("pinchend", pinchEnd);
-      } catch (error) {
-        console.warn("Failed to load HammerJS:", error);
-      }
-    };
-    setupHammer();
-    return () => {
-      hammer == null ? void 0 : hammer.destroy();
-      resetTransform();
-    };
+    return setupPinchZoom({ element, viewportProvides, zoomProvides });
   }, [viewportProvides, zoomProvides]);
   return { elementRef };
 }

package/dist/preact/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-zoom.ts","../../src/shared/hooks/use-pinch-zoom.ts","../../src/shared/components/pinch-wrapper.tsx","../../src/shared/components/marquee-zoom.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { initialState, ZoomPlugin, ZoomState } from '@embedpdf/plugin-zoom';\nimport { useEffect, useState } from '@framework';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\nexport const useZoom = () => {\n  const { provides } = useZoomCapability();\n  const [state, setState] = useState<ZoomState>(initialState);\n\n  useEffect(() => {\n    return provides?.onStateChange((action) => {\n      setState(action);\n    });\n  }, [provides]);\n\n  return {\n    state,\n    provides,\n  };\n};\n","import { useEffect, useRef } from '@framework';\nimport { useCapability } from '@embedpdf/core/@framework';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\nimport { ZoomState } from '@embedpdf/plugin-zoom';\n\nimport { useZoomCapability } from './use-zoom';\n\nexport function usePinch() {\n  const { provides: viewportProvides } = useCapability<ViewportPlugin>('viewport');\n  const { provides: zoomProvides } = useZoomCapability();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !viewportProvides || !zoomProvides) {\n      return;\n    }\n\n    // Check if we're on the client side\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    let hammer: any | undefined;\n    let initialZoom = 0; // numeric scale at pinchstart\n    let lastCenter = { x: 0, y: 0 };\n\n    const getState = (): ZoomState => zoomProvides.getState();\n\n    const updateTransform = (scale: number) => {\n      // 1 → no scale; we only scale *relatively* to the start\n      element.style.transform = `scale(${scale})`;\n    };\n\n    const resetTransform = () => {\n      element.style.transform = 'none';\n      element.style.transformOrigin = '0 0';\n    };\n\n    const pinchStart = (e: HammerInput) => {\n      initialZoom = getState().currentZoomLevel;\n\n      const contRect = viewportProvides.getBoundingRect();\n\n      lastCenter = {\n        x: e.center.x - contRect.origin.x,\n        y: e.center.y - contRect.origin.y,\n      };\n\n      // put the transform-origin under the fingers so the preview feels right\n      const innerRect = element.getBoundingClientRect();\n      element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;\n\n      // stop the browser’s own pinch-zoom\n      if (e.srcEvent?.cancelable) {\n        e.srcEvent.preventDefault();\n        e.srcEvent.stopPropagation();\n      }\n    };\n\n    const pinchMove = (e: HammerInput) => {\n      updateTransform(e.scale); // *only* CSS, no real zoom yet\n      if (e.srcEvent?.cancelable) {\n        e.srcEvent.preventDefault();\n        e.srcEvent.stopPropagation();\n      }\n    };\n\n    const pinchEnd = (e: HammerInput) => {\n      // translate the relative hammer scale into a delta for requestZoomBy\n      const delta = (e.scale - 1) * initialZoom;\n      zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });\n\n      resetTransform();\n      initialZoom = 0;\n    };\n\n    // Dynamically import and setup Hammer\n    const setupHammer = async () => {\n      try {\n        const Hammer = (await import('hammerjs')).default;\n\n        /* ------------------------------------------------------------------ */\n        /* Hammer setup                                                        */\n        /* ------------------------------------------------------------------ */\n        const inputClass = (() => {\n          const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;\n          const SUPPORT_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n          const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);\n          if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;\n          if (!SUPPORT_TOUCH) return Hammer.MouseInput;\n          return Hammer.TouchMouseInput;\n        })();\n\n        hammer = new Hammer(element, {\n          touchAction: 'pan-x pan-y', // allow scroll in every direction\n          inputClass,\n        });\n\n        hammer.get('pinch').set({ enable: true, pointers: 2, threshold: 0.1 });\n\n        hammer.on('pinchstart', pinchStart);\n        hammer.on('pinchmove', pinchMove);\n        hammer.on('pinchend', pinchEnd);\n      } catch (error) {\n        console.warn('Failed to load HammerJS:', error);\n      }\n    };\n\n    setupHammer();\n\n    return () => {\n      hammer?.destroy();\n      resetTransform();\n    };\n  }, [viewportProvides, zoomProvides]);\n\n  return { elementRef };\n}\n","import { ReactNode, HTMLAttributes, CSSProperties } from '@framework';\n\nimport { usePinch } from '../hooks';\n\ntype PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  children: ReactNode;\n  style?: CSSProperties;\n};\n\nexport function PinchWrapper({ children, style, ...props }: PinchWrapperProps) {\n  const { elementRef } = usePinch();\n\n  return (\n    <div\n      ref={elementRef}\n      {...props}\n      style={{\n        ...style,\n        display: 'block',\n        width: 'fit-content',\n        overflow: 'visible',\n        boxSizing: 'border-box',\n        margin: '0px auto',\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n","import { useEffect, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\nimport { useZoomCapability } from '../hooks/use-zoom';\n\ninterface MarqueeZoomProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nexport const MarqueeZoom = ({\n  pageIndex,\n  scale,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  const { provides: zoomPlugin } = useZoomCapability();\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  useEffect(() => {\n    if (!zoomPlugin) return;\n    return zoomPlugin.registerMarqueeOnPage({\n      pageIndex,\n      scale,\n      callback: {\n        onPreview: setRect,\n      },\n    });\n  }, [zoomPlugin, pageIndex, scale]);\n\n  if (!rect) return null;\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none',\n        left: rect.origin.x * scale,\n        top: rect.origin.y * scale,\n        width: rect.size.width * scale,\n        height: rect.size.height * scale,\n        border: `1px solid ${stroke}`,\n        background: fill,\n        boxSizing: 'border-box',\n      }}\n      className={className}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-zoom.ts","../../src/shared/utils/pinch-zoom-logic.ts","../../src/shared/hooks/use-pinch-zoom.ts","../../src/shared/components/pinch-wrapper.tsx","../../src/shared/components/marquee-zoom.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { initialState, ZoomPlugin, ZoomState } from '@embedpdf/plugin-zoom';\nimport { useEffect, useState } from '@framework';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\nexport const useZoom = () => {\n  const { provides } = useZoomCapability();\n  const [state, setState] = useState<ZoomState>(initialState);\n\n  useEffect(() => {\n    return provides?.onStateChange((action) => {\n      setState(action);\n    });\n  }, [provides]);\n\n  return {\n    state,\n    provides,\n  };\n};\n","import type { ViewportCapability } from '@embedpdf/plugin-viewport';\nimport type { ZoomCapability, ZoomState } from '@embedpdf/plugin-zoom';\n\nexport interface PinchZoomDeps {\n  element: HTMLDivElement;\n  viewportProvides: ViewportCapability;\n  zoomProvides: ZoomCapability;\n}\n\nexport function setupPinchZoom({ element, viewportProvides, zoomProvides }: PinchZoomDeps) {\n  // Check if we're on the client side\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  let hammer: any | undefined;\n  let initialZoom = 0; // numeric scale at pinchstart\n  let lastCenter = { x: 0, y: 0 };\n\n  const getState = (): ZoomState => zoomProvides.getState();\n\n  const updateTransform = (scale: number) => {\n    // 1 → no scale; we only scale *relatively* to the start\n    element.style.transform = `scale(${scale})`;\n  };\n\n  const resetTransform = () => {\n    element.style.transform = 'none';\n    element.style.transformOrigin = '0 0';\n  };\n\n  const pinchStart = (e: HammerInput) => {\n    initialZoom = getState().currentZoomLevel;\n\n    const contRect = viewportProvides.getBoundingRect();\n\n    lastCenter = {\n      x: e.center.x - contRect.origin.x,\n      y: e.center.y - contRect.origin.y,\n    };\n\n    // put the transform-origin under the fingers so the preview feels right\n    const innerRect = element.getBoundingClientRect();\n    element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;\n\n    // stop the browser's own pinch-zoom\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchMove = (e: HammerInput) => {\n    updateTransform(e.scale); // *only* CSS, no real zoom yet\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchEnd = (e: HammerInput) => {\n    // translate the relative hammer scale into a delta for requestZoomBy\n    const delta = (e.scale - 1) * initialZoom;\n    zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });\n\n    resetTransform();\n    initialZoom = 0;\n  };\n\n  // Async Hammer setup (internal)\n  const setupHammer = async () => {\n    try {\n      const Hammer = (await import('hammerjs')).default;\n\n      /* ------------------------------------------------------------------ */\n      /* Hammer setup                                                        */\n      /* ------------------------------------------------------------------ */\n      const inputClass = (() => {\n        const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;\n        const SUPPORT_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n        const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);\n        if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;\n        if (!SUPPORT_TOUCH) return Hammer.MouseInput;\n        return Hammer.TouchMouseInput;\n      })();\n\n      hammer = new Hammer(element, {\n        touchAction: 'pan-x pan-y', // allow scroll in every direction\n        inputClass,\n      });\n\n      hammer.get('pinch').set({ enable: true, pointers: 2, threshold: 0.1 });\n\n      hammer.on('pinchstart', pinchStart);\n      hammer.on('pinchmove', pinchMove);\n      hammer.on('pinchend', pinchEnd);\n    } catch (error) {\n      console.warn('Failed to load HammerJS:', error);\n    }\n  };\n\n  setupHammer(); // Fire and forget\n\n  // Return cleanup immediately\n  return () => {\n    hammer?.destroy();\n    resetTransform();\n  };\n}\n","import { useEffect, useRef } from '@framework';\nimport { useCapability } from '@embedpdf/core/@framework';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nimport { setupPinchZoom } from '../utils/pinch-zoom-logic';\nimport { useZoomCapability } from './use-zoom';\n\nexport function usePinch() {\n  const { provides: viewportProvides } = useCapability<ViewportPlugin>('viewport');\n  const { provides: zoomProvides } = useZoomCapability();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !viewportProvides || !zoomProvides) {\n      return;\n    }\n\n    return setupPinchZoom({ element, viewportProvides, zoomProvides });\n  }, [viewportProvides, zoomProvides]);\n\n  return { elementRef };\n}\n","import { ReactNode, HTMLAttributes, CSSProperties } from '@framework';\n\nimport { usePinch } from '../hooks';\n\ntype PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  children: ReactNode;\n  style?: CSSProperties;\n};\n\nexport function PinchWrapper({ children, style, ...props }: PinchWrapperProps) {\n  const { elementRef } = usePinch();\n\n  return (\n    <div\n      ref={elementRef}\n      {...props}\n      style={{\n        ...style,\n        display: 'block',\n        width: 'fit-content',\n        overflow: 'visible',\n        boxSizing: 'border-box',\n        margin: '0px auto',\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n","import { useEffect, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\nimport { useZoomCapability } from '../hooks/use-zoom';\n\ninterface MarqueeZoomProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nexport const MarqueeZoom = ({\n  pageIndex,\n  scale,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  const { provides: zoomPlugin } = useZoomCapability();\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  useEffect(() => {\n    if (!zoomPlugin) return;\n    return zoomPlugin.registerMarqueeOnPage({\n      pageIndex,\n      scale,\n      callback: {\n        onPreview: setRect,\n      },\n    });\n  }, [zoomPlugin, pageIndex, scale]);\n\n  if (!rect) return null;\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none',\n        left: rect.origin.x * scale,\n        top: rect.origin.y * scale,\n        width: rect.size.width * scale,\n        height: rect.size.height * scale,\n        border: `1px solid ${stroke}`,\n        background: fill,\n        boxSizing: 'border-box',\n      }}\n      className={className}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/react/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/react"),t=require("@embedpdf/plugin-zoom"),n=require("react"),o=require("react/jsx-runtime"),r=()=>e.useCapability(t.ZoomPlugin.id);function i(){const{provides:t}=e.useCapability("viewport"),{provides:o}=r(),i=n.useRef(null);return n.useEffect((()=>{const e=i.current;if(!e||!t||!o)return;if("undefined"==typeof window)return;let n,r=0,s={x:0,y:0};const a=()=>{e.style.transform="none",e.style.transformOrigin="0 0"},l=n=>{var i;r=o.getState().currentZoomLevel;const a=t.getBoundingRect();s={x:n.center.x-a.origin.x,y:n.center.y-a.origin.y};const l=e.getBoundingClientRect();e.style.transformOrigin=`${n.center.x-l.left}px ${n.center.y-l.top}px`,(null==(i=n.srcEvent)?void 0:i.cancelable)&&(n.srcEvent.preventDefault(),n.srcEvent.stopPropagation())},c=t=>{var n,o;o=t.scale,e.style.transform=`scale(${o})`,(null==(n=t.srcEvent)?void 0:n.cancelable)&&(t.srcEvent.preventDefault(),t.srcEvent.stopPropagation())},u=e=>{const t=(e.scale-1)*r;o.requestZoomBy(t,{vx:s.x,vy:s.y}),a(),r=0};return(async()=>{try{const t=(await Promise.resolve().then((()=>require("../hammer-Bs-QCG8V.cjs"))).then((e=>e.hammer))).default,o=(()=>{const e="ontouchstart"in window||navigator.maxTouchPoints>0;return e&&/mobile|tablet|ip(ad|hone|od)|android/i.test(navigator.userAgent)?t.TouchInput:e?t.TouchMouseInput:t.MouseInput})();n=new t(e,{touchAction:"pan-x pan-y",inputClass:o}),n.get("pinch").set({enable:!0,pointers:2,threshold:.1}),n.on("pinchstart",l),n.on("pinchmove",c),n.on("pinchend",u)}catch(t){console.warn("Failed to load HammerJS:",t)}})(),()=>{null==n||n.destroy(),a()}}),[t,o]),{elementRef:i}}exports.MarqueeZoom=({pageIndex:e,scale:t,className:i,stroke:s="rgba(33,150,243,0.8)",fill:a="rgba(33,150,243,0.15)"})=>{const{provides:l}=r(),[c,u]=n.useState(null);return n.useEffect((()=>{if(l)return l.registerMarqueeOnPage({pageIndex:e,scale:t,callback:{onPreview:u}})}),[l,e,t]),c?o.jsx("div",{style:{position:"absolute",pointerEvents:"none",left:c.origin.x*t,top:c.origin.y*t,width:c.size.width*t,height:c.size.height*t,border:`1px solid ${s}`,background:a,boxSizing:"border-box"},className:i}):null},exports.PinchWrapper=function({children:e,style:t,...n}){const{elementRef:r}=i();return o.jsx("div",{ref:r,...n,style:{...t,display:"block",width:"fit-content",overflow:"visible",boxSizing:"border-box",margin:"0px auto"},children:e})},exports.usePinch=i,exports.useZoom=()=>{const{provides:e}=r(),[o,i]=n.useState(t.initialState);return n.useEffect((()=>null==e?void 0:e.onStateChange((e=>{i(e)}))),[e]),{state:o,provides:e}},exports.useZoomCapability=r,exports.useZoomPlugin=()=>e.usePlugin(t.ZoomPlugin.id);
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/react"),t=require("@embedpdf/plugin-zoom"),o=require("react"),n=require("react/jsx-runtime"),r=()=>e.useCapability(t.ZoomPlugin.id);function i({element:e,viewportProvides:t,zoomProvides:o}){if("undefined"==typeof window)return()=>{};let n,r=0,i={x:0,y:0};const s=()=>{e.style.transform="none",e.style.transformOrigin="0 0"},a=n=>{var s;r=o.getState().currentZoomLevel;const a=t.getBoundingRect();i={x:n.center.x-a.origin.x,y:n.center.y-a.origin.y};const l=e.getBoundingClientRect();e.style.transformOrigin=`${n.center.x-l.left}px ${n.center.y-l.top}px`,(null==(s=n.srcEvent)?void 0:s.cancelable)&&(n.srcEvent.preventDefault(),n.srcEvent.stopPropagation())},l=t=>{var o,n;n=t.scale,e.style.transform=`scale(${n})`,(null==(o=t.srcEvent)?void 0:o.cancelable)&&(t.srcEvent.preventDefault(),t.srcEvent.stopPropagation())},c=e=>{const t=(e.scale-1)*r;o.requestZoomBy(t,{vx:i.x,vy:i.y}),s(),r=0};return(async()=>{try{const t=(await Promise.resolve().then((()=>require("../hammer-Bs-QCG8V.cjs"))).then((e=>e.hammer))).default,o=(()=>{const e="ontouchstart"in window||navigator.maxTouchPoints>0;return e&&/mobile|tablet|ip(ad|hone|od)|android/i.test(navigator.userAgent)?t.TouchInput:e?t.TouchMouseInput:t.MouseInput})();n=new t(e,{touchAction:"pan-x pan-y",inputClass:o}),n.get("pinch").set({enable:!0,pointers:2,threshold:.1}),n.on("pinchstart",a),n.on("pinchmove",l),n.on("pinchend",c)}catch(t){console.warn("Failed to load HammerJS:",t)}})(),()=>{null==n||n.destroy(),s()}}function s(){const{provides:t}=e.useCapability("viewport"),{provides:n}=r(),s=o.useRef(null);return o.useEffect((()=>{const e=s.current;if(e&&t&&n)return i({element:e,viewportProvides:t,zoomProvides:n})}),[t,n]),{elementRef:s}}exports.MarqueeZoom=({pageIndex:e,scale:t,className:i,stroke:s="rgba(33,150,243,0.8)",fill:a="rgba(33,150,243,0.15)"})=>{const{provides:l}=r(),[c,u]=o.useState(null);return o.useEffect((()=>{if(l)return l.registerMarqueeOnPage({pageIndex:e,scale:t,callback:{onPreview:u}})}),[l,e,t]),c?n.jsx("div",{style:{position:"absolute",pointerEvents:"none",left:c.origin.x*t,top:c.origin.y*t,width:c.size.width*t,height:c.size.height*t,border:`1px solid ${s}`,background:a,boxSizing:"border-box"},className:i}):null},exports.PinchWrapper=function({children:e,style:t,...o}){const{elementRef:r}=s();return n.jsx("div",{ref:r,...o,style:{...t,display:"block",width:"fit-content",overflow:"visible",boxSizing:"border-box",margin:"0px auto"},children:e})},exports.usePinch=s,exports.useZoom=()=>{const{provides:e}=r(),[n,i]=o.useState(t.initialState);return o.useEffect((()=>null==e?void 0:e.onStateChange((e=>{i(e)}))),[e]),{state:n,provides:e}},exports.useZoomCapability=r,exports.useZoomPlugin=()=>e.usePlugin(t.ZoomPlugin.id),Object.keys(t).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})}));
 //# sourceMappingURL=index.cjs.map

package/dist/react/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-zoom.ts","../../src/shared/hooks/use-pinch-zoom.ts","../../src/shared/components/marquee-zoom.tsx","../../src/shared/components/pinch-wrapper.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { initialState, ZoomPlugin, ZoomState } from '@embedpdf/plugin-zoom';\nimport { useEffect, useState } from '@framework';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\nexport const useZoom = () => {\n  const { provides } = useZoomCapability();\n  const [state, setState] = useState<ZoomState>(initialState);\n\n  useEffect(() => {\n    return provides?.onStateChange((action) => {\n      setState(action);\n    });\n  }, [provides]);\n\n  return {\n    state,\n    provides,\n  };\n};\n","import { useEffect, useRef } from '@framework';\nimport { useCapability } from '@embedpdf/core/@framework';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\nimport { ZoomState } from '@embedpdf/plugin-zoom';\n\nimport { useZoomCapability } from './use-zoom';\n\nexport function usePinch() {\n  const { provides: viewportProvides } = useCapability<ViewportPlugin>('viewport');\n  const { provides: zoomProvides } = useZoomCapability();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !viewportProvides || !zoomProvides) {\n      return;\n    }\n\n    // Check if we're on the client side\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    let hammer: any | undefined;\n    let initialZoom = 0; // numeric scale at pinchstart\n    let lastCenter = { x: 0, y: 0 };\n\n    const getState = (): ZoomState => zoomProvides.getState();\n\n    const updateTransform = (scale: number) => {\n      // 1 → no scale; we only scale *relatively* to the start\n      element.style.transform = `scale(${scale})`;\n    };\n\n    const resetTransform = () => {\n      element.style.transform = 'none';\n      element.style.transformOrigin = '0 0';\n    };\n\n    const pinchStart = (e: HammerInput) => {\n      initialZoom = getState().currentZoomLevel;\n\n      const contRect = viewportProvides.getBoundingRect();\n\n      lastCenter = {\n        x: e.center.x - contRect.origin.x,\n        y: e.center.y - contRect.origin.y,\n      };\n\n      // put the transform-origin under the fingers so the preview feels right\n      const innerRect = element.getBoundingClientRect();\n      element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;\n\n      // stop the browser’s own pinch-zoom\n      if (e.srcEvent?.cancelable) {\n        e.srcEvent.preventDefault();\n        e.srcEvent.stopPropagation();\n      }\n    };\n\n    const pinchMove = (e: HammerInput) => {\n      updateTransform(e.scale); // *only* CSS, no real zoom yet\n      if (e.srcEvent?.cancelable) {\n        e.srcEvent.preventDefault();\n        e.srcEvent.stopPropagation();\n      }\n    };\n\n    const pinchEnd = (e: HammerInput) => {\n      // translate the relative hammer scale into a delta for requestZoomBy\n      const delta = (e.scale - 1) * initialZoom;\n      zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });\n\n      resetTransform();\n      initialZoom = 0;\n    };\n\n    // Dynamically import and setup Hammer\n    const setupHammer = async () => {\n      try {\n        const Hammer = (await import('hammerjs')).default;\n\n        /* ------------------------------------------------------------------ */\n        /* Hammer setup                                                        */\n        /* ------------------------------------------------------------------ */\n        const inputClass = (() => {\n          const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;\n          const SUPPORT_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n          const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);\n          if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;\n          if (!SUPPORT_TOUCH) return Hammer.MouseInput;\n          return Hammer.TouchMouseInput;\n        })();\n\n        hammer = new Hammer(element, {\n          touchAction: 'pan-x pan-y', // allow scroll in every direction\n          inputClass,\n        });\n\n        hammer.get('pinch').set({ enable: true, pointers: 2, threshold: 0.1 });\n\n        hammer.on('pinchstart', pinchStart);\n        hammer.on('pinchmove', pinchMove);\n        hammer.on('pinchend', pinchEnd);\n      } catch (error) {\n        console.warn('Failed to load HammerJS:', error);\n      }\n    };\n\n    setupHammer();\n\n    return () => {\n      hammer?.destroy();\n      resetTransform();\n    };\n  }, [viewportProvides, zoomProvides]);\n\n  return { elementRef };\n}\n","import { useEffect, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\nimport { useZoomCapability } from '../hooks/use-zoom';\n\ninterface MarqueeZoomProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nexport const MarqueeZoom = ({\n  pageIndex,\n  scale,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  const { provides: zoomPlugin } = useZoomCapability();\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  useEffect(() => {\n    if (!zoomPlugin) return;\n    return zoomPlugin.registerMarqueeOnPage({\n      pageIndex,\n      scale,\n      callback: {\n        onPreview: setRect,\n      },\n    });\n  }, [zoomPlugin, pageIndex, scale]);\n\n  if (!rect) return null;\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none',\n        left: rect.origin.x * scale,\n        top: rect.origin.y * scale,\n        width: rect.size.width * scale,\n        height: rect.size.height * scale,\n        border: `1px solid ${stroke}`,\n        background: fill,\n        boxSizing: 'border-box',\n      }}\n      className={className}\n    />\n  );\n};\n","import { ReactNode, HTMLAttributes, CSSProperties } from '@framework';\n\nimport { usePinch } from '../hooks';\n\ntype PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  children: ReactNode;\n  style?: CSSProperties;\n};\n\nexport function PinchWrapper({ children, style, ...props }: PinchWrapperProps) {\n  const { elementRef } = usePinch();\n\n  return (\n    <div\n      ref={elementRef}\n      {...props}\n      style={{\n        ...style,\n        display: 'block',\n        width: 'fit-content',\n        overflow: 'visible',\n        boxSizing: 'border-box',\n        margin: '0px auto',\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["useZoomCapability","useCapability","ZoomPlugin","id","usePinch","provides","viewportProvides","zoomProvides","elementRef","useRef","useEffect","element","current","window","hammer","initialZoom","lastCenter","x","y","resetTransform","style","transform","transformOrigin","pinchStart","e","getState","currentZoomLevel","contRect","getBoundingRect","center","origin","innerRect","getBoundingClientRect","left","top","_a","srcEvent","cancelable","preventDefault","stopPropagation","pinchMove","scale","pinchEnd","delta","requestZoomBy","vx","vy","async","Hammer","Promise","resolve","then","require","n","default","inputClass","SUPPORT_TOUCH","navigator","maxTouchPoints","test","userAgent","TouchInput","TouchMouseInput","MouseInput","touchAction","get","set","enable","pointers","threshold","on","error","console","warn","setupHammer","destroy","pageIndex","className","stroke","fill","zoomPlugin","rect","setRect","useState","registerMarqueeOnPage","callback","onPreview","jsxRuntime","jsx","position","pointerEvents","width","size","height","border","background","boxSizing","children","props","ref","display","overflow","margin","state","setState","initialState","onStateChange","action","usePlugin"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-zoom.ts","../../src/shared/utils/pinch-zoom-logic.ts","../../src/shared/hooks/use-pinch-zoom.ts","../../src/shared/components/marquee-zoom.tsx","../../src/shared/components/pinch-wrapper.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { initialState, ZoomPlugin, ZoomState } from '@embedpdf/plugin-zoom';\nimport { useEffect, useState } from '@framework';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\nexport const useZoom = () => {\n  const { provides } = useZoomCapability();\n  const [state, setState] = useState<ZoomState>(initialState);\n\n  useEffect(() => {\n    return provides?.onStateChange((action) => {\n      setState(action);\n    });\n  }, [provides]);\n\n  return {\n    state,\n    provides,\n  };\n};\n","import type { ViewportCapability } from '@embedpdf/plugin-viewport';\nimport type { ZoomCapability, ZoomState } from '@embedpdf/plugin-zoom';\n\nexport interface PinchZoomDeps {\n  element: HTMLDivElement;\n  viewportProvides: ViewportCapability;\n  zoomProvides: ZoomCapability;\n}\n\nexport function setupPinchZoom({ element, viewportProvides, zoomProvides }: PinchZoomDeps) {\n  // Check if we're on the client side\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  let hammer: any | undefined;\n  let initialZoom = 0; // numeric scale at pinchstart\n  let lastCenter = { x: 0, y: 0 };\n\n  const getState = (): ZoomState => zoomProvides.getState();\n\n  const updateTransform = (scale: number) => {\n    // 1 → no scale; we only scale *relatively* to the start\n    element.style.transform = `scale(${scale})`;\n  };\n\n  const resetTransform = () => {\n    element.style.transform = 'none';\n    element.style.transformOrigin = '0 0';\n  };\n\n  const pinchStart = (e: HammerInput) => {\n    initialZoom = getState().currentZoomLevel;\n\n    const contRect = viewportProvides.getBoundingRect();\n\n    lastCenter = {\n      x: e.center.x - contRect.origin.x,\n      y: e.center.y - contRect.origin.y,\n    };\n\n    // put the transform-origin under the fingers so the preview feels right\n    const innerRect = element.getBoundingClientRect();\n    element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;\n\n    // stop the browser's own pinch-zoom\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchMove = (e: HammerInput) => {\n    updateTransform(e.scale); // *only* CSS, no real zoom yet\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchEnd = (e: HammerInput) => {\n    // translate the relative hammer scale into a delta for requestZoomBy\n    const delta = (e.scale - 1) * initialZoom;\n    zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });\n\n    resetTransform();\n    initialZoom = 0;\n  };\n\n  // Async Hammer setup (internal)\n  const setupHammer = async () => {\n    try {\n      const Hammer = (await import('hammerjs')).default;\n\n      /* ------------------------------------------------------------------ */\n      /* Hammer setup                                                        */\n      /* ------------------------------------------------------------------ */\n      const inputClass = (() => {\n        const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;\n        const SUPPORT_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n        const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);\n        if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;\n        if (!SUPPORT_TOUCH) return Hammer.MouseInput;\n        return Hammer.TouchMouseInput;\n      })();\n\n      hammer = new Hammer(element, {\n        touchAction: 'pan-x pan-y', // allow scroll in every direction\n        inputClass,\n      });\n\n      hammer.get('pinch').set({ enable: true, pointers: 2, threshold: 0.1 });\n\n      hammer.on('pinchstart', pinchStart);\n      hammer.on('pinchmove', pinchMove);\n      hammer.on('pinchend', pinchEnd);\n    } catch (error) {\n      console.warn('Failed to load HammerJS:', error);\n    }\n  };\n\n  setupHammer(); // Fire and forget\n\n  // Return cleanup immediately\n  return () => {\n    hammer?.destroy();\n    resetTransform();\n  };\n}\n","import { useEffect, useRef } from '@framework';\nimport { useCapability } from '@embedpdf/core/@framework';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nimport { setupPinchZoom } from '../utils/pinch-zoom-logic';\nimport { useZoomCapability } from './use-zoom';\n\nexport function usePinch() {\n  const { provides: viewportProvides } = useCapability<ViewportPlugin>('viewport');\n  const { provides: zoomProvides } = useZoomCapability();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !viewportProvides || !zoomProvides) {\n      return;\n    }\n\n    return setupPinchZoom({ element, viewportProvides, zoomProvides });\n  }, [viewportProvides, zoomProvides]);\n\n  return { elementRef };\n}\n","import { useEffect, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\nimport { useZoomCapability } from '../hooks/use-zoom';\n\ninterface MarqueeZoomProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nexport const MarqueeZoom = ({\n  pageIndex,\n  scale,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  const { provides: zoomPlugin } = useZoomCapability();\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  useEffect(() => {\n    if (!zoomPlugin) return;\n    return zoomPlugin.registerMarqueeOnPage({\n      pageIndex,\n      scale,\n      callback: {\n        onPreview: setRect,\n      },\n    });\n  }, [zoomPlugin, pageIndex, scale]);\n\n  if (!rect) return null;\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none',\n        left: rect.origin.x * scale,\n        top: rect.origin.y * scale,\n        width: rect.size.width * scale,\n        height: rect.size.height * scale,\n        border: `1px solid ${stroke}`,\n        background: fill,\n        boxSizing: 'border-box',\n      }}\n      className={className}\n    />\n  );\n};\n","import { ReactNode, HTMLAttributes, CSSProperties } from '@framework';\n\nimport { usePinch } from '../hooks';\n\ntype PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  children: ReactNode;\n  style?: CSSProperties;\n};\n\nexport function PinchWrapper({ children, style, ...props }: PinchWrapperProps) {\n  const { elementRef } = usePinch();\n\n  return (\n    <div\n      ref={elementRef}\n      {...props}\n      style={{\n        ...style,\n        display: 'block',\n        width: 'fit-content',\n        overflow: 'visible',\n        boxSizing: 'border-box',\n        margin: '0px auto',\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["useZoomCapability","useCapability","ZoomPlugin","id","setupPinchZoom","element","viewportProvides","zoomProvides","window","hammer","initialZoom","lastCenter","x","y","resetTransform","style","transform","transformOrigin","pinchStart","e","getState","currentZoomLevel","contRect","getBoundingRect","center","origin","innerRect","getBoundingClientRect","left","top","_a","srcEvent","cancelable","preventDefault","stopPropagation","pinchMove","scale","pinchEnd","delta","requestZoomBy","vx","vy","async","Hammer","Promise","resolve","then","require","n","default","inputClass","SUPPORT_TOUCH","navigator","maxTouchPoints","test","userAgent","TouchInput","TouchMouseInput","MouseInput","touchAction","get","set","enable","pointers","threshold","on","error","console","warn","setupHammer","destroy","usePinch","provides","elementRef","useRef","useEffect","current","pageIndex","className","stroke","fill","zoomPlugin","rect","setRect","useState","registerMarqueeOnPage","callback","onPreview","jsxRuntime","jsx","position","pointerEvents","width","size","height","border","background","boxSizing","children","props","ref","display","overflow","margin","state","setState","initialState","onStateChange","action","usePlugin"],"mappings":"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"}

package/dist/react/index.js

@@ -1,5 +1,6 @@
 import { useCapability, usePlugin } from "@embedpdf/core/react";
 import { ZoomPlugin, initialState } from "@embedpdf/plugin-zoom";
+export * from "@embedpdf/plugin-zoom";
 import { useState, useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 const useZoomCapability = () => useCapability(ZoomPlugin.id);
@@ -17,6 +18,81 @@ const useZoom = () => {
     provides
   };
 };
+function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
+  if (typeof window === "undefined") {
+    return () => {
+    };
+  }
+  let hammer;
+  let initialZoom = 0;
+  let lastCenter = { x: 0, y: 0 };
+  const getState = () => zoomProvides.getState();
+  const updateTransform = (scale) => {
+    element.style.transform = `scale(${scale})`;
+  };
+  const resetTransform = () => {
+    element.style.transform = "none";
+    element.style.transformOrigin = "0 0";
+  };
+  const pinchStart = (e) => {
+    var _a;
+    initialZoom = getState().currentZoomLevel;
+    const contRect = viewportProvides.getBoundingRect();
+    lastCenter = {
+      x: e.center.x - contRect.origin.x,
+      y: e.center.y - contRect.origin.y
+    };
+    const innerRect = element.getBoundingClientRect();
+    element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;
+    if ((_a = e.srcEvent) == null ? void 0 : _a.cancelable) {
+      e.srcEvent.preventDefault();
+      e.srcEvent.stopPropagation();
+    }
+  };
+  const pinchMove = (e) => {
+    var _a;
+    updateTransform(e.scale);
+    if ((_a = e.srcEvent) == null ? void 0 : _a.cancelable) {
+      e.srcEvent.preventDefault();
+      e.srcEvent.stopPropagation();
+    }
+  };
+  const pinchEnd = (e) => {
+    const delta = (e.scale - 1) * initialZoom;
+    zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });
+    resetTransform();
+    initialZoom = 0;
+  };
+  const setupHammer = async () => {
+    try {
+      const Hammer = (await import("../hammer-e1aXHboh.js").then((n) => n.h)).default;
+      const inputClass = (() => {
+        const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
+        const SUPPORT_TOUCH = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+        const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);
+        if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;
+        if (!SUPPORT_TOUCH) return Hammer.MouseInput;
+        return Hammer.TouchMouseInput;
+      })();
+      hammer = new Hammer(element, {
+        touchAction: "pan-x pan-y",
+        // allow scroll in every direction
+        inputClass
+      });
+      hammer.get("pinch").set({ enable: true, pointers: 2, threshold: 0.1 });
+      hammer.on("pinchstart", pinchStart);
+      hammer.on("pinchmove", pinchMove);
+      hammer.on("pinchend", pinchEnd);
+    } catch (error) {
+      console.warn("Failed to load HammerJS:", error);
+    }
+  };
+  setupHammer();
+  return () => {
+    hammer == null ? void 0 : hammer.destroy();
+    resetTransform();
+  };
+}
 function usePinch() {
   const { provides: viewportProvides } = useCapability("viewport");
   const { provides: zoomProvides } = useZoomCapability();
@@ -26,78 +102,7 @@ function usePinch() {
     if (!element || !viewportProvides || !zoomProvides) {
       return;
     }
-    if (typeof window === "undefined") {
-      return;
-    }
-    let hammer;
-    let initialZoom = 0;
-    let lastCenter = { x: 0, y: 0 };
-    const getState = () => zoomProvides.getState();
-    const updateTransform = (scale) => {
-      element.style.transform = `scale(${scale})`;
-    };
-    const resetTransform = () => {
-      element.style.transform = "none";
-      element.style.transformOrigin = "0 0";
-    };
-    const pinchStart = (e) => {
-      var _a;
-      initialZoom = getState().currentZoomLevel;
-      const contRect = viewportProvides.getBoundingRect();
-      lastCenter = {
-        x: e.center.x - contRect.origin.x,
-        y: e.center.y - contRect.origin.y
-      };
-      const innerRect = element.getBoundingClientRect();
-      element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;
-      if ((_a = e.srcEvent) == null ? void 0 : _a.cancelable) {
-        e.srcEvent.preventDefault();
-        e.srcEvent.stopPropagation();
-      }
-    };
-    const pinchMove = (e) => {
-      var _a;
-      updateTransform(e.scale);
-      if ((_a = e.srcEvent) == null ? void 0 : _a.cancelable) {
-        e.srcEvent.preventDefault();
-        e.srcEvent.stopPropagation();
-      }
-    };
-    const pinchEnd = (e) => {
-      const delta = (e.scale - 1) * initialZoom;
-      zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });
-      resetTransform();
-      initialZoom = 0;
-    };
-    const setupHammer = async () => {
-      try {
-        const Hammer = (await import("../hammer-e1aXHboh.js").then((n) => n.h)).default;
-        const inputClass = (() => {
-          const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
-          const SUPPORT_TOUCH = "ontouchstart" in window || navigator.maxTouchPoints > 0;
-          const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);
-          if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;
-          if (!SUPPORT_TOUCH) return Hammer.MouseInput;
-          return Hammer.TouchMouseInput;
-        })();
-        hammer = new Hammer(element, {
-          touchAction: "pan-x pan-y",
-          // allow scroll in every direction
-          inputClass
-        });
-        hammer.get("pinch").set({ enable: true, pointers: 2, threshold: 0.1 });
-        hammer.on("pinchstart", pinchStart);
-        hammer.on("pinchmove", pinchMove);
-        hammer.on("pinchend", pinchEnd);
-      } catch (error) {
-        console.warn("Failed to load HammerJS:", error);
-      }
-    };
-    setupHammer();
-    return () => {
-      hammer == null ? void 0 : hammer.destroy();
-      resetTransform();
-    };
+    return setupPinchZoom({ element, viewportProvides, zoomProvides });
   }, [viewportProvides, zoomProvides]);
   return { elementRef };
 }

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-zoom.ts","../../src/shared/hooks/use-pinch-zoom.ts","../../src/shared/components/pinch-wrapper.tsx","../../src/shared/components/marquee-zoom.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { initialState, ZoomPlugin, ZoomState } from '@embedpdf/plugin-zoom';\nimport { useEffect, useState } from '@framework';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\nexport const useZoom = () => {\n  const { provides } = useZoomCapability();\n  const [state, setState] = useState<ZoomState>(initialState);\n\n  useEffect(() => {\n    return provides?.onStateChange((action) => {\n      setState(action);\n    });\n  }, [provides]);\n\n  return {\n    state,\n    provides,\n  };\n};\n","import { useEffect, useRef } from '@framework';\nimport { useCapability } from '@embedpdf/core/@framework';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\nimport { ZoomState } from '@embedpdf/plugin-zoom';\n\nimport { useZoomCapability } from './use-zoom';\n\nexport function usePinch() {\n  const { provides: viewportProvides } = useCapability<ViewportPlugin>('viewport');\n  const { provides: zoomProvides } = useZoomCapability();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !viewportProvides || !zoomProvides) {\n      return;\n    }\n\n    // Check if we're on the client side\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    let hammer: any | undefined;\n    let initialZoom = 0; // numeric scale at pinchstart\n    let lastCenter = { x: 0, y: 0 };\n\n    const getState = (): ZoomState => zoomProvides.getState();\n\n    const updateTransform = (scale: number) => {\n      // 1 → no scale; we only scale *relatively* to the start\n      element.style.transform = `scale(${scale})`;\n    };\n\n    const resetTransform = () => {\n      element.style.transform = 'none';\n      element.style.transformOrigin = '0 0';\n    };\n\n    const pinchStart = (e: HammerInput) => {\n      initialZoom = getState().currentZoomLevel;\n\n      const contRect = viewportProvides.getBoundingRect();\n\n      lastCenter = {\n        x: e.center.x - contRect.origin.x,\n        y: e.center.y - contRect.origin.y,\n      };\n\n      // put the transform-origin under the fingers so the preview feels right\n      const innerRect = element.getBoundingClientRect();\n      element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;\n\n      // stop the browser’s own pinch-zoom\n      if (e.srcEvent?.cancelable) {\n        e.srcEvent.preventDefault();\n        e.srcEvent.stopPropagation();\n      }\n    };\n\n    const pinchMove = (e: HammerInput) => {\n      updateTransform(e.scale); // *only* CSS, no real zoom yet\n      if (e.srcEvent?.cancelable) {\n        e.srcEvent.preventDefault();\n        e.srcEvent.stopPropagation();\n      }\n    };\n\n    const pinchEnd = (e: HammerInput) => {\n      // translate the relative hammer scale into a delta for requestZoomBy\n      const delta = (e.scale - 1) * initialZoom;\n      zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });\n\n      resetTransform();\n      initialZoom = 0;\n    };\n\n    // Dynamically import and setup Hammer\n    const setupHammer = async () => {\n      try {\n        const Hammer = (await import('hammerjs')).default;\n\n        /* ------------------------------------------------------------------ */\n        /* Hammer setup                                                        */\n        /* ------------------------------------------------------------------ */\n        const inputClass = (() => {\n          const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;\n          const SUPPORT_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n          const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);\n          if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;\n          if (!SUPPORT_TOUCH) return Hammer.MouseInput;\n          return Hammer.TouchMouseInput;\n        })();\n\n        hammer = new Hammer(element, {\n          touchAction: 'pan-x pan-y', // allow scroll in every direction\n          inputClass,\n        });\n\n        hammer.get('pinch').set({ enable: true, pointers: 2, threshold: 0.1 });\n\n        hammer.on('pinchstart', pinchStart);\n        hammer.on('pinchmove', pinchMove);\n        hammer.on('pinchend', pinchEnd);\n      } catch (error) {\n        console.warn('Failed to load HammerJS:', error);\n      }\n    };\n\n    setupHammer();\n\n    return () => {\n      hammer?.destroy();\n      resetTransform();\n    };\n  }, [viewportProvides, zoomProvides]);\n\n  return { elementRef };\n}\n","import { ReactNode, HTMLAttributes, CSSProperties } from '@framework';\n\nimport { usePinch } from '../hooks';\n\ntype PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  children: ReactNode;\n  style?: CSSProperties;\n};\n\nexport function PinchWrapper({ children, style, ...props }: PinchWrapperProps) {\n  const { elementRef } = usePinch();\n\n  return (\n    <div\n      ref={elementRef}\n      {...props}\n      style={{\n        ...style,\n        display: 'block',\n        width: 'fit-content',\n        overflow: 'visible',\n        boxSizing: 'border-box',\n        margin: '0px auto',\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n","import { useEffect, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\nimport { useZoomCapability } from '../hooks/use-zoom';\n\ninterface MarqueeZoomProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nexport const MarqueeZoom = ({\n  pageIndex,\n  scale,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  const { provides: zoomPlugin } = useZoomCapability();\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  useEffect(() => {\n    if (!zoomPlugin) return;\n    return zoomPlugin.registerMarqueeOnPage({\n      pageIndex,\n      scale,\n      callback: {\n        onPreview: setRect,\n      },\n    });\n  }, [zoomPlugin, pageIndex, scale]);\n\n  if (!rect) return null;\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none',\n        left: rect.origin.x * scale,\n        top: rect.origin.y * scale,\n        width: rect.size.width * scale,\n        height: rect.size.height * scale,\n        border: `1px solid ${stroke}`,\n        background: fill,\n        boxSizing: 'border-box',\n      }}\n      className={className}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-zoom.ts","../../src/shared/utils/pinch-zoom-logic.ts","../../src/shared/hooks/use-pinch-zoom.ts","../../src/shared/components/pinch-wrapper.tsx","../../src/shared/components/marquee-zoom.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { initialState, ZoomPlugin, ZoomState } from '@embedpdf/plugin-zoom';\nimport { useEffect, useState } from '@framework';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\nexport const useZoom = () => {\n  const { provides } = useZoomCapability();\n  const [state, setState] = useState<ZoomState>(initialState);\n\n  useEffect(() => {\n    return provides?.onStateChange((action) => {\n      setState(action);\n    });\n  }, [provides]);\n\n  return {\n    state,\n    provides,\n  };\n};\n","import type { ViewportCapability } from '@embedpdf/plugin-viewport';\nimport type { ZoomCapability, ZoomState } from '@embedpdf/plugin-zoom';\n\nexport interface PinchZoomDeps {\n  element: HTMLDivElement;\n  viewportProvides: ViewportCapability;\n  zoomProvides: ZoomCapability;\n}\n\nexport function setupPinchZoom({ element, viewportProvides, zoomProvides }: PinchZoomDeps) {\n  // Check if we're on the client side\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  let hammer: any | undefined;\n  let initialZoom = 0; // numeric scale at pinchstart\n  let lastCenter = { x: 0, y: 0 };\n\n  const getState = (): ZoomState => zoomProvides.getState();\n\n  const updateTransform = (scale: number) => {\n    // 1 → no scale; we only scale *relatively* to the start\n    element.style.transform = `scale(${scale})`;\n  };\n\n  const resetTransform = () => {\n    element.style.transform = 'none';\n    element.style.transformOrigin = '0 0';\n  };\n\n  const pinchStart = (e: HammerInput) => {\n    initialZoom = getState().currentZoomLevel;\n\n    const contRect = viewportProvides.getBoundingRect();\n\n    lastCenter = {\n      x: e.center.x - contRect.origin.x,\n      y: e.center.y - contRect.origin.y,\n    };\n\n    // put the transform-origin under the fingers so the preview feels right\n    const innerRect = element.getBoundingClientRect();\n    element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;\n\n    // stop the browser's own pinch-zoom\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchMove = (e: HammerInput) => {\n    updateTransform(e.scale); // *only* CSS, no real zoom yet\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchEnd = (e: HammerInput) => {\n    // translate the relative hammer scale into a delta for requestZoomBy\n    const delta = (e.scale - 1) * initialZoom;\n    zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });\n\n    resetTransform();\n    initialZoom = 0;\n  };\n\n  // Async Hammer setup (internal)\n  const setupHammer = async () => {\n    try {\n      const Hammer = (await import('hammerjs')).default;\n\n      /* ------------------------------------------------------------------ */\n      /* Hammer setup                                                        */\n      /* ------------------------------------------------------------------ */\n      const inputClass = (() => {\n        const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;\n        const SUPPORT_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n        const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);\n        if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;\n        if (!SUPPORT_TOUCH) return Hammer.MouseInput;\n        return Hammer.TouchMouseInput;\n      })();\n\n      hammer = new Hammer(element, {\n        touchAction: 'pan-x pan-y', // allow scroll in every direction\n        inputClass,\n      });\n\n      hammer.get('pinch').set({ enable: true, pointers: 2, threshold: 0.1 });\n\n      hammer.on('pinchstart', pinchStart);\n      hammer.on('pinchmove', pinchMove);\n      hammer.on('pinchend', pinchEnd);\n    } catch (error) {\n      console.warn('Failed to load HammerJS:', error);\n    }\n  };\n\n  setupHammer(); // Fire and forget\n\n  // Return cleanup immediately\n  return () => {\n    hammer?.destroy();\n    resetTransform();\n  };\n}\n","import { useEffect, useRef } from '@framework';\nimport { useCapability } from '@embedpdf/core/@framework';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nimport { setupPinchZoom } from '../utils/pinch-zoom-logic';\nimport { useZoomCapability } from './use-zoom';\n\nexport function usePinch() {\n  const { provides: viewportProvides } = useCapability<ViewportPlugin>('viewport');\n  const { provides: zoomProvides } = useZoomCapability();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !viewportProvides || !zoomProvides) {\n      return;\n    }\n\n    return setupPinchZoom({ element, viewportProvides, zoomProvides });\n  }, [viewportProvides, zoomProvides]);\n\n  return { elementRef };\n}\n","import { ReactNode, HTMLAttributes, CSSProperties } from '@framework';\n\nimport { usePinch } from '../hooks';\n\ntype PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  children: ReactNode;\n  style?: CSSProperties;\n};\n\nexport function PinchWrapper({ children, style, ...props }: PinchWrapperProps) {\n  const { elementRef } = usePinch();\n\n  return (\n    <div\n      ref={elementRef}\n      {...props}\n      style={{\n        ...style,\n        display: 'block',\n        width: 'fit-content',\n        overflow: 'visible',\n        boxSizing: 'border-box',\n        margin: '0px auto',\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n","import { useEffect, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\nimport { useZoomCapability } from '../hooks/use-zoom';\n\ninterface MarqueeZoomProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nexport const MarqueeZoom = ({\n  pageIndex,\n  scale,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  const { provides: zoomPlugin } = useZoomCapability();\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  useEffect(() => {\n    if (!zoomPlugin) return;\n    return zoomPlugin.registerMarqueeOnPage({\n      pageIndex,\n      scale,\n      callback: {\n        onPreview: setRect,\n      },\n    });\n  }, [zoomPlugin, pageIndex, scale]);\n\n  if (!rect) return null;\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none',\n        left: rect.origin.x * scale,\n        top: rect.origin.y * scale,\n        width: rect.size.width * scale,\n        height: rect.size.height * scale,\n        border: `1px solid ${stroke}`,\n        background: fill,\n        boxSizing: 'border-box',\n      }}\n      className={className}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/shared-preact/index.d.ts

@@ -1,2 +1,3 @@
 export * from './hooks';
 export * from './components';
+export * from '../lib/index.ts';

package/dist/shared-preact/utils/pinch-zoom-logic.d.ts

@@ -0,0 +1,8 @@
+import { ViewportCapability } from '@embedpdf/plugin-viewport';
+import { ZoomCapability } from '../../lib/index.ts';
+export interface PinchZoomDeps {
+    element: HTMLDivElement;
+    viewportProvides: ViewportCapability;
+    zoomProvides: ZoomCapability;
+}
+export declare function setupPinchZoom({ element, viewportProvides, zoomProvides }: PinchZoomDeps): () => void;

package/dist/shared-react/index.d.ts

@@ -1,2 +1,3 @@
 export * from './hooks';
 export * from './components';
+export * from '../lib/index.ts';

package/dist/shared-react/utils/pinch-zoom-logic.d.ts

@@ -0,0 +1,8 @@
+import { ViewportCapability } from '@embedpdf/plugin-viewport';
+import { ZoomCapability } from '../../lib/index.ts';
+export interface PinchZoomDeps {
+    element: HTMLDivElement;
+    viewportProvides: ViewportCapability;
+    zoomProvides: ZoomCapability;
+}
+export declare function setupPinchZoom({ element, viewportProvides, zoomProvides }: PinchZoomDeps): () => void;

package/dist/shared-vue/utils/pinch-zoom-logic.d.ts

@@ -0,0 +1,8 @@
+import { ViewportCapability } from '@embedpdf/plugin-viewport';
+import { ZoomCapability } from '../../lib/index.ts';
+export interface PinchZoomDeps {
+    element: HTMLDivElement;
+    viewportProvides: ViewportCapability;
+    zoomProvides: ZoomCapability;
+}
+export declare function setupPinchZoom({ element, viewportProvides, zoomProvides }: PinchZoomDeps): () => void;

package/dist/vue/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MarqueeZoom } from './marquee-zoom.vue';
+export { default as PinchWrapper } from './pinch-wrapper.vue';

package/dist/vue/components/marquee-zoom.vue.d.ts

@@ -0,0 +1,16 @@
+interface MarqueeZoomProps {
+    /** Index of the page this layer lives on */
+    pageIndex: number;
+    /** Scale of the page */
+    scale: number;
+    /** Optional CSS class applied to the marquee rectangle */
+    className?: string;
+    /** Stroke / fill colours (defaults below) */
+    stroke?: string;
+    fill?: string;
+}
+declare const _default: import('vue').DefineComponent<MarqueeZoomProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MarqueeZoomProps> & Readonly<{}>, {
+    fill: string;
+    stroke: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/vue/components/pinch-wrapper.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/vue/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './use-zoom';
+export * from './use-pinch-zoom';

package/dist/vue/hooks/use-pinch-zoom.d.ts

@@ -0,0 +1,3 @@
+export declare function usePinch(): {
+    elementRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+};

package/dist/vue/hooks/use-zoom.d.ts

@@ -0,0 +1,13 @@
+import { ZoomPlugin, ZoomState } from '../../lib/index.ts';
+export declare const useZoomCapability: () => import('@embedpdf/core/vue').CapabilityState<Readonly<import('../../lib/index.ts').ZoomCapability>>;
+export declare const useZoomPlugin: () => import('@embedpdf/core/vue').PluginState<ZoomPlugin>;
+export declare const useZoom: () => {
+    state: import('vue').Ref<{
+        zoomLevel: import('../../lib/index.ts').ZoomLevel;
+        currentZoomLevel: number;
+    }, ZoomState | {
+        zoomLevel: import('../../lib/index.ts').ZoomLevel;
+        currentZoomLevel: number;
+    }>;
+    provides: import('vue').Ref<Readonly<import('../../lib/index.ts').ZoomCapability> | null, Readonly<import('../../lib/index.ts').ZoomCapability> | null>;
+};

package/dist/vue/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=require("@embedpdf/core/vue"),o=require("@embedpdf/plugin-zoom"),n=()=>t.useCapability(o.ZoomPlugin.id);function r({element:e,viewportProvides:t,zoomProvides:o}){if("undefined"==typeof window)return()=>{};let n,r=0,a={x:0,y:0};const l=()=>{e.style.transform="none",e.style.transformOrigin="0 0"},s=n=>{var l;r=o.getState().currentZoomLevel;const s=t.getBoundingRect();a={x:n.center.x-s.origin.x,y:n.center.y-s.origin.y};const i=e.getBoundingClientRect();e.style.transformOrigin=`${n.center.x-i.left}px ${n.center.y-i.top}px`,(null==(l=n.srcEvent)?void 0:l.cancelable)&&(n.srcEvent.preventDefault(),n.srcEvent.stopPropagation())},i=t=>{var o,n;n=t.scale,e.style.transform=`scale(${n})`,(null==(o=t.srcEvent)?void 0:o.cancelable)&&(t.srcEvent.preventDefault(),t.srcEvent.stopPropagation())},u=e=>{const t=(e.scale-1)*r;o.requestZoomBy(t,{vx:a.x,vy:a.y}),l(),r=0};return(async()=>{try{const t=(await Promise.resolve().then((()=>require("../hammer-Bs-QCG8V.cjs"))).then((e=>e.hammer))).default,o=(()=>{const e="ontouchstart"in window||navigator.maxTouchPoints>0;return e&&/mobile|tablet|ip(ad|hone|od)|android/i.test(navigator.userAgent)?t.TouchInput:e?t.TouchMouseInput:t.MouseInput})();n=new t(e,{touchAction:"pan-x pan-y",inputClass:o}),n.get("pinch").set({enable:!0,pointers:2,threshold:.1}),n.on("pinchstart",s),n.on("pinchmove",i),n.on("pinchend",u)}catch(t){console.warn("Failed to load HammerJS:",t)}})(),()=>{null==n||n.destroy(),l()}}function a(){const{provides:o}=t.useCapability("viewport"),{provides:a}=n(),l=e.ref(null);let s;return e.onMounted((async()=>{const e=l.value;e&&o.value&&a.value&&(s=r({element:e,viewportProvides:o.value,zoomProvides:a.value}))})),e.onUnmounted((()=>{null==s||s()})),{elementRef:l}}const l=e.defineComponent({__name:"marquee-zoom",props:{pageIndex:{},scale:{},className:{},stroke:{default:"rgba(33,150,243,0.8)"},fill:{default:"rgba(33,150,243,0.15)"}},setup(t){const o=t,{provides:r}=n(),a=e.ref(null);let l;return e.onMounted((()=>{r.value&&(l=r.value.registerMarqueeOnPage({pageIndex:o.pageIndex,scale:o.scale,callback:{onPreview:e=>{a.value=e}}}))})),e.onUnmounted((()=>{null==l||l()})),(t,o)=>a.value?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle({position:"absolute",pointerEvents:"none",left:a.value.origin.x*t.scale+"px",top:a.value.origin.y*t.scale+"px",width:a.value.size.width*t.scale+"px",height:a.value.size.height*t.scale+"px",border:`1px solid ${t.stroke}`,background:t.fill,boxSizing:"border-box"}),class:e.normalizeClass(t.className)},null,6)):e.createCommentVNode("",!0)}}),s=e.defineComponent({__name:"pinch-wrapper",setup(t){const{elementRef:o}=a();return(t,n)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({ref_key:"elementRef",ref:o,style:{display:"block",width:"fit-content",overflow:"visible",boxSizing:"border-box",margin:"0px auto"}},t.$attrs),[e.renderSlot(t.$slots,"default")],16))}});exports.MarqueeZoom=l,exports.PinchWrapper=s,exports.usePinch=a,exports.useZoom=()=>{const{provides:t}=n(),r=e.ref(o.initialState);return e.onMounted((()=>{if(!t.value)return;const o=t.value.onStateChange((e=>{r.value=e}));e.onUnmounted((()=>{o()}))})),{state:r,provides:t}},exports.useZoomCapability=n,exports.useZoomPlugin=()=>t.usePlugin(o.ZoomPlugin.id),Object.keys(o).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>o[e]})}));
+//# sourceMappingURL=index.cjs.map

package/dist/vue/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/vue/hooks/use-zoom.ts","../../src/shared/utils/pinch-zoom-logic.ts","../../src/vue/hooks/use-pinch-zoom.ts","../../src/vue/components/marquee-zoom.vue","../../src/vue/components/pinch-wrapper.vue"],"sourcesContent":["import { ref, onMounted, onUnmounted } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { initialState, ZoomPlugin, ZoomState } from '@embedpdf/plugin-zoom';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\nexport const useZoom = () => {\n  const { provides } = useZoomCapability();\n  const state = ref<ZoomState>(initialState);\n\n  onMounted(() => {\n    if (!provides.value) return;\n\n    const unsubscribe = provides.value.onStateChange((newState) => {\n      state.value = newState;\n    });\n\n    onUnmounted(() => {\n      unsubscribe();\n    });\n  });\n\n  return {\n    state,\n    provides,\n  };\n};\n","import type { ViewportCapability } from '@embedpdf/plugin-viewport';\nimport type { ZoomCapability, ZoomState } from '@embedpdf/plugin-zoom';\n\nexport interface PinchZoomDeps {\n  element: HTMLDivElement;\n  viewportProvides: ViewportCapability;\n  zoomProvides: ZoomCapability;\n}\n\nexport function setupPinchZoom({ element, viewportProvides, zoomProvides }: PinchZoomDeps) {\n  // Check if we're on the client side\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  let hammer: any | undefined;\n  let initialZoom = 0; // numeric scale at pinchstart\n  let lastCenter = { x: 0, y: 0 };\n\n  const getState = (): ZoomState => zoomProvides.getState();\n\n  const updateTransform = (scale: number) => {\n    // 1 → no scale; we only scale *relatively* to the start\n    element.style.transform = `scale(${scale})`;\n  };\n\n  const resetTransform = () => {\n    element.style.transform = 'none';\n    element.style.transformOrigin = '0 0';\n  };\n\n  const pinchStart = (e: HammerInput) => {\n    initialZoom = getState().currentZoomLevel;\n\n    const contRect = viewportProvides.getBoundingRect();\n\n    lastCenter = {\n      x: e.center.x - contRect.origin.x,\n      y: e.center.y - contRect.origin.y,\n    };\n\n    // put the transform-origin under the fingers so the preview feels right\n    const innerRect = element.getBoundingClientRect();\n    element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;\n\n    // stop the browser's own pinch-zoom\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchMove = (e: HammerInput) => {\n    updateTransform(e.scale); // *only* CSS, no real zoom yet\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchEnd = (e: HammerInput) => {\n    // translate the relative hammer scale into a delta for requestZoomBy\n    const delta = (e.scale - 1) * initialZoom;\n    zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });\n\n    resetTransform();\n    initialZoom = 0;\n  };\n\n  // Async Hammer setup (internal)\n  const setupHammer = async () => {\n    try {\n      const Hammer = (await import('hammerjs')).default;\n\n      /* ------------------------------------------------------------------ */\n      /* Hammer setup                                                        */\n      /* ------------------------------------------------------------------ */\n      const inputClass = (() => {\n        const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;\n        const SUPPORT_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n        const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);\n        if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;\n        if (!SUPPORT_TOUCH) return Hammer.MouseInput;\n        return Hammer.TouchMouseInput;\n      })();\n\n      hammer = new Hammer(element, {\n        touchAction: 'pan-x pan-y', // allow scroll in every direction\n        inputClass,\n      });\n\n      hammer.get('pinch').set({ enable: true, pointers: 2, threshold: 0.1 });\n\n      hammer.on('pinchstart', pinchStart);\n      hammer.on('pinchmove', pinchMove);\n      hammer.on('pinchend', pinchEnd);\n    } catch (error) {\n      console.warn('Failed to load HammerJS:', error);\n    }\n  };\n\n  setupHammer(); // Fire and forget\n\n  // Return cleanup immediately\n  return () => {\n    hammer?.destroy();\n    resetTransform();\n  };\n}\n","import { ref, onMounted, onUnmounted } from 'vue';\nimport { useCapability } from '@embedpdf/core/vue';\nimport type { ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nimport { setupPinchZoom } from '../../shared/utils/pinch-zoom-logic';\nimport { useZoomCapability } from './use-zoom';\n\nexport function usePinch() {\n  const { provides: viewportProvides } = useCapability<ViewportPlugin>('viewport');\n  const { provides: zoomProvides } = useZoomCapability();\n  const elementRef = ref<HTMLDivElement | null>(null);\n\n  let cleanup: (() => void) | undefined;\n\n  onMounted(async () => {\n    const element = elementRef.value;\n    if (!element || !viewportProvides.value || !zoomProvides.value) {\n      return;\n    }\n\n    cleanup = setupPinchZoom({\n      element,\n      viewportProvides: viewportProvides.value,\n      zoomProvides: zoomProvides.value,\n    });\n  });\n\n  onUnmounted(() => {\n    cleanup?.();\n  });\n\n  return { elementRef };\n}\n","<template>\n  <div\n    v-if=\"rect\"\n    :style=\"{\n      position: 'absolute',\n      pointerEvents: 'none',\n      left: `${rect.origin.x * scale}px`,\n      top: `${rect.origin.y * scale}px`,\n      width: `${rect.size.width * scale}px`,\n      height: `${rect.size.height * scale}px`,\n      border: `1px solid ${stroke}`,\n      background: fill,\n      boxSizing: 'border-box',\n    }\"\n    :class=\"className\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted } from 'vue';\nimport type { Rect } from '@embedpdf/models';\nimport { useZoomCapability } from '../hooks';\n\ninterface MarqueeZoomProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nconst props = withDefaults(defineProps<MarqueeZoomProps>(), {\n  stroke: 'rgba(33,150,243,0.8)',\n  fill: 'rgba(33,150,243,0.15)',\n});\n\nconst { provides: zoomPlugin } = useZoomCapability();\nconst rect = ref<Rect | null>(null);\n\nlet unregister: (() => void) | undefined;\n\nonMounted(() => {\n  if (!zoomPlugin.value) return;\n\n  unregister = zoomPlugin.value.registerMarqueeOnPage({\n    pageIndex: props.pageIndex,\n    scale: props.scale,\n    callback: {\n      onPreview: (newRect) => {\n        rect.value = newRect;\n      },\n    },\n  });\n});\n\nonUnmounted(() => {\n  unregister?.();\n});\n</script>\n","<template>\n  <div\n    ref=\"elementRef\"\n    :style=\"{\n      display: 'block',\n      width: 'fit-content',\n      overflow: 'visible',\n      boxSizing: 'border-box',\n      margin: '0px auto',\n    }\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { usePinch } from '../hooks/use-pinch-zoom';\n\nconst { elementRef } = usePinch();\n</script>\n"],"names":["useZoomCapability","useCapability","ZoomPlugin","id","setupPinchZoom","element","viewportProvides","zoomProvides","window","hammer","initialZoom","lastCenter","x","y","resetTransform","style","transform","transformOrigin","pinchStart","e","getState","currentZoomLevel","contRect","getBoundingRect","center","origin","innerRect","getBoundingClientRect","left","top","_a","srcEvent","cancelable","preventDefault","stopPropagation","pinchMove","scale","pinchEnd","delta","requestZoomBy","vx","vy","async","Hammer","Promise","resolve","then","require","n","default","inputClass","SUPPORT_TOUCH","navigator","maxTouchPoints","test","userAgent","TouchInput","TouchMouseInput","MouseInput","touchAction","get","set","enable","pointers","threshold","on","error","console","warn","setupHammer","destroy","usePinch","provides","elementRef","ref","cleanup","onMounted","value","onUnmounted","props","__props","zoomPlugin","rect","unregister","registerMarqueeOnPage","pageIndex","callback","onPreview","newRect","_createElementBlock","_normalizeStyle","width","size","height","stroke","fill","class","className","_openBlock","_mergeProps","$attrs","_renderSlot","_ctx","$slots","state","initialState","unsubscribe","onStateChange","newState","usePlugin"],"mappings":"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"}

package/dist/vue/index.d.ts

@@ -0,0 +1,3 @@
+export * from './hooks';
+export * from './components';
+export * from '../lib/index.ts';

package/dist/vue/index.js

@@ -0,0 +1,197 @@
+import { ref, onMounted, onUnmounted, defineComponent, createElementBlock, createCommentVNode, openBlock, normalizeClass, normalizeStyle, mergeProps, renderSlot } from "vue";
+import { useCapability, usePlugin } from "@embedpdf/core/vue";
+import { ZoomPlugin, initialState } from "@embedpdf/plugin-zoom";
+export * from "@embedpdf/plugin-zoom";
+const useZoomCapability = () => useCapability(ZoomPlugin.id);
+const useZoomPlugin = () => usePlugin(ZoomPlugin.id);
+const useZoom = () => {
+  const { provides } = useZoomCapability();
+  const state = ref(initialState);
+  onMounted(() => {
+    if (!provides.value) return;
+    const unsubscribe = provides.value.onStateChange((newState) => {
+      state.value = newState;
+    });
+    onUnmounted(() => {
+      unsubscribe();
+    });
+  });
+  return {
+    state,
+    provides
+  };
+};
+function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
+  if (typeof window === "undefined") {
+    return () => {
+    };
+  }
+  let hammer;
+  let initialZoom = 0;
+  let lastCenter = { x: 0, y: 0 };
+  const getState = () => zoomProvides.getState();
+  const updateTransform = (scale) => {
+    element.style.transform = `scale(${scale})`;
+  };
+  const resetTransform = () => {
+    element.style.transform = "none";
+    element.style.transformOrigin = "0 0";
+  };
+  const pinchStart = (e) => {
+    var _a;
+    initialZoom = getState().currentZoomLevel;
+    const contRect = viewportProvides.getBoundingRect();
+    lastCenter = {
+      x: e.center.x - contRect.origin.x,
+      y: e.center.y - contRect.origin.y
+    };
+    const innerRect = element.getBoundingClientRect();
+    element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;
+    if ((_a = e.srcEvent) == null ? void 0 : _a.cancelable) {
+      e.srcEvent.preventDefault();
+      e.srcEvent.stopPropagation();
+    }
+  };
+  const pinchMove = (e) => {
+    var _a;
+    updateTransform(e.scale);
+    if ((_a = e.srcEvent) == null ? void 0 : _a.cancelable) {
+      e.srcEvent.preventDefault();
+      e.srcEvent.stopPropagation();
+    }
+  };
+  const pinchEnd = (e) => {
+    const delta = (e.scale - 1) * initialZoom;
+    zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });
+    resetTransform();
+    initialZoom = 0;
+  };
+  const setupHammer = async () => {
+    try {
+      const Hammer = (await import("../hammer-e1aXHboh.js").then((n) => n.h)).default;
+      const inputClass = (() => {
+        const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
+        const SUPPORT_TOUCH = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+        const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);
+        if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;
+        if (!SUPPORT_TOUCH) return Hammer.MouseInput;
+        return Hammer.TouchMouseInput;
+      })();
+      hammer = new Hammer(element, {
+        touchAction: "pan-x pan-y",
+        // allow scroll in every direction
+        inputClass
+      });
+      hammer.get("pinch").set({ enable: true, pointers: 2, threshold: 0.1 });
+      hammer.on("pinchstart", pinchStart);
+      hammer.on("pinchmove", pinchMove);
+      hammer.on("pinchend", pinchEnd);
+    } catch (error) {
+      console.warn("Failed to load HammerJS:", error);
+    }
+  };
+  setupHammer();
+  return () => {
+    hammer == null ? void 0 : hammer.destroy();
+    resetTransform();
+  };
+}
+function usePinch() {
+  const { provides: viewportProvides } = useCapability("viewport");
+  const { provides: zoomProvides } = useZoomCapability();
+  const elementRef = ref(null);
+  let cleanup;
+  onMounted(async () => {
+    const element = elementRef.value;
+    if (!element || !viewportProvides.value || !zoomProvides.value) {
+      return;
+    }
+    cleanup = setupPinchZoom({
+      element,
+      viewportProvides: viewportProvides.value,
+      zoomProvides: zoomProvides.value
+    });
+  });
+  onUnmounted(() => {
+    cleanup == null ? void 0 : cleanup();
+  });
+  return { elementRef };
+}
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "marquee-zoom",
+  props: {
+    pageIndex: {},
+    scale: {},
+    className: {},
+    stroke: { default: "rgba(33,150,243,0.8)" },
+    fill: { default: "rgba(33,150,243,0.15)" }
+  },
+  setup(__props) {
+    const props = __props;
+    const { provides: zoomPlugin } = useZoomCapability();
+    const rect = ref(null);
+    let unregister;
+    onMounted(() => {
+      if (!zoomPlugin.value) return;
+      unregister = zoomPlugin.value.registerMarqueeOnPage({
+        pageIndex: props.pageIndex,
+        scale: props.scale,
+        callback: {
+          onPreview: (newRect) => {
+            rect.value = newRect;
+          }
+        }
+      });
+    });
+    onUnmounted(() => {
+      unregister == null ? void 0 : unregister();
+    });
+    return (_ctx, _cache) => {
+      return rect.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        style: normalizeStyle({
+          position: "absolute",
+          pointerEvents: "none",
+          left: `${rect.value.origin.x * _ctx.scale}px`,
+          top: `${rect.value.origin.y * _ctx.scale}px`,
+          width: `${rect.value.size.width * _ctx.scale}px`,
+          height: `${rect.value.size.height * _ctx.scale}px`,
+          border: `1px solid ${_ctx.stroke}`,
+          background: _ctx.fill,
+          boxSizing: "border-box"
+        }),
+        class: normalizeClass(_ctx.className)
+      }, null, 6)) : createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "pinch-wrapper",
+  setup(__props) {
+    const { elementRef } = usePinch();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "elementRef",
+        ref: elementRef,
+        style: {
+          display: "block",
+          width: "fit-content",
+          overflow: "visible",
+          boxSizing: "border-box",
+          margin: "0px auto"
+        }
+      }, _ctx.$attrs), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main$1 as MarqueeZoom,
+  _sfc_main as PinchWrapper,
+  usePinch,
+  useZoom,
+  useZoomCapability,
+  useZoomPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/vue/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-zoom.ts","../../src/shared/utils/pinch-zoom-logic.ts","../../src/vue/hooks/use-pinch-zoom.ts","../../src/vue/components/marquee-zoom.vue","../../src/vue/components/pinch-wrapper.vue"],"sourcesContent":["import { ref, onMounted, onUnmounted } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { initialState, ZoomPlugin, ZoomState } from '@embedpdf/plugin-zoom';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\nexport const useZoom = () => {\n  const { provides } = useZoomCapability();\n  const state = ref<ZoomState>(initialState);\n\n  onMounted(() => {\n    if (!provides.value) return;\n\n    const unsubscribe = provides.value.onStateChange((newState) => {\n      state.value = newState;\n    });\n\n    onUnmounted(() => {\n      unsubscribe();\n    });\n  });\n\n  return {\n    state,\n    provides,\n  };\n};\n","import type { ViewportCapability } from '@embedpdf/plugin-viewport';\nimport type { ZoomCapability, ZoomState } from '@embedpdf/plugin-zoom';\n\nexport interface PinchZoomDeps {\n  element: HTMLDivElement;\n  viewportProvides: ViewportCapability;\n  zoomProvides: ZoomCapability;\n}\n\nexport function setupPinchZoom({ element, viewportProvides, zoomProvides }: PinchZoomDeps) {\n  // Check if we're on the client side\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  let hammer: any | undefined;\n  let initialZoom = 0; // numeric scale at pinchstart\n  let lastCenter = { x: 0, y: 0 };\n\n  const getState = (): ZoomState => zoomProvides.getState();\n\n  const updateTransform = (scale: number) => {\n    // 1 → no scale; we only scale *relatively* to the start\n    element.style.transform = `scale(${scale})`;\n  };\n\n  const resetTransform = () => {\n    element.style.transform = 'none';\n    element.style.transformOrigin = '0 0';\n  };\n\n  const pinchStart = (e: HammerInput) => {\n    initialZoom = getState().currentZoomLevel;\n\n    const contRect = viewportProvides.getBoundingRect();\n\n    lastCenter = {\n      x: e.center.x - contRect.origin.x,\n      y: e.center.y - contRect.origin.y,\n    };\n\n    // put the transform-origin under the fingers so the preview feels right\n    const innerRect = element.getBoundingClientRect();\n    element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;\n\n    // stop the browser's own pinch-zoom\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchMove = (e: HammerInput) => {\n    updateTransform(e.scale); // *only* CSS, no real zoom yet\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchEnd = (e: HammerInput) => {\n    // translate the relative hammer scale into a delta for requestZoomBy\n    const delta = (e.scale - 1) * initialZoom;\n    zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });\n\n    resetTransform();\n    initialZoom = 0;\n  };\n\n  // Async Hammer setup (internal)\n  const setupHammer = async () => {\n    try {\n      const Hammer = (await import('hammerjs')).default;\n\n      /* ------------------------------------------------------------------ */\n      /* Hammer setup                                                        */\n      /* ------------------------------------------------------------------ */\n      const inputClass = (() => {\n        const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;\n        const SUPPORT_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n        const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);\n        if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;\n        if (!SUPPORT_TOUCH) return Hammer.MouseInput;\n        return Hammer.TouchMouseInput;\n      })();\n\n      hammer = new Hammer(element, {\n        touchAction: 'pan-x pan-y', // allow scroll in every direction\n        inputClass,\n      });\n\n      hammer.get('pinch').set({ enable: true, pointers: 2, threshold: 0.1 });\n\n      hammer.on('pinchstart', pinchStart);\n      hammer.on('pinchmove', pinchMove);\n      hammer.on('pinchend', pinchEnd);\n    } catch (error) {\n      console.warn('Failed to load HammerJS:', error);\n    }\n  };\n\n  setupHammer(); // Fire and forget\n\n  // Return cleanup immediately\n  return () => {\n    hammer?.destroy();\n    resetTransform();\n  };\n}\n","import { ref, onMounted, onUnmounted } from 'vue';\nimport { useCapability } from '@embedpdf/core/vue';\nimport type { ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nimport { setupPinchZoom } from '../../shared/utils/pinch-zoom-logic';\nimport { useZoomCapability } from './use-zoom';\n\nexport function usePinch() {\n  const { provides: viewportProvides } = useCapability<ViewportPlugin>('viewport');\n  const { provides: zoomProvides } = useZoomCapability();\n  const elementRef = ref<HTMLDivElement | null>(null);\n\n  let cleanup: (() => void) | undefined;\n\n  onMounted(async () => {\n    const element = elementRef.value;\n    if (!element || !viewportProvides.value || !zoomProvides.value) {\n      return;\n    }\n\n    cleanup = setupPinchZoom({\n      element,\n      viewportProvides: viewportProvides.value,\n      zoomProvides: zoomProvides.value,\n    });\n  });\n\n  onUnmounted(() => {\n    cleanup?.();\n  });\n\n  return { elementRef };\n}\n","<template>\n  <div\n    v-if=\"rect\"\n    :style=\"{\n      position: 'absolute',\n      pointerEvents: 'none',\n      left: `${rect.origin.x * scale}px`,\n      top: `${rect.origin.y * scale}px`,\n      width: `${rect.size.width * scale}px`,\n      height: `${rect.size.height * scale}px`,\n      border: `1px solid ${stroke}`,\n      background: fill,\n      boxSizing: 'border-box',\n    }\"\n    :class=\"className\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted } from 'vue';\nimport type { Rect } from '@embedpdf/models';\nimport { useZoomCapability } from '../hooks';\n\ninterface MarqueeZoomProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nconst props = withDefaults(defineProps<MarqueeZoomProps>(), {\n  stroke: 'rgba(33,150,243,0.8)',\n  fill: 'rgba(33,150,243,0.15)',\n});\n\nconst { provides: zoomPlugin } = useZoomCapability();\nconst rect = ref<Rect | null>(null);\n\nlet unregister: (() => void) | undefined;\n\nonMounted(() => {\n  if (!zoomPlugin.value) return;\n\n  unregister = zoomPlugin.value.registerMarqueeOnPage({\n    pageIndex: props.pageIndex,\n    scale: props.scale,\n    callback: {\n      onPreview: (newRect) => {\n        rect.value = newRect;\n      },\n    },\n  });\n});\n\nonUnmounted(() => {\n  unregister?.();\n});\n</script>\n","<template>\n  <div\n    ref=\"elementRef\"\n    :style=\"{\n      display: 'block',\n      width: 'fit-content',\n      overflow: 'visible',\n      boxSizing: 'border-box',\n      margin: '0px auto',\n    }\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { usePinch } from '../hooks/use-pinch-zoom';\n\nconst { elementRef } = usePinch();\n</script>\n"],"names":["_createElementBlock","_normalizeStyle","scale","stroke","fill","className","_openBlock","_mergeProps","$attrs","_renderSlot"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embedpdf/plugin-zoom",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -20,30 +20,36 @@
       "types": "./dist/react/index.d.ts",
       "import": "./dist/react/index.js",
       "require": "./dist/react/index.cjs"
+    },
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue/index.js",
+      "require": "./dist/vue/index.cjs"
     }
   },
   "dependencies": {
     "hammerjs": "^2.0.8",
-    "@embedpdf/models": "1.0.20"
+    "@embedpdf/models": "1.0.21"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.46",
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0",
-    "@embedpdf/core": "1.0.20",
-    "@embedpdf/plugin-viewport": "1.0.20",
-    "@embedpdf/plugin-interaction-manager": "1.0.20",
+    "@embedpdf/core": "1.0.21",
     "@embedpdf/build": "1.0.0",
-    "@embedpdf/plugin-scroll": "1.0.20"
+    "@embedpdf/plugin-scroll": "1.0.21",
+    "@embedpdf/plugin-interaction-manager": "1.0.21",
+    "@embedpdf/plugin-viewport": "1.0.21"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "preact": "^10.26.4",
-    "@embedpdf/core": "1.0.20",
-    "@embedpdf/plugin-viewport": "1.0.20",
-    "@embedpdf/plugin-scroll": "1.0.20",
-    "@embedpdf/plugin-interaction-manager": "1.0.20"
+    "vue": ">=3.2.0",
+    "@embedpdf/plugin-viewport": "1.0.21",
+    "@embedpdf/plugin-scroll": "1.0.21",
+    "@embedpdf/core": "1.0.21",
+    "@embedpdf/plugin-interaction-manager": "1.0.21"
   },
   "files": [
     "dist",
@@ -65,7 +71,8 @@
     "build:base": "vite build --mode base",
     "build:react": "vite build --mode react",
     "build:preact": "vite build --mode preact",
-    "build": "pnpm run clean && concurrently -c auto -n base,react,preact \"vite build --mode base\" \"vite build --mode react\" \"vite build --mode preact\"",
+    "build:vue": "vite build --mode vue",
+    "build": "pnpm run clean && concurrently -c auto -n base,react,preact,vue \"vite build --mode base\" \"vite build --mode react\" \"vite build --mode preact\" \"vite build --mode vue\"",
     "clean": "rimraf dist",
     "lint": "eslint src --color",
     "lint:fix": "eslint src --color --fix"

package/dist/preact/interaction-manager.d.ts

@@ -1 +0,0 @@
-export * from '@embedpdf/plugin-interaction-manager/preact';

package/dist/react/interaction-manager.d.ts

@@ -1 +0,0 @@
-export * from '@embedpdf/plugin-interaction-manager/react';