kviewer 0.0.1

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

@@ -0,0 +1,591 @@
+import Konva from "konva";
+import {
+  annotationDefinitions
+} from "./config.js";
+import {
+  AnnotationType
+} from "./types.js";
+import {
+  PAINTER_IS_PAINTING_STYLE,
+  PAINTER_PAINTING_TYPE
+} from "./const.js";
+import { hideCursorPreview } from "./cursor-preview.js";
+import { EditorCircle } from "./tools/circle.js";
+import { EditorFreeHand } from "./tools/freehand.js";
+import { EditorFreeHighlight } from "./tools/free-highlight.js";
+import { EditorFreeText } from "./tools/free-text.js";
+import { EditorHighLight } from "./tools/highlight.js";
+import { EditorRectangle } from "./tools/rectangle.js";
+import { EditorSignature } from "./tools/signature.js";
+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 { Selector } from "./editor/selector.js";
+import { Store } from "./store.js";
+export class Painter {
+  userName;
+  konvaCanvasStore = /* @__PURE__ */ new Map();
+  editorStore = /* @__PURE__ */ new Map();
+  currentAnnotation = null;
+  store;
+  selector;
+  tempDataTransfer = null;
+  callbacks;
+  getStylusModeEnabled;
+  constructor({
+    userName,
+    callbacks,
+    getStylusModeEnabled
+  }) {
+    this.userName = userName;
+    this.callbacks = callbacks;
+    this.getStylusModeEnabled = getStylusModeEnabled;
+    this.store = new Store();
+    this.selector = new Selector({
+      konvaCanvasStore: this.konvaCanvasStore,
+      getAnnotationStore: (id) => this.store.annotation(id),
+      onSelected: (id, isClick, transformerRect) => {
+        const ann = this.store.annotation(id);
+        if (ann) {
+          const viewportRect = this.toViewportRect(ann.pageNumber, transformerRect);
+          this.callbacks.onAnnotationSelected(ann, isClick, viewportRect);
+        }
+      },
+      onMultiSelected: (ids, combinedRect) => {
+        const anns = ids.map((id) => this.store.annotation(id)).filter((a) => !!a);
+        if (anns.length > 0) {
+          const viewportRect = this.toViewportRect(anns[0].pageNumber, combinedRect);
+          this.callbacks.onMultiSelected(anns, viewportRect);
+        }
+      },
+      onChanged: async (id, groupString, _rawAnnotationStore, konvaClientRect, transformerRect) => {
+        const editor = this.findEditorForGroupId(id);
+        if (editor) {
+          this.updateStore(id, { konvaString: groupString, konvaClientRect });
+        }
+        const ann = this.store.annotation(id);
+        if (ann) {
+          const viewportRect = this.toViewportRect(ann.pageNumber, transformerRect);
+          this.callbacks.onAnnotationChanged(ann, viewportRect);
+        }
+      },
+      onCancel: () => {
+        this.callbacks.onAnnotationChanging();
+      },
+      onDelete: (id) => {
+        this.deleteAnnotation(id, true);
+      },
+      onRequestDeleteConfirm: callbacks.onRequestDeleteConfirm,
+      onFreeTextDoubleClick: (id) => {
+        void this.editFreeText(id);
+      },
+      getStylusModeEnabled: this.getStylusModeEnabled
+    });
+    this.bindGlobalEvents();
+  }
+  async editFreeText(id) {
+    const ann = this.store.annotation(id);
+    if (!ann) return;
+    const result = await this.callbacks.onRequestTextInput({
+      defaultColor: ann.color ?? "#ff0000",
+      defaultFontSize: ann.fontSize ?? 18,
+      initialText: ann.contentsObj?.text ?? ""
+    });
+    if (result.cancelled) return;
+    const editor = this.findEditorForGroupId(id);
+    if (editor instanceof EditorFreeText) {
+      editor.applyTextContent(id, result.inputValue, result.color, result.fontSize);
+      const newTransformerRect = this.selector.refreshCurrentSelection();
+      if (newTransformerRect) {
+        const updatedAnn = this.store.annotation(id);
+        if (updatedAnn) {
+          const viewportRect = this.toViewportRect(updatedAnn.pageNumber, newTransformerRect);
+          this.callbacks.onAnnotationSelected(updatedAnn, false, viewportRect);
+        }
+      }
+    }
+  }
+  bindGlobalEvents() {
+    window.addEventListener("keyup", this.globalKeyUpHandler);
+  }
+  globalKeyUpHandler = (e) => {
+    if (e.code === "Escape" && this.currentAnnotation && (this.currentAnnotation.type === AnnotationType.SIGNATURE || this.currentAnnotation.type === AnnotationType.STAMP)) {
+      hideCursorPreview();
+      this.callbacks.forceReset();
+    }
+  };
+  createKonvaStage(container, width, height, scale) {
+    const stage = new Konva.Stage({
+      container,
+      width: Math.floor(width * scale),
+      height: Math.floor(height * scale),
+      scale: { x: scale, y: scale }
+    });
+    const backgroundLayer = new Konva.Layer();
+    stage.add(backgroundLayer);
+    if (this.getStylusModeEnabled?.()) {
+      this.applyStylusTouchAction(stage);
+    }
+    return stage;
+  }
+  applyStylusTouchAction(stage) {
+    stage.preventDefault(false);
+    Konva.pixelRatio = 1;
+    const content = stage.content;
+    if (content) content.style.touchAction = "pan-x pan-y";
+    stage.container().querySelectorAll("canvas").forEach((c) => {
+      c.style.touchAction = "pan-x pan-y";
+    });
+  }
+  removeStylusTouchAction(stage) {
+    stage.preventDefault(true);
+    Konva.pixelRatio = window.devicePixelRatio || 1;
+    const content = stage.content;
+    if (content) content.style.touchAction = "";
+    stage.container().querySelectorAll("canvas").forEach((c) => {
+      c.style.touchAction = "";
+    });
+  }
+  saveToStore(annotationStore, isOriginal = false) {
+    const currentAnnotation = annotationDefinitions.find(
+      (item) => item.pdfjsAnnotationType === annotationStore.pdfjsType
+    );
+    this.callbacks.onStoreAdd(
+      this.store.save(annotationStore, isOriginal),
+      isOriginal,
+      currentAnnotation
+    );
+  }
+  updateStore(id, updates) {
+    const updated = this.store.update(id, updates);
+    if (updated) this.callbacks.onAnnotationChange(updated);
+  }
+  /**
+   * Convert a Konva stage-relative rect to viewport-relative coordinates
+   * by combining with the stage container's DOM position.
+   */
+  toViewportRect(pageNumber, stageRect) {
+    const canvas = this.konvaCanvasStore.get(pageNumber);
+    if (!canvas) return stageRect;
+    const containerBounds = canvas.wrapper.getBoundingClientRect();
+    return {
+      x: containerBounds.left + stageRect.x,
+      y: containerBounds.top + stageRect.y,
+      width: stageRect.width,
+      height: stageRect.height
+    };
+  }
+  parseStampData() {
+    const raw = this.tempDataTransfer;
+    if (!raw) return { url: null };
+    try {
+      const parsed = JSON.parse(raw);
+      if (parsed && typeof parsed === "object" && parsed.url) {
+        return { url: parsed.url, width: parsed.width, height: parsed.height };
+      }
+    } catch {
+    }
+    return { url: raw };
+  }
+  findEditorForGroupId(groupId) {
+    let editor = null;
+    this.editorStore.forEach((_editor) => {
+      if (_editor.shapeGroupStore?.has(groupId)) {
+        editor = _editor;
+      }
+    });
+    return editor;
+  }
+  findEditor(pageNumber, editorType) {
+    return this.editorStore.get(`${pageNumber}_${editorType}`);
+  }
+  enableEditor({
+    konvaStage,
+    pageNumber,
+    annotation
+  }) {
+    const storeEditor = this.findEditor(pageNumber, annotation.type);
+    if (storeEditor) {
+      if (storeEditor instanceof EditorSignature) {
+        storeEditor.activateWithSignature(
+          konvaStage,
+          annotation,
+          this.tempDataTransfer
+        );
+        return;
+      }
+      if (storeEditor instanceof EditorStamp) {
+        const stampData = this.parseStampData();
+        storeEditor.activateWithStamp(
+          konvaStage,
+          annotation,
+          stampData.url,
+          stampData.width,
+          stampData.height
+        );
+        return;
+      }
+      storeEditor.activate(konvaStage, annotation);
+      return;
+    }
+    const editorOpts = {
+      userName: this.userName,
+      konvaStage,
+      pageNumber,
+      annotation,
+      onAdd: (annotationStore) => {
+        this.saveToStore(annotationStore);
+      },
+      onChange: (id, updates) => {
+        this.updateStore(id, updates);
+      },
+      getStylusModeEnabled: this.getStylusModeEnabled
+    };
+    let editor = null;
+    switch (annotation.type) {
+      case AnnotationType.FREETEXT:
+        editor = new EditorFreeText({
+          ...editorOpts,
+          onRequestTextInput: this.callbacks.onRequestTextInput
+        });
+        break;
+      case AnnotationType.RECTANGLE:
+        editor = new EditorRectangle(editorOpts);
+        break;
+      case AnnotationType.ARROW:
+        editor = new EditorArrow(editorOpts);
+        break;
+      case AnnotationType.CLOUD:
+        editor = new EditorCloud(editorOpts);
+        break;
+      case AnnotationType.CIRCLE:
+        editor = new EditorCircle(editorOpts);
+        break;
+      case AnnotationType.NOTE:
+        editor = new EditorNote(editorOpts);
+        break;
+      case AnnotationType.FREEHAND:
+        editor = new EditorFreeHand(editorOpts);
+        break;
+      case AnnotationType.FREE_HIGHLIGHT:
+        editor = new EditorFreeHighlight(editorOpts);
+        break;
+      case AnnotationType.SIGNATURE:
+        editor = new EditorSignature(editorOpts, this.tempDataTransfer);
+        break;
+      case AnnotationType.STAMP: {
+        const stampData = this.parseStampData();
+        editor = new EditorStamp(editorOpts, stampData.url);
+        if (editor instanceof EditorStamp && (stampData.width || stampData.height)) {
+          editor.activateWithStamp(
+            konvaStage,
+            annotation,
+            stampData.url,
+            stampData.width,
+            stampData.height
+          );
+        }
+        break;
+      }
+      case AnnotationType.HIGHLIGHT:
+      case AnnotationType.UNDERLINE:
+      case AnnotationType.STRIKEOUT:
+        editor = new EditorHighLight(editorOpts, annotation.type);
+        break;
+      case AnnotationType.SELECT:
+        this.selector.activate(pageNumber);
+        break;
+      default:
+        console.warn(`Unimplemented annotation type: ${annotation.type}`);
+        return;
+    }
+    if (editor) {
+      this.editorStore.set(editor.id, editor);
+    }
+  }
+  enablePainting() {
+    this.konvaCanvasStore.forEach(({ konvaStage, pageNumber }) => {
+      if (this.currentAnnotation) {
+        this.enableEditor({
+          konvaStage,
+          pageNumber,
+          annotation: this.currentAnnotation
+        });
+      }
+    });
+  }
+  reDrawAnnotation(pageNumber) {
+    const annotationStores = this.store.getByPage(pageNumber);
+    annotationStores.forEach((annotationStore) => this.drawAnnotation(annotationStore));
+  }
+  drawAnnotation(annotationStore) {
+    const konvaCanvasStore = this.konvaCanvasStore.get(annotationStore.pageNumber);
+    if (!konvaCanvasStore) return;
+    let storeEditor = this.findEditor(annotationStore.pageNumber, annotationStore.type);
+    if (!storeEditor) {
+      const annotationDefinition = annotationDefinitions.find(
+        (item) => item.type === annotationStore.type
+      );
+      if (annotationDefinition) {
+        this.enableEditor({
+          konvaStage: konvaCanvasStore.konvaStage,
+          pageNumber: annotationStore.pageNumber,
+          annotation: annotationDefinition
+        });
+        storeEditor = this.findEditor(annotationStore.pageNumber, annotationStore.type);
+      }
+    }
+    if (storeEditor) {
+      storeEditor.addSerializedGroupToLayer(
+        konvaCanvasStore.konvaStage,
+        annotationStore.konvaString
+      );
+    }
+  }
+  deleteAnnotation(id, emit = false) {
+    const annotationStore = this.store.annotation(id);
+    if (!annotationStore) return;
+    const konvaCanvasStore = this.konvaCanvasStore.get(
+      annotationStore.pageNumber
+    );
+    this.store.delete(id);
+    if (konvaCanvasStore) {
+      const storeEditor = this.findEditor(
+        annotationStore.pageNumber,
+        annotationStore.type
+      );
+      if (storeEditor) {
+        storeEditor.deleteGroup(id, konvaCanvasStore.konvaStage);
+      }
+    }
+    if (emit) {
+      this.callbacks.onStoreDelete(id);
+    }
+  }
+  setMode(mode) {
+    const isPainting = mode === "painting";
+    document.body.classList.toggle(PAINTER_IS_PAINTING_STYLE, isPainting);
+    const allAnnotationClasses = Object.values(AnnotationType).filter((type) => typeof type === "number").map((type) => `${PAINTER_PAINTING_TYPE}_${type}`);
+    allAnnotationClasses.forEach(
+      (cls) => document.body.classList.remove(cls)
+    );
+    hideCursorPreview();
+    if (this.currentAnnotation) {
+      document.body.classList.add(
+        `${PAINTER_PAINTING_TYPE}_${this.currentAnnotation.type}`
+      );
+    }
+  }
+  disablePainting() {
+    this.setMode("default");
+    this.clearTempDataTransfer();
+    this.selector.clear();
+  }
+  /**
+   * Toggle hit detection on annotation layers.
+   * When a drawing tool is active, disable listening on the entire layer
+   * so Konva skips the expensive hit canvas redraw on every touchmove.
+   * Re-enable when switching to select/hand mode where clicks need to work.
+   */
+  setShapeGroupsListening(listening) {
+    this.konvaCanvasStore.forEach(({ konvaStage }) => {
+      const layer = konvaStage.getLayers()[0];
+      if (!layer) return;
+      layer.listening(listening);
+    });
+  }
+  saveTempDataTransfer(data) {
+    this.tempDataTransfer = data ?? null;
+  }
+  clearTempDataTransfer() {
+    this.tempDataTransfer = null;
+  }
+  /**
+   * Programmatic imports/additions (replace/merge/redo) add Konva groups
+   * directly, so selector handlers need to be rebound when hand/select mode
+   * is currently active.
+   */
+  refreshSelectorForPages(pageNumbers) {
+    if (this.currentAnnotation?.type !== AnnotationType.SELECT) return;
+    for (const pageNumber of pageNumbers) {
+      this.selector.activate(pageNumber);
+    }
+  }
+  // --- Public API ---
+  refreshStylusMode() {
+    const enabled = this.getStylusModeEnabled?.() ?? false;
+    this.konvaCanvasStore.forEach(({ konvaStage }) => {
+      if (enabled) {
+        this.applyStylusTouchAction(konvaStage);
+      } else {
+        this.removeStylusTouchAction(konvaStage);
+      }
+    });
+    this.editorStore.forEach((editor) => {
+      editor.rebindEvents();
+    });
+  }
+  initCanvasForPage(pageNumber, container, width, height, scale) {
+    const konvaStage = this.createKonvaStage(container, width, height, scale);
+    this.konvaCanvasStore.set(pageNumber, {
+      pageNumber,
+      konvaStage,
+      wrapper: container,
+      isActive: false
+    });
+    this.reDrawAnnotation(pageNumber);
+    this.enablePainting();
+  }
+  destroyCanvasForPage(pageNumber) {
+    const konvaCanvas = this.konvaCanvasStore.get(pageNumber);
+    if (konvaCanvas) {
+      konvaCanvas.konvaStage.destroy();
+      this.konvaCanvasStore.delete(pageNumber);
+    }
+  }
+  activate(annotation, dataTransfer) {
+    this.currentAnnotation = annotation;
+    this.disablePainting();
+    this.saveTempDataTransfer(dataTransfer);
+    if (!annotation) return;
+    const isDrawingTool = annotation.type !== AnnotationType.SELECT;
+    this.setShapeGroupsListening(!isDrawingTool);
+    switch (annotation.type) {
+      case AnnotationType.FREETEXT:
+      case AnnotationType.RECTANGLE:
+      case AnnotationType.CIRCLE:
+      case AnnotationType.FREEHAND:
+      case AnnotationType.FREE_HIGHLIGHT:
+      case AnnotationType.SIGNATURE:
+      case AnnotationType.STAMP:
+      case AnnotationType.SELECT:
+      case AnnotationType.NOTE:
+      case AnnotationType.ARROW:
+      case AnnotationType.CLOUD:
+        this.setMode("painting");
+        break;
+      default:
+        this.setMode("default");
+        break;
+    }
+    this.enablePainting();
+  }
+  activateMarquee() {
+    this.currentAnnotation = null;
+    this.disablePainting();
+    this.konvaCanvasStore.forEach(({ pageNumber }) => {
+      this.selector.activateMarquee(pageNumber);
+    });
+  }
+  activateEraser() {
+    this.currentAnnotation = null;
+    this.disablePainting();
+    this.konvaCanvasStore.forEach(({ pageNumber }) => {
+      this.selector.activateEraser(pageNumber);
+    });
+  }
+  highlightRange(range, annotation) {
+    this.currentAnnotation = annotation;
+  }
+  selectAnnotation(id) {
+    this.selector.select(id);
+    this.callbacks.setDefaultMode();
+  }
+  async initAnnotations(annotations) {
+    annotations.forEach((annotation) => {
+      this.saveToStore(annotation, true);
+    });
+  }
+  update(id, updates) {
+    this.store.update(id, updates);
+  }
+  delete(id, emit = false) {
+    this.selector.delete();
+    this.deleteAnnotation(id, emit);
+  }
+  updateAnnotationStyle(annotationStore, style) {
+    const editor = this.findEditorForGroupId(annotationStore.id);
+    if (editor) {
+      editor.updateStyle(annotationStore, style);
+      const newTransformerRect = this.selector.refreshCurrentSelection();
+      if (newTransformerRect) {
+        const ann = this.store.annotation(annotationStore.id);
+        if (ann) {
+          const viewportRect = this.toViewportRect(ann.pageNumber, newTransformerRect);
+          this.callbacks.onAnnotationSelected(ann, false, viewportRect);
+        }
+      }
+    }
+  }
+  reAddAnnotation(annotation) {
+    this.store.save(annotation, false);
+    const konvaCanvas = this.konvaCanvasStore.get(annotation.pageNumber);
+    if (!konvaCanvas) return;
+    let editor = this.findEditor(annotation.pageNumber, annotation.type);
+    if (!editor) {
+      const def = annotationDefinitions.find((d) => d.type === annotation.type);
+      if (def) {
+        this.enableEditor({
+          konvaStage: konvaCanvas.konvaStage,
+          pageNumber: annotation.pageNumber,
+          annotation: def
+        });
+        editor = this.findEditor(annotation.pageNumber, annotation.type);
+      }
+    }
+    if (editor) {
+      editor.addSerializedGroupToLayer(konvaCanvas.konvaStage, annotation.konvaString);
+      this.refreshSelectorForPages([annotation.pageNumber]);
+    }
+  }
+  getData() {
+    return this.store.annotations;
+  }
+  getAnnotation(id) {
+    return this.store.annotation(id);
+  }
+  clearAllAnnotations(emit = false) {
+    this.selector.clear();
+    const ids = this.store.annotations.map((annotation) => annotation.id);
+    ids.forEach((id) => this.deleteAnnotation(id, emit));
+  }
+  replaceAnnotations(annotations) {
+    this.clearAllAnnotations(false);
+    const touchedPages = /* @__PURE__ */ new Set();
+    annotations.forEach((annotation) => {
+      this.saveToStore(annotation, true);
+      this.drawAnnotation(annotation);
+      touchedPages.add(annotation.pageNumber);
+    });
+    this.refreshSelectorForPages(touchedPages);
+  }
+  mergeAnnotations(annotations) {
+    const touchedPages = /* @__PURE__ */ new Set();
+    annotations.forEach((annotation) => {
+      if (this.store.annotation(annotation.id)) {
+        this.deleteAnnotation(annotation.id, false);
+      }
+      this.saveToStore(annotation, true);
+      this.drawAnnotation(annotation);
+      touchedPages.add(annotation.pageNumber);
+    });
+    this.refreshSelectorForPages(touchedPages);
+  }
+  getCanvasState() {
+    const state = {};
+    this.konvaCanvasStore.forEach(({ pageNumber, konvaStage }) => {
+      state[pageNumber] = konvaStage.toJSON();
+    });
+    return state;
+  }
+  destroy() {
+    window.removeEventListener("keyup", this.globalKeyUpHandler);
+    this.selector.destroy();
+    this.konvaCanvasStore.forEach((canvas) => {
+      canvas.konvaStage.destroy();
+    });
+    this.konvaCanvasStore.clear();
+    this.editorStore.clear();
+  }
+}

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

@@ -0,0 +1,11 @@
+import type { IAnnotationStore } from './types.js';
+export declare class Store {
+    private annotationStore;
+    private originalAnnotationStore;
+    get annotation(): (id: string) => IAnnotationStore | undefined;
+    get annotations(): IAnnotationStore[];
+    save(store: IAnnotationStore, isOriginal: boolean): IAnnotationStore;
+    update(id: string, updates: Partial<IAnnotationStore>): IAnnotationStore | null;
+    getByPage(pageNumber: number): IAnnotationStore[];
+    delete(id: string): void;
+}

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

@@ -0,0 +1,47 @@
+import { formatTimestamp } from "./utils.js";
+export class Store {
+  annotationStore = /* @__PURE__ */ new Map();
+  originalAnnotationStore = /* @__PURE__ */ new Map();
+  get annotation() {
+    return (id) => this.annotationStore.get(id);
+  }
+  get annotations() {
+    return Array.from(this.annotationStore.values());
+  }
+  save(store, isOriginal) {
+    this.annotationStore.set(store.id, store);
+    if (isOriginal) {
+      this.originalAnnotationStore.set(store.id, store);
+    }
+    return store;
+  }
+  update(id, updates) {
+    if (this.annotationStore.has(id)) {
+      const existingAnnotation = this.annotationStore.get(id);
+      if (existingAnnotation) {
+        const updatedAnnotation = {
+          ...existingAnnotation,
+          ...updates,
+          date: formatTimestamp(Date.now())
+        };
+        this.annotationStore.set(id, updatedAnnotation);
+        return updatedAnnotation;
+      }
+    } else {
+      console.warn(`Annotation with id ${id} not found.`);
+    }
+    return null;
+  }
+  getByPage(pageNumber) {
+    return Array.from(this.annotationStore.values()).filter(
+      (annotation) => annotation.pageNumber === pageNumber
+    );
+  }
+  delete(id) {
+    if (this.annotationStore.has(id)) {
+      this.annotationStore.delete(id);
+    } else {
+      console.warn(`Annotation with id ${id} not found.`);
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+import type { KonvaEventObject } from 'konva/lib/Node';
+import type { IAnnotationStore, IAnnotationStyle } from '../types.js';
+import { Editor, type IEditorOptions } from '../editor/editor.js';
+/**
+ * Arrow editor class that extends the base Editor and draws arrowed lines on the canvas.
+ */
+export declare class EditorArrow extends Editor {
+    private arrow;
+    private startPoint;
+    constructor(EditorOptions: IEditorOptions);
+    protected mouseDownHandler(e: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    protected mouseMoveHandler(e: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    protected mouseUpHandler(): void;
+    private globalPointerUpHandler;
+    private isTooShort;
+    /**
+     * @description Update annotation styles
+     * @param annotationStore
+     * @param styles
+     */
+    protected changeStyle(annotationStore: IAnnotationStore, styles: IAnnotationStyle): void;
+}