plotboilerplate 1.22.0 → 1.23.1

package/src/esm/utils/parsers/svg/types.d.ts

@@ -12,13 +12,13 @@
  * @modified 2023-01-17 Added multiple parameter sets.
  * @version  0.0.2-alpha
  */
-export declare type NumericString = `${number}`;
-export declare type BooleanString = "0" | "1" | `${boolean}`;
-export declare type SVGPathMoveToCommand = ["M" | "m", NumericString, NumericString];
-export declare type SVGPathLineToCommand = ["L" | "l", NumericString, NumericString, ...Array<NumericString>];
-export declare type SVGPathVerticalLineToCommand = ["V" | "v", NumericString];
-export declare type SVGPathHorizontalLineToCommand = ["H" | "h", NumericString];
-export declare type SVGPathQuadraticCurveToCommand = ["Q" | "q", NumericString, NumericString, NumericString, NumericString] | [
+export type NumericString = `${number}`;
+export type BooleanString = "0" | "1" | `${boolean}`;
+export type SVGPathMoveToCommand = ["M" | "m", NumericString, NumericString];
+export type SVGPathLineToCommand = ["L" | "l", NumericString, NumericString, ...Array<NumericString>];
+export type SVGPathVerticalLineToCommand = ["V" | "v", NumericString];
+export type SVGPathHorizontalLineToCommand = ["H" | "h", NumericString];
+export type SVGPathQuadraticCurveToCommand = ["Q" | "q", NumericString, NumericString, NumericString, NumericString] | [
     "Q" | "q",
     NumericString,
     NumericString,
@@ -29,7 +29,7 @@ export declare type SVGPathQuadraticCurveToCommand = ["Q" | "q", NumericString,
     NumericString,
     ...Array<NumericString>
 ];
-export declare type SVGPathCubicCurveToCommand = [
+export type SVGPathCubicCurveToCommand = [
     "C" | "c",
     NumericString,
     NumericString,
@@ -39,7 +39,7 @@ export declare type SVGPathCubicCurveToCommand = [
     NumericString,
     ...Array<NumericString>
 ];
-export declare type SVGPathShorthandCubicCurveToCommand = [
+export type SVGPathShorthandCubicCurveToCommand = [
     "S" | "s",
     NumericString,
     NumericString,
@@ -47,7 +47,7 @@ export declare type SVGPathShorthandCubicCurveToCommand = [
     NumericString,
     ...Array<NumericString>
 ];
-export declare type SVGPathArcToCommand = [
+export type SVGPathArcToCommand = [
     "A" | "a",
     NumericString,
     NumericString,
@@ -58,6 +58,6 @@ export declare type SVGPathArcToCommand = [
     NumericString,
     ...Array<NumericString>
 ];
-export declare type SVGPathCloseCommand = ["Z" | "z"];
-export declare type SVGPathShorthandQuadraticCurveToCommand = ["T" | "t", NumericString, NumericString, ...Array<NumericString>];
-export declare type SVGPathCommand = SVGPathMoveToCommand | SVGPathLineToCommand | SVGPathVerticalLineToCommand | SVGPathHorizontalLineToCommand | SVGPathQuadraticCurveToCommand | SVGPathCubicCurveToCommand | SVGPathShorthandCubicCurveToCommand | SVGPathArcToCommand | SVGPathCloseCommand;
+export type SVGPathCloseCommand = ["Z" | "z"];
+export type SVGPathShorthandQuadraticCurveToCommand = ["T" | "t", NumericString, NumericString, ...Array<NumericString>];
+export type SVGPathCommand = SVGPathMoveToCommand | SVGPathLineToCommand | SVGPathVerticalLineToCommand | SVGPathHorizontalLineToCommand | SVGPathQuadraticCurveToCommand | SVGPathCubicCurveToCommand | SVGPathShorthandCubicCurveToCommand | SVGPathArcToCommand | SVGPathCloseCommand;

package/src/index-gl.js

@@ -2,7 +2,7 @@
  * The main script of the generic plotter: the Gl version.
  *
  * @requires PlotBoilerplate, MouseHandler, gup, dat.gui, drawgl
- * 
+ *
  * @projectname Plotboilerplate.js
  * @author      Ikaros Kappler
  * @date        2019-09-18
@@ -10,93 +10,85 @@
  * @version     0.0.2
  **/
 
+(function (_context) {
+  "use strict";
 
-(function(_context) {
-    "use strict";
-
-    // Fetch the GET params
-    let GUP = gup();
-    
-    window.addEventListener(
-	'load',
-	function() {
-	    // 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,
-		      backgroundColor       : '#ffffff',
-		      enableMouse           : true,
-		      enableTouch           : true,
-		      enableKeys            : true,
-		      enableGL              : true   // This one is 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-gl');
-	    }
-	    
-	    // +---------------------------------------------------------------------------------
-	    // | Initialize dat.gui
-	    // +-------------------------------
-	    pb.createGUI(); 
-	    // END init dat.gui
-	    
-
-	    // +---------------------------------------------------------------------------------
-	    // | Add a mouse listener to track the mouse position.
-	    // +-------------------------------
-	    new MouseHandler(pb.canvas)
-		.move( function(e) {
-		    var relPos = pb.transformMousePosition( e.params.pos.x, e.params.pos.y );
-		    var cx = document.getElementById('cx');
-		    var cy = document.getElementById('cy');
-		    if( cx ) cx.innerHTML = relPos.x.toFixed(2);
-		    if( cy ) cy.innerHTML = relPos.y.toFixed(2);
-		} );
+  // Fetch the GET params
+  let GUP = gup();
 
-	    // Use a helper function to build all demo-drawables.
-	    var drawables = createDemoDrawables( pb.canvasSize,
-						 'example-image.png',
-						 function() { pb.redraw(); }
-					       );
-	    pb.add( drawables );
-	} );
-    
-})(window); 
+  window.addEventListener("load", function () {
+    // 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,
+          backgroundColor: "#ffffff",
+          enableMouse: true,
+          enableTouch: true,
+          enableKeys: true,
+          enableGL: true // This one is 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-gl");
+    }
 
+    // +---------------------------------------------------------------------------------
+    // | Initialize dat.gui
+    // +-------------------------------
+    pb.createGUI();
+    // END init dat.gui
 
+    // +---------------------------------------------------------------------------------
+    // | Add a mouse listener to track the mouse position.
+    // +-------------------------------
+    new MouseHandler(pb.canvas).move(function (e) {
+      var relPos = pb.transformMousePosition(e.params.pos.x, e.params.pos.y);
+      var cx = document.getElementById("cx");
+      var cy = document.getElementById("cy");
+      if (cx) cx.innerHTML = relPos.x.toFixed(2);
+      if (cy) cy.innerHTML = relPos.y.toFixed(2);
+    });
 
+    // Use a helper function to build all demo-drawables.
+    var drawables = createDemoDrawables(pb.canvasSize, "example-image.png", function () {
+      pb.redraw();
+    });
+    pb.add(drawables);
+  });
+})(window);

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