plotboilerplate 1.18.0 → 1.20.0

package/src/ts/Bounds.ts

@@ -6,7 +6,9 @@
  * @modified 2021-02-02 Added the `toPolygon` method.
  * @modified 2021-06-21 (mid-summer) Added `getCenter` method.
  * @modified 2022-02-01 Added the `toString` function.
- * @version  1.4.0
+ * @modified 2022-10-09 Added the `fromDimension` function.
+ * @modified 2022-11-28 Added the `clone` method.
+ * @version  1.6.0
  **/
 
 import { Polygon } from "./Polygon";
@@ -113,17 +115,14 @@ export class Bounds implements IBounds, XYDimension {
   /**
    * Clone this bounds object (create a deep clone).
    *
-   * Note: the returned format might change in the future, so please do not
-   * rely on the returned string format.
-   *
    * @method clone
    * @instance
    * @memberof Bounds
-   * @returns {string} Creates a deep clone of this bounds object. The returned object's `min` and `max` instances are `Vertex` instances.
+   * @returns {Bounds} Creates a deep clone of this bounds object.
    */
-  // clone() {
-  //   return new Bounds(new Vertex(this.min.x, this.min.y), new Vertex(this.max.x, this.max.y));
-  // }
+  clone() {
+    return new Bounds({ x: this.min.x, y: this.min.y }, { x: this.max.x, y: this.max.y });
+  }
 
   /**
    * Compute the minimal bounding box for a given set of vertices.
@@ -154,4 +153,16 @@ export class Bounds implements IBounds, XYDimension {
     }
     return new Bounds(new Vertex(xMin, yMin), new Vertex(xMax, yMax));
   }
+
+  /**
+   * Create a new `Bounds` instance just from `width` and `height`, located at (0,0) or the optionally given origin.
+   *
+   * @param {number} width - The width of the bounds
+   * @param {number} height  - The height of the bounds
+   * @param {XYCoords={x:0,y:0}} origin - [optional] A origin to locate the new Bounds object at.
+   * @returns {Bounds} A new `Bounds` instance width given width and height, located at (0,0) or the given origin..
+   */
+  static fromDimension(width: number, height: number, origin?: XYCoords): Bounds {
+    return new Bounds(origin ?? { x: 0, y: 0 }, { x: (origin ? origin.x : 0) + width, y: (origin ? origin.y : 0) + height });
+  }
 } // END class bounds

package/src/ts/CubicBezierCurve.ts

@@ -20,7 +20,8 @@
  * @modified 2021-01-20 Added UID.
  * @modified 2022-02-02 Added the `destroy` method.
  * @modified 2022-02-02 Cleared the `toSVGPathData` function (deprecated). Use `drawutilssvg` instead.
- * @version 2.6.0
+ * @modified 2022-10-17 The `CubicBezierCurve` class now implements the new `PathSegment` interface.
+ * @version 2.7.1
  *
  * @file CubicBezierCurve
  * @public
@@ -30,7 +31,7 @@ import { Bounds } from "./Bounds";
 import { UIDGenerator } from "./UIDGenerator";
 import { Vertex } from "./Vertex";
 import { Vector } from "./Vector";
-import { XYCoords, UID } from "./interfaces";
+import { XYCoords, UID, PathSegment } from "./interfaces";
 
 /**
  * @classdesc A refactored cubic bezier curve class.
@@ -42,7 +43,7 @@ import { XYCoords, UID } from "./interfaces";
  * @requires UID
  * @requires UIDGenerator
  */
-export class CubicBezierCurve {
+export class CubicBezierCurve implements PathSegment {
   /** @constant {number} */
   static readonly START_POINT: number = 0;
   /** @constant {number} */
@@ -157,7 +158,7 @@ export class CubicBezierCurve {
     // An array of floats
     this.segmentLengths = [];
     // float
-    this.arcLength = null;
+    // this.arcLength = null;
 
     this.updateArcLengths();
   }
@@ -627,6 +628,30 @@ export class CubicBezierCurve {
     );
   }
 
+  //---BEGIN PathSegment-------------------------
+  /**
+   * 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.startControlPoint;
+  }
+
+  /**
+   * 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.endControlPoint;
+  }
+  //---END PathSegment-------------------------
+
   /**
    * Check if this and the specified curve are equal.<br>
    * <br>

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/PlotBoilerplate.ts

@@ -75,7 +75,10 @@
  * @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.
+ * @modified 2022-11-23 Added the `drawRaster` (default=true) option to the config/drawconfig.
+ * @version  1.17.0
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.
@@ -270,7 +273,7 @@ export class PlotBoilerplate {
    * @memberof PlotBoilerplate
    * @instance
    */
-  selectPolygon: Polygon;
+  selectPolygon: Polygon | null;
 
   /**
    * @member {Array<IDraggable>}
@@ -411,6 +414,7 @@ export class PlotBoilerplate {
       offsetX: f.num(config, "offsetX", 0.0),
       offsetY: f.num(config, "offsetY", 0.0),
       rasterGrid: f.bool(config, "rasterGrid", true),
+      drawRaster: f.bool(config, "drawRaster", true),
       rasterScaleX: f.num(config, "rasterScaleX", 1.0),
       rasterScaleY: f.num(config, "rasterScaleY", 1.0),
       rasterAdjustFactor: f.num(config, "rasterAdjustdFactror", 2.0),
@@ -465,6 +469,7 @@ export class PlotBoilerplate {
       drawHandleLines: f.bool(config, "drawHandleLines", true),
       drawHandlePoints: f.bool(config, "drawHandlePoints", true),
       drawGrid: f.bool(config, "drawGrid", true),
+      drawRaster: f.bool(config, "drawRaster", true),
       bezier: {
         color: "#00a822",
         lineWidth: 2,
@@ -532,6 +537,9 @@ export class PlotBoilerplate {
         lineWidth: 1,
         fill: true,
         anchor: true
+      },
+      origin: {
+        color: "#000000"
       }
     }; // END drawConfig
 
@@ -554,14 +562,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 +609,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 +665,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 +683,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 +766,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);
     }
   }
 
@@ -1009,9 +1024,9 @@ export class PlotBoilerplate {
    * @return The vertex near the given position or undefined if none was found there.
    **/
   getVertexNear(pixelPosition: XYCoords, pixelTolerance: number): Vertex | undefined {
-    var p: IDraggable | undefined = this.locatePointNear(
+    const p: IDraggable | null = 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 +1110,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 +1375,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);
   }
 
   /**
@@ -1448,8 +1463,12 @@ export class PlotBoilerplate {
    * @return {void}
    **/
   drawAll(renderTime: number, draw: DrawLib<any>, fill: DrawLib<any>) {
-    this.drawGrid(draw);
-    if (this.config.drawOrigin) this.drawOrigin(draw);
+    if (this.config.drawRaster) {
+      this.drawGrid(draw);
+    }
+    if (this.config.drawOrigin) {
+      this.drawOrigin(draw);
+    }
     this.drawDrawables(renderTime, draw, fill);
     this.drawVertices(renderTime, draw);
     this.drawSelectPolygon(draw);
@@ -1473,7 +1492,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 +1524,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 +1591,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 +1619,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 +1628,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 +2291,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/VEllipseSector.ts

@@ -2,10 +2,11 @@
  * Implementation of elliptic sectors.
  * Note that sectors are constructed in clockwise direction.
  *
- * @author  Ikaros Kappler
- * @date    2021-02-26
+ * @author   Ikaros Kappler
+ * @date     2021-02-26
  * @modified 2022-02-02 Added the `destroy` method.
- * @version 1.1.0
+ * @modified 2022-11-01 Tweaked the `endpointToCenterParameters` function to handle negative values, too, without errors.
+ * @version  1.1.1
  */
 
 import { CubicBezierCurve } from "./CubicBezierCurve";
@@ -139,19 +140,23 @@ export class VEllipseSector {
         curves.push(curve);
       } else {
         // Find intersection
-        let intersection: Vertex | undefined = startTangent.intersection(endTangent);
+        let intersection: Vertex | null = startTangent.intersection(endTangent);
         // What if intersection is undefined?
         // --> This *can* not happen if segmentCount > 2 and height and width of the ellipse are not zero.
 
-        let startDiff: Vertex = startPoint.difference(intersection);
-        let endDiff: Vertex = endPoint.difference(intersection);
-        let curve: CubicBezierCurve = new CubicBezierCurve(
-          startPoint.clone(),
-          endPoint.clone(),
-          startPoint.clone().add(startDiff.scale(threshold)),
-          endPoint.clone().add(endDiff.scale(threshold))
-        );
-        curves.push(curve);
+        if (intersection) {
+          // It's VERY LIKELY hat this ALWAYS happens; it's just a typesave variant.
+          // Intersection cannot be null.
+          let startDiff: Vertex = startPoint.difference(intersection);
+          let endDiff: Vertex = endPoint.difference(intersection);
+          let curve: CubicBezierCurve = new CubicBezierCurve(
+            startPoint.clone(),
+            endPoint.clone(),
+            startPoint.clone().add(startDiff.scale(threshold)),
+            endPoint.clone().add(endDiff.scale(threshold))
+          );
+          curves.push(curve);
+        }
       }
       startPoint = endPoint;
       curAngle = nextAngle;
@@ -268,7 +273,7 @@ export class VEllipseSector {
 
       // Bring all angles into the correct order
       //    Idea: use splice or slice here?
-      var angles = [];
+      var angles: Array<number> = [];
       for (var i = 0; i < ellipseAngles.length; i++) {
         angles.push(ellipseAngles[(startIndex + i) % ellipseAngles.length]);
       }
@@ -355,7 +360,8 @@ export class VEllipseSector {
 
       // Step 2 + 3: compute center
       const sign: number = fa === fs ? -1 : 1;
-      const M: number = sqrt((prx * pry - prx * py - pry * px) / (prx * py + pry * px)) * sign;
+      // const M: number = sqrt((prx * pry - prx * py - pry * px) / (prx * py + pry * px)) * sign;
+      const M: number = sqrt(Math.abs((prx * pry - prx * py - pry * px) / (prx * py + pry * px))) * sign;
 
       const _cx: number = (M * (rx * y)) / ry;
       const _cy: number = (M * (-ry * x)) / rx;
@@ -367,6 +373,7 @@ export class VEllipseSector {
       const center: Vertex = new Vertex(cx, cy);
       const axis: Vertex = center.clone().addXY(rx, ry);
       const ellipse: VEllipse = new VEllipse(center, axis, 0);
+      // console.log("VELLIPSE::::::", ellipse);
       ellipse.rotate(phi);
 
       const startAngle: number = new Line(ellipse.center, new Vertex(x1, y1)).angle();

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/Vertex.ts

@@ -28,7 +28,8 @@
  * @modified 2022-01-31 Added `Vertex.utils.arrayToJSON`.
  * @modified 2022-02-02 Added the `destroy` method.
  * @modified 2022-02-02 Cleared the `Vertex.toSVGString` function (deprecated). Use `drawutilssvg` instead.
- * @version  2.7.0
+ * @modified 2022-11-28 Added the `subXY`, `subX` and `subY` methods to the `Vertex` class.
+ * @version  2.8.0
  *
  * @file Vertex
  * @public
@@ -342,6 +343,50 @@ export class Vertex implements XYCoords, SVGSerializable {
     return this;
   }
 
+  /**
+   * Substract the passed amounts from the x- and y- components of this vertex.
+   *
+   * @method subXY
+   * @param {number} x - The amount to substract from x.
+   * @param {number} y - The amount to substract from y.
+   * @return {Vertex} this
+   * @instance
+   * @memberof Vertex
+   **/
+  subXY(amountX: number, amountY: number): Vertex {
+    this.x -= amountX;
+    this.y -= amountY;
+    return this;
+  }
+
+  /**
+   * Substract the passed amounts from the x-component of this vertex.
+   *
+   * @method addX
+   * @param {number} x - The amount to substract from x.
+   * @return {Vertex} this
+   * @instance
+   * @memberof Vertex
+   **/
+  subX(amountX: number): Vertex {
+    this.x -= amountX;
+    return this;
+  }
+
+  /**
+   * Substract the passed amounts from the y-component of this vertex.
+   *
+   * @method subY
+   * @param {number} y - The amount to substract from y.
+   * @return {Vertex} this
+   * @instance
+   * @memberof Vertex
+   **/
+  subY(amountY: number): Vertex {
+    this.y -= amountY;
+    return this;
+  }
+
   /**
    * Check if this vertex equals the passed one.
    * <br>