@embedpdf/plugin-zoom 1.0.18 → 1.0.20

package/dist/lib/types.d.ts

@@ -25,6 +25,16 @@ export interface ZoomChangeEvent {
     /** metrics at the moment the zoom was requested                    */
     viewport: ViewportMetrics;
 }
+export interface MarqueeZoomCallback {
+    onPreview?: (rect: Rect | null) => void;
+    onCommit?: (rect: Rect) => void;
+    onSmallDrag?: () => void;
+}
+export interface RegisterMarqueeOnPageOptions {
+    pageIndex: number;
+    scale: number;
+    callback: MarqueeZoomCallback;
+}
 export interface ZoomCapability {
     /** subscribe – returns the unsubscribe function */
     onZoomChange: EventHook<ZoomChangeEvent>;
@@ -43,6 +53,8 @@ export interface ZoomCapability {
     disableMarqueeZoom(): void;
     toggleMarqueeZoom(): void;
     isMarqueeZoomActive(): boolean;
+    /** register a marquee handler on a page -------------------------------- */
+    registerMarqueeOnPage: (opts: RegisterMarqueeOnPageOptions) => () => void;
     getState(): ZoomState;
     getPresets(): ZoomPreset[];
 }

package/dist/lib/zoom-plugin.d.ts

@@ -1,6 +1,6 @@
 import { BasePlugin, PluginRegistry } from '@embedpdf/core';
 import { ZoomAction } from './actions';
-import { ZoomPluginConfig, ZoomState, ZoomCapability } from './types';
+import { ZoomPluginConfig, ZoomState, ZoomCapability, RegisterMarqueeOnPageOptions } from './types';
 export declare class ZoomPlugin extends BasePlugin<ZoomPluginConfig, ZoomCapability, ZoomState, ZoomAction> {
     static readonly id: "zoom";
     private readonly zoom$;
@@ -16,6 +16,9 @@ export declare class ZoomPlugin extends BasePlugin<ZoomPluginConfig, ZoomCapabil
     private readonly zoomStep;
     constructor(id: string, registry: PluginRegistry, cfg: ZoomPluginConfig);
     protected buildCapability(): ZoomCapability;
+    private zoomOut;
+    private zoomIn;
+    private zoomToArea;
     initialize(): Promise<void>;
     destroy(): Promise<void>;
     /**
@@ -35,4 +38,5 @@ export declare class ZoomPlugin extends BasePlugin<ZoomPluginConfig, ZoomCapabil
     /** recalculates Automatic / Fit* when viewport or pages change */
     private recalcAuto;
     onStoreUpdated(_prevState: ZoomState, newState: ZoomState): void;
+    registerMarqueeOnPage(opts: RegisterMarqueeOnPageOptions): () => void;
 }

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"),r=require("preact/jsx-runtime"),o=require("@embedpdf/plugin-interaction-manager/preact"),i=()=>e.useCapability(t.ZoomPlugin.id);function a(){const{provides:t}=e.useCapability("viewport"),{provides:r}=i(),o=n.useRef(null);return n.useEffect((()=>{const e=o.current;if(!e||!t||!r)return;if("undefined"==typeof window)return;let n,i=0,a={x:0,y:0};const s=()=>{e.style.transform="none",e.style.transformOrigin="0 0"},l=n=>{var o;i=r.getState().currentZoomLevel;const s=t.getBoundingRect();a={x:n.center.x-s.origin.x,y:n.center.y-s.origin.y};const l=e.getBoundingClientRect();e.style.transformOrigin=`${n.center.x-l.left}px ${n.center.y-l.top}px`,(null==(o=n.srcEvent)?void 0:o.cancelable)&&(n.srcEvent.preventDefault(),n.srcEvent.stopPropagation())},u=t=>{var n,r;r=t.scale,e.style.transform=`scale(${r})`,(null==(n=t.srcEvent)?void 0:n.cancelable)&&(t.srcEvent.preventDefault(),t.srcEvent.stopPropagation())},c=e=>{const t=(e.scale-1)*i;r.requestZoomBy(t,{vx:a.x,vy:a.y}),s(),i=0};return(async()=>{try{const t=(await Promise.resolve().then((()=>require("../hammer-Bs-QCG8V.cjs"))).then((e=>e.hammer))).default,r=(()=>{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:r}),n.get("pinch").set({enable:!0,pointers:2,threshold:.1}),n.on("pinchstart",l),n.on("pinchmove",u),n.on("pinchend",c)}catch(t){console.warn("Failed to load HammerJS:",t)}})(),()=>{null==n||n.destroy(),s()}}),[t,r]),{elementRef:o}}exports.MarqueeZoom=({pageIndex:e,scale:t,pageWidth:a,pageHeight:s,className:l,stroke:u="rgba(33,150,243,0.8)",fill:c="rgba(33,150,243,0.15)"})=>{const{provides:p}=i(),{register:d}=o.usePointerHandlers({modeId:"marqueeZoom",pageIndex:e}),g=(e,t,n)=>Math.max(t,Math.min(n,e)),h=n.useRef(null),[m,v]=n.useState(null),x=a/t,f=s/t,y=n.useMemo((()=>({onPointerDown:(e,t)=>{var n,r;h.current=e,v({origin:{x:e.x,y:e.y},size:{width:0,height:0}}),null==(r=null==(n=t.target)?void 0:n.setPointerCapture)||r.call(n,t.pointerId)},onPointerMove:e=>{if(!h.current)return;const t=g(e.x,0,x),n=g(e.y,0,f),{x:r,y:o}=h.current,i=Math.min(r,t),a=Math.min(o,n),s=Math.abs(t-r),l=Math.abs(n-o);v({origin:{x:i,y:a},size:{width:s,height:l}})},onPointerUp:(n,r)=>{var o,i;if(m&&p){Math.max(m.size.width,m.size.height)*t>5?p.zoomToArea(e,m):p.zoomIn()}h.current=null,v(null),null==(i=null==(o=r.target)?void 0:o.releasePointerCapture)||i.call(o,r.pointerId)},onPointerCancel:(e,t)=>{var n,r;h.current=null,v(null),null==(r=null==(n=t.target)?void 0:n.releasePointerCapture)||r.call(n,t.pointerId)}})),[x,x,p,t,m,e]);return n.useEffect((()=>{if(d)return d(y)}),[d,y]),m?r.jsx("div",{style:{position:"absolute",pointerEvents:"none",left:m.origin.x*t,top:m.origin.y*t,width:m.size.width*t,height:m.size.height*t,border:`1px solid ${u}`,background:c,boxSizing:"border-box"},className:l}):null},exports.PinchWrapper=function({children:e,style:t,...n}){const{elementRef:o}=a();return r.jsx("div",{ref:o,...n,style:{...t,display:"block",width:"fit-content",overflow:"visible",boxSizing:"border-box",margin:"0px auto"},children:e})},exports.usePinch=a,exports.useZoom=()=>{const{provides:e}=i(),[r,o]=n.useState(t.initialState);return n.useEffect((()=>null==e?void 0:e.onStateChange((e=>{o(e)}))),[e]),{state:r,provides:e}},exports.useZoomCapability=i,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 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);
 //# 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, useMemo, useRef, useState } from '@framework';\nimport type { PointerEventHandlers } from '@embedpdf/plugin-interaction-manager';\nimport { usePointerHandlers } from '@embedpdf/plugin-interaction-manager/@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  /** Width of the page */\n  pageWidth: number;\n  /** Height of the page */\n  pageHeight: 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\n/**\n * Draws a marquee rectangle while the user drags.\n * Hook it into the interaction-manager with modeId = 'marqueeZoom'.\n */\nexport const MarqueeZoom = ({\n  pageIndex,\n  scale,\n  pageWidth,\n  pageHeight,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  /* ------------------------------------------------------------------ */\n  /* zoom capability                                                   */\n  /* ------------------------------------------------------------------ */\n  const { provides: zoom } = useZoomCapability();\n\n  /* ------------------------------------------------------------------ */\n  /* integration with interaction-manager                               */\n  /* ------------------------------------------------------------------ */\n  const { register } = usePointerHandlers({ modeId: 'marqueeZoom', pageIndex });\n\n  /* ------------------------------------------------------------------ */\n  /* helpers                                                            */\n  /* ------------------------------------------------------------------ */\n  const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v));\n\n  /* ------------------------------------------------------------------ */\n  /* local state – start / current drag position                        */\n  /* ------------------------------------------------------------------ */\n  const startRef = useRef<{ x: number; y: number } | null>(null);\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  /* page size in **PDF-space** (unscaled) ----------------------------- */\n  const pageWidthPDF = pageWidth / scale;\n  const pageHeightPDF = pageHeight / scale;\n\n  /* ------------------------------------------------------------------ */\n  /* pointer handlers                                                   */\n  /* ------------------------------------------------------------------ */\n  const handlers = useMemo<PointerEventHandlers<PointerEvent>>(\n    () => ({\n      onPointerDown: (pos, evt) => {\n        startRef.current = pos;\n        setRect({ origin: { x: pos.x, y: pos.y }, size: { width: 0, height: 0 } });\n        (evt.target as HTMLElement)?.setPointerCapture?.(evt.pointerId);\n      },\n      onPointerMove: (pos) => {\n        if (!startRef.current) return;\n        /* clamp current position to the page bounds */\n        const curX = clamp(pos.x, 0, pageWidthPDF);\n        const curY = clamp(pos.y, 0, pageHeightPDF);\n\n        const { x: sx, y: sy } = startRef.current;\n        const left = Math.min(sx, curX);\n        const top = Math.min(sy, curY);\n        const width = Math.abs(curX - sx);\n        const height = Math.abs(curY - sy);\n\n        setRect({ origin: { x: left, y: top }, size: { width, height } });\n      },\n      onPointerUp: (_, evt) => {\n        if (rect && zoom) {\n          const dragPx = Math.max(rect.size.width, rect.size.height) * scale;\n          if (dragPx > 5) {\n            // real drag → zoom to it\n            zoom.zoomToArea(pageIndex, rect);\n          } else {\n            // tiny drag → simple zoom-in\n            zoom.zoomIn();\n          }\n        }\n\n        startRef.current = null;\n        setRect(null);\n        (evt.target as HTMLElement)?.releasePointerCapture?.(evt.pointerId);\n      },\n      onPointerCancel: (_, evt) => {\n        startRef.current = null;\n        setRect(null);\n        (evt.target as HTMLElement)?.releasePointerCapture?.(evt.pointerId);\n      },\n    }),\n    [pageWidthPDF, pageWidthPDF, zoom, scale, rect, pageIndex],\n  );\n\n  /* register with the interaction-manager */\n  useEffect(() => {\n    if (!register) return;\n    return register(handlers);\n  }, [register, handlers]);\n\n  /* ------------------------------------------------------------------ */\n  /* render                                                              */\n  /* ------------------------------------------------------------------ */\n  if (!rect) return null; // nothing to draw\n\n  return (\n    <div\n      /* Each page wrapper is position:relative, so absolute is fine */\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none', // ignore hits – underlying page still gets events\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","pageWidth","pageHeight","className","stroke","fill","zoom","register","usePointerHandlers","modeId","clamp","v","min","max","Math","startRef","rect","setRect","useState","pageWidthPDF","pageHeightPDF","handlers","useMemo","onPointerDown","pos","evt","size","width","height","_b","target","setPointerCapture","call","pointerId","onPointerMove","curX","curY","sx","sy","abs","onPointerUp","_","zoomToArea","zoomIn","releasePointerCapture","onPointerCancel","jsxRuntime","jsx","position","pointerEvents","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/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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"}

package/dist/preact/index.js

@@ -1,9 +1,8 @@
 import { useCapability, usePlugin } from "@embedpdf/core/preact";
 import { ZoomPlugin, initialState } from "@embedpdf/plugin-zoom";
 import "preact";
-import { useState, useEffect, useRef, useMemo } from "preact/hooks";
+import { useState, useEffect, useRef } from "preact/hooks";
 import { jsx } from "preact/jsx-runtime";
-import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/preact";
 const useZoomCapability = () => useCapability(ZoomPlugin.id);
 const useZoomPlugin = () => usePlugin(ZoomPlugin.id);
 const useZoom = () => {
@@ -125,65 +124,22 @@ function PinchWrapper({ children, style, ...props }) {
 const MarqueeZoom = ({
   pageIndex,
   scale,
-  pageWidth,
-  pageHeight,
   className,
   stroke = "rgba(33,150,243,0.8)",
   fill = "rgba(33,150,243,0.15)"
 }) => {
-  const { provides: zoom } = useZoomCapability();
-  const { register } = usePointerHandlers({ modeId: "marqueeZoom", pageIndex });
-  const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
-  const startRef = useRef(null);
+  const { provides: zoomPlugin } = useZoomCapability();
   const [rect, setRect] = useState(null);
-  const pageWidthPDF = pageWidth / scale;
-  const pageHeightPDF = pageHeight / scale;
-  const handlers = useMemo(
-    () => ({
-      onPointerDown: (pos, evt) => {
-        var _a, _b;
-        startRef.current = pos;
-        setRect({ origin: { x: pos.x, y: pos.y }, size: { width: 0, height: 0 } });
-        (_b = (_a = evt.target) == null ? void 0 : _a.setPointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
-      },
-      onPointerMove: (pos) => {
-        if (!startRef.current) return;
-        const curX = clamp(pos.x, 0, pageWidthPDF);
-        const curY = clamp(pos.y, 0, pageHeightPDF);
-        const { x: sx, y: sy } = startRef.current;
-        const left = Math.min(sx, curX);
-        const top = Math.min(sy, curY);
-        const width = Math.abs(curX - sx);
-        const height = Math.abs(curY - sy);
-        setRect({ origin: { x: left, y: top }, size: { width, height } });
-      },
-      onPointerUp: (_, evt) => {
-        var _a, _b;
-        if (rect && zoom) {
-          const dragPx = Math.max(rect.size.width, rect.size.height) * scale;
-          if (dragPx > 5) {
-            zoom.zoomToArea(pageIndex, rect);
-          } else {
-            zoom.zoomIn();
-          }
-        }
-        startRef.current = null;
-        setRect(null);
-        (_b = (_a = evt.target) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
-      },
-      onPointerCancel: (_, evt) => {
-        var _a, _b;
-        startRef.current = null;
-        setRect(null);
-        (_b = (_a = evt.target) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
-      }
-    }),
-    [pageWidthPDF, pageWidthPDF, zoom, scale, rect, pageIndex]
-  );
   useEffect(() => {
-    if (!register) return;
-    return register(handlers);
-  }, [register, handlers]);
+    if (!zoomPlugin) return;
+    return zoomPlugin.registerMarqueeOnPage({
+      pageIndex,
+      scale,
+      callback: {
+        onPreview: setRect
+      }
+    });
+  }, [zoomPlugin, pageIndex, scale]);
   if (!rect) return null;
   return /* @__PURE__ */ jsx(
     "div",
@@ -191,7 +147,6 @@ const MarqueeZoom = ({
       style: {
         position: "absolute",
         pointerEvents: "none",
-        // ignore hits – underlying page still gets events
         left: rect.origin.x * scale,
         top: rect.origin.y * scale,
         width: rect.size.width * scale,

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, useMemo, useRef, useState } from '@framework';\nimport type { PointerEventHandlers } from '@embedpdf/plugin-interaction-manager';\nimport { usePointerHandlers } from '@embedpdf/plugin-interaction-manager/@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  /** Width of the page */\n  pageWidth: number;\n  /** Height of the page */\n  pageHeight: 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\n/**\n * Draws a marquee rectangle while the user drags.\n * Hook it into the interaction-manager with modeId = 'marqueeZoom'.\n */\nexport const MarqueeZoom = ({\n  pageIndex,\n  scale,\n  pageWidth,\n  pageHeight,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  /* ------------------------------------------------------------------ */\n  /* zoom capability                                                   */\n  /* ------------------------------------------------------------------ */\n  const { provides: zoom } = useZoomCapability();\n\n  /* ------------------------------------------------------------------ */\n  /* integration with interaction-manager                               */\n  /* ------------------------------------------------------------------ */\n  const { register } = usePointerHandlers({ modeId: 'marqueeZoom', pageIndex });\n\n  /* ------------------------------------------------------------------ */\n  /* helpers                                                            */\n  /* ------------------------------------------------------------------ */\n  const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v));\n\n  /* ------------------------------------------------------------------ */\n  /* local state – start / current drag position                        */\n  /* ------------------------------------------------------------------ */\n  const startRef = useRef<{ x: number; y: number } | null>(null);\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  /* page size in **PDF-space** (unscaled) ----------------------------- */\n  const pageWidthPDF = pageWidth / scale;\n  const pageHeightPDF = pageHeight / scale;\n\n  /* ------------------------------------------------------------------ */\n  /* pointer handlers                                                   */\n  /* ------------------------------------------------------------------ */\n  const handlers = useMemo<PointerEventHandlers<PointerEvent>>(\n    () => ({\n      onPointerDown: (pos, evt) => {\n        startRef.current = pos;\n        setRect({ origin: { x: pos.x, y: pos.y }, size: { width: 0, height: 0 } });\n        (evt.target as HTMLElement)?.setPointerCapture?.(evt.pointerId);\n      },\n      onPointerMove: (pos) => {\n        if (!startRef.current) return;\n        /* clamp current position to the page bounds */\n        const curX = clamp(pos.x, 0, pageWidthPDF);\n        const curY = clamp(pos.y, 0, pageHeightPDF);\n\n        const { x: sx, y: sy } = startRef.current;\n        const left = Math.min(sx, curX);\n        const top = Math.min(sy, curY);\n        const width = Math.abs(curX - sx);\n        const height = Math.abs(curY - sy);\n\n        setRect({ origin: { x: left, y: top }, size: { width, height } });\n      },\n      onPointerUp: (_, evt) => {\n        if (rect && zoom) {\n          const dragPx = Math.max(rect.size.width, rect.size.height) * scale;\n          if (dragPx > 5) {\n            // real drag → zoom to it\n            zoom.zoomToArea(pageIndex, rect);\n          } else {\n            // tiny drag → simple zoom-in\n            zoom.zoomIn();\n          }\n        }\n\n        startRef.current = null;\n        setRect(null);\n        (evt.target as HTMLElement)?.releasePointerCapture?.(evt.pointerId);\n      },\n      onPointerCancel: (_, evt) => {\n        startRef.current = null;\n        setRect(null);\n        (evt.target as HTMLElement)?.releasePointerCapture?.(evt.pointerId);\n      },\n    }),\n    [pageWidthPDF, pageWidthPDF, zoom, scale, rect, pageIndex],\n  );\n\n  /* register with the interaction-manager */\n  useEffect(() => {\n    if (!register) return;\n    return register(handlers);\n  }, [register, handlers]);\n\n  /* ------------------------------------------------------------------ */\n  /* render                                                              */\n  /* ------------------------------------------------------------------ */\n  if (!rect) return null; // nothing to draw\n\n  return (\n    <div\n      /* Each page wrapper is position:relative, so absolute is fine */\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none', // ignore hits – underlying page still gets events\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/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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"}

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"),r=require("react/jsx-runtime"),o=require("@embedpdf/plugin-interaction-manager/react"),i=()=>e.useCapability(t.ZoomPlugin.id);function a(){const{provides:t}=e.useCapability("viewport"),{provides:r}=i(),o=n.useRef(null);return n.useEffect((()=>{const e=o.current;if(!e||!t||!r)return;if("undefined"==typeof window)return;let n,i=0,a={x:0,y:0};const s=()=>{e.style.transform="none",e.style.transformOrigin="0 0"},l=n=>{var o;i=r.getState().currentZoomLevel;const s=t.getBoundingRect();a={x:n.center.x-s.origin.x,y:n.center.y-s.origin.y};const l=e.getBoundingClientRect();e.style.transformOrigin=`${n.center.x-l.left}px ${n.center.y-l.top}px`,(null==(o=n.srcEvent)?void 0:o.cancelable)&&(n.srcEvent.preventDefault(),n.srcEvent.stopPropagation())},u=t=>{var n,r;r=t.scale,e.style.transform=`scale(${r})`,(null==(n=t.srcEvent)?void 0:n.cancelable)&&(t.srcEvent.preventDefault(),t.srcEvent.stopPropagation())},c=e=>{const t=(e.scale-1)*i;r.requestZoomBy(t,{vx:a.x,vy:a.y}),s(),i=0};return(async()=>{try{const t=(await Promise.resolve().then((()=>require("../hammer-Bs-QCG8V.cjs"))).then((e=>e.hammer))).default,r=(()=>{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:r}),n.get("pinch").set({enable:!0,pointers:2,threshold:.1}),n.on("pinchstart",l),n.on("pinchmove",u),n.on("pinchend",c)}catch(t){console.warn("Failed to load HammerJS:",t)}})(),()=>{null==n||n.destroy(),s()}}),[t,r]),{elementRef:o}}exports.MarqueeZoom=({pageIndex:e,scale:t,pageWidth:a,pageHeight:s,className:l,stroke:u="rgba(33,150,243,0.8)",fill:c="rgba(33,150,243,0.15)"})=>{const{provides:p}=i(),{register:d}=o.usePointerHandlers({modeId:"marqueeZoom",pageIndex:e}),g=(e,t,n)=>Math.max(t,Math.min(n,e)),h=n.useRef(null),[m,v]=n.useState(null),x=a/t,f=s/t,y=n.useMemo((()=>({onPointerDown:(e,t)=>{var n,r;h.current=e,v({origin:{x:e.x,y:e.y},size:{width:0,height:0}}),null==(r=null==(n=t.target)?void 0:n.setPointerCapture)||r.call(n,t.pointerId)},onPointerMove:e=>{if(!h.current)return;const t=g(e.x,0,x),n=g(e.y,0,f),{x:r,y:o}=h.current,i=Math.min(r,t),a=Math.min(o,n),s=Math.abs(t-r),l=Math.abs(n-o);v({origin:{x:i,y:a},size:{width:s,height:l}})},onPointerUp:(n,r)=>{var o,i;if(m&&p){Math.max(m.size.width,m.size.height)*t>5?p.zoomToArea(e,m):p.zoomIn()}h.current=null,v(null),null==(i=null==(o=r.target)?void 0:o.releasePointerCapture)||i.call(o,r.pointerId)},onPointerCancel:(e,t)=>{var n,r;h.current=null,v(null),null==(r=null==(n=t.target)?void 0:n.releasePointerCapture)||r.call(n,t.pointerId)}})),[x,x,p,t,m,e]);return n.useEffect((()=>{if(d)return d(y)}),[d,y]),m?r.jsx("div",{style:{position:"absolute",pointerEvents:"none",left:m.origin.x*t,top:m.origin.y*t,width:m.size.width*t,height:m.size.height*t,border:`1px solid ${u}`,background:c,boxSizing:"border-box"},className:l}):null},exports.PinchWrapper=function({children:e,style:t,...n}){const{elementRef:o}=a();return r.jsx("div",{ref:o,...n,style:{...t,display:"block",width:"fit-content",overflow:"visible",boxSizing:"border-box",margin:"0px auto"},children:e})},exports.usePinch=a,exports.useZoom=()=>{const{provides:e}=i(),[r,o]=n.useState(t.initialState);return n.useEffect((()=>null==e?void 0:e.onStateChange((e=>{o(e)}))),[e]),{state:r,provides:e}},exports.useZoomCapability=i,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"),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);
 //# 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, useMemo, useRef, useState } from '@framework';\nimport type { PointerEventHandlers } from '@embedpdf/plugin-interaction-manager';\nimport { usePointerHandlers } from '@embedpdf/plugin-interaction-manager/@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  /** Width of the page */\n  pageWidth: number;\n  /** Height of the page */\n  pageHeight: 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\n/**\n * Draws a marquee rectangle while the user drags.\n * Hook it into the interaction-manager with modeId = 'marqueeZoom'.\n */\nexport const MarqueeZoom = ({\n  pageIndex,\n  scale,\n  pageWidth,\n  pageHeight,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  /* ------------------------------------------------------------------ */\n  /* zoom capability                                                   */\n  /* ------------------------------------------------------------------ */\n  const { provides: zoom } = useZoomCapability();\n\n  /* ------------------------------------------------------------------ */\n  /* integration with interaction-manager                               */\n  /* ------------------------------------------------------------------ */\n  const { register } = usePointerHandlers({ modeId: 'marqueeZoom', pageIndex });\n\n  /* ------------------------------------------------------------------ */\n  /* helpers                                                            */\n  /* ------------------------------------------------------------------ */\n  const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v));\n\n  /* ------------------------------------------------------------------ */\n  /* local state – start / current drag position                        */\n  /* ------------------------------------------------------------------ */\n  const startRef = useRef<{ x: number; y: number } | null>(null);\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  /* page size in **PDF-space** (unscaled) ----------------------------- */\n  const pageWidthPDF = pageWidth / scale;\n  const pageHeightPDF = pageHeight / scale;\n\n  /* ------------------------------------------------------------------ */\n  /* pointer handlers                                                   */\n  /* ------------------------------------------------------------------ */\n  const handlers = useMemo<PointerEventHandlers<PointerEvent>>(\n    () => ({\n      onPointerDown: (pos, evt) => {\n        startRef.current = pos;\n        setRect({ origin: { x: pos.x, y: pos.y }, size: { width: 0, height: 0 } });\n        (evt.target as HTMLElement)?.setPointerCapture?.(evt.pointerId);\n      },\n      onPointerMove: (pos) => {\n        if (!startRef.current) return;\n        /* clamp current position to the page bounds */\n        const curX = clamp(pos.x, 0, pageWidthPDF);\n        const curY = clamp(pos.y, 0, pageHeightPDF);\n\n        const { x: sx, y: sy } = startRef.current;\n        const left = Math.min(sx, curX);\n        const top = Math.min(sy, curY);\n        const width = Math.abs(curX - sx);\n        const height = Math.abs(curY - sy);\n\n        setRect({ origin: { x: left, y: top }, size: { width, height } });\n      },\n      onPointerUp: (_, evt) => {\n        if (rect && zoom) {\n          const dragPx = Math.max(rect.size.width, rect.size.height) * scale;\n          if (dragPx > 5) {\n            // real drag → zoom to it\n            zoom.zoomToArea(pageIndex, rect);\n          } else {\n            // tiny drag → simple zoom-in\n            zoom.zoomIn();\n          }\n        }\n\n        startRef.current = null;\n        setRect(null);\n        (evt.target as HTMLElement)?.releasePointerCapture?.(evt.pointerId);\n      },\n      onPointerCancel: (_, evt) => {\n        startRef.current = null;\n        setRect(null);\n        (evt.target as HTMLElement)?.releasePointerCapture?.(evt.pointerId);\n      },\n    }),\n    [pageWidthPDF, pageWidthPDF, zoom, scale, rect, pageIndex],\n  );\n\n  /* register with the interaction-manager */\n  useEffect(() => {\n    if (!register) return;\n    return register(handlers);\n  }, [register, handlers]);\n\n  /* ------------------------------------------------------------------ */\n  /* render                                                              */\n  /* ------------------------------------------------------------------ */\n  if (!rect) return null; // nothing to draw\n\n  return (\n    <div\n      /* Each page wrapper is position:relative, so absolute is fine */\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none', // ignore hits – underlying page still gets events\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","pageWidth","pageHeight","className","stroke","fill","zoom","register","usePointerHandlers","modeId","clamp","v","min","max","Math","startRef","rect","setRect","useState","pageWidthPDF","pageHeightPDF","handlers","useMemo","onPointerDown","pos","evt","size","width","height","_b","target","setPointerCapture","call","pointerId","onPointerMove","curX","curY","sx","sy","abs","onPointerUp","_","zoomToArea","zoomIn","releasePointerCapture","onPointerCancel","jsxRuntime","jsx","position","pointerEvents","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/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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"}

package/dist/react/index.js

@@ -1,8 +1,7 @@
 import { useCapability, usePlugin } from "@embedpdf/core/react";
 import { ZoomPlugin, initialState } from "@embedpdf/plugin-zoom";
-import { useState, useEffect, useRef, useMemo } from "react";
+import { useState, useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/react";
 const useZoomCapability = () => useCapability(ZoomPlugin.id);
 const useZoomPlugin = () => usePlugin(ZoomPlugin.id);
 const useZoom = () => {
@@ -124,65 +123,22 @@ function PinchWrapper({ children, style, ...props }) {
 const MarqueeZoom = ({
   pageIndex,
   scale,
-  pageWidth,
-  pageHeight,
   className,
   stroke = "rgba(33,150,243,0.8)",
   fill = "rgba(33,150,243,0.15)"
 }) => {
-  const { provides: zoom } = useZoomCapability();
-  const { register } = usePointerHandlers({ modeId: "marqueeZoom", pageIndex });
-  const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
-  const startRef = useRef(null);
+  const { provides: zoomPlugin } = useZoomCapability();
   const [rect, setRect] = useState(null);
-  const pageWidthPDF = pageWidth / scale;
-  const pageHeightPDF = pageHeight / scale;
-  const handlers = useMemo(
-    () => ({
-      onPointerDown: (pos, evt) => {
-        var _a, _b;
-        startRef.current = pos;
-        setRect({ origin: { x: pos.x, y: pos.y }, size: { width: 0, height: 0 } });
-        (_b = (_a = evt.target) == null ? void 0 : _a.setPointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
-      },
-      onPointerMove: (pos) => {
-        if (!startRef.current) return;
-        const curX = clamp(pos.x, 0, pageWidthPDF);
-        const curY = clamp(pos.y, 0, pageHeightPDF);
-        const { x: sx, y: sy } = startRef.current;
-        const left = Math.min(sx, curX);
-        const top = Math.min(sy, curY);
-        const width = Math.abs(curX - sx);
-        const height = Math.abs(curY - sy);
-        setRect({ origin: { x: left, y: top }, size: { width, height } });
-      },
-      onPointerUp: (_, evt) => {
-        var _a, _b;
-        if (rect && zoom) {
-          const dragPx = Math.max(rect.size.width, rect.size.height) * scale;
-          if (dragPx > 5) {
-            zoom.zoomToArea(pageIndex, rect);
-          } else {
-            zoom.zoomIn();
-          }
-        }
-        startRef.current = null;
-        setRect(null);
-        (_b = (_a = evt.target) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
-      },
-      onPointerCancel: (_, evt) => {
-        var _a, _b;
-        startRef.current = null;
-        setRect(null);
-        (_b = (_a = evt.target) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
-      }
-    }),
-    [pageWidthPDF, pageWidthPDF, zoom, scale, rect, pageIndex]
-  );
   useEffect(() => {
-    if (!register) return;
-    return register(handlers);
-  }, [register, handlers]);
+    if (!zoomPlugin) return;
+    return zoomPlugin.registerMarqueeOnPage({
+      pageIndex,
+      scale,
+      callback: {
+        onPreview: setRect
+      }
+    });
+  }, [zoomPlugin, pageIndex, scale]);
   if (!rect) return null;
   return /* @__PURE__ */ jsx(
     "div",
@@ -190,7 +146,6 @@ const MarqueeZoom = ({
       style: {
         position: "absolute",
         pointerEvents: "none",
-        // ignore hits – underlying page still gets events
         left: rect.origin.x * scale,
         top: rect.origin.y * scale,
         width: rect.size.width * scale,

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, useMemo, useRef, useState } from '@framework';\nimport type { PointerEventHandlers } from '@embedpdf/plugin-interaction-manager';\nimport { usePointerHandlers } from '@embedpdf/plugin-interaction-manager/@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  /** Width of the page */\n  pageWidth: number;\n  /** Height of the page */\n  pageHeight: 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\n/**\n * Draws a marquee rectangle while the user drags.\n * Hook it into the interaction-manager with modeId = 'marqueeZoom'.\n */\nexport const MarqueeZoom = ({\n  pageIndex,\n  scale,\n  pageWidth,\n  pageHeight,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  /* ------------------------------------------------------------------ */\n  /* zoom capability                                                   */\n  /* ------------------------------------------------------------------ */\n  const { provides: zoom } = useZoomCapability();\n\n  /* ------------------------------------------------------------------ */\n  /* integration with interaction-manager                               */\n  /* ------------------------------------------------------------------ */\n  const { register } = usePointerHandlers({ modeId: 'marqueeZoom', pageIndex });\n\n  /* ------------------------------------------------------------------ */\n  /* helpers                                                            */\n  /* ------------------------------------------------------------------ */\n  const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v));\n\n  /* ------------------------------------------------------------------ */\n  /* local state – start / current drag position                        */\n  /* ------------------------------------------------------------------ */\n  const startRef = useRef<{ x: number; y: number } | null>(null);\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  /* page size in **PDF-space** (unscaled) ----------------------------- */\n  const pageWidthPDF = pageWidth / scale;\n  const pageHeightPDF = pageHeight / scale;\n\n  /* ------------------------------------------------------------------ */\n  /* pointer handlers                                                   */\n  /* ------------------------------------------------------------------ */\n  const handlers = useMemo<PointerEventHandlers<PointerEvent>>(\n    () => ({\n      onPointerDown: (pos, evt) => {\n        startRef.current = pos;\n        setRect({ origin: { x: pos.x, y: pos.y }, size: { width: 0, height: 0 } });\n        (evt.target as HTMLElement)?.setPointerCapture?.(evt.pointerId);\n      },\n      onPointerMove: (pos) => {\n        if (!startRef.current) return;\n        /* clamp current position to the page bounds */\n        const curX = clamp(pos.x, 0, pageWidthPDF);\n        const curY = clamp(pos.y, 0, pageHeightPDF);\n\n        const { x: sx, y: sy } = startRef.current;\n        const left = Math.min(sx, curX);\n        const top = Math.min(sy, curY);\n        const width = Math.abs(curX - sx);\n        const height = Math.abs(curY - sy);\n\n        setRect({ origin: { x: left, y: top }, size: { width, height } });\n      },\n      onPointerUp: (_, evt) => {\n        if (rect && zoom) {\n          const dragPx = Math.max(rect.size.width, rect.size.height) * scale;\n          if (dragPx > 5) {\n            // real drag → zoom to it\n            zoom.zoomToArea(pageIndex, rect);\n          } else {\n            // tiny drag → simple zoom-in\n            zoom.zoomIn();\n          }\n        }\n\n        startRef.current = null;\n        setRect(null);\n        (evt.target as HTMLElement)?.releasePointerCapture?.(evt.pointerId);\n      },\n      onPointerCancel: (_, evt) => {\n        startRef.current = null;\n        setRect(null);\n        (evt.target as HTMLElement)?.releasePointerCapture?.(evt.pointerId);\n      },\n    }),\n    [pageWidthPDF, pageWidthPDF, zoom, scale, rect, pageIndex],\n  );\n\n  /* register with the interaction-manager */\n  useEffect(() => {\n    if (!register) return;\n    return register(handlers);\n  }, [register, handlers]);\n\n  /* ------------------------------------------------------------------ */\n  /* render                                                              */\n  /* ------------------------------------------------------------------ */\n  if (!rect) return null; // nothing to draw\n\n  return (\n    <div\n      /* Each page wrapper is position:relative, so absolute is fine */\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none', // ignore hits – underlying page still gets events\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/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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"}

package/dist/shared-preact/components/marquee-zoom.d.ts

@@ -3,19 +3,11 @@ interface MarqueeZoomProps {
     pageIndex: number;
     /** Scale of the page */
     scale: number;
-    /** Width of the page */
-    pageWidth: number;
-    /** Height of the page */
-    pageHeight: number;
     /** Optional CSS class applied to the marquee rectangle */
     className?: string;
     /** Stroke / fill colours (defaults below) */
     stroke?: string;
     fill?: string;
 }
-/**
- * Draws a marquee rectangle while the user drags.
- * Hook it into the interaction-manager with modeId = 'marqueeZoom'.
- */
-export declare const MarqueeZoom: ({ pageIndex, scale, pageWidth, pageHeight, className, stroke, fill, }: MarqueeZoomProps) => import("preact").JSX.Element | null;
+export declare const MarqueeZoom: ({ pageIndex, scale, className, stroke, fill, }: MarqueeZoomProps) => import("preact").JSX.Element | null;
 export {};

package/dist/shared-react/components/marquee-zoom.d.ts

@@ -3,19 +3,11 @@ interface MarqueeZoomProps {
     pageIndex: number;
     /** Scale of the page */
     scale: number;
-    /** Width of the page */
-    pageWidth: number;
-    /** Height of the page */
-    pageHeight: number;
     /** Optional CSS class applied to the marquee rectangle */
     className?: string;
     /** Stroke / fill colours (defaults below) */
     stroke?: string;
     fill?: string;
 }
-/**
- * Draws a marquee rectangle while the user drags.
- * Hook it into the interaction-manager with modeId = 'marqueeZoom'.
- */
-export declare const MarqueeZoom: ({ pageIndex, scale, pageWidth, pageHeight, className, stroke, fill, }: MarqueeZoomProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const MarqueeZoom: ({ pageIndex, scale, className, stroke, fill, }: MarqueeZoomProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};