plotboilerplate 1.12.7 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plotboilerplate",
-  "version": "1.12.7",
+  "version": "1.13.0",
   "description": "A simple javascript plotting boilerplate for 2d stuff.",
   "private": false,
   "main": "src/cjs/index.js",

package/src/cjs/PBText.d.ts

@@ -0,0 +1,116 @@
+/**
+ * @author   Ikaros Kappler
+ * @date     2021-11-16
+ * @version  1.0.0
+ **/
+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;
+    /**
+     * 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);
+    /**
+     * Create an SVG representation of this circle.
+     *
+     * @deprecated DEPRECATION Please use the drawutilssvg library and an XMLSerializer instead.
+     * @method toSVGString
+     * @param {object=} options - An optional set of options, like 'className'.
+     * @return {string} A string representing the SVG code for this vertex.
+     * @instance
+     * @memberof Circle
+     */
+    toSVGString(options: {
+        className?: string;
+    }): string;
+}

package/src/cjs/PBText.js

@@ -0,0 +1,66 @@
+"use strict";
+/**
+ * @author   Ikaros Kappler
+ * @date     2021-11-16
+ * @version  1.0.0
+ **/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PBText = void 0;
+var UIDGenerator_1 = require("./UIDGenerator");
+var Vertex_1 = require("./Vertex");
+/**
+ * @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
+ **/
+var PBText = /** @class */ (function () {
+    /**
+     * 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.
+     */
+    function PBText(text, anchor, options) {
+        /**
+         * Required to generate proper CSS classes and other class related IDs.
+         **/
+        this.className = "PBText";
+        this.uid = UIDGenerator_1.UIDGenerator.next();
+        this.text = text;
+        this.anchor = anchor !== null && anchor !== void 0 ? anchor : new Vertex_1.Vertex();
+        this.color = options.color;
+        this.fontFamily = options.fontFamily;
+        this.fontSize = options.fontSize;
+        this.fontStyle = options.fontStyle;
+        this.fontWeight = options.fontWeight;
+        this.lineHeight = options.lineHeight;
+        this.textAlign = options.textAlign;
+        this.rotation = options.rotation;
+    }
+    /**
+     * Create an SVG representation of this circle.
+     *
+     * @deprecated DEPRECATION Please use the drawutilssvg library and an XMLSerializer instead.
+     * @method toSVGString
+     * @param {object=} options - An optional set of options, like 'className'.
+     * @return {string} A string representing the SVG code for this vertex.
+     * @instance
+     * @memberof Circle
+     */
+    PBText.prototype.toSVGString = function (options) {
+        console.warn("[PBText.toSVGString()] This function is not implemented as it defines a deprecated method. Use the 'drawutilssvg.text()' method instead.");
+        return "";
+    };
+    return PBText;
+}()); // END class
+exports.PBText = PBText;
+//# sourceMappingURL=PBText.js.map

package/src/cjs/PBText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PBText.js","sourceRoot":"","sources":["../ts/PBText.ts"],"names":[],"mappings":";AAAA;;;;IAII;;;AAEJ,+CAA8C;AAC9C,mCAAkC;AAGlC;;;;;;;;;;;IAWI;AACJ;IAsFE;;;;;;;OAOG;IACH,gBAAY,IAAY,EAAE,MAAe,EAAE,OAAqB;QA7FhE;;YAEI;QACK,cAAS,GAAW,QAAQ,CAAC;QA2FpC,IAAI,CAAC,GAAG,GAAG,2BAAY,CAAC,IAAI,EAAE,CAAC;QAC/B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,IAAI,eAAM,EAAE,CAAC;QACrC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC;QACrC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC;QACrC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC;QACrC,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;IACnC,CAAC;IAED;;;;;;;;;OASG;IACH,4BAAW,GAAX,UAAY,OAA+B;QACzC,OAAO,CAAC,IAAI,CACV,0IAA0I,CAC3I,CAAC;QACF,OAAO,EAAE,CAAC;IACZ,CAAC;IACH,aAAC;AAAD,CAAC,AA5HD,IA4HC,CAAC,YAAY;AA5HD,wBAAM"}

package/src/cjs/PlotBoilerplate.d.ts

@@ -73,7 +73,8 @@
  * @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.
- * @version  1.14.0
+ * @modified 2021-11-16 Adding the `PBText` drawable.
+ * @version  1.15.0
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.

package/src/cjs/PlotBoilerplate.js

@@ -74,7 +74,8 @@
  * @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.
- * @version  1.14.0
+ * @modified 2021-11-16 Adding the `PBText` drawable.
+ * @version  1.15.0
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.
@@ -102,6 +103,7 @@ var VEllipseSector_1 = require("./VEllipseSector");
 var Vector_1 = require("./Vector");
 var Vertex_1 = require("./Vertex");
 var VertexAttr_1 = require("./VertexAttr");
+var PBText_1 = require("./PBText");
 /**
  * @classdesc The main class of the PlotBoilerplate.
  *
@@ -285,6 +287,16 @@ var PlotBoilerplate = /** @class */ (function () {
                 handleLine: {
                     color: "rgba(180,180,180,0.5)",
                     lineWidth: 1
+                },
+                pathVertex: {
+                    color: "#B400FF",
+                    lineWidth: 1,
+                    fill: true
+                },
+                controlVertex: {
+                    color: "#B8D438",
+                    lineWidth: 1,
+                    fill: true
                 }
             },
             polygon: {
@@ -330,6 +342,12 @@ var PlotBoilerplate = /** @class */ (function () {
             image: {
                 color: "#a8a8a8",
                 lineWidth: 1
+            },
+            text: {
+                color: "rgba(192,0,128,0.5)",
+                lineWidth: 1,
+                fill: true,
+                anchor: true
             }
         }; // END drawConfig
         // +---------------------------------------------------------------------------------
@@ -637,6 +655,11 @@ var PlotBoilerplate = /** @class */ (function () {
             });
             drawable.lowerRight.attr.selectable = false;
         }
+        else if (drawable instanceof PBText_1.PBText) {
+            this.vertices.push(drawable.anchor);
+            this.drawables.push(drawable);
+            drawable.anchor.attr.selectable = false;
+        }
         else {
             throw "Cannot add drawable of unrecognized type: " + typeof drawable + ".";
         }
@@ -735,6 +758,9 @@ var PlotBoilerplate = /** @class */ (function () {
                         this.removeVertex(drawable.upperLeft, false);
                         this.removeVertex(drawable.lowerRight, false);
                     }
+                    else if (drawable instanceof PBText_1.PBText) {
+                        this.removeVertex(drawable.anchor, false);
+                    }
                 } // END removeWithVertices
                 if (redraw) {
                     this.redraw();
@@ -908,32 +934,43 @@ var PlotBoilerplate = /** @class */ (function () {
             for (var c in d.bezierCurves) {
                 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.bezierAutoAdjust) {
-                        if (d.bezierCurves[c].startPoint.attr.visible) {
-                            draw.setCurrentId(d.uid + "_h0");
-                            draw.setCurrentClassName(d.className + "-start-handle");
-                            draw.diamondHandle(d.bezierCurves[c].startPoint, 7, this._handleColor(d.bezierCurves[c].startPoint, this.drawConfig.vertex.color));
+                    if (d.bezierCurves[c].startPoint.attr.visible) {
+                        var 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.bezierAutoAdjust) {
-                        if (d.bezierCurves[c].endPoint.attr.visible) {
-                            draw.setCurrentId(d.uid + "_h1");
-                            draw.setCurrentClassName(d.className + "-end-handle");
-                            draw.diamondHandle(d.bezierCurves[c].endPoint, 7, this._handleColor(d.bezierCurves[c].endPoint, this.drawConfig.vertex.color));
+                    d.bezierCurves[c].startPoint.attr.renderTime = renderTime;
+                    if (d.bezierCurves[c].endPoint.attr.visible) {
+                        var 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));
                         }
-                        d.bezierCurves[c].endPoint.attr.renderTime = renderTime;
                     }
                     if (d.bezierCurves[c].startControlPoint.attr.visible) {
-                        draw.setCurrentId(d.uid + "_h2");
-                        draw.setCurrentClassName(d.className + "-start-control-handle");
-                        draw.circleHandle(d.bezierCurves[c].startControlPoint, 3, this._handleColor(d.bezierCurves[c].startControlPoint, "#008888"));
+                        var 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) {
-                        draw.setCurrentId(d.uid + "_h3");
-                        draw.setCurrentClassName(d.className + "-end-control-handle");
-                        draw.circleHandle(d.bezierCurves[c].endControlPoint, 3, this._handleColor(d.bezierCurves[c].endControlPoint, "#008888"));
+                        var 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;
                 }
@@ -1049,6 +1086,16 @@ var PlotBoilerplate = /** @class */ (function () {
                 d.lowerRight.attr.renderTime = renderTime;
             }
         }
+        else if (d instanceof PBText_1.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.");
         }