plotboilerplate 1.14.0 → 1.15.0

package/README.md

@@ -483,6 +483,7 @@ vert.listeners.addDragListener(function (e) {
 - [Torben Jansen](https://twitter.com/torbenjansen_ "Torben Jansen") for the [SVG-Arc to elliptic-sector conversion](https://observablehq.com/@toja/ellipse-and-elliptical-arc-conversion "SVG-Arc to elliptic-sector conversion")
 - [3daddict](https://github.com/3daddict) for the [js-stl-parser inspiration](https://github.com/3daddict/js-stl-parser/blob/master/index.js "js-stl-parser inspiration")
 - [jburkardt](https://people.sc.fsu.edu/~jburkardt/data/obj/obj.html "jburkardt") for the obj test files.
+- [@veltman](https://noahveltman.com/) for the awesome [geometric skeletonization article](https://observablehq.com/@veltman/centerline-labeling)
 
 ## Todos
 

package/changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+- 2022-01-10
+  - Added utility function `findInVertexArray`.
+- 2021-12-17
+  - Added the functions `Vertex.lerp` and `Vertex.lerpAbs` for linear interpolations.
+- 2021-12-16
+  - Added the `Polygon.getEvenDistributionPolygon()` function.
+- 2021-12-14
+  - Added the `Polygon.perimeter()` function.
 - 2021-12-01
   - Changed the type of param of `BezierPath.scale` to XYCoords.
   - Added function `BezierPath.scaleXY` for non uniform scaling.

package/dist/index.esm.js

@@ -360,7 +360,8 @@ class VertexListeners {
  * @modified 2021-03-01 Changed the second param `center` in the `rotate` function from Vertex to XYCoords.
  * @modified 2021-12-01 Changed the type of param of `scale` to XYCoords.
  * @modified 2021-12-01 Added function `scaleXY` for non uniform scaling.
- * @version  2.5.0
+ * @modified 2021-12-17 Added the functions `lerp` and `lerpAbs` for linear interpolations.
+ * @version  2.6.0
  *
  * @file Vertex
  * @public
@@ -713,6 +714,43 @@ class Vertex {
     scale(factor, center) {
         return this.scaleXY({ x: factor, y: factor }, center);
     }
+    /**
+     * Perform a linear interpolation towards the given target vertex.
+     * The amount value `t` is relative, `t=0.0` means no change, `t=1.0`
+     * means this point will be moved to the exact target position.
+     *
+     * `t=0.5` will move this point to the middle of the connecting
+     * linear segment.
+     *
+     * @param {XYCoords} target - The target position to lerp this vertex to.
+     * @param {number} t - The relative amount, usually in [0..1], but other values will work, too.
+     * @returns
+     */
+    lerp(target, t) {
+        var diff = this.difference(target);
+        // return new Vertex(this.x + diff.x * t, this.y + diff.y * t);
+        this.x += diff.x * t;
+        this.y += diff.y * t;
+        return this;
+    }
+    /**
+     * Perform a linear interpolation towards the given target vertex (absolute variant).
+     * The amount value `t` is absolute, which means the lerp amount is a direct distance
+     * value. This point will have move the amount of the passed distance `u`.
+     *
+     * @param {XYCoords} target - The target position to lerp this vertex to.
+     * @param {number} t - The absolute move amount to use to lerping.
+     * @returns
+     */
+    lerpAbs(target, u) {
+        var dist = this.distance(target);
+        var diff = this.difference(target);
+        var step = { x: diff.x / dist, y: diff.y / dist };
+        // return new Vertex(this.x + step.x * u, this.y + step.y * u);
+        this.x += step.x * u;
+        this.y += step.y * u;
+        return this;
+    }
     /**
      * This is a vector-like behavior and 'scales' this vertex
      * towards/from a given center by two independent x- and y- scale factors.
@@ -910,7 +948,9 @@ Vertex.utils = {
  * @modified 2021-01-29 Added the `isClockwise` function.
  * @modified 2021-01-29 Added the `area` function.
  * @modified 2021-01-29 Changed the param type for `containsVert` from Vertex to XYCoords.
- * @version 1.7.0
+ * @modified 2021-12-14 Added the `perimeter()` function.
+ * @modified 2021-12-16 Added the `getEvenDistributionPolygon()` function.
+ * @version 1.8.0
  *
  * @file Polygon
  * @public
@@ -941,12 +981,11 @@ class Polygon {
          **/
         this.className = "Polygon";
         this.uid = UIDGenerator.next();
-        if (typeof vertices == 'undefined')
+        if (typeof vertices == "undefined")
             vertices = [];
         this.vertices = vertices;
         this.isOpen = isOpen;
     }
-    ;
     /**
      * Add a vertex to the end of the `vertices` array.
      *
@@ -958,7 +997,6 @@ class Polygon {
     addVertex(vert) {
         this.vertices.push(vert);
     }
-    ;
     /**
      * Get the polygon vertex at the given position (index).
      *
@@ -981,7 +1019,6 @@ class Polygon {
         else
             return this.vertices[index % this.vertices.length];
     }
-    ;
     /**
      * Move the polygon's vertices by the given amount.
      *
@@ -997,7 +1034,6 @@ class Polygon {
         }
         return this;
     }
-    ;
     /**
      * Check if the given vertex is inside this polygon.<br>
      * <br>
@@ -1017,14 +1053,12 @@ class Polygon {
         for (var i = 0, j = this.vertices.length - 1; i < this.vertices.length; j = i++) {
             let xi = this.vertices[i].x, yi = this.vertices[i].y;
             let xj = this.vertices[j].x, yj = this.vertices[j].y;
-            var intersect = ((yi > vert.y) != (yj > vert.y))
-                && (vert.x < (xj - xi) * (vert.y - yi) / (yj - yi) + xi);
+            var intersect = yi > vert.y != yj > vert.y && vert.x < ((xj - xi) * (vert.y - yi)) / (yj - yi) + xi;
             if (intersect)
                 inside = !inside;
         }
         return inside;
     }
-    ;
     /**
      * Calculate the area of the given polygon (unsigned).
      *
@@ -1038,7 +1072,6 @@ class Polygon {
     area() {
         return Polygon.utils.area(this.vertices);
     }
-    ;
     /**
      * Calulate the signed polyon area by interpreting the polygon as a matrix
      * and calculating its determinant.
@@ -1051,7 +1084,6 @@ class Polygon {
     signedArea() {
         return Polygon.utils.signedArea(this.vertices);
     }
-    ;
     /**
      * Get the winding order of this polgon: clockwise or counterclockwise.
      *
@@ -1063,7 +1095,28 @@ class Polygon {
     isClockwise() {
         return Polygon.utils.signedArea(this.vertices) < 0;
     }
-    ;
+    /**
+     * Get the perimeter of this polygon.
+     * The perimeter is the absolute length of the outline.
+     *
+     * If this polygon is open then the last segment (connecting the first and the
+     * last vertex) will be skipped.
+     *
+     * @method perimeter
+     * @instance
+     * @memberof Polygon
+     * @return {number}
+     */
+    perimeter() {
+        let length = 0;
+        for (var i = 1; i < this.vertices.length; i++) {
+            length += this.vertices[i - 1].distance(this.vertices[i]);
+        }
+        if (!this.isOpen && this.vertices.length > 1) {
+            length += this.vertices[0].distance(this.vertices[this.vertices.length - 1]);
+        }
+        return length;
+    }
     /**
      * Scale the polygon relative to the given center.
      *
@@ -1076,14 +1129,13 @@ class Polygon {
      **/
     scale(factor, center) {
         for (var i in this.vertices) {
-            if (typeof this.vertices[i].scale == 'function')
+            if (typeof this.vertices[i].scale == "function")
                 this.vertices[i].scale(factor, center);
             else
-                console.log('There seems to be a null vertex!', this.vertices[i]);
+                console.log("There seems to be a null vertex!", this.vertices[i]);
         }
         return this;
     }
-    ;
     /**
      * Rotate the polygon around the given center.
      *
@@ -1100,7 +1152,52 @@ class Polygon {
         }
         return this;
     }
-    ;
+    /**
+     * Convert this polygon into a new polygon with n evenly distributed vertices.
+     *
+     * @param {number} pointCount - Must not be negative.
+     */
+    getEvenDistributionPolygon(pointCount) {
+        if (pointCount <= 0) {
+            throw new Error("pointCount must be larger than zero; is " + pointCount + ".");
+        }
+        const result = new Polygon([], this.isOpen);
+        if (this.vertices.length === 0) {
+            return result;
+        }
+        // Fetch and add the start point from the source polygon
+        let polygonPoint = new Vertex(this.vertices[0]);
+        result.vertices.push(polygonPoint);
+        if (this.vertices.length === 1) {
+            return result;
+        }
+        const perimeter = this.perimeter();
+        const stepSize = perimeter / pointCount;
+        const n = this.vertices.length;
+        let polygonIndex = 1;
+        let nextPolygonPoint = new Vertex(this.vertices[1]);
+        let segmentLength = polygonPoint.distance(nextPolygonPoint);
+        let loopMax = this.isOpen ? n : n + 1;
+        let curSegmentU = stepSize;
+        var i = 1;
+        while (i < pointCount && polygonIndex < loopMax) {
+            // Check if next eq point is inside this segment
+            if (curSegmentU < segmentLength) {
+                let newPoint = polygonPoint.clone().lerpAbs(nextPolygonPoint, curSegmentU);
+                result.vertices.push(newPoint);
+                curSegmentU += stepSize;
+                i++;
+            }
+            else {
+                polygonIndex++;
+                polygonPoint = nextPolygonPoint;
+                nextPolygonPoint = new Vertex(this.vertices[polygonIndex % n]);
+                curSegmentU = curSegmentU - segmentLength;
+                segmentLength = polygonPoint.distance(nextPolygonPoint);
+            }
+        }
+        return result;
+    }
     /**
      * Get the bounding box (bounds) of this polygon.
      *
@@ -1112,7 +1209,6 @@ class Polygon {
     getBounds() {
         return Bounds.computeFromVertices(this.vertices);
     }
-    ;
     /**
      * Convert this polygon to a sequence of quadratic Bézier curves.<br>
      * <br>
@@ -1144,7 +1240,6 @@ class Polygon {
         }
         return qbezier;
     }
-    ;
     /**
      * Convert this polygon to a quadratic bezier curve, represented as an SVG data string.
      *
@@ -1157,13 +1252,12 @@ class Polygon {
         var qdata = this.toQuadraticBezierData();
         if (qdata.length == 0)
             return "";
-        var buffer = ['M ' + qdata[0].x + ' ' + qdata[0].y];
+        var buffer = ["M " + qdata[0].x + " " + qdata[0].y];
         for (var i = 1; i < qdata.length; i += 2) {
-            buffer.push('Q ' + qdata[i].x + ' ' + qdata[i].y + ', ' + qdata[i + 1].x + ' ' + qdata[i + 1].y);
+            buffer.push("Q " + qdata[i].x + " " + qdata[i].y + ", " + qdata[i + 1].x + " " + qdata[i + 1].y);
         }
-        return buffer.join(' ');
+        return buffer.join(" ");
     }
-    ;
     /**
      * Convert this polygon to a sequence of cubic Bézier curves.<br>
      * <br>
@@ -1180,7 +1274,7 @@ class Polygon {
      * @memberof Polygon
      **/
     toCubicBezierData(threshold) {
-        if (typeof threshold == 'undefined')
+        if (typeof threshold == "undefined")
             threshold = 1.0;
         if (this.vertices.length < 3)
             return [];
@@ -1204,7 +1298,6 @@ class Polygon {
         }
         return cbezier;
     }
-    ;
     /**
      * Convert this polygon to a cubic bezier curve, represented as an SVG data string.
      *
@@ -1217,13 +1310,23 @@ class Polygon {
         var qdata = this.toCubicBezierData(threshold);
         if (qdata.length == 0)
             return "";
-        var buffer = ['M ' + qdata[0].x + ' ' + qdata[0].y];
+        var buffer = ["M " + qdata[0].x + " " + qdata[0].y];
         for (var i = 1; i < qdata.length; i += 3) {
-            buffer.push('C ' + qdata[i].x + ' ' + qdata[i].y + ', ' + qdata[i + 1].x + ' ' + qdata[i + 1].y + ', ' + qdata[i + 2].x + ' ' + qdata[i + 2].y);
-        }
-        return buffer.join(' ');
+            buffer.push("C " +
+                qdata[i].x +
+                " " +
+                qdata[i].y +
+                ", " +
+                qdata[i + 1].x +
+                " " +
+                qdata[i + 1].y +
+                ", " +
+                qdata[i + 2].x +
+                " " +
+                qdata[i + 2].y);
+        }
+        return buffer.join(" ");
     }
-    ;
     /**
      * Convert this polygon to a cubic bezier path instance.
      *
@@ -1242,7 +1345,6 @@ class Polygon {
         }
         return BezierPath.fromArray(pathdata);
     }
-    ;
     /**
      * Create an SVG representation of this polygon.
      *
@@ -1256,29 +1358,28 @@ class Polygon {
     toSVGString(options) {
         options = options || {};
         var buffer = [];
-        buffer.push('<path');
+        buffer.push("<path");
         if (options.className)
             buffer.push(' class="' + options.className + '"');
         buffer.push(' d="');
         if (this.vertices.length > 0) {
-            buffer.push('M ');
+            buffer.push("M ");
             buffer.push(this.vertices[0].x.toString());
-            buffer.push(' ');
+            buffer.push(" ");
             buffer.push(this.vertices[0].y.toString());
             for (var i = 1; i < this.vertices.length; i++) {
-                buffer.push(' L ');
+                buffer.push(" L ");
                 buffer.push(this.vertices[i].x.toString());
-                buffer.push(' ');
+                buffer.push(" ");
                 buffer.push(this.vertices[i].y.toString());
             }
             if (!this.isOpen) {
-                buffer.push(' Z');
+                buffer.push(" Z");
             }
         }
         buffer.push('" />');
-        return buffer.join('');
+        return buffer.join("");
     }
-    ;
 }
 Polygon.utils = {
     /**
@@ -1298,8 +1399,8 @@ Polygon.utils = {
             const addY = vertices[(i + 1) % l].y;
             const subX = vertices[(i + 1) % l].x;
             const subY = vertices[i].y;
-            total += (addX * addY * 0.5);
-            total -= (subX * subY * 0.5);
+            total += addX * addY * 0.5;
+            total -= subX * subY * 0.5;
         }
         return Math.abs(total);
     },
@@ -10332,8 +10433,9 @@ class PlotBoilerplate {
      **/
     getVertexNear(pixelPosition, pixelTolerance) {
         var p = this.locatePointNear(this.transformMousePosition(pixelPosition.x, pixelPosition.y), pixelTolerance / Math.min(this.config.cssScaleX, this.config.cssScaleY));
-        if (p && p.typeName == "vertex")
+        if (p && p.typeName == "vertex") {
             return this.vertices[p.vindex];
+        }
         return undefined;
     }
     /**