plotboilerplate 1.22.0 → 1.23.1

package/src/ts/PlotBoilerplate.ts

@@ -83,7 +83,9 @@
  * @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.
  * @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
+ * @modified 2024-07-08 Adding `PlotBoilerplate.getGUI()` to retrieve the GUI instance.
+ *
+ * @version  1.18.0
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.
@@ -126,7 +128,8 @@ import {
   SVGPathParams,
   XYCoords,
   XYDimension,
-  DatGuiProps
+  DatGuiProps, // DEPRECATED. Please do not use any more.
+  LilGuiProps
 } from "./interfaces";
 import { PBText } from "./PBText";
 import { AlloyFingerOptions } from "alloyfinger-typescript/src/cjs/alloy_finger";
@@ -326,6 +329,11 @@ export class PlotBoilerplate {
    */
   private renderTime: number = 0;
 
+  /**
+   * A storage variable for retrieving the GUI instance once it was created.
+   */
+  private _gui: GUI | null = null;
+
   /**
    * The constructor.
    *
@@ -389,7 +397,7 @@ export class PlotBoilerplate {
    *                                                   Note that changes from the postDraw hook might not be visible in the export.
    * @param {string=} [config.title=null] - Specify any hover tile here. It will be attached as a `title` attribute to the most elevated element.
    */
-  constructor(config: PBParams) {
+  constructor(config: PBParams, drawConfig: DrawConfig) {
     // This should be in some static block ...
     VertexAttr.model = {
       bezierAutoAdjust: false,
@@ -703,9 +711,13 @@ export class PlotBoilerplate {
     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")
+    if (typeof globalThis["saveAs" as keyof Object] !== "function") {
       throw "Cannot save file; did you load the ./utils/savefile helper function and the eligrey/SaveFile library?";
-    var _saveAs = globalThis["saveAs"];
+    }
+    var _saveAs: (blob: Blob, filename: string) => void = globalThis["saveAs" as keyof Object] as (
+      blob: Blob,
+      filename: string
+    ) => void;
     _saveAs(blob, "plotboilerplate.svg");
   }
 
@@ -2023,7 +2035,10 @@ export class PlotBoilerplate {
       };
 
       // Make PB work together with both, AlloyFinger as a esm module or a commonjs function.
-      if (typeof globalThis["AlloyFinger"] === "function" || typeof globalThis["createAlloyFinger"] === "function") {
+      if (
+        typeof globalThis["AlloyFinger" as keyof Object] === "function" ||
+        typeof globalThis["createAlloyFinger" as keyof Object] === "function"
+      ) {
         try {
           var touchMovePos: Vertex | undefined | null = null;
           var touchDownPos: Vertex | undefined | null = null;
@@ -2159,8 +2174,13 @@ export class PlotBoilerplate {
               _self.redraw();
             }
           } as unknown as AlloyFingerOptions; // END afProps
-          if (window["createAlloyFinger"]) {
-            window["createAlloyFinger"](this.eventCatcher ? this.eventCatcher : this.canvas, afProps);
+          if (window["createAlloyFinger" as keyof Object]) {
+            // window["createAlloyFinger"](this.eventCatcher ? this.eventCatcher : this.canvas, afProps);
+            const createAlloyFinger = window["createAlloyFinger" as keyof Object] as (
+              elem: HTMLElement | SVGElement,
+              afProps: AlloyFingerOptions
+            ) => void;
+            createAlloyFinger(this.eventCatcher ? this.eventCatcher : this.canvas, afProps);
           } else {
             /* tslint:disable-next-line */
             new AlloyFinger(this.eventCatcher ? this.eventCatcher : this.canvas, afProps);
@@ -2169,7 +2189,7 @@ export class PlotBoilerplate {
           console.error("Failed to initialize AlloyFinger!");
           console.error(e);
         }
-      } else if (globalThis["Touchy"] && typeof globalThis["Touchy"] == "function") {
+      } else if (globalThis["Touchy" as keyof Object] && typeof globalThis["Touchy" as keyof Object] == "function") {
         console.error("[Deprecation] Found Touchy which is not supported any more. Please use AlloyFinger instead.");
         // Convert absolute touch positions to relative DOM element position (relative to canvas)
       } else {
@@ -2211,12 +2231,28 @@ export class PlotBoilerplate {
    * @memberof PlotBoilerplate
    * @return {dat.gui.GUI}
    **/
-  createGUI(props?: DatGuiProps): GUI {
+  createGUI(props?: DatGuiProps | LilGuiProps): GUI {
     // This function moved to the helper utils.
     // We do not want to include the whole dat.GUI package.
-    if (globalThis["utils"] && typeof globalThis["utils"].createGUI == "function")
-      return globalThis["utils"].createGUI(this, props);
-    else throw "Cannot create dat.GUI instance; did you load the ./utils/creategui helper function an the dat.GUI library?";
+    const utils: { createGUI?: (pb: PlotBoilerplate, props: DatGuiProps | undefined) => GUI } | undefined = globalThis[
+      "utils" as keyof Object
+    ] as any as { createGUI?: (pb: PlotBoilerplate, props: DatGuiProps | undefined) => GUI } | undefined;
+    // if (globalThis["utils"] && typeof globalThis["utils"].createGUI == "function") {
+    //   return (globalThis["utils" as keyof Object] as any as ({createGUI : (pb:PlotBoilerplate,props:DatGuiProps|undefined)=>GUI })).createGUI(this, props);
+    if (utils && typeof utils.createGUI === "function") {
+      return (this._gui = utils.createGUI(this, props));
+    } else {
+      throw "Cannot create dat.GUI or lil-gui instance; did you load the ./utils/creategui helper function an the dat.GUI/lil-gui library?";
+    }
+  }
+
+  /**
+   * Retriebe the GUI once it was created. If the `createGUI` method was not called or failed to create any
+   * GUI then null is returned.
+   * @returns {GUI | null}
+   */
+  getGUI(): GUI | null {
+    return this._gui;
   }
 
   /**
@@ -2301,7 +2337,8 @@ export class PlotBoilerplate {
      * @return {void}
      **/
     setCSSscale: (element: HTMLElement | SVGElement, scaleX: number, scaleY: number): void => {
-      element.style["transform-origin"] = "0 0";
+      // element.style["transform-origin"] = "0 0";
+      element.style.transformOrigin = "0 0";
       if (scaleX == 1.0 && scaleY == 1.0) {
         // element.style.transform = null;
         element.style.removeProperty("transform");

package/src/ts/Vertex.ts

@@ -31,7 +31,8 @@
  * @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
+ * @modified 2024-03-08 Added the optional `precision` param to the `toString` method.
+ * @version  2.9.0
  *
  * @file Vertex
  * @public
@@ -631,8 +632,12 @@ export class Vertex implements XYCoords, SVGSerializable {
    * @instance
    * @memberof Vertex
    **/
-  toString(): string {
-    return "(" + this.x + "," + this.y + ")";
+  toString(precision?: number): string {
+    if (typeof precision === "undefined") {
+      return "(" + this.x + "," + this.y + ")";
+    } else {
+      return "(" + this.x.toFixed(precision) + "," + this.y.toFixed(precision) + ")";
+    }
   }
 
   /**

package/src/ts/VertexAttr.ts

@@ -6,7 +6,8 @@
  * @modified 2019-03-20 Added JSDoc tags.
  * @modified 2020-02-29 Added the 'selectable' attribute.
  * @modified 2020-03-23 Ported to Typescript from JS.
- * @version  1.1.1
+ * @modified 2024-03-10 Fixed some types for Typescript 5 compatibility.
+ * @version  1.1.2
  *
  * @file VertexAttr
  * @public
@@ -76,7 +77,7 @@ export class VertexAttr implements IVertexAttr {
 	this.visible = true;
 
 	for( var key in VertexAttr.model ) 
-	    this[key] = VertexAttr.model[key];
+	    this[key as keyof VertexAttr] = VertexAttr.model[key as keyof IVertexAttr] as any as boolean;
     };
 
 

package/src/ts/drawutilssvg.ts

@@ -44,8 +44,9 @@
  * @modified 2023-09-29 Added the `arrowHead(...)` function to the 'DrawLib.arrow()` interface.
  * @modified 2023-09-29 Added the `cubicBezierArrow(...)` function to the 'DrawLib.arrow()` interface.
  * @modified 2023-10-04 Adding `strokeOptions` param to these draw function: line, arrow, cubicBezierArrow, cubicBezier, cubicBezierPath, circle, circleArc, ellipse, square, rect, polygon, polyline.
- *
- * @version  1.6.7
+ * @modified 2024-01-30 Fixing an issue with immutable style sets; changes to the global draw config did not reflect here (do now).
+ * @modified 2024-03-10 Fixing some types for Typescript 5 compatibility.
+ * @version  1.6.9
  **/
 
 import { CircleSector } from "./CircleSector";
@@ -196,6 +197,16 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
    */
   private isSecondary: boolean;
 
+  /**
+   * Keep the initial draw config to rebuild styles on each render loop.
+   */
+  private drawConfig: DrawConfig;
+
+  /**
+   * Passed from primary to secondary instance.
+   */
+  //private nodeStyle: SVGStyleElement;
+
   /**
    * The constructor.
    *
@@ -221,13 +232,15 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     gNode?: SVGGElement,
     bufferGNode?: SVGGElement,
     nodeDefs?: SVGDefsElement,
-    bufferNodeDefs?: SVGDefsElement
+    bufferNodeDefs?: SVGDefsElement,
+    nodeStyle?: SVGStyleElement
   ) {
     this.svgNode = svgNode;
     this.offset = new Vertex(0, 0).set(offset);
     this.scale = new Vertex(1, 1).set(scale);
     this.fillShapes = fillShapes;
     this.isSecondary = Boolean(isSecondary);
+    this.drawConfig = drawConfig;
 
     this.drawlibConfiguration = {} as DrawLibConfiguration;
     this.cache = new Map<UID, SVGElement>();
@@ -240,6 +253,9 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
       this.bufferGNode = bufferGNode;
       this.nodeDefs = nodeDefs;
       this.bufferedNodeDefs = bufferNodeDefs;
+      if (nodeStyle) {
+        this.nodeStyle = nodeStyle;
+      }
     } else {
       this.addStyleDefs(drawConfig);
       this.addDefsNode();
@@ -258,12 +274,20 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
   private addStyleDefs(drawConfig: DrawConfig) {
     this.nodeStyle = this.createSVGNode("style") as SVGStyleElement;
     this.svgNode.appendChild(this.nodeStyle);
+    this.rebuildStyleDefs(drawConfig);
+  }
 
+  /**
+   * This method is required to re-define the global style defs. It is needed
+   * if any value in the DrawConfig changed in the meantime.
+   * @param drawConfig
+   */
+  private rebuildStyleDefs(drawConfig: DrawConfig) {
     // Which default styles to add? -> All from the DrawConfig.
     // Compare with DrawConfig interface
     const keys = {
-      // "bezier": "CubicBezierCurve", // TODO: is this correct?
-      "bezierPath": "BezierPath",
+      "bezier": "CubicBezierCurve",
+      //"bezierPath": "BezierPath", // TODO: is this correct?
       "polygon": "Polygon",
       "triangle": "Triangle",
       "ellipse": "Ellipse",
@@ -278,9 +302,10 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     };
     // Question: why isn't this working if the svgNode is created dynamically? (nodeStyle.sheet is null)
     const rules: Array<string> = [];
+    // console.log("drawConfig", drawConfig);
     for (var k in keys) {
-      const className: string = keys[k];
-      const drawSettings: DrawSettings | undefined = drawConfig[k];
+      const className: string = keys[k as keyof Object] as any as string;
+      const drawSettings: DrawSettings | undefined = drawConfig[k as keyof Object] as any as DrawSettings | undefined;
       if (drawSettings) {
         rules.push(`.${className} { fill : none; stroke: ${drawSettings.color}; stroke-width: ${drawSettings.lineWidth}px }`);
       } else {
@@ -380,7 +405,8 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
       node = this.createSVGNode(nodeName);
     }
     if (this.drawlibConfiguration.blendMode) {
-      node.style["mix-blend-mode"] = this.drawlibConfiguration.blendMode;
+      // node.style["mix-blend-mode"] = this.drawlibConfiguration.blendMode;
+      node.style["mix-blend-mode" as keyof Object](this.drawlibConfiguration.blendMode);
     }
     // if (this.lineDashEnabled && this.lineDash && this.lineDash.length > 0 && drawutilssvg.nodeSupportsLineDash(nodeName)) {
     //   node.setAttribute("stroke-dasharray", this.lineDash.join(" "));
@@ -504,12 +530,13 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
       this.scale,
       this.canvasSize,
       fillShapes,
-      null as any as DrawConfig, // no DrawConfig – this will work as long as `isSecondary===true`
+      this.drawConfig, // null as any as DrawConfig, // no DrawConfig – this will work as long as `isSecondary===true`
       true, // isSecondary
       this.gNode,
       this.bufferGNode,
       this.nodeDefs,
-      this.bufferedNodeDefs
+      this.bufferedNodeDefs,
+      this.nodeStyle
     );
     return copy;
   }
@@ -525,21 +552,6 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     this.drawlibConfiguration = configuration;
   }
 
-  // /**
-  //  * Set or clear the line-dash configuration. Pass `null` for un-dashed lines.
-  //  *
-  //  * See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
-  //  * and https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
-  //  * for how line dashes work.
-  //  *
-  //  * @method
-  //  * @param {Array<number> lineDashes - The line-dash array configuration.
-  //  * @returns {void}
-  //  */
-  // setLineDash(lineDashes: Array<number>) {
-  //   this.lineDash = lineDashes;
-  // }
-
   /**
    * This method shouled be called each time the currently drawn `Drawable` changes.
    * It is used by some libraries for identifying elemente on re-renders.
@@ -603,6 +615,7 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
    * @instance
    **/
   endDrawCycle(renderTime: number) {
+    this.rebuildStyleDefs(this.drawConfig);
     if (!this.isSecondary) {
       // All elements are drawn into the buffer; they are NOT yet visible, not did the browser perform any
       // layout updates.

package/src/ts/geomutils.ts

@@ -5,7 +5,6 @@
  * @version  1.1.0
  **/
 
-
 import { Line } from "./Line";
 import { Triangle } from "./Triangle";
 import { Vertex } from "./Vertex";
@@ -16,71 +15,68 @@ import { Vertex } from "./Vertex";
  * @global
  **/
 export const geomutils = {
+  /**
+   * Compute the n-section of the angle – described as a triangle (A,B,C) – in point A.
+   *
+   * @param {Vertex} pA - The first triangle point.
+   * @param {Vertex} pB - The second triangle point.
+   * @param {Vertex} pC - The third triangle point.
+   * @param {number} n - The number of desired angle sections (example: 2 means the angle will be divided into two sections,
+   *                      means an returned array with length 1, the middle line).
+   *
+   * @return {Line[]} An array of n-1 lines secting the given angle in point A into n equal sized angle sections. The lines' first vertex is A.
+   */
+  nsectAngle(pA: Vertex, pB: Vertex, pC: Vertex, n: number): Array<Line> {
+    const triangle: Triangle = new Triangle(pA, pB, pC);
+    const lineAB: Line = new Line(pA, pB);
+    const lineAC: Line = new Line(pA, pC);
+    // Compute the difference; this is the angle between AB and AC
+    var insideAngle: number = lineAB.angle(lineAC);
+    // We want the inner angles of the triangle, not the outer angle;
+    //   which one is which depends on the triangle 'direction'
+    const clockwise: boolean = triangle.determinant() > 0;
+
+    // For convenience convert the angle [-PI,PI] to [0,2*PI]
+    if (insideAngle < 0) insideAngle = 2 * Math.PI + insideAngle;
+    if (!clockwise) insideAngle = (2 * Math.PI - insideAngle) * -1;
 
-    /**
-     * Compute the n-section of the angle – described as a triangle (A,B,C) – in point A.
-     *
-     * @param {Vertex} pA - The first triangle point.
-     * @param {Vertex} pB - The second triangle point.
-     * @param {Vertex} pC - The third triangle point.
-     * @param {number} n - The number of desired angle sections (example: 2 means the angle will be divided into two sections, 
-     *                      means an returned array with length 1, the middle line).
-     *
-     * @return {Line[]} An array of n-1 lines secting the given angle in point A into n equal sized angle sections. The lines' first vertex is A.
-     */
-    nsectAngle( pA:Vertex, pB:Vertex, pC:Vertex, n:number ) : Array<Line> {
-	const triangle : Triangle  = new Triangle( pA, pB, pC );
-	const lineAB : Line        = new Line( pA, pB );
-	const lineAC : Line        = new Line( pA, pC );
-	// Compute the difference; this is the angle between AB and AC
-	var insideAngle : number   = lineAB.angle( lineAC );
-	// We want the inner angles of the triangle, not the outer angle;
-	//   which one is which depends on the triangle 'direction'
-	const clockwise : boolean  = triangle.determinant() > 0;
-	
-	// For convenience convert the angle [-PI,PI] to [0,2*PI]
-	if( insideAngle < 0 )
-	    insideAngle = 2*Math.PI + insideAngle;
-	if( !clockwise )
-	    insideAngle = (2*Math.PI - insideAngle) * (-1);  
+    // Scale the rotated lines to the max leg length (looks better)
+    const lineLength: number = Math.max(lineAB.length(), lineAC.length());
+    const scaleFactor: number = lineLength / lineAB.length();
 
-	// Scale the rotated lines to the max leg length (looks better)
-	const lineLength : number  = Math.max( lineAB.length(), lineAC.length() );
-	const scaleFactor : number = lineLength/lineAB.length();
+    var result: Array<Line> = [];
+    for (var i = 1; i < n; i++) {
+      // Compute the i-th inner sector line
+      result.push(new Line(pA, pB.clone().rotate(-i * (insideAngle / n), pA)).scale(scaleFactor) as Line);
+    }
+    return result;
+  },
 
-	var result : Array<Line> = [];
-	for( var i = 1; i < n; i++ ) {
-	    // Compute the i-th inner sector line
-	    result.push( new Line( pA, pB.clone().rotate((-i*(insideAngle/n)), pA) ).scale(scaleFactor) as Line ); 
-	}
-	return result; 
-    },
+  /**
+   * Wrap the value (e.g. an angle) into the given range of [0,max).
+   *
+   * @name wrapMax
+   * @param {number} x - The value to wrap.
+   * @param {number} max - The max bound to use for the range.
+   * @return {number} The wrapped value inside the range [0,max).
+   */
+  wrapMax(x: number, max: number): number {
+    // Found at
+    //    https://stackoverflow.com/questions/4633177/c-how-to-wrap-a-float-to-the-interval-pi-pi
+    return (max + (x % max)) % max;
+  },
 
-    /**
-     * Wrap the value (e.g. an angle) into the given range of [0,max).
-     *
-     * @name wrapMax
-     * @param {number} x - The value to wrap.
-     * @param {number} max - The max bound to use for the range.
-     * @return {number} The wrapped value inside the range [0,max).
-     */
-    wrapMax( x:number, max:number ) : number {
-	// Found at
-	//    https://stackoverflow.com/questions/4633177/c-how-to-wrap-a-float-to-the-interval-pi-pi
-	return (max + (x%max)) % max;
-    },
-    
-    /**
-     * Wrap the value (e.g. an angle) into the given range of [min,max).
-     *
-     * @name wrapMinMax
-     * @param {number} x - The value to wrap.
-     * @param {number} min - The min bound to use for the range.
-     * @param {number} max - The max bound to use for the range.
-     * @return {number} The wrapped value inside the range [min,max).
-     */
-    // Currently un-used
-    wrapMinMax( x:number, min:number, max:number ) : number {		
-	return min + geomutils.wrapMax( x - min, max - min );
-    } 
+  /**
+   * Wrap the value (e.g. an angle) into the given range of [min,max).
+   *
+   * @name wrapMinMax
+   * @param {number} x - The value to wrap.
+   * @param {number} min - The min bound to use for the range.
+   * @param {number} max - The max bound to use for the range.
+   * @return {number} The wrapped value inside the range [min,max).
+   */
+  // Currently un-used
+  wrapMinMax(x: number, min: number, max: number): number {
+    return min + geomutils.wrapMax(x - min, max - min);
+  }
 };

package/src/ts/interfaces/DrawLib.ts

@@ -92,21 +92,6 @@ export interface DrawLib<R> {
    */
   setConfiguration: (configuration: DrawLibConfiguration) => void;
 
-  // /**
-  //  * Set or clear the line-dash configuration. Pass `null` for un-dashed lines.
-  //  *
-  //  * See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
-  //  * and https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
-  //  * for how line dashes work.
-  //  *
-  //  * Setting line-dash to empty array `[]` resets the dashing.
-  //  *
-  //  * @method
-  //  * @param {Array<number> lineDashes - The line-dash array configuration.
-  //  * @returns {void}
-  //  */
-  // setLineDash: (lineDashes: Array<number>) => void;
-
   /**
    * This method shouled be called each time the currently drawn `Drawable` changes.
    * It is used by some libraries for identifying elemente on re-renders.

package/src/ts/interfaces/externals.ts

@@ -5,6 +5,7 @@
  */
 
 // https://www.npmjs.com/package/@types/dat.gui
+// @DEPRECATED Dat.GUI is replaced by lil-gui.
 export interface DatGuiProps {
   name?: string;
   load?: object;
@@ -14,3 +15,18 @@ export interface DatGuiProps {
   closed?: boolean;
   closeOnTop?: boolean;
 }
+
+// Compatible with dat.gui and lil-gui.
+export interface GUI {
+  domElement: HTMLElement;
+}
+
+export interface LilGuiProps {
+  name?: string;
+  load?: object;
+  parent?: dat.GUI;
+  autoPlace?: boolean;
+  hideable?: boolean;
+  closed?: boolean;
+  closeOnTop?: boolean;
+}

package/src/ts/utils/InitializationObserver.ts

@@ -0,0 +1,63 @@
+/**
+ * Approach to observe objects from other scripts to be initialized.
+ *
+ * @author  Ikaros Kappler
+ * @date    2024-07-08
+ * @version 1.0.0
+ */
+
+interface IAccepptRejectPair<T, E> {
+  accept: (value: T) => void;
+  reject: (error: E | null) => void;
+}
+
+export class InitializationObserver<T, E> {
+  private _acceptRejectPairs: Array<IAccepptRejectPair<T, E | null>>;
+  private _timeoutMessage: E | null;
+  private _initializedValue: T;
+  private _isInitialized: boolean;
+
+  constructor(timeout: number, timeoutMessage?: E) {
+    this._acceptRejectPairs = [];
+    this._timeoutMessage = timeoutMessage ?? null;
+
+    globalThis.setTimeout(() => {
+      if (!this._timeoutMessage) {
+        console.warn("Failed to initialize object. Reason unknown.");
+      }
+      this._fireReject(this._timeoutMessage ?? null);
+    }, timeout);
+  }
+
+  public accept(value: T): void {
+    this._isInitialized = true;
+    this._initializedValue = value;
+    this._fireAccept(value);
+  }
+
+  private _fireAccept(value: T) {
+    this._acceptRejectPairs.forEach(pair => {
+      pair.accept(value);
+    });
+  }
+
+  private _fireReject(error: E | null) {
+    this._acceptRejectPairs.forEach(pair => {
+      pair.reject(error);
+    });
+  }
+
+  waitForInitialized(): Promise<T> {
+    const _self = this;
+    // If the value is already present, then accept immediately
+    if (_self._isInitialized) {
+      return new Promise<T>((accept: (value: T) => void, reject: (error: E | null) => void) => {
+        accept(_self._initializedValue);
+      });
+    } else {
+      return new Promise<T>((accept: (value: T) => void, reject: (error: E | null) => void) => {
+        _self._acceptRejectPairs.push({ accept, reject });
+      });
+    }
+  }
+}

package/src/ts/utils/NGons.ts

@@ -0,0 +1,35 @@
+/**
+ * Generate regular polygons (N-Gons) and stars (N-Stars).
+ *
+ * @author   Ikaros Kappler
+ * @date     2023-11-24 (plain Javascript)
+ * @modified 2024-01-29 Ported to Typescript.
+ * @version 1.0.0
+ */
+
+import { Polygon } from "../Polygon";
+import { Vertex } from "../Vertex";
+
+export const NGons = {
+  ngon: (n: number, radius: number) => {
+    const center = new Vertex(0, 0);
+    const verts: Array<Vertex> = [];
+    for (var i = 0; i < n; i++) {
+      var vert = new Vertex(radius, 0);
+      vert.rotate(((Math.PI * 2) / n) * i, center);
+      verts.push(vert);
+    }
+    return new Polygon(verts);
+  },
+
+  nstar: (n: number, radiusA: number, radiusB: number) => {
+    const center = new Vertex(0, 0);
+    const verts: Array<Vertex> = [];
+    for (var i = 0; i < n; i++) {
+      var vert = new Vertex(i % 2 === 0 ? radiusA : radiusB, 0);
+      vert.rotate(((Math.PI * 2) / n) * i, center);
+      verts.push(vert);
+    }
+    return new Polygon(verts);
+  }
+};