@embedpdf/plugin-zoom 2.0.0-next.3 → 2.0.0

package/dist/svelte/index.js

@@ -2,6 +2,7 @@ import * as $ from "svelte/internal/client";
 import { useCapability, usePlugin, useDocumentState } from "@embedpdf/core/svelte";
 import { ZoomPlugin, initialDocumentState } from "@embedpdf/plugin-zoom";
 export * from "@embedpdf/plugin-zoom";
+import { getContext } from "svelte";
 import "svelte/internal/disclose-version";
 const useZoomCapability = () => useCapability(ZoomPlugin.id);
 const useZoomPlugin = () => usePlugin(ZoomPlugin.id);
@@ -32,110 +33,249 @@ const useZoom = (getDocumentId) => {
     }
   };
 };
-function setupPinchZoom({
+function getTouchDistance(touches) {
+  const [t1, t2] = [touches[0], touches[1]];
+  const dx = t2.clientX - t1.clientX;
+  const dy = t2.clientY - t1.clientY;
+  return Math.hypot(dx, dy);
+}
+function getTouchCenter(touches) {
+  const [t1, t2] = [touches[0], touches[1]];
+  return {
+    x: (t1.clientX + t2.clientX) / 2,
+    y: (t1.clientY + t2.clientY) / 2
+  };
+}
+function setupZoomGestures({
   element,
+  container,
   documentId,
-  viewportProvides,
-  zoomProvides
+  zoomProvides,
+  viewportGap = 0,
+  options = {}
 }) {
+  const { enablePinch = true, enableWheel = true } = options;
   if (typeof window === "undefined") {
     return () => {
     };
   }
-  let hammer;
-  let initialZoom = 0;
-  let lastCenter = { x: 0, y: 0 };
-  const viewportScope = viewportProvides.forDocument(documentId);
   const zoomScope = zoomProvides.forDocument(documentId);
   const getState = () => zoomScope.getState();
+  let initialZoom = 0;
+  let currentScale = 1;
+  let isPinching = false;
+  let initialDistance = 0;
+  let wheelZoomTimeout = null;
+  let accumulatedWheelScale = 1;
+  let initialElementWidth = 0;
+  let initialElementHeight = 0;
+  let initialElementLeft = 0;
+  let initialElementTop = 0;
+  let containerRectWidth = 0;
+  let containerRectHeight = 0;
+  let layoutWidth = 0;
+  let layoutCenterX = 0;
+  let pointerLocalY = 0;
+  let pointerContainerX = 0;
+  let pointerContainerY = 0;
+  let currentGap = 0;
+  let pivotLocalX = 0;
+  const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
+  const updateMargin = () => {
+    const availableWidth = container.clientWidth - 2 * viewportGap;
+    const elementWidth = element.offsetWidth;
+    const newMargin = elementWidth < availableWidth ? (availableWidth - elementWidth) / 2 : 0;
+    element.style.marginLeft = `${newMargin}px`;
+  };
+  const calculateTransform = (scale) => {
+    const finalWidth = initialElementWidth * scale;
+    const finalHeight = initialElementHeight * scale;
+    let ty = pointerLocalY * (1 - scale);
+    const targetX = layoutCenterX - finalWidth / 2;
+    const txCenter = targetX - initialElementLeft;
+    const txMouse = pointerContainerX - pivotLocalX * scale - initialElementLeft;
+    const overflow = Math.max(0, finalWidth - layoutWidth);
+    const blendRange = layoutWidth * 0.3;
+    const blend = Math.min(1, overflow / blendRange);
+    let tx = txCenter + (txMouse - txCenter) * blend;
+    const safeHeight = containerRectHeight - currentGap * 2;
+    if (finalHeight > safeHeight) {
+      const currentTop = initialElementTop + ty;
+      const maxTop = currentGap;
+      const minTop = containerRectHeight - currentGap - finalHeight;
+      const constrainedTop = clamp(currentTop, minTop, maxTop);
+      ty = constrainedTop - initialElementTop;
+    }
+    const safeWidth = containerRectWidth - currentGap * 2;
+    if (finalWidth > safeWidth) {
+      const currentLeft = initialElementLeft + tx;
+      const maxLeft = currentGap;
+      const minLeft = containerRectWidth - currentGap - finalWidth;
+      const constrainedLeft = clamp(currentLeft, minLeft, maxLeft);
+      tx = constrainedLeft - initialElementLeft;
+    }
+    return { tx, ty, blend, finalWidth };
+  };
   const updateTransform = (scale) => {
-    element.style.transform = `scale(${scale})`;
+    currentScale = scale;
+    const { tx, ty } = calculateTransform(scale);
+    element.style.transformOrigin = "0 0";
+    element.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
   };
   const resetTransform = () => {
     element.style.transform = "none";
     element.style.transformOrigin = "0 0";
+    currentScale = 1;
   };
-  const pinchStart = (e) => {
-    var _a;
-    initialZoom = getState().currentZoomLevel;
-    const contRect = viewportScope.getBoundingRect();
-    lastCenter = {
-      x: e.center.x - contRect.origin.x,
-      y: e.center.y - contRect.origin.y
-    };
-    const innerRect = element.getBoundingClientRect();
-    element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;
-    if ((_a = e.srcEvent) == null ? void 0 : _a.cancelable) {
-      e.srcEvent.preventDefault();
-      e.srcEvent.stopPropagation();
+  const commitZoom = () => {
+    const { tx, finalWidth } = calculateTransform(currentScale);
+    const delta = (currentScale - 1) * initialZoom;
+    let anchorX;
+    let anchorY = pointerContainerY;
+    if (finalWidth <= layoutWidth) {
+      anchorX = layoutCenterX;
+    } else {
+      const scaleDiff = 1 - currentScale;
+      anchorX = Math.abs(scaleDiff) > 1e-3 ? initialElementLeft + tx / scaleDiff : pointerContainerX;
     }
+    zoomScope.requestZoomBy(delta, { vx: anchorX, vy: anchorY });
+    resetTransform();
+    initialZoom = 0;
   };
-  const pinchMove = (e) => {
-    var _a;
-    updateTransform(e.scale);
-    if ((_a = e.srcEvent) == null ? void 0 : _a.cancelable) {
-      e.srcEvent.preventDefault();
-      e.srcEvent.stopPropagation();
+  const initializeGestureState = (clientX, clientY) => {
+    const containerRect = container.getBoundingClientRect();
+    const innerRect = element.getBoundingClientRect();
+    currentGap = viewportGap;
+    initialElementWidth = innerRect.width;
+    initialElementHeight = innerRect.height;
+    initialElementLeft = innerRect.left - containerRect.left;
+    initialElementTop = innerRect.top - containerRect.top;
+    containerRectWidth = containerRect.width;
+    containerRectHeight = containerRect.height;
+    layoutWidth = container.clientWidth;
+    layoutCenterX = container.clientLeft + layoutWidth / 2;
+    const rawPointerLocalX = clientX - innerRect.left;
+    pointerLocalY = clientY - innerRect.top;
+    pointerContainerX = clientX - containerRect.left;
+    pointerContainerY = clientY - containerRect.top;
+    if (initialElementWidth < layoutWidth) {
+      pivotLocalX = pointerContainerX * initialElementWidth / layoutWidth;
+    } else {
+      pivotLocalX = rawPointerLocalX;
     }
   };
-  const pinchEnd = (e) => {
-    const delta = (e.scale - 1) * initialZoom;
-    zoomScope.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });
-    resetTransform();
-    initialZoom = 0;
+  const handleTouchStart = (e) => {
+    if (e.touches.length !== 2) return;
+    isPinching = true;
+    initialZoom = getState().currentZoomLevel;
+    initialDistance = getTouchDistance(e.touches);
+    const center = getTouchCenter(e.touches);
+    initializeGestureState(center.x, center.y);
+    e.preventDefault();
   };
-  const setupHammer = async () => {
-    try {
-      const Hammer = (await import("../hammer-e1aXHboh.js").then((n) => n.h)).default;
-      const inputClass = (() => {
-        const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
-        const SUPPORT_TOUCH = "ontouchstart" in window || navigator.maxTouchPoints > 0;
-        const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);
-        if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;
-        if (!SUPPORT_TOUCH) return Hammer.MouseInput;
-        return Hammer.TouchMouseInput;
-      })();
-      hammer = new Hammer(element, {
-        touchAction: "pan-x pan-y",
-        inputClass
-      });
-      hammer.get("pinch").set({ enable: true, pointers: 2, threshold: 0.1 });
-      hammer.on("pinchstart", pinchStart);
-      hammer.on("pinchmove", pinchMove);
-      hammer.on("pinchend", pinchEnd);
-    } catch (error) {
-      console.warn("Failed to load HammerJS:", error);
+  const handleTouchMove = (e) => {
+    if (!isPinching || e.touches.length !== 2) return;
+    const currentDistance = getTouchDistance(e.touches);
+    const scale = currentDistance / initialDistance;
+    updateTransform(scale);
+    e.preventDefault();
+  };
+  const handleTouchEnd = (e) => {
+    if (!isPinching) return;
+    if (e.touches.length >= 2) return;
+    isPinching = false;
+    commitZoom();
+  };
+  const handleWheel = (e) => {
+    if (!e.ctrlKey && !e.metaKey) return;
+    e.preventDefault();
+    if (wheelZoomTimeout === null) {
+      initialZoom = getState().currentZoomLevel;
+      accumulatedWheelScale = 1;
+      initializeGestureState(e.clientX, e.clientY);
+    } else {
+      clearTimeout(wheelZoomTimeout);
     }
+    const zoomFactor = 1 - e.deltaY * 0.01;
+    accumulatedWheelScale *= zoomFactor;
+    accumulatedWheelScale = Math.max(0.1, Math.min(10, accumulatedWheelScale));
+    updateTransform(accumulatedWheelScale);
+    wheelZoomTimeout = setTimeout(() => {
+      wheelZoomTimeout = null;
+      commitZoom();
+      accumulatedWheelScale = 1;
+    }, 150);
   };
-  setupHammer();
+  const unsubZoom = zoomScope.onStateChange(() => updateMargin());
+  const resizeObserver = new ResizeObserver(() => updateMargin());
+  resizeObserver.observe(element);
+  resizeObserver.observe(container);
+  updateMargin();
+  if (enablePinch) {
+    container.addEventListener("touchstart", handleTouchStart, { passive: false });
+    container.addEventListener("touchmove", handleTouchMove, { passive: false });
+    container.addEventListener("touchend", handleTouchEnd);
+    container.addEventListener("touchcancel", handleTouchEnd);
+  }
+  if (enableWheel) {
+    container.addEventListener("wheel", handleWheel, { passive: false });
+  }
   return () => {
-    hammer == null ? void 0 : hammer.destroy();
+    if (enablePinch) {
+      container.removeEventListener("touchstart", handleTouchStart);
+      container.removeEventListener("touchmove", handleTouchMove);
+      container.removeEventListener("touchend", handleTouchEnd);
+      container.removeEventListener("touchcancel", handleTouchEnd);
+    }
+    if (enableWheel) {
+      container.removeEventListener("wheel", handleWheel);
+    }
+    if (wheelZoomTimeout) {
+      clearTimeout(wheelZoomTimeout);
+    }
+    unsubZoom();
+    resizeObserver.disconnect();
     resetTransform();
+    element.style.marginLeft = "";
   };
 }
-function usePinch(getDocumentId) {
+function useZoomGesture(getDocumentId, options = {}) {
   const viewportCapability = useCapability("viewport");
   const zoomCapability = useZoomCapability();
+  const viewportElementCtx = getContext("viewport-element");
   let elementRef = $.state(null);
   let cleanup;
   const documentId = $.derived(getDocumentId);
+  const enablePinch = $.derived(() => {
+    var _a;
+    return ((_a = options.enablePinch) == null ? void 0 : _a.call(options)) ?? true;
+  });
+  const enableWheel = $.derived(() => {
+    var _a;
+    return ((_a = options.enableWheel) == null ? void 0 : _a.call(options)) ?? true;
+  });
   $.user_effect(() => {
     const element = $.get(elementRef);
+    const container = viewportElementCtx == null ? void 0 : viewportElementCtx.current;
     const viewport = viewportCapability.provides;
     const zoom = zoomCapability.provides;
     const docId = $.get(documentId);
+    const pinchEnabled = $.get(enablePinch);
+    const wheelEnabled = $.get(enableWheel);
     if (cleanup) {
       cleanup();
       cleanup = void 0;
     }
-    if (!element || !viewport || !zoom || !docId) {
+    if (!element || !container || !zoom || !docId) {
       return;
     }
-    cleanup = setupPinchZoom({
+    cleanup = setupZoomGestures({
       element,
+      container,
       documentId: docId,
-      viewportProvides: viewport,
-      zoomProvides: zoom
+      zoomProvides: zoom,
+      viewportGap: (viewport == null ? void 0 : viewport.getViewportGap()) || 0,
+      options: { enablePinch: pinchEnabled, enableWheel: wheelEnabled }
     });
     return () => {
       if (cleanup) {
@@ -210,42 +350,45 @@ function MarqueeZoom($$anchor, $$props) {
   $.pop();
 }
 var root = $.from_html(`<div><!></div>`);
-function PinchWrapper($$anchor, $$props) {
+function ZoomGestureWrapper($$anchor, $$props) {
   $.push($$props, true);
-  let restProps = $.rest_props($$props, [
+  let enablePinch = $.prop($$props, "enablePinch", 3, true), enableWheel = $.prop($$props, "enableWheel", 3, true), restProps = $.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "documentId",
     "children",
-    "class"
+    "class",
+    "enablePinch",
+    "enableWheel"
   ]);
-  const pinch = usePinch(() => $$props.documentId);
+  const zoomGesture = useZoomGesture(() => $$props.documentId, {
+    enablePinch: () => enablePinch(),
+    enableWheel: () => enableWheel()
+  });
   var div = root();
   $.attribute_effect(div, () => ({
     ...restProps,
     class: $$props.class,
     [$.STYLE]: {
-      display: "block",
-      width: "fit-content",
+      display: "inline-block",
       overflow: "visible",
-      "box-sizing": "border-box",
-      margin: "0px auto"
+      "box-sizing": "border-box"
     }
   }));
   var node = $.child(div);
   $.snippet(node, () => $$props.children);
   $.reset(div);
-  $.bind_this(div, ($$value) => pinch.elementRef = $$value, () => pinch == null ? void 0 : pinch.elementRef);
+  $.bind_this(div, ($$value) => zoomGesture.elementRef = $$value, () => zoomGesture == null ? void 0 : zoomGesture.elementRef);
   $.append($$anchor, div);
   $.pop();
 }
 export {
   MarqueeZoom,
-  PinchWrapper,
-  usePinch,
+  ZoomGestureWrapper,
   useZoom,
   useZoomCapability,
+  useZoomGesture,
   useZoomPlugin
 };
 //# sourceMappingURL=index.js.map

package/dist/svelte/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-zoom.svelte.ts","../../src/shared/utils/pinch-zoom-logic.ts","../../src/svelte/hooks/use-pinch-zoom.svelte.ts","../../src/svelte/components/MarqueeZoom.svelte","../../src/svelte/components/PinchWrapper.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport {\n  initialDocumentState,\n  ZoomDocumentState,\n  ZoomPlugin,\n  ZoomScope,\n} from '@embedpdf/plugin-zoom';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseZoomReturn {\n  provides: ZoomScope | null;\n  state: ZoomDocumentState;\n}\n\n/**\n * Hook for zoom state for a specific document\n * @param getDocumentId Function that returns the document ID\n */\nexport const useZoom = (getDocumentId: () => string | null): UseZoomReturn => {\n  const capability = useZoomCapability();\n\n  let state = $state<ZoomDocumentState>(initialDocumentState);\n\n  // Reactive documentId\n  const documentId = $derived(getDocumentId());\n\n  // Scoped capability for current docId\n  const scopedProvides = $derived(\n    capability.provides && documentId ? capability.provides.forDocument(documentId) : null,\n  );\n\n  $effect(() => {\n    const provides = capability.provides;\n    const docId = documentId;\n\n    if (!provides || !docId) {\n      state = initialDocumentState;\n      return;\n    }\n\n    const scope = provides.forDocument(docId);\n\n    // Get initial state\n    state = scope.getState();\n\n    // Subscribe to state changes for this document\n    return scope.onStateChange((newState) => {\n      state = newState;\n    });\n  });\n\n  return {\n    get provides() {\n      return scopedProvides;\n    },\n    get state() {\n      return state;\n    },\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 { useCapability } from '@embedpdf/core/svelte';\nimport type { ViewportPlugin } from '@embedpdf/plugin-viewport';\nimport { setupPinchZoom } from '../../shared/utils/pinch-zoom-logic';\nimport { useZoomCapability } from './use-zoom.svelte';\n\n/**\n * Hook for setting up pinch-to-zoom functionality on an element\n * @param getDocumentId Function that returns the document ID\n */\nexport function usePinch(getDocumentId: () => string | null) {\n  const viewportCapability = useCapability<ViewportPlugin>('viewport');\n  const zoomCapability = useZoomCapability();\n\n  let elementRef = $state<HTMLDivElement | null>(null);\n  let cleanup: (() => void) | undefined;\n\n  // Reactive documentId\n  const documentId = $derived(getDocumentId());\n\n  $effect(() => {\n    const element = elementRef;\n    const viewport = viewportCapability.provides;\n    const zoom = zoomCapability.provides;\n    const docId = documentId;\n\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 || !docId) {\n      return;\n    }\n\n    cleanup = setupPinchZoom({\n      element,\n      documentId: docId,\n      viewportProvides: viewport,\n      zoomProvides: zoom,\n    });\n\n    return () => {\n      if (cleanup) {\n        cleanup();\n        cleanup = undefined;\n      }\n    };\n  });\n\n  return {\n    get elementRef() {\n      return elementRef;\n    },\n    set elementRef(value: HTMLDivElement | null) {\n      elementRef = value;\n    },\n  };\n}\n","<script lang=\"ts\">\n  import type { Rect } from '@embedpdf/models';\n  import { useDocumentState } from '@embedpdf/core/svelte';\n  import { useZoomCapability } from '../hooks/use-zoom.svelte';\n\n  interface 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    class?: string;\n    /** Stroke / fill colours (defaults below) */\n    stroke?: string;\n    fill?: string;\n  }\n\n  let {\n    documentId,\n    pageIndex,\n    scale: scaleOverride,\n    class: propsClass,\n    stroke = 'rgba(33,150,243,0.8)',\n    fill = 'rgba(33,150,243,0.15)',\n  }: MarqueeZoomProps = $props();\n\n  const zoomCapability = useZoomCapability();\n  const documentState = useDocumentState(() => documentId);\n\n  let rect = $state<Rect | null>(null);\n\n  const actualScale = $derived(\n    scaleOverride !== undefined ? scaleOverride : (documentState.current?.scale ?? 1),\n  );\n\n  $effect(() => {\n    rect = null;\n\n    if (!zoomCapability.provides) {\n      return;\n    }\n\n    return zoomCapability.provides.registerMarqueeOnPage({\n      documentId,\n      pageIndex,\n      scale: actualScale,\n      callback: {\n        onPreview: (newRect) => {\n          rect = newRect;\n        },\n      },\n    });\n  });\n</script>\n\n{#if rect}\n  <div\n    style:position=\"absolute\"\n    style:pointer-events=\"none\"\n    style:left={`${rect.origin.x * actualScale}px`}\n    style:top={`${rect.origin.y * actualScale}px`}\n    style:width={`${rect.size.width * actualScale}px`}\n    style:height={`${rect.size.height * actualScale}px`}\n    style:border={`1px solid ${stroke}`}\n    style:background={fill}\n    style:box-sizing=\"border-box\"\n    class={propsClass}\n  ></div>\n{/if}\n","<script lang=\"ts\">\n  import { usePinch } from '../hooks';\n  import type { Snippet } from 'svelte';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  type PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n    documentId: string;\n    children: Snippet;\n    class?: string;\n  };\n\n  let { documentId, children, class: propsClass, ...restProps }: PinchWrapperProps = $props();\n  const pinch = usePinch(() => documentId);\n</script>\n\n<div\n  bind:this={pinch.elementRef}\n  {...restProps}\n  style:display=\"block\"\n  style:width=\"fit-content\"\n  style:overflow=\"visible\"\n  style:box-sizing=\"border-box\"\n  style:margin=\"0px auto\"\n  class={propsClass}\n>\n  {@render children()}\n</div>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-zoom.svelte.ts","../../src/shared/utils/zoom-gesture-logic.ts","../../src/svelte/hooks/use-zoom-gesture.svelte.ts","../../src/svelte/components/MarqueeZoom.svelte","../../src/svelte/components/ZoomGestureWrapper.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport {\n  initialDocumentState,\n  ZoomDocumentState,\n  ZoomPlugin,\n  ZoomScope,\n} from '@embedpdf/plugin-zoom';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseZoomReturn {\n  provides: ZoomScope | null;\n  state: ZoomDocumentState;\n}\n\n/**\n * Hook for zoom state for a specific document\n * @param getDocumentId Function that returns the document ID\n */\nexport const useZoom = (getDocumentId: () => string | null): UseZoomReturn => {\n  const capability = useZoomCapability();\n\n  let state = $state<ZoomDocumentState>(initialDocumentState);\n\n  // Reactive documentId\n  const documentId = $derived(getDocumentId());\n\n  // Scoped capability for current docId\n  const scopedProvides = $derived(\n    capability.provides && documentId ? capability.provides.forDocument(documentId) : null,\n  );\n\n  $effect(() => {\n    const provides = capability.provides;\n    const docId = documentId;\n\n    if (!provides || !docId) {\n      state = initialDocumentState;\n      return;\n    }\n\n    const scope = provides.forDocument(docId);\n\n    // Get initial state\n    state = scope.getState();\n\n    // Subscribe to state changes for this document\n    return scope.onStateChange((newState) => {\n      state = newState;\n    });\n  });\n\n  return {\n    get provides() {\n      return scopedProvides;\n    },\n    get state() {\n      return state;\n    },\n  };\n};\n","import type { ZoomCapability } from '@embedpdf/plugin-zoom';\n\nexport interface ZoomGestureOptions {\n  /** Enable pinch-to-zoom gesture (default: true) */\n  enablePinch?: boolean;\n  /** Enable wheel zoom with ctrl/cmd key (default: true) */\n  enableWheel?: boolean;\n}\n\nexport interface ZoomGestureDeps {\n  element: HTMLDivElement;\n  /** Viewport container element for attaching events */\n  container: HTMLElement;\n  documentId: string;\n  zoomProvides: ZoomCapability;\n  /** Viewport gap in pixels (default: 0) */\n  viewportGap?: number;\n  options?: ZoomGestureOptions;\n}\n\nfunction getTouchDistance(touches: TouchList): number {\n  const [t1, t2] = [touches[0], touches[1]];\n  const dx = t2.clientX - t1.clientX;\n  const dy = t2.clientY - t1.clientY;\n  return Math.hypot(dx, dy);\n}\n\nfunction getTouchCenter(touches: TouchList): { x: number; y: number } {\n  const [t1, t2] = [touches[0], touches[1]];\n  return {\n    x: (t1.clientX + t2.clientX) / 2,\n    y: (t1.clientY + t2.clientY) / 2,\n  };\n}\n\nexport function setupZoomGestures({\n  element,\n  container,\n  documentId,\n  zoomProvides,\n  viewportGap = 0,\n  options = {},\n}: ZoomGestureDeps) {\n  const { enablePinch = true, enableWheel = true } = options;\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  const zoomScope = zoomProvides.forDocument(documentId);\n  const getState = () => zoomScope.getState();\n\n  // Shared state\n  let initialZoom = 0;\n  let currentScale = 1;\n  let isPinching = false;\n  let initialDistance = 0;\n\n  // Wheel state\n  let wheelZoomTimeout: ReturnType<typeof setTimeout> | null = null;\n  let accumulatedWheelScale = 1;\n\n  // Gesture state\n  let initialElementWidth = 0;\n  let initialElementHeight = 0;\n  let initialElementLeft = 0;\n  let initialElementTop = 0;\n\n  // Container Dimensions (Bounding Box)\n  let containerRectWidth = 0;\n  let containerRectHeight = 0;\n\n  // Layout Dimensions (Client Box from Metrics)\n  let layoutWidth = 0;\n  let layoutCenterX = 0;\n\n  let pointerLocalY = 0;\n  let pointerContainerX = 0;\n  let pointerContainerY = 0;\n\n  let currentGap = 0;\n  let pivotLocalX = 0;\n\n  const clamp = (val: number, min: number, max: number) => Math.min(Math.max(val, min), max);\n\n  // --- Margin calculation ---\n  const updateMargin = () => {\n    const availableWidth = container.clientWidth - 2 * viewportGap;\n    const elementWidth = element.offsetWidth;\n\n    const newMargin = elementWidth < availableWidth ? (availableWidth - elementWidth) / 2 : 0;\n    element.style.marginLeft = `${newMargin}px`;\n  };\n\n  const calculateTransform = (scale: number) => {\n    const finalWidth = initialElementWidth * scale;\n    const finalHeight = initialElementHeight * scale;\n\n    let ty = pointerLocalY * (1 - scale);\n\n    const targetX = layoutCenterX - finalWidth / 2;\n    const txCenter = targetX - initialElementLeft;\n    const txMouse = pointerContainerX - pivotLocalX * scale - initialElementLeft;\n\n    const overflow = Math.max(0, finalWidth - layoutWidth);\n    const blendRange = layoutWidth * 0.3;\n    const blend = Math.min(1, overflow / blendRange);\n\n    let tx = txCenter + (txMouse - txCenter) * blend;\n\n    const safeHeight = containerRectHeight - currentGap * 2;\n    if (finalHeight > safeHeight) {\n      const currentTop = initialElementTop + ty;\n      const maxTop = currentGap;\n      const minTop = containerRectHeight - currentGap - finalHeight;\n      const constrainedTop = clamp(currentTop, minTop, maxTop);\n      ty = constrainedTop - initialElementTop;\n    }\n\n    const safeWidth = containerRectWidth - currentGap * 2;\n    if (finalWidth > safeWidth) {\n      const currentLeft = initialElementLeft + tx;\n      const maxLeft = currentGap;\n      const minLeft = containerRectWidth - currentGap - finalWidth;\n      const constrainedLeft = clamp(currentLeft, minLeft, maxLeft);\n      tx = constrainedLeft - initialElementLeft;\n    }\n\n    return { tx, ty, blend, finalWidth };\n  };\n\n  const updateTransform = (scale: number) => {\n    currentScale = scale;\n    const { tx, ty } = calculateTransform(scale);\n    element.style.transformOrigin = '0 0';\n    element.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;\n  };\n\n  const resetTransform = () => {\n    element.style.transform = 'none';\n    element.style.transformOrigin = '0 0';\n    currentScale = 1;\n  };\n\n  const commitZoom = () => {\n    const { tx, finalWidth } = calculateTransform(currentScale);\n    const delta = (currentScale - 1) * initialZoom;\n\n    let anchorX: number;\n    let anchorY: number = pointerContainerY;\n\n    if (finalWidth <= layoutWidth) {\n      anchorX = layoutCenterX;\n    } else {\n      const scaleDiff = 1 - currentScale;\n      anchorX =\n        Math.abs(scaleDiff) > 0.001 ? initialElementLeft + tx / scaleDiff : pointerContainerX;\n    }\n\n    zoomScope.requestZoomBy(delta, { vx: anchorX, vy: anchorY });\n    resetTransform();\n    initialZoom = 0;\n  };\n\n  const initializeGestureState = (clientX: number, clientY: number) => {\n    const containerRect = container.getBoundingClientRect();\n    const innerRect = element.getBoundingClientRect();\n\n    currentGap = viewportGap;\n    initialElementWidth = innerRect.width;\n    initialElementHeight = innerRect.height;\n    initialElementLeft = innerRect.left - containerRect.left;\n    initialElementTop = innerRect.top - containerRect.top;\n\n    containerRectWidth = containerRect.width;\n    containerRectHeight = containerRect.height;\n\n    // Layout dimensions from container's client area\n    layoutWidth = container.clientWidth;\n    layoutCenterX = container.clientLeft + layoutWidth / 2;\n\n    const rawPointerLocalX = clientX - innerRect.left;\n    pointerLocalY = clientY - innerRect.top;\n    pointerContainerX = clientX - containerRect.left;\n    pointerContainerY = clientY - containerRect.top;\n\n    if (initialElementWidth < layoutWidth) {\n      pivotLocalX = (pointerContainerX * initialElementWidth) / layoutWidth;\n    } else {\n      pivotLocalX = rawPointerLocalX;\n    }\n  };\n\n  // --- Handlers ---\n  const handleTouchStart = (e: TouchEvent) => {\n    if (e.touches.length !== 2) return;\n    isPinching = true;\n    initialZoom = getState().currentZoomLevel;\n    initialDistance = getTouchDistance(e.touches);\n    const center = getTouchCenter(e.touches);\n    initializeGestureState(center.x, center.y);\n    e.preventDefault();\n  };\n\n  const handleTouchMove = (e: TouchEvent) => {\n    if (!isPinching || e.touches.length !== 2) return;\n    const currentDistance = getTouchDistance(e.touches);\n    const scale = currentDistance / initialDistance;\n    updateTransform(scale);\n    e.preventDefault();\n  };\n\n  const handleTouchEnd = (e: TouchEvent) => {\n    if (!isPinching) return;\n    if (e.touches.length >= 2) return;\n    isPinching = false;\n    commitZoom();\n  };\n\n  const handleWheel = (e: WheelEvent) => {\n    if (!e.ctrlKey && !e.metaKey) return;\n    e.preventDefault();\n\n    if (wheelZoomTimeout === null) {\n      initialZoom = getState().currentZoomLevel;\n      accumulatedWheelScale = 1;\n      initializeGestureState(e.clientX, e.clientY);\n    } else {\n      clearTimeout(wheelZoomTimeout);\n    }\n\n    const zoomFactor = 1 - e.deltaY * 0.01;\n    accumulatedWheelScale *= zoomFactor;\n    accumulatedWheelScale = Math.max(0.1, Math.min(10, accumulatedWheelScale));\n    updateTransform(accumulatedWheelScale);\n\n    wheelZoomTimeout = setTimeout(() => {\n      wheelZoomTimeout = null;\n      commitZoom();\n      accumulatedWheelScale = 1;\n    }, 150);\n  };\n\n  // Subscribe to zoom changes to update margin\n  const unsubZoom = zoomScope.onStateChange(() => updateMargin());\n\n  // Use ResizeObserver to update margin when element or container size changes\n  const resizeObserver = new ResizeObserver(() => updateMargin());\n  resizeObserver.observe(element);\n  resizeObserver.observe(container);\n\n  // Initial margin calculation\n  updateMargin();\n\n  // Attach events to the viewport container for better UX\n  // (gestures work anywhere in viewport, not just on the PDF)\n  if (enablePinch) {\n    container.addEventListener('touchstart', handleTouchStart, { passive: false });\n    container.addEventListener('touchmove', handleTouchMove, { passive: false });\n    container.addEventListener('touchend', handleTouchEnd);\n    container.addEventListener('touchcancel', handleTouchEnd);\n  }\n  if (enableWheel) {\n    container.addEventListener('wheel', handleWheel, { passive: false });\n  }\n\n  return () => {\n    if (enablePinch) {\n      container.removeEventListener('touchstart', handleTouchStart);\n      container.removeEventListener('touchmove', handleTouchMove);\n      container.removeEventListener('touchend', handleTouchEnd);\n      container.removeEventListener('touchcancel', handleTouchEnd);\n    }\n    if (enableWheel) {\n      container.removeEventListener('wheel', handleWheel);\n    }\n    if (wheelZoomTimeout) {\n      clearTimeout(wheelZoomTimeout);\n    }\n    unsubZoom();\n    resizeObserver.disconnect();\n    resetTransform();\n    element.style.marginLeft = '';\n  };\n}\n","import { getContext } from 'svelte';\nimport { useCapability } from '@embedpdf/core/svelte';\nimport type { ViewportPlugin } from '@embedpdf/plugin-viewport';\nimport { setupZoomGestures, type ZoomGestureOptions } from '../../shared/utils/zoom-gesture-logic';\nimport { useZoomCapability } from './use-zoom.svelte';\n\nexport type { ZoomGestureOptions };\n\n/** Context type for viewport element */\ntype ViewportElementContext = { readonly current: HTMLDivElement | null };\n\nexport interface UseZoomGestureOptions {\n  /** Enable pinch-to-zoom gesture (default: true) */\n  enablePinch?: () => boolean;\n  /** Enable wheel zoom with ctrl/cmd key (default: true) */\n  enableWheel?: () => boolean;\n}\n\n/**\n * Hook for setting up zoom gesture functionality (pinch and wheel zoom) on an element\n * @param getDocumentId Function that returns the document ID\n * @param options Optional configuration for enabling/disabling gestures\n */\nexport function useZoomGesture(\n  getDocumentId: () => string | null,\n  options: UseZoomGestureOptions = {},\n) {\n  const viewportCapability = useCapability<ViewportPlugin>('viewport');\n  const zoomCapability = useZoomCapability();\n  const viewportElementCtx = getContext<ViewportElementContext | undefined>('viewport-element');\n\n  let elementRef = $state<HTMLDivElement | null>(null);\n  let cleanup: (() => void) | undefined;\n\n  // Reactive documentId and options\n  const documentId = $derived(getDocumentId());\n  const enablePinch = $derived(options.enablePinch?.() ?? true);\n  const enableWheel = $derived(options.enableWheel?.() ?? true);\n\n  $effect(() => {\n    const element = elementRef;\n    const container = viewportElementCtx?.current;\n    const viewport = viewportCapability.provides;\n    const zoom = zoomCapability.provides;\n    const docId = documentId;\n    const pinchEnabled = enablePinch;\n    const wheelEnabled = enableWheel;\n\n    // Clean up previous setup\n    if (cleanup) {\n      cleanup();\n      cleanup = undefined;\n    }\n\n    // Setup new zoom gestures if all dependencies are available\n    if (!element || !container || !zoom || !docId) {\n      return;\n    }\n\n    cleanup = setupZoomGestures({\n      element,\n      container,\n      documentId: docId,\n      zoomProvides: zoom,\n      viewportGap: viewport?.getViewportGap() || 0,\n      options: { enablePinch: pinchEnabled, enableWheel: wheelEnabled },\n    });\n\n    return () => {\n      if (cleanup) {\n        cleanup();\n        cleanup = undefined;\n      }\n    };\n  });\n\n  return {\n    get elementRef() {\n      return elementRef;\n    },\n    set elementRef(value: HTMLDivElement | null) {\n      elementRef = value;\n    },\n  };\n}\n","<script lang=\"ts\">\n  import type { Rect } from '@embedpdf/models';\n  import { useDocumentState } from '@embedpdf/core/svelte';\n  import { useZoomCapability } from '../hooks/use-zoom.svelte';\n\n  interface 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    class?: string;\n    /** Stroke / fill colours (defaults below) */\n    stroke?: string;\n    fill?: string;\n  }\n\n  let {\n    documentId,\n    pageIndex,\n    scale: scaleOverride,\n    class: propsClass,\n    stroke = 'rgba(33,150,243,0.8)',\n    fill = 'rgba(33,150,243,0.15)',\n  }: MarqueeZoomProps = $props();\n\n  const zoomCapability = useZoomCapability();\n  const documentState = useDocumentState(() => documentId);\n\n  let rect = $state<Rect | null>(null);\n\n  const actualScale = $derived(\n    scaleOverride !== undefined ? scaleOverride : (documentState.current?.scale ?? 1),\n  );\n\n  $effect(() => {\n    rect = null;\n\n    if (!zoomCapability.provides) {\n      return;\n    }\n\n    return zoomCapability.provides.registerMarqueeOnPage({\n      documentId,\n      pageIndex,\n      scale: actualScale,\n      callback: {\n        onPreview: (newRect) => {\n          rect = newRect;\n        },\n      },\n    });\n  });\n</script>\n\n{#if rect}\n  <div\n    style:position=\"absolute\"\n    style:pointer-events=\"none\"\n    style:left={`${rect.origin.x * actualScale}px`}\n    style:top={`${rect.origin.y * actualScale}px`}\n    style:width={`${rect.size.width * actualScale}px`}\n    style:height={`${rect.size.height * actualScale}px`}\n    style:border={`1px solid ${stroke}`}\n    style:background={fill}\n    style:box-sizing=\"border-box\"\n    class={propsClass}\n  ></div>\n{/if}\n","<script lang=\"ts\">\n  import { useZoomGesture } from '../hooks';\n  import type { Snippet } from 'svelte';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  type ZoomGestureWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n    documentId: string;\n    children: Snippet;\n    class?: string;\n    /** Enable pinch-to-zoom gesture (default: true) */\n    enablePinch?: boolean;\n    /** Enable wheel zoom with ctrl/cmd key (default: true) */\n    enableWheel?: boolean;\n  };\n\n  let {\n    documentId,\n    children,\n    class: propsClass,\n    enablePinch = true,\n    enableWheel = true,\n    ...restProps\n  }: ZoomGestureWrapperProps = $props();\n\n  const zoomGesture = useZoomGesture(() => documentId, {\n    enablePinch: () => enablePinch,\n    enableWheel: () => enableWheel,\n  });\n</script>\n\n<div\n  bind:this={zoomGesture.elementRef}\n  {...restProps}\n  style:display=\"inline-block\"\n  style:overflow=\"visible\"\n  style:box-sizing=\"border-box\"\n  class={propsClass}\n>\n  {@render children()}\n</div>\n"],"names":[],"mappings":";;;;;;AAQa,MAAA,oBAAA,MAA0B,cAA0B,WAAW,EAAE;AACjE,MAAA,gBAAA,MAAsB,UAAsB,WAAW,EAAE;MAYzD,UAAA,CAAW,kBAAsD;AACtE,QAAA,aAAa,kBAAA;AAEf,MAAA,wBAAkC,oBAAoB,CAAA;AAGpD,QAAA,uBAAsB,aAAA;AAGtB,QAAA,iBAAA,EAAA,QAAA,MACJ,WAAW,kBAAY,UAAA,IAAa,WAAW,SAAS,kBAAY,UAAU,CAAA,IAAI,IAAA;AAGpF,IAAA,kBAAc;UACN,WAAW,WAAW;AACtB,UAAA,cAAQ,UAAA;SAET,YAAA,CAAa,OAAO;AACvB,QAAA,IAAA,OAAQ,sBAAA,IAAA;;IAEV;AAEM,UAAA,QAAQ,SAAS,YAAY,KAAK;UAGxC,OAAQ,MAAM,SAAA,GAAA,IAAA;AAGP,WAAA,MAAM,cAAA,CAAe,aAAa;AACvC,QAAA,IAAA,OAAQ,UAAA,IAAA;AAAA,IACV,CAAC;AAAA,EACH,CAAC;;IAGK,IAAA,WAAW;mBACN,cAAA;AAAA,IACT;AAAA,IACI,IAAA,QAAQ;mBACH,KAAA;AAAA,IACT;AAAA;AAEJ;AC1CA,SAAS,iBAAiB,SAA4B;AACpD,QAAM,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC;AACxC,QAAM,KAAK,GAAG,UAAU,GAAG;AAC3B,QAAM,KAAK,GAAG,UAAU,GAAG;AAC3B,SAAO,KAAK,MAAM,IAAI,EAAE;AAC1B;AAEA,SAAS,eAAe,SAA8C;AACpE,QAAM,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC;AACxC,SAAO;AAAA,IACL,IAAI,GAAG,UAAU,GAAG,WAAW;AAAA,IAC/B,IAAI,GAAG,UAAU,GAAG,WAAW;AAAA,EAAA;AAEnC;AAEO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,UAAU,CAAA;AACZ,GAAoB;AAClB,QAAM,EAAE,cAAc,MAAM,cAAc,SAAS;AACnD,MAAI,OAAO,WAAW,aAAa;AACjC,WAAO,MAAM;AAAA,IAAC;AAAA,EAChB;AAEA,QAAM,YAAY,aAAa,YAAY,UAAU;AACrD,QAAM,WAAW,MAAM,UAAU,SAAA;AAGjC,MAAI,cAAc;AAClB,MAAI,eAAe;AACnB,MAAI,aAAa;AACjB,MAAI,kBAAkB;AAGtB,MAAI,mBAAyD;AAC7D,MAAI,wBAAwB;AAG5B,MAAI,sBAAsB;AAC1B,MAAI,uBAAuB;AAC3B,MAAI,qBAAqB;AACzB,MAAI,oBAAoB;AAGxB,MAAI,qBAAqB;AACzB,MAAI,sBAAsB;AAG1B,MAAI,cAAc;AAClB,MAAI,gBAAgB;AAEpB,MAAI,gBAAgB;AACpB,MAAI,oBAAoB;AACxB,MAAI,oBAAoB;AAExB,MAAI,aAAa;AACjB,MAAI,cAAc;AAElB,QAAM,QAAQ,CAAC,KAAa,KAAa,QAAgB,KAAK,IAAI,KAAK,IAAI,KAAK,GAAG,GAAG,GAAG;AAGzF,QAAM,eAAe,MAAM;AACzB,UAAM,iBAAiB,UAAU,cAAc,IAAI;AACnD,UAAM,eAAe,QAAQ;AAE7B,UAAM,YAAY,eAAe,kBAAkB,iBAAiB,gBAAgB,IAAI;AACxF,YAAQ,MAAM,aAAa,GAAG,SAAS;AAAA,EACzC;AAEA,QAAM,qBAAqB,CAAC,UAAkB;AAC5C,UAAM,aAAa,sBAAsB;AACzC,UAAM,cAAc,uBAAuB;AAE3C,QAAI,KAAK,iBAAiB,IAAI;AAE9B,UAAM,UAAU,gBAAgB,aAAa;AAC7C,UAAM,WAAW,UAAU;AAC3B,UAAM,UAAU,oBAAoB,cAAc,QAAQ;AAE1D,UAAM,WAAW,KAAK,IAAI,GAAG,aAAa,WAAW;AACrD,UAAM,aAAa,cAAc;AACjC,UAAM,QAAQ,KAAK,IAAI,GAAG,WAAW,UAAU;AAE/C,QAAI,KAAK,YAAY,UAAU,YAAY;AAE3C,UAAM,aAAa,sBAAsB,aAAa;AACtD,QAAI,cAAc,YAAY;AAC5B,YAAM,aAAa,oBAAoB;AACvC,YAAM,SAAS;AACf,YAAM,SAAS,sBAAsB,aAAa;AAClD,YAAM,iBAAiB,MAAM,YAAY,QAAQ,MAAM;AACvD,WAAK,iBAAiB;AAAA,IACxB;AAEA,UAAM,YAAY,qBAAqB,aAAa;AACpD,QAAI,aAAa,WAAW;AAC1B,YAAM,cAAc,qBAAqB;AACzC,YAAM,UAAU;AAChB,YAAM,UAAU,qBAAqB,aAAa;AAClD,YAAM,kBAAkB,MAAM,aAAa,SAAS,OAAO;AAC3D,WAAK,kBAAkB;AAAA,IACzB;AAEA,WAAO,EAAE,IAAI,IAAI,OAAO,WAAA;AAAA,EAC1B;AAEA,QAAM,kBAAkB,CAAC,UAAkB;AACzC,mBAAe;AACf,UAAM,EAAE,IAAI,OAAO,mBAAmB,KAAK;AAC3C,YAAQ,MAAM,kBAAkB;AAChC,YAAQ,MAAM,YAAY,aAAa,EAAE,OAAO,EAAE,aAAa,KAAK;AAAA,EACtE;AAEA,QAAM,iBAAiB,MAAM;AAC3B,YAAQ,MAAM,YAAY;AAC1B,YAAQ,MAAM,kBAAkB;AAChC,mBAAe;AAAA,EACjB;AAEA,QAAM,aAAa,MAAM;AACvB,UAAM,EAAE,IAAI,eAAe,mBAAmB,YAAY;AAC1D,UAAM,SAAS,eAAe,KAAK;AAEnC,QAAI;AACJ,QAAI,UAAkB;AAEtB,QAAI,cAAc,aAAa;AAC7B,gBAAU;AAAA,IACZ,OAAO;AACL,YAAM,YAAY,IAAI;AACtB,gBACE,KAAK,IAAI,SAAS,IAAI,OAAQ,qBAAqB,KAAK,YAAY;AAAA,IACxE;AAEA,cAAU,cAAc,OAAO,EAAE,IAAI,SAAS,IAAI,SAAS;AAC3D,mBAAA;AACA,kBAAc;AAAA,EAChB;AAEA,QAAM,yBAAyB,CAAC,SAAiB,YAAoB;AACnE,UAAM,gBAAgB,UAAU,sBAAA;AAChC,UAAM,YAAY,QAAQ,sBAAA;AAE1B,iBAAa;AACb,0BAAsB,UAAU;AAChC,2BAAuB,UAAU;AACjC,yBAAqB,UAAU,OAAO,cAAc;AACpD,wBAAoB,UAAU,MAAM,cAAc;AAElD,yBAAqB,cAAc;AACnC,0BAAsB,cAAc;AAGpC,kBAAc,UAAU;AACxB,oBAAgB,UAAU,aAAa,cAAc;AAErD,UAAM,mBAAmB,UAAU,UAAU;AAC7C,oBAAgB,UAAU,UAAU;AACpC,wBAAoB,UAAU,cAAc;AAC5C,wBAAoB,UAAU,cAAc;AAE5C,QAAI,sBAAsB,aAAa;AACrC,oBAAe,oBAAoB,sBAAuB;AAAA,IAC5D,OAAO;AACL,oBAAc;AAAA,IAChB;AAAA,EACF;AAGA,QAAM,mBAAmB,CAAC,MAAkB;AAC1C,QAAI,EAAE,QAAQ,WAAW,EAAG;AAC5B,iBAAa;AACb,kBAAc,WAAW;AACzB,sBAAkB,iBAAiB,EAAE,OAAO;AAC5C,UAAM,SAAS,eAAe,EAAE,OAAO;AACvC,2BAAuB,OAAO,GAAG,OAAO,CAAC;AACzC,MAAE,eAAA;AAAA,EACJ;AAEA,QAAM,kBAAkB,CAAC,MAAkB;AACzC,QAAI,CAAC,cAAc,EAAE,QAAQ,WAAW,EAAG;AAC3C,UAAM,kBAAkB,iBAAiB,EAAE,OAAO;AAClD,UAAM,QAAQ,kBAAkB;AAChC,oBAAgB,KAAK;AACrB,MAAE,eAAA;AAAA,EACJ;AAEA,QAAM,iBAAiB,CAAC,MAAkB;AACxC,QAAI,CAAC,WAAY;AACjB,QAAI,EAAE,QAAQ,UAAU,EAAG;AAC3B,iBAAa;AACb,eAAA;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,MAAkB;AACrC,QAAI,CAAC,EAAE,WAAW,CAAC,EAAE,QAAS;AAC9B,MAAE,eAAA;AAEF,QAAI,qBAAqB,MAAM;AAC7B,oBAAc,WAAW;AACzB,8BAAwB;AACxB,6BAAuB,EAAE,SAAS,EAAE,OAAO;AAAA,IAC7C,OAAO;AACL,mBAAa,gBAAgB;AAAA,IAC/B;AAEA,UAAM,aAAa,IAAI,EAAE,SAAS;AAClC,6BAAyB;AACzB,4BAAwB,KAAK,IAAI,KAAK,KAAK,IAAI,IAAI,qBAAqB,CAAC;AACzE,oBAAgB,qBAAqB;AAErC,uBAAmB,WAAW,MAAM;AAClC,yBAAmB;AACnB,iBAAA;AACA,8BAAwB;AAAA,IAC1B,GAAG,GAAG;AAAA,EACR;AAGA,QAAM,YAAY,UAAU,cAAc,MAAM,cAAc;AAG9D,QAAM,iBAAiB,IAAI,eAAe,MAAM,cAAc;AAC9D,iBAAe,QAAQ,OAAO;AAC9B,iBAAe,QAAQ,SAAS;AAGhC,eAAA;AAIA,MAAI,aAAa;AACf,cAAU,iBAAiB,cAAc,kBAAkB,EAAE,SAAS,OAAO;AAC7E,cAAU,iBAAiB,aAAa,iBAAiB,EAAE,SAAS,OAAO;AAC3E,cAAU,iBAAiB,YAAY,cAAc;AACrD,cAAU,iBAAiB,eAAe,cAAc;AAAA,EAC1D;AACA,MAAI,aAAa;AACf,cAAU,iBAAiB,SAAS,aAAa,EAAE,SAAS,OAAO;AAAA,EACrE;AAEA,SAAO,MAAM;AACX,QAAI,aAAa;AACf,gBAAU,oBAAoB,cAAc,gBAAgB;AAC5D,gBAAU,oBAAoB,aAAa,eAAe;AAC1D,gBAAU,oBAAoB,YAAY,cAAc;AACxD,gBAAU,oBAAoB,eAAe,cAAc;AAAA,IAC7D;AACA,QAAI,aAAa;AACf,gBAAU,oBAAoB,SAAS,WAAW;AAAA,IACpD;AACA,QAAI,kBAAkB;AACpB,mBAAa,gBAAgB;AAAA,IAC/B;AACA,cAAA;AACA,mBAAe,WAAA;AACf,mBAAA;AACA,YAAQ,MAAM,aAAa;AAAA,EAC7B;AACF;ACpQgB,SAAA,eACd,eACA,cACA;QACM,qBAAqB,cAA8B,UAAU;AAC7D,QAAA,iBAAiB,kBAAA;QACjB,qBAAqB,WAA+C,kBAAkB;AAExF,MAAA,qBAA2C,IAAI;MAC/C;AAGE,QAAA,uBAAsB,aAAA;AACtB,QAAA,cAAA,EAAA,QAAA,MAAA;;AAAuB,0BAAQ,gBAAR,qCAA2B;AAAA,GAAI;AACtD,QAAA,cAAA,EAAA,QAAA,MAAA;;AAAuB,0BAAQ,gBAAR,qCAA2B;AAAA,GAAI;AAE5D,IAAA,kBAAc;AACN,UAAA,gBAAU,UAAA;UACV,YAAY,yDAAoB;UAChC,WAAW,mBAAmB;UAC9B,OAAO,eAAe;AACtB,UAAA,cAAQ,UAAA;AACR,UAAA,qBAAe,WAAA;AACf,UAAA,qBAAe,WAAA;AAGjB,QAAA,SAAS;AACX,cAAA;AACA;IACF;AAGK,QAAA,CAAA,YAAY,cAAc,QAAA,CAAS,OAAO;;IAE/C;AAEA,cAAU,kBAAA;AAAA,MACR;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,cAAa,qCAAU,qBAAoB;AAAA,MAC3C,WAAW,aAAa,cAAc,aAAa,aAAA;AAAA;iBAGxC;AACP,UAAA,SAAS;AACX,gBAAA;AACA;MACF;AAAA,IACF;AAAA,EACF,CAAC;;IAGK,IAAA,aAAa;mBACR,UAAA;AAAA,IACT;AAAA,QACI,WAAW,OAA8B;AAC3C,QAAA,IAAA,YAAa,OAAA,IAAA;AAAA,IACf;AAAA;AAEJ;;wCCpFA;;AAwBI,MAAA,sCAAS,sBAAsB,GAC/B,kCAAO,uBAAuB;AAG1B,QAAA,iBAAiB,kBAAiB;AAClC,QAAA,gBAAgB,iBAAgB,MAAA,QAAA,UAAA;AAElC,MAAA,eAA2B,IAAI;QAE7B,cAAW,EAAA,QAAA,MAAA;;AAAA,mBAAA,UACG,SAAS,QAAA,UAAoB,mBAAc,YAAd,mBAAuB,UAAS;AAAA,GAAC;AAGlF,IAAA,YAAO,MAAO;AACZ,MAAA,IAAA,MAAO,IAAI;SAEN,eAAe,UAAU;;IAE9B;WAEO,eAAe,SAAS,sBAAqB;AAAA,MAClD,YAAU,QAAA;AAAA,MACV,WAAS,QAAA;AAAA,MACT,aAAO,WAAW;AAAA,MAClB,UAAQ;AAAA,QACN,WAAS,CAAG,YAAY;AACtB,YAAA,IAAA,MAAO,SAAO,IAAA;AAAA,QAChB;AAAA;;EAGN,CAAC;;;;;;;;;;;;UAOgB,MAAA,GAAA,EAAA,IAAA,IAAI,EAAC,OAAO,UAAI,WAAW,CAAA;AAAA,UAC5B,KAAA,GAAA,EAAA,IAAA,IAAI,EAAC,OAAO,UAAI,WAAW,CAAA;AAAA,UACzB,OAAA,GAAA,EAAA,IAAA,IAAI,EAAC,KAAK,cAAQ,WAAW,CAAA;AAAA,UAC5B,QAAA,GAAA,EAAA,IAAA,IAAI,EAAC,KAAK,eAAS,WAAW,CAAA;AAAA,+BACpB,OAAM,CAAA;AAAA,sBACf,KAAI;AAAA;;;;;;gBATrB,IAAI,EAAA,UAAA,UAAA;AAAA;;;;AAFT;;+CCvDA;;AAmBI,MAAA,gDAAc,IAAI,GAClB,gDAAc,IAAI,GACf,YAAQ,EAAA,WAAA,SAAA;AAAA;;;;;;;;;AAGP,QAAA,cAAc,eAAc,MAAA,QAAA,YAAA;AAAA,IAChC,mBAAmB,YAAW;AAAA,IAC9B,mBAAmB,YAAW;AAAA;;;OAM5B;AAAA;;;;;;;;;;AADO,IAAA,UAAA,KAAA,CAAA,YAAA,YAAY,aAAU,SAAA,MAAtB,2CAAY,UAAU;;;AAHnC;"}

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

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

package/dist/vue/components/{pinch-wrapper.vue.d.ts → zoom-gesture-wrapper.vue.d.ts}

@@ -1,11 +1,18 @@
 interface Props {
     documentId: string;
+    /** Enable pinch-to-zoom gesture (default: true) */
+    enablePinch?: boolean;
+    /** Enable wheel zoom with ctrl/cmd key (default: true) */
+    enableWheel?: boolean;
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-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_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    enablePinch: boolean;
+    enableWheel: boolean;
+}, {}, {}, {}, 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;

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

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

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

@@ -0,0 +1,17 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+import { ZoomGestureOptions } from '../../shared-vue/utils/zoom-gesture-logic';
+export type { ZoomGestureOptions };
+export interface UseZoomGestureOptions {
+    /** Enable pinch-to-zoom gesture (default: true) */
+    enablePinch?: MaybeRefOrGetter<boolean>;
+    /** Enable wheel zoom with ctrl/cmd key (default: true) */
+    enableWheel?: MaybeRefOrGetter<boolean>;
+}
+/**
+ * Hook for setting up zoom gesture functionality (pinch and wheel zoom) on an element
+ * @param documentId Document ID (can be ref, computed, getter, or plain value)
+ * @param options Optional configuration for enabling/disabling gestures
+ */
+export declare function useZoomGesture(documentId: MaybeRefOrGetter<string>, options?: UseZoomGestureOptions): {
+    elementRef: Ref<HTMLDivElement | null, HTMLDivElement | 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,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]})});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=require("@embedpdf/core/vue"),n=require("@embedpdf/plugin-zoom"),o=()=>t.useCapability(n.ZoomPlugin.id);function l(e){const[t,n]=[e[0],e[1]],o=n.clientX-t.clientX,l=n.clientY-t.clientY;return Math.hypot(o,l)}function r(n,r={}){const{provides:i}=t.useCapability("viewport"),{provides:a}=o(),s=e.inject("viewport-element"),u=e.ref(null);let c;return e.watch([u,i,a,()=>e.toValue(n),()=>e.toValue(r.enablePinch??!0),()=>e.toValue(r.enableWheel??!0)],([e,t,n,o,r,i])=>{c&&(c(),c=void 0);const a=null==s?void 0:s.value;e&&a&&n&&(c=function({element:e,container:t,documentId:n,zoomProvides:o,viewportGap:r=0,options:i={}}){const{enablePinch:a=!0,enableWheel:s=!0}=i;if("undefined"==typeof window)return()=>{};const u=o.forDocument(n),c=()=>u.getState();let d=0,m=1,p=!1,v=0,h=null,f=1,b=0,g=0,y=0,x=0,w=0,P=0,L=0,E=0,S=0,k=0,z=0,W=0,C=0;const I=(e,t,n)=>Math.min(Math.max(e,t),n),M=()=>{const n=t.clientWidth-2*r,o=e.offsetWidth,l=o<n?(n-o)/2:0;e.style.marginLeft=`${l}px`},Z=e=>{const t=b*e,n=g*e;let o=S*(1-e);const l=E-t/2-y,r=k-C*e-y,i=Math.max(0,t-L),a=.3*L,s=Math.min(1,i/a);let u=l+(r-l)*s;return n>P-2*W&&(o=I(x+o,P-W-n,W)-x),t>w-2*W&&(u=I(y+u,w-W-t,W)-y),{tx:u,ty:o,blend:s,finalWidth:t}},B=t=>{m=t;const{tx:n,ty:o}=Z(t);e.style.transformOrigin="0 0",e.style.transform=`translate(${n}px, ${o}px) scale(${t})`},D=()=>{e.style.transform="none",e.style.transformOrigin="0 0",m=1},O=()=>{const{tx:e,finalWidth:t}=Z(m),n=(m-1)*d;let o,l=z;if(t<=L)o=E;else{const t=1-m;o=Math.abs(t)>.001?y+e/t:k}u.requestZoomBy(n,{vx:o,vy:l}),D(),d=0},R=(n,o)=>{const l=t.getBoundingClientRect(),i=e.getBoundingClientRect();W=r,b=i.width,g=i.height,y=i.left-l.left,x=i.top-l.top,w=l.width,P=l.height,L=t.clientWidth,E=t.clientLeft+L/2;const a=n-i.left;S=o-i.top,k=n-l.left,z=o-l.top,C=b<L?k*b/L:a},q=e=>{if(2!==e.touches.length)return;p=!0,d=c().currentZoomLevel,v=l(e.touches);const t=function(e){const[t,n]=[e[0],e[1]];return{x:(t.clientX+n.clientX)/2,y:(t.clientY+n.clientY)/2}}(e.touches);R(t.x,t.y),e.preventDefault()},V=e=>{if(!p||2!==e.touches.length)return;const t=l(e.touches);B(t/v),e.preventDefault()},$=e=>{p&&(e.touches.length>=2||(p=!1,O()))},Y=e=>{if(!e.ctrlKey&&!e.metaKey)return;e.preventDefault(),null===h?(d=c().currentZoomLevel,f=1,R(e.clientX,e.clientY)):clearTimeout(h);const t=1-.01*e.deltaY;f*=t,f=Math.max(.1,Math.min(10,f)),B(f),h=setTimeout(()=>{h=null,O(),f=1},150)},j=u.onStateChange(()=>M()),G=new ResizeObserver(()=>M());return G.observe(e),G.observe(t),M(),a&&(t.addEventListener("touchstart",q,{passive:!1}),t.addEventListener("touchmove",V,{passive:!1}),t.addEventListener("touchend",$),t.addEventListener("touchcancel",$)),s&&t.addEventListener("wheel",Y,{passive:!1}),()=>{a&&(t.removeEventListener("touchstart",q),t.removeEventListener("touchmove",V),t.removeEventListener("touchend",$),t.removeEventListener("touchcancel",$)),s&&t.removeEventListener("wheel",Y),h&&clearTimeout(h),j(),G.disconnect(),D(),e.style.marginLeft=""}}({element:e,container:a,documentId:o,zoomProvides:n,viewportGap:(null==t?void 0:t.getViewportGap())||0,options:{enablePinch:r,enableWheel:i}}))},{immediate:!0}),{elementRef:u}}const i=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(n){const l=n,{provides:r}=o(),i=t.useDocumentState(()=>l.documentId),a=e.ref(null),s=e.computed(()=>{var e;return void 0!==l.scale?l.scale:(null==(e=i.value)?void 0:e.scale)??1});return e.watch([r,()=>l.documentId,()=>l.pageIndex,s],([e,t,n,o],l,r)=>{if(!e)return void(a.value=null);const i=e.registerMarqueeOnPage({documentId:t,pageIndex:n,scale:o,callback:{onPreview:e=>{a.value=e}}});r(()=>{null==i||i()})},{immediate:!0}),(t,o)=>a.value?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle({position:"absolute",pointerEvents:"none",left:a.value.origin.x*s.value+"px",top:a.value.origin.y*s.value+"px",width:a.value.size.width*s.value+"px",height:a.value.size.height*s.value+"px",border:`1px solid ${n.stroke}`,background:n.fill,boxSizing:"border-box"}),class:e.normalizeClass(n.className)},null,6)):e.createCommentVNode("",!0)}}),a=e.defineComponent({__name:"zoom-gesture-wrapper",props:{documentId:{},enablePinch:{type:Boolean,default:!0},enableWheel:{type:Boolean,default:!0}},setup(t){const n=t,{elementRef:o}=r(()=>n.documentId,{enablePinch:e.toRef(()=>n.enablePinch),enableWheel:e.toRef(()=>n.enableWheel)});return(t,n)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({ref_key:"elementRef",ref:o,style:{display:"inline-block",overflow:"visible",boxSizing:"border-box"}},t.$attrs),[e.renderSlot(t.$slots,"default")],16))}});exports.MarqueeZoom=i,exports.ZoomGestureWrapper=a,exports.useZoom=t=>{const{provides:l}=o(),r=e.ref(n.initialDocumentState);e.watch([l,()=>e.toValue(t)],([e,t],o,l)=>{if(!e)return void(r.value=n.initialDocumentState);const i=e.forDocument(t);r.value=i.getState();l(i.onStateChange(e=>{r.value=e}))},{immediate:!0});const i=e.computed(()=>{var n;const o=e.toValue(t);return(null==(n=l.value)?void 0:n.forDocument(o))??null});return{state:e.readonly(r),provides:i}},exports.useZoomCapability=o,exports.useZoomGesture=r,exports.useZoomPlugin=()=>t.usePlugin(n.ZoomPlugin.id),Object.keys(n).forEach(e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>n[e]})});
 //# sourceMappingURL=index.cjs.map