kviewer 0.3.1 → 0.3.3

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, KVIEWER_EMBED_UNSUPPORTED_METHOD_ERROR_NAME, KViewerApi, KViewerEmbedBridgeOptions, KViewerEmbedClient, KViewerEmbedClientOptions, KViewerEmbedEventName, KViewerEmbedEventPayloads, KViewerEmbedMethodName, KViewerHostApi, 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.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { createRequire } from 'node:module';
 import { dirname, join } from 'node:path';
 import { defineNuxtModule, createResolver, extendViteConfig, addPlugin, addComponentsDir, addImports } from '@nuxt/kit';
-export { KVIEWER_EMBED_PROTOCOL_VERSION, KViewerEmbedClient, useKViewerEmbedBridge } from '../dist/runtime/public-types.js';
+export { KVIEWER_EMBED_PROTOCOL_VERSION, KVIEWER_EMBED_UNSUPPORTED_METHOD_ERROR_NAME, KViewerEmbedClient, useKViewerEmbedBridge } from '../dist/runtime/public-types.js';
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -34,19 +34,14 @@ const module$1 = defineNuxtModule({
       config.optimizeDeps ||= {};
       config.optimizeDeps.include ||= [];
       config.optimizeDeps.include.push(
-        "konva",
-        "pdf-lib",
-        "pdfjs-dist/legacy/build/pdf.mjs",
-        "pdfjs-dist/web/pdf_viewer.mjs",
-        // unicode-font.ts registers @pdf-lib/fontkit for Unicode font
-        // embedding. Its ESM build does `import pako from 'pako'`, but pako 1.x
-        // is CJS with no `default` export — so unless fontkit is pre-bundled
-        // (where esbuild applies CJS interop and synthesizes the default), the
-        // browser receives the raw pako index.js and throws "does not provide
-        // an export named 'default'". The `kviewer >` prefix anchors resolution
-        // through this module, so it works even when pnpm leaves fontkit
-        // un-hoisted in the consumer (a bare '@pdf-lib/fontkit' entry would not
-        // resolve from the consumer root and Vite would silently skip it).
+        "kviewer > konva",
+        "kviewer > pdf-lib",
+        "kviewer > pdfjs-dist/legacy/build/pdf.mjs",
+        "kviewer > pdfjs-dist/web/pdf_viewer.mjs",
+        // fontkit's ESM build does `import pako from 'pako'`, but pako 1.x is
+        // CJS with no `default` export — without pre-bundling (where esbuild
+        // synthesizes it) the browser throws "does not provide an export named
+        // 'default'".
         "kviewer > @pdf-lib/fontkit"
       );
     });
@@ -56,6 +51,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({
@@ -67,7 +66,12 @@ const module$1 = defineNuxtModule({
     addImports([
       { name: "useKViewerEmbedBridge", from: resolve("./runtime/embed/bridge-host") },
       { name: "KViewerEmbedClient", from: resolve("./runtime/embed/bridge-client") },
-      { name: "KVIEWER_EMBED_PROTOCOL_VERSION", from: resolve("./runtime/embed/protocol") }
+      { name: "KVIEWER_EMBED_PROTOCOL_VERSION", from: resolve("./runtime/embed/protocol") },
+      {
+        name: "UNSUPPORTED_METHOD_ERROR_NAME",
+        as: "KVIEWER_EMBED_UNSUPPORTED_METHOD_ERROR_NAME",
+        from: resolve("./runtime/embed/protocol")
+      }
     ]);
     const require_ = createRequire(import.meta.url);
     const pdfjsDir = dirname(require_.resolve("pdfjs-dist/package.json"));

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