@inweb/markup 25.8.20 → 25.8.22

package/src/markup/IMarkupRectangle.ts

@@ -25,55 +25,46 @@ import { IMarkupObject } from "./IMarkupObject";
 import { IMarkupColorable } from "./IMarkupColorable";
 
 /**
- * Rectangle Markup object
+ * 2D markup Rectangle object interface.
  */
 export interface IMarkupRectangle extends IMarkupObject, IMarkupColorable {
   /**
-   * Get position of the Rectangle
+   * Returns the coordinates of the top-left point (position) of the rectangle.
    */
   getPosition(): { x: number; y: number };
 
   /**
-   * Set position of the Rectangle
-   *
-   * @param x - value of X coordinate
-   * @param y - value of Y coordinate
+   * Sets the coordinates of the top-left point (position) of the rectangle.
    */
   setPosition(x: number, y: number);
 
   /**
-   * Get width of the Rectangle. Default value is 200
+   * Returns the width of the rectangle.
    */
   getWidth(): number;
 
   /**
-   * Set width of the Rectangle
-   *
-   * @param w - value of width. Default value is 200
+   * Sets the width of the rectangle.
    */
   setWidth(w: number);
 
   /**
-   * Get height of the Rectangle. Default value is 200
+   * Returns the height of the rectangle.
    */
   getHeigth(): number;
 
   /**
-   * Set height of the Rectangle
-   *
-   * @param h - value of height. Default value is 200
+   * Sets the height of the rectangle.
    */
   setHeight(h: number);
 
   /**
-   * Get line width of the Rectangle. Defailt value is 4
+   * Returns the line width of the rectangle.
    */
   getLineWidth(): number;
 
   /**
-   * Set line width of the Rectangle
-   *
-   * @param size - value of width. Defailt value is 4
+   * Sets the line width of the rectangle.
    */
   setLineWidth(size: number);
 }

package/src/markup/IMarkupText.ts

@@ -25,43 +25,36 @@ import { IMarkupObject } from "./IMarkupObject";
 import { IMarkupColorable } from "./IMarkupColorable";
 
 /**
- * Text Markup object
+ * 2D markup Text object interface.
  */
 export interface IMarkupText extends IMarkupObject, IMarkupColorable {
   /**
-   * Get Text value
+   * Returns the text string.
    */
   getText(): string;
 
   /**
-   * Set Text value
-   *
-   * @param text - string value
+   * Sets the text string.
    */
   setText(text: string): void;
 
   /**
-   * Get position of the Text
+   * Returns the coordinates of the top-left point (position) of the text.
    */
   getPosition(): { x: number; y: number };
 
   /**
-   * Set position of the Text
-   *
-   * @param x - value of X coordinate
-   * @param y - value of Y coordinate
+   * Sets the coordinates of the top-left point (position) of the text.
    */
   setPosition(x: number, y: number);
 
   /**
-   * Get font size. Default value is 34
+   * Returns the font size of the text.
    */
   getFontSize();
 
   /**
-   * Set font size. Default value is 34
-   *
-   * @param size
+   * Sets the font size of the text.
    */
   setFontSize(size: number);
 }

package/src/markup/IWorldTransform.ts

@@ -22,7 +22,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 /**
- * Viewer coordiate system transformer.
+ * Viewer coordiate system transformer interface.
  */
 export interface IWorldTransform {
   /**

package/src/markup/Konva/KonvaArrow.ts

@@ -74,7 +74,7 @@ export class KonvaArrow implements IMarkupArrow {
     return this._ref.id();
   }
 
-  enableMouseEditing(value: boolean) {
+  enableMouseEditing(value: boolean): void {
     this._ref.draggable(value);
   }
 

package/src/markup/Konva/KonvaCloud.ts

@@ -142,7 +142,7 @@ export class KonvaCloud implements IMarkupCloud {
     return this._ref.id();
   }
 
-  enableMouseEditing(value: boolean) {
+  enableMouseEditing(value: boolean): void {
     this._ref.draggable(value);
   }
 

package/src/markup/Konva/KonvaEllipse.ts

@@ -112,7 +112,7 @@ export class KonvaEllipse implements IMarkupEllipse {
     return this._ref.id();
   }
 
-  enableMouseEditing(value: boolean) {
+  enableMouseEditing(value: boolean): void {
     this._ref.draggable(value);
   }
 

package/src/markup/Konva/KonvaImage.ts

@@ -159,7 +159,7 @@ export class KonvaImage implements IMarkupImage {
     return this._ref.id();
   }
 
-  enableMouseEditing(value: boolean) {
+  enableMouseEditing(value: boolean): void {
     this._ref.draggable(value);
   }
 

package/src/markup/Konva/KonvaLine.ts

@@ -1,5 +1,5 @@
 import Konva from "konva";
-import { IMarkupLine, MarkupLineType } from "../IMarkupLine";
+import { IMarkupLine, IMarkupLineParams, MarkupLineType } from "../IMarkupLine";
 
 const LineTypeSpecs = new Map<string, number[]>([
   ["solid", []],
@@ -10,16 +10,7 @@ const LineTypeSpecs = new Map<string, number[]>([
 export class KonvaLine implements IMarkupLine {
   private _ref: Konva.Line;
 
-  constructor(
-    params: {
-      points?: { x: number; y: number }[];
-      type?: MarkupLineType;
-      width?: number;
-      color?: string;
-      id?: string;
-    },
-    ref = null
-  ) {
+  constructor(params: IMarkupLineParams, ref = null) {
     if (ref) {
       this._ref = ref;
       return;
@@ -64,7 +55,7 @@ export class KonvaLine implements IMarkupLine {
     return this._ref.id();
   }
 
-  enableMouseEditing(value: boolean) {
+  enableMouseEditing(value: boolean): void {
     this._ref.draggable(value);
   }
 

package/src/markup/Konva/KonvaMarkup.ts

@@ -92,7 +92,7 @@ export class KonvaMarkup implements IMarkup {
   private _viewer: IEventEmitter;
   private _worldTransformer: IWorldTransform;
   private _container: HTMLElement;
-  private _pointerEvents: string[] = [];
+  private _containerEvents: string[] = [];
   private _markupIsActive = false;
   private _markupMode: MarkupMode;
   private _markupColor = new MarkupColor(255, 0, 0);
@@ -117,7 +117,7 @@ export class KonvaMarkup implements IMarkup {
 
   initialize(
     container: HTMLElement,
-    pointerEvents?: string[],
+    containerEvents?: string[],
     viewer?: IEventEmitter,
     worldTransformer?: IWorldTransform
   ): void {
@@ -129,7 +129,7 @@ export class KonvaMarkup implements IMarkup {
     this._viewer = viewer;
     this._worldTransformer = worldTransformer ?? new WorldTransform();
     this._container = container;
-    this._pointerEvents = pointerEvents ?? [];
+    this._containerEvents = containerEvents ?? [];
 
     this._markupContainer = document.createElement("div");
     this._markupContainer.id = "markup-container";
@@ -150,7 +150,7 @@ export class KonvaMarkup implements IMarkup {
     this.initializeKonva();
 
     if (this._viewer) {
-      this._pointerEvents.forEach((x) => this._markupContainer.addEventListener(x, this.redirectToViewer));
+      this._containerEvents.forEach((x) => this._markupContainer.addEventListener(x, this.redirectToViewer));
       this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
       this._viewer.addEventListener("pan", this.pan);
     }
@@ -160,7 +160,7 @@ export class KonvaMarkup implements IMarkup {
     if (this._viewer) {
       this._viewer.removeEventListener("pan", this.pan);
       this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
-      this._pointerEvents.forEach((x) => this._markupContainer.removeEventListener(x, this.redirectToViewer));
+      this._containerEvents.forEach((x) => this._markupContainer.removeEventListener(x, this.redirectToViewer));
     }
 
     this.destroyKonva();
@@ -224,7 +224,7 @@ export class KonvaMarkup implements IMarkup {
   }
 
   getMarkupColor(): { r: number; g: number; b: number } {
-    return this._markupColor.RGB;
+    return this._markupColor.asRGB();
   }
 
   setMarkupColor(r: number, g: number, b: number): void {
@@ -232,12 +232,12 @@ export class KonvaMarkup implements IMarkup {
   }
 
   colorizeAllMarkup(r: number, g: number, b: number): void {
-    const hexColor = new MarkupColor(r, g, b).HexColor;
+    const hexColor = new MarkupColor(r, g, b).asHex();
     this.getObjects().filter((obj: any) => obj.setColor?.(hexColor));
   }
 
   colorizeSelectedMarkups(r: number, g: number, b: number): void {
-    const hexColor = new MarkupColor(r, g, b).HexColor;
+    const hexColor = new MarkupColor(r, g, b).asHex();
     this.getSelectedObjects().filter((obj: any) => obj.setColor?.(hexColor));
   }
 
@@ -863,7 +863,7 @@ export class KonvaMarkup implements IMarkup {
       points,
       type: type || this.lineType,
       width: width || this.lineWidth,
-      color: color || this._markupColor.HexColor,
+      color: color || this._markupColor.asHex(),
       id,
     });
 
@@ -882,7 +882,7 @@ export class KonvaMarkup implements IMarkup {
       this._textInputRef.style.top = inputY + "px";
       this._textInputRef.style.left = inputX + "px";
       this._textInputRef.style.fontSize = `${this.fontSize}px`;
-      this._textInputRef.style.color = `${this._markupColor.HexColor}`;
+      this._textInputRef.style.color = `${this._markupColor.asHex()}`;
       this._textInputRef.style.fontFamily = "Calibri";
 
       this._textInputRef.onkeydown = (event) => {
@@ -989,7 +989,7 @@ export class KonvaMarkup implements IMarkup {
       text,
       rotation: angle,
       fontSize: fontSize || this.fontSize,
-      color: color || this._markupColor.HexColor,
+      color: color || this._markupColor.asHex(),
       id,
     });
 
@@ -1012,7 +1012,7 @@ export class KonvaMarkup implements IMarkup {
       width,
       height,
       lineWidth: lineWidth || this.lineWidth,
-      color: color || this._markupColor.HexColor,
+      color: color || this._markupColor.asHex(),
       id,
     });
 
@@ -1033,7 +1033,7 @@ export class KonvaMarkup implements IMarkup {
       position,
       radius,
       lineWidth,
-      color: color || this._markupColor.HexColor,
+      color: color || this._markupColor.asHex(),
       id,
     });
 
@@ -1052,7 +1052,7 @@ export class KonvaMarkup implements IMarkup {
     const konvaArrow = new KonvaArrow({
       start,
       end,
-      color: color || this._markupColor.HexColor,
+      color: color || this._markupColor.asHex(),
       id,
     });
 
@@ -1074,7 +1074,7 @@ export class KonvaMarkup implements IMarkup {
       position,
       width,
       height,
-      color: color || this._markupColor.HexColor,
+      color: color || this._markupColor.asHex(),
       lineWidth: lineWidth || this.lineWidth,
       id,
     });

package/src/markup/Konva/KonvaText.ts

@@ -79,7 +79,7 @@ export class KonvaText implements IMarkupText {
     return this._ref.id();
   }
 
-  enableMouseEditing(value: boolean) {
+  enableMouseEditing(value: boolean): void {
     this._ref.draggable(value);
   }
 

package/src/markup/Konva/MarkupColor.ts

@@ -22,57 +22,56 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 /**
- * Markup color.
+ * Defines the markup color helper object.
  */
 export class MarkupColor {
   public R: number;
   public G: number;
   public B: number;
-
-  private _hex: string;
+  public HEX: string;
 
   /**
-   * Color in #000000 format
+   * Creates an instance of the color.
+   *
+   * @param r - The `red` component of the color, as a number between 0 and 255.
+   * @param g - The `green` component of the color, as a number between 0 and 255.
+   * @param b - The `blue` component of the color, as a number between 0 and 255.
    */
-  get HexColor(): string {
-    return "#" + this._hex;
+  constructor(r: number, g: number, b: number) {
+    this.setColor(r, g, b);
   }
 
   /**
-   * Color as object with r,g,b properties
+   * Returns the color as a string in hexadecimal color syntax `#RGB` using its primary color
+   * components (red, green, blue) written as hexadecimal numbers.
    */
-  get RGB(): { r: number; g: number; b: number } {
-    return { r: this.R, g: this.G, b: this.B };
+  public asHex(): string {
+    return "#" + this.HEX;
   }
 
   /**
-   * Create an instance of Color
-   *
-   * @param r - Red color in [0,255] range
-   * @param g - Green color in [0,255] range
-   * @param b - Blue color in [0,255] range
+   * Returns the color as an {r, g, b} object.
    */
-  constructor(r: number, g: number, b: number) {
-    this.setColor(r, g, b);
+  public asRGB(): { r: number; g: number; b: number } {
+    return { r: this.R, g: this.G, b: this.B };
   }
 
   /**
-   * Set Color for current instance
+   * Sets the color.
    *
-   * @param r - Red color in [0,255] range
-   * @param g - Green color in [0,255] range
-   * @param b - Blue color in [0,255] range
+   * @param r - The `red` component of the color, as a number between 0 and 255.
+   * @param g - The `green` component of the color, as a number between 0 and 255.
+   * @param b - The `blue` component of the color, as a number between 0 and 255.
    */
   public setColor(r: number, g: number, b: number): void {
     this.R = r;
     this.G = g;
     this.B = b;
-
-    this._hex = this.rgbToHex(r, g, b);
+    this.HEX = this.rgbToHex(r, g, b);
   }
 
   private rgbToHex(r: number, g: number, b: number): string {
-    const valueToHex = (c) => {
+    const valueToHex = (c: number) => {
       const hex = c.toString(16);
       return hex === "0" ? "00" : hex;
     };