plotboilerplate 1.16.0 → 1.17.0

package/dist/index.esm.js

@@ -843,31 +843,6 @@ class Vertex {
     toString() {
         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
-     * @deprecated
-     **/
-    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("");
-        console.warn("[Deprecation] Warning: the Vertex.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
-        return "";
-    }
-    // END Vertex
     /**
      * This function should invalidate any installed listeners and invalidate this object.
      * After calling this function the object might not hold valid data any more and
@@ -972,7 +947,8 @@ Vertex.utils = {
  * @modified 2021-12-16 Added the `getEvenDistributionPolygon()` function.
  * @modified 2022-02-02 Added the `destroy` method.
  * @modified 2022-02-02 Cleared the `Polygon.toSVGString` function (deprecated). Use `drawutilssvg` instead.
- * @version 1.9.0
+ * @modified 2022-03-08 Added the `Polygon.clone()` function.
+ * @version 1.10.0
  *
  * @file Polygon
  * @public
@@ -1050,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;
     }
@@ -1231,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>
@@ -1367,42 +1351,6 @@ 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: Array<string> = [];
-        // buffer.push("<path");
-        // if (options.className) buffer.push(' class="' + options.className + '"');
-        // buffer.push(' d="');
-        // if (this.vertices.length > 0) {
-        //   buffer.push("M ");
-        //   buffer.push(this.vertices[0].x.toString());
-        //   buffer.push(" ");
-        //   buffer.push(this.vertices[0].y.toString());
-        //   for (var i = 1; i < this.vertices.length; i++) {
-        //     buffer.push(" L ");
-        //     buffer.push(this.vertices[i].x.toString());
-        //     buffer.push(" ");
-        //     buffer.push(this.vertices[i].y.toString());
-        //   }
-        //   if (!this.isOpen) {
-        //     buffer.push(" Z");
-        //   }
-        // }
-        // buffer.push('" />');
-        // return buffer.join("");
-        console.warn("[Deprecation] Warning: the Polygon.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
-        return "";
-    }
     /**
      * This function should invalidate any installed listeners and invalidate this object.
      * After calling this function the object might not hold valid data any more and
@@ -1463,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.
@@ -1498,9 +1447,31 @@ 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} }`;
+    }
     /**
      * Compute the minimal bounding box for a given set of vertices.
      *
@@ -1938,42 +1909,6 @@ class Vector extends VertTuple {
         // 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("");
-        console.warn("[Deprecation] Warning: the Vector.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
-        return "";
-    }
 }
 Vector.utils = {
     /**
@@ -2574,42 +2509,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>
-     *
-     * @deprecated DEPRECATION Please use the drawutilssvg library and an XMLSerializer instead.
-     * @method toSVGPathData
-     * @instance
-     * @memberof CubicBezierCurve
-     * @return {string}  The SVG path data string.
-     **/
-    toSVGPathData() {
-        // var buffer: Array<string> = [];
-        // buffer.push("M ");
-        // buffer.push(this.startPoint.x.toString());
-        // buffer.push(" ");
-        // buffer.push(this.startPoint.y.toString());
-        // buffer.push(" C ");
-        // buffer.push(this.startControlPoint.x.toString());
-        // buffer.push(" ");
-        // buffer.push(this.startControlPoint.y.toString());
-        // buffer.push(" ");
-        // buffer.push(this.endControlPoint.x.toString());
-        // buffer.push(" ");
-        // buffer.push(this.endControlPoint.y.toString());
-        // buffer.push(" ");
-        // buffer.push(this.endPoint.x.toString());
-        // buffer.push(" ");
-        // buffer.push(this.endPoint.y.toString());
-        // return buffer.join("");
-        console.warn("[Deprecation] Warning: the CubicBezierCurve.toSVGPathData method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
-        return "";
-    }
     /**
      * Convert this curve to a JSON string.
      *
@@ -3724,32 +3623,6 @@ 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: Array<string> = [];
-        // buffer.push("<path");
-        // if (options.className) buffer.push(' class="' + options.className + '"');
-        // buffer.push(' d="');
-        // for (var c = 0; c < this.bezierCurves.length; c++) {
-        //   if (c > 0) buffer.push(" ");
-        //   buffer.push(this.bezierCurves[c].toSVGPathData());
-        // }
-        // buffer.push('" />');
-        // return buffer.join("");
-        console.warn("[Deprecation] Warning: the BezierPath.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
-        return "";
-    }
     /**
      * This function should invalidate any installed listeners and invalidate this object.
      * After calling this function the object might not hold valid data any more and
@@ -4045,32 +3918,6 @@ class Line extends VertTuple {
         // 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('');
-        console.warn("[Deprecation] Warning: the Line.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
-        return "";
-    }
 }
 
 /**
@@ -4226,29 +4073,6 @@ class Circle {
         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: Array<string> = [];
-        // buffer.push("<circle");
-        // if (options.className) buffer.push(' class="' + options.className + '"');
-        // buffer.push(' cx="' + this.center.x + '"');
-        // buffer.push(' cy="' + this.center.y + '"');
-        // buffer.push(' r="' + this.radius + '"');
-        // buffer.push(" />");
-        // return buffer.join("");
-        console.warn("[Deprecation] Warning: the Circle.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
-        return "";
-    }
     /**
      * This function should invalidate any installed listeners and invalidate this object.
      * After calling this function the object might not hold valid data any more and
@@ -4303,33 +4127,6 @@ class CircleSector {
         this.startAngle = startAngle;
         this.endAngle = endAngle;
     }
-    /**
-     * 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: Array<string> = [];
-        // buffer.push("<path ");
-        // if (options.className) buffer.push(' class="' + options.className + '"');
-        // const data: SVGPathParams = CircleSector.circleSectorUtils.describeSVGArc(
-        //   this.circle.center.x,
-        //   this.circle.center.y,
-        //   this.circle.radius,
-        //   this.startAngle,
-        //   this.endAngle
-        // );
-        // buffer.push(' d="' + data.join(" ") + '" />');
-        // return buffer.join("");
-        console.warn("[Deprecation] Warning: the CircleSector.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
-        return "";
-    }
     /**
      * This function should invalidate any installed listeners and invalidate this object.
      * After calling this function the object might not hold valid data any more and
@@ -4427,7 +4224,11 @@ 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.
+ * @version  1.6.0
  **/
 const RAD_TO_DEG = 180 / Math.PI;
 /**
@@ -4454,7 +4255,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);
@@ -4466,14 +4267,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);
@@ -4506,6 +4316,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.
      *
@@ -4643,7 +4462,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;
     }
     /**
@@ -4720,11 +4539,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;
@@ -4816,6 +4639,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.
      *
@@ -5208,11 +5099,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",
@@ -5229,7 +5121,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.
@@ -5392,14 +5317,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;
@@ -5425,6 +5342,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.
@@ -5664,7 +5584,10 @@ 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.
+ * @version  1.12.0
  **/
 // Todo: rename this class to Drawutils?
 /**
@@ -5818,6 +5741,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.
      *
@@ -6258,11 +6271,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);
@@ -6270,7 +6284,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();
@@ -6448,6 +6489,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
@@ -6457,7 +6513,10 @@ 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.
+ * @version  0.0.7
  **/
 /**
  * @classdesc A wrapper class for basic drawing operations. This is the WebGL
@@ -6654,6 +6713,24 @@ class drawutilsgl {
     image(image, position, size) {
         // 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
+    }
     // +---------------------------------------------------------------------------------
     // | This is the final helper function for drawing and filling stuff. It is not
     // | intended to be used from the outside.
@@ -6935,11 +7012,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
     }
     /**
@@ -7503,43 +7598,6 @@ class Triangle {
     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("");
-        console.warn("[Deprecation] Warning: the Triangle.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
-        return "";
-    }
     /**
      * This function should invalidate any installed listeners and invalidate this object.
      * After calling this function the object might not hold valid data any more and
@@ -8609,20 +8667,6 @@ 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
@@ -8679,20 +8723,6 @@ class PBText {
         this.textAlign = options.textAlign;
         this.rotation = options.rotation;
     }
-    /**
-     * Create an SVG representation of this circle.
-     *
-     * @deprecated DEPRECATION Please use the drawutilssvg library and an XMLSerializer instead.
-     * @method toSVGString
-     * @param {object=} options - An optional set of options, like 'className'.
-     * @return {string} A string representing the SVG code for this vertex.
-     * @instance
-     * @memberof Circle
-     */
-    toSVGString(options) {
-        console.warn("[PBText.toSVGString()] This function is not implemented as it defines a deprecated method. Use the 'drawutilssvg.text()' method instead.");
-        return "";
-    }
     /**
      * 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
@@ -9425,27 +9455,6 @@ 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
-     */
-    toSVGString(options) {
-        // options = options || {};
-        // var buffer: Array<string> = [];
-        // buffer.push("<ellipse");
-        // if (options.className) buffer.push(' class="' + options.className + '"');
-        // buffer.push(' cx="' + this.center.x + '"');
-        // buffer.push(' cy="' + this.center.y + '"');
-        // buffer.push(' rx="' + this.axis.x + '"');
-        // buffer.push(' ry="' + this.axis.y + '"');
-        // buffer.push(" />");
-        // return buffer.join("");
-        console.warn("[Deprecation] Warning: the VEllipse.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead.");
-        return "";
-    }
     /**
      * This function should invalidate any installed listeners and invalidate this object.
      * After calling this function the object might not hold valid data any more and
@@ -11847,100 +11856,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