plotboilerplate 1.17.1 → 1.19.0

package/src/ts/Line.ts

@@ -13,7 +13,9 @@
  * @modified 2020-03-23 Ported to Typescript from JS.
  * @modified 2020-12-04 The `intersection` function returns undefined if both lines are parallel.
  * @modified 2022-02-02 Added the `destroy` method.
- * @version  2.2.0
+ * @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.
+ * @version  2.3.0
  *
  * @file Line
  * @public
@@ -21,7 +23,7 @@
 
 import { VertTuple } from "./VertTuple";
 import { Vertex } from "./Vertex";
-import { SVGSerializable } from "./interfaces";
+import { PathSegment, SVGSerializable } from "./interfaces";
 
 /**
  * @classdesc A line consists of two vertices a and b.<br>
@@ -31,7 +33,7 @@ import { SVGSerializable } from "./interfaces";
  *
  * @requires Vertex
  */
-export class Line extends VertTuple<Line> implements SVGSerializable {
+export class Line extends VertTuple<Line> implements SVGSerializable, PathSegment {
   /**
    * Required to generate proper CSS classes and other class related IDs.
    **/
@@ -59,9 +61,11 @@ export class Line extends VertTuple<Line> implements SVGSerializable {
    * @memberof Line
    **/
   // !!! DO NOT MOVE TO VertTuple
-  intersection(line: Line): Vertex | undefined {
+  intersection(line: Line): Vertex | null {
     const denominator: number = this.denominator(line);
-    if (denominator == 0) return null;
+    if (denominator == 0) {
+      return null;
+    }
 
     let a: number = this.a.y - line.a.y;
     let b: number = this.a.x - line.a.x;
@@ -75,10 +79,70 @@ export class Line extends VertTuple<Line> implements SVGSerializable {
     const y: number = this.a.y + a * (this.b.y - this.a.y);
 
     if (isNaN(a) || isNaN(x) || isNaN(y)) {
-      return undefined;
+      return null;
     }
 
     // if we cast these lines infinitely in both directions, they intersect here:
     return new Vertex(x, y);
   }
+
+  //--- Implement PathSegment ---
+  /**
+   * Get the start point of this path segment.
+   *
+   * @method getStartPoint
+   * @memberof PathSegment
+   * @return {Vertex} The start point of this path segment.
+   */
+  getStartPoint(): Vertex {
+    return this.a;
+  }
+
+  /**
+   * Get the end point of this path segment.
+   *
+   * @method getEndPoint
+   * @memberof PathSegment
+   * @return {Vertex} The end point of this path segment.
+   */
+  getEndPoint(): Vertex {
+    return this.b;
+  }
+
+  /**
+   * Get the tangent's end point at the start point of this segment.
+   *
+   * @method getStartTangent
+   * @memberof PathSegment
+   * @return {Vertex} The end point of the starting point's tangent.
+   */
+  getStartTangent(): Vertex {
+    return this.b;
+  }
+
+  /**
+   * Get the tangent's end point at the end point of this segment.
+   *
+   * @method getEndTangent
+   * @memberof PathSegment
+   * @return {Vertex} The end point of the ending point's tangent.
+   */
+  getEndTangent(): Vertex {
+    return this.a;
+  }
+
+  /**
+   * Inverse this path segment (in-place) and return this same instance (useful for chaining).
+   *
+   * @method reverse
+   * @memberof PathSegment
+   * @return {PathSegment} This path segment instance (for chaining).
+   */
+  reverse(): Line {
+    var tmp = this.a;
+    this.a = this.b;
+    this.b = tmp;
+    return this;
+  }
+  //--- END Implement PathSegment ---
 }

package/src/ts/MouseHandler.ts

@@ -17,7 +17,8 @@
  * @modified 2020-10-04 Added extended JSDoc comments.
  * @modified 2020-11-25 Added the `isTouchEvent` param.
  * @modified 2021-01-10 The mouse handler is now also working with SVGElements.
- * @version  1.2.0
+ * @modified 2022-08-16 Fixed a bug in the mouse button detection.
+ * @version  1.2.1
  *
  * @file MouseHandler
  * @public
@@ -58,7 +59,7 @@ export type XWheelCallback = (e: XWheelEvent) => void;
  * @requires XYCoords
  */
 export class MouseHandler {
-  private name: string;
+  private name: string | undefined;
   private element: HTMLElement | SVGElement;
   private mouseDownPos: { x: number; y: number } | undefined = undefined;
   private mouseDragPos: { x: number; y: number } | undefined = undefined;
@@ -135,8 +136,8 @@ export class MouseHandler {
     // +-------------------------------------------------
     this.name = name;
     this.element = element;
-    this.mouseDownPos = null;
-    this.mouseDragPos = null;
+    this.mouseDownPos = undefined;
+    this.mouseDragPos = undefined;
     // this.mousePos     = null;
     this.mouseButton = -1;
     this.listeners = {};
@@ -202,26 +203,26 @@ export class MouseHandler {
    * @memberof MouseHandler
    * @instance
    * @private
-   * @param {MouseEvent} e - The mouse event to get the relative position for.
+   * @param {MouseEvent} event - The mouse event to get the relative position for.
    * @param {string} eventName - The name of the firing event.
    * @return {XMouseEvent}
    */
-  private mkParams(e: MouseEvent, eventName: string): XMouseEvent {
-    const rel: { x: number; y: number } = this.relPos(e);
-    const xEvent: XMouseEvent = e as unknown as XMouseEvent;
+  private mkParams(event: MouseEvent, eventName: string): XMouseEvent {
+    const rel: { x: number; y: number } = this.relPos(event);
+    const xEvent: XMouseEvent = event as unknown as XMouseEvent;
     xEvent.params = {
       element: this.element,
       name: eventName,
       isTouchEvent: false,
       pos: rel,
-      button: this.mouseButton,
-      leftButton: this.mouseButton == 0,
-      middleButton: this.mouseButton == 1,
-      rightButton: this.mouseButton == 2,
-      mouseDownPos: this.mouseDownPos,
-      draggedFrom: this.mouseDragPos,
+      button: event.button, // this.mouseButton,
+      leftButton: event.button === 0, // this.mouseButton === 0,
+      middleButton: event.button === 1, // this.mouseButton === 1,
+      rightButton: event.button === 2, // this.mouseButton === 2,
+      mouseDownPos: this.mouseDownPos ?? { x: NaN, y: NaN },
+      draggedFrom: this.mouseDragPos ?? { x: NaN, y: NaN },
       wasDragged: this.mouseDownPos != null && (this.mouseDownPos.x != rel.x || this.mouseDownPos.y != rel.y),
-      dragAmount: this.mouseDownPos != null ? { x: rel.x - this.mouseDragPos.x, y: rel.y - this.mouseDragPos.y } : { x: 0, y: 0 }
+      dragAmount: this.mouseDragPos != null ? { x: rel.x - this.mouseDragPos.x, y: rel.y - this.mouseDragPos.y } : { x: 0, y: 0 }
     };
     return xEvent;
   }

package/src/ts/PlotBoilerplate.ts

@@ -75,7 +75,9 @@
  * @modified 2021-04-25 Extending `remove` to accept arrays of drawables.
  * @modified 2021-11-16 Adding the `PBText` drawable.
  * @modified 2022-08-01 Added `title` to the params.
- * @version  1.15.1
+ * @modified 2022-10-25 Added the `origin` to the default draw config.
+ * @modified 2022-11-06 Adding an XML declaration to the SVG export routine.
+ * @version  1.16.0
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.
@@ -270,7 +272,7 @@ export class PlotBoilerplate {
    * @memberof PlotBoilerplate
    * @instance
    */
-  selectPolygon: Polygon;
+  selectPolygon: Polygon | null;
 
   /**
    * @member {Array<IDraggable>}
@@ -532,6 +534,9 @@ export class PlotBoilerplate {
         lineWidth: 1,
         fill: true,
         anchor: true
+      },
+      origin: {
+        color: "#000000"
       }
     }; // END drawConfig
 
@@ -554,14 +559,16 @@ export class PlotBoilerplate {
         this.config.enableGL = false;
       }
       if (this.config.enableGL) {
-        const ctx: WebGLRenderingContext = this.canvas.getContext("webgl"); // webgl-experimental?
+        // Override the case 'null' here. If GL is not supported, well then nothing works.
+        const ctx: WebGLRenderingContext = this.canvas.getContext("webgl") as WebGLRenderingContext; // webgl-experimental?
         this.draw = new drawutilsgl(ctx, false);
         // PROBLEM: same instance of fill and draw when using WebGL.
         //          Shader program cannot be duplicated on the same context.
         this.fill = (this.draw as drawutilsgl).copyInstance(true);
         console.warn("Initialized with experimental mode enableGL=true. Note that this is not yet fully implemented.");
       } else {
-        const ctx: CanvasRenderingContext2D = this.canvas.getContext("2d");
+        // Override the case 'null' here. If context creation is not supported, well then nothing works.
+        const ctx: CanvasRenderingContext2D = this.canvas.getContext("2d") as CanvasRenderingContext2D;
         this.draw = new drawutils(ctx, false);
         this.fill = new drawutils(ctx, true);
       }
@@ -599,8 +606,8 @@ export class PlotBoilerplate {
     if (config.title) {
       this.eventCatcher.setAttribute("title", config.title);
     }
-    this.draw.scale.set(this.config.scaleX, this.config.scaleY);
-    this.fill.scale.set(this.config.scaleX, this.config.scaleY);
+    this.draw.scale.set(this.config.scaleX ?? 1.0, this.config.scaleY);
+    this.fill.scale.set(this.config.scaleX ?? 1.0, this.config.scaleY);
     this.vertices = [];
     this.selectPolygon = null;
     this.draggedElements = [];
@@ -655,9 +662,13 @@ export class PlotBoilerplate {
 
     tosvgDraw.beginDrawCycle(0);
     tosvgFill.beginDrawCycle(0);
-    if (pb.config.preClear) pb.config.preClear();
-    tosvgDraw.clear(pb.config.backgroundColor);
-    if (pb.config.preDraw) pb.config.preDraw(tosvgDraw, tosvgFill);
+    if (pb.config.preClear) {
+      pb.config.preClear();
+    }
+    tosvgDraw.clear(pb.config.backgroundColor || "white");
+    if (pb.config.preDraw) {
+      pb.config.preDraw(tosvgDraw, tosvgFill);
+    }
     pb.drawAll(0, tosvgDraw, tosvgFill);
     pb.drawVertices(0, tosvgDraw);
     if (pb.config.postDraw) pb.config.postDraw(tosvgDraw, tosvgFill);
@@ -669,7 +680,8 @@ export class PlotBoilerplate {
     var serializer = new XMLSerializer();
     var svgCode = serializer.serializeToString(svgNode);
 
-    var blob = new Blob([svgCode], { type: "image/svg;charset=utf-8" });
+    // Add: '<?xml version="1.0" encoding="utf-8"?>\n' ?
+    var blob = new Blob(['<?xml version="1.0" encoding="utf-8"?>\n' + svgCode], { type: "image/svg;charset=utf-8" });
     // See documentation for FileSaver.js for usage.
     //    https://github.com/eligrey/FileSaver.js
     if (typeof globalThis["saveAs"] !== "function")
@@ -751,9 +763,9 @@ export class PlotBoilerplate {
    **/
   private updateCSSscale() {
     if (this.config.cssUniformScale) {
-      PlotBoilerplate.utils.setCSSscale(this.canvas, this.config.cssScaleX, this.config.cssScaleX);
+      PlotBoilerplate.utils.setCSSscale(this.canvas, this.config.cssScaleX ?? 1.0, this.config.cssScaleX ?? 1.0);
     } else {
-      PlotBoilerplate.utils.setCSSscale(this.canvas, this.config.cssScaleX, this.config.cssScaleY);
+      PlotBoilerplate.utils.setCSSscale(this.canvas, this.config.cssScaleX ?? 1.0, this.config.cssScaleY ?? 1.0);
     }
   }
 
@@ -1011,7 +1023,7 @@ export class PlotBoilerplate {
   getVertexNear(pixelPosition: XYCoords, pixelTolerance: number): Vertex | undefined {
     var p: IDraggable | undefined = this.locatePointNear(
       this.transformMousePosition(pixelPosition.x, pixelPosition.y),
-      pixelTolerance / Math.min(this.config.cssScaleX, this.config.cssScaleY)
+      pixelTolerance / Math.min(this.config.cssScaleX ?? 1.0, this.config.cssScaleY ?? 1.0)
     );
     if (p && p.typeName == "vertex") {
       return this.vertices[p.vindex];
@@ -1095,7 +1107,7 @@ export class PlotBoilerplate {
   drawOrigin(draw: DrawLib<any>) {
     // Add a crosshair to mark the origin
     draw.setCurrentId("origin");
-    draw.crosshair({ x: 0, y: 0 }, 10, "#000000");
+    draw.crosshair({ x: 0, y: 0 }, 10, this.drawConfig.origin.color);
   }
 
   /**
@@ -1360,10 +1372,10 @@ export class PlotBoilerplate {
     } else {
       console.error("Cannot draw object. Unknown class.");
     }
-    draw.setCurrentClassName(null);
-    draw.setCurrentId(null);
-    fill.setCurrentClassName(null);
-    fill.setCurrentId(null);
+    draw.setCurrentClassName(undefined);
+    draw.setCurrentId(undefined);
+    fill.setCurrentClassName(undefined);
+    fill.setCurrentId(undefined);
   }
 
   /**
@@ -1473,7 +1485,7 @@ export class PlotBoilerplate {
    **/
   clear() {
     // Note that elements might have an alpha channel. Clear the scene first.
-    this.draw.clear(this.config.backgroundColor);
+    this.draw.clear(this.config.backgroundColor || "white");
   }
 
   /**
@@ -1505,7 +1517,10 @@ export class PlotBoilerplate {
   viewport(): Bounds {
     return new Bounds(
       this.transformMousePosition(0, 0),
-      this.transformMousePosition(this.canvasSize.width * this.config.cssScaleX, this.canvasSize.height * this.config.cssScaleY)
+      this.transformMousePosition(
+        this.canvasSize.width * (this.config.cssScaleX ?? 1.0),
+        this.canvasSize.height * (this.config.cssScaleY ?? 1.0)
+      )
     );
   }
 
@@ -1569,8 +1584,8 @@ export class PlotBoilerplate {
   resizeCanvas() {
     const _self: PlotBoilerplate = this;
     const _setSize = (w: number, h: number) => {
-      w *= _self.config.canvasWidthFactor;
-      h *= _self.config.canvasHeightFactor;
+      w *= _self.config.canvasWidthFactor ?? 1.0;
+      h *= _self.config.canvasHeightFactor ?? 1.0;
       _self.canvasSize.width = w;
       _self.canvasSize.height = h;
       if (_self.canvas instanceof HTMLCanvasElement) {
@@ -1597,8 +1612,8 @@ export class PlotBoilerplate {
       var width: number = globalThis.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
       var height: number = globalThis.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
       _self.canvas.style.position = "absolute";
-      _self.canvas.style.width = _self.config.canvasWidthFactor * width + "px";
-      _self.canvas.style.height = _self.config.canvasWidthFactor * height + "px";
+      _self.canvas.style.width = (_self.config.canvasWidthFactor ?? 1.0) * width + "px";
+      _self.canvas.style.height = (_self.config.canvasWidthFactor ?? 1.0) * height + "px";
       _self.canvas.style.top = "0px";
       _self.canvas.style.left = "0px";
       _setSize(width, height);
@@ -1606,15 +1621,15 @@ export class PlotBoilerplate {
       // Set editor size
       _self.canvas.style.position = "absolute";
       const space: XYDimension = this.getAvailableContainerSpace();
-      _self.canvas.style.width = _self.config.canvasWidthFactor * space.width + "px";
-      _self.canvas.style.height = _self.config.canvasHeightFactor * space.height + "px";
-      _self.canvas.style.top = null;
-      _self.canvas.style.left = null;
+      _self.canvas.style.width = (_self.config.canvasWidthFactor ?? 1.0) * space.width + "px";
+      _self.canvas.style.height = (_self.config.canvasHeightFactor ?? 1.0) * space.height + "px";
+      _self.canvas.style.top = "";
+      _self.canvas.style.left = "";
       _setSize(space.width, space.height);
     } else {
-      _self.canvas.style.width = null;
-      _self.canvas.style.height = null;
-      _setSize(_self.config.defaultCanvasWidth, _self.config.defaultCanvasHeight);
+      _self.canvas.style.width = "";
+      _self.canvas.style.height = "";
+      _setSize(_self.config.defaultCanvasWidth ?? 1024, _self.config.defaultCanvasHeight ?? 768);
     }
 
     if (_self.config.redrawOnResize) _self.redraw();
@@ -2269,7 +2284,7 @@ export class PlotBoilerplate {
        * @param {function} fallback - A default value if the key does not exist.
        * @return {function}
        **/
-      func: (obj: any, key: string, fallback: (...args: any[]) => any) => {
+      func: (obj: any, key: string, fallback: ((...args: any[]) => any) | null) => {
         if (!obj.hasOwnProperty(key)) return fallback;
         if (typeof obj[key] !== "function") return fallback;
         return obj[key];

package/src/ts/Polygon.ts

@@ -99,7 +99,7 @@ export class Polygon implements SVGSerializable {
     this.uid = UIDGenerator.next();
     if (typeof vertices == "undefined") vertices = [];
     this.vertices = vertices;
-    this.isOpen = isOpen;
+    this.isOpen = isOpen || false;
   }
 
   /**

package/src/ts/Vector.ts

@@ -11,7 +11,8 @@
  * @modified 2021-01-20 Added UID.
  * @modified 2022-02-02 Added the `destroy` method.
  * @modified 2022-02-02 Cleared the `Vector.toSVGString` function (deprecated). Use `drawutilssvg` instead.
- * @version  1.4.0
+ * @modified 2022-10-25 Added the `getOrthogonal` method.
+ * @version  1.5.0
  *
  * @file Vector
  * @public
@@ -65,7 +66,7 @@ export class Vector extends VertTuple<Vector> implements SVGSerializable {
   }
 
   /**
-   * The inverse of a vector is a vector witht the same magnitude but oppose direction.
+   * The inverse of a vector is a vector with the same magnitude but oppose direction.
    *
    * Please not that the origin of this vector changes here: a->b becomes b->a.
    *
@@ -116,6 +117,25 @@ 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));
   }
 
+  /**
+   * Get the orthogonal "vector" of this vector (rotated by 90° clockwise).
+   *
+   * @name getOrthogonal
+   * @method getOrthogonal
+   * @return {Vector} A new vector with the same length that stands on this vector's point a.
+   * @instance
+   * @memberof Vector
+   **/
+  getOrthogonal(): Vector {
+    // Orthogonal of vector (0,0)->(x,y) is (0,0)->(-y,x)
+    const linePoint = this.a.clone();
+    const startPoint = this.b.clone().sub(this.a);
+    const tmp = startPoint.x;
+    startPoint.x = -startPoint.y;
+    startPoint.y = tmp;
+    return new Vector(linePoint, startPoint.add(this.a));
+  }
+
   static utils = {
     /**
      * Generate a four-point arrow head, starting at the vector end minus the
@@ -143,8 +163,8 @@ export class Vector extends VertTuple<Vector> implements SVGSerializable {
      * @param {number} scaleY  - the vertical scaling during draw.
      **/
     buildArrowHead: (zA: Vertex, zB: Vertex, headlen: number, scaleX: number, scaleY: number) => {
-      var angle = Math.atan2((zB.y - zA.y) * scaleY, (zB.x - zA.x) * scaleX);
-      var vertices = [];
+      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)));
       vertices.push(
         new Vertex(

package/src/ts/draw.ts

@@ -44,7 +44,10 @@
  * @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
+ * @modified 2022-08-23 Fixed a type issue in the `polyline` function.
+ * @modified 2022-08-23 Fixed a type issue in the `setConfiguration` function.
+ * @modified 2022-08-23 Fixed a type issue in the `path` function.
+ * @version  1.12.3
  **/
 
 import { CubicBezierCurve } from "./CubicBezierCurve";
@@ -141,7 +144,7 @@ export class drawutils implements DrawLib<void> {
    * @param {DrawLibConfiguration} configuration - The new configuration settings to use for the next render methods.
    */
   setConfiguration(configuration: DrawLibConfiguration): void {
-    this.ctx.globalCompositeOperation = configuration.blendMode;
+    this.ctx.globalCompositeOperation = configuration.blendMode || "source-over";
   }
 
   /**
@@ -1012,7 +1015,7 @@ export class drawutils implements DrawLib<void> {
     }
     this.ctx.save();
     this.ctx.beginPath();
-    this.ctx.lineWidth = lineWidth * this.scale.x || 1.0;
+    this.ctx.lineWidth = (lineWidth || 1.0) * this.scale.x;
     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);
@@ -1147,13 +1150,19 @@ export class drawutils implements DrawLib<void> {
   path(pathData: SVGPathParams, color?: string, lineWidth?: number, options?: { inplace?: boolean }) {
     const d: SVGPathParams = options && options.inplace ? pathData : drawutilssvg.copyPathData(pathData);
     drawutilssvg.transformPathData(d, this.offset, this.scale);
-    this.ctx.strokeStyle = color;
+    if (color) {
+      this.ctx.strokeStyle = color;
+    }
     this.ctx.lineWidth = lineWidth || 1;
     if (this.fillShapes) {
-      this.ctx.fillStyle = color;
+      if (color) {
+        this.ctx.fillStyle = color;
+      }
       this.ctx.fill(new Path2D(d.join(" ")));
     } else {
-      this.ctx.strokeStyle = color;
+      if (color) {
+        this.ctx.strokeStyle = color;
+      }
       this.ctx.stroke(new Path2D(d.join(" ")));
     }
   }

package/src/ts/interfaces/additionals.ts

@@ -0,0 +1,105 @@
+/**
+ * @date 2022-10-17
+ */
+import { Vertex } from "../Vertex";
+
+/**
+ * A common interface for different kinds of path segments.
+ */
+export interface PathSegment {
+  /**
+   * Get the start point of this path segment.
+   *
+   * @method getStartPoint
+   * @memberof PathSegment
+   * @return {Vertex} The start point of this path segment.
+   */
+  getStartPoint(): Vertex;
+
+  /**
+   * Get the end point of this path segment.
+   *
+   * @method getEndPoint
+   * @memberof PathSegment
+   * @return {Vertex} The end point of this path segment.
+   */
+  getEndPoint(): Vertex;
+
+  /**
+   * Get the tangent's end point at the start point of this segment.
+   *
+   * @method getStartTangent
+   * @memberof PathSegment
+   * @return {Vertex} The end point of the starting point's tangent.
+   */
+  getStartTangent(): Vertex;
+
+  /**
+   * Get the tangent's end point at the end point of this segment.
+   *
+   * @method getEndTangent
+   * @memberof PathSegment
+   * @return {Vertex} The end point of the ending point's tangent.
+   */
+  getEndTangent(): Vertex;
+
+  /**
+   * Create a deep clone of this path segment.
+   *
+   * @method clone
+   * @memberof PathSegment
+   * @return {PathSegment} A deep clone/copy of this path segment.
+   */
+  clone: () => PathSegment;
+
+  /**
+   * Revserse this path segment (in-place) and return this same instance (useful for chaining).
+   * The new path segment has start and end point swapped.
+   *
+   * @method reverse
+   * @memberof PathSegment
+   * @return {PathSegment} This path segment instance (for chaining).
+   */
+  reverse: () => PathSegment;
+}
+
+/**
+ * A common interface for general path representations.
+ */
+export interface Path extends PathSegment {
+  /**
+   * Get the number of segments in this path.
+   *
+   * @method getSegmentCount
+   * @memberof Path
+   * @return {number} The number (integer) of path segments.
+   */
+  getSegmentCount: () => number;
+
+  /**
+   * Get the path segment at the given index.
+   *
+   * @method getSegmentAt
+   * @memberof Path
+   * @return {PathSegment} The paths segment at the given index.
+   */
+  getSegmentAt: (index: number) => PathSegment;
+
+  /**
+   * Create a deep clone of this path.
+   *
+   * @method clone
+   * @memberof Path
+   * @return {Path} A deep clone/copy of this path.
+   */
+  clone: () => Path;
+
+  /**
+   * Reverse this path (swap start and end and thus – the direction) in-place.
+   *
+   * @method revert
+   * @memberof Path
+   * @return {PathSegment} This path instance.
+   */
+  reverse: () => Path;
+}

package/src/ts/interfaces/core.ts

@@ -15,6 +15,7 @@
  * @modified 2021-06-21 Added `IBounds.getCenter()`.
  * @modified 2021-11-16 Added `text` options to the `DrawConfig`.
  * @modified 2022-08-01 Added `title` param to the `PBParams` interface.
+ * @modified 2022-10-25 Added `origin` param to the `DrawConfig` interface.
  **/
 
 import { Vertex } from "../Vertex";
@@ -199,6 +200,7 @@ export interface DrawConfig {
     fill?: boolean;
     anchor?: boolean;
   };
+  origin: { color: string };
 }
 
 /** This is a fix for the problem, that the constructor's "name" attribute is not

package/src/ts/interfaces/index.ts

@@ -1,3 +1,4 @@
 export * from "./core";
 export * from "./DrawLib";
 export * from "./externals";
+export * from "./additionals";

package/src/ts/utils/algorithms/arrayShuffle.ts

@@ -0,0 +1,11 @@
+/**
+ * Randomize a given array in-place.
+ *
+ * @author Ikaros Kappler
+ * @date 2022-10-09
+ * @version 1.0.0
+ **/
+
+export const arrayShuffle = (arr: Array<any>): void => {
+  arr.sort(() => Math.random() - 0.5);
+};