@embedpdf/plugin-zoom 1.5.0 → 2.0.0-next.0

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

@@ -1,9 +1,13 @@
+interface Props {
+    documentId: string;
+}
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -1,3 +1,8 @@
-export declare function usePinch(): {
+import { MaybeRefOrGetter } from 'vue';
+/**
+ * Hook for setting up pinch-to-zoom functionality on an element
+ * @param documentId Document ID (can be ref, computed, getter, or plain value)
+ */
+export declare function usePinch(documentId: MaybeRefOrGetter<string>): {
     elementRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
 };

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

@@ -1,13 +1,20 @@
-import { ZoomPlugin, ZoomState } from '../../lib/index.ts';
+import { MaybeRefOrGetter } from 'vue';
+import { ZoomPlugin } from '../../lib/index.ts';
 export declare const useZoomCapability: () => import('@embedpdf/core/vue').CapabilityState<Readonly<import('../../lib/index.ts').ZoomCapability>>;
 export declare const useZoomPlugin: () => import('@embedpdf/core/vue').PluginState<ZoomPlugin>;
-export declare const useZoom: () => {
-    state: import('vue').Ref<{
-        zoomLevel: import('../../lib/index.ts').ZoomLevel;
-        currentZoomLevel: number;
-    }, ZoomState | {
-        zoomLevel: import('../../lib/index.ts').ZoomLevel;
-        currentZoomLevel: number;
-    }>;
-    provides: import('vue').Ref<Readonly<import('../../lib/index.ts').ZoomCapability> | null, Readonly<import('../../lib/index.ts').ZoomCapability> | null>;
+/**
+ * Hook for zoom state for a specific document
+ * @param documentId Document ID (can be ref, computed, getter, or plain value)
+ */
+export declare const useZoom: (documentId: MaybeRefOrGetter<string>) => {
+    state: Readonly<import('vue').Ref<{
+        readonly zoomLevel: import('../../lib/index.ts').ZoomLevel;
+        readonly currentZoomLevel: number;
+        readonly isMarqueeZoomActive: boolean;
+    }, {
+        readonly zoomLevel: import('../../lib/index.ts').ZoomLevel;
+        readonly currentZoomLevel: number;
+        readonly isMarqueeZoomActive: boolean;
+    }>>;
+    provides: import('vue').ComputedRef<import('../../lib/index.ts').ZoomScope | null>;
 };

package/dist/vue/index.cjs

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

package/dist/vue/index.cjs.map

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

package/dist/vue/index.js

@@ -1,27 +1,44 @@
-import { ref, onMounted, onUnmounted, defineComponent, createElementBlock, createCommentVNode, openBlock, normalizeClass, normalizeStyle, mergeProps, renderSlot } from "vue";
-import { useCapability, usePlugin } from "@embedpdf/core/vue";
-import { ZoomPlugin, initialState } from "@embedpdf/plugin-zoom";
+import { ref, watch, toValue, computed, readonly, defineComponent, createElementBlock, createCommentVNode, openBlock, normalizeClass, normalizeStyle, mergeProps, renderSlot } from "vue";
+import { useCapability, usePlugin, useDocumentState } from "@embedpdf/core/vue";
+import { ZoomPlugin, initialDocumentState } from "@embedpdf/plugin-zoom";
 export * from "@embedpdf/plugin-zoom";
 const useZoomCapability = () => useCapability(ZoomPlugin.id);
 const useZoomPlugin = () => usePlugin(ZoomPlugin.id);
-const useZoom = () => {
+const useZoom = (documentId) => {
   const { provides } = useZoomCapability();
-  const state = ref(initialState);
-  onMounted(() => {
-    if (!provides.value) return;
-    const unsubscribe = provides.value.onStateChange((newState) => {
-      state.value = newState;
-    });
-    onUnmounted(() => {
-      unsubscribe();
-    });
+  const state = ref(initialDocumentState);
+  watch(
+    [provides, () => toValue(documentId)],
+    ([providesValue, docId], _, onCleanup) => {
+      if (!providesValue) {
+        state.value = initialDocumentState;
+        return;
+      }
+      const scope = providesValue.forDocument(docId);
+      state.value = scope.getState();
+      const unsubscribe = scope.onStateChange((newState) => {
+        state.value = newState;
+      });
+      onCleanup(unsubscribe);
+    },
+    { immediate: true }
+  );
+  const scopedProvides = computed(() => {
+    var _a;
+    const docId = toValue(documentId);
+    return ((_a = provides.value) == null ? void 0 : _a.forDocument(docId)) ?? null;
   });
   return {
-    state,
-    provides
+    state: readonly(state),
+    provides: scopedProvides
   };
 };
-function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
+function setupPinchZoom({
+  element,
+  documentId,
+  viewportProvides,
+  zoomProvides
+}) {
   if (typeof window === "undefined") {
     return () => {
     };
@@ -29,7 +46,9 @@ function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
   let hammer;
   let initialZoom = 0;
   let lastCenter = { x: 0, y: 0 };
-  const getState = () => zoomProvides.getState();
+  const viewportScope = viewportProvides.forDocument(documentId);
+  const zoomScope = zoomProvides.forDocument(documentId);
+  const getState = () => zoomScope.getState();
   const updateTransform = (scale) => {
     element.style.transform = `scale(${scale})`;
   };
@@ -40,7 +59,7 @@ function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
   const pinchStart = (e) => {
     var _a;
     initialZoom = getState().currentZoomLevel;
-    const contRect = viewportProvides.getBoundingRect();
+    const contRect = viewportScope.getBoundingRect();
     lastCenter = {
       x: e.center.x - contRect.origin.x,
       y: e.center.y - contRect.origin.y
@@ -62,7 +81,7 @@ function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
   };
   const pinchEnd = (e) => {
     const delta = (e.scale - 1) * initialZoom;
-    zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });
+    zoomScope.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });
     resetTransform();
     initialZoom = 0;
   };
@@ -79,7 +98,6 @@ function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
       })();
       hammer = new Hammer(element, {
         touchAction: "pan-x pan-y",
-        // allow scroll in every direction
         inputClass
       });
       hammer.get("pinch").set({ enable: true, pointers: 2, threshold: 0.1 });
@@ -96,30 +114,36 @@ function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
     resetTransform();
   };
 }
-function usePinch() {
+function usePinch(documentId) {
   const { provides: viewportProvides } = useCapability("viewport");
   const { provides: zoomProvides } = useZoomCapability();
   const elementRef = ref(null);
   let cleanup;
-  onMounted(async () => {
-    const element = elementRef.value;
-    if (!element || !viewportProvides.value || !zoomProvides.value) {
-      return;
-    }
-    cleanup = setupPinchZoom({
-      element,
-      viewportProvides: viewportProvides.value,
-      zoomProvides: zoomProvides.value
-    });
-  });
-  onUnmounted(() => {
-    cleanup == null ? void 0 : cleanup();
-  });
+  watch(
+    [elementRef, viewportProvides, zoomProvides, () => toValue(documentId)],
+    ([element, viewport, zoom, docId]) => {
+      if (cleanup) {
+        cleanup();
+        cleanup = void 0;
+      }
+      if (!element || !viewport || !zoom) {
+        return;
+      }
+      cleanup = setupPinchZoom({
+        element,
+        documentId: docId,
+        viewportProvides: viewport,
+        zoomProvides: zoom
+      });
+    },
+    { immediate: true }
+  );
   return { elementRef };
 }
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "marquee-zoom",
   props: {
+    documentId: {},
     pageIndex: {},
     scale: {},
     className: {},
@@ -129,46 +153,63 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const { provides: zoomPlugin } = useZoomCapability();
+    const documentState = useDocumentState(() => props.documentId);
     const rect = ref(null);
-    let unregister;
-    onMounted(() => {
-      if (!zoomPlugin.value) return;
-      unregister = zoomPlugin.value.registerMarqueeOnPage({
-        pageIndex: props.pageIndex,
-        scale: props.scale,
-        callback: {
-          onPreview: (newRect) => {
-            rect.value = newRect;
-          }
-        }
-      });
-    });
-    onUnmounted(() => {
-      unregister == null ? void 0 : unregister();
+    const actualScale = computed(() => {
+      var _a;
+      if (props.scale !== void 0) return props.scale;
+      return ((_a = documentState.value) == null ? void 0 : _a.scale) ?? 1;
     });
+    watch(
+      [zoomPlugin, () => props.documentId, () => props.pageIndex, actualScale],
+      ([plugin, docId, pageIdx, scale], _, onCleanup) => {
+        if (!plugin) {
+          rect.value = null;
+          return;
+        }
+        const unregister = plugin.registerMarqueeOnPage({
+          documentId: docId,
+          pageIndex: pageIdx,
+          scale,
+          callback: {
+            onPreview: (newRect) => {
+              rect.value = newRect;
+            }
+          }
+        });
+        onCleanup(() => {
+          unregister == null ? void 0 : unregister();
+        });
+      },
+      { immediate: true }
+    );
     return (_ctx, _cache) => {
       return rect.value ? (openBlock(), createElementBlock("div", {
         key: 0,
         style: normalizeStyle({
           position: "absolute",
           pointerEvents: "none",
-          left: `${rect.value.origin.x * _ctx.scale}px`,
-          top: `${rect.value.origin.y * _ctx.scale}px`,
-          width: `${rect.value.size.width * _ctx.scale}px`,
-          height: `${rect.value.size.height * _ctx.scale}px`,
-          border: `1px solid ${_ctx.stroke}`,
-          background: _ctx.fill,
+          left: `${rect.value.origin.x * actualScale.value}px`,
+          top: `${rect.value.origin.y * actualScale.value}px`,
+          width: `${rect.value.size.width * actualScale.value}px`,
+          height: `${rect.value.size.height * actualScale.value}px`,
+          border: `1px solid ${__props.stroke}`,
+          background: __props.fill,
           boxSizing: "border-box"
         }),
-        class: normalizeClass(_ctx.className)
+        class: normalizeClass(__props.className)
       }, null, 6)) : createCommentVNode("", true);
     };
   }
 });
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "pinch-wrapper",
+  props: {
+    documentId: {}
+  },
   setup(__props) {
-    const { elementRef } = usePinch();
+    const props = __props;
+    const { elementRef } = usePinch(props.documentId);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({
         ref_key: "elementRef",

package/dist/vue/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embedpdf/plugin-zoom",
-  "version": "1.5.0",
+  "version": "2.0.0-next.0",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",
@@ -36,17 +36,18 @@
   },
   "dependencies": {
     "hammerjs": "^2.0.8",
-    "@embedpdf/models": "1.5.0"
+    "@embedpdf/models": "2.0.0-next.0"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.46",
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0",
-    "@embedpdf/core": "1.5.0",
     "@embedpdf/build": "1.1.0",
-    "@embedpdf/plugin-scroll": "1.5.0",
-    "@embedpdf/plugin-viewport": "1.5.0",
-    "@embedpdf/plugin-interaction-manager": "1.5.0"
+    "@embedpdf/core": "2.0.0-next.0",
+    "@embedpdf/plugin-viewport": "2.0.0-next.0",
+    "@embedpdf/plugin-scroll": "2.0.0-next.0",
+    "@embedpdf/plugin-spread": "2.0.0-next.0",
+    "@embedpdf/plugin-interaction-manager": "2.0.0-next.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -54,10 +55,9 @@
     "preact": "^10.26.4",
     "vue": ">=3.2.0",
     "svelte": ">=5 <6",
-    "@embedpdf/core": "1.5.0",
-    "@embedpdf/plugin-scroll": "1.5.0",
-    "@embedpdf/plugin-viewport": "1.5.0",
-    "@embedpdf/plugin-interaction-manager": "1.5.0"
+    "@embedpdf/core": "2.0.0-next.0",
+    "@embedpdf/plugin-viewport": "2.0.0-next.0",
+    "@embedpdf/plugin-scroll": "2.0.0-next.0"
   },
   "files": [
     "dist",

package/dist/hammer-Bs-QCG8V.cjs

@@ -1,7 +0,0 @@
-"use strict";function t(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var e,i,n={exports:{}};
-/*! Hammer.JS - v2.0.7 - 2016-04-22
- * http://hammerjs.github.io/
- *
- * Copyright (c) 2016 Jorik Tangelder;
- * Licensed under the MIT license */const r=t((e||(e=1,i=n,function(t,e,n,r){var s,o=["","webkit","Moz","MS","ms","o"],a=e.createElement("div"),h=Math.round,u=Math.abs,c=Date.now;function l(t,e,i){return setTimeout(T(t,i),e)}function p(t,e,i){return!!Array.isArray(t)&&(f(t,i[e],i),!0)}function f(t,e,i){var n;if(t)if(t.forEach)t.forEach(e,i);else if(t.length!==r)for(n=0;n<t.length;)e.call(i,t[n],n,t),n++;else for(n in t)t.hasOwnProperty(n)&&e.call(i,t[n],n,t)}function v(e,i,n){var r="DEPRECATED METHOD: "+i+"\n"+n+" AT \n";return function(){var i=new Error("get-stack-trace"),n=i&&i.stack?i.stack.replace(/^[^\(]+?[\n$]/gm,"").replace(/^\s+at\s+/gm,"").replace(/^Object.<anonymous>\s*\(/gm,"{anonymous}()@"):"Unknown Stack Trace",s=t.console&&(t.console.warn||t.console.log);return s&&s.call(t.console,r,n),e.apply(this,arguments)}}s="function"!=typeof Object.assign?function(t){if(t===r||null===t)throw new TypeError("Cannot convert undefined or null to object");for(var e=Object(t),i=1;i<arguments.length;i++){var n=arguments[i];if(n!==r&&null!==n)for(var s in n)n.hasOwnProperty(s)&&(e[s]=n[s])}return e}:Object.assign;var d=v((function(t,e,i){for(var n=Object.keys(e),s=0;s<n.length;)(!i||i&&t[n[s]]===r)&&(t[n[s]]=e[n[s]]),s++;return t}),"extend","Use `assign`."),m=v((function(t,e){return d(t,e,!0)}),"merge","Use `assign`.");function g(t,e,i){var n,r=e.prototype;(n=t.prototype=Object.create(r)).constructor=t,n._super=r,i&&s(n,i)}function T(t,e){return function(){return t.apply(e,arguments)}}function y(t,e){return"function"==typeof t?t.apply(e&&e[0]||r,e):t}function E(t,e){return t===r?e:t}function I(t,e,i){f(S(e),(function(e){t.addEventListener(e,i,!1)}))}function _(t,e,i){f(S(e),(function(e){t.removeEventListener(e,i,!1)}))}function A(t,e){for(;t;){if(t==e)return!0;t=t.parentNode}return!1}function b(t,e){return t.indexOf(e)>-1}function S(t){return t.trim().split(/\s+/g)}function P(t,e,i){if(t.indexOf&&!i)return t.indexOf(e);for(var n=0;n<t.length;){if(i&&t[n][i]==e||!i&&t[n]===e)return n;n++}return-1}function C(t){return Array.prototype.slice.call(t,0)}function x(t,e,i){for(var n=[],r=[],s=0;s<t.length;){var o=t[s][e];P(r,o)<0&&n.push(t[s]),r[s]=o,s++}return n=n.sort((function(t,i){return t[e]>i[e]}))}function D(t,e){for(var i,n,s=e[0].toUpperCase()+e.slice(1),a=0;a<o.length;){if((n=(i=o[a])?i+s:e)in t)return n;a++}return r}var w=1;function O(e){var i=e.ownerDocument||e;return i.defaultView||i.parentWindow||t}var M="ontouchstart"in t,R=D(t,"PointerEvent")!==r,z=M&&/mobile|tablet|ip(ad|hone|od)|android/i.test(navigator.userAgent),N="touch",X="mouse",Y=24,F=["x","y"],W=["clientX","clientY"];function q(t,e){var i=this;this.manager=t,this.callback=e,this.element=t.element,this.target=t.options.inputTarget,this.domHandler=function(e){y(t.options.enable,[t])&&i.handler(e)},this.init()}function k(t,e,i){var n=i.pointers.length,s=i.changedPointers.length,o=1&e&&n-s==0,a=12&e&&n-s==0;i.isFirst=!!o,i.isFinal=!!a,o&&(t.session={}),i.eventType=e,function(t,e){var i=t.session,n=e.pointers,s=n.length;i.firstInput||(i.firstInput=H(e)),s>1&&!i.firstMultiple?i.firstMultiple=H(e):1===s&&(i.firstMultiple=!1);var o=i.firstInput,a=i.firstMultiple,h=a?a.center:o.center,l=e.center=L(n);e.timeStamp=c(),e.deltaTime=e.timeStamp-o.timeStamp,e.angle=G(h,l),e.distance=V(h,l),function(t,e){var i=e.center,n=t.offsetDelta||{},r=t.prevDelta||{},s=t.prevInput||{};1!==e.eventType&&4!==s.eventType||(r=t.prevDelta={x:s.deltaX||0,y:s.deltaY||0},n=t.offsetDelta={x:i.x,y:i.y}),e.deltaX=r.x+(i.x-n.x),e.deltaY=r.y+(i.y-n.y)}(i,e),e.offsetDirection=U(e.deltaX,e.deltaY);var p,f,v=j(e.deltaTime,e.deltaX,e.deltaY);e.overallVelocityX=v.x,e.overallVelocityY=v.y,e.overallVelocity=u(v.x)>u(v.y)?v.x:v.y,e.scale=a?(p=a.pointers,V((f=n)[0],f[1],W)/V(p[0],p[1],W)):1,e.rotation=a?function(t,e){return G(e[1],e[0],W)+G(t[1],t[0],W)}(a.pointers,n):0,e.maxPointers=i.prevInput?e.pointers.length>i.prevInput.maxPointers?e.pointers.length:i.prevInput.maxPointers:e.pointers.length,function(t,e){var i,n,s,o,a=t.lastInterval||e,h=e.timeStamp-a.timeStamp;if(8!=e.eventType&&(h>25||a.velocity===r)){var c=e.deltaX-a.deltaX,l=e.deltaY-a.deltaY,p=j(h,c,l);n=p.x,s=p.y,i=u(p.x)>u(p.y)?p.x:p.y,o=U(c,l),t.lastInterval=e}else i=a.velocity,n=a.velocityX,s=a.velocityY,o=a.direction;e.velocity=i,e.velocityX=n,e.velocityY=s,e.direction=o}(i,e);var d=t.element;A(e.srcEvent.target,d)&&(d=e.srcEvent.target),e.target=d}(t,i),t.emit("hammer.input",i),t.recognize(i),t.session.prevInput=i}function H(t){for(var e=[],i=0;i<t.pointers.length;)e[i]={clientX:h(t.pointers[i].clientX),clientY:h(t.pointers[i].clientY)},i++;return{timeStamp:c(),pointers:e,center:L(e),deltaX:t.deltaX,deltaY:t.deltaY}}function L(t){var e=t.length;if(1===e)return{x:h(t[0].clientX),y:h(t[0].clientY)};for(var i=0,n=0,r=0;r<e;)i+=t[r].clientX,n+=t[r].clientY,r++;return{x:h(i/e),y:h(n/e)}}function j(t,e,i){return{x:e/t||0,y:i/t||0}}function U(t,e){return t===e?1:u(t)>=u(e)?t<0?2:4:e<0?8:16}function V(t,e,i){i||(i=F);var n=e[i[0]]-t[i[0]],r=e[i[1]]-t[i[1]];return Math.sqrt(n*n+r*r)}function G(t,e,i){i||(i=F);var n=e[i[0]]-t[i[0]],r=e[i[1]]-t[i[1]];return 180*Math.atan2(r,n)/Math.PI}q.prototype={handler:function(){},init:function(){this.evEl&&I(this.element,this.evEl,this.domHandler),this.evTarget&&I(this.target,this.evTarget,this.domHandler),this.evWin&&I(O(this.element),this.evWin,this.domHandler)},destroy:function(){this.evEl&&_(this.element,this.evEl,this.domHandler),this.evTarget&&_(this.target,this.evTarget,this.domHandler),this.evWin&&_(O(this.element),this.evWin,this.domHandler)}};var Z={mousedown:1,mousemove:2,mouseup:4},B="mousedown",$="mousemove mouseup";function J(){this.evEl=B,this.evWin=$,this.pressed=!1,q.apply(this,arguments)}g(J,q,{handler:function(t){var e=Z[t.type];1&e&&0===t.button&&(this.pressed=!0),2&e&&1!==t.which&&(e=4),this.pressed&&(4&e&&(this.pressed=!1),this.callback(this.manager,e,{pointers:[t],changedPointers:[t],pointerType:X,srcEvent:t}))}});var K={pointerdown:1,pointermove:2,pointerup:4,pointercancel:8,pointerout:8},Q={2:N,3:"pen",4:X,5:"kinect"},tt="pointerdown",et="pointermove pointerup pointercancel";function it(){this.evEl=tt,this.evWin=et,q.apply(this,arguments),this.store=this.manager.session.pointerEvents=[]}t.MSPointerEvent&&!t.PointerEvent&&(tt="MSPointerDown",et="MSPointerMove MSPointerUp MSPointerCancel"),g(it,q,{handler:function(t){var e=this.store,i=!1,n=t.type.toLowerCase().replace("ms",""),r=K[n],s=Q[t.pointerType]||t.pointerType,o=s==N,a=P(e,t.pointerId,"pointerId");1&r&&(0===t.button||o)?a<0&&(e.push(t),a=e.length-1):12&r&&(i=!0),a<0||(e[a]=t,this.callback(this.manager,r,{pointers:e,changedPointers:[t],pointerType:s,srcEvent:t}),i&&e.splice(a,1))}});var nt={touchstart:1,touchmove:2,touchend:4,touchcancel:8};function rt(){this.evTarget="touchstart",this.evWin="touchstart touchmove touchend touchcancel",this.started=!1,q.apply(this,arguments)}function st(t,e){var i=C(t.touches),n=C(t.changedTouches);return 12&e&&(i=x(i.concat(n),"identifier")),[i,n]}g(rt,q,{handler:function(t){var e=nt[t.type];if(1===e&&(this.started=!0),this.started){var i=st.call(this,t,e);12&e&&i[0].length-i[1].length==0&&(this.started=!1),this.callback(this.manager,e,{pointers:i[0],changedPointers:i[1],pointerType:N,srcEvent:t})}}});var ot={touchstart:1,touchmove:2,touchend:4,touchcancel:8},at="touchstart touchmove touchend touchcancel";function ht(){this.evTarget=at,this.targetIds={},q.apply(this,arguments)}function ut(t,e){var i=C(t.touches),n=this.targetIds;if(3&e&&1===i.length)return n[i[0].identifier]=!0,[i,i];var r,s,o=C(t.changedTouches),a=[],h=this.target;if(s=i.filter((function(t){return A(t.target,h)})),1===e)for(r=0;r<s.length;)n[s[r].identifier]=!0,r++;for(r=0;r<o.length;)n[o[r].identifier]&&a.push(o[r]),12&e&&delete n[o[r].identifier],r++;return a.length?[x(s.concat(a),"identifier"),a]:void 0}function ct(){q.apply(this,arguments);var t=T(this.handler,this);this.touch=new ht(this.manager,t),this.mouse=new J(this.manager,t),this.primaryTouch=null,this.lastTouches=[]}function lt(t,e){1&t?(this.primaryTouch=e.changedPointers[0].identifier,pt.call(this,e)):12&t&&pt.call(this,e)}function pt(t){var e=t.changedPointers[0];if(e.identifier===this.primaryTouch){var i={x:e.clientX,y:e.clientY};this.lastTouches.push(i);var n=this.lastTouches;setTimeout((function(){var t=n.indexOf(i);t>-1&&n.splice(t,1)}),2500)}}function ft(t){for(var e=t.srcEvent.clientX,i=t.srcEvent.clientY,n=0;n<this.lastTouches.length;n++){var r=this.lastTouches[n],s=Math.abs(e-r.x),o=Math.abs(i-r.y);if(s<=25&&o<=25)return!0}return!1}g(ht,q,{handler:function(t){var e=ot[t.type],i=ut.call(this,t,e);i&&this.callback(this.manager,e,{pointers:i[0],changedPointers:i[1],pointerType:N,srcEvent:t})}}),g(ct,q,{handler:function(t,e,i){var n=i.pointerType==N,r=i.pointerType==X;if(!(r&&i.sourceCapabilities&&i.sourceCapabilities.firesTouchEvents)){if(n)lt.call(this,e,i);else if(r&&ft.call(this,i))return;this.callback(t,e,i)}},destroy:function(){this.touch.destroy(),this.mouse.destroy()}});var vt=D(a.style,"touchAction"),dt=vt!==r,mt="compute",gt="auto",Tt="manipulation",yt="none",Et="pan-x",It="pan-y",_t=function(){if(!dt)return!1;var e={},i=t.CSS&&t.CSS.supports;return["auto","manipulation","pan-y","pan-x","pan-x pan-y","none"].forEach((function(n){e[n]=!i||t.CSS.supports("touch-action",n)})),e}();function At(t,e){this.manager=t,this.set(e)}At.prototype={set:function(t){t==mt&&(t=this.compute()),dt&&this.manager.element.style&&_t[t]&&(this.manager.element.style[vt]=t),this.actions=t.toLowerCase().trim()},update:function(){this.set(this.manager.options.touchAction)},compute:function(){var t=[];return f(this.manager.recognizers,(function(e){y(e.options.enable,[e])&&(t=t.concat(e.getTouchAction()))})),function(t){if(b(t,yt))return yt;var e=b(t,Et),i=b(t,It);return e&&i?yt:e||i?e?Et:It:b(t,Tt)?Tt:gt}(t.join(" "))},preventDefaults:function(t){var e=t.srcEvent,i=t.offsetDirection;if(this.manager.session.prevented)e.preventDefault();else{var n=this.actions,r=b(n,yt)&&!_t[yt],s=b(n,It)&&!_t[It],o=b(n,Et)&&!_t[Et];if(r){var a=1===t.pointers.length,h=t.distance<2,u=t.deltaTime<250;if(a&&h&&u)return}if(!o||!s)return r||s&&6&i||o&&i&Y?this.preventSrc(e):void 0}},preventSrc:function(t){this.manager.session.prevented=!0,t.preventDefault()}};var bt=32;function St(t){this.options=s({},this.defaults,t||{}),this.id=w++,this.manager=null,this.options.enable=E(this.options.enable,!0),this.state=1,this.simultaneous={},this.requireFail=[]}function Pt(t){return 16&t?"cancel":8&t?"end":4&t?"move":2&t?"start":""}function Ct(t){return 16==t?"down":8==t?"up":2==t?"left":4==t?"right":""}function xt(t,e){var i=e.manager;return i?i.get(t):t}function Dt(){St.apply(this,arguments)}function wt(){Dt.apply(this,arguments),this.pX=null,this.pY=null}function Ot(){Dt.apply(this,arguments)}function Mt(){St.apply(this,arguments),this._timer=null,this._input=null}function Rt(){Dt.apply(this,arguments)}function zt(){Dt.apply(this,arguments)}function Nt(){St.apply(this,arguments),this.pTime=!1,this.pCenter=!1,this._timer=null,this._input=null,this.count=0}function Xt(t,e){return(e=e||{}).recognizers=E(e.recognizers,Xt.defaults.preset),new Yt(t,e)}function Yt(t,e){var i;this.options=s({},Xt.defaults,e||{}),this.options.inputTarget=this.options.inputTarget||t,this.handlers={},this.session={},this.recognizers=[],this.oldCssProps={},this.element=t,this.input=new((i=this).options.inputClass||(R?it:z?ht:M?ct:J))(i,k),this.touchAction=new At(this,this.options.touchAction),Ft(this,!0),f(this.options.recognizers,(function(t){var e=this.add(new t[0](t[1]));t[2]&&e.recognizeWith(t[2]),t[3]&&e.requireFailure(t[3])}),this)}function Ft(t,e){var i,n=t.element;n.style&&(f(t.options.cssProps,(function(r,s){i=D(n.style,s),e?(t.oldCssProps[i]=n.style[i],n.style[i]=r):n.style[i]=t.oldCssProps[i]||""})),e||(t.oldCssProps={}))}St.prototype={defaults:{},set:function(t){return s(this.options,t),this.manager&&this.manager.touchAction.update(),this},recognizeWith:function(t){if(p(t,"recognizeWith",this))return this;var e=this.simultaneous;return e[(t=xt(t,this)).id]||(e[t.id]=t,t.recognizeWith(this)),this},dropRecognizeWith:function(t){return p(t,"dropRecognizeWith",this)||(t=xt(t,this),delete this.simultaneous[t.id]),this},requireFailure:function(t){if(p(t,"requireFailure",this))return this;var e=this.requireFail;return-1===P(e,t=xt(t,this))&&(e.push(t),t.requireFailure(this)),this},dropRequireFailure:function(t){if(p(t,"dropRequireFailure",this))return this;t=xt(t,this);var e=P(this.requireFail,t);return e>-1&&this.requireFail.splice(e,1),this},hasRequireFailures:function(){return this.requireFail.length>0},canRecognizeWith:function(t){return!!this.simultaneous[t.id]},emit:function(t){var e=this,i=this.state;function n(i){e.manager.emit(i,t)}i<8&&n(e.options.event+Pt(i)),n(e.options.event),t.additionalEvent&&n(t.additionalEvent),i>=8&&n(e.options.event+Pt(i))},tryEmit:function(t){if(this.canEmit())return this.emit(t);this.state=bt},canEmit:function(){for(var t=0;t<this.requireFail.length;){if(!(33&this.requireFail[t].state))return!1;t++}return!0},recognize:function(t){var e=s({},t);if(!y(this.options.enable,[this,e]))return this.reset(),void(this.state=bt);56&this.state&&(this.state=1),this.state=this.process(e),30&this.state&&this.tryEmit(e)},process:function(t){},getTouchAction:function(){},reset:function(){}},g(Dt,St,{defaults:{pointers:1},attrTest:function(t){var e=this.options.pointers;return 0===e||t.pointers.length===e},process:function(t){var e=this.state,i=t.eventType,n=6&e,r=this.attrTest(t);return n&&(8&i||!r)?16|e:n||r?4&i?8|e:2&e?4|e:2:bt}}),g(wt,Dt,{defaults:{event:"pan",threshold:10,pointers:1,direction:30},getTouchAction:function(){var t=this.options.direction,e=[];return 6&t&&e.push(It),t&Y&&e.push(Et),e},directionTest:function(t){var e=this.options,i=!0,n=t.distance,r=t.direction,s=t.deltaX,o=t.deltaY;return r&e.direction||(6&e.direction?(r=0===s?1:s<0?2:4,i=s!=this.pX,n=Math.abs(t.deltaX)):(r=0===o?1:o<0?8:16,i=o!=this.pY,n=Math.abs(t.deltaY))),t.direction=r,i&&n>e.threshold&&r&e.direction},attrTest:function(t){return Dt.prototype.attrTest.call(this,t)&&(2&this.state||!(2&this.state)&&this.directionTest(t))},emit:function(t){this.pX=t.deltaX,this.pY=t.deltaY;var e=Ct(t.direction);e&&(t.additionalEvent=this.options.event+e),this._super.emit.call(this,t)}}),g(Ot,Dt,{defaults:{event:"pinch",threshold:0,pointers:2},getTouchAction:function(){return[yt]},attrTest:function(t){return this._super.attrTest.call(this,t)&&(Math.abs(t.scale-1)>this.options.threshold||2&this.state)},emit:function(t){if(1!==t.scale){var e=t.scale<1?"in":"out";t.additionalEvent=this.options.event+e}this._super.emit.call(this,t)}}),g(Mt,St,{defaults:{event:"press",pointers:1,time:251,threshold:9},getTouchAction:function(){return[gt]},process:function(t){var e=this.options,i=t.pointers.length===e.pointers,n=t.distance<e.threshold,r=t.deltaTime>e.time;if(this._input=t,!n||!i||12&t.eventType&&!r)this.reset();else if(1&t.eventType)this.reset(),this._timer=l((function(){this.state=8,this.tryEmit()}),e.time,this);else if(4&t.eventType)return 8;return bt},reset:function(){clearTimeout(this._timer)},emit:function(t){8===this.state&&(t&&4&t.eventType?this.manager.emit(this.options.event+"up",t):(this._input.timeStamp=c(),this.manager.emit(this.options.event,this._input)))}}),g(Rt,Dt,{defaults:{event:"rotate",threshold:0,pointers:2},getTouchAction:function(){return[yt]},attrTest:function(t){return this._super.attrTest.call(this,t)&&(Math.abs(t.rotation)>this.options.threshold||2&this.state)}}),g(zt,Dt,{defaults:{event:"swipe",threshold:10,velocity:.3,direction:30,pointers:1},getTouchAction:function(){return wt.prototype.getTouchAction.call(this)},attrTest:function(t){var e,i=this.options.direction;return 30&i?e=t.overallVelocity:6&i?e=t.overallVelocityX:i&Y&&(e=t.overallVelocityY),this._super.attrTest.call(this,t)&&i&t.offsetDirection&&t.distance>this.options.threshold&&t.maxPointers==this.options.pointers&&u(e)>this.options.velocity&&4&t.eventType},emit:function(t){var e=Ct(t.offsetDirection);e&&this.manager.emit(this.options.event+e,t),this.manager.emit(this.options.event,t)}}),g(Nt,St,{defaults:{event:"tap",pointers:1,taps:1,interval:300,time:250,threshold:9,posThreshold:10},getTouchAction:function(){return[Tt]},process:function(t){var e=this.options,i=t.pointers.length===e.pointers,n=t.distance<e.threshold,r=t.deltaTime<e.time;if(this.reset(),1&t.eventType&&0===this.count)return this.failTimeout();if(n&&r&&i){if(4!=t.eventType)return this.failTimeout();var s=!this.pTime||t.timeStamp-this.pTime<e.interval,o=!this.pCenter||V(this.pCenter,t.center)<e.posThreshold;if(this.pTime=t.timeStamp,this.pCenter=t.center,o&&s?this.count+=1:this.count=1,this._input=t,0==this.count%e.taps)return this.hasRequireFailures()?(this._timer=l((function(){this.state=8,this.tryEmit()}),e.interval,this),2):8}return bt},failTimeout:function(){return this._timer=l((function(){this.state=bt}),this.options.interval,this),bt},reset:function(){clearTimeout(this._timer)},emit:function(){8==this.state&&(this._input.tapCount=this.count,this.manager.emit(this.options.event,this._input))}}),Xt.VERSION="2.0.7",Xt.defaults={domEvents:!1,touchAction:mt,enable:!0,inputTarget:null,inputClass:null,preset:[[Rt,{enable:!1}],[Ot,{enable:!1},["rotate"]],[zt,{direction:6}],[wt,{direction:6},["swipe"]],[Nt],[Nt,{event:"doubletap",taps:2},["tap"]],[Mt]],cssProps:{userSelect:"none",touchSelect:"none",touchCallout:"none",contentZooming:"none",userDrag:"none",tapHighlightColor:"rgba(0,0,0,0)"}},Yt.prototype={set:function(t){return s(this.options,t),t.touchAction&&this.touchAction.update(),t.inputTarget&&(this.input.destroy(),this.input.target=t.inputTarget,this.input.init()),this},stop:function(t){this.session.stopped=t?2:1},recognize:function(t){var e=this.session;if(!e.stopped){var i;this.touchAction.preventDefaults(t);var n=this.recognizers,r=e.curRecognizer;(!r||r&&8&r.state)&&(r=e.curRecognizer=null);for(var s=0;s<n.length;)i=n[s],2===e.stopped||r&&i!=r&&!i.canRecognizeWith(r)?i.reset():i.recognize(t),!r&&14&i.state&&(r=e.curRecognizer=i),s++}},get:function(t){if(t instanceof St)return t;for(var e=this.recognizers,i=0;i<e.length;i++)if(e[i].options.event==t)return e[i];return null},add:function(t){if(p(t,"add",this))return this;var e=this.get(t.options.event);return e&&this.remove(e),this.recognizers.push(t),t.manager=this,this.touchAction.update(),t},remove:function(t){if(p(t,"remove",this))return this;if(t=this.get(t)){var e=this.recognizers,i=P(e,t);-1!==i&&(e.splice(i,1),this.touchAction.update())}return this},on:function(t,e){if(t!==r&&e!==r){var i=this.handlers;return f(S(t),(function(t){i[t]=i[t]||[],i[t].push(e)})),this}},off:function(t,e){if(t!==r){var i=this.handlers;return f(S(t),(function(t){e?i[t]&&i[t].splice(P(i[t],e),1):delete i[t]})),this}},emit:function(t,i){this.options.domEvents&&function(t,i){var n=e.createEvent("Event");n.initEvent(t,!0,!0),n.gesture=i,i.target.dispatchEvent(n)}(t,i);var n=this.handlers[t]&&this.handlers[t].slice();if(n&&n.length){i.type=t,i.preventDefault=function(){i.srcEvent.preventDefault()};for(var r=0;r<n.length;)n[r](i),r++}},destroy:function(){this.element&&Ft(this,!1),this.handlers={},this.session={},this.input.destroy(),this.element=null}},s(Xt,{INPUT_START:1,INPUT_MOVE:2,INPUT_END:4,INPUT_CANCEL:8,STATE_POSSIBLE:1,STATE_BEGAN:2,STATE_CHANGED:4,STATE_ENDED:8,STATE_RECOGNIZED:8,STATE_CANCELLED:16,STATE_FAILED:bt,DIRECTION_NONE:1,DIRECTION_LEFT:2,DIRECTION_RIGHT:4,DIRECTION_UP:8,DIRECTION_DOWN:16,DIRECTION_HORIZONTAL:6,DIRECTION_VERTICAL:Y,DIRECTION_ALL:30,Manager:Yt,Input:q,TouchAction:At,TouchInput:ht,MouseInput:J,PointerEventInput:it,TouchMouseInput:ct,SingleTouchInput:rt,Recognizer:St,AttrRecognizer:Dt,Tap:Nt,Pan:wt,Swipe:zt,Pinch:Ot,Rotate:Rt,Press:Mt,on:I,off:_,each:f,merge:m,extend:d,assign:s,inherit:g,bindFn:T,prefixed:D}),(void 0!==t?t:"undefined"!=typeof self?self:{}).Hammer=Xt,i.exports?i.exports=Xt:t.Hammer=Xt}(window,document)),n.exports)),s=Object.freeze(Object.defineProperty({__proto__:null,default:r},Symbol.toStringTag,{value:"Module"}));exports.hammer=s;
-//# sourceMappingURL=hammer-Bs-QCG8V.cjs.map