kviewer 0.0.8 → 0.0.10

package/dist/module.d.mts

@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-export { ExportPdfOptions } from '../dist/runtime/public-types.js';
+export { ExportPdfOptions, SignatureData, SignatureHandlers, ViewMode } from '../dist/runtime/public-types.js';
 
 interface ModuleOptions {
     /**

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "kviewer",
   "configKey": "kviewer",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/annotation/engine/editor/editor.d.ts

@@ -10,6 +10,8 @@ export interface IEditorOptions {
     onChange: (id: string, updates: Partial<IAnnotationStore>) => void;
     /** When provided and returns true, only pen/mouse input can draw. */
     getStylusModeEnabled?: () => boolean;
+    /** Delay in ms before consecutive freehand strokes are finalized as a single annotation. */
+    freehandGroupingDelay?: number;
 }
 export interface IShapeGroup {
     id: string;
@@ -30,8 +32,9 @@ export declare abstract class Editor {
     shapeGroupStore: Map<string, IShapeGroup>;
     currentShapeGroup: IShapeGroup | null;
     protected getStylusModeEnabled?: () => boolean;
+    protected freehandGroupingDelay: number;
     static MinSize: number;
-    constructor({ userName, konvaStage, pageNumber, annotation, onAdd, editorType, onChange, getStylusModeEnabled, }: IEditorOptions & {
+    constructor({ userName, konvaStage, pageNumber, annotation, onAdd, editorType, onChange, getStylusModeEnabled, freehandGroupingDelay, }: IEditorOptions & {
         editorType: AnnotationType;
     });
     private dispatchAddEvent;
@@ -61,9 +64,12 @@ export declare abstract class Editor {
     addSerializedGroupToLayer(konvaStage: Konva.Stage, konvaString: string): void;
     deleteGroup(id: string, konvaStage: Konva.Stage): void;
     updateStyle(annotationStore: IAnnotationStore, style: IAnnotationStyle): void;
-    static Timer: {
-        [pageNumber: number]: number;
-    };
+    static Timer: Map<number, {
+        id: number;
+        callback: (pageNumber: number) => void;
+    }>;
     static TimerClear(pageNumber: number): void;
-    static TimerStart(pageNumber: number, callback: (pageNumber: number) => void): void;
+    static TimerStart(pageNumber: number, callback: (pageNumber: number) => void, delay?: number): void;
+    /** Immediately execute and clear all pending timers (e.g. before export). */
+    static flushAllTimers(): void;
 }

package/dist/runtime/annotation/engine/editor/editor.js

@@ -14,6 +14,7 @@ export class Editor {
   shapeGroupStore = /* @__PURE__ */ new Map();
   currentShapeGroup;
   getStylusModeEnabled;
+  freehandGroupingDelay;
   static MinSize = 8;
   constructor({
     userName,
@@ -23,7 +24,8 @@ export class Editor {
     onAdd,
     editorType,
     onChange,
-    getStylusModeEnabled
+    getStylusModeEnabled,
+    freehandGroupingDelay
   }) {
     this.userName = userName;
     this.id = `${pageNumber}_${editorType}`;
@@ -36,6 +38,7 @@ export class Editor {
     this.onChange = onChange || (() => {
     });
     this.getStylusModeEnabled = getStylusModeEnabled;
+    this.freehandGroupingDelay = freehandGroupingDelay ?? 1e3;
     this.disableEditMode();
     this.enableEditMode();
   }
@@ -228,18 +231,31 @@ export class Editor {
   updateStyle(annotationStore, style) {
     this.changeStyle(annotationStore, style);
   }
-  static Timer = {};
+  static Timer = /* @__PURE__ */ new Map();
   static TimerClear(pageNumber) {
-    const timer = Editor.Timer[pageNumber];
-    if (timer) {
-      window.clearTimeout(timer);
+    const entry = Editor.Timer.get(pageNumber);
+    if (entry) {
+      window.clearTimeout(entry.id);
+      Editor.Timer.delete(pageNumber);
     }
   }
-  static TimerStart(pageNumber, callback) {
-    Editor.Timer[pageNumber] = window.setTimeout(() => {
-      if (typeof callback === "function") {
-        callback(pageNumber);
-      }
-    }, 1e3);
+  static TimerStart(pageNumber, callback, delay = 1e3) {
+    Editor.Timer.set(pageNumber, {
+      callback,
+      id: window.setTimeout(() => {
+        Editor.Timer.delete(pageNumber);
+        if (typeof callback === "function") {
+          callback(pageNumber);
+        }
+      }, delay)
+    });
+  }
+  /** Immediately execute and clear all pending timers (e.g. before export). */
+  static flushAllTimers() {
+    for (const [pageNumber, entry] of Editor.Timer) {
+      window.clearTimeout(entry.id);
+      Editor.Timer.delete(pageNumber);
+      entry.callback(pageNumber);
+    }
   }
 }

package/dist/runtime/annotation/engine/editor/selector.d.ts

@@ -13,6 +13,13 @@ export interface ISelectorOptions {
     onFreeTextDoubleClick?: (id: string) => void;
     /** When provided and returns true, only pen/mouse input can interact. */
     getStylusModeEnabled?: () => boolean;
+    /**
+     * Toggle external gesture handlers (e.g. panzoom) off while an annotation
+     * is being dragged/transformed. Without this, on mobile the panzoom
+     * single-finger pan runs in parallel with Konva's shape drag and both
+     * CSS transforms compete every frame, causing visible lag.
+     */
+    setExternalGesturesEnabled?: (enabled: boolean) => void;
 }
 export declare class Selector {
     readonly onSelected: (id: string, isClick: boolean, clientRect: IRect) => void;
@@ -23,6 +30,7 @@ export declare class Selector {
     private onRequestDeleteConfirm?;
     private onFreeTextDoubleClick?;
     private getStylusModeEnabled?;
+    private setExternalGesturesEnabled?;
     private transformerStore;
     private getAnnotationStore;
     private konvaCanvasStore;
@@ -32,7 +40,7 @@ export declare class Selector {
     private marqueeRect;
     private marqueeStartPos;
     private marqueeStage;
-    constructor({ konvaCanvasStore, getAnnotationStore, onDelete, onSelected, onMultiSelected, onCancel, onChanged, onRequestDeleteConfirm, onFreeTextDoubleClick, getStylusModeEnabled, }: ISelectorOptions);
+    constructor({ konvaCanvasStore, getAnnotationStore, onDelete, onSelected, onMultiSelected, onCancel, onChanged, onRequestDeleteConfirm, onFreeTextDoubleClick, getStylusModeEnabled, setExternalGesturesEnabled, }: ISelectorOptions);
     /** Returns true if this event should be rejected (finger touch in stylus mode). */
     private isStylusRejected;
     private handleKeyDown;
@@ -66,6 +74,17 @@ export declare class Selector {
     activateMarquee(pageNumber: number): void;
     private bindMarqueeEvents;
     private rectsIntersect;
+    /**
+     * Check whether a line segment intersects an axis-aligned rectangle
+     * (expanded by `tolerance` on each side to match the visual eraser width).
+     * Uses Liang-Barsky line clipping.
+     */
+    private segmentIntersectsRect;
+    /**
+     * Check whether any segment of an eraser path intersects a rectangle.
+     * Points is a flat array [x0, y0, x1, y1, ...] in page-space coordinates.
+     */
+    private eraserPathIntersectsRect;
     activateEraser(pageNumber: number): void;
     private eraserLine;
     private eraserStage;

package/dist/runtime/annotation/engine/editor/selector.js

@@ -12,6 +12,7 @@ export class Selector {
   onRequestDeleteConfirm;
   onFreeTextDoubleClick;
   getStylusModeEnabled;
+  setExternalGesturesEnabled;
   transformerStore = /* @__PURE__ */ new Map();
   getAnnotationStore;
   konvaCanvasStore;
@@ -31,7 +32,8 @@ export class Selector {
     onChanged,
     onRequestDeleteConfirm,
     onFreeTextDoubleClick,
-    getStylusModeEnabled
+    getStylusModeEnabled,
+    setExternalGesturesEnabled
   }) {
     this.konvaCanvasStore = konvaCanvasStore;
     this.getAnnotationStore = getAnnotationStore;
@@ -43,6 +45,7 @@ export class Selector {
     this.onRequestDeleteConfirm = onRequestDeleteConfirm;
     this.onFreeTextDoubleClick = onFreeTextDoubleClick;
     this.getStylusModeEnabled = getStylusModeEnabled;
+    this.setExternalGesturesEnabled = setExternalGesturesEnabled;
     this.handleKeyDown = this.handleKeyDown.bind(this);
     window.addEventListener("keydown", this.handleKeyDown);
   }
@@ -188,6 +191,7 @@ export class Selector {
     const transformer = new Konva.Transformer({
       resizeEnabled: rawAnnotationStore.resizable,
       rotateEnabled: false,
+      enabledAnchors: ["top-left", "top-right", "bottom-left", "bottom-right"],
       borderStrokeWidth: defaultOptions.chooseSetting.STROKEWIDTH,
       borderStroke: defaultOptions.chooseSetting.COLOR,
       anchorFill: defaultOptions.chooseSetting.COLOR,
@@ -223,7 +227,34 @@ export class Selector {
     }
     transformer.off("transformend");
     transformer.off("transformstart");
+    let dragLayer = null;
+    const moveToDragLayer = () => {
+      if (dragLayer) return;
+      const bg = this.getBackgroundLayer(konvaStage);
+      dragLayer = new Konva.Layer();
+      konvaStage.add(dragLayer);
+      group.moveTo(dragLayer);
+      transformer.moveTo(dragLayer);
+      bg.batchDraw();
+      dragLayer.batchDraw();
+    };
+    const restoreFromDragLayer = () => {
+      if (!dragLayer) return;
+      const bg = this.getBackgroundLayer(konvaStage);
+      group.moveTo(bg);
+      transformer.moveTo(bg);
+      dragLayer.destroy();
+      dragLayer = null;
+      bg.batchDraw();
+    };
+    transformer.on("transformstart", () => {
+      this.setExternalGesturesEnabled?.(false);
+      moveToDragLayer();
+      this.onCancel();
+    });
     transformer.on("transformend", () => {
+      this.setExternalGesturesEnabled?.(true);
+      restoreFromDragLayer();
       this.onChanged(
         group.id(),
         group.toJSON(),
@@ -232,13 +263,22 @@ export class Selector {
         transformer.getClientRect()
       );
     });
-    transformer.on("transformstart", () => {
-      this.onCancel();
-    });
+    let dragStartRect = null;
+    let dragAnchorPos = null;
     transformer.on("dragstart", () => {
+      this.setExternalGesturesEnabled?.(false);
+      moveToDragLayer();
       this.onCancel();
+      const boxes = transformer.nodes().map((node) => node.getClientRect());
+      dragStartRect = this.getTotalBox(boxes);
+      const firstNode = transformer.nodes()[0];
+      dragAnchorPos = firstNode ? firstNode.getAbsolutePosition() : null;
     });
     transformer.on("dragend", () => {
+      this.setExternalGesturesEnabled?.(true);
+      restoreFromDragLayer();
+      dragStartRect = null;
+      dragAnchorPos = null;
       this.onChanged(
         group.id(),
         group.toJSON(),
@@ -248,29 +288,32 @@ export class Selector {
       );
     });
     transformer.on("dragmove", () => {
-      const boxes = transformer.nodes().map((node) => node.getClientRect());
-      const box = this.getTotalBox(boxes);
-      transformer.nodes().forEach((shape) => {
-        const absPos = shape.getAbsolutePosition();
-        const offsetX = box.x - absPos.x;
-        const offsetY = box.y - absPos.y;
-        const halfWidth = box.width / 2;
-        const halfHeight = box.height / 2;
-        const newAbsPos = { ...absPos };
-        if (box.x + halfWidth < 0) {
-          newAbsPos.x = -offsetX - halfWidth;
-        }
-        if (box.y + halfHeight < 0) {
-          newAbsPos.y = -offsetY - halfHeight;
-        }
-        if (box.x + halfWidth > konvaStage.width()) {
-          newAbsPos.x = konvaStage.width() - halfWidth - offsetX;
-        }
-        if (box.y + halfHeight > konvaStage.height()) {
-          newAbsPos.y = konvaStage.height() - halfHeight - offsetY;
-        }
-        shape.setAbsolutePosition(newAbsPos);
-      });
+      if (!dragStartRect || !dragAnchorPos) return;
+      const nodes = transformer.nodes();
+      const firstNode = nodes[0];
+      if (!firstNode) return;
+      const currentPos = firstNode.getAbsolutePosition();
+      const dx = currentPos.x - dragAnchorPos.x;
+      const dy = currentPos.y - dragAnchorPos.y;
+      const boxX = dragStartRect.x + dx;
+      const boxY = dragStartRect.y + dy;
+      const halfWidth = dragStartRect.width / 2;
+      const halfHeight = dragStartRect.height / 2;
+      const stageW = konvaStage.width();
+      const stageH = konvaStage.height();
+      let clampDx = 0;
+      let clampDy = 0;
+      if (boxX + halfWidth < 0) clampDx = -(boxX + halfWidth);
+      else if (boxX + halfWidth > stageW) clampDx = stageW - (boxX + halfWidth);
+      if (boxY + halfHeight < 0) clampDy = -(boxY + halfHeight);
+      else if (boxY + halfHeight > stageH) clampDy = stageH - (boxY + halfHeight);
+      if (clampDx !== 0 || clampDy !== 0) {
+        nodes.forEach((shape) => {
+          const pos = shape.getAbsolutePosition();
+          shape.setAbsolutePosition({ x: pos.x + clampDx, y: pos.y + clampDy });
+        });
+        dragAnchorPos = firstNode.getAbsolutePosition();
+      }
     });
     transformer.nodes([group]);
     this.getBackgroundLayer(konvaStage).add(transformer);
@@ -507,12 +550,11 @@ export class Selector {
           this.transformerStore.set("__multi__", transformer);
           nodes.forEach((node) => {
             node.on("dragstart.marquee", () => {
+              this.setExternalGesturesEnabled?.(false);
               this.onCancel();
             });
-            node.on("dragmove.marquee", () => {
-              this.onMultiSelected(matchedIds, transformer.getClientRect());
-            });
             node.on("dragend.marquee", () => {
+              this.setExternalGesturesEnabled?.(true);
               this.onMultiSelected(matchedIds, transformer.getClientRect());
             });
           });
@@ -526,6 +568,60 @@ export class Selector {
   rectsIntersect(a, b) {
     return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
   }
+  /**
+   * Check whether a line segment intersects an axis-aligned rectangle
+   * (expanded by `tolerance` on each side to match the visual eraser width).
+   * Uses Liang-Barsky line clipping.
+   */
+  segmentIntersectsRect(x1, y1, x2, y2, rect, tolerance) {
+    const left = rect.x - tolerance;
+    const top = rect.y - tolerance;
+    const right = rect.x + rect.width + tolerance;
+    const bottom = rect.y + rect.height + tolerance;
+    let tMin = 0;
+    let tMax = 1;
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const edges = [
+      { p: -dx, q: x1 - left },
+      { p: dx, q: right - x1 },
+      { p: -dy, q: y1 - top },
+      { p: dy, q: bottom - y1 }
+    ];
+    for (const { p, q } of edges) {
+      if (p === 0) {
+        if (q < 0) return false;
+      } else {
+        const t = q / p;
+        if (p < 0) {
+          tMin = Math.max(tMin, t);
+        } else {
+          tMax = Math.min(tMax, t);
+        }
+        if (tMin > tMax) return false;
+      }
+    }
+    return true;
+  }
+  /**
+   * Check whether any segment of an eraser path intersects a rectangle.
+   * Points is a flat array [x0, y0, x1, y1, ...] in page-space coordinates.
+   */
+  eraserPathIntersectsRect(points, rect, tolerance) {
+    for (let i = 0; i + 3 < points.length; i += 2) {
+      if (this.segmentIntersectsRect(
+        points[i],
+        points[i + 1],
+        points[i + 2],
+        points[i + 3],
+        rect,
+        tolerance
+      )) {
+        return true;
+      }
+    }
+    return false;
+  }
   activateEraser(pageNumber) {
     const konvaCanvas = this.konvaCanvasStore.get(pageNumber);
     if (!konvaCanvas) return;
@@ -569,17 +665,20 @@ export class Selector {
     konvaStage.on("mouseup touchend", (e) => {
       if (!this.eraserLine || !this.eraserStage) return;
       if (this.isStylusRejected(e.evt)) return;
-      const eraserRect = this.eraserLine.getClientRect();
+      const points = this.eraserLine.points();
       this.eraserLine.destroy();
       this.eraserLine = null;
-      if (eraserRect.width < 3 && eraserRect.height < 3) {
+      if (points.length < 4) {
         this.eraserStage = null;
         return;
       }
+      const scale = this.eraserStage.scaleX() ?? 1;
+      const screenPoints = points.map((v) => v * scale);
+      const tolerance = 6;
       const groups = this.getPageShapeGroups(this.eraserStage);
       const toDelete = [];
       groups.forEach((group) => {
-        if (this.rectsIntersect(eraserRect, group.getClientRect())) {
+        if (this.eraserPathIntersectsRect(screenPoints, group.getClientRect(), tolerance)) {
           toDelete.push(group.id());
         }
       });

package/dist/runtime/annotation/engine/painter.d.ts

@@ -32,11 +32,14 @@ export declare class Painter {
     private callbacks;
     private getStylusModeEnabled?;
     private getReadonly?;
-    constructor({ userName, callbacks, getStylusModeEnabled, getReadonly, }: {
+    private freehandGroupingDelay;
+    constructor({ userName, callbacks, getStylusModeEnabled, getReadonly, freehandGroupingDelay, setExternalGesturesEnabled, }: {
         userName: string;
         callbacks: PainterCallbacks;
         getStylusModeEnabled?: () => boolean;
         getReadonly?: () => boolean;
+        freehandGroupingDelay?: number;
+        setExternalGesturesEnabled?: (enabled: boolean) => void;
     });
     private editFreeText;
     private bindGlobalEvents;

package/dist/runtime/annotation/engine/painter.js

@@ -10,6 +10,7 @@ import {
   PAINTER_PAINTING_TYPE
 } from "./const.js";
 import { hideCursorPreview } from "./cursor-preview.js";
+import { Editor } from "./editor/editor.js";
 import { EditorCircle } from "./tools/circle.js";
 import { EditorFreeHand } from "./tools/freehand.js";
 import { EditorFreeHighlight } from "./tools/free-highlight.js";
@@ -23,6 +24,10 @@ import { EditorArrow } from "./tools/arrow.js";
 import { EditorCloud } from "./tools/cloud.js";
 import { Selector } from "./editor/selector.js";
 import { Store } from "./store.js";
+import { isIPad } from "./input-device.js";
+if (typeof window !== "undefined" && isIPad()) {
+  Konva.pixelRatio = 1;
+}
 export class Painter {
   userName;
   konvaCanvasStore = /* @__PURE__ */ new Map();
@@ -34,16 +39,20 @@ export class Painter {
   callbacks;
   getStylusModeEnabled;
   getReadonly;
+  freehandGroupingDelay;
   constructor({
     userName,
     callbacks,
     getStylusModeEnabled,
-    getReadonly
+    getReadonly,
+    freehandGroupingDelay,
+    setExternalGesturesEnabled
   }) {
     this.userName = userName;
     this.callbacks = callbacks;
     this.getStylusModeEnabled = getStylusModeEnabled;
     this.getReadonly = getReadonly;
+    this.freehandGroupingDelay = freehandGroupingDelay ?? 1e3;
     this.store = new Store();
     this.selector = new Selector({
       konvaCanvasStore: this.konvaCanvasStore,
@@ -83,7 +92,8 @@ export class Painter {
       onFreeTextDoubleClick: (id) => {
         void this.editFreeText(id);
       },
-      getStylusModeEnabled: this.getStylusModeEnabled
+      getStylusModeEnabled: this.getStylusModeEnabled,
+      setExternalGesturesEnabled
     });
     this.bindGlobalEvents();
   }
@@ -135,7 +145,9 @@ export class Painter {
   }
   applyStylusTouchAction(stage) {
     stage.preventDefault(false);
-    Konva.pixelRatio = 1;
+    if (!isIPad()) {
+      Konva.pixelRatio = window.devicePixelRatio || 1;
+    }
     const content = stage.content;
     if (content) content.style.touchAction = "pan-x pan-y";
     stage.container().querySelectorAll("canvas").forEach((c) => {
@@ -144,7 +156,9 @@ export class Painter {
   }
   removeStylusTouchAction(stage) {
     stage.preventDefault(true);
-    Konva.pixelRatio = window.devicePixelRatio || 1;
+    if (!isIPad()) {
+      Konva.pixelRatio = window.devicePixelRatio || 1;
+    }
     const content = stage.content;
     if (content) content.style.touchAction = "";
     stage.container().querySelectorAll("canvas").forEach((c) => {
@@ -244,7 +258,8 @@ export class Painter {
       onChange: (id, updates) => {
         this.updateStore(id, updates);
       },
-      getStylusModeEnabled: this.getStylusModeEnabled
+      getStylusModeEnabled: this.getStylusModeEnabled,
+      freehandGroupingDelay: this.freehandGroupingDelay
     };
     let editor = null;
     switch (annotation.type) {
@@ -547,6 +562,7 @@ export class Painter {
     return this.store.annotations;
   }
   getExportContext() {
+    Editor.flushAllTimers();
     const originalIds = this.store.originalIds;
     const modifiedIds = this.store.modifiedOriginals;
     const changedAnnotations = this.store.annotations.filter(

package/dist/runtime/annotation/engine/tools/freehand.js

@@ -86,7 +86,7 @@ export class EditorFreeHand extends Editor {
           }
         });
         this.currentShapeGroup = null;
-      });
+      }, this.freehandGroupingDelay);
       return;
     }
     Editor.TimerStart(this.pageNumber, () => {
@@ -98,7 +98,7 @@ export class EditorFreeHand extends Editor {
         }
       });
       this.currentShapeGroup = null;
-    });
+    }, this.freehandGroupingDelay);
     this.line = null;
   }
   /**

package/dist/runtime/components/PdfPage.d.vue.ts

@@ -3,7 +3,12 @@ type __VLS_Props = {
     pageNumber: number;
     pageMeta: PageMeta;
     scale: number;
+    /** Canvas internal resolution multiplier (CSS size unchanged).
+     *  Used by panzoom to sharpen the PDF when visually zoomed in. */
+    renderQuality?: number;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    renderQuality: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/PdfPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="kviewer-page"
+    class="kviewer-page shadow-lg"
     :style="{
   position: 'relative',
   width: cssWidth + 'px',
@@ -63,7 +63,8 @@ const PDFJS_ANNOTATION_MODE_DISABLE = 0;
 const props = defineProps({
   pageNumber: { type: Number, required: true },
   pageMeta: { type: Object, required: true },
-  scale: { type: Number, required: true }
+  scale: { type: Number, required: true },
+  renderQuality: { type: Number, required: false, default: 1 }
 });
 const canvasRef = ref(null);
 const textLayerRef = ref(null);
@@ -141,7 +142,14 @@ watch(
     }
   }
 );
-async function renderCanvas() {
+watch(
+  () => props.renderQuality,
+  async () => {
+    if (!pageProxy.value) return;
+    await renderCanvas({ doubleBuffer: true });
+  }
+);
+async function renderCanvas(opts) {
   const canvas = canvasRef.value;
   const proxy = pageProxy.value;
   if (!canvas || !proxy) return;
@@ -150,23 +158,48 @@ async function renderCanvas() {
     currentRenderTask = null;
   }
   const dpr = window.devicePixelRatio || 1;
+  const quality = props.renderQuality ?? 1;
   const viewport = proxy.getViewport({
-    scale: props.scale * dpr
+    scale: props.scale * quality * dpr
   });
-  canvas.width = viewport.width;
-  canvas.height = viewport.height;
-  try {
-    currentRenderTask = proxy.render({
-      canvasContext: canvas.getContext("2d"),
-      viewport,
-      annotationMode: PDFJS_ANNOTATION_MODE_DISABLE
-    });
-    await currentRenderTask.promise;
-  } catch (e) {
-    if (e instanceof Error && e.message?.includes("Rendering cancelled")) return;
-    throw e;
-  } finally {
-    currentRenderTask = null;
+  if (opts?.doubleBuffer) {
+    const tmp = document.createElement("canvas");
+    tmp.width = viewport.width;
+    tmp.height = viewport.height;
+    try {
+      currentRenderTask = proxy.render({
+        canvasContext: tmp.getContext("2d"),
+        viewport,
+        annotationMode: PDFJS_ANNOTATION_MODE_DISABLE
+      });
+      await currentRenderTask.promise;
+      canvas.width = viewport.width;
+      canvas.height = viewport.height;
+      canvas.getContext("2d").drawImage(tmp, 0, 0);
+    } catch (e) {
+      if (e instanceof Error && e.message?.includes("Rendering cancelled")) return;
+      throw e;
+    } finally {
+      currentRenderTask = null;
+      tmp.width = 0;
+      tmp.height = 0;
+    }
+  } else {
+    canvas.width = viewport.width;
+    canvas.height = viewport.height;
+    try {
+      currentRenderTask = proxy.render({
+        canvasContext: canvas.getContext("2d"),
+        viewport,
+        annotationMode: PDFJS_ANNOTATION_MODE_DISABLE
+      });
+      await currentRenderTask.promise;
+    } catch (e) {
+      if (e instanceof Error && e.message?.includes("Rendering cancelled")) return;
+      throw e;
+    } finally {
+      currentRenderTask = null;
+    }
   }
 }
 function initKonva() {

package/dist/runtime/components/PdfPage.vue.d.ts

@@ -3,7 +3,12 @@ type __VLS_Props = {
     pageNumber: number;
     pageMeta: PageMeta;
     scale: number;
+    /** Canvas internal resolution multiplier (CSS size unchanged).
+     *  Used by panzoom to sharpen the PDF when visually zoomed in. */
+    renderQuality?: number;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    renderQuality: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;