three-spritetext - npm Package Compare versions

Comparing version 1.5.4 to 1.6.0

dist/three-spritetext.common.js

@@ -106,2 +106,6 @@ 'use strict';
 
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
 function _toConsumableArray(arr) {
@@ -115,2 +119,6 @@ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
 function _iterableToArray(iter) {
@@ -120,2 +128,29 @@ if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
 
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
 function _unsupportedIterableToArray(o, minLen) {
@@ -142,2 +177,6 @@ if (!o) return;
 
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
 var three = typeof window !== 'undefined' && window.THREE ? window.THREE // Prefer consumption from global THREE, if exists
@@ -175,2 +214,3 @@ : {
     _this._borderWidth = 0;
+    _this._borderRadius = 0;
     _this._borderColor = 'white';
@@ -193,109 +233,2 @@ _this._strokeWidth = 0;
   _createClass(_default, [{
-    key: "_genCanvas",
-    value: function _genCanvas() {
-      var _this2 = this;
-
-      var canvas = this._canvas;
-      var ctx = canvas.getContext('2d');
-      var border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
-
-      var relBorder = border.map(function (b) {
-        return b * _this2.fontSize * 0.1;
-      }); // border in canvas units
-
-      var padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
-
-      var relPadding = padding.map(function (p) {
-        return p * _this2.fontSize * 0.1;
-      }); // padding in canvas units
-
-      var lines = this.text.split('\n');
-      var font = "".concat(this.fontWeight, " ").concat(this.fontSize, "px ").concat(this.fontFace);
-      ctx.font = font; // measure canvas with appropriate font
-
-      var innerWidth = Math.max.apply(Math, _toConsumableArray(lines.map(function (line) {
-        return ctx.measureText(line).width;
-      })));
-      var innerHeight = this.fontSize * lines.length;
-      canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
-      canvas.height = innerHeight + relBorder[1] * 2 + relPadding[1] * 2; // paint border
-
-      if (this.borderWidth) {
-        ctx.strokeStyle = this.borderColor;
-
-        if (relBorder[0]) {
-          ctx.lineWidth = relBorder[0] * 2;
-          ctx.beginPath();
-          ctx.moveTo(0, 0);
-          ctx.lineTo(0, canvas.height);
-          ctx.moveTo(canvas.width, 0);
-          ctx.lineTo(canvas.width, canvas.height);
-          ctx.stroke();
-        }
-
-        if (relBorder[1]) {
-          ctx.lineWidth = relBorder[1] * 2;
-          ctx.beginPath();
-          ctx.moveTo(relBorder[0], 0);
-          ctx.lineTo(canvas.width - relBorder[0], 0);
-          ctx.moveTo(relBorder[0], canvas.height);
-          ctx.lineTo(canvas.width - relBorder[0], canvas.height);
-          ctx.stroke();
-        }
-      }
-
-      ctx.translate.apply(ctx, _toConsumableArray(relBorder)); // paint background
-
-      if (this.backgroundColor) {
-        ctx.fillStyle = this.backgroundColor;
-        ctx.fillRect(0, 0, canvas.width - relBorder[0] * 2, canvas.height - relBorder[1] * 2);
-      }
-
-      ctx.translate.apply(ctx, _toConsumableArray(relPadding)); // paint text
-
-      ctx.font = font; // Set font again after canvas is resized, as context properties are reset
-
-      ctx.fillStyle = this.color;
-      ctx.textBaseline = 'bottom';
-      var drawTextStroke = this.strokeWidth > 0;
-
-      if (drawTextStroke) {
-        ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
-        ctx.strokeStyle = this.strokeColor;
-      }
-
-      lines.forEach(function (line, index) {
-        var lineX = (innerWidth - ctx.measureText(line).width) / 2;
-        var lineY = (index + 1) * _this2.fontSize;
-        drawTextStroke && ctx.strokeText(line, lineX, lineY);
-        ctx.fillText(line, lineX, lineY);
-      }); // Inject canvas into sprite
-
-      this._texture.image = canvas;
-      this._texture.needsUpdate = true;
-      var yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
-      this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
-    }
-  }, {
-    key: "clone",
-    value: function clone() {
-      return new this.constructor(this.text, this.textHeight, this.color).copy(this);
-    }
-  }, {
-    key: "copy",
-    value: function copy(source) {
-      three.Sprite.prototype.copy.call(this, source);
-      this.color = source.color;
-      this.backgroundColor = source.backgroundColor;
-      this.padding = source.padding;
-      this.borderWidth = source.borderWidth;
-      this.borderColor = source.borderColor;
-      this.fontFace = source.fontFace;
-      this.fontSize = source.fontSize;
-      this.fontWeight = source.fontWeight;
-      this.strokeWidth = source.strokeWidth;
-      this.strokeColor = source.strokeColor;
-      return this;
-    }
-  }, {
     key: "text",
@@ -361,2 +294,12 @@ get: function get() {
   }, {
+    key: "borderRadius",
+    get: function get() {
+      return this._borderRadius;
+    },
+    set: function set(borderRadius) {
+      this._borderRadius = borderRadius;
+
+      this._genCanvas();
+    }
+  }, {
     key: "borderColor",
@@ -421,2 +364,168 @@ get: function get() {
     }
+  }, {
+    key: "_genCanvas",
+    value: function _genCanvas() {
+      var _this2 = this;
+
+      var canvas = this._canvas;
+      var ctx = canvas.getContext('2d');
+      var border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
+
+      var relBorder = border.map(function (b) {
+        return b * _this2.fontSize * 0.1;
+      }); // border in canvas units
+
+      var borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius]; // tl tr br bl corners
+
+      var relBorderRadius = borderRadius.map(function (b) {
+        return b * _this2.fontSize * 0.1;
+      }); // border radius in canvas units
+
+      var padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
+
+      var relPadding = padding.map(function (p) {
+        return p * _this2.fontSize * 0.1;
+      }); // padding in canvas units
+
+      var lines = this.text.split('\n');
+      var font = "".concat(this.fontWeight, " ").concat(this.fontSize, "px ").concat(this.fontFace);
+      ctx.font = font; // measure canvas with appropriate font
+
+      var innerWidth = Math.max.apply(Math, _toConsumableArray(lines.map(function (line) {
+        return ctx.measureText(line).width;
+      })));
+      var innerHeight = this.fontSize * lines.length;
+      canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
+      canvas.height = innerHeight + relBorder[1] * 2 + relPadding[1] * 2; // paint border
+
+      if (this.borderWidth) {
+        ctx.strokeStyle = this.borderColor;
+
+        if (relBorder[0]) {
+          // left + right borders
+          var hb = relBorder[0] / 2;
+          ctx.lineWidth = relBorder[0];
+          ctx.beginPath();
+          ctx.moveTo(hb, relBorderRadius[0]);
+          ctx.lineTo(hb, canvas.height - relBorderRadius[3]);
+          ctx.moveTo(canvas.width - hb, relBorderRadius[1]);
+          ctx.lineTo(canvas.width - hb, canvas.height - relBorderRadius[2]);
+          ctx.stroke();
+        }
+
+        if (relBorder[1]) {
+          // top + bottom borders
+          var _hb = relBorder[1] / 2;
+
+          ctx.lineWidth = relBorder[1];
+          ctx.beginPath();
+          ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), _hb);
+          ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[1]), _hb);
+          ctx.moveTo(Math.max(relBorder[0], relBorderRadius[3]), canvas.height - _hb);
+          ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), canvas.height - _hb);
+          ctx.stroke();
+        }
+
+        if (this.borderRadius) {
+          // strike rounded corners
+          var cornerWidth = Math.max.apply(Math, _toConsumableArray(relBorder));
+
+          var _hb2 = cornerWidth / 2;
+
+          ctx.lineWidth = cornerWidth;
+          ctx.beginPath();
+          [!!relBorderRadius[0] && [relBorderRadius[0], _hb2, _hb2, relBorderRadius[0]], !!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - _hb2, _hb2, relBorderRadius[1]], !!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - _hb2, canvas.height - _hb2, canvas.height - relBorderRadius[2]], !!relBorderRadius[3] && [relBorderRadius[3], _hb2, canvas.height - _hb2, canvas.height - relBorderRadius[3]]].filter(function (d) {
+            return d;
+          }).forEach(function (_ref) {
+            var _ref2 = _slicedToArray(_ref, 4),
+                x0 = _ref2[0],
+                x1 = _ref2[1],
+                y0 = _ref2[2],
+                y1 = _ref2[3];
+
+            ctx.moveTo(x0, y0);
+            ctx.quadraticCurveTo(x1, y0, x1, y1);
+          });
+          ctx.stroke();
+        }
+      } // paint background
+
+
+      if (this.backgroundColor) {
+        ctx.fillStyle = this.backgroundColor;
+
+        if (!this.borderRadius) {
+          ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, canvas.height - relBorder[1] * 2);
+        } else {
+          // fill with rounded corners
+          ctx.beginPath();
+          ctx.moveTo(relBorder[0], relBorderRadius[0]);
+          [[relBorder[0], relBorderRadius[0], canvas.width - relBorderRadius[1], relBorder[1], relBorder[1], relBorder[1]], // t
+          [canvas.width - relBorder[0], canvas.width - relBorder[0], canvas.width - relBorder[0], relBorder[1], relBorderRadius[1], canvas.height - relBorderRadius[2]], // r
+          [canvas.width - relBorder[0], canvas.width - relBorderRadius[2], relBorderRadius[3], canvas.height - relBorder[1], canvas.height - relBorder[1], canvas.height - relBorder[1]], // b
+          [relBorder[0], relBorder[0], relBorder[0], canvas.height - relBorder[1], canvas.height - relBorderRadius[3], relBorderRadius[0]] // t
+          ].forEach(function (_ref3) {
+            var _ref4 = _slicedToArray(_ref3, 6),
+                x0 = _ref4[0],
+                x1 = _ref4[1],
+                x2 = _ref4[2],
+                y0 = _ref4[3],
+                y1 = _ref4[4],
+                y2 = _ref4[5];
+
+            ctx.quadraticCurveTo(x0, y0, x1, y1);
+            ctx.lineTo(x2, y2);
+          });
+          ctx.closePath();
+          ctx.fill();
+        }
+      }
+
+      ctx.translate.apply(ctx, _toConsumableArray(relBorder));
+      ctx.translate.apply(ctx, _toConsumableArray(relPadding)); // paint text
+
+      ctx.font = font; // Set font again after canvas is resized, as context properties are reset
+
+      ctx.fillStyle = this.color;
+      ctx.textBaseline = 'bottom';
+      var drawTextStroke = this.strokeWidth > 0;
+
+      if (drawTextStroke) {
+        ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
+        ctx.strokeStyle = this.strokeColor;
+      }
+
+      lines.forEach(function (line, index) {
+        var lineX = (innerWidth - ctx.measureText(line).width) / 2;
+        var lineY = (index + 1) * _this2.fontSize;
+        drawTextStroke && ctx.strokeText(line, lineX, lineY);
+        ctx.fillText(line, lineX, lineY);
+      }); // Inject canvas into sprite
+
+      this._texture.image = canvas;
+      this._texture.needsUpdate = true;
+      var yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
+      this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
+    }
+  }, {
+    key: "clone",
+    value: function clone() {
+      return new this.constructor(this.text, this.textHeight, this.color).copy(this);
+    }
+  }, {
+    key: "copy",
+    value: function copy(source) {
+      three.Sprite.prototype.copy.call(this, source);
+      this.color = source.color;
+      this.backgroundColor = source.backgroundColor;
+      this.padding = source.padding;
+      this.borderWidth = source.borderWidth;
+      this.borderColor = source.borderColor;
+      this.fontFace = source.fontFace;
+      this.fontSize = source.fontSize;
+      this.fontWeight = source.fontWeight;
+      this.strokeWidth = source.strokeWidth;
+      this.strokeColor = source.strokeColor;
+      return this;
+    }
   }]);
@@ -423,0 +532,0 @@

dist/three-spritetext.js

@@ -1,2 +0,2 @@
-// Version 1.5.4 three-spritetext - https://github.com/vasturiano/three-spritetext
+// Version 1.6.0 three-spritetext - https://github.com/vasturiano/three-spritetext
 (function (global, factory) {
@@ -109,2 +109,6 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('three')) :
 
+  function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+  }
+
   function _toConsumableArray(arr) {
@@ -118,2 +122,6 @@ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+  }
+
   function _iterableToArray(iter) {
@@ -123,2 +131,29 @@ if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
 
+  function _iterableToArrayLimit(arr, i) {
+    if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _e = undefined;
+
+    try {
+      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value);
+
+        if (i && _arr.length === i) break;
+      }
+    } catch (err) {
+      _d = true;
+      _e = err;
+    } finally {
+      try {
+        if (!_n && _i["return"] != null) _i["return"]();
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+
+    return _arr;
+  }
+
   function _unsupportedIterableToArray(o, minLen) {
@@ -145,2 +180,6 @@ if (!o) return;
 
+  function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
   var three = typeof window !== 'undefined' && window.THREE ? window.THREE // Prefer consumption from global THREE, if exists
@@ -178,2 +217,3 @@ : {
       _this._borderWidth = 0;
+      _this._borderRadius = 0;
       _this._borderColor = 'white';
@@ -196,109 +236,2 @@ _this._strokeWidth = 0;
     _createClass(_default, [{
-      key: "_genCanvas",
-      value: function _genCanvas() {
-        var _this2 = this;
-
-        var canvas = this._canvas;
-        var ctx = canvas.getContext('2d');
-        var border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
-
-        var relBorder = border.map(function (b) {
-          return b * _this2.fontSize * 0.1;
-        }); // border in canvas units
-
-        var padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
-
-        var relPadding = padding.map(function (p) {
-          return p * _this2.fontSize * 0.1;
-        }); // padding in canvas units
-
-        var lines = this.text.split('\n');
-        var font = "".concat(this.fontWeight, " ").concat(this.fontSize, "px ").concat(this.fontFace);
-        ctx.font = font; // measure canvas with appropriate font
-
-        var innerWidth = Math.max.apply(Math, _toConsumableArray(lines.map(function (line) {
-          return ctx.measureText(line).width;
-        })));
-        var innerHeight = this.fontSize * lines.length;
-        canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
-        canvas.height = innerHeight + relBorder[1] * 2 + relPadding[1] * 2; // paint border
-
-        if (this.borderWidth) {
-          ctx.strokeStyle = this.borderColor;
-
-          if (relBorder[0]) {
-            ctx.lineWidth = relBorder[0] * 2;
-            ctx.beginPath();
-            ctx.moveTo(0, 0);
-            ctx.lineTo(0, canvas.height);
-            ctx.moveTo(canvas.width, 0);
-            ctx.lineTo(canvas.width, canvas.height);
-            ctx.stroke();
-          }
-
-          if (relBorder[1]) {
-            ctx.lineWidth = relBorder[1] * 2;
-            ctx.beginPath();
-            ctx.moveTo(relBorder[0], 0);
-            ctx.lineTo(canvas.width - relBorder[0], 0);
-            ctx.moveTo(relBorder[0], canvas.height);
-            ctx.lineTo(canvas.width - relBorder[0], canvas.height);
-            ctx.stroke();
-          }
-        }
-
-        ctx.translate.apply(ctx, _toConsumableArray(relBorder)); // paint background
-
-        if (this.backgroundColor) {
-          ctx.fillStyle = this.backgroundColor;
-          ctx.fillRect(0, 0, canvas.width - relBorder[0] * 2, canvas.height - relBorder[1] * 2);
-        }
-
-        ctx.translate.apply(ctx, _toConsumableArray(relPadding)); // paint text
-
-        ctx.font = font; // Set font again after canvas is resized, as context properties are reset
-
-        ctx.fillStyle = this.color;
-        ctx.textBaseline = 'bottom';
-        var drawTextStroke = this.strokeWidth > 0;
-
-        if (drawTextStroke) {
-          ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
-          ctx.strokeStyle = this.strokeColor;
-        }
-
-        lines.forEach(function (line, index) {
-          var lineX = (innerWidth - ctx.measureText(line).width) / 2;
-          var lineY = (index + 1) * _this2.fontSize;
-          drawTextStroke && ctx.strokeText(line, lineX, lineY);
-          ctx.fillText(line, lineX, lineY);
-        }); // Inject canvas into sprite
-
-        this._texture.image = canvas;
-        this._texture.needsUpdate = true;
-        var yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
-        this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
-      }
-    }, {
-      key: "clone",
-      value: function clone() {
-        return new this.constructor(this.text, this.textHeight, this.color).copy(this);
-      }
-    }, {
-      key: "copy",
-      value: function copy(source) {
-        three.Sprite.prototype.copy.call(this, source);
-        this.color = source.color;
-        this.backgroundColor = source.backgroundColor;
-        this.padding = source.padding;
-        this.borderWidth = source.borderWidth;
-        this.borderColor = source.borderColor;
-        this.fontFace = source.fontFace;
-        this.fontSize = source.fontSize;
-        this.fontWeight = source.fontWeight;
-        this.strokeWidth = source.strokeWidth;
-        this.strokeColor = source.strokeColor;
-        return this;
-      }
-    }, {
       key: "text",
@@ -364,2 +297,12 @@ get: function get() {
     }, {
+      key: "borderRadius",
+      get: function get() {
+        return this._borderRadius;
+      },
+      set: function set(borderRadius) {
+        this._borderRadius = borderRadius;
+
+        this._genCanvas();
+      }
+    }, {
       key: "borderColor",
@@ -424,2 +367,168 @@ get: function get() {
       }
+    }, {
+      key: "_genCanvas",
+      value: function _genCanvas() {
+        var _this2 = this;
+
+        var canvas = this._canvas;
+        var ctx = canvas.getContext('2d');
+        var border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
+
+        var relBorder = border.map(function (b) {
+          return b * _this2.fontSize * 0.1;
+        }); // border in canvas units
+
+        var borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius]; // tl tr br bl corners
+
+        var relBorderRadius = borderRadius.map(function (b) {
+          return b * _this2.fontSize * 0.1;
+        }); // border radius in canvas units
+
+        var padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
+
+        var relPadding = padding.map(function (p) {
+          return p * _this2.fontSize * 0.1;
+        }); // padding in canvas units
+
+        var lines = this.text.split('\n');
+        var font = "".concat(this.fontWeight, " ").concat(this.fontSize, "px ").concat(this.fontFace);
+        ctx.font = font; // measure canvas with appropriate font
+
+        var innerWidth = Math.max.apply(Math, _toConsumableArray(lines.map(function (line) {
+          return ctx.measureText(line).width;
+        })));
+        var innerHeight = this.fontSize * lines.length;
+        canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
+        canvas.height = innerHeight + relBorder[1] * 2 + relPadding[1] * 2; // paint border
+
+        if (this.borderWidth) {
+          ctx.strokeStyle = this.borderColor;
+
+          if (relBorder[0]) {
+            // left + right borders
+            var hb = relBorder[0] / 2;
+            ctx.lineWidth = relBorder[0];
+            ctx.beginPath();
+            ctx.moveTo(hb, relBorderRadius[0]);
+            ctx.lineTo(hb, canvas.height - relBorderRadius[3]);
+            ctx.moveTo(canvas.width - hb, relBorderRadius[1]);
+            ctx.lineTo(canvas.width - hb, canvas.height - relBorderRadius[2]);
+            ctx.stroke();
+          }
+
+          if (relBorder[1]) {
+            // top + bottom borders
+            var _hb = relBorder[1] / 2;
+
+            ctx.lineWidth = relBorder[1];
+            ctx.beginPath();
+            ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), _hb);
+            ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[1]), _hb);
+            ctx.moveTo(Math.max(relBorder[0], relBorderRadius[3]), canvas.height - _hb);
+            ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), canvas.height - _hb);
+            ctx.stroke();
+          }
+
+          if (this.borderRadius) {
+            // strike rounded corners
+            var cornerWidth = Math.max.apply(Math, _toConsumableArray(relBorder));
+
+            var _hb2 = cornerWidth / 2;
+
+            ctx.lineWidth = cornerWidth;
+            ctx.beginPath();
+            [!!relBorderRadius[0] && [relBorderRadius[0], _hb2, _hb2, relBorderRadius[0]], !!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - _hb2, _hb2, relBorderRadius[1]], !!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - _hb2, canvas.height - _hb2, canvas.height - relBorderRadius[2]], !!relBorderRadius[3] && [relBorderRadius[3], _hb2, canvas.height - _hb2, canvas.height - relBorderRadius[3]]].filter(function (d) {
+              return d;
+            }).forEach(function (_ref) {
+              var _ref2 = _slicedToArray(_ref, 4),
+                  x0 = _ref2[0],
+                  x1 = _ref2[1],
+                  y0 = _ref2[2],
+                  y1 = _ref2[3];
+
+              ctx.moveTo(x0, y0);
+              ctx.quadraticCurveTo(x1, y0, x1, y1);
+            });
+            ctx.stroke();
+          }
+        } // paint background
+
+
+        if (this.backgroundColor) {
+          ctx.fillStyle = this.backgroundColor;
+
+          if (!this.borderRadius) {
+            ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, canvas.height - relBorder[1] * 2);
+          } else {
+            // fill with rounded corners
+            ctx.beginPath();
+            ctx.moveTo(relBorder[0], relBorderRadius[0]);
+            [[relBorder[0], relBorderRadius[0], canvas.width - relBorderRadius[1], relBorder[1], relBorder[1], relBorder[1]], // t
+            [canvas.width - relBorder[0], canvas.width - relBorder[0], canvas.width - relBorder[0], relBorder[1], relBorderRadius[1], canvas.height - relBorderRadius[2]], // r
+            [canvas.width - relBorder[0], canvas.width - relBorderRadius[2], relBorderRadius[3], canvas.height - relBorder[1], canvas.height - relBorder[1], canvas.height - relBorder[1]], // b
+            [relBorder[0], relBorder[0], relBorder[0], canvas.height - relBorder[1], canvas.height - relBorderRadius[3], relBorderRadius[0]] // t
+            ].forEach(function (_ref3) {
+              var _ref4 = _slicedToArray(_ref3, 6),
+                  x0 = _ref4[0],
+                  x1 = _ref4[1],
+                  x2 = _ref4[2],
+                  y0 = _ref4[3],
+                  y1 = _ref4[4],
+                  y2 = _ref4[5];
+
+              ctx.quadraticCurveTo(x0, y0, x1, y1);
+              ctx.lineTo(x2, y2);
+            });
+            ctx.closePath();
+            ctx.fill();
+          }
+        }
+
+        ctx.translate.apply(ctx, _toConsumableArray(relBorder));
+        ctx.translate.apply(ctx, _toConsumableArray(relPadding)); // paint text
+
+        ctx.font = font; // Set font again after canvas is resized, as context properties are reset
+
+        ctx.fillStyle = this.color;
+        ctx.textBaseline = 'bottom';
+        var drawTextStroke = this.strokeWidth > 0;
+
+        if (drawTextStroke) {
+          ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
+          ctx.strokeStyle = this.strokeColor;
+        }
+
+        lines.forEach(function (line, index) {
+          var lineX = (innerWidth - ctx.measureText(line).width) / 2;
+          var lineY = (index + 1) * _this2.fontSize;
+          drawTextStroke && ctx.strokeText(line, lineX, lineY);
+          ctx.fillText(line, lineX, lineY);
+        }); // Inject canvas into sprite
+
+        this._texture.image = canvas;
+        this._texture.needsUpdate = true;
+        var yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
+        this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
+      }
+    }, {
+      key: "clone",
+      value: function clone() {
+        return new this.constructor(this.text, this.textHeight, this.color).copy(this);
+      }
+    }, {
+      key: "copy",
+      value: function copy(source) {
+        three.Sprite.prototype.copy.call(this, source);
+        this.color = source.color;
+        this.backgroundColor = source.backgroundColor;
+        this.padding = source.padding;
+        this.borderWidth = source.borderWidth;
+        this.borderColor = source.borderColor;
+        this.fontFace = source.fontFace;
+        this.fontSize = source.fontSize;
+        this.fontWeight = source.fontWeight;
+        this.strokeWidth = source.strokeWidth;
+        this.strokeColor = source.strokeColor;
+        return this;
+      }
     }]);
@@ -426,0 +535,0 @@

dist/three-spritetext.min.js

@@ -1,2 +0,2 @@
-// Version 1.5.4 three-spritetext - https://github.com/vasturiano/three-spritetext
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("three")):"function"==typeof define&&define.amd?define(["three"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).SpriteText=e(t.THREE)}(this,(function(t){"use strict";function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function r(t){return(r=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function i(t,e){return(i=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function o(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function s(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,i=r(t);if(e){var s=r(this).constructor;n=Reflect.construct(i,arguments,s)}else n=i.apply(this,arguments);return o(this,n)}}function a(t){return function(t){if(Array.isArray(t))return h(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||function(t,e){if(!t)return;if("string"==typeof t)return h(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return h(t,e)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function h(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var c="undefined"!=typeof window&&window.THREE?window.THREE:{LinearFilter:t.LinearFilter,Sprite:t.Sprite,SpriteMaterial:t.SpriteMaterial,Texture:t.Texture};return function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&i(t,e)}(f,t);var r,o,h,u=s(f);function f(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:10,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgba(255, 255, 255, 1)";return e(this,f),(t=u.call(this,new c.SpriteMaterial({map:new c.Texture})))._text="".concat(n),t._textHeight=r,t._color=i,t._backgroundColor=!1,t._padding=0,t._borderWidth=0,t._borderColor="white",t._strokeWidth=0,t._strokeColor="white",t._fontFace="Arial",t._fontSize=90,t._fontWeight="normal",t._canvas=document.createElement("canvas"),t._texture=t.material.map,t._texture.minFilter=c.LinearFilter,t._genCanvas(),t}return r=f,(o=[{key:"_genCanvas",value:function(){var t=this,e=this._canvas,n=e.getContext("2d"),r=Array.isArray(this.borderWidth)?this.borderWidth:[this.borderWidth,this.borderWidth],i=r.map((function(e){return e*t.fontSize*.1})),o=Array.isArray(this.padding)?this.padding:[this.padding,this.padding],s=o.map((function(e){return e*t.fontSize*.1})),h=this.text.split("\n"),c="".concat(this.fontWeight," ").concat(this.fontSize,"px ").concat(this.fontFace);n.font=c;var u=Math.max.apply(Math,a(h.map((function(t){return n.measureText(t).width})))),f=this.fontSize*h.length;e.width=u+2*i[0]+2*s[0],e.height=f+2*i[1]+2*s[1],this.borderWidth&&(n.strokeStyle=this.borderColor,i[0]&&(n.lineWidth=2*i[0],n.beginPath(),n.moveTo(0,0),n.lineTo(0,e.height),n.moveTo(e.width,0),n.lineTo(e.width,e.height),n.stroke()),i[1]&&(n.lineWidth=2*i[1],n.beginPath(),n.moveTo(i[0],0),n.lineTo(e.width-i[0],0),n.moveTo(i[0],e.height),n.lineTo(e.width-i[0],e.height),n.stroke())),n.translate.apply(n,a(i)),this.backgroundColor&&(n.fillStyle=this.backgroundColor,n.fillRect(0,0,e.width-2*i[0],e.height-2*i[1])),n.translate.apply(n,a(s)),n.font=c,n.fillStyle=this.color,n.textBaseline="bottom";var l=this.strokeWidth>0;l&&(n.lineWidth=this.strokeWidth*this.fontSize/10,n.strokeStyle=this.strokeColor),h.forEach((function(e,r){var i=(u-n.measureText(e).width)/2,o=(r+1)*t.fontSize;l&&n.strokeText(e,i,o),n.fillText(e,i,o)})),this._texture.image=e,this._texture.needsUpdate=!0;var d=this.textHeight*h.length+2*r[1]+2*o[1];this.scale.set(d*e.width/e.height,d,0)}},{key:"clone",value:function(){return new this.constructor(this.text,this.textHeight,this.color).copy(this)}},{key:"copy",value:function(t){return c.Sprite.prototype.copy.call(this,t),this.color=t.color,this.backgroundColor=t.backgroundColor,this.padding=t.padding,this.borderWidth=t.borderWidth,this.borderColor=t.borderColor,this.fontFace=t.fontFace,this.fontSize=t.fontSize,this.fontWeight=t.fontWeight,this.strokeWidth=t.strokeWidth,this.strokeColor=t.strokeColor,this}},{key:"text",get:function(){return this._text},set:function(t){this._text=t,this._genCanvas()}},{key:"textHeight",get:function(){return this._textHeight},set:function(t){this._textHeight=t,this._genCanvas()}},{key:"color",get:function(){return this._color},set:function(t){this._color=t,this._genCanvas()}},{key:"backgroundColor",get:function(){return this._backgroundColor},set:function(t){this._backgroundColor=t,this._genCanvas()}},{key:"padding",get:function(){return this._padding},set:function(t){this._padding=t,this._genCanvas()}},{key:"borderWidth",get:function(){return this._borderWidth},set:function(t){this._borderWidth=t,this._genCanvas()}},{key:"borderColor",get:function(){return this._borderColor},set:function(t){this._borderColor=t,this._genCanvas()}},{key:"fontFace",get:function(){return this._fontFace},set:function(t){this._fontFace=t,this._genCanvas()}},{key:"fontSize",get:function(){return this._fontSize},set:function(t){this._fontSize=t,this._genCanvas()}},{key:"fontWeight",get:function(){return this._fontWeight},set:function(t){this._fontWeight=t,this._genCanvas()}},{key:"strokeWidth",get:function(){return this._strokeWidth},set:function(t){this._strokeWidth=t,this._genCanvas()}},{key:"strokeColor",get:function(){return this._strokeColor},set:function(t){this._strokeColor=t,this._genCanvas()}}])&&n(r.prototype,o),h&&n(r,h),f}(c.Sprite)}));
+// Version 1.6.0 three-spritetext - https://github.com/vasturiano/three-spritetext
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("three")):"function"==typeof define&&define.amd?define(["three"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).SpriteText=e(t.THREE)}(this,(function(t){"use strict";function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){for(var r=0;r<e.length;r++){var i=e[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function i(t){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function n(t,e){return(n=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function o(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function a(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return!1}}();return function(){var r,n=i(t);if(e){var a=i(this).constructor;r=Reflect.construct(n,arguments,a)}else r=n.apply(this,arguments);return o(this,r)}}function h(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(t)))return;var r=[],i=!0,n=!1,o=void 0;try{for(var a,h=t[Symbol.iterator]();!(i=(a=h.next()).done)&&(r.push(a.value),!e||r.length!==e);i=!0);}catch(t){n=!0,o=t}finally{try{i||null==h.return||h.return()}finally{if(n)throw o}}return r}(t,e)||u(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(t){return function(t){if(Array.isArray(t))return c(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||u(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(t,e){if(t){if("string"==typeof t)return c(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?c(t,e):void 0}}function c(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,i=new Array(e);r<e;r++)i[r]=t[r];return i}var f="undefined"!=typeof window&&window.THREE?window.THREE:{LinearFilter:t.LinearFilter,Sprite:t.Sprite,SpriteMaterial:t.SpriteMaterial,Texture:t.Texture};return function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&n(t,e)}(d,t);var i,o,u,c=a(d);function d(){var t,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:10,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgba(255, 255, 255, 1)";return e(this,d),(t=c.call(this,new f.SpriteMaterial({map:new f.Texture})))._text="".concat(r),t._textHeight=i,t._color=n,t._backgroundColor=!1,t._padding=0,t._borderWidth=0,t._borderRadius=0,t._borderColor="white",t._strokeWidth=0,t._strokeColor="white",t._fontFace="Arial",t._fontSize=90,t._fontWeight="normal",t._canvas=document.createElement("canvas"),t._texture=t.material.map,t._texture.minFilter=f.LinearFilter,t._genCanvas(),t}return i=d,(o=[{key:"text",get:function(){return this._text},set:function(t){this._text=t,this._genCanvas()}},{key:"textHeight",get:function(){return this._textHeight},set:function(t){this._textHeight=t,this._genCanvas()}},{key:"color",get:function(){return this._color},set:function(t){this._color=t,this._genCanvas()}},{key:"backgroundColor",get:function(){return this._backgroundColor},set:function(t){this._backgroundColor=t,this._genCanvas()}},{key:"padding",get:function(){return this._padding},set:function(t){this._padding=t,this._genCanvas()}},{key:"borderWidth",get:function(){return this._borderWidth},set:function(t){this._borderWidth=t,this._genCanvas()}},{key:"borderRadius",get:function(){return this._borderRadius},set:function(t){this._borderRadius=t,this._genCanvas()}},{key:"borderColor",get:function(){return this._borderColor},set:function(t){this._borderColor=t,this._genCanvas()}},{key:"fontFace",get:function(){return this._fontFace},set:function(t){this._fontFace=t,this._genCanvas()}},{key:"fontSize",get:function(){return this._fontSize},set:function(t){this._fontSize=t,this._genCanvas()}},{key:"fontWeight",get:function(){return this._fontWeight},set:function(t){this._fontWeight=t,this._genCanvas()}},{key:"strokeWidth",get:function(){return this._strokeWidth},set:function(t){this._strokeWidth=t,this._genCanvas()}},{key:"strokeColor",get:function(){return this._strokeColor},set:function(t){this._strokeColor=t,this._genCanvas()}},{key:"_genCanvas",value:function(){var t=this,e=this._canvas,r=e.getContext("2d"),i=Array.isArray(this.borderWidth)?this.borderWidth:[this.borderWidth,this.borderWidth],n=i.map((function(e){return e*t.fontSize*.1})),o=(Array.isArray(this.borderRadius)?this.borderRadius:[this.borderRadius,this.borderRadius,this.borderRadius,this.borderRadius]).map((function(e){return e*t.fontSize*.1})),a=Array.isArray(this.padding)?this.padding:[this.padding,this.padding],u=a.map((function(e){return e*t.fontSize*.1})),c=this.text.split("\n"),f="".concat(this.fontWeight," ").concat(this.fontSize,"px ").concat(this.fontFace);r.font=f;var d=Math.max.apply(Math,s(c.map((function(t){return r.measureText(t).width})))),l=this.fontSize*c.length;if(e.width=d+2*n[0]+2*u[0],e.height=l+2*n[1]+2*u[1],this.borderWidth){if(r.strokeStyle=this.borderColor,n[0]){var g=n[0]/2;r.lineWidth=n[0],r.beginPath(),r.moveTo(g,o[0]),r.lineTo(g,e.height-o[3]),r.moveTo(e.width-g,o[1]),r.lineTo(e.width-g,e.height-o[2]),r.stroke()}if(n[1]){var p=n[1]/2;r.lineWidth=n[1],r.beginPath(),r.moveTo(Math.max(n[0],o[0]),p),r.lineTo(e.width-Math.max(n[0],o[1]),p),r.moveTo(Math.max(n[0],o[3]),e.height-p),r.lineTo(e.width-Math.max(n[0],o[2]),e.height-p),r.stroke()}if(this.borderRadius){var y=Math.max.apply(Math,s(n)),b=y/2;r.lineWidth=y,r.beginPath(),[!!o[0]&&[o[0],b,b,o[0]],!!o[1]&&[e.width-o[1],e.width-b,b,o[1]],!!o[2]&&[e.width-o[2],e.width-b,e.height-b,e.height-o[2]],!!o[3]&&[o[3],b,e.height-b,e.height-o[3]]].filter((function(t){return t})).forEach((function(t){var e=h(t,4),i=e[0],n=e[1],o=e[2],a=e[3];r.moveTo(i,o),r.quadraticCurveTo(n,o,n,a)})),r.stroke()}}this.backgroundColor&&(r.fillStyle=this.backgroundColor,this.borderRadius?(r.beginPath(),r.moveTo(n[0],o[0]),[[n[0],o[0],e.width-o[1],n[1],n[1],n[1]],[e.width-n[0],e.width-n[0],e.width-n[0],n[1],o[1],e.height-o[2]],[e.width-n[0],e.width-o[2],o[3],e.height-n[1],e.height-n[1],e.height-n[1]],[n[0],n[0],n[0],e.height-n[1],e.height-o[3],o[0]]].forEach((function(t){var e=h(t,6),i=e[0],n=e[1],o=e[2],a=e[3],s=e[4],u=e[5];r.quadraticCurveTo(i,a,n,s),r.lineTo(o,u)})),r.closePath(),r.fill()):r.fillRect(n[0],n[1],e.width-2*n[0],e.height-2*n[1])),r.translate.apply(r,s(n)),r.translate.apply(r,s(u)),r.font=f,r.fillStyle=this.color,r.textBaseline="bottom";var _=this.strokeWidth>0;_&&(r.lineWidth=this.strokeWidth*this.fontSize/10,r.strokeStyle=this.strokeColor),c.forEach((function(e,i){var n=(d-r.measureText(e).width)/2,o=(i+1)*t.fontSize;_&&r.strokeText(e,n,o),r.fillText(e,n,o)})),this._texture.image=e,this._texture.needsUpdate=!0;var v=this.textHeight*c.length+2*i[1]+2*a[1];this.scale.set(v*e.width/e.height,v,0)}},{key:"clone",value:function(){return new this.constructor(this.text,this.textHeight,this.color).copy(this)}},{key:"copy",value:function(t){return f.Sprite.prototype.copy.call(this,t),this.color=t.color,this.backgroundColor=t.backgroundColor,this.padding=t.padding,this.borderWidth=t.borderWidth,this.borderColor=t.borderColor,this.fontFace=t.fontFace,this.fontSize=t.fontSize,this.fontWeight=t.fontWeight,this.strokeWidth=t.strokeWidth,this.strokeColor=t.strokeColor,this}}])&&r(i.prototype,o),u&&r(i,u),d}(f.Sprite)}));

dist/three-spritetext.module.js

@@ -104,2 +104,6 @@ import { LinearFilter, Sprite, SpriteMaterial, Texture } from 'three';
 
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
 function _toConsumableArray(arr) {
@@ -113,2 +117,6 @@ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
 function _iterableToArray(iter) {
@@ -118,2 +126,29 @@ if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
 
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
 function _unsupportedIterableToArray(o, minLen) {
@@ -140,2 +175,6 @@ if (!o) return;
 
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
 var three = typeof window !== 'undefined' && window.THREE ? window.THREE // Prefer consumption from global THREE, if exists
@@ -173,2 +212,3 @@ : {
     _this._borderWidth = 0;
+    _this._borderRadius = 0;
     _this._borderColor = 'white';
@@ -191,109 +231,2 @@ _this._strokeWidth = 0;
   _createClass(_default, [{
-    key: "_genCanvas",
-    value: function _genCanvas() {
-      var _this2 = this;
-
-      var canvas = this._canvas;
-      var ctx = canvas.getContext('2d');
-      var border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
-
-      var relBorder = border.map(function (b) {
-        return b * _this2.fontSize * 0.1;
-      }); // border in canvas units
-
-      var padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
-
-      var relPadding = padding.map(function (p) {
-        return p * _this2.fontSize * 0.1;
-      }); // padding in canvas units
-
-      var lines = this.text.split('\n');
-      var font = "".concat(this.fontWeight, " ").concat(this.fontSize, "px ").concat(this.fontFace);
-      ctx.font = font; // measure canvas with appropriate font
-
-      var innerWidth = Math.max.apply(Math, _toConsumableArray(lines.map(function (line) {
-        return ctx.measureText(line).width;
-      })));
-      var innerHeight = this.fontSize * lines.length;
-      canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
-      canvas.height = innerHeight + relBorder[1] * 2 + relPadding[1] * 2; // paint border
-
-      if (this.borderWidth) {
-        ctx.strokeStyle = this.borderColor;
-
-        if (relBorder[0]) {
-          ctx.lineWidth = relBorder[0] * 2;
-          ctx.beginPath();
-          ctx.moveTo(0, 0);
-          ctx.lineTo(0, canvas.height);
-          ctx.moveTo(canvas.width, 0);
-          ctx.lineTo(canvas.width, canvas.height);
-          ctx.stroke();
-        }
-
-        if (relBorder[1]) {
-          ctx.lineWidth = relBorder[1] * 2;
-          ctx.beginPath();
-          ctx.moveTo(relBorder[0], 0);
-          ctx.lineTo(canvas.width - relBorder[0], 0);
-          ctx.moveTo(relBorder[0], canvas.height);
-          ctx.lineTo(canvas.width - relBorder[0], canvas.height);
-          ctx.stroke();
-        }
-      }
-
-      ctx.translate.apply(ctx, _toConsumableArray(relBorder)); // paint background
-
-      if (this.backgroundColor) {
-        ctx.fillStyle = this.backgroundColor;
-        ctx.fillRect(0, 0, canvas.width - relBorder[0] * 2, canvas.height - relBorder[1] * 2);
-      }
-
-      ctx.translate.apply(ctx, _toConsumableArray(relPadding)); // paint text
-
-      ctx.font = font; // Set font again after canvas is resized, as context properties are reset
-
-      ctx.fillStyle = this.color;
-      ctx.textBaseline = 'bottom';
-      var drawTextStroke = this.strokeWidth > 0;
-
-      if (drawTextStroke) {
-        ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
-        ctx.strokeStyle = this.strokeColor;
-      }
-
-      lines.forEach(function (line, index) {
-        var lineX = (innerWidth - ctx.measureText(line).width) / 2;
-        var lineY = (index + 1) * _this2.fontSize;
-        drawTextStroke && ctx.strokeText(line, lineX, lineY);
-        ctx.fillText(line, lineX, lineY);
-      }); // Inject canvas into sprite
-
-      this._texture.image = canvas;
-      this._texture.needsUpdate = true;
-      var yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
-      this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
-    }
-  }, {
-    key: "clone",
-    value: function clone() {
-      return new this.constructor(this.text, this.textHeight, this.color).copy(this);
-    }
-  }, {
-    key: "copy",
-    value: function copy(source) {
-      three.Sprite.prototype.copy.call(this, source);
-      this.color = source.color;
-      this.backgroundColor = source.backgroundColor;
-      this.padding = source.padding;
-      this.borderWidth = source.borderWidth;
-      this.borderColor = source.borderColor;
-      this.fontFace = source.fontFace;
-      this.fontSize = source.fontSize;
-      this.fontWeight = source.fontWeight;
-      this.strokeWidth = source.strokeWidth;
-      this.strokeColor = source.strokeColor;
-      return this;
-    }
-  }, {
     key: "text",
@@ -359,2 +292,12 @@ get: function get() {
   }, {
+    key: "borderRadius",
+    get: function get() {
+      return this._borderRadius;
+    },
+    set: function set(borderRadius) {
+      this._borderRadius = borderRadius;
+
+      this._genCanvas();
+    }
+  }, {
     key: "borderColor",
@@ -419,2 +362,168 @@ get: function get() {
     }
+  }, {
+    key: "_genCanvas",
+    value: function _genCanvas() {
+      var _this2 = this;
+
+      var canvas = this._canvas;
+      var ctx = canvas.getContext('2d');
+      var border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
+
+      var relBorder = border.map(function (b) {
+        return b * _this2.fontSize * 0.1;
+      }); // border in canvas units
+
+      var borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius]; // tl tr br bl corners
+
+      var relBorderRadius = borderRadius.map(function (b) {
+        return b * _this2.fontSize * 0.1;
+      }); // border radius in canvas units
+
+      var padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
+
+      var relPadding = padding.map(function (p) {
+        return p * _this2.fontSize * 0.1;
+      }); // padding in canvas units
+
+      var lines = this.text.split('\n');
+      var font = "".concat(this.fontWeight, " ").concat(this.fontSize, "px ").concat(this.fontFace);
+      ctx.font = font; // measure canvas with appropriate font
+
+      var innerWidth = Math.max.apply(Math, _toConsumableArray(lines.map(function (line) {
+        return ctx.measureText(line).width;
+      })));
+      var innerHeight = this.fontSize * lines.length;
+      canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
+      canvas.height = innerHeight + relBorder[1] * 2 + relPadding[1] * 2; // paint border
+
+      if (this.borderWidth) {
+        ctx.strokeStyle = this.borderColor;
+
+        if (relBorder[0]) {
+          // left + right borders
+          var hb = relBorder[0] / 2;
+          ctx.lineWidth = relBorder[0];
+          ctx.beginPath();
+          ctx.moveTo(hb, relBorderRadius[0]);
+          ctx.lineTo(hb, canvas.height - relBorderRadius[3]);
+          ctx.moveTo(canvas.width - hb, relBorderRadius[1]);
+          ctx.lineTo(canvas.width - hb, canvas.height - relBorderRadius[2]);
+          ctx.stroke();
+        }
+
+        if (relBorder[1]) {
+          // top + bottom borders
+          var _hb = relBorder[1] / 2;
+
+          ctx.lineWidth = relBorder[1];
+          ctx.beginPath();
+          ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), _hb);
+          ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[1]), _hb);
+          ctx.moveTo(Math.max(relBorder[0], relBorderRadius[3]), canvas.height - _hb);
+          ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), canvas.height - _hb);
+          ctx.stroke();
+        }
+
+        if (this.borderRadius) {
+          // strike rounded corners
+          var cornerWidth = Math.max.apply(Math, _toConsumableArray(relBorder));
+
+          var _hb2 = cornerWidth / 2;
+
+          ctx.lineWidth = cornerWidth;
+          ctx.beginPath();
+          [!!relBorderRadius[0] && [relBorderRadius[0], _hb2, _hb2, relBorderRadius[0]], !!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - _hb2, _hb2, relBorderRadius[1]], !!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - _hb2, canvas.height - _hb2, canvas.height - relBorderRadius[2]], !!relBorderRadius[3] && [relBorderRadius[3], _hb2, canvas.height - _hb2, canvas.height - relBorderRadius[3]]].filter(function (d) {
+            return d;
+          }).forEach(function (_ref) {
+            var _ref2 = _slicedToArray(_ref, 4),
+                x0 = _ref2[0],
+                x1 = _ref2[1],
+                y0 = _ref2[2],
+                y1 = _ref2[3];
+
+            ctx.moveTo(x0, y0);
+            ctx.quadraticCurveTo(x1, y0, x1, y1);
+          });
+          ctx.stroke();
+        }
+      } // paint background
+
+
+      if (this.backgroundColor) {
+        ctx.fillStyle = this.backgroundColor;
+
+        if (!this.borderRadius) {
+          ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, canvas.height - relBorder[1] * 2);
+        } else {
+          // fill with rounded corners
+          ctx.beginPath();
+          ctx.moveTo(relBorder[0], relBorderRadius[0]);
+          [[relBorder[0], relBorderRadius[0], canvas.width - relBorderRadius[1], relBorder[1], relBorder[1], relBorder[1]], // t
+          [canvas.width - relBorder[0], canvas.width - relBorder[0], canvas.width - relBorder[0], relBorder[1], relBorderRadius[1], canvas.height - relBorderRadius[2]], // r
+          [canvas.width - relBorder[0], canvas.width - relBorderRadius[2], relBorderRadius[3], canvas.height - relBorder[1], canvas.height - relBorder[1], canvas.height - relBorder[1]], // b
+          [relBorder[0], relBorder[0], relBorder[0], canvas.height - relBorder[1], canvas.height - relBorderRadius[3], relBorderRadius[0]] // t
+          ].forEach(function (_ref3) {
+            var _ref4 = _slicedToArray(_ref3, 6),
+                x0 = _ref4[0],
+                x1 = _ref4[1],
+                x2 = _ref4[2],
+                y0 = _ref4[3],
+                y1 = _ref4[4],
+                y2 = _ref4[5];
+
+            ctx.quadraticCurveTo(x0, y0, x1, y1);
+            ctx.lineTo(x2, y2);
+          });
+          ctx.closePath();
+          ctx.fill();
+        }
+      }
+
+      ctx.translate.apply(ctx, _toConsumableArray(relBorder));
+      ctx.translate.apply(ctx, _toConsumableArray(relPadding)); // paint text
+
+      ctx.font = font; // Set font again after canvas is resized, as context properties are reset
+
+      ctx.fillStyle = this.color;
+      ctx.textBaseline = 'bottom';
+      var drawTextStroke = this.strokeWidth > 0;
+
+      if (drawTextStroke) {
+        ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
+        ctx.strokeStyle = this.strokeColor;
+      }
+
+      lines.forEach(function (line, index) {
+        var lineX = (innerWidth - ctx.measureText(line).width) / 2;
+        var lineY = (index + 1) * _this2.fontSize;
+        drawTextStroke && ctx.strokeText(line, lineX, lineY);
+        ctx.fillText(line, lineX, lineY);
+      }); // Inject canvas into sprite
+
+      this._texture.image = canvas;
+      this._texture.needsUpdate = true;
+      var yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
+      this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
+    }
+  }, {
+    key: "clone",
+    value: function clone() {
+      return new this.constructor(this.text, this.textHeight, this.color).copy(this);
+    }
+  }, {
+    key: "copy",
+    value: function copy(source) {
+      three.Sprite.prototype.copy.call(this, source);
+      this.color = source.color;
+      this.backgroundColor = source.backgroundColor;
+      this.padding = source.padding;
+      this.borderWidth = source.borderWidth;
+      this.borderColor = source.borderColor;
+      this.fontFace = source.fontFace;
+      this.fontSize = source.fontSize;
+      this.fontWeight = source.fontWeight;
+      this.strokeWidth = source.strokeWidth;
+      this.strokeColor = source.strokeColor;
+      return this;
+    }
   }]);
@@ -421,0 +530,0 @@

package.json

 {
   "name": "three-spritetext",
-  "version": "1.5.4",
+  "version": "1.6.0",
   "description": "A sprite based text component for ThreeJS",
@@ -44,16 +44,16 @@ "unpkg": "dist/three-spritetext.min.js",
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
-    "@babel/preset-env": "^7.12.11",
-    "@rollup/plugin-babel": "^5.2.2",
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-node-resolve": "^11.1.0",
+    "@babel/core": "^7.12.16",
+    "@babel/plugin-proposal-class-properties": "^7.12.13",
+    "@babel/plugin-proposal-object-rest-spread": "^7.12.13",
+    "@babel/preset-env": "^7.12.16",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.0",
     "@types/three": ">=0.86.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.38.0",
+    "rollup": "^2.39.0",
     "rollup-plugin-dts": "^2.0.1",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.1.3"
+    "typescript": "^4.1.5"
   }
 }

README.md

@@ -53,2 +53,3 @@ three-spritetext
 | <b>borderWidth</b> | The size of the border around the canvas. Supports either single values, or a tuple with two values representing horizontal and vertical border size. | `0` |
+| <b>borderRadius</b> | The corner radius of the border. Supports either single values, or an array of four values representing the four corners in order: top-left, top-right, bottom-right, bottom-left. | `0` |
 | <b>borderColor</b> | The color of the border. | `white` |
@@ -55,0 +56,0 @@

No alert changes

Improved metrics

Total package byte prevSize

88334

increased by33%

Lines of code

1395

increased by25.79%

Number of lines in readme file

67

increased by1.52%

No dependency changes