@inweb/markup 25.8.20 → 25.8.21

package/lib/markup/IMarkup.d.ts

@@ -23,7 +23,7 @@ export interface IMarkup {
      */
     lineType: string;
     /**
-     * Font size of new markup text, in pixels.
+     * Font size of new markup text.
      *
      * @default 34
      */
@@ -34,14 +34,17 @@ export interface IMarkup {
      * @param container - Container element used to operate on. This is usually a `<canvas>` or
      *   `<div>` on top of which the markup is drawn. If the `container` is a `<canvas>` element,
      *   its content will be combined with the markup in the viewpoint snapshot.
-     * @param pointerEvents - List of pointing device events that the markup should redirect to
-     *   the `viewer`.
+     * @param containerEvents - List of container events, such as mouse events or
+     *   {@link https://developer.mozilla.org/docs/Web/API/Pointer_events#event_types_and_global_event_handlers | pointer events}
+     *   or
+     *   {@link https://developer.mozilla.org/docs/Web/API/TouchEvent#touch_event_types | touch events}
+     *   that the markup should redirect to the `viewer`.
      * @param viewer - `Viewer` instance that receives pointing device events.
      * @param worldTransformer - Transformer of screen space into the `viewer` world space and
      *   vice versa. If a transformer is defined, markup objects will be stored at the viewpoint
      *   in world coordinates, otherwise in screen coordinates.
      */
-    initialize(container: HTMLElement, pointerEvents?: string[], viewer?: IEventEmitter, worldTransformer?: IWorldTransform): void;
+    initialize(container: HTMLElement, containerEvents?: string[], viewer?: IEventEmitter, worldTransformer?: IWorldTransform): void;
     /**
      * Releases all resources allocated by this markup instance.
      */
@@ -57,9 +60,9 @@ export interface IMarkup {
     /**
      * Sets the color of new markup objects.
      *
-     * @param r - `Red` part of color.
-     * @param g - `Green` part of color.
-     * @param b - `Blue` part of 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.
      */
     setMarkupColor(r: number, g: number, b: number): void;
     /**
@@ -73,17 +76,17 @@ export interface IMarkup {
     /**
      * Colors all markup objects with the specified color.
      *
-     * @param r - `Red` part of color.
-     * @param g - `Green` part of color.
-     * @param b - `Blue` part of 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.
      */
     colorizeAllMarkup(r: number, g: number, b: number): void;
     /**
-     * Colors selected markup objects with the specified color.
+     * Colors the selected markup objects with the specified color.
      *
-     * @param r - `Red` part of color.
-     * @param g - `Green` part of color.
-     * @param b - `Blue` part of 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.
      */
     colorizeSelectedMarkups(r: number, g: number, b: number): void;
     /**
@@ -108,7 +111,15 @@ export interface IMarkup {
      *
      * @param type - Markup object type. Can be `Line`, `Text`, `Rectangle`, `Ellipse`, `Arrow`,
      *   `Image` or `Cloud`.
-     * @param params - Markup object parameters.
+     * @param params - Parameters for creating a markup object. Must match the object type:
+     *
+     *   - `Line` - {@link IMarkupLineParams}
+     *   - `Text` - {@link IMarkupTextParams}
+     *   - `Rectangle` - {@link IMarkupRectangleParams}
+     *   - `Ellipse` - {@link IMarkupEllipseParams}
+     *   - `Arrow` - {@link IMarkupArrowParams}
+     *   - `Image` - {@link IMarkupImageParams}
+     *   - `Cloud` - {@link IMarkupCloudParams}
      */
     createObject(type: string, params: any): IMarkupObject;
     /**
@@ -120,7 +131,7 @@ export interface IMarkup {
      */
     getSelectedObjects(): IMarkupObject[];
     /**
-     * Selects specified markup objects.
+     * Selects the specified markup objects.
      *
      * @param objects - The list of markup objects.
      */

package/lib/markup/IMarkupArrow.d.ts

@@ -1,53 +1,45 @@
 import { IMarkupObject } from "./IMarkupObject";
 import { IMarkupColorable } from "./IMarkupColorable";
 /**
- * Arrow Markup object
+ * 2D markup Arrow object interface.
  */
 export interface IMarkupArrow extends IMarkupObject, IMarkupColorable {
     /**
-     * Get points of current Arrow
-     *
-     * @returns {{ x: number; y: number }} array of points
+     * Returns the coordinales of the start and end points of arrow.
      */
     getPoints(): {
         x: number;
         y: number;
     }[];
     /**
-     * Set points of the Arrow
+     * Sets the coordinales of the start and end points of the arrow.
      *
-     * @param {{ x: number; y: number }} points - array of points
+     * @param {{ x: number; y: number }} points - Array of points.
      */
     setPoints(points: {
         x: number;
         y: number;
     }[]): any;
     /**
-     * Get Start Point of the Arrow
+     * Returns the coordinales of the start point of arrow.
      */
     getStartPoint(): {
         x: number;
         y: number;
     };
     /**
-     * Set Start point of the Arrow
-     *
-     * @param x - value of X coordinate
-     * @param y - value of Y coordinate
+     * Sets the coordinales of the start point of the arrow.
      */
     setStartPoint(x: number, y: number): any;
     /**
-     * Get End point of the Arrow
+     * Returns the coordinales of the end point of arrow.
      */
     getEndPoint(): {
         x: number;
         y: number;
     };
     /**
-     * Set End point of the Arrow
-     *
-     * @param x - value of X coordinate
-     * @param y - value of Y coordinate
+     * Sets the coordinales of the end point of the arrow.
      */
     setEndPoint(x: number, y: number): any;
 }

package/lib/markup/IMarkupCloud.d.ts

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

package/lib/markup/IMarkupColorable.d.ts

@@ -1,15 +1,16 @@
 /**
- * Markup Colorable
+ * 2D markup colorable object interface.
  */
 export interface IMarkupColorable {
     /**
-     * Get color of the Markup instance
+     * Returns the foreground color of an object's line or text as a string in hexadecimal color
+     * syntax `#RGB` using its primary color components (red, green, blue) written as hexadecimal numbers.
      */
     getColor(): string;
     /**
-     * Set color of the Markup instance
+     * Sets the foreground color of an object's line or text.
      *
-     * @param hex - color in #hex format. Default: `#ff0000`
+     * @param hex - Color in hexadecimal color syntax `#RGB`.
      */
     setColor(hex: string): void;
 }

package/lib/markup/IMarkupEllipse.d.ts

@@ -1,51 +1,42 @@
 import { IMarkupObject } from "./IMarkupObject";
 import { IMarkupColorable } from "./IMarkupColorable";
 /**
- * Ellipse Markup object
+ * 2D markup Ellipse object interface.
  */
 export interface IMarkupEllipse extends IMarkupObject, IMarkupColorable {
     /**
-     * Get position of the Ellipse
+     * Returns the coordinates of the center point (position) of the ellipse.
      */
     getPosition(): {
         x: number;
         y: number;
     };
     /**
-     * Set position of the Ellipse
-     *
-     * @param x - value of X coordinate
-     * @param y - value of Y coordinate
+     * Sets the coordinates of the top-left point (position) of the ellipse.
      */
     setPosition(x: number, y: number): any;
     /**
-     * Get X radius of the Ellipse
+     * Returns the X radius of the ellipse.
      */
     getRadiusX(): number;
     /**
-     * Set X radius of the Ellipse
-     *
-     * @param r - value of X radius of the Ellipse
+     * Sets the X radius of the ellipse.
      */
     setRadiusX(r: number): any;
     /**
-     * Get Y radius of the Ellipse
+     * Returns the Y radius of the ellipse.
      */
     getRadiusY(): number;
     /**
-     * Set Y radius of the Ellipse
-     *
-     * @param r - value of Y radius of the Ellipse
+     * Sets the X radius of the ellipse.
      */
     setRadiusY(r: number): any;
     /**
-     * Get line width of the Ellipse. Defailt is 4
+     * Returns the line width of the ellipse.
      */
     getLineWidth(): number;
     /**
-     * Set line width of the Ellipse. Default is 4
-     *
-     * @param size - value of width
+     * Sets the line width of the ellipse.
      */
     setLineWidth(size: number): any;
 }

package/lib/markup/IMarkupImage.d.ts

@@ -1,50 +1,47 @@
 import { IMarkupObject } from "./IMarkupObject";
 /**
- * Image Markup object
+ * 2D markup Image object interface.
  */
 export interface IMarkupImage extends IMarkupObject {
     /**
-     * Get position of the Image
+     * Returns the coordinates of the top-left point (position) of the image.
      */
     getPosition(): {
         x: number;
         y: number;
     };
     /**
-     * Set position of the Image
-     *
-     * @param x - value of X coordinate
-     * @param y - value of Y coordinate
+     * Sets the coordinates of the top-left point (position) of the image.
      */
     setPosition(x: number, y: number): any;
     /**
-     * Get source of the Image. Provides base64 string
+     * Returns the image source as a base64-encoded
+     * {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL}.
      */
     getSrc(): string;
     /**
-     * Set source of the Image
+     * Sets the image source. External image URL is not supported, only base64-encoded
+     * {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URLs}.
      *
-     * @param src - string in base64 format
+     * @param src - Image source as base64-encoded string.
      */
     setSrc(src: string): any;
     /**
-     * Get width of the Image
+     * Returns the width of the image. The original image is scaled to this width.
      */
     getWidth(): number;
     /**
-     * Set width of the Image
-     *
-     * @param w - value of width. Height will be automatically updated according to ratio of the Image
+     * Sets the width of the image. The image height will be automatically updated to match its
+     * aspect ratio.
      */
     setWidth(w: number): any;
     /**
-     * Get height of the Image
+     * Returns the height of the image. The original image is scaled to this height.
      */
     getHeight(): number;
     /**
-     * Set height of the Image
-     *
-     * @param h - value of height. Width will be automatically updated according to ratio of the Image
+     * Sets the height of the image. The image width will be automatically updated to match its
+     * aspect ratio.
      */
     setHeight(h: number): any;
 }

package/lib/markup/IMarkupLine.d.ts

@@ -5,40 +5,73 @@ import { IMarkupColorable } from "./IMarkupColorable";
  */
 export type MarkupLineType = "solid" | "dot" | "dash";
 /**
- * Line Markup object
+ * 2D markup Line object interface.
  */
 export interface IMarkupLine extends IMarkupObject, IMarkupColorable {
     /**
-     * Get points of the Line
+     * Returns the coordinates of the line points as a flat array [x1, y1, x2, y2, ...].
      */
     getPoints(): number[];
     /**
-     * Get Line width. Default value is 4
+     * Returns the line width.
      */
     getLineWidth(): number;
     /**
-     * Set Line width. Default value is 4
-     *
-     * @param size - value of width
+     * Sets the line width.
      */
     setLineWidth(size: number): any;
     /**
-     * Get Type of the Line. Available values: `solid`, `dot`, `dash`. Default is `solid`
+     * Returns the line type. Can be `solid`, `dot` or `dash`.
      */
     getLineType(): string;
     /**
-     * Set Type of the Line. Available values: `solid`, `dot`, `dash`. Default is `solid`
+     * Sets the line type.
      *
-     * @param type
+     * @param type - Line type. Can be `solid`, `dot` or `dash`.
      */
     setLineType(type: string): any;
     /**
-     * Add points to the Line
+     * Adds the specified points to the end of the line.
      *
-     * @param {{ x: number; y: number }} points array of points
+     * @param points - Array of 2D points.
      */
     addPoints(points: [{
         x: number;
         y: number;
     }]): any;
 }
+/**
+ * Defines the parameters for creating a {@link IMarkupLine | markup line}.
+ */
+export interface IMarkupLineParams {
+    /**
+     * Array of line points.
+     */
+    points?: {
+        x: number;
+        y: number;
+    }[];
+    /**
+     * Line type. Can be `solid`, `dot` or `dash`.
+     *
+     * @default "solid"
+     */
+    type?: MarkupLineType;
+    /**
+     * Line width.
+     *
+     * @default 4
+     */
+    width?: number;
+    /**
+     * Line color as a string in hexadecimal color syntax `#RGB` color using its primary color
+     * components (red, green, blue) written as hexadecimal numbers.
+     *
+     * @default "#ff0000"
+     */
+    color?: string;
+    /**
+     * Internal markup object identifier.
+     */
+    id?: string;
+}

package/lib/markup/IMarkupObject.d.ts

@@ -1,47 +1,57 @@
 /**
- * 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): any;
+    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/lib/markup/IMarkupRectangle.d.ts

@@ -1,51 +1,42 @@
 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): any;
     /**
-     * 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): any;
     /**
-     * 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): any;
     /**
-     * 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): any;
 }

package/lib/markup/IMarkupText.d.ts

@@ -1,41 +1,34 @@
 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): any;
     /**
-     * Get font size. Default value is 34
+     * Returns the font size of the text.
      */
     getFontSize(): any;
     /**
-     * Set font size. Default value is 34
-     *
-     * @param size
+     * Sets the font size of the text.
      */
     setFontSize(size: number): any;
 }

package/lib/markup/IWorldTransform.d.ts

@@ -1,5 +1,5 @@
 /**
- * Viewer coordiate system transformer.
+ * Viewer coordiate system transformer interface.
  */
 export interface IWorldTransform {
     /**

package/lib/markup/Konva/KonvaLine.d.ts

@@ -1,16 +1,7 @@
-import { IMarkupLine, MarkupLineType } from "../IMarkupLine";
+import { IMarkupLine, IMarkupLineParams } from "../IMarkupLine";
 export declare class KonvaLine implements IMarkupLine {
     private _ref;
-    constructor(params: {
-        points?: {
-            x: number;
-            y: number;
-        }[];
-        type?: MarkupLineType;
-        width?: number;
-        color?: string;
-        id?: string;
-    }, ref?: any);
+    constructor(params: IMarkupLineParams, ref?: any);
     ref(): import("konva/lib/shapes/Line").Line<import("konva/lib/shapes/Line").LineConfig>;
     id(): string;
     enableMouseEditing(value: boolean): void;