plotboilerplate 1.25.0 → 1.27.0

package/README.md

@@ -159,6 +159,8 @@ A full working demo repository about the [Usage with Typescript is here](https:/
 
 [Basic Setup in a Codepen.io demo](https://codepen.io/ikaroskappler/pen/ZEjamVb)
 
+[Voronoi Diagram in a Codepen.io demo](https://codepen.io/ikaroskappler/pen/RNREmje)
+
 ### Screenshot
 
 ![Simple Demo](https://plotboilerplate.io/repo/screenshots/screenshot-20190220_3_simpledemo.png "The simple demo")
@@ -576,6 +578,7 @@ new MouseHandler(document.getElementById("mycanvas"))
 - [Cuixiping](https://stackoverflow.com/users/988089/cuixiping) for the helpful insights on cubic Bézier bounds at [Stackoverflow](https://stackoverflow.com/questions/24809978/calculating-the-bounding-box-of-cubic-bezier-curve)
 - Thanks to Ana Tudor for the Multi-Range-Slider tutorial: https://css-tricks.com/multi-thumb-sliders-particular-two-thumb-case/
 - Thanks to Dean Taylor for the css linear gradient parser howto: https://stackoverflow.com/questions/20215440/parse-css-gradient-rule-with-javascript-regex
+- Thanks to Stefan Gustavson (stegu@itn.liu.se) for the Perlin noise on example C code (https://github.com/MethanePowered/PerlinNoise). And for Peter Eastman (peastman@drizzle.stanford.edu) for Perlin noise optimizations.
 
 ## Todos
 

package/dist/index.esm.js

@@ -3584,7 +3584,11 @@ Polygon.utils = {
  * @modified 2025-04-18 Change parameter type in `Bounds.computeFromVertices` from `Vertex` to more general `XYCoords`.
  * @modified 2025-04-19 Added methods to `Bounds` class: `getNorthPoint`, `getSouthPoint`, `getEastPoint` and `getWestPoint`.
  * @modified 2025-04-26 Added static method `Bounds.computeFromBoundsSet` to calculate containing bounds for a set of bounding boxes.
- * @version  1.8.0
+ * @modified 2025-10-17 Added the methods `Bounds.getSouthWestPoint`, `getNorthWestPoint`, `getNorthEastPoint` and `getSouthEastPoint`.
+ * @modified 2025-10-18 Added method `Bounds.containsVert(XYCoords)`.
+ * @modified 2025-10-28 Added the `Bounds.getWidth()` and `Bounds.getHeight()`.
+ * @modified 2025-11-12 Added the `Bounds.getMoved()` method.
+ * @version  1.11.0
  **/
 /**
  * @classdesc A bounds class with min and max values. Implementing IBounds.
@@ -3608,6 +3612,35 @@ class Bounds {
         this.width = max.x - min.x;
         this.height = max.y - min.y;
     }
+    /**
+     * Check if the given vertex is inside this bounds.
+     *
+     * @method containsVert
+     * @param {XYCoords} vert - The vertex to check.
+     * @return {boolean} True if the passed vertex is inside this bounds.
+     * @instance
+     * @memberof Bounds
+     **/
+    containsVert(vert) {
+        return this.min.x <= vert.x && vert.x < this.max.x && this.min.y <= vert.y && vert.y < this.max.y;
+    }
+    getWidth() {
+        return this.max.x - this.min.x;
+    }
+    getHeight() {
+        return this.max.y - this.min.y;
+    }
+    getScaled(scaleFactor) {
+        const center = this.getCenter();
+        const newMin = new Vertex(this.min).scale(scaleFactor, center);
+        const newMax = new Vertex(this.max).scale(scaleFactor, center);
+        return new Bounds(newMin, newMax);
+    }
+    getMoved(moveAmount) {
+        const newMin = new Vertex(this.min).move(moveAmount);
+        const newMax = new Vertex(this.max).move(moveAmount);
+        return new Bounds(newMin, newMax);
+    }
     /**
      * Get the center point of the north bound.
      *
@@ -3619,7 +3652,6 @@ class Bounds {
     getNorthPoint() {
         return new Vertex(this.min.x + this.width / 2.0, this.min.y);
     }
-    ;
     /**
      * Get the center point of the south bound.
      *
@@ -3631,31 +3663,72 @@ class Bounds {
     getSouthPoint() {
         return new Vertex(this.min.x + this.width / 2.0, this.max.y);
     }
-    ;
     /**
-    * Get the center point of the west bound.
-    *
-    * @method getWestPoint
-    * @instance
-    * @memberof Bounds
-    * @return {Vertex} The "westhmost" centered point of this bounding box.
-    */
+     * Get the center point of the west bound.
+     *
+     * @method getWestPoint
+     * @instance
+     * @memberof Bounds
+     * @return {Vertex} The "westhmost" centered point of this bounding box.
+     */
     getWestPoint() {
         return new Vertex(this.min.x, this.min.y + this.height / 2.0);
     }
-    ;
     /**
-    * Get the center point of the east bound.
-    *
-    * @method getEastPoint
-    * @instance
-    * @memberof Bounds
-    * @return {Vertex} The "easthmost" centered point of this bounding box.
-    */
+     * Get the center point of the east bound.
+     *
+     * @method getEastPoint
+     * @instance
+     * @memberof Bounds
+     * @return {Vertex} The "easthmost" centered point of this bounding box.
+     */
     getEastPoint() {
         return new Vertex(this.max.x, this.min.y + this.height / 2.0);
     }
-    ;
+    /**
+     * Get the upper left corner point these bounds box.
+     *
+     * @method getNorthWestPoint
+     * @instance
+     * @memberof Bounds
+     * @return {Vertex} The "northwestmost" point of this bounding box.
+     */
+    getNorthWestPoint() {
+        return new Vertex(this.min.x, this.min.y);
+    }
+    /**
+     * Get the upper right corner point these bounds box.
+     *
+     * @method getNorthEastPoint
+     * @instance
+     * @memberof Bounds
+     * @return {Vertex} The "northeastmost" point of this bounding box.
+     */
+    getNorthEastPoint() {
+        return new Vertex(this.max.x, this.min.y);
+    }
+    /**
+     * Get the lower right corner point these bounds box.
+     *
+     * @method getSouthEastPoint
+     * @instance
+     * @memberof Bounds
+     * @return {Vertex} The "southeastmost" point of this bounding box.
+     */
+    getSouthEastPoint() {
+        return new Vertex(this.max.x, this.max.y);
+    }
+    /**
+     * Get the lower left corner point these bounds box.
+     *
+     * @method getSouthWestPoint
+     * @instance
+     * @memberof Bounds
+     * @return {Vertex} The "southwestmost" point of this bounding box.
+     */
+    getSouthWestPoint() {
+        return new Vertex(this.min.x, this.max.y);
+    }
     /**
      * Convert this rectangular bounding box to a polygon with four vertices.
      *
@@ -3766,16 +3839,16 @@ class Bounds {
         return new Bounds(new Vertex(xMin, yMin), new Vertex(xMax, yMax));
     }
     /**
-    * Compute the minimal bounding box for a given set of existing bounding boxes.
-    *
-    * An empty vertex array will return an empty bounding box located at (0,0).
-    *
-    * @static
-    * @method computeFromBoundsSet
-    * @memberof Bounds
-    * @param {Array<IBounds>} boundingBoxes - The set of existing bounding boxes to get the containing bounding box for.
-    * @return The minimal Bounds for the given bounds instances.
-    **/
+     * Compute the minimal bounding box for a given set of existing bounding boxes.
+     *
+     * An empty vertex array will return an empty bounding box located at (0,0).
+     *
+     * @static
+     * @method computeFromBoundsSet
+     * @memberof Bounds
+     * @param {Array<IBounds>} boundingBoxes - The set of existing bounding boxes to get the containing bounding box for.
+     * @return The minimal Bounds for the given bounds instances.
+     **/
     static computeFromBoundsSet(boundingBoxes) {
         if (boundingBoxes.length == 0) {
             return new Bounds(new Vertex(0, 0), new Vertex(0, 0));
@@ -6223,6 +6296,32 @@ class CircleSector {
         });
     }
     //--- END --- Implement interface `Intersectable`
+    describeSVGPath(options) {
+        // const buffer: SVGPathParams = [];
+        // const start = this.getStartPoint();
+        // const end = this.getEndPoint();
+        // //   describeSVGArc
+        // //   x: number,
+        // //   y: number,
+        // //   radius: number,
+        // //   startAngle: number,
+        // //   endAngle: number,
+        // //   options?: { moveToStart: boolean }
+        // // ): SVGPathParams => {
+        // var arcRotation = 0.0;
+        // var largeArcFlag = 1;
+        // var sweepFlag = 0;
+        // if (options && options.moveToStart) {
+        //   buffer.push("M", start.x, start.y);
+        // }
+        // buffer.push("A", cSector.circle.radius, cSector.circle.radius, arcRotation, largeArcFlag, sweepFlag, end.x, end.y);
+        // return buffer;
+        const arc = CircleSector.circleSectorUtils.describeSVGArc(this.circle.center.x, // end.x,
+        this.circle.center.y, // end.y,
+        this.circle.radius, this.startAngle, this.endAngle, options // options?: { moveToStart: boolean }
+        );
+        return arc;
+    }
     /**
      * 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
@@ -6262,8 +6361,9 @@ CircleSector.circleSectorUtils = {
      * @return [ 'A', radiusx, radiusy, rotation=0, largeArcFlag=1|0, sweepFlag=0, endx, endy ]
      */
     describeSVGArc: (x, y, radius, startAngle, endAngle, options) => {
-        if (typeof options === "undefined")
+        if (typeof options === "undefined") {
             options = { moveToStart: true };
+        }
         const end = CircleSector.circleSectorUtils.polarToCartesian(x, y, radius, endAngle);
         const start = CircleSector.circleSectorUtils.polarToCartesian(x, y, radius, startAngle);
         // Split full circles into two halves.
@@ -6343,7 +6443,11 @@ CircleSector.circleSectorUtils = {
  * @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.
  * @modified 2024-07-24 Caching custom style defs in a private buffer variable.
- * @version  1.6.10
+ * @modified 2025-11-14 Fixing a bug in the CSS `mix-blend-mode` property handling (caused a runtime error).
+ * @modified 2026-01-04 Adding `lineJoin` attribute to the methods' `StrokeOptions` param.
+ * @modified 2026-01-04 Fixing missing `strokeOptions` param in the `drawutilssvg.polygon` method.
+ * @modified 2026-03-18 Adding `isOpen` parameter to `cubicBezierPath` draw method.
+ * @version  1.7.0
  **/
 const RAD_TO_DEG = 180 / Math.PI;
 /**
@@ -6541,8 +6645,13 @@ class drawutilssvg {
             node = this.createSVGNode(nodeName);
         }
         if (this.drawlibConfiguration.blendMode) {
-            // node.style["mix-blend-mode"] = this.drawlibConfiguration.blendMode;
-            node.style["mix-blend-mode"](this.drawlibConfiguration.blendMode);
+            const blendMode = node.style["mix-blend-mode"];
+            if (typeof blendMode === "function") {
+                blendMode(this.drawlibConfiguration.blendMode);
+            }
+            else {
+                node.style["mix-blend-mode"] = this.drawlibConfiguration.blendMode;
+            }
         }
         // if (this.lineDashEnabled && this.lineDash && this.lineDash.length > 0 && drawutilssvg.nodeSupportsLineDash(nodeName)) {
         //   node.setAttribute("stroke-dasharray", this.lineDash.join(" "));
@@ -6738,6 +6847,7 @@ class drawutilssvg {
      * @param {StrokeOptions=} strokeOptions -
      */
     applyStrokeOpts(node, strokeOptions) {
+        // Set line dash options?
         if (strokeOptions &&
             strokeOptions.dashArray &&
             strokeOptions.dashArray.length > 0 &&
@@ -6751,6 +6861,10 @@ class drawutilssvg {
                 node.setAttribute("stroke-dashoffset", `${strokeOptions.dashOffset * this.scale.x}`);
             }
         }
+        // Set line join option?
+        if (strokeOptions && strokeOptions.lineJoin && drawutilssvg.nodeSupportsLineJoin(node.tagName)) {
+            node.setAttribute("stroke-linejoin", strokeOptions.lineJoin);
+        }
     }
     _x(x) {
         return this.offset.x + this.scale.x * x;
@@ -7000,12 +7114,12 @@ class drawutilssvg {
      * @param {string} color - The CSS colot to draw the path with.
      * @param {number=1} lineWidth - (optional) The line width to use.
      * @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
-     *
+     * @param {boolean} isOpen - (optional) Set to tur if the path should not be closed.
      * @return {void}
      * @instance
      * @memberof drawutilssvg
      */
-    cubicBezierPath(path, color, lineWidth, strokeOptions) {
+    cubicBezierPath(path, color, lineWidth, strokeOptions, isOpen) {
         const node = this.makeNode("path");
         this.applyStrokeOpts(node, strokeOptions);
         if (!path || path.length == 0) {
@@ -7023,6 +7137,9 @@ class drawutilssvg {
             endPoint = path[i + 2];
             d.push("C", this._x(startControlPoint.x), this._y(startControlPoint.y), this._x(endControlPoint.x), this._y(endControlPoint.y), this._x(endPoint.x), this._y(endPoint.y));
         }
+        if (!isOpen) {
+            d.push("Z");
+        }
         node.setAttribute("d", d.join(" "));
         return this._bindFillDraw(node, "cubicBezierPath", color, lineWidth || 1);
     }
@@ -7459,12 +7576,13 @@ class drawutilssvg {
      * @param {Polygon} polygon - The polygon to draw.
      * @param {string} color - The CSS color to draw the polygon with.
      * @param {number=} lineWidth - (optional) The line width to use; default is 1.
+     * @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
      * @return {void}
      * @instance
      * @memberof drawutilssvg
      */
-    polygon(polygon, color, lineWidth) {
-        return this.polyline(polygon.vertices, polygon.isOpen, color, lineWidth);
+    polygon(polygon, color, lineWidth, strokeOptions) {
+        return this.polyline(polygon.vertices, polygon.isOpen, color, lineWidth, strokeOptions);
     }
     /**
      * Draw a polygon line (alternative function to the polygon).
@@ -7842,6 +7960,9 @@ class drawutilssvg {
     static nodeSupportsLineDash(nodeName) {
         return ["line", "path", "circle", "ellipse", "rectangle", "rect"].includes(nodeName);
     }
+    static nodeSupportsLineJoin(nodeName) {
+        return ["line", "path", "circle", "ellipse", "rectangle", "rect"].includes(nodeName);
+    }
     /**
      * Creates a basic <line> node with start and end coordinates. The created node will not
      * be bound to any root node.
@@ -8026,7 +8147,9 @@ drawutilssvg.HEAD_XML = [
  * @modified 2023-09-30 Adding `strokeOptions` param to these draw function: line, arrow, cubicBezierArrow, cubicBezier, cubicBezierPath, circle, circleArc, ellipse, square, rect, polygon, polyline.
  * @modified 2023-10-07 Adding the optional `arrowHeadBasePositionBuffer` param to the arrowHead(...) method.
  * @modified 2024-09-13 Remoed the scaling of `lineWidth` in the `polygon` and `polyline` methods. This makes no sense here and doesn't match up with the behavior of other line functions.
- * @version  1.13.0
+ * @modified 2026-01-04 Adding `lineJoin` attribute to the `StrokeOptions`.
+ * @modified 2026-03-18 Adding `isOpen` parameter to `cubicBezierPath` draw method.
+ * @version  1.14.0
  **/
 // Todo: rename this class to Drawutils?
 /**
@@ -8059,13 +8182,14 @@ class drawutils {
      * @param {StrokeOptions=} strokeOptions -
      */
     applyStrokeOpts(strokeOptions) {
-        var _a, _b;
+        var _a, _b, _c;
         this.ctx.setLineDash(((_a = strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.dashArray) !== null && _a !== void 0 ? _a : []).map((dashArrayElem) => {
             // Note assume scale.x === scale.y
             // Invariant scale makes funny stuff anyway.
             return dashArrayElem * this.scale.x;
         }));
         this.ctx.lineDashOffset = ((_b = strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.dashOffset) !== null && _b !== void 0 ? _b : 0) * this.scale.x;
+        this.ctx.lineJoin = (_c = strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.lineJoin) !== null && _c !== void 0 ? _c : null;
     }
     // +---------------------------------------------------------------------------------
     // | This is the final helper function for drawing and filling stuff. It is not
@@ -8511,7 +8635,7 @@ class drawutils {
      * @instance
      * @memberof drawutils
      */
-    cubicBezierPath(path, color, lineWidth, strokeOptions) {
+    cubicBezierPath(path, color, lineWidth, strokeOptions, isOpen) {
         if (!path || path.length == 0) {
             return;
         }
@@ -8529,7 +8653,9 @@ class drawutils {
             endPoint = path[i + 2];
             this.ctx.bezierCurveTo(this.offset.x + startControlPoint.x * this.scale.x, this.offset.y + startControlPoint.y * this.scale.y, this.offset.x + endControlPoint.x * this.scale.x, this.offset.y + endControlPoint.y * this.scale.y, this.offset.x + endPoint.x * this.scale.x, this.offset.y + endPoint.y * this.scale.y);
         }
-        this.ctx.closePath();
+        if (!isOpen) {
+            this.ctx.closePath();
+        }
         this.ctx.lineWidth = lineWidth || 1;
         this._fillOrDraw(color);
         this.ctx.restore();
@@ -9131,6 +9257,7 @@ drawutils.helpers = {
  * @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-09-29 Added the `lineDashes` attribute.
+ * @modified 2026-03-18 Adding `isOpen` parameter to `cubicBezierPath` draw method.
  * @version  0.0.10
  **/
 /**
@@ -9443,7 +9570,7 @@ class drawutilsgl {
      * @instance
      * @memberof drawutils
      */
-    cubicBezierPath(path, color, lineWidth) {
+    cubicBezierPath(path, color, lineWidth, strokeOptions, isOpen) {
         // NOT YET IMPLEMENTED
     }
     /**
@@ -12389,8 +12516,9 @@ VEllipseSector.ellipseSectorUtils = {
  * @modified 2025-05-07 Added `PlogBoilerplate.addContentChangeListener` and `.removeContentChangeListener`.
  * @modified 2025-05-07 Moving full vectors now by default when vector point a is moved.
  * @modified 2025-05-20 Applying `lineWith` parameter in the draw routine for vectors (had been missing).
+ * @modified 2026-03-13 Changed visibility of `setZoom` and `setOffset` to public. There was no good reason to have the private.
  *
- * @version  1.21.1
+ * @version  1.21.2
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.