kviewer 0.3.0 → 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.0",
+  "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({
@@ -72,6 +76,15 @@ const module$1 = defineNuxtModule({
     const require_ = createRequire(import.meta.url);
     const pdfjsDir = dirname(require_.resolve("pdfjs-dist/package.json"));
     nuxt.hook("nitro:config", (nitroConfig) => {
+      nitroConfig.externals ||= {};
+      nitroConfig.externals.inline ||= [];
+      if (Array.isArray(nitroConfig.externals.inline)) {
+        for (const dependency of ["unhead", "consola"]) {
+          if (!nitroConfig.externals.inline.includes(dependency)) {
+            nitroConfig.externals.inline.push(dependency);
+          }
+        }
+      }
       nitroConfig.publicAssets ||= [];
       nitroConfig.publicAssets.push(
         {

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

@@ -44,6 +44,7 @@ export declare const defaultOptions: {
         STROKE_WIDTH: number;
         OPACITY: number;
         MAX_CURSOR_SIZE: number;
+        MAX_PLACEMENT_SIZE: number;
         MAX_UPLOAD_IMAGE_SIZE: number;
         LOAD_PDF_ANNOTATION: boolean;
         DB_CLICK_DELETE: boolean;

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

@@ -74,6 +74,10 @@ export const defaultOptions = {
     STROKE_WIDTH: 2,
     OPACITY: 1,
     MAX_CURSOR_SIZE: 96,
+    // Bound for stamps/signatures placed without explicit dimensions. Shared
+    // by the placement path and the cursor preview so the ghost cannot drift
+    // from what actually lands on the page.
+    MAX_PLACEMENT_SIZE: 120,
     MAX_UPLOAD_IMAGE_SIZE: 800,
     LOAD_PDF_ANNOTATION: true,
     DB_CLICK_DELETE: false

package/dist/runtime/annotation/engine/cursor-preview.d.ts

@@ -1,2 +1,15 @@
-export declare function showCursorPreview(imageUrl: string, size?: number): void;
+export interface ImageSize {
+    width: number;
+    height: number;
+}
+/**
+ * Bumped whenever the preview is torn down or replaced. Callers that size the
+ * preview asynchronously capture it first and bail if it moved, so a slow
+ * measurement cannot resurrect a ghost for a tool the user already left.
+ */
+export declare function cursorPreviewToken(): number;
+/** Synchronous hit for an already-measured image, so repeat picks don't flash. */
+export declare function peekImageSize(imageUrl: string): ImageSize | null;
+export declare function measureImage(imageUrl: string): Promise<ImageSize | null>;
+export declare function showCursorPreview(imageUrl: string, width?: number, height?: number): void;
 export declare function hideCursorPreview(): void;

package/dist/runtime/annotation/engine/cursor-preview.js

@@ -4,6 +4,32 @@ const PADDING = 6;
 const CROSSHAIR_SIZE = 12;
 let previewEl = null;
 let mouseMoveHandler = null;
+let previewToken = 0;
+const naturalSizeCache = /* @__PURE__ */ new Map();
+export function cursorPreviewToken() {
+  return previewToken;
+}
+export function peekImageSize(imageUrl) {
+  return naturalSizeCache.get(imageUrl) ?? null;
+}
+export function measureImage(imageUrl) {
+  const cached = naturalSizeCache.get(imageUrl);
+  if (cached) return Promise.resolve(cached);
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.addEventListener("load", () => {
+      const size = { width: img.naturalWidth, height: img.naturalHeight };
+      if (!size.width || !size.height) {
+        resolve(null);
+        return;
+      }
+      naturalSizeCache.set(imageUrl, size);
+      resolve(size);
+    });
+    img.addEventListener("error", () => resolve(null));
+    img.src = imageUrl;
+  });
+}
 function isOverPage(e) {
   const target = e.target;
   if (!target) return false;
@@ -21,16 +47,15 @@ function onMouseMove(e) {
     document.body.style.cursor = "";
   }
 }
-export function showCursorPreview(imageUrl, size = 80) {
+export function showCursorPreview(imageUrl, width = 80, height = width) {
   hideCursorPreview();
-  const outerSize = size + PADDING * 2;
   previewEl = document.createElement("div");
   Object.assign(previewEl.style, {
     position: "fixed",
     zIndex: "9999",
     pointerEvents: "none",
-    width: `${outerSize}px`,
-    height: `${outerSize}px`,
+    width: `${width + PADDING * 2}px`,
+    height: `${height + PADDING * 2}px`,
     transform: "translate(-50%, -50%)",
     border: `2px solid ${PRIMARY_COLOR}`,
     borderRadius: "3px",
@@ -41,8 +66,8 @@ export function showCursorPreview(imageUrl, size = 80) {
   const img = document.createElement("img");
   img.src = imageUrl;
   Object.assign(img.style, {
-    width: `${size}px`,
-    height: `${size}px`,
+    width: `${width}px`,
+    height: `${height}px`,
     objectFit: "contain",
     display: "block",
     pointerEvents: "none"
@@ -76,6 +101,7 @@ export function showCursorPreview(imageUrl, size = 80) {
   document.addEventListener("mousemove", mouseMoveHandler);
 }
 export function hideCursorPreview() {
+  previewToken++;
   if (previewEl) {
     previewEl.remove();
     previewEl = null;

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