plotboilerplate 1.20.0 → 1.20.2

package/README.md

@@ -153,6 +153,10 @@ For a guide of how to [Getting Started click here](https://github.com/IkarosKapp
 
 A full working demo repository about the [Usage with Typescript is here](https://github.com/IkarosKappler/plotboilerplate-typescript-example "usage with Typescript is here").
 
+### Codepen Demos
+
+[Basic Setup in a Codepen.io demo](https://codepen.io/ikaroskappler/pen/ZEjamVb)
+
 ### Screenshot
 
 ![Simple Demo](https://plotboilerplate.io/repo/screenshots/screenshot-20190220_3_simpledemo.png "The simple demo")
@@ -354,6 +358,14 @@ var pb = new PlotBoilerplate({
   //   Indicates if the application should handle mouse wheelevents for you.
   enableMouseWheel: true,
 
+  // boolean (default true)
+  //    Use this to disable panning completely.
+  enablePan: true,
+
+  // boolean (default true)
+  //    Use this to disable zooming completely.
+  enableZoom: true,
+
   // Indicates if the SVG export should be enabled (default is true).
   enableSVGExport: true,
 
@@ -542,6 +554,8 @@ new MouseHandler(document.getElementById("mycanvas"))
 - [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)
 - [girih-tiles-spatial.jpg from Lund University, Architecture, Spatial Experiments, 2016.](https://spatialexperiments.wordpress.com/2016/09/19/islamic-geometry/girih-tiles-4/)
+- [Josh Frank's regular expression for parsing SVG path data.](https://javascript.plainenglish.io/june-3-parsing-and-validating-svg-paths-with-regex-7bd0e245115)
+- [Rick Moore for the useful javascript-synthesizer howto](https://medium.com/geekculture/building-a-modular-synth-with-web-audio-api-and-javascript-d38ccdeca9ea)
 
 ## Todos
 
@@ -554,3 +568,6 @@ new MouseHandler(document.getElementById("mycanvas"))
 - The minifid BBTree and BBTreeCollection files do not export anything. The un-minified does. Why that?
 - Arcs and ellipses break when non-uniform scaling (scalex!=scaley) is applied. Convert them to Bézier curves before drawing.
 - Currently no more known. Please report bugs.
+
+Oh look, a cat
+ᓚᘏᗢ

package/dist/index.esm.js

@@ -3910,8 +3910,7 @@ class BezierPath {
     static fromReducedList(pointArray, adjustCircular) {
         // Convert to object
         var bezierPath = new BezierPath(null); // No points yet
-        // var firstStartPoint: Vertex;
-        var startPoint;
+        var startPoint = new Vertex();
         var startControlPoint;
         var endControlPoint;
         var endPoint;
@@ -3933,7 +3932,7 @@ class BezierPath {
             startPoint = endPoint;
             i += 6;
         } while (i + 2 < pointArray.length);
-        bezierPath.adjustCircular = adjustCircular;
+        bezierPath.adjustCircular = adjustCircular !== null && adjustCircular !== void 0 ? adjustCircular : false;
         if (adjustCircular) {
             bezierPath.bezierCurves[bezierPath.bezierCurves.length - 1].endPoint = bezierPath.bezierCurves[0].startPoint;
         }
@@ -4475,7 +4474,9 @@ CircleSector.circleSectorUtils = {
  * @modified 2022-03-26 Added the `texturedPoly` function to draw textures polygons.
  * @modified 2022-07-26 Adding `alpha` to the `image(...)` function.
  * @modified 2022-11-10 Tweaking some type issues.
- * @version  1.6.2
+ * @modified 2023-02-04 Fixed a typo in the CSS classname for cubic Bézier paths: cubicBezier (was cubierBezier).
+ * @modified 2023-02-10 The methods `setCurrentClassName` and `setCurrentId` also accept `null` now.
+ * @version  1.6.4
  **/
 const RAD_TO_DEG = 180 / Math.PI;
 /**
@@ -4507,7 +4508,7 @@ class drawutilssvg {
         this.offset = new Vertex(0, 0).set(offset);
         this.scale = new Vertex(1, 1).set(scale);
         this.fillShapes = fillShapes;
-        this.isSecondary = isSecondary;
+        this.isSecondary = Boolean(isSecondary);
         this.drawlibConfiguration = {};
         this.cache = new Map();
         this.setSize(canvasSize);
@@ -4537,6 +4538,8 @@ class drawutilssvg {
         // Which default styles to add? -> All from the DrawConfig.
         // Compare with DrawConfig interface
         const keys = {
+            // "bezier": "CubicBezierCurve", // TODO: is this correct?
+            "bezierPath": "BezierPath",
             "polygon": "Polygon",
             "triangle": "Triangle",
             "ellipse": "Ellipse",
@@ -4602,6 +4605,9 @@ class drawutilssvg {
      * @param {string} nodeName - The expected node name.
      */
     findElement(key, nodeName) {
+        if (!key) {
+            return null;
+        }
         var node = this.cache.get(key);
         if (node && node.nodeName.toUpperCase() === nodeName.toUpperCase()) {
             this.cache.delete(key);
@@ -4676,8 +4682,8 @@ class drawutilssvg {
         else {
             node.setAttribute("class", className);
         }
-        node.setAttribute("fill", this.fillShapes ? color : "none");
-        node.setAttribute("stroke", this.fillShapes ? "none" : color);
+        node.setAttribute("fill", this.fillShapes && color ? color : "none");
+        node.setAttribute("stroke", this.fillShapes ? "none" : color || "none");
         node.setAttribute("stroke-width", `${lineWidth || 1}`);
         if (this.curId) {
             node.setAttribute("id", `${this.curId}`); // Maybe React-style 'key' would be better?
@@ -4728,7 +4734,7 @@ class drawutilssvg {
      *
      * @name setCurrentId
      * @method
-     * @param {UID} uid - A UID identifying the currently drawn element(s).
+     * @param {UID|null} uid - A UID identifying the currently drawn element(s).
      * @instance
      * @memberof drawutilssvg
      **/
@@ -4741,7 +4747,7 @@ class drawutilssvg {
      *
      * @name setCurrentClassName
      * @method
-     * @param {string} className - A class name for further custom use cases.
+     * @param {string|null} className - A class name for further custom use cases.
      * @instance
      * @memberof drawutilssvg
      **/
@@ -4991,7 +4997,7 @@ class drawutilssvg {
             this._y(endPoint.y)
         ];
         node.setAttribute("d", d.join(" "));
-        return this._bindFillDraw(node, "cubierBezier", color, lineWidth);
+        return this._bindFillDraw(node, "cubicBezier", color, lineWidth);
     }
     /**
      * Draw the given (cubic) Bézier path.
@@ -5843,7 +5849,8 @@ drawutilssvg.HEAD_XML = [
  * @modified 2022-08-23 Fixed a type issue in the `polyline` function.
  * @modified 2022-08-23 Fixed a type issue in the `setConfiguration` function.
  * @modified 2022-08-23 Fixed a type issue in the `path` function.
- * @version  1.12.3
+ * @modified 2023-02-10 The methods `setCurrentClassName` and `setCurrentId` also accept `null` now.
+ * @version  1.12.4
  **/
 // Todo: rename this class to Drawutils?
 /**
@@ -5905,7 +5912,7 @@ class drawutils {
      *
      * @name setCurrentId
      * @method
-     * @param {UID} uid - A UID identifying the currently drawn element(s).
+     * @param {UID|null} uid - A UID identifying the currently drawn element(s).
      **/
     setCurrentId(uid) {
         // NOOP
@@ -5916,7 +5923,7 @@ class drawutils {
      *
      * @name setCurrentClassName
      * @method
-     * @param {string} className - A class name for further custom use cases.
+     * @param {string|null} className - A class name for further custom use cases.
      **/
     setCurrentClassName(className) {
         // NOOP
@@ -6782,7 +6789,8 @@ drawutils.helpers = {
  * @modified 2022-02-03 Added the `cross(...)` function.
  * @modified 2022-03-27 Added the `texturedPoly` function.
  * @modified 2022-07-26 Adding `alpha` to the `image(...)` function.
- * @version  0.0.8
+ * @modified 2023-02-10 The methods `setCurrentClassName` and `setCurrentId` also accept `null` now.
+ * @version  0.0.9
  **/
 /**
  * @classdesc A wrapper class for basic drawing operations. This is the WebGL
@@ -6800,7 +6808,7 @@ class drawutilsgl {
      *
      * @constructor
      * @name drawutils
-     * @param {WebGLRenderingContext} context - The drawing context.
+     * @param {WebGLRenderingContext|null} context - The drawing context.
      * @param {boolean} fillShaped - Indicates if the constructed drawutils should fill all drawn shapes (if possible).
      **/
     constructor(context, fillShapes) {
@@ -6882,7 +6890,7 @@ class drawutilsgl {
      *
      * @name setCurrentId
      * @method
-     * @param {UID} uid - A UID identifying the currently drawn element(s).es.
+     * @param {UID|null} uid - A UID identifying the currently drawn element(s).es.
      **/
     setCurrentId(uid) {
         // NOOP
@@ -6894,7 +6902,7 @@ class drawutilsgl {
      *
      * @name setCurrentClassName
      * @method
-     * @param {string} className - A class name for further custom use cases.
+     * @param {string|null} className - A class name for further custom use cases.
      **/
     setCurrentClassName(className) {
         // NOOP
@@ -7823,6 +7831,7 @@ class Triangle {
         const lineC = new Line(this.c, this.a);
         const bisector1 = geomutils.nsectAngle(this.b, this.a, this.c, 2)[0]; // bisector of first angle (in b)
         const bisector2 = geomutils.nsectAngle(this.c, this.b, this.a, 2)[0]; // bisector of second angle (in c)
+        // Cast to non-null here because we know there _is_ an intersection
         const intersection = bisector1.intersection(bisector2);
         // Find the closest points on one of the polygon lines (all have same distance by construction)
         const circleIntersA = lineA.getClosestPoint(intersection);
@@ -10146,7 +10155,11 @@ VEllipseSector.ellipseSectorUtils = {
  * @modified 2022-10-25 Added the `origin` to the default draw config.
  * @modified 2022-11-06 Adding an XML declaration to the SVG export routine.
  * @modified 2022-11-23 Added the `drawRaster` (default=true) option to the config/drawconfig.
- * @version  1.17.0
+ * @modified 2023-02-04 Fixed a bug in the `drawDrawable` function; fill's current classname was not set.
+ * @modified 2023-02-10 Fixing an issue of the `style.position` setting when `fitToParent=true` from `absolute` to `static` (default).
+ * @modified 2023-02-10 Cleaning up most type errors in the main class (mostly null checks).
+ * @modified 2023-02-10 Adding `enableZoom` and `enablePan` (both default true) to have the option to disable these functions.
+ * @version  1.17.2
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.
@@ -10236,6 +10249,8 @@ class PlotBoilerplate {
      * @param {boolean=} [config.enableTouch=true] - Indicates if the application should handle touch events for you.
      * @param {boolean=} [config.enableKeys=true] - Indicates if the application should handle key events for you.
      * @param {boolean=} [config.enableMouseWheel=true] - Indicates if the application should handle mouse wheel events for you.
+     * @param {boolean=} [config.enablePan=true] - (default true) Set to false if you want to disable panning completely.
+     * @param {boolean=} [config.enableZoom=true] - (default true) Set to false if you want to disable zooming completely.
      * @param {boolean=} [config.enableGL=false] - Indicates if the application should use the experimental WebGL features (not recommended).
      * @param {boolean=} [config.enableSVGExport=true] - Indicates if the SVG export should be enabled (default is true).
      *                                                   Note that changes from the postDraw hook might not be visible in the export.
@@ -10316,6 +10331,8 @@ class PlotBoilerplate {
             enableTouch: f.bool(config, "enableTouch", true),
             enableKeys: f.bool(config, "enableKeys", true),
             enableMouseWheel: f.bool(config, "enableMouseWheel", true),
+            enableZoom: f.bool(config, "enableZoom", true),
+            enablePan: f.bool(config, "enablePan", true),
             // Experimental (and unfinished)
             enableGL: f.bool(config, "enableGL", false)
         }; // END confog
@@ -10980,7 +10997,7 @@ class PlotBoilerplate {
             this.draw.setCurrentId(d.uid);
             this.fill.setCurrentId(d.uid);
             this.draw.setCurrentClassName(d.className);
-            this.draw.setCurrentClassName(d.className);
+            this.fill.setCurrentClassName(d.className);
             this.drawDrawable(d, renderTime, draw, fill);
         }
     }
@@ -11001,7 +11018,13 @@ class PlotBoilerplate {
      **/
     drawDrawable(d, renderTime, draw, fill) {
         if (d instanceof BezierPath) {
+            var curveIndex = 0;
             for (var c in d.bezierCurves) {
+                // Restore these settings again in each loop (will be overwritten)
+                this.draw.setCurrentId(`${d.uid}-${curveIndex}`);
+                this.fill.setCurrentId(`${d.uid}-${curveIndex}`);
+                this.draw.setCurrentClassName(d.className);
+                this.fill.setCurrentClassName(d.className);
                 draw.cubicBezier(d.bezierCurves[c].startPoint, d.bezierCurves[c].endPoint, d.bezierCurves[c].startControlPoint, d.bezierCurves[c].endControlPoint, this.drawConfig.bezier.color, this.drawConfig.bezier.lineWidth);
                 if (this.drawConfig.drawBezierHandlePoints && this.drawConfig.drawHandlePoints) {
                     if (d.bezierCurves[c].startPoint.attr.visible) {
@@ -11058,7 +11081,8 @@ class PlotBoilerplate {
                     draw.setCurrentClassName(`${d.className}-end-line`);
                     draw.line(d.bezierCurves[c].endPoint, d.bezierCurves[c].endControlPoint, this.drawConfig.bezier.handleLine.color, this.drawConfig.bezier.handleLine.lineWidth);
                 }
-            }
+                curveIndex++;
+            } // END for
         }
         else if (d instanceof Polygon) {
             draw.polygon(d, this.drawConfig.polygon.color, this.drawConfig.polygon.lineWidth);
@@ -11169,10 +11193,10 @@ class PlotBoilerplate {
         else {
             console.error("Cannot draw object. Unknown class.");
         }
-        draw.setCurrentClassName(undefined);
-        draw.setCurrentId(undefined);
-        fill.setCurrentClassName(undefined);
-        fill.setCurrentId(undefined);
+        draw.setCurrentClassName(null);
+        draw.setCurrentId(null);
+        fill.setCurrentClassName(null);
+        fill.setCurrentId(null);
     }
     /**
      * Draw the select-polygon (if there is one).
@@ -11262,8 +11286,8 @@ class PlotBoilerplate {
         this.drawSelectPolygon(draw);
         // Clear IDs and classnames (postDraw hook might draw somthing and the do not want
         // to interfered with that).
-        draw.setCurrentId(undefined);
-        draw.setCurrentClassName(undefined);
+        draw.setCurrentId(null);
+        draw.setCurrentClassName(null);
     } // END redraw
     /**
      * This function clears the canvas with the configured background color.<br>
@@ -11399,7 +11423,7 @@ class PlotBoilerplate {
         }
         else if (_self.config.fitToParent) {
             // Set editor size
-            _self.canvas.style.position = "absolute";
+            _self.canvas.style.position = "static";
             const space = this.getAvailableContainerSpace();
             _self.canvas.style.width = ((_c = _self.config.canvasWidthFactor) !== null && _c !== void 0 ? _c : 1.0) * space.width + "px";
             _self.canvas.style.height = ((_d = _self.config.canvasHeightFactor) !== null && _d !== void 0 ? _d : 1.0) * space.height + "px";
@@ -11470,24 +11494,24 @@ class PlotBoilerplate {
      **/
     handleClick(e) {
         const _self = this;
-        var p = this.locatePointNear(_self.transformMousePosition(e.params.pos.x, e.params.pos.y), PlotBoilerplate.DEFAULT_CLICK_TOLERANCE / Math.min(_self.config.cssScaleX, _self.config.cssScaleY));
-        if (p) {
-            _self.vertices[p.vindex].listeners.fireClickEvent(e);
+        var point = this.locatePointNear(_self.transformMousePosition(e.params.pos.x, e.params.pos.y), PlotBoilerplate.DEFAULT_CLICK_TOLERANCE / Math.min(_self.config.cssScaleX || 1.0, _self.config.cssScaleY || 1.0));
+        if (point) {
+            _self.vertices[point.vindex].listeners.fireClickEvent(e);
             if (this.keyHandler && this.keyHandler.isDown("shift")) {
-                if (p.typeName == "bpath") {
-                    let vert = _self.paths[p.pindex].bezierCurves[p.cindex].getPointByID(p.pid);
+                if (point.typeName == "bpath") {
+                    let vert = _self.paths[point.pindex].bezierCurves[point.cindex].getPointByID(point.pid);
                     if (vert.attr.selectable)
                         vert.attr.isSelected = !vert.attr.isSelected;
                 }
-                else if (p.typeName == "vertex") {
-                    let vert = _self.vertices[p.vindex];
+                else if (point.typeName == "vertex") {
+                    let vert = _self.vertices[point.vindex];
                     if (vert.attr.selectable)
                         vert.attr.isSelected = !vert.attr.isSelected;
                 }
                 _self.redraw();
             }
-            else if (this.keyHandler.isDown("y")) {
-                _self.vertices[p.vindex].attr.bezierAutoAdjust = !_self.vertices[p.vindex].attr.bezierAutoAdjust;
+            else if (this.keyHandler && this.keyHandler.isDown("y")) {
+                _self.vertices[point.vindex].attr.bezierAutoAdjust = !_self.vertices[point.vindex].attr.bezierAutoAdjust;
                 _self.redraw();
             }
         }
@@ -11554,11 +11578,11 @@ class PlotBoilerplate {
         const _self = this;
         if (e.button != 0)
             return; // Only react on left mouse or touch events
-        var p = _self.locatePointNear(_self.transformMousePosition(e.params.pos.x, e.params.pos.y), PlotBoilerplate.DEFAULT_CLICK_TOLERANCE / Math.min(_self.config.cssScaleX, _self.config.cssScaleY));
-        if (!p)
+        var draggablePoint = _self.locatePointNear(_self.transformMousePosition(e.params.pos.x, e.params.pos.y), PlotBoilerplate.DEFAULT_CLICK_TOLERANCE / Math.min(_self.config.cssScaleX, _self.config.cssScaleY));
+        if (!draggablePoint)
             return;
         // Drag all selected elements?
-        if (p.typeName == "vertex" && _self.vertices[p.vindex].attr.isSelected) {
+        if (draggablePoint.typeName == "vertex" && _self.vertices[draggablePoint.vindex].attr.isSelected) {
             // Multi drag
             // for( var i in _self.vertices ) {
             for (var i = 0; i < _self.vertices.length; i++) {
@@ -11570,13 +11594,15 @@ class PlotBoilerplate {
         }
         else {
             // Single drag
-            if (!_self.vertices[p.vindex].attr.draggable)
+            if (!_self.vertices[draggablePoint.vindex].attr.draggable)
                 return;
-            _self.draggedElements.push(p);
-            if (p.typeName == "bpath")
-                _self.paths[p.pindex].bezierCurves[p.cindex].getPointByID(p.pid).listeners.fireDragStartEvent(e);
-            else if (p.typeName == "vertex")
-                _self.vertices[p.vindex].listeners.fireDragStartEvent(e);
+            _self.draggedElements.push(draggablePoint);
+            if (draggablePoint.typeName == "bpath")
+                _self.paths[draggablePoint.pindex].bezierCurves[draggablePoint.cindex]
+                    .getPointByID(draggablePoint.pid)
+                    .listeners.fireDragStartEvent(e);
+            else if (draggablePoint.typeName == "vertex")
+                _self.vertices[draggablePoint.vindex].listeners.fireDragStartEvent(e);
         }
         _self.redraw();
     }
@@ -11603,7 +11629,10 @@ class PlotBoilerplate {
         //            not this one. So this tab will never receive any [Ctrl-down] events
         //            until next keypress; the implication is, that [Ctrl] would still
         //            considered to be pressed which is not true.
-        if (this.keyHandler.isDown("alt") || this.keyHandler.isDown("spacebar")) {
+        if (this.keyHandler && (this.keyHandler.isDown("alt") || this.keyHandler.isDown("spacebar"))) {
+            if (!this.config.enablePan) {
+                return;
+            }
             _self.setOffset(_self.draw.offset.clone().add(e.params.dragAmount));
             _self.redraw();
         }
@@ -11672,6 +11701,9 @@ class PlotBoilerplate {
      * @return {void}
      **/
     mouseWheelHandler(e) {
+        if (!this.config.enableZoom) {
+            return;
+        }
         var zoomStep = 1.25; // Make configurable?
         // CHANGED replaced _self by this
         const _self = this;
@@ -11811,6 +11843,9 @@ class PlotBoilerplate {
                             if (evt.touches.length == 1 && draggedElement) {
                                 evt.preventDefault();
                                 evt.stopPropagation();
+                                if (!touchDownPos || !touchMovePos) {
+                                    return;
+                                }
                                 var rel = relPos({ x: evt.touches[0].clientX, y: evt.touches[0].clientY });
                                 var trans = _self.transformMousePosition(rel.x, rel.y);
                                 var diff = new Vertex(_self.transformMousePosition(touchMovePos.x, touchMovePos.y)).difference(trans);
@@ -11835,6 +11870,9 @@ class PlotBoilerplate {
                                 touchMovePos = new Vertex(rel);
                             }
                             else if (evt.touches.length == 2) {
+                                if (!this.config.enablePan) {
+                                    return;
+                                }
                                 // If at least two fingers touch and move, then change the draw offset (panning).
                                 evt.preventDefault();
                                 evt.stopPropagation();
@@ -11847,6 +11885,9 @@ class PlotBoilerplate {
                         touchEnd: (evt) => {
                             // Note: e.touches.length is 0 here
                             if (draggedElement && draggedElement.typeName == "vertex") {
+                                if (!touchDownPos) {
+                                    return;
+                                }
                                 var draggingVertex = _self.vertices[draggedElement.vindex];
                                 var fakeEvent = {
                                     isTouchEvent: true,
@@ -11879,9 +11920,17 @@ class PlotBoilerplate {
                             multiTouchStartScale = null;
                         },
                         pinch: (evt) => {
+                            if (!this.config.enableZoom) {
+                                return;
+                            }
+                            const touchItem0 = evt.touches.item(0);
+                            const touchItem1 = evt.touches.item(1);
+                            if (!evt.touches || !multiTouchStartScale || !touchItem0 || !touchItem1) {
+                                return;
+                            }
                             // For pinching there must be at least two touch items
-                            const fingerA = new Vertex(evt.touches.item(0).clientX, evt.touches.item(0).clientY);
-                            const fingerB = new Vertex(evt.touches.item(1).clientX, evt.touches.item(1).clientY);
+                            const fingerA = new Vertex(touchItem0.clientX, touchItem0.clientY);
+                            const fingerB = new Vertex(touchItem1.clientX, touchItem1.clientY);
                             const center = new Line(fingerA, fingerB).vertAt(0.5);
                             _self.setZoom(multiTouchStartScale.x * evt.zoom, multiTouchStartScale.y * evt.zoom, center);
                             _self.redraw();
@@ -12029,8 +12078,10 @@ PlotBoilerplate.utils = {
      **/
     setCSSscale: (element, scaleX, scaleY) => {
         element.style["transform-origin"] = "0 0";
-        if (scaleX == 1.0 && scaleY == 1.0)
-            element.style.transform = null;
+        if (scaleX == 1.0 && scaleY == 1.0) {
+            // element.style.transform = null;
+            element.style.removeProperty("transform");
+        }
         else
             element.style.transform = "scale(" + scaleX + "," + scaleY + ")";
     },