plotboilerplate 1.12.10 → 1.13.0

package/README.md

@@ -44,12 +44,15 @@ often use for the visualization of 2D geometries. Basic features are
   - images
     ([docs](https://plotboilerplate.io/docs_typedoc/classes/pbimage.html "PBImage class"),
     [example](https://plotboilerplate.io/repo/demos/basic-PBImage "PBImage example"))
+  - text
+    ([docs](https://plotboilerplate.io/docs_typedoc/classes/pbtext.html "PBText class"),
+    [example](https://plotboilerplate.io/repo/demos/basic-PBText "PBText example"))
 - configuration of the canvas behavior (fullsize, interaction, raster)
 - mouse interaction (zoom, pan, drag elements)
 - keyboard interaction
 - touch interaction for dragging vertices (mobile devices: zoom, pan, drag elements)
 
-The compressed library has 123kb.
+The compressed library has 128kb.
 
 ## Install the package via npm
 

package/changelog.md

@@ -1,5 +1,18 @@
 # Changelog
 
+- 2021-11-24
+  - Speeding up the demo page with async script execution.
+  - Finalizing the demo page for the new `PBText` element (note: it has this name because `Text` already exists).
+- 2021-11-19
+  - Fixing the `drawutilssvg.label(text,x,y)` position.
+  - Added the `color` param to the `label(...)` function.
+- 2021-11-16
+  - Added `text` options to the `DrawConfig` interface.
+  - Added the `PBText` class.
+- 2021-11-15
+  - Adding more parameters tot the `drawutilssvg.text()` function: fontSize, textAlign, fontFamily, lineHeight.
+- 2021-11-12
+  - Adding more parameters tot the `draw.text()` function: fontSize, textAlign, fontFamily, lineHeight.
 - 2021-11.07
   - Changed the behavior of `darken` and `lighten`: the passed value is handled relative now which makes values much easier predictable and makes the change feel more 'natural'.
   - Added tests for the Color class. There were some strange things happening the the `ligthen` and `darken` function.

package/dist/index.esm.js

@@ -4165,8 +4165,12 @@ CircleSector.circleSectorUtils = {
  * @modified 2021-03-31 Added 'ellipseSector' the the class names.
  * @modified 2021-03-31 Implemented buffering using a buffer <g> node and the beginDrawCycle and endDrawCycle methods.
  * @modified 2021-05-31 Added the `setConfiguration` function from `DrawLib`.
- * @version  1.3.0
+ * @modified 2021-11-15 Adding more parameters tot the `text()` function: fontSize, textAlign, fontFamily, lineHeight.
+ * @modified 2021-11-19 Fixing the `label(text,x,y)` position.
+ * @modified 2021-11-19 Added the `color` param to the `label(...)` function.
+ * @version  1.4.0
  **/
+const RAD_TO_DEG = 180 / Math.PI;
 /**
  * @classdesc A helper class for basic SVG drawing operations. This class should
  * be compatible to the default 'draw' class.
@@ -4226,7 +4230,8 @@ class drawutilssvg {
             "vertex": "Vertex",
             "line": "Line",
             "vector": "Vector",
-            "image": "Image"
+            "image": "Image",
+            "text": "Text"
         };
         // Question: why isn't this working if the svgNode is created dynamically? (nodeStyle.sheet is null)
         const rules = [];
@@ -5006,27 +5011,65 @@ class drawutilssvg {
         if (!isOpen)
             d.push("Z");
         node.setAttribute("d", d.join(" "));
-        return this._bindFillDraw(node, "polyline", color, lineWidth || 1);
+        return this._bindFillDraw(node, "polygon", color, lineWidth || 1);
     }
     /**
-     * Draw a text label at the given relative position.
+     * Draw a text at the given relative position.
      *
-     * @method label
+     * @method text
      * @param {string} text - The text to draw.
      * @param {number} x - The x-position to draw the text at.
      * @param {number} y - The y-position to draw the text at.
-     * @param {number=} rotation - The (optional) rotation in radians.
+     * @param {string=} options.color - The Color to use.
+     * @param {string=} options.fontFamily - The font family to use.
+     * @param {number=} options.fontSize - The font size (in pixels) to use.
+     * @param {FontStyle=} options.fontStyle - The font style to use.
+     * @param {FontWeight=} options.fontWeight - The font weight to use.
+     * @param {number=} options.lineHeight - The line height (in pixels) to use.
+     * @param {number=} options.rotation - The (optional) rotation in radians.
+     * @param {string=} options.textAlign - The text align to use. According to the specifiactions (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign) valid values are `"left" || "right" || "center" || "start" || "end"`.
      * @return {void}
      * @instance
-     * @memberof drawutilssvg
+     * @memberof drawutils
      */
     text(text, x, y, options) {
+        var _a, _b;
         options = options || {};
         const color = options.color || "black";
-        const node = this.makeNode("text");
-        node.setAttribute("x", `${this._x(x)}`);
-        node.setAttribute("y", `${this._y(y)}`);
-        node.innerHTML = text;
+        const lineHeight = ((_b = (_a = options.lineHeight) !== null && _a !== void 0 ? _a : options.fontSize) !== null && _b !== void 0 ? _b : 0) * this.scale.x;
+        // https://www.w3.org/TR/SVG/text.html#TextAnchorProperty
+        //    start | middle | end
+        const textAlign = options.textAlign === "left" || options.textAlign === "start"
+            ? "start"
+            : options.textAlign === "center"
+                ? "middle"
+                : options.textAlign === "right" || options.textAlign === "end"
+                    ? "end"
+                    : "start";
+        const transformOrigin = `${this._x(x)}px ${this._y(y)}px`;
+        const translate = `translate(${this._x(x)} ${this._y(y) + lineHeight / 2})`;
+        // Safari has a transform-origin/rotation bug.
+        // It's essential to use rotate(r,x,y) here. "rotate(r)"" with transform-origin(x,y) won't do the job.
+        // And rotate and translate cannot be used is combination on a text object.
+        // So wrap the text inside a <g>, translate the <g>, and rotate the text inside.
+        const rotate = options.rotation ? `rotate(${options.rotation * RAD_TO_DEG} 0 0)` : ``;
+        const node = this.makeNode("g");
+        const curId = this.curId;
+        this.curId = curId + "_text";
+        const textNode = this.makeNode("text");
+        node.appendChild(textNode);
+        textNode.setAttribute("font-family", options.fontFamily); // May be undefined
+        textNode.setAttribute("font-size", options.fontSize ? `${options.fontSize * this.scale.x}` : null);
+        textNode.setAttribute("font-style", options.fontStyle ? `${options.fontStyle}` : null);
+        textNode.setAttribute("font-weight", options.fontWeight ? `${options.fontWeight}` : null);
+        textNode.setAttribute("text-anchor", textAlign);
+        textNode.setAttribute("transform-origin", "0 0");
+        textNode.setAttribute("transform", rotate);
+        node.setAttribute("transform-origin", transformOrigin);
+        node.setAttribute("transform", translate);
+        textNode.innerHTML = text;
+        // Restore old ID
+        this.curId = curId;
         return this._bindFillDraw(node, "text", color, 1);
     }
     /**
@@ -5037,16 +5080,21 @@ class drawutilssvg {
      * @param {number} x - The x-position to draw the text at.
      * @param {number} y - The y-position to draw the text at.
      * @param {number=} rotation - The (optional) rotation in radians.
+     * @param {string="black"} color - The color to use (default is black).
      * @return {void}
      * @instance
      * @memberof drawutilssvg
      */
-    label(text, x, y, rotation) {
+    label(text, x, y, rotation, color) {
         const node = this.makeNode("text");
         // For some strange reason SVG rotation transforms use degrees instead of radians
-        node.setAttribute("transform", `translate(${this.offset.x},${this.offset.y}), rotate(${(rotation / Math.PI) * 180})`);
+        node.setAttribute("transform", `translate(${x},${y}), rotate(${((rotation || 0) / Math.PI) * 180})`);
+        node.setAttribute("font-family", "Arial");
+        node.setAttribute("font-size", "9pt");
+        node.setAttribute("font-style", "normal");
+        node.setAttribute("font-weight", "lighter");
         node.innerHTML = text;
-        return this._bindFillDraw(node, "label", "black", null);
+        return this._bindFillDraw(node, "label", color || "black", null);
     }
     /**
      * Draw an SVG-like path given by the specified path data.
@@ -5355,7 +5403,9 @@ drawutilssvg.HEAD_XML = [
  * @modified 2021-02-22 Added the `path` drawing function to draw SVG path data.
  * @modified 2021-03-31 Added the `endDrawCycle` function from `DrawLib`.
  * @modified 2021-05-31 Added the `setConfiguration` function from `DrawLib`.
- * @version  1.9.0
+ * @modified 2021-11-12 Adding more parameters tot the `text()` function: fontSize, textAlign, fontFamily, lineHeight.
+ * @modified 2021-11-19 Added the `color` param to the `label(...)` function.
+ * @version  1.10.0
  **/
 // Todo: rename this class to Drawutils?
 /**
@@ -6010,20 +6060,62 @@ class drawutils {
         this.ctx.setLineDash([]);
         this.ctx.restore();
     }
+    /**
+     * Draw a text at the given relative position.
+     *
+     * @method text
+     * @param {string} text - The text to draw.
+     * @param {number} x - The x-position to draw the text at.
+     * @param {number} y - The y-position to draw the text at.
+     * @param {string=} options.color - The Color to use.
+     * @param {string=} options.fontFamily - The font family to use.
+     * @param {number=} options.fontSize - The font size (in pixels) to use.
+     * @param {FontStyle=} options.fontStyle - The font style to use.
+     * @param {FontWeight=} options.fontWeight - The font weight to use.
+     * @param {number=} options.lineHeight - The line height (in pixels) to use.
+     * @param {number=} options.rotation - The (optional) rotation in radians.
+     * @param {string=} options.textAlign - The text align to use. According to the specifiactions (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign) valid values are `"left" || "right" || "center" || "start" || "end"`.
+     * @return {void}
+     * @instance
+     * @memberof drawutils
+     */
     text(text, x, y, options) {
+        // See https://stackoverflow.com/a/23523697
+        var _a, _b, _c;
         options = options || {};
         this.ctx.save();
-        x = this.offset.x + x * this.scale.x;
-        y = this.offset.y + y * this.scale.y;
+        let relX = this.offset.x + x * this.scale.x;
+        let relY = this.offset.y + y * this.scale.y;
         const color = options.color || "black";
+        if (options.fontSize || options.fontFamily) {
+            // Scaling of text only works in uniform mode
+            this.ctx.font =
+                (options.fontWeight ? options.fontWeight + " " : "") +
+                    (options.fontStyle ? options.fontStyle + " " : "") +
+                    (options.fontSize ? options.fontSize * this.scale.x + "px " : " ") +
+                    (options.fontFamily
+                        ? options.fontFamily.indexOf(" ") === -1
+                            ? options.fontFamily
+                            : `"${options.fontFamily}"`
+                        : "Arial");
+        }
+        if (options.textAlign) {
+            this.ctx.textAlign = options.textAlign;
+        }
+        const rotation = (_a = options.rotation) !== null && _a !== void 0 ? _a : 0.0;
+        const lineHeight = ((_c = (_b = options.lineHeight) !== null && _b !== void 0 ? _b : options.fontSize) !== null && _c !== void 0 ? _c : 0) * this.scale.x;
+        this.ctx.translate(relX, relY);
+        this.ctx.rotate(rotation);
         if (this.fillShapes) {
             this.ctx.fillStyle = color;
-            this.ctx.fillText(text, x, y);
+            this.ctx.fillText(text, 0, lineHeight / 2);
         }
         else {
             this.ctx.strokeStyle = color;
-            this.ctx.strokeText(text, x, y);
+            this.ctx.strokeText(text, 0, lineHeight / 2);
         }
+        // this.ctx.translate(-relX, -relY);
+        // this.ctx.rotate(-rotation); // is this necessary before 'restore()'?
         this.ctx.restore();
     }
     /**
@@ -6043,8 +6135,9 @@ class drawutils {
      */
     label(text, x, y, rotation, color) {
         this.ctx.save();
+        this.ctx.font = "lighter 9pt Arial";
         this.ctx.translate(x, y);
-        if (typeof rotation != "undefined")
+        if (typeof rotation !== "undefined")
             this.ctx.rotate(rotation);
         this.ctx.fillStyle = color || "black";
         if (this.fillShapes) {
@@ -6653,6 +6746,25 @@ class drawutilsgl {
     polyline(vertices, isOpen, color, lineWidth) {
         // NOT YET IMPLEMENTED
     }
+    /**
+     * Draw a text at the given relative position.
+     *
+     * @method text
+     * @param {string} text - The text to draw.
+     * @param {number} x - The x-position to draw the text at.
+     * @param {number} y - The y-position to draw the text at.
+     * @param {string=} options.color - The Color to use.
+     * @param {string=} options.fontFamily - The font family to use.
+     * @param {number=} options.fontSize - The font size (in pixels) to use.
+     * @param {FontStyle=} options.fontStyle - The font style to use.
+     * @param {FontWeight=} options.fontWeight - The font weight to use.
+     * @param {number=} options.lineHeight - The line height (in pixels) to use.
+     * @param {number=} options.rotation - The (optional) rotation in radians.
+     * @param {string=} options.textAlign - The text align to use. According to the specifiactions (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign) valid values are `"left" || "right" || "center" || "start" || "end"`.
+     * @return {void}
+     * @instance
+     * @memberof drawutils
+     */
     text(text, x, y, options) {
         // NOT YET IMPLEMENTED
     }
@@ -6664,14 +6776,12 @@ class drawutilsgl {
      * @param {number} x - The x-position to draw the text at.
      * @param {number} y - The y-position to draw the text at.
      * @param {number=} rotation - The (aoptional) rotation in radians.
+     * @param {string="black"} color - The color to use (default is black).
      * @return {void}
      * @instance
      * @memberof drawutils
      */
-    // +---------------------------------------------------------------------------------
-    // | Draw a non-scaling text label at the given position.
-    // +-------------------------------
-    label(text, x, y, rotation) {
+    label(text, x, y, rotation, color) {
         // NOT YET IMPLEMENTED
     }
     /**
@@ -8265,6 +8375,65 @@ class PBImage {
     ;
 }
 
+/**
+ * @author   Ikaros Kappler
+ * @date     2021-11-16
+ * @version  1.0.0
+ **/
+/**
+ * @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
+ **/
+class PBText {
+    /**
+     * 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, anchor, options) {
+        /**
+         * Required to generate proper CSS classes and other class related IDs.
+         **/
+        this.className = "PBText";
+        this.uid = UIDGenerator.next();
+        this.text = text;
+        this.anchor = anchor !== null && anchor !== void 0 ? anchor : new 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
+     */
+    toSVGString(options) {
+        console.warn("[PBText.toSVGString()] This function is not implemented as it defines a deprecated method. Use the 'drawutilssvg.text()' method instead.");
+        return "";
+    }
+} // END class
+
 /* Port from AlloyFinger v0.1.15
  * Original by dntzhang
  * Typescript port by Ikaros Kappler
@@ -9394,7 +9563,8 @@ VEllipseSector.ellipseSectorUtils = {
  * @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.
@@ -9639,6 +9809,12 @@ class PlotBoilerplate {
             image: {
                 color: "#a8a8a8",
                 lineWidth: 1
+            },
+            text: {
+                color: "rgba(192,0,128,0.5)",
+                lineWidth: 1,
+                fill: true,
+                anchor: true
             }
         }; // END drawConfig
         // +---------------------------------------------------------------------------------
@@ -9946,6 +10122,11 @@ class PlotBoilerplate {
             });
             drawable.lowerRight.attr.selectable = false;
         }
+        else if (drawable instanceof 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 + ".";
         }
@@ -10044,6 +10225,9 @@ class PlotBoilerplate {
                         this.removeVertex(drawable.upperLeft, false);
                         this.removeVertex(drawable.lowerRight, false);
                     }
+                    else if (drawable instanceof PBText) {
+                        this.removeVertex(drawable.anchor, false);
+                    }
                 } // END removeWithVertices
                 if (redraw) {
                     this.redraw();
@@ -10369,6 +10553,16 @@ class PlotBoilerplate {
                 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.");
         }
@@ -11453,5 +11647,5 @@ class SVGBuilder {
     ;
 }
 
-export { BezierPath, Bounds, Circle, CircleSector, CubicBezierCurve, Grid, KeyHandler, Line, MouseHandler, PBImage, PlotBoilerplate, Polygon, SVGBuilder, Triangle, UIDGenerator, VEllipse, VEllipseSector, Vector, VertTuple, Vertex, VertexAttr, VertexListeners, XMouseEvent, XWheelEvent, drawutils, drawutilsgl, drawutilssvg, geomutils };
+export { BezierPath, Bounds, Circle, CircleSector, CubicBezierCurve, Grid, KeyHandler, Line, MouseHandler, PBImage, PBText, PlotBoilerplate, Polygon, SVGBuilder, Triangle, UIDGenerator, VEllipse, VEllipseSector, Vector, VertTuple, Vertex, VertexAttr, VertexListeners, XMouseEvent, XWheelEvent, drawutils, drawutilsgl, drawutilssvg, geomutils };
 //# sourceMappingURL=index.esm.js.map