plotboilerplate 1.20.1 → 1.21.0

package/src/cjs/PlotBoilerplate.js

@@ -79,7 +79,12 @@
  * @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.
+ * @modified 2023-09-29 Adding proper dicionary key and value types to the params of `PlotBoilerplate.utils.safeMergeByKeys` (was `object` before).
+ * @version  1.17.3
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.
@@ -191,6 +196,8 @@ var PlotBoilerplate = /** @class */ (function () {
      * @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.
@@ -217,7 +224,7 @@ var PlotBoilerplate = /** @class */ (function () {
             draggable: true,
             visible: true
         };
-        if (typeof config.canvas == "undefined") {
+        if (typeof config.canvas === "undefined") {
             throw "No canvas specified.";
         }
         /**
@@ -271,6 +278,8 @@ var PlotBoilerplate = /** @class */ (function () {
             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
@@ -307,6 +316,10 @@ var PlotBoilerplate = /** @class */ (function () {
                     fill: true
                 }
             },
+            // bezierPath: {
+            //   color: "#0022a8",
+            //   lineWidth: 1
+            // },
             polygon: {
                 color: "#0022a8",
                 lineWidth: 1
@@ -366,7 +379,10 @@ var PlotBoilerplate = /** @class */ (function () {
         // +-------------------------------
         this.grid = new Grid_1.Grid(new Vertex_1.Vertex(0, 0), new Vertex_1.Vertex(50, 50));
         this.canvasSize = { width: PlotBoilerplate.DEFAULT_CANVAS_WIDTH, height: PlotBoilerplate.DEFAULT_CANVAS_HEIGHT };
-        var canvasElement = typeof config.canvas == "string" ? document.querySelector(config.canvas) : config.canvas;
+        var canvasElement = typeof config.canvas === "string" ? document.querySelector(config.canvas) : config.canvas;
+        if (typeof canvasElement === "undefined") {
+            throw "Cannot initialize PlotBoilerplate with a null canvas (element \"" + config.canvas + " not found).";
+        }
         // Which renderer to use: Canvas2D, WebGL (experimental) or SVG?
         if (canvasElement.tagName.toLowerCase() === "canvas") {
             this.canvas = canvasElement;
@@ -935,7 +951,7 @@ var PlotBoilerplate = /** @class */ (function () {
             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);
         }
     };
@@ -956,7 +972,13 @@ var PlotBoilerplate = /** @class */ (function () {
      **/
     PlotBoilerplate.prototype.drawDrawable = function (d, renderTime, draw, fill) {
         if (d instanceof BezierPath_1.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) {
@@ -1008,12 +1030,13 @@ var PlotBoilerplate = /** @class */ (function () {
                 if (this.drawConfig.drawBezierHandleLines && this.drawConfig.drawHandleLines) {
                     draw.setCurrentId(d.uid + "_l0");
                     draw.setCurrentClassName(d.className + "-start-line");
-                    draw.line(d.bezierCurves[c].startPoint, d.bezierCurves[c].startControlPoint, this.drawConfig.bezier.handleLine.color, this.drawConfig.bezier.handleLine.lineWidth);
+                    draw.handleLine(d.bezierCurves[c].startPoint, d.bezierCurves[c].startControlPoint);
                     draw.setCurrentId(d.uid + "_l1");
                     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);
+                    draw.handleLine(d.bezierCurves[c].endPoint, d.bezierCurves[c].endControlPoint);
                 }
-            }
+                curveIndex++;
+            } // END for
         }
         else if (d instanceof Polygon_1.Polygon) {
             draw.polygon(d, this.drawConfig.polygon.color, this.drawConfig.polygon.lineWidth);
@@ -1033,11 +1056,11 @@ var PlotBoilerplate = /** @class */ (function () {
                 draw.setCurrentId(d.uid + "_e0");
                 draw.setCurrentClassName(d.className + "-v-line");
                 // draw.line( d.center.clone().add(0,d.axis.y-d.center.y), d.axis, '#c8c8c8' );
-                draw.line(d.center.clone().add(0, d.signedRadiusV()).rotate(d.rotation, d.center), d.axis, "#c8c8c8");
+                draw.handleLine(d.center.clone().add(0, d.signedRadiusV()).rotate(d.rotation, d.center), d.axis); // , "#c8c8c8");
                 draw.setCurrentId(d.uid + "_e1");
                 draw.setCurrentClassName(d.className + "-h-line");
                 // draw.line( d.center.clone().add(d.axis.x-d.center.x,0), d.axis, '#c8c8c8' );
-                draw.line(d.center.clone().add(d.signedRadiusH(), 0).rotate(d.rotation, d.center), d.axis, "#c8c8c8");
+                draw.handleLine(d.center.clone().add(d.signedRadiusH(), 0).rotate(d.rotation, d.center), d.axis); // , "#c8c8c8");
             }
             draw.setCurrentId(d.uid);
             draw.setCurrentClassName("" + d.className);
@@ -1124,10 +1147,10 @@ var PlotBoilerplate = /** @class */ (function () {
         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).
@@ -1217,8 +1240,8 @@ var PlotBoilerplate = /** @class */ (function () {
         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>
@@ -1355,7 +1378,7 @@ var PlotBoilerplate = /** @class */ (function () {
         }
         else if (_self.config.fitToParent) {
             // Set editor size
-            _self.canvas.style.position = "absolute";
+            _self.canvas.style.position = "static";
             var 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";
@@ -1426,24 +1449,24 @@ var PlotBoilerplate = /** @class */ (function () {
      **/
     PlotBoilerplate.prototype.handleClick = function (e) {
         var _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") {
-                    var vert = _self.paths[p.pindex].bezierCurves[p.cindex].getPointByID(p.pid);
+                if (point.typeName == "bpath") {
+                    var 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") {
-                    var vert = _self.vertices[p.vindex];
+                else if (point.typeName == "vertex") {
+                    var 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();
             }
         }
@@ -1510,11 +1533,11 @@ var PlotBoilerplate = /** @class */ (function () {
         var _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++) {
@@ -1526,13 +1549,15 @@ var PlotBoilerplate = /** @class */ (function () {
         }
         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();
     };
@@ -1559,7 +1584,10 @@ var PlotBoilerplate = /** @class */ (function () {
         //            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();
         }
@@ -1628,6 +1656,9 @@ var PlotBoilerplate = /** @class */ (function () {
      * @return {void}
      **/
     PlotBoilerplate.prototype.mouseWheelHandler = function (e) {
+        if (!this.config.enableZoom) {
+            return;
+        }
         var zoomStep = 1.25; // Make configurable?
         // CHANGED replaced _self by this
         var _self = this;
@@ -1693,6 +1724,7 @@ var PlotBoilerplate = /** @class */ (function () {
         this.setOffset({ x: newOffsetX, y: newOffsetY });
     };
     PlotBoilerplate.prototype.installInputListeners = function () {
+        var _this = this;
         var _self = this;
         if (this.config.enableMouse) {
             // Install a mouse handler on the canvas.
@@ -1767,6 +1799,9 @@ var PlotBoilerplate = /** @class */ (function () {
                             if (evt.touches.length == 1 && draggedElement) {
                                 evt.preventDefault();
                                 evt.stopPropagation();
+                                if (!touchDownPos || !touchMovePos) {
+                                    return;
+                                }
                                 var rel = relPos_1({ x: evt.touches[0].clientX, y: evt.touches[0].clientY });
                                 var trans = _self.transformMousePosition(rel.x, rel.y);
                                 var diff = new Vertex_1.Vertex(_self.transformMousePosition(touchMovePos.x, touchMovePos.y)).difference(trans);
@@ -1791,6 +1826,9 @@ var PlotBoilerplate = /** @class */ (function () {
                                 touchMovePos = new Vertex_1.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();
@@ -1803,6 +1841,9 @@ var PlotBoilerplate = /** @class */ (function () {
                         touchEnd: function (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,
@@ -1835,9 +1876,17 @@ var PlotBoilerplate = /** @class */ (function () {
                             multiTouchStartScale = null;
                         },
                         pinch: function (evt) {
+                            if (!_this.config.enableZoom) {
+                                return;
+                            }
+                            var touchItem0 = evt.touches.item(0);
+                            var touchItem1 = evt.touches.item(1);
+                            if (!evt.touches || !multiTouchStartScale || !touchItem0 || !touchItem1) {
+                                return;
+                            }
                             // For pinching there must be at least two touch items
-                            var fingerA = new Vertex_1.Vertex(evt.touches.item(0).clientX, evt.touches.item(0).clientY);
-                            var fingerB = new Vertex_1.Vertex(evt.touches.item(1).clientX, evt.touches.item(1).clientY);
+                            var fingerA = new Vertex_1.Vertex(touchItem0.clientX, touchItem0.clientY);
+                            var fingerB = new Vertex_1.Vertex(touchItem1.clientX, touchItem1.clientY);
                             var center = new Line_1.Line(fingerA, fingerB).vertAt(0.5);
                             _self.setZoom(multiTouchStartScale.x * evt.zoom, multiTouchStartScale.y * evt.zoom, center);
                             _self.redraw();
@@ -1950,22 +1999,35 @@ var PlotBoilerplate = /** @class */ (function () {
          **/
         safeMergeByKeys: function (base, extension) {
             for (var k in extension) {
-                if (!extension.hasOwnProperty(k))
+                if (!extension.hasOwnProperty(k)) {
                     continue;
+                }
                 if (base.hasOwnProperty(k)) {
                     var typ = typeof base[k];
+                    var extVal = extension[k];
                     try {
-                        if (typ == "boolean")
-                            base[k] = !!JSON.parse(extension[k]);
-                        else if (typ == "number")
-                            base[k] = JSON.parse(extension[k]) * 1;
-                        else if (typ == "function" && typeof extension[k] == "function")
+                        if (typ == "boolean") {
+                            if (typeof extVal === "string")
+                                base[k] = Boolean(!!JSON.parse(extVal));
+                            else
+                                base[k] = extVal;
+                        }
+                        else if (typ == "number") {
+                            if (typeof extVal === "string")
+                                base[k] = Number(JSON.parse(extVal) * 1);
+                            else
+                                base[k] = extension[k];
+                        }
+                        else if (typ == "function" && typeof extVal == "function") {
                             base[k] = extension[k];
-                        else
+                        }
+                        else {
+                            // Probably a sting
                             base[k] = extension[k];
+                        }
                     }
                     catch (e) {
-                        console.error("error in key ", k, extension[k], e);
+                        console.error("error in key ", k, extVal, e);
                     }
                 }
                 else {
@@ -1974,6 +2036,31 @@ var PlotBoilerplate = /** @class */ (function () {
             }
             return base;
         },
+        /*
+        __safeMergeByKeys: <KeyType extends string | number | symbol, ValueType extends boolean | number | string | Function>(
+          base: Record<KeyType, ValueType>,
+          extension: Record<KeyType, string>
+        ): Record<KeyType, ValueType> => {
+          for (var k in extension) {
+            if (!extension.hasOwnProperty(k)) continue;
+            if (base.hasOwnProperty(k)) {
+              var typ = typeof base[k];
+              try {
+                if (typ == "boolean") base[k] = !!JSON.parse(extension[k]);
+                else if (typ == "number") base[k] = JSON.parse(extension[k]) * 1;
+                else if (typ == "function" && typeof extension[k] == "function") base[k] = extension[k];
+                else base[k] = extension[k];
+              } catch (e) {
+                console.error("error in key ", k, extension[k], e);
+              }
+            } else {
+              base[k] = extension[k];
+            }
+          }
+          return base;
+        },
+        *()
+    
         /**
          * A helper function to scale elements (usually the canvas) using CSS.
          *
@@ -1986,8 +2073,10 @@ var PlotBoilerplate = /** @class */ (function () {
          **/
         setCSSscale: function (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 + ")";
         },