three-spritetext - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

dist/three-spritetext.common.js

@@ -58,2 +58,15 @@ 'use strict';
 
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
 function _assertThisInitialized(self) {
@@ -75,20 +88,50 @@ if (self === void 0) {
 
+function _createSuper(Derived) {
+  return function () {
+    var Super = _getPrototypeOf(Derived),
+        result;
+
+    if (_isNativeReflectConstruct()) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
 function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
 function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) {
-    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
-
-    return arr2;
-  }
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
 }
 
 function _iterableToArray(iter) {
-  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
 }
 
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
 function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance");
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
@@ -107,2 +150,4 @@
 
+  var _super = _createSuper(_default);
+
   function _default() {
@@ -117,5 +162,5 @@ var _this;
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(_default).call(this, new three.SpriteMaterial({
+    _this = _super.call(this, new three.SpriteMaterial({
       map: new three.Texture()
-    })));
+    }));
     _this._text = "".concat(text);
@@ -129,2 +174,4 @@ _this._textHeight = textHeight;
     _this._borderColor = 'white';
+    _this._strokeWidth = 0;
+    _this._strokeColor = 'white';
     _this._fontFace = 'Arial';
@@ -210,4 +257,14 @@ _this._fontSize = 90; // defines text resolution
       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) {
-        return ctx.fillText(line, (innerWidth - ctx.measureText(line).width) / 2, (index + 1) * _this2.fontSize);
+        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
@@ -237,2 +294,4 @@
       this.fontWeight = source.fontWeight;
+      this.strokeWidth = source.strokeWidth;
+      this.strokeColor = source.strokeColor;
       return this;
@@ -340,2 +399,22 @@ }
     }
+  }, {
+    key: "strokeWidth",
+    get: function get() {
+      return this._strokeWidth;
+    },
+    set: function set(strokeWidth) {
+      this._strokeWidth = strokeWidth;
+
+      this._genCanvas();
+    }
+  }, {
+    key: "strokeColor",
+    get: function get() {
+      return this._strokeColor;
+    },
+    set: function set(strokeColor) {
+      this._strokeColor = strokeColor;
+
+      this._genCanvas();
+    }
   }]);
@@ -342,0 +421,0 @@

dist/three-spritetext.d.ts

@@ -30,4 +30,8 @@ import { Sprite } from 'three';
   set borderColor(color:string);
+  get strokeWidth(): number;
+  set strokeWidth(strokeWidth: number);
+  get strokeColor(): string;
+  set strokeColor(strokeColor: string);
 }
 
 export default SpriteText;

dist/three-spritetext.js

@@ -1,2 +0,2 @@
-// Version 1.4.0 three-spritetext - https://github.com/vasturiano/three-spritetext
+// Version 1.5.0 three-spritetext - https://github.com/vasturiano/three-spritetext
 (function (global, factory) {
@@ -61,2 +61,15 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('three')) :
 
+  function _isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+
+    try {
+      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
   function _assertThisInitialized(self) {
@@ -78,20 +91,50 @@ if (self === void 0) {
 
+  function _createSuper(Derived) {
+    return function () {
+      var Super = _getPrototypeOf(Derived),
+          result;
+
+      if (_isNativeReflectConstruct()) {
+        var NewTarget = _getPrototypeOf(this).constructor;
+
+        result = Reflect.construct(Super, arguments, NewTarget);
+      } else {
+        result = Super.apply(this, arguments);
+      }
+
+      return _possibleConstructorReturn(this, result);
+    };
+  }
+
   function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
   }
 
   function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) {
-      for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
-
-      return arr2;
-    }
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
   }
 
   function _iterableToArray(iter) {
-    if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+    if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
   }
 
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+
   function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance");
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
@@ -110,2 +153,4 @@
 
+    var _super = _createSuper(_default);
+
     function _default() {
@@ -120,5 +165,5 @@ var _this;
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(_default).call(this, new three.SpriteMaterial({
+      _this = _super.call(this, new three.SpriteMaterial({
         map: new three.Texture()
-      })));
+      }));
       _this._text = "".concat(text);
@@ -132,2 +177,4 @@ _this._textHeight = textHeight;
       _this._borderColor = 'white';
+      _this._strokeWidth = 0;
+      _this._strokeColor = 'white';
       _this._fontFace = 'Arial';
@@ -213,4 +260,14 @@ _this._fontSize = 90; // defines text resolution
         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) {
-          return ctx.fillText(line, (innerWidth - ctx.measureText(line).width) / 2, (index + 1) * _this2.fontSize);
+          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
@@ -240,2 +297,4 @@
         this.fontWeight = source.fontWeight;
+        this.strokeWidth = source.strokeWidth;
+        this.strokeColor = source.strokeColor;
         return this;
@@ -343,2 +402,22 @@ }
       }
+    }, {
+      key: "strokeWidth",
+      get: function get() {
+        return this._strokeWidth;
+      },
+      set: function set(strokeWidth) {
+        this._strokeWidth = strokeWidth;
+
+        this._genCanvas();
+      }
+    }, {
+      key: "strokeColor",
+      get: function get() {
+        return this._strokeColor;
+      },
+      set: function set(strokeColor) {
+        this._strokeColor = strokeColor;
+
+        this._genCanvas();
+      }
     }]);
@@ -345,0 +424,0 @@

dist/three-spritetext.min.js

@@ -1,2 +0,2 @@
-// Version 1.4.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=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 i=e[n];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 r(t,e){return(r=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){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var h=window.THREE?window.THREE:{LinearFilter:t.LinearFilter,Sprite:t.Sprite,SpriteMaterial:t.SpriteMaterial,Texture:t.Texture};return function(t){function s(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:10,a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgba(255, 255, 255, 1)";return e(this,s),(t=o(this,i(s).call(this,new h.SpriteMaterial({map:new h.Texture}))))._text="".concat(n),t._textHeight=r,t._color=a,t._backgroundColor=!1,t._padding=0,t._borderWidth=0,t._borderColor="white",t._fontFace="Arial",t._fontSize=90,t._fontWeight="normal",t._canvas=document.createElement("canvas"),t._texture=t.material.map,t._texture.minFilter=h.LinearFilter,t._genCanvas(),t}var c,u,f;return 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&&r(t,e)}(s,t),c=s,(u=[{key:"_genCanvas",value:function(){var t=this,e=this._canvas,n=e.getContext("2d"),i=Array.isArray(this.borderWidth)?this.borderWidth:[this.borderWidth,this.borderWidth],r=i.map((function(e){return e*t.fontSize*.1})),o=Array.isArray(this.padding)?this.padding:[this.padding,this.padding],h=o.map((function(e){return e*t.fontSize*.1})),s=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(s.map((function(t){return n.measureText(t).width})))),f=this.fontSize*s.length;e.width=u+2*r[0]+2*h[0],e.height=f+2*r[1]+2*h[1],this.borderWidth&&(n.strokeStyle=this.borderColor,r[0]&&(n.lineWidth=2*r[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()),r[1]&&(n.lineWidth=2*r[1],n.beginPath(),n.moveTo(r[0],0),n.lineTo(e.width-r[0],0),n.moveTo(r[0],e.height),n.lineTo(e.width-r[0],e.height),n.stroke())),n.translate.apply(n,a(r)),this.backgroundColor&&(n.fillStyle=this.backgroundColor,n.fillRect(0,0,e.width-2*r[0],e.height-2*r[1])),n.translate.apply(n,a(h)),n.font=c,n.fillStyle=this.color,n.textBaseline="bottom",s.forEach((function(e,i){return n.fillText(e,(u-n.measureText(e).width)/2,(i+1)*t.fontSize)})),this._texture.image=e,this._texture.needsUpdate=!0;var l=this.textHeight*s.length+2*i[1]+2*o[1];this.scale.set(l*e.width/e.height,l)}},{key:"clone",value:function(){return new this.constructor(this.text,this.textHeight,this.color).copy(this)}},{key:"copy",value:function(t){return h.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}},{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()}}])&&n(c.prototype,u),f&&n(c,f),s}(h.Sprite)}));
+// Version 1.5.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=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(){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}}function s(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){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(n);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=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)}(g,t);var h,u,f,l,d=(h=g,function(){var t,e=r(h);if(o()){var n=r(this).constructor;t=Reflect.construct(e,arguments,n)}else t=e.apply(this,arguments);return s(this,t)});function g(){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,g),(t=d.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 u=g,(f=[{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)}},{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(u.prototype,f),l&&n(u,l),g}(c.Sprite)}));

dist/three-spritetext.module.js

@@ -56,2 +56,15 @@ import { LinearFilter, Sprite, SpriteMaterial, Texture } from 'three';
 
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
 function _assertThisInitialized(self) {
@@ -73,20 +86,50 @@ if (self === void 0) {
 
+function _createSuper(Derived) {
+  return function () {
+    var Super = _getPrototypeOf(Derived),
+        result;
+
+    if (_isNativeReflectConstruct()) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
 function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
 function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) {
-    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
-
-    return arr2;
-  }
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
 }
 
 function _iterableToArray(iter) {
-  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
 }
 
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
 function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance");
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
@@ -105,2 +148,4 @@
 
+  var _super = _createSuper(_default);
+
   function _default() {
@@ -115,5 +160,5 @@ var _this;
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(_default).call(this, new three.SpriteMaterial({
+    _this = _super.call(this, new three.SpriteMaterial({
       map: new three.Texture()
-    })));
+    }));
     _this._text = "".concat(text);
@@ -127,2 +172,4 @@ _this._textHeight = textHeight;
     _this._borderColor = 'white';
+    _this._strokeWidth = 0;
+    _this._strokeColor = 'white';
     _this._fontFace = 'Arial';
@@ -208,4 +255,14 @@ _this._fontSize = 90; // defines text resolution
       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) {
-        return ctx.fillText(line, (innerWidth - ctx.measureText(line).width) / 2, (index + 1) * _this2.fontSize);
+        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
@@ -235,2 +292,4 @@
       this.fontWeight = source.fontWeight;
+      this.strokeWidth = source.strokeWidth;
+      this.strokeColor = source.strokeColor;
       return this;
@@ -338,2 +397,22 @@ }
     }
+  }, {
+    key: "strokeWidth",
+    get: function get() {
+      return this._strokeWidth;
+    },
+    set: function set(strokeWidth) {
+      this._strokeWidth = strokeWidth;
+
+      this._genCanvas();
+    }
+  }, {
+    key: "strokeColor",
+    get: function get() {
+      return this._strokeColor;
+    },
+    set: function set(strokeColor) {
+      this._strokeColor = strokeColor;
+
+      this._genCanvas();
+    }
   }]);
@@ -340,0 +419,0 @@

package.json

 {
   "name": "three-spritetext",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A sprite based text component for ThreeJS",
@@ -44,13 +44,13 @@ "unpkg": "dist/three-spritetext.min.js",
   "devDependencies": {
-    "@babel/core": "^7.8.7",
+    "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
-    "@babel/preset-env": "^7.8.7",
-    "@rollup/plugin-commonjs": "^11.0.2",
-    "@rollup/plugin-node-resolve": "^7.1.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.9.5",
+    "@babel/preset-env": "^7.9.5",
+    "@rollup/plugin-commonjs": "^11.1.0",
+    "@rollup/plugin-node-resolve": "^7.1.3",
     "@types/three": ">=0.86.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.0.6",
+    "rollup": "^2.6.1",
     "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-dts": "^1.3.0",
+    "rollup-plugin-dts": "^1.4.0",
     "rollup-plugin-terser": "^5.3.0",
@@ -57,0 +57,0 @@ "typescript": "^3.8.3"

README.md

@@ -44,4 +44,6 @@ three-spritetext
 | <b>textHeight</b> | The height of the text. | 10 |
-| <b>color</b> | The color of the text. | `white` |
+| <b>color</b> | The fill color of the text. | `white` |
 | <b>backgroundColor</b> | The canvas background color. A falsy value makes the canvas transparent. | `false` |
+| <b>strokeWidth</b> | The width of the text stroke, proportional to the text size. A value of `0` disables stroking. | `0` |
+| <b>strokeColor</b> | The color of the text stroke. | `white` |
 | <b>fontFace</b> | The font type of the text. | `Arial` |
@@ -48,0 +50,0 @@ | <b>fontSize</b> | The resolution of the text, in terms of vertical number of pixels. Lower values may cause text to look blurry. Higher values will yield sharper text, at the cost of performance. | `90` |

No alert changes

Improved metrics

Total package byte prevSize

65826

increased by18.58%

Lines of code

1105

increased by22.64%

Number of lines in readme file

66

increased by3.13%

No dependency changes