plotboilerplate 1.16.0 → 1.17.0

package/src/ts/Polygon.ts

@@ -23,7 +23,8 @@
  * @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
@@ -143,9 +144,9 @@ export class Polygon implements SVGSerializable {
    * @memberof Polygon
    * @return {Polygon} this for chaining
    **/
-  move(vert: XYCoords): Polygon {
+  move(amount: XYCoords): Polygon {
     for (var i in this.vertices) {
-      this.vertices[i].add(vert);
+      this.vertices[i].add(amount);
     }
     return this;
   }
@@ -336,6 +337,18 @@ export class Polygon implements SVGSerializable {
     return Bounds.computeFromVertices(this.vertices);
   }
 
+  /**
+   * Create a deep copy of this polygon.
+   *
+   * @return {Polygon} The cloned polygon.
+   */
+  clone(): Polygon {
+    return new Polygon(
+      this.vertices.map(vert => vert.clone()),
+      this.isOpen
+    );
+  }
+
   /**
    * Convert this polygon to a sequence of quadratic Bézier curves.<br>
    * <br>
@@ -479,45 +492,6 @@ export class Polygon implements SVGSerializable {
     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: { className?: string } | undefined): string {
-    // 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

package/src/ts/Triangle.ts

@@ -451,46 +451,6 @@ export class Triangle implements SVGSerializable {
     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: { className?: string }): string {
-    // 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

package/src/ts/VEllipse.ts

@@ -413,30 +413,6 @@ export class VEllipse implements SVGSerializable {
     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: { className?: string }) {
-    // 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

package/src/ts/Vector.ts

@@ -116,46 +116,6 @@ export class Vector extends VertTuple<Vector> implements SVGSerializable {
     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: { className?: string }) {
-    // 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 "";
-  }
-
   static utils = {
     /**
      * Generate a four-point arrow head, starting at the vector end minus the

package/src/ts/Vertex.ts

@@ -574,34 +574,6 @@ export class Vertex implements XYCoords, SVGSerializable {
     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: { className?: string }): string {
-    // 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

package/src/ts/draw.ts

@@ -39,7 +39,10 @@
  * @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
  **/
 
 import { CubicBezierCurve } from "./CubicBezierCurve";
@@ -47,6 +50,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?
 /**
@@ -251,6 +255,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 +928,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 +941,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();
@@ -992,4 +1165,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,10 @@
  * @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
  **/
 
 import { CubicBezierCurve } from "./CubicBezierCurve";
@@ -22,6 +25,7 @@ import {
   FontStyle,
   FontWeight
 } from "./interfaces";
+import { Bounds } from "./Bounds";
 
 /**
  * @classdesc A wrapper class for basic drawing operations. This is the WebGL
@@ -283,6 +287,25 @@ export class drawutilsgl implements DrawLib<void> {
     // 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
+  }
+
   // +---------------------------------------------------------------------------------
   // | This is the final helper function for drawing and filling stuff. It is not
   // | intended to be used from the outside.
@@ -588,11 +611,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
   }