plotboilerplate 1.21.0 → 1.23.0

package/src/index.js

@@ -2,7 +2,7 @@
  * The main script of the generic plotter.
  *
  * @requires PlotBoilerplate, MouseHandler, gup, dat.gui, draw
- * 
+ *
  * @projectname Plotboilerplate.js
  * @author      Ikaros Kappler
  * @date        2018-10-23
@@ -13,131 +13,126 @@
  * @version     1.0.4
  **/
 
-
-(function(_context) {
-    "use strict";
-
-    window.initializePB = function() {
-	if( window.pbInitialized )
-	    return;
-	window.pbInitialized = true;
-	// Fetch the GET params
-	let GUP = gup();
-	
-	// All config params are optional.
-	var pb = new PlotBoilerplate(
-	    PlotBoilerplate.utils.safeMergeByKeys(
-		{ canvas                : document.getElementById('my-canvas'),					    
-		  fullSize              : true,
-		  fitToParent           : true,
-		  scaleX                : 1.0,
-		  scaleY                : 1.0,
-		  rasterGrid            : true,
-		  drawOrigin            : true,
-		  rasterAdjustFactor    : 2.0,
-		  redrawOnResize        : true,
-		  defaultCanvasWidth    : 1024,
-		  defaultCanvasHeight   : 768,
-		  canvasWidthFactor     : 1.0,
-		  canvasHeightFactor    : 1.0,
-		  cssScaleX             : 1.0,
-		  cssScaleY             : 1.0,
-		  cssUniformScale       : true,
-		  autoAdjustOffset      : true,
-		  offsetAdjustXPercent  : 50,
-		  offsetAdjustYPercent  : 50,
-		  autoDetectRetina      : false,
-		  backgroundColor       : '#ffffff',
-		  enableMouse           : true,
-		  enableTouch           : true,
-		  enableKeys            : true,
-		  enableGL              : false // experimental
-		}, GUP
-	    )
-	);
-
-	if( typeof humane != 'undefined' ) {
-	    pb.setConsole( { warn : function() {
-		console.warn(arguments);
-		humane.log(arguments[0]);
-	    }, 
-			     log : function() {
-				 console.log(arguments);
-				 // humane.log(arguments[0]);
-			     },
-			     error : function() {
-				 console.error(arguments);
-				 humane.log(arguments[0]);
-			     }
-			   } );
-	    humane.log('plotboilerplate');
-	}
-	
-	// +---------------------------------------------------------------------------------
-	// | Initialize dat.gui
-	// +-------------------------------
-	pb.createGUI(); 
-
-
-	// +---------------------------------------------------------------------------------
-	// | Add stats.
-	// +-------------------------------
-	var stats = {
-	    mouseX : 0,
-	    mouseY : 0
-	};
-	var uiStats = new UIStats( stats );
-	stats = uiStats.proxy;
-	uiStats.add( 'mouseX' );
-	uiStats.add( 'mouseY' );
-
-	
-	// +---------------------------------------------------------------------------------
-	// | Add a mouse listener to track the mouse position.
-	// +-------------------------------
-	new MouseHandler(pb.eventCatcher)
-	    .move( function(e) {
-		var relPos = pb.transformMousePosition( e.params.pos.x, e.params.pos.y );
-		stats.mouseX = relPos.x;
-		stats.mouseY = relPos.y;
-	    } );
-
-	// Use a helper function to build all demo-drawables.
-	var drawables = createDemoDrawables( pb.canvasSize,
-					     'example-image.png',
-					     function() { pb.redraw(); }
-					   );
-	pb.add( drawables );
-
-	// Retrieve desired drawables from the array.
-	var polygon = drawables[9];
-	var triangles = [ drawables[17], drawables[18], drawables[19], drawables[20] ];
-	
-	function animate(time) { 
-	    polygon.rotate(0.01);
-	    pb.redraw();
-	    window.requestAnimationFrame( animate );
-	}
-	if( GUP.hasOwnProperty('animate') && PlotBoilerplate.utils.fetch.bool(GUP,'animate',true) ) {
-	    console.log('Staring animation');
-	    animate(0);
-	}
-
-	pb.config.postDraw = function() {
-	    for( var i in triangles ) {
-		var circle = triangles[i].getIncircle();
-		pb.fill.circle( circle.center, circle.radius, 'rgba(192,192,192,0.33)',1.0 );
-	    }
-	};
-	
-    }; // End initializePB
-
-    if( !window.pbPreventAutoLoad )
-	window.addEventListener('load', window.initializePB );
-
-    
-})(window); 
-
-
-
-
+(function (_context) {
+  "use strict";
+
+  window.initializePB = function () {
+    if (window.pbInitialized) {
+      return;
+    }
+    window.pbInitialized = true;
+    // Fetch the GET params
+    let GUP = gup();
+    var isInitialized = false;
+
+    // All config params are optional.
+    var pb = new PlotBoilerplate(
+      PlotBoilerplate.utils.safeMergeByKeys(
+        {
+          canvas: document.getElementById("my-canvas"),
+          fullSize: true,
+          fitToParent: true,
+          scaleX: 1.0,
+          scaleY: 1.0,
+          rasterGrid: true,
+          drawOrigin: true,
+          rasterAdjustFactor: 2.0,
+          redrawOnResize: true,
+          defaultCanvasWidth: 1024,
+          defaultCanvasHeight: 768,
+          canvasWidthFactor: 1.0,
+          canvasHeightFactor: 1.0,
+          cssScaleX: 1.0,
+          cssScaleY: 1.0,
+          cssUniformScale: true,
+          autoAdjustOffset: true,
+          offsetAdjustXPercent: 50,
+          offsetAdjustYPercent: 50,
+          autoDetectRetina: false,
+          backgroundColor: "#ffffff",
+          enableMouse: true,
+          enableTouch: true,
+          enableKeys: true,
+          enableGL: false // experimental
+        },
+        GUP
+      )
+    );
+
+    if (typeof humane != "undefined") {
+      pb.setConsole({
+        warn: function () {
+          console.warn(arguments);
+          humane.log(arguments[0]);
+        },
+        log: function () {
+          console.log(arguments);
+          // humane.log(arguments[0]);
+        },
+        error: function () {
+          console.error(arguments);
+          humane.log(arguments[0]);
+        }
+      });
+      humane.log("plotboilerplate");
+    }
+
+    // +---------------------------------------------------------------------------------
+    // | Initialize dat.gui
+    // +-------------------------------
+    pb.createGUI();
+
+    // +---------------------------------------------------------------------------------
+    // | Add stats.
+    // +-------------------------------
+    var stats = {
+      mouseX: 0,
+      mouseY: 0
+    };
+    var uiStats = new UIStats(stats);
+    stats = uiStats.proxy;
+    uiStats.add("mouseX");
+    uiStats.add("mouseY");
+
+    // +---------------------------------------------------------------------------------
+    // | Add a mouse listener to track the mouse position.
+    // +-------------------------------
+    new MouseHandler(pb.eventCatcher).move(function (e) {
+      var relPos = pb.transformMousePosition(e.params.pos.x, e.params.pos.y);
+      stats.mouseX = relPos.x;
+      stats.mouseY = relPos.y;
+    });
+
+    // Use a helper function to build all demo-drawables.
+    var drawables = createDemoDrawables(pb, "example-image.png", function () {
+      if (isInitialized) {
+        pb.redraw();
+      }
+    });
+    pb.add(drawables);
+
+    // Retrieve desired drawables from the array.
+    var polygon = drawables[9];
+    var triangles = [drawables[17], drawables[18], drawables[19], drawables[20]];
+
+    function animate(time) {
+      polygon.rotate(0.01);
+      pb.redraw();
+      window.requestAnimationFrame(animate);
+    }
+    if (GUP.hasOwnProperty("animate") && PlotBoilerplate.utils.fetch.bool(GUP, "animate", true)) {
+      console.log("Staring animation");
+      animate(0);
+    }
+
+    pb.config.postDraw = function () {
+      for (var i in triangles) {
+        var circle = triangles[i].getIncircle();
+        pb.fill.circle(circle.center, circle.radius, "rgba(192,192,192,0.33)", 1.0);
+      }
+    };
+    isInitialized = true;
+  }; // End initializePB
+
+  if (!window.pbPreventAutoLoad) window.addEventListener("load", window.initializePB);
+})(window);

package/src/ts/CircleSector.ts

@@ -3,12 +3,19 @@
  * @date     2020-12-17
  * @modified 2021-01-20 Added UID.
  * @modified 2021-02-26 Fixed an error in the svg-arc-calculation (case angle<90deg and anti-clockwise).
- * @version  1.1.1
+ * @modified 2024-01-30 Added a missing type in the `describeSVGArc` function.
+ * @modified 2024-03-01 Added the `getStartPoint` and `getEndPoint` methods.
+ * @modified 2024-03-08 Added the `containsAngle` method.
+ * @modified 2024-03-09 Added the `circleSectorIntersection` method to find coherent sector intersections..
+ * @modified 2024-03-09 Added the `angleAt` method to determine any angle at some ratio.
+ * @version  1.2.0
  **/
 
 import { Circle } from "./Circle";
+import { Line } from "./Line";
 import { UIDGenerator } from "./UIDGenerator";
-import { SVGPathParams, SVGSerializable, UID, XYCoords } from "./interfaces";
+import { Vertex } from "./Vertex";
+import { PathSegment, SVGPathParams, SVGSerializable, UID, XYCoords } from "./interfaces";
 
 /**
  * @classdesc A simple circle sector: circle, start- and end-angle.
@@ -80,10 +87,134 @@ export class CircleSector implements SVGSerializable {
     this.endAngle = endAngle;
   }
 
+  /**
+   * Checks wether the given angle (must be inside 0 and PI*2) is contained inside this sector.
+   *
+   * @param {number} angle - The numeric angle to check.
+   * @method containsAngle
+   * @instance
+   * @memberof CircleSector
+   * @return {boolean} True if (and only if) this sector contains the given angle.
+   */
+  containsAngle(angle: number) {
+    if (this.startAngle <= this.endAngle) {
+      return angle >= this.startAngle && angle < this.endAngle;
+    } else {
+      // startAngle > endAngle
+      return angle >= this.startAngle || angle < this.endAngle;
+    }
+  }
+
+  /**
+   * Get the angle inside this sector for a given ratio. 0.0 means startAngle, and 1.0 means endAngle.
+   *
+   * @param {number} t - The ratio inside [0..1].
+   * @method angleAt
+   * @instance
+   * @memberof CircleSector
+   * @return {number} The angle inside this sector at a given ratio.
+   */
+  angleAt(t: number): number {
+    if (this.startAngle <= this.endAngle) {
+      const angleAtRatio: number = this.startAngle + (this.endAngle - this.startAngle) * t;
+      return angleAtRatio % (Math.PI * 2.0);
+    } else {
+      // startAngle > endAngle
+      const angleAtRatio: number = this.startAngle + (Math.PI * 2 - this.startAngle + this.endAngle) * t;
+      return angleAtRatio % (Math.PI * 2.0);
+    }
+  }
+
+  /**
+   * Get the sectors starting point (on the underlying circle, located at the start angle).
+   *
+   * @method getStartPoint
+   * @instance
+   * @memberof CircleSector
+   * @return {Vertex} The sector's stating point.
+   */
+  getStartPoint(): Vertex {
+    return this.circle.vertAt(this.startAngle);
+  }
+
+  /**
+   * Get the sectors ending point (on the underlying circle, located at the end angle).
+   *
+   * @method getEndPoint
+   * @instance
+   * @memberof CircleSector
+   * @return {Vertex} The sector's ending point.
+   */
+  getEndPoint(): Vertex {
+    return this.circle.vertAt(this.endAngle);
+  }
+
+  /**
+   * Calculate the intersection of this circle sector and some other sector.
+   *
+   * If the two sectors do not corerently intersect (when not both points of the
+   * radical line are containted in both source sectors) then null is returned.
+   *
+   * See demo/53-circle-sector-intersections for a geometric visualisation.
+   *
+   * @method circleSectorIntersection
+   * @instance
+   * @memberof CircleSector
+   * @return {CircleSector | null} The intersecion of both sectors or null if they don't intersect.
+   */
+  circleSectorIntersection(sector: CircleSector): CircleSector | null {
+    const radicalLine: Line | null = this.circle.circleIntersection(sector.circle);
+    if (!radicalLine) {
+      // The circles to not intersect at all.
+      return null;
+    }
+    // Circles intersect. Check if this sector interval intersects, too.
+    const thisIntersectionAngleA = this.circle.center.angle(radicalLine.a);
+    const thisIntersectionAngleB = this.circle.center.angle(radicalLine.b);
+    // Is intersection inside this sector?
+    if (!this.containsAngle(thisIntersectionAngleA) || !this.containsAngle(thisIntersectionAngleB)) {
+      // At least one circle intersection point is not located in this sector.
+      //  -> no valid intersection at all
+      return null;
+    }
+
+    // Circles intersect. Check if the passed sector interval intersects, too.
+    const thatIntersectionAngleA = sector.circle.center.angle(radicalLine.a);
+    const thatIntersectionAngleB = sector.circle.center.angle(radicalLine.b);
+    // Is intersection inside this sector?
+    if (!sector.containsAngle(thatIntersectionAngleA) || !sector.containsAngle(thatIntersectionAngleB)) {
+      // At least one circle intersection point is not located in this sector.
+      //  -> no valid intersection at all
+      return null;
+    }
+
+    // The radical line has no direction. Thus the resulting sector _might_ be in reverse order.
+    // Make a quick logical check: the center of the gap must still be located inside the result sector.
+    // If not: reverse result.
+    var gapSector = new CircleSector(this.circle, this.endAngle, this.startAngle);
+    var centerOfOriginalGap = gapSector.angleAt(0.5);
+
+    const resultSector = new CircleSector(
+      new Circle(this.circle.center.clone(), this.circle.radius),
+      thisIntersectionAngleA,
+      thisIntersectionAngleB
+    );
+    if (resultSector.containsAngle(centerOfOriginalGap)) {
+      resultSector.startAngle = thisIntersectionAngleB;
+      resultSector.endAngle = thisIntersectionAngleA;
+    }
+    return resultSector;
+  }
+
   /**
    * This function should invalidate any installed listeners and invalidate this object.
    * After calling this function the object might not hold valid data any more and
    * should not be used.
+   *
+   * @method destroy
+   * @instance
+   * @memberof CircleSector
+   * @return {void}
    */
   destroy() {
     this.circle.destroy();
@@ -161,7 +292,7 @@ export class CircleSector implements SVGSerializable {
         sweepFlag = 1;
       }
 
-      const pathData = [];
+      const pathData: SVGPathParams = [];
       if (options.moveToStart) {
         pathData.push("M", start.x, start.y);
       }

package/src/ts/PlotBoilerplate.ts

@@ -389,7 +389,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 +703,10 @@ 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 +2024,7 @@ 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 +2160,10 @@ 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 +2172,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 {
@@ -2214,9 +2217,14 @@ export class PlotBoilerplate {
   createGUI(props?: DatGuiProps): 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 utils.createGUI(this, props);
+    } else { 
+      throw "Cannot create dat.GUI instance; did you load the ./utils/creategui helper function an the dat.GUI library?";
+    }
   }
 
   /**
@@ -2301,7 +2309,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/Polygon.ts

@@ -27,7 +27,8 @@
  * @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.
- * @version 1.11.0
+ * @modified 2023-11-24 Added the `Polygon.containsPolygon(Polygon)' function.
+ * @version 1.12.0
  *
  * @file Polygon
  * @public
@@ -184,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).
    *

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;
     };