plotboilerplate 1.12.9 → 1.15.0

package/src/ts/Vertex.ts

@@ -22,7 +22,10 @@
  * @modified 2020-05-26 Added functions addX(number) and addY(number).
  * @modified 2020-10-30 Changed the warnings in `sub(...)` and `add(...)` into real errors.
  * @modified 2021-03-01 Changed the second param `center` in the `rotate` function from Vertex to XYCoords.
- * @version  2.4.2
+ * @modified 2021-12-01 Changed the type of param of `scale` to XYCoords.
+ * @modified 2021-12-01 Added function `scaleXY` for non uniform scaling.
+ * @modified 2021-12-17 Added the functions `lerp` and `lerpAbs` for linear interpolations.
+ * @version  2.6.0
  *
  * @file Vertex
  * @public
@@ -406,19 +409,75 @@ export class Vertex implements XYCoords, SVGSerializable {
 
   /**
    * This is a vector-like behavior and 'scales' this vertex
-   * towards/from a given center.
+   * towards/from a given center by one uniform scale factor.
    *
    * @method scale
    * @param {number} factor - The factor to 'scale' this vertex; 1.0 means no change.
-   * @param {Vertex=} center - The origin of scaling; default is (0,0).
+   * @param {XYCoords=} center - The origin of scaling; default is (0,0).
    * @return {Vertex} this
    * @instance
    * @memberof Vertex
    **/
-  scale(factor: number, center?: Vertex): Vertex {
-    if (!center || typeof center === "undefined") center = new Vertex(0, 0);
-    this.x = center.x + (this.x - center.x) * factor;
-    this.y = center.y + (this.y - center.y) * factor;
+  scale(factor: number, center?: XYCoords): Vertex {
+    return this.scaleXY({ x: factor, y: factor }, center);
+  }
+
+  /**
+   * Perform a linear interpolation towards the given target vertex.
+   * The amount value `t` is relative, `t=0.0` means no change, `t=1.0`
+   * means this point will be moved to the exact target position.
+   *
+   * `t=0.5` will move this point to the middle of the connecting
+   * linear segment.
+   *
+   * @param {XYCoords} target - The target position to lerp this vertex to.
+   * @param {number} t - The relative amount, usually in [0..1], but other values will work, too.
+   * @returns
+   */
+  lerp(target: XYCoords, t: number): Vertex {
+    var diff = this.difference(target);
+    // return new Vertex(this.x + diff.x * t, this.y + diff.y * t);
+    this.x += diff.x * t;
+    this.y += diff.y * t;
+    return this;
+  }
+
+  /**
+   * Perform a linear interpolation towards the given target vertex (absolute variant).
+   * The amount value `t` is absolute, which means the lerp amount is a direct distance
+   * value. This point will have move the amount of the passed distance `u`.
+   *
+   * @param {XYCoords} target - The target position to lerp this vertex to.
+   * @param {number} t - The absolute move amount to use to lerping.
+   * @returns
+   */
+  lerpAbs(target: XYCoords, u: number): Vertex {
+    var dist = this.distance(target);
+    var diff = this.difference(target);
+    var step = { x: diff.x / dist, y: diff.y / dist };
+    // return new Vertex(this.x + step.x * u, this.y + step.y * u);
+    this.x += step.x * u;
+    this.y += step.y * u;
+    return this;
+  }
+
+  /**
+   * This is a vector-like behavior and 'scales' this vertex
+   * towards/from a given center by two independent x- and y- scale factors.
+   *
+   * @method scale
+   * @param {number} factor - The factor to 'scale' this vertex; 1.0 means no change.
+   * @param {XYCoords=} center - The origin of scaling; default is (0,0).
+   * @return {Vertex} this
+   * @instance
+   * @memberof Vertex
+   **/
+  scaleXY(factors: XYCoords, center?: XYCoords): Vertex {
+    if (!center || typeof center === "undefined") {
+      center = { x: 0, y: 0 };
+    }
+    this.x = center.x + (this.x - center.x) * factors.x;
+    this.y = center.y + (this.y - center.y) * factors.y;
     return this;
   }
 

package/src/ts/draw.ts

@@ -37,13 +37,15 @@
  * @modified 2021-02-22 Added the `path` drawing function to draw SVG path data.
  * @modified 2021-03-31 Added the `endDrawCycle` function from `DrawLib`.
  * @modified 2021-05-31 Added the `setConfiguration` function from `DrawLib`.
- * @version  1.9.0
+ * @modified 2021-11-12 Adding more parameters tot the `text()` function: fontSize, textAlign, fontFamily, lineHeight.
+ * @modified 2021-11-19 Added the `color` param to the `label(...)` function.
+ * @version  1.10.0
  **/
 
 import { CubicBezierCurve } from "./CubicBezierCurve";
 import { Polygon } from "./Polygon";
 import { Vertex } from "./Vertex";
-import { DrawLib, SVGPathParams, XYCoords, UID, DrawLibConfiguration } from "./interfaces";
+import { DrawLib, SVGPathParams, XYCoords, UID, DrawLibConfiguration, FontStyle, FontWeight } from "./interfaces";
 import { drawutilssvg } from "./drawutilssvg";
 
 // Todo: rename this class to Drawutils?
@@ -845,19 +847,77 @@ export class drawutils implements DrawLib<void> {
     this.ctx.restore();
   }
 
-  text(text: string, x: number, y: number, options?: { color?: string }) {
+  /**
+   * Draw a text at the given relative position.
+   *
+   * @method text
+   * @param {string} text - The text to draw.
+   * @param {number} x - The x-position to draw the text at.
+   * @param {number} y - The y-position to draw the text at.
+   * @param {string=} options.color - The Color to use.
+   * @param {string=} options.fontFamily - The font family to use.
+   * @param {number=} options.fontSize - The font size (in pixels) to use.
+   * @param {FontStyle=} options.fontStyle - The font style to use.
+   * @param {FontWeight=} options.fontWeight - The font weight to use.
+   * @param {number=} options.lineHeight - The line height (in pixels) to use.
+   * @param {number=} options.rotation - The (optional) rotation in radians.
+   * @param {string=} options.textAlign - The text align to use. According to the specifiactions (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign) valid values are `"left" || "right" || "center" || "start" || "end"`.
+   * @return {void}
+   * @instance
+   * @memberof drawutils
+   */
+  text(
+    text: string,
+    x: number,
+    y: number,
+    options?: {
+      color?: string;
+      fontFamily?: string;
+      fontSize?: number;
+      fontStyle?: FontStyle;
+      fontWeight?: FontWeight;
+      lineHeight?: number;
+      textAlign?: CanvasRenderingContext2D["textAlign"];
+      rotation?: number;
+    }
+  ) {
+    // See https://stackoverflow.com/a/23523697
+
     options = options || {};
     this.ctx.save();
-    x = this.offset.x + x * this.scale.x;
-    y = this.offset.y + y * this.scale.y;
+    let relX = this.offset.x + x * this.scale.x;
+    let relY = this.offset.y + y * this.scale.y;
     const color: string = options.color || "black";
+    if (options.fontSize || options.fontFamily) {
+      // Scaling of text only works in uniform mode
+      this.ctx.font =
+        (options.fontWeight ? options.fontWeight + " " : "") +
+        (options.fontStyle ? options.fontStyle + " " : "") +
+        (options.fontSize ? options.fontSize * this.scale.x + "px " : " ") +
+        (options.fontFamily
+          ? options.fontFamily.indexOf(" ") === -1
+            ? options.fontFamily
+            : `"${options.fontFamily}"`
+          : "Arial");
+    }
+    if (options.textAlign) {
+      this.ctx.textAlign = options.textAlign;
+    }
+
+    const rotation = options.rotation ?? 0.0;
+    const lineHeight = (options.lineHeight ?? options.fontSize ?? 0) * this.scale.x;
+    this.ctx.translate(relX, relY);
+    this.ctx.rotate(rotation);
+
     if (this.fillShapes) {
       this.ctx.fillStyle = color;
-      this.ctx.fillText(text, x, y);
+      this.ctx.fillText(text, 0, lineHeight / 2);
     } else {
       this.ctx.strokeStyle = color;
-      this.ctx.strokeText(text, x, y);
+      this.ctx.strokeText(text, 0, lineHeight / 2);
     }
+    // this.ctx.translate(-relX, -relY);
+    // this.ctx.rotate(-rotation); // is this necessary before 'restore()'?
     this.ctx.restore();
   }
 
@@ -878,8 +938,11 @@ export class drawutils implements DrawLib<void> {
    */
   label(text: string, x: number, y: number, rotation?: number, color?: string) {
     this.ctx.save();
+
+    this.ctx.font = "lighter 9pt Arial";
+
     this.ctx.translate(x, y);
-    if (typeof rotation != "undefined") this.ctx.rotate(rotation);
+    if (typeof rotation !== "undefined") this.ctx.rotate(rotation);
     this.ctx.fillStyle = color || "black";
     if (this.fillShapes) {
       this.ctx.fillText(text, 0, 0);

package/src/ts/drawgl.ts

@@ -12,7 +12,16 @@
 import { CubicBezierCurve } from "./CubicBezierCurve";
 import { Polygon } from "./Polygon";
 import { Vertex } from "./Vertex";
-import { DrawLib, XYCoords, SVGPathParams, SVGSerializable, UID, DrawLibConfiguration } from "./interfaces";
+import {
+  DrawLib,
+  XYCoords,
+  SVGPathParams,
+  SVGSerializable,
+  UID,
+  DrawLibConfiguration,
+  FontStyle,
+  FontWeight
+} from "./interfaces";
 
 /**
  * @classdesc A wrapper class for basic drawing operations. This is the WebGL
@@ -471,9 +480,9 @@ export class drawutilsgl implements DrawLib<void> {
    * @param {string} color - The color to use.
    * @param {number=1} lineWidth - (optional) The line with to use (default is 1).
    **/
-   rect(position: XYCoords, width: number, height: number, color: string, lineWidth?: number): void {
+  rect(position: XYCoords, width: number, height: number, color: string, lineWidth?: number): void {
     // NOT YET IMPLEMENTED
-   }
+  }
 
   /**
    * Draw a grid of horizontal and vertical lines with the given (CSS-) color.
@@ -655,7 +664,40 @@ export class drawutilsgl implements DrawLib<void> {
     // NOT YET IMPLEMENTED
   }
 
-  text(text: string, x: number, y: number, options?: { color?: string }) {
+  /**
+   * Draw a text at the given relative position.
+   *
+   * @method text
+   * @param {string} text - The text to draw.
+   * @param {number} x - The x-position to draw the text at.
+   * @param {number} y - The y-position to draw the text at.
+   * @param {string=} options.color - The Color to use.
+   * @param {string=} options.fontFamily - The font family to use.
+   * @param {number=} options.fontSize - The font size (in pixels) to use.
+   * @param {FontStyle=} options.fontStyle - The font style to use.
+   * @param {FontWeight=} options.fontWeight - The font weight to use.
+   * @param {number=} options.lineHeight - The line height (in pixels) to use.
+   * @param {number=} options.rotation - The (optional) rotation in radians.
+   * @param {string=} options.textAlign - The text align to use. According to the specifiactions (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign) valid values are `"left" || "right" || "center" || "start" || "end"`.
+   * @return {void}
+   * @instance
+   * @memberof drawutils
+   */
+  text(
+    text: string,
+    x: number,
+    y: number,
+    options?: {
+      color?: string;
+      fontFamily?: string;
+      fontSize?: number;
+      fontStyle?: FontStyle;
+      fontWeight?: FontWeight;
+      lineHeight?: number;
+      textAlign?: CanvasRenderingContext2D["textAlign"];
+      rotation?: number;
+    }
+  ) {
     // NOT YET IMPLEMENTED
   }
 
@@ -667,14 +709,12 @@ export class drawutilsgl implements DrawLib<void> {
    * @param {number} x - The x-position to draw the text at.
    * @param {number} y - The y-position to draw the text at.
    * @param {number=} rotation - The (aoptional) rotation in radians.
+   * @param {string="black"} color - The color to use (default is black).
    * @return {void}
    * @instance
    * @memberof drawutils
    */
-  // +---------------------------------------------------------------------------------
-  // | Draw a non-scaling text label at the given position.
-  // +-------------------------------
-  label(text: string, x: number, y: number, rotation: number) {
+  label(text: string, x: number, y: number, rotation?: number, color?: string) {
     // NOT YET IMPLEMENTED
   }
 

package/src/ts/drawutilssvg.ts

@@ -26,14 +26,30 @@
  * @modified 2021-03-31 Added 'ellipseSector' the the class names.
  * @modified 2021-03-31 Implemented buffering using a buffer <g> node and the beginDrawCycle and endDrawCycle methods.
  * @modified 2021-05-31 Added the `setConfiguration` function from `DrawLib`.
- * @version  1.3.0
+ * @modified 2021-11-15 Adding more parameters tot the `text()` function: fontSize, textAlign, fontFamily, lineHeight.
+ * @modified 2021-11-19 Fixing the `label(text,x,y)` position.
+ * @modified 2021-11-19 Added the `color` param to the `label(...)` function.
+ * @version  1.4.0
  **/
 
 import { CircleSector } from "./CircleSector";
 import { CubicBezierCurve } from "./CubicBezierCurve";
 import { Polygon } from "./Polygon";
 import { Vertex } from "./Vertex";
-import { DrawConfig, DrawLib, DrawSettings, XYCoords, XYDimension, SVGPathParams, UID, DrawLibConfiguration } from "./interfaces";
+import {
+  DrawConfig,
+  DrawLib,
+  DrawSettings,
+  XYCoords,
+  XYDimension,
+  SVGPathParams,
+  UID,
+  DrawLibConfiguration,
+  FontStyle,
+  FontWeight
+} from "./interfaces";
+
+const RAD_TO_DEG = 180 / Math.PI;
 
 /**
  * @classdesc A helper class for basic SVG drawing operations. This class should
@@ -203,7 +219,8 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
       "vertex": "Vertex",
       "line": "Line",
       "vector": "Vector",
-      "image": "Image"
+      "image": "Image",
+      "text": "Text"
     };
     // Question: why isn't this working if the svgNode is created dynamically? (nodeStyle.sheet is null)
     const rules = [];
@@ -1065,29 +1082,82 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     }
     if (!isOpen) d.push("Z");
     node.setAttribute("d", d.join(" "));
-    return this._bindFillDraw(node, "polyline", color, lineWidth || 1);
+    return this._bindFillDraw(node, "polygon", color, lineWidth || 1);
   }
 
   /**
-   * Draw a text label at the given relative position.
+   * Draw a text at the given relative position.
    *
-   * @method label
+   * @method text
    * @param {string} text - The text to draw.
    * @param {number} x - The x-position to draw the text at.
    * @param {number} y - The y-position to draw the text at.
-   * @param {number=} rotation - The (optional) rotation in radians.
+   * @param {string=} options.color - The Color to use.
+   * @param {string=} options.fontFamily - The font family to use.
+   * @param {number=} options.fontSize - The font size (in pixels) to use.
+   * @param {FontStyle=} options.fontStyle - The font style to use.
+   * @param {FontWeight=} options.fontWeight - The font weight to use.
+   * @param {number=} options.lineHeight - The line height (in pixels) to use.
+   * @param {number=} options.rotation - The (optional) rotation in radians.
+   * @param {string=} options.textAlign - The text align to use. According to the specifiactions (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign) valid values are `"left" || "right" || "center" || "start" || "end"`.
    * @return {void}
    * @instance
-   * @memberof drawutilssvg
+   * @memberof drawutils
    */
-  text(text: string, x: number, y: number, options?: { color?: string }): SVGElement {
+  text(
+    text: string,
+    x: number,
+    y: number,
+    options?: {
+      color?: string;
+      fontFamily?: string;
+      fontSize?: number;
+      fontStyle?: FontStyle;
+      fontWeight?: FontWeight;
+      lineHeight?: number;
+      textAlign?: CanvasRenderingContext2D["textAlign"];
+      rotation?: number;
+    }
+  ): SVGElement {
     options = options || {};
     const color: string = options.color || "black";
-
-    const node: SVGElement = this.makeNode("text");
-    node.setAttribute("x", `${this._x(x)}`);
-    node.setAttribute("y", `${this._y(y)}`);
-    node.innerHTML = text;
+    const lineHeight = (options.lineHeight ?? options.fontSize ?? 0) * this.scale.x;
+    // https://www.w3.org/TR/SVG/text.html#TextAnchorProperty
+    //    start | middle | end
+    const textAlign: "start" | "middle" | "end" =
+      options.textAlign === "left" || options.textAlign === "start"
+        ? "start"
+        : options.textAlign === "center"
+        ? "middle"
+        : options.textAlign === "right" || options.textAlign === "end"
+        ? "end"
+        : "start";
+    const transformOrigin = `${this._x(x)}px ${this._y(y)}px`;
+    const translate = `translate(${this._x(x)} ${this._y(y) + lineHeight / 2})`;
+    // Safari has a transform-origin/rotation bug.
+    // It's essential to use rotate(r,x,y) here. "rotate(r)"" with transform-origin(x,y) won't do the job.
+    // And rotate and translate cannot be used is combination on a text object.
+    // So wrap the text inside a <g>, translate the <g>, and rotate the text inside.
+    const rotate = options.rotation ? `rotate(${options.rotation * RAD_TO_DEG} 0 0)` : ``;
+
+    const node: SVGElement = this.makeNode("g");
+    const curId = this.curId;
+    this.curId = curId + "_text";
+    const textNode: SVGElement = this.makeNode("text");
+    node.appendChild(textNode);
+    textNode.setAttribute("font-family", options.fontFamily); // May be undefined
+    textNode.setAttribute("font-size", options.fontSize ? `${options.fontSize * this.scale.x}` : null);
+    textNode.setAttribute("font-style", options.fontStyle ? `${options.fontStyle}` : null);
+    textNode.setAttribute("font-weight", options.fontWeight ? `${options.fontWeight}` : null);
+    textNode.setAttribute("text-anchor", textAlign);
+    textNode.setAttribute("transform-origin", "0 0");
+    textNode.setAttribute("transform", rotate);
+    node.setAttribute("transform-origin", transformOrigin);
+    node.setAttribute("transform", translate);
+
+    textNode.innerHTML = text;
+    // Restore old ID
+    this.curId = curId;
     return this._bindFillDraw(node, "text", color, 1);
   }
 
@@ -1099,16 +1169,23 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
    * @param {number} x - The x-position to draw the text at.
    * @param {number} y - The y-position to draw the text at.
    * @param {number=} rotation - The (optional) rotation in radians.
+   * @param {string="black"} color - The color to use (default is black).
    * @return {void}
    * @instance
    * @memberof drawutilssvg
    */
-  label(text: string, x: number, y: number, rotation: number): SVGElement {
+  label(text: string, x: number, y: number, rotation?: number, color?: string): SVGElement {
     const node: SVGElement = this.makeNode("text");
     // For some strange reason SVG rotation transforms use degrees instead of radians
-    node.setAttribute("transform", `translate(${this.offset.x},${this.offset.y}), rotate(${(rotation / Math.PI) * 180})`);
+    node.setAttribute("transform", `translate(${x},${y}), rotate(${((rotation || 0) / Math.PI) * 180})`);
+
+    node.setAttribute("font-family", "Arial");
+    node.setAttribute("font-size", "9pt");
+    node.setAttribute("font-style", "normal");
+    node.setAttribute("font-weight", "lighter");
+
     node.innerHTML = text;
-    return this._bindFillDraw(node, "label", "black", null);
+    return this._bindFillDraw(node, "label", color || "black", null);
   }
 
   /**

package/src/ts/index.ts

@@ -13,6 +13,7 @@ export * from "./KeyHandler";
 export * from "./Line";
 export * from "./MouseHandler";
 export * from "./PBImage";
+export * from "./PBText";
 export * from "./PlotBoilerplate";
 export * from "./Polygon";
 export * from "./SVGBuilder";

package/src/ts/interfaces/DrawLib.ts

@@ -12,6 +12,9 @@
  * @modified 2021-03-30 Added the `endDrawCycle` function to `DrawLib`.
  * @modified 2021-05-31 Added the `drawLib.setConfiguration` function.
  * @modified 2021-05-31 Splitted the large interfaces.ts file into this one and others.
+ * @modified 2021-11-12 Added `text()` params fontSize, fontFamily, rotation, textAlign.
+ * @modified 2021-11-16 Added `text()` params fontWeight and fontStyle.
+ * @modified 2021-11-19 Added the `color` param to the `label(...)` function.
  **/
 
 import { Polygon } from "../Polygon";
@@ -27,6 +30,21 @@ export interface DrawLibConfiguration {
   blendMode?:  'source-over' | 'source-in' | 'source-out' | 'source-atop' | 'destination-over' | 'destination-in' | 'destination-out' | 'destination-atop' | 'lighter' | 'copy' | 'xor' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity' | null;
 }
 
+export type FontWeight = "normal" | "bold" | "bolder" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+
+export type FontStyle = "normal" | "italic" | "oblique";
+
+export interface FontOptions {
+  color?: string;
+  fontFamily?: string;
+  fontSize?: number;
+  fontStyle?: FontStyle;
+  fontWeight?: FontWeight;
+  lineHeight?: number;
+  textAlign?: CanvasRenderingContext2D["textAlign"];
+  rotation?: number;
+}
+
 /**
  * An interface all drawing libraries must implement to be used with PlotBoilerplate.
  *
@@ -432,18 +450,25 @@ export interface DrawLib<R> {
   polyline: (vertices: Array<Vertex>, isOpen: boolean, color: string, lineWidth?: number) => R;
 
   /**
-   * Draw a text label at the given relative position.
+   * Draw a text at the given relative position.
    *
    * @method text
    * @param {string} text - The text to draw.
    * @param {number} x - The x-position to draw the text at.
    * @param {number} y - The y-position to draw the text at.
-   * @param {number=} rotation - The (optional) rotation in radians.
+   * @param {string=} options.color - The Color to use.
+   * @param {string=} options.fontFamily - The font family to use.
+   * @param {number=} options.fontSize - The font size (in pixels) to use.
+   * @param {FontStyle=} options.fontStyle - The font style to use.
+   * @param {FontWeight=} options.fontWeight - The font weight to use.
+   * @param {number=} options.lineHeight - The line height (in pixels) to use.
+   * @param {number=} options.rotation - The (optional) rotation in radians.
+   * @param {string=} options.textAlign - The text align to use. According to the specifiactions (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign) valid values are `"left" || "right" || "center" || "start" || "end"`.
    * @return {void}
    * @instance
    * @memberof drawutils
    */
-  text: (text: string, x: number, y: number, options?: { color?: string }) => R;
+  text: (text: string, x: number, y: number, options?: FontOptions) => R;
 
   /**
    * Draw a non-scaling text label at the given absolute position.
@@ -453,11 +478,12 @@ export interface DrawLib<R> {
    * @param {number} x - The x-position to draw the text at.
    * @param {number} y - The y-position to draw the text at.
    * @param {number=} rotation - The (aoptional) rotation in radians.
+   * @param {string="black"} color - The color to use (default is black).
    * @return {void}
    * @instance
    * @memberof drawutils
    */
-  label: (text: string, x: number, y: number, rotation: number) => R;
+  label: (text: string, x: number, y: number, rotation?: number, color?: string) => R;
 
   /**
    * Draw an SVG-like path given by the specified path data.

package/src/ts/interfaces/core.ts

@@ -13,6 +13,7 @@
  * @modified 2021-05-31 Added the `drawLib.setConfiguration` function.
  * @modified 2021-05-31 Splitted the large interfaces.ts file into this one and others.
  * @modified 2021-06-21 Added `IBounds.getCenter()`.
+ * @modified 2021-11-16 Added `text` options to the `DrawConfig`.
  **/
 
 import { Vertex } from "../Vertex";
@@ -28,6 +29,7 @@ import { BezierPath } from "../BezierPath";
 import { Line } from "../Line";
 import { PlotBoilerplate } from "../PlotBoilerplate";
 import { DrawLib } from "./DrawLib";
+import { PBText } from "../PBText";
 
 /**
  * @classdesc Coordinates (x,y) on the plane.
@@ -73,6 +75,7 @@ export type Drawable =
   | Circle
   | CircleSector
   | PBImage
+  | PBText
   | VEllipse
   | VEllipseSector
   | Polygon
@@ -189,6 +192,12 @@ export interface DrawConfig {
   line: DrawSettings;
   vector: DrawSettings;
   image: DrawSettings;
+  text: {
+    color: string;
+    lineWidth: number;
+    fill?: boolean;
+    anchor?: boolean;
+  };
 }
 
 /** This is a fix for the problem, that the constructor's "name" attribute is not