plotboilerplate 1.12.10 → 1.16.0

package/dist/plotboilerplate.js

@@ -445,7 +445,10 @@ class AlloyFinger {
  * @modified 2020-07-24 Added the getClosestT(Vertex) function.
  * @modified 2020-12-29 Constructor is now private (no explicit use intended).
  * @modified 2021-05-25 Added BezierPath.fromReducedList( Array<number> ).
- * @version 2.3.1
+ * @modified 2022-01-31 Added `BezierPath.getEvenDistributionVertices(number)`.
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @modified 2022-02-02 Cleared the `toSVGString` function (deprecated). Use `drawutilssvg` instead.
+ * @version 2.5.0
  *
  * @file BezierPath
  * @public
@@ -882,6 +885,35 @@ var BezierPath = /** @class */ (function () {
         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.
+     **/
+    BezierPath.prototype.scale = function (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.
      *
@@ -892,19 +924,19 @@ var BezierPath = /** @class */ (function () {
      * @memberof BezierPath
      * @return {BezierPath} this for chaining.
      **/
-    BezierPath.prototype.scale = function (anchor, scaling) {
+    BezierPath.prototype.scaleXY = function (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;
@@ -1313,6 +1345,59 @@ var BezierPath = /** @class */ (function () {
         }
         return new Bounds_1.Bounds(min, max);
     };
+    /**
+     * Get n 'equally' distributed vertices along this Bézier path.
+     *
+     * As the changing curvature of the B slines makes prediction of distances difficult, the
+     * returned vertices' distances are only relatively equal:
+     *  - the distance grows where curvature is large.
+     *  - the distance shrinks where curvature is small.
+     *
+     * Only the distance mean of all consecutive is 1/n-th of the total arc length.
+     *
+     * Usually this approximation is good enough for most use cases.
+     *
+     * @param {number} pointCount - (must be at least 2) The number of desired points (start and end point included).
+     * @return {Array<Vertex>}
+     */
+    BezierPath.prototype.getEvenDistributionVertices = function (pointCount) {
+        if (pointCount < 2) {
+            throw new Error("pointCount must be larger than one; is " + pointCount + ".");
+        }
+        var result = [];
+        if (this.bezierCurves.length === 0) {
+            return result;
+        }
+        // Fetch and add the start point from the source polygon
+        var polygonPoint = new Vertex_1.Vertex(this.bezierCurves[0].startPoint);
+        result.push(polygonPoint);
+        // if (this.bezierCurves.length === 1) {
+        //   return result;
+        // }
+        var perimeter = this.totalArcLength;
+        var stepSize = perimeter / (pointCount - 1);
+        var n = this.bezierCurves.length;
+        var curveIndex = 0;
+        var segmentLength = this.bezierCurves[0].arcLength;
+        var curSegmentU = stepSize;
+        var i = 1;
+        while (i < pointCount && curveIndex < n) {
+            // Check if next eq point is inside this segment
+            if (curSegmentU < segmentLength) {
+                var newPoint = this.bezierCurves[curveIndex].getPoint(curSegmentU);
+                result.push(newPoint);
+                curSegmentU += stepSize;
+                i++;
+            }
+            else {
+                curveIndex++;
+                curSegmentU = curSegmentU - segmentLength;
+                segmentLength = curveIndex < n ? this.bezierCurves[curveIndex].arcLength : 0;
+            }
+        }
+        result.push(new Vertex_1.Vertex(this.bezierCurves[n - 1].endPoint));
+        return result;
+    };
     /**
      * Clone this BezierPath (deep clone).
      *
@@ -1370,19 +1455,30 @@ var BezierPath = /** @class */ (function () {
      * @return {string} The SVG string.
      **/
     BezierPath.prototype.toSVGString = function (options) {
-        options = options || {};
-        var buffer = [];
-        buffer.push("<path");
-        if (options.className)
-            buffer.push(' class="' + options.className + '"');
-        buffer.push(' d="');
-        for (var c = 0; c < this.bezierCurves.length; c++) {
-            if (c > 0)
-                buffer.push(" ");
-            buffer.push(this.bezierCurves[c].toSVGPathData());
+        // options = options || {};
+        // var buffer: Array<string> = [];
+        // buffer.push("<path");
+        // if (options.className) buffer.push(' class="' + options.className + '"');
+        // buffer.push(' d="');
+        // for (var c = 0; c < this.bezierCurves.length; c++) {
+        //   if (c > 0) buffer.push(" ");
+        //   buffer.push(this.bezierCurves[c].toSVGPathData());
+        // }
+        // buffer.push('" />');
+        // return buffer.join("");
+        console.warn("[Deprecation] Warning: the BezierPath.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
+        return "";
+    };
+    /**
+     * This function should invalidate any installed listeners and invalidate this object.
+     * After calling this function the object might not hold valid data any more and
+     * should not be used.
+     */
+    BezierPath.prototype.destroy = function () {
+        for (var i = 0; i < this.bezierCurves.length; i++) {
+            this.bezierCurves[i].destroy();
         }
-        buffer.push('" />');
-        return buffer.join("");
+        this.isDestroyed = true;
     };
     /**
      * Create a JSON string representation of this bézier curve.
@@ -1701,7 +1797,9 @@ exports.Bounds = Bounds;
  * @modified 2020-09-07 Changed the vertAt function by switching sin and cos! The old version did not return the correct vertex (by angle) accoring to the assumed circle math.
  * @modified 2020-10-16 Added the containsCircle(...) function.
  * @modified 2021-01-20 Added UID.
- * @version  1.2.0
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @modified 2022-02-02 Cleared the `toSVGString` function (deprecated). Use `drawutilssvg` instead.
+ * @version  1.3.0
  **/
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Circle = void 0;
@@ -1738,7 +1836,6 @@ var Circle = /** @class */ (function () {
         this.center = center;
         this.radius = radius;
     }
-    ;
     /**
      * Check if the given circle is fully contained inside this circle.
      *
@@ -1751,7 +1848,6 @@ var Circle = /** @class */ (function () {
     Circle.prototype.containsCircle = function (circle) {
         return this.center.distance(circle.center) + circle.radius < this.radius;
     };
-    ;
     /**
      * Calculate the distance from this circle to the given line.
      *
@@ -1770,7 +1866,6 @@ var Circle = /** @class */ (function () {
         var closestPointOnLine = line.getClosestPoint(this.center);
         return closestPointOnLine.distance(this.center) - this.radius;
     };
-    ;
     /**
      * Get the vertex on the this circle for the given angle.
      *
@@ -1784,7 +1879,6 @@ var Circle = /** @class */ (function () {
         // Find the point on the circle respective the angle. Then move relative to center.
         return Circle.circleUtils.vertAt(angle, this.radius).add(this.center);
     };
-    ;
     /**
      * Get a tangent line of this circle for a given angle.
      *
@@ -1801,7 +1895,6 @@ var Circle = /** @class */ (function () {
         // Construct the perpendicular of the line in point a. Then move relative to center.
         return new Vector_1.Vector(pointA, new Vertex_1.Vertex(0, 0)).add(this.center).perp();
     };
-    ;
     /**
      * Calculate the intersection points (if exists) with the given circle.
      *
@@ -1841,47 +1934,55 @@ var Circle = /** @class */ (function () {
         //    x4 = P2.x - h*(P1.y - P0.y)/d;
         //    y4 = P2.y + h*(P1.x - P0.x)/d;
         //    return pair<Point, Point>(Point(x3, y3), Point(x4, y4));
-        // } 
+        // }
         var p0 = this.center;
         var p1 = circle.center;
         var d = p0.distance(p1);
         var a = (this.radius * this.radius - circle.radius * circle.radius + d * d) / (2 * d);
         var h = Math.sqrt(this.radius * this.radius - a * a);
         var p2 = p1.clone().scale(a / d, p0);
-        var x3 = p2.x + h * (p1.y - p0.y) / d;
-        var y3 = p2.y - h * (p1.x - p0.x) / d;
-        var x4 = p2.x - h * (p1.y - p0.y) / d;
-        var y4 = p2.y + h * (p1.x - p0.x) / d;
+        var x3 = p2.x + (h * (p1.y - p0.y)) / d;
+        var y3 = p2.y - (h * (p1.x - p0.x)) / d;
+        var x4 = p2.x - (h * (p1.y - p0.y)) / d;
+        var y4 = p2.y + (h * (p1.x - p0.x)) / d;
         return new Line_1.Line(new Vertex_1.Vertex(x3, y3), new Vertex_1.Vertex(x4, y4));
     };
-    ;
     /**
-      * 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
-      */
+     * 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
+     */
     Circle.prototype.toSVGString = function (options) {
-        options = options || {};
-        var buffer = [];
-        buffer.push('<circle');
-        if (options.className)
-            buffer.push(' class="' + options.className + '"');
-        buffer.push(' cx="' + this.center.x + '"');
-        buffer.push(' cy="' + this.center.y + '"');
-        buffer.push(' r="' + this.radius + '"');
-        buffer.push(' />');
-        return buffer.join('');
+        // options = options || {};
+        // var buffer: Array<string> = [];
+        // buffer.push("<circle");
+        // if (options.className) buffer.push(' class="' + options.className + '"');
+        // buffer.push(' cx="' + this.center.x + '"');
+        // buffer.push(' cy="' + this.center.y + '"');
+        // buffer.push(' r="' + this.radius + '"');
+        // buffer.push(" />");
+        // return buffer.join("");
+        console.warn("[Deprecation] Warning: the Circle.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
+        return "";
+    };
+    /**
+     * This function should invalidate any installed listeners and invalidate this object.
+     * After calling this function the object might not hold valid data any more and
+     * should not be used.
+     */
+    Circle.prototype.destroy = function () {
+        this.center.destroy();
+        this.isDestroyed = true;
     };
-    ;
     Circle.circleUtils = {
         vertAt: function (angle, radius) {
             /* return new Vertex( Math.sin(angle) * radius,
-                       Math.cos(angle) * radius ); */
+                         Math.cos(angle) * radius ); */
             return new Vertex_1.Vertex(Math.cos(angle) * radius, Math.sin(angle) * radius);
         }
     };
@@ -1935,27 +2036,42 @@ var CircleSector = /** @class */ (function () {
         this.startAngle = startAngle;
         this.endAngle = endAngle;
     }
-    ;
     /**
-      * Create an SVG representation of this circle.
-      *
-      * @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
-      */
+     * 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
+     */
     CircleSector.prototype.toSVGString = function (options) {
-        options = options || {};
-        var buffer = [];
-        buffer.push('<path ');
-        if (options.className)
-            buffer.push(' class="' + options.className + '"');
-        var data = CircleSector.circleSectorUtils.describeSVGArc(this.circle.center.x, this.circle.center.y, this.circle.radius, this.startAngle, this.endAngle);
-        buffer.push(' d="' + data.join(" ") + '" />');
-        return buffer.join('');
+        // options = options || {};
+        // var buffer: Array<string> = [];
+        // buffer.push("<path ");
+        // if (options.className) buffer.push(' class="' + options.className + '"');
+        // const data: SVGPathParams = CircleSector.circleSectorUtils.describeSVGArc(
+        //   this.circle.center.x,
+        //   this.circle.center.y,
+        //   this.circle.radius,
+        //   this.startAngle,
+        //   this.endAngle
+        // );
+        // buffer.push(' d="' + data.join(" ") + '" />');
+        // return buffer.join("");
+        console.warn("[Deprecation] Warning: the CircleSector.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
+        return "";
+    };
+    /**
+     * This function should invalidate any installed listeners and invalidate this object.
+     * After calling this function the object might not hold valid data any more and
+     * should not be used.
+     */
+    CircleSector.prototype.destroy = function () {
+        this.circle.destroy();
+        this.isDestroyed = true;
     };
-    ;
     CircleSector.circleSectorUtils = {
         /**
          * Helper function to convert polar circle coordinates to cartesian coordinates.
@@ -1963,11 +2079,11 @@ var CircleSector = /** @class */ (function () {
          * TODO: generalize for ellipses (two radii).
          *
          * @param {number} angle - The angle in radians.
-        */
+         */
         polarToCartesian: function (centerX, centerY, radius, angle) {
             return {
-                x: centerX + (radius * Math.cos(angle)),
-                y: centerY + (radius * Math.sin(angle))
+                x: centerX + radius * Math.cos(angle),
+                y: centerY + radius * Math.sin(angle)
             };
         },
         /**
@@ -1980,7 +2096,7 @@ var CircleSector = /** @class */ (function () {
          * @return [ 'A', radiusx, radiusy, rotation=0, largeArcFlag=1|0, sweepFlag=0, endx, endy ]
          */
         describeSVGArc: function (x, y, radius, startAngle, endAngle, options) {
-            if (typeof options === 'undefined')
+            if (typeof options === "undefined")
                 options = { moveToStart: true };
             var end = CircleSector.circleSectorUtils.polarToCartesian(x, y, radius, endAngle);
             var start = CircleSector.circleSectorUtils.polarToCartesian(x, y, radius, startAngle);
@@ -2005,7 +2121,7 @@ var CircleSector = /** @class */ (function () {
             }
             var pathData = [];
             if (options.moveToStart) {
-                pathData.push('M', start.x, start.y);
+                pathData.push("M", start.x, start.y);
             }
             pathData.push("A", radius, radius, 0, largeArcFlag, sweepFlag, end.x, end.y);
             return pathData;
@@ -2042,7 +2158,9 @@ exports.CircleSector = CircleSector;
  * @modified 2020-07-14 Changed the moveCurvePoint(...,Vertex) to moveCurvePoint(...,XYCoords), which is more generic.
  * @modified 2020-07-24 Added the getClosestT function and the helper function locateIntervalByDistance(...).
  * @modified 2021-01-20 Added UID.
- * @version 2.5.0
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @modified 2022-02-02 Cleared the `toSVGPathData` function (deprecated). Use `drawutilssvg` instead.
+ * @version 2.6.0
  *
  * @file CubicBezierCurve
  * @public
@@ -2097,7 +2215,6 @@ var CubicBezierCurve = /** @class */ (function () {
         this.arcLength = null;
         this.updateArcLengths();
     }
-    ;
     /**
      * Move the given curve point (the start point, end point or one of the two
      * control points).
@@ -2134,7 +2251,6 @@ var CubicBezierCurve = /** @class */ (function () {
         if (updateArcLengths)
             this.updateArcLengths();
     };
-    ;
     /**
      * Translate the whole curve by the given {x,y} amount: moves all four points.
      *
@@ -2151,7 +2267,6 @@ var CubicBezierCurve = /** @class */ (function () {
         this.endPoint.add(amount);
         return this;
     };
-    ;
     /**
      * Reverse this curve, means swapping start- and end-point and swapping
      * start-control- and end-control-point.
@@ -2170,7 +2285,6 @@ var CubicBezierCurve = /** @class */ (function () {
         this.endControlPoint = tmp;
         return this;
     };
-    ;
     /**
      * Get the total curve length.<br>
      * <br>
@@ -2189,7 +2303,6 @@ var CubicBezierCurve = /** @class */ (function () {
     CubicBezierCurve.prototype.getLength = function () {
         return this.arcLength;
     };
-    ;
     /**
      * Uptate the internal arc segment buffer and their lengths.<br>
      * <br>
@@ -2227,7 +2340,6 @@ var CubicBezierCurve = /** @class */ (function () {
         }
         this.arcLength = newLength;
     };
-    ;
     /**
      * Get a 't' (relative position on curve) with the closest distance to point 'p'.
      *
@@ -2250,7 +2362,6 @@ var CubicBezierCurve = /** @class */ (function () {
         } while (iteration < 4 && this.getPointAt(result.tPrev).distance(this.getPointAt(result.tNext)) > desiredEpsilon);
         return result.t;
     };
-    ;
     /**
      * This helper function locates the 't' on a fixed step interval with the minimal distance
      * between the curve (at 't') and the given point.
@@ -2279,12 +2390,12 @@ var CubicBezierCurve = /** @class */ (function () {
                 minDist = dist;
             }
         }
-        return { t: tStart + tDiff * (minIndex / stepCount),
+        return {
+            t: tStart + tDiff * (minIndex / stepCount),
             tPrev: tStart + tDiff * (Math.max(0, minIndex - 1) / stepCount),
             tNext: tStart + tDiff * (Math.min(stepCount, minIndex + 1) / stepCount)
         };
     };
-    ;
     /**
      * Get the bounds of this bezier curve.
      *
@@ -2306,7 +2417,6 @@ var CubicBezierCurve = /** @class */ (function () {
         }
         return new Bounds_1.Bounds(min, max);
     };
-    ;
     /**
      * Get the start point of the curve.<br>
      * <br>
@@ -2320,7 +2430,6 @@ var CubicBezierCurve = /** @class */ (function () {
     CubicBezierCurve.prototype.getStartPoint = function () {
         return this.startPoint;
     };
-    ;
     /**
      * Get the end point of the curve.<br>
      * <br>
@@ -2334,7 +2443,6 @@ var CubicBezierCurve = /** @class */ (function () {
     CubicBezierCurve.prototype.getEndPoint = function () {
         return this.endPoint;
     };
-    ;
     /**
      * Get the start control point of the curve.<br>
      * <br>
@@ -2348,7 +2456,6 @@ var CubicBezierCurve = /** @class */ (function () {
     CubicBezierCurve.prototype.getStartControlPoint = function () {
         return this.startControlPoint;
     };
-    ;
     /**
      * Get the end control point of the curve.<br>
      * <br>
@@ -2362,7 +2469,6 @@ var CubicBezierCurve = /** @class */ (function () {
     CubicBezierCurve.prototype.getEndControlPoint = function () {
         return this.endControlPoint;
     };
-    ;
     /**
      * Get one of the four curve points specified by the passt point ID.
      *
@@ -2383,7 +2489,6 @@ var CubicBezierCurve = /** @class */ (function () {
             return this.endControlPoint;
         throw new Error("Invalid point ID '" + id + "'.");
     };
-    ;
     /**
      * Get the curve point at a given position t, where t is in [0,1].<br>
      * <br>
@@ -2398,13 +2503,16 @@ var CubicBezierCurve = /** @class */ (function () {
      **/
     CubicBezierCurve.prototype.getPointAt = function (t) {
         // Perform some powerful math magic
-        var x = this.startPoint.x * Math.pow(1.0 - t, 3) + this.startControlPoint.x * 3 * t * Math.pow(1.0 - t, 2)
-            + this.endControlPoint.x * 3 * Math.pow(t, 2) * (1.0 - t) + this.endPoint.x * Math.pow(t, 3);
-        var y = this.startPoint.y * Math.pow(1.0 - t, 3) + this.startControlPoint.y * 3 * t * Math.pow(1.0 - t, 2)
-            + this.endControlPoint.y * 3 * Math.pow(t, 2) * (1.0 - t) + this.endPoint.y * Math.pow(t, 3);
+        var x = this.startPoint.x * Math.pow(1.0 - t, 3) +
+            this.startControlPoint.x * 3 * t * Math.pow(1.0 - t, 2) +
+            this.endControlPoint.x * 3 * Math.pow(t, 2) * (1.0 - t) +
+            this.endPoint.x * Math.pow(t, 3);
+        var y = this.startPoint.y * Math.pow(1.0 - t, 3) +
+            this.startControlPoint.y * 3 * t * Math.pow(1.0 - t, 2) +
+            this.endControlPoint.y * 3 * Math.pow(t, 2) * (1.0 - t) +
+            this.endPoint.y * Math.pow(t, 3);
         return new Vertex_1.Vertex(x, y);
     };
-    ;
     /**
      * Get the curve point at a given position u, where u is in [0,arcLength].<br>
      * <br>
@@ -2420,7 +2528,6 @@ var CubicBezierCurve = /** @class */ (function () {
     CubicBezierCurve.prototype.getPoint = function (u) {
         return this.getPointAt(u / this.arcLength);
     };
-    ;
     /**
      * Get the curve tangent vector at a given absolute curve position t in [0,1].<br>
      * <br>
@@ -2441,18 +2548,11 @@ var CubicBezierCurve = /** @class */ (function () {
         var t2 = t * t;
         // (1 - t)^2 = (1-t)*(1-t) = 1 - t - t + t^2 = 1 - 2*t + t^2
         var nt2 = 1 - 2 * t + t2;
-        var tX = -3 * a.x * nt2 +
-            b.x * (3 * nt2 - 6 * (t - t2)) +
-            c.x * (6 * (t - t2) - 3 * t2) +
-            3 * d.x * t2;
-        var tY = -3 * a.y * nt2 +
-            b.y * (3 * nt2 - 6 * (t - t2)) +
-            c.y * (6 * (t - t2) - 3 * t2) +
-            3 * d.y * t2;
+        var tX = -3 * a.x * nt2 + b.x * (3 * nt2 - 6 * (t - t2)) + c.x * (6 * (t - t2) - 3 * t2) + 3 * d.x * t2;
+        var tY = -3 * a.y * nt2 + b.y * (3 * nt2 - 6 * (t - t2)) + c.y * (6 * (t - t2) - 3 * t2) + 3 * d.y * t2;
         // Note: my implementation does NOT normalize tangent vectors!
         return new Vertex_1.Vertex(tX, tY);
     };
-    ;
     /**
      * Get a sub curve at the given start end end offsets (values between 0.0 and 1.0).
      *
@@ -2478,7 +2578,6 @@ var CubicBezierCurve = /** @class */ (function () {
         // pb.draw.cubicBezier( startVec.a, endVec.a, startVec.b, endVec.b, '#8800ff', 2 );
         return new CubicBezierCurve(startVec.a, endVec.a, startVec.b, endVec.b);
     };
-    ;
     /**
      * Convert a relative curve position u to the absolute curve position t.
      *
@@ -2489,9 +2588,8 @@ var CubicBezierCurve = /** @class */ (function () {
      * @return {number}
      **/
     CubicBezierCurve.prototype.convertU2T = function (u) {
-        return Math.max(0.0, Math.min(1.0, (u / this.arcLength)));
+        return Math.max(0.0, Math.min(1.0, u / this.arcLength));
     };
-    ;
     /**
      * Get the curve tangent vector at a given relative position u in [0,arcLength].<br>
      * <br>
@@ -2506,7 +2604,6 @@ var CubicBezierCurve = /** @class */ (function () {
     CubicBezierCurve.prototype.getTangent = function (u) {
         return this.getTangentAt(this.convertU2T(u));
     };
-    ;
     /**
      * Get the curve perpendicular at a given relative position u in [0,arcLength] as a vector.<br>
      * <br>
@@ -2521,7 +2618,6 @@ var CubicBezierCurve = /** @class */ (function () {
     CubicBezierCurve.prototype.getPerpendicular = function (u) {
         return this.getPerpendicularAt(this.convertU2T(u));
     };
-    ;
     /**
      * Get the curve perpendicular at a given absolute position t in [0,1] as a vector.<br>
      * <br>
@@ -2537,7 +2633,6 @@ var CubicBezierCurve = /** @class */ (function () {
         var tangentVector = this.getTangentAt(t);
         return new Vertex_1.Vertex(tangentVector.y, -tangentVector.x);
     };
-    ;
     /**
      * Clone this Bézier curve (deep clone).
      *
@@ -2549,7 +2644,6 @@ var CubicBezierCurve = /** @class */ (function () {
     CubicBezierCurve.prototype.clone = function () {
         return new CubicBezierCurve(this.getStartPoint().clone(), this.getEndPoint().clone(), this.getStartControlPoint().clone(), this.getEndControlPoint().clone());
     };
-    ;
     /**
      * Check if this and the specified curve are equal.<br>
      * <br>
@@ -2568,17 +2662,25 @@ var CubicBezierCurve = /** @class */ (function () {
         //       Let's see if this restricted version works out.
         if (!curve)
             return false;
-        if (!curve.startPoint ||
-            !curve.endPoint ||
-            !curve.startControlPoint ||
-            !curve.endControlPoint)
+        if (!curve.startPoint || !curve.endPoint || !curve.startControlPoint || !curve.endControlPoint)
             return false;
-        return this.startPoint.equals(curve.startPoint)
-            && this.endPoint.equals(curve.endPoint)
-            && this.startControlPoint.equals(curve.startControlPoint)
-            && this.endControlPoint.equals(curve.endControlPoint);
+        return (this.startPoint.equals(curve.startPoint) &&
+            this.endPoint.equals(curve.endPoint) &&
+            this.startControlPoint.equals(curve.startControlPoint) &&
+            this.endControlPoint.equals(curve.endControlPoint));
+    };
+    /**
+     * This function should invalidate any installed listeners and invalidate this object.
+     * After calling this function the object might not hold valid data any more and
+     * should not be used.
+     */
+    CubicBezierCurve.prototype.destroy = function () {
+        this.startPoint.destroy();
+        this.endPoint.destroy();
+        this.startControlPoint.destroy();
+        this.endControlPoint.destroy();
+        this.isDestroyed = true;
     };
-    ;
     /**
      * Quick check for class instance.
      * Is there a better way?
@@ -2604,7 +2706,6 @@ var CubicBezierCurve = /** @class */ (function () {
         */
         return obj instanceof CubicBezierCurve;
     };
-    ;
     /**
      * Create an SVG path data representation of this bézier curve.
      *
@@ -2613,32 +2714,34 @@ var CubicBezierCurve = /** @class */ (function () {
      * or in other words<br>
      *   <pre>'M startoint.x startPoint.y C startControlPoint.x startControlPoint.y endControlPoint.x endControlPoint.y endPoint.x endPoint.y'</pre>
      *
+     * @deprecated DEPRECATION Please use the drawutilssvg library and an XMLSerializer instead.
      * @method toSVGPathData
      * @instance
      * @memberof CubicBezierCurve
      * @return {string}  The SVG path data string.
      **/
     CubicBezierCurve.prototype.toSVGPathData = function () {
-        var buffer = [];
-        buffer.push('M ');
-        buffer.push(this.startPoint.x.toString());
-        buffer.push(' ');
-        buffer.push(this.startPoint.y.toString());
-        buffer.push(' C ');
-        buffer.push(this.startControlPoint.x.toString());
-        buffer.push(' ');
-        buffer.push(this.startControlPoint.y.toString());
-        buffer.push(' ');
-        buffer.push(this.endControlPoint.x.toString());
-        buffer.push(' ');
-        buffer.push(this.endControlPoint.y.toString());
-        buffer.push(' ');
-        buffer.push(this.endPoint.x.toString());
-        buffer.push(' ');
-        buffer.push(this.endPoint.y.toString());
-        return buffer.join('');
+        // var buffer: Array<string> = [];
+        // buffer.push("M ");
+        // buffer.push(this.startPoint.x.toString());
+        // buffer.push(" ");
+        // buffer.push(this.startPoint.y.toString());
+        // buffer.push(" C ");
+        // buffer.push(this.startControlPoint.x.toString());
+        // buffer.push(" ");
+        // buffer.push(this.startControlPoint.y.toString());
+        // buffer.push(" ");
+        // buffer.push(this.endControlPoint.x.toString());
+        // buffer.push(" ");
+        // buffer.push(this.endControlPoint.y.toString());
+        // buffer.push(" ");
+        // buffer.push(this.endPoint.x.toString());
+        // buffer.push(" ");
+        // buffer.push(this.endPoint.y.toString());
+        // return buffer.join("");
+        console.warn("[Deprecation] Warning: the CubicBezierCurve.toSVGPathData method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
+        return "";
     };
-    ;
     /**
      * Convert this curve to a JSON string.
      *
@@ -2651,18 +2754,33 @@ var CubicBezierCurve = /** @class */ (function () {
     CubicBezierCurve.prototype.toJSON = function (prettyFormat) {
         var jsonString = "{ " + // begin object
             (prettyFormat ? "\n\t" : "") +
-            "\"startPoint\" : [" + this.getStartPoint().x + "," + this.getStartPoint().y + "], " +
+            '"startPoint" : [' +
+            this.getStartPoint().x +
+            "," +
+            this.getStartPoint().y +
+            "], " +
             (prettyFormat ? "\n\t" : "") +
-            "\"endPoint\" : [" + this.getEndPoint().x + "," + this.getEndPoint().y + "], " +
+            '"endPoint" : [' +
+            this.getEndPoint().x +
+            "," +
+            this.getEndPoint().y +
+            "], " +
             (prettyFormat ? "\n\t" : "") +
-            "\"startControlPoint\": [" + this.getStartControlPoint().x + "," + this.getStartControlPoint().y + "], " +
+            '"startControlPoint": [' +
+            this.getStartControlPoint().x +
+            "," +
+            this.getStartControlPoint().y +
+            "], " +
             (prettyFormat ? "\n\t" : "") +
-            "\"endControlPoint\" : [" + this.getEndControlPoint().x + "," + this.getEndControlPoint().y + "]" +
+            '"endControlPoint" : [' +
+            this.getEndControlPoint().x +
+            "," +
+            this.getEndControlPoint().y +
+            "]" +
             (prettyFormat ? "\n\t" : "") +
             " }"; // end object
         return jsonString;
     };
-    ;
     /**
      * Parse a Bézier curve from the given JSON string.
      *
@@ -2677,7 +2795,6 @@ var CubicBezierCurve = /** @class */ (function () {
         var obj = JSON.parse(jsonString);
         return CubicBezierCurve.fromObject(obj);
     };
-    ;
     /**
      * Try to convert the passed object to a CubicBezierCurve.
      *
@@ -2692,16 +2809,15 @@ var CubicBezierCurve = /** @class */ (function () {
         if (typeof obj !== "object")
             throw "Can only build from object.";
         if (!obj.startPoint)
-            throw "Object member \"startPoint\" missing.";
+            throw 'Object member "startPoint" missing.';
         if (!obj.endPoint)
-            throw "Object member \"endPoint\" missing.";
+            throw 'Object member "endPoint" missing.';
         if (!obj.startControlPoint)
-            throw "Object member \"startControlPoint\" missing.";
+            throw 'Object member "startControlPoint" missing.';
         if (!obj.endControlPoint)
-            throw "Object member \"endControlPoint\" missing.";
+            throw 'Object member "endControlPoint" missing.';
         return new CubicBezierCurve(new Vertex_1.Vertex(obj.startPoint[0], obj.startPoint[1]), new Vertex_1.Vertex(obj.endPoint[0], obj.endPoint[1]), new Vertex_1.Vertex(obj.startControlPoint[0], obj.startControlPoint[1]), new Vertex_1.Vertex(obj.endControlPoint[0], obj.endControlPoint[1]));
     };
-    ;
     /**
      * Convert a 4-element array of vertices to a cubic bézier curve.
      *
@@ -2718,7 +2834,6 @@ var CubicBezierCurve = /** @class */ (function () {
             throw "Can only build from array with four elements.";
         return new CubicBezierCurve(arr[0], arr[1], arr[2], arr[3]);
     };
-    ;
     /** @constant {number} */
     CubicBezierCurve.START_POINT = 0;
     /** @constant {number} */
@@ -2841,7 +2956,8 @@ exports.Grid = Grid;
  * @modified 2020-07-28 Changed the `delete` key code from 8 to 46.
  * @modified 2020-10-04 Changed `window` to `globalThis`.
  * @modified 2020-10-04 Added extended JSDoc.
- * @version  1.0.4
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @version  1.1.0
  *
  * @file KeyHandler
  * @public
@@ -2874,7 +2990,7 @@ var KeyHandler = /** @class */ (function () {
      * @memberof KeyHandler
      * @param {HTMLElement} options.element (optional) The HTML element to listen on; if null then 'window' will be used.
      * @param {boolean} options.trackAll (optional) Set to true if you want to keep track of _all_ keys (keyStatus).
-    **/
+     **/
     function KeyHandler(options) {
         this.downListeners = [];
         this.pressListeners = [];
@@ -2893,7 +3009,6 @@ var KeyHandler = /** @class */ (function () {
         // Install the listeners
         this.installListeners();
     }
-    ;
     /**
      * A helper function to fire key events from this KeyHandler.
      *
@@ -2911,7 +3026,6 @@ var KeyHandler = /** @class */ (function () {
         }
         return hasListener;
     };
-    ;
     /**
      * Internal function to fire a new keydown event to all listeners.
      * You should not call this function on your own unless you know what you do.
@@ -2927,10 +3041,9 @@ var KeyHandler = /** @class */ (function () {
     KeyHandler.prototype.fireDownEvent = function (e, handler) {
         if (handler.fireEvent(e, handler.downListeners) || handler.trackAllKeys) {
             // Down event has listeners. Update key state.
-            handler.keyStates[e.keyCode] = 'down';
+            handler.keyStates[e.keyCode] = "down";
         }
     };
-    ;
     /**
      * Internal function to fire a new keypress event to all listeners.
      * You should not call this function on your own unless you know what you do.
@@ -2946,7 +3059,6 @@ var KeyHandler = /** @class */ (function () {
     KeyHandler.prototype.firePressEvent = function (e, handler) {
         handler.fireEvent(e, handler.pressListeners);
     };
-    ;
     /**
      * Internal function to fire a new keyup event to all listeners.
      * You should not call this function on your own unless you know what you do.
@@ -2965,20 +3077,18 @@ var KeyHandler = /** @class */ (function () {
             delete handler.keyStates[e.keyCode];
         }
     };
-    ;
     /**
      * Resolve the key/name code.
      */
     KeyHandler.key2code = function (key) {
-        if (typeof key == 'number')
+        if (typeof key == "number")
             return key;
-        if (typeof key != 'string')
+        if (typeof key != "string")
             throw "Unknown key name or key type (should be a string or integer): " + key;
         if (KeyHandler.KEY_CODES[key])
             return KeyHandler.KEY_CODES[key];
         throw "Unknown key (cannot resolve key code): " + key;
     };
-    ;
     /**
      * Install the required listeners into the initially passed element.
      *
@@ -2987,20 +3097,24 @@ var KeyHandler = /** @class */ (function () {
      */
     KeyHandler.prototype.installListeners = function () {
         var _self = this;
-        this.element.addEventListener('keydown', this._keyDownListener = function (e) { _self.fireDownEvent(e, _self); });
-        this.element.addEventListener('keypress', this._keyPressListener = function (e) { _self.firePressEvent(e, _self); });
-        this.element.addEventListener('keyup', this._keyUpListener = function (e) { _self.fireUpEvent(e, _self); });
+        this.element.addEventListener("keydown", (this._keyDownListener = function (e) {
+            _self.fireDownEvent(e, _self);
+        }));
+        this.element.addEventListener("keypress", (this._keyPressListener = function (e) {
+            _self.firePressEvent(e, _self);
+        }));
+        this.element.addEventListener("keyup", (this._keyUpListener = function (e) {
+            _self.fireUpEvent(e, _self);
+        }));
     };
-    ;
     /**
      *  Remove all installed event listeners from the underlying element.
      */
     KeyHandler.prototype.releaseListeners = function () {
-        this.element.removeEventListener('keydown', this._keyDownListener);
-        this.element.removeEventListener('keypress', this._keyPressListener);
-        this.element.removeEventListener('keyup', this._keyUpListener);
+        this.element.removeEventListener("keydown", this._keyDownListener);
+        this.element.removeEventListener("keypress", this._keyPressListener);
+        this.element.removeEventListener("keyup", this._keyUpListener);
     };
-    ;
     /**
      * Listen for key down. This function allows chaining.
      *
@@ -3017,7 +3131,6 @@ var KeyHandler = /** @class */ (function () {
         this.downListeners.push({ key: key, keyCode: KeyHandler.key2code(key), listener: listener });
         return this;
     };
-    ;
     /**
      * Listen for key press.
      *
@@ -3034,7 +3147,6 @@ var KeyHandler = /** @class */ (function () {
         this.pressListeners.push({ key: key, keyCode: KeyHandler.key2code(key), listener: listener });
         return this;
     };
-    ;
     /**
      * Listen for key up.
      *
@@ -3051,22 +3163,30 @@ var KeyHandler = /** @class */ (function () {
         this.upListeners.push({ key: key, keyCode: KeyHandler.key2code(key), listener: listener });
         return this;
     };
-    ;
     /**
      * Check if a specific key is currently held pressed.
      *
      * @param {string|number} key - Any key identifier, key code or one from the KEY_CODES list.
      */
     KeyHandler.prototype.isDown = function (key) {
-        if (typeof key == 'number')
+        if (typeof key == "number")
             return this.keyStates[key] ? true : false;
         else
             return this.keyStates[KeyHandler.key2code(key)] ? true : false;
     };
+    /**
+     * This function should invalidate any installed listeners and invalidate this object.
+     * After calling this function the object might not hold valid data any more and
+     * should not be used any more.
+     */
+    KeyHandler.prototype.destroy = function () {
+        this.releaseListeners();
+    };
     /**
      * Source:
      * https://keycode.info/
      */
+    // prettier-ignore
     KeyHandler.KEY_CODES = {
         'break': 3,
         'backspace': 8,
@@ -3284,7 +3404,8 @@ exports.KeyHandler = KeyHandler;
  * @modified 2020-03-16 The Line.angle(Line) parameter is now optional. The baseline (x-axis) will be used if not defined.
  * @modified 2020-03-23 Ported to Typescript from JS.
  * @modified 2020-12-04 The `intersection` function returns undefined if both lines are parallel.
- * @version  2.1.3
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @version  2.2.0
  *
  * @file Line
  * @public
@@ -3348,20 +3469,19 @@ var Line = /** @class */ (function (_super) {
             return null;
         var a = this.a.y - line.a.y;
         var b = this.a.x - line.a.x;
-        var numerator1 = ((line.b.x - line.a.x) * a) - ((line.b.y - line.a.y) * b);
-        var numerator2 = ((this.b.x - this.a.x) * a) - ((this.b.y - this.a.y) * b);
+        var numerator1 = (line.b.x - line.a.x) * a - (line.b.y - line.a.y) * b;
+        var numerator2 = (this.b.x - this.a.x) * a - (this.b.y - this.a.y) * b;
         a = numerator1 / denominator; // NaN if parallel lines
         b = numerator2 / denominator;
         // Catch NaN?
-        var x = this.a.x + (a * (this.b.x - this.a.x));
-        var y = this.a.y + (a * (this.b.y - this.a.y));
+        var x = this.a.x + a * (this.b.x - this.a.x);
+        var y = this.a.y + a * (this.b.y - this.a.y);
         if (isNaN(a) || isNaN(x) || isNaN(y)) {
             return undefined;
         }
         // if we cast these lines infinitely in both directions, they intersect here:
         return new Vertex_1.Vertex(x, y);
     };
-    ;
     /**
      * Create an SVG representation of this line.
      *
@@ -3374,19 +3494,20 @@ var Line = /** @class */ (function (_super) {
      * @memberof Line
      **/
     Line.prototype.toSVGString = function (options) {
-        options = options || {};
-        var buffer = [];
-        buffer.push('<line');
-        if (options.className)
-            buffer.push(' class="' + options.className + '"');
-        buffer.push(' x1="' + this.a.x + '"');
-        buffer.push(' y1="' + this.a.y + '"');
-        buffer.push(' x2="' + this.b.x + '"');
-        buffer.push(' y2="' + this.b.y + '"');
-        buffer.push(' />');
-        return buffer.join('');
+        // options = options || {};
+        // var buffer = [];
+        // buffer.push( '<line' );
+        // if( options.className )
+        // buffer.push( ' class="' + options.className + '"' );
+        // buffer.push( ' x1="' + this.a.x + '"' );
+        // buffer.push( ' y1="' + this.a.y + '"' );
+        // buffer.push( ' x2="' + this.b.x + '"' );
+        // buffer.push( ' y2="' + this.b.y + '"' );
+        // buffer.push( ' />' );
+        // return buffer.join('');
+        console.warn("[Deprecation] Warning: the Line.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
+        return "";
     };
-    ;
     return Line;
 }(VertTuple_1.VertTuple));
 exports.Line = Line;
@@ -3548,41 +3669,41 @@ var MouseHandler = /** @class */ (function () {
         // | drag offset, ...) to the callbacks.
         // +-------------------------------------------------
         var _self = this;
-        this.handlers['mousemove'] = function (e) {
+        this.handlers["mousemove"] = function (e) {
             if (_self.listeners.mousemove)
-                _self.listeners.mousemove(_self.mkParams(e, 'mousemove'));
+                _self.listeners.mousemove(_self.mkParams(e, "mousemove"));
             if (_self.mouseDragPos && _self.listeners.drag)
-                _self.listeners.drag(_self.mkParams(e, 'drag'));
+                _self.listeners.drag(_self.mkParams(e, "drag"));
             if (_self.mouseDownPos)
                 _self.mouseDragPos = _self.relPos(e);
         };
-        this.handlers['mouseup'] = function (e) {
+        this.handlers["mouseup"] = function (e) {
             if (_self.listeners.mouseup)
-                _self.listeners.mouseup(_self.mkParams(e, 'mouseup'));
+                _self.listeners.mouseup(_self.mkParams(e, "mouseup"));
             _self.mouseDragPos = undefined;
             _self.mouseDownPos = undefined;
             _self.mouseButton = -1;
         };
-        this.handlers['mousedown'] = function (e) {
+        this.handlers["mousedown"] = function (e) {
             _self.mouseDragPos = _self.relPos(e);
             _self.mouseDownPos = _self.relPos(e);
             _self.mouseButton = e.button;
             if (_self.listeners.mousedown)
-                _self.listeners.mousedown(_self.mkParams(e, 'mousedown'));
+                _self.listeners.mousedown(_self.mkParams(e, "mousedown"));
         };
-        this.handlers['click'] = function (e) {
+        this.handlers["click"] = function (e) {
             if (_self.listeners.click)
-                _self.listeners.click(_self.mkParams(e, 'click'));
+                _self.listeners.click(_self.mkParams(e, "click"));
         };
-        this.handlers['wheel'] = function (e) {
+        this.handlers["wheel"] = function (e) {
             if (_self.listeners.wheel)
-                _self.listeners.wheel(_self.mkParams(e, 'wheel'));
+                _self.listeners.wheel(_self.mkParams(e, "wheel"));
         };
-        this.element.addEventListener('mousemove', this.handlers['mousemove']);
-        this.element.addEventListener('mouseup', this.handlers['mouseup']);
-        this.element.addEventListener('mousedown', this.handlers['mousedown']);
-        this.element.addEventListener('click', this.handlers['click']);
-        this.element.addEventListener('wheel', this.handlers['wheel']);
+        this.element.addEventListener("mousemove", this.handlers["mousemove"]);
+        this.element.addEventListener("mouseup", this.handlers["mouseup"]);
+        this.element.addEventListener("mousedown", this.handlers["mousedown"]);
+        this.element.addEventListener("click", this.handlers["click"]);
+        this.element.addEventListener("wheel", this.handlers["wheel"]);
     }
     /**
      * Get relative position from the given MouseEvent.
@@ -3595,11 +3716,8 @@ var MouseHandler = /** @class */ (function () {
      * @return {XYCoords} The relative mouse coordinates.
      */
     MouseHandler.prototype.relPos = function (e) {
-        return { x: e.offsetX,
-            y: e.offsetY
-        };
+        return { x: e.offsetX, y: e.offsetY };
     };
-    ;
     /**
      * Build the extended event params.
      *
@@ -3625,8 +3743,8 @@ var MouseHandler = /** @class */ (function () {
             rightButton: this.mouseButton == 2,
             mouseDownPos: this.mouseDownPos,
             draggedFrom: this.mouseDragPos,
-            wasDragged: (this.mouseDownPos != null && (this.mouseDownPos.x != rel.x || this.mouseDownPos.y != rel.y)),
-            dragAmount: (this.mouseDownPos != null ? { x: rel.x - this.mouseDragPos.x, y: rel.y - this.mouseDragPos.y } : { x: 0, y: 0 })
+            wasDragged: this.mouseDownPos != null && (this.mouseDownPos.x != rel.x || this.mouseDownPos.y != rel.y),
+            dragAmount: this.mouseDownPos != null ? { x: rel.x - this.mouseDragPos.x, y: rel.y - this.mouseDragPos.y } : { x: 0, y: 0 }
         };
         return xEvent;
     };
@@ -3677,14 +3795,13 @@ var MouseHandler = /** @class */ (function () {
      */
     MouseHandler.prototype.drag = function (callback) {
         if (this.listeners.drag)
-            this.throwAlreadyInstalled('drag');
+            this.throwAlreadyInstalled("drag");
         this.listeners.drag = callback;
-        this.listenFor('mousedown');
-        this.listenFor('mousemove');
-        this.listenFor('mouseup');
+        this.listenFor("mousedown");
+        this.listenFor("mousemove");
+        this.listenFor("mouseup");
         return this;
     };
-    ;
     /**
      * Installer function to listen for a specific event: mouse-move.
      * Pass your callbacks here.
@@ -3699,12 +3816,11 @@ var MouseHandler = /** @class */ (function () {
      */
     MouseHandler.prototype.move = function (callback) {
         if (this.listeners.mousemove)
-            this.throwAlreadyInstalled('mousemove');
-        this.listenFor('mousemove');
+            this.throwAlreadyInstalled("mousemove");
+        this.listenFor("mousemove");
         this.listeners.mousemove = callback;
         return this;
     };
-    ;
     /**
      * Installer function to listen for a specific event: mouse-up.
      * Pass your callbacks here.
@@ -3719,12 +3835,11 @@ var MouseHandler = /** @class */ (function () {
      */
     MouseHandler.prototype.up = function (callback) {
         if (this.listeners.mouseup)
-            this.throwAlreadyInstalled('mouseup');
-        this.listenFor('mouseup');
+            this.throwAlreadyInstalled("mouseup");
+        this.listenFor("mouseup");
         this.listeners.mouseup = callback;
         return this;
     };
-    ;
     /**
      * Installer function to listen for a specific event: mouse-down.
      * Pass your callbacks here.
@@ -3739,12 +3854,11 @@ var MouseHandler = /** @class */ (function () {
      */
     MouseHandler.prototype.down = function (callback) {
         if (this.listeners.mousedown)
-            this.throwAlreadyInstalled('mousedown');
-        this.listenFor('mousedown');
+            this.throwAlreadyInstalled("mousedown");
+        this.listenFor("mousedown");
         this.listeners.mousedown = callback;
         return this;
     };
-    ;
     /**
      * Installer function to listen for a specific event: mouse-click.
      * Pass your callbacks here.
@@ -3759,12 +3873,11 @@ var MouseHandler = /** @class */ (function () {
      */
     MouseHandler.prototype.click = function (callback) {
         if (this.listeners.click)
-            this.throwAlreadyInstalled('click');
-        this.listenFor('click');
+            this.throwAlreadyInstalled("click");
+        this.listenFor("click");
         this.listeners.click = callback;
         return this;
     };
-    ;
     /**
      * Installer function to listen for a specific event: mouse-wheel.
      * Pass your callbacks here.
@@ -3779,12 +3892,11 @@ var MouseHandler = /** @class */ (function () {
      */
     MouseHandler.prototype.wheel = function (callback) {
         if (this.listeners.wheel)
-            this.throwAlreadyInstalled('wheel');
-        this.listenFor('wheel');
+            this.throwAlreadyInstalled("wheel");
+        this.listenFor("wheel");
         this.listeners.wheel = callback;
         return this;
     };
-    ;
     /**
      * An internal function to throw events.
      *
@@ -3798,7 +3910,6 @@ var MouseHandler = /** @class */ (function () {
     MouseHandler.prototype.throwAlreadyInstalled = function (name) {
         throw "This MouseHandler already has a '" + name + "' callback. To keep the code simple there is only room for one.";
     };
-    ;
     /**
      * Call this when your work is done.
      *
@@ -3811,16 +3922,16 @@ var MouseHandler = /** @class */ (function () {
      * @return {void}
      */
     MouseHandler.prototype.destroy = function () {
-        this.unlistenFor('mousedown');
-        this.unlistenFor('mousemove');
-        this.unlistenFor('moseup');
-        this.unlistenFor('click');
-        this.unlistenFor('wheel');
-        this.element.removeEventListener('mousemove', this.handlers['mousemove']);
-        this.element.removeEventListener('mouseup', this.handlers['mousedown']);
-        this.element.removeEventListener('mousedown', this.handlers['mousedown']);
-        this.element.removeEventListener('click', this.handlers['click']);
-        this.element.removeEventListener('wheel', this.handlers['wheel']);
+        this.unlistenFor("mousedown");
+        this.unlistenFor("mousemove");
+        this.unlistenFor("moseup");
+        this.unlistenFor("click");
+        this.unlistenFor("wheel");
+        this.element.removeEventListener("mousemove", this.handlers["mousemove"]);
+        this.element.removeEventListener("mouseup", this.handlers["mousedown"]);
+        this.element.removeEventListener("mousedown", this.handlers["mousedown"]);
+        this.element.removeEventListener("click", this.handlers["click"]);
+        this.element.removeEventListener("wheel", this.handlers["wheel"]);
     };
     return MouseHandler;
 }());
@@ -3839,7 +3950,9 @@ exports.MouseHandler = MouseHandler;
  * @modified 2019-03-23 Added JSDoc tags.
  * @modified 2020-03-25 Ported this class from vanilla-JS to Typescript.
  * @modified 2021-01-20 Added UID.
- * @version 1.1.0
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @modified 2022-02-02 Cleared the `PBImage.toSVGString` function (deprecated). Use `drawutilssvg` instead.
+ * @version 1.2.0
  *
  * @file PBImage
  * @fileoverview As native Image objects have only a position and with
@@ -3877,7 +3990,6 @@ var PBImage = /** @class */ (function () {
         this.upperLeft = upperLeft;
         this.lowerRight = lowerRight;
     }
-    ;
     /**
      * Convert this vertex to SVG code.
      *
@@ -3892,7 +4004,16 @@ var PBImage = /** @class */ (function () {
         console.warn("PBImage is not yet SVG serializable. Returning empty SVG string.");
         return "";
     };
-    ;
+    /**
+     * This function should invalidate any installed listeners and invalidate this object.
+     * After calling this function the object might not hold valid data any more and
+     * should not be used.
+     */
+    PBImage.prototype.destroy = function () {
+        this.upperLeft.destroy();
+        this.lowerRight.destroy();
+        this.isDestroyed = true;
+    };
     return PBImage;
 }());
 exports.PBImage = PBImage;
@@ -3900,6 +4021,88 @@ exports.PBImage = PBImage;
 
 /***/ }),
 
+/***/ 196:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+
+/**
+ * @author   Ikaros Kappler
+ * @date     2021-11-16
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @version  1.1.0
+ **/
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.PBText = void 0;
+var UIDGenerator_1 = __webpack_require__(197);
+var Vertex_1 = __webpack_require__(421);
+/**
+ * @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
+ **/
+var PBText = /** @class */ (function () {
+    /**
+     * 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.
+     */
+    function PBText(text, anchor, options) {
+        /**
+         * Required to generate proper CSS classes and other class related IDs.
+         **/
+        this.className = "PBText";
+        this.uid = UIDGenerator_1.UIDGenerator.next();
+        this.text = text;
+        this.anchor = anchor !== null && anchor !== void 0 ? anchor : new Vertex_1.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
+     */
+    PBText.prototype.toSVGString = function (options) {
+        console.warn("[PBText.toSVGString()] This function is not implemented as it defines a deprecated method. Use the 'drawutilssvg.text()' method instead.");
+        return "";
+    };
+    /**
+     * This function should invalidate any installed listeners and invalidate this object.
+     * After calling this function the object might not hold valid data any more and
+     * should not be used.
+     */
+    PBText.prototype.destroy = function () {
+        this.anchor.destroy();
+        this.isDestroyed = true;
+    };
+    return PBText;
+}()); // END class
+exports.PBText = PBText;
+//# sourceMappingURL=PBText.js.map
+
+/***/ }),
+
 /***/ 919:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
@@ -3980,7 +4183,8 @@ var __webpack_unused_export__;
  * @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.
@@ -4008,6 +4212,7 @@ var VEllipseSector_1 = __webpack_require__(965);
 var Vector_1 = __webpack_require__(73);
 var Vertex_1 = __webpack_require__(421);
 var VertexAttr_1 = __webpack_require__(861);
+var PBText_1 = __webpack_require__(196);
 /**
  * @classdesc The main class of the PlotBoilerplate.
  *
@@ -4246,6 +4451,12 @@ var PlotBoilerplate = /** @class */ (function () {
             image: {
                 color: "#a8a8a8",
                 lineWidth: 1
+            },
+            text: {
+                color: "rgba(192,0,128,0.5)",
+                lineWidth: 1,
+                fill: true,
+                anchor: true
             }
         }; // END drawConfig
         // +---------------------------------------------------------------------------------
@@ -4367,7 +4578,7 @@ var PlotBoilerplate = /** @class */ (function () {
         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");
@@ -4473,7 +4684,6 @@ var PlotBoilerplate = /** @class */ (function () {
     PlotBoilerplate.prototype.add = function (drawable, redraw) {
         if (Array.isArray(drawable)) {
             var arr = drawable;
-            // for( var i in arr )
             for (var i = 0; i < arr.length; i++) {
                 this.add(arr[i], false);
             }
@@ -4519,9 +4729,9 @@ var PlotBoilerplate = /** @class */ (function () {
         }
         else if (drawable instanceof Polygon_1.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_1.Triangle) {
             this.drawables.push(drawable);
@@ -4533,8 +4743,9 @@ var PlotBoilerplate = /** @class */ (function () {
             this.drawables.push(drawable);
             var 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);
@@ -4553,6 +4764,11 @@ var PlotBoilerplate = /** @class */ (function () {
             });
             drawable.lowerRight.attr.selectable = false;
         }
+        else if (drawable instanceof PBText_1.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 + ".";
         }
@@ -4600,7 +4816,7 @@ var PlotBoilerplate = /** @class */ (function () {
             }
         }
         for (var i = 0; i < this.drawables.length; i++) {
-            if (this.drawables[i] === drawable) {
+            if (this.drawables[i] === drawable || this.drawables[i].uid === drawable.uid) {
                 this.drawables.splice(i, 1);
                 if (removeWithVertices) {
                     // Check if some listeners need to be removed
@@ -4651,6 +4867,9 @@ var PlotBoilerplate = /** @class */ (function () {
                         this.removeVertex(drawable.upperLeft, false);
                         this.removeVertex(drawable.lowerRight, false);
                     }
+                    else if (drawable instanceof PBText_1.PBText) {
+                        this.removeVertex(drawable.anchor, false);
+                    }
                 } // END removeWithVertices
                 if (redraw) {
                     this.redraw();
@@ -4672,8 +4891,9 @@ var PlotBoilerplate = /** @class */ (function () {
         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;
             }
         }
@@ -4708,8 +4928,9 @@ var PlotBoilerplate = /** @class */ (function () {
      **/
     PlotBoilerplate.prototype.getVertexNear = function (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;
     };
     /**
@@ -4976,6 +5197,16 @@ var PlotBoilerplate = /** @class */ (function () {
                 d.lowerRight.attr.renderTime = renderTime;
             }
         }
+        else if (d instanceof PBText_1.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.");
         }
@@ -5255,7 +5486,6 @@ var PlotBoilerplate = /** @class */ (function () {
         // 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) {
@@ -5275,10 +5505,7 @@ var PlotBoilerplate = /** @class */ (function () {
      * @return {void}
      **/
     PlotBoilerplate.prototype.handleClick = function (e) {
-        // x:number,y:number) {
         var _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);
@@ -5295,7 +5522,7 @@ var PlotBoilerplate = /** @class */ (function () {
                 }
                 _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();
             }
@@ -5593,6 +5820,7 @@ var PlotBoilerplate = /** @class */ (function () {
                         _self.draggedElements = [];
                     };
                     var afProps = {
+                        // touchStart: (evt: TouchEvent) => {
                         touchStart: function (evt) {
                             if (evt.touches.length == 1) {
                                 touchMovePos = new Vertex_1.Vertex(relPos_1({ x: evt.touches[0].clientX, y: evt.touches[0].clientY }));
@@ -5695,10 +5923,13 @@ var PlotBoilerplate = /** @class */ (function () {
                             _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_typescript_1.default(this.eventCatcher ? this.eventCatcher : this.canvas, afProps);
+                    }
                 }
                 catch (e) {
                     console.error("Failed to initialize AlloyFinger!");
@@ -5999,7 +6230,11 @@ __webpack_unused_export__ = PlotBoilerplate;
  * @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.
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @modified 2022-02-02 Cleared the `Polygon.toSVGString` function (deprecated). Use `drawutilssvg` instead.
+ * @version 1.9.0
  *
  * @file Polygon
  * @public
@@ -6036,12 +6271,11 @@ var Polygon = /** @class */ (function () {
          **/
         this.className = "Polygon";
         this.uid = UIDGenerator_1.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.
      *
@@ -6053,7 +6287,6 @@ var Polygon = /** @class */ (function () {
     Polygon.prototype.addVertex = function (vert) {
         this.vertices.push(vert);
     };
-    ;
     /**
      * Get the polygon vertex at the given position (index).
      *
@@ -6076,7 +6309,6 @@ var Polygon = /** @class */ (function () {
         else
             return this.vertices[index % this.vertices.length];
     };
-    ;
     /**
      * Move the polygon's vertices by the given amount.
      *
@@ -6092,7 +6324,6 @@ var Polygon = /** @class */ (function () {
         }
         return this;
     };
-    ;
     /**
      * Check if the given vertex is inside this polygon.<br>
      * <br>
@@ -6112,14 +6343,12 @@ var Polygon = /** @class */ (function () {
         for (var i = 0, j = this.vertices.length - 1; i < this.vertices.length; j = i++) {
             var xi = this.vertices[i].x, yi = this.vertices[i].y;
             var 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).
      *
@@ -6133,7 +6362,6 @@ var Polygon = /** @class */ (function () {
     Polygon.prototype.area = function () {
         return Polygon.utils.area(this.vertices);
     };
-    ;
     /**
      * Calulate the signed polyon area by interpreting the polygon as a matrix
      * and calculating its determinant.
@@ -6146,7 +6374,6 @@ var Polygon = /** @class */ (function () {
     Polygon.prototype.signedArea = function () {
         return Polygon.utils.signedArea(this.vertices);
     };
-    ;
     /**
      * Get the winding order of this polgon: clockwise or counterclockwise.
      *
@@ -6158,7 +6385,28 @@ var Polygon = /** @class */ (function () {
     Polygon.prototype.isClockwise = function () {
         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}
+     */
+    Polygon.prototype.perimeter = function () {
+        var 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.
      *
@@ -6171,14 +6419,13 @@ var Polygon = /** @class */ (function () {
      **/
     Polygon.prototype.scale = function (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.
      *
@@ -6195,7 +6442,52 @@ var Polygon = /** @class */ (function () {
         }
         return this;
     };
-    ;
+    /**
+     * Convert this polygon into a new polygon with n evenly distributed vertices.
+     *
+     * @param {number} pointCount - Must not be negative.
+     */
+    Polygon.prototype.getEvenDistributionPolygon = function (pointCount) {
+        if (pointCount <= 0) {
+            throw new Error("pointCount must be larger than zero; is " + pointCount + ".");
+        }
+        var result = new Polygon([], this.isOpen);
+        if (this.vertices.length === 0) {
+            return result;
+        }
+        // Fetch and add the start point from the source polygon
+        var polygonPoint = new Vertex_1.Vertex(this.vertices[0]);
+        result.vertices.push(polygonPoint);
+        if (this.vertices.length === 1) {
+            return result;
+        }
+        var perimeter = this.perimeter();
+        var stepSize = perimeter / pointCount;
+        var n = this.vertices.length;
+        var polygonIndex = 1;
+        var nextPolygonPoint = new Vertex_1.Vertex(this.vertices[1]);
+        var segmentLength = polygonPoint.distance(nextPolygonPoint);
+        var loopMax = this.isOpen ? n : n + 1;
+        var curSegmentU = stepSize;
+        var i = 1;
+        while (i < pointCount && polygonIndex < loopMax) {
+            // Check if next eq point is inside this segment
+            if (curSegmentU < segmentLength) {
+                var newPoint = polygonPoint.clone().lerpAbs(nextPolygonPoint, curSegmentU);
+                result.vertices.push(newPoint);
+                curSegmentU += stepSize;
+                i++;
+            }
+            else {
+                polygonIndex++;
+                polygonPoint = nextPolygonPoint;
+                nextPolygonPoint = new Vertex_1.Vertex(this.vertices[polygonIndex % n]);
+                curSegmentU = curSegmentU - segmentLength;
+                segmentLength = polygonPoint.distance(nextPolygonPoint);
+            }
+        }
+        return result;
+    };
     /**
      * Get the bounding box (bounds) of this polygon.
      *
@@ -6207,7 +6499,6 @@ var Polygon = /** @class */ (function () {
     Polygon.prototype.getBounds = function () {
         return Bounds_1.Bounds.computeFromVertices(this.vertices);
     };
-    ;
     /**
      * Convert this polygon to a sequence of quadratic Bézier curves.<br>
      * <br>
@@ -6239,7 +6530,6 @@ var Polygon = /** @class */ (function () {
         }
         return qbezier;
     };
-    ;
     /**
      * Convert this polygon to a quadratic bezier curve, represented as an SVG data string.
      *
@@ -6252,13 +6542,12 @@ var Polygon = /** @class */ (function () {
         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>
@@ -6275,7 +6564,7 @@ var Polygon = /** @class */ (function () {
      * @memberof Polygon
      **/
     Polygon.prototype.toCubicBezierData = function (threshold) {
-        if (typeof threshold == 'undefined')
+        if (typeof threshold == "undefined")
             threshold = 1.0;
         if (this.vertices.length < 3)
             return [];
@@ -6299,7 +6588,6 @@ var Polygon = /** @class */ (function () {
         }
         return cbezier;
     };
-    ;
     /**
      * Convert this polygon to a cubic bezier curve, represented as an SVG data string.
      *
@@ -6312,13 +6600,23 @@ var Polygon = /** @class */ (function () {
         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.
      *
@@ -6337,7 +6635,6 @@ var Polygon = /** @class */ (function () {
         }
         return BezierPath_1.BezierPath.fromArray(pathdata);
     };
-    ;
     /**
      * Create an SVG representation of this polygon.
      *
@@ -6349,31 +6646,42 @@ var Polygon = /** @class */ (function () {
      * @memberof Polygon
      **/
     Polygon.prototype.toSVGString = function (options) {
-        options = options || {};
-        var buffer = [];
-        buffer.push('<path');
-        if (options.className)
-            buffer.push(' class="' + options.className + '"');
-        buffer.push(' d="');
-        if (this.vertices.length > 0) {
-            buffer.push('M ');
-            buffer.push(this.vertices[0].x.toString());
-            buffer.push(' ');
-            buffer.push(this.vertices[0].y.toString());
-            for (var i = 1; i < this.vertices.length; i++) {
-                buffer.push(' L ');
-                buffer.push(this.vertices[i].x.toString());
-                buffer.push(' ');
-                buffer.push(this.vertices[i].y.toString());
-            }
-            if (!this.isOpen) {
-                buffer.push(' Z');
-            }
+        // options = options || {};
+        // var buffer: Array<string> = [];
+        // buffer.push("<path");
+        // if (options.className) buffer.push(' class="' + options.className + '"');
+        // buffer.push(' d="');
+        // if (this.vertices.length > 0) {
+        //   buffer.push("M ");
+        //   buffer.push(this.vertices[0].x.toString());
+        //   buffer.push(" ");
+        //   buffer.push(this.vertices[0].y.toString());
+        //   for (var i = 1; i < this.vertices.length; i++) {
+        //     buffer.push(" L ");
+        //     buffer.push(this.vertices[i].x.toString());
+        //     buffer.push(" ");
+        //     buffer.push(this.vertices[i].y.toString());
+        //   }
+        //   if (!this.isOpen) {
+        //     buffer.push(" Z");
+        //   }
+        // }
+        // buffer.push('" />');
+        // return buffer.join("");
+        console.warn("[Deprecation] Warning: the Polygon.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
+        return "";
+    };
+    /**
+     * This function should invalidate any installed listeners and invalidate this object.
+     * After calling this function the object might not hold valid data any more and
+     * should not be used.
+     */
+    Polygon.prototype.destroy = function () {
+        for (var i = 0; i < this.vertices.length; i++) {
+            this.vertices[i].destroy();
         }
-        buffer.push('" />');
-        return buffer.join('');
+        this.isDestroyed = true;
     };
-    ;
     Polygon.utils = {
         /**
          * Calculate the area of the given polygon (unsigned).
@@ -6392,8 +6700,8 @@ var Polygon = /** @class */ (function () {
                 var addY = vertices[(i + 1) % l].y;
                 var subX = vertices[(i + 1) % l].x;
                 var 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);
         },
@@ -6446,7 +6754,9 @@ exports.Polygon = Polygon;
  * @modified  2020-12-28 Added the `getArea` function.
  * @modified  2021-01-20 Added UID.
  * @modified  2021-01-22 Always updating circumcircle when retieving it.
- * @version   2.5.1
+ * @modified  2022-02-02 Added the `destroy` method.
+ * @modified  2022-02-02 Cleared the `Triangle.toSVGString` function (deprecated). Use `drawutilssvg` instead.
+ * @version   2.6.0
  *
  * @file Triangle
  * @fileoverview A simple triangle class: three vertices.
@@ -6516,7 +6826,6 @@ var Triangle = /** @class */ (function () {
             throw "Cannot create triangle from array with less than three vertices (" + arr.length + ")";
         return new Triangle(arr[0], arr[1], arr[2]);
     };
-    ;
     /**
      * Get the area of this triangle. The returned area is never negative.
      *
@@ -6532,7 +6841,6 @@ var Triangle = /** @class */ (function () {
     Triangle.prototype.getArea = function () {
         return Math.abs(Triangle.utils.signedArea(this.a.x, this.a.y, this.b.x, this.b.y, this.c.x, this.c.y));
     };
-    ;
     /**
      * Get the centroid of this triangle.
      *
@@ -6546,7 +6854,6 @@ var Triangle = /** @class */ (function () {
     Triangle.prototype.getCentroid = function () {
         return new Vertex_1.Vertex((this.a.x + this.b.x + this.c.x) / 3, (this.a.y + this.b.y + this.c.y) / 3);
     };
-    ;
     /**
      * Scale the triangle towards its centroid.
      *
@@ -6563,7 +6870,6 @@ var Triangle = /** @class */ (function () {
         this.c.scale(factor, centroid);
         return this;
     };
-    ;
     /**
      * Get the circumcircle of this triangle.
      *
@@ -6580,11 +6886,10 @@ var Triangle = /** @class */ (function () {
      * @memberof Triangle
      */
     Triangle.prototype.getCircumcircle = function () {
-        // if( !this.center || !this.radius ) 
+        // if( !this.center || !this.radius )
         this.calcCircumcircle();
         return new Circle_1.Circle(this.center.clone(), this.radius);
     };
-    ;
     /**
      * Check if this triangle and the passed triangle share an
      * adjacent edge.
@@ -6604,7 +6909,6 @@ var Triangle = /** @class */ (function () {
         var c = this.c.equals(tri.a) || this.c.equals(tri.b) || this.c.equals(tri.c);
         return (a && b) || (a && c) || (b && c);
     };
-    ;
     /**
      * Get that vertex of this triangle (a,b,c) that is not vert1 nor vert2 of
      * the passed two.
@@ -6617,14 +6921,13 @@ var Triangle = /** @class */ (function () {
      * @memberof Triangle
      */
     Triangle.prototype.getThirdVertex = function (vert1, vert2) {
-        if (this.a.equals(vert1) && this.b.equals(vert2) || this.a.equals(vert2) && this.b.equals(vert1))
+        if ((this.a.equals(vert1) && this.b.equals(vert2)) || (this.a.equals(vert2) && this.b.equals(vert1)))
             return this.c;
-        if (this.b.equals(vert1) && this.c.equals(vert2) || this.b.equals(vert2) && this.c.equals(vert1))
+        if ((this.b.equals(vert1) && this.c.equals(vert2)) || (this.b.equals(vert2) && this.c.equals(vert1)))
             return this.a;
         //if( this.c.equals(vert1) && this.a.equals(vert2) || this.c.equals(vert2) && this.a.equals(vert1) )
         return this.b;
     };
-    ;
     /**
      * Re-compute the circumcircle of this triangle (if the vertices
      * have changed).
@@ -6664,8 +6967,7 @@ var Triangle = /** @class */ (function () {
         }
         this.radius_squared = dx * dx + dy * dy;
         this.radius = Math.sqrt(this.radius_squared);
-    };
-    ; // END calcCircumcircle
+    }; // END calcCircumcircle
     /**
      * Check if the passed vertex is inside this triangle's
      * circumcircle.
@@ -6680,9 +6982,8 @@ var Triangle = /** @class */ (function () {
         var dx = this.center.x - v.x;
         var dy = this.center.y - v.y;
         var dist_squared = dx * dx + dy * dy;
-        return (dist_squared <= this.radius_squared);
+        return dist_squared <= this.radius_squared;
     };
-    ;
     /**
      * Get the rectangular bounds for this triangle.
      *
@@ -6694,7 +6995,6 @@ var Triangle = /** @class */ (function () {
     Triangle.prototype.bounds = function () {
         return new Bounds_1.Bounds(new Vertex_1.Vertex(Triangle.utils.min3(this.a.x, this.b.x, this.c.x), Triangle.utils.min3(this.a.y, this.b.y, this.c.y)), new Vertex_1.Vertex(Triangle.utils.max3(this.a.x, this.b.x, this.c.x), Triangle.utils.max3(this.a.y, this.b.y, this.c.y)));
     };
-    ;
     /**
      * Convert this triangle to a polygon instance.
      *
@@ -6708,7 +7008,6 @@ var Triangle = /** @class */ (function () {
     Triangle.prototype.toPolygon = function () {
         return new Polygon_1.Polygon([this.a, this.b, this.c]);
     };
-    ;
     /**
      * Get the determinant of this triangle.
      *
@@ -6721,7 +7020,6 @@ var Triangle = /** @class */ (function () {
         // (b.y - a.y)*(c.x - b.x) - (c.y - b.y)*(b.x - a.x);
         return (this.b.y - this.a.y) * (this.c.x - this.b.x) - (this.c.y - this.b.y) * (this.b.x - this.a.x);
     };
-    ;
     /**
      * Checks if the passed vertex (p) is inside this triangle.
      *
@@ -6736,7 +7034,6 @@ var Triangle = /** @class */ (function () {
     Triangle.prototype.containsPoint = function (p) {
         return Triangle.utils.pointIsInTriangle(p.x, p.y, this.a.x, this.a.y, this.b.x, this.b.y, this.c.x, this.c.y);
     };
-    ;
     /**
      * Get that inner triangle which defines the maximal incircle.
      *
@@ -6755,7 +7052,6 @@ var Triangle = /** @class */ (function () {
         var circleIntersC = lineC.getClosestPoint(intersection);
         return new Triangle(circleIntersA, circleIntersB, circleIntersC);
     };
-    ;
     /**
      * Get the incircle of this triangle. That is the circle that touches each side
      * of this triangle in exactly one point.
@@ -6767,7 +7063,6 @@ var Triangle = /** @class */ (function () {
     Triangle.prototype.getIncircle = function () {
         return this.getIncircularTriangle().getCircumcircle();
     };
-    ;
     /**
      * Get the incenter of this triangle (which is the center of the circumcircle).
      *
@@ -6781,7 +7076,6 @@ var Triangle = /** @class */ (function () {
             this.calcCircumcircle();
         return this.center.clone();
     };
-    ;
     /**
      * Converts this triangle into a human-readable string.
      *
@@ -6791,9 +7085,8 @@ var Triangle = /** @class */ (function () {
      * @memberof Triangle
      */
     Triangle.prototype.toString = function () {
-        return '{ a : ' + this.a.toString() + ', b : ' + this.b.toString() + ', c : ' + this.c.toString() + '}';
+        return "{ a : " + this.a.toString() + ", b : " + this.b.toString() + ", c : " + this.c.toString() + "}";
     };
-    ;
     /**
      * Create an SVG representation of this triangle.
      *
@@ -6805,32 +7098,43 @@ var Triangle = /** @class */ (function () {
      * @memberof Triangle
      **/
     Triangle.prototype.toSVGString = function (options) {
-        options = options || {};
-        var buffer = [];
-        buffer.push('<path');
-        if (options.className)
-            buffer.push(' class="' + options.className + '"');
-        buffer.push(' d="');
-        var vertices = [this.a, this.b, this.c];
-        if (vertices.length > 0) {
-            buffer.push('M ');
-            buffer.push(vertices[0].x);
-            buffer.push(' ');
-            buffer.push(vertices[0].y);
-            for (var i = 1; i < vertices.length; i++) {
-                buffer.push(' L ');
-                buffer.push(vertices[i].x);
-                buffer.push(' ');
-                buffer.push(vertices[i].y);
-            }
-            //if( !this.isOpen ) {
-            buffer.push(' Z');
-            //}
-        }
-        buffer.push('" />');
-        return buffer.join('');
+        // options = options || {};
+        // var buffer = [];
+        // buffer.push("<path");
+        // if (options.className) buffer.push(' class="' + options.className + '"');
+        // buffer.push(' d="');
+        // var vertices = [this.a, this.b, this.c];
+        // if (vertices.length > 0) {
+        //   buffer.push("M ");
+        //   buffer.push(vertices[0].x);
+        //   buffer.push(" ");
+        //   buffer.push(vertices[0].y);
+        //   for (var i = 1; i < vertices.length; i++) {
+        //     buffer.push(" L ");
+        //     buffer.push(vertices[i].x);
+        //     buffer.push(" ");
+        //     buffer.push(vertices[i].y);
+        //   }
+        //   //if( !this.isOpen ) {
+        //   buffer.push(" Z");
+        //   //}
+        // }
+        // buffer.push('" />');
+        // return buffer.join("");
+        console.warn("[Deprecation] Warning: the Triangle.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
+        return "";
+    };
+    /**
+     * This function should invalidate any installed listeners and invalidate this object.
+     * After calling this function the object might not hold valid data any more and
+     * should not be used.
+     */
+    Triangle.prototype.destroy = function () {
+        this.a.destroy();
+        this.b.destroy();
+        this.c.destroy();
+        this.isDestroyed = true;
     };
-    ;
     /**
      * An epsilon for comparison.
      * This should be the same epsilon as in Vertex.
@@ -6841,10 +7145,10 @@ var Triangle = /** @class */ (function () {
     Triangle.utils = {
         // Used in the bounds() function.
         max3: function (a, b, c) {
-            return (a >= b && a >= c) ? a : (b >= a && b >= c) ? b : c;
+            return a >= b && a >= c ? a : b >= a && b >= c ? b : c;
         },
         min3: function (a, b, c) {
-            return (a <= b && a <= c) ? a : (b <= a && b <= c) ? b : c;
+            return a <= b && a <= c ? a : b <= a && b <= c ? b : c;
         },
         signedArea: function (p0x, p0y, p1x, p1y, p2x, p2y) {
             return 0.5 * (-p1y * p2x + p0y * (-p1x + p2x) + p0x * (p1y - p2y) + p1x * p2y);
@@ -6860,9 +7164,9 @@ var Triangle = /** @class */ (function () {
             //   http://stackoverflow.com/questions/2049582/how-to-determine-a-point-in-a-2d-triangle
             // var area : number = 1/2*(-p1y*p2x + p0y*(-p1x + p2x) + p0x*(p1y - p2y) + p1x*p2y);
             var area = Triangle.utils.signedArea(p0x, p0y, p1x, p1y, p2x, p2y);
-            var s = 1 / (2 * area) * (p0y * p2x - p0x * p2y + (p2y - p0y) * px + (p0x - p2x) * py);
-            var t = 1 / (2 * area) * (p0x * p1y - p0y * p1x + (p0y - p1y) * px + (p1x - p0x) * py);
-            return s > 0 && t > 0 && (1 - s - t) > 0;
+            var s = (1 / (2 * area)) * (p0y * p2x - p0x * p2y + (p2y - p0y) * px + (p0x - p2x) * py);
+            var t = (1 / (2 * area)) * (p0x * p1y - p0y * p1x + (p0y - p1y) * px + (p1x - p0x) * py);
+            return s > 0 && t > 0 && 1 - s - t > 0;
         }
     };
     return Triangle;
@@ -6918,7 +7222,9 @@ exports.UIDGenerator = UIDGenerator;
  * @modified 2021-03-10 Added the `toCubicBezier` method.
  * @modified 2021-03-15 Added `VEllipse.quarterSegmentCount` and `VEllipse.scale` functions.
  * @modified 2021-03-19 Added the `VEllipse.rotate` function.
- * @version  1.2.2
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @modified 2022-02-02 Cleared the `VEllipse.toSVGString` function (deprecated). Use `drawutilssvg` instead.
+ * @version  1.3.0
  *
  * @file VEllipse
  * @fileoverview Ellipses with a center and an x- and a y-axis (stored as a vertex).
@@ -7251,17 +7557,28 @@ var VEllipse = /** @class */ (function () {
      * @return string The SVG string
      */
     VEllipse.prototype.toSVGString = function (options) {
-        options = options || {};
-        var buffer = [];
-        buffer.push("<ellipse");
-        if (options.className)
-            buffer.push(' class="' + options.className + '"');
-        buffer.push(' cx="' + this.center.x + '"');
-        buffer.push(' cy="' + this.center.y + '"');
-        buffer.push(' rx="' + this.axis.x + '"');
-        buffer.push(' ry="' + this.axis.y + '"');
-        buffer.push(" />");
-        return buffer.join("");
+        // options = options || {};
+        // var buffer: Array<string> = [];
+        // buffer.push("<ellipse");
+        // if (options.className) buffer.push(' class="' + options.className + '"');
+        // buffer.push(' cx="' + this.center.x + '"');
+        // buffer.push(' cy="' + this.center.y + '"');
+        // buffer.push(' rx="' + this.axis.x + '"');
+        // buffer.push(' ry="' + this.axis.y + '"');
+        // buffer.push(" />");
+        // return buffer.join("");
+        console.warn("[Deprecation] Warning: the VEllipse.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
+        return "";
+    };
+    /**
+     * This function should invalidate any installed listeners and invalidate this object.
+     * After calling this function the object might not hold valid data any more and
+     * should not be used.
+     */
+    VEllipse.prototype.destroy = function () {
+        this.center.destroy();
+        this.axis.destroy();
+        this.isDestroyed = true;
     };
     /**
      * A static collection of ellipse-related helper functions.
@@ -7337,7 +7654,8 @@ exports.VEllipse = VEllipse;
  *
  * @author  Ikaros Kappler
  * @date    2021-02-26
- * @version 1.0.0
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @version 1.1.0
  */
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.VEllipseSector = void 0;
@@ -7431,6 +7749,15 @@ var VEllipseSector = /** @class */ (function () {
         }
         return curves;
     };
+    /**
+     * This function should invalidate any installed listeners and invalidate this object.
+     * After calling this function the object might not hold valid data any more and
+     * should not be used.
+     */
+    VEllipseSector.prototype.destroy = function () {
+        this.ellipse.destroy();
+        this.isDestroyed = true;
+    };
     VEllipseSector.ellipseSectorUtils = {
         /**
          * Helper function to convert an elliptic section to SVG arc params (for the `d` attribute).
@@ -7615,7 +7942,9 @@ exports.VEllipseSector = VEllipseSector;
  * @modified 2019-12-04 Added the Vector.inv() function.
  * @modified 2020-03-23 Ported to Typescript from JS.
  * @modified 2021-01-20 Added UID.
- * @version  1.3.0
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @modified 2022-02-02 Cleared the `Vector.toSVGString` function (deprecated). Use `drawutilssvg` instead.
+ * @version  1.4.0
  *
  * @file Vector
  * @public
@@ -7665,7 +7994,6 @@ var Vector = /** @class */ (function (_super) {
         _this.className = "Vector";
         return _this;
     }
-    ;
     /**
      * Get the perpendicular of this vector which is located at a.
      *
@@ -7680,7 +8008,6 @@ var Vector = /** @class */ (function (_super) {
         v.b.add(this.a);
         return v;
     };
-    ;
     /**
      * The inverse of a vector is a vector witht the same magnitude but oppose direction.
      *
@@ -7694,7 +8021,6 @@ var Vector = /** @class */ (function (_super) {
         this.b = tmp;
         return this;
     };
-    ;
     /**
      * This function computes the inverse of the vector, which means 'a' stays untouched.
      *
@@ -7705,7 +8031,6 @@ var Vector = /** @class */ (function (_super) {
         this.b.y = this.a.y - (this.b.y - this.a.y);
         return this;
     };
-    ;
     /**
      * Get the intersection if this vector and the specified vector.
      *
@@ -7721,16 +8046,15 @@ var Vector = /** @class */ (function (_super) {
             return null;
         var a = this.a.y - line.a.y;
         var b = this.a.x - line.a.x;
-        var numerator1 = ((line.b.x - line.a.x) * a) - ((line.b.y - line.a.y) * b);
-        var numerator2 = ((this.b.x - this.a.x) * a) - ((this.b.y - this.a.y) * b);
+        var numerator1 = (line.b.x - line.a.x) * a - (line.b.y - line.a.y) * b;
+        var numerator2 = (this.b.x - this.a.x) * a - (this.b.y - this.a.y) * b;
         a = numerator1 / denominator; // NaN if parallel lines
         b = numerator2 / denominator;
         // TODO:
         // FOR A VECTOR THE LINE-INTERSECTION MUST BE ON BOTH VECTORS
         // if we cast these lines infinitely in both directions, they intersect here:
-        return new Vertex_1.Vertex(this.a.x + (a * (this.b.x - this.a.x)), this.a.y + (a * (this.b.y - this.a.y)));
+        return new Vertex_1.Vertex(this.a.x + a * (this.b.x - this.a.x), this.a.y + a * (this.b.y - this.a.y));
     };
-    ;
     /**
      * Create an SVG representation of this line.
      *
@@ -7743,31 +8067,30 @@ var Vector = /** @class */ (function (_super) {
      * @memberof Vector
      **/
     Vector.prototype.toSVGString = function (options) {
-        options = options || {};
-        var buffer = [];
-        var vertices = Vector.utils.buildArrowHead(this.a, this.b, 8, 1.0, 1.0);
-        buffer.push('<g');
-        if (options.className)
-            buffer.push(' class="' + options.className + '"');
-        buffer.push('>');
-        buffer.push('   <line');
-        buffer.push(' x1="' + this.a.x + '"');
-        buffer.push(' y1="' + this.a.y + '"');
-        buffer.push(' x2="' + vertices[0].x + '"');
-        buffer.push(' y2="' + vertices[0].y + '"');
-        buffer.push(' />');
-        // Add arrow head
-        buffer.push('   <polygon points="');
-        for (var i = 0; i < vertices.length; i++) {
-            if (i > 0)
-                buffer.push(' ');
-            buffer.push('' + vertices[i].x + ',' + vertices[i].y);
-        }
-        buffer.push('"/>');
-        buffer.push('</g>');
-        return buffer.join('');
+        // options = options || {};
+        // var buffer = [];
+        // var vertices = Vector.utils.buildArrowHead(this.a, this.b, 8, 1.0, 1.0);
+        // buffer.push("<g");
+        // if (options.className) buffer.push(' class="' + options.className + '"');
+        // buffer.push(">");
+        // buffer.push("   <line");
+        // buffer.push(' x1="' + this.a.x + '"');
+        // buffer.push(' y1="' + this.a.y + '"');
+        // buffer.push(' x2="' + vertices[0].x + '"');
+        // buffer.push(' y2="' + vertices[0].y + '"');
+        // buffer.push(" />");
+        // // Add arrow head
+        // buffer.push('   <polygon points="');
+        // for (var i = 0; i < vertices.length; i++) {
+        //   if (i > 0) buffer.push(" ");
+        //   buffer.push("" + vertices[i].x + "," + vertices[i].y);
+        // }
+        // buffer.push('"/>');
+        // buffer.push("</g>");
+        // return buffer.join("");
+        console.warn("[Deprecation] Warning: the Vector.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
+        return "";
     };
-    ;
     Vector.utils = {
         /**
          * Generate a four-point arrow head, starting at the vector end minus the
@@ -7797,10 +8120,10 @@ var Vector = /** @class */ (function (_super) {
         buildArrowHead: function (zA, zB, headlen, scaleX, scaleY) {
             var angle = Math.atan2((zB.y - zA.y) * scaleY, (zB.x - zA.x) * scaleX);
             var vertices = [];
-            vertices.push(new Vertex_1.Vertex(zB.x * scaleX - (headlen) * Math.cos(angle), zB.y * scaleY - (headlen) * Math.sin(angle)));
-            vertices.push(new Vertex_1.Vertex(zB.x * scaleX - (headlen * 1.35) * Math.cos(angle - Math.PI / 8), zB.y * scaleY - (headlen * 1.35) * Math.sin(angle - Math.PI / 8)));
+            vertices.push(new Vertex_1.Vertex(zB.x * scaleX - headlen * Math.cos(angle), zB.y * scaleY - headlen * Math.sin(angle)));
+            vertices.push(new Vertex_1.Vertex(zB.x * scaleX - headlen * 1.35 * Math.cos(angle - Math.PI / 8), zB.y * scaleY - headlen * 1.35 * Math.sin(angle - Math.PI / 8)));
             vertices.push(new Vertex_1.Vertex(zB.x * scaleX, zB.y * scaleY));
-            vertices.push(new Vertex_1.Vertex(zB.x * scaleX - (headlen * 1.35) * Math.cos(angle + Math.PI / 8), zB.y * scaleY - (headlen * 1.35) * Math.sin(angle + Math.PI / 8)));
+            vertices.push(new Vertex_1.Vertex(zB.x * scaleX - headlen * 1.35 * Math.cos(angle + Math.PI / 8), zB.y * scaleY - headlen * 1.35 * Math.sin(angle + Math.PI / 8)));
             return vertices;
         }
     };
@@ -7825,7 +8148,8 @@ exports.Vector = Vector;
  * @modified 2020-12-04 Changed `getClosestT` param from `Vertex` to `XYCoords` (generalized).
  * @modified 2020-12-04 Added the `hasPoint(XYCoords)` function.
  * @modified 2021-01-20 Added UID.
- * @version 1.1.0
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @version 1.2.0
  */
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.VertTuple = void 0;
@@ -7863,7 +8187,6 @@ var VertTuple = /** @class */ (function () {
     VertTuple.prototype.length = function () {
         return Math.sqrt(Math.pow(this.b.x - this.a.x, 2) + Math.pow(this.b.y - this.a.y, 2));
     };
-    ;
     /**
      * Set the length of this vector to the given amount. This only works if this
      * vector is not a null vector.
@@ -7876,7 +8199,6 @@ var VertTuple = /** @class */ (function () {
     VertTuple.prototype.setLength = function (length) {
         return this.scale(length / this.length());
     };
-    ;
     /**
      * Substract the given vertex from this line's end points.
      *
@@ -7891,7 +8213,6 @@ var VertTuple = /** @class */ (function () {
         this.b.sub(amount);
         return this;
     };
-    ;
     /**
      * Add the given vertex to this line's end points.
      *
@@ -7906,7 +8227,6 @@ var VertTuple = /** @class */ (function () {
         this.b.add(amount);
         return this;
     };
-    ;
     /**
      * Normalize this line (set to length 1).
      *
@@ -7919,7 +8239,6 @@ var VertTuple = /** @class */ (function () {
         this.b.set(this.a.x + (this.b.x - this.a.x) / this.length(), this.a.y + (this.b.y - this.a.y) / this.length());
         return this;
     };
-    ;
     /**
      * Scale this line by the given factor.
      *
@@ -7933,7 +8252,6 @@ var VertTuple = /** @class */ (function () {
         this.b.set(this.a.x + (this.b.x - this.a.x) * factor, this.a.y + (this.b.y - this.a.y) * factor);
         return this;
     };
-    ;
     /**
      * Move this line to a new location.
      *
@@ -7949,7 +8267,6 @@ var VertTuple = /** @class */ (function () {
         this.b.add(diff);
         return this;
     };
-    ;
     /**
      * Get the angle between this and the passed line (in radians).
      *
@@ -7960,7 +8277,7 @@ var VertTuple = /** @class */ (function () {
      * @memberof VertTuple
      **/
     VertTuple.prototype.angle = function (line) {
-        if (line == null || typeof line == 'undefined') {
+        if (line == null || typeof line == "undefined") {
             line = this.factory(new Vertex_1.Vertex(0, 0), new Vertex_1.Vertex(100, 0));
         }
         // Compute the angle from x axis and the return the difference :)
@@ -7970,7 +8287,6 @@ var VertTuple = /** @class */ (function () {
         // The result might be negative, but isn't it usually nicer to determine angles in positive values only?
         return Math.atan2(v1.x, v1.y) - Math.atan2(v0.x, v0.y);
     };
-    ;
     /**
      * Get line point at position t in [0 ... 1]:<br>
      * <pre>[P(0)]=[A]--------------------[P(t)]------[B]=[P(1)]</pre><br>
@@ -7986,7 +8302,6 @@ var VertTuple = /** @class */ (function () {
     VertTuple.prototype.vertAt = function (t) {
         return new Vertex_1.Vertex(this.a.x + (this.b.x - this.a.x) * t, this.a.y + (this.b.y - this.a.y) * t);
     };
-    ;
     /**
      * Get the denominator of this and the given line.
      *
@@ -8000,9 +8315,8 @@ var VertTuple = /** @class */ (function () {
      **/
     VertTuple.prototype.denominator = function (line) {
         // http://jsfiddle.net/justin_c_rounds/Gd2S2/
-        return ((line.b.y - line.a.y) * (this.b.x - this.a.x)) - ((line.b.x - line.a.x) * (this.b.y - this.a.y));
+        return (line.b.y - line.a.y) * (this.b.x - this.a.x) - (line.b.x - line.a.x) * (this.b.y - this.a.y);
     };
-    ;
     /**
      * Checks if this and the given line are co-linear.
      *
@@ -8017,7 +8331,6 @@ var VertTuple = /** @class */ (function () {
     VertTuple.prototype.colinear = function (line) {
         return Math.abs(this.denominator(line)) < Vertex_1.Vertex.EPSILON;
     };
-    ;
     /**
      * Get the closest position T from this line to the specified point.
      *
@@ -8040,7 +8353,6 @@ var VertTuple = /** @class */ (function () {
         // t = Math.max(0, Math.min(1, t));
         return t;
     };
-    ;
     /**
      * Check if the given point is located on this line. Optionally also check if
      * that point is located between point `a` and `b`.
@@ -8076,7 +8388,6 @@ var VertTuple = /** @class */ (function () {
         var t = this.getClosestT(p);
         return this.vertAt(t);
     };
-    ;
     /**
      * The the minimal distance between this line and the specified point.
      *
@@ -8091,7 +8402,6 @@ var VertTuple = /** @class */ (function () {
         // https://stackoverflow.com/questions/849211/shortest-distance-between-a-point-and-a-line-segment
         return Math.sqrt(VertTuple.vtutils.dist2(p, this.vertAt(this.getClosestT(p))));
     };
-    ;
     /**
      * Create a deep clone of this instance.
      *
@@ -8103,7 +8413,6 @@ var VertTuple = /** @class */ (function () {
     VertTuple.prototype.clone = function () {
         return this.factory(this.a.clone(), this.b.clone());
     };
-    ;
     /**
      * Create a string representation of this line.
      *
@@ -8115,7 +8424,16 @@ var VertTuple = /** @class */ (function () {
     VertTuple.prototype.toString = function () {
         return "{ a : " + this.a.toString() + ", b : " + this.b.toString() + " }";
     };
-    ;
+    /**
+     * This function should invalidate any installed listeners and invalidate this object.
+     * After calling this function the object might not hold valid data any more and
+     * should not be used.
+     */
+    VertTuple.prototype.destroy = function () {
+        this.a.destroy();
+        this.b.destroy();
+        this.isDestroyed = true;
+    };
     /**
      * @private
      **/
@@ -8159,7 +8477,13 @@ exports.VertTuple = VertTuple;
  * @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.
+ * @modified 2022-01-31 Added `Vertex.utils.arrayToJSON`.
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @modified 2022-02-02 Cleared the `Vertex.toSVGString` function (deprecated). Use `drawutilssvg` instead.
+ * @version  2.7.0
  *
  * @file Vertex
  * @public
@@ -8505,20 +8829,72 @@ var Vertex = /** @class */ (function () {
     };
     /**
      * 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
      **/
     Vertex.prototype.scale = function (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
+     */
+    Vertex.prototype.lerp = function (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
+     */
+    Vertex.prototype.lerpAbs = function (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
+     **/
+    Vertex.prototype.scaleXY = function (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;
     };
     /**
@@ -8607,20 +8983,31 @@ var Vertex = /** @class */ (function () {
      * @return {string} A string representing the SVG code for this vertex.
      * @instance
      * @memberof Vertex
+     * @deprecated
      **/
     Vertex.prototype.toSVGString = function (options) {
-        options = options || {};
-        var buffer = [];
-        buffer.push("<circle");
-        if (options.className)
-            buffer.push(' class="' + options.className + '"');
-        buffer.push(' cx="' + this.x + '"');
-        buffer.push(' cy="' + this.y + '"');
-        buffer.push(' r="2"');
-        buffer.push(" />");
-        return buffer.join("");
+        // options = options || {};
+        // var buffer = [];
+        // buffer.push("<circle");
+        // if (options.className) buffer.push(' class="' + options.className + '"');
+        // buffer.push(' cx="' + this.x + '"');
+        // buffer.push(' cy="' + this.y + '"');
+        // buffer.push(' r="2"');
+        // buffer.push(" />");
+        // return buffer.join("");
+        console.warn("[Deprecation] Warning: the Vertex.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
+        return "";
     };
     // END Vertex
+    /**
+     * This function should invalidate any installed listeners and invalidate this object.
+     * After calling this function the object might not hold valid data any more and
+     * should not be used.
+     */
+    Vertex.prototype.destroy = function () {
+        this.listeners.removeAllListeners();
+        this.isDestroyed = true;
+    };
     /**
      * Create a new random vertex inside the given viewport.
      *
@@ -8674,6 +9061,19 @@ var Vertex = /** @class */ (function () {
             vertices.push(new Vertex(zB.x * scaleX, zB.y * scaleY));
             vertices.push(new Vertex(zB.x * scaleX - headlen * 1.35 * Math.cos(angle + Math.PI / 8), zB.y * scaleY - headlen * 1.35 * Math.sin(angle + Math.PI / 8)));
             return vertices;
+        },
+        /**
+         * Convert the given vertices (array) to a JSON string.
+         *
+         * @param {number?} precision - (optional) The numeric precision to be used (number of precision digits).
+         * @returns {string}
+         */
+        arrayToJSON: function (vertices, precision) {
+            return JSON.stringify(vertices.map(function (vert) {
+                return typeof precision === undefined
+                    ? { x: vert.x, y: vert.y }
+                    : { x: Number(vert.x.toFixed(precision)), y: Number(vert.y.toFixed(precision)) };
+            }));
         }
     };
     return Vertex;
@@ -8787,7 +9187,6 @@ var VertexListeners = /** @class */ (function () {
         this.dragEnd = [];
         this.vertex = vertex;
     }
-    ;
     /**
      * Add a click listener.
      *
@@ -8801,7 +9200,6 @@ var VertexListeners = /** @class */ (function () {
         VertexListeners._addListener(this.click, listener);
         return this;
     };
-    ;
     /**
      * The click listener is a function with a single drag event param.
      * @callback VertexListeners~clickListener
@@ -8820,7 +9218,6 @@ var VertexListeners = /** @class */ (function () {
         this.click = VertexListeners._removeListener(this.click, listener);
         return this;
     };
-    ;
     /**
      * The click listener is a function with a single drag event param.
      * @callback VertexListeners~clickListener
@@ -8839,7 +9236,6 @@ var VertexListeners = /** @class */ (function () {
         VertexListeners._addListener(this.drag, listener);
         return this;
     };
-    ;
     /**
      * The drag listener is a function with a single drag event param.
      * @callback VertexListeners~dragListener
@@ -8858,7 +9254,6 @@ var VertexListeners = /** @class */ (function () {
         this.drag = VertexListeners._removeListener(this.drag, listener);
         return this;
     };
-    ;
     /**
      * Add a dragStart listener.
      *
@@ -8872,7 +9267,6 @@ var VertexListeners = /** @class */ (function () {
         VertexListeners._addListener(this.dragStart, listener);
         return this;
     };
-    ;
     /**
      * The drag-start listener is a function with a single drag event param.
      * @callback VertexListeners~dragStartListener
@@ -8891,7 +9285,6 @@ var VertexListeners = /** @class */ (function () {
         this.dragStart = VertexListeners._removeListener(this.dragStart, listener);
         return this;
     };
-    ;
     /**
      * Add a dragEnd listener.
      *
@@ -8906,27 +9299,25 @@ var VertexListeners = /** @class */ (function () {
         VertexListeners._addListener(this.dragEnd, listener);
         return this;
     };
-    ;
     /**
      * The drag-end listener is a function with a single drag event param.
      * @callback VertexListeners~dragEndListener
      * @param {Event} e - The (extended) drag event.
      */
     /**
-    * Remove a drag listener.
-    *
-    * @method removeDragEndListener
-    * @param {VertexListeners~clickListener} listener - The drag listener to remove (a callback).
-    * @return {VertexListeners} this (for chaining)
-    * @instance
-    * @memberof VertexListeners
-    **/
+     * Remove a drag listener.
+     *
+     * @method removeDragEndListener
+     * @param {VertexListeners~clickListener} listener - The drag listener to remove (a callback).
+     * @return {VertexListeners} this (for chaining)
+     * @instance
+     * @memberof VertexListeners
+     **/
     VertexListeners.prototype.removeDragEndListener = function (listener) {
         // this.drag.push( listener );
         this.dragEnd = VertexListeners._removeListener(this.dragEnd, listener);
         return this;
     };
-    ;
     /**
      * Fire a click event with the given event instance to all
      * installed click listeners.
@@ -8940,7 +9331,6 @@ var VertexListeners = /** @class */ (function () {
     VertexListeners.prototype.fireClickEvent = function (e) {
         VertexListeners._fireEvent(this, this.click, e);
     };
-    ;
     /**
      * Fire a drag event with the given event instance to all
      * installed drag listeners.
@@ -8954,7 +9344,6 @@ var VertexListeners = /** @class */ (function () {
     VertexListeners.prototype.fireDragEvent = function (e) {
         VertexListeners._fireEvent(this, this.drag, e);
     };
-    ;
     /**
      * Fire a dragStart event with the given event instance to all
      * installed drag-start listeners.
@@ -8968,7 +9357,6 @@ var VertexListeners = /** @class */ (function () {
     VertexListeners.prototype.fireDragStartEvent = function (e) {
         VertexListeners._fireEvent(this, this.dragStart, e);
     };
-    ;
     /**
      * Fire a dragEnd event with the given event instance to all
      * installed drag-end listeners.
@@ -8982,13 +9370,21 @@ var VertexListeners = /** @class */ (function () {
     VertexListeners.prototype.fireDragEndEvent = function (e) {
         VertexListeners._fireEvent(this, this.dragEnd, e);
     };
-    ;
+    /**
+     * Removes all listeners from this listeners object.
+     */
+    VertexListeners.prototype.removeAllListeners = function () {
+        this.click = [];
+        this.drag = [];
+        this.dragStart = [];
+        this.dragEnd = [];
+    };
     /**
      * @private
      **/
     VertexListeners._fireEvent = function (_self, listeners, e) {
         var ve = e;
-        if (typeof ve.params == 'undefined')
+        if (typeof ve.params == "undefined")
             ve.params = { vertex: _self.vertex };
         else
             ve.params.vertex = _self.vertex;
@@ -8996,7 +9392,6 @@ var VertexListeners = /** @class */ (function () {
             listeners[i](ve);
         }
     };
-    ;
     /**
      * @private
      */
@@ -9008,7 +9403,6 @@ var VertexListeners = /** @class */ (function () {
         listeners.push(newListener);
         return true;
     };
-    ;
     /**
      * @private
      */
@@ -9019,7 +9413,6 @@ var VertexListeners = /** @class */ (function () {
         }
         return listeners;
     };
-    ;
     return VertexListeners;
 }());
 exports.VertexListeners = VertexListeners;
@@ -9070,7 +9463,9 @@ exports.VertexListeners = VertexListeners;
  * @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
  **/
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.drawutils = void 0;
@@ -9730,20 +10125,62 @@ var drawutils = /** @class */ (function () {
         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
+     */
     drawutils.prototype.text = function (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;
+        var relX = this.offset.x + x * this.scale.x;
+        var relY = this.offset.y + y * this.scale.y;
         var 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;
+        }
+        var rotation = (_a = options.rotation) !== null && _a !== void 0 ? _a : 0.0;
+        var 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();
     };
     /**
@@ -9763,8 +10200,9 @@ var drawutils = /** @class */ (function () {
      */
     drawutils.prototype.label = function (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) {
@@ -10385,6 +10823,25 @@ var drawutilsgl = /** @class */ (function () {
     drawutilsgl.prototype.polyline = function (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
+     */
     drawutilsgl.prototype.text = function (text, x, y, options) {
         // NOT YET IMPLEMENTED
     };
@@ -10396,14 +10853,12 @@ var drawutilsgl = /** @class */ (function () {
      * @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.
-    // +-------------------------------
-    drawutilsgl.prototype.label = function (text, x, y, rotation) {
+    drawutilsgl.prototype.label = function (text, x, y, rotation, color) {
         // NOT YET IMPLEMENTED
     };
     /**
@@ -10538,13 +10993,17 @@ var GLU = /** @class */ (function () {
  * @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
  **/
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.drawutilssvg = void 0;
 var CircleSector_1 = __webpack_require__(946);
 var CubicBezierCurve_1 = __webpack_require__(510);
 var Vertex_1 = __webpack_require__(421);
+var 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.
@@ -10604,7 +11063,8 @@ var drawutilssvg = /** @class */ (function () {
             "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)
         var rules = [];
@@ -11385,27 +11845,65 @@ var drawutilssvg = /** @class */ (function () {
         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
      */
     drawutilssvg.prototype.text = function (text, x, y, options) {
+        var _a, _b;
         options = options || {};
         var color = options.color || "black";
-        var node = this.makeNode("text");
-        node.setAttribute("x", "" + this._x(x));
-        node.setAttribute("y", "" + this._y(y));
-        node.innerHTML = text;
+        var 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
+        var textAlign = options.textAlign === "left" || options.textAlign === "start"
+            ? "start"
+            : options.textAlign === "center"
+                ? "middle"
+                : options.textAlign === "right" || options.textAlign === "end"
+                    ? "end"
+                    : "start";
+        var transformOrigin = this._x(x) + "px " + this._y(y) + "px";
+        var 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.
+        var rotate = options.rotation ? "rotate(" + options.rotation * RAD_TO_DEG + " 0 0)" : "";
+        var node = this.makeNode("g");
+        var curId = this.curId;
+        this.curId = curId + "_text";
+        var 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);
     };
     /**
@@ -11416,16 +11914,21 @@ var drawutilssvg = /** @class */ (function () {
      * @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
      */
-    drawutilssvg.prototype.label = function (text, x, y, rotation) {
+    drawutilssvg.prototype.label = function (text, x, y, rotation, color) {
         var 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.
@@ -11876,6 +12379,7 @@ globalThis.VEllipse = __webpack_require__(112).VEllipse;
 globalThis.Circle = __webpack_require__(913).Circle;
 globalThis.CircleSector = __webpack_require__(946).CircleSector;
 globalThis.PBImage = __webpack_require__(699).PBImage;
+globalThis.PBText = __webpack_require__(196).PBText;
 globalThis.MouseHandler = __webpack_require__(293).MouseHandler;
 globalThis.KeyHandler = __webpack_require__(909).KeyHandler;
 globalThis.drawutils = __webpack_require__(149).drawutils;