plotboilerplate 1.27.0 → 1.28.0

package/src/_esm/src/ts/MouseHandler.js

@@ -0,0 +1,391 @@
+/**
+ * @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
+ **/
+export class XMouseEvent extends MouseEvent {
+}
+export class XWheelEvent extends WheelEvent {
+}
+/**
+ * @classdesc A simple mouse handler for demos.
+ * Use to avoid load massive libraries like jQuery.
+ *
+ * @requires XYCoords
+ */
+export class MouseHandler {
+    /**
+     * 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
+     **/
+    constructor(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.
+        // +-------------------------------------------------
+        const _self = this;
+        this.handlers["mousemove"] = (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"] = (e) => {
+            if (_self.listeners.mouseup)
+                _self.listeners.mouseup(_self.mkParams(e, "mouseup"));
+            _self.mouseDragPos = undefined;
+            _self.mouseDownPos = undefined;
+            _self.mouseButton = -1;
+        };
+        this.handlers["mousedown"] = (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"] = (e) => {
+            if (_self.listeners.click)
+                _self.listeners.click(_self.mkParams(e, "click"));
+        };
+        this.handlers["wheel"] = (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.
+     */
+    relPos(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}
+     */
+    mkParams(event, eventName) {
+        var _a, _b;
+        const rel = this.relPos(event);
+        const xEvent = event;
+        xEvent.params = {
+            element: this.element,
+            name: eventName,
+            isTouchEvent: false,
+            pos: rel,
+            button: 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}
+     */
+    listenFor(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}
+     */
+    unlistenFor(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
+     */
+    drag(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
+     */
+    move(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
+     */
+    up(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
+     */
+    down(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
+     */
+    click(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
+     */
+    wheel(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}
+     */
+    throwAlreadyInstalled(name) {
+        throw `This MouseHandler already has a '${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}
+     */
+    destroy() {
+        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"]);
+    }
+}
+//# sourceMappingURL=MouseHandler.js.map

package/src/_esm/src/ts/MouseHandler.js.map

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

package/src/_esm/src/ts/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/_esm/src/ts/PBImage.js

@@ -0,0 +1,56 @@
+/**
+ * @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 { UIDGenerator } from "./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
+ */
+export class PBImage {
+    /**
+     * 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, upperLeft, lowerRight) {
+        /**
+         * Required to generate proper CSS classes and other class related IDs.
+         **/
+        this.className = "PBImage";
+        this.uid = 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.
+     */
+    destroy() {
+        this.upperLeft.destroy();
+        this.lowerRight.destroy();
+        this.isDestroyed = true;
+    }
+}
+//# sourceMappingURL=PBImage.js.map

package/src/_esm/src/ts/PBImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PBImage.js","sourceRoot":"","sources":["../../../ts/PBImage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;IAcI;AAGJ,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C;;;;;;;GAOG;AACH,MAAM,OAAO,OAAO;IA6ClB;;;;;;;;QAQI;IACJ,YAAY,KAAuB,EAAE,SAAiB,EAAE,UAAkB;QArD1E;;YAEI;QACK,cAAS,GAAW,SAAS,CAAC;QAmDrC,IAAI,CAAC,GAAG,GAAG,YAAY,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,OAAO;QACL,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;QACzB,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;QAC1B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;CACF"}

package/src/_esm/src/ts/PBText.d.ts

@@ -0,0 +1,118 @@
+/**
+ * @author   Ikaros Kappler
+ * @date     2021-11-16
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @modified 2023-09-25 Fixed a type error in the constructor. Nothing vital.
+ * @version  1.1.1
+ **/
+import { Vertex } from "./Vertex";
+import { FontOptions, FontStyle, FontWeight, SVGSerializable, UID } from "./interfaces";
+/**
+ * @classdesc A simple text element: position, fontSize, fontFamily, color, textAlign, lineHeight and rotation.
+ *
+ * @requires FontOptions
+ * @requires FontSize
+ * @requires FontStyle
+ * @requires FontWeight
+ * @requires Vertex
+ * @requires SVGSerializale
+ * @requires UID
+ * @requires UIDGenerator
+ **/
+export declare class PBText implements SVGSerializable, FontOptions {
+    /**
+     * Required to generate proper CSS classes and other class related IDs.
+     **/
+    readonly className: string;
+    /**
+     * The UID of this drawable object.
+     *
+     * @member {UID}
+     * @memberof PBText
+     * @instance
+     * @readonly
+     */
+    readonly uid: UID;
+    /**
+     * @member {string}
+     * @memberof PBText
+     * @instance
+     */
+    text: string;
+    /**
+     * @member {Vertex}
+     * @memberof PBText
+     * @instance
+     */
+    anchor: Vertex;
+    /**
+     * @member {number}
+     * @memberof PBText
+     * @instance
+     */
+    fontSize: number | undefined;
+    /**
+     * @member {number}
+     * @memberof PBText
+     * @instance
+     */
+    lineHeight: number | undefined;
+    /**
+     * @member {FontWeight}
+     * @memberof PBText
+     * @instance
+     */
+    fontWeight: FontWeight | undefined;
+    /**
+     * @member {FontStyle}
+     * @memberof PBText
+     * @instance
+     */
+    fontStyle: FontStyle | undefined;
+    /**
+     * @member {CanvasRenderingContext2D["textAlign"]}
+     * @memberof PBText
+     * @instance
+     */
+    textAlign: CanvasRenderingContext2D["textAlign"] | undefined;
+    /**
+     * @member {number}
+     * @memberof PBText
+     * @instance
+     */
+    rotation: number | undefined;
+    /**
+     * @member {number}
+     * @memberof PBText
+     * @instance
+     */
+    fontFamily: string | undefined;
+    /**
+     * @member {number}
+     * @memberof PBText
+     * @instance
+     */
+    color: string | undefined;
+    /**
+     * @member isDestroyed
+     * @memberof PBText
+     * @type {boolean}
+     * @instance
+     */
+    isDestroyed: boolean;
+    /**
+     * Create a new circle with given center point and radius.
+     *
+     * @constructor
+     * @name Circle
+     * @param {Vertex} center - The center point of the circle.
+     * @param {number} radius - The radius of the circle.
+     */
+    constructor(text: string, anchor?: Vertex, options?: FontOptions);
+    /**
+     * 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;
+}