plotboilerplate 1.15.0 → 1.17.1

package/src/ts/draw.ts

@@ -39,7 +39,12 @@
  * @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
  **/
 
 import { CubicBezierCurve } from "./CubicBezierCurve";
@@ -47,6 +52,7 @@ import { Polygon } from "./Polygon";
 import { Vertex } from "./Vertex";
 import { DrawLib, SVGPathParams, XYCoords, UID, DrawLibConfiguration, FontStyle, FontWeight } from "./interfaces";
 import { drawutilssvg } from "./drawutilssvg";
+import { Bounds } from "./Bounds";
 
 // Todo: rename this class to Drawutils?
 /**
@@ -225,16 +231,18 @@ export class drawutils implements DrawLib<void> {
    * @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: HTMLImageElement, position: Vertex, size: Vertex): void {
+  image(image: HTMLImageElement, position: Vertex, size: Vertex, alpha: number = 1.0): void {
     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(
@@ -251,6 +259,146 @@ export class drawutils implements DrawLib<void> {
     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: HTMLImageElement,
+    textureSize: Bounds,
+    polygon: Polygon,
+    polygonPosition: Vertex,
+    rotation: number
+  ): void {
+    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);
+    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: HTMLImageElement,
+    textureSize: Bounds,
+    polygon: Polygon,
+    polygonPosition: Vertex,
+    rotation: number,
+    rotationCenter: XYCoords = { x: 0, y: 0 }
+  ): void {
+    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.
    *
@@ -784,11 +932,12 @@ export class drawutils implements DrawLib<void> {
    * @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: XYCoords, radius: number, color: string) {
+  crosshair(center: XYCoords, radius: number, color: string, lineWidth?: number) {
     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);
@@ -796,7 +945,35 @@ export class drawutils implements DrawLib<void> {
     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: XYCoords, radius: number, color: string, lineWidth?: number) {
+    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();
@@ -830,10 +1007,12 @@ export class drawutils implements DrawLib<void> {
    * @memberof drawutils
    */
   polyline(vertices: Array<Vertex>, isOpen: boolean, color: string, lineWidth?: number) {
-    if (vertices.length <= 1) return;
+    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);
@@ -992,4 +1171,20 @@ export class drawutils implements DrawLib<void> {
     this.ctx.fillStyle = color;
     this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
   }
+
+  private static helpers = {
+    // A helper function to define the clipping path.
+    // This could be a candidate for the draw library.
+    clipPoly: (ctx: CanvasRenderingContext2D, offset: XYCoords, scale: XYCoords, vertices: Array<XYCoords>): void => {
+      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: XYCoords = vertices[i];
+        ctx.lineTo(offset.x + vert.x * scale.x, offset.y + vert.y * scale.y);
+      }
+      ctx.closePath();
+      ctx.clip();
+    }
+  };
 }

package/src/ts/drawgl.ts

@@ -6,7 +6,11 @@
  * @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
  **/
 
 import { CubicBezierCurve } from "./CubicBezierCurve";
@@ -22,6 +26,7 @@ import {
   FontStyle,
   FontWeight
 } from "./interfaces";
+import { Bounds } from "./Bounds";
 
 /**
  * @classdesc A wrapper class for basic drawing operations. This is the WebGL
@@ -275,11 +280,31 @@ export class drawutilsgl implements DrawLib<void> {
    * @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: HTMLImageElement, position: Vertex, size: Vertex) {
+  image(image: HTMLImageElement, position: Vertex, size: Vertex, alpha: number = 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: HTMLImageElement, textureSize: Bounds, polygon: Polygon, polygonPosition: Vertex, rotation: number) {
     // NOT YET IMPLEMENTED
   }
 
@@ -588,11 +613,30 @@ export class drawutilsgl implements DrawLib<void> {
    * @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: XYCoords, radius: number, color: string, lineWidth?: number) {
+    // 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
    */
-  crosshair(center: XYCoords, radius: number, color: string) {
+  cross(center: XYCoords, radius: number, color: string, lineWidth?: number) {
     // NOT YET IMPLEMENTED
   }
 

package/src/ts/drawutilssvg.ts

@@ -29,7 +29,12 @@
  * @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
  **/
 
 import { CircleSector } from "./CircleSector";
@@ -48,6 +53,8 @@ import {
   FontStyle,
   FontWeight
 } from "./interfaces";
+import { Bounds } from "./Bounds";
+import { UIDGenerator } from "./UIDGenerator";
 
 const RAD_TO_DEG = 180 / Math.PI;
 
@@ -98,6 +105,24 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
    */
   private nodeStyle: SVGStyleElement;
 
+  /**
+   * A style node of type `<defs>`.
+   * @member {SVGGelement}
+   * @memberof drawutilssvg
+   * @instance
+   * @private
+   */
+  private nodeDefs: SVGDefsElement;
+
+  /**
+   * The buffered nodeDefs.
+   * @member {SVGGelement}
+   * @memberof drawutilssvg
+   * @instance
+   * @private
+   */
+  private bufferedNodeDefs: SVGDefsElement;
+
   /**
    * @member {Vertex}
    * @memberof drawutilssvg
@@ -181,7 +206,9 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     drawConfig: DrawConfig,
     isSecondary?: boolean,
     gNode?: SVGGElement,
-    bufferGNode?: SVGGElement
+    bufferGNode?: SVGGElement,
+    nodeDefs?: SVGDefsElement,
+    bufferNodeDefs?: SVGDefsElement
   ) {
     this.svgNode = svgNode;
     this.offset = new Vertex(0, 0).set(offset);
@@ -195,14 +222,23 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     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") as SVGGElement;
       this.bufferGNode = this.createSVGNode("g") as SVGGElement;
       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
+   */
   private addStyleDefs(drawConfig: DrawConfig) {
     this.nodeStyle = this.createSVGNode("style") as SVGStyleElement;
     this.svgNode.appendChild(this.nodeStyle);
@@ -236,6 +272,16 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     this.nodeStyle.innerHTML = rules.join("\n");
   }
 
+  /**
+   * Adds the internal <defs> node.
+   */
+  private addDefsNode() {
+    this.nodeDefs = this.createSVGNode("defs") as SVGDefsElement;
+    // this.svgNode.appendChild(this.nodeDefs);
+    this.bufferedNodeDefs = this.createSVGNode("defs") as SVGDefsElement;
+    this.svgNode.appendChild(this.nodeDefs);
+  }
+
   /**
    * This is a simple way to include custom CSS class mappings to the style defs of the generated SVG.
    *
@@ -386,7 +432,9 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
       null, // no DrawConfig
       true, // isSecondary
       this.gNode,
-      this.bufferGNode
+      this.bufferGNode,
+      this.nodeDefs,
+      this.bufferedNodeDefs
     );
     return copy;
   }
@@ -470,11 +518,16 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
       // 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: SVGGElement = this.gNode;
+    const tmpGNode: SVGGElement = this.gNode;
     this.gNode = this.bufferGNode;
-    this.bufferGNode = tmp;
+    this.bufferGNode = tmpGNode;
+
+    const tmpDefsNode: SVGDefsElement = this.nodeDefs;
+    this.nodeDefs = this.bufferedNodeDefs;
+    this.bufferedNodeDefs = tmpDefsNode;
   }
 
   private _x(x: number): number {
@@ -542,11 +595,12 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
    * @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: HTMLImageElement, position: Vertex, size: Vertex) {
+  image(image: HTMLImageElement, position: Vertex, size: Vertex, alpha: number = 1.0) {
     const node: SVGElement = this.makeNode("image");
 
     // We need to re-adjust the image if it was not yet fully loaded before.
@@ -557,6 +611,9 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
         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})`);
       }
     };
@@ -574,6 +631,90 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     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: HTMLImageElement,
+    textureSize: Bounds,
+    polygon: Polygon,
+    polygonPosition: Vertex,
+    rotation: number
+  ): SVGElement {
+    const basePolygonBounds: Bounds = polygon.getBounds();
+    const rotatedScalingOrigin = new Vertex(textureSize.min).clone().rotate(rotation, polygonPosition);
+    const rotationCenter = 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: SVGClipPathElement = this.makeNode("clipPath") as SVGClipPathElement;
+    const clipPathId: string = `clippath_${UIDGenerator.next()}`; // TODO: use a better UUID generator here?
+    clipPathNode.setAttribute("id", clipPathId);
+
+    const gNode = this.makeNode("g") as SVGGElement;
+    const imageNode: SVGImageElement = this.makeNode("image") as SVGImageElement;
+    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: SVGPathElement = this.makeNode("path") as SVGPathElement;
+    const pathData: string[] = [];
+    if (polygon.vertices.length > 0) {
+      const self = this;
+      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: SVGGElement = this.makeNode("g") as SVGGElement;
+    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.
    *
@@ -1020,11 +1161,12 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
    * @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: XYCoords, radius: number, color: string) {
+  crosshair(center: XYCoords, radius: number, color: string, lineWidth?: number) {
     const node: SVGElement = this.makeNode("path");
     const d: SVGPathParams = [
       "M",
@@ -1041,7 +1183,41 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
       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: XYCoords, radius: number, color: string, lineWidth?: number) {
+    const node: SVGElement = this.makeNode("path");
+    const d: SVGPathParams = [
+      "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);
   }
 
   /**
@@ -1226,14 +1402,6 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     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";
@@ -1262,6 +1430,9 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     while (this.bufferGNode.lastChild) {
       this.bufferGNode.removeChild(this.bufferGNode.lastChild);
     }
+    while (this.bufferedNodeDefs.lastChild) {
+      this.bufferedNodeDefs.removeChild(this.bufferedNodeDefs.lastChild);
+    }
   }
 
   /**

package/src/ts/index.ts

@@ -16,7 +16,6 @@ export * from "./PBImage";
 export * from "./PBText";
 export * from "./PlotBoilerplate";
 export * from "./Polygon";
-export * from "./SVGBuilder";
 export * from "./Triangle";
 export * from "./UIDGenerator";
 export * from "./Vector";