kviewer 0.0.1

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

@@ -0,0 +1,165 @@
+import Konva from "konva";
+import { AnnotationType } from "../types.js";
+import { Editor } from "../editor/editor.js";
+export class EditorFreeHighlight extends Editor {
+  line;
+  // The freeform line currently being drawn
+  constructor(EditorOptions) {
+    super({ ...EditorOptions, editorType: AnnotationType.FREE_HIGHLIGHT });
+    this.line = null;
+  }
+  /**
+   * Handles mouse or touch pointer-down events and starts drawing a freeform curve.
+   * @param e Konva event object
+   */
+  mouseDownHandler(e) {
+    if (e.currentTarget !== this.konvaStage) {
+      return;
+    }
+    this.line = null;
+    this.isPainting = true;
+    this.currentShapeGroup = this.createShapeGroup();
+    this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
+    const pos = this.konvaStage.getRelativePointerPosition();
+    this.line = new Konva.Line({
+      // do not scale strokes
+      strokeScaleEnabled: false,
+      stroke: this.currentAnnotation.style.color,
+      strokeWidth: this.currentAnnotation.style.strokeWidth,
+      opacity: this.currentAnnotation.style.opacity,
+      hitStrokeWidth: this.currentAnnotation.style.strokeWidth,
+      lineCap: "round",
+      lineJoin: "round",
+      visible: false,
+      globalCompositeOperation: "source-over",
+      points: [pos.x, pos.y]
+      // Initialize the starting point
+    });
+    this.currentShapeGroup.konvaGroup.add(this.line);
+    window.addEventListener("mouseup", this.globalPointerUpHandler);
+  }
+  /**
+   * Handles mouse or touch pointer-move events and draws the freeform curve.
+   * @param e Konva event object
+   */
+  mouseMoveHandler(e) {
+    if (!this.isPainting) {
+      return;
+    }
+    e.evt.preventDefault();
+    this.line.show();
+    const pos = this.konvaStage.getRelativePointerPosition();
+    const newPoints = this.line.points().concat([pos.x, pos.y]);
+    this.line.points(newPoints);
+  }
+  /**
+   * Handles mouse or touch pointer-up events and finishes drawing the freeform curve.
+   */
+  mouseUpHandler() {
+    if (!this.isPainting) {
+      return;
+    }
+    this.isPainting = false;
+    const group = this.line?.getParent();
+    if (group && !this.line.isVisible() && group.getType() === "Group") {
+      this.delShapeGroup(group.id());
+      return;
+    }
+    if (this.isTooSmall()) {
+      this.line?.destroy();
+      if (group) {
+        this.delShapeGroup(group.id());
+      }
+      this.line = null;
+      return;
+    }
+    if (this.line) {
+      const originalPoints = this.line.points();
+      const correctedPoints = this.correctLineIfStraight(originalPoints);
+      this.line.points(correctedPoints);
+      this.setShapeGroupDone({
+        id: group.id(),
+        color: this.currentAnnotation.style.color,
+        contentsObj: {
+          text: ""
+        }
+      });
+      this.line = null;
+    }
+  }
+  /**
+   * Global mouseup event handler that only handles left-button releases.
+   * @param e MouseEvent object
+   */
+  globalPointerUpHandler = (e) => {
+    if (e.button !== 0) return;
+    this.mouseUpHandler();
+    window.removeEventListener("mouseup", this.globalPointerUpHandler);
+  };
+  /**
+   * Corrects lines that are close to horizontal or vertical so they become perfectly horizontal or vertical.
+   * @param points The line points
+   * @returns The corrected points
+   */
+  correctLineIfStraight(points) {
+    const THRESHOLD_ANGLE_DEGREES = 2;
+    const startX = points[0];
+    const startY = points[1];
+    const endX = points[points.length - 2];
+    const endY = points[points.length - 1];
+    const deltaX = endX - startX;
+    const deltaY = endY - startY;
+    const angleRad = Math.atan2(deltaY, deltaX);
+    const angleDeg = Math.abs(angleRad * (180 / Math.PI));
+    const isCloseToHorizontal = angleDeg <= THRESHOLD_ANGLE_DEGREES || angleDeg >= 180 - THRESHOLD_ANGLE_DEGREES;
+    const isCloseToVertical = Math.abs(angleDeg - 90) <= THRESHOLD_ANGLE_DEGREES;
+    if (isCloseToHorizontal) {
+      return points.map(
+        (value, index) => index % 2 === 0 ? value : startY
+      );
+    } else if (isCloseToVertical) {
+      return points.map(
+        (value, index) => index % 2 === 0 ? startX : value
+      );
+    }
+    return points;
+  }
+  /**
+   * Determines whether the current line is too small.
+   * @returns True if the line point count is less than 5, otherwise false
+   */
+  isTooSmall() {
+    return (this.line?.points().length || 0) < 5;
+  }
+  /**
+   * @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 (shape instanceof Konva.Line) {
+          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/free-text.d.ts

@@ -0,0 +1,27 @@
+import type { KonvaEventObject } from 'konva/lib/Node';
+import { type IAnnotationStore, type IAnnotationStyle } from '../types.js';
+import { Editor, type IEditorOptions } from '../editor/editor.js';
+export interface TextInputResult {
+    inputValue: string;
+    color: string;
+    fontSize: number;
+    cancelled?: boolean;
+}
+export interface IEditorFreeTextOptions extends IEditorOptions {
+    onRequestTextInput: (opts: {
+        defaultColor: string;
+        defaultFontSize: number;
+        initialText?: string;
+    }) => Promise<TextInputResult>;
+}
+export declare class EditorFreeText extends Editor {
+    private onRequestTextInput;
+    constructor(editorOptions: IEditorFreeTextOptions);
+    protected mouseDownHandler(): void;
+    protected mouseMoveHandler(): void;
+    protected mouseUpHandler(e: KonvaEventObject<PointerEvent>): Promise<void>;
+    private static measureText;
+    private inputDoneHandler;
+    applyTextContent(id: string, text: string, color: string, fontSize: number): void;
+    protected changeStyle(annotationStore: IAnnotationStore, styles: IAnnotationStyle): void;
+}

package/dist/runtime/annotation/engine/tools/free-text.js

@@ -0,0 +1,114 @@
+import Konva from "konva";
+import { AnnotationType } from "../types.js";
+import { Editor } from "../editor/editor.js";
+export class EditorFreeText extends Editor {
+  onRequestTextInput;
+  constructor(editorOptions) {
+    super({ ...editorOptions, editorType: AnnotationType.FREETEXT });
+    this.onRequestTextInput = editorOptions.onRequestTextInput;
+  }
+  mouseDownHandler() {
+  }
+  mouseMoveHandler() {
+  }
+  async mouseUpHandler(e) {
+    const pos = this.konvaStage.getRelativePointerPosition();
+    const { x, y } = this.konvaStage.scale();
+    if (e.currentTarget !== this.konvaStage || !pos) {
+      return;
+    }
+    this.isPainting = true;
+    this.currentShapeGroup = this.createShapeGroup();
+    this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
+    const result = await this.onRequestTextInput({
+      defaultColor: this.currentAnnotation.style.color,
+      defaultFontSize: this.currentAnnotation.style.fontSize
+    });
+    if (result.cancelled) {
+      this.delShapeGroup(this.currentShapeGroup.id);
+      this.currentShapeGroup = null;
+      return;
+    }
+    this.inputDoneHandler(result.inputValue, { x, y }, pos, result.color, result.fontSize);
+  }
+  static measureText(value, fontSize) {
+    const maxWidth = 300;
+    const temp = new Konva.Text({ text: value, fontSize, padding: 2 });
+    const textWidth = temp.width();
+    return {
+      finalWidth: textWidth > maxWidth ? maxWidth : textWidth,
+      wrap: textWidth > maxWidth ? "word" : "none"
+    };
+  }
+  inputDoneHandler(inputValue, _scale, pos, color, fontSize) {
+    const value = inputValue.trim();
+    if (value === "") {
+      this.delShapeGroup(this.currentShapeGroup.id);
+      this.currentShapeGroup = null;
+      return;
+    }
+    const { finalWidth, wrap } = EditorFreeText.measureText(value, fontSize);
+    const text = new Konva.Text({
+      x: pos.x,
+      y: pos.y + 2,
+      text: value,
+      width: finalWidth,
+      fontSize,
+      fill: color,
+      wrap
+    });
+    this.currentShapeGroup.konvaGroup.add(text);
+    const id = this.currentShapeGroup.konvaGroup.id();
+    this.setShapeGroupDone({
+      id,
+      contentsObj: { text: value },
+      color,
+      fontSize
+    });
+  }
+  applyTextContent(id, text, color, fontSize) {
+    const group = this.getShapeGroupById(id);
+    if (!group) return;
+    const value = text.trim();
+    if (!value) return;
+    const { finalWidth, wrap } = EditorFreeText.measureText(value, fontSize);
+    group.getChildren().forEach((shape) => {
+      if (shape instanceof Konva.Text) {
+        shape.setAttrs({ text: value, fill: color, fontSize, width: finalWidth, wrap });
+      }
+    });
+    this.setChanged(id, {
+      konvaString: group.toJSON(),
+      color,
+      fontSize,
+      contentsObj: { text: value }
+    });
+  }
+  changeStyle(annotationStore, styles) {
+    const id = annotationStore.id;
+    const group = this.getShapeGroupById(id);
+    if (group) {
+      group.getChildren().forEach((shape) => {
+        if (shape instanceof Konva.Text) {
+          if (styles.color !== void 0) {
+            shape.fill(styles.color);
+          }
+          if (styles.opacity !== void 0) {
+            shape.opacity(styles.opacity);
+          }
+          if (styles.fontSize !== void 0) {
+            const currentText = shape.text();
+            const { finalWidth, wrap } = EditorFreeText.measureText(currentText, styles.fontSize);
+            shape.setAttrs({ fontSize: styles.fontSize, width: finalWidth, wrap });
+          }
+        }
+      });
+      const changedPayload = {
+        konvaString: group.toJSON()
+      };
+      if (styles.color !== void 0) changedPayload.color = styles.color;
+      if (styles.fontSize !== void 0) changedPayload.fontSize = styles.fontSize;
+      this.setChanged(id, changedPayload);
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+import type { KonvaEventObject } from 'konva/lib/Node';
+import type { IAnnotationStore, IAnnotationStyle } from '../types.js';
+import { Editor, type IEditorOptions } from '../editor/editor.js';
+/**
+ * Freehand editor class that extends the base Editor and draws freeform curves on the canvas.
+ */
+export declare class EditorFreeHand extends Editor {
+    private line;
+    /**
+     * Constructor that initializes the freehand editor.
+     * @param EditorOptions Editor options interface
+     */
+    constructor(EditorOptions: IEditorOptions);
+    /**
+     * Handles mouse or touch pointer-down events and starts drawing a freeform curve.
+     * @param e Konva event object
+     */
+    protected mouseDownHandler(e: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    /**
+     * Handles mouse or touch pointer-move events and draws the freeform curve.
+     * @param e Konva event object
+     */
+    protected mouseMoveHandler(e: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    /**
+     * Handles mouse or touch pointer-up events and finishes drawing the freeform curve.
+     */
+    protected mouseUpHandler(): void;
+    /**
+     * Global mouseup event handler that only handles left-button releases.
+     * @param e MouseEvent object
+     */
+    private globalPointerUpHandler;
+    /**
+     * Determines whether the current line is too small.
+     * @returns True if the line point count is less than 5, otherwise false
+     */
+    private isTooSmall;
+    /**
+     * @description Update annotation styles
+     * @param annotationStore
+     * @param styles
+     */
+    protected changeStyle(annotationStore: IAnnotationStore, styles: IAnnotationStyle): void;
+}

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

@@ -0,0 +1,151 @@
+import Konva from "konva";
+import { AnnotationType } from "../types.js";
+import { Editor } from "../editor/editor.js";
+export class EditorFreeHand extends Editor {
+  line;
+  // The freeform line currently being drawn
+  /**
+   * Constructor that initializes the freehand editor.
+   * @param EditorOptions Editor options interface
+   */
+  constructor(EditorOptions) {
+    super({ ...EditorOptions, editorType: AnnotationType.FREEHAND });
+    this.line = null;
+  }
+  /**
+   * Handles mouse or touch pointer-down events and starts drawing a freeform curve.
+   * @param e Konva event object
+   */
+  mouseDownHandler(e) {
+    if (e.currentTarget !== this.konvaStage) {
+      return;
+    }
+    Editor.TimerClear(this.pageNumber);
+    this.line = null;
+    this.isPainting = true;
+    if (!this.currentShapeGroup) {
+      this.currentShapeGroup = this.createShapeGroup();
+      this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
+    }
+    const pos = this.konvaStage.getRelativePointerPosition();
+    this.line = new Konva.Line({
+      // do not scale strokes
+      strokeScaleEnabled: false,
+      stroke: this.currentAnnotation.style.color,
+      // Set the line color
+      strokeWidth: this.currentAnnotation.style.strokeWidth,
+      // Set the line width
+      opacity: this.currentAnnotation.style.opacity,
+      // Set the line opacity
+      lineCap: "round",
+      // Set rounded line caps
+      lineJoin: "round",
+      // Set rounded line joins
+      hitStrokeWidth: 20,
+      // Set the hit detection width
+      visible: false,
+      // Initialize as hidden
+      globalCompositeOperation: "source-over",
+      points: [pos.x, pos.y, pos.x, pos.y]
+      // Initialize the starting point
+    });
+    this.currentShapeGroup.konvaGroup.add(this.line);
+    window.addEventListener("mouseup", this.globalPointerUpHandler);
+  }
+  /**
+   * Handles mouse or touch pointer-move events and draws the freeform curve.
+   * @param e Konva event object
+   */
+  mouseMoveHandler(e) {
+    if (!this.isPainting) {
+      return;
+    }
+    e.evt.preventDefault();
+    this.line.show();
+    const pos = this.konvaStage.getRelativePointerPosition();
+    const newPoints = this.line.points().concat([pos.x, pos.y]);
+    this.line.points(newPoints);
+  }
+  /**
+   * Handles mouse or touch pointer-up events and finishes drawing the freeform curve.
+   */
+  mouseUpHandler() {
+    if (!this.isPainting) {
+      return;
+    }
+    this.isPainting = false;
+    const group = this.line.getParent();
+    if (this.isTooSmall()) {
+      this.line.destroy();
+      Editor.TimerStart(this.pageNumber, () => {
+        this.setShapeGroupDone({
+          id: group.id(),
+          color: this.currentAnnotation.style.color,
+          contentsObj: {
+            text: ""
+          }
+        });
+        this.currentShapeGroup = null;
+      });
+      return;
+    }
+    Editor.TimerStart(this.pageNumber, () => {
+      this.setShapeGroupDone({
+        id: group.id(),
+        color: this.currentAnnotation.style.color,
+        contentsObj: {
+          text: ""
+        }
+      });
+      this.currentShapeGroup = null;
+    });
+    this.line = null;
+  }
+  /**
+   * Global mouseup event handler that only handles left-button releases.
+   * @param e MouseEvent object
+   */
+  globalPointerUpHandler = (e) => {
+    if (e.button !== 0) return;
+    this.mouseUpHandler();
+    window.removeEventListener("mouseup", this.globalPointerUpHandler);
+  };
+  /**
+   * Determines whether the current line is too small.
+   * @returns True if the line point count is less than 5, otherwise false
+   */
+  isTooSmall() {
+    return this.line.points().length < Editor.MinSize;
+  }
+  /**
+   * @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 (shape instanceof Konva.Line) {
+          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/highlight.d.ts

@@ -0,0 +1,87 @@
+import type { IAnnotationStore, IAnnotationStyle } from '../types.js';
+import { AnnotationType } from '../types.js';
+import { Editor, type IEditorOptions } from '../editor/editor.js';
+/**
+ * EditorHighLight is a highlight editor class that extends Editor.
+ */
+export declare class EditorHighLight extends Editor {
+    /**
+     * Creates an EditorHighLight instance.
+     * @param EditorOptions Options used to initialize the editor
+     * @param editorType Annotation type
+     */
+    constructor(EditorOptions: IEditorOptions, editorType: AnnotationType);
+    /**
+     * 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: HTMLSpanElement[], fixElement: HTMLDivElement): void;
+    /**
+     * Gets the text content of all elements.
+     * @param elements HTMLSpanElement array
+     * @returns String containing the text content of all elements
+     */
+    private getElementOuterText;
+    /**
+     * 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 }
+     */
+    private calculateRelativePosition;
+    /**
+     * 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
+     */
+    private createShape;
+    /**
+     * 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
+     */
+    private createHighlightShape;
+    /**
+     * 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
+     */
+    private createUnderlineShape;
+    /**
+     * 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
+     */
+    private createStrikeoutShape;
+    /**
+     * Handles mouse-down events. No specific logic is implemented yet.
+     */
+    protected mouseDownHandler(): void;
+    /**
+     * Handles mouse-move events. No specific logic is implemented yet.
+     */
+    protected mouseMoveHandler(): void;
+    /**
+     * Handles mouse-up events. No specific logic is implemented yet.
+     */
+    protected mouseUpHandler(): void;
+    /**
+     * @description Update annotation styles
+     * @param annotationStore
+     * @param styles
+     */
+    protected changeStyle(annotationStore: IAnnotationStore, styles: IAnnotationStyle): void;
+}