plotboilerplate 1.27.0 → 1.28.0

package/src/_cjs/MouseHandler.js

@@ -0,0 +1,423 @@
+"use strict";
+/**
+ * @author   Ikaros Kappler
+ * @date     2018-03-19
+ * @modified 2018-04-28 Added the param 'wasDragged'.
+ * @modified 2018-08-16 Added the param 'dragAmount'.
+ * @modified 2018-08-27 Added the param 'element'.
+ * @modified 2018-11-11 Changed the scope from a simple global var to a member of window/_context.
+ * @modified 2018-11-19 Renamed the 'mousedown' function to 'down' and the 'mouseup' function to 'up'.
+ * @modified 2018-11-28 Added the 'wheel' listener.
+ * @modified 2018-12-09 Cleaned up some code.
+ * @modified 2019-02-10 Cleaned up some more code.
+ * @modified 2020-03-25 Ported this class from vanilla-JS to Typescript.
+ * @modified 2020-04-08 Fixed the click event (internally fired a 'mouseup' event) (1.0.10)
+ * @modified 2020-04-08 Added the optional 'name' property. (1.0.11)
+ * @modified 2020-04-08 The new version always installs internal listenrs to track drag events even
+ *                      if there is no external drag listener installed (1.1.0).
+ * @modified 2020-10-04 Added extended JSDoc comments.
+ * @modified 2020-11-25 Added the `isTouchEvent` param.
+ * @modified 2021-01-10 The mouse handler is now also working with SVGElements.
+ * @modified 2022-08-16 Fixed a bug in the mouse button detection.
+ * @version  1.2.1
+ *
+ * @file MouseHandler
+ * @public
+ **/
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MouseHandler = exports.XWheelEvent = exports.XMouseEvent = void 0;
+var XMouseEvent = /** @class */ (function (_super) {
+    __extends(XMouseEvent, _super);
+    function XMouseEvent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return XMouseEvent;
+}(MouseEvent));
+exports.XMouseEvent = XMouseEvent;
+var XWheelEvent = /** @class */ (function (_super) {
+    __extends(XWheelEvent, _super);
+    function XWheelEvent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return XWheelEvent;
+}(WheelEvent));
+exports.XWheelEvent = XWheelEvent;
+/**
+ * @classdesc A simple mouse handler for demos.
+ * Use to avoid load massive libraries like jQuery.
+ *
+ * @requires XYCoords
+ */
+var MouseHandler = /** @class */ (function () {
+    /**
+     * The constructor.
+     *
+     * Pass the DOM element you want to receive mouse events from.
+     *
+     * Usage
+     * =====
+     * @example
+     *   // Javascript
+     *   new MouseHandler( document.getElementById('mycanvas') )
+     *	    .drag( function(e) {
+     *		console.log( 'Mouse dragged: ' + JSON.stringify(e) );
+     *		if( e.params.leftMouse ) ;
+     *		else if( e.params.rightMouse ) ;
+     *	    } )
+     *	    .move( function(e) {
+     *		console.log( 'Mouse moved: ' + JSON.stringify(e.params) );
+     *	    } )
+     *          .up( function(e) {
+     *              console.log( 'Mouse up. Was dragged?', e.params.wasDragged );
+     *          } )
+     *          .down( function(e) {
+     *              console.log( 'Mouse down.' );
+     *          } )
+     *          .click( function(e) {
+     *              console.log( 'Click.' );
+     *          } )
+     *          .wheel( function(e) {
+     *              console.log( 'Wheel. delta='+e.deltaY );
+     *          } )
+     *
+     * @example
+     *   // Typescript
+     *   new MouseHandler( document.getElementById('mycanvas') )
+     *	    .drag( (e:XMouseEvent) => {
+     *		console.log( 'Mouse dragged: ' + JSON.stringify(e) );
+     *		if( e.params.leftMouse ) ;
+     *		else if( e.params.rightMouse ) ;
+     *	    } )
+     *	    .move( (e:XMouseEvent) => {
+     *		console.log( 'Mouse moved: ' + JSON.stringify(e.params) );
+     *	    } )
+     *          .up( (e:XMouseEvent) => {
+     *              console.log( 'Mouse up. Was dragged?', e.params.wasDragged );
+     *          } )
+     *          .down( (e:XMouseEvent) => {
+     *              console.log( 'Mouse down.' );
+     *          } )
+     *          .click( (e:XMouseEvent) => {
+     *              console.log( 'Click.' );
+     *          } )
+     *          .wheel( (e:XWheelEvent) => {
+     *              console.log( 'Wheel. delta='+e.deltaY );
+     *          } )
+     *
+     * @constructor
+     * @instance
+     * @memberof MouseHandler
+     * @param {HTMLElement} element
+     **/
+    function MouseHandler(element, name) {
+        this.mouseDownPos = undefined;
+        this.mouseDragPos = undefined;
+        // TODO: cc
+        // private mousePos       : { x:number, y:number }|undefined = undefined;
+        this.mouseButton = -1;
+        this.listeners = {};
+        this.installed = {};
+        this.handlers = {};
+        // +----------------------------------------------------------------------
+        // | Some private vars to store the current mouse/position/button state.
+        // +-------------------------------------------------
+        this.name = name;
+        this.element = element;
+        this.mouseDownPos = undefined;
+        this.mouseDragPos = undefined;
+        // this.mousePos     = null;
+        this.mouseButton = -1;
+        this.listeners = {};
+        this.installed = {};
+        this.handlers = {};
+        // +----------------------------------------------------------------------
+        // | Define the internal event handlers.
+        // |
+        // | They will dispatch the modified event (relative mouse position,
+        // | drag offset, ...) to the callbacks.
+        // +-------------------------------------------------
+        var _self = this;
+        this.handlers["mousemove"] = function (e) {
+            if (_self.listeners.mousemove)
+                _self.listeners.mousemove(_self.mkParams(e, "mousemove"));
+            if (_self.mouseDragPos && _self.listeners.drag)
+                _self.listeners.drag(_self.mkParams(e, "drag"));
+            if (_self.mouseDownPos)
+                _self.mouseDragPos = _self.relPos(e);
+        };
+        this.handlers["mouseup"] = function (e) {
+            if (_self.listeners.mouseup)
+                _self.listeners.mouseup(_self.mkParams(e, "mouseup"));
+            _self.mouseDragPos = undefined;
+            _self.mouseDownPos = undefined;
+            _self.mouseButton = -1;
+        };
+        this.handlers["mousedown"] = function (e) {
+            _self.mouseDragPos = _self.relPos(e);
+            _self.mouseDownPos = _self.relPos(e);
+            _self.mouseButton = e.button;
+            if (_self.listeners.mousedown)
+                _self.listeners.mousedown(_self.mkParams(e, "mousedown"));
+        };
+        this.handlers["click"] = function (e) {
+            if (_self.listeners.click)
+                _self.listeners.click(_self.mkParams(e, "click"));
+        };
+        this.handlers["wheel"] = function (e) {
+            if (_self.listeners.wheel)
+                _self.listeners.wheel(_self.mkParams(e, "wheel"));
+        };
+        this.element.addEventListener("mousemove", this.handlers["mousemove"]);
+        this.element.addEventListener("mouseup", this.handlers["mouseup"]);
+        this.element.addEventListener("mousedown", this.handlers["mousedown"]);
+        this.element.addEventListener("click", this.handlers["click"]);
+        this.element.addEventListener("wheel", this.handlers["wheel"]);
+    }
+    /**
+     * Get relative position from the given MouseEvent.
+     *
+     * @name relPos
+     * @memberof MouseHandler
+     * @instance
+     * @private
+     * @param {MouseEvent} e - The mouse event to get the relative position for.
+     * @return {XYCoords} The relative mouse coordinates.
+     */
+    MouseHandler.prototype.relPos = function (e) {
+        return { x: e.offsetX, y: e.offsetY };
+    };
+    /**
+     * Build the extended event params.
+     *
+     * @name mkParams
+     * @memberof MouseHandler
+     * @instance
+     * @private
+     * @param {MouseEvent} event - The mouse event to get the relative position for.
+     * @param {string} eventName - The name of the firing event.
+     * @return {XMouseEvent}
+     */
+    MouseHandler.prototype.mkParams = function (event, eventName) {
+        var _a, _b;
+        var rel = this.relPos(event);
+        var xEvent = event;
+        xEvent.params = {
+            element: this.element,
+            name: eventName,
+            isTouchEvent: false,
+            pos: rel,
+            button: event.button, // this.mouseButton,
+            leftButton: event.button === 0, // this.mouseButton === 0,
+            middleButton: event.button === 1, // this.mouseButton === 1,
+            rightButton: event.button === 2, // this.mouseButton === 2,
+            mouseDownPos: (_a = this.mouseDownPos) !== null && _a !== void 0 ? _a : { x: NaN, y: NaN },
+            draggedFrom: (_b = this.mouseDragPos) !== null && _b !== void 0 ? _b : { x: NaN, y: NaN },
+            wasDragged: this.mouseDownPos != null && (this.mouseDownPos.x != rel.x || this.mouseDownPos.y != rel.y),
+            dragAmount: this.mouseDragPos != null ? { x: rel.x - this.mouseDragPos.x, y: rel.y - this.mouseDragPos.y } : { x: 0, y: 0 }
+        };
+        return xEvent;
+    };
+    /**
+     * Install a new listener.
+     * Please note that this mouse handler can only handle one listener per event type.
+     *
+     * @name listenFor
+     * @memberof MouseHandler
+     * @instance
+     * @private
+     * @param {string} eventName - The name of the firing event to listen for.
+     * @return {void}
+     */
+    MouseHandler.prototype.listenFor = function (eventName) {
+        if (this.installed[eventName])
+            return;
+        // In the new version 1.1.0 has all internal listeners installed by default.
+        this.installed[eventName] = true;
+    };
+    /**
+     * Un-install a new listener.
+     *
+     * @name listenFor
+     * @memberof MouseHandler
+     * @instance
+     * @private
+     * @param {string} eventName - The name of the firing event to unlisten for.
+     * @return {void}
+     */
+    MouseHandler.prototype.unlistenFor = function (eventName) {
+        if (!this.installed[eventName])
+            return;
+        // In the new version 1.1.0 has all internal listeners installed by default.
+        delete this.installed[eventName];
+    };
+    /**
+     * Installer function to listen for a specific event: mouse-drag.
+     * Pass your callbacks here.
+     *
+     * Note: this support chaining.
+     *
+     * @name drag
+     * @memberof MouseHandler
+     * @instance
+     * @param {XMouseCallback} callback - The drag-callback to listen for.
+     * @return {MouseHandler} this
+     */
+    MouseHandler.prototype.drag = function (callback) {
+        if (this.listeners.drag)
+            this.throwAlreadyInstalled("drag");
+        this.listeners.drag = callback;
+        this.listenFor("mousedown");
+        this.listenFor("mousemove");
+        this.listenFor("mouseup");
+        return this;
+    };
+    /**
+     * Installer function to listen for a specific event: mouse-move.
+     * Pass your callbacks here.
+     *
+     * Note: this support chaining.
+     *
+     * @name move
+     * @memberof MouseHandler
+     * @instance
+     * @param {XMouseCallback} callback - The move-callback to listen for.
+     * @return {MouseHandler} this
+     */
+    MouseHandler.prototype.move = function (callback) {
+        if (this.listeners.mousemove)
+            this.throwAlreadyInstalled("mousemove");
+        this.listenFor("mousemove");
+        this.listeners.mousemove = callback;
+        return this;
+    };
+    /**
+     * Installer function to listen for a specific event: mouse-up.
+     * Pass your callbacks here.
+     *
+     * Note: this support chaining.
+     *
+     * @name up
+     * @memberof MouseHandler
+     * @instance
+     * @param {XMouseCallback} callback - The up-callback to listen for.
+     * @return {MouseHandler} this
+     */
+    MouseHandler.prototype.up = function (callback) {
+        if (this.listeners.mouseup)
+            this.throwAlreadyInstalled("mouseup");
+        this.listenFor("mouseup");
+        this.listeners.mouseup = callback;
+        return this;
+    };
+    /**
+     * Installer function to listen for a specific event: mouse-down.
+     * Pass your callbacks here.
+     *
+     * Note: this support chaining.
+     *
+     * @name down
+     * @memberof MouseHandler
+     * @instance
+     * @param {XMouseCallback} callback - The down-callback to listen for.
+     * @return {MouseHandler} this
+     */
+    MouseHandler.prototype.down = function (callback) {
+        if (this.listeners.mousedown)
+            this.throwAlreadyInstalled("mousedown");
+        this.listenFor("mousedown");
+        this.listeners.mousedown = callback;
+        return this;
+    };
+    /**
+     * Installer function to listen for a specific event: mouse-click.
+     * Pass your callbacks here.
+     *
+     * Note: this support chaining.
+     *
+     * @name click
+     * @memberof MouseHandler
+     * @instance
+     * @param {XMouseCallback} callback - The click-callback to listen for.
+     * @return {MouseHandler} this
+     */
+    MouseHandler.prototype.click = function (callback) {
+        if (this.listeners.click)
+            this.throwAlreadyInstalled("click");
+        this.listenFor("click");
+        this.listeners.click = callback;
+        return this;
+    };
+    /**
+     * Installer function to listen for a specific event: mouse-wheel.
+     * Pass your callbacks here.
+     *
+     * Note: this support chaining.
+     *
+     * @name wheel
+     * @memberof MouseHandler
+     * @instance
+     * @param {XWheelCallback} callback - The wheel-callback to listen for.
+     * @return {MouseHandler} this
+     */
+    MouseHandler.prototype.wheel = function (callback) {
+        if (this.listeners.wheel)
+            this.throwAlreadyInstalled("wheel");
+        this.listenFor("wheel");
+        this.listeners.wheel = callback;
+        return this;
+    };
+    /**
+     * An internal function to throw events.
+     *
+     * @name throwAlreadyInstalled
+     * @memberof MouseHandler
+     * @instance
+     * @private
+     * @param {string} name - The name of the event.
+     * @return {void}
+     */
+    MouseHandler.prototype.throwAlreadyInstalled = function (name) {
+        throw "This MouseHandler already has a '".concat(name, "' callback. To keep the code simple there is only room for one.");
+    };
+    /**
+     * Call this when your work is done.
+     *
+     * The function will un-install all event listeners.
+     *
+     * @name destroy
+     * @memberof MouseHandler
+     * @instance
+     * @private
+     * @return {void}
+     */
+    MouseHandler.prototype.destroy = function () {
+        this.unlistenFor("mousedown");
+        this.unlistenFor("mousemove");
+        this.unlistenFor("moseup");
+        this.unlistenFor("click");
+        this.unlistenFor("wheel");
+        this.element.removeEventListener("mousemove", this.handlers["mousemove"]);
+        this.element.removeEventListener("mouseup", this.handlers["mousedown"]);
+        this.element.removeEventListener("mousedown", this.handlers["mousedown"]);
+        this.element.removeEventListener("click", this.handlers["click"]);
+        this.element.removeEventListener("wheel", this.handlers["wheel"]);
+    };
+    return MouseHandler;
+}());
+exports.MouseHandler = MouseHandler;
+//# sourceMappingURL=MouseHandler.js.map

package/src/_cjs/MouseHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MouseHandler.js","sourceRoot":"","sources":["../ts/MouseHandler.ts"],"names":[],"mappings":"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"}

package/src/_cjs/PBImage.d.ts

@@ -0,0 +1,81 @@
+/**
+ * @author   Ikaros Kappler
+ * @date     2019-01-30
+ * @modified 2019-03-23 Added JSDoc tags.
+ * @modified 2020-03-25 Ported this class from vanilla-JS to Typescript.
+ * @modified 2021-01-20 Added UID.
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @modified 2022-02-02 Cleared the `PBImage.toSVGString` function (deprecated). Use `drawutilssvg` instead.
+ * @version 1.2.0
+ *
+ * @file PBImage
+ * @fileoverview As native Image objects have only a position and with
+ *               and height thei are not suitable for UI dragging interfaces.
+ * @public
+ **/
+import { Vertex } from "./Vertex";
+import { SVGSerializable, UID } from "./interfaces";
+/**
+ * @classdesc A wrapper for image objects. Has an upper left and a lower right corner point.
+ *
+ * @requires Vertex
+ * @requires SVGSerializable
+ * @requires UID
+ * @requires UIDGenerator
+ */
+export declare class PBImage implements SVGSerializable {
+    /**
+     * Required to generate proper CSS classes and other class related IDs.
+     **/
+    readonly className: string;
+    /**
+     * The UID of this drawable object.
+     *
+     * @member {UID}
+     * @memberof PBImage
+     * @instance
+     * @readonly
+     */
+    readonly uid: UID;
+    /**
+     * @member {Vertex}
+     * @memberof PBImage
+     * @instance
+     */
+    image: HTMLImageElement;
+    /**
+     * @member {Vertex}
+     * @memberof PBImage
+     * @instance
+     */
+    upperLeft: Vertex;
+    /**
+     * @member {Vertex}
+     * @memberof PBImage
+     * @instance
+     */
+    lowerRight: Vertex;
+    /**
+     * @member isDestroyed
+     * @memberof PBImage
+     * @type {boolean}
+     * @instance
+     */
+    isDestroyed: boolean;
+    /**
+     * The constructor.
+     *
+     * @constructor
+     * @name PBImage
+     * @param {Image} image - The actual image.
+     * @param {Vertex} upperLeft - The upper left corner.
+     * @param {Vertex} lowerRight - The lower right corner.
+     **/
+    constructor(image: HTMLImageElement, upperLeft: Vertex, lowerRight: Vertex);
+    /**
+     * This function should invalidate any installed listeners and invalidate this object.
+     * After calling this function the object might not hold valid data any more and
+     * should not be used.
+     */
+    destroy(): void;
+}

package/src/_cjs/PBImage.js

@@ -0,0 +1,61 @@
+"use strict";
+/**
+ * @author   Ikaros Kappler
+ * @date     2019-01-30
+ * @modified 2019-03-23 Added JSDoc tags.
+ * @modified 2020-03-25 Ported this class from vanilla-JS to Typescript.
+ * @modified 2021-01-20 Added UID.
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @modified 2022-02-02 Cleared the `PBImage.toSVGString` function (deprecated). Use `drawutilssvg` instead.
+ * @version 1.2.0
+ *
+ * @file PBImage
+ * @fileoverview As native Image objects have only a position and with
+ *               and height thei are not suitable for UI dragging interfaces.
+ * @public
+ **/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PBImage = void 0;
+var UIDGenerator_1 = require("./UIDGenerator");
+/**
+ * @classdesc A wrapper for image objects. Has an upper left and a lower right corner point.
+ *
+ * @requires Vertex
+ * @requires SVGSerializable
+ * @requires UID
+ * @requires UIDGenerator
+ */
+var PBImage = /** @class */ (function () {
+    /**
+     * The constructor.
+     *
+     * @constructor
+     * @name PBImage
+     * @param {Image} image - The actual image.
+     * @param {Vertex} upperLeft - The upper left corner.
+     * @param {Vertex} lowerRight - The lower right corner.
+     **/
+    function PBImage(image, upperLeft, lowerRight) {
+        /**
+         * Required to generate proper CSS classes and other class related IDs.
+         **/
+        this.className = "PBImage";
+        this.uid = UIDGenerator_1.UIDGenerator.next();
+        this.image = image;
+        this.upperLeft = upperLeft;
+        this.lowerRight = lowerRight;
+    }
+    /**
+     * This function should invalidate any installed listeners and invalidate this object.
+     * After calling this function the object might not hold valid data any more and
+     * should not be used.
+     */
+    PBImage.prototype.destroy = function () {
+        this.upperLeft.destroy();
+        this.lowerRight.destroy();
+        this.isDestroyed = true;
+    };
+    return PBImage;
+}());
+exports.PBImage = PBImage;
+//# sourceMappingURL=PBImage.js.map

package/src/_cjs/PBImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PBImage.js","sourceRoot":"","sources":["../ts/PBImage.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;IAcI;;;AAGJ,+CAA8C;AAG9C;;;;;;;GAOG;AACH;IA6CE;;;;;;;;QAQI;IACJ,iBAAY,KAAuB,EAAE,SAAiB,EAAE,UAAkB;QArD1E;;YAEI;QACK,cAAS,GAAW,SAAS,CAAC;QAmDrC,IAAI,CAAC,GAAG,GAAG,2BAAY,CAAC,IAAI,EAAE,CAAC;QAC/B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B,CAAC;IAED;;;;OAIG;IACH,yBAAO,GAAP;QACE,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;QACzB,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;QAC1B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IACH,cAAC;AAAD,CAAC,AAvED,IAuEC;AAvEY,0BAAO"}