plotboilerplate 1.28.0 → 1.28.1

package/src/_esm/src/ts/PlotBoilerplate.js

@@ -1,2340 +0,0 @@
-/**
- * @author   Ikaros Kappler
- * @date     2018-10-23
- * @modified 2018-11-19 Added multi-select and multi-drag.
- * @modified 2018-12-04 Added basic SVG export.
- * @modified 2018-12-09 Extended the constructor (canvas).
- * @modified 2018-12-18 Added the config.redrawOnResize param.
- * @modified 2018-12-18 Added the config.defaultCanvas{Width,Height} params.
- * @modified 2018-12-19 Added CSS scaling.
- * @modified 2018-12-28 Removed the unused 'drawLabel' param. Added the 'enableMouse' and 'enableKeys' params.
- * @modified 2018-12-29 Added the 'drawOrigin' param.
- * @modified 2018-12-29 Renamed the 'autoCenterOffset' param to 'autoAdjustOffset'. Added the params 'offsetAdjustXPercent' and 'offsetAdjustYPercent'.
- * @modified 2019-01-14 Added params 'drawBezierHandleLines' and 'drawBezierHandlePoints'. Added the 'redraw' praam to the add() function.
- * @modified 2019-01-16 Added params 'drawHandleLines' and 'drawHandlePoints'. Added the new params to the dat.gui interface.
- * @modified 2019-01-30 Added the 'Vector' type (extending the Line class).
- * @modified 2019-01-30 Added the 'PBImage' type (a wrapper for images).
- * @modified 2019-02-02 Added the 'canvasWidthFactor' and 'canvasHeightFactor' params.
- * @modified 2019-02-03 Removed the drawBackgroundImage() function, with had no purpose at all. Just add an image to the drawables-list.
- * @modified 2019-02-06 Vertices (instace of Vertex) can now be added. Added the 'draggable' attribute to the vertex attributes.
- * @modified 2019-02-10 Fixed a draggable-bug in PBImage handling (scaling was not possible).
- * @modified 2019-02-10 Added the 'enableTouch' option (default is true).
- * @modified 2019-02-14 Added the console for debugging (setConsole(object)).
- * @modified 2019-02-19 Added two new constants: DEFAULT_CLICK_TOLERANCE and DEFAULT_TOUCH_TOLERANCE.
- * @modified 2019-02-19 Added the second param to the locatePointNear(Vertex,Number) function.
- * @modified 2019-02-20 Removed the 'loadFile' entry from the GUI as it was experimental and never in use.
- * @modified 2019-02-23 Removed the 'rebuild' function as it had no purpose.
- * @modified 2019-02-23 Added scaling of the click-/touch-tolerance with the CSS scale.
- * @modified 2019-03-23 Added JSDoc tags. Changed the default value of config.drawOrigin to false.
- * @modified 2019-04-03 Fixed the touch-drag position detection for canvas elements that are not located at document position (0,0).
- * @modified 2019-04-03 Tweaked the fit-to-parent function to work with paddings and borders.
- * @modified 2019-04-28 Added the preClear callback param (called before the canvas was cleared on redraw and before any elements are drawn).
- * @modified 2019-09-18 Added basics for WebGL support (strictly experimental).
- * @modified 2019-10-03 Added the .beginDrawCycle call in the redraw function.
- * @modified 2019-11-06 Added fetch.num, fetch.val, fetch.bool, fetch.func functions.
- * @modified 2019-11-13 Fixed an issue with the mouse-sensitive area around vertices (were affected by zoom).
- * @modified 2019-11-13 Added the 'enableMouseWheel' param.
- * @modified 2019-11-18 Added the Triangle class as a regular drawable element.
- * @modified 2019-11-18 The add function now works with arrays, too.
- * @modified 2019-11-18 Added the _handleColor helper function to determine the render color of non-draggable vertices.
- * @modified 2019-11-19 Fixed a bug in the resizeCanvas function; retina resolution was not possible.
- * @modified 2019-12-04 Added relative positioned zooming.
- * @modified 2019-12-04 Added offsetX and offsetY params.
- * @modified 2019-12-04 Added an 'Set to fullsize retina' button to the GUI config.
- * @modified 2019-12-07 Added the drawConfig for lines, polygons, ellipse, triangles, bezier curves and image control lines.
- * @modified 2019-12-08 Fixed a css scale bug in the viewport() function.
- * @modified 2019-12-08 Added the drawconfig UI panel (line colors and line widths).
- * @modified 2020-02-06 Added handling for the end- and end-control-points of non-cirular Bézier paths (was still missing).
- * @modified 2020-02-06 Fixed a drag-amount bug in the move handling of end points of Bezier paths (control points was not properly moved when non circular).
- * @modified 2020-03-28 Ported this class from vanilla-JS to Typescript.
- * @modified 2020-03-29 Fixed the enableSVGExport flag (read enableEport before).
- * @modified 2020-05-09 Included the Cirlcle class.
- * @modified 2020-06-22 Added the rasterScaleX and rasterScaleY config params.
- * @modified 2020-06-03 Fixed the selectedVerticesOnPolyon(Polygon) function: non-selectable vertices were selected too, before.
- * @modified 2020-07-06 Replacing Touchy.js by AlloyFinger.js
- * @modified 2020-07-27 Added the getVertexNear(XYCoords,number) function
- * @modified 2020-07-27 Extended the remove(Drawable) function: vertices are now removed, too.
- * @modified 2020-07-28 Added PlotBoilerplate.revertMousePosition(number,number) –  the inverse function of transformMousePosition(...).
- * @modified 2020-07-31 Added PlotBoilerplate.getDraggedElementCount() to check wether any elements are currently being dragged.
- * @modified 2020-08-19 Added the VertexAttributes.visible attribute to make vertices invisible.
- * @modified 2020-11-17 Added pure click handling (no dragEnd and !wasMoved jiggliny any more) to the PlotBoilerplate.
- * @modified 2020-12-11 Added the `removeAll(boolean)` function.
- * @modified 2020-12-17 Added the `CircleSector` drawable.
- * @modified 2021-01-04 Avoiding multiple redraw call on adding multiple Drawables (array).
- * @modified 2021-01-08 Added param `draw:DraLib<void>` to the methods `drawVertices`, `drawGrid` and `drawSelectPolygon`.
- * @modified 2021-01-08 Added the customizable `drawAll(...)` function.
- * @modified 2021-01-09 Added the `drawDrawable(...)` function.
- * @modified 2021-01-10 Added the `eventCatcher` element (used to track mouse events on SVGs).
- * @modified 2021-01-26 Fixed SVG resizing.
- * @modified 2021-01-26 Replaced the old SVGBuilder by the new `drawutilssvg` library.
- * @modified 2021-02-08 Fixed a lot of es2015 compatibility issues.
- * @modified 2021-02-18 Adding `adjustOffset(boolean)` function.
- * @modified 2021-03-01 Updated the `PlotBoilerplate.draw(...)` function: ellipses are now rotate-able.
- * @modified 2021-03-03 Added the `VEllipseSector` drawable.
- * @modified 2021-03-29 Clearing `currentClassName` and `currentId` after drawing each drawable.
- * @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.
- * @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.
- * @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).
- * @modified 2024-07-08 Adding `PlotBoilerplate.getGUI()` to retrieve the GUI instance.
- * @modified 2024-08-25 Extending main class `PlotBoilerplate` optional param `isBackdropFiltersEnabled`.
- * @modified 2024-12-02 Adding the `triggerRedraw` to the `removeAll` method.
- * @modified 2025-05-07 Changing the return type of `removeVertex` from `void` to `boolean`.
- * @modified 2025-05-07 Handling content changes now with `contentChangeListeners`.
- * @modified 2025-05-07 Added `PlogBoilerplate.addContentChangeListener` and `.removeContentChangeListener`.
- * @modified 2025-05-07 Moving full vectors now by default when vector point a is moved.
- * @modified 2025-05-20 Applying `lineWith` parameter in the draw routine for vectors (had been missing).
- * @modified 2026-03-13 Changed visibility of `setZoom` and `setOffset` to public. There was no good reason to have the private.
- *
- * @version  1.21.2
- *
- * @file PlotBoilerplate
- * @fileoverview The main class.
- * @public
- **/
-var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
-    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
-    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
-};
-var _a;
-import AlloyFinger from "alloyfinger-typescript";
-import { drawutils } from "./draw";
-import { drawutilsgl } from "./drawgl";
-import { drawutilssvg } from "./drawutilssvg";
-import { BezierPath } from "./BezierPath";
-import { Bounds } from "./Bounds";
-import { Circle } from "./Circle";
-import { CircleSector } from "./CircleSector";
-import { Grid } from "./Grid";
-import { KeyHandler } from "./KeyHandler";
-import { Line } from "./Line";
-import { MouseHandler } from "./MouseHandler";
-import { PBImage } from "./PBImage";
-import { Polygon } from "./Polygon";
-import { Triangle } from "./Triangle";
-import { VEllipse } from "./VEllipse";
-import { VEllipseSector } from "./VEllipseSector";
-import { Vector } from "./Vector";
-import { Vertex } from "./Vertex";
-import { VertexAttr } from "./VertexAttr";
-import { PBText } from "./PBText";
-/**
- * @classdesc The main class of the PlotBoilerplate.
- *
- * @requires Vertex
- * @requires Line
- * @requires Vector
- * @requires Polygon
- * @requires PBImage
- * @requires VEllipse
- * @requires Circle
- * @requires MouseHandler
- * @requires KeyHandler
- * @requires VertexAttr
- * @requires CubicBezierCurve
- * @requires BezierPath
- * @requires Drawable
- * @requires DrawConfig
- * @requires IHooks
- * @requires PBParams
- * @requires Triangle
- * @requires drawutils
- * @requires drawutilsgl
- * @requires SVGSerializable
- * @requires XYCoords
- * @requires XYDimension
- */
-export class PlotBoilerplate {
-    /**
-     * The constructor.
-     *
-     * @constructor
-     * @name PlotBoilerplate
-     * @public
-     * @param {object} config={} - The configuration.
-     * @param {HTMLCanvasElement} config.canvas - Your canvas element in the DOM (required).
-     * @param {boolean=} [config.fullSize=true] - If set to true the canvas will gain full window size.
-     * @param {boolean=} [config.fitToParent=true] - If set to true the canvas will gain the size of its parent container (overrides fullSize).
-     * @param {number=}  [config.scaleX=1.0] - The initial x-zoom. Default is 1.0.
-     * @param {number=}  [config.scaleY=1.0] - The initial y-zoom. Default is 1.0.
-     * @param {number=}  [config.offsetX=1.0] - The initial x-offset. Default is 0.0. Note that autoAdjustOffset=true overrides these values.
-     * @param {number=}  [config.offsetY=1.0] - The initial y-offset. Default is 0.0. Note that autoAdjustOffset=true overrides these values.
-     * @param {boolean=} [config.rasterGrid=true] - If set to true the background grid will be drawn rastered.
-     * @param {boolean=} [config.rasterScaleX=1.0] - Define the default horizontal raster scale (default=1.0).
-     * @param {boolean=} [config.rasterScaleY=1.0] - Define the default vertical raster scale (default=1.0).
-     * @param {number=}  [config.rasterAdjustFactor=1.0] - The exponential limit for wrapping down the grid. (2.0 means: halve the grid each 2.0*n zoom step).
-     * @param {boolean=} [config.drawOrigin=false] - Draw a crosshair at (0,0).
-     * @param {boolean=} [config.autoAdjustOffset=true] -  When set to true then the origin of the XY plane will
-     *                         be re-adjusted automatically (see the params
-     *                         offsetAdjust{X,Y}Percent for more).
-     * @param {number=}  [config.offsetAdjustXPercent=50] - The x-fallback position for the origin after
-     *                         resizing the canvas.
-     * @param {number=}  [config.offsetAdjustYPercent=50] - The y-fallback position for the origin after
-     *                         resizing the canvas.
-     * @param {number=}  [config.defaultCanvasWidth=1024] - The canvas size fallback (width) if no automatic resizing
-     *                         is switched on.
-     * @param {number=}  [config.defaultCanvasHeight=768] - The canvas size fallback (height) if no automatic resizing
-     *                         is switched on.
-     * @param {number=}  [config.canvasWidthFactor=1.0] - Scaling factor (width) upon the canvas size.
-     *                         In combination with cssScale{X,Y} this can be used to obtain
-     *                         sub pixel resolutions for retina displays.
-     * @param {number=}  [config.canvasHeightFactor=1.0] - Scaling factor (height) upon the canvas size.
-     *                         In combination with cssScale{X,Y} this can be used to obtain
-     *                         sub pixel resolutions for retina displays.
-     * @param {number=}  [config.cssScaleX=1.0] - Visually resize the canvas (horizontally) using CSS transforms (scale).
-     * @param {number=}  [config.cssScaleY=1.0] - Visually resize the canvas (vertically) using CSS transforms (scale).
-     * @param {boolan=}  [config.cssUniformScale=true] - CSS scale x and y obtaining aspect ratio.
-     * @param {boolean=} [config.autoDetectRetina=true] - When set to true (default) the canvas will try to use the display's pixel ratio.
-     * @param {string=}  [config.backgroundColor=#ffffff] - The backround color.
-     * @param {boolean=} [config.redrawOnResize=true] - Switch auto-redrawing on resize on/off (some applications
-     *                         might want to prevent automatic redrawing to avoid data loss from the draw buffer).
-     * @param {boolean=} [config.drawBezierHandleLines=true] - Indicates if Bézier curve handles should be drawn (used for
-     *                         editors, no required in pure visualizations).
-     * @param {boolean=} [config.drawBezierHandlePoints=true] - Indicates if Bézier curve handle points should be drawn.
-     * @param {function=} [config.preClear=null] - A callback function that will be triggered just before the
-     *                         draw function clears the canvas (before anything else was drawn).
-     * @param {function=} [config.preDraw=null] - A callback function that will be triggered just before the draw
-     *                         function starts.
-     * @param {function=} [config.postDraw=null] - A callback function that will be triggered right after the drawing
-     *                         process finished.
-     * @param {boolean=} [config.enableMouse=true] - Indicates if the application should handle mouse events for you.
-     * @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.
-     * @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, drawConfig) {
-        var _b, _c;
-        /**
-         * A list of content change listeners.
-         */
-        this.contentChangeListeners = [];
-        /**
-         * 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
-         * multiple frames might be rendered within each millisecond.
-         * @member {number}
-         * @memberof plotboilerplate
-         * @instance
-         * @private
-         */
-        this.renderTime = 0;
-        /**
-         * A storage variable for retrieving the GUI instance once it was created.
-         */
-        this._gui = null;
-        // This should be in some static block ...
-        VertexAttr.model = {
-            bezierAutoAdjust: false,
-            renderTime: 0,
-            selectable: true,
-            isSelected: false,
-            draggable: true,
-            visible: true
-        };
-        if (typeof config.canvas === "undefined") {
-            throw "No canvas specified.";
-        }
-        /**
-         * A global config that's attached to the dat.gui control interface.
-         *
-         * @member {Object}
-         * @memberof PlotBoilerplate
-         * @instance
-         */
-        const f = PlotBoilerplate.utils.fetch;
-        this.config = {
-            canvas: config.canvas,
-            fullSize: f.val(config, "fullSize", true),
-            fitToParent: f.bool(config, "fitToParent", true),
-            scaleX: f.num(config, "scaleX", 1.0),
-            scaleY: f.num(config, "scaleY", 1.0),
-            offsetX: f.num(config, "offsetX", 0.0),
-            offsetY: f.num(config, "offsetY", 0.0),
-            rasterGrid: f.bool(config, "rasterGrid", true),
-            drawRaster: f.bool(config, "drawRaster", true),
-            rasterScaleX: f.num(config, "rasterScaleX", 1.0),
-            rasterScaleY: f.num(config, "rasterScaleY", 1.0),
-            rasterAdjustFactor: f.num(config, "rasterAdjustdFactror", 2.0),
-            drawOrigin: f.bool(config, "drawOrigin", false),
-            autoAdjustOffset: f.val(config, "autoAdjustOffset", true),
-            offsetAdjustXPercent: f.num(config, "offsetAdjustXPercent", 50),
-            offsetAdjustYPercent: f.num(config, "offsetAdjustYPercent", 50),
-            backgroundColor: config.backgroundColor || "#ffffff",
-            redrawOnResize: f.bool(config, "redrawOnResize", true),
-            defaultCanvasWidth: f.num(config, "defaultCanvasWidth", PlotBoilerplate.DEFAULT_CANVAS_WIDTH),
-            defaultCanvasHeight: f.num(config, "defaultCanvasHeight", PlotBoilerplate.DEFAULT_CANVAS_HEIGHT),
-            canvasWidthFactor: f.num(config, "canvasWidthFactor", 1.0),
-            canvasHeightFactor: f.num(config, "canvasHeightFactor", 1.0),
-            cssScaleX: f.num(config, "cssScaleX", 1.0),
-            cssScaleY: f.num(config, "cssScaleY", 1.0),
-            cssUniformScale: f.bool(config, "cssUniformScale", true),
-            saveFile: () => {
-                _self.hooks.saveFile(_self);
-            },
-            setToRetina: () => {
-                _self._setToRetina();
-            },
-            autoDetectRetina: f.bool(config, "autoDetectRetina", true),
-            enableSVGExport: f.bool(config, "enableSVGExport", true),
-            // Listeners/observers
-            preClear: f.func(config, "preClear", null),
-            preDraw: f.func(config, "preDraw", null),
-            postDraw: f.func(config, "postDraw", null),
-            // Interaction
-            enableMouse: f.bool(config, "enableMouse", true),
-            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),
-            isBackdropFiltersEnabled: f.bool(config, "isBackdropFiltersEnabled", true)
-        }; // END confog
-        /**
-         * Configuration for drawing things.
-         *
-         * @member {Object}
-         * @memberof PlotBoilerplate
-         * @instance
-         */
-        this.drawConfig = {
-            drawVertices: true,
-            drawBezierHandleLines: f.bool(config, "drawBezierHandleLines", true),
-            drawBezierHandlePoints: f.bool(config, "drawBezierHandlePoints", true),
-            drawHandleLines: f.bool(config, "drawHandleLines", true),
-            drawHandlePoints: f.bool(config, "drawHandlePoints", true),
-            drawGrid: f.bool(config, "drawGrid", true),
-            drawRaster: f.bool(config, "drawRaster", true),
-            bezier: {
-                color: "#00a822",
-                lineWidth: 2,
-                handleLine: {
-                    color: "rgba(180,180,180,0.5)",
-                    lineWidth: 1
-                },
-                pathVertex: {
-                    color: "#B400FF",
-                    lineWidth: 1,
-                    fill: true
-                },
-                controlVertex: {
-                    color: "#B8D438",
-                    lineWidth: 1,
-                    fill: true
-                }
-            },
-            // bezierPath: {
-            //   color: "#0022a8",
-            //   lineWidth: 1
-            // },
-            polygon: {
-                color: "#0022a8",
-                lineWidth: 1
-            },
-            triangle: {
-                color: "#6600ff",
-                lineWidth: 1
-            },
-            ellipse: {
-                color: "#2222a8",
-                lineWidth: 1
-            },
-            ellipseSector: {
-                color: "#a822a8",
-                lineWidth: 2
-            },
-            circle: {
-                color: "#22a8a8",
-                lineWidth: 2
-            },
-            circleSector: {
-                color: "#2280a8",
-                lineWidth: 1
-            },
-            vertex: {
-                color: "#a8a8a8",
-                lineWidth: 1
-            },
-            selectedVertex: {
-                color: "#c08000",
-                lineWidth: 2
-            },
-            line: {
-                color: "#a844a8",
-                lineWidth: 1
-            },
-            vector: {
-                color: "#ff44a8",
-                lineWidth: 1
-            },
-            image: {
-                color: "#a8a8a8",
-                lineWidth: 1
-            },
-            text: {
-                color: "rgba(192,0,128,0.5)",
-                lineWidth: 1,
-                fill: true,
-                anchor: true
-            },
-            origin: {
-                color: "#000000"
-            }
-        }; // END drawConfig
-        // +---------------------------------------------------------------------------------
-        // | Object members.
-        // +-------------------------------
-        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;
-        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;
-            this.eventCatcher = this.canvas;
-            if (this.config.enableGL && typeof drawutilsgl === "undefined") {
-                console.warn(`Cannot use webgl. Package was compiled without experimental gl support. Please use plotboilerplate-glsupport.min.js instead.`);
-                console.warn(`Disabling GL and falling back to Canvas2D.`);
-                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.
-                //          Shader program cannot be duplicated on the same context.
-                this.fill = this.draw.copyInstance(true);
-                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);
-            }
-        }
-        else if (canvasElement.tagName.toLowerCase() === "svg") {
-            if (typeof drawutilssvg === "undefined")
-                throw `The svg draw library is not yet integrated part of PlotBoilerplate. Please include ./src/js/utils/helpers/drawutils.svg into your document.`;
-            this.canvas = canvasElement;
-            this.draw = new drawutilssvg(this.canvas, new Vertex(), // offset
-            new Vertex(), // scale
-            this.canvasSize, false, // fillShapes=false
-            this.drawConfig, false // isSecondary=false
-            );
-            this.fill = this.draw.copyInstance(true); // fillShapes=true
-            if (this.canvas.parentElement) {
-                this.eventCatcher = document.createElement("div");
-                this.eventCatcher.style.position = "absolute";
-                this.eventCatcher.style.left = "0";
-                this.eventCatcher.style.top = "0";
-                this.eventCatcher.style.cursor = "pointer";
-                this.canvas.parentElement.style.position = "relative";
-                this.canvas.parentElement.appendChild(this.eventCatcher);
-            }
-            else {
-                this.eventCatcher = document.body;
-            }
-        }
-        else {
-            throw "Element is neither a canvas nor an svg element.";
-        }
-        // At this point the event cacher element is deinfed and located at highest elevation.
-        // Set `title` attribut?
-        if (config.title) {
-            this.eventCatcher.setAttribute("title", config.title);
-        }
-        this.draw.scale.set((_b = this.config.scaleX) !== null && _b !== void 0 ? _b : 1.0, this.config.scaleY);
-        this.fill.scale.set((_c = this.config.scaleX) !== null && _c !== void 0 ? _c : 1.0, this.config.scaleY);
-        this.vertices = [];
-        this.selectPolygon = null;
-        this.draggedElements = [];
-        this.drawables = [];
-        this.console = console;
-        this.hooks = {
-            // This is changable from the outside
-            saveFile: PlotBoilerplate._saveFile
-        };
-        var _self = this;
-        globalThis.addEventListener("resize", () => _self.resizeCanvas());
-        this.resizeCanvas();
-        if (config.autoDetectRetina) {
-            this._setToRetina();
-        }
-        this.installInputListeners();
-        // Apply the configured CSS scale.
-        this.updateCSSscale();
-        // Init
-        this.redraw();
-        // Gain focus
-        this.canvas.focus();
-    } // END constructor
-    /**
-     * This function opens a save-as file dialog and – once an output file is
-     * selected – stores the current canvas contents as an SVG image.
-     *
-     * It is the default hook for saving files and can be overwritten.
-     *
-     * @method _saveFile
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     * @private
-     **/
-    static _saveFile(pb) {
-        // Create fake SVG node
-        const svgNode = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        // Draw everything to fake node.
-        var tosvgDraw = new drawutilssvg(svgNode, pb.draw.offset, pb.draw.scale, pb.canvasSize, false, // fillShapes=false
-        pb.drawConfig);
-        var tosvgFill = tosvgDraw.copyInstance(true); // fillShapes=true
-        tosvgDraw.beginDrawCycle(0);
-        tosvgFill.beginDrawCycle(0);
-        if (pb.config.preClear) {
-            pb.config.preClear();
-        }
-        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)
-            pb.config.postDraw(tosvgDraw, tosvgFill);
-        tosvgDraw.endDrawCycle(0);
-        tosvgFill.endDrawCycle(0);
-        // Full support in all browsers \o/
-        //    https://caniuse.com/xml-serializer
-        var serializer = new XMLSerializer();
-        var svgCode = serializer.serializeToString(svgNode);
-        // 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") {
-            throw "Cannot save file; did you load the ./utils/savefile helper function and the eligrey/SaveFile library?";
-        }
-        var _saveAs = globalThis["saveAs"];
-        _saveAs(blob, "plotboilerplate.svg");
-    }
-    /**
-     * This function sets the canvas resolution to factor 2.0 (or the preferred pixel ratio of your device) for retina displays.
-     * Please not that in non-GL mode this might result in very slow rendering as the canvas buffer size may increase.
-     *
-     * @method _setToRetina
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     * @private
-     **/
-    _setToRetina() {
-        this.config.autoDetectRetina = true;
-        const pixelRatio = globalThis.devicePixelRatio || 1;
-        this.config.cssScaleX = this.config.cssScaleY = 1.0 / pixelRatio;
-        this.config.canvasWidthFactor = this.config.canvasHeightFactor = pixelRatio;
-        this.resizeCanvas();
-        this.updateCSSscale();
-    }
-    /**
-     * Set the current zoom and draw offset to fit the given bounds.
-     *
-     * This method currently restores the aspect zoom ratio.
-     *
-     **/
-    fitToView(bounds) {
-        const canvasCenter = new Vertex(this.canvasSize.width / 2.0, this.canvasSize.height / 2.0);
-        const canvasRatio = this.canvasSize.width / this.canvasSize.height;
-        const ratio = bounds.width / bounds.height;
-        // Find the new draw offset
-        const center = new Vertex(bounds.max.x - bounds.width / 2.0, bounds.max.y - bounds.height / 2.0)
-            .inv()
-            .addXY(this.canvasSize.width / 2.0, this.canvasSize.height / 2.0);
-        this.setOffset(center);
-        if (canvasRatio < ratio) {
-            const newUniformZoom = this.canvasSize.width / bounds.width;
-            this.setZoom(newUniformZoom, newUniformZoom, canvasCenter);
-        }
-        else {
-            const newUniformZoom = this.canvasSize.height / bounds.height;
-            this.setZoom(newUniformZoom, newUniformZoom, canvasCenter);
-        }
-        this.redraw();
-    }
-    /**
-     * Set the console for this instance.
-     *
-     * @method setConsole
-     * @param {Console} con - The new console object (default is globalThis.console).
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     **/
-    setConsole(con) {
-        this.console = con;
-    }
-    /**
-     * Update the CSS scale for the canvas depending onf the cssScale{X,Y} settings.<br>
-     * <br>
-     * This function is usually only used inernally.
-     *
-     * @method updateCSSscale
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     * @private
-     **/
-    updateCSSscale() {
-        var _b, _c, _d, _e;
-        if (this.config.cssUniformScale) {
-            PlotBoilerplate.utils.setCSSscale(this.canvas, (_b = this.config.cssScaleX) !== null && _b !== void 0 ? _b : 1.0, (_c = this.config.cssScaleX) !== null && _c !== void 0 ? _c : 1.0);
-        }
-        else {
-            PlotBoilerplate.utils.setCSSscale(this.canvas, (_d = this.config.cssScaleX) !== null && _d !== void 0 ? _d : 1.0, (_e = this.config.cssScaleY) !== null && _e !== void 0 ? _e : 1.0);
-        }
-    }
-    /**
-     * Adds a new content change listener to this instance. Adding duplicates is not possible.
-     *
-     * @param {PBContentChangeListener} listener - The listenre to add.
-     * @method addContentChangeListener
-     * @instance
-     * @memberof PlotBoilerplate
-     * @returns {void}
-     */
-    addContentChangeListener(listener) {
-        for (var i in this.contentChangeListeners) {
-            if (this.contentChangeListeners[i] === listener) {
-                return;
-            }
-        }
-        this.contentChangeListeners.push(listener);
-    }
-    /**
-     * Removes an existing content change listener from this instance.
-     *
-     * @param {PBContentChangeListener} listener - The listenre to add.
-     * @method removeContentChangeListener
-     * @instance
-     * @memberof PlotBoilerplate
-     * @returns {void}
-     */
-    removeContentChangeListener(listener) {
-        for (var i = 0; i < this.contentChangeListeners.length; i++) {
-            if (this.contentChangeListeners[i] === listener) {
-                this.contentChangeListeners.splice(i, 1);
-                return;
-            }
-        }
-    }
-    _fireContentChanged(addedDrawables, removedDrawables) {
-        for (var i in this.contentChangeListeners) {
-            const listener = this.contentChangeListeners[i];
-            if (listener && typeof listener === "function") {
-                listener({
-                    type: addedDrawables.length > 0 ? "DRAWABLES_ADDED" : "DRAWABLES_REMOVED",
-                    addedDrawables: addedDrawables,
-                    removedDrawables: removedDrawables
-                });
-            }
-        }
-    }
-    /**
-     * Add a drawable object.<br>
-     * <br>
-     * This must be either:<br>
-     * <pre>
-     *  * a Vertex
-     *  * a Line
-     *  * a Vector
-     *  * a VEllipse
-     *  * a VEllipseSector
-     *  * a Circle
-     *  * a Polygon
-     *  * a Triangle
-     *  * a BezierPath
-     *  * a BPImage
-     * </pre>
-     *
-     * @param {Drawable|Drawable[]} drawable - The drawable (of one of the allowed class instance) to add.
-     * @param {boolean} [redraw=true] - If true the function will trigger redraw after the drawable(s) was/were added.
-     * @method add
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     **/
-    add(drawable, redraw, doNotFireEvent) {
-        if (Array.isArray(drawable)) {
-            const arr = drawable;
-            for (var i = 0; i < arr.length; i++) {
-                this.add(arr[i], false, doNotFireEvent);
-            }
-            // !doNotFireEvent && this._fireContentChanged(arr, []);
-        }
-        else {
-            const addedDrawables = [drawable];
-            if (drawable instanceof Vertex) {
-                this.drawables.push(drawable);
-                this.vertices.push(drawable);
-            }
-            else if (drawable instanceof Line) {
-                // Add some lines
-                this.drawables.push(drawable);
-                this.vertices.push(drawable.a);
-                this.vertices.push(drawable.b);
-                addedDrawables.push(drawable.a, drawable.b);
-            }
-            else if (drawable instanceof Vector) {
-                this.drawables.push(drawable);
-                this.vertices.push(drawable.a);
-                this.vertices.push(drawable.b);
-                addedDrawables.push(drawable.a, drawable.b);
-                drawable.a.listeners.addDragListener((event) => {
-                    drawable.b.add(event.params.dragAmount);
-                });
-            }
-            else if (drawable instanceof VEllipse) {
-                this.vertices.push(drawable.center);
-                this.vertices.push(drawable.axis);
-                addedDrawables.push(drawable.center, drawable.axis);
-                this.drawables.push(drawable);
-                drawable.center.listeners.addDragListener((event) => {
-                    drawable.axis.add(event.params.dragAmount);
-                });
-            }
-            else if (drawable instanceof VEllipseSector) {
-                this.vertices.push(drawable.ellipse.center);
-                this.vertices.push(drawable.ellipse.axis);
-                addedDrawables.push(drawable.ellipse.center, drawable.ellipse.axis);
-                this.drawables.push(drawable);
-                drawable.ellipse.center.listeners.addDragListener((event) => {
-                    drawable.ellipse.axis.add(event.params.dragAmount);
-                });
-            }
-            else if (drawable instanceof Circle) {
-                this.vertices.push(drawable.center);
-                addedDrawables.push(drawable.center);
-                this.drawables.push(drawable);
-            }
-            else if (drawable instanceof CircleSector) {
-                this.vertices.push(drawable.circle.center);
-                addedDrawables.push(drawable.circle.center);
-                this.drawables.push(drawable);
-            }
-            else if (drawable instanceof Polygon) {
-                this.drawables.push(drawable);
-                for (var i = 0; i < drawable.vertices.length; i++) {
-                    this.vertices.push(drawable.vertices[i]);
-                    addedDrawables.push(drawable.vertices[i]);
-                }
-            }
-            else if (drawable instanceof Triangle) {
-                this.drawables.push(drawable);
-                this.vertices.push(drawable.a);
-                this.vertices.push(drawable.b);
-                this.vertices.push(drawable.c);
-                addedDrawables.push(drawable.a, drawable.b, drawable.c);
-            }
-            else if (drawable instanceof BezierPath) {
-                this.drawables.push(drawable);
-                const bezierPath = drawable;
-                for (var i = 0; i < bezierPath.bezierCurves.length; i++) {
-                    if (!drawable.adjustCircular && i == 0) {
-                        this.vertices.push(bezierPath.bezierCurves[i].startPoint);
-                        addedDrawables.push(bezierPath.bezierCurves[i].startPoint);
-                    }
-                    this.vertices.push(bezierPath.bezierCurves[i].endPoint);
-                    this.vertices.push(bezierPath.bezierCurves[i].startControlPoint);
-                    this.vertices.push(bezierPath.bezierCurves[i].endControlPoint);
-                    addedDrawables.push(bezierPath.bezierCurves[i].endPoint, bezierPath.bezierCurves[i].startControlPoint, bezierPath.bezierCurves[i].endControlPoint);
-                    bezierPath.bezierCurves[i].startControlPoint.attr.selectable = false;
-                    bezierPath.bezierCurves[i].endControlPoint.attr.selectable = false;
-                }
-                PlotBoilerplate.utils.enableBezierPathAutoAdjust(drawable);
-            }
-            else if (drawable instanceof PBImage) {
-                this.vertices.push(drawable.upperLeft);
-                this.vertices.push(drawable.lowerRight);
-                addedDrawables.push(drawable.upperLeft, drawable.lowerRight);
-                this.drawables.push(drawable);
-                // Todo: think about a IDragEvent interface
-                drawable.upperLeft.listeners.addDragListener((e) => {
-                    drawable.lowerRight.add(e.params.dragAmount);
-                });
-                drawable.lowerRight.attr.selectable = false;
-            }
-            else if (drawable instanceof PBText) {
-                this.vertices.push(drawable.anchor);
-                addedDrawables.push(drawable.anchor);
-                this.drawables.push(drawable);
-                drawable.anchor.attr.selectable = false;
-            }
-            else {
-                throw "Cannot add drawable of unrecognized type: " + typeof drawable + ".";
-            }
-            !doNotFireEvent && this._fireContentChanged(addedDrawables, []);
-        }
-        // This is a workaround for backwards compatibility when the 'redraw' param was not yet present.
-        if (redraw || typeof redraw == "undefined") {
-            this.redraw();
-        }
-    }
-    /**
-     * Remove a drawable object.<br>
-     * <br>
-     * This must be either:<br>
-     * <pre>
-     *  * a Vertex
-     *  * a Line
-     *  * a Vector
-     *  * a VEllipse
-     *  * a Circle
-     *  * a Polygon
-     *  * a BezierPath
-     *  * a BPImage
-     *  * a Triangle
-     * </pre>
-     *
-     * @param {Drawable|Array<Drawable>} drawable - The drawable (of one of the allowed class instance) to remove.
-     * @param {boolean} [redraw=false]
-     * @param {removeWidth}
-     * @method remove
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     **/
-    remove(drawable, redraw, removeWithVertices, doNotFireEvent) {
-        if (Array.isArray(drawable)) {
-            const removedDrawables = [];
-            for (var i = 0; i < drawable.length; i++) {
-                if (this.remove(drawable[i], false, removeWithVertices, true)) {
-                    removedDrawables.push(drawable[i]);
-                }
-            }
-            if (redraw) {
-                this.redraw();
-            }
-            !doNotFireEvent && this._fireContentChanged([], removedDrawables);
-            return removedDrawables.length > 0;
-        }
-        if (drawable instanceof Vertex) {
-            const wasRemoved = this.removeVertex(drawable, false, false);
-            if (redraw) {
-                this.redraw();
-            }
-            !doNotFireEvent && this._fireContentChanged([], [drawable]);
-            return wasRemoved;
-        }
-        let wasRemoved = false;
-        const removedDrawables = [];
-        for (var i = 0; i < this.drawables.length; i++) {
-            if (this.drawables[i] === drawable || this.drawables[i].uid === drawable.uid) {
-                this.drawables.splice(i, 1);
-                removedDrawables.push(drawable);
-                if (removeWithVertices) {
-                    // Check if some listeners need to be removed
-                    if (drawable instanceof Line) {
-                        // Add some lines
-                        this.removeVertex(drawable.a, false, true);
-                        this.removeVertex(drawable.b, false, true);
-                        removedDrawables.push(drawable.a, drawable.b);
-                    }
-                    else if (drawable instanceof Vector) {
-                        this.removeVertex(drawable.a, false, true);
-                        this.removeVertex(drawable.b, false, true);
-                        removedDrawables.push(drawable.a, drawable.b);
-                    }
-                    else if (drawable instanceof VEllipse) {
-                        this.removeVertex(drawable.center, false, true);
-                        this.removeVertex(drawable.axis, false, true);
-                        removedDrawables.push(drawable.center, drawable.axis);
-                    }
-                    else if (drawable instanceof VEllipseSector) {
-                        this.removeVertex(drawable.ellipse.center, false, true);
-                        this.removeVertex(drawable.ellipse.axis, false, true);
-                        removedDrawables.push(drawable.ellipse.center, drawable.ellipse.axis);
-                    }
-                    else if (drawable instanceof Circle) {
-                        this.removeVertex(drawable.center, false, true);
-                    }
-                    else if (drawable instanceof CircleSector) {
-                        this.removeVertex(drawable.circle.center, false, true);
-                        removedDrawables.push(drawable.circle.center);
-                    }
-                    else if (drawable instanceof Polygon) {
-                        // for( var i in drawable.vertices )
-                        for (var i = 0; i < drawable.vertices.length; i++) {
-                            this.removeVertex(drawable.vertices[i], false, true);
-                            removedDrawables.push(drawable.vertices[i]);
-                        }
-                    }
-                    else if (drawable instanceof Triangle) {
-                        this.removeVertex(drawable.a, false, true);
-                        this.removeVertex(drawable.b, false, true);
-                        this.removeVertex(drawable.c, false, true);
-                        removedDrawables.push(drawable.a, drawable.b, drawable.c);
-                    }
-                    else if (drawable instanceof BezierPath) {
-                        for (var i = 0; i < drawable.bezierCurves.length; i++) {
-                            this.removeVertex(drawable.bezierCurves[i].startPoint, false, true);
-                            this.removeVertex(drawable.bezierCurves[i].startControlPoint, false, true);
-                            this.removeVertex(drawable.bezierCurves[i].endControlPoint, false, true);
-                            removedDrawables.push(drawable.bezierCurves[i].startPoint, drawable.bezierCurves[i].startControlPoint, drawable.bezierCurves[i].endControlPoint);
-                            if (i + 1 == drawable.bezierCurves.length) {
-                                this.removeVertex(drawable.bezierCurves[i].endPoint, false, true);
-                                removedDrawables.push(drawable.bezierCurves[i].endPoint);
-                            }
-                        }
-                    }
-                    else if (drawable instanceof PBImage) {
-                        this.removeVertex(drawable.upperLeft, false, true);
-                        this.removeVertex(drawable.lowerRight, false, true);
-                        removedDrawables.push(drawable.upperLeft, drawable.lowerRight);
-                    }
-                    else if (drawable instanceof PBText) {
-                        this.removeVertex(drawable.anchor, false, true);
-                        removedDrawables.push(drawable.anchor);
-                    }
-                } // END removeWithVertices
-                if (redraw) {
-                    this.redraw();
-                }
-                !doNotFireEvent && this._fireContentChanged([], removedDrawables);
-                wasRemoved = true;
-            } // END if
-        } // END for
-        return wasRemoved;
-    }
-    /**
-     * Remove a vertex from the vertex list.<br>
-     *
-     * @param {Vertex} vert - The vertex to remove.
-     * @param {boolean} [redraw=false]
-     * @method removeVertex
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {boolean}
-     **/
-    removeVertex(vert, redraw, doNotFireEvent) {
-        for (var i = 0; i < this.vertices.length; i++) {
-            if (this.vertices[i] === vert) {
-                this.vertices.splice(i, 1);
-                if (redraw) {
-                    this.redraw();
-                }
-                !doNotFireEvent && this._fireContentChanged([], [vert]);
-                return true;
-            }
-        }
-        return false;
-    }
-    /**
-     * Remove all elements.
-     *
-     * If you want to keep the vertices, pass `true`.
-     *
-     * @method removeAll
-     * @param {boolean=false} keepVertices
-     * @param {boolean=true} triggerRedraw - By default this method triggers the redraw routine; passing `false` will suppress redrawing.
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     */
-    removeAll(keepVertices, triggerRedraw) {
-        let removedDrawables = this.drawables;
-        this.drawables = [];
-        if (!Boolean(keepVertices)) {
-            removedDrawables = removedDrawables.concat(this.vertices);
-            this.vertices = [];
-        }
-        if (triggerRedraw || typeof triggerRedraw === "undefined") {
-            this.redraw();
-        }
-        removedDrawables.length > 0 && this._fireContentChanged([], removedDrawables);
-    }
-    /**
-     * Find the vertex near the given position.
-     *
-     * The position is the absolute vertex position, not the x-y-coordinates on the canvas.
-     *
-     * @param {XYCoords} position - The position of the vertex to search for.
-     * @param {number} pixelTolerance - A radius around the position to include into the search.
-     *                                  Note that the tolerance will be scaled up/down when zoomed.
-     * @return The vertex near the given position or undefined if none was found there.
-     **/
-    getVertexNear(pixelPosition, pixelTolerance) {
-        var _b, _c;
-        const p = this.locatePointNear(this.transformMousePosition(pixelPosition.x, pixelPosition.y), pixelTolerance / Math.min((_b = this.config.cssScaleX) !== null && _b !== void 0 ? _b : 1.0, (_c = this.config.cssScaleY) !== null && _c !== void 0 ? _c : 1.0));
-        if (p && p.typeName == "vertex") {
-            return this.vertices[p.vindex];
-        }
-        return undefined;
-    }
-    /**
-     * Draw the grid with the current config settings.<br>
-     *
-     * This function is usually only used internally.
-     *
-     * @method drawGrid
-     * @param {DrawLib} draw - The drawing library to use to draw lines.
-     * @private
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     **/
-    drawGrid(draw) {
-        if (typeof draw === "undefined") {
-            draw = this.draw;
-        }
-        const gScale = {
-            x: (Grid.utils.mapRasterScale(this.config.rasterAdjustFactor, this.draw.scale.x) * this.config.rasterScaleX) /
-                this.config.cssScaleX,
-            y: (Grid.utils.mapRasterScale(this.config.rasterAdjustFactor, this.draw.scale.y) * this.config.rasterScaleY) /
-                this.config.cssScaleY
-        };
-        var gSize = { width: this.grid.size.x * gScale.x, height: this.grid.size.y * gScale.y };
-        var cs = { width: this.canvasSize.width / 2, height: this.canvasSize.height / 2 };
-        var offset = this.draw.offset.clone().inv();
-        // console.log( "drawGrid", gScale, gSize, cs, offset );
-        offset.x =
-            ((Math.round(offset.x + cs.width) / Math.round(gSize.width)) * gSize.width) / this.draw.scale.x +
-                (((this.draw.offset.x - cs.width) / this.draw.scale.x) % gSize.width);
-        offset.y =
-            ((Math.round(offset.y + cs.height) / Math.round(gSize.height)) * gSize.height) / this.draw.scale.y +
-                (((this.draw.offset.y - cs.height) / this.draw.scale.x) % gSize.height);
-        if (this.drawConfig.drawGrid) {
-            draw.setCurrentClassName(null);
-            if (this.config.rasterGrid) {
-                // TODO: move config member to drawConfig
-                draw.setCurrentId("raster");
-                draw.raster(offset, this.canvasSize.width / this.draw.scale.x, this.canvasSize.height / this.draw.scale.y, gSize.width, gSize.height, "rgba(0,128,255,0.125)");
-            }
-            else {
-                draw.setCurrentId("grid");
-                draw.grid(offset, this.canvasSize.width / this.draw.scale.x, this.canvasSize.height / this.draw.scale.y, gSize.width, gSize.height, "rgba(0,128,255,0.095)");
-            }
-        }
-    }
-    /**
-     * Draw the origin with the current config settings.<br>
-     *
-     * This function is usually only used internally.
-     *
-     * @method drawOrigin
-     * @param {DrawLib} draw - The drawing library to use to draw lines.
-     * @private
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     **/
-    drawOrigin(draw) {
-        // Add a crosshair to mark the origin
-        draw.setCurrentId("origin");
-        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.
-     **/
-    _handleColor(h, color) {
-        return h.attr.isSelected ? this.drawConfig.selectedVertex.color : h.attr.draggable ? color : "rgba(128,128,128,0.5)";
-    }
-    /**
-     * Draw all drawables.
-     *
-     * This function is usually only used internally.
-     *
-     * @method drawDrawables
-     * @param {number} renderTime - The current render time. It will be used to distinct
-     *                              already draw vertices from non-draw-yet vertices.
-     * @param {DrawLib} draw - The drawing library to use to draw lines.
-     * @param {DrawLib} fill - The drawing library to use to fill areas.
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     **/
-    drawDrawables(renderTime, draw, fill) {
-        for (var i in this.drawables) {
-            var d = this.drawables[i];
-            this.draw.setCurrentId(d.uid);
-            this.fill.setCurrentId(d.uid);
-            this.draw.setCurrentClassName(d.className);
-            this.fill.setCurrentClassName(d.className);
-            this.drawDrawable(d, renderTime, draw, fill);
-        }
-    }
-    /**
-     * Draw the given drawable.
-     *
-     * This function is usually only used internally.
-     *
-     * @method drawDrawable
-     * @param {Drawable} d - The drawable to draw.
-     * @param {number} renderTime - The current render time. It will be used to distinct
-     *                              already draw vertices from non-draw-yet vertices.
-     * @param {DrawLib} draw - The drawing library to use to draw lines.
-     * @param {DrawLib} fill - The drawing library to use to fill areas.
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     **/
-    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) {
-                        const df = this.drawConfig.bezier.pathVertex.fill ? fill : draw;
-                        df.setCurrentId(`${d.uid}_h0`);
-                        df.setCurrentClassName(`${d.className}-start-handle`);
-                        if (d.bezierCurves[c].startPoint.attr.bezierAutoAdjust) {
-                            df.squareHandle(d.bezierCurves[c].startPoint, 5, this._handleColor(d.bezierCurves[c].startPoint, this.drawConfig.bezier.pathVertex.color));
-                        }
-                        else {
-                            df.diamondHandle(d.bezierCurves[c].startPoint, 7, this._handleColor(d.bezierCurves[c].startPoint, this.drawConfig.bezier.pathVertex.color));
-                        }
-                    }
-                    d.bezierCurves[c].startPoint.attr.renderTime = renderTime;
-                    if (d.bezierCurves[c].endPoint.attr.visible) {
-                        const df = this.drawConfig.bezier.pathVertex.fill ? fill : draw;
-                        df.setCurrentId(`${d.uid}_h0`);
-                        df.setCurrentClassName(`${d.className}-start-handle`);
-                        if (d.bezierCurves[c].endPoint.attr.bezierAutoAdjust) {
-                            df.squareHandle(d.bezierCurves[c].endPoint, 5, this._handleColor(d.bezierCurves[c].endPoint, this.drawConfig.bezier.pathVertex.color));
-                        }
-                        else {
-                            df.diamondHandle(d.bezierCurves[c].endPoint, 7, this._handleColor(d.bezierCurves[c].endPoint, this.drawConfig.bezier.pathVertex.color));
-                        }
-                    }
-                    if (d.bezierCurves[c].startControlPoint.attr.visible) {
-                        const df = this.drawConfig.bezier.controlVertex.fill ? fill : draw;
-                        df.setCurrentId(`${d.uid}_h2`);
-                        df.setCurrentClassName(`${d.className}-start-control-handle`);
-                        df.circleHandle(d.bezierCurves[c].startControlPoint, 3, this._handleColor(d.bezierCurves[c].startControlPoint, this.drawConfig.bezier.controlVertex.color));
-                    }
-                    if (d.bezierCurves[c].endControlPoint.attr.visible) {
-                        const df = this.drawConfig.bezier.controlVertex.fill ? fill : draw;
-                        df.setCurrentId(`${d.uid}_h3`);
-                        df.setCurrentClassName(`${d.className}-end-control-handle`);
-                        df.circleHandle(d.bezierCurves[c].endControlPoint, 3, this._handleColor(d.bezierCurves[c].endControlPoint, this.drawConfig.bezier.controlVertex.color));
-                    }
-                    d.bezierCurves[c].startPoint.attr.renderTime = renderTime;
-                    d.bezierCurves[c].endPoint.attr.renderTime = renderTime;
-                    d.bezierCurves[c].startControlPoint.attr.renderTime = renderTime;
-                    d.bezierCurves[c].endControlPoint.attr.renderTime = renderTime;
-                }
-                else {
-                    d.bezierCurves[c].startPoint.attr.renderTime = renderTime;
-                    d.bezierCurves[c].endPoint.attr.renderTime = renderTime;
-                    d.bezierCurves[c].startControlPoint.attr.renderTime = renderTime;
-                    d.bezierCurves[c].endControlPoint.attr.renderTime = renderTime;
-                }
-                if (this.drawConfig.drawBezierHandleLines && this.drawConfig.drawHandleLines) {
-                    draw.setCurrentId(`${d.uid}_l0`);
-                    draw.setCurrentClassName(`${d.className}-start-line`);
-                    draw.handleLine(d.bezierCurves[c].startPoint, d.bezierCurves[c].startControlPoint);
-                    draw.setCurrentId(`${d.uid}_l1`);
-                    draw.setCurrentClassName(`${d.className}-end-line`);
-                    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) {
-                for (var i in d.vertices) {
-                    d.vertices[i].attr.renderTime = renderTime;
-                }
-            }
-        }
-        else if (d instanceof Triangle) {
-            draw.polyline([d.a, d.b, d.c], false, this.drawConfig.triangle.color, this.drawConfig.triangle.lineWidth);
-            if (!this.drawConfig.drawHandlePoints) {
-                d.a.attr.renderTime = d.b.attr.renderTime = d.c.attr.renderTime = renderTime;
-            }
-        }
-        else if (d instanceof VEllipse) {
-            if (this.drawConfig.drawHandleLines) {
-                draw.setCurrentId(`${d.uid}_e0`);
-                draw.setCurrentClassName(`${d.className}-v-line`);
-                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.handleLine(d.center.clone().add(d.signedRadiusH(), 0).rotate(d.rotation, d.center), d.axis); // , "#c8c8c8");
-            }
-            draw.setCurrentId(d.uid);
-            draw.setCurrentClassName(`${d.className}`);
-            draw.ellipse(d.center, 
-            // Math.abs(d.axis.x-d.center.x), Math.abs(d.axis.y-d.center.y),
-            d.radiusH(), d.radiusV(), this.drawConfig.ellipse.color, this.drawConfig.ellipse.lineWidth, d.rotation);
-            if (!this.drawConfig.drawHandlePoints) {
-                d.center.attr.renderTime = renderTime;
-                d.axis.attr.renderTime = renderTime;
-            }
-        }
-        else if (d instanceof VEllipseSector) {
-            draw.setCurrentId(d.uid);
-            draw.setCurrentClassName(`${d.className}`);
-            const data = VEllipseSector.ellipseSectorUtils.describeSVGArc(d.ellipse.center.x, d.ellipse.center.y, d.ellipse.radiusH(), d.ellipse.radiusV(), d.startAngle, d.endAngle, d.ellipse.rotation, { moveToStart: true });
-            draw.path(data, this.drawConfig.ellipseSector.color, this.drawConfig.ellipseSector.lineWidth);
-        }
-        else if (d instanceof Circle) {
-            draw.circle(d.center, d.radius, this.drawConfig.circle.color, this.drawConfig.circle.lineWidth);
-        }
-        else if (d instanceof CircleSector) {
-            draw.circleArc(d.circle.center, d.circle.radius, d.startAngle, d.endAngle, this.drawConfig.circleSector.color, this.drawConfig.circleSector.lineWidth);
-        }
-        else if (d instanceof Vertex) {
-            if (this.drawConfig.drawVertices && (!d.attr.selectable || !d.attr.draggable) && d.attr.visible) {
-                // Draw as special point (grey)
-                draw.circleHandle(d, 7, this.drawConfig.vertex.color);
-                d.attr.renderTime = renderTime;
-            }
-        }
-        else if (d instanceof Line) {
-            draw.line(d.a, d.b, this.drawConfig.line.color, this.drawConfig.line.lineWidth);
-            if (!this.drawConfig.drawHandlePoints || !d.a.attr.selectable)
-                d.a.attr.renderTime = renderTime;
-            if (!this.drawConfig.drawHandlePoints || !d.b.attr.selectable)
-                d.b.attr.renderTime = renderTime;
-        }
-        else if (d instanceof Vector) {
-            draw.arrow(d.a, d.b, this.drawConfig.vector.color, this.drawConfig.vector.lineWidth);
-            if (this.drawConfig.drawHandlePoints && d.b.attr.selectable && d.b.attr.visible) {
-                draw.setCurrentId(`${d.uid}_h0`);
-                draw.setCurrentClassName(`${d.className}-handle`);
-                draw.circleHandle(d.b, 3, "#a8a8a8");
-            }
-            else {
-                d.b.attr.renderTime = renderTime;
-            }
-            if (!this.drawConfig.drawHandlePoints || !d.a.attr.selectable)
-                d.a.attr.renderTime = renderTime;
-            if (!this.drawConfig.drawHandlePoints || !d.b.attr.selectable)
-                d.b.attr.renderTime = renderTime;
-        }
-        else if (d instanceof PBImage) {
-            if (this.drawConfig.drawHandleLines) {
-                draw.setCurrentId(`${d.uid}_l0`);
-                draw.setCurrentClassName(`${d.className}-line`);
-                draw.line(d.upperLeft, d.lowerRight, this.drawConfig.image.color, this.drawConfig.image.lineWidth);
-            }
-            fill.setCurrentId(d.uid);
-            fill.image(d.image, d.upperLeft, d.lowerRight.clone().sub(d.upperLeft));
-            if (this.drawConfig.drawHandlePoints) {
-                draw.setCurrentId(`${d.uid}_h0`);
-                draw.setCurrentClassName(`${d.className}-lower-right`);
-                draw.circleHandle(d.lowerRight, 3, this.drawConfig.image.color);
-                d.lowerRight.attr.renderTime = renderTime;
-            }
-        }
-        else if (d instanceof PBText) {
-            fill.setCurrentId(d.uid);
-            fill.text(d.text, d.anchor.x, d.anchor.y, d);
-            if (this.drawConfig.text.anchor) {
-                draw.setCurrentId(`${d.uid}_a0`);
-                draw.setCurrentClassName(`${d.className}-anchor`);
-                (this.drawConfig.text.fill ? fill : draw).point(d.anchor, this.drawConfig.text.color);
-            }
-            d.anchor.attr.renderTime = renderTime;
-        }
-        else {
-            console.error("Cannot draw object. Unknown class.");
-        }
-        draw.setCurrentClassName(null);
-        draw.setCurrentId(null);
-        fill.setCurrentClassName(null);
-        fill.setCurrentId(null);
-    }
-    /**
-     * Draw the select-polygon (if there is one).
-     *
-     * This function is usually only used internally.
-     *
-     * @method drawSelectPolygon
-     * @private
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     **/
-    drawSelectPolygon(draw) {
-        // Draw select polygon?
-        if (this.selectPolygon != null && this.selectPolygon.vertices.length > 0) {
-            draw.setCurrentId(this.selectPolygon.uid);
-            draw.polygon(this.selectPolygon, "#888888");
-            draw.crosshair(this.selectPolygon.vertices[0], 3, "#008888");
-        }
-    }
-    /**
-     * Draw all vertices that were not yet drawn with the given render time.<br>
-     * <br>
-     * This function is usually only used internally.
-     *
-     * @method drawVertices
-     * @private
-     * @param {number} renderTime - The current render time. It is used to distinct
-     *                              already draw vertices from non-draw-yet vertices.
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     **/
-    drawVertices(renderTime, draw) {
-        // Draw all vertices as small squares if they were not already drawn by other objects
-        for (var i in this.vertices) {
-            if (this.drawConfig.drawVertices && this.vertices[i].attr.renderTime != renderTime && this.vertices[i].attr.visible) {
-                draw.setCurrentId(this.vertices[i].uid);
-                draw.squareHandle(this.vertices[i], 5, this._handleColor(this.vertices[i], "rgb(0,128,192)"));
-                this.vertices[i].attr.renderTime = renderTime;
-            }
-        }
-    }
-    /**
-     * Trigger redrawing of all objects.<br>
-     * <br>
-     * Usually this function is automatically called when objects change.
-     *
-     * @method redraw
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     **/
-    redraw() {
-        const renderTime = this.renderTime++;
-        // Tell the drawing library that a new drawing cycle begins (required for the GL lib).
-        this.draw.beginDrawCycle(renderTime);
-        this.fill.beginDrawCycle(renderTime);
-        if (this.config.preClear)
-            this.config.preClear();
-        this.clear();
-        if (this.config.preDraw)
-            this.config.preDraw(this.draw, this.fill);
-        this.drawAll(renderTime, this.draw, this.fill);
-        if (this.config.postDraw)
-            this.config.postDraw(this.draw, this.fill);
-        this.draw.endDrawCycle(renderTime);
-        this.fill.endDrawCycle(renderTime);
-    }
-    /**
-     * Draw all: drawables, grid, select-polygon and vertices.
-     *
-     * @method drawAll
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     **/
-    drawAll(renderTime, draw, fill) {
-        if (this.config.drawRaster) {
-            this.drawGrid(draw);
-        }
-        if (this.config.drawOrigin) {
-            this.drawOrigin(draw);
-        }
-        this.drawDrawables(renderTime, draw, fill);
-        this.drawVertices(renderTime, draw);
-        this.drawSelectPolygon(draw);
-        // Clear IDs and classnames (postDraw hook might draw somthing and the do not want
-        // to interfered with that).
-        draw.setCurrentId(null);
-        draw.setCurrentClassName(null);
-    } // END redraw
-    /**
-     * This function clears the canvas with the configured background color.<br>
-     * <br>
-     * This function is usually only used internally.
-     *
-     * @method clear
-     * @private
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     **/
-    clear() {
-        // Note that elements might have an alpha channel. Clear the scene first.
-        this.draw.clear(this.config.backgroundColor || "white");
-    }
-    /**
-     * Clear the selection.<br>
-     * <br>
-     * This function is usually only used internally.
-     *
-     * @method clearSelection
-     * @private
-     * @param {boolean=} [redraw=false] - Indicates if the redraw function should be triggered.
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {PlotBoilerplate} this
-     **/
-    clearSelection(redraw) {
-        for (var i in this.vertices)
-            this.vertices[i].attr.isSelected = false;
-        if (redraw)
-            this.redraw();
-        return this;
-    }
-    /**
-     * Get the current view port.
-     *
-     * @method viewport
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {Bounds} The current viewport.
-     **/
-    viewport() {
-        var _b, _c;
-        return new Bounds(this.transformMousePosition(0, 0), this.transformMousePosition(this.canvasSize.width * ((_b = this.config.cssScaleX) !== null && _b !== void 0 ? _b : 1.0), this.canvasSize.height * ((_c = this.config.cssScaleY) !== null && _c !== void 0 ? _c : 1.0)));
-    }
-    /**
-     * Trigger the saveFile.hook.
-     *
-     * @method saveFile
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     **/
-    saveFile() {
-        this.hooks.saveFile(this);
-    }
-    /**
-     * Internal helper function used to get 'float' properties from elements.
-     * Used to determine border withs and paddings that were defined using CSS.
-     */
-    // TODO: this was moved to the DOM utils
-    getFProp(elem, propName) {
-        return parseFloat(globalThis.getComputedStyle(elem, null).getPropertyValue(propName));
-    }
-    /**
-     * Get the available inner space of the given container.
-     *
-     * Size minus padding minus border.
-     **/
-    // TODO: this was moved to the DOM utils
-    getAvailableContainerSpace() {
-        const _self = this;
-        const container = _self.canvas.parentNode; // Element | Document | DocumentFragment;
-        _self.canvas.style.display = "none";
-        var padding = this.getFProp(container, "padding") || 0, border = this.getFProp(_self.canvas, "border-width") || 0, pl = this.getFProp(container, "padding-left") || padding, pr = this.getFProp(container, "padding-right") || padding, pt = this.getFProp(container, "padding-top") || padding, pb = this.getFProp(container, "padding-bottom") || padding, bl = this.getFProp(_self.canvas, "border-left-width") || border, br = this.getFProp(_self.canvas, "border-right-width") || border, bt = this.getFProp(_self.canvas, "border-top-width") || border, bb = this.getFProp(_self.canvas, "border-bottom-width") || border;
-        var w = container.clientWidth;
-        var h = container.clientHeight;
-        _self.canvas.style.display = "block";
-        return { width: w - pl - pr - bl - br, height: h - pt - pb - bt - bb };
-    }
-    /**
-     * This function resizes the canvas to the required settings (toggles fullscreen).<br>
-     * <br>
-     * This function is usually only used internally but feel free to call it if resizing required.
-     *
-     * @method resizeCanvas
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     **/
-    resizeCanvas() {
-        var _b, _c, _d, _e, _f, _g;
-        const _self = this;
-        const _setSize = (w, h) => {
-            var _b, _c;
-            w *= (_b = _self.config.canvasWidthFactor) !== null && _b !== void 0 ? _b : 1.0;
-            h *= (_c = _self.config.canvasHeightFactor) !== null && _c !== void 0 ? _c : 1.0;
-            _self.canvasSize.width = w;
-            _self.canvasSize.height = h;
-            if (_self.canvas instanceof HTMLCanvasElement) {
-                _self.canvas.width = w;
-                _self.canvas.height = h;
-            }
-            else if (_self.canvas instanceof SVGElement) {
-                this.canvas.setAttribute("viewBox", `0 0 ${w} ${h}`);
-                this.canvas.setAttribute("width", `${w}`);
-                this.canvas.setAttribute("height", `${h}`);
-                this.draw.setSize(_self.canvasSize); // No need to set size to this.fill (instance copy)
-                this.eventCatcher.style.width = `${w}px`;
-                this.eventCatcher.style.height = `${h}px`;
-            }
-            else {
-                console.error("Error: cannot resize canvas element because it seems neither be a HTMLCanvasElement nor an SVGElement.");
-            }
-            if (_self.config.autoAdjustOffset) {
-                // _self.draw.offset.x = _self.fill.offset.x = _self.config.offsetX = w*(_self.config.offsetAdjustXPercent/100);
-                // _self.draw.offset.y = _self.fill.offset.y = _self.config.offsetY = h*(_self.config.offsetAdjustYPercent/100);
-                _self.adjustOffset(false);
-            }
-        };
-        if (_self.config.fullSize && !_self.config.fitToParent) {
-            // Set editor size
-            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 = ((_b = _self.config.canvasWidthFactor) !== null && _b !== void 0 ? _b : 1.0) * width + "px";
-            _self.canvas.style.height = ((_c = _self.config.canvasWidthFactor) !== null && _c !== void 0 ? _c : 1.0) * height + "px";
-            _self.canvas.style.top = "0px";
-            _self.canvas.style.left = "0px";
-            _setSize(width, height);
-        }
-        else if (_self.config.fitToParent) {
-            // Set editor size
-            _self.canvas.style.position = "static";
-            const space = this.getAvailableContainerSpace();
-            _self.canvas.style.width = ((_d = _self.config.canvasWidthFactor) !== null && _d !== void 0 ? _d : 1.0) * space.width + "px";
-            _self.canvas.style.height = ((_e = _self.config.canvasHeightFactor) !== null && _e !== void 0 ? _e : 1.0) * space.height + "px";
-            _self.canvas.style.top = "";
-            _self.canvas.style.left = "";
-            _setSize(space.width, space.height);
-        }
-        else {
-            _self.canvas.style.width = "";
-            _self.canvas.style.height = "";
-            _setSize((_f = _self.config.defaultCanvasWidth) !== null && _f !== void 0 ? _f : 1024, (_g = _self.config.defaultCanvasHeight) !== null && _g !== void 0 ? _g : 768);
-        }
-        if (_self.config.redrawOnResize)
-            _self.redraw();
-    }
-    /**
-     *  Add all vertices inside the polygon to the current selection.<br>
-     *
-     * @method selectVerticesInPolygon
-     * @param {Polygon} polygon - The polygonal selection area.
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {void}
-     **/
-    selectVerticesInPolygon(polygon) {
-        for (var i in this.vertices) {
-            if (this.vertices[i].attr.selectable && polygon.containsVert(this.vertices[i]))
-                this.vertices[i].attr.isSelected = true;
-        }
-    }
-    /**
-     * (Helper) Locates the point (index) at the passed position. Using an internal tolerance of 7 pixels.
-     *
-     * The result is an object { type : 'bpath', pindex, cindex, pid }
-     *
-     * Returns false if no point is near the passed position.
-     *
-     * @method locatePointNear
-     * @param {Vertex} point - The polygonal selection area.
-     * @param {number=} [tolerance=7] - The tolerance to use identtifying vertices.
-     * @private
-     * @return {IDraggable} Or false if none found.
-     **/
-    locatePointNear(point, tolerance) {
-        const _self = this;
-        if (typeof tolerance == "undefined")
-            tolerance = 7;
-        // Apply the zoom (the tolerant area should not shrink or grow when zooming)
-        tolerance /= _self.draw.scale.x;
-        // Search in vertices
-        for (var vindex = 0; vindex < _self.vertices.length; vindex++) {
-            var vert = _self.vertices[vindex];
-            if ((vert.attr.draggable || vert.attr.selectable) && vert.distance(point) < tolerance) {
-                // { type : 'vertex', vindex : vindex };
-                return new PlotBoilerplate.Draggable(vert, PlotBoilerplate.Draggable.VERTEX).setVIndex(vindex);
-            }
-        }
-        return null;
-    }
-    /**
-     * Handle left-click event.<br>
-     *
-     * @method handleClick
-     * @param {number} x - The click X position on the canvas.
-     * @param {number} y - The click Y position on the canvas.
-     * @private
-     * @return {void}
-     **/
-    handleClick(e) {
-        const _self = this;
-        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 (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 (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 && this.keyHandler.isDown("y")) {
-                _self.vertices[point.vindex].attr.bezierAutoAdjust = !_self.vertices[point.vindex].attr.bezierAutoAdjust;
-                _self.redraw();
-            }
-        }
-        else if (_self.selectPolygon != null) {
-            const vert = _self.transformMousePosition(e.params.pos.x, e.params.pos.y);
-            _self.selectPolygon.vertices.push(new Vertex(vert.x, vert.y));
-            _self.redraw();
-        }
-    }
-    /**
-     * Transforms the given x-y-(mouse-)point to coordinates respecting the view offset
-     * and the zoom settings.
-     *
-     * @method transformMousePosition
-     * @param {number} x - The x position relative to the canvas.
-     * @param {number} y - The y position relative to the canvas.
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {XYCoords} A simple object <pre>{ x : Number, y : Number }</pre> with the transformed coordinates.
-     **/
-    transformMousePosition(x, y) {
-        return {
-            x: (x / this.config.cssScaleX - this.config.offsetX) / this.config.scaleX,
-            y: (y / this.config.cssScaleY - this.config.offsetY) / this.config.scaleY
-        };
-    }
-    /**
-     * Revert a transformed mouse position back to canvas coordinates.
-     *
-     * This is the inverse function of `transformMousePosition`.
-     *
-     * @method revertMousePosition
-     * @param {number} x - The x component of the position to revert.
-     * @param {number} y - The y component of the position to revert.
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {XYCoords} The canvas coordinates for the given position.
-     **/
-    revertMousePosition(x, y) {
-        return { x: x / this.config.cssScaleX + this.config.offsetX, y: y / this.config.cssScaleY + this.config.offsetY };
-    }
-    /**
-     * Determine if any elements are currently being dragged (on mouse move or touch move).
-     *
-     * @method getDraggedElementCount
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {number} The number of elements that are currently being dragged.
-     **/
-    getDraggedElementCount() {
-        return this.draggedElements.length;
-    }
-    /**
-     * (Helper) The mouse-down handler.
-     *
-     * It selects vertices for dragging.
-     *
-     * @method mouseDownHandler.
-     * @param {XMouseEvent} e - The event to handle
-     * @private
-     * @return {void}
-     **/
-    mouseDownHandler(e) {
-        const _self = this;
-        if (e.button != 0)
-            return; // Only react on left mouse or touch events
-        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 (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++) {
-                if (_self.vertices[i].attr.isSelected) {
-                    _self.draggedElements.push(new PlotBoilerplate.Draggable(_self.vertices[i], PlotBoilerplate.Draggable.VERTEX).setVIndex(i));
-                    _self.vertices[i].listeners.fireDragStartEvent(e);
-                }
-            }
-        }
-        else {
-            // Single drag
-            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();
-    }
-    /**
-     * The mouse-drag handler.
-     *
-     * It moves selected elements around or performs the panning if the ctrl-key if
-     * hold down.
-     *
-     * @method mouseDragHandler.
-     * @param {XMouseEvent} e - The event to handle
-     * @private
-     * @return {void}
-     **/
-    mouseDragHandler(e) {
-        const _self = this;
-        const oldDragAmount = { x: e.params.dragAmount.x, y: e.params.dragAmount.y };
-        e.params.dragAmount.x /= _self.config.cssScaleX;
-        e.params.dragAmount.y /= _self.config.cssScaleY;
-        // Important note to: this.keyHandler.isDown('ctrl')
-        //    We should not use this for any input.
-        //    Reason: most browsers use [Ctrl]+[t] to create new browser tabs.
-        //            If so, the key-up event for [Ctrl] will be fired in the _new tab_,
-        //            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 && (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 {
-            // Convert drag amount by scaling
-            // Warning: this possibly invalidates the dragEvent for other listeners!
-            //          Rethink the solution when other features are added.
-            e.params.dragAmount.x /= _self.draw.scale.x;
-            e.params.dragAmount.y /= _self.draw.scale.y;
-            for (var i in _self.draggedElements) {
-                var p = _self.draggedElements[i];
-                if (p.typeName == "bpath") {
-                    _self.paths[p.pindex].moveCurvePoint(p.cindex, p.pid, new Vertex(e.params.dragAmount.x, e.params.dragAmount.y));
-                    _self.paths[p.pindex].bezierCurves[p.cindex].getPointByID(p.pid).listeners.fireDragEvent(e);
-                }
-                else if (p.typeName == "vertex") {
-                    if (!_self.vertices[p.vindex].attr.draggable)
-                        continue;
-                    _self.vertices[p.vindex].add(e.params.dragAmount);
-                    _self.vertices[p.vindex].listeners.fireDragEvent(e);
-                }
-            }
-        }
-        // Restore old event values!
-        e.params.dragAmount.x = oldDragAmount.x;
-        e.params.dragAmount.y = oldDragAmount.y;
-        _self.redraw();
-    }
-    /**
-     * The mouse-up handler.
-     *
-     * It clears the dragging-selection.
-     *
-     * @method mouseUpHandler.
-     * @param {XMouseEvent} e - The event to handle
-     * @private
-     * @return {void}
-     **/
-    mouseUpHandler(e) {
-        const _self = this;
-        if (e.button != 0)
-            return; // Only react on left mouse;
-        if (!e.params.wasDragged) {
-            _self.handleClick(e); // e.params.pos.x, e.params.pos.y );
-        }
-        for (var i in _self.draggedElements) {
-            var p = _self.draggedElements[i];
-            if (p.typeName == "bpath") {
-                _self.paths[p.pindex].bezierCurves[p.cindex].getPointByID(p.pid).listeners.fireDragEndEvent(e);
-            }
-            else if (p.typeName == "vertex") {
-                _self.vertices[p.vindex].listeners.fireDragEndEvent(e);
-            }
-        }
-        _self.draggedElements = [];
-        _self.redraw();
-    }
-    /**
-     * The mouse-wheel handler.
-     *
-     * It performs the zooming.
-     *
-     * @method mouseWheelHandler.
-     * @param {XMouseEvent} e - The event to handle
-     * @private
-     * @return {void}
-     **/
-    mouseWheelHandler(e) {
-        if (!this.config.enableZoom) {
-            return;
-        }
-        var zoomStep = 1.25; // Make configurable?
-        // CHANGED replaced _self by this
-        const _self = this;
-        const we = e;
-        if (we.deltaY < 0) {
-            _self.setZoom(_self.config.scaleX * zoomStep, _self.config.scaleY * zoomStep, new Vertex(e.params.pos.x, e.params.pos.y));
-        }
-        else if (we.deltaY > 0) {
-            _self.setZoom(_self.config.scaleX / zoomStep, _self.config.scaleY / zoomStep, new Vertex(e.params.pos.x, e.params.pos.y));
-        }
-        e.preventDefault();
-        _self.redraw();
-    }
-    /**
-     * Re-adjust the configured offset depending on the current canvas size and zoom (scaleX and scaleY).
-     *
-     * @method adjustOffset
-     * @param {boolean=false} redraw - [optional] If set the canvas will redraw with the new offset (default=false).
-     * @return {void}
-     **/
-    adjustOffset(redraw) {
-        this.draw.offset.x =
-            this.fill.offset.x =
-                this.config.offsetX =
-                    this.canvasSize.width * (this.config.offsetAdjustXPercent / 100);
-        this.draw.offset.y =
-            this.fill.offset.y =
-                this.config.offsetY =
-                    this.canvasSize.height * (this.config.offsetAdjustYPercent / 100);
-        if (redraw) {
-            this.redraw();
-        }
-    }
-    /**
-     * Set the new draw offset.
-     *
-     * Note: the function will not trigger any redraws.
-     *
-     * @param {Vertex} newOffset - The new draw offset to use.
-     **/
-    setOffset(newOffset) {
-        this.draw.offset.set(newOffset);
-        this.fill.offset.set(newOffset);
-        this.config.offsetX = newOffset.x;
-        this.config.offsetY = newOffset.y;
-    }
-    /**
-     * Set a new zoom value (and re-adjust the draw offset).
-     *
-     * Note: the function will not trigger any redraws.
-     *
-     * @param {number} zoomFactorX - The new horizontal zoom value.
-     * @param {number} zoomFactorY - The new vertical zoom value.
-     * @param {Vertex} interactionPos - The position of mouse/touch interaction.
-     **/
-    setZoom(zoomFactorX, zoomFactorY, interactionPos) {
-        let oldPos = this.transformMousePosition(interactionPos.x, interactionPos.y);
-        this.draw.scale.x = this.fill.scale.x = this.config.scaleX = Math.max(zoomFactorX, 0.01);
-        this.draw.scale.y = this.fill.scale.y = this.config.scaleY = Math.max(zoomFactorY, 0.01);
-        let newPos = this.transformMousePosition(interactionPos.x, interactionPos.y);
-        let newOffsetX = this.draw.offset.x + (newPos.x - oldPos.x) * this.draw.scale.x;
-        let newOffsetY = this.draw.offset.y + (newPos.y - oldPos.y) * this.draw.scale.y;
-        this.setOffset({ x: newOffsetX, y: newOffsetY });
-    }
-    installInputListeners() {
-        var _self = this;
-        if (this.config.enableMouse) {
-            // Install a mouse handler on the canvas.
-            new MouseHandler(this.eventCatcher ? this.eventCatcher : this.canvas)
-                .down((e) => {
-                _self.mouseDownHandler(e);
-            })
-                .drag((e) => {
-                _self.mouseDragHandler(e);
-            })
-                .up((e) => {
-                _self.mouseUpHandler(e);
-            });
-        }
-        else {
-            _self.console.log("Mouse interaction disabled.");
-        }
-        if (this.config.enableMouseWheel) {
-            // Install a mouse handler on the canvas.
-            new MouseHandler(this.eventCatcher ? this.eventCatcher : this.canvas).wheel((e) => {
-                _self.mouseWheelHandler(e);
-            });
-        }
-        else {
-            _self.console.log("Mouse wheel interaction disabled.");
-        }
-        if (this.config.enableTouch) {
-            // Install a touch handler on the canvas.
-            const relPos = (pos) => {
-                const bounds = _self.canvas.getBoundingClientRect();
-                return { x: pos.x - bounds.left, y: pos.y - bounds.top };
-            };
-            // Make PB work together with both, AlloyFinger as a esm module or a commonjs function.
-            if (typeof globalThis["AlloyFinger"] === "function" ||
-                typeof globalThis["createAlloyFinger"] === "function") {
-                try {
-                    var touchMovePos = null;
-                    var touchDownPos = null;
-                    var draggedElement = null;
-                    var multiTouchStartScale = null;
-                    const clearTouch = () => {
-                        touchMovePos = null;
-                        touchDownPos = null;
-                        draggedElement = null;
-                        multiTouchStartScale = null;
-                        _self.draggedElements = [];
-                    };
-                    const afProps = {
-                        // touchStart: (evt: TouchEvent) => {
-                        touchStart: (evt) => {
-                            if (evt.touches.length == 1) {
-                                touchMovePos = new Vertex(relPos({ x: evt.touches[0].clientX, y: evt.touches[0].clientY }));
-                                touchDownPos = new Vertex(relPos({ x: evt.touches[0].clientX, y: evt.touches[0].clientY }));
-                                draggedElement = _self.locatePointNear(_self.transformMousePosition(touchMovePos.x, touchMovePos.y), PlotBoilerplate.DEFAULT_TOUCH_TOLERANCE / Math.min(_self.config.cssScaleX, _self.config.cssScaleY));
-                                if (draggedElement && draggedElement.typeName == "vertex") {
-                                    var draggingVertex = _self.vertices[draggedElement.vindex];
-                                    var fakeEvent = {
-                                        params: {
-                                            isTouchEvent: true,
-                                            dragAmount: { x: 0, y: 0 },
-                                            wasDragged: false,
-                                            mouseDownPos: touchDownPos.clone(),
-                                            mouseDragPos: touchDownPos.clone(),
-                                            vertex: draggingVertex
-                                        }
-                                    };
-                                    _self.draggedElements = [draggedElement];
-                                    draggingVertex.listeners.fireDragStartEvent(fakeEvent);
-                                }
-                            }
-                        },
-                        touchMove: (evt) => {
-                            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);
-                                if (draggedElement.typeName == "vertex") {
-                                    if (!_self.vertices[draggedElement.vindex].attr.draggable)
-                                        return;
-                                    _self.vertices[draggedElement.vindex].add(diff);
-                                    var draggingVertex = _self.vertices[draggedElement.vindex];
-                                    var fakeEvent = {
-                                        isTouchEvent: true,
-                                        params: {
-                                            dragAmount: diff.clone(),
-                                            wasDragged: true,
-                                            mouseDownPos: touchDownPos.clone(),
-                                            mouseDragPos: touchDownPos.clone().add(diff),
-                                            vertex: draggingVertex
-                                        }
-                                    };
-                                    draggingVertex.listeners.fireDragEvent(fakeEvent);
-                                    _self.redraw();
-                                }
-                                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();
-                                _self.setOffset(_self.draw.offset
-                                    .clone()
-                                    .addXY(evt.deltaX, evt.deltaY)); // Apply zoom?
-                                _self.redraw();
-                            }
-                        },
-                        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,
-                                    params: {
-                                        dragAmount: { x: 0, y: 0 },
-                                        wasDragged: false,
-                                        mouseDownPos: touchDownPos.clone(),
-                                        mouseDragPos: touchDownPos.clone(),
-                                        vertex: draggingVertex
-                                    }
-                                };
-                                // Check if vertex was moved
-                                if (touchMovePos && touchDownPos && touchDownPos.distance(touchMovePos) < 0.001) {
-                                    // if( e.touches.length == 1 && diff.x == 0 && diff.y == 0 ) {
-                                    draggingVertex.listeners.fireClickEvent(fakeEvent);
-                                }
-                                else {
-                                    draggingVertex.listeners.fireDragEndEvent(fakeEvent);
-                                }
-                            }
-                            clearTouch();
-                        },
-                        touchCancel: (evt) => {
-                            clearTouch();
-                        },
-                        multipointStart: (evt) => {
-                            multiTouchStartScale = _self.draw.scale.clone();
-                        },
-                        multipointEnd: (evt) => {
-                            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(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();
-                        }
-                    }; // END afProps
-                    if (window["createAlloyFinger"]) {
-                        // window["createAlloyFinger"](this.eventCatcher ? this.eventCatcher : this.canvas, afProps);
-                        const createAlloyFinger = window["createAlloyFinger"];
-                        createAlloyFinger(this.eventCatcher ? this.eventCatcher : this.canvas, afProps);
-                    }
-                    else {
-                        /* tslint:disable-next-line */
-                        new AlloyFinger(this.eventCatcher ? this.eventCatcher : this.canvas, afProps);
-                    }
-                }
-                catch (e) {
-                    console.error("Failed to initialize AlloyFinger!");
-                    console.error(e);
-                }
-            }
-            else if (globalThis["Touchy"] && typeof globalThis["Touchy"] == "function") {
-                console.error("[Deprecation] Found Touchy which is not supported any more. Please use AlloyFinger instead.");
-                // Convert absolute touch positions to relative DOM element position (relative to canvas)
-            }
-            else {
-                console.warn("Cannot initialize the touch handler. AlloyFinger is missig. Did you include it?");
-            }
-        }
-        else {
-            _self.console.log("Touch interaction disabled.");
-        }
-        if (this.config.enableKeys) {
-            // Install key handler
-            this.keyHandler = new KeyHandler({ trackAll: true })
-                .down("escape", function () {
-                _self.clearSelection(true);
-            })
-                .down("shift", function () {
-                _self.selectPolygon = new Polygon();
-                _self.redraw();
-            })
-                .up("shift", function () {
-                // Find and select vertices in the drawn area
-                if (_self.selectPolygon == null)
-                    return;
-                _self.selectVerticesInPolygon(_self.selectPolygon);
-                _self.selectPolygon = null;
-                _self.redraw();
-            });
-        } // END IF enableKeys?
-        else {
-            _self.console.log("Keyboard interaction disabled.");
-        }
-    }
-    /**
-     * Creates a control GUI (a dat.gui instance) for this
-     * plot boilerplate instance.
-     *
-     * @method createGUI
-     * @instance
-     * @memberof PlotBoilerplate
-     * @return {dat.gui.GUI}
-     **/
-    createGUI(props) {
-        // This function moved to the helper utils.
-        // We do not want to include the whole dat.GUI package.
-        const utils = globalThis["utils"];
-        // if (globalThis["utils"] && typeof globalThis["utils"].createGUI == "function") {
-        //   return (globalThis["utils" as keyof Object] as any as ({createGUI : (pb:PlotBoilerplate,props:DatGuiProps|undefined)=>GUI })).createGUI(this, props);
-        if (utils && typeof utils.createGUI === "function") {
-            return (this._gui = utils.createGUI(this, props));
-        }
-        else {
-            throw "Cannot create dat.GUI or lil-gui instance; did you load the ./utils/creategui helper function an the dat.GUI/lil-gui library?";
-        }
-    }
-    /**
-     * Retriebe the GUI once it was created. If the `createGUI` method was not called or failed to create any
-     * GUI then null is returned.
-     * @returns {GUI | null}
-     */
-    getGUI() {
-        return this._gui;
-    }
-} // END class PlotBoilerplate
-/** @constant {number} */
-PlotBoilerplate.DEFAULT_CANVAS_WIDTH = 1024;
-/** @constant {number} */
-PlotBoilerplate.DEFAULT_CANVAS_HEIGHT = 768;
-/** @constant {number} */
-PlotBoilerplate.DEFAULT_CLICK_TOLERANCE = 8;
-/** @constant {number} */
-PlotBoilerplate.DEFAULT_TOUCH_TOLERANCE = 32;
-/**
- * A wrapper class for draggable items (mostly vertices).
- * @private
- **/
-PlotBoilerplate.Draggable = (_a = class {
-        constructor(item, typeName) {
-            this.item = item;
-            this.typeName = typeName;
-        }
-        isVertex() {
-            return this.typeName == PlotBoilerplate.Draggable.VERTEX;
-        }
-        setVIndex(vindex) {
-            this.vindex = vindex;
-            return this;
-        }
-    },
-    __setFunctionName(_a, "Draggable"),
-    _a.VERTEX = "vertex",
-    _a);
-/**
- * A set of helper functions.
- **/
-PlotBoilerplate.utils = {
-    /**
-     * Merge the elements in the 'extension' object into the 'base' object based on
-     * the keys of 'base'.
-     *
-     * @param {Object} base
-     * @param {Object} extension
-     * @return {Object} base extended by the new attributes.
-     **/
-    safeMergeByKeys: (base, extension) => {
-        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));
-                        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 {
-                        // 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)) {
-          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.
-     *
-     * transform-origin is at (0,0).
-     *
-     * @param {HTMLElement} element - The DOM element to scale.
-     * @param {number} scaleX The - X scale factor.
-     * @param {number} scaleY The - Y scale factor.
-     * @return {void}
-     **/
-    setCSSscale: (element, scaleX, scaleY) => {
-        // element.style["transform-origin"] = "0 0";
-        element.style.transformOrigin = "0 0";
-        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.
-    fetch: {
-        /**
-         * A helper function to the the object property value specified by the given key.
-         *
-         * @param {any} object   - The object to get the property's value from. Must not be null.
-         * @param {string} key      - The key of the object property (the name).
-         * @param {any}    fallback - A default value if the key does not exist.
-         **/
-        val: (obj, key, fallback) => {
-            if (!obj.hasOwnProperty(key))
-                return fallback;
-            if (typeof obj[key] == "undefined")
-                return fallback;
-            return obj[key];
-        },
-        /**
-         * A helper function to the the object property numeric value specified by the given key.
-         *
-         * @param {any}    object   - The object to get the property's value from. Must not be null.
-         * @param {string} key      - The key of the object property (the name).
-         * @param {number} fallback - A default value if the key does not exist.
-         * @return {number}
-         **/
-        num: (obj, key, fallback) => {
-            if (!obj.hasOwnProperty(key))
-                return fallback;
-            if (typeof obj[key] === "number")
-                return obj[key];
-            else {
-                try {
-                    return JSON.parse(obj[key]) * 1;
-                }
-                catch (e) {
-                    return fallback;
-                }
-            }
-        },
-        /**
-         * A helper function to the the object property boolean value specified by the given key.
-         *
-         * @param {any}     object   - The object to get the property's value from. Must not be null.
-         * @param {string}  key      - The key of the object property (the name).
-         * @param {boolean} fallback - A default value if the key does not exist.
-         * @return {boolean}
-         **/
-        bool: (obj, key, fallback) => {
-            if (!obj.hasOwnProperty(key))
-                return fallback;
-            if (typeof obj[key] == "boolean")
-                return obj[key];
-            else {
-                try {
-                    return !!JSON.parse(obj[key]);
-                }
-                catch (e) {
-                    return fallback;
-                }
-            }
-        },
-        /**
-         * A helper function to the the object property function-value specified by the given key.
-         *
-         * @param {any}      object   - The object to get the property's value from. Must not be null.
-         * @param {string}   key      - The key of the object property (the name).
-         * @param {function} fallback - A default value if the key does not exist.
-         * @return {function}
-         **/
-        func: (obj, key, fallback) => {
-            if (!obj.hasOwnProperty(key))
-                return fallback;
-            if (typeof obj[key] !== "function")
-                return fallback;
-            return obj[key];
-        }
-    }, // END fetch
-    /**
-     * Installs vertex listeners to the path's vertices so that controlpoints
-     * move with their path points when dragged.
-     *
-     * Bézier path points with attr.bezierAutoAdjust==true will have their
-     * two control points audo-updated if moved, too (keep path connections smooth).
-     *
-     * @param {BezierPath} bezierPath - The path to use auto-adjustment for.
-     **/
-    enableBezierPathAutoAdjust: (bezierPath) => {
-        for (var i = 0; i < bezierPath.bezierCurves.length; i++) {
-            // This should be wrapped into the BezierPath implementation.
-            bezierPath.bezierCurves[i].startPoint.listeners.addDragListener(function (e) {
-                var cindex = bezierPath.locateCurveByStartPoint(e.params.vertex);
-                bezierPath.bezierCurves[cindex].startPoint.addXY(-e.params.dragAmount.x, -e.params.dragAmount.y);
-                bezierPath.moveCurvePoint(cindex * 1, bezierPath.START_POINT, e.params.dragAmount);
-                bezierPath.updateArcLengths();
-            });
-            bezierPath.bezierCurves[i].startControlPoint.listeners.addDragListener(function (e) {
-                var cindex = bezierPath.locateCurveByStartControlPoint(e.params.vertex);
-                if (!bezierPath.bezierCurves[cindex].startPoint.attr.bezierAutoAdjust)
-                    return;
-                bezierPath.adjustPredecessorControlPoint(cindex * 1, true, // obtain handle length?
-                false // update arc lengths
-                );
-                bezierPath.updateArcLengths();
-            });
-            bezierPath.bezierCurves[i].endControlPoint.listeners.addDragListener(function (e) {
-                var cindex = bezierPath.locateCurveByEndControlPoint(e.params.vertex);
-                if (!bezierPath.bezierCurves[cindex % bezierPath.bezierCurves.length].endPoint.attr.bezierAutoAdjust)
-                    return;
-                bezierPath.adjustSuccessorControlPoint(cindex * 1, true, // obtain handle length?
-                false // update arc lengths
-                );
-                bezierPath.updateArcLengths();
-            });
-            if (i + 1 == bezierPath.bezierCurves.length) {
-                // && !bezierPath.adjustCircular ) {
-                // Move last control point with the end point (if not circular)
-                bezierPath.bezierCurves[bezierPath.bezierCurves.length - 1].endPoint.listeners.addDragListener(function (e) {
-                    if (!bezierPath.adjustCircular) {
-                        var cindex = bezierPath.locateCurveByEndPoint(e.params.vertex);
-                        bezierPath.moveCurvePoint(cindex * 1, bezierPath.END_CONTROL_POINT, new Vertex({ x: e.params.dragAmount.x, y: e.params.dragAmount.y }));
-                    }
-                    bezierPath.updateArcLengths();
-                });
-            }
-        } // END for
-    }
-}; // END utils
-export default PlotBoilerplate;
-//# sourceMappingURL=PlotBoilerplate.js.map