plotboilerplate 1.23.2 → 1.24.0

package/src/ts/utils/algorithms/convexPolygonIncircle.ts

@@ -1,8 +1,9 @@
-/** 
+/**
  * @author   mbostock, extended and ported to TypeScript by Ikaros Kappler
  * @date     2020-05-19
  * @modified 2021-02-08 Fixed a lot of es2015 compatibility issues.
- * @version  1.0.2
+ * @modified 2024-03-24 Fixing some unstrict types to match with the new Typescript settings.
+ * @version  1.0.3
  * @file     contextPolygonIncircle
  * @public
  */
@@ -14,17 +15,16 @@ import { Polygon } from "../../Polygon";
 import { Triangle } from "../../Triangle";
 import { Vertex } from "../../Vertex";
 
-
 /**
  * For circle-polygon-intersection-count detection we need an epsilon to
  * eliminate smaller precision errors.
  */
-const EPS : number = 0.000001;
+const EPS: number = 0.000001;
 
 export interface PolygonIncircle {
-    circle : Circle;
-    triangle : Triangle;
-};
+  circle: Circle;
+  triangle: Triangle;
+}
 
 /**
  * Compute the max sized inlying circle in the given convex (!) polygon - also called the
@@ -50,54 +50,60 @@ export interface PolygonIncircle {
  * @param {Polygon} convexHull - The actual convex polygon.
  * @return {PolygonIncircle} A pair of a circle (the incircle) and a triangle (the three points where the circle is touching the polygon).
  */
-export const convexPolygonIncircle = ( convexHull:Polygon ) : PolygonIncircle => {
-    var n : number = convexHull.vertices.length;
-    var bestCircle : Circle|undefined = undefined;
-    var bestTriangle : Triangle|undefined = undefined;
-    for( var a = 0; a < n; a++ ) {
-	for( var b = a+1; b < n; b++ ) {
-	    for( var c = b+1; c < n; c++ ) {
-		// As these lines are part of the convex hull, we know that
-		//  * line a preceeds line b and
-		//  * line b preceeds line c :)
-		let lineA : Line = new Line( convexHull.vertices[a], convexHull.vertices[(a+1)%n] );
-		let lineB : Line = new Line( convexHull.vertices[b], convexHull.vertices[(b+1)%n] );
-		let lineC : Line = new Line( convexHull.vertices[c], convexHull.vertices[(c+1)%n] );
-
-		// Find intersections by expanding the lines
-		let vertB : Vertex = lineA.intersection(lineB);
-		let vertC : Vertex = lineB.intersection(lineC);
-
-		// An object: { center: Vertex, radius: number }
-		let triangle : Triangle = getTangentTriangle4( lineA.a, vertB, vertC, lineC.b );
-		// Workaround. There will be a future version where the 'getCircumCircle()' functions
-		// returns a real Circle instance.
-		let _circle : Circle = triangle.getCircumcircle();
-		let circle : Circle = new Circle( _circle.center, _circle.radius );
-
-		// Count the number of intersections with the convex hull:
-		// If there are exactly three, we have found an in-lying circle.
-		//  * Check if this one is better (bigger) than the old one.
-		//  * Also check if the circle is located inside the polygon;
-		//    The construction can, in some cases, produce an out-lying circle.
-		if( !convexHull.containsVert(circle.center) ) {
-		    continue;
-		}
-		var circleIntersections : Array<number> = findCircleIntersections( convexHull, circle );
-		if( circleIntersections.length == 3 && (bestCircle == undefined || bestCircle.radius < circle.radius) ) {
-		    bestCircle = circle;
-		    bestTriangle = triangle;
-		}
-	    }
-	}
+export const convexPolygonIncircle = (convexHull: Polygon): PolygonIncircle => {
+  var n: number = convexHull.vertices.length;
+  var bestCircle: Circle | null = null;
+  var bestTriangle: Triangle | null = null;
+  for (var a = 0; a < n; a++) {
+    for (var b = a + 1; b < n; b++) {
+      for (var c = b + 1; c < n; c++) {
+        // As these lines are part of the convex hull, we know that
+        //  * line a preceeds line b and
+        //  * line b preceeds line c :)
+        let lineA: Line = new Line(convexHull.vertices[a], convexHull.vertices[(a + 1) % n]);
+        let lineB: Line = new Line(convexHull.vertices[b], convexHull.vertices[(b + 1) % n]);
+        let lineC: Line = new Line(convexHull.vertices[c], convexHull.vertices[(c + 1) % n]);
+
+        // Find intersections by expanding the lines
+        let vertB: Vertex | null = lineA.intersection(lineB);
+        let vertC: Vertex | null = lineB.intersection(lineC);
+
+        if (!vertB || !vertC) {
+          continue;
+        }
+
+        // An object: { center: Vertex, radius: number }
+        let triangle: Triangle | null = getTangentTriangle4(lineA.a, vertB, vertC, lineC.b);
+        if (!triangle) {
+          continue;
+        }
+
+        // Workaround. There will be a future version where the 'getCircumCircle()' functions
+        // returns a real Circle instance.
+        let _circle: Circle = triangle.getCircumcircle();
+        let circle: Circle = new Circle(_circle.center, _circle.radius);
+
+        // Count the number of intersections with the convex hull:
+        // If there are exactly three, we have found an in-lying circle.
+        //  * Check if this one is better (bigger) than the old one.
+        //  * Also check if the circle is located inside the polygon;
+        //    The construction can, in some cases, produce an out-lying circle.
+        if (!convexHull.containsVert(circle.center)) {
+          continue;
+        }
+        var circleIntersections: Array<number> = findCircleIntersections(convexHull, circle);
+        if (circleIntersections.length == 3 && (bestCircle == undefined || bestCircle.radius < circle.radius)) {
+          bestCircle = circle;
+          bestTriangle = triangle;
+        }
+      }
     }
-    return { circle : bestCircle,
-	     triangle : bestTriangle };
+  }
+  return { circle: bestCircle as Circle, triangle: bestTriangle as Triangle };
 };
 
-
 /**
- * This function computes the three points for the inner maximum circle 
+ * This function computes the three points for the inner maximum circle
  * lying tangential to the three subsequential lines (given by four points).
  *
  * Compute the circle from that triangle by using Triangle.getCircumcircle().
@@ -114,26 +120,26 @@ export const convexPolygonIncircle = ( convexHull:Polygon ) : PolygonIncircle =>
  * @param {Vertex} vertD - The fourth point of the three connected lines.
  * @return {Triangle} The triangle of the circular tangential points with the given lines (3 or 4 of them).
  */
-const getTangentTriangle4 = ( vertA : Vertex,
-			      vertB : Vertex,
-			      vertC : Vertex,
-			      vertD : Vertex ) : Triangle => {
-    const lineA : Line = new Line(vertA,vertB);
-    const lineB : Line = new Line(vertB,vertC);
-    const lineC : Line = new Line(vertC,vertD);
+const getTangentTriangle4 = (vertA: Vertex, vertB: Vertex, vertC: Vertex, vertD: Vertex): Triangle | null => {
+  const lineA: Line = new Line(vertA, vertB);
+  const lineB: Line = new Line(vertB, vertC);
+  const lineC: Line = new Line(vertC, vertD);
 
-    const bisector1 : Line = geomutils.nsectAngle( vertB, vertA, vertC, 2 )[0]; // bisector of first triangle
-    const bisector2 : Line  = geomutils.nsectAngle( vertC, vertB, vertD, 2 )[0]; // bisector of second triangle
-    const intersection : Vertex = bisector1.intersection( bisector2 );
+  const bisector1: Line = geomutils.nsectAngle(vertB, vertA, vertC, 2)[0]; // bisector of first triangle
+  const bisector2: Line = geomutils.nsectAngle(vertC, vertB, vertD, 2)[0]; // bisector of second triangle
+  const intersection: Vertex | null = bisector1.intersection(bisector2);
 
-    // Find the closest points on one of the polygon lines (all have same distance by construction)
-    const circleIntersA : Vertex = lineA.getClosestPoint( intersection );
-    const circleIntersB : Vertex = lineB.getClosestPoint( intersection );
-    const circleIntersC : Vertex = lineC.getClosestPoint( intersection );
+  if (!intersection) {
+    return null;
+  }
 
-    return new Triangle(circleIntersA, circleIntersB, circleIntersC);
-};
+  // Find the closest points on one of the polygon lines (all have same distance by construction)
+  const circleIntersA: Vertex = lineA.getClosestPoint(intersection);
+  const circleIntersB: Vertex = lineB.getClosestPoint(intersection);
+  const circleIntersC: Vertex = lineC.getClosestPoint(intersection);
 
+  return new Triangle(circleIntersA, circleIntersB, circleIntersC);
+};
 
 /**
  * Find all intersecting lines (indices) on the polyon that intersect the circle.
@@ -142,16 +148,14 @@ const getTangentTriangle4 = ( vertA : Vertex,
  * @param {Circle} circle - The circle to detect the intersections with.
  * @return {Array<number>} The indices of those lines that intersect (or touch) the circle.
  **/
-const findCircleIntersections = ( convexHull:Polygon, circle:Circle ) : Array<number> => {
-    var result = [];
-    for( var i = 0; i < convexHull.vertices.length; i++ ) {
-	var line : Line = new Line( convexHull.vertices[i], convexHull.vertices[(i+1)%convexHull.vertices.length] );
-	// Use an epsilon here because circle coordinates can be kind of unprecise in the detail.
-	if( circle.lineDistance(line) < EPS ) {
-	    result.push( i );
-	}
+const findCircleIntersections = (convexHull: Polygon, circle: Circle): Array<number> => {
+  const result: Array<number> = [];
+  for (var i = 0; i < convexHull.vertices.length; i++) {
+    var line: Line = new Line(convexHull.vertices[i], convexHull.vertices[(i + 1) % convexHull.vertices.length]);
+    // Use an epsilon here because circle coordinates can be kind of unprecise in the detail.
+    if (circle.lineDistance(line) < EPS) {
+      result.push(i);
     }
-    return result;
+  }
+  return result;
 };
-
-

package/src/ts/utils/algorithms/findPolygonSelfIntersections.ts

@@ -5,6 +5,7 @@
  * @author   Ikaros Kappler
  * @date     2020-12-04
  * @modified 2020-12-09 Ported from vanilla JS to Typescript.
+ * @modified 2024-11-22 Fixed a type error in line 41.
  */
 
 import { Line } from "../../Line";
@@ -18,34 +19,32 @@ import { XYCoords } from "../../interfaces";
  *
  * @name findPolygonSelfIntersections
  * @param {Array<Vertex>} vertices - The vertices that form the polygon.
- * @return Array<Vertex>
+ * @return {Array<Vertex>}
  */
-export const findPolygonSelfIntersections = ( vertices:Array<XYCoords> ) : Array<Vertex> => {
-    const pointList : Array<Vertex> = [];
-    const lineA : Line = new Line( new Vertex(), new Vertex() );
-    const lineB : Line = new Line( new Vertex(), new Vertex() );
-    const n : number = vertices.length;
-    for( var a = 0; a < n; a++ ) {
-	lineA.a.set( vertices[a] );
-	lineA.b.set( vertices[(a+1)%n] );
-	for( var b = 0; b < n; b++ ) {
-	    // Same edge or neighbour edges intersect by definition.
-	    // Skip them.
-	    if( a == b || a+1 == b || a == b+1 || (a==0&&b+1==n) || (b==0&&a+1==n) )
-		continue;
-	    lineB.a.set( vertices[b] );
-	    lineB.b.set( vertices[(b+1)%n] );
+export const findPolygonSelfIntersections = (vertices: Array<XYCoords>): Array<Vertex> => {
+  const pointList: Array<Vertex> = [];
+  const lineA: Line = new Line(new Vertex(), new Vertex());
+  const lineB: Line = new Line(new Vertex(), new Vertex());
+  const n: number = vertices.length;
+  for (var a = 0; a < n; a++) {
+    lineA.a.set(vertices[a]);
+    lineA.b.set(vertices[(a + 1) % n]);
+    for (var b = 0; b < n; b++) {
+      // Same edge or neighbour edges intersect by definition.
+      // Skip them.
+      if (a == b || a + 1 == b || a == b + 1 || (a == 0 && b + 1 == n) || (b == 0 && a + 1 == n)) continue;
+      lineB.a.set(vertices[b]);
+      lineB.b.set(vertices[(b + 1) % n]);
 
-	    // Commpute the intersection point of the (infinite) lines.
-	    // The point is undefined if and only if both line are parallel (co-linear).
-	    const intersectionPoint : Vertex|undefined = lineA.intersection(lineB);
+      // Commpute the intersection point of the (infinite) lines.
+      // The point is undefined if and only if both line are parallel (co-linear).
+      const intersectionPoint: Vertex | null = lineA.intersection(lineB);
 
-	    // Check if the intersection point is on both (finite) edges of the polygon.
-	    if( intersectionPoint
-		&& lineA.hasPoint(intersectionPoint) && lineB.hasPoint(intersectionPoint) ) {
-		pointList.push( intersectionPoint );
-	    }
-	}	
+      // Check if the intersection point is on both (finite) edges of the polygon.
+      if (intersectionPoint && lineA.hasPoint(intersectionPoint) && lineB.hasPoint(intersectionPoint)) {
+        pointList.push(intersectionPoint);
+      }
     }
-    return pointList;
+  }
+  return pointList;
 };

package/src/ts/utils/algorithms/splitPolygonToNonIntersecting.ts

@@ -1,25 +1,24 @@
 /**
  * @requires Line
  * @requires Vertex
- * 
+ *
  * @author   Ikaros Kappler
  * @date     2020-12-04
  * @modified 2020-12-07 Ported from vanilla JS to typescript.
- * @version  1.0.1
+ * @modified 2024-11-22 Added the `insideBoundsOnly` param to the `splitPolygonToNonIntersecting` algorithm.
+ * @version  1.1.0
  */
 
 import { Line } from "../../Line";
 import { Vertex } from "../../Vertex";
 
-
 /**
  * Splitting a polygon at a self intersection results in two new polygons.
  */
-type ISplit = [ Array<Vertex>, Array<Vertex> ];
-
+type ISplit = [Array<Vertex>, Array<Vertex>];
 
 /**
- * This function cuts a given self-intersecting polygon into non-self-intersecting 
+ * This function cuts a given self-intersecting polygon into non-self-intersecting
  * sub polygons.
  *
  * The algorithm only works for non-self-overlapping polygons:
@@ -35,97 +34,91 @@ type ISplit = [ Array<Vertex>, Array<Vertex> ];
  * @return {Array<Array<Vertex>>} A sequence of non-self-intersecting sub polygons.
  */
 export const splitPolygonToNonIntersecting = (() => {
-
-    /**
-     * @param {Array<Vertex>} vertices
-     * @param {number=10} maxDepth
-     */  
-    const splitPolygonToNonIntersecting = ( vertices:Array<Vertex>,
-					    maxDepth?:number ) : Array<Array<Vertex>> => {
-	if( typeof maxDepth === "undefined" )
-	    maxDepth = 10;
-	return _splitPolygonToNonIntersecting( vertices, maxDepth );
-    };
-
-    
-    const _splitPolygonToNonIntersecting = ( vertices:Array<Vertex>,
-					     maxDepth:number ) : Array<Array<Vertex>> =>  {
-	if( maxDepth <= 0 ) {
-	    // aborting at max depth
-	    return [ vertices ];
-	}
-
-	if( vertices.length <= 3 ) {
-	    // No intersections possible
-	    return [ vertices ];
-	}
-
-	const n : number= vertices.length;
-	const lineA : Line = new Line( new Vertex(), new Vertex() );
-	const lineB : Line = new Line( new Vertex(), new Vertex() );
-	for( var a = 0; a < vertices.length; a++ ) {
-	    lineA.a.set( vertices[a] );
-	    lineA.b.set( vertices[(a+1) % n] );
-	    for( var b = 0; b < vertices.length; b++ ) {
-		// Equal edges or neighbour edges intersect by definition.
-		// We ignore them.
-		if( a == b || a+1 == b || a == b+1
-		    || (a==0&&b+1==vertices.length) || (b==0&&a+1==vertices.length) )
-		    continue;
-		lineB.a.set( vertices[b] );
-		lineB.b.set( vertices[(b+1) % n] );
-
-		const intersectionPoint : Vertex|undefined = lineA.intersection(lineB);
-		if( intersectionPoint && lineA.hasPoint(intersectionPoint) && lineB.hasPoint(intersectionPoint) ) {
-
-		    // Cut polygon into two here
-		    const split : ISplit = splitPolygonAt( vertices, a, b, intersectionPoint );
-		    
-		    // Split has 2 elements.
-		    const leftCleaned : Array<Array<Vertex>> =
-			_splitPolygonToNonIntersecting( split[0], maxDepth-1 );
-		    const rightCleaned : Array<Array<Vertex>> =
-			_splitPolygonToNonIntersecting( split[1], maxDepth-1 );
-
-		    return leftCleaned.concat( rightCleaned );
-		}
-	    }	
-	}
-
-	// No intersection found:
-	//    just return a list with the original
-	//    polygon as its only element.
-	return [ vertices ];
-    };
-
-
-    // Pre: edgeIndexA < edgeIndexB && vertices.length >= 4
-    const splitPolygonAt = ( vertices:Array<Vertex>,
-			     edgeIndexA:number,
-			     edgeIndexB:number,
-			     intersectionPoint:Vertex ) : ISplit => {
-	const first : Array<Vertex> = [];
-	var second : Array<Vertex> = [];
-	for( var i = 0; i < vertices.length; i++ ) {
-	    if( i <= edgeIndexA )
-		first.push( vertices[i] );
-
-	    if( i == edgeIndexA )  {
-		first.push( intersectionPoint );
-		second.push( intersectionPoint ); // clone???
-	    }
-
-	    if( i > edgeIndexA && i <= edgeIndexB )
-		second.push( vertices[i] );
-
-	    if( i > edgeIndexB )
-		first.push( vertices[i] );
-	    
-	}
-
-	return [ first, second ];
-    };
-
-    return splitPolygonToNonIntersecting;
+  /**
+   * @param {Array<Vertex>} vertices
+   * @param {number=10} maxDepth
+   */
+  const splitPolygonToNonIntersecting = (
+    vertices: Array<Vertex>,
+    maxDepth?: number,
+    insideBoundsOnly?: boolean
+  ): Array<Array<Vertex>> => {
+    if (typeof maxDepth === "undefined") maxDepth = 10;
+    return _splitPolygonToNonIntersecting(vertices, maxDepth, insideBoundsOnly);
+  };
+
+  const _splitPolygonToNonIntersecting = (
+    vertices: Array<Vertex>,
+    maxDepth: number,
+    insideBoundsOnly?: boolean
+  ): Array<Array<Vertex>> => {
+    if (maxDepth <= 0) {
+      // aborting at max depth
+      return [vertices];
+    }
+
+    if (vertices.length <= 3) {
+      // No intersections possible
+      return [vertices];
+    }
+
+    const n: number = vertices.length;
+    const lineA: Line = new Line(new Vertex(), new Vertex());
+    const lineB: Line = new Line(new Vertex(), new Vertex());
+    for (var a = 0; a < vertices.length; a++) {
+      lineA.a.set(vertices[a]);
+      lineA.b.set(vertices[(a + 1) % n]);
+      for (var b = 0; b < vertices.length; b++) {
+        // Equal edges or neighbour edges intersect by definition.
+        // We ignore them.
+        if (a == b || a + 1 == b || a == b + 1 || (a == 0 && b + 1 == vertices.length) || (b == 0 && a + 1 == vertices.length))
+          continue;
+        lineB.a.set(vertices[b]);
+        lineB.b.set(vertices[(b + 1) % n]);
+
+        const intersectionPoint: Vertex | null = lineA.intersection(lineB);
+        if (
+          intersectionPoint &&
+          lineA.hasPoint(intersectionPoint, insideBoundsOnly) &&
+          lineB.hasPoint(intersectionPoint, insideBoundsOnly)
+        ) {
+          // Cut polygon into two here
+          const split: ISplit = splitPolygonAt(vertices, a, b, intersectionPoint);
+
+          // Split has 2 elements.
+          const leftCleaned: Array<Array<Vertex>> = _splitPolygonToNonIntersecting(split[0], maxDepth - 1, insideBoundsOnly);
+          const rightCleaned: Array<Array<Vertex>> = _splitPolygonToNonIntersecting(split[1], maxDepth - 1, insideBoundsOnly);
+
+          return leftCleaned.concat(rightCleaned);
+        }
+      }
+    }
+
+    // No intersection found:
+    //    just return a list with the original
+    //    polygon as its only element.
+    return [vertices];
+  };
+
+  // Pre: edgeIndexA < edgeIndexB && vertices.length >= 4
+  const splitPolygonAt = (vertices: Array<Vertex>, edgeIndexA: number, edgeIndexB: number, intersectionPoint: Vertex): ISplit => {
+    const first: Array<Vertex> = [];
+    var second: Array<Vertex> = [];
+    for (var i = 0; i < vertices.length; i++) {
+      if (i <= edgeIndexA) first.push(vertices[i]);
+
+      if (i == edgeIndexA) {
+        first.push(intersectionPoint);
+        second.push(intersectionPoint); // clone???
+      }
+
+      if (i > edgeIndexA && i <= edgeIndexB) second.push(vertices[i]);
+
+      if (i > edgeIndexB) first.push(vertices[i]);
+    }
+
+    return [first, second];
+  };
+
+  return splitPolygonToNonIntersecting;
 })();
-

package/src/ts/utils/createRandomizedPolygon.ts

@@ -0,0 +1,31 @@
+/**
+ * A helper function to generate randmoized non-intersecting polygons.
+ *
+ * @author  Ikaros Kappler
+ * @date    2025-03-23 (ported to Typescript from a helper script from 2024)
+ * @version 1.0.0
+ */
+
+import { Bounds } from "../Bounds";
+import { Polygon } from "../Polygon";
+import { Vertex } from "../Vertex";
+
+/**
+ * @param numVertices
+ * @returns
+ */
+
+export const createRandomizedPolygon = (numVertices: number, viewport: Bounds, createClockwise?: boolean) => {
+  const polygon = new Polygon();
+  for (var i = 0; i < numVertices; i++) {
+    const vert = new Vertex(viewport.getMinDimension() * 0.33, 0.0);
+    vert.rotate(((Math.PI * 2) / numVertices) * i);
+    vert.addXY(viewport.width * 0.1 * (1.0 - Math.random() * 2), viewport.height * 0.1 * (1.0 - Math.random() * 2));
+    polygon.addVertex(vert);
+  }
+  if (createClockwise && !polygon.isClockwise()) {
+    // Reverse
+    polygon.vertices = polygon.vertices.reverse();
+  }
+  return polygon;
+};

package/src/ts/utils/detectDarkMode.ts

@@ -8,9 +8,7 @@
  * @returns {boolean}
  */
 
-import PlotBoilerplate from "../PlotBoilerplate";
-
-export const detectDarkMode = (GUP?: Record<string, string>) => {
+export const detectDarkMode = (GUP?: Record<string, string>): boolean => {
   // Respect overrides
   if (typeof GUP !== "undefined" && GUP.hasOwnProperty("darkmode") && GUP["darkmode"]) {
     // const overrideValue = PlotBoilerplate.utils.fetch.bool(GUP, "darkmode", null);

package/src/ts/utils/dom/guiSizeToggler.ts

@@ -5,7 +5,8 @@
  * @date     2021-12-13
  * @modified 2022-01-10
  * @modified 2024-06-25 Ported to typescript and moved to utils/dom (was located inside demos before).
- * @version  1.1.0
+ * @modified 2024-10-02 Added a transition time.
+ * @version  1.1.1
  */
 
 import { GUI } from "../../interfaces/externals";
@@ -36,7 +37,8 @@ const applyGuiSize = (gui: GUI, guiDoubleSize: boolean, cssProps: Record<string,
   }
 };
 
-export const guiSizeToggler /* gst */ = (gui: GUI, config: ITogglerConfig, cssProps: Record<string, string>) => {
+export const guiSizeToggler = (gui: GUI, config: ITogglerConfig, cssProps: Record<string, string>) => {
+  gui.domElement.style["transition"] = "transform 0.5s";
   return {
     update: function () {
       applyGuiSize(gui, Boolean(config.guiDoubleSize), cssProps);