kviewer 0.3.0 → 0.3.2

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

@@ -2,6 +2,15 @@ import Konva from "konva";
 import { AnnotationType } from "../types.js";
 import { Editor } from "../editor/editor.js";
 export class EditorHighLight extends Editor {
+  get activeAnnotation() {
+    if (!this.currentAnnotation) throw new Error("Highlight editor is not active");
+    return this.currentAnnotation;
+  }
+  get activeStyle() {
+    const style = this.activeAnnotation.style;
+    if (!style) throw new Error("Highlight annotation has no style");
+    return style;
+  }
   /**
    * Creates an EditorHighLight instance.
    * @param EditorOptions Options used to initialize the editor
@@ -16,8 +25,9 @@ export class EditorHighLight extends Editor {
    * @param fixElement Element used as the positioning reference
    */
   convertTextSelection(elements, fixElement) {
-    this.currentShapeGroup = this.createShapeGroup();
-    this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
+    const shapeGroup = this.createShapeGroup();
+    this.currentShapeGroup = shapeGroup;
+    this.getBgLayer().add(shapeGroup.konvaGroup);
     const fixBounding = fixElement.getBoundingClientRect();
     elements.forEach((spanEl) => {
       const bounding = spanEl.getBoundingClientRect();
@@ -26,14 +36,14 @@ export class EditorHighLight extends Editor {
         fixBounding
       );
       const shape = this.createShape(x, y, width, height);
-      this.currentShapeGroup.konvaGroup.add(shape);
+      shapeGroup.konvaGroup.add(shape);
     });
     this.setShapeGroupDone({
-      id: this.currentShapeGroup.id,
+      id: shapeGroup.id,
       contentsObj: {
         text: this.getElementOuterText(elements)
       },
-      color: this.currentAnnotation.style.color
+      color: this.activeStyle.color
     });
   }
   /**
@@ -67,7 +77,7 @@ export class EditorHighLight extends Editor {
    * @returns A concrete Konva.Shape instance
    */
   createShape(x, y, width, height) {
-    switch (this.currentAnnotation.type) {
+    switch (this.activeAnnotation.type) {
       case AnnotationType.HIGHLIGHT:
         return this.createHighlightShape(x, y, width, height);
       case AnnotationType.UNDERLINE:
@@ -76,7 +86,7 @@ export class EditorHighLight extends Editor {
         return this.createStrikeoutShape(x, y, width, height);
       default:
         throw new Error(
-          `Unsupported annotation type: ${this.currentAnnotation.type}`
+          `Unsupported annotation type: ${this.activeAnnotation.type}`
         );
     }
   }
@@ -95,7 +105,7 @@ export class EditorHighLight extends Editor {
       width,
       height,
       opacity: 0.5,
-      fill: this.currentAnnotation.style.color
+      fill: this.activeStyle.color
     });
   }
   /**
@@ -111,7 +121,7 @@ export class EditorHighLight extends Editor {
       x,
       y: height + y - 2,
       width,
-      stroke: this.currentAnnotation.style.color,
+      stroke: this.activeStyle.color,
       opacity: 1,
       strokeWidth: 1,
       hitStrokeWidth: 10,
@@ -131,7 +141,7 @@ export class EditorHighLight extends Editor {
       x,
       y: y + height / 2,
       width,
-      stroke: this.currentAnnotation.style.color,
+      stroke: this.activeStyle.color,
       opacity: 1,
       strokeWidth: 1,
       hitStrokeWidth: 10,

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

@@ -11,10 +11,12 @@ export class EditorNote extends Editor {
   }
   async mouseUpHandler(e) {
     const color = "rgb(255, 222, 33)";
-    const { x, y } = this.konvaStage.getRelativePointerPosition();
     if (e.currentTarget !== this.konvaStage) {
       return;
     }
+    const pos = this.konvaStage.getRelativePointerPosition();
+    if (!pos) return;
+    const { x, y } = pos;
     this.isPainting = true;
     this.currentShapeGroup = this.createShapeGroup();
     this.getBgLayer().add(this.currentShapeGroup.konvaGroup);

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

@@ -23,11 +23,15 @@ export class EditorRectangle extends Editor {
     if (e.currentTarget !== this.konvaStage) {
       return;
     }
+    const pos = this.konvaStage.getRelativePointerPosition();
+    const annotation = this.currentAnnotation;
+    const style = annotation?.style;
+    if (!pos || !annotation || !style) return;
     this.rect = null;
     this.isPainting = true;
-    this.currentShapeGroup = this.createShapeGroup();
-    this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
-    const pos = this.konvaStage.getRelativePointerPosition();
+    const shapeGroup = this.createShapeGroup();
+    this.currentShapeGroup = shapeGroup;
+    this.getBgLayer().add(shapeGroup.konvaGroup);
     this.vertex = { x: pos.x, y: pos.y };
     this.rect = new Konva.Rect({
       x: pos.x,
@@ -35,11 +39,11 @@ export class EditorRectangle extends Editor {
       width: 0,
       height: 0,
       visible: false,
-      stroke: this.currentAnnotation.style.color,
-      strokeWidth: this.currentAnnotation.style.strokeWidth || 2,
-      opacity: this.currentAnnotation.style.opacity
+      stroke: style.color,
+      strokeWidth: style.strokeWidth || 2,
+      opacity: style.opacity
     });
-    this.currentShapeGroup.konvaGroup.add(this.rect);
+    shapeGroup.konvaGroup.add(this.rect);
     window.addEventListener("mouseup", this.globalPointerUpHandler);
   }
   /**
@@ -51,8 +55,10 @@ export class EditorRectangle extends Editor {
       return;
     }
     e.evt.preventDefault();
+    if (!this.rect) return;
     this.rect.show();
     const pos = this.konvaStage.getRelativePointerPosition();
+    if (!pos) return;
     const areaAttr = {
       x: Math.min(this.vertex.x, pos.x),
       y: Math.min(this.vertex.y, pos.y),
@@ -69,7 +75,9 @@ export class EditorRectangle extends Editor {
       return;
     }
     this.isPainting = false;
+    if (!this.rect) return;
     const group = this.rect.getParent();
+    if (!group) return;
     if (!this.rect.isVisible() && group.getType() === "Group") {
       this.delShapeGroup(group.id());
       return;
@@ -80,9 +88,11 @@ export class EditorRectangle extends Editor {
       this.rect = null;
       return;
     }
+    const style = this.currentAnnotation?.style;
+    if (!style) return;
     this.setShapeGroupDone({
       id: group.id(),
-      color: this.currentAnnotation.style.color,
+      color: style.color,
       contentsObj: {
         text: ""
       }
@@ -103,6 +113,7 @@ export class EditorRectangle extends Editor {
    * @returns true if the rectangle is too small, false otherwise
    */
   isTooSmall() {
+    if (!this.rect) return true;
     const { width, height } = this.rect.size();
     return Math.max(width, height) < Editor.MinSize;
   }

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

@@ -1,12 +1,17 @@
 import Konva from "konva";
 import { AnnotationType } from "../types.js";
-import { resizeImage } from "../utils.js";
 import { Editor } from "../editor/editor.js";
 import { defaultOptions } from "../config.js";
-import { showCursorPreview } from "../cursor-preview.js";
+import {
+  cursorPreviewToken,
+  measureImage,
+  peekImageSize,
+  showCursorPreview
+} from "../cursor-preview.js";
+import { cursorPreviewSize, placementSize } from "../../utils/placement_size.js";
 export class EditorSignature extends Editor {
   signatureUrl;
-  signatureImage;
+  signatureImage = null;
   constructor(editorOptions, defaultSignatureUrl) {
     super({ ...editorOptions, editorType: AnnotationType.SIGNATURE });
     this.signatureUrl = defaultSignatureUrl;
@@ -15,7 +20,23 @@ export class EditorSignature extends Editor {
     }
   }
   createCursorImg() {
-    showCursorPreview(this.signatureUrl, defaultOptions.setting.MAX_CURSOR_SIZE);
+    const scale = this.konvaStage?.scale()?.x ?? 1;
+    const max = defaultOptions.setting.MAX_PLACEMENT_SIZE;
+    const cached = cursorPreviewSize(null, peekImageSize(this.signatureUrl), max, scale);
+    if (cached) {
+      showCursorPreview(this.signatureUrl, cached.width, cached.height);
+      return;
+    }
+    const token = cursorPreviewToken();
+    void measureImage(this.signatureUrl).then((natural) => {
+      if (cursorPreviewToken() !== token) return;
+      const size = cursorPreviewSize(null, natural, max, scale);
+      if (size) {
+        showCursorPreview(this.signatureUrl, size.width, size.height);
+      } else {
+        showCursorPreview(this.signatureUrl, defaultOptions.setting.MAX_CURSOR_SIZE);
+      }
+    });
   }
   mouseDownHandler(e) {
     if (e.currentTarget !== this.konvaStage) return;
@@ -25,10 +46,15 @@ export class EditorSignature extends Editor {
     const pos = this.konvaStage.getRelativePointerPosition();
     Konva.Image.fromURL(this.signatureUrl, async (image) => {
       const { width: width_rec, height: height_rec } = image.getClientRect();
-      const { newWidth, newHeight } = resizeImage(width_rec, height_rec, 120);
+      const { width: newWidth, height: newHeight } = placementSize(
+        null,
+        { width: width_rec, height: height_rec },
+        defaultOptions.setting.MAX_PLACEMENT_SIZE
+      ) ?? { width: width_rec, height: height_rec };
       const crosshair = { x: newWidth / 2, y: newHeight / 2 };
       this.signatureImage = image;
       this.signatureImage.setAttrs({
+        image: image.image(),
         x: pos.x - crosshair.x,
         y: pos.y - crosshair.y,
         width: newWidth,

package/dist/runtime/annotation/engine/tools/stamp.d.ts

@@ -8,6 +8,7 @@ export declare class EditorStamp extends Editor {
     private stampWidth;
     private stampHeight;
     constructor(editorOptions: IEditorOptions, defaultStampUrl: string | null);
+    private get explicitSize();
     private createCursorImg;
     /**
      * True when an identical stamp (same source image) already sits under the

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

@@ -1,12 +1,20 @@
 import Konva from "konva";
 import { AnnotationType } from "../types.js";
-import { resizeImage } from "../utils.js";
 import { Editor } from "../editor/editor.js";
 import { defaultOptions } from "../config.js";
-import { showCursorPreview } from "../cursor-preview.js";
+import {
+  cursorPreviewToken,
+  measureImage,
+  peekImageSize,
+  showCursorPreview
+} from "../cursor-preview.js";
+import {
+  cursorPreviewSize,
+  placementSize
+} from "../../utils/placement_size.js";
 export class EditorStamp extends Editor {
   stampUrl;
-  stampImage;
+  stampImage = null;
   stampWidth = null;
   stampHeight = null;
   constructor(editorOptions, defaultStampUrl) {
@@ -16,10 +24,32 @@ export class EditorStamp extends Editor {
       this.createCursorImg();
     }
   }
+  get explicitSize() {
+    return { width: this.stampWidth ?? 0, height: this.stampHeight ?? 0 };
+  }
   createCursorImg() {
-    const baseSize = this.stampWidth ?? this.stampHeight ?? defaultOptions.setting.MAX_CURSOR_SIZE;
     const scale = this.konvaStage?.scale()?.x ?? 1;
-    showCursorPreview(this.stampUrl, Math.round(baseSize * scale));
+    const max = defaultOptions.setting.MAX_PLACEMENT_SIZE;
+    const immediate = cursorPreviewSize(
+      this.explicitSize,
+      peekImageSize(this.stampUrl),
+      max,
+      scale
+    );
+    if (immediate) {
+      showCursorPreview(this.stampUrl, immediate.width, immediate.height);
+      return;
+    }
+    const token = cursorPreviewToken();
+    void measureImage(this.stampUrl).then((natural) => {
+      if (cursorPreviewToken() !== token) return;
+      const size = cursorPreviewSize(this.explicitSize, natural, max, scale);
+      if (size) {
+        showCursorPreview(this.stampUrl, size.width, size.height);
+      } else {
+        showCursorPreview(this.stampUrl, defaultOptions.setting.MAX_CURSOR_SIZE);
+      }
+    });
   }
   /**
    * True when an identical stamp (same source image) already sits under the
@@ -47,24 +77,22 @@ export class EditorStamp extends Editor {
     if (e.currentTarget !== this.konvaStage) return;
     const pos = this.konvaStage.getRelativePointerPosition();
     if (!pos) return;
-    const estimatedSize = this.stampWidth ?? this.stampHeight ?? 120;
+    const estimatedSize = this.stampWidth ?? this.stampHeight ?? defaultOptions.setting.MAX_PLACEMENT_SIZE;
     if (this.hasIdenticalStampNear(pos, estimatedSize)) return;
     this.stampImage = null;
     this.currentShapeGroup = this.createShapeGroup();
     this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
     Konva.Image.fromURL(this.stampUrl, async (image) => {
-      let newWidth;
-      let newHeight;
-      if (this.stampWidth && this.stampHeight) {
-        newWidth = this.stampWidth;
-        newHeight = this.stampHeight;
-      } else {
-        const { width: width_rec, height: height_rec } = image.getClientRect();
-        ({ newWidth, newHeight } = resizeImage(width_rec, height_rec, 120));
-      }
+      const { width: width_rec, height: height_rec } = image.getClientRect();
+      const { width: newWidth, height: newHeight } = placementSize(
+        this.explicitSize,
+        { width: width_rec, height: height_rec },
+        defaultOptions.setting.MAX_PLACEMENT_SIZE
+      ) ?? { width: width_rec, height: height_rec };
       const crosshair = { x: newWidth / 2, y: newHeight / 2 };
       this.stampImage = image;
       this.stampImage.setAttrs({
+        image: image.image(),
         x: pos.x - crosshair.x,
         y: pos.y - crosshair.y,
         width: newWidth,

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

@@ -7,10 +7,7 @@ export declare function generateUUID(): string;
 export declare function setCssCustomProperty(propertyName: string, value: string): void;
 export declare function removeCssCustomProperty(propertyName: string): void;
 export declare function base64ToImageBitmap(base64: string): Promise<ImageBitmap>;
-export declare function resizeImage(width: number, height: number, max: number): {
-    newWidth: number;
-    newHeight: number;
-};
+export { resizeImage } from '../utils/placement_size.js';
 export declare function convertToRGB(array: number[], index?: number): string;
 export declare function formatTimestamp(timestamp: number): string;
 export declare function formatPDFDate(dateString: string | null, full?: boolean): string;

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

@@ -58,6 +58,7 @@ export function removeCssCustomProperty(propertyName) {
 }
 export async function base64ToImageBitmap(base64) {
   const base64Data = base64.split(",")[1];
+  if (!base64Data) throw new Error("Invalid base64 image data");
   const binaryString = atob(base64Data);
   const length = binaryString.length;
   const bytes = new Uint8Array(length);
@@ -67,16 +68,7 @@ export async function base64ToImageBitmap(base64) {
   const blob = new Blob([bytes], { type: "image/png" });
   return await createImageBitmap(blob);
 }
-export function resizeImage(width, height, max) {
-  if (width <= max && height <= max) {
-    return { newWidth: width, newHeight: height };
-  }
-  const scaleFactor = Math.min(max / width, max / height);
-  return {
-    newWidth: width * scaleFactor,
-    newHeight: height * scaleFactor
-  };
-}
+export { resizeImage } from "../utils/placement_size.js";
 export function convertToRGB(array, index = 0) {
   if (index < 0 || index * 3 + 2 >= array.length) {
     throw new Error("Index out of bounds");
@@ -143,7 +135,7 @@ export function getPDFDateTimestamp(dateString) {
   let tzOffset = 0;
   if (tzMatch) {
     const sign = tzMatch[1] === "+" ? 1 : -1;
-    const hours = Number.parseInt(tzMatch[2], 10) || 0;
+    const hours = Number.parseInt(tzMatch[2] ?? "0", 10) || 0;
     const minutes = Number.parseInt(tzMatch[3] || "0", 10) || 0;
     tzOffset = sign * (hours * 60 + minutes);
   }

package/dist/runtime/annotation/pdf-export/download.js

@@ -1,5 +1,5 @@
 export function downloadPdfBytes(data, fileName) {
-  const arrayBuffer = data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
+  const arrayBuffer = Uint8Array.from(data).buffer;
   const blob = new Blob([arrayBuffer], { type: "application/pdf" });
   const link = document.createElement("a");
   const url = URL.createObjectURL(blob);

package/dist/runtime/annotation/pdf-export/export.js

@@ -192,7 +192,7 @@ async function flattenPageAnnotations(pdfDoc, page, annotations) {
   for (const annotation of annotations) {
     try {
       const node = Konva.Node.create(annotation.konvaString);
-      if (node instanceof Konva.Node) {
+      if (node instanceof Konva.Group || node instanceof Konva.Shape) {
         layer.add(node);
         imageLoaders.push(...loadImagesForNode(node));
       }

package/dist/runtime/annotation/pdf-export/parse_polyline.js

@@ -12,7 +12,11 @@ function parseSvgPathToPoints(data) {
     const nums = cmd.slice(1).trim().split(/[\s,]+/).map((value) => Number.parseFloat(value));
     if (type === "M" || type === "L") {
       for (let i = 0; i < nums.length; i += 2) {
-        points.push(nums[i], nums[i + 1]);
+        const x = nums[i];
+        const y = nums[i + 1];
+        if (x !== void 0 && y !== void 0) {
+          points.push(x, y);
+        }
       }
     } else if (type === "Q") {
       if (nums.length >= 4) {

package/dist/runtime/annotation/pdf-export/parse_stamp.js

@@ -177,10 +177,10 @@ export class StampParser extends AnnotationParser {
       ...this.ownerDateEntries(annotation.title, annotation.date),
       Open: false
     };
-    if (apDict) {
-      stampAnnDict.AP = apDict;
-    }
-    const stampAnn = context.obj(stampAnnDict);
+    const stampAnn = context.obj({
+      ...stampAnnDict,
+      ...apDict ? { AP: apDict } : {}
+    });
     const stampAnnRef = context.register(stampAnn);
     this.addAnnotationToPage(page, stampAnnRef);
     for (const comment of annotation.comments || []) {

package/dist/runtime/annotation/pdf-export/unicode-font.js

@@ -1,10 +1,7 @@
 import fontkit from "@pdf-lib/fontkit";
 let fontBytesPromise = null;
 let loadFontBytes = async () => {
-  const { default: fontUrl } = await import(
-    // @ts-expect-error -- Vite asset import, no type declaration
-    "../../assets/fonts/LiberationSans-Regular.ttf?url"
-  );
+  const { default: fontUrl } = await import("../../assets/fonts/LiberationSans-Regular.ttf?url");
   const response = await fetch(fontUrl);
   if (!response.ok) {
     throw new Error(`Failed to load Unicode fallback font (${response.status})`);

package/dist/runtime/annotation/pdf-import/decode_stamp.js

@@ -16,13 +16,14 @@ export function decodeStampAnnotation(annotation, context) {
     return null;
   }
   const group = createGhostGroup(annotation.id);
-  group.add(new Konva.Image({
+  const imageConfig = {
     x: rect.x,
     y: rect.y,
     width: rect.width > 0 ? rect.width : appearance.width,
     height: rect.height > 0 ? rect.height : appearance.height,
     base64: appearance.dataUrl
-  }));
+  };
+  group.add(new Konva.Image(imageConfig));
   const store = createAnnotationStore({
     annotation,
     allAnnotations: context.allAnnotations,

package/dist/runtime/annotation/pdf-import/extract_stamp_appearance.js

@@ -88,7 +88,7 @@ async function renderPageToCanvas(page, canvas, annotationMode, scale) {
   if (!context) throw new Error("Unable to create canvas context for stamp extraction");
   const viewport = page.getViewport({ scale });
   const task = page.render({
-    canvasContext: context,
+    canvas,
     viewport,
     annotationMode
   });

package/dist/runtime/annotation/pdf-import/utils.js

@@ -104,7 +104,7 @@ export function getComments(annotation, allAnnotations) {
     if (candidate.annotationType !== 1) continue;
     if (candidate.inReplyTo !== annotation.id) continue;
     comments.push({
-      id: candidate.id,
+      id: typeof candidate.id === "string" ? candidate.id : "",
       title: getAnnotationTitle(candidate),
       date: getAnnotationDate(candidate),
       content: getAnnotationText(candidate)

package/dist/runtime/annotation/utils/placement_size.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Sizing rules shared by stamp/signature placement and the drag cursor
+ * preview. They live apart from the engine so both paths derive their size
+ * from one implementation — the ghost drifting from what actually lands on
+ * the page was a real bug, not a hypothetical one.
+ */
+export interface ImageSize {
+    width: number;
+    height: number;
+}
+/** Aspect-preserving downscale. Never upscales. */
+export declare function resizeImage(width: number, height: number, max: number): {
+    newWidth: number;
+    newHeight: number;
+};
+/**
+ * The size an annotation will occupy in stage-content units once placed.
+ * Explicit dimensions (a stamp carrying width/height metadata) win outright;
+ * otherwise the image's own aspect ratio is bounded by `max`.
+ */
+export declare function placementSize(explicit: Partial<ImageSize> | null, natural: ImageSize | null, max: number): ImageSize | null;
+/**
+ * The same size expressed in CSS pixels, for the cursor ghost. The Konva stage
+ * scale is what converts content units to what the user actually sees, so a
+ * ghost that ignores it is wrong at every zoom level but 100%.
+ */
+export declare function cursorPreviewSize(explicit: Partial<ImageSize> | null, natural: ImageSize | null, max: number, scale: number): ImageSize | null;

package/dist/runtime/annotation/utils/placement_size.js

@@ -0,0 +1,26 @@
+export function resizeImage(width, height, max) {
+  if (width <= max && height <= max) {
+    return { newWidth: width, newHeight: height };
+  }
+  const scaleFactor = Math.min(max / width, max / height);
+  return {
+    newWidth: width * scaleFactor,
+    newHeight: height * scaleFactor
+  };
+}
+export function placementSize(explicit, natural, max) {
+  if (explicit?.width && explicit?.height) {
+    return { width: explicit.width, height: explicit.height };
+  }
+  if (!natural?.width || !natural?.height) return null;
+  const { newWidth, newHeight } = resizeImage(natural.width, natural.height, max);
+  return { width: newWidth, height: newHeight };
+}
+export function cursorPreviewSize(explicit, natural, max, scale) {
+  const size = placementSize(explicit, natural, max);
+  if (!size) return null;
+  return {
+    width: Math.round(size.width * scale),
+    height: Math.round(size.height * scale)
+  };
+}

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

@@ -5,7 +5,7 @@ type __VLS_Props = {
     /** Carries displayed width/height plus the page's `/Rotate` and MediaBox
      *  origin — the single source of truth for mapping `/Rect` to canvas. */
     pageTransform: PageTransform;
-    pointerEvents: string;
+    pointerEvents: 'auto' | 'none';
     zIndex: 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>;

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

@@ -5,7 +5,7 @@ type __VLS_Props = {
     /** Carries displayed width/height plus the page's `/Rotate` and MediaBox
      *  origin — the single source of truth for mapping `/Rect` to canvas. */
     pageTransform: PageTransform;
-    pointerEvents: string;
+    pointerEvents: 'auto' | 'none';
     zIndex: 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>;

package/dist/runtime/components/PdfPage.vue

@@ -272,7 +272,7 @@ async function renderCanvas(opts) {
     tmp.height = viewport.height;
     try {
       currentRenderTask = proxy.render({
-        canvasContext: tmp.getContext("2d"),
+        canvas: tmp,
         viewport,
         annotationMode: PDFJS_ANNOTATION_MODE_DISABLE
       });
@@ -293,7 +293,7 @@ async function renderCanvas(opts) {
     canvas.height = viewport.height;
     try {
       currentRenderTask = proxy.render({
-        canvasContext: canvas.getContext("2d"),
+        canvas,
         viewport,
         annotationMode: PDFJS_ANNOTATION_MODE_DISABLE
       });
@@ -349,7 +349,7 @@ async function renderWindowCanvas() {
   tmp.height = Math.floor(h * k);
   try {
     windowRenderTask = proxy.render({
-      canvasContext: tmp.getContext("2d"),
+      canvas: tmp,
       viewport,
       transform: [1, 0, 0, 1, -x * k, -y * k],
       annotationMode: PDFJS_ANNOTATION_MODE_DISABLE

package/dist/runtime/components/Viewer.vue

@@ -1022,7 +1022,9 @@ onMounted(() => {
   if (isIPad()) {
     viewerState.setStylusMode(true);
   }
-  setDownloadPdfFn(() => exportPdf({ download: true }));
+  setDownloadPdfFn(async () => {
+    await exportPdf({ download: true });
+  });
   loadDocument();
   window.addEventListener("keydown", onGlobalKeydown);
 });

package/dist/runtime/components/ViewerTabs.vue

@@ -48,7 +48,7 @@
         class="absolute inset-0"
       >
         <Viewer
-          :ref="(el) => setViewerRef(activeTab.id, el)"
+          :ref="(el) => setViewerRef(activeTab?.id ?? '', el)"
           :source="activeTab.source"
           :active="true"
           :stamps="stamps"

package/dist/runtime/components/panels/SignaturePicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <UPopover>
+  <UPopover v-model:open="popoverOpen">
     <button
       class="relative flex items-center justify-center w-8 h-8 rounded-md transition-colors cursor-pointer"
       :class="isActive ? 'bg-default text-highlighted' : 'text-muted hover:bg-default/50 hover:text-highlighted'"
@@ -43,7 +43,7 @@
           color="neutral"
           size="xs"
           block
-          @click="drawModalOpen = true"
+          @click="openDrawModal"
         >
           {{ t("addSignature") }}
         </UButton>
@@ -69,10 +69,16 @@ import SignatureDrawModal from "../modals/SignatureDrawModal.vue";
 const state = useViewerState();
 const { t } = useKviewerI18n();
 const drawModalOpen = ref(false);
+const popoverOpen = ref(false);
 const isActive = computed(() => state.activeTool.value === AnnotationType.SIGNATURE);
 function selectSignature(sig) {
   state.activeSignature.value = sig;
   state.selectTool(AnnotationType.SIGNATURE, sig.imageUrl);
+  popoverOpen.value = false;
+}
+function openDrawModal() {
+  popoverOpen.value = false;
+  drawModalOpen.value = true;
 }
 async function onDrawSubmit(imageUrl) {
   drawModalOpen.value = false;

package/dist/runtime/composables/useSearchIndex.js

@@ -15,7 +15,7 @@ export function createSearchIndex() {
       includeMarkedContent: false,
       disableNormalization: false
     });
-    return content.items.filter((item) => "str" in item).map((item) => item.str).join("");
+    return content.items.map((item) => "str" in item ? item.str : "").join("");
   }
   async function buildIndex(doc) {
     destroyed = false;