plotboilerplate 1.22.0 → 1.23.0

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/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);
+  }
+};