plotboilerplate 1.12.8 → 1.14.0

package/src/ts/BezierPath.ts

@@ -529,6 +529,38 @@ export class BezierPath implements SVGSerializable {
     return this;
   }
 
+  /**
+   * Scale the whole bezier path by the given uniform factor.
+   *
+   * @method scale
+   * @param {Vertex} anchor - The scale origin to scale from.
+   * @param {number} scaleFactor - The scalar to be multiplied with.
+   * @instance
+   * @memberof BezierPath
+   * @return {BezierPath} this for chaining.
+   **/
+  scale(anchor: Vertex, scaleFactor: number): BezierPath {
+    // var scaleFactors : XYCoords = { x : scaleFactor, y : scaleFactor };
+    // for (var i = 0; i < this.bezierCurves.length; i++) {
+    //   var curve = this.bezierCurves[i];
+    //   curve.getStartPoint().scale(scaleFactor, anchor);
+    //   curve.getStartControlPoint().scale(scaleFactor, anchor);
+    //   curve.getEndControlPoint().scale(scaleFactor, anchor);
+    //   // Do NOT scale the end point here!
+    //   // Don't forget that the curves are connected and on curve's end point
+    //   // the the successor's start point (same instance)!
+    // }
+
+    // // Finally move the last end point (was not scaled yet)
+    // if (this.bezierCurves.length > 0 && !this.adjustCircular) {
+    //   this.bezierCurves[this.bezierCurves.length - 1].getEndPoint().scale(scaleFactor, anchor);
+    // }
+
+    // this.updateArcLengths();
+    // return this;
+    return this.scaleXY({ x: scaleFactor, y: scaleFactor }, anchor);
+  }
+
   /**
    * Scale the whole bezier path by the given (x,y)-factors.
    *
@@ -539,12 +571,12 @@ export class BezierPath implements SVGSerializable {
    * @memberof BezierPath
    * @return {BezierPath} this for chaining.
    **/
-  scale(anchor: Vertex, scaling: number): BezierPath {
+  scaleXY(scaleFactors: XYCoords, anchor?: XYCoords): BezierPath {
     for (var i = 0; i < this.bezierCurves.length; i++) {
       var curve = this.bezierCurves[i];
-      curve.getStartPoint().scale(scaling, anchor);
-      curve.getStartControlPoint().scale(scaling, anchor);
-      curve.getEndControlPoint().scale(scaling, anchor);
+      curve.getStartPoint().scaleXY(scaleFactors, anchor);
+      curve.getStartControlPoint().scaleXY(scaleFactors, anchor);
+      curve.getEndControlPoint().scaleXY(scaleFactors, anchor);
       // Do NOT scale the end point here!
       // Don't forget that the curves are connected and on curve's end point
       // the the successor's start point (same instance)!
@@ -552,7 +584,7 @@ export class BezierPath implements SVGSerializable {
 
     // Finally move the last end point (was not scaled yet)
     if (this.bezierCurves.length > 0 && !this.adjustCircular) {
-      this.bezierCurves[this.bezierCurves.length - 1].getEndPoint().scale(scaling, anchor);
+      this.bezierCurves[this.bezierCurves.length - 1].getEndPoint().scaleXY(scaleFactors, anchor);
     }
 
     this.updateArcLengths();

package/src/ts/PBText.ts

@@ -0,0 +1,147 @@
+/**
+ * @author   Ikaros Kappler
+ * @date     2021-11-16
+ * @version  1.0.0
+ **/
+
+import { UIDGenerator } from "./UIDGenerator";
+import { Vertex } from "./Vertex";
+import { FontOptions, FontStyle, FontWeight, SVGSerializable, UID } from "./interfaces";
+
+/**
+ * @classdesc A simple text element: position, fontSize, fontFamily, color, textAlign, lineHeight and rotation.
+ *
+ * @requires FontOptions
+ * @requires FontSize
+ * @requires FontStyle
+ * @requires FontWeight
+ * @requires Vertex
+ * @requires SVGSerializale
+ * @requires UID
+ * @requires UIDGenerator
+ **/
+export class PBText implements SVGSerializable, FontOptions {
+  /**
+   * Required to generate proper CSS classes and other class related IDs.
+   **/
+  readonly className: string = "PBText";
+
+  /**
+   * The UID of this drawable object.
+   *
+   * @member {UID}
+   * @memberof PBText
+   * @instance
+   * @readonly
+   */
+  readonly uid: UID;
+
+  /**
+   * @member {string}
+   * @memberof PBText
+   * @instance
+   */
+  text: string;
+
+  /**
+   * @member {Vertex}
+   * @memberof PBText
+   * @instance
+   */
+  anchor: Vertex;
+
+  /**
+   * @member {number}
+   * @memberof PBText
+   * @instance
+   */
+  fontSize: number | undefined;
+
+  /**
+   * @member {number}
+   * @memberof PBText
+   * @instance
+   */
+  lineHeight: number | undefined;
+
+  /**
+   * @member {FontWeight}
+   * @memberof PBText
+   * @instance
+   */
+  fontWeight: FontWeight | undefined;
+
+  /**
+   * @member {FontStyle}
+   * @memberof PBText
+   * @instance
+   */
+  fontStyle: FontStyle | undefined;
+
+  /**
+   * @member {CanvasRenderingContext2D["textAlign"]}
+   * @memberof PBText
+   * @instance
+   */
+  textAlign: CanvasRenderingContext2D["textAlign"] | undefined;
+
+  /**
+   * @member {number}
+   * @memberof PBText
+   * @instance
+   */
+  rotation: number | undefined;
+
+  /**
+   * @member {number}
+   * @memberof PBText
+   * @instance
+   */
+  fontFamily: string | undefined;
+
+  /**
+   * @member {number}
+   * @memberof PBText
+   * @instance
+   */
+  color: string | undefined;
+
+  /**
+   * Create a new circle with given center point and radius.
+   *
+   * @constructor
+   * @name Circle
+   * @param {Vertex} center - The center point of the circle.
+   * @param {number} radius - The radius of the circle.
+   */
+  constructor(text: string, anchor?: Vertex, options?: FontOptions) {
+    this.uid = UIDGenerator.next();
+    this.text = text;
+    this.anchor = anchor ?? new Vertex();
+    this.color = options.color;
+    this.fontFamily = options.fontFamily;
+    this.fontSize = options.fontSize;
+    this.fontStyle = options.fontStyle;
+    this.fontWeight = options.fontWeight;
+    this.lineHeight = options.lineHeight;
+    this.textAlign = options.textAlign;
+    this.rotation = options.rotation;
+  }
+
+  /**
+   * Create an SVG representation of this circle.
+   *
+   * @deprecated DEPRECATION Please use the drawutilssvg library and an XMLSerializer instead.
+   * @method toSVGString
+   * @param {object=} options - An optional set of options, like 'className'.
+   * @return {string} A string representing the SVG code for this vertex.
+   * @instance
+   * @memberof Circle
+   */
+  toSVGString(options: { className?: string }) {
+    console.warn(
+      "[PBText.toSVGString()] This function is not implemented as it defines a deprecated method. Use the 'drawutilssvg.text()' method instead."
+    );
+    return "";
+  }
+} // END class

package/src/ts/PlotBoilerplate.ts

@@ -73,7 +73,8 @@
  * @modified 2021-03-03 Added the `VEllipseSector` drawable.
  * @modified 2021-03-29 Clearing `currentClassName` and `currentId` after drawing each drawable.
  * @modified 2021-04-25 Extending `remove` to accept arrays of drawables.
- * @version  1.14.0
+ * @modified 2021-11-16 Adding the `PBText` drawable.
+ * @version  1.15.0
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.
@@ -118,6 +119,8 @@ import {
   XYDimension,
   DatGuiProps
 } from "./interfaces";
+import { PBText } from "./PBText";
+import { AlloyFingerOptions } from "alloyfinger-typescript/src/cjs/alloy_finger";
 
 /**
  * @classdesc The main class of the PlotBoilerplate.
@@ -521,6 +524,12 @@ export class PlotBoilerplate {
       image: {
         color: "#a8a8a8",
         lineWidth: 1
+      },
+      text: {
+        color: "rgba(192,0,128,0.5)",
+        lineWidth: 1,
+        fill: true,
+        anchor: true
       }
     }; // END drawConfig
 
@@ -656,7 +665,7 @@ export class PlotBoilerplate {
     var blob = new Blob([svgCode], { type: "image/svg;charset=utf-8" });
     // See documentation for FileSaver.js for usage.
     //    https://github.com/eligrey/FileSaver.js
-    if (typeof globalThis["saveAs"] != "function")
+    if (typeof globalThis["saveAs"] !== "function")
       throw "Cannot save file; did you load the ./utils/savefile helper function and the eligrey/SaveFile library?";
     var _saveAs = globalThis["saveAs"];
     _saveAs(blob, "plotboilerplate.svg");
@@ -768,7 +777,6 @@ export class PlotBoilerplate {
   add(drawable: Drawable | Array<Drawable>, redraw?: boolean) {
     if (Array.isArray(drawable)) {
       const arr: Array<Drawable> = drawable as Array<Drawable>;
-      // for( var i in arr )
       for (var i = 0; i < arr.length; i++) {
         this.add(arr[i], false);
       }
@@ -806,8 +814,9 @@ export class PlotBoilerplate {
       this.drawables.push(drawable);
     } else if (drawable instanceof Polygon) {
       this.drawables.push(drawable);
-      // for( var i in drawable.vertices )
-      for (var i = 0; i < drawable.vertices.length; i++) this.vertices.push(drawable.vertices[i]);
+      for (var i = 0; i < drawable.vertices.length; i++) {
+        this.vertices.push(drawable.vertices[i]);
+      }
     } else if (drawable instanceof Triangle) {
       this.drawables.push(drawable);
       this.vertices.push(drawable.a);
@@ -817,7 +826,9 @@ export class PlotBoilerplate {
       this.drawables.push(drawable);
       const bezierPath: BezierPath = drawable as BezierPath;
       for (var i = 0; i < bezierPath.bezierCurves.length; i++) {
-        if (!drawable.adjustCircular && i == 0) this.vertices.push(bezierPath.bezierCurves[i].startPoint);
+        if (!drawable.adjustCircular && i == 0) {
+          this.vertices.push(bezierPath.bezierCurves[i].startPoint);
+        }
         this.vertices.push(bezierPath.bezierCurves[i].endPoint);
         this.vertices.push(bezierPath.bezierCurves[i].startControlPoint);
         this.vertices.push(bezierPath.bezierCurves[i].endControlPoint);
@@ -834,6 +845,10 @@ export class PlotBoilerplate {
         drawable.lowerRight.add(e.params.dragAmount);
       });
       drawable.lowerRight.attr.selectable = false;
+    } else if (drawable instanceof PBText) {
+      this.vertices.push(drawable.anchor);
+      this.drawables.push(drawable);
+      drawable.anchor.attr.selectable = false;
     } else {
       throw "Cannot add drawable of unrecognized type: " + typeof drawable + ".";
     }
@@ -923,6 +938,8 @@ export class PlotBoilerplate {
           } else if (drawable instanceof PBImage) {
             this.removeVertex(drawable.upperLeft, false);
             this.removeVertex(drawable.lowerRight, false);
+          } else if (drawable instanceof PBText) {
+            this.removeVertex(drawable.anchor, false);
           }
         } // END removeWithVertices
 
@@ -947,7 +964,9 @@ export class PlotBoilerplate {
     for (var i = 0; i < this.vertices.length; i++) {
       if (this.vertices[i] === vert) {
         this.vertices.splice(i, 1);
-        if (redraw) this.redraw();
+        if (redraw) {
+          this.redraw();
+        }
         return;
       }
     }
@@ -1320,6 +1339,15 @@ export class PlotBoilerplate {
         draw.circleHandle(d.lowerRight, 3, this.drawConfig.image.color);
         d.lowerRight.attr.renderTime = renderTime;
       }
+    } else if (d instanceof PBText) {
+      fill.setCurrentId(d.uid);
+      fill.text(d.text, d.anchor.x, d.anchor.y, d);
+      if (this.drawConfig.text.anchor) {
+        draw.setCurrentId(`${d.uid}_a0`);
+        draw.setCurrentClassName(`${d.className}-anchor`);
+        (this.drawConfig.text.fill ? fill : draw).point(d.anchor, this.drawConfig.text.color);
+      }
+      d.anchor.attr.renderTime = renderTime;
     } else {
       console.error("Cannot draw object. Unknown class.");
     }
@@ -1617,7 +1645,6 @@ export class PlotBoilerplate {
     // Apply the zoom (the tolerant area should not shrink or grow when zooming)
     tolerance /= _self.draw.scale.x;
     // Search in vertices
-    // for( var vindex in _self.vertices ) {
     for (var vindex = 0; vindex < _self.vertices.length; vindex++) {
       var vert: Vertex = _self.vertices[vindex];
       if ((vert.attr.draggable || vert.attr.selectable) && vert.distance(point) < tolerance) {
@@ -1638,10 +1665,7 @@ export class PlotBoilerplate {
    * @return {void}
    **/
   private handleClick(e: XMouseEvent) {
-    // x:number,y:number) {
     const _self: PlotBoilerplate = this;
-    // const x:number = e.params.pos.x;
-    //const y:number = e.params.pos.y;
     var p: IDraggable = this.locatePointNear(
       _self.transformMousePosition(e.params.pos.x, e.params.pos.y),
       PlotBoilerplate.DEFAULT_CLICK_TOLERANCE / Math.min(_self.config.cssScaleX, _self.config.cssScaleY)
@@ -1657,9 +1681,7 @@ export class PlotBoilerplate {
           if (vert.attr.selectable) vert.attr.isSelected = !vert.attr.isSelected;
         }
         _self.redraw();
-      } else if (
-        this.keyHandler.isDown("y") /* && p.type=='bpath' && (p.pid==BezierPath.START_POINT || p.pid==BezierPath.END_POINT) */
-      ) {
+      } else if (this.keyHandler.isDown("y")) {
         _self.vertices[p.vindex].attr.bezierAutoAdjust = !_self.vertices[p.vindex].attr.bezierAutoAdjust;
         _self.redraw();
       }
@@ -1961,7 +1983,8 @@ export class PlotBoilerplate {
             multiTouchStartScale = null;
             _self.draggedElements = [];
           };
-          const afProps = {
+          const afProps: AlloyFingerOptions = {
+            // touchStart: (evt: TouchEvent) => {
             touchStart: (evt: TouchEvent) => {
               if (evt.touches.length == 1) {
                 touchMovePos = new Vertex(relPos({ x: evt.touches[0].clientX, y: evt.touches[0].clientY }));
@@ -2065,10 +2088,13 @@ export class PlotBoilerplate {
               _self.setZoom(multiTouchStartScale.x * evt.zoom, multiTouchStartScale.y * evt.zoom, center);
               _self.redraw();
             }
-          }; // END afProps
-          if (window["createAlloyFinger"])
+          } as unknown as AlloyFingerOptions; // END afProps
+          if (window["createAlloyFinger"]) {
             window["createAlloyFinger"](this.eventCatcher ? this.eventCatcher : this.canvas, afProps);
-          else new AlloyFinger(this.eventCatcher ? this.eventCatcher : this.canvas, afProps);
+          } else {
+            /* tslint:disable-next-line */
+            new AlloyFinger(this.eventCatcher ? this.eventCatcher : this.canvas, afProps);
+          }
         } catch (e) {
           console.error("Failed to initialize AlloyFinger!");
           console.error(e);

package/src/ts/Vertex.ts

@@ -22,7 +22,9 @@
  * @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.
+ * @version  2.5.0
  *
  * @file Vertex
  * @public
@@ -406,19 +408,36 @@ 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);
+  }
+
+  /**
+   * 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
   }