kviewer 0.0.9 → 0.0.11

package/README.md

@@ -81,6 +81,11 @@ await viewerRef.value?.importAnnotations(draft, { mode: 'replace' })
 // Read / write form field values
 const fields = viewerRef.value?.getFormFieldValues()
 viewerRef.value?.setFormFieldValue('email', 'user@example.com')
+
+// Toggle form-edit mode programmatically
+viewerRef.value?.setFormEditMode(true)
+viewerRef.value?.toggleFormEditMode()
+const isEditing = viewerRef.value?.formEditMode.value
 </script>
 ```
 
@@ -92,9 +97,33 @@ viewerRef.value?.setFormFieldValue('email', 'user@example.com')
 | `getFormFieldValues()` | `FormFieldValue[]` |
 | `setFormFieldValue(fieldName, value)` | `void` |
 | `getKonvaCanvasState()` | `Record<number, string>` |
+| `formEditMode` | `Ref<boolean>` |
+| `setFormEditMode(enabled)` | `void` |
+| `toggleFormEditMode()` | `boolean` (the new state) |
 
 `exportPdf` options default to `{ flatten: false, download: false, preserveOriginalAnnotations: false }`.
 
+### Form-edit mode
+
+`KViewer` exposes a **form-edit mode** that turns every form field into a movable/resizable widget with a property sidebar. It's also reachable from the burger menu in the toolbar, but consumers can drive it externally via prop binding or the imperative API.
+
+Two-way binding via `v-model:form-edit-mode`:
+
+```vue
+<template>
+  <button @click="formEditMode = !formEditMode">
+    {{ formEditMode ? 'Exit edit mode' : 'Edit form' }}
+  </button>
+  <KViewer v-model:form-edit-mode="formEditMode" :source="pdfUrl" />
+</template>
+
+<script setup lang="ts">
+const formEditMode = ref(false)
+</script>
+```
+
+Or imperatively from the ref API (`setFormEditMode`, `toggleFormEditMode`, reactive `formEditMode` ref).
+
 When native PDF annotations are auto-imported into Konva, exporting with `preserveOriginalAnnotations: true` may duplicate annotations. Prefer `preserveOriginalAnnotations: false` in that workflow.
 
 ## Development

package/dist/module.json

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

package/dist/module.mjs

@@ -1,3 +1,5 @@
+import { createRequire } from 'node:module';
+import { dirname, join } from 'node:path';
 import { defineNuxtModule, createResolver, addPlugin, addComponentsDir } from '@nuxt/kit';
 
 const module$1 = defineNuxtModule({
@@ -20,6 +22,23 @@ const module$1 = defineNuxtModule({
       prefix: options.prefix,
       ignore: ["color-mode/**", "content/**", "prose/**"]
     });
+    const require_ = createRequire(import.meta.url);
+    const pdfjsDir = dirname(require_.resolve("pdfjs-dist/package.json"));
+    nuxt.hook("nitro:config", (nitroConfig) => {
+      nitroConfig.publicAssets ||= [];
+      nitroConfig.publicAssets.push(
+        {
+          dir: join(pdfjsDir, "standard_fonts"),
+          baseURL: "/_kviewer/standard_fonts",
+          maxAge: 60 * 60 * 24 * 365
+        },
+        {
+          dir: join(pdfjsDir, "cmaps"),
+          baseURL: "/_kviewer/cmaps",
+          maxAge: 60 * 60 * 24 * 365
+        }
+      );
+    });
   }
 });
 

package/dist/runtime/annotation/checkbox-styles.d.ts

@@ -0,0 +1,19 @@
+import type { CheckboxStyle } from './engine/types.js';
+/**
+ * Maps each standard checkbox style to:
+ * - `caption`: the single ZapfDingbats character written to `/MK /CA` on
+ *   the widget when the PDF is exported (per ISO 32000-1 §12.5.6.19).
+ * - `glyph`: a Unicode character with the same visual meaning, used by
+ *   the HTML viewer to render the checkbox in the user's browser without
+ *   needing to embed the ZapfDingbats font.
+ */
+export declare const CHECKBOX_STYLE_TABLE: Record<CheckboxStyle, {
+    caption: string;
+    glyph: string;
+}>;
+/** Reverse lookup: ZapfDingbats `/MK /CA` character → CheckboxStyle. */
+export declare function captionToStyle(caption: string): CheckboxStyle | undefined;
+export declare const CHECKBOX_STYLE_OPTIONS: {
+    label: string;
+    value: CheckboxStyle;
+}[];

package/dist/runtime/annotation/checkbox-styles.js

@@ -0,0 +1,27 @@
+export const CHECKBOX_STYLE_TABLE = {
+  // Heavy check / cross (U+2714 / U+2718) match Apple Preview's chunkier
+  // ZapfDingbats-style rendering — the thin U+2713/U+2717 glyphs feel
+  // anemic next to the field border. The trailing U+FE0E (variation
+  // selector-15) forces the text presentation, otherwise macOS swaps
+  // them for colored emoji.
+  check: { caption: "4", glyph: "\u2714\uFE0E" },
+  cross: { caption: "8", glyph: "\u2718\uFE0E" },
+  diamond: { caption: "u", glyph: "\u25C6" },
+  circle: { caption: "l", glyph: "\u25CF" },
+  star: { caption: "H", glyph: "\u2605" },
+  square: { caption: "n", glyph: "\u25A0" }
+};
+export function captionToStyle(caption) {
+  for (const [style, info] of Object.entries(CHECKBOX_STYLE_TABLE)) {
+    if (info.caption === caption) return style;
+  }
+  return void 0;
+}
+export const CHECKBOX_STYLE_OPTIONS = [
+  { label: "Check", value: "check" },
+  { label: "Cross", value: "cross" },
+  { label: "Diamond", value: "diamond" },
+  { label: "Circle", value: "circle" },
+  { label: "Star", value: "star" },
+  { label: "Square", value: "square" }
+];

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

@@ -279,5 +279,49 @@ export const annotationDefinitions = [
     resizable: true,
     draggable: true,
     icon: "i-lucide-stamp"
+  },
+  {
+    name: "formText",
+    type: AnnotationType.FORM_TEXT,
+    pdfjsEditorType: PdfjsAnnotationEditorType.NONE,
+    pdfjsAnnotationType: PdfjsAnnotationType.WIDGET,
+    subtype: "Widget",
+    isOnce: true,
+    resizable: false,
+    draggable: false,
+    icon: "i-lucide-text-cursor-input"
+  },
+  {
+    name: "formCheckbox",
+    type: AnnotationType.FORM_CHECKBOX,
+    pdfjsEditorType: PdfjsAnnotationEditorType.NONE,
+    pdfjsAnnotationType: PdfjsAnnotationType.WIDGET,
+    subtype: "Widget",
+    isOnce: true,
+    resizable: false,
+    draggable: false,
+    icon: "i-lucide-square-check"
+  },
+  {
+    name: "formSignature",
+    type: AnnotationType.FORM_SIGNATURE,
+    pdfjsEditorType: PdfjsAnnotationEditorType.NONE,
+    pdfjsAnnotationType: PdfjsAnnotationType.WIDGET,
+    subtype: "Widget",
+    isOnce: true,
+    resizable: false,
+    draggable: false,
+    icon: "i-lucide-signature"
+  },
+  {
+    name: "formRadio",
+    type: AnnotationType.FORM_RADIO,
+    pdfjsEditorType: PdfjsAnnotationEditorType.NONE,
+    pdfjsAnnotationType: PdfjsAnnotationType.WIDGET,
+    subtype: "Widget",
+    isOnce: true,
+    resizable: false,
+    draggable: false,
+    icon: "i-lucide-circle-dot"
   }
 ];

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

@@ -64,9 +64,12 @@ export declare abstract class Editor {
     addSerializedGroupToLayer(konvaStage: Konva.Stage, konvaString: string): void;
     deleteGroup(id: string, konvaStage: Konva.Stage): void;
     updateStyle(annotationStore: IAnnotationStore, style: IAnnotationStyle): void;
-    static Timer: {
-        [pageNumber: number]: number;
-    };
+    static Timer: Map<number, {
+        id: number;
+        callback: (pageNumber: number) => void;
+    }>;
     static TimerClear(pageNumber: number): void;
     static TimerStart(pageNumber: number, callback: (pageNumber: number) => void, delay?: number): void;
+    /** Immediately execute and clear all pending timers (e.g. before export). */
+    static flushAllTimers(): void;
 }

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

@@ -231,18 +231,31 @@ export class Editor {
   updateStyle(annotationStore, style) {
     this.changeStyle(annotationStore, style);
   }
-  static Timer = {};
+  static Timer = /* @__PURE__ */ new Map();
   static TimerClear(pageNumber) {
-    const timer = Editor.Timer[pageNumber];
-    if (timer) {
-      window.clearTimeout(timer);
+    const entry = Editor.Timer.get(pageNumber);
+    if (entry) {
+      window.clearTimeout(entry.id);
+      Editor.Timer.delete(pageNumber);
     }
   }
   static TimerStart(pageNumber, callback, delay = 1e3) {
-    Editor.Timer[pageNumber] = window.setTimeout(() => {
-      if (typeof callback === "function") {
-        callback(pageNumber);
-      }
-    }, delay);
+    Editor.Timer.set(pageNumber, {
+      callback,
+      id: window.setTimeout(() => {
+        Editor.Timer.delete(pageNumber);
+        if (typeof callback === "function") {
+          callback(pageNumber);
+        }
+      }, delay)
+    });
+  }
+  /** Immediately execute and clear all pending timers (e.g. before export). */
+  static flushAllTimers() {
+    for (const [pageNumber, entry] of Editor.Timer) {
+      window.clearTimeout(entry.id);
+      Editor.Timer.delete(pageNumber);
+      entry.callback(pageNumber);
+    }
   }
 }

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

@@ -13,6 +13,13 @@ export interface ISelectorOptions {
     onFreeTextDoubleClick?: (id: string) => void;
     /** When provided and returns true, only pen/mouse input can interact. */
     getStylusModeEnabled?: () => boolean;
+    /**
+     * Toggle external gesture handlers (e.g. panzoom) off while an annotation
+     * is being dragged/transformed. Without this, on mobile the panzoom
+     * single-finger pan runs in parallel with Konva's shape drag and both
+     * CSS transforms compete every frame, causing visible lag.
+     */
+    setExternalGesturesEnabled?: (enabled: boolean) => void;
 }
 export declare class Selector {
     readonly onSelected: (id: string, isClick: boolean, clientRect: IRect) => void;
@@ -23,6 +30,7 @@ export declare class Selector {
     private onRequestDeleteConfirm?;
     private onFreeTextDoubleClick?;
     private getStylusModeEnabled?;
+    private setExternalGesturesEnabled?;
     private transformerStore;
     private getAnnotationStore;
     private konvaCanvasStore;
@@ -32,7 +40,7 @@ export declare class Selector {
     private marqueeRect;
     private marqueeStartPos;
     private marqueeStage;
-    constructor({ konvaCanvasStore, getAnnotationStore, onDelete, onSelected, onMultiSelected, onCancel, onChanged, onRequestDeleteConfirm, onFreeTextDoubleClick, getStylusModeEnabled, }: ISelectorOptions);
+    constructor({ konvaCanvasStore, getAnnotationStore, onDelete, onSelected, onMultiSelected, onCancel, onChanged, onRequestDeleteConfirm, onFreeTextDoubleClick, getStylusModeEnabled, setExternalGesturesEnabled, }: ISelectorOptions);
     /** Returns true if this event should be rejected (finger touch in stylus mode). */
     private isStylusRejected;
     private handleKeyDown;

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

@@ -12,6 +12,7 @@ export class Selector {
   onRequestDeleteConfirm;
   onFreeTextDoubleClick;
   getStylusModeEnabled;
+  setExternalGesturesEnabled;
   transformerStore = /* @__PURE__ */ new Map();
   getAnnotationStore;
   konvaCanvasStore;
@@ -31,7 +32,8 @@ export class Selector {
     onChanged,
     onRequestDeleteConfirm,
     onFreeTextDoubleClick,
-    getStylusModeEnabled
+    getStylusModeEnabled,
+    setExternalGesturesEnabled
   }) {
     this.konvaCanvasStore = konvaCanvasStore;
     this.getAnnotationStore = getAnnotationStore;
@@ -43,6 +45,7 @@ export class Selector {
     this.onRequestDeleteConfirm = onRequestDeleteConfirm;
     this.onFreeTextDoubleClick = onFreeTextDoubleClick;
     this.getStylusModeEnabled = getStylusModeEnabled;
+    this.setExternalGesturesEnabled = setExternalGesturesEnabled;
     this.handleKeyDown = this.handleKeyDown.bind(this);
     window.addEventListener("keydown", this.handleKeyDown);
   }
@@ -188,6 +191,7 @@ export class Selector {
     const transformer = new Konva.Transformer({
       resizeEnabled: rawAnnotationStore.resizable,
       rotateEnabled: false,
+      enabledAnchors: ["top-left", "top-right", "bottom-left", "bottom-right"],
       borderStrokeWidth: defaultOptions.chooseSetting.STROKEWIDTH,
       borderStroke: defaultOptions.chooseSetting.COLOR,
       anchorFill: defaultOptions.chooseSetting.COLOR,
@@ -223,7 +227,34 @@ export class Selector {
     }
     transformer.off("transformend");
     transformer.off("transformstart");
+    let dragLayer = null;
+    const moveToDragLayer = () => {
+      if (dragLayer) return;
+      const bg = this.getBackgroundLayer(konvaStage);
+      dragLayer = new Konva.Layer();
+      konvaStage.add(dragLayer);
+      group.moveTo(dragLayer);
+      transformer.moveTo(dragLayer);
+      bg.batchDraw();
+      dragLayer.batchDraw();
+    };
+    const restoreFromDragLayer = () => {
+      if (!dragLayer) return;
+      const bg = this.getBackgroundLayer(konvaStage);
+      group.moveTo(bg);
+      transformer.moveTo(bg);
+      dragLayer.destroy();
+      dragLayer = null;
+      bg.batchDraw();
+    };
+    transformer.on("transformstart", () => {
+      this.setExternalGesturesEnabled?.(false);
+      moveToDragLayer();
+      this.onCancel();
+    });
     transformer.on("transformend", () => {
+      this.setExternalGesturesEnabled?.(true);
+      restoreFromDragLayer();
       this.onChanged(
         group.id(),
         group.toJSON(),
@@ -232,13 +263,22 @@ export class Selector {
         transformer.getClientRect()
       );
     });
-    transformer.on("transformstart", () => {
-      this.onCancel();
-    });
+    let dragStartRect = null;
+    let dragAnchorPos = null;
     transformer.on("dragstart", () => {
+      this.setExternalGesturesEnabled?.(false);
+      moveToDragLayer();
       this.onCancel();
+      const boxes = transformer.nodes().map((node) => node.getClientRect());
+      dragStartRect = this.getTotalBox(boxes);
+      const firstNode = transformer.nodes()[0];
+      dragAnchorPos = firstNode ? firstNode.getAbsolutePosition() : null;
     });
     transformer.on("dragend", () => {
+      this.setExternalGesturesEnabled?.(true);
+      restoreFromDragLayer();
+      dragStartRect = null;
+      dragAnchorPos = null;
       this.onChanged(
         group.id(),
         group.toJSON(),
@@ -248,29 +288,32 @@ export class Selector {
       );
     });
     transformer.on("dragmove", () => {
-      const boxes = transformer.nodes().map((node) => node.getClientRect());
-      const box = this.getTotalBox(boxes);
-      transformer.nodes().forEach((shape) => {
-        const absPos = shape.getAbsolutePosition();
-        const offsetX = box.x - absPos.x;
-        const offsetY = box.y - absPos.y;
-        const halfWidth = box.width / 2;
-        const halfHeight = box.height / 2;
-        const newAbsPos = { ...absPos };
-        if (box.x + halfWidth < 0) {
-          newAbsPos.x = -offsetX - halfWidth;
-        }
-        if (box.y + halfHeight < 0) {
-          newAbsPos.y = -offsetY - halfHeight;
-        }
-        if (box.x + halfWidth > konvaStage.width()) {
-          newAbsPos.x = konvaStage.width() - halfWidth - offsetX;
-        }
-        if (box.y + halfHeight > konvaStage.height()) {
-          newAbsPos.y = konvaStage.height() - halfHeight - offsetY;
-        }
-        shape.setAbsolutePosition(newAbsPos);
-      });
+      if (!dragStartRect || !dragAnchorPos) return;
+      const nodes = transformer.nodes();
+      const firstNode = nodes[0];
+      if (!firstNode) return;
+      const currentPos = firstNode.getAbsolutePosition();
+      const dx = currentPos.x - dragAnchorPos.x;
+      const dy = currentPos.y - dragAnchorPos.y;
+      const boxX = dragStartRect.x + dx;
+      const boxY = dragStartRect.y + dy;
+      const halfWidth = dragStartRect.width / 2;
+      const halfHeight = dragStartRect.height / 2;
+      const stageW = konvaStage.width();
+      const stageH = konvaStage.height();
+      let clampDx = 0;
+      let clampDy = 0;
+      if (boxX + halfWidth < 0) clampDx = -(boxX + halfWidth);
+      else if (boxX + halfWidth > stageW) clampDx = stageW - (boxX + halfWidth);
+      if (boxY + halfHeight < 0) clampDy = -(boxY + halfHeight);
+      else if (boxY + halfHeight > stageH) clampDy = stageH - (boxY + halfHeight);
+      if (clampDx !== 0 || clampDy !== 0) {
+        nodes.forEach((shape) => {
+          const pos = shape.getAbsolutePosition();
+          shape.setAbsolutePosition({ x: pos.x + clampDx, y: pos.y + clampDy });
+        });
+        dragAnchorPos = firstNode.getAbsolutePosition();
+      }
     });
     transformer.nodes([group]);
     this.getBackgroundLayer(konvaStage).add(transformer);
@@ -507,12 +550,11 @@ export class Selector {
           this.transformerStore.set("__multi__", transformer);
           nodes.forEach((node) => {
             node.on("dragstart.marquee", () => {
+              this.setExternalGesturesEnabled?.(false);
               this.onCancel();
             });
-            node.on("dragmove.marquee", () => {
-              this.onMultiSelected(matchedIds, transformer.getClientRect());
-            });
             node.on("dragend.marquee", () => {
+              this.setExternalGesturesEnabled?.(true);
               this.onMultiSelected(matchedIds, transformer.getClientRect());
             });
           });

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

@@ -1,12 +1,14 @@
 import Konva from 'konva';
 import type { IRect } from 'konva/lib/types';
-import { type IAnnotationStore, type IAnnotationStyle, type IAnnotationType } from './types.js';
+import { type IAnnotationStore, type IAnnotationStyle, type IAnnotationType, type PlaceFieldPayload } from './types.js';
 import { type IEditorFreeTextOptions } from './tools/free-text.js';
 export interface KonvaCanvas {
     pageNumber: number;
     konvaStage: Konva.Stage;
     wrapper: HTMLDivElement;
     isActive: boolean;
+    /** Base PDF-space page height — needed for coord flipping in placement tools. */
+    pageHeight: number;
 }
 export interface PainterCallbacks {
     setDefaultMode: () => void;
@@ -20,6 +22,7 @@ export interface PainterCallbacks {
     onAnnotationChanged: (annotationStore: IAnnotationStore, selectorRect: IRect) => void;
     onRequestTextInput: IEditorFreeTextOptions['onRequestTextInput'];
     onRequestDeleteConfirm?: (id: string) => Promise<boolean>;
+    onPlaceField?: (payload: PlaceFieldPayload) => void;
 }
 export declare class Painter {
     private userName;
@@ -33,12 +36,13 @@ export declare class Painter {
     private getStylusModeEnabled?;
     private getReadonly?;
     private freehandGroupingDelay;
-    constructor({ userName, callbacks, getStylusModeEnabled, getReadonly, freehandGroupingDelay, }: {
+    constructor({ userName, callbacks, getStylusModeEnabled, getReadonly, freehandGroupingDelay, setExternalGesturesEnabled, }: {
         userName: string;
         callbacks: PainterCallbacks;
         getStylusModeEnabled?: () => boolean;
         getReadonly?: () => boolean;
         freehandGroupingDelay?: number;
+        setExternalGesturesEnabled?: (enabled: boolean) => void;
     });
     private editFreeText;
     private bindGlobalEvents;

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

@@ -10,6 +10,7 @@ import {
   PAINTER_PAINTING_TYPE
 } from "./const.js";
 import { hideCursorPreview } from "./cursor-preview.js";
+import { Editor } from "./editor/editor.js";
 import { EditorCircle } from "./tools/circle.js";
 import { EditorFreeHand } from "./tools/freehand.js";
 import { EditorFreeHighlight } from "./tools/free-highlight.js";
@@ -21,8 +22,13 @@ import { EditorStamp } from "./tools/stamp.js";
 import { EditorNote } from "./tools/note.js";
 import { EditorArrow } from "./tools/arrow.js";
 import { EditorCloud } from "./tools/cloud.js";
+import { EditorFormField } from "./tools/form-field.js";
 import { Selector } from "./editor/selector.js";
 import { Store } from "./store.js";
+import { isIPad } from "./input-device.js";
+if (typeof window !== "undefined" && isIPad()) {
+  Konva.pixelRatio = 1;
+}
 export class Painter {
   userName;
   konvaCanvasStore = /* @__PURE__ */ new Map();
@@ -40,7 +46,8 @@ export class Painter {
     callbacks,
     getStylusModeEnabled,
     getReadonly,
-    freehandGroupingDelay
+    freehandGroupingDelay,
+    setExternalGesturesEnabled
   }) {
     this.userName = userName;
     this.callbacks = callbacks;
@@ -86,7 +93,8 @@ export class Painter {
       onFreeTextDoubleClick: (id) => {
         void this.editFreeText(id);
       },
-      getStylusModeEnabled: this.getStylusModeEnabled
+      getStylusModeEnabled: this.getStylusModeEnabled,
+      setExternalGesturesEnabled
     });
     this.bindGlobalEvents();
   }
@@ -138,7 +146,9 @@ export class Painter {
   }
   applyStylusTouchAction(stage) {
     stage.preventDefault(false);
-    Konva.pixelRatio = 1;
+    if (!isIPad()) {
+      Konva.pixelRatio = window.devicePixelRatio || 1;
+    }
     const content = stage.content;
     if (content) content.style.touchAction = "pan-x pan-y";
     stage.container().querySelectorAll("canvas").forEach((c) => {
@@ -147,7 +157,9 @@ export class Painter {
   }
   removeStylusTouchAction(stage) {
     stage.preventDefault(true);
-    Konva.pixelRatio = window.devicePixelRatio || 1;
+    if (!isIPad()) {
+      Konva.pixelRatio = window.devicePixelRatio || 1;
+    }
     const content = stage.content;
     if (content) content.style.touchAction = "";
     stage.container().querySelectorAll("canvas").forEach((c) => {
@@ -233,6 +245,11 @@ export class Painter {
         );
         return;
       }
+      if (storeEditor instanceof EditorFormField) {
+        storeEditor.setPageHeight(
+          this.konvaCanvasStore.get(pageNumber)?.pageHeight ?? 0
+        );
+      }
       storeEditor.activate(konvaStage, annotation);
       return;
     }
@@ -301,6 +318,24 @@ export class Painter {
       case AnnotationType.STRIKEOUT:
         editor = new EditorHighLight(editorOpts, annotation.type);
         break;
+      case AnnotationType.FORM_TEXT:
+      case AnnotationType.FORM_CHECKBOX:
+      case AnnotationType.FORM_RADIO:
+      case AnnotationType.FORM_SIGNATURE: {
+        const onPlaceField = this.callbacks.onPlaceField;
+        if (!onPlaceField) {
+          console.warn("Form-field placement requires an onPlaceField callback.");
+          return;
+        }
+        const pageHeight = this.konvaCanvasStore.get(pageNumber)?.pageHeight ?? 0;
+        const fieldType = annotation.type === AnnotationType.FORM_TEXT ? "text" : annotation.type === AnnotationType.FORM_CHECKBOX ? "checkbox" : annotation.type === AnnotationType.FORM_RADIO ? "radio" : "signature";
+        editor = new EditorFormField(editorOpts, {
+          fieldType,
+          pageHeight,
+          onPlaceField
+        });
+        break;
+      }
       case AnnotationType.SELECT:
         this.selector.activate(pageNumber);
         break;
@@ -440,7 +475,8 @@ export class Painter {
       pageNumber,
       konvaStage,
       wrapper: container,
-      isActive: false
+      isActive: false,
+      pageHeight: height
     });
     this.reDrawAnnotation(pageNumber);
     this.enablePainting();
@@ -551,6 +587,7 @@ export class Painter {
     return this.store.annotations;
   }
   getExportContext() {
+    Editor.flushAllTimers();
     const originalIds = this.store.originalIds;
     const modifiedIds = this.store.modifiedOriginals;
     const changedAnnotations = this.store.annotations.filter(

package/dist/runtime/annotation/engine/tools/form-field.d.ts

@@ -0,0 +1,24 @@
+import type { KonvaEventObject } from 'konva/lib/Node';
+import { type FormFieldType, type IAnnotationStore, type IAnnotationStyle, type PlaceFieldPayload } from '../types.js';
+import { Editor, type IEditorOptions } from '../editor/editor.js';
+export interface IEditorFormFieldOptions {
+    fieldType: FormFieldType;
+    /** PDF-space page height, needed to flip Konva page-local Y → PDF Y. */
+    pageHeight: number;
+    onPlaceField: (payload: PlaceFieldPayload) => void;
+}
+export declare class EditorFormField extends Editor {
+    private fieldType;
+    private pageHeight;
+    private onPlaceField;
+    private preview;
+    private vertex;
+    constructor(editorOptions: IEditorOptions, opts: IEditorFormFieldOptions);
+    setPageHeight(pageHeight: number): void;
+    protected mouseDownHandler(e: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    protected mouseMoveHandler(e: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    protected mouseUpHandler(): void;
+    private globalPointerUpHandler;
+    protected changeStyle(_a: IAnnotationStore, _s: IAnnotationStyle): void;
+    addSerializedGroupToLayer(): void;
+}