@inweb/markup 25.8.19 → 25.8.21

package/src/markup/IMarkupObject.ts

@@ -22,57 +22,67 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 /**
- * Markup object
+ * 2D markup object interface.
  */
 export interface IMarkupObject {
   /**
-   * Link to Library object (Konva, VisualizeJS)
+   * Returns a reference to a core markup library object (Konva, VisualizeJS, etc.).
    */
   ref(): any;
 
   /**
-   * Get an internal identificator of the object. Not unique
+   * Returns the internal identifier of the object. Not unique.
    */
   id(): string;
 
   /**
-   * Set Mouse editing feature
-   *
-   * @param value true / false
+   * Enables or disables the ability to select and edit an object using the mouse.
    */
-  enableMouseEditing(value: boolean);
+  enableMouseEditing(value: boolean): void;
 
   /**
-   * Get type of the Markup object
+   * Returns the type of the object.
    */
   type(): string;
 
   /**
-   * Get rotation of the Markup object
+   * Returns the rotation angle of the object, in degress.
    */
   getRotation(): number;
 
   /**
-   * Set rotation of the Markup object
+   * Sets the rotation angle of the object.
    *
-   * @param degrees number of degress to rotate
+   * @param degrees - Number of degress to rotate.
    */
   setRotation(degrees: number): void;
 
   /**
-   * Get Z-Index of the Markup object
+   * Returns the Z-index of a object relative to sibling objects that are in the same group.
+   *
+   * Z-Index is not absolute (like in CSS). It is relative to parent object group only:
+   *
+   * - `images` - are olways at the bottom
+   * - `texts` - are olways on top
+   * - `others` - are always between images and texts
    */
   getZIndex(): number;
 
   /**
-   * Set Z-Index of the Markup object
+   * Sets the Z-index of a object relative to sibling objects that are in the same group.
+   *
+   * Z-Index is not absolute (like in CSS). It is relative to parent object group only:
+   *
+   * - `images` - are olways at the bottom
+   * - `texts` - are olways on top
+   * - `others` - are always between images and texts
    *
-   * @param zIndex integer value of Z-Index
+   * @param zIndex - An integer value of Z-Index.
    */
   setZIndex(zIndex: number): void;
 
   /**
-   * Delete current Markup object
+   * Deletes the current object.
    */
   delete(): void;
 }

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

@@ -29,8 +29,8 @@ export class KonvaArrow implements IMarkupArrow {
 
   constructor(
     params: {
-      start: { x: number; y: number };
-      end: { x: number; y: number };
+      start?: { x: number; y: number };
+      end?: { x: number; y: number };
       color?: string;
       id?: string;
     },
@@ -41,7 +41,9 @@ export class KonvaArrow implements IMarkupArrow {
       return;
     }
 
-    if (!params || !params.start || !params.end) return;
+    if (!params) params = {};
+    if (!params.start) params.start = { x: 50, y: 50 };
+    if (!params.end) params.end = { x: 100, y: 100 };
 
     this._ref = new Konva.Arrow({
       stroke: params.color ?? "#ff0000",
@@ -72,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

@@ -6,7 +6,7 @@ export class KonvaCloud implements IMarkupCloud {
 
   constructor(
     params: {
-      position: { x: number; y: number };
+      position?: { x: number; y: number };
       width?: number;
       height?: number;
       lineWidth?: number;
@@ -20,7 +20,8 @@ export class KonvaCloud implements IMarkupCloud {
       return;
     }
 
-    if (!params || !params.position) return;
+    if (!params) params = {};
+    if (!params.position) params.position = { x: 100, y: 100 };
 
     const arcRadius = 16;
 
@@ -141,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

@@ -6,8 +6,8 @@ export class KonvaEllipse implements IMarkupEllipse {
 
   constructor(
     params: {
-      position: { x: number; y: number };
-      radius: { x: number; y: number };
+      position?: { x: number; y: number };
+      radius?: { x: number; y: number };
       lineWidth?: number;
       color?: string;
       id?: string;
@@ -19,7 +19,9 @@ export class KonvaEllipse implements IMarkupEllipse {
       return;
     }
 
-    if (!params || !params.position || !params.radius) return;
+    if (!params) params = {};
+    if (!params.position) params.position = { x: 100, y: 100 };
+    if (!params.radius) params.radius = { x: 25, y: 25 };
 
     this._ref = new Konva.Ellipse({
       stroke: params.color ?? "#ff0000",
@@ -110,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

@@ -6,11 +6,14 @@ export class KonvaImage implements IMarkupImage {
   private _canvasImage: HTMLImageElement;
   private _ratio = 1;
   private readonly EPSILON = 10e-6;
+  private readonly BASE64_NOT_FOUND =
+    "data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAADsAAAA7AF5KHG9AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAmhJREFUWIXtlr9rVEEQxz+H8RQUJIdeIopYm0vkCg0GBBtbG1NF7Kxt7dR/IGIw/uhTaBNLERURg2kCEUyCYCPi70b0InjGS57FzOZN3r19d+9HJIVfWO52dma/s7Mz8xa2KAaBCWAR+AkECWOmSOIdwC1gtQOpHc+NfQ8wClQ8+1d0vcdH/lQ3bSIRGAZ2pTjAqNovANXIWlXlAXA2zvi2Ln4AjqYgtagYEutENSLvjRoOImFv5iB32Ae8UrLXwFBk3h9ndF0VJnKSO9gTu3yKu5Z1LKnS8YIcABgw5Ks692JZFXcXRJ46Aq6kikCnHNi/mQ50WwVtfaIoBzL3gRk2drSscJ2wrc4VvUoe2wn/41/iBfoVLRnBGnDSY3AAKacy8AmYR+o7K1zCl6wgrgpOAc/MuhvfgMuk+1JGHQgSBcAloKXy78AjYBppJk5/noTulseBMZ23iD/piHFkEdgTQzKk+5wHjmHC3cmBg0BD5xcSTrFXyQPgIWFtDwMvab+2N8DpbhyY1v/3E8gdDgNfVX9SCVZ0/gW4B0wB71S2BpxLcuCM/jaQSHSDEeAX4VMuAG4gTzyHbcAVXXO6GxxwIX+vvxe7JHcYQ07nHqklj96UIW/YhSWzMKcep8VVtf8B1Dw6h4DfhB+sdbgn2R+gnoEc5NR3dZ+3QJ9H74HqXLPCGlJyTfI9y3YCs0owq3OLOpKkLeBI1HhSDT/mdKIPiUCARMTlQx34TMLjtww8IczmO8AJ/N/2JNSQXAiQ671JePePge0+wzJSQq4FFzlaenIvucUAkiQLhC/mLGNZ9xgn5s63BP4CCk0QDtm4BhoAAAAASUVORK5CYII=";
+  private readonly BASE64_HEADER_START = "data:image/";
 
   constructor(
     params: {
-      position: { x: number; y: number };
-      src: string;
+      position?: { x: number; y: number };
+      src?: string;
       width?: number;
       height?: number;
       maxWidth?: number;
@@ -20,7 +23,9 @@ export class KonvaImage implements IMarkupImage {
     ref = null
   ) {
     if (ref) {
-      // if (ref.height() === 0 || ref.width() === 0) return;
+      if (!ref.src || !ref.src.startsWith(this.BASE64_HEADER_START)) ref.src = this.BASE64_NOT_FOUND;
+      if (ref.height() <= this.EPSILON) ref.height(32);
+      if (ref.width() <= this.EPSILON) ref.width(32);
 
       this._ref = ref;
       this._canvasImage = ref.image();
@@ -28,22 +33,16 @@ export class KonvaImage implements IMarkupImage {
         this._ref.height() <= this.EPSILON || this._ref.width() <= this.EPSILON
           ? 1
           : this._ref.height() / this._ref.width();
+
       return;
     }
 
-    if (!params || !params.position || !params.src) return;
+    if (!params) params = {};
+    if (!params.position) params.position = { x: 50, y: 50 };
+    if (!params.src || !params.src.startsWith(this.BASE64_HEADER_START)) params.src = this.BASE64_NOT_FOUND;
 
     this._canvasImage = new Image();
 
-    this._ref = new Konva.Image({
-      x: params.position.x,
-      y: params.position.y,
-      image: this._canvasImage,
-      width: params.width ?? 0,
-      height: params.height ?? 0,
-      draggable: true,
-    });
-
     this._canvasImage.onload = () => {
       this._ref.image(this._canvasImage);
       if (this._ref.height() <= this.EPSILON) this._ref.height(this._canvasImage.height);
@@ -74,8 +73,22 @@ export class KonvaImage implements IMarkupImage {
       }
     };
 
+    this._canvasImage.onerror = () => {
+      this._canvasImage.onerror = function () {};
+      this._canvasImage.src = this.BASE64_NOT_FOUND;
+    };
+
     this._canvasImage.src = params.src;
 
+    this._ref = new Konva.Image({
+      x: params.position.x,
+      y: params.position.y,
+      image: this._canvasImage,
+      width: params.width ?? 0,
+      height: params.height ?? 0,
+      draggable: true,
+    });
+
     this._ref.on("transform", (e) => {
       const attrs = e.target.attrs;
 
@@ -146,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,22 +10,18 @@ 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;
     }
 
-    if (!params || !params.points) return;
+    if (!params) params = {};
+    if (!params.points)
+      params.points = [
+        { x: 50, y: 50 },
+        { x: 100, y: 100 },
+      ];
 
     const konvaPoints = [];
     params.points.forEach((point) => konvaPoints.push(point.x, point.y));
@@ -59,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/KonvaRectangle.ts

@@ -6,7 +6,7 @@ export class KonvaRectangle implements IMarkupRectangle {
 
   constructor(
     params: {
-      position: { x: number; y: number };
+      position?: { x: number; y: number };
       width?: number;
       height?: number;
       lineWidth?: number;
@@ -20,7 +20,8 @@ export class KonvaRectangle implements IMarkupRectangle {
       return;
     }
 
-    if (!params || !params.position) return;
+    if (!params) params = {};
+    if (!params.position) params.position = { x: 100, y: 100 };
 
     this._ref = new Konva.Rect({
       stroke: params.color ?? "#ff0000",

package/src/markup/Konva/KonvaText.ts

@@ -7,8 +7,8 @@ export class KonvaText implements IMarkupText {
 
   constructor(
     params: {
-      position: { x: number; y: number };
-      text: string;
+      position?: { x: number; y: number };
+      text?: string;
       rotation?: number;
       fontSize?: number;
       color?: string;
@@ -21,7 +21,9 @@ export class KonvaText implements IMarkupText {
       return;
     }
 
-    if (!params || !params.position || !params.text) return;
+    if (!params) params = {};
+    if (!params.position) params.position = { x: 100, y: 100 };
+    if (!params.text) params.text = "default";
 
     this._ref = new Konva.Text({
       x: params.position.x,
@@ -77,7 +79,7 @@ export class KonvaText implements IMarkupText {
     return this._ref.id();
   }
 
-  enableMouseEditing(value: boolean) {
+  enableMouseEditing(value: boolean): void {
     this._ref.draggable(value);
   }