kviewer 0.0.1

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

@@ -0,0 +1,126 @@
+import Konva from "konva";
+import { AnnotationType } from "../types.js";
+import { Editor } from "../editor/editor.js";
+export class EditorArrow extends Editor {
+  arrow;
+  // The arrow currently being drawn
+  startPoint;
+  // Start point coordinates
+  constructor(EditorOptions) {
+    super({ ...EditorOptions, editorType: AnnotationType.ARROW });
+    this.arrow = null;
+    this.startPoint = { x: 0, y: 0 };
+  }
+  mouseDownHandler(e) {
+    if (e.currentTarget !== this.konvaStage) return;
+    this.arrow = null;
+    this.isPainting = true;
+    this.currentShapeGroup = this.createShapeGroup();
+    this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
+    const pos = this.konvaStage.getRelativePointerPosition();
+    this.startPoint = { x: pos.x, y: pos.y };
+    this.arrow = new Konva.Arrow({
+      points: [pos.x, pos.y, pos.x, pos.y],
+      stroke: this.currentAnnotation.style.color,
+      strokeWidth: this.currentAnnotation.style.strokeWidth,
+      fill: this.currentAnnotation.style.color,
+      pointerLength: 10,
+      pointerWidth: 10,
+      hitStrokeWidth: 20,
+      // Set the hit detection width
+      lineCap: "round",
+      lineJoin: "round",
+      strokeScaleEnabled: false,
+      visible: false,
+      opacity: this.currentAnnotation.style.opacity
+    });
+    this.currentShapeGroup.konvaGroup.add(this.arrow);
+    window.addEventListener("mouseup", this.globalPointerUpHandler);
+  }
+  mouseMoveHandler(e) {
+    if (!this.isPainting) return;
+    e.evt.preventDefault();
+    const pos = this.konvaStage.getRelativePointerPosition();
+    const points = [this.startPoint.x, this.startPoint.y, pos.x, pos.y];
+    this.arrow?.show();
+    this.arrow?.setAttrs({ points });
+  }
+  mouseUpHandler() {
+    if (!this.isPainting) return;
+    this.isPainting = false;
+    const group = this.arrow?.getParent();
+    if (!this.arrow?.isVisible() && group?.getType() === "Group") {
+      this.delShapeGroup(group.id());
+      return;
+    }
+    if (this.isTooShort()) {
+      this.arrow?.destroy();
+      this.delShapeGroup(group.id());
+      this.arrow = null;
+      return;
+    }
+    this.setShapeGroupDone({
+      id: group.id(),
+      color: this.currentAnnotation.style.color,
+      contentsObj: {
+        text: ""
+      }
+    });
+    this.arrow = null;
+  }
+  globalPointerUpHandler = (e) => {
+    if (e.button !== 0) return;
+    this.mouseUpHandler();
+    window.removeEventListener("mouseup", this.globalPointerUpHandler);
+  };
+  isTooShort() {
+    if (!this.arrow) return true;
+    const points = this.arrow.points();
+    if (points.length !== 4) return true;
+    const dx = points[2] - points[0];
+    const dy = points[3] - points[1];
+    return Math.hypot(dx, dy) < 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.Arrow) {
+          if (styles.color !== void 0) {
+            shape.stroke(styles.color);
+            shape.fill(styles.color);
+          }
+          if (styles.strokeWidth !== void 0) {
+            const sw = styles.strokeWidth;
+            shape.strokeWidth(sw);
+            const ratio = 5;
+            const minSize = 6;
+            const maxSize = 30;
+            const pointerSize = Math.max(
+              minSize,
+              Math.min(maxSize, sw * ratio)
+            );
+            shape.pointerLength(pointerSize);
+            shape.pointerWidth(pointerSize);
+          }
+          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/circle.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';
+/**
+ * Ellipse editor class that extends the base Editor and draws ellipses on the canvas.
+ */
+export declare class EditorCircle extends Editor {
+    private ellipse;
+    private vertex;
+    /**
+     * Constructor that initializes the ellipse editor.
+     * @param EditorOptions Editor options interface
+     */
+    constructor(EditorOptions: IEditorOptions);
+    /**
+     * Handles mouse or touch pointer-down events and starts drawing an ellipse.
+     * @param e Konva event object
+     */
+    protected mouseDownHandler(e: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    /**
+     * Handles mouse or touch pointer-move events and draws the ellipse.
+     * @param e Konva event object
+     */
+    protected mouseMoveHandler(e: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    /**
+     * Handles mouse or touch pointer-up events and finishes drawing the ellipse.
+     */
+    protected mouseUpHandler(): void;
+    /**
+     * Global mouseup event handler that only handles left-button releases.
+     * @param e MouseEvent object
+     */
+    private globalPointerUpHandler;
+    /**
+     * Determines whether the ellipse is too small.
+     * @returns True if the ellipse width or height is smaller than the minimum size, 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/circle.js

@@ -0,0 +1,148 @@
+import Konva from "konva";
+import { AnnotationType } from "../types.js";
+import { Editor } from "../editor/editor.js";
+export class EditorCircle extends Editor {
+  ellipse;
+  // The ellipse currently being drawn
+  vertex;
+  // Stores the ellipse start point (vertex) coordinates
+  /**
+   * Constructor that initializes the ellipse editor.
+   * @param EditorOptions Editor options interface
+   */
+  constructor(EditorOptions) {
+    super({ ...EditorOptions, editorType: AnnotationType.CIRCLE });
+    this.ellipse = null;
+    this.vertex = { x: 0, y: 0 };
+  }
+  /**
+   * Handles mouse or touch pointer-down events and starts drawing an ellipse.
+   * @param e Konva event object
+   */
+  mouseDownHandler(e) {
+    if (e.currentTarget !== this.konvaStage) {
+      return;
+    }
+    this.ellipse = 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.ellipse = new Konva.Ellipse({
+      radiusX: 0,
+      radiusY: 0,
+      x: pos.x,
+      y: pos.y,
+      // do not scale strokes
+      strokeScaleEnabled: false,
+      visible: false,
+      // Start hidden
+      stroke: this.currentAnnotation.style.color,
+      // Set the ellipse stroke color
+      strokeWidth: this.currentAnnotation.style.strokeWidth,
+      // Set the ellipse stroke width
+      opacity: this.currentAnnotation.style.opacity
+      // Set the ellipse opacity
+    });
+    this.currentShapeGroup.konvaGroup.add(this.ellipse);
+    window.addEventListener("mouseup", this.globalPointerUpHandler);
+  }
+  /**
+   * Handles mouse or touch pointer-move events and draws the ellipse.
+   * @param e Konva event object
+   */
+  mouseMoveHandler(e) {
+    if (!this.isPainting) {
+      return;
+    }
+    e.evt.preventDefault();
+    this.ellipse.show();
+    const pos = this.konvaStage.getRelativePointerPosition();
+    const radiusX = Math.abs(pos.x - this.vertex.x) / 2;
+    const radiusY = Math.abs(pos.y - this.vertex.y) / 2;
+    const areaAttr = {
+      x: (pos.x - this.vertex.x) / 2 + this.vertex.x,
+      y: (pos.y - this.vertex.y) / 2 + this.vertex.y,
+      radiusX,
+      radiusY
+    };
+    this.ellipse.setAttrs(areaAttr);
+  }
+  /**
+   * Handles mouse or touch pointer-up events and finishes drawing the ellipse.
+   */
+  mouseUpHandler() {
+    if (!this.isPainting) {
+      return;
+    }
+    this.isPainting = false;
+    const group = this.ellipse.getParent();
+    if (!this.ellipse.isVisible() && group.getType() === "Group") {
+      this.delShapeGroup(group.id());
+      return;
+    }
+    if (this.isTooSmall()) {
+      this.ellipse.destroy();
+      this.delShapeGroup(group.id());
+      this.ellipse = null;
+      return;
+    }
+    this.setShapeGroupDone({
+      id: group.id(),
+      color: this.currentAnnotation.style.color,
+      contentsObj: {
+        text: ""
+      }
+    });
+    this.ellipse = 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 ellipse is too small.
+   * @returns True if the ellipse width or height is smaller than the minimum size, otherwise false.
+   */
+  isTooSmall() {
+    const { width, height } = this.ellipse.size();
+    return Math.max(width, height) < 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.Ellipse) {
+          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/cloud.d.ts

@@ -0,0 +1,50 @@
+import type { KonvaEventObject } from 'konva/lib/Node';
+import type { IAnnotationStore, IAnnotationStyle } from '../types.js';
+import { Editor, type IEditorOptions } from '../editor/editor.js';
+export declare class EditorCloud extends Editor {
+    private cloudPath;
+    private points;
+    private startRect;
+    private readonly startRectSize;
+    constructor(options: IEditorOptions);
+    private handleKeyUp;
+    private cancelDrawing;
+    protected mouseDownHandler(_e: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    protected mouseMoveHandler(_e: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    protected mouseUpHandler(_e?: KonvaEventObject<MouseEvent | TouchEvent>): void;
+    /**
+     * @description Handles double-click events and completes cloud drawing
+     */
+    private handleDoubleClick;
+    /**
+     * @description Updates the cloud preview path
+     * @param cursorPos - Cursor position with x and y coordinates
+     * @param cursorPos.x - X coordinate
+     * @param cursorPos.y - Y coordinate
+     */
+    private updateCloudPreview;
+    /**
+     * @description Generates cloud path data
+     * @param points - Array of points with x and y coordinates
+     */
+    private generateCloudPathData;
+    /**
+     * @description Calculates the centroid of a set of points
+     * @param points Array of points
+     * @returns Centroid coordinates
+     */
+    private computeCentroid;
+    /**
+     * @description Draws the start-point indicator rectangle
+     * @param pos - Start position
+     * @param pos.x - X coordinate
+     * @param pos.y - Y coordinate
+     */
+    private drawStartRect;
+    /**
+     * @description Update annotation styles
+     * @param annotationStore
+     * @param styles
+     */
+    protected changeStyle(annotationStore: IAnnotationStore, styles: IAnnotationStyle): void;
+}

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

@@ -0,0 +1,244 @@
+import Konva from "konva";
+import { AnnotationType } from "../types.js";
+import { Editor } from "../editor/editor.js";
+export class EditorCloud extends Editor {
+  cloudPath = null;
+  points = [];
+  startRect = null;
+  startRectSize = 12;
+  constructor(options) {
+    super({ ...options, editorType: AnnotationType.CLOUD });
+    this.konvaStage.on("dblclick", this.handleDoubleClick);
+    window.addEventListener("keyup", this.handleKeyUp);
+  }
+  handleKeyUp = (e) => {
+    if (e.key === "Escape" && this.isPainting) {
+      this.cancelDrawing();
+    }
+  };
+  cancelDrawing() {
+    this.isPainting = false;
+    this.points = [];
+    if (this.cloudPath) {
+      this.cloudPath.destroy();
+      this.cloudPath = null;
+    }
+    if (this.startRect) {
+      this.startRect.destroy();
+      this.startRect = null;
+    }
+    if (this.currentShapeGroup) {
+      this.delShapeGroup(this.currentShapeGroup.konvaGroup.id());
+      this.currentShapeGroup = null;
+    }
+    this.getBgLayer().batchDraw();
+  }
+  mouseDownHandler(_e) {
+    const pos = this.konvaStage.getRelativePointerPosition();
+    this.points.push(pos);
+    if (!this.isPainting) {
+      this.isPainting = true;
+      this.currentShapeGroup = this.createShapeGroup();
+      this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
+      this.cloudPath = new Konva.Path({
+        data: "",
+        stroke: this.currentAnnotation.style.color,
+        strokeWidth: this.currentAnnotation.style.strokeWidth,
+        fillEnabled: false,
+        lineJoin: "round",
+        lineCap: "round",
+        hitStrokeWidth: 20,
+        // Set the hit detection width
+        opacity: this.currentAnnotation.style.opacity
+      });
+      this.currentShapeGroup.konvaGroup.add(this.cloudPath);
+      this.drawStartRect(pos);
+    }
+    this.updateCloudPreview();
+  }
+  mouseMoveHandler(_e) {
+    if (!this.isPainting || !this.cloudPath) return;
+    const pos = this.konvaStage.getRelativePointerPosition();
+    this.updateCloudPreview(pos);
+  }
+  mouseUpHandler(_e) {
+  }
+  /**
+   * @description Handles double-click events and completes cloud drawing
+   */
+  handleDoubleClick = () => {
+    if (!this.isPainting || this.points.length < 3) return;
+    this.isPainting = false;
+    if (!this.cloudPath) return;
+    const closedPoints = [...this.points, this.points[0]];
+    const pathData = this.generateCloudPathData(closedPoints);
+    this.cloudPath.data(pathData);
+    this.setShapeGroupDone({
+      id: this.currentShapeGroup.konvaGroup.id(),
+      color: this.currentAnnotation.style.color,
+      contentsObj: { text: "" }
+    });
+    this.cloudPath = null;
+    this.points = [];
+    if (this.startRect) {
+      this.startRect.destroy();
+      this.startRect = null;
+    }
+  };
+  /**
+   * @description Updates the cloud preview path
+   * @param cursorPos - Cursor position with x and y coordinates
+   * @param cursorPos.x - X coordinate
+   * @param cursorPos.y - Y coordinate
+   */
+  updateCloudPreview(cursorPos) {
+    if (!this.cloudPath) return;
+    const pathPoints = [...this.points];
+    if (cursorPos) pathPoints.push(cursorPos);
+    const pathData = this.generateCloudPathData(pathPoints);
+    this.cloudPath.data(pathData);
+  }
+  /**
+   * @description Generates cloud path data
+   * @param points - Array of points with x and y coordinates
+   */
+  generateCloudPathData(points) {
+    if (points.length < 2) return "";
+    const radius = 12;
+    const waveStep = radius * 1.1;
+    const center = this.computeCentroid(points);
+    let path = "";
+    let fixedAngle = null;
+    for (let i = 0; i < points.length - 1; i++) {
+      const p1 = points[i];
+      const p2 = points[i + 1];
+      const dx = p2.x - p1.x;
+      const dy = p2.y - p1.y;
+      const length = Math.hypot(dx, dy);
+      let angle = Math.atan2(dy, dx);
+      if (i === 0 && !fixedAngle) fixedAngle = angle;
+      if (i === 0) angle = fixedAngle;
+      const normalX = Math.cos(angle + Math.PI / 2);
+      const normalY = Math.sin(angle + Math.PI / 2);
+      const segmentMidX = (p1.x + p2.x) / 2;
+      const segmentMidY = (p1.y + p2.y) / 2;
+      const toCenterX = center.x - segmentMidX;
+      const toCenterY = center.y - segmentMidY;
+      let normalSign = 1;
+      if (normalX * toCenterX + normalY * toCenterY > 0) normalSign = -1;
+      const steps = Math.max(2, Math.floor(length / waveStep));
+      for (let j = 0; j < steps; j++) {
+        const t1 = j / steps;
+        const t2 = (j + 1) / steps;
+        const x1 = p1.x + dx * t1;
+        const y1 = p1.y + dy * t1;
+        const x2 = p1.x + dx * t2;
+        const y2 = p1.y + dy * t2;
+        const midX = (x1 + x2) / 2;
+        const midY = (y1 + y2) / 2;
+        const controlX = midX + normalX * radius * normalSign;
+        const controlY = midY + normalY * radius * normalSign;
+        if (i === 0 && j === 0) {
+          path += `M ${x1} ${y1} `;
+        }
+        path += `Q ${controlX} ${controlY} ${x2} ${y2} `;
+      }
+    }
+    return path;
+  }
+  /**
+   * @description Calculates the centroid of a set of points
+   * @param points Array of points
+   * @returns Centroid coordinates
+   */
+  computeCentroid(points) {
+    const sum = points.reduce(
+      (acc, p) => {
+        acc.x += p.x;
+        acc.y += p.y;
+        return acc;
+      },
+      { x: 0, y: 0 }
+    );
+    return {
+      x: sum.x / points.length,
+      y: sum.y / points.length
+    };
+  }
+  /**
+   * @description Draws the start-point indicator rectangle
+   * @param pos - Start position
+   * @param pos.x - X coordinate
+   * @param pos.y - Y coordinate
+   */
+  drawStartRect(pos) {
+    this.startRect = new Konva.Rect({
+      x: pos.x - this.startRectSize / 2,
+      y: pos.y - this.startRectSize / 2,
+      width: this.startRectSize,
+      height: this.startRectSize,
+      stroke: "#000",
+      strokeWidth: 2,
+      fill: null,
+      cornerRadius: 2,
+      hitStrokeWidth: 10,
+      // Increase the hit detection area
+      draggable: false,
+      dash: [4, 2],
+      name: "startRect"
+    });
+    this.getBgLayer().add(this.startRect);
+    this.startRect.moveToTop();
+    this.startRect.on(
+      "mouseup",
+      (_e) => {
+        this.handleDoubleClick();
+      }
+    );
+    this.startRect.on(
+      "mousemove",
+      (_e) => {
+        this.startRect.stroke("#1677ff");
+        this.startRect.getLayer()?.batchDraw();
+      }
+    );
+    this.startRect.on(
+      "mouseout",
+      (_e) => {
+        this.startRect.stroke("#000");
+        this.startRect.getLayer()?.batchDraw();
+      }
+    );
+  }
+  /**
+   * @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.Path) {
+          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-highlight.d.ts

@@ -0,0 +1,43 @@
+import type { KonvaEventObject } from 'konva/lib/Node';
+import type { IAnnotationStore, IAnnotationStyle } from '../types.js';
+import { Editor, type IEditorOptions } from '../editor/editor.js';
+export declare class EditorFreeHighlight extends Editor {
+    private line;
+    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;
+    /**
+     * 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
+     */
+    private correctLineIfStraight;
+    /**
+     * 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;
+}