kviewer 0.0.1

package/README.md

@@ -0,0 +1,134 @@
+# Kabema PDF Editor
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+A Nuxt module for viewing, annotating, and exporting PDFs. Built on pdfjs-dist, Konva, and pdf-lib.
+
+## Features
+
+- 📄 PDF rendering with optional text selection layer
+- ✏️ 14 annotation tools: Select, Highlight, Strikeout, Underline, Free Text, Signature, Rectangle, Circle, Arrow, Cloud, Freehand, Free Highlight, Stamp, Note
+- 📤 Export PDF with or without flattened annotations
+- 💾 Import/export annotation state for draft saving
+- 📝 Interactive form fields (text, checkbox, radio, dropdown, signature, button)
+- 🔍 Full-text search with match highlighting
+- ⚡ Virtual scrolling for large documents
+- ↩️ Undo/redo history
+- 🗂️ Multi-tab document support (`KViewerTabs`)
+- 🎨 Customizable header and footer slots
+
+## Quick Setup
+
+Install the module:
+
+```bash
+pnpm add kviewer
+```
+
+Add it to your `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['kviewer'],
+  kviewer: {
+    prefix: 'K', // component prefix (default)
+  },
+})
+```
+
+## Basic Usage
+
+```vue
+<template>
+  <KViewer
+    :source="pdfUrl"
+    text-layer
+    user-name="Jane Doe"
+  />
+</template>
+
+<script setup lang="ts">
+const pdfUrl = '/documents/sample.pdf'
+</script>
+```
+
+`source` accepts a URL string, `Uint8Array`, or a pdfjs-dist source object.
+
+## Viewer Ref API
+
+`KViewer` exposes methods via a template ref:
+
+```vue
+<template>
+  <KViewer ref="viewerRef" :source="pdfUrl" />
+</template>
+
+<script setup lang="ts">
+const viewerRef = ref(null)
+
+// Export the PDF as bytes (or trigger a download)
+const bytes = await viewerRef.value?.exportPdf()
+await viewerRef.value?.exportPdf({ flatten: true, download: true })
+
+// Save / restore annotation drafts
+const draft = viewerRef.value?.getAnnotations() ?? []
+await viewerRef.value?.importAnnotations(draft, { mode: 'replace' })
+
+// Read / write form field values
+const fields = viewerRef.value?.getFormFieldValues()
+viewerRef.value?.setFormFieldValue('email', 'user@example.com')
+</script>
+```
+
+| Method | Returns |
+|---|---|
+| `getAnnotations()` | `IAnnotationStore[]` |
+| `importAnnotations(annotations, options?)` | `Promise<{ loaded: number; skipped: number }>` |
+| `exportPdf(options?)` | `Promise<Uint8Array>` |
+| `getFormFieldValues()` | `FormFieldValue[]` |
+| `setFormFieldValue(fieldName, value)` | `void` |
+| `getKonvaCanvasState()` | `Record<number, string>` |
+
+`exportPdf` options default to `{ flatten: false, download: false, preserveOriginalAnnotations: false }`.
+
+## Development
+
+<details>
+  <summary>Local development</summary>
+
+  ```bash
+  # Install dependencies
+  pnpm install
+
+  # Generate type stubs
+  pnpm dev:prepare
+
+  # Develop with the playground
+  pnpm dev
+
+  # Build the playground
+  pnpm dev:build
+
+  # Run ESLint
+  pnpm lint
+
+  # Run Vitest
+  pnpm test
+  pnpm test:watch
+  ```
+
+</details>
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/kviewer/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/kviewer
+[npm-downloads-src]: https://img.shields.io/npm/dm/kviewer.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/kviewer
+[license-src]: https://img.shields.io/npm/l/kviewer.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/kviewer
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt
+[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -0,0 +1,15 @@
+import * as _nuxt_schema from '@nuxt/schema';
+export { ExportPdfOptions } from '../dist/runtime/public-types.js';
+
+interface ModuleOptions {
+    /**
+     * Prefix for components
+     * @defaultValue `K`
+     */
+    prefix?: string;
+}
+
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "kviewer",
+  "configKey": "kviewer",
+  "version": "0.0.1",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,26 @@
+import { defineNuxtModule, createResolver, addPlugin, addComponentsDir } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "kviewer",
+    configKey: "kviewer"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {
+    prefix: "K"
+  },
+  setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    nuxt.options.css.push("pdfjs-dist/web/pdf_viewer.css");
+    nuxt.options.css.push(resolve("./runtime/assets/kviewer.css"));
+    addPlugin(resolve("./runtime/plugin"));
+    addComponentsDir({
+      path: resolve("./runtime/components"),
+      pathPrefix: false,
+      prefix: options.prefix,
+      ignore: ["color-mode/**", "content/**", "prose/**"]
+    });
+  }
+});
+
+export { module$1 as default };

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

@@ -0,0 +1,52 @@
+import { type IAnnotationType } from './types.js';
+export declare const defaultOptions: {
+    colors: string[];
+    fontSize: number[];
+    defaultFontList: {
+        label: string;
+        value: string;
+    }[];
+    signature: {
+        COLORS: string[];
+        WIDTH: number;
+        HEIGHT: number;
+        TYPE: "Draw";
+        MAX_SIZE: number;
+        ACCEPT: string;
+    };
+    stamp: {
+        MAX_SIZE: number;
+        ACCEPT: string;
+        DEFAULT_STAMP: string[];
+        editor: {
+            DEFAULT_BACKGROUND_COLOR: string;
+            DEFAULT_BORDER_COLOR: string | null;
+            DEFAULT_TEXT_COLOR: string;
+        };
+    };
+    chooseSetting: {
+        COLOR: string;
+        STROKEWIDTH: number;
+        OPACITY: number;
+    };
+    connectorLine: {
+        ENABLED: boolean;
+        COLOR: string;
+        WIDTH: number;
+        OPACITY: number;
+    };
+    setting: {
+        COLOR: string | undefined;
+        FONT_SIZE: number | undefined;
+        HIGHLIGHT_COLOR: string | undefined;
+        STRIKEOUT_COLOR: string | undefined;
+        UNDERLINE_COLOR: string | undefined;
+        STROKE_WIDTH: number;
+        OPACITY: number;
+        MAX_CURSOR_SIZE: number;
+        MAX_UPLOAD_IMAGE_SIZE: number;
+        LOAD_PDF_ANNOTATION: boolean;
+        DB_CLICK_DELETE: boolean;
+    };
+};
+export declare const annotationDefinitions: IAnnotationType[];

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

@@ -0,0 +1,283 @@
+import {
+  AnnotationType,
+  PdfjsAnnotationEditorType,
+  PdfjsAnnotationType
+} from "./types.js";
+const colors = [
+  "#000000",
+  "#ff0000",
+  "#ffbe00",
+  "#ffff00",
+  "#83d33c",
+  "#00b445",
+  "#00b2f4",
+  "#1677ff",
+  "#001f63",
+  "#7828a4",
+  "#ff00ff"
+];
+const fontSizes = [14, 16, 18, 20, 22, 24];
+export const defaultOptions = {
+  colors,
+  fontSize: fontSizes,
+  defaultFontList: [
+    { label: "Arial", value: "Arial" },
+    { label: "Times New Roman", value: "Times New Roman" },
+    { label: "Georgia", value: "Georgia" },
+    { label: "Verdana", value: "Verdana" },
+    { label: "Tahoma", value: "Tahoma, Geneva, sans-serif" },
+    { label: "Trebuchet MS", value: '"Trebuchet MS", sans-serif' },
+    {
+      label: "Courier New",
+      value: '"Courier New", Courier, monospace'
+    },
+    {
+      label: "Lucida Console",
+      value: '"Lucida Console", Monaco, monospace'
+    }
+  ],
+  signature: {
+    COLORS: ["#000000", "#ff0000", "#1677ff"],
+    WIDTH: 366,
+    HEIGHT: 200,
+    TYPE: "Draw",
+    MAX_SIZE: 1024 * 1024 * 5,
+    ACCEPT: ".png,.jpg,.jpeg,.bmp"
+  },
+  stamp: {
+    MAX_SIZE: 1024 * 1024 * 5,
+    ACCEPT: ".png,.jpg,.jpeg,.bmp",
+    DEFAULT_STAMP: [],
+    editor: {
+      DEFAULT_BACKGROUND_COLOR: "#00b445",
+      DEFAULT_BORDER_COLOR: null,
+      DEFAULT_TEXT_COLOR: "#fff"
+    }
+  },
+  chooseSetting: {
+    COLOR: "#1677ff",
+    STROKEWIDTH: 2,
+    OPACITY: 0.7
+  },
+  connectorLine: {
+    ENABLED: true,
+    COLOR: "#1677ff",
+    WIDTH: 2,
+    OPACITY: 0.7
+  },
+  setting: {
+    COLOR: colors[0],
+    FONT_SIZE: fontSizes[2],
+    HIGHLIGHT_COLOR: colors[3],
+    STRIKEOUT_COLOR: colors[1],
+    UNDERLINE_COLOR: colors[7],
+    STROKE_WIDTH: 2,
+    OPACITY: 1,
+    MAX_CURSOR_SIZE: 96,
+    MAX_UPLOAD_IMAGE_SIZE: 800,
+    LOAD_PDF_ANNOTATION: true,
+    DB_CLICK_DELETE: false
+  }
+};
+export const annotationDefinitions = [
+  {
+    name: "select",
+    type: AnnotationType.SELECT,
+    pdfjsEditorType: PdfjsAnnotationEditorType.NONE,
+    pdfjsAnnotationType: PdfjsAnnotationType.NONE,
+    isOnce: false,
+    resizable: false,
+    draggable: false,
+    icon: "i-lucide-mouse-pointer-2"
+  },
+  {
+    name: "highlight",
+    type: AnnotationType.HIGHLIGHT,
+    pdfjsEditorType: PdfjsAnnotationEditorType.HIGHLIGHT,
+    pdfjsAnnotationType: PdfjsAnnotationType.HIGHLIGHT,
+    subtype: "Highlight",
+    isOnce: false,
+    resizable: false,
+    draggable: false,
+    icon: "i-lucide-highlighter",
+    style: { color: defaultOptions.setting.HIGHLIGHT_COLOR },
+    styleEditable: { color: true, strokeWidth: false, opacity: false }
+  },
+  {
+    name: "strikeout",
+    type: AnnotationType.STRIKEOUT,
+    pdfjsEditorType: PdfjsAnnotationEditorType.HIGHLIGHT,
+    pdfjsAnnotationType: PdfjsAnnotationType.STRIKEOUT,
+    subtype: "StrikeOut",
+    isOnce: false,
+    resizable: false,
+    draggable: false,
+    icon: "i-lucide-strikethrough",
+    style: { color: defaultOptions.setting.STRIKEOUT_COLOR },
+    styleEditable: { color: true, opacity: false, strokeWidth: false }
+  },
+  {
+    name: "underline",
+    type: AnnotationType.UNDERLINE,
+    pdfjsEditorType: PdfjsAnnotationEditorType.HIGHLIGHT,
+    pdfjsAnnotationType: PdfjsAnnotationType.UNDERLINE,
+    subtype: "Underline",
+    isOnce: false,
+    resizable: false,
+    draggable: false,
+    icon: "i-lucide-underline",
+    style: { color: defaultOptions.setting.UNDERLINE_COLOR },
+    styleEditable: { color: true, opacity: false, strokeWidth: false }
+  },
+  {
+    name: "rectangle",
+    type: AnnotationType.RECTANGLE,
+    pdfjsEditorType: PdfjsAnnotationEditorType.INK,
+    pdfjsAnnotationType: PdfjsAnnotationType.SQUARE,
+    subtype: "Square",
+    isOnce: true,
+    resizable: true,
+    draggable: true,
+    icon: "i-lucide-square",
+    style: {
+      color: defaultOptions.setting.COLOR,
+      strokeWidth: defaultOptions.setting.STROKE_WIDTH,
+      opacity: defaultOptions.setting.OPACITY
+    },
+    styleEditable: { color: true, opacity: true, strokeWidth: true }
+  },
+  {
+    name: "circle",
+    type: AnnotationType.CIRCLE,
+    pdfjsEditorType: PdfjsAnnotationEditorType.INK,
+    pdfjsAnnotationType: PdfjsAnnotationType.CIRCLE,
+    subtype: "Circle",
+    isOnce: true,
+    resizable: true,
+    draggable: true,
+    icon: "i-lucide-circle",
+    style: {
+      color: defaultOptions.setting.COLOR,
+      strokeWidth: defaultOptions.setting.STROKE_WIDTH,
+      opacity: defaultOptions.setting.OPACITY
+    },
+    styleEditable: { color: true, opacity: true, strokeWidth: true }
+  },
+  {
+    name: "note",
+    type: AnnotationType.NOTE,
+    pdfjsEditorType: PdfjsAnnotationEditorType.INK,
+    pdfjsAnnotationType: PdfjsAnnotationType.TEXT,
+    subtype: "Text",
+    isOnce: true,
+    resizable: false,
+    draggable: true,
+    icon: "i-lucide-sticky-note"
+  },
+  {
+    name: "arrow",
+    type: AnnotationType.ARROW,
+    pdfjsEditorType: PdfjsAnnotationEditorType.INK,
+    pdfjsAnnotationType: PdfjsAnnotationType.LINE,
+    subtype: "Arrow",
+    isOnce: true,
+    resizable: true,
+    draggable: true,
+    icon: "i-lucide-move-up-right",
+    style: {
+      color: defaultOptions.setting.COLOR,
+      strokeWidth: defaultOptions.setting.STROKE_WIDTH,
+      opacity: defaultOptions.setting.OPACITY
+    },
+    styleEditable: { color: true, opacity: true, strokeWidth: true }
+  },
+  {
+    name: "cloud",
+    type: AnnotationType.CLOUD,
+    pdfjsEditorType: PdfjsAnnotationEditorType.INK,
+    pdfjsAnnotationType: PdfjsAnnotationType.POLYLINE,
+    subtype: "PolyLine",
+    isOnce: true,
+    resizable: true,
+    draggable: true,
+    icon: "i-lucide-cloud",
+    style: {
+      color: defaultOptions.setting.COLOR,
+      strokeWidth: defaultOptions.setting.STROKE_WIDTH,
+      opacity: defaultOptions.setting.OPACITY
+    },
+    styleEditable: { color: true, opacity: true, strokeWidth: true }
+  },
+  {
+    name: "freehand",
+    type: AnnotationType.FREEHAND,
+    pdfjsEditorType: PdfjsAnnotationEditorType.INK,
+    pdfjsAnnotationType: PdfjsAnnotationType.INK,
+    subtype: "Ink",
+    isOnce: true,
+    resizable: true,
+    draggable: true,
+    icon: "i-lucide-pencil",
+    style: {
+      color: defaultOptions.setting.COLOR,
+      strokeWidth: defaultOptions.setting.STROKE_WIDTH,
+      opacity: defaultOptions.setting.OPACITY
+    },
+    styleEditable: { color: true, opacity: true, strokeWidth: true }
+  },
+  {
+    name: "freeHighlight",
+    type: AnnotationType.FREE_HIGHLIGHT,
+    pdfjsEditorType: PdfjsAnnotationEditorType.INK,
+    pdfjsAnnotationType: PdfjsAnnotationType.INK,
+    subtype: "Highlight",
+    isOnce: true,
+    resizable: true,
+    draggable: true,
+    icon: "i-lucide-pen-line",
+    style: {
+      color: defaultOptions.setting.COLOR,
+      strokeWidth: 10,
+      opacity: 0.5
+    },
+    styleEditable: { color: true, opacity: true, strokeWidth: false }
+  },
+  {
+    name: "freeText",
+    type: AnnotationType.FREETEXT,
+    pdfjsEditorType: PdfjsAnnotationEditorType.STAMP,
+    pdfjsAnnotationType: PdfjsAnnotationType.FREETEXT,
+    subtype: "FreeText",
+    isOnce: true,
+    resizable: true,
+    draggable: true,
+    icon: "i-lucide-type",
+    style: {
+      color: defaultOptions.setting.COLOR,
+      fontSize: defaultOptions.setting.FONT_SIZE
+    },
+    styleEditable: { color: true, opacity: true, strokeWidth: false }
+  },
+  {
+    name: "signature",
+    type: AnnotationType.SIGNATURE,
+    pdfjsEditorType: PdfjsAnnotationEditorType.STAMP,
+    pdfjsAnnotationType: PdfjsAnnotationType.STAMP,
+    subtype: "Caret",
+    isOnce: true,
+    resizable: true,
+    draggable: true,
+    icon: "i-lucide-pen-tool"
+  },
+  {
+    name: "stamp",
+    type: AnnotationType.STAMP,
+    pdfjsEditorType: PdfjsAnnotationEditorType.STAMP,
+    pdfjsAnnotationType: PdfjsAnnotationType.STAMP,
+    subtype: "Stamp",
+    isOnce: true,
+    resizable: true,
+    draggable: true,
+    icon: "i-lucide-stamp"
+  }
+];

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

@@ -0,0 +1,6 @@
+export declare const PAINTER_WRAPPER_PREFIX = "KViewer_painter_wrapper";
+export declare const PAINTER_IS_PAINTING_STYLE = "KViewer_is_painting";
+export declare const PAINTER_PAINTING_TYPE = "KViewer_painting_type";
+export declare const SHAPE_GROUP_NAME = "KViewer_shape_group";
+export declare const SELECTOR_HOVER_STYLE = "KViewer_selector_hover";
+export declare const CURSOR_CSS_PROPERTY = "--KViewer-image-cursor";

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

@@ -0,0 +1,7 @@
+const STYLE_PREFIX = "KViewer";
+export const PAINTER_WRAPPER_PREFIX = `${STYLE_PREFIX}_painter_wrapper`;
+export const PAINTER_IS_PAINTING_STYLE = `${STYLE_PREFIX}_is_painting`;
+export const PAINTER_PAINTING_TYPE = `${STYLE_PREFIX}_painting_type`;
+export const SHAPE_GROUP_NAME = `${STYLE_PREFIX}_shape_group`;
+export const SELECTOR_HOVER_STYLE = `${STYLE_PREFIX}_selector_hover`;
+export const CURSOR_CSS_PROPERTY = `--${STYLE_PREFIX}-image-cursor`;

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

@@ -0,0 +1,2 @@
+export declare function showCursorPreview(imageUrl: string, size?: number): void;
+export declare function hideCursorPreview(): void;

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

@@ -0,0 +1,88 @@
+const PRIMARY_COLOR = "#1677ff";
+const CROSSHAIR_COLOR = "#999";
+const PADDING = 6;
+const CROSSHAIR_SIZE = 12;
+let previewEl = null;
+let mouseMoveHandler = null;
+function isOverPage(e) {
+  const target = e.target;
+  if (!target) return false;
+  return !!target.closest(".kviewer-annotation-layer, .kviewer-page");
+}
+function onMouseMove(e) {
+  if (!previewEl) return;
+  if (isOverPage(e)) {
+    previewEl.style.left = `${e.clientX}px`;
+    previewEl.style.top = `${e.clientY}px`;
+    previewEl.style.display = "";
+    document.body.style.cursor = "none";
+  } else {
+    previewEl.style.display = "none";
+    document.body.style.cursor = "";
+  }
+}
+export function showCursorPreview(imageUrl, size = 80) {
+  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`,
+    transform: "translate(-50%, -50%)",
+    border: `2px solid ${PRIMARY_COLOR}`,
+    borderRadius: "3px",
+    padding: `${PADDING}px`,
+    left: "-200px",
+    top: "-200px"
+  });
+  const img = document.createElement("img");
+  img.src = imageUrl;
+  Object.assign(img.style, {
+    width: `${size}px`,
+    height: `${size}px`,
+    objectFit: "contain",
+    display: "block",
+    pointerEvents: "none"
+  });
+  previewEl.appendChild(img);
+  const hLine = document.createElement("div");
+  Object.assign(hLine.style, {
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    width: `${CROSSHAIR_SIZE}px`,
+    height: "1px",
+    backgroundColor: CROSSHAIR_COLOR,
+    transform: "translate(-50%, -50%)"
+  });
+  previewEl.appendChild(hLine);
+  const vLine = document.createElement("div");
+  Object.assign(vLine.style, {
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    width: "1px",
+    height: `${CROSSHAIR_SIZE}px`,
+    backgroundColor: CROSSHAIR_COLOR,
+    transform: "translate(-50%, -50%)"
+  });
+  previewEl.appendChild(vLine);
+  document.body.appendChild(previewEl);
+  document.body.style.cursor = "none";
+  mouseMoveHandler = onMouseMove;
+  document.addEventListener("mousemove", mouseMoveHandler);
+}
+export function hideCursorPreview() {
+  if (previewEl) {
+    previewEl.remove();
+    previewEl = null;
+  }
+  if (mouseMoveHandler) {
+    document.removeEventListener("mousemove", mouseMoveHandler);
+    mouseMoveHandler = null;
+  }
+  document.body.style.cursor = "";
+}

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

@@ -0,0 +1,69 @@
+import Konva from 'konva';
+import type { KonvaEventObject } from 'konva/lib/Node';
+import type { AnnotationType, IAnnotationContentsObj, IAnnotationStore, IAnnotationStyle, IAnnotationType } from '../types.js';
+export interface IEditorOptions {
+    userName: string;
+    konvaStage: Konva.Stage;
+    pageNumber: number;
+    annotation: IAnnotationType | null;
+    onAdd: (annotationStore: IAnnotationStore) => void;
+    onChange: (id: string, updates: Partial<IAnnotationStore>) => void;
+    /** When provided and returns true, only pen/mouse input can draw. */
+    getStylusModeEnabled?: () => boolean;
+}
+export interface IShapeGroup {
+    id: string;
+    konvaGroup: Konva.Group;
+    isDone: boolean;
+    pageNumber: number;
+    annotation?: IAnnotationType;
+}
+export declare abstract class Editor {
+    protected userName: string;
+    readonly id: string;
+    readonly onAdd: (annotationStore: IAnnotationStore) => void;
+    readonly onChange: (id: string, updates: Partial<IAnnotationStore>) => void;
+    protected konvaStage: Konva.Stage;
+    protected readonly pageNumber: number;
+    protected currentAnnotation: IAnnotationType | null;
+    protected isPainting: boolean;
+    shapeGroupStore: Map<string, IShapeGroup>;
+    currentShapeGroup: IShapeGroup | null;
+    protected getStylusModeEnabled?: () => boolean;
+    static MinSize: number;
+    constructor({ userName, konvaStage, pageNumber, annotation, onAdd, editorType, onChange, getStylusModeEnabled, }: IEditorOptions & {
+        editorType: AnnotationType;
+    });
+    private dispatchAddEvent;
+    private dispatchChangedEvent;
+    protected enableEditMode(): void;
+    protected disableEditMode(): void;
+    protected getBgLayer(konvaStage?: Konva.Stage): Konva.Layer;
+    protected delShapeGroup(id: string): void;
+    protected getShapeGroupById(id: string): Konva.Group;
+    protected setShapeGroupDone({ id, contentsObj, color, fontSize, }: {
+        id: string;
+        contentsObj?: IAnnotationContentsObj;
+        color?: string;
+        fontSize?: number;
+    }): void;
+    protected setChanged(id: string, updates: Partial<IAnnotationStore>): void;
+    protected getNodesByClassName<T extends Konva.Node>(className: string): T[];
+    protected getGroupNodesByClassName<T extends Konva.Node>(group: Konva.Group, className: string): T[];
+    protected updateKonvaGroup(id: string, newKonvaGroup: Konva.Group): IShapeGroup | null;
+    protected createShapeGroup(): IShapeGroup;
+    protected abstract mouseDownHandler(e: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    protected abstract mouseMoveHandler(e: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    protected abstract mouseUpHandler(e: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    protected abstract changeStyle(annotationStore: IAnnotationStore, style: IAnnotationStyle): void;
+    activate(konvaStage: Konva.Stage, annotation: IAnnotationType): void;
+    rebindEvents(): void;
+    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 TimerClear(pageNumber: number): void;
+    static TimerStart(pageNumber: number, callback: (pageNumber: number) => void): void;
+}