plotboilerplate 1.20.1 → 1.21.0

package/src/ts/CubicBezierCurve.ts

@@ -21,7 +21,9 @@
  * @modified 2022-02-02 Added the `destroy` method.
  * @modified 2022-02-02 Cleared the `toSVGPathData` function (deprecated). Use `drawutilssvg` instead.
  * @modified 2022-10-17 The `CubicBezierCurve` class now implements the new `PathSegment` interface.
- * @version 2.7.1
+ * @modified 2023-09-30 Added the function `CubicbezierCurve.getSubCurve(number,number)` – similar to `getSubCurveAt(...)` but with absolute position parameters.
+ * @modified 2023-10-07 Added the `trimEnd`, `trimEndAt`, `trimStart`, `trimStartAt` methods.
+ * @version 2.8.0
  *
  * @file CubicBezierCurve
  * @public
@@ -523,6 +525,96 @@ export class CubicBezierCurve implements PathSegment {
     return new Vertex(tX, tY);
   }
 
+  /**
+   * Trim off a start section of this curve. The position parameter `uValue` is the absolute position on the
+   * curve in `[0...arcLength]`.
+   * The remaining curve will be the one in the bounds `[uValue,1]` (so `[0.0,uValue]` is cut off).
+   *
+   * Note this function just converts the absolute parameter to a relative one and call `trimStartAt`.
+   *
+   * @method trimStart
+   * @instance
+   * @memberof CubicBezierCurve
+   * @param {number} uValue - The absolute position parameter where to cut off the head curve.
+   * @returns {CubicBezierCurve} `this` for chanining.
+   */
+  trimStart(uValue: number): CubicBezierCurve {
+    return this.trimStartAt(this.convertU2T(uValue));
+  }
+
+  /**
+   * Trim off a start section of this curve. The position parameter `t` is the relative position in [0..1].
+   * The remaining curve will be the one in the bounds `[uValue,1]` (so `[0.0,uValue]` is cut off).
+   *
+   * @method trimStartAt
+   * @instance
+   * @memberof CubicBezierCurve
+   * @param {number} t - The relative position parameter where to cut off the head curve.
+   * @returns {CubicBezierCurve} `this` for chanining.
+   */
+  trimStartAt(t: number): CubicBezierCurve {
+    const subCurbePoints = CubicBezierCurve.utils.getSubCurvePointsAt(this, t, 1.0);
+    this.startPoint.set(subCurbePoints[0]);
+    this.startControlPoint.set(subCurbePoints[2]);
+    this.endPoint.set(subCurbePoints[1]);
+    this.endControlPoint.set(subCurbePoints[3]);
+    this.updateArcLengths();
+    return this;
+  }
+
+  /**
+   * Trim off the end of this curve. The position parameter `uValue` is the absolute position on the
+   * curve in `[0...arcLength]`.
+   * The remaining curve will be the one in the bounds `[0,uValue]` (so `[1.0-uValue,1.0]` is cut off).
+   *
+   * Note this function just converts the absolute parameter to a relative one and call `trimEndAt`.
+   *
+   * @method trimEnd
+   * @instance
+   * @memberof CubicBezierCurve
+   * @param {number} uValue - The absolute position parameter where to cut off the tail curve.
+   * @returns {CubicBezierCurve} `this` for chanining.
+   */
+  trimEnd(uValue: number): CubicBezierCurve {
+    return this.trimEndAt(this.convertU2T(uValue));
+  }
+
+  /**
+   * Trim off the end of this curve. The position parameter `t` is the relative position in [0..1].
+   * The remaining curve will be the one in the bounds `[0,t]` (so `[1.0-t,1.0]` is cut off).
+   *
+   * @method trimEndAt
+   * @instance
+   * @memberof CubicBezierCurve
+   * @param {number} t - The relative position parameter where to cut off the tail curve.
+   * @returns {CubicBezierCurve} `this` for chanining.
+   */
+  trimEndAt(t: number): CubicBezierCurve {
+    const subCurbePoints = CubicBezierCurve.utils.getSubCurvePointsAt(this, 0.0, t);
+    this.startPoint.set(subCurbePoints[0]);
+    this.startControlPoint.set(subCurbePoints[2]);
+    this.endPoint.set(subCurbePoints[1]);
+    this.endControlPoint.set(subCurbePoints[3]);
+    this.updateArcLengths();
+    return this;
+  }
+
+  /**
+   * Get a sub curve at the given start end end positions (values on the curve's length, between 0 and curve.arcLength).
+   *
+   * tStart >= tEnd is allowed, you will get a reversed sub curve then.
+   *
+   * @method getSubCurve
+   * @param {number} tStart – The start position of the desired sub curve (must be in [0..arcLength]).
+   * @param {number} tEnd – The end position if the desired cub curve (must be in [0..arcLength]).
+   * @instance
+   * @memberof CubicBezierCurve
+   * @return {CubicBezierCurve} The sub curve as a new curve.
+   **/
+  getSubCurve(uStart: number, uEnd: number): CubicBezierCurve {
+    return this.getSubCurveAt(this.convertU2T(uStart), this.convertU2T(uEnd));
+  }
+
   /**
    * Get a sub curve at the given start end end offsets (values between 0.0 and 1.0).
    *
@@ -536,20 +628,22 @@ export class CubicBezierCurve implements PathSegment {
    * @return {CubicBezierCurve} The sub curve as a new curve.
    **/
   getSubCurveAt(tStart: number, tEnd: number): CubicBezierCurve {
-    const startVec: Vector = new Vector(this.getPointAt(tStart), this.getTangentAt(tStart));
-    const endVec: Vector = new Vector(this.getPointAt(tEnd), this.getTangentAt(tEnd).inv());
+    // const startVec: Vector = new Vector(this.getPointAt(tStart), this.getTangentAt(tStart));
+    // const endVec: Vector = new Vector(this.getPointAt(tEnd), this.getTangentAt(tEnd).inv());
 
-    // Tangents are relative. Make absolute.
-    startVec.b.add(startVec.a);
-    endVec.b.add(endVec.a);
+    // // Tangents are relative. Make absolute.
+    // startVec.b.add(startVec.a);
+    // endVec.b.add(endVec.a);
 
-    // This 'splits' the curve at the given point at t.
-    startVec.scale(0.33333333 * (tEnd - tStart));
-    endVec.scale(0.33333333 * (tEnd - tStart));
+    // // This 'splits' the curve at the given point at t.
+    // startVec.scale(0.33333333 * (tEnd - tStart));
+    // endVec.scale(0.33333333 * (tEnd - tStart));
 
-    // Draw the bezier curve
-    // pb.draw.cubicBezier( startVec.a, endVec.a, startVec.b, endVec.b, '#8800ff', 2 );
-    return new CubicBezierCurve(startVec.a, endVec.a, startVec.b, endVec.b);
+    // // Draw the bezier curve
+    // // pb.draw.cubicBezier( startVec.a, endVec.a, startVec.b, endVec.b, '#8800ff', 2 );
+    // return new CubicBezierCurve(startVec.a, endVec.a, startVec.b, endVec.b);
+    const subCurbePoints = CubicBezierCurve.utils.getSubCurvePointsAt(this, tStart, tEnd);
+    return new CubicBezierCurve(subCurbePoints[0], subCurbePoints[1], subCurbePoints[2], subCurbePoints[3]);
   }
 
   /**
@@ -813,4 +907,37 @@ export class CubicBezierCurve implements PathSegment {
     if (arr.length != 4) throw "Can only build from array with four elements.";
     return new CubicBezierCurve(arr[0], arr[1], arr[2], arr[3]);
   }
+
+  /**
+   * Helper utils.
+   */
+  private static utils = {
+    /**
+     * Get the points of a sub curve at the given start end end offsets (values between 0.0 and 1.0).
+     *
+     * tStart >= tEnd is allowed, you will get a reversed sub curve then.
+     *
+     * @method getSubCurvePointsAt
+     * @param {CubicBezierCurve} curve – The curve to get the sub curve points from.
+     * @param {number} tStart – The start offset of the desired sub curve (must be in [0..1]).
+     * @param {number} tEnd – The end offset if the desired cub curve (must be in [0..1]).
+     * @instance
+     * @memberof CubicBezierCurve
+     * @return {CubicBezierCurve} The sub curve as a new curve.
+     **/
+    getSubCurvePointsAt: (curve: CubicBezierCurve, tStart: number, tEnd: number): [Vertex, Vertex, Vertex, Vertex] => {
+      const startVec: Vector = new Vector(curve.getPointAt(tStart), curve.getTangentAt(tStart));
+      const endVec: Vector = new Vector(curve.getPointAt(tEnd), curve.getTangentAt(tEnd).inv());
+
+      // Tangents are relative. Make absolute.
+      startVec.b.add(startVec.a);
+      endVec.b.add(endVec.a);
+
+      // This 'splits' the curve at the given point at t.
+      startVec.scale(0.33333333 * (tEnd - tStart));
+      endVec.scale(0.33333333 * (tEnd - tStart));
+
+      return [startVec.a, endVec.a, startVec.b, endVec.b];
+    }
+  };
 }

package/src/ts/Line.ts

@@ -15,6 +15,7 @@
  * @modified 2022-02-02 Added the `destroy` method.
  * @modified 2022-10-09 Changed the actual return value of the `intersection` function to null (was undefined before).
  * @modified 2022-10-17 Adding these methods from the `PathSegment` interface: getStartPoint, getEndPoint, revert.
+ * @modified 2023-09-25 Changed param type of `intersection()` from Line to VertTuple.
  * @version  2.3.0
  *
  * @file Line
@@ -61,7 +62,7 @@ export class Line extends VertTuple<Line> implements SVGSerializable, PathSegmen
    * @memberof Line
    **/
   // !!! DO NOT MOVE TO VertTuple
-  intersection(line: Line): Vertex | null {
+  intersection(line: VertTuple<any>): Vertex | null {
     const denominator: number = this.denominator(line);
     if (denominator == 0) {
       return null;

package/src/ts/PBText.ts

@@ -2,7 +2,8 @@
  * @author   Ikaros Kappler
  * @date     2021-11-16
  * @modified 2022-02-02 Added the `destroy` method.
- * @version  1.1.0
+ * @modified 2023-09-25 Fixed a type error in the constructor. Nothing vital.
+ * @version  1.1.1
  **/
 
 import { UIDGenerator } from "./UIDGenerator";
@@ -127,14 +128,14 @@ export class PBText implements SVGSerializable, FontOptions {
     this.uid = UIDGenerator.next();
     this.text = text;
     this.anchor = anchor ?? new Vertex();
-    this.color = options.color;
-    this.fontFamily = options.fontFamily;
-    this.fontSize = options.fontSize;
-    this.fontStyle = options.fontStyle;
-    this.fontWeight = options.fontWeight;
-    this.lineHeight = options.lineHeight;
-    this.textAlign = options.textAlign;
-    this.rotation = options.rotation;
+    this.color = options?.color;
+    this.fontFamily = options?.fontFamily;
+    this.fontSize = options?.fontSize;
+    this.fontStyle = options?.fontStyle;
+    this.fontWeight = options?.fontWeight;
+    this.lineHeight = options?.lineHeight;
+    this.textAlign = options?.textAlign;
+    this.rotation = options?.rotation;
   }
 
   /**

package/src/ts/PlotBoilerplate.ts

@@ -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.
@@ -377,6 +382,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.
@@ -393,7 +400,7 @@ export class PlotBoilerplate {
       visible: true
     };
 
-    if (typeof config.canvas == "undefined") {
+    if (typeof config.canvas === "undefined") {
       throw "No canvas specified.";
     }
 
@@ -450,6 +457,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), // default=true
+      enablePan: f.bool(config, "enablePan", true), // default=true
 
       // Experimental (and unfinished)
       enableGL: f.bool(config, "enableGL", false)
@@ -488,6 +497,10 @@ export class PlotBoilerplate {
           fill: true
         }
       },
+      // bezierPath: {
+      //   color: "#0022a8",
+      //   lineWidth: 1
+      // },
       polygon: {
         color: "#0022a8",
         lineWidth: 1
@@ -549,7 +562,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: Element =
-      typeof config.canvas == "string" ? (document.querySelector(config.canvas) as Element) : config.canvas;
+      typeof config.canvas === "string" ? (document.querySelector(config.canvas) as Element) : 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 as HTMLCanvasElement;
@@ -1140,7 +1156,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);
     }
   }
@@ -1162,7 +1178,13 @@ export class PlotBoilerplate {
    **/
   drawDrawable(d: Drawable, renderTime: number, draw: DrawLib<any>, fill: DrawLib<any>) {
     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,
@@ -1245,22 +1267,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);
       if (!this.drawConfig.drawHandlePoints) {
@@ -1276,11 +1289,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}`);
@@ -1375,10 +1388,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);
   }
 
   /**
@@ -1475,8 +1488,8 @@ export class PlotBoilerplate {
 
     // 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
 
   /**
@@ -1626,7 +1639,7 @@ export class PlotBoilerplate {
       _setSize(width, height);
     } else if (_self.config.fitToParent) {
       // Set editor size
-      _self.canvas.style.position = "absolute";
+      _self.canvas.style.position = "static";
       const space: XYDimension = this.getAvailableContainerSpace();
       _self.canvas.style.width = (_self.config.canvasWidthFactor ?? 1.0) * space.width + "px";
       _self.canvas.style.height = (_self.config.canvasHeightFactor ?? 1.0) * space.height + "px";
@@ -1697,23 +1710,23 @@ export class PlotBoilerplate {
    **/
   private handleClick(e: XMouseEvent) {
     const _self: PlotBoilerplate = this;
-    var p: IDraggable = this.locatePointNear(
+    var point: IDraggable | null = this.locatePointNear(
       _self.transformMousePosition(e.params.pos.x, e.params.pos.y),
-      PlotBoilerplate.DEFAULT_CLICK_TOLERANCE / Math.min(_self.config.cssScaleX, _self.config.cssScaleY)
+      PlotBoilerplate.DEFAULT_CLICK_TOLERANCE / Math.min(_self.config.cssScaleX || 1.0, _self.config.cssScaleY || 1.0)
     );
-    if (p) {
-      _self.vertices[p.vindex].listeners.fireClickEvent(e);
+    if (point) {
+      _self.vertices[point.vindex].listeners.fireClickEvent(e);
       if (this.keyHandler && this.keyHandler.isDown("shift")) {
-        if (p.typeName == "bpath") {
-          let vert: Vertex = _self.paths[p.pindex].bezierCurves[p.cindex].getPointByID(p.pid);
+        if (point.typeName == "bpath") {
+          let vert: Vertex = _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: Vertex = _self.vertices[p.vindex];
+        } else if (point.typeName == "vertex") {
+          let vert: Vertex = _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();
       }
     } else if (_self.selectPolygon != null) {
@@ -1782,13 +1795,13 @@ export class PlotBoilerplate {
   private mouseDownHandler(e: XMouseEvent) {
     const _self = this;
     if (e.button != 0) return; // Only react on left mouse or touch events
-    var p: IDraggable = _self.locatePointNear(
+    var draggablePoint: IDraggable | null = _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) return;
+    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++) {
@@ -1801,10 +1814,13 @@ export class PlotBoilerplate {
       }
     } else {
       // Single drag
-      if (!_self.vertices[p.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);
+      if (!_self.vertices[draggablePoint.vindex].attr.draggable) return;
+      _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();
   }
@@ -1832,7 +1848,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();
     } else {
@@ -1898,6 +1917,9 @@ export class PlotBoilerplate {
    * @return {void}
    **/
   private mouseWheelHandler(e: XMouseEvent) {
+    if (!this.config.enableZoom) {
+      return;
+    }
     var zoomStep: number = 1.25; // Make configurable?
     // CHANGED replaced _self by this
     const _self: PlotBoilerplate = this;
@@ -2045,6 +2067,9 @@ export class PlotBoilerplate {
               if (evt.touches.length == 1 && draggedElement) {
                 evt.preventDefault();
                 evt.stopPropagation();
+                if (!touchDownPos || !touchMovePos) {
+                  return;
+                }
                 var rel: XYCoords = relPos({ x: evt.touches[0].clientX, y: evt.touches[0].clientY });
                 var trans: XYCoords = _self.transformMousePosition(rel.x, rel.y);
                 var diff: Vertex = new Vertex(_self.transformMousePosition(touchMovePos.x, touchMovePos.y)).difference(trans);
@@ -2067,6 +2092,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();
@@ -2081,6 +2109,9 @@ export class PlotBoilerplate {
             touchEnd: (evt: TouchEvent) => {
               // Note: e.touches.length is 0 here
               if (draggedElement && draggedElement.typeName == "vertex") {
+                if (!touchDownPos) {
+                  return;
+                }
                 var draggingVertex: Vertex = _self.vertices[draggedElement.vindex];
                 var fakeEvent: VertEvent = {
                   isTouchEvent: true,
@@ -2112,9 +2143,17 @@ export class PlotBoilerplate {
               multiTouchStartScale = null;
             },
             pinch: (evt: TouchPinchEvent) => {
+              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: Vertex = new Vertex(evt.touches.item(0).clientX, evt.touches.item(0).clientY);
-              const fingerB: Vertex = new Vertex(evt.touches.item(1).clientX, evt.touches.item(1).clientY);
+              const fingerA: Vertex = new Vertex(touchItem0.clientX, touchItem0.clientY);
+              const fingerB: Vertex = new Vertex(touchItem1.clientX, touchItem1.clientY);
               const center: Vertex = new Line(fingerA, fingerB).vertAt(0.5);
               _self.setZoom(multiTouchStartScale.x * evt.zoom, multiTouchStartScale.y * evt.zoom, center);
               _self.redraw();
@@ -2192,7 +2231,45 @@ export class PlotBoilerplate {
      * @param {Object} extension
      * @return {Object} base extended by the new attributes.
      **/
-    safeMergeByKeys: (base: Object, extension: Object): Object => {
+    safeMergeByKeys: <KeyType extends string | number | symbol, ValueType>(
+      base: Record<KeyType, ValueType>,
+      extension: Record<KeyType, ValueType>
+    ): Record<KeyType, ValueType> => {
+      for (var k in extension) {
+        if (!extension.hasOwnProperty(k)) {
+          continue;
+        }
+        if (base.hasOwnProperty(k)) {
+          const typ = typeof base[k];
+          const extVal = extension[k];
+          try {
+            if (typ == "boolean") {
+              if (typeof extVal === "string") base[k] = Boolean(!!JSON.parse(extVal)) as unknown as ValueType;
+              else base[k] = extVal as ValueType;
+            } else if (typ == "number") {
+              if (typeof extVal === "string") base[k] = Number(JSON.parse(extVal) * 1) as unknown as ValueType;
+              else base[k] = extension[k] as ValueType;
+            } else if (typ == "function" && typeof extVal == "function") {
+              base[k] = extension[k];
+            } else {
+              // Probably a sting
+              base[k] = extension[k];
+            }
+          } catch (e) {
+            console.error("error in key ", k, extVal, e);
+          }
+        } else {
+          base[k] = extension[k];
+        }
+      }
+      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)) {
@@ -2211,6 +2288,7 @@ export class PlotBoilerplate {
       }
       return base;
     },
+    *()
 
     /**
      * A helper function to scale elements (usually the canvas) using CSS.
@@ -2224,8 +2302,10 @@ export class PlotBoilerplate {
      **/
     setCSSscale: (element: HTMLElement | SVGElement, scaleX: number, scaleY: number): void => {
       element.style["transform-origin"] = "0 0";
-      if (scaleX == 1.0 && scaleY == 1.0) element.style.transform = null;
-      else element.style.transform = "scale(" + scaleX + "," + scaleY + ")";
+      if (scaleX == 1.0 && scaleY == 1.0) {
+        // element.style.transform = null;
+        element.style.removeProperty("transform");
+      } else element.style.transform = "scale(" + scaleX + "," + scaleY + ")";
     },
 
     // A helper for fetching data from objects.
@@ -2271,7 +2351,7 @@ export class PlotBoilerplate {
        * @param {boolean} fallback - A default value if the key does not exist.
        * @return {boolean}
        **/
-      bool: (obj: any, key: string, fallback: boolean) => {
+      bool: (obj: any, key: string, fallback: boolean | null) => {
         if (!obj.hasOwnProperty(key)) return fallback;
         if (typeof obj[key] == "boolean") return obj[key];
         else {