plotboilerplate 1.20.2 → 1.21.0

package/src/ts/PlotBoilerplate.ts

@@ -82,7 +82,8 @@
  * @modified 2023-02-10 Fixing an issue of the `style.position` setting when `fitToParent=true` from `absolute` to `static` (default).
  * @modified 2023-02-10 Cleaning up most type errors in the main class (mostly null checks).
  * @modified 2023-02-10 Adding `enableZoom` and `enablePan` (both default true) to have the option to disable these functions.
- * @version  1.17.2
+ * @modified 2023-09-29 Adding proper dicionary key and value types to the params of `PlotBoilerplate.utils.safeMergeByKeys` (was `object` before).
+ * @version  1.17.3
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.
@@ -399,7 +400,7 @@ export class PlotBoilerplate {
       visible: true
     };
 
-    if (typeof config.canvas == "undefined") {
+    if (typeof config.canvas === "undefined") {
       throw "No canvas specified.";
     }
 
@@ -496,6 +497,10 @@ export class PlotBoilerplate {
           fill: true
         }
       },
+      // bezierPath: {
+      //   color: "#0022a8",
+      //   lineWidth: 1
+      // },
       polygon: {
         color: "#0022a8",
         lineWidth: 1
@@ -557,7 +562,10 @@ export class PlotBoilerplate {
     this.grid = new Grid(new Vertex(0, 0), new Vertex(50, 50));
     this.canvasSize = { width: PlotBoilerplate.DEFAULT_CANVAS_WIDTH, height: PlotBoilerplate.DEFAULT_CANVAS_HEIGHT };
     const canvasElement: Element =
-      typeof config.canvas == "string" ? (document.querySelector(config.canvas) as Element) : config.canvas;
+      typeof config.canvas === "string" ? (document.querySelector(config.canvas) as Element) : config.canvas;
+    if (typeof canvasElement === "undefined") {
+      throw `Cannot initialize PlotBoilerplate with a null canvas (element "${config.canvas} not found).`;
+    }
     // Which renderer to use: Canvas2D, WebGL (experimental) or SVG?
     if (canvasElement.tagName.toLowerCase() === "canvas") {
       this.canvas = canvasElement as HTMLCanvasElement;
@@ -1259,20 +1267,10 @@ export class PlotBoilerplate {
         if (this.drawConfig.drawBezierHandleLines && this.drawConfig.drawHandleLines) {
           draw.setCurrentId(`${d.uid}_l0`);
           draw.setCurrentClassName(`${d.className}-start-line`);
-          draw.line(
-            d.bezierCurves[c].startPoint,
-            d.bezierCurves[c].startControlPoint,
-            this.drawConfig.bezier.handleLine.color,
-            this.drawConfig.bezier.handleLine.lineWidth
-          );
+          draw.handleLine(d.bezierCurves[c].startPoint, d.bezierCurves[c].startControlPoint);
           draw.setCurrentId(`${d.uid}_l1`);
           draw.setCurrentClassName(`${d.className}-end-line`);
-          draw.line(
-            d.bezierCurves[c].endPoint,
-            d.bezierCurves[c].endControlPoint,
-            this.drawConfig.bezier.handleLine.color,
-            this.drawConfig.bezier.handleLine.lineWidth
-          );
+          draw.handleLine(d.bezierCurves[c].endPoint, d.bezierCurves[c].endControlPoint);
         }
         curveIndex++;
       } // END for
@@ -1291,11 +1289,11 @@ export class PlotBoilerplate {
         draw.setCurrentId(`${d.uid}_e0`);
         draw.setCurrentClassName(`${d.className}-v-line`);
         // draw.line( d.center.clone().add(0,d.axis.y-d.center.y), d.axis, '#c8c8c8' );
-        draw.line(d.center.clone().add(0, d.signedRadiusV()).rotate(d.rotation, d.center), d.axis, "#c8c8c8");
+        draw.handleLine(d.center.clone().add(0, d.signedRadiusV()).rotate(d.rotation, d.center), d.axis); // , "#c8c8c8");
         draw.setCurrentId(`${d.uid}_e1`);
         draw.setCurrentClassName(`${d.className}-h-line`);
         // draw.line( d.center.clone().add(d.axis.x-d.center.x,0), d.axis, '#c8c8c8' );
-        draw.line(d.center.clone().add(d.signedRadiusH(), 0).rotate(d.rotation, d.center), d.axis, "#c8c8c8");
+        draw.handleLine(d.center.clone().add(d.signedRadiusH(), 0).rotate(d.rotation, d.center), d.axis); // , "#c8c8c8");
       }
       draw.setCurrentId(d.uid);
       draw.setCurrentClassName(`${d.className}`);
@@ -2233,7 +2231,45 @@ export class PlotBoilerplate {
      * @param {Object} extension
      * @return {Object} base extended by the new attributes.
      **/
-    safeMergeByKeys: (base: Object, extension: Object): Object => {
+    safeMergeByKeys: <KeyType extends string | number | symbol, ValueType>(
+      base: Record<KeyType, ValueType>,
+      extension: Record<KeyType, ValueType>
+    ): Record<KeyType, ValueType> => {
+      for (var k in extension) {
+        if (!extension.hasOwnProperty(k)) {
+          continue;
+        }
+        if (base.hasOwnProperty(k)) {
+          const typ = typeof base[k];
+          const extVal = extension[k];
+          try {
+            if (typ == "boolean") {
+              if (typeof extVal === "string") base[k] = Boolean(!!JSON.parse(extVal)) as unknown as ValueType;
+              else base[k] = extVal as ValueType;
+            } else if (typ == "number") {
+              if (typeof extVal === "string") base[k] = Number(JSON.parse(extVal) * 1) as unknown as ValueType;
+              else base[k] = extension[k] as ValueType;
+            } else if (typ == "function" && typeof extVal == "function") {
+              base[k] = extension[k];
+            } else {
+              // Probably a sting
+              base[k] = extension[k];
+            }
+          } catch (e) {
+            console.error("error in key ", k, extVal, e);
+          }
+        } else {
+          base[k] = extension[k];
+        }
+      }
+      return base;
+    },
+
+    /*
+    __safeMergeByKeys: <KeyType extends string | number | symbol, ValueType extends boolean | number | string | Function>(
+      base: Record<KeyType, ValueType>,
+      extension: Record<KeyType, string>
+    ): Record<KeyType, ValueType> => {
       for (var k in extension) {
         if (!extension.hasOwnProperty(k)) continue;
         if (base.hasOwnProperty(k)) {
@@ -2252,6 +2288,7 @@ export class PlotBoilerplate {
       }
       return base;
     },
+    *()
 
     /**
      * A helper function to scale elements (usually the canvas) using CSS.
@@ -2314,7 +2351,7 @@ export class PlotBoilerplate {
        * @param {boolean} fallback - A default value if the key does not exist.
        * @return {boolean}
        **/
-      bool: (obj: any, key: string, fallback: boolean) => {
+      bool: (obj: any, key: string, fallback: boolean | null) => {
         if (!obj.hasOwnProperty(key)) return fallback;
         if (typeof obj[key] == "boolean") return obj[key];
         else {

package/src/ts/Polygon.ts

@@ -24,7 +24,10 @@
  * @modified 2022-02-02 Added the `destroy` method.
  * @modified 2022-02-02 Cleared the `Polygon.toSVGString` function (deprecated). Use `drawutilssvg` instead.
  * @modified 2022-03-08 Added the `Polygon.clone()` function.
- * @version 1.10.0
+ * @modified 2023-09-25 Added the `Polygon.getInterpolationPolygon(number)` function.
+ * @modified 2023-09-25 Added the `Polygon.lineIntersections(Line,boolean)` function.
+ * @modified 2023-09-29 Added the `Polygon.closestLineIntersection(Line,boolean)` function.
+ * @version 1.11.0
  *
  * @file Polygon
  * @public
@@ -32,7 +35,9 @@
 
 import { BezierPath } from "./BezierPath";
 import { Bounds } from "./Bounds";
+import { Line } from "./Line";
 import { UIDGenerator } from "./UIDGenerator";
+import { VertTuple } from "./VertTuple";
 import { Vertex } from "./Vertex";
 import { XYCoords, SVGSerializable, UID } from "./interfaces";
 
@@ -276,6 +281,91 @@ export class Polygon implements SVGSerializable {
     return this;
   }
 
+  /**
+   * Get all line intersections with this polygon.
+   *
+   * See demo `47-closest-vector-projection-on-polygon` for how it works.
+   *
+   * @param {VertTuple} line - The line to find intersections with.
+   * @param {boolean} inVectorBoundsOnly - If set to true only intersecion points on the passed vector are returned (located strictly between start and end vertex).
+   * @returns {Array<Vertex>} - An array of all intersections within the polygon bounds.
+   */
+  lineIntersections(line: VertTuple<any>, inVectorBoundsOnly: boolean = false): Array<Vertex> {
+    // Find the intersections of all lines inside the edge bounds
+    const intersectionPoints: Array<Vertex> = [];
+    for (var i = 0; i < this.vertices.length; i++) {
+      const polyLine = new Line(this.vertices[i], this.vertices[(i + 1) % this.vertices.length]);
+      const intersection = polyLine.intersection(line);
+      // true => only inside bounds
+      // ignore last edge if open
+      if (
+        (!this.isOpen || i + 1 !== this.vertices.length) &&
+        intersection !== null &&
+        polyLine.hasPoint(intersection, true) &&
+        (!inVectorBoundsOnly || line.hasPoint(intersection, inVectorBoundsOnly))
+      ) {
+        intersectionPoints.push(intersection);
+      }
+    }
+    return intersectionPoints;
+  }
+
+  /**
+   * Get the closest line-polygon-intersection point (closest the line point A).
+   *
+   * See demo `47-closest-vector-projection-on-polygon` for how it works.
+   *
+   * @param {VertTuple} line - The line to find intersections with.
+   * @param {boolean} inVectorBoundsOnly - If set to true only intersecion points on the passed vector are considered (located strictly between start and end vertex).
+   * @returns {Array<Vertex>} - An array of all intersections within the polygon bounds.
+   */
+  closestLineIntersection(line: VertTuple<any>, inVectorBoundsOnly: boolean = false): Vertex | null {
+    const allIntersections = this.lineIntersections(line, inVectorBoundsOnly);
+    if (allIntersections.length <= 0) {
+      // Empty polygon -> no intersections
+      return null;
+    }
+    // Find the closest intersection
+    let closestIntersection = new Vertex(Number.MAX_VALUE, Number.MAX_VALUE);
+    let curDist = Number.MAX_VALUE;
+    for (var i in allIntersections) {
+      const curVert = allIntersections[i];
+      const dist = curVert.distance(line.a);
+      if (dist < curDist) {
+        // && line.hasPoint(curVert)) {
+        curDist = dist;
+        closestIntersection = curVert;
+      }
+    }
+    return closestIntersection;
+  }
+
+  /**
+   * Construct a new polygon from this polygon with more vertices on each edge. The
+   * interpolation count determines the number of additional vertices on each edge.
+   * An interpolation count of `0` will return a polygon that equals the source
+   * polygon.
+   *
+   * @param {number} interpolationCount
+   * @returns {Polygon} A polygon with `interpolationCount` more vertices (as as factor).
+   */
+  getInterpolationPolygon(interpolationCount: number): Polygon {
+    const verts: Array<Vertex> = [];
+    for (var i = 0; i < this.vertices.length; i++) {
+      const curVert = this.vertices[i];
+      const nextVert = this.vertices[(i + 1) % this.vertices.length];
+      verts.push(curVert.clone());
+      // Add interpolation points
+      if (!this.isOpen || i + 1 !== this.vertices.length) {
+        const lerpAmount = 1.0 / (interpolationCount + 1);
+        for (var j = 1; j <= interpolationCount; j++) {
+          verts.push(curVert.clone().lerp(nextVert, lerpAmount * j));
+        }
+      }
+    }
+    return new Polygon(verts, this.isOpen);
+  }
+
   /**
    * Convert this polygon into a new polygon with n evenly distributed vertices.
    *

package/src/ts/VEllipse.ts

@@ -392,8 +392,8 @@ export class VEllipse implements SVGSerializable {
         let startTangent: Vector = this.tangentAt(curAngle);
         let endTangent: Vector = this.tangentAt(nextAngle);
 
-        // Find intersection
-        let intersection: Vertex | undefined = startTangent.intersection(endTangent);
+        // Find intersection (ignore that the result might be null in some extreme cases)
+        let intersection: Vertex = startTangent.intersection(endTangent) as Vertex;
         // What if intersection is undefined?
         // --> This *can* not happen if segmentCount > 2 and height and width of the ellipse are not zero.
 

package/src/ts/Vector.ts

@@ -20,7 +20,7 @@
 
 import { VertTuple } from "./VertTuple";
 import { Vertex } from "./Vertex";
-import { SVGSerializable } from "./interfaces";
+import { SVGSerializable, XYCoords } from "./interfaces";
 
 /**
  * @classdesc A vector (Vertex,Vertex) is a line with a visible direction.<br>
@@ -156,13 +156,13 @@ export class Vector extends VertTuple<Vector> implements SVGSerializable {
      * Example:
      *    buildArrowHead( new Vertex(0,0), new Vertex(50,100), 8, 1.0, 1.0 )
      *
-     * @param {Vertex} zA - The start vertex of the vector to calculate the arrow head for.
-     * @param {Vertex} zB - The end vertex of the vector.
+     * @param {XYCoords} zA - The start vertex of the vector to calculate the arrow head for.
+     * @param {XYCoords} zB - The end vertex of the vector.
      * @param {number} headlen - The length of the arrow head (along the vector direction. A good value is 12).
      * @param {number} scaleX  - The horizontal scaling during draw.
      * @param {number} scaleY  - the vertical scaling during draw.
      **/
-    buildArrowHead: (zA: Vertex, zB: Vertex, headlen: number, scaleX: number, scaleY: number) => {
+    buildArrowHead: (zA: XYCoords, zB: XYCoords, headlen: number, scaleX: number, scaleY: number): Array<Vertex> => {
       const angle = Math.atan2((zB.y - zA.y) * scaleY, (zB.x - zA.x) * scaleX);
       const vertices: Array<Vertex> = [];
       vertices.push(new Vertex(zB.x * scaleX - headlen * Math.cos(angle), zB.y * scaleY - headlen * Math.sin(angle)));

package/src/ts/VertTuple.ts

@@ -9,7 +9,8 @@
  * @modified 2020-12-04 Added the `hasPoint(XYCoords)` function.
  * @modified 2021-01-20 Added UID.
  * @modified 2022-02-02 Added the `destroy` method.
- * @version 1.2.0
+ * @modified 2023-09-29 Fixed a calculation error in the VertTuple.hasPoint() function; distance measure was broken!
+ * @version 1.2.1
  */
 
 import { Vertex } from "./Vertex";
@@ -277,11 +278,11 @@ export class VertTuple<T extends VertTuple<T>> {
   hasPoint(point: XYCoords, insideBoundsOnly?: boolean): boolean {
     const t: number = this.getClosestT(point);
     // Compare to pointDistance?
+    const distance: number = Math.sqrt(VertTuple.vtutils.dist2(point, this.vertAt(t)));
     if (typeof insideBoundsOnly !== "undefined" && insideBoundsOnly) {
-      const distance: number = Math.sqrt(VertTuple.vtutils.dist2(point, this.vertAt(t)));
       return distance < Vertex.EPSILON && t >= 0 && t <= 1;
     } else {
-      return t >= 0 && t <= 1;
+      return distance < Vertex.EPSILON; // t >= 0 && t <= 1;
     }
   }
 

package/src/ts/Vertex.ts

@@ -29,6 +29,8 @@
  * @modified 2022-02-02 Added the `destroy` method.
  * @modified 2022-02-02 Cleared the `Vertex.toSVGString` function (deprecated). Use `drawutilssvg` instead.
  * @modified 2022-11-28 Added the `subXY`, `subX` and `subY` methods to the `Vertex` class.
+ * @modified 2023-09-29 Downgraded types for the `Vertex.utils.buildArrowHead` function (replacing Vertex params by more generic XYCoords type).
+ * @modified 2023-09-29 Added the `Vertex.abs()` method as it seems useful.
  * @version  2.8.0
  *
  * @file Vertex
@@ -607,6 +609,20 @@ export class Vertex implements XYCoords, SVGSerializable {
     return this;
   }
 
+  /**
+   * Set both coordinates of this vertex to their absolute value (abs(x), abs(y)).
+   *
+   * @method abs
+   * @return {Vertex} this
+   * @instance
+   * @memberof Vertex
+   */
+  abs(): Vertex {
+    this.x = Math.abs(this.x);
+    this.y = Math.abs(this.y);
+    return this;
+  }
+
   /**
    * Get a string representation of this vertex.
    *
@@ -662,15 +678,15 @@ export class Vertex implements XYCoords, SVGSerializable {
      * Example:
      *    buildArrowHead( new Vertex(0,0), new Vertex(50,100), 8, 1.0, 1.0 )
      *
-     * @param {Vertex} zA - The start vertex of the vector to calculate the arrow head for.
-     * @param {Vertex} zB - The end vertex of the vector.
+     * @param {XYCoords} zA - The start vertex of the vector to calculate the arrow head for.
+     * @param {XYCoords} zB - The end vertex of the vector.
      * @param {number} headlen - The length of the arrow head (along the vector direction. A good value is 12).
      * @param {number} scaleX  - The horizontal scaling during draw.
      * @param {number} scaleY  - the vertical scaling during draw.
      **/
     // @DEPRECATED: use Vector.utils.buildArrowHead instead!!!
-    buildArrowHead: (zA: Vertex, zB: Vertex, headlen: number, scaleX: number, scaleY: number): Array<Vertex> => {
-      // console.warn('This function is deprecated! Use Vector.utils.buildArrowHead instead!');
+    buildArrowHead: (zA: XYCoords, zB: XYCoords, headlen: number, scaleX: number, scaleY: number): Array<Vertex> => {
+      console.warn("[DEPRECATION] Vertex.utils.buildArrowHead is deprecated. Please use Vector.utils.buildArrowHead instead.");
       var angle: number = Math.atan2((zB.y - zA.y) * scaleY, (zB.x - zA.x) * scaleX);
 
       var vertices: Array<Vertex> = [];