plotboilerplate 1.20.2 → 1.22.0

package/src/ts/Bounds.ts

@@ -8,12 +8,14 @@
  * @modified 2022-02-01 Added the `toString` function.
  * @modified 2022-10-09 Added the `fromDimension` function.
  * @modified 2022-11-28 Added the `clone` method.
- * @version  1.6.0
+ * @modified 2023-09-29 Added the `randomPoint` method.
+ * @version  1.7.0
  **/
 
 import { Polygon } from "./Polygon";
 import { XYCoords, IBounds, XYDimension } from "./interfaces";
 import { Vertex } from "./Vertex";
+import { VertTuple } from "./VertTuple";
 
 /**
  * @classdesc A bounds class with min and max values. Implementing IBounds.
@@ -97,6 +99,28 @@ export class Bounds implements IBounds, XYDimension {
     return new Vertex(this.min.x + (this.max.x - this.min.x) / 2.0, this.min.y + (this.max.y - this.min.y) / 2);
   }
 
+  /**
+   * Generate a random point inside this bounds object. Safe areas at the border to avoid
+   * included.
+   *
+   * @method randomPoint
+   * @instance
+   * @memberof Bounds
+   * @param {horizontalSafeArea} - (optional) The horizonal (left and right) safe area. No vertex will be created here. Can be used as percent in (0.0 ... 0.1) interval.
+   * @param {verticalSafeArea} - (optional) The vertical (top and bottom) safe area. No vertex will be created here. Can be used as percent in (0.0 ... 0.1) interval
+   * @returns {Vertex} A pseudo random point inside these bounds.
+   */
+  randomPoint(horizontalSafeArea: number = 0, verticalSafeArea: number = 0): Vertex {
+    // Check if the safe areas are meant as percent
+    const absHorizontalSafeArea =
+      horizontalSafeArea > 0 && horizontalSafeArea < 1 ? this.width * horizontalSafeArea : horizontalSafeArea;
+    const absVerticalSafeArea = verticalSafeArea > 0 && verticalSafeArea < 1 ? this.height * verticalSafeArea : verticalSafeArea;
+    return new Vertex(
+      this.min.x + absHorizontalSafeArea + Math.random() * (this.width - 2 * absHorizontalSafeArea),
+      this.min.y + absVerticalSafeArea + Math.random() * (this.height - 2 * absVerticalSafeArea)
+    );
+  }
+
   /**
    * Convert these bounds to a human readable form.
    *

package/src/ts/CubicBezierCurve.ts

@@ -21,7 +21,9 @@
  * @modified 2022-02-02 Added the `destroy` method.
  * @modified 2022-02-02 Cleared the `toSVGPathData` function (deprecated). Use `drawutilssvg` instead.
  * @modified 2022-10-17 The `CubicBezierCurve` class now implements the new `PathSegment` interface.
- * @version 2.7.1
+ * @modified 2023-09-30 Added the function `CubicbezierCurve.getSubCurve(number,number)` – similar to `getSubCurveAt(...)` but with absolute position parameters.
+ * @modified 2023-10-07 Added the `trimEnd`, `trimEndAt`, `trimStart`, `trimStartAt` methods.
+ * @version 2.8.0
  *
  * @file CubicBezierCurve
  * @public
@@ -523,6 +525,96 @@ export class CubicBezierCurve implements PathSegment {
     return new Vertex(tX, tY);
   }
 
+  /**
+   * Trim off a start section of this curve. The position parameter `uValue` is the absolute position on the
+   * curve in `[0...arcLength]`.
+   * The remaining curve will be the one in the bounds `[uValue,1]` (so `[0.0,uValue]` is cut off).
+   *
+   * Note this function just converts the absolute parameter to a relative one and call `trimStartAt`.
+   *
+   * @method trimStart
+   * @instance
+   * @memberof CubicBezierCurve
+   * @param {number} uValue - The absolute position parameter where to cut off the head curve.
+   * @returns {CubicBezierCurve} `this` for chanining.
+   */
+  trimStart(uValue: number): CubicBezierCurve {
+    return this.trimStartAt(this.convertU2T(uValue));
+  }
+
+  /**
+   * Trim off a start section of this curve. The position parameter `t` is the relative position in [0..1].
+   * The remaining curve will be the one in the bounds `[uValue,1]` (so `[0.0,uValue]` is cut off).
+   *
+   * @method trimStartAt
+   * @instance
+   * @memberof CubicBezierCurve
+   * @param {number} t - The relative position parameter where to cut off the head curve.
+   * @returns {CubicBezierCurve} `this` for chanining.
+   */
+  trimStartAt(t: number): CubicBezierCurve {
+    const subCurbePoints = CubicBezierCurve.utils.getSubCurvePointsAt(this, t, 1.0);
+    this.startPoint.set(subCurbePoints[0]);
+    this.startControlPoint.set(subCurbePoints[2]);
+    this.endPoint.set(subCurbePoints[1]);
+    this.endControlPoint.set(subCurbePoints[3]);
+    this.updateArcLengths();
+    return this;
+  }
+
+  /**
+   * Trim off the end of this curve. The position parameter `uValue` is the absolute position on the
+   * curve in `[0...arcLength]`.
+   * The remaining curve will be the one in the bounds `[0,uValue]` (so `[1.0-uValue,1.0]` is cut off).
+   *
+   * Note this function just converts the absolute parameter to a relative one and call `trimEndAt`.
+   *
+   * @method trimEnd
+   * @instance
+   * @memberof CubicBezierCurve
+   * @param {number} uValue - The absolute position parameter where to cut off the tail curve.
+   * @returns {CubicBezierCurve} `this` for chanining.
+   */
+  trimEnd(uValue: number): CubicBezierCurve {
+    return this.trimEndAt(this.convertU2T(uValue));
+  }
+
+  /**
+   * Trim off the end of this curve. The position parameter `t` is the relative position in [0..1].
+   * The remaining curve will be the one in the bounds `[0,t]` (so `[1.0-t,1.0]` is cut off).
+   *
+   * @method trimEndAt
+   * @instance
+   * @memberof CubicBezierCurve
+   * @param {number} t - The relative position parameter where to cut off the tail curve.
+   * @returns {CubicBezierCurve} `this` for chanining.
+   */
+  trimEndAt(t: number): CubicBezierCurve {
+    const subCurbePoints = CubicBezierCurve.utils.getSubCurvePointsAt(this, 0.0, t);
+    this.startPoint.set(subCurbePoints[0]);
+    this.startControlPoint.set(subCurbePoints[2]);
+    this.endPoint.set(subCurbePoints[1]);
+    this.endControlPoint.set(subCurbePoints[3]);
+    this.updateArcLengths();
+    return this;
+  }
+
+  /**
+   * Get a sub curve at the given start end end positions (values on the curve's length, between 0 and curve.arcLength).
+   *
+   * tStart >= tEnd is allowed, you will get a reversed sub curve then.
+   *
+   * @method getSubCurve
+   * @param {number} tStart – The start position of the desired sub curve (must be in [0..arcLength]).
+   * @param {number} tEnd – The end position if the desired cub curve (must be in [0..arcLength]).
+   * @instance
+   * @memberof CubicBezierCurve
+   * @return {CubicBezierCurve} The sub curve as a new curve.
+   **/
+  getSubCurve(uStart: number, uEnd: number): CubicBezierCurve {
+    return this.getSubCurveAt(this.convertU2T(uStart), this.convertU2T(uEnd));
+  }
+
   /**
    * Get a sub curve at the given start end end offsets (values between 0.0 and 1.0).
    *
@@ -536,20 +628,22 @@ export class CubicBezierCurve implements PathSegment {
    * @return {CubicBezierCurve} The sub curve as a new curve.
    **/
   getSubCurveAt(tStart: number, tEnd: number): CubicBezierCurve {
-    const startVec: Vector = new Vector(this.getPointAt(tStart), this.getTangentAt(tStart));
-    const endVec: Vector = new Vector(this.getPointAt(tEnd), this.getTangentAt(tEnd).inv());
+    // const startVec: Vector = new Vector(this.getPointAt(tStart), this.getTangentAt(tStart));
+    // const endVec: Vector = new Vector(this.getPointAt(tEnd), this.getTangentAt(tEnd).inv());
 
-    // Tangents are relative. Make absolute.
-    startVec.b.add(startVec.a);
-    endVec.b.add(endVec.a);
+    // // Tangents are relative. Make absolute.
+    // startVec.b.add(startVec.a);
+    // endVec.b.add(endVec.a);
 
-    // This 'splits' the curve at the given point at t.
-    startVec.scale(0.33333333 * (tEnd - tStart));
-    endVec.scale(0.33333333 * (tEnd - tStart));
+    // // This 'splits' the curve at the given point at t.
+    // startVec.scale(0.33333333 * (tEnd - tStart));
+    // endVec.scale(0.33333333 * (tEnd - tStart));
 
-    // Draw the bezier curve
-    // pb.draw.cubicBezier( startVec.a, endVec.a, startVec.b, endVec.b, '#8800ff', 2 );
-    return new CubicBezierCurve(startVec.a, endVec.a, startVec.b, endVec.b);
+    // // Draw the bezier curve
+    // // pb.draw.cubicBezier( startVec.a, endVec.a, startVec.b, endVec.b, '#8800ff', 2 );
+    // return new CubicBezierCurve(startVec.a, endVec.a, startVec.b, endVec.b);
+    const subCurbePoints = CubicBezierCurve.utils.getSubCurvePointsAt(this, tStart, tEnd);
+    return new CubicBezierCurve(subCurbePoints[0], subCurbePoints[1], subCurbePoints[2], subCurbePoints[3]);
   }
 
   /**
@@ -813,4 +907,37 @@ export class CubicBezierCurve implements PathSegment {
     if (arr.length != 4) throw "Can only build from array with four elements.";
     return new CubicBezierCurve(arr[0], arr[1], arr[2], arr[3]);
   }
+
+  /**
+   * Helper utils.
+   */
+  private static utils = {
+    /**
+     * Get the points of a sub curve at the given start end end offsets (values between 0.0 and 1.0).
+     *
+     * tStart >= tEnd is allowed, you will get a reversed sub curve then.
+     *
+     * @method getSubCurvePointsAt
+     * @param {CubicBezierCurve} curve – The curve to get the sub curve points from.
+     * @param {number} tStart – The start offset of the desired sub curve (must be in [0..1]).
+     * @param {number} tEnd – The end offset if the desired cub curve (must be in [0..1]).
+     * @instance
+     * @memberof CubicBezierCurve
+     * @return {CubicBezierCurve} The sub curve as a new curve.
+     **/
+    getSubCurvePointsAt: (curve: CubicBezierCurve, tStart: number, tEnd: number): [Vertex, Vertex, Vertex, Vertex] => {
+      const startVec: Vector = new Vector(curve.getPointAt(tStart), curve.getTangentAt(tStart));
+      const endVec: Vector = new Vector(curve.getPointAt(tEnd), curve.getTangentAt(tEnd).inv());
+
+      // Tangents are relative. Make absolute.
+      startVec.b.add(startVec.a);
+      endVec.b.add(endVec.a);
+
+      // This 'splits' the curve at the given point at t.
+      startVec.scale(0.33333333 * (tEnd - tStart));
+      endVec.scale(0.33333333 * (tEnd - tStart));
+
+      return [startVec.a, endVec.a, startVec.b, endVec.b];
+    }
+  };
 }

package/src/ts/Line.ts

@@ -15,6 +15,7 @@
  * @modified 2022-02-02 Added the `destroy` method.
  * @modified 2022-10-09 Changed the actual return value of the `intersection` function to null (was undefined before).
  * @modified 2022-10-17 Adding these methods from the `PathSegment` interface: getStartPoint, getEndPoint, revert.
+ * @modified 2023-09-25 Changed param type of `intersection()` from Line to VertTuple.
  * @version  2.3.0
  *
  * @file Line
@@ -61,7 +62,7 @@ export class Line extends VertTuple<Line> implements SVGSerializable, PathSegmen
    * @memberof Line
    **/
   // !!! DO NOT MOVE TO VertTuple
-  intersection(line: Line): Vertex | null {
+  intersection(line: VertTuple<any>): Vertex | null {
     const denominator: number = this.denominator(line);
     if (denominator == 0) {
       return null;

package/src/ts/PBText.ts

@@ -2,7 +2,8 @@
  * @author   Ikaros Kappler
  * @date     2021-11-16
  * @modified 2022-02-02 Added the `destroy` method.
- * @version  1.1.0
+ * @modified 2023-09-25 Fixed a type error in the constructor. Nothing vital.
+ * @version  1.1.1
  **/
 
 import { UIDGenerator } from "./UIDGenerator";
@@ -127,14 +128,14 @@ export class PBText implements SVGSerializable, FontOptions {
     this.uid = UIDGenerator.next();
     this.text = text;
     this.anchor = anchor ?? new Vertex();
-    this.color = options.color;
-    this.fontFamily = options.fontFamily;
-    this.fontSize = options.fontSize;
-    this.fontStyle = options.fontStyle;
-    this.fontWeight = options.fontWeight;
-    this.lineHeight = options.lineHeight;
-    this.textAlign = options.textAlign;
-    this.rotation = options.rotation;
+    this.color = options?.color;
+    this.fontFamily = options?.fontFamily;
+    this.fontSize = options?.fontSize;
+    this.fontStyle = options?.fontStyle;
+    this.fontWeight = options?.fontWeight;
+    this.lineHeight = options?.lineHeight;
+    this.textAlign = options?.textAlign;
+    this.rotation = options?.rotation;
   }
 
   /**

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,11 @@
  * @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.
+ * @modified 2023-11-24 Added the `Polygon.containsPolygon(Polygon)' function.
+ * @version 1.12.0
  *
  * @file Polygon
  * @public
@@ -32,7 +36,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";
 
@@ -179,6 +185,35 @@ export class Polygon implements SVGSerializable {
     return inside;
   }
 
+  /**
+   * Check if the passed polygon is completly contained inside this polygon.
+   *
+   * This means:
+   *  - all polygon's vertices must be inside this polygon.
+   *  - the polygon has no edge intersections with this polygon.
+   *
+   * @param {Polygon} polygon - The polygon to check if contained.
+   * @return {boolean}
+   */
+  containsPolygon(polygon: Polygon): boolean {
+    for (var i = 0; i < polygon.vertices.length; i++) {
+      if (!this.containsVert(polygon.vertices[i])) {
+        return false;
+      }
+    }
+    // All vertices are inside; check for intersections
+    const lineSegment = new Line(new Vertex(), new Vertex());
+    for (var i = 0; i < polygon.vertices.length; i++) {
+      lineSegment.a.set(polygon.vertices[i]);
+      lineSegment.b.set(polygon.vertices[(i + 1) % polygon.vertices.length]);
+      if (this.lineIntersections(lineSegment, true).length > 0) {
+        // Current segment has intersection(s) with this polygon.
+        return false;
+      }
+    }
+    return true;
+  }
+
   /**
    * Calculate the area of the given polygon (unsigned).
    *
@@ -276,6 +311,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;
     }
   }