plotboilerplate 1.17.1 → 1.19.0

package/dist/index.esm.js

@@ -982,7 +982,7 @@ class Polygon {
         if (typeof vertices == "undefined")
             vertices = [];
         this.vertices = vertices;
-        this.isOpen = isOpen;
+        this.isOpen = isOpen || false;
     }
     /**
      * Add a vertex to the end of the `vertices` array.
@@ -1412,7 +1412,8 @@ Polygon.utils = {
  * @modified 2021-02-02 Added the `toPolygon` method.
  * @modified 2021-06-21 (mid-summer) Added `getCenter` method.
  * @modified 2022-02-01 Added the `toString` function.
- * @version  1.4.0
+ * @modified 2022-10-09 Added the `fromDimension` function.
+ * @version  1.5.0
  **/
 /**
  * @classdesc A bounds class with min and max values. Implementing IBounds.
@@ -1514,6 +1515,17 @@ class Bounds {
         }
         return new Bounds(new Vertex(xMin, yMin), new Vertex(xMax, yMax));
     }
+    /**
+     * Create a new `Bounds` instance just from `width` and `height`, located at (0,0) or the optionally given origin.
+     *
+     * @param {number} width - The width of the bounds
+     * @param {number} height  - The height of the bounds
+     * @param {XYCoords={x:0,y:0}} origin - [optional] A origin to locate the new Bounds object at.
+     * @returns {Bounds} A new `Bounds` instance width given width and height, located at (0,0) or the given origin..
+     */
+    static fromDimension(width, height, origin) {
+        return new Bounds(origin !== null && origin !== void 0 ? origin : { x: 0, y: 0 }, { x: (origin ? origin.x : 0) + width, y: (origin ? origin.y : 0) + height });
+    }
 } // END class bounds
 
 /**
@@ -1831,7 +1843,8 @@ VertTuple.vtutils = {
  * @modified 2021-01-20 Added UID.
  * @modified 2022-02-02 Added the `destroy` method.
  * @modified 2022-02-02 Cleared the `Vector.toSVGString` function (deprecated). Use `drawutilssvg` instead.
- * @version  1.4.0
+ * @modified 2022-10-25 Added the `getOrthogonal` method.
+ * @version  1.5.0
  *
  * @file Vector
  * @public
@@ -1877,7 +1890,7 @@ class Vector extends VertTuple {
         return v;
     }
     /**
-     * The inverse of a vector is a vector witht the same magnitude but oppose direction.
+     * The inverse of a vector is a vector with the same magnitude but oppose direction.
      *
      * Please not that the origin of this vector changes here: a->b becomes b->a.
      *
@@ -1923,6 +1936,24 @@ class Vector extends VertTuple {
         // if we cast these lines infinitely in both directions, they intersect here:
         return new Vertex(this.a.x + a * (this.b.x - this.a.x), this.a.y + a * (this.b.y - this.a.y));
     }
+    /**
+     * Get the orthogonal "vector" of this vector (rotated by 90° clockwise).
+     *
+     * @name getOrthogonal
+     * @method getOrthogonal
+     * @return {Vector} A new vector with the same length that stands on this vector's point a.
+     * @instance
+     * @memberof Vector
+     **/
+    getOrthogonal() {
+        // Orthogonal of vector (0,0)->(x,y) is (0,0)->(-y,x)
+        const linePoint = this.a.clone();
+        const startPoint = this.b.clone().sub(this.a);
+        const tmp = startPoint.x;
+        startPoint.x = -startPoint.y;
+        startPoint.y = tmp;
+        return new Vector(linePoint, startPoint.add(this.a));
+    }
 }
 Vector.utils = {
     /**
@@ -1951,8 +1982,8 @@ Vector.utils = {
      * @param {number} scaleY  - the vertical scaling during draw.
      **/
     buildArrowHead: (zA, zB, headlen, scaleX, scaleY) => {
-        var angle = Math.atan2((zB.y - zA.y) * scaleY, (zB.x - zA.x) * scaleX);
-        var vertices = [];
+        const angle = Math.atan2((zB.y - zA.y) * scaleY, (zB.x - zA.x) * scaleX);
+        const vertices = [];
         vertices.push(new Vertex(zB.x * scaleX - headlen * Math.cos(angle), zB.y * scaleY - headlen * Math.sin(angle)));
         vertices.push(new Vertex(zB.x * scaleX - headlen * 1.35 * Math.cos(angle - Math.PI / 8), zB.y * scaleY - headlen * 1.35 * Math.sin(angle - Math.PI / 8)));
         vertices.push(new Vertex(zB.x * scaleX, zB.y * scaleY));
@@ -1983,7 +2014,8 @@ Vector.utils = {
  * @modified 2021-01-20 Added UID.
  * @modified 2022-02-02 Added the `destroy` method.
  * @modified 2022-02-02 Cleared the `toSVGPathData` function (deprecated). Use `drawutilssvg` instead.
- * @version 2.6.0
+ * @modified 2022-10-17 The `CubicBezierCurve` class now implements the new `PathSegment` interface.
+ * @version 2.7.1
  *
  * @file CubicBezierCurve
  * @public
@@ -2029,7 +2061,7 @@ class CubicBezierCurve {
         // An array of floats
         this.segmentLengths = [];
         // float
-        this.arcLength = null;
+        // this.arcLength = null;
         this.updateArcLengths();
     }
     /**
@@ -2461,6 +2493,28 @@ class CubicBezierCurve {
     clone() {
         return new CubicBezierCurve(this.getStartPoint().clone(), this.getEndPoint().clone(), this.getStartControlPoint().clone(), this.getEndControlPoint().clone());
     }
+    //---BEGIN PathSegment-------------------------
+    /**
+     * Get the tangent's end point at the start point of this segment.
+     *
+     * @method getStartTangent
+     * @memberof PathSegment
+     * @return {Vertex} The end point of the starting point's tangent.
+     */
+    getStartTangent() {
+        return this.startControlPoint;
+    }
+    /**
+     * Get the tangent's end point at the end point of this segment.
+     *
+     * @method getEndTangent
+     * @memberof PathSegment
+     * @return {Vertex} The end point of the ending point's tangent.
+     */
+    getEndTangent() {
+        return this.endControlPoint;
+    }
+    //---END PathSegment-------------------------
     /**
      * Check if this and the specified curve are equal.<br>
      * <br>
@@ -3874,7 +3928,9 @@ BezierPath.END_POINT = 3;
  * @modified 2020-03-23 Ported to Typescript from JS.
  * @modified 2020-12-04 The `intersection` function returns undefined if both lines are parallel.
  * @modified 2022-02-02 Added the `destroy` method.
- * @version  2.2.0
+ * @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.
+ * @version  2.3.0
  *
  * @file Line
  * @public
@@ -3915,8 +3971,9 @@ class Line extends VertTuple {
     // !!! DO NOT MOVE TO VertTuple
     intersection(line) {
         const denominator = this.denominator(line);
-        if (denominator == 0)
+        if (denominator == 0) {
             return null;
+        }
         let a = this.a.y - line.a.y;
         let b = this.a.x - line.a.x;
         const numerator1 = (line.b.x - line.a.x) * a - (line.b.y - line.a.y) * b;
@@ -3927,11 +3984,65 @@ class Line extends VertTuple {
         const x = this.a.x + a * (this.b.x - this.a.x);
         const y = this.a.y + a * (this.b.y - this.a.y);
         if (isNaN(a) || isNaN(x) || isNaN(y)) {
-            return undefined;
+            return null;
         }
         // if we cast these lines infinitely in both directions, they intersect here:
         return new Vertex(x, y);
     }
+    //--- Implement PathSegment ---
+    /**
+     * Get the start point of this path segment.
+     *
+     * @method getStartPoint
+     * @memberof PathSegment
+     * @return {Vertex} The start point of this path segment.
+     */
+    getStartPoint() {
+        return this.a;
+    }
+    /**
+     * Get the end point of this path segment.
+     *
+     * @method getEndPoint
+     * @memberof PathSegment
+     * @return {Vertex} The end point of this path segment.
+     */
+    getEndPoint() {
+        return this.b;
+    }
+    /**
+     * Get the tangent's end point at the start point of this segment.
+     *
+     * @method getStartTangent
+     * @memberof PathSegment
+     * @return {Vertex} The end point of the starting point's tangent.
+     */
+    getStartTangent() {
+        return this.b;
+    }
+    /**
+     * Get the tangent's end point at the end point of this segment.
+     *
+     * @method getEndTangent
+     * @memberof PathSegment
+     * @return {Vertex} The end point of the ending point's tangent.
+     */
+    getEndTangent() {
+        return this.a;
+    }
+    /**
+     * Inverse this path segment (in-place) and return this same instance (useful for chaining).
+     *
+     * @method reverse
+     * @memberof PathSegment
+     * @return {PathSegment} This path segment instance (for chaining).
+     */
+    reverse() {
+        var tmp = this.a;
+        this.a = this.b;
+        this.b = tmp;
+        return this;
+    }
 }
 
 /**
@@ -3945,7 +4056,10 @@ class Line extends VertTuple {
  * @modified 2021-01-20 Added UID.
  * @modified 2022-02-02 Added the `destroy` method.
  * @modified 2022-02-02 Cleared the `toSVGString` function (deprecated). Use `drawutilssvg` instead.
- * @version  1.3.0
+ * @modified 2022-08-15 Added the `containsPoint` function.
+ * @modified 2022-08-23 Added the `lineIntersection` function.
+ * @modified 2022-08-23 Added the `closestPoint` function.
+ * @version  1.4.0
  **/
 /**
  * @classdesc A simple circle: center point and radius.
@@ -3976,6 +4090,18 @@ class Circle {
         this.center = center;
         this.radius = radius;
     }
+    /**
+     * Check if the given circle is fully contained inside this circle.
+     *
+     * @method containsPoint
+     * @param {XYCoords} point - The point to check if it is contained in this circle.
+     * @instance
+     * @memberof Circle
+     * @return {boolean} `true` if the given point is inside this circle.
+     */
+    containsPoint(point) {
+        return this.center.distance(point) < this.radius;
+    }
     /**
      * Check if the given circle is fully contained inside this circle.
      *
@@ -4087,6 +4213,71 @@ class Circle {
         var y4 = p2.y + (h * (p1.x - p0.x)) / d;
         return new Line(new Vertex(x3, y3), new Vertex(x4, y4));
     }
+    /**
+     * Calculate the intersection points (if exists) with the given infinite line (defined by two points).
+     *
+     * @method lineIntersection
+     * @instance
+     * @memberof Circle
+     * @param {Vertex} a- The first of the two points defining the line.
+     * @param {Vertex} b - The second of the two points defining the line.
+     * @return {Line|null} The intersection points (as a line) or null if this circle does not intersect the line given.
+     **/
+    lineIntersection(a, b) {
+        // Based on the math from
+        //    https://mathworld.wolfram.com/Circle-LineIntersection.html
+        const interA = new Vertex();
+        const interB = new Vertex();
+        // First do a transformation, because the calculation is based on a cicle at (0,0)
+        const transA = new Vertex(a).sub(this.center);
+        const transB = new Vertex(b).sub(this.center);
+        const diff = transA.difference(transB);
+        // There is a special case if diff.y=0, where the intersection is not calcuatable.
+        // Use an non-zero epsilon here to approximate this case.
+        // TODO for the future: find a better solution
+        if (Math.abs(diff.y) === 0) {
+            diff.y = 0.000001;
+        }
+        const dist = transA.distance(transB);
+        const det = transA.x * transB.y - transA.y * transB.x;
+        const distSquared = dist * dist;
+        const radiusSquared = this.radius * this.radius;
+        // Check if circle and line have an intersection at all
+        if (radiusSquared * distSquared - det * det < 0) {
+            return null;
+        }
+        const belowSqrt = this.radius * this.radius * dist * dist - det * det;
+        const sqrt = Math.sqrt(belowSqrt);
+        interA.x = (det * diff.y + Math.sign(diff.y) * diff.x * sqrt) / distSquared;
+        interB.x = (det * diff.y - Math.sign(diff.y) * diff.x * sqrt) / distSquared;
+        interA.y = (-det * diff.x + Math.abs(diff.y) * sqrt) / distSquared;
+        interB.y = (-det * diff.x - Math.abs(diff.y) * sqrt) / distSquared;
+        return new Line(interA.add(this.center), interB.add(this.center));
+        // return new Line(interA, interB);
+    }
+    /**
+     * Calculate the closest point on the outline of this circle to the given point.
+     *
+     * @method closestPoint
+     * @instance
+     * @memberof Circle
+     * @param {XYCoords} vert - The point to find the closest circle point for.
+     * @return {Vertex} The closest point on this circle.
+     **/
+    closestPoint(vert) {
+        const lineIntersection = this.lineIntersection(this.center, vert);
+        if (!lineIntersection) {
+            // Note: this case should not happen as a radial from the center always intersect this circle.
+            return new Vertex();
+        }
+        // Return closed of both
+        if (lineIntersection.a.distance(vert) < lineIntersection.b.distance(vert)) {
+            return lineIntersection.a;
+        }
+        else {
+            return lineIntersection.b;
+        }
+    }
     /**
      * This function should invalidate any installed listeners and invalidate this object.
      * After calling this function the object might not hold valid data any more and
@@ -5608,7 +5799,10 @@ drawutilssvg.HEAD_XML = [
  * @modified 2022-03-27 Added the `texturedPoly` function.
  * @modified 2022-06-01 Tweaked the `polyline` function; lineWidth now scales with scale.x.
  * @modified 2022-07-26 Adding `alpha` to the `image(...)` function.
- * @version  1.12.2
+ * @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
  **/
 // Todo: rename this class to Drawutils?
 /**
@@ -5662,7 +5856,7 @@ class drawutils {
      * @param {DrawLibConfiguration} configuration - The new configuration settings to use for the next render methods.
      */
     setConfiguration(configuration) {
-        this.ctx.globalCompositeOperation = configuration.blendMode;
+        this.ctx.globalCompositeOperation = configuration.blendMode || "source-over";
     }
     /**
      * This method shouled be called each time the currently drawn `Drawable` changes.
@@ -6371,7 +6565,7 @@ class drawutils {
         }
         this.ctx.save();
         this.ctx.beginPath();
-        this.ctx.lineWidth = lineWidth * this.scale.x || 1.0;
+        this.ctx.lineWidth = (lineWidth || 1.0) * this.scale.x;
         this.ctx.moveTo(this.offset.x + vertices[0].x * this.scale.x, this.offset.y + vertices[0].y * this.scale.y);
         for (var i = 0; i < vertices.length; i++) {
             this.ctx.lineTo(this.offset.x + vertices[i].x * this.scale.x, this.offset.y + vertices[i].y * this.scale.y);
@@ -6488,14 +6682,20 @@ class drawutils {
     path(pathData, color, lineWidth, options) {
         const d = options && options.inplace ? pathData : drawutilssvg.copyPathData(pathData);
         drawutilssvg.transformPathData(d, this.offset, this.scale);
-        this.ctx.strokeStyle = color;
+        if (color) {
+            this.ctx.strokeStyle = color;
+        }
         this.ctx.lineWidth = lineWidth || 1;
         if (this.fillShapes) {
-            this.ctx.fillStyle = color;
+            if (color) {
+                this.ctx.fillStyle = color;
+            }
             this.ctx.fill(new Path2D(d.join(" ")));
         }
         else {
-            this.ctx.strokeStyle = color;
+            if (color) {
+                this.ctx.strokeStyle = color;
+            }
             this.ctx.stroke(new Path2D(d.join(" ")));
         }
     }
@@ -8280,7 +8480,8 @@ KeyHandler.KEY_CODES = {
  * @modified 2020-10-04 Added extended JSDoc comments.
  * @modified 2020-11-25 Added the `isTouchEvent` param.
  * @modified 2021-01-10 The mouse handler is now also working with SVGElements.
- * @version  1.2.0
+ * @modified 2022-08-16 Fixed a bug in the mouse button detection.
+ * @version  1.2.1
  *
  * @file MouseHandler
  * @public
@@ -8370,8 +8571,8 @@ class MouseHandler {
         // +-------------------------------------------------
         this.name = name;
         this.element = element;
-        this.mouseDownPos = null;
-        this.mouseDragPos = null;
+        this.mouseDownPos = undefined;
+        this.mouseDragPos = undefined;
         // this.mousePos     = null;
         this.mouseButton = -1;
         this.listeners = {};
@@ -8440,26 +8641,27 @@ class MouseHandler {
      * @memberof MouseHandler
      * @instance
      * @private
-     * @param {MouseEvent} e - The mouse event to get the relative position for.
+     * @param {MouseEvent} event - The mouse event to get the relative position for.
      * @param {string} eventName - The name of the firing event.
      * @return {XMouseEvent}
      */
-    mkParams(e, eventName) {
-        const rel = this.relPos(e);
-        const xEvent = e;
+    mkParams(event, eventName) {
+        var _a, _b;
+        const rel = this.relPos(event);
+        const xEvent = event;
         xEvent.params = {
             element: this.element,
             name: eventName,
             isTouchEvent: false,
             pos: rel,
-            button: this.mouseButton,
-            leftButton: this.mouseButton == 0,
-            middleButton: this.mouseButton == 1,
-            rightButton: this.mouseButton == 2,
-            mouseDownPos: this.mouseDownPos,
-            draggedFrom: this.mouseDragPos,
+            button: event.button,
+            leftButton: event.button === 0,
+            middleButton: event.button === 1,
+            rightButton: event.button === 2,
+            mouseDownPos: (_a = this.mouseDownPos) !== null && _a !== void 0 ? _a : { x: NaN, y: NaN },
+            draggedFrom: (_b = this.mouseDragPos) !== null && _b !== void 0 ? _b : { x: NaN, y: NaN },
             wasDragged: this.mouseDownPos != null && (this.mouseDownPos.x != rel.x || this.mouseDownPos.y != rel.y),
-            dragAmount: this.mouseDownPos != null ? { x: rel.x - this.mouseDragPos.x, y: rel.y - this.mouseDragPos.y } : { x: 0, y: 0 }
+            dragAmount: this.mouseDragPos != null ? { x: rel.x - this.mouseDragPos.x, y: rel.y - this.mouseDragPos.y } : { x: 0, y: 0 }
         };
         return xEvent;
     }
@@ -9893,7 +10095,9 @@ VEllipseSector.ellipseSectorUtils = {
  * @modified 2021-04-25 Extending `remove` to accept arrays of drawables.
  * @modified 2021-11-16 Adding the `PBText` drawable.
  * @modified 2022-08-01 Added `title` to the params.
- * @version  1.15.1
+ * @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.
+ * @version  1.16.0
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.
@@ -9989,6 +10193,7 @@ class PlotBoilerplate {
      * @param {string=} [config.title=null] - Specify any hover tile here. It will be attached as a `title` attribute to the most elevated element.
      */
     constructor(config) {
+        var _a, _b;
         /**
          * A discrete timestamp to identify single render cycles.
          * Note that using system time milliseconds is not a safe way to identify render frames, as on modern powerful machines
@@ -10145,6 +10350,9 @@ class PlotBoilerplate {
                 lineWidth: 1,
                 fill: true,
                 anchor: true
+            },
+            origin: {
+                color: "#000000"
             }
         }; // END drawConfig
         // +---------------------------------------------------------------------------------
@@ -10163,6 +10371,7 @@ class PlotBoilerplate {
                 this.config.enableGL = false;
             }
             if (this.config.enableGL) {
+                // Override the case 'null' here. If GL is not supported, well then nothing works.
                 const ctx = this.canvas.getContext("webgl"); // webgl-experimental?
                 this.draw = new drawutilsgl(ctx, false);
                 // PROBLEM: same instance of fill and draw when using WebGL.
@@ -10171,6 +10380,7 @@ class PlotBoilerplate {
                 console.warn("Initialized with experimental mode enableGL=true. Note that this is not yet fully implemented.");
             }
             else {
+                // Override the case 'null' here. If context creation is not supported, well then nothing works.
                 const ctx = this.canvas.getContext("2d");
                 this.draw = new drawutils(ctx, false);
                 this.fill = new drawutils(ctx, true);
@@ -10207,8 +10417,8 @@ class PlotBoilerplate {
         if (config.title) {
             this.eventCatcher.setAttribute("title", config.title);
         }
-        this.draw.scale.set(this.config.scaleX, this.config.scaleY);
-        this.fill.scale.set(this.config.scaleX, this.config.scaleY);
+        this.draw.scale.set((_a = this.config.scaleX) !== null && _a !== void 0 ? _a : 1.0, this.config.scaleY);
+        this.fill.scale.set((_b = this.config.scaleX) !== null && _b !== void 0 ? _b : 1.0, this.config.scaleY);
         this.vertices = [];
         this.selectPolygon = null;
         this.draggedElements = [];
@@ -10253,11 +10463,13 @@ class PlotBoilerplate {
         var tosvgFill = tosvgDraw.copyInstance(true); // fillShapes=true
         tosvgDraw.beginDrawCycle(0);
         tosvgFill.beginDrawCycle(0);
-        if (pb.config.preClear)
+        if (pb.config.preClear) {
             pb.config.preClear();
-        tosvgDraw.clear(pb.config.backgroundColor);
-        if (pb.config.preDraw)
+        }
+        tosvgDraw.clear(pb.config.backgroundColor || "white");
+        if (pb.config.preDraw) {
             pb.config.preDraw(tosvgDraw, tosvgFill);
+        }
         pb.drawAll(0, tosvgDraw, tosvgFill);
         pb.drawVertices(0, tosvgDraw);
         if (pb.config.postDraw)
@@ -10268,7 +10480,8 @@ class PlotBoilerplate {
         //    https://caniuse.com/xml-serializer
         var serializer = new XMLSerializer();
         var svgCode = serializer.serializeToString(svgNode);
-        var blob = new Blob([svgCode], { type: "image/svg;charset=utf-8" });
+        // Add: '<?xml version="1.0" encoding="utf-8"?>\n' ?
+        var blob = new Blob(['<?xml version="1.0" encoding="utf-8"?>\n' + svgCode], { type: "image/svg;charset=utf-8" });
         // See documentation for FileSaver.js for usage.
         //    https://github.com/eligrey/FileSaver.js
         if (typeof globalThis["saveAs"] !== "function")
@@ -10343,11 +10556,12 @@ class PlotBoilerplate {
      * @private
      **/
     updateCSSscale() {
+        var _a, _b, _c, _d;
         if (this.config.cssUniformScale) {
-            PlotBoilerplate.utils.setCSSscale(this.canvas, this.config.cssScaleX, this.config.cssScaleX);
+            PlotBoilerplate.utils.setCSSscale(this.canvas, (_a = this.config.cssScaleX) !== null && _a !== void 0 ? _a : 1.0, (_b = this.config.cssScaleX) !== null && _b !== void 0 ? _b : 1.0);
         }
         else {
-            PlotBoilerplate.utils.setCSSscale(this.canvas, this.config.cssScaleX, this.config.cssScaleY);
+            PlotBoilerplate.utils.setCSSscale(this.canvas, (_c = this.config.cssScaleX) !== null && _c !== void 0 ? _c : 1.0, (_d = this.config.cssScaleY) !== null && _d !== void 0 ? _d : 1.0);
         }
     }
     /**
@@ -10620,7 +10834,8 @@ class PlotBoilerplate {
      * @return The vertex near the given position or undefined if none was found there.
      **/
     getVertexNear(pixelPosition, pixelTolerance) {
-        var p = this.locatePointNear(this.transformMousePosition(pixelPosition.x, pixelPosition.y), pixelTolerance / Math.min(this.config.cssScaleX, this.config.cssScaleY));
+        var _a, _b;
+        var p = this.locatePointNear(this.transformMousePosition(pixelPosition.x, pixelPosition.y), pixelTolerance / Math.min((_a = this.config.cssScaleX) !== null && _a !== void 0 ? _a : 1.0, (_b = this.config.cssScaleY) !== null && _b !== void 0 ? _b : 1.0));
         if (p && p.typeName == "vertex") {
             return this.vertices[p.vindex];
         }
@@ -10686,7 +10901,7 @@ class PlotBoilerplate {
     drawOrigin(draw) {
         // Add a crosshair to mark the origin
         draw.setCurrentId("origin");
-        draw.crosshair({ x: 0, y: 0 }, 10, "#000000");
+        draw.crosshair({ x: 0, y: 0 }, 10, this.drawConfig.origin.color);
     }
     /**
      * This is just a tiny helper function to determine the render color of vertices.
@@ -10903,10 +11118,10 @@ class PlotBoilerplate {
         else {
             console.error("Cannot draw object. Unknown class.");
         }
-        draw.setCurrentClassName(null);
-        draw.setCurrentId(null);
-        fill.setCurrentClassName(null);
-        fill.setCurrentId(null);
+        draw.setCurrentClassName(undefined);
+        draw.setCurrentId(undefined);
+        fill.setCurrentClassName(undefined);
+        fill.setCurrentId(undefined);
     }
     /**
      * Draw the select-polygon (if there is one).
@@ -11009,7 +11224,7 @@ class PlotBoilerplate {
      **/
     clear() {
         // Note that elements might have an alpha channel. Clear the scene first.
-        this.draw.clear(this.config.backgroundColor);
+        this.draw.clear(this.config.backgroundColor || "white");
     }
     /**
      * Clear the selection.<br>
@@ -11039,7 +11254,8 @@ class PlotBoilerplate {
      * @return {Bounds} The current viewport.
      **/
     viewport() {
-        return new Bounds(this.transformMousePosition(0, 0), this.transformMousePosition(this.canvasSize.width * this.config.cssScaleX, this.canvasSize.height * this.config.cssScaleY));
+        var _a, _b;
+        return new Bounds(this.transformMousePosition(0, 0), this.transformMousePosition(this.canvasSize.width * ((_a = this.config.cssScaleX) !== null && _a !== void 0 ? _a : 1.0), this.canvasSize.height * ((_b = this.config.cssScaleY) !== null && _b !== void 0 ? _b : 1.0)));
     }
     /**
      * Trigger the saveFile.hook.
@@ -11087,10 +11303,12 @@ class PlotBoilerplate {
      * @return {void}
      **/
     resizeCanvas() {
+        var _a, _b, _c, _d, _e, _f;
         const _self = this;
         const _setSize = (w, h) => {
-            w *= _self.config.canvasWidthFactor;
-            h *= _self.config.canvasHeightFactor;
+            var _a, _b;
+            w *= (_a = _self.config.canvasWidthFactor) !== null && _a !== void 0 ? _a : 1.0;
+            h *= (_b = _self.config.canvasHeightFactor) !== null && _b !== void 0 ? _b : 1.0;
             _self.canvasSize.width = w;
             _self.canvasSize.height = h;
             if (_self.canvas instanceof HTMLCanvasElement) {
@@ -11119,8 +11337,8 @@ class PlotBoilerplate {
             var width = globalThis.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
             var height = globalThis.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
             _self.canvas.style.position = "absolute";
-            _self.canvas.style.width = _self.config.canvasWidthFactor * width + "px";
-            _self.canvas.style.height = _self.config.canvasWidthFactor * height + "px";
+            _self.canvas.style.width = ((_a = _self.config.canvasWidthFactor) !== null && _a !== void 0 ? _a : 1.0) * width + "px";
+            _self.canvas.style.height = ((_b = _self.config.canvasWidthFactor) !== null && _b !== void 0 ? _b : 1.0) * height + "px";
             _self.canvas.style.top = "0px";
             _self.canvas.style.left = "0px";
             _setSize(width, height);
@@ -11129,16 +11347,16 @@ class PlotBoilerplate {
             // Set editor size
             _self.canvas.style.position = "absolute";
             const space = this.getAvailableContainerSpace();
-            _self.canvas.style.width = _self.config.canvasWidthFactor * space.width + "px";
-            _self.canvas.style.height = _self.config.canvasHeightFactor * space.height + "px";
-            _self.canvas.style.top = null;
-            _self.canvas.style.left = null;
+            _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";
+            _self.canvas.style.top = "";
+            _self.canvas.style.left = "";
             _setSize(space.width, space.height);
         }
         else {
-            _self.canvas.style.width = null;
-            _self.canvas.style.height = null;
-            _setSize(_self.config.defaultCanvasWidth, _self.config.defaultCanvasHeight);
+            _self.canvas.style.width = "";
+            _self.canvas.style.height = "";
+            _setSize((_e = _self.config.defaultCanvasWidth) !== null && _e !== void 0 ? _e : 1024, (_f = _self.config.defaultCanvasHeight) !== null && _f !== void 0 ? _f : 768);
         }
         if (_self.config.redrawOnResize)
             _self.redraw();