plotboilerplate 1.20.1 → 1.21.0

package/src/esm/PlotBoilerplate.js

@@ -78,7 +78,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.
@@ -189,6 +194,8 @@ export 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.
@@ -215,7 +222,7 @@ export class PlotBoilerplate {
             draggable: true,
             visible: true
         };
-        if (typeof config.canvas == "undefined") {
+        if (typeof config.canvas === "undefined") {
             throw "No canvas specified.";
         }
         /**
@@ -269,6 +276,8 @@ export 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
@@ -305,6 +314,10 @@ export class PlotBoilerplate {
                     fill: true
                 }
             },
+            // bezierPath: {
+            //   color: "#0022a8",
+            //   lineWidth: 1
+            // },
             polygon: {
                 color: "#0022a8",
                 lineWidth: 1
@@ -364,7 +377,10 @@ export class PlotBoilerplate {
         // +-------------------------------
         this.grid = new Grid(new Vertex(0, 0), new Vertex(50, 50));
         this.canvasSize = { width: PlotBoilerplate.DEFAULT_CANVAS_WIDTH, height: PlotBoilerplate.DEFAULT_CANVAS_HEIGHT };
-        const canvasElement = typeof config.canvas == "string" ? document.querySelector(config.canvas) : config.canvas;
+        const 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;
@@ -933,7 +949,7 @@ export 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);
         }
     }
@@ -954,7 +970,13 @@ export 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) {
@@ -1006,12 +1028,13 @@ export class PlotBoilerplate {
                 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) {
             draw.polygon(d, this.drawConfig.polygon.color, this.drawConfig.polygon.lineWidth);
@@ -1031,11 +1054,11 @@ export class PlotBoilerplate {
                 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}`);
@@ -1122,10 +1145,10 @@ export 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).
@@ -1215,8 +1238,8 @@ export 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>
@@ -1352,7 +1375,7 @@ export 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";
@@ -1423,24 +1446,24 @@ export 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();
             }
         }
@@ -1507,11 +1530,11 @@ export 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++) {
@@ -1523,13 +1546,15 @@ export 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();
     }
@@ -1556,7 +1581,10 @@ export 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();
         }
@@ -1625,6 +1653,9 @@ export 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;
@@ -1764,6 +1795,9 @@ export 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);
@@ -1788,6 +1822,9 @@ export 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();
@@ -1800,6 +1837,9 @@ export 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,
@@ -1832,9 +1872,17 @@ export 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();
@@ -1946,22 +1994,35 @@ PlotBoilerplate.utils = {
      **/
     safeMergeByKeys: (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];
+                const typ = typeof base[k];
+                const 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 {
@@ -1970,6 +2031,31 @@ PlotBoilerplate.utils = {
         }
         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.
      *
@@ -1982,8 +2068,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 + ")";
     },