kviewer 0.3.1 → 0.3.2

package/dist/module.d.mts

@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-export { ActiveTool, AddFormFieldPayload, CheckboxStyle, ExportPdfOptions, FormFieldDefinition, FormFieldOrigin, FormFieldType, FormFieldValue, KVIEWER_EMBED_PROTOCOL_VERSION, KViewerApi, KViewerEmbedBridgeOptions, KViewerEmbedClient, KViewerEmbedClientOptions, KViewerEmbedEventName, KViewerEmbedEventPayloads, KViewerEmbedMethodName, SignatureData, SignatureHandlers, ViewMode, ViewerBottomToolId, ViewerLayoutToolId, ViewerMenuButtonItem, ViewerMenuCheckboxItem, ViewerMenuItem, ViewerMenuSeparatorItem, ViewerState, ViewerToolEntry, ViewerToolId, ViewerToolSlot, ViewerTopToolId, useKViewerEmbedBridge } from '../dist/runtime/public-types.js';
+export { ActiveTool, AddFormFieldPayload, CheckboxStyle, ExportPdfOptions, FormFieldDefinition, FormFieldOrigin, FormFieldType, FormFieldValue, KVIEWER_EMBED_PROTOCOL_VERSION, KViewerApi, KViewerEmbedBridgeOptions, KViewerEmbedClient, KViewerEmbedClientOptions, KViewerEmbedEventName, KViewerEmbedEventPayloads, KViewerEmbedMethodName, PlacedFieldDefaults, SignatureData, SignatureFieldStatus, SignatureHandlers, ViewMode, ViewerBottomToolId, ViewerLayoutToolId, ViewerMenuButtonItem, ViewerMenuCheckboxItem, ViewerMenuItem, ViewerMenuSeparatorItem, ViewerState, ViewerToolEntry, ViewerToolId, ViewerToolSlot, ViewerTopToolId, useKViewerEmbedBridge } from '../dist/runtime/public-types.js';
 
 interface ModuleOptions {
     /**

package/dist/module.json

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

package/dist/module.mjs

@@ -56,6 +56,10 @@ const module$1 = defineNuxtModule({
       locale: options.locale ?? "en"
     };
     nuxt.options.css.push("pdfjs-dist/web/pdf_viewer.css");
+    const cssnano = nuxt.options.postcss?.plugins?.cssnano;
+    if (cssnano && typeof cssnano === "object" && !cssnano.preset) {
+      cssnano.preset = ["default", { svgo: false }];
+    }
     nuxt.options.css.push(resolve("./runtime/assets/kviewer.css"));
     addPlugin(resolve("./runtime/plugin"));
     addComponentsDir({

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

@@ -57,18 +57,14 @@ export class Editor {
       id,
       pageNumber,
       konvaString: konvaGroup.toJSON(),
-      // Do NOT use konvaGroup.getClientRect() directly here — it includes the
-      // stage's zoom scale, which would inflate annotation coordinates in the
-      // exported PDF. We divide by scale to get page-space coordinates.
+      // Do NOT use konvaGroup.getClientRect() without relativeTo here — it is
+      // in absolute stage coordinates, which bake in the stage's zoom scale
+      // AND the windowed stage position (setStageWindow shifts stage.position
+      // at high zoom). relativeTo undoes both, yielding page-space
+      // coordinates regardless of the zoom state at placement time.
       konvaClientRect: (() => {
-        const scale = konvaGroup.getStage()?.scaleX() ?? 1;
-        const raw = konvaGroup.getClientRect();
-        return {
-          x: raw.x / scale,
-          y: raw.y / scale,
-          width: raw.width / scale,
-          height: raw.height / scale
-        };
+        const stage = konvaGroup.getStage();
+        return stage ? konvaGroup.getClientRect({ relativeTo: stage }) : konvaGroup.getClientRect();
       })(),
       title: this.userName,
       type: annotation.type,
@@ -144,7 +140,9 @@ export class Editor {
     this.konvaStage.off("click mousedown mousemove mouseup touchstart touchmove touchend");
   }
   getBgLayer(konvaStage) {
-    return konvaStage ? konvaStage.getLayers()[0] : this.konvaStage.getLayers()[0];
+    const layer = konvaStage ? konvaStage.getLayers()[0] : this.konvaStage.getLayers()[0];
+    if (!layer) throw new Error("Annotation stage has no background layer");
+    return layer;
   }
   delShapeGroup(id) {
     this.shapeGroupStore.delete(id);

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

@@ -99,7 +99,9 @@ export class Selector {
     });
   }
   getBackgroundLayer(konvaStage) {
-    return konvaStage.getLayers()[0];
+    const layer = konvaStage.getLayers()[0];
+    if (!layer) throw new Error("Annotation stage has no background layer");
+    return layer;
   }
   getPageShapeGroups(konvaStage) {
     return this.getBackgroundLayer(konvaStage).getChildren(

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

@@ -13,17 +13,21 @@ export class EditorArrow extends Editor {
   }
   mouseDownHandler(e) {
     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.arrow = 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.startPoint = { x: pos.x, y: pos.y };
     this.arrow = new Konva.Arrow({
       points: [pos.x, pos.y, pos.x, pos.y],
-      stroke: this.currentAnnotation.style.color,
-      strokeWidth: this.currentAnnotation.style.strokeWidth,
-      fill: this.currentAnnotation.style.color,
+      stroke: style.color,
+      strokeWidth: style.strokeWidth,
+      fill: style.color,
       pointerLength: 10,
       pointerWidth: 10,
       hitStrokeWidth: 20,
@@ -31,15 +35,16 @@ export class EditorArrow extends Editor {
       lineCap: "round",
       lineJoin: "round",
       visible: false,
-      opacity: this.currentAnnotation.style.opacity
+      opacity: style.opacity
     });
-    this.currentShapeGroup.konvaGroup.add(this.arrow);
+    shapeGroup.konvaGroup.add(this.arrow);
     window.addEventListener("mouseup", this.globalPointerUpHandler);
   }
   mouseMoveHandler(e) {
     if (!this.isPainting) return;
     e.evt.preventDefault();
     const pos = this.konvaStage.getRelativePointerPosition();
+    if (!pos) return;
     const points = [this.startPoint.x, this.startPoint.y, pos.x, pos.y];
     this.arrow?.show();
     this.arrow?.setAttrs({ points });
@@ -47,20 +52,24 @@ export class EditorArrow extends Editor {
   mouseUpHandler() {
     if (!this.isPainting) return;
     this.isPainting = false;
-    const group = this.arrow?.getParent();
-    if (!this.arrow?.isVisible() && group?.getType() === "Group") {
+    const arrow = this.arrow;
+    const group = arrow?.getParent();
+    if (!arrow || !group) return;
+    if (!arrow.isVisible() && group.getType() === "Group") {
       this.delShapeGroup(group.id());
       return;
     }
     if (this.isTooShort()) {
-      this.arrow?.destroy();
+      arrow.destroy();
       this.delShapeGroup(group.id());
       this.arrow = 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: ""
       }
@@ -76,8 +85,9 @@ export class EditorArrow extends Editor {
     if (!this.arrow) return true;
     const points = this.arrow.points();
     if (points.length !== 4) return true;
-    const dx = points[2] - points[0];
-    const dy = points[3] - points[1];
+    const [x1, y1, x2, y2] = points;
+    const dx = x2 - x1;
+    const dy = y2 - y1;
     return Math.hypot(dx, dy) < Editor.MinSize;
   }
   /**

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

@@ -23,11 +23,15 @@ export class EditorCircle 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.ellipse = 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.ellipse = new Konva.Ellipse({
       radiusX: 0,
@@ -36,14 +40,14 @@ export class EditorCircle extends Editor {
       y: pos.y,
       visible: false,
       // Start hidden
-      stroke: this.currentAnnotation.style.color,
+      stroke: style.color,
       // Set the ellipse stroke color
-      strokeWidth: this.currentAnnotation.style.strokeWidth,
+      strokeWidth: style.strokeWidth,
       // Set the ellipse stroke width
-      opacity: this.currentAnnotation.style.opacity
+      opacity: style.opacity
       // Set the ellipse opacity
     });
-    this.currentShapeGroup.konvaGroup.add(this.ellipse);
+    shapeGroup.konvaGroup.add(this.ellipse);
     window.addEventListener("mouseup", this.globalPointerUpHandler);
   }
   /**
@@ -55,8 +59,10 @@ export class EditorCircle extends Editor {
       return;
     }
     e.evt.preventDefault();
-    this.ellipse.show();
     const pos = this.konvaStage.getRelativePointerPosition();
+    const ellipse = this.ellipse;
+    if (!pos || !ellipse) return;
+    ellipse.show();
     const radiusX = Math.abs(pos.x - this.vertex.x) / 2;
     const radiusY = Math.abs(pos.y - this.vertex.y) / 2;
     const areaAttr = {
@@ -65,7 +71,7 @@ export class EditorCircle extends Editor {
       radiusX,
       radiusY
     };
-    this.ellipse.setAttrs(areaAttr);
+    ellipse.setAttrs(areaAttr);
   }
   /**
    * Handles mouse or touch pointer-up events and finishes drawing the ellipse.
@@ -75,20 +81,24 @@ export class EditorCircle extends Editor {
       return;
     }
     this.isPainting = false;
-    const group = this.ellipse.getParent();
-    if (!this.ellipse.isVisible() && group.getType() === "Group") {
+    const ellipse = this.ellipse;
+    const group = ellipse?.getParent();
+    if (!ellipse || !group) return;
+    if (!ellipse.isVisible() && group.getType() === "Group") {
       this.delShapeGroup(group.id());
       return;
     }
     if (this.isTooSmall()) {
-      this.ellipse.destroy();
+      ellipse.destroy();
       this.delShapeGroup(group.id());
       this.ellipse = 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: ""
       }
@@ -109,6 +119,7 @@ export class EditorCircle extends Editor {
    * @returns True if the ellipse width or height is smaller than the minimum size, otherwise false.
    */
   isTooSmall() {
+    if (!this.ellipse) return true;
     const { width, height } = this.ellipse.size();
     return Math.max(width, height) < Editor.MinSize;
   }

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

@@ -35,23 +35,27 @@ export class EditorCloud extends Editor {
   }
   mouseDownHandler(_e) {
     const pos = this.konvaStage.getRelativePointerPosition();
+    const annotation = this.currentAnnotation;
+    const style = annotation?.style;
+    if (!pos || !annotation || !style) return;
     this.points.push(pos);
     if (!this.isPainting) {
       this.isPainting = true;
-      this.currentShapeGroup = this.createShapeGroup();
-      this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
+      const shapeGroup = this.createShapeGroup();
+      this.currentShapeGroup = shapeGroup;
+      this.getBgLayer().add(shapeGroup.konvaGroup);
       this.cloudPath = new Konva.Path({
         data: "",
-        stroke: this.currentAnnotation.style.color,
-        strokeWidth: this.currentAnnotation.style.strokeWidth,
+        stroke: style.color,
+        strokeWidth: style.strokeWidth,
         fillEnabled: false,
         lineJoin: "round",
         lineCap: "round",
         hitStrokeWidth: 20,
         // Set the hit detection width
-        opacity: this.currentAnnotation.style.opacity
+        opacity: style.opacity
       });
-      this.currentShapeGroup.konvaGroup.add(this.cloudPath);
+      shapeGroup.konvaGroup.add(this.cloudPath);
       this.drawStartRect(pos);
     }
     this.updateCloudPreview();
@@ -59,6 +63,7 @@ export class EditorCloud extends Editor {
   mouseMoveHandler(_e) {
     if (!this.isPainting || !this.cloudPath) return;
     const pos = this.konvaStage.getRelativePointerPosition();
+    if (!pos) return;
     this.updateCloudPreview(pos);
   }
   mouseUpHandler(_e) {
@@ -73,9 +78,12 @@ export class EditorCloud extends Editor {
     const closedPoints = [...this.points, this.points[0]];
     const pathData = this.generateCloudPathData(closedPoints);
     this.cloudPath.data(pathData);
+    const shapeGroup = this.currentShapeGroup;
+    const style = this.currentAnnotation?.style;
+    if (!shapeGroup || !style) return;
     this.setShapeGroupDone({
-      id: this.currentShapeGroup.konvaGroup.id(),
-      color: this.currentAnnotation.style.color,
+      id: shapeGroup.konvaGroup.id(),
+      color: style.color,
       contentsObj: { text: "" }
     });
     this.cloudPath = null;
@@ -179,7 +187,7 @@ export class EditorCloud extends Editor {
       height: this.startRectSize,
       stroke: "#000",
       strokeWidth: 2,
-      fill: null,
+      fillEnabled: false,
       cornerRadius: 2,
       hitStrokeWidth: 10,
       // Increase the hit detection area
@@ -187,26 +195,27 @@ export class EditorCloud extends Editor {
       dash: [4, 2],
       name: "startRect"
     });
-    this.getBgLayer().add(this.startRect);
-    this.startRect.moveToTop();
-    this.startRect.on(
+    const startRect = this.startRect;
+    this.getBgLayer().add(startRect);
+    startRect.moveToTop();
+    startRect.on(
       "mouseup",
       (_e) => {
         this.handleDoubleClick();
       }
     );
-    this.startRect.on(
+    startRect.on(
       "mousemove",
       (_e) => {
-        this.startRect.stroke("#1677ff");
-        this.startRect.getLayer()?.batchDraw();
+        startRect.stroke("#1677ff");
+        startRect.getLayer()?.batchDraw();
       }
     );
-    this.startRect.on(
+    startRect.on(
       "mouseout",
       (_e) => {
-        this.startRect.stroke("#000");
-        this.startRect.getLayer()?.batchDraw();
+        startRect.stroke("#000");
+        startRect.getLayer()?.batchDraw();
       }
     );
   }

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

@@ -16,16 +16,20 @@ export class EditorFreeHighlight 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.line = 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.line = new Konva.Line({
-      stroke: this.currentAnnotation.style.color,
-      strokeWidth: this.currentAnnotation.style.strokeWidth,
-      opacity: this.currentAnnotation.style.opacity,
-      hitStrokeWidth: this.currentAnnotation.style.strokeWidth,
+      stroke: style.color,
+      strokeWidth: style.strokeWidth,
+      opacity: style.opacity,
+      hitStrokeWidth: style.strokeWidth,
       lineCap: "round",
       lineJoin: "round",
       visible: false,
@@ -33,7 +37,7 @@ export class EditorFreeHighlight extends Editor {
       points: [pos.x, pos.y]
       // Initialize the starting point
     });
-    this.currentShapeGroup.konvaGroup.add(this.line);
+    shapeGroup.konvaGroup.add(this.line);
     window.addEventListener("mouseup", this.globalPointerUpHandler);
   }
   /**
@@ -45,10 +49,12 @@ export class EditorFreeHighlight extends Editor {
       return;
     }
     e.evt.preventDefault();
-    this.line.show();
     const pos = this.konvaStage.getRelativePointerPosition();
-    const newPoints = this.line.points().concat([pos.x, pos.y]);
-    this.line.points(newPoints);
+    const line = this.line;
+    if (!pos || !line) return;
+    line.show();
+    const newPoints = line.points().concat([pos.x, pos.y]);
+    line.points(newPoints);
   }
   /**
    * Handles mouse or touch pointer-up events and finishes drawing the freeform curve.
@@ -58,8 +64,9 @@ export class EditorFreeHighlight extends Editor {
       return;
     }
     this.isPainting = false;
-    const group = this.line?.getParent();
-    if (group && !this.line.isVisible() && group.getType() === "Group") {
+    const line = this.line;
+    const group = line?.getParent();
+    if (group && line && !line.isVisible() && group.getType() === "Group") {
       this.delShapeGroup(group.id());
       return;
     }
@@ -71,13 +78,14 @@ export class EditorFreeHighlight extends Editor {
       this.line = null;
       return;
     }
-    if (this.line) {
+    const style = this.currentAnnotation?.style;
+    if (this.line && group && style) {
       const originalPoints = this.line.points();
       const correctedPoints = this.correctLineIfStraight(originalPoints);
       this.line.points(correctedPoints);
       this.setShapeGroupDone({
         id: group.id(),
-        color: this.currentAnnotation.style.color,
+        color: style.color,
         contentsObj: {
           text: ""
         }
@@ -100,6 +108,7 @@ export class EditorFreeHighlight extends Editor {
    * @returns The corrected points
    */
   correctLineIfStraight(points) {
+    if (points.length < 4) return points;
     const THRESHOLD_ANGLE_DEGREES = 2;
     const startX = points[0];
     const startY = points[1];

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

@@ -20,6 +20,10 @@ export class EditorFreeHand 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;
     Editor.TimerClear(this.pageNumber);
     this.line = null;
     this.isPainting = true;
@@ -27,13 +31,12 @@ export class EditorFreeHand extends Editor {
       this.currentShapeGroup = this.createShapeGroup();
       this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
     }
-    const pos = this.konvaStage.getRelativePointerPosition();
     this.line = new Konva.Line({
-      stroke: this.currentAnnotation.style.color,
+      stroke: style.color,
       // Set the line color
-      strokeWidth: this.currentAnnotation.style.strokeWidth,
+      strokeWidth: style.strokeWidth,
       // Set the line width
-      opacity: this.currentAnnotation.style.opacity,
+      opacity: style.opacity,
       // Set the line opacity
       lineCap: "round",
       // Set rounded line caps
@@ -59,10 +62,12 @@ export class EditorFreeHand extends Editor {
       return;
     }
     e.evt.preventDefault();
-    this.line.show();
     const pos = this.konvaStage.getRelativePointerPosition();
-    const newPoints = this.line.points().concat([pos.x, pos.y]);
-    this.line.points(newPoints);
+    const line = this.line;
+    if (!pos || !line) return;
+    line.show();
+    const newPoints = line.points().concat([pos.x, pos.y]);
+    line.points(newPoints);
   }
   /**
    * Handles mouse or touch pointer-up events and finishes drawing the freeform curve.
@@ -72,13 +77,17 @@ export class EditorFreeHand extends Editor {
       return;
     }
     this.isPainting = false;
-    const group = this.line.getParent();
+    const line = this.line;
+    const group = line?.getParent();
+    const style = this.currentAnnotation?.style;
+    if (!line || !group || !style) return;
+    const color = style.color;
     if (this.isTooSmall()) {
-      this.line.destroy();
+      line.destroy();
       Editor.TimerStart(this.pageNumber, () => {
         this.setShapeGroupDone({
           id: group.id(),
-          color: this.currentAnnotation.style.color,
+          color,
           contentsObj: {
             text: ""
           }
@@ -90,7 +99,7 @@ export class EditorFreeHand extends Editor {
     Editor.TimerStart(this.pageNumber, () => {
       this.setShapeGroupDone({
         id: group.id(),
-        color: this.currentAnnotation.style.color,
+        color,
         contentsObj: {
           text: ""
         }
@@ -113,7 +122,7 @@ export class EditorFreeHand extends Editor {
    * @returns True if the line point count is less than 5, otherwise false
    */
   isTooSmall() {
-    return this.line.points().length < Editor.MinSize;
+    return !this.line || this.line.points().length < Editor.MinSize;
   }
   /**
    * @description Update annotation styles

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

@@ -5,6 +5,8 @@ import { Editor, type IEditorOptions } from '../editor/editor.js';
  * EditorHighLight is a highlight editor class that extends Editor.
  */
 export declare class EditorHighLight extends Editor {
+    private get activeAnnotation();
+    private get activeStyle();
     /**
      * Creates an EditorHighLight instance.
      * @param EditorOptions Options used to initialize the editor

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

@@ -11,7 +11,7 @@ import {
 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;
@@ -54,6 +54,7 @@ export class EditorSignature extends Editor {
       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.js

@@ -14,7 +14,7 @@ import {
 } from "../../utils/placement_size.js";
 export class EditorStamp extends Editor {
   stampUrl;
-  stampImage;
+  stampImage = null;
   stampWidth = null;
   stampHeight = null;
   constructor(editorOptions, defaultStampUrl) {
@@ -92,6 +92,7 @@ export class EditorStamp extends Editor {
       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.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);
@@ -134,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/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;

package/dist/runtime/embed/bridge-host.d.ts

@@ -32,7 +32,7 @@ export interface KViewerApi {
         allSigned: boolean;
         fields: SignatureFieldStatus[];
     }) => void) => () => void;
-    formEditMode: Ref<boolean>;
+    formEditMode: boolean | Ref<boolean>;
     setFormEditMode: (enabled: boolean) => void;
     toggleFormEditMode: () => boolean;
     allPagesRead: () => boolean;

package/dist/runtime/embed/bridge-host.js

@@ -1,4 +1,4 @@
-import { onScopeDispose, watch } from "vue";
+import { onScopeDispose, unref, watch } from "vue";
 import {
   EVENT_KIND,
   KVIEWER_EMBED_PROTOCOL_VERSION,
@@ -81,7 +81,7 @@ export function useKViewerEmbedBridge(viewerRef, options) {
       case "getSignatureFieldStatus":
         return viewer.getSignatureFieldStatus();
       case "getFormEditMode":
-        return viewer.formEditMode.value;
+        return unref(viewer.formEditMode);
       case "setFormEditMode": {
         const [enabled] = req.args;
         viewer.setFormEditMode(enabled);
@@ -141,7 +141,7 @@ export function useKViewerEmbedBridge(viewerRef, options) {
       postEvent("ready", { protocolVersion: KVIEWER_EMBED_PROTOCOL_VERSION });
       stopViewerStateWatches.push(
         watch(
-          viewer.formEditMode,
+          () => unref(viewer.formEditMode),
           (enabled) => postEvent("formEditMode-changed", { enabled })
         ),
         viewer.onFieldPlaced(

package/dist/runtime/imports.d.ts

@@ -0,0 +1,19 @@
+declare module '*?url' {
+  const url: string;
+  export default url;
+}
+
+declare module 'pngjs' {
+  export class PNG {
+    constructor(options?: { width?: number; height?: number });
+
+    static sync: {
+      read(data: Buffer): PNG;
+      write(image: PNG): Buffer;
+    };
+
+    width: number;
+    height: number;
+    data: Buffer;
+  }
+}

package/dist/types.d.mts

@@ -1,4 +1,4 @@
-export { type ActiveTool, type AddFormFieldPayload, type CheckboxStyle, type ExportPdfOptions, type FormFieldDefinition, type FormFieldOrigin, type FormFieldType, type FormFieldValue, type KVIEWER_EMBED_PROTOCOL_VERSION, type KViewerApi, type KViewerEmbedBridgeOptions, type KViewerEmbedClient, type KViewerEmbedClientOptions, type KViewerEmbedEventName, type KViewerEmbedEventPayloads, type KViewerEmbedMethodName, type SignatureData, type SignatureHandlers, type ViewMode, type ViewerBottomToolId, type ViewerLayoutToolId, type ViewerMenuButtonItem, type ViewerMenuCheckboxItem, type ViewerMenuItem, type ViewerMenuSeparatorItem, type ViewerState, type ViewerToolEntry, type ViewerToolId, type ViewerToolSlot, type ViewerTopToolId, type useKViewerEmbedBridge } from '../dist/runtime/public-types.js'
+export { type ActiveTool, type AddFormFieldPayload, type CheckboxStyle, type ExportPdfOptions, type FormFieldDefinition, type FormFieldOrigin, type FormFieldType, type FormFieldValue, type KVIEWER_EMBED_PROTOCOL_VERSION, type KViewerApi, type KViewerEmbedBridgeOptions, type KViewerEmbedClient, type KViewerEmbedClientOptions, type KViewerEmbedEventName, type KViewerEmbedEventPayloads, type KViewerEmbedMethodName, type PlacedFieldDefaults, type SignatureData, type SignatureFieldStatus, type SignatureHandlers, type ViewMode, type ViewerBottomToolId, type ViewerLayoutToolId, type ViewerMenuButtonItem, type ViewerMenuCheckboxItem, type ViewerMenuItem, type ViewerMenuSeparatorItem, type ViewerState, type ViewerToolEntry, type ViewerToolId, type ViewerToolSlot, type ViewerTopToolId, type useKViewerEmbedBridge } from '../dist/runtime/public-types.js'
 
 export { default } from './module.mjs'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kviewer",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Kabema PDF Editor",
   "repository": "kabema/kviewer",
   "license": "MIT",
@@ -65,7 +65,7 @@
     "lint": "eslint .",
     "test": "vitest run --exclude '**/e2e/**'",
     "test:watch": "vitest watch",
-    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
+    "test:types": "pnpm run dev:prepare && pnpm --dir docs exec nuxt prepare && vue-tsc --noEmit && pnpm --dir playground exec vue-tsc --noEmit && pnpm --dir docs exec vue-tsc --noEmit",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui"
   }