kviewer 0.0.1

package/dist/runtime/annotation/engine/tools/highlight.js

@@ -0,0 +1,215 @@
+import Konva from "konva";
+import { AnnotationType } from "../types.js";
+import { Editor } from "../editor/editor.js";
+export class EditorHighLight extends Editor {
+  /**
+   * Creates an EditorHighLight instance.
+   * @param EditorOptions Options used to initialize the editor
+   * @param editorType Annotation type
+   */
+  constructor(EditorOptions, editorType) {
+    super({ ...EditorOptions, editorType });
+  }
+  /**
+   * Converts selected text areas on the page into shapes and draws them on the canvas.
+   * @param elements HTMLSpanElement array containing the elements to draw
+   * @param fixElement Element used as the positioning reference
+   */
+  convertTextSelection(elements, fixElement) {
+    this.currentShapeGroup = this.createShapeGroup();
+    this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
+    const fixBounding = fixElement.getBoundingClientRect();
+    elements.forEach((spanEl) => {
+      const bounding = spanEl.getBoundingClientRect();
+      const { x, y, width, height } = this.calculateRelativePosition(
+        bounding,
+        fixBounding
+      );
+      const shape = this.createShape(x, y, width, height);
+      this.currentShapeGroup.konvaGroup.add(shape);
+    });
+    this.setShapeGroupDone({
+      id: this.currentShapeGroup.id,
+      contentsObj: {
+        text: this.getElementOuterText(elements)
+      },
+      color: this.currentAnnotation.style.color
+    });
+  }
+  /**
+   * Gets the text content of all elements.
+   * @param elements HTMLSpanElement array
+   * @returns String containing the text content of all elements
+   */
+  getElementOuterText(elements) {
+    return elements.map((el) => el.outerText).join("");
+  }
+  /**
+   * Calculates the relative position and size of an element for the canvas coordinate system.
+   * @param elementBounding Element bounding box
+   * @param fixBounding Reference element bounding box
+   * @returns Relative position and size object { x, y, width, height }
+   */
+  calculateRelativePosition(elementBounding, fixBounding) {
+    const scale = this.konvaStage.scale();
+    const x = (elementBounding.x - fixBounding.x) / scale.x;
+    const y = (elementBounding.y - fixBounding.y) / scale.y;
+    const width = elementBounding.width / scale.x;
+    const height = elementBounding.height / scale.y;
+    return { x, y, width, height };
+  }
+  /**
+   * Creates the corresponding shape for the current annotation type.
+   * @param x Shape X coordinate
+   * @param y Shape Y coordinate
+   * @param width Shape width
+   * @param height Shape height
+   * @returns A concrete Konva.Shape instance
+   */
+  createShape(x, y, width, height) {
+    switch (this.currentAnnotation.type) {
+      case AnnotationType.HIGHLIGHT:
+        return this.createHighlightShape(x, y, width, height);
+      case AnnotationType.UNDERLINE:
+        return this.createUnderlineShape(x, y, width, height);
+      case AnnotationType.STRIKEOUT:
+        return this.createStrikeoutShape(x, y, width, height);
+      default:
+        throw new Error(
+          `Unsupported annotation type: ${this.currentAnnotation.type}`
+        );
+    }
+  }
+  /**
+   * Creates a highlight shape.
+   * @param x Shape X coordinate
+   * @param y Shape Y coordinate
+   * @param width Shape width
+   * @param height Shape height
+   * @returns Konva.Rect highlight shape instance
+   */
+  createHighlightShape(x, y, width, height) {
+    return new Konva.Rect({
+      x,
+      y,
+      width,
+      height,
+      opacity: 0.5,
+      fill: this.currentAnnotation.style.color
+    });
+  }
+  /**
+   * Creates an underline shape.
+   * @param x Shape X coordinate
+   * @param y Shape Y coordinate
+   * @param width Shape width
+   * @param height Shape height
+   * @returns Konva.Rect underline shape instance
+   */
+  createUnderlineShape(x, y, width, height) {
+    return new Konva.Rect({
+      x,
+      y: height + y - 2,
+      width,
+      stroke: this.currentAnnotation.style.color,
+      opacity: 1,
+      strokeWidth: 1,
+      hitStrokeWidth: 10,
+      height: 1
+    });
+  }
+  /**
+   * Creates a strikeout shape.
+   * @param x Shape X coordinate
+   * @param y Shape Y coordinate
+   * @param width Shape width
+   * @param height Shape height
+   * @returns Konva.Rect strikeout shape instance
+   */
+  createStrikeoutShape(x, y, width, height) {
+    return new Konva.Rect({
+      x,
+      y: y + height / 2,
+      width,
+      stroke: this.currentAnnotation.style.color,
+      opacity: 1,
+      strokeWidth: 1,
+      hitStrokeWidth: 10,
+      height: 1
+    });
+  }
+  /**
+   * Handles mouse-down events. No specific logic is implemented yet.
+   */
+  mouseDownHandler() {
+  }
+  /**
+   * Handles mouse-move events. No specific logic is implemented yet.
+   */
+  mouseMoveHandler() {
+  }
+  /**
+   * Handles mouse-up events. No specific logic is implemented yet.
+   */
+  mouseUpHandler() {
+  }
+  /**
+   * @description Update annotation styles
+   * @param annotationStore
+   * @param styles
+   */
+  changeStyle(annotationStore, styles) {
+    const id = annotationStore.id;
+    const group = this.getShapeGroupById(id);
+    if (group) {
+      group.getChildren().forEach((shape) => {
+        if (annotationStore.type === AnnotationType.HIGHLIGHT) {
+          if (shape instanceof Konva.Rect) {
+            if (styles.color !== void 0) {
+              shape.fill(styles.color);
+            }
+            if (styles.strokeWidth !== void 0) {
+              shape.strokeWidth(styles.strokeWidth);
+            }
+            if (styles.opacity !== void 0) {
+              shape.opacity(styles.opacity);
+            }
+          }
+        }
+        if (annotationStore.type === AnnotationType.UNDERLINE) {
+          if (shape instanceof Konva.Rect) {
+            if (styles.color !== void 0) {
+              shape.stroke(styles.color);
+            }
+            if (styles.strokeWidth !== void 0) {
+              shape.strokeWidth(styles.strokeWidth);
+            }
+            if (styles.opacity !== void 0) {
+              shape.opacity(styles.opacity);
+            }
+          }
+        }
+        if (annotationStore.type === AnnotationType.STRIKEOUT) {
+          if (shape instanceof Konva.Rect) {
+            if (styles.color !== void 0) {
+              shape.stroke(styles.color);
+            }
+            if (styles.strokeWidth !== void 0) {
+              shape.strokeWidth(styles.strokeWidth);
+            }
+            if (styles.opacity !== void 0) {
+              shape.opacity(styles.opacity);
+            }
+          }
+        }
+      });
+      const changedPayload = {
+        konvaString: group.toJSON()
+      };
+      if (styles.color !== void 0) {
+        changedPayload.color = styles.color;
+      }
+      this.setChanged(id, changedPayload);
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import type { KonvaEventObject } from 'konva/lib/Node';
+import { Editor, type IEditorOptions } from '../editor/editor.js';
+export declare class EditorNote extends Editor {
+    constructor(EditorOptions: IEditorOptions);
+    protected mouseDownHandler(): void;
+    protected mouseMoveHandler(): void;
+    protected mouseUpHandler(e: KonvaEventObject<PointerEvent>): Promise<void>;
+    protected changeStyle(): void;
+}

package/dist/runtime/annotation/engine/tools/note.js

@@ -0,0 +1,34 @@
+import { AnnotationType } from "../types.js";
+import { Editor } from "../editor/editor.js";
+import { createDocumentIcon } from "../utils.js";
+export class EditorNote extends Editor {
+  constructor(EditorOptions) {
+    super({ ...EditorOptions, editorType: AnnotationType.NOTE });
+  }
+  mouseDownHandler() {
+  }
+  mouseMoveHandler() {
+  }
+  async mouseUpHandler(e) {
+    const color = "rgb(255, 222, 33)";
+    const { x, y } = this.konvaStage.getRelativePointerPosition();
+    if (e.currentTarget !== this.konvaStage) {
+      return;
+    }
+    this.isPainting = true;
+    this.currentShapeGroup = this.createShapeGroup();
+    this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
+    const docIcon = createDocumentIcon({ x, y, fill: color });
+    this.currentShapeGroup.konvaGroup.add(...docIcon);
+    const id = this.currentShapeGroup.konvaGroup.id();
+    this.setShapeGroupDone({
+      id,
+      contentsObj: {
+        text: ""
+      },
+      color
+    });
+  }
+  changeStyle() {
+  }
+}

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

@@ -0,0 +1,45 @@
+import type { KonvaEventObject } from 'konva/lib/Node';
+import type { IAnnotationStore, IAnnotationStyle } from '../types.js';
+import { Editor, type IEditorOptions } from '../editor/editor.js';
+/**
+ * EditorRectangle is a rectangle editor class that extends Editor.
+ */
+export declare class EditorRectangle extends Editor {
+    private rect;
+    private vertex;
+    /**
+     * Create an EditorRectangle instance.
+     * @param EditorOptions Options to initialize the editor
+     */
+    constructor(EditorOptions: IEditorOptions);
+    /**
+     * Handle mouse down event, create a new rectangle object and add it to the stage.
+     * @param e Konva event object
+     */
+    protected mouseDownHandler(e: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    /**
+     * Handle mouse move event, update the drawn rectangle's size and position in real time.
+     * @param e Konva event object
+     */
+    protected mouseMoveHandler(e: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    /**
+     * Handle mouse up event, complete the rectangle drawing and update the annotation store.
+     */
+    protected mouseUpHandler(): void;
+    /**
+     * Global mouse up event handler, only handles left button release events.
+     * @param e MouseEvent object
+     */
+    private globalPointerUpHandler;
+    /**
+     * Check if the rectangle is too small (smaller than the minimum allowed size).
+     * @returns true if the rectangle is too small, false otherwise
+     */
+    private isTooSmall;
+    /**
+     * @description Change annotation style
+     * @param annotationStore
+     * @param styles
+     */
+    protected changeStyle(annotationStore: IAnnotationStore, styles: IAnnotationStyle): void;
+}

package/dist/runtime/annotation/engine/tools/rectangle.js

@@ -0,0 +1,142 @@
+import Konva from "konva";
+import { AnnotationType } from "../types.js";
+import { Editor } from "../editor/editor.js";
+export class EditorRectangle extends Editor {
+  rect;
+  // The rectangle object currently being drawn
+  vertex;
+  // Starting vertex coordinates of the rectangle
+  /**
+   * Create an EditorRectangle instance.
+   * @param EditorOptions Options to initialize the editor
+   */
+  constructor(EditorOptions) {
+    super({ ...EditorOptions, editorType: AnnotationType.RECTANGLE });
+    this.rect = null;
+    this.vertex = { x: 0, y: 0 };
+  }
+  /**
+   * Handle mouse down event, create a new rectangle object and add it to the stage.
+   * @param e Konva event object
+   */
+  mouseDownHandler(e) {
+    if (e.currentTarget !== this.konvaStage) {
+      return;
+    }
+    this.rect = null;
+    this.isPainting = true;
+    this.currentShapeGroup = this.createShapeGroup();
+    this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
+    const pos = this.konvaStage.getRelativePointerPosition();
+    this.vertex = { x: pos.x, y: pos.y };
+    this.rect = new Konva.Rect({
+      x: pos.x,
+      y: pos.y,
+      width: 0,
+      height: 0,
+      // do not scale strokes
+      strokeScaleEnabled: false,
+      visible: false,
+      stroke: this.currentAnnotation.style.color,
+      strokeWidth: this.currentAnnotation.style.strokeWidth || 2,
+      opacity: this.currentAnnotation.style.opacity
+    });
+    this.currentShapeGroup.konvaGroup.add(this.rect);
+    window.addEventListener("mouseup", this.globalPointerUpHandler);
+  }
+  /**
+   * Handle mouse move event, update the drawn rectangle's size and position in real time.
+   * @param e Konva event object
+   */
+  mouseMoveHandler(e) {
+    if (!this.isPainting) {
+      return;
+    }
+    e.evt.preventDefault();
+    this.rect.show();
+    const pos = this.konvaStage.getRelativePointerPosition();
+    const areaAttr = {
+      x: Math.min(this.vertex.x, pos.x),
+      y: Math.min(this.vertex.y, pos.y),
+      width: Math.abs(pos.x - this.vertex.x),
+      height: Math.abs(pos.y - this.vertex.y)
+    };
+    this.rect.setAttrs(areaAttr);
+  }
+  /**
+   * Handle mouse up event, complete the rectangle drawing and update the annotation store.
+   */
+  mouseUpHandler() {
+    if (!this.isPainting) {
+      return;
+    }
+    this.isPainting = false;
+    const group = this.rect.getParent();
+    if (!this.rect.isVisible() && group.getType() === "Group") {
+      this.delShapeGroup(group.id());
+      return;
+    }
+    if (this.isTooSmall()) {
+      this.rect.destroy();
+      this.delShapeGroup(group.id());
+      this.rect = null;
+      return;
+    }
+    this.setShapeGroupDone({
+      id: group.id(),
+      color: this.currentAnnotation.style.color,
+      contentsObj: {
+        text: ""
+      }
+    });
+    this.rect = null;
+  }
+  /**
+   * Global mouse up event handler, only handles left button release events.
+   * @param e MouseEvent object
+   */
+  globalPointerUpHandler = (e) => {
+    if (e.button !== 0) return;
+    this.mouseUpHandler();
+    window.removeEventListener("mouseup", this.globalPointerUpHandler);
+  };
+  /**
+   * Check if the rectangle is too small (smaller than the minimum allowed size).
+   * @returns true if the rectangle is too small, false otherwise
+   */
+  isTooSmall() {
+    const { width, height } = this.rect.size();
+    return Math.max(width, height) < Editor.MinSize;
+  }
+  /**
+   * @description Change annotation style
+   * @param annotationStore
+   * @param styles
+   */
+  changeStyle(annotationStore, styles) {
+    const id = annotationStore.id;
+    const group = this.getShapeGroupById(id);
+    if (group) {
+      group.getChildren().forEach((shape) => {
+        if (shape instanceof Konva.Rect) {
+          if (styles.color !== void 0) {
+            shape.stroke(styles.color);
+          }
+          if (styles.strokeWidth !== void 0) {
+            shape.strokeWidth(styles.strokeWidth);
+          }
+          if (styles.opacity !== void 0) {
+            shape.opacity(styles.opacity);
+          }
+        }
+      });
+      const changedPayload = {
+        konvaString: group.toJSON()
+      };
+      if (styles.color !== void 0) {
+        changedPayload.color = styles.color;
+      }
+      this.setChanged(id, changedPayload);
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import Konva from 'konva';
+import type { KonvaEventObject } from 'konva/lib/Node';
+import { type IAnnotationType } from '../types.js';
+import { Editor, type IEditorOptions } from '../editor/editor.js';
+export declare class EditorSignature extends Editor {
+    private signatureUrl;
+    private signatureImage;
+    constructor(editorOptions: IEditorOptions, defaultSignatureUrl: string | null);
+    private createCursorImg;
+    protected mouseDownHandler(e: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    activateWithSignature(konvaStage: Konva.Stage, annotation: IAnnotationType, signatureUrl: string | null): void;
+    addSerializedGroupToLayer(konvaStage: Konva.Stage, konvaString: string): void;
+    protected mouseMoveHandler(): void;
+    protected mouseUpHandler(): void;
+    protected changeStyle(): void;
+}

package/dist/runtime/annotation/engine/tools/signature.js

@@ -0,0 +1,74 @@
+import Konva from "konva";
+import { AnnotationType } from "../types.js";
+import { resizeImage } from "../utils.js";
+import { Editor } from "../editor/editor.js";
+import { defaultOptions } from "../config.js";
+import { showCursorPreview } from "../cursor-preview.js";
+export class EditorSignature extends Editor {
+  signatureUrl;
+  signatureImage;
+  constructor(editorOptions, defaultSignatureUrl) {
+    super({ ...editorOptions, editorType: AnnotationType.SIGNATURE });
+    this.signatureUrl = defaultSignatureUrl;
+    if (defaultSignatureUrl) {
+      this.createCursorImg();
+    }
+  }
+  createCursorImg() {
+    showCursorPreview(this.signatureUrl, defaultOptions.setting.MAX_CURSOR_SIZE);
+  }
+  mouseDownHandler(e) {
+    if (e.currentTarget !== this.konvaStage) return;
+    this.signatureImage = null;
+    this.currentShapeGroup = this.createShapeGroup();
+    this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
+    const pos = this.konvaStage.getRelativePointerPosition();
+    Konva.Image.fromURL(this.signatureUrl, async (image) => {
+      const { width: width_rec, height: height_rec } = image.getClientRect();
+      const { newWidth, newHeight } = resizeImage(width_rec, height_rec, 120);
+      const crosshair = { x: newWidth / 2, y: newHeight / 2 };
+      this.signatureImage = image;
+      this.signatureImage.setAttrs({
+        x: pos.x - crosshair.x,
+        y: pos.y - crosshair.y,
+        width: newWidth,
+        height: newHeight,
+        base64: this.signatureUrl
+      });
+      this.currentShapeGroup.konvaGroup.add(this.signatureImage);
+      const id = this.currentShapeGroup.konvaGroup.id();
+      this.setShapeGroupDone({
+        id,
+        contentsObj: { text: "", image: this.signatureUrl }
+      });
+      this.signatureImage = null;
+    });
+  }
+  activateWithSignature(konvaStage, annotation, signatureUrl) {
+    super.activate(konvaStage, annotation);
+    this.signatureUrl = signatureUrl;
+    if (signatureUrl) {
+      this.createCursorImg();
+    }
+  }
+  addSerializedGroupToLayer(konvaStage, konvaString) {
+    const ghostGroup = Konva.Node.create(konvaString);
+    const oldImage = this.getGroupNodesByClassName(
+      ghostGroup,
+      "Image"
+    )[0];
+    const imageUrl = oldImage.getAttr("base64");
+    Konva.Image.fromURL(imageUrl, async (image) => {
+      image.setAttrs(oldImage.getAttrs());
+      oldImage.destroy();
+      ghostGroup.add(image);
+    });
+    this.getBgLayer(konvaStage).add(ghostGroup);
+  }
+  mouseMoveHandler() {
+  }
+  mouseUpHandler() {
+  }
+  changeStyle() {
+  }
+}

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

@@ -0,0 +1,18 @@
+import Konva from 'konva';
+import type { KonvaEventObject } from 'konva/lib/Node';
+import { type IAnnotationType } from '../types.js';
+import { Editor, type IEditorOptions } from '../editor/editor.js';
+export declare class EditorStamp extends Editor {
+    private stampUrl;
+    private stampImage;
+    private stampWidth;
+    private stampHeight;
+    constructor(editorOptions: IEditorOptions, defaultStampUrl: string | null);
+    private createCursorImg;
+    protected mouseDownHandler(e: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    activateWithStamp(konvaStage: Konva.Stage, annotation: IAnnotationType, stampUrl: string | null, stampWidth?: number, stampHeight?: number): void;
+    addSerializedGroupToLayer(konvaStage: Konva.Stage, konvaString: string): void;
+    protected mouseMoveHandler(): void;
+    protected mouseUpHandler(): void;
+    protected changeStyle(): void;
+}

package/dist/runtime/annotation/engine/tools/stamp.js

@@ -0,0 +1,94 @@
+import Konva from "konva";
+import { AnnotationType } from "../types.js";
+import { resizeImage } from "../utils.js";
+import { Editor } from "../editor/editor.js";
+import { defaultOptions } from "../config.js";
+import { showCursorPreview } from "../cursor-preview.js";
+export class EditorStamp extends Editor {
+  stampUrl;
+  stampImage;
+  stampWidth = null;
+  stampHeight = null;
+  constructor(editorOptions, defaultStampUrl) {
+    super({ ...editorOptions, editorType: AnnotationType.STAMP });
+    this.stampUrl = defaultStampUrl;
+    if (defaultStampUrl) {
+      this.createCursorImg();
+    }
+  }
+  createCursorImg() {
+    const baseSize = this.stampWidth ?? this.stampHeight ?? defaultOptions.setting.MAX_CURSOR_SIZE;
+    const scale = this.konvaStage?.scale()?.x ?? 1;
+    showCursorPreview(this.stampUrl, Math.round(baseSize * scale));
+  }
+  mouseDownHandler(e) {
+    if (e.currentTarget !== this.konvaStage) return;
+    this.stampImage = null;
+    this.currentShapeGroup = this.createShapeGroup();
+    this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
+    const pos = this.konvaStage.getRelativePointerPosition();
+    Konva.Image.fromURL(this.stampUrl, async (image) => {
+      let newWidth;
+      let newHeight;
+      if (this.stampWidth && this.stampHeight) {
+        newWidth = this.stampWidth;
+        newHeight = this.stampHeight;
+      } else {
+        const { width: width_rec, height: height_rec } = image.getClientRect();
+        ({ newWidth, newHeight } = resizeImage(width_rec, height_rec, 120));
+      }
+      const crosshair = { x: newWidth / 2, y: newHeight / 2 };
+      this.stampImage = image;
+      this.stampImage.setAttrs({
+        x: pos.x - crosshair.x,
+        y: pos.y - crosshair.y,
+        width: newWidth,
+        height: newHeight,
+        base64: this.stampUrl
+      });
+      this.currentShapeGroup.konvaGroup.add(this.stampImage);
+      const id = this.currentShapeGroup.konvaGroup.id();
+      this.setShapeGroupDone({
+        id,
+        contentsObj: { text: "", image: this.stampUrl }
+      });
+      this.stampImage = null;
+    });
+  }
+  activateWithStamp(konvaStage, annotation, stampUrl, stampWidth, stampHeight) {
+    super.activate(konvaStage, annotation);
+    this.stampUrl = stampUrl;
+    this.stampWidth = stampWidth ?? null;
+    this.stampHeight = stampHeight ?? null;
+    if (stampUrl) {
+      this.createCursorImg();
+    }
+  }
+  addSerializedGroupToLayer(konvaStage, konvaString) {
+    const ghostGroup = Konva.Node.create(konvaString);
+    const oldImage = this.getGroupNodesByClassName(
+      ghostGroup,
+      "Image"
+    )[0];
+    const imageUrl = oldImage.getAttr("base64");
+    const oldText = this.getGroupNodesByClassName(
+      ghostGroup,
+      "Text"
+    )[0];
+    Konva.Image.fromURL(imageUrl, async (image) => {
+      image.setAttrs(oldImage.getAttrs());
+      oldImage.destroy();
+      ghostGroup.add(image);
+      if (oldText) {
+        oldText.moveToTop();
+      }
+    });
+    this.getBgLayer(konvaStage).add(ghostGroup);
+  }
+  mouseMoveHandler() {
+  }
+  mouseUpHandler() {
+  }
+  changeStyle() {
+  }
+}