kviewer 0.0.8 → 0.0.10

package/dist/runtime/composables/useInertiaPanzoom.js

@@ -0,0 +1,472 @@
+import { onBeforeUnmount } from "vue";
+const DECELERATION = 0.998;
+const RUBBER_BAND_C = 0.55;
+const BOUNCE_BACK_RATE = 0.04;
+const BOUNCE_VELOCITY_DECAY = 0.04;
+const MIN_VELOCITY = 0.01;
+export function useInertiaPanzoom(options = {}) {
+  const {
+    minScale = 0.5,
+    maxScale = 4,
+    axisLockThreshold = 10,
+    axisLockRatio = 2
+  } = options;
+  let controller = null;
+  function attach(target) {
+    detach();
+    const parent = target.parentElement;
+    if (!parent) return;
+    let scale = 1;
+    let tx = 0;
+    let ty = 0;
+    let gesturesEnabled = true;
+    const pointers = /* @__PURE__ */ new Map();
+    let pinchStart = null;
+    let panStart = null;
+    let lastMoveTime = 0;
+    let lastMoveX = 0;
+    let lastMoveY = 0;
+    let vx = 0;
+    let vy = 0;
+    let momentumRaf = 0;
+    let lastStepTime = 0;
+    const subscribers = /* @__PURE__ */ new Set();
+    target.style.transformOrigin = "0 0";
+    target.style.touchAction = "none";
+    parent.style.touchAction = "none";
+    target.style.userSelect = "none";
+    let willChangeActive = false;
+    function setWillChangeActive(active) {
+      if (willChangeActive === active) return;
+      willChangeActive = active;
+      target.style.willChange = active ? "transform" : "";
+    }
+    const BAR_SIZE = 10;
+    const vBar = document.createElement("div");
+    vBar.setAttribute("data-inertia-scrollbar", "y");
+    vBar.style.cssText = `position:absolute;right:2px;top:0;width:${BAR_SIZE}px;background:rgba(0,0,0,0.35);border-radius:${BAR_SIZE / 2}px;opacity:0;transition:opacity 300ms,background-color 150ms;z-index:10;touch-action:none;cursor:grab;`;
+    const hBar = document.createElement("div");
+    hBar.setAttribute("data-inertia-scrollbar", "x");
+    hBar.style.cssText = `position:absolute;bottom:2px;left:0;height:${BAR_SIZE}px;background:rgba(0,0,0,0.35);border-radius:${BAR_SIZE / 2}px;opacity:0;transition:opacity 300ms,background-color 150ms;z-index:10;touch-action:none;cursor:grab;`;
+    parent.appendChild(vBar);
+    parent.appendChild(hBar);
+    let hideTimer = 0;
+    let barDrag = null;
+    function updateIndicators() {
+      const pw = parent.clientWidth;
+      const ph = parent.clientHeight;
+      const cw = target.scrollWidth * scale;
+      const ch = target.scrollHeight * scale;
+      if (ch > ph) {
+        const thumbH = Math.max(30, ph / ch * ph);
+        const scrollable = ch - ph;
+        const st = Math.max(0, Math.min(scrollable, -ty));
+        vBar.style.height = `${thumbH}px`;
+        vBar.style.top = `${st / scrollable * (ph - thumbH)}px`;
+        vBar.style.opacity = "1";
+        vBar.style.display = "";
+      } else {
+        vBar.style.opacity = "0";
+        vBar.style.display = "none";
+      }
+      if (cw > pw) {
+        const thumbW = Math.max(30, pw / cw * pw);
+        const scrollable = cw - pw;
+        const sl = Math.max(0, Math.min(scrollable, -tx));
+        hBar.style.width = `${thumbW}px`;
+        hBar.style.left = `${sl / scrollable * (pw - thumbW)}px`;
+        hBar.style.opacity = "1";
+        hBar.style.display = "";
+      } else {
+        hBar.style.opacity = "0";
+        hBar.style.display = "none";
+      }
+      if (barDrag) return;
+      clearTimeout(hideTimer);
+      hideTimer = window.setTimeout(() => {
+        vBar.style.opacity = "0";
+        hBar.style.opacity = "0";
+      }, 800);
+    }
+    function onBarDown(axis) {
+      return (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        stopMomentum();
+        const pw = parent.clientWidth;
+        const ph = parent.clientHeight;
+        const cw = target.scrollWidth * scale;
+        const ch = target.scrollHeight * scale;
+        if (axis === "y") {
+          if (ch <= ph) return;
+          const thumbH = Math.max(30, ph / ch * ph);
+          const trackH = ph - thumbH;
+          const scrollable = ch - ph;
+          barDrag = {
+            axis: "y",
+            startPointer: e.clientY,
+            startT: ty,
+            ratio: scrollable / trackH,
+            pointerId: e.pointerId
+          };
+          vBar.style.background = "rgba(0,0,0,0.55)";
+        } else {
+          if (cw <= pw) return;
+          const thumbW = Math.max(30, pw / cw * pw);
+          const trackW = pw - thumbW;
+          const scrollable = cw - pw;
+          barDrag = {
+            axis: "x",
+            startPointer: e.clientX,
+            startT: tx,
+            ratio: scrollable / trackW,
+            pointerId: e.pointerId
+          };
+          hBar.style.background = "rgba(0,0,0,0.55)";
+        }
+        e.target.setPointerCapture?.(e.pointerId);
+      };
+    }
+    function onBarMove(e) {
+      if (!barDrag || e.pointerId !== barDrag.pointerId) return;
+      e.stopPropagation();
+      if (barDrag.axis === "y") {
+        const dy = e.clientY - barDrag.startPointer;
+        const b = getBounds();
+        ty = Math.max(b.minY, Math.min(b.maxY, barDrag.startT - dy * barDrag.ratio));
+      } else {
+        const dx = e.clientX - barDrag.startPointer;
+        const b = getBounds();
+        tx = Math.max(b.minX, Math.min(b.maxX, barDrag.startT - dx * barDrag.ratio));
+      }
+      apply();
+    }
+    function onBarUp(e) {
+      if (!barDrag || e.pointerId !== barDrag.pointerId) return;
+      e.stopPropagation();
+      vBar.style.background = "rgba(0,0,0,0.35)";
+      hBar.style.background = "rgba(0,0,0,0.35)";
+      barDrag = null;
+      updateIndicators();
+    }
+    vBar.addEventListener("pointerdown", onBarDown("y"));
+    hBar.addEventListener("pointerdown", onBarDown("x"));
+    vBar.addEventListener("pointermove", onBarMove);
+    hBar.addEventListener("pointermove", onBarMove);
+    vBar.addEventListener("pointerup", onBarUp);
+    hBar.addEventListener("pointerup", onBarUp);
+    vBar.addEventListener("pointercancel", onBarUp);
+    hBar.addEventListener("pointercancel", onBarUp);
+    function apply() {
+      target.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
+      updateIndicators();
+      if (subscribers.size > 0) {
+        const t = { scale, tx, ty };
+        subscribers.forEach((cb) => cb(t));
+      }
+    }
+    function scrollToElement(elem, opts) {
+      const block = opts?.block ?? "start";
+      const animate = opts?.animate ?? true;
+      const elemRect = elem.getBoundingClientRect();
+      const parentRect = parent.getBoundingClientRect();
+      const targetOffset = block === "center" ? (parentRect.height - elemRect.height) / 2 : 0;
+      const delta = elemRect.top - parentRect.top - targetOffset;
+      let newTy = ty - delta;
+      const b = getBounds();
+      newTy = Math.max(b.minY, Math.min(b.maxY, newTy));
+      stopMomentum();
+      if (!animate) {
+        ty = newTy;
+        apply();
+        return;
+      }
+      const startTy = ty;
+      const startTime = performance.now();
+      const duration = Math.min(600, 200 + Math.abs(newTy - startTy) * 0.5);
+      setWillChangeActive(true);
+      function frame() {
+        const t = Math.min(1, (performance.now() - startTime) / duration);
+        const eased = 1 - Math.pow(1 - t, 3);
+        ty = startTy + (newTy - startTy) * eased;
+        apply();
+        if (t < 1) {
+          momentumRaf = requestAnimationFrame(frame);
+        } else {
+          momentumRaf = 0;
+          setWillChangeActive(false);
+        }
+      }
+      momentumRaf = requestAnimationFrame(frame);
+    }
+    function getBounds() {
+      const pw = parent.clientWidth;
+      const ph = parent.clientHeight;
+      const cw = target.scrollWidth * scale;
+      const ch = target.scrollHeight * scale;
+      let minX, maxX, minY, maxY;
+      if (cw <= pw) {
+        minX = maxX = (pw - cw) / 2;
+      } else {
+        minX = pw - cw;
+        maxX = 0;
+      }
+      if (ch <= ph) {
+        minY = maxY = (ph - ch) / 2;
+      } else {
+        minY = ph - ch;
+        maxY = 0;
+      }
+      return { minX, maxX, minY, maxY };
+    }
+    function rubberBandAxis(v, min, max, dim) {
+      if (v < min) return min - (1 - 1 / ((min - v) * RUBBER_BAND_C / dim + 1)) * dim;
+      if (v > max) return max + (1 - 1 / ((v - max) * RUBBER_BAND_C / dim + 1)) * dim;
+      return v;
+    }
+    function stopMomentum() {
+      if (momentumRaf) {
+        cancelAnimationFrame(momentumRaf);
+        momentumRaf = 0;
+      }
+    }
+    function startMomentum() {
+      stopMomentum();
+      lastStepTime = performance.now();
+      function step() {
+        const now = performance.now();
+        const dt = Math.min(32, now - lastStepTime);
+        lastStepTime = now;
+        const b = getBounds();
+        if (tx < b.minX) {
+          tx += (b.minX - tx) * (1 - Math.exp(-BOUNCE_BACK_RATE * dt));
+          vx *= Math.exp(-BOUNCE_VELOCITY_DECAY * dt);
+        } else if (tx > b.maxX) {
+          tx += (b.maxX - tx) * (1 - Math.exp(-BOUNCE_BACK_RATE * dt));
+          vx *= Math.exp(-BOUNCE_VELOCITY_DECAY * dt);
+        } else {
+          vx *= Math.pow(DECELERATION, dt);
+          tx += vx * dt;
+        }
+        if (ty < b.minY) {
+          ty += (b.minY - ty) * (1 - Math.exp(-BOUNCE_BACK_RATE * dt));
+          vy *= Math.exp(-BOUNCE_VELOCITY_DECAY * dt);
+        } else if (ty > b.maxY) {
+          ty += (b.maxY - ty) * (1 - Math.exp(-BOUNCE_BACK_RATE * dt));
+          vy *= Math.exp(-BOUNCE_VELOCITY_DECAY * dt);
+        } else {
+          vy *= Math.pow(DECELERATION, dt);
+          ty += vy * dt;
+        }
+        apply();
+        const stopped = Math.abs(vx) < MIN_VELOCITY && Math.abs(vy) < MIN_VELOCITY;
+        const inBounds = tx >= b.minX - 0.5 && tx <= b.maxX + 0.5 && ty >= b.minY - 0.5 && ty <= b.maxY + 0.5;
+        if (stopped && inBounds) {
+          tx = Math.max(b.minX, Math.min(b.maxX, tx));
+          ty = Math.max(b.minY, Math.min(b.maxY, ty));
+          vx = vy = 0;
+          apply();
+          momentumRaf = 0;
+          setWillChangeActive(false);
+          return;
+        }
+        momentumRaf = requestAnimationFrame(step);
+      }
+      momentumRaf = requestAnimationFrame(step);
+    }
+    function onPenFilter(e) {
+      if (e instanceof PointerEvent && e.pointerType === "pen") {
+        e.stopPropagation();
+      }
+    }
+    function onDown(e) {
+      if (e.pointerType === "pen") return;
+      if (!gesturesEnabled) return;
+      stopMomentum();
+      setWillChangeActive(true);
+      pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+      if (pointers.size === 2) {
+        const pts = [...pointers.values()];
+        pinchStart = {
+          dist: Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y),
+          midX: (pts[0].x + pts[1].x) / 2,
+          midY: (pts[0].y + pts[1].y) / 2,
+          s: scale,
+          tx,
+          ty
+        };
+        panStart = null;
+      } else if (pointers.size === 1) {
+        panStart = { x: e.clientX, y: e.clientY, tx, ty, axisLock: "none" };
+        lastMoveTime = performance.now();
+        lastMoveX = e.clientX;
+        lastMoveY = e.clientY;
+        vx = vy = 0;
+      }
+    }
+    function onMove(e) {
+      if (!pointers.has(e.pointerId)) return;
+      pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+      if (pointers.size === 2 && pinchStart) {
+        e.preventDefault();
+        const pts = [...pointers.values()];
+        const dist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
+        const midX = (pts[0].x + pts[1].x) / 2;
+        const midY = (pts[0].y + pts[1].y) / 2;
+        const newScale = Math.max(minScale, Math.min(maxScale, pinchStart.s * (dist / pinchStart.dist)));
+        const rect = parent.getBoundingClientRect();
+        const focalX = (pinchStart.midX - rect.left - pinchStart.tx) / pinchStart.s;
+        const focalY = (pinchStart.midY - rect.top - pinchStart.ty) / pinchStart.s;
+        tx = midX - rect.left - newScale * focalX;
+        ty = midY - rect.top - newScale * focalY;
+        scale = newScale;
+        apply();
+      } else if (pointers.size === 1 && panStart) {
+        e.preventDefault();
+        const dx = e.clientX - panStart.x;
+        const dy = e.clientY - panStart.y;
+        if (panStart.axisLock === "none") {
+          const absDx = Math.abs(dx);
+          const absDy = Math.abs(dy);
+          if (Math.max(absDx, absDy) >= axisLockThreshold) {
+            panStart.axisLock = absDy > absDx * axisLockRatio ? "y" : "free";
+          }
+        }
+        const rawTx = panStart.axisLock === "y" ? panStart.tx : panStart.tx + dx;
+        const rawTy = panStart.ty + dy;
+        const b = getBounds();
+        tx = rubberBandAxis(rawTx, b.minX, b.maxX, parent.clientWidth);
+        ty = rubberBandAxis(rawTy, b.minY, b.maxY, parent.clientHeight);
+        apply();
+        const now = performance.now();
+        const dt = Math.max(1, now - lastMoveTime);
+        const instVx = (e.clientX - lastMoveX) / dt;
+        const instVy = (e.clientY - lastMoveY) / dt;
+        const alpha = 0.85;
+        vx = vx * (1 - alpha) + instVx * alpha;
+        vy = vy * (1 - alpha) + instVy * alpha;
+        lastMoveTime = now;
+        lastMoveX = e.clientX;
+        lastMoveY = e.clientY;
+      }
+    }
+    function onUp(e) {
+      pointers.delete(e.pointerId);
+      if (pointers.size < 2) pinchStart = null;
+      if (pointers.size === 0) {
+        const hadPan = panStart !== null;
+        const lockedAxis = panStart?.axisLock;
+        panStart = null;
+        const idleMs = performance.now() - lastMoveTime;
+        if (idleMs > 60) {
+          vx = 0;
+          vy = 0;
+        }
+        if (hadPan && lockedAxis === "y") vx = 0;
+        startMomentum();
+      }
+    }
+    function onWheelZoom(e) {
+      if (!e.ctrlKey && !e.metaKey) return;
+      e.preventDefault();
+      stopMomentum();
+      const rect = parent.getBoundingClientRect();
+      const mx = e.clientX - rect.left;
+      const my = e.clientY - rect.top;
+      const delta = e.deltaY < 0 ? 1 : -1;
+      const newScale = Math.max(minScale, Math.min(maxScale, scale * Math.exp(delta * 0.1)));
+      const focalX = (mx - tx) / scale;
+      const focalY = (my - ty) / scale;
+      tx = mx - newScale * focalX;
+      ty = my - newScale * focalY;
+      scale = newScale;
+      apply();
+    }
+    function scrollBy(dx, dy) {
+      stopMomentum();
+      const b = getBounds();
+      tx = Math.max(b.minX, Math.min(b.maxX, tx - dx));
+      ty = Math.max(b.minY, Math.min(b.maxY, ty - dy));
+      apply();
+    }
+    parent.addEventListener("pointerdown", onDown);
+    parent.addEventListener("pointermove", onMove);
+    parent.addEventListener("pointerup", onUp);
+    parent.addEventListener("pointercancel", onUp);
+    parent.addEventListener("wheel", onWheelZoom, { passive: false });
+    target.addEventListener("pointerdown", onPenFilter);
+    apply();
+    controller = {
+      cleanup: () => {
+        stopMomentum();
+        clearTimeout(hideTimer);
+        parent.removeEventListener("pointerdown", onDown);
+        parent.removeEventListener("pointermove", onMove);
+        parent.removeEventListener("pointerup", onUp);
+        parent.removeEventListener("pointercancel", onUp);
+        parent.removeEventListener("wheel", onWheelZoom);
+        target.removeEventListener("pointerdown", onPenFilter);
+        vBar.remove();
+        hBar.remove();
+        target.style.transform = "";
+        target.style.transformOrigin = "";
+        target.style.willChange = "";
+        target.style.touchAction = "";
+        target.style.userSelect = "";
+        parent.style.touchAction = "";
+      },
+      reset: () => {
+        stopMomentum();
+        scale = 1;
+        tx = 0;
+        ty = 0;
+        vx = vy = 0;
+        pointers.clear();
+        pinchStart = null;
+        panStart = null;
+        setWillChangeActive(false);
+        apply();
+      },
+      stop: () => {
+        stopMomentum();
+        setWillChangeActive(false);
+      },
+      getScale: () => scale,
+      getTransform: () => ({ scale, tx, ty }),
+      scrollToElement,
+      scrollBy,
+      setGesturesEnabled: (enabled) => {
+        gesturesEnabled = enabled;
+        if (!enabled) {
+          pointers.clear();
+          panStart = null;
+          pinchStart = null;
+          stopMomentum();
+          setWillChangeActive(false);
+        }
+      },
+      onChange: (cb) => {
+        subscribers.add(cb);
+        return () => subscribers.delete(cb);
+      }
+    };
+  }
+  function detach() {
+    controller?.cleanup();
+    controller = null;
+  }
+  onBeforeUnmount(detach);
+  return {
+    attach,
+    detach,
+    reset: () => controller?.reset(),
+    stop: () => controller?.stop(),
+    getScale: () => controller?.getScale() ?? 1,
+    getTransform: () => controller?.getTransform() ?? { scale: 1, tx: 0, ty: 0 },
+    scrollToElement: (elem, opts) => controller?.scrollToElement(elem, opts),
+    scrollBy: (dx, dy) => controller?.scrollBy(dx, dy),
+    setGesturesEnabled: (enabled) => controller?.setGesturesEnabled(enabled),
+    onChange: (cb) => controller?.onChange(cb) ?? (() => {
+    })
+  };
+}

package/dist/runtime/composables/usePageVirtualization.d.ts

@@ -13,6 +13,9 @@ export interface PageVirtualization {
     observePage: (pageNumber: number, element: HTMLElement) => void;
     unobservePage: (pageNumber: number) => void;
     scrollToPage: (pageNumber: number) => void;
+    getPageElement: (pageNumber: number) => HTMLElement | undefined;
+    /** Recompute currentPage using visual bounding rects. Works with CSS transforms. */
+    updateCurrentPageByRect: () => void;
     init: (doc: PDFDocumentProxy, scrollRoot: HTMLElement) => Promise<void>;
     destroy: () => void;
 }

package/dist/runtime/composables/usePageVirtualization.js

@@ -96,6 +96,27 @@ export function createPageVirtualization() {
       currentPage.value = pageNumber;
     }
   }
+  function getPageElement(pageNumber) {
+    return pageToElement.get(pageNumber);
+  }
+  function updateCurrentPageByRect() {
+    if (!scrollRoot) return;
+    const rootRect = scrollRoot.getBoundingClientRect();
+    const rootMid = rootRect.top + rootRect.height / 2;
+    let bestPage = currentPage.value;
+    let bestDist = Infinity;
+    for (const [pageNum, el] of pageToElement) {
+      const rect = el.getBoundingClientRect();
+      const dist = rootMid < rect.top ? rect.top - rootMid : rootMid > rect.bottom ? rootMid - rect.bottom : 0;
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestPage = pageNum;
+      }
+    }
+    if (bestPage !== currentPage.value) {
+      currentPage.value = bestPage;
+    }
+  }
   async function fetchPageDimensions(doc, pageNumber) {
     const proxy = await doc.getPage(pageNumber);
     const view = proxy.view;
@@ -197,6 +218,8 @@ export function createPageVirtualization() {
     observePage,
     unobservePage,
     scrollToPage,
+    getPageElement,
+    updateCurrentPageByRect,
     init,
     destroy
   };

package/dist/runtime/composables/useViewerSearch.d.ts

@@ -27,6 +27,7 @@ export interface ViewerSearchState {
         totalPages: number;
     }) => void;
     setScrollToPage: (fn: (pageNumber: number) => void) => void;
+    setScrollToElement: (fn: (el: HTMLElement) => void) => void;
 }
 export declare function provideViewerSearch(): ViewerSearchState;
 export declare function useViewerSearch(): ViewerSearchState;

package/dist/runtime/composables/useViewerSearch.js

@@ -26,12 +26,16 @@ export function provideViewerSearch() {
   let inputElement = null;
   let _searchIndex = null;
   let _scrollToPage = null;
+  let _scrollToElement = null;
   function setSearchIndex(index) {
     _searchIndex = index;
   }
   function setScrollToPage(fn) {
     _scrollToPage = fn;
   }
+  function setScrollToElement(fn) {
+    _scrollToElement = fn;
+  }
   function getSortedPageNumbers() {
     return [...pageLayers.keys()].sort((a, b) => a - b);
   }
@@ -186,10 +190,14 @@ export function provideViewerSearch() {
       }
       prevEnd = end;
       if (isSelected && shouldScrollSelected && selectedSpan) {
-        selectedSpan.scrollIntoView({
-          block: "start",
-          inline: "center"
-        });
+        if (_scrollToElement) {
+          _scrollToElement(selectedSpan);
+        } else {
+          selectedSpan.scrollIntoView({
+            block: "start",
+            inline: "center"
+          });
+        }
       }
     }
     if (prevEnd) {
@@ -309,6 +317,7 @@ export function provideViewerSearch() {
     inputElement = null;
     _searchIndex = null;
     _scrollToPage = null;
+    _scrollToElement = null;
   }
   function setQuery(value) {
     query.value = value;
@@ -404,7 +413,8 @@ export function provideViewerSearch() {
     setInputElement,
     focusInput,
     setSearchIndex,
-    setScrollToPage
+    setScrollToPage,
+    setScrollToElement
   };
   provide(VIEWER_SEARCH_KEY, state);
   return state;

package/dist/runtime/public-types.d.ts

@@ -1,2 +1,4 @@
 export type { ExportPdfOptions } from './annotation/pdf-export/export.js';
 export type { ViewerTabItem, AddTabOptions } from './components/ViewerTabs.vue.js';
+export type { SignatureData, SignatureHandlers } from './annotation/engine/types.js';
+export type { ViewMode } from './composables/viewMode.js';

package/dist/types.d.mts

@@ -1,4 +1,4 @@
-export { type ExportPdfOptions } from '../dist/runtime/public-types.js'
+export { type ExportPdfOptions, type SignatureData, type SignatureHandlers, type ViewMode } from '../dist/runtime/public-types.js'
 
 export { default } from './module.mjs'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kviewer",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Kabema PDF Editor",
   "repository": "kabema/kviewer",
   "license": "MIT",