plotboilerplate 1.12.9 → 1.15.0

package/dist/index.esm.js

@@ -358,7 +358,10 @@ class VertexListeners {
  * @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
@@ -699,20 +702,72 @@ class Vertex {
     }
     /**
      * 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, center) {
-        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;
+        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, t) {
+        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, u) {
+        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, center) {
+        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;
     }
     /**
@@ -893,7 +948,9 @@ Vertex.utils = {
  * @modified 2021-01-29 Added the `isClockwise` function.
  * @modified 2021-01-29 Added the `area` function.
  * @modified 2021-01-29 Changed the param type for `containsVert` from Vertex to XYCoords.
- * @version 1.7.0
+ * @modified 2021-12-14 Added the `perimeter()` function.
+ * @modified 2021-12-16 Added the `getEvenDistributionPolygon()` function.
+ * @version 1.8.0
  *
  * @file Polygon
  * @public
@@ -924,12 +981,11 @@ class Polygon {
          **/
         this.className = "Polygon";
         this.uid = UIDGenerator.next();
-        if (typeof vertices == 'undefined')
+        if (typeof vertices == "undefined")
             vertices = [];
         this.vertices = vertices;
         this.isOpen = isOpen;
     }
-    ;
     /**
      * Add a vertex to the end of the `vertices` array.
      *
@@ -941,7 +997,6 @@ class Polygon {
     addVertex(vert) {
         this.vertices.push(vert);
     }
-    ;
     /**
      * Get the polygon vertex at the given position (index).
      *
@@ -964,7 +1019,6 @@ class Polygon {
         else
             return this.vertices[index % this.vertices.length];
     }
-    ;
     /**
      * Move the polygon's vertices by the given amount.
      *
@@ -980,7 +1034,6 @@ class Polygon {
         }
         return this;
     }
-    ;
     /**
      * Check if the given vertex is inside this polygon.<br>
      * <br>
@@ -1000,14 +1053,12 @@ class Polygon {
         for (var i = 0, j = this.vertices.length - 1; i < this.vertices.length; j = i++) {
             let xi = this.vertices[i].x, yi = this.vertices[i].y;
             let xj = this.vertices[j].x, yj = this.vertices[j].y;
-            var intersect = ((yi > vert.y) != (yj > vert.y))
-                && (vert.x < (xj - xi) * (vert.y - yi) / (yj - yi) + xi);
+            var intersect = yi > vert.y != yj > vert.y && vert.x < ((xj - xi) * (vert.y - yi)) / (yj - yi) + xi;
             if (intersect)
                 inside = !inside;
         }
         return inside;
     }
-    ;
     /**
      * Calculate the area of the given polygon (unsigned).
      *
@@ -1021,7 +1072,6 @@ class Polygon {
     area() {
         return Polygon.utils.area(this.vertices);
     }
-    ;
     /**
      * Calulate the signed polyon area by interpreting the polygon as a matrix
      * and calculating its determinant.
@@ -1034,7 +1084,6 @@ class Polygon {
     signedArea() {
         return Polygon.utils.signedArea(this.vertices);
     }
-    ;
     /**
      * Get the winding order of this polgon: clockwise or counterclockwise.
      *
@@ -1046,7 +1095,28 @@ class Polygon {
     isClockwise() {
         return Polygon.utils.signedArea(this.vertices) < 0;
     }
-    ;
+    /**
+     * Get the perimeter of this polygon.
+     * The perimeter is the absolute length of the outline.
+     *
+     * If this polygon is open then the last segment (connecting the first and the
+     * last vertex) will be skipped.
+     *
+     * @method perimeter
+     * @instance
+     * @memberof Polygon
+     * @return {number}
+     */
+    perimeter() {
+        let length = 0;
+        for (var i = 1; i < this.vertices.length; i++) {
+            length += this.vertices[i - 1].distance(this.vertices[i]);
+        }
+        if (!this.isOpen && this.vertices.length > 1) {
+            length += this.vertices[0].distance(this.vertices[this.vertices.length - 1]);
+        }
+        return length;
+    }
     /**
      * Scale the polygon relative to the given center.
      *
@@ -1059,14 +1129,13 @@ class Polygon {
      **/
     scale(factor, center) {
         for (var i in this.vertices) {
-            if (typeof this.vertices[i].scale == 'function')
+            if (typeof this.vertices[i].scale == "function")
                 this.vertices[i].scale(factor, center);
             else
-                console.log('There seems to be a null vertex!', this.vertices[i]);
+                console.log("There seems to be a null vertex!", this.vertices[i]);
         }
         return this;
     }
-    ;
     /**
      * Rotate the polygon around the given center.
      *
@@ -1083,7 +1152,52 @@ class Polygon {
         }
         return this;
     }
-    ;
+    /**
+     * Convert this polygon into a new polygon with n evenly distributed vertices.
+     *
+     * @param {number} pointCount - Must not be negative.
+     */
+    getEvenDistributionPolygon(pointCount) {
+        if (pointCount <= 0) {
+            throw new Error("pointCount must be larger than zero; is " + pointCount + ".");
+        }
+        const result = new Polygon([], this.isOpen);
+        if (this.vertices.length === 0) {
+            return result;
+        }
+        // Fetch and add the start point from the source polygon
+        let polygonPoint = new Vertex(this.vertices[0]);
+        result.vertices.push(polygonPoint);
+        if (this.vertices.length === 1) {
+            return result;
+        }
+        const perimeter = this.perimeter();
+        const stepSize = perimeter / pointCount;
+        const n = this.vertices.length;
+        let polygonIndex = 1;
+        let nextPolygonPoint = new Vertex(this.vertices[1]);
+        let segmentLength = polygonPoint.distance(nextPolygonPoint);
+        let loopMax = this.isOpen ? n : n + 1;
+        let curSegmentU = stepSize;
+        var i = 1;
+        while (i < pointCount && polygonIndex < loopMax) {
+            // Check if next eq point is inside this segment
+            if (curSegmentU < segmentLength) {
+                let newPoint = polygonPoint.clone().lerpAbs(nextPolygonPoint, curSegmentU);
+                result.vertices.push(newPoint);
+                curSegmentU += stepSize;
+                i++;
+            }
+            else {
+                polygonIndex++;
+                polygonPoint = nextPolygonPoint;
+                nextPolygonPoint = new Vertex(this.vertices[polygonIndex % n]);
+                curSegmentU = curSegmentU - segmentLength;
+                segmentLength = polygonPoint.distance(nextPolygonPoint);
+            }
+        }
+        return result;
+    }
     /**
      * Get the bounding box (bounds) of this polygon.
      *
@@ -1095,7 +1209,6 @@ class Polygon {
     getBounds() {
         return Bounds.computeFromVertices(this.vertices);
     }
-    ;
     /**
      * Convert this polygon to a sequence of quadratic Bézier curves.<br>
      * <br>
@@ -1127,7 +1240,6 @@ class Polygon {
         }
         return qbezier;
     }
-    ;
     /**
      * Convert this polygon to a quadratic bezier curve, represented as an SVG data string.
      *
@@ -1140,13 +1252,12 @@ class Polygon {
         var qdata = this.toQuadraticBezierData();
         if (qdata.length == 0)
             return "";
-        var buffer = ['M ' + qdata[0].x + ' ' + qdata[0].y];
+        var buffer = ["M " + qdata[0].x + " " + qdata[0].y];
         for (var i = 1; i < qdata.length; i += 2) {
-            buffer.push('Q ' + qdata[i].x + ' ' + qdata[i].y + ', ' + qdata[i + 1].x + ' ' + qdata[i + 1].y);
+            buffer.push("Q " + qdata[i].x + " " + qdata[i].y + ", " + qdata[i + 1].x + " " + qdata[i + 1].y);
         }
-        return buffer.join(' ');
+        return buffer.join(" ");
     }
-    ;
     /**
      * Convert this polygon to a sequence of cubic Bézier curves.<br>
      * <br>
@@ -1163,7 +1274,7 @@ class Polygon {
      * @memberof Polygon
      **/
     toCubicBezierData(threshold) {
-        if (typeof threshold == 'undefined')
+        if (typeof threshold == "undefined")
             threshold = 1.0;
         if (this.vertices.length < 3)
             return [];
@@ -1187,7 +1298,6 @@ class Polygon {
         }
         return cbezier;
     }
-    ;
     /**
      * Convert this polygon to a cubic bezier curve, represented as an SVG data string.
      *
@@ -1200,13 +1310,23 @@ class Polygon {
         var qdata = this.toCubicBezierData(threshold);
         if (qdata.length == 0)
             return "";
-        var buffer = ['M ' + qdata[0].x + ' ' + qdata[0].y];
+        var buffer = ["M " + qdata[0].x + " " + qdata[0].y];
         for (var i = 1; i < qdata.length; i += 3) {
-            buffer.push('C ' + qdata[i].x + ' ' + qdata[i].y + ', ' + qdata[i + 1].x + ' ' + qdata[i + 1].y + ', ' + qdata[i + 2].x + ' ' + qdata[i + 2].y);
-        }
-        return buffer.join(' ');
+            buffer.push("C " +
+                qdata[i].x +
+                " " +
+                qdata[i].y +
+                ", " +
+                qdata[i + 1].x +
+                " " +
+                qdata[i + 1].y +
+                ", " +
+                qdata[i + 2].x +
+                " " +
+                qdata[i + 2].y);
+        }
+        return buffer.join(" ");
     }
-    ;
     /**
      * Convert this polygon to a cubic bezier path instance.
      *
@@ -1225,7 +1345,6 @@ class Polygon {
         }
         return BezierPath.fromArray(pathdata);
     }
-    ;
     /**
      * Create an SVG representation of this polygon.
      *
@@ -1239,29 +1358,28 @@ class Polygon {
     toSVGString(options) {
         options = options || {};
         var buffer = [];
-        buffer.push('<path');
+        buffer.push("<path");
         if (options.className)
             buffer.push(' class="' + options.className + '"');
         buffer.push(' d="');
         if (this.vertices.length > 0) {
-            buffer.push('M ');
+            buffer.push("M ");
             buffer.push(this.vertices[0].x.toString());
-            buffer.push(' ');
+            buffer.push(" ");
             buffer.push(this.vertices[0].y.toString());
             for (var i = 1; i < this.vertices.length; i++) {
-                buffer.push(' L ');
+                buffer.push(" L ");
                 buffer.push(this.vertices[i].x.toString());
-                buffer.push(' ');
+                buffer.push(" ");
                 buffer.push(this.vertices[i].y.toString());
             }
             if (!this.isOpen) {
-                buffer.push(' Z');
+                buffer.push(" Z");
             }
         }
         buffer.push('" />');
-        return buffer.join('');
+        return buffer.join("");
     }
-    ;
 }
 Polygon.utils = {
     /**
@@ -1281,8 +1399,8 @@ Polygon.utils = {
             const addY = vertices[(i + 1) % l].y;
             const subX = vertices[(i + 1) % l].x;
             const subY = vertices[i].y;
-            total += (addX * addY * 0.5);
-            total -= (subX * subY * 0.5);
+            total += addX * addY * 0.5;
+            total -= subX * subY * 0.5;
         }
         return Math.abs(total);
     },
@@ -3021,6 +3139,35 @@ class BezierPath {
         this.updateArcLengths();
         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, scaleFactor) {
+        // 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.
      *
@@ -3031,19 +3178,19 @@ class BezierPath {
      * @memberof BezierPath
      * @return {BezierPath} this for chaining.
      **/
-    scale(anchor, scaling) {
+    scaleXY(scaleFactors, anchor) {
         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)!
         }
         // 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();
         return this;
@@ -4165,8 +4312,12 @@ CircleSector.circleSectorUtils = {
  * @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
  **/
+const RAD_TO_DEG = 180 / Math.PI;
 /**
  * @classdesc A helper class for basic SVG drawing operations. This class should
  * be compatible to the default 'draw' class.
@@ -4226,7 +4377,8 @@ class drawutilssvg {
             "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 = [];
@@ -5006,27 +5158,65 @@ class drawutilssvg {
         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, x, y, options) {
+        var _a, _b;
         options = options || {};
         const color = options.color || "black";
-        const node = this.makeNode("text");
-        node.setAttribute("x", `${this._x(x)}`);
-        node.setAttribute("y", `${this._y(y)}`);
-        node.innerHTML = text;
+        const lineHeight = ((_b = (_a = options.lineHeight) !== null && _a !== void 0 ? _a : options.fontSize) !== null && _b !== void 0 ? _b : 0) * this.scale.x;
+        // https://www.w3.org/TR/SVG/text.html#TextAnchorProperty
+        //    start | middle | end
+        const textAlign = 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 = this.makeNode("g");
+        const curId = this.curId;
+        this.curId = curId + "_text";
+        const textNode = 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);
     }
     /**
@@ -5037,16 +5227,21 @@ class drawutilssvg {
      * @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, x, y, rotation) {
+    label(text, x, y, rotation, color) {
         const node = 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);
     }
     /**
      * Draw an SVG-like path given by the specified path data.
@@ -5355,7 +5550,9 @@ drawutilssvg.HEAD_XML = [
  * @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
  **/
 // Todo: rename this class to Drawutils?
 /**
@@ -6010,20 +6207,62 @@ class drawutils {
         this.ctx.setLineDash([]);
         this.ctx.restore();
     }
+    /**
+     * 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, x, y, options) {
+        // See https://stackoverflow.com/a/23523697
+        var _a, _b, _c;
         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 = 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 = (_a = options.rotation) !== null && _a !== void 0 ? _a : 0.0;
+        const lineHeight = ((_c = (_b = options.lineHeight) !== null && _b !== void 0 ? _b : options.fontSize) !== null && _c !== void 0 ? _c : 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();
     }
     /**
@@ -6043,8 +6282,9 @@ class drawutils {
      */
     label(text, x, y, rotation, color) {
         this.ctx.save();
+        this.ctx.font = "lighter 9pt Arial";
         this.ctx.translate(x, y);
-        if (typeof rotation != "undefined")
+        if (typeof rotation !== "undefined")
             this.ctx.rotate(rotation);
         this.ctx.fillStyle = color || "black";
         if (this.fillShapes) {
@@ -6653,6 +6893,25 @@ class drawutilsgl {
     polyline(vertices, isOpen, color, lineWidth) {
         // NOT YET IMPLEMENTED
     }
+    /**
+     * 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, x, y, options) {
         // NOT YET IMPLEMENTED
     }
@@ -6664,14 +6923,12 @@ class drawutilsgl {
      * @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, x, y, rotation) {
+    label(text, x, y, rotation, color) {
         // NOT YET IMPLEMENTED
     }
     /**
@@ -8265,6 +8522,65 @@ class PBImage {
     ;
 }
 
+/**
+ * @author   Ikaros Kappler
+ * @date     2021-11-16
+ * @version  1.0.0
+ **/
+/**
+ * @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
+ **/
+class PBText {
+    /**
+     * 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, anchor, options) {
+        /**
+         * Required to generate proper CSS classes and other class related IDs.
+         **/
+        this.className = "PBText";
+        this.uid = UIDGenerator.next();
+        this.text = text;
+        this.anchor = anchor !== null && anchor !== void 0 ? 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) {
+        console.warn("[PBText.toSVGString()] This function is not implemented as it defines a deprecated method. Use the 'drawutilssvg.text()' method instead.");
+        return "";
+    }
+} // END class
+
 /* Port from AlloyFinger v0.1.15
  * Original by dntzhang
  * Typescript port by Ikaros Kappler
@@ -9394,7 +9710,8 @@ VEllipseSector.ellipseSectorUtils = {
  * @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.
@@ -9639,6 +9956,12 @@ class PlotBoilerplate {
             image: {
                 color: "#a8a8a8",
                 lineWidth: 1
+            },
+            text: {
+                color: "rgba(192,0,128,0.5)",
+                lineWidth: 1,
+                fill: true,
+                anchor: true
             }
         }; // END drawConfig
         // +---------------------------------------------------------------------------------
@@ -9760,7 +10083,7 @@ 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");
@@ -9866,7 +10189,6 @@ class PlotBoilerplate {
     add(drawable, redraw) {
         if (Array.isArray(drawable)) {
             const arr = drawable;
-            // for( var i in arr )
             for (var i = 0; i < arr.length; i++) {
                 this.add(arr[i], false);
             }
@@ -9912,9 +10234,9 @@ class PlotBoilerplate {
         }
         else if (drawable instanceof Polygon) {
             this.drawables.push(drawable);
-            // for( var i in drawable.vertices )
-            for (var i = 0; i < drawable.vertices.length; 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);
@@ -9926,8 +10248,9 @@ class PlotBoilerplate {
             this.drawables.push(drawable);
             const bezierPath = drawable;
             for (var i = 0; i < bezierPath.bezierCurves.length; i++) {
-                if (!drawable.adjustCircular && i == 0)
+                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);
@@ -9946,6 +10269,11 @@ class PlotBoilerplate {
             });
             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 + ".";
         }
@@ -10044,6 +10372,9 @@ class PlotBoilerplate {
                         this.removeVertex(drawable.upperLeft, false);
                         this.removeVertex(drawable.lowerRight, false);
                     }
+                    else if (drawable instanceof PBText) {
+                        this.removeVertex(drawable.anchor, false);
+                    }
                 } // END removeWithVertices
                 if (redraw) {
                     this.redraw();
@@ -10065,8 +10396,9 @@ class PlotBoilerplate {
         for (var i = 0; i < this.vertices.length; i++) {
             if (this.vertices[i] === vert) {
                 this.vertices.splice(i, 1);
-                if (redraw)
+                if (redraw) {
                     this.redraw();
+                }
                 return;
             }
         }
@@ -10101,8 +10433,9 @@ class PlotBoilerplate {
      **/
     getVertexNear(pixelPosition, pixelTolerance) {
         var p = this.locatePointNear(this.transformMousePosition(pixelPosition.x, pixelPosition.y), pixelTolerance / Math.min(this.config.cssScaleX, this.config.cssScaleY));
-        if (p && p.typeName == "vertex")
+        if (p && p.typeName == "vertex") {
             return this.vertices[p.vindex];
+        }
         return undefined;
     }
     /**
@@ -10369,6 +10702,16 @@ class PlotBoilerplate {
                 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.");
         }
@@ -10647,7 +10990,6 @@ 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 = _self.vertices[vindex];
             if ((vert.attr.draggable || vert.attr.selectable) && vert.distance(point) < tolerance) {
@@ -10667,10 +11009,7 @@ class PlotBoilerplate {
      * @return {void}
      **/
     handleClick(e) {
-        // x:number,y:number) {
         const _self = this;
-        // const x:number = e.params.pos.x;
-        //const y:number = e.params.pos.y;
         var p = this.locatePointNear(_self.transformMousePosition(e.params.pos.x, e.params.pos.y), PlotBoilerplate.DEFAULT_CLICK_TOLERANCE / Math.min(_self.config.cssScaleX, _self.config.cssScaleY));
         if (p) {
             _self.vertices[p.vindex].listeners.fireClickEvent(e);
@@ -10687,7 +11026,7 @@ class PlotBoilerplate {
                 }
                 _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();
             }
@@ -10985,6 +11324,7 @@ class PlotBoilerplate {
                         _self.draggedElements = [];
                     };
                     const afProps = {
+                        // touchStart: (evt: TouchEvent) => {
                         touchStart: (evt) => {
                             if (evt.touches.length == 1) {
                                 touchMovePos = new Vertex(relPos({ x: evt.touches[0].clientX, y: evt.touches[0].clientY }));
@@ -11087,10 +11427,13 @@ class PlotBoilerplate {
                             _self.redraw();
                         }
                     }; // END afProps
-                    if (window["createAlloyFinger"])
+                    if (window["createAlloyFinger"]) {
                         window["createAlloyFinger"](this.eventCatcher ? this.eventCatcher : this.canvas, afProps);
-                    else
+                    }
+                    else {
+                        /* tslint:disable-next-line */
                         new AlloyFinger(this.eventCatcher ? this.eventCatcher : this.canvas, afProps);
+                    }
                 }
                 catch (e) {
                     console.error("Failed to initialize AlloyFinger!");
@@ -11453,5 +11796,5 @@ class SVGBuilder {
     ;
 }
 
-export { BezierPath, Bounds, Circle, CircleSector, CubicBezierCurve, Grid, KeyHandler, Line, MouseHandler, PBImage, PlotBoilerplate, Polygon, SVGBuilder, Triangle, UIDGenerator, VEllipse, VEllipseSector, Vector, VertTuple, Vertex, VertexAttr, VertexListeners, XMouseEvent, XWheelEvent, drawutils, drawutilsgl, drawutilssvg, geomutils };
+export { BezierPath, Bounds, Circle, CircleSector, CubicBezierCurve, Grid, KeyHandler, Line, MouseHandler, PBImage, PBText, PlotBoilerplate, Polygon, SVGBuilder, Triangle, UIDGenerator, VEllipse, VEllipseSector, Vector, VertTuple, Vertex, VertexAttr, VertexListeners, XMouseEvent, XWheelEvent, drawutils, drawutilsgl, drawutilssvg, geomutils };
 //# sourceMappingURL=index.esm.js.map