plotboilerplate 1.15.0 → 1.17.1

package/dist/index.esm.js

@@ -99,7 +99,6 @@ class VertexListeners {
         this.dragEnd = [];
         this.vertex = vertex;
     }
-    ;
     /**
      * Add a click listener.
      *
@@ -113,7 +112,6 @@ class VertexListeners {
         VertexListeners._addListener(this.click, listener);
         return this;
     }
-    ;
     /**
      * The click listener is a function with a single drag event param.
      * @callback VertexListeners~clickListener
@@ -132,7 +130,6 @@ class VertexListeners {
         this.click = VertexListeners._removeListener(this.click, listener);
         return this;
     }
-    ;
     /**
      * The click listener is a function with a single drag event param.
      * @callback VertexListeners~clickListener
@@ -151,7 +148,6 @@ class VertexListeners {
         VertexListeners._addListener(this.drag, listener);
         return this;
     }
-    ;
     /**
      * The drag listener is a function with a single drag event param.
      * @callback VertexListeners~dragListener
@@ -170,7 +166,6 @@ class VertexListeners {
         this.drag = VertexListeners._removeListener(this.drag, listener);
         return this;
     }
-    ;
     /**
      * Add a dragStart listener.
      *
@@ -184,7 +179,6 @@ class VertexListeners {
         VertexListeners._addListener(this.dragStart, listener);
         return this;
     }
-    ;
     /**
      * The drag-start listener is a function with a single drag event param.
      * @callback VertexListeners~dragStartListener
@@ -203,7 +197,6 @@ class VertexListeners {
         this.dragStart = VertexListeners._removeListener(this.dragStart, listener);
         return this;
     }
-    ;
     /**
      * Add a dragEnd listener.
      *
@@ -218,27 +211,25 @@ class VertexListeners {
         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
+     **/
     removeDragEndListener(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.
@@ -252,7 +243,6 @@ class VertexListeners {
     fireClickEvent(e) {
         VertexListeners._fireEvent(this, this.click, e);
     }
-    ;
     /**
      * Fire a drag event with the given event instance to all
      * installed drag listeners.
@@ -266,7 +256,6 @@ class VertexListeners {
     fireDragEvent(e) {
         VertexListeners._fireEvent(this, this.drag, e);
     }
-    ;
     /**
      * Fire a dragStart event with the given event instance to all
      * installed drag-start listeners.
@@ -280,7 +269,6 @@ class VertexListeners {
     fireDragStartEvent(e) {
         VertexListeners._fireEvent(this, this.dragStart, e);
     }
-    ;
     /**
      * Fire a dragEnd event with the given event instance to all
      * installed drag-end listeners.
@@ -294,13 +282,21 @@ class VertexListeners {
     fireDragEndEvent(e) {
         VertexListeners._fireEvent(this, this.dragEnd, e);
     }
-    ;
+    /**
+     * Removes all listeners from this listeners object.
+     */
+    removeAllListeners() {
+        this.click = [];
+        this.drag = [];
+        this.dragStart = [];
+        this.dragEnd = [];
+    }
     /**
      * @private
      **/
     static _fireEvent(_self, listeners, e) {
         const ve = e;
-        if (typeof ve.params == 'undefined')
+        if (typeof ve.params == "undefined")
             ve.params = { vertex: _self.vertex };
         else
             ve.params.vertex = _self.vertex;
@@ -308,7 +304,6 @@ class VertexListeners {
             listeners[i](ve);
         }
     }
-    ;
     /**
      * @private
      */
@@ -320,7 +315,6 @@ class VertexListeners {
         listeners.push(newListener);
         return true;
     }
-    ;
     /**
      * @private
      */
@@ -331,7 +325,6 @@ class VertexListeners {
         }
         return listeners;
     }
-    ;
 }
 
 /**
@@ -361,7 +354,10 @@ class VertexListeners {
  * @modified 2021-12-01 Changed the type of param of `scale` to XYCoords.
  * @modified 2021-12-01 Added function `scaleXY` for non uniform scaling.
  * @modified 2021-12-17 Added the functions `lerp` and `lerpAbs` for linear interpolations.
- * @version  2.6.0
+ * @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
@@ -848,28 +844,14 @@ class Vertex {
         return "(" + this.x + "," + this.y + ")";
     }
     /**
-     * Convert this vertex to SVG code.
-     *
-     * @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 Vertex
-     **/
-    toSVGString(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("");
+     * 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.
+     */
+    destroy() {
+        this.listeners.removeAllListeners();
+        this.isDestroyed = true;
     }
-    // END Vertex
     /**
      * Create a new random vertex inside the given viewport.
      *
@@ -924,6 +906,19 @@ Vertex.utils = {
         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(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)) };
+        }));
     }
 };
 
@@ -950,7 +945,10 @@ Vertex.utils = {
  * @modified 2021-01-29 Changed the param type for `containsVert` from Vertex to XYCoords.
  * @modified 2021-12-14 Added the `perimeter()` function.
  * @modified 2021-12-16 Added the `getEvenDistributionPolygon()` function.
- * @version 1.8.0
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @modified 2022-02-02 Cleared the `Polygon.toSVGString` function (deprecated). Use `drawutilssvg` instead.
+ * @modified 2022-03-08 Added the `Polygon.clone()` function.
+ * @version 1.10.0
  *
  * @file Polygon
  * @public
@@ -1028,9 +1026,9 @@ class Polygon {
      * @memberof Polygon
      * @return {Polygon} this for chaining
      **/
-    move(vert) {
+    move(amount) {
         for (var i in this.vertices) {
-            this.vertices[i].add(vert);
+            this.vertices[i].add(amount);
         }
         return this;
     }
@@ -1209,6 +1207,14 @@ class Polygon {
     getBounds() {
         return Bounds.computeFromVertices(this.vertices);
     }
+    /**
+     * Create a deep copy of this polygon.
+     *
+     * @return {Polygon} The cloned polygon.
+     */
+    clone() {
+        return new Polygon(this.vertices.map(vert => vert.clone()), this.isOpen);
+    }
     /**
      * Convert this polygon to a sequence of quadratic Bézier curves.<br>
      * <br>
@@ -1346,39 +1352,15 @@ class Polygon {
         return BezierPath.fromArray(pathdata);
     }
     /**
-     * Create an SVG representation of this polygon.
-     *
-     * @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} The SVG string.
-     * @instance
-     * @memberof Polygon
-     **/
-    toSVGString(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");
-            }
+     * 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.
+     */
+    destroy() {
+        for (var i = 0; i < this.vertices.length; i++) {
+            this.vertices[i].destroy();
         }
-        buffer.push('" />');
-        return buffer.join("");
+        this.isDestroyed = true;
     }
 }
 Polygon.utils = {
@@ -1429,7 +1411,8 @@ Polygon.utils = {
  * @modified 2020-11-19 Set min, max, width and height to private.
  * @modified 2021-02-02 Added the `toPolygon` method.
  * @modified 2021-06-21 (mid-summer) Added `getCenter` method.
- * @version  1.3.0
+ * @modified 2022-02-01 Added the `toString` function.
+ * @version  1.4.0
  **/
 /**
  * @classdesc A bounds class with min and max values. Implementing IBounds.
@@ -1464,9 +1447,45 @@ class Bounds {
     toPolygon() {
         return new Polygon([new Vertex(this.min), new Vertex(this.max.x, this.min.y), new Vertex(this.max), new Vertex(this.min.x, this.max.y)], false);
     }
+    /**
+     * Get the center of this boinding box.
+     *
+     * @method getCenter
+     * @instance
+     * @memberof Bounds
+     * @returns {Vertex} The center of these bounds.
+     */
     getCenter() {
         return new Vertex(this.min.x + (this.max.x - this.min.x) / 2.0, this.min.y + (this.max.y - this.min.y) / 2);
     }
+    /**
+     * Convert these bounds to a human readable form.
+     *
+     * Note: the returned format might change in the future, so please do not
+     * rely on the returned string format.
+     *
+     * @method toString
+     * @instance
+     * @memberof Bounds
+     * @returns {string} Get these bounds in a human readable form.
+     */
+    toString() {
+        return `{ min: ${this.min.toString()}, max : ${this.max.toString()}, width: ${this.width}, height : ${this.height} }`;
+    }
+    /**
+     * Clone this bounds object (create a deep clone).
+     *
+     * Note: the returned format might change in the future, so please do not
+     * rely on the returned string format.
+     *
+     * @method clone
+     * @instance
+     * @memberof Bounds
+     * @returns {string} Creates a deep clone of this bounds object. The returned object's `min` and `max` instances are `Vertex` instances.
+     */
+    // clone() {
+    //   return new Bounds(new Vertex(this.min.x, this.min.y), new Vertex(this.max.x, this.max.y));
+    // }
     /**
      * Compute the minimal bounding box for a given set of vertices.
      *
@@ -1507,7 +1526,8 @@ class Bounds {
  * @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
  */
 /**
  * @classdesc An abstract base classes for vertex tuple constructs, like Lines or Vectors.
@@ -1541,7 +1561,6 @@ class VertTuple {
     length() {
         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.
@@ -1554,7 +1573,6 @@ class VertTuple {
     setLength(length) {
         return this.scale(length / this.length());
     }
-    ;
     /**
      * Substract the given vertex from this line's end points.
      *
@@ -1569,7 +1587,6 @@ class VertTuple {
         this.b.sub(amount);
         return this;
     }
-    ;
     /**
      * Add the given vertex to this line's end points.
      *
@@ -1584,7 +1601,6 @@ class VertTuple {
         this.b.add(amount);
         return this;
     }
-    ;
     /**
      * Normalize this line (set to length 1).
      *
@@ -1597,7 +1613,6 @@ class VertTuple {
         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.
      *
@@ -1611,7 +1626,6 @@ class VertTuple {
         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.
      *
@@ -1627,7 +1641,6 @@ class VertTuple {
         this.b.add(diff);
         return this;
     }
-    ;
     /**
      * Get the angle between this and the passed line (in radians).
      *
@@ -1638,7 +1651,7 @@ class VertTuple {
      * @memberof VertTuple
      **/
     angle(line) {
-        if (line == null || typeof line == 'undefined') {
+        if (line == null || typeof line == "undefined") {
             line = this.factory(new Vertex(0, 0), new Vertex(100, 0));
         }
         // Compute the angle from x axis and the return the difference :)
@@ -1648,7 +1661,6 @@ class VertTuple {
         // 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>
@@ -1664,7 +1676,6 @@ class VertTuple {
     vertAt(t) {
         return new 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.
      *
@@ -1678,9 +1689,8 @@ class VertTuple {
      **/
     denominator(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.
      *
@@ -1695,7 +1705,6 @@ class VertTuple {
     colinear(line) {
         return Math.abs(this.denominator(line)) < Vertex.EPSILON;
     }
-    ;
     /**
      * Get the closest position T from this line to the specified point.
      *
@@ -1718,7 +1727,6 @@ class VertTuple {
         // 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`.
@@ -1754,7 +1762,6 @@ class VertTuple {
         var t = this.getClosestT(p);
         return this.vertAt(t);
     }
-    ;
     /**
      * The the minimal distance between this line and the specified point.
      *
@@ -1769,7 +1776,6 @@ class VertTuple {
         // 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.
      *
@@ -1781,7 +1787,6 @@ class VertTuple {
     clone() {
         return this.factory(this.a.clone(), this.b.clone());
     }
-    ;
     /**
      * Create a string representation of this line.
      *
@@ -1793,7 +1798,16 @@ class VertTuple {
     toString() {
         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.
+     */
+    destroy() {
+        this.a.destroy();
+        this.b.destroy();
+        this.isDestroyed = true;
+    }
 }
 /**
  * @private
@@ -1815,7 +1829,9 @@ VertTuple.vtutils = {
  * @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
@@ -1846,7 +1862,6 @@ class Vector extends VertTuple {
          **/
         this.className = "Vector";
     }
-    ;
     /**
      * Get the perpendicular of this vector which is located at a.
      *
@@ -1861,7 +1876,6 @@ class Vector extends VertTuple {
         v.b.add(this.a);
         return v;
     }
-    ;
     /**
      * The inverse of a vector is a vector witht the same magnitude but oppose direction.
      *
@@ -1875,7 +1889,6 @@ class Vector extends VertTuple {
         this.b = tmp;
         return this;
     }
-    ;
     /**
      * This function computes the inverse of the vector, which means 'a' stays untouched.
      *
@@ -1886,7 +1899,6 @@ class Vector extends VertTuple {
         this.b.y = this.a.y - (this.b.y - this.a.y);
         return this;
     }
-    ;
     /**
      * Get the intersection if this vector and the specified vector.
      *
@@ -1902,53 +1914,15 @@ class Vector extends VertTuple {
             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(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.
-     *
-     * @deprecated DEPRECATION Please use the drawutilssvg library and an XMLSerializer instead.
-     * @method toSVGString
-     * @override
-     * @param {object=} options - A set of options, like 'className'.
-     * @return {string} The SVG string representation.
-     * @instance
-     * @memberof Vector
-     **/
-    toSVGString(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('');
+        return new Vertex(this.a.x + a * (this.b.x - this.a.x), this.a.y + a * (this.b.y - this.a.y));
     }
-    ;
 }
 Vector.utils = {
     /**
@@ -1979,10 +1953,10 @@ Vector.utils = {
     buildArrowHead: (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(zB.x * scaleX - (headlen) * Math.cos(angle), zB.y * scaleY - (headlen) * Math.sin(angle)));
-        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)));
+        vertices.push(new Vertex(zB.x * scaleX - headlen * Math.cos(angle), zB.y * scaleY - headlen * Math.sin(angle)));
+        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)));
         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)));
+        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;
     }
 };
@@ -2007,7 +1981,9 @@ Vector.utils = {
  * @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
@@ -2056,7 +2032,6 @@ class CubicBezierCurve {
         this.arcLength = null;
         this.updateArcLengths();
     }
-    ;
     /**
      * Move the given curve point (the start point, end point or one of the two
      * control points).
@@ -2093,7 +2068,6 @@ class CubicBezierCurve {
         if (updateArcLengths)
             this.updateArcLengths();
     }
-    ;
     /**
      * Translate the whole curve by the given {x,y} amount: moves all four points.
      *
@@ -2110,7 +2084,6 @@ class CubicBezierCurve {
         this.endPoint.add(amount);
         return this;
     }
-    ;
     /**
      * Reverse this curve, means swapping start- and end-point and swapping
      * start-control- and end-control-point.
@@ -2129,7 +2102,6 @@ class CubicBezierCurve {
         this.endControlPoint = tmp;
         return this;
     }
-    ;
     /**
      * Get the total curve length.<br>
      * <br>
@@ -2148,7 +2120,6 @@ class CubicBezierCurve {
     getLength() {
         return this.arcLength;
     }
-    ;
     /**
      * Uptate the internal arc segment buffer and their lengths.<br>
      * <br>
@@ -2186,7 +2157,6 @@ class CubicBezierCurve {
         }
         this.arcLength = newLength;
     }
-    ;
     /**
      * Get a 't' (relative position on curve) with the closest distance to point 'p'.
      *
@@ -2209,7 +2179,6 @@ class CubicBezierCurve {
         } 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.
@@ -2238,12 +2207,12 @@ class CubicBezierCurve {
                 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.
      *
@@ -2265,7 +2234,6 @@ class CubicBezierCurve {
         }
         return new Bounds(min, max);
     }
-    ;
     /**
      * Get the start point of the curve.<br>
      * <br>
@@ -2279,7 +2247,6 @@ class CubicBezierCurve {
     getStartPoint() {
         return this.startPoint;
     }
-    ;
     /**
      * Get the end point of the curve.<br>
      * <br>
@@ -2293,7 +2260,6 @@ class CubicBezierCurve {
     getEndPoint() {
         return this.endPoint;
     }
-    ;
     /**
      * Get the start control point of the curve.<br>
      * <br>
@@ -2307,7 +2273,6 @@ class CubicBezierCurve {
     getStartControlPoint() {
         return this.startControlPoint;
     }
-    ;
     /**
      * Get the end control point of the curve.<br>
      * <br>
@@ -2321,7 +2286,6 @@ class CubicBezierCurve {
     getEndControlPoint() {
         return this.endControlPoint;
     }
-    ;
     /**
      * Get one of the four curve points specified by the passt point ID.
      *
@@ -2342,7 +2306,6 @@ class CubicBezierCurve {
             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>
@@ -2357,13 +2320,16 @@ class CubicBezierCurve {
      **/
     getPointAt(t) {
         // Perform some powerful math magic
-        const 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);
-        const 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);
+        const 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);
+        const 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(x, y);
     }
-    ;
     /**
      * Get the curve point at a given position u, where u is in [0,arcLength].<br>
      * <br>
@@ -2379,7 +2345,6 @@ class CubicBezierCurve {
     getPoint(u) {
         return this.getPointAt(u / this.arcLength);
     }
-    ;
     /**
      * Get the curve tangent vector at a given absolute curve position t in [0,1].<br>
      * <br>
@@ -2400,18 +2365,11 @@ class CubicBezierCurve {
         const t2 = t * t;
         // (1 - t)^2 = (1-t)*(1-t) = 1 - t - t + t^2 = 1 - 2*t + t^2
         const nt2 = 1 - 2 * t + t2;
-        const tX = -3 * a.x * nt2 +
-            b.x * (3 * nt2 - 6 * (t - t2)) +
-            c.x * (6 * (t - t2) - 3 * t2) +
-            3 * d.x * t2;
-        const tY = -3 * a.y * nt2 +
-            b.y * (3 * nt2 - 6 * (t - t2)) +
-            c.y * (6 * (t - t2) - 3 * t2) +
-            3 * d.y * t2;
+        const tX = -3 * a.x * nt2 + b.x * (3 * nt2 - 6 * (t - t2)) + c.x * (6 * (t - t2) - 3 * t2) + 3 * d.x * t2;
+        const 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(tX, tY);
     }
-    ;
     /**
      * Get a sub curve at the given start end end offsets (values between 0.0 and 1.0).
      *
@@ -2437,7 +2395,6 @@ class CubicBezierCurve {
         // 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.
      *
@@ -2448,9 +2405,8 @@ class CubicBezierCurve {
      * @return {number}
      **/
     convertU2T(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>
@@ -2465,7 +2421,6 @@ class CubicBezierCurve {
     getTangent(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>
@@ -2480,7 +2435,6 @@ class CubicBezierCurve {
     getPerpendicular(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>
@@ -2496,7 +2450,6 @@ class CubicBezierCurve {
         const tangentVector = this.getTangentAt(t);
         return new Vertex(tangentVector.y, -tangentVector.x);
     }
-    ;
     /**
      * Clone this Bézier curve (deep clone).
      *
@@ -2508,7 +2461,6 @@ class CubicBezierCurve {
     clone() {
         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>
@@ -2527,17 +2479,25 @@ class CubicBezierCurve {
         //       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.
+     */
+    destroy() {
+        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?
@@ -2563,41 +2523,6 @@ class CubicBezierCurve {
         */
         return obj instanceof CubicBezierCurve;
     }
-    ;
-    /**
-     * Create an SVG path data representation of this bézier curve.
-     *
-     * Path data string format is:<br>
-     *  <pre>'M x0 y1 C dx0 dy1 dx1 dy1 x1 x2'</pre><br>
-     * 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>
-     *
-     * @method toSVGPathData
-     * @instance
-     * @memberof CubicBezierCurve
-     * @return {string}  The SVG path data string.
-     **/
-    toSVGPathData() {
-        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('');
-    }
-    ;
     /**
      * Convert this curve to a JSON string.
      *
@@ -2610,18 +2535,33 @@ class CubicBezierCurve {
     toJSON(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.
      *
@@ -2636,7 +2576,6 @@ class CubicBezierCurve {
         var obj = JSON.parse(jsonString);
         return CubicBezierCurve.fromObject(obj);
     }
-    ;
     /**
      * Try to convert the passed object to a CubicBezierCurve.
      *
@@ -2651,16 +2590,15 @@ class CubicBezierCurve {
         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(obj.startPoint[0], obj.startPoint[1]), new Vertex(obj.endPoint[0], obj.endPoint[1]), new Vertex(obj.startControlPoint[0], obj.startControlPoint[1]), new Vertex(obj.endControlPoint[0], obj.endControlPoint[1]));
     }
-    ;
     /**
      * Convert a 4-element array of vertices to a cubic bézier curve.
      *
@@ -2677,7 +2615,6 @@ class CubicBezierCurve {
             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;
@@ -2710,7 +2647,10 @@ CubicBezierCurve.END_POINT = 3;
  * @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
@@ -3599,6 +3539,59 @@ class BezierPath {
         }
         return new 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>}
+     */
+    getEvenDistributionVertices(pointCount) {
+        if (pointCount < 2) {
+            throw new Error("pointCount must be larger than one; is " + pointCount + ".");
+        }
+        const result = [];
+        if (this.bezierCurves.length === 0) {
+            return result;
+        }
+        // Fetch and add the start point from the source polygon
+        var polygonPoint = new Vertex(this.bezierCurves[0].startPoint);
+        result.push(polygonPoint);
+        // if (this.bezierCurves.length === 1) {
+        //   return result;
+        // }
+        const perimeter = this.totalArcLength;
+        const stepSize = perimeter / (pointCount - 1);
+        const n = this.bezierCurves.length;
+        let curveIndex = 0;
+        let segmentLength = this.bezierCurves[0].arcLength;
+        let curSegmentU = stepSize;
+        let 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(this.bezierCurves[n - 1].endPoint));
+        return result;
+    }
     /**
      * Clone this BezierPath (deep clone).
      *
@@ -3645,30 +3638,15 @@ class BezierPath {
         return true;
     }
     /**
-     * Create a <pre>&lt;path&gt;</pre> SVG representation of this bézier curve.
-     *
-     * @deprecated DEPRECATION Please use the drawutilssvg library and an XMLSerializer instead.
-     * @method toSVGString
-     * @param {object=} [options={}] - Like options.className
-     * @param {string=} [options.className] - The classname to use for the SVG item.
-     * @instance
-     * @memberof BezierPath
-     * @return {string} The SVG string.
-     **/
-    toSVGString(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());
+     * 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.
+     */
+    destroy() {
+        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.
@@ -3895,7 +3873,8 @@ BezierPath.END_POINT = 3;
  * @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
@@ -3940,45 +3919,19 @@ class Line extends VertTuple {
             return null;
         let a = this.a.y - line.a.y;
         let b = this.a.x - line.a.x;
-        const numerator1 = ((line.b.x - line.a.x) * a) - ((line.b.y - line.a.y) * b);
-        const numerator2 = ((this.b.x - this.a.x) * a) - ((this.b.y - this.a.y) * b);
+        const numerator1 = (line.b.x - line.a.x) * a - (line.b.y - line.a.y) * b;
+        const 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?
-        const x = this.a.x + (a * (this.b.x - this.a.x));
-        const y = this.a.y + (a * (this.b.y - this.a.y));
+        const x = this.a.x + a * (this.b.x - this.a.x);
+        const 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(x, y);
     }
-    ;
-    /**
-     * Create an SVG representation of this line.
-     *
-     * @deprecated DEPRECATION Please use the drawutilssvg library and an XMLSerializer instead.
-     * @method toSVGString
-     * @param {options} p - A set of options, like the 'classname' to use
-     *                      for the line object.
-     * @return {string} The SVG string representing this line.
-     * @instance
-     * @memberof Line
-     **/
-    toSVGString(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('');
-    }
-    ;
 }
 
 /**
@@ -3990,7 +3943,9 @@ class Line extends VertTuple {
  * @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
  **/
 /**
  * @classdesc A simple circle: center point and radius.
@@ -4021,7 +3976,6 @@ class Circle {
         this.center = center;
         this.radius = radius;
     }
-    ;
     /**
      * Check if the given circle is fully contained inside this circle.
      *
@@ -4034,7 +3988,6 @@ class Circle {
     containsCircle(circle) {
         return this.center.distance(circle.center) + circle.radius < this.radius;
     }
-    ;
     /**
      * Calculate the distance from this circle to the given line.
      *
@@ -4053,7 +4006,6 @@ class Circle {
         const closestPointOnLine = line.getClosestPoint(this.center);
         return closestPointOnLine.distance(this.center) - this.radius;
     }
-    ;
     /**
      * Get the vertex on the this circle for the given angle.
      *
@@ -4067,7 +4019,6 @@ class Circle {
         // 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.
      *
@@ -4084,7 +4035,6 @@ class Circle {
         // Construct the perpendicular of the line in point a. Then move relative to center.
         return new Vector(pointA, new Vertex(0, 0)).add(this.center).perp();
     }
-    ;
     /**
      * Calculate the intersection points (if exists) with the given circle.
      *
@@ -4124,48 +4074,33 @@ class Circle {
         //    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(new Vertex(x3, y3), new 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
-      */
-    toSVGString(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('');
+     * 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.
+     */
+    destroy() {
+        this.center.destroy();
+        this.isDestroyed = true;
     }
-    ;
 } // END class
 Circle.circleUtils = {
     vertAt: (angle, radius) => {
         /* return new Vertex( Math.sin(angle) * radius,
-                   Math.cos(angle) * radius ); */
+                     Math.cos(angle) * radius ); */
         return new Vertex(Math.cos(angle) * radius, Math.sin(angle) * radius);
     }
 };
@@ -4206,27 +4141,15 @@ class CircleSector {
         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
-      */
-    toSVGString(options) {
-        options = options || {};
-        var buffer = [];
-        buffer.push('<path ');
-        if (options.className)
-            buffer.push(' class="' + options.className + '"');
-        const 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('');
+     * 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.
+     */
+    destroy() {
+        this.circle.destroy();
+        this.isDestroyed = true;
     }
-    ;
 } // END class
 CircleSector.circleSectorUtils = {
     /**
@@ -4235,11 +4158,11 @@ CircleSector.circleSectorUtils = {
      * TODO: generalize for ellipses (two radii).
      *
      * @param {number} angle - The angle in radians.
-    */
+     */
     polarToCartesian: (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)
         };
     },
     /**
@@ -4252,7 +4175,7 @@ CircleSector.circleSectorUtils = {
      * @return [ 'A', radiusx, radiusy, rotation=0, largeArcFlag=1|0, sweepFlag=0, endx, endy ]
      */
     describeSVGArc: (x, y, radius, startAngle, endAngle, options) => {
-        if (typeof options === 'undefined')
+        if (typeof options === "undefined")
             options = { moveToStart: true };
         const end = CircleSector.circleSectorUtils.polarToCartesian(x, y, radius, endAngle);
         const start = CircleSector.circleSectorUtils.polarToCartesian(x, y, radius, startAngle);
@@ -4277,7 +4200,7 @@ CircleSector.circleSectorUtils = {
         }
         const 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;
@@ -4315,7 +4238,12 @@ CircleSector.circleSectorUtils = {
  * @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
+ * @modified 2022-02-03 Added the `lineWidth` param to the `crosshair` function.
+ * @modified 2022-02-03 Added the `cross(...)` function.
+ * @modified 2022-03-26 Added the private `nodeDefs` and `bufferedNodeDefs` attributes.
+ * @modified 2022-03-26 Added the `texturedPoly` function to draw textures polygons.
+ * @modified 2022-07-26 Adding `alpha` to the `image(...)` function.
+ * @version  1.6.1
  **/
 const RAD_TO_DEG = 180 / Math.PI;
 /**
@@ -4342,7 +4270,7 @@ class drawutilssvg {
      * @param {boolean=} isSecondary - (optional) Indicates if this is the primary or secondary instance. Only primary instances manage child nodes.
      * @param {SVGGElement=} gNode - (optional) Primary and seconday instances share the same &lt;g> node.
      **/
-    constructor(svgNode, offset, scale, canvasSize, fillShapes, drawConfig, isSecondary, gNode, bufferGNode) {
+    constructor(svgNode, offset, scale, canvasSize, fillShapes, drawConfig, isSecondary, gNode, bufferGNode, nodeDefs, bufferNodeDefs) {
         this.svgNode = svgNode;
         this.offset = new Vertex(0, 0).set(offset);
         this.scale = new Vertex(1, 1).set(scale);
@@ -4354,14 +4282,23 @@ class drawutilssvg {
         if (isSecondary) {
             this.gNode = gNode;
             this.bufferGNode = bufferGNode;
+            this.nodeDefs = nodeDefs;
+            this.bufferedNodeDefs = bufferNodeDefs;
         }
         else {
             this.addStyleDefs(drawConfig);
+            this.addDefsNode();
             this.gNode = this.createSVGNode("g");
             this.bufferGNode = this.createSVGNode("g");
             this.svgNode.appendChild(this.gNode);
         }
     }
+    /**
+     * Adds a default style defintion based on the passed DrawConfig.
+     * Twaek the draw config to change default colors or line thicknesses.
+     *
+     * @param {DrawConfig} drawConfig
+     */
     addStyleDefs(drawConfig) {
         this.nodeStyle = this.createSVGNode("style");
         this.svgNode.appendChild(this.nodeStyle);
@@ -4394,6 +4331,15 @@ class drawutilssvg {
         }
         this.nodeStyle.innerHTML = rules.join("\n");
     }
+    /**
+     * Adds the internal <defs> node.
+     */
+    addDefsNode() {
+        this.nodeDefs = this.createSVGNode("defs");
+        // this.svgNode.appendChild(this.nodeDefs);
+        this.bufferedNodeDefs = this.createSVGNode("defs");
+        this.svgNode.appendChild(this.nodeDefs);
+    }
     /**
      * This is a simple way to include custom CSS class mappings to the style defs of the generated SVG.
      *
@@ -4531,7 +4477,7 @@ class drawutilssvg {
     copyInstance(fillShapes) {
         var copy = new drawutilssvg(this.svgNode, this.offset, this.scale, this.canvasSize, fillShapes, null, // no DrawConfig
         true, // isSecondary
-        this.gNode, this.bufferGNode);
+        this.gNode, this.bufferGNode, this.nodeDefs, this.bufferedNodeDefs);
         return copy;
     }
     /**
@@ -4608,11 +4554,15 @@ class drawutilssvg {
             // layout updates.
             // Replace the old <g>-node with the buffer node.
             //   https://stackoverflow.com/questions/27442464/how-to-update-a-svg-image-without-seeing-a-blinking
+            this.svgNode.replaceChild(this.bufferedNodeDefs, this.nodeDefs);
             this.svgNode.replaceChild(this.bufferGNode, this.gNode);
         }
-        let tmp = this.gNode;
+        const tmpGNode = this.gNode;
         this.gNode = this.bufferGNode;
-        this.bufferGNode = tmp;
+        this.bufferGNode = tmpGNode;
+        const tmpDefsNode = this.nodeDefs;
+        this.nodeDefs = this.bufferedNodeDefs;
+        this.bufferedNodeDefs = tmpDefsNode;
     }
     _x(x) {
         return this.offset.x + this.scale.x * x;
@@ -4675,11 +4625,12 @@ class drawutilssvg {
      * @param {Image} image - The image object to draw.
      * @param {Vertex} position - The position to draw the the upper left corner at.
      * @param {Vertex} size - The x/y-size to draw the image with.
+     * @param {number=0.0} alpha - (optional, default=0.0) The transparency (1.0=opaque, 0.0=transparent).
      * @return {void}
      * @instance
      * @memberof drawutilssvg
      **/
-    image(image, position, size) {
+    image(image, position, size, alpha = 1.0) {
         const node = this.makeNode("image");
         // We need to re-adjust the image if it was not yet fully loaded before.
         const setImageSize = (image) => {
@@ -4689,6 +4640,9 @@ class drawutilssvg {
                 node.setAttribute("width", `${image.naturalWidth * this.scale.x}`);
                 node.setAttribute("height", `${image.naturalHeight * this.scale.y}`);
                 node.setAttribute("display", null); // Dislay when loaded
+                // if (alpha) {
+                node.setAttribute("opacity", `${alpha}`);
+                // }
                 node.setAttribute("transform", `translate(${this._x(position.x)} ${this._y(position.y)}) scale(${ratioX} ${ratioY})`);
             }
         };
@@ -4704,6 +4658,74 @@ class drawutilssvg {
         node.setAttribute("href", image.src);
         return this._bindFillDraw(node, "image", null, null);
     }
+    /**
+     * Draw an image at the given position with the given size.<br>
+     * <br>
+     * Note: SVG images may have resizing issues at the moment.Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
+     *
+     * @method texturedPoly
+     * @param {Image} textureImage - The image object to draw.
+     * @param {Bounds} textureSize - The texture size to use; these are the original bounds to map the polygon vertices to.
+     * @param {Polygon} polygon - The polygon to use as clip path.
+     * @param {Vertex} polygonPosition - The polygon's position (relative), measured at the bounding box's center.
+     * @param {number} rotation - The rotation to use for the polygon (and for the texture).
+     * @return {void}
+     * @instance
+     * @memberof drawutilssvg
+     **/
+    texturedPoly(textureImage, textureSize, polygon, polygonPosition, rotation) {
+        polygon.getBounds();
+        const rotatedScalingOrigin = new Vertex(textureSize.min).clone().rotate(rotation, polygonPosition);
+        polygonPosition.clone().add(rotatedScalingOrigin.difference(textureSize.min).inv());
+        // Create something like this
+        // ...
+        //    <defs>
+        //       <clipPath id="shape">
+        //         <path fill="none" d="..."/>
+        //       </clipPath>
+        //    </defs>
+        //    ...
+        //    <g clip-path="url(#shape)">
+        //       <g transform="scale(...)">
+        //          <image width="643" height="643" transform="rotate(...)" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" >
+        //       </g>
+        //    </g>
+        //    </image>
+        // ...
+        const clipPathNode = this.makeNode("clipPath");
+        const clipPathId = `clippath_${UIDGenerator.next()}`; // TODO: use a better UUID generator here?
+        clipPathNode.setAttribute("id", clipPathId);
+        const gNode = this.makeNode("g");
+        const imageNode = this.makeNode("image");
+        imageNode.setAttribute("x", `${this._x(rotatedScalingOrigin.x)}`);
+        imageNode.setAttribute("y", `${this._y(rotatedScalingOrigin.y)}`);
+        imageNode.setAttribute("width", `${textureSize.width}`);
+        imageNode.setAttribute("height", `${textureSize.height}`);
+        imageNode.setAttribute("href", textureImage.src);
+        // imageNode.setAttribute("opacity", "0.5");
+        // SVG rotations in degrees
+        imageNode.setAttribute("transform", `rotate(${rotation * RAD_TO_DEG}, ${this._x(rotatedScalingOrigin.x)}, ${this._y(rotatedScalingOrigin.y)})`);
+        const pathNode = this.makeNode("path");
+        const pathData = [];
+        if (polygon.vertices.length > 0) {
+            pathData.push("M", `${this._x(polygon.vertices[0].x)}`, `${this._y(polygon.vertices[0].y)}`);
+            for (var i = 1; i < polygon.vertices.length; i++) {
+                pathData.push("L", `${this._x(polygon.vertices[i].x)}`, `${this._y(polygon.vertices[i].y)}`);
+            }
+        }
+        pathNode.setAttribute("d", pathData.join(" "));
+        clipPathNode.appendChild(pathNode);
+        this.bufferedNodeDefs.appendChild(clipPathNode);
+        gNode.appendChild(imageNode);
+        gNode.setAttribute("transform-origin", `${this._x(rotatedScalingOrigin.x)} ${this._y(rotatedScalingOrigin.y)}`);
+        gNode.setAttribute("transform", `scale(${this.scale.x}, ${this.scale.y})`);
+        const clipNode = this.makeNode("g");
+        clipNode.appendChild(gNode);
+        clipNode.setAttribute("clip-path", `url(#${clipPathId})`);
+        // TODO: check if the image class is correct here or if we should use a 'clippedImage' class here
+        this._bindFillDraw(clipNode, "image", null, null); // No color, no lineWidth
+        return clipNode;
+    }
     /**
      * Draw the given (cubic) bézier curve.
      *
@@ -5096,11 +5118,12 @@ class drawutilssvg {
      * @param {XYCoords} center - The center of the crosshair.
      * @param {number} radius - The radius of the crosshair.
      * @param {string} color - The CSS color to draw the crosshair with.
+     * @param {number=0.5} lineWidth - (optional, default=0.5) The line width to use.
      * @return {void}
      * @instance
      * @memberof drawutilssvg
      */
-    crosshair(center, radius, color) {
+    crosshair(center, radius, color, lineWidth) {
         const node = this.makeNode("path");
         const d = [
             "M",
@@ -5117,7 +5140,40 @@ class drawutilssvg {
             this._y(center.y) + radius
         ];
         node.setAttribute("d", d.join(" "));
-        return this._bindFillDraw(node, "crosshair", color, 0.5);
+        return this._bindFillDraw(node, "crosshair", color, lineWidth || 0.5);
+    }
+    /**
+     * Draw a cross with diagonal axes with given radius, color and lineWidth at the given position.<br>
+     * <br>
+     * Note that the x's radius will not be affected by scaling.
+     *
+     * @method crosshair
+     * @param {XYCoords} center - The center of the crosshair.
+     * @param {number} radius - The radius of the crosshair.
+     * @param {string} color - The CSS color to draw the crosshair with.
+     * @param {number=1} lineWidth - (optional, default=1.0) The line width to use.
+     * @return {void}
+     * @instance
+     * @memberof drawutils
+     */
+    cross(center, radius, color, lineWidth) {
+        const node = this.makeNode("path");
+        const d = [
+            "M",
+            this._x(center.x) - radius,
+            this._y(center.y) - radius,
+            "L",
+            this._x(center.x) + radius,
+            this._y(center.y) + radius,
+            "M",
+            this._x(center.x) - radius,
+            this._y(center.y) + radius,
+            "L",
+            this._x(center.x) + radius,
+            this._y(center.y) - radius
+        ];
+        node.setAttribute("d", d.join(" "));
+        return this._bindFillDraw(node, "cross", color, lineWidth || 1.0);
     }
     /**
      * Draw a polygon.
@@ -5280,14 +5336,6 @@ class drawutilssvg {
         if (this.isSecondary) {
             return;
         }
-        // // Clearing an SVG is equivalent to removing all its child elements.
-        // for (var i = 0; i < this.gNode.childNodes.length; i++) {
-        //   // Hide all nodes here. Don't throw them away.
-        //   // We can probably re-use them in the next draw cycle.
-        //   var child: SVGElement = this.gNode.childNodes[i] as SVGElement;
-        //   this.cache.set(child.getAttribute("id"), child);
-        // }
-        // this.removeAllChildNodes();
         // Add a covering rect with the given background color
         this.curId = "background";
         this.curClassName = undefined;
@@ -5313,6 +5361,9 @@ class drawutilssvg {
         while (this.bufferGNode.lastChild) {
             this.bufferGNode.removeChild(this.bufferGNode.lastChild);
         }
+        while (this.bufferedNodeDefs.lastChild) {
+            this.bufferedNodeDefs.removeChild(this.bufferedNodeDefs.lastChild);
+        }
     }
     /**
      * Create a new and empty `SVGElement` &lt;svg&gt; in the svg-namespace.
@@ -5552,7 +5603,12 @@ drawutilssvg.HEAD_XML = [
  * @modified 2021-05-31 Added the `setConfiguration` function from `DrawLib`.
  * @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
+ * @modified 2022-02-03 Added the `lineWidth` param to the `crosshair` function.
+ * @modified 2022-02-03 Added the `cross(...)` function.
+ * @modified 2022-03-27 Added the `texturedPoly` function.
+ * @modified 2022-06-01 Tweaked the `polyline` function; lineWidth now scales with scale.x.
+ * @modified 2022-07-26 Adding `alpha` to the `image(...)` function.
+ * @version  1.12.2
  **/
 // Todo: rename this class to Drawutils?
 /**
@@ -5689,16 +5745,18 @@ class drawutils {
      * @param {Image} image - The image object to draw.
      * @param {Vertex} position - The position to draw the the upper left corner at.
      * @param {Vertex} size - The x/y-size to draw the image with.
+     * @param {number=0.0} alpha - (optional, default=0.0) The transparency (1.0=opaque, 0.0=transparent).
      * @return {void}
      * @instance
      * @memberof drawutils
      **/
-    image(image, position, size) {
+    image(image, position, size, alpha = 1.0) {
         if (!image.complete || !image.naturalWidth) {
             // Avoid drawing un-unloaded or broken images
             return;
         }
         this.ctx.save();
+        this.ctx.globalAlpha = alpha;
         // Note that there is a Safari bug with the 3 or 5 params variant.
         // Only the 9-param varaint works.
         this.ctx.drawImage(image, 0, 0, image.naturalWidth - 1, // There is this horrible Safari bug (fixed in newer versions)
@@ -5706,6 +5764,96 @@ class drawutils {
         this.offset.x + position.x * this.scale.x, this.offset.y + position.y * this.scale.y, size.x * this.scale.x, size.y * this.scale.y);
         this.ctx.restore();
     }
+    /**
+     * Draw an image at the given position with the given size.<br>
+     * <br>
+     * Note: SVG images may have resizing issues at the moment.Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
+     *
+     * @method texturedPoly
+     * @param {Image} textureImage - The image object to draw.
+     * @param {Bounds} textureSize - The texture size to use; these are the original bounds to map the polygon vertices to.
+     * @param {Polygon} polygon - The polygon to use as clip path.
+     * @param {Vertex} polygonPosition - The polygon's position (relative), measured at the bounding box's center.
+     * @param {number} rotation - The rotation to use for the polygon (and for the texture).
+     * @param {XYCoords={x:0,y:0}} rotationCenter - (optional) The rotational center; default is center of bounding box.
+     * @return {void}
+     * @instance
+     * @memberof drawutils
+     **/
+    texturedPoly(textureImage, textureSize, polygon, polygonPosition, rotation) {
+        var basePolygonBounds = polygon.getBounds();
+        var targetCenterDifference = polygonPosition.clone().difference(basePolygonBounds.getCenter());
+        // var rotationalOffset = rotationCenter ? polygonPosition.difference(rotationCenter) : { x: 0, y: 0 };
+        // var rotationalOffset = { x: 0, y: 0 };
+        basePolygonBounds.getCenter().sub(targetCenterDifference);
+        // Get the position offset of the polygon
+        var targetTextureSize = new Vertex(textureSize.width, textureSize.height);
+        // var targetTextureOffset = new Vertex(-textureSize.width / 2, -textureSize.height / 2).sub(targetCenterDifference);
+        var targetTextureOffset = new Vertex(textureSize.min.x, textureSize.min.y).sub(polygonPosition);
+        this.ctx.save();
+        // this.ctx.translate(this.offset.x + rotationCenter.x * this.scale.x, this.offset.y + rotationCenter.y * this.scale.y);
+        this.ctx.translate(this.offset.x + polygonPosition.x * this.scale.x, this.offset.y + polygonPosition.y * this.scale.y);
+        drawutils.helpers.clipPoly(this.ctx, {
+            x: -polygonPosition.x * this.scale.x,
+            y: -polygonPosition.y * this.scale.y
+        }, this.scale, polygon.vertices);
+        this.ctx.scale(this.scale.x, this.scale.y);
+        this.ctx.rotate(rotation);
+        this.ctx.drawImage(textureImage, 0, 0, textureImage.naturalWidth - 1, // There is this horrible Safari bug (fixed in newer versions)
+        textureImage.naturalHeight - 1, // To avoid errors substract 1 here.
+        targetTextureOffset.x, // * this.scale.x,
+        targetTextureOffset.y, // * this.scale.y,
+        targetTextureSize.x, //  * this.scale.x,
+        targetTextureSize.y // * this.scale.y
+        );
+        this.ctx.restore();
+    }
+    _texturedPoly(textureImage, textureSize, polygon, polygonPosition, rotation, rotationCenter = { x: 0, y: 0 }) {
+        var basePolygonBounds = polygon.getBounds();
+        var targetCenterDifference = polygonPosition.clone().difference(basePolygonBounds.getCenter());
+        var rotationalOffset = rotationCenter ? polygonPosition.difference(rotationCenter) : { x: 0, y: 0 };
+        // var rotationalOffset = { x: 0, y: 0 };
+        var tileCenter = basePolygonBounds.getCenter().sub(targetCenterDifference);
+        // Get the position offset of the polygon
+        var targetTextureSize = new Vertex(textureSize.width, textureSize.height);
+        var targetTextureOffset = new Vertex(-textureSize.width / 2, -textureSize.height / 2).sub(targetCenterDifference);
+        this.ctx.save();
+        // this.ctx.translate(
+        //   this.offset.x + (tileCenter.x - rotationalOffset.x * 0 + targetTextureOffset.x * 0.0) * this.scale.x,
+        //   this.offset.y + (tileCenter.y - rotationalOffset.y * 0 + targetTextureOffset.y * 0.0) * this.scale.y
+        // );
+        this.ctx.translate(this.offset.x + (tileCenter.x - rotationalOffset.x * 0 + targetTextureOffset.x * 0.0) * this.scale.x, this.offset.y + (tileCenter.y - rotationalOffset.y * 0 + targetTextureOffset.y * 0.0) * this.scale.y);
+        this.ctx.rotate(rotation);
+        drawutils.helpers.clipPoly(this.ctx, {
+            x: (-targetCenterDifference.x * 1 - tileCenter.x - rotationalOffset.x) * this.scale.x,
+            y: (-targetCenterDifference.y * 1 - tileCenter.y - rotationalOffset.y) * this.scale.y
+        }, this.scale, polygon.vertices);
+        this.ctx.drawImage(textureImage, 0, 0, textureImage.naturalWidth - 1, // There is this horrible Safari bug (fixed in newer versions)
+        textureImage.naturalHeight - 1, // To avoid errors substract 1 here.
+        (-polygonPosition.x + targetTextureOffset.x * 1 - rotationalOffset.x * 1) * this.scale.x, (-polygonPosition.y + targetTextureOffset.y * 1 - rotationalOffset.y * 1) * this.scale.y, targetTextureSize.x * this.scale.x, targetTextureSize.y * this.scale.y);
+        // const scaledTextureSize = new Bounds(
+        //   new Vertex(
+        //     -polygonPosition.x + targetTextureOffset.x - rotationalOffset.x,
+        //     -polygonPosition.y + targetTextureOffset.y - rotationalOffset.y
+        //   ).scaleXY(this.scale, rotationCenter),
+        //   new Vertex(
+        //     -polygonPosition.x + targetTextureOffset.x - rotationalOffset.x + targetTextureSize.x,
+        //     -polygonPosition.y + targetTextureOffset.y - rotationalOffset.y + targetTextureSize.y
+        //   ).scaleXY(this.scale, rotationCenter)
+        // );
+        // this.ctx.drawImage(
+        //   textureImage,
+        //   0,
+        //   0,
+        //   textureImage.naturalWidth - 1, // There is this horrible Safari bug (fixed in newer versions)
+        //   textureImage.naturalHeight - 1, // To avoid errors substract 1 here.
+        //   scaledTextureSize.min.x,
+        //   scaledTextureSize.min.y,
+        //   scaledTextureSize.width,
+        //   scaledTextureSize.height
+        // );
+        this.ctx.restore();
+    }
     /**
      * Draw a rectangle.
      *
@@ -6146,11 +6294,12 @@ class drawutils {
      * @param {XYCoords} center - The center of the crosshair.
      * @param {number} radius - The radius of the crosshair.
      * @param {string} color - The CSS color to draw the crosshair with.
+     * @param {number=0.5} lineWidth - (optional, default=0.5) The line width to use.
      * @return {void}
      * @instance
      * @memberof drawutils
      */
-    crosshair(center, radius, color) {
+    crosshair(center, radius, color, lineWidth) {
         this.ctx.save();
         this.ctx.beginPath();
         this.ctx.moveTo(this.offset.x + center.x * this.scale.x - radius, this.offset.y + center.y * this.scale.y);
@@ -6158,7 +6307,34 @@ class drawutils {
         this.ctx.moveTo(this.offset.x + center.x * this.scale.x, this.offset.y + center.y * this.scale.y - radius);
         this.ctx.lineTo(this.offset.x + center.x * this.scale.x, this.offset.y + center.y * this.scale.y + radius);
         this.ctx.strokeStyle = color;
-        this.ctx.lineWidth = 0.5;
+        this.ctx.lineWidth = lineWidth || 0.5;
+        this.ctx.stroke();
+        this.ctx.closePath();
+        this.ctx.restore();
+    }
+    /**
+     * Draw a cross with diagonal axes with given radius, color and lineWidth at the given position.<br>
+     * <br>
+     * Note that the x's radius will not be affected by scaling.
+     *
+     * @method crosshair
+     * @param {XYCoords} center - The center of the crosshair.
+     * @param {number} radius - The radius of the crosshair.
+     * @param {string} color - The CSS color to draw the crosshair with.
+     * @param {number=1} lineWidth - (optional, default=1.0) The line width to use.
+     * @return {void}
+     * @instance
+     * @memberof drawutils
+     */
+    cross(center, radius, color, lineWidth) {
+        this.ctx.save();
+        this.ctx.beginPath();
+        this.ctx.moveTo(this.offset.x + center.x * this.scale.x - radius, this.offset.y + center.y * this.scale.y - radius);
+        this.ctx.lineTo(this.offset.x + center.x * this.scale.x + radius, this.offset.y + center.y * this.scale.y + radius);
+        this.ctx.moveTo(this.offset.x + center.x * this.scale.x - radius, this.offset.y + center.y * this.scale.y + radius);
+        this.ctx.lineTo(this.offset.x + center.x * this.scale.x + radius, this.offset.y + center.y * this.scale.y - radius);
+        this.ctx.strokeStyle = color;
+        this.ctx.lineWidth = lineWidth || 1.0;
         this.ctx.stroke();
         this.ctx.closePath();
         this.ctx.restore();
@@ -6190,11 +6366,12 @@ class drawutils {
      * @memberof drawutils
      */
     polyline(vertices, isOpen, color, lineWidth) {
-        if (vertices.length <= 1)
+        if (vertices.length <= 1) {
             return;
+        }
         this.ctx.save();
         this.ctx.beginPath();
-        this.ctx.lineWidth = lineWidth || 1.0;
+        this.ctx.lineWidth = lineWidth * this.scale.x || 1.0;
         this.ctx.moveTo(this.offset.x + vertices[0].x * this.scale.x, this.offset.y + vertices[0].y * this.scale.y);
         for (var i = 0; i < vertices.length; i++) {
             this.ctx.lineTo(this.offset.x + vertices[i].x * this.scale.x, this.offset.y + vertices[i].y * this.scale.y);
@@ -6336,6 +6513,21 @@ class drawutils {
         this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
     }
 }
+drawutils.helpers = {
+    // A helper function to define the clipping path.
+    // This could be a candidate for the draw library.
+    clipPoly: (ctx, offset, scale, vertices) => {
+        ctx.beginPath();
+        // Set clip mask
+        ctx.moveTo(offset.x + vertices[0].x * scale.x, offset.y + vertices[0].y * scale.y);
+        for (var i = 1; i < vertices.length; i++) {
+            const vert = vertices[i];
+            ctx.lineTo(offset.x + vert.x * scale.x, offset.y + vert.y * scale.y);
+        }
+        ctx.closePath();
+        ctx.clip();
+    }
+};
 
 /**
  * @author   Ikaros Kappler
@@ -6345,7 +6537,11 @@ class drawutils {
  * @modified 2020-10-15 Re-added the text() function.
  * @modified 2021-01-24 Added the `setCurrentId` function.
  * @modified 2021-05-31 Added the `setConfiguration` function from `DrawLib`.
- * @version  0.0.5
+ * @modified 2022-02-03 Added the `lineWidth` param to the `crosshair` function.
+ * @modified 2022-02-03 Added the `cross(...)` function.
+ * @modified 2022-03-27 Added the `texturedPoly` function.
+ * @modified 2022-07-26 Adding `alpha` to the `image(...)` function.
+ * @version  0.0.8
  **/
 /**
  * @classdesc A wrapper class for basic drawing operations. This is the WebGL
@@ -6535,11 +6731,30 @@ class drawutilsgl {
      * @param {Image} image - The image object to draw.
      * @param {Vertex} position - The position to draw the the upper left corner at.
      * @param {Vertex} size - The x/y-size to draw the image with.
+     * @param {number=0.0} alpha - (optional, default=0.0) The transparency (0.0=opaque, 1.0=transparent).
      * @return {void}
      * @instance
      * @memberof drawutils
      **/
-    image(image, position, size) {
+    image(image, position, size, alpha = 0.0) {
+        // NOT YET IMPLEMENTED
+    }
+    /**
+     * Draw an image at the given position with the given size.<br>
+     * <br>
+     * Note: SVG images may have resizing issues at the moment.Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
+     *
+     * @method texturedPoly
+     * @param {Image} textureImage - The image object to draw.
+     * @param {Bounds} textureSize - The texture size to use; these are the original bounds to map the polygon vertices to.
+     * @param {Polygon} polygon - The polygon to use as clip path.
+     * @param {Vertex} polygonPosition - The polygon's position (relative), measured at the bounding box's center.
+     * @param {number} rotation - The rotation to use for the polygon (and for the texture).
+     * @return {void}
+     * @instance
+     * @memberof drawutilsgl
+     **/
+    texturedPoly(textureImage, textureSize, polygon, polygonPosition, rotation) {
         // NOT YET IMPLEMENTED
     }
     // +---------------------------------------------------------------------------------
@@ -6823,11 +7038,29 @@ class drawutilsgl {
      * @param {XYCoords} center - The center of the crosshair.
      * @param {number} radius - The radius of the crosshair.
      * @param {string} color - The CSS color to draw the crosshair with.
+     * @param {number=0.5} lineWidth - (optional, default=0.5) The line width to use.
      * @return {void}
      * @instance
      * @memberof drawutils
      */
-    crosshair(center, radius, color) {
+    crosshair(center, radius, color, lineWidth) {
+        // NOT YET IMPLEMENTED
+    }
+    /**
+     * Draw a cross with diagonal axes with given radius, color and lineWidth at the given position.<br>
+     * <br>
+     * Note that the x's radius will not be affected by scaling.
+     *
+     * @method crosshair
+     * @param {XYCoords} center - The center of the crosshair.
+     * @param {number} radius - The radius of the crosshair.
+     * @param {string} color - The CSS color to draw the crosshair with.
+     * @param {number=1} lineWidth - (optional, default=1.0) The line width to use.
+     * @return {void}
+     * @instance
+     * @memberof drawutils
+     */
+    cross(center, radius, color, lineWidth) {
         // NOT YET IMPLEMENTED
     }
     /**
@@ -7067,7 +7300,9 @@ class GLU {
  * @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.
@@ -7128,7 +7363,6 @@ class Triangle {
             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.
      *
@@ -7144,7 +7378,6 @@ class Triangle {
     getArea() {
         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.
      *
@@ -7158,7 +7391,6 @@ class Triangle {
     getCentroid() {
         return new 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.
      *
@@ -7175,7 +7407,6 @@ class Triangle {
         this.c.scale(factor, centroid);
         return this;
     }
-    ;
     /**
      * Get the circumcircle of this triangle.
      *
@@ -7192,11 +7423,10 @@ class Triangle {
      * @memberof Triangle
      */
     getCircumcircle() {
-        // if( !this.center || !this.radius ) 
+        // if( !this.center || !this.radius )
         this.calcCircumcircle();
         return new Circle(this.center.clone(), this.radius);
     }
-    ;
     /**
      * Check if this triangle and the passed triangle share an
      * adjacent edge.
@@ -7216,7 +7446,6 @@ class Triangle {
         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.
@@ -7229,14 +7458,13 @@ class Triangle {
      * @memberof Triangle
      */
     getThirdVertex(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).
@@ -7276,8 +7504,7 @@ class Triangle {
         }
         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.
@@ -7292,9 +7519,8 @@ class Triangle {
         const dx = this.center.x - v.x;
         const dy = this.center.y - v.y;
         const 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.
      *
@@ -7306,7 +7532,6 @@ class Triangle {
     bounds() {
         return new Bounds(new 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(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.
      *
@@ -7320,7 +7545,6 @@ class Triangle {
     toPolygon() {
         return new Polygon([this.a, this.b, this.c]);
     }
-    ;
     /**
      * Get the determinant of this triangle.
      *
@@ -7333,7 +7557,6 @@ class Triangle {
         // (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.
      *
@@ -7348,7 +7571,6 @@ class Triangle {
     containsPoint(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.
      *
@@ -7367,7 +7589,6 @@ class Triangle {
         const 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.
@@ -7379,7 +7600,6 @@ class Triangle {
     getIncircle() {
         return this.getIncircularTriangle().getCircumcircle();
     }
-    ;
     /**
      * Get the incenter of this triangle (which is the center of the circumcircle).
      *
@@ -7393,7 +7613,6 @@ class Triangle {
             this.calcCircumcircle();
         return this.center.clone();
     }
-    ;
     /**
      * Converts this triangle into a human-readable string.
      *
@@ -7403,46 +7622,19 @@ class Triangle {
      * @memberof Triangle
      */
     toString() {
-        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.
-     *
-     * @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} The SVG string.
-     * @instance
-     * @memberof Triangle
-     **/
-    toSVGString(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('');
+     * 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.
+     */
+    destroy() {
+        this.a.destroy();
+        this.b.destroy();
+        this.c.destroy();
+        this.isDestroyed = true;
     }
-    ;
 }
 /**
  * An epsilon for comparison.
@@ -7454,10 +7646,10 @@ Triangle.EPSILON = 1.0e-6;
 Triangle.utils = {
     // Used in the bounds() function.
     max3(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(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(p0x, p0y, p1x, p1y, p2x, p2y) {
         return 0.5 * (-p1y * p2x + p0y * (-p1x + p2x) + p0x * (p1y - p2y) + p1x * p2y);
@@ -7473,9 +7665,9 @@ Triangle.utils = {
         //   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;
     }
 };
 
@@ -7646,7 +7838,8 @@ Grid.utils = {
  * @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
@@ -7677,7 +7870,7 @@ class KeyHandler {
      * @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).
-    **/
+     **/
     constructor(options) {
         this.downListeners = [];
         this.pressListeners = [];
@@ -7696,7 +7889,6 @@ class KeyHandler {
         // Install the listeners
         this.installListeners();
     }
-    ;
     /**
      * A helper function to fire key events from this KeyHandler.
      *
@@ -7714,7 +7906,6 @@ class KeyHandler {
         }
         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.
@@ -7730,10 +7921,9 @@ class KeyHandler {
     fireDownEvent(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.
@@ -7749,7 +7939,6 @@ class KeyHandler {
     firePressEvent(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.
@@ -7768,20 +7957,18 @@ class KeyHandler {
             delete handler.keyStates[e.keyCode];
         }
     }
-    ;
     /**
      * Resolve the key/name code.
      */
     static key2code(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.
      *
@@ -7790,20 +7977,24 @@ class KeyHandler {
      */
     installListeners() {
         var _self = this;
-        this.element.addEventListener('keydown', this._keyDownListener = (e) => { _self.fireDownEvent(e, _self); });
-        this.element.addEventListener('keypress', this._keyPressListener = (e) => { _self.firePressEvent(e, _self); });
-        this.element.addEventListener('keyup', this._keyUpListener = (e) => { _self.fireUpEvent(e, _self); });
+        this.element.addEventListener("keydown", (this._keyDownListener = (e) => {
+            _self.fireDownEvent(e, _self);
+        }));
+        this.element.addEventListener("keypress", (this._keyPressListener = (e) => {
+            _self.firePressEvent(e, _self);
+        }));
+        this.element.addEventListener("keyup", (this._keyUpListener = (e) => {
+            _self.fireUpEvent(e, _self);
+        }));
     }
-    ;
     /**
      *  Remove all installed event listeners from the underlying element.
      */
     releaseListeners() {
-        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.
      *
@@ -7820,7 +8011,6 @@ class KeyHandler {
         this.downListeners.push({ key: key, keyCode: KeyHandler.key2code(key), listener: listener });
         return this;
     }
-    ;
     /**
      * Listen for key press.
      *
@@ -7837,7 +8027,6 @@ class KeyHandler {
         this.pressListeners.push({ key: key, keyCode: KeyHandler.key2code(key), listener: listener });
         return this;
     }
-    ;
     /**
      * Listen for key up.
      *
@@ -7854,23 +8043,31 @@ class KeyHandler {
         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.
      */
     isDown(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.
+     */
+    destroy() {
+        this.releaseListeners();
+    }
 }
 /**
  * Source:
  * https://keycode.info/
  */
+// prettier-ignore
 KeyHandler.KEY_CODES = {
     'break': 3,
     'backspace': 8,
@@ -8187,41 +8384,41 @@ class MouseHandler {
         // | drag offset, ...) to the callbacks.
         // +-------------------------------------------------
         const _self = this;
-        this.handlers['mousemove'] = (e) => {
+        this.handlers["mousemove"] = (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'] = (e) => {
+        this.handlers["mouseup"] = (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'] = (e) => {
+        this.handlers["mousedown"] = (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'] = (e) => {
+        this.handlers["click"] = (e) => {
             if (_self.listeners.click)
-                _self.listeners.click(_self.mkParams(e, 'click'));
+                _self.listeners.click(_self.mkParams(e, "click"));
         };
-        this.handlers['wheel'] = (e) => {
+        this.handlers["wheel"] = (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.
@@ -8234,11 +8431,8 @@ class MouseHandler {
      * @return {XYCoords} The relative mouse coordinates.
      */
     relPos(e) {
-        return { x: e.offsetX,
-            y: e.offsetY
-        };
+        return { x: e.offsetX, y: e.offsetY };
     }
-    ;
     /**
      * Build the extended event params.
      *
@@ -8264,8 +8458,8 @@ class MouseHandler {
             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;
     }
@@ -8316,14 +8510,13 @@ class MouseHandler {
      */
     drag(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.
@@ -8338,12 +8531,11 @@ class MouseHandler {
      */
     move(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.
@@ -8358,12 +8550,11 @@ class MouseHandler {
      */
     up(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.
@@ -8378,12 +8569,11 @@ class MouseHandler {
      */
     down(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.
@@ -8398,12 +8588,11 @@ class MouseHandler {
      */
     click(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.
@@ -8418,12 +8607,11 @@ class MouseHandler {
      */
     wheel(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.
      *
@@ -8437,7 +8625,6 @@ class MouseHandler {
     throwAlreadyInstalled(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.
      *
@@ -8450,16 +8637,16 @@ class MouseHandler {
      * @return {void}
      */
     destroy() {
-        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"]);
     }
 }
 
@@ -8469,7 +8656,9 @@ class 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
@@ -8504,28 +8693,23 @@ class PBImage {
         this.upperLeft = upperLeft;
         this.lowerRight = lowerRight;
     }
-    ;
     /**
-     * Convert this vertex to SVG code.
-     *
-     * @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 PBImage
-     **/
-    toSVGString(options) {
-        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.
+     */
+    destroy() {
+        this.upperLeft.destroy();
+        this.lowerRight.destroy();
+        this.isDestroyed = true;
     }
-    ;
 }
 
 /**
  * @author   Ikaros Kappler
  * @date     2021-11-16
- * @version  1.0.0
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @version  1.1.0
  **/
 /**
  * @classdesc A simple text element: position, fontSize, fontFamily, color, textAlign, lineHeight and rotation.
@@ -8566,18 +8750,13 @@ class PBText {
         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
+     * 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.
      */
-    toSVGString(options) {
-        console.warn("[PBText.toSVGString()] This function is not implemented as it defines a deprecated method. Use the 'drawutilssvg.text()' method instead.");
-        return "";
+    destroy() {
+        this.anchor.destroy();
+        this.isDestroyed = true;
     }
 } // END class
 
@@ -8982,7 +9161,9 @@ class AlloyFinger {
  * @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).
@@ -9301,24 +9482,14 @@ class VEllipse {
         return curves;
     }
     /**
-     * Create an SVG representation of this ellipse.
-     *
-     * @deprecated DEPRECATION Please use the drawutilssvg library and an XMLSerializer instead.
-     * @param {object} options { className?:string }
-     * @return string The SVG string
+     * 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.
      */
-    toSVGString(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("");
+    destroy() {
+        this.center.destroy();
+        this.axis.destroy();
+        this.isDestroyed = true;
     }
 }
 /**
@@ -9385,7 +9556,8 @@ VEllipse.utils = {
  *
  * @author  Ikaros Kappler
  * @date    2021-02-26
- * @version 1.0.0
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @version 1.1.0
  */
 /**
  * @classdesc A class for elliptic sectors.
@@ -9471,6 +9643,15 @@ class VEllipseSector {
         }
         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.
+     */
+    destroy() {
+        this.ellipse.destroy();
+        this.isDestroyed = true;
+    }
 }
 VEllipseSector.ellipseSectorUtils = {
     /**
@@ -9711,7 +9892,8 @@ VEllipseSector.ellipseSectorUtils = {
  * @modified 2021-03-29 Clearing `currentClassName` and `currentId` after drawing each drawable.
  * @modified 2021-04-25 Extending `remove` to accept arrays of drawables.
  * @modified 2021-11-16 Adding the `PBText` drawable.
- * @version  1.15.0
+ * @modified 2022-08-01 Added `title` to the params.
+ * @version  1.15.1
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.
@@ -9804,6 +9986,7 @@ class PlotBoilerplate {
      * @param {boolean=} [config.enableGL=false] - Indicates if the application should use the experimental WebGL features (not recommended).
      * @param {boolean=} [config.enableSVGExport=true] - Indicates if the SVG export should be enabled (default is true).
      *                                                   Note that changes from the postDraw hook might not be visible in the export.
+     * @param {string=} [config.title=null] - Specify any hover tile here. It will be attached as a `title` attribute to the most elevated element.
      */
     constructor(config) {
         /**
@@ -10019,6 +10202,11 @@ class PlotBoilerplate {
         else {
             throw "Element is neither a canvas nor an svg element.";
         }
+        // At this point the event cacher element is deinfed and located at highest elevation.
+        // Set `title` attribut?
+        if (config.title) {
+            this.eventCatcher.setAttribute("title", config.title);
+        }
         this.draw.scale.set(this.config.scaleX, this.config.scaleY);
         this.fill.scale.set(this.config.scaleX, this.config.scaleY);
         this.vertices = [];
@@ -10321,7 +10509,7 @@ class PlotBoilerplate {
             }
         }
         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
@@ -11701,100 +11889,5 @@ PlotBoilerplate.utils = {
     }
 }; // END utils
 
-/**
- * Todos:
- *  + use a Drawable interface
- *  + use a SVGSerializable interface
- *
- * @require Vertex
- *
- * @deprecated THIS CLASS IS DEPRECATED. Please use the new `drawutilssvg` instead.
- *
- * @author   Ikaros Kappler
- * @date     2018-12-04
- * @modified 2019-11-07 Added the 'Triangle' style class.
- * @modified 2019-11-13 Added the <?xml ...?> tag.
- * @modified 2020-03-25 Ported this class from vanilla-JS to Typescript.
- * @modified 2020-12-17 Added Circle and CircleSection style classes.
- * @modified 2021-01-26 DEPRECATION
- * @version  1.0.5
- **/
-/**
- * @classdesc A default SVG builder.
- *
- * @requires SVGSerializable
- * @requires Vertex
- */
-class SVGBuilder {
-    /**
-     * @constructor
-     **/
-    constructor() {
-        console.warn("THIS CLASS IS DEPRECATED. Please use the new 'drawutilssvg' instead.");
-    }
-    ;
-    /**
-     *  Builds the SVG code from the given list of drawables.
-     *
-     * @param {object[]} drawables - The drawable elements (should implement Drawable) to be converted (each must have a toSVGString-function).
-     * @param {object}   options  - { canvasSize, zoom, offset }
-     * @return {string}
-     **/
-    build(drawables, options) {
-        var nl = '\n';
-        var indent = '  ';
-        var buffer = [];
-        buffer.push('<?xml version="1.0" encoding="UTF-8"?>' + nl);
-        buffer.push('<svg width="' + options.canvasSize.width + '" height="' + options.canvasSize.height + '"');
-        buffer.push(' viewBox="');
-        buffer.push('0');
-        buffer.push(' ');
-        buffer.push('0');
-        buffer.push(' ');
-        buffer.push(options.canvasSize.width.toString());
-        buffer.push(' ');
-        buffer.push(options.canvasSize.height.toString());
-        buffer.push('"');
-        buffer.push(' xmlns="http://www.w3.org/2000/svg">' + nl);
-        buffer.push(indent + '<defs>' + nl);
-        buffer.push(indent + '<style>' + nl);
-        buffer.push(indent + indent + ' .Vertex { fill : blue; stroke : none; } ' + nl);
-        buffer.push(indent + indent + ' .Triangle { fill : none; stroke : turquoise; stroke-width : 1px; } ' + nl);
-        buffer.push(indent + indent + ' .Polygon { fill : none; stroke : green; stroke-width : 2px; } ' + nl);
-        buffer.push(indent + indent + ' .BezierPath { fill : none; stroke : blue; stroke-width : 2px; } ' + nl);
-        buffer.push(indent + indent + ' .VEllipse { fill : none; stroke : black; stroke-width : 1px; } ' + nl);
-        buffer.push(indent + indent + ' .Line { fill : none; stroke : purple; stroke-width : 1px; } ' + nl);
-        buffer.push(indent + indent + ' .Circle { fill : none; stroke : purple; stroke-width : 1px; } ' + nl);
-        buffer.push(indent + indent + ' .CircleSector { fill : none; stroke : purple; stroke-width : 1px; } ' + nl);
-        buffer.push(indent + '</style>' + nl);
-        buffer.push(indent + '</defs>' + nl);
-        buffer.push(indent + '<g class="main-g"');
-        if (options.zoom || options.offset) {
-            buffer.push(' transform="');
-            if (options.zoom)
-                buffer.push('scale(' + options.zoom.x + ',' + options.zoom.y + ')');
-            if (options.offset)
-                buffer.push(' translate(' + options.offset.x + ',' + options.offset.y + ')');
-            buffer.push('"');
-        }
-        buffer.push('>' + nl);
-        for (var i in drawables) {
-            var d = drawables[i];
-            if (typeof d.toSVGString == 'function') {
-                buffer.push(indent + indent);
-                buffer.push(d.toSVGString({ 'className': d.className }));
-                buffer.push(nl);
-            }
-            else {
-                console.warn('Unrecognized drawable type has no toSVGString()-function. Ignoring: ' + d.className);
-            }
-        }
-        buffer.push(indent + '</g>' + nl);
-        buffer.push('</svg>' + nl);
-        return buffer.join('');
-    }
-    ;
-}
-
-export { BezierPath, Bounds, Circle, CircleSector, CubicBezierCurve, Grid, KeyHandler, Line, MouseHandler, PBImage, PBText, PlotBoilerplate, Polygon, SVGBuilder, Triangle, UIDGenerator, VEllipse, VEllipseSector, Vector, VertTuple, Vertex, VertexAttr, VertexListeners, XMouseEvent, XWheelEvent, drawutils, drawutilsgl, drawutilssvg, geomutils };
+export { BezierPath, Bounds, Circle, CircleSector, CubicBezierCurve, Grid, KeyHandler, Line, MouseHandler, PBImage, PBText, PlotBoilerplate, Polygon, Triangle, UIDGenerator, VEllipse, VEllipseSector, Vector, VertTuple, Vertex, VertexAttr, VertexListeners, XMouseEvent, XWheelEvent, drawutils, drawutilsgl, drawutilssvg, geomutils };
 //# sourceMappingURL=index.esm.js.map