plotboilerplate 1.30.0 → 1.31.0

package/README.md

@@ -14,39 +14,51 @@ often use for the visualization of 2D geometries. Basic features are
 - adding elements like
   - vertices
     ([docs](https://plotboilerplate.io/docs_typedoc/classes/vertex.html "Vertex class"),
-    [example](https://plotboilerplate.io/repo/demos/basic-Vertex "Vertex example"))
+    [example](https://plotboilerplate.io/repo/demos/basic-Vertex "Vertex example"),
+    [Codepen](https://codepen.io/editor/ikaroskappler/pen/01a0d500-3791-7489-9ac9-90a83ad53415 "Codepen"))
   - lines
     ([docs](https://plotboilerplate.io/docs_typedoc/classes/line.html "Line class"),
-    [example](https://plotboilerplate.io/repo/demos/basic-Line "Line example"))
-  - vectors [docs](https://plotboilerplate.io/docs_typedoc/classes/vector.html "Vector class"),
-    [example](https://plotboilerplate.io/repo/demos/basic-Vector "Vector example"))
+    [example](https://plotboilerplate.io/repo/demos/basic-Line "Line example"),
+    [Codepen](https://codepen.io/ikaroskappler/pen/ZEjamVb "Codepen"))
+  - vectors ([docs](https://plotboilerplate.io/docs_typedoc/classes/vector.html "Vector class"),
+    [example](https://plotboilerplate.io/repo/demos/basic-Vector "Vector example"),
+    [Codepen](https://codepen.io/editor/ikaroskappler/pen/01a0d509-e4db-7664-a7a7-8232a26db80f "Codepen"))
   - triangles
     ([docs](https://plotboilerplate.io/docs_typedoc/classes/triangle.html "Triangle class"),
-    [example](https://plotboilerplate.io/repo/demos/basic-Triangle "Triangle example"))
+    [example](https://plotboilerplate.io/repo/demos/basic-Triangle "Triangle example"),
+    [Codepen](https://codepen.io/editor/ikaroskappler/pen/01a0d50e-90ae-7a46-b7c8-a0a50ef7b558 "Codepen"))
   - curves
     ([docs](https://plotboilerplate.io/docs_typedoc/classes/cubicbeziercurve.html "CubicBezierCurve class"),
-    [example](https://plotboilerplate.io/repo/demos/basic-BezierPath "BezierPath example"))
+    [example](https://plotboilerplate.io/repo/demos/basic-BezierPath "BezierPath example"),
+    [Codepen](https://codepen.io/editor/ikaroskappler/pen/01a0e3f0-d703-7ba8-87c4-44eb1d9f0b6c "Codepen"))
   - circles
     ([docs](https://plotboilerplate.io/docs_typedoc/classes/circle.html "Circle class"),
-    [example](https://plotboilerplate.io/repo/demos/basic-Circle "Circle example"))
+    [example](https://plotboilerplate.io/repo/demos/basic-Circle "Circle example"),
+    [Codepen](https://codepen.io/editor/ikaroskappler/pen/01a0e3f9-9df0-7b70-b885-55652dbc6609 "Codepen"))
   - circle sectors
     ([docs](https://plotboilerplate.io/docs_typedoc/classes/circlesector.html "CircleSector class"),
-    [example](https://plotboilerplate.io/repo/demos/basic-CircleSector "CircleSector example"))
+    [example](https://plotboilerplate.io/repo/demos/basic-CircleSector "CircleSector example"),
+    [Codepen](https://codepen.io/editor/ikaroskappler/pen/01a0e41e-655d-73e8-8ea6-b6bca91bc468 "CircleSector"))
   - polygons
     ([docs](https://plotboilerplate.io/docs_typedoc/classes/polygon.html "Polygon class"),
-    [example](https://plotboilerplate.io/repo/demos/basic-Polygon "Polygon example"))
+    [example](https://plotboilerplate.io/repo/demos/basic-Polygon "Polygon example"),
+    [Codepen](https://codepen.io/editor/ikaroskappler/pen/01a0e421-2f06-7594-8b52-de18613870b5 "Codepen"))
   - ellipses
     ([docs](https://plotboilerplate.io/docs_typedoc/classes/vellipse.html "VEllipse class"),
-    [example](https://plotboilerplate.io/repo/demos/basic-VEllipse "VEllipse example"))
+    [example](https://plotboilerplate.io/repo/demos/basic-VEllipse "VEllipse example"),
+    [Codepen](https://codepen.io/editor/ikaroskappler/pen/01a0e423-1b14-75d4-b297-e7d9a47f5abd "Codepen"))
   - ellipse sectors
     ([docs](https://plotboilerplate.io/docs_typedoc/classes/vellipsesector.html "VEllipseSector class"),
-    [example](https://plotboilerplate.io/repo/demos/basic-VEllipseSector "VEllipseSector example"))
+    [example](https://plotboilerplate.io/repo/demos/basic-VEllipseSector "VEllipseSector example"),
+    [Codepen](https://codepen.io/editor/ikaroskappler/pen/01a0e425-813b-7557-8527-1b95bd56212b "Codepen"))
   - images
     ([docs](https://plotboilerplate.io/docs_typedoc/classes/pbimage.html "PBImage class"),
-    [example](https://plotboilerplate.io/repo/demos/basic-PBImage "PBImage example"))
+    [example](https://plotboilerplate.io/repo/demos/basic-PBImage "PBImage example"),
+    [Codepen](https://codepen.io/editor/ikaroskappler/pen/01a0e428-4a64-78b3-8bf8-08a1bf706cfa "Codepen"))
   - text
     ([docs](https://plotboilerplate.io/docs_typedoc/classes/pbtext.html "PBText class"),
-    [example](https://plotboilerplate.io/repo/demos/basic-PBText "PBText example"))
+    [example](https://plotboilerplate.io/repo/demos/basic-PBText "PBText example"),
+    [Codepen](https://codepen.io/editor/ikaroskappler/pen/01a0e42a-8937-7788-b8ca-c66a8de53cc4 "Codepen"))
 - configuration of the canvas behavior
   - fullsize and auto-resizing
   - enable/disable mouse, touch or keyboard interaction
@@ -587,6 +599,7 @@ new MouseHandler(document.getElementById("mycanvas"))
 - Mathworld for the [Apollonius math](https://mathworld.wolfram.com/ApolloniusProblem.html)
 - Mathworld for the [Homothetic center math](https://mathworld.wolfram.com/HomotheticCenter.html)
 - cut-the-knot.org for the [Radical Axis calculation](https://www.cut-the-knot.org/Curriculum/Geometry/GeoGebra/RadicalAxes.shtml)
+- bitbanging.space with the excellent explanation for [Lloyd's algorithm](https://www.bitbanging.space/posts/lloyds-algorithm)
 
 ## Todos
 

package/dist/index.esm.js

@@ -1568,7 +1568,7 @@ const geomutils = {
  * @modified 2025-04-13 Adding the `Vertex.move(amount: XYCoords)` method (does the same as `add`, added by naming convention).
  * @modified 2025-05-07 Class `Vertex` is now implementing interface `IBounded` (to meet convention).
  * @modified 2026-06-10 Adding methods `Vertex.findClosestPoint` and `Vertex.findFarestPoint`.
- * @version  2.12.0
+ * @version  2.12.1
  *
  * @file Vertex
  * @public
@@ -2039,7 +2039,7 @@ class Vertex$1 {
      * around given center.
      *
      * @method rotate
-     * @param {number} angle - The angle to 'rotate' this vertex; 0.0 means no change.
+     * @param {number} angle - The angle in radians to 'rotate' this vertex; 0.0 means no change.
      * @param {XYCoords=} center - The center of rotation; default is (0,0).
      * @return {Vertex} this
      * @instance
@@ -2283,8 +2283,9 @@ Vertex$1.utils = {
  * @modified 2025-04-15 Changed param of `VertTuple.moveTo` method from `Vertex` to `XYCoords`.
  * @modified 2025-04-15 Added method `VertTuple.move` method.
  * @modified 2026-06-10 Adding helper function `VertTuple.utils.calcCircumcircle`.
- * @modified 2026-06-17 Adding method `VertTuple.asLine` for converting Vector to Line instances.
- * @version 1.6.0
+ * @modified 2026-06-17 Adding method `VertTuple.asLine` for converting TertTuples to Line instances.
+ * @modified 2026-09-21 Adding method `VertTuple.asVector` for converting TertTuples to Vector instances.
+ * @version 1.7.0
  */
 /**
  * @classdesc An abstract base classes for vertex tuple constructs, like Lines or Vectors.
@@ -2577,16 +2578,27 @@ class VertTuple {
         return this.factory(this.a.clone(), this.b.clone());
     }
     /**
-     * Converts this `Vector` to a `Line` (segment).
+     * Converts this `VertTuple` to a `Line` (segment).
      *
      * @method asLine
-     * @return {T} A type safe clone if this instance.
+     * @return {Line} This tuple as `Line` instance.
      * @instance
      * @memberof VertTuple
      **/
     asLine() {
         return new Line(this.a, this.b);
     }
+    /**
+     * Converts this `VertTuple` to a `Vector` (arrow).
+     *
+     * @method asVector
+     * @return {Line} This tuple as `Vector` instance.
+     * @instance
+     * @memberof VertTuple
+     **/
+    asVector() {
+        return new Vector(this.a, this.b);
+    }
     /**
      * Create a string representation of this line.
      *
@@ -3108,7 +3120,9 @@ class Line extends VertTuple {
  * @modified 2025-05-16 Class `Polygon` now implements `IBounded`.
  * @modified 2025-05-20 Tweaking `Polygon.getInnerAngleAt` and `Polygo.isAngleAcute` to handle indices out of array bounds as well.
  * @modified 2025-06-07 Adding `Polygon.closestLineIntersectionIndex` to determine line intersections plus detected edge index.
- * @version 1.16.0
+ * @modified 2026-09-16 Adding a `forceClockwise` parameter to the `Polygon.getCentroid()` method.
+ * @modified 2026-09-21 Adding `Polygon.revert` method to change the winding order.
+ * @version 1.17.0
  *
  * @file Polygon
  * @public
@@ -3402,6 +3416,20 @@ class Polygon {
         // return Polygon.utils.signedArea(this.vertices) < 0;
         return Polygon.utils.isClockwise(this.vertices);
     }
+    /**
+     * Revert the order of this polygon's vertices to change the winding order.
+     * This operation is in-place.
+     *
+     * @method revert
+     * @instance
+     * @memberof Polygon
+     * @return {Polygon} This for chaining.
+     */
+    revert() {
+        // this.vertices.slice().reverse(); // Copy?
+        this.vertices.reverse();
+        return this;
+    }
     /**
      * Get the perimeter of this polygon.
      * The perimeter is the absolute length of the outline.
@@ -3483,35 +3511,37 @@ class Polygon {
     }
     /**
      * Get centroid.
-     * Centroids define the barycenter of any non self-intersecting convex polygon.
+     * Centroids define the barycenter of any non self-intersecting convex clockwise polygon.
      *
-     * If the polygon is self intersecting or non konvex then the barycenter is not well defined.
+     * If the polygon is self intersecting or non convex or not clockwise then the barycenter is not well defined.
      *
      * https://mathworld.wolfram.com/PolygonCentroid.html
      *
      * @method getCentroid
      * @instance
+     * @param {boolean} forceClockwise - [optiona] If set to true then the centroid will be calculated for the clockwise polygon.
      * @memberof Polygon
      * @returns {Vertex|null}
      */
-    getCentroid() {
+    getCentroid(forceClockwise) {
         if (this.vertices.length === 0) {
             return null;
         }
-        const center = new Vertex$1(0.0, 0.0);
-        const n = this.vertices.length;
-        for (var i = 0; i < n; i++) {
-            // center.add(this.vertices[i]);
-            const cur = this.vertices[i];
-            const next = this.vertices[(i + 1) % n];
-            var factor = cur.x * next.y - next.x * cur.y;
-            center.x += (cur.x + next.x) * factor;
-            center.y += (cur.y + next.y) * factor;
-        }
-        const area = this.area();
-        center.x *= 1 / (6 * area);
-        center.y *= 1 / (6 * area);
-        return center;
+        // const centroid: Vertex = new Vertex(0.0, 0.0);
+        // const n = this.vertices.length;
+        // for (var i = 0; i < n; i++) {
+        //   // center.add(this.vertices[i]);
+        //   const cur: Vertex = this.vertices[i];
+        //   const next: Vertex = this.vertices[(i + 1) % n];
+        //   var factor: number = cur.x * next.y - next.x * cur.y;
+        //   centroid.x += (cur.x + next.x) * factor;
+        //   centroid.y += (cur.y + next.y) * factor;
+        // }
+        // const area = this.area();
+        // centroid.x *= 1 / (6 * area);
+        // centroid.y *= 1 / (6 * area);
+        // return centroid;
+        return Polygon.utils.calculateCentroid(this.vertices, forceClockwise);
     }
     //--- BEGIN --- Implement interface `Intersectable`
     /**
@@ -3936,6 +3966,26 @@ Polygon.utils = {
     isClockwise(vertices) {
         return Polygon.utils.signedArea(vertices) < 0;
     },
+    calculateCentroid(vertices, forceClockwise) {
+        const centroid = new Vertex$1(0.0, 0.0);
+        const n = vertices.length;
+        if (forceClockwise && !Polygon.utils.isClockwise(vertices)) {
+            return Polygon.utils.calculateCentroid(vertices.slice().reverse());
+        }
+        for (var i = 0; i < n; i++) {
+            // center.add(this.vertices[i]);
+            const cur = vertices[i];
+            const next = vertices[(i + 1) % n];
+            var factor = cur.x * next.y - next.x * cur.y;
+            centroid.x += (cur.x + next.x) * factor;
+            centroid.y += (cur.y + next.y) * factor;
+        }
+        // const area = this.area();
+        const area = Polygon.utils.area(vertices);
+        centroid.x *= 1 / (6 * area);
+        centroid.y *= 1 / (6 * area);
+        return centroid;
+    },
     /**
      * Calulate the signed polyon area by interpreting the polygon as a matrix
      * and calculating its determinant.
@@ -19362,7 +19412,8 @@ class Delaunay {
  * @modified 2020-08-12 Ported this class from vanilla JS to TypeScript.
  * @modified 2020-08-17 Added some missing type declarations.
  * @modified 2021-01-20 Members `triangles` and `sharedVertex` are now public.
- * @version  1.1.3
+ * @modified 2026-09-15 Added the `VoronoiCell.sharedVertexIndex` attribute.
+ * @version  1.2.0
  *
  * @file VoronoiCell
  * @public
@@ -19378,15 +19429,15 @@ class VoronoiCell {
      * @param {Vertex}     sharedVertex This is the 'center' of the voronoi cell; all triangles must share
      *                                  that vertex.
      **/
-    constructor(triangles, sharedVertex) {
-        if (typeof triangles === 'undefined')
+    constructor(triangles, sharedVertex, sharedVertexIndex) {
+        if (typeof triangles === "undefined")
             triangles = [];
-        if (typeof sharedVertex === 'undefined')
+        if (typeof sharedVertex === "undefined")
             sharedVertex = new Vertex$1(0, 0);
         this.triangles = triangles;
         this.sharedVertex = sharedVertex;
+        this.sharedVertexIndex = sharedVertexIndex;
     }
-    ;
     /**
      * Check if the first and the last triangle in the path are NOT connected.
      *
@@ -19399,7 +19450,6 @@ class VoronoiCell {
         // There must be at least three triangles
         return this.triangles.length < 3 || !this.triangles[0].isAdjacent(this.triangles[this.triangles.length - 1]);
     }
-    ;
     /**
      * Convert this Voronoi cell to a path polygon, consisting of all Voronoi cell corner points.
      *
@@ -19414,7 +19464,32 @@ class VoronoiCell {
     toPolygon() {
         return new Polygon(this.toPathArray(), this.isOpen());
     }
-    ;
+    /**
+     * Get all 'umbrella' triangles for this Voronoi cell.
+     *
+     * The 'umbrella' is that sequence of triangles that covers the whole Voronoi cell and
+     * meet in the cell's centroid.
+     *
+     * @method getUmbrellaTriangles
+     * @instance
+     * @memberof VoronoiCell
+     * @return {Array<Triangle>}
+     **/
+    getUmbrellaTriangles() {
+        var tris = [];
+        // for (var i = 0; i < this.triangles.length; i++) {
+        //   var delaunayTri = this.triangles[i];
+        //   var tri = new Triangle(this.sharedVertex, delaunayTri.b, delaunayTri.c);
+        //   tris.push(tri);
+        // }
+        var vertices = this.toPathArray();
+        var n = vertices.length;
+        for (var i = 0; i < n; i++) {
+            var tri = new Triangle(this.sharedVertex, vertices[i], vertices[(i + 1) % n]);
+            tris.push(tri);
+        }
+        return tris;
+    }
     /**
      * Convert the voronoi cell path data to an SVG polygon data string.
      *
@@ -19429,9 +19504,12 @@ class VoronoiCell {
         if (this.triangles.length == 0)
             return "";
         const arr = this.toPathArray();
-        return arr.map((vert) => { return '' + vert.x + ',' + vert.y; }).join(' ');
+        return arr
+            .map((vert) => {
+            return "" + vert.x + "," + vert.y;
+        })
+            .join(" ");
     }
-    ;
     /**
      * Convert the voronoi cell path data to an array.
      *
@@ -19483,7 +19561,6 @@ class VoronoiCell {
         const openEdgePoint = new Vertex$1(perpendicular.x + (center.x - perpendicular.x) * 1000, perpendicular.y + (center.y - perpendicular.y) * 1000);
         return openEdgePoint;
     }
-    ;
     /**
      * A helper function.
      *
@@ -19507,13 +19584,12 @@ class VoronoiCell {
                 return tri.a;
         }
         // Here:
-        //    tri.c.equals(sharedVertex) 
+        //    tri.c.equals(sharedVertex)
         if (neighbour.a.equals(tri.a) || neighbour.b.equals(tri.a) || neighbour.c.equals(tri.a))
             return tri.b;
         else
             return tri.a;
     }
-    ;
 }
 
 /**
@@ -19521,7 +19597,8 @@ class VoronoiCell {
  * @date     2018-04-07
  * @modified 2018-04-11 Using VoronoiCells now (was array before).
  * @modified 2020-08-15 Ported from vanilla JS to TypeScript.
- * @version  1.0.2
+ * @modified 2026-09-15 Added the `sharedVertexIndex` attribute to each Voronoi cell.
+ * @version  1.1.0
  **/
 /**
  * @classdesc Create the voronoi diagram from the given delaunay triangulation (they are dual graphs).
@@ -19536,13 +19613,12 @@ class delaunay2voronoi {
         this.pointList = pointList;
         this.triangles = triangles;
     }
-    ;
     // +---------------------------------------------------------------------------------
     // | Convert the triangle set to the Voronoi diagram.
     // +-------------------------------
     build() {
         const voronoiDiagram = [];
-        for (var p in this.pointList) {
+        for (var p = 0; p < this.pointList.length; p++) {
             var point = this.pointList[p];
             // Find adjacent triangles for first point
             var adjacentSubset = [];
@@ -19551,12 +19627,12 @@ class delaunay2voronoi {
                     adjacentSubset.push(this.triangles[t]);
             }
             var path = this.subsetToPath(adjacentSubset);
-            if (path) // There may be errors
-                voronoiDiagram.push(new VoronoiCell(path, point));
+            if (path)
+                // There may be errors
+                voronoiDiagram.push(new VoronoiCell(path, point, p));
         }
         return voronoiDiagram;
     }
-    ;
     // +---------------------------------------------------------------------------------
     // | Re-order a tiangle subset so the triangle define a single path.
     // |
@@ -19569,7 +19645,7 @@ class delaunay2voronoi {
     subsetToPath(triangleSet, startPosition, tryOnce) {
         if (triangleSet.length == 0)
             return [];
-        if (typeof startPosition === 'undefined')
+        if (typeof startPosition === "undefined")
             startPosition = 0;
         let t = startPosition;
         const result = [triangleSet[t]];
@@ -19610,8 +19686,7 @@ class delaunay2voronoi {
             return result;
         }
     }
-    ;
-}
+} // END delaunay2voronoi
 
 /**
  * @requires Line