@inweb/markup 25.9.2 → 25.9.3

package/src/markup/IMarkupCloud.ts

@@ -36,7 +36,7 @@ export interface IMarkupCloud extends IMarkupObject, IMarkupColorable {
   /**
    * Sets the coordinates of the top-left point (position) of the cloud.
    */
-  setPosition(x: number, y: number);
+  setPosition(x: number, y: number): void;
 
   /**
    * Returns the width of the cloud.
@@ -46,7 +46,7 @@ export interface IMarkupCloud extends IMarkupObject, IMarkupColorable {
   /**
    * Sets the width of the cloud.
    */
-  setWidth(w: number);
+  setWidth(w: number): void;
 
   /**
    * Returns the height of the cloud.
@@ -56,7 +56,7 @@ export interface IMarkupCloud extends IMarkupObject, IMarkupColorable {
   /**
    * Sets the height of the cloud.
    */
-  setHeight(h: number);
+  setHeight(h: number): void;
 
   /**
    * Returns the line width of the cloud.
@@ -66,5 +66,49 @@ export interface IMarkupCloud extends IMarkupObject, IMarkupColorable {
   /**
    * Sets the line width of the cloud.
    */
-  setLineWidth(size: number);
+  setLineWidth(size: number): void;
+}
+
+/**
+ * Defines the parameters for creating a {@link IMarkupCloudParams | markup cloud}.
+ */
+export interface IMarkupCloudParams {
+  /**
+   * Coordinates of the top-left point (position) of the cloud.
+   */
+  position?: { x: number; y: number };
+
+  /**
+   * Width of the cloud.
+   *
+   * @default 200
+   */
+  width?: number;
+
+  /**
+   * Height of the cloud.
+   *
+   * @default 200
+   */
+  height?: number;
+
+  /**
+   * Line width.
+   *
+   * @default 4
+   */
+  lineWidth?: 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/src/markup/IMarkupEllipse.ts

@@ -36,7 +36,7 @@ export interface IMarkupEllipse extends IMarkupObject, IMarkupColorable {
   /**
    * Sets the coordinates of the top-left point (position) of the ellipse.
    */
-  setPosition(x: number, y: number);
+  setPosition(x: number, y: number): void;
 
   /**
    * Returns the X radius of the ellipse.
@@ -46,7 +46,7 @@ export interface IMarkupEllipse extends IMarkupObject, IMarkupColorable {
   /**
    * Sets the X radius of the ellipse.
    */
-  setRadiusX(r: number);
+  setRadiusX(r: number): void;
 
   /**
    * Returns the Y radius of the ellipse.
@@ -56,7 +56,7 @@ export interface IMarkupEllipse extends IMarkupObject, IMarkupColorable {
   /**
    * Sets the X radius of the ellipse.
    */
-  setRadiusY(r: number);
+  setRadiusY(r: number): void;
 
   /**
    * Returns the line width of the ellipse.
@@ -66,5 +66,42 @@ export interface IMarkupEllipse extends IMarkupObject, IMarkupColorable {
   /**
    * Sets the line width of the ellipse.
    */
-  setLineWidth(size: number);
+  setLineWidth(size: number): void;
+}
+
+/**
+ * Defines the parameters for creating a {@link IMarkupEllipse | markup ellipse}.
+ */
+export interface IMarkupEllipseParams {
+  /**
+   * Coordinates of the center point (position) of the ellipse.
+   */
+  position?: { x: number; y: number };
+
+  /**
+   * Radius of the ellipse along the X and Y axes.
+   *
+   * @default 25
+   */
+  radius?: { x: number; y: number };
+
+  /**
+   * Line width.
+   *
+   * @default 4
+   */
+  lineWidth?: 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/src/markup/IMarkupImage.ts

@@ -35,7 +35,7 @@ export interface IMarkupImage extends IMarkupObject {
   /**
    * Sets the coordinates of the top-left point (position) of the image.
    */
-  setPosition(x: number, y: number);
+  setPosition(x: number, y: number): void;
 
   /**
    * Returns the image source as a base64-encoded
@@ -49,7 +49,7 @@ export interface IMarkupImage extends IMarkupObject {
    *
    * @param src - Image source as base64-encoded string.
    */
-  setSrc(src: string);
+  setSrc(src: string): void;
 
   /**
    * Returns the width of the image. The original image is scaled to this width.
@@ -60,7 +60,7 @@ export interface IMarkupImage extends IMarkupObject {
    * Sets the width of the image. The image height will be automatically updated to match its
    * aspect ratio.
    */
-  setWidth(w: number);
+  setWidth(w: number): void;
 
   /**
    * Returns the height of the image. The original image is scaled to this height.
@@ -71,5 +71,54 @@ export interface IMarkupImage extends IMarkupObject {
    * Sets the height of the image. The image width will be automatically updated to match its
    * aspect ratio.
    */
-  setHeight(h: number);
+  setHeight(h: number): void;
+}
+
+/**
+ * Defines the parameters for creating a {@link IMarkupImage | markup image}.
+ */
+export interface IMarkupImageParams {
+  /**
+   * Coordinates of the top-left point (position) of the image.
+   */
+  position?: { x: number; y: number };
+
+  /**
+   * Image source as a base64-encoded
+   * {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL}.
+   */
+  src?: string;
+
+  /**
+   * Width of the image. The original image is scaled to this width. Specify 0 to set width of
+   * the source image.
+   *
+   * @default 0
+   */
+  width?: number;
+
+  /**
+   * Height of the image. The original image is scaled to this height. Specify 0 to set height
+   * of the source image.
+   *
+   * @default 0
+   */
+  height?: number;
+
+  /**
+   * Maximum width of the image. Specify a max width if you want to set the width to the
+   * original image but not more than the max.
+   */
+  maxWidth?: number;
+
+  /**
+   * Maximum height of the image. Specify a max height if you want to set the height to the
+   * original image but not more than the max.
+   */
+  maxHeight?: number;
+
+  /**
+   * Internal markup object identifier.
+   */
+  id?: string;
 }

package/src/markup/IMarkupRectangle.ts

@@ -36,7 +36,7 @@ export interface IMarkupRectangle extends IMarkupObject, IMarkupColorable {
   /**
    * Sets the coordinates of the top-left point (position) of the rectangle.
    */
-  setPosition(x: number, y: number);
+  setPosition(x: number, y: number): void;
 
   /**
    * Returns the width of the rectangle.
@@ -46,7 +46,7 @@ export interface IMarkupRectangle extends IMarkupObject, IMarkupColorable {
   /**
    * Sets the width of the rectangle.
    */
-  setWidth(w: number);
+  setWidth(w: number): void;
 
   /**
    * Returns the height of the rectangle.
@@ -56,7 +56,7 @@ export interface IMarkupRectangle extends IMarkupObject, IMarkupColorable {
   /**
    * Sets the height of the rectangle.
    */
-  setHeight(h: number);
+  setHeight(h: number): void;
 
   /**
    * Returns the line width of the rectangle.
@@ -66,5 +66,49 @@ export interface IMarkupRectangle extends IMarkupObject, IMarkupColorable {
   /**
    * Sets the line width of the rectangle.
    */
-  setLineWidth(size: number);
+  setLineWidth(size: number): void;
+}
+
+/**
+ * Defines the parameters for creating a {@link IMarkupRectangle | markup rectangle}.
+ */
+export interface IMarkupRectangleParams {
+  /**
+   * Coordinates of the top-left point (position) of the rectangle.
+   */
+  position?: { x: number; y: number };
+
+  /**
+   * Width of the rectangle.
+   *
+   * @default 200
+   */
+  width?: number;
+
+  /**
+   * Height of the rectangle.
+   *
+   * @default 200
+   */
+  height?: number;
+
+  /**
+   * Line width.
+   *
+   * @default 4
+   */
+  lineWidth?: 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/src/markup/IMarkupText.ts

@@ -46,15 +46,57 @@ export interface IMarkupText extends IMarkupObject, IMarkupColorable {
   /**
    * Sets the coordinates of the top-left point (position) of the text.
    */
-  setPosition(x: number, y: number);
+  setPosition(x: number, y: number): void;
 
   /**
    * Returns the font size of the text.
    */
-  getFontSize();
+  getFontSize(): number;
 
   /**
    * Sets the font size of the text.
    */
-  setFontSize(size: number);
+  setFontSize(size: number): void;
+}
+
+/**
+ * Defines the parameters for creating a {@link IMarkupText | markup text}.
+ */
+export interface IMarkupTextParams {
+  /**
+   * Coordinates of the top-left point (position) of the text.
+   */
+  position?: { x: number; y: number };
+
+  /**
+   * Text string.
+   */
+  text?: string;
+
+  /**
+   * Rotation angle of the text, in degress.
+   *
+   * @default 0
+   */
+  rotation?: number;
+
+  /**
+   * Font size of the text.
+   *
+   * @default 34
+   */
+  fontSize?: number;
+
+  /**
+   * Text 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/src/markup/Konva/KonvaArrow.ts

@@ -22,20 +22,12 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import Konva from "konva";
-import { IMarkupArrow } from "../IMarkupArrow";
+import { IMarkupArrow, IMarkupArrowParams } from "../IMarkupArrow";
 
 export class KonvaArrow implements IMarkupArrow {
   private _ref: Konva.Arrow;
 
-  constructor(
-    params: {
-      start?: { x: number; y: number };
-      end?: { x: number; y: number };
-      color?: string;
-      id?: string;
-    },
-    ref = null
-  ) {
+  constructor(params: IMarkupArrowParams, ref = null) {
     if (ref) {
       this._ref = ref;
       return;
@@ -86,7 +78,7 @@ export class KonvaArrow implements IMarkupArrow {
     return this._ref.stroke() as string;
   }
 
-  setColor(hex: string) {
+  setColor(hex: string): void {
     this._ref.stroke(hex);
     this._ref.fill(hex);
   }
@@ -120,7 +112,7 @@ export class KonvaArrow implements IMarkupArrow {
     ];
   }
 
-  setPoints(points: { x: number; y: number }[]) {
+  setPoints(points: { x: number; y: number }[]): void {
     if (points.length === 2) {
       this._ref.points([points[0].x, points[0].y, points[1].x, points[1].y]);
     }
@@ -131,7 +123,7 @@ export class KonvaArrow implements IMarkupArrow {
     return { x: points[0], y: points[1] };
   }
 
-  setStartPoint(x: number, y: number) {
+  setStartPoint(x: number, y: number): void {
     const points = this._ref.points();
     this._ref.points([x, y, points[2], points[3]]);
   }
@@ -141,7 +133,7 @@ export class KonvaArrow implements IMarkupArrow {
     return { x: points[2], y: points[3] };
   }
 
-  setEndPoint(x: number, y: number) {
+  setEndPoint(x: number, y: number): void {
     const points = this._ref.points();
     this._ref.points([points[0], points[1], x, y]);
   }

package/src/markup/Konva/KonvaCloud.ts

@@ -1,20 +1,10 @@
 import Konva from "konva";
-import { IMarkupCloud } from "../IMarkupCloud";
+import { IMarkupCloud, IMarkupCloudParams } from "../IMarkupCloud";
 
 export class KonvaCloud implements IMarkupCloud {
   private _ref: Konva.Shape;
 
-  constructor(
-    params: {
-      position?: { x: number; y: number };
-      width?: number;
-      height?: number;
-      lineWidth?: number;
-      color?: string;
-      id?: string;
-    },
-    ref = null
-  ) {
+  constructor(params: IMarkupCloudParams, ref = null) {
     if (ref) {
       this._ref = ref;
       return;
@@ -154,7 +144,7 @@ export class KonvaCloud implements IMarkupCloud {
     return this._ref.stroke() as string;
   }
 
-  setColor(hex: string) {
+  setColor(hex: string): void {
     this._ref.stroke(hex);
   }
 
@@ -183,7 +173,7 @@ export class KonvaCloud implements IMarkupCloud {
     return this._ref.position();
   }
 
-  setPosition(x: number, y: number) {
+  setPosition(x: number, y: number): void {
     this._ref.position({ x, y });
   }
 
@@ -191,7 +181,7 @@ export class KonvaCloud implements IMarkupCloud {
     return this._ref.width();
   }
 
-  setWidth(w: number) {
+  setWidth(w: number): void {
     this._ref.width(w);
   }
 
@@ -199,7 +189,7 @@ export class KonvaCloud implements IMarkupCloud {
     return this._ref.height();
   }
 
-  setHeight(h: number) {
+  setHeight(h: number): void {
     this._ref.height(h);
   }
 
@@ -207,7 +197,7 @@ export class KonvaCloud implements IMarkupCloud {
     return this._ref.strokeWidth();
   }
 
-  setLineWidth(size: number) {
+  setLineWidth(size: number): void {
     this._ref.strokeWidth(size);
   }
 }

package/src/markup/Konva/KonvaEllipse.ts

@@ -1,19 +1,10 @@
 import Konva from "konva";
-import { IMarkupEllipse } from "../IMarkupEllipse";
+import { IMarkupEllipse, IMarkupEllipseParams } from "../IMarkupEllipse";
 
 export class KonvaEllipse implements IMarkupEllipse {
   private _ref: Konva.Ellipse;
 
-  constructor(
-    params: {
-      position?: { x: number; y: number };
-      radius?: { x: number; y: number };
-      lineWidth?: number;
-      color?: string;
-      id?: string;
-    },
-    ref = null
-  ) {
+  constructor(params: IMarkupEllipseParams, ref = null) {
     if (ref) {
       this._ref = ref;
       return;
@@ -76,7 +67,7 @@ export class KonvaEllipse implements IMarkupEllipse {
     return this._ref.position();
   }
 
-  setPosition(x: number, y: number) {
+  setPosition(x: number, y: number): void {
     this._ref.setPosition({ x, y });
   }
 
@@ -84,7 +75,7 @@ export class KonvaEllipse implements IMarkupEllipse {
     return this._ref.radiusX();
   }
 
-  setRadiusX(r: number) {
+  setRadiusX(r: number): void {
     this._ref.radiusX(r);
   }
 
@@ -92,7 +83,7 @@ export class KonvaEllipse implements IMarkupEllipse {
     return this._ref.radiusY();
   }
 
-  setRadiusY(r: number) {
+  setRadiusY(r: number): void {
     this._ref.radiusY(r);
   }
 
@@ -100,7 +91,7 @@ export class KonvaEllipse implements IMarkupEllipse {
     return this._ref.strokeWidth();
   }
 
-  setLineWidth(size: number) {
+  setLineWidth(size: number): void {
     this._ref.strokeWidth(size);
   }
 
@@ -124,7 +115,7 @@ export class KonvaEllipse implements IMarkupEllipse {
     return this._ref.stroke() as string;
   }
 
-  setColor(hex: string) {
+  setColor(hex: string): void {
     this._ref.stroke(hex);
   }
 

package/src/markup/Konva/KonvaImage.ts

@@ -1,5 +1,5 @@
 import Konva from "konva";
-import { IMarkupImage } from "../IMarkupImage";
+import { IMarkupImage, IMarkupImageParams } from "../IMarkupImage";
 
 export class KonvaImage implements IMarkupImage {
   private _ref: Konva.Image;
@@ -10,18 +10,7 @@ export class KonvaImage implements IMarkupImage {
   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=";
 
-  constructor(
-    params: {
-      position?: { x: number; y: number };
-      src?: string;
-      width?: number;
-      height?: number;
-      maxWidth?: number;
-      maxHeight?: number;
-      id?: string;
-    },
-    ref = null
-  ) {
+  constructor(params: IMarkupImageParams, ref = null) {
     if (ref) {
       if (!ref.src || !ref.src.startsWith(this.BASE64_HEADER_START)) ref.src = this.BASE64_NOT_FOUND;
       if (ref.height() <= this.EPSILON) ref.height(32);
@@ -137,7 +126,7 @@ export class KonvaImage implements IMarkupImage {
     return this._ref.width();
   }
 
-  setWidth(w: number) {
+  setWidth(w: number): void {
     this._ref.width(w);
     this._ref.height(w * this._ratio);
   }
@@ -146,7 +135,7 @@ export class KonvaImage implements IMarkupImage {
     return this._ref.height();
   }
 
-  setHeight(h: number) {
+  setHeight(h: number): void {
     this._ref.height(h);
     this._ref.width(h / this._ratio);
   }
@@ -192,7 +181,7 @@ export class KonvaImage implements IMarkupImage {
     return this._ref.getPosition();
   }
 
-  setPosition(x: number, y: number) {
+  setPosition(x: number, y: number): void {
     this._ref.setPosition({ x, y });
   }
 }

package/src/markup/Konva/KonvaRectangle.ts

@@ -1,20 +1,10 @@
 import Konva from "konva";
-import { IMarkupRectangle } from "../IMarkupRectangle";
+import { IMarkupRectangle, IMarkupRectangleParams } from "../IMarkupRectangle";
 
 export class KonvaRectangle implements IMarkupRectangle {
   private _ref: Konva.Rect;
 
-  constructor(
-    params: {
-      position?: { x: number; y: number };
-      width?: number;
-      height?: number;
-      lineWidth?: number;
-      color?: string;
-      id?: string;
-    },
-    ref = null
-  ) {
+  constructor(params: IMarkupRectangleParams, ref = null) {
     if (ref) {
       this._ref = ref;
       return;
@@ -82,15 +72,15 @@ export class KonvaRectangle implements IMarkupRectangle {
     return this._ref.height();
   }
 
-  setWidth(w: number) {
+  setWidth(w: number): void {
     this._ref.width(w);
   }
 
-  setHeight(h: number) {
+  setHeight(h: number): void {
     this._ref.height(h);
   }
 
-  setPosition(x: number, y: number) {
+  setPosition(x: number, y: number): void {
     this._ref.setPosition({ x, y });
   }
 

package/src/markup/Konva/KonvaText.ts

@@ -1,21 +1,11 @@
 import Konva from "konva";
-import { IMarkupText } from "../IMarkupText";
+import { IMarkupText, IMarkupTextParams } from "../IMarkupText";
 
 export class KonvaText implements IMarkupText {
   private _ref: Konva.Text;
   private readonly TEXT_FONT_FAMILY = "Calibri";
 
-  constructor(
-    params: {
-      position?: { x: number; y: number };
-      text?: string;
-      rotation?: number;
-      fontSize?: number;
-      color?: string;
-      id?: string;
-    },
-    ref = null
-  ) {
+  constructor(params: IMarkupTextParams, ref = null) {
     if (ref) {
       this._ref = ref;
       return;
@@ -91,7 +81,7 @@ export class KonvaText implements IMarkupText {
     return this._ref.fill() as string;
   }
 
-  setColor(hex: string) {
+  setColor(hex: string): void {
     this._ref.fill(hex);
   }
 
@@ -128,15 +118,15 @@ export class KonvaText implements IMarkupText {
     return this._ref.getPosition();
   }
 
-  setPosition(x: number, y: number) {
+  setPosition(x: number, y: number): void {
     this._ref.setPosition({ x, y });
   }
 
-  getFontSize() {
+  getFontSize(): number {
     return this._ref.fontSize();
   }
 
-  setFontSize(size: number) {
+  setFontSize(size: number): void {
     this._ref.fontSize(size);
   }
 }