three.texttexture - npm Package Compare versions

Comparing version 18.10.24 to 19.0.0

package.json

 {
 	"name": "three.texttexture",
-	"version": "18.10.24",
-	"description": "A texture for writing the text.",
+	"version": "19.0.0",
+	"description": "A texture for the text writing.",
 	"keywords": [
@@ -28,10 +28,9 @@ "3d",
 	"devDependencies": {
-		"@seregpie/rollup-plugin-resolve": "^18.6.13",
-		"rollup": "^0.66.6",
-		"rollup-plugin-babel-minify": "^6.1.1",
-		"rollup-plugin-buble": "^0.19.4"
+		"rollup": "^1.1.0",
+		"rollup-plugin-buble": "^0.19.6",
+		"rollup-plugin-terser": "^4.0.2"
 	},
 	"peerDependencies": {
-		"three": "^0.97.0"
+		"three": "^0.100.0"
 	}
 }

README.md

@@ -5,3 +5,3 @@ # THREE.TextTexture
 
-An instance of `TextTexture` is a texture for writing the text.
+An instance of `TextTexture` is a texture for the text writing.
 
@@ -12,6 +12,2 @@ ## demo
 
-## dependencies
-
-- [THREE](https://github.com/mrdoob/three.js)
-
 ## setup
@@ -22,3 +18,3 @@
 ```shell
-npm install three.texttexture
+npm i three.texttexture
 ```
@@ -43,14 +39,45 @@
 
-`.constructor({autoRedraw, text, textAlign, textLineHeight, fontFamily, fontSize, fontWeight, fontVariant, fontStyle, fillStyle, lineWidth, strokeStyle, padding, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy})`
+```
+.constructor({
+  align,
+  anisotropy,
+  fillStyle,
+  fontFamily,
+  fontSize,
+  fontStyle,
+  fontVariant,
+  fontWeight,
+  format,
+  lineSpacing,
+  magFilter,
+  mapping,
+  minFilter,
+  padding,
+  strokeStyle,
+  strokeWidth,
+  text,
+  type,
+  wrapS,
+  wrapT,
+})
+```
 
 ```javascript
 let texture = new THREE.TextTexture({
-  text: 'Carpe Diem',
   fontFamily: '"Times New Roman", Times, serif',
   fontSize: 32,
   fontStyle: 'italic',
+  text: [
+    'Twinkle, twinkle, little star,',
+    'How I wonder what you are!',
+    'Up above the world so high,',
+    'Like a diamond in the sky.',
+  ].join('\n'),
 });
-let material = new THREE.SpriteMaterial({map: texture, color: 0xffffbb});
+let material = new THREE.SpriteMaterial({
+  color: 0xffffbb,
+  map: texture,
+});
 let sprite = new THREE.Sprite(material);
-sprite.scale.setX(texture.imageAspect).multiplyScalar(10);
+sprite.scale.setX(texture.image.width / texture.image.height).multiplyScalar(10);
 scene.add(sprite);
@@ -65,30 +92,12 @@ ```
 
-Changing the value will redraw the canvas if `autoRedraw` is `true`.
-
 ---
 
-`.textAlign = 'center'`
+`.lines`
 
-The horizontal alignment of the text. Possible values are `'center'`, `'left'` and `'right'`.
-
-Changing the value will redraw the canvas if `autoRedraw` is `true`.
-
----
-
-`.textLines`
-
 *read-only*
 
-The text split by the new line character.
+The lines of text.
 
 ---
 
-`.textLineHeight = 1.15`
-
-The height of a text line. The pixels are calculated relative to the font size.
-
-Changing the value will redraw the canvas if `autoRedraw` is `true`.
-
----
-
 `.fontFamily = 'sans-serif'`
@@ -98,4 +107,2 @@
 
-Changing the value will redraw the canvas if `autoRedraw` is `true`.
-
 ---
@@ -107,4 +114,2 @@
 
-Changing the value will redraw the canvas if `autoRedraw` is `true`.
-
 ---
@@ -116,4 +121,2 @@
 
-Changing the value will redraw the canvas if `autoRedraw` is `true`.
-
 ---
@@ -125,4 +128,2 @@
 
-Changing the value will redraw the canvas if `autoRedraw` is `true`.
-
 ---
@@ -134,4 +135,2 @@
 
-Changing the value will redraw the canvas if `autoRedraw` is `true`.
-
 ---
@@ -147,65 +146,38 @@
 
-`.fillStyle = 'White'`
+`.fillStyle = '#fff'`
 
-The color or style to use inside shapes.
+The color or the style of the text.
 
-Changing the value will redraw the canvas if `autoRedraw` is `true`.
-
 ---
 
-`.lineWidth = 0`
+`.strokeWidth = 0`
 
-The thickness of lines. The pixels are calculated relative to the font size.
+The thickness of the stroke effect. The pixels are calculated relative to the font size.
 
-Changing the value will redraw the canvas if `autoRedraw` is `true`.
-
 ---
 
-`.strokeStyle = 'Black'`
+`.strokeStyle = '#000'`
 
-The color or style to use for the lines around shapes.
+The color or the style of the stroke effect.
 
-Changing the value will redraw the canvas if `autoRedraw` is `true`.
-
 ---
 
-`.padding = 0.25`
+`.align = 'center'`
 
-The space around the text inside the canvas. The pixels are calculated relative to the font size.
+The horizontal alignment of the text. Possible values are `'center'`, `'left'` and `'right'`.
 
-Changing the value will redraw the canvas if `autoRedraw` is `true`.
-
 ---
 
-`.redraw()`
+`.lineSpacing = 0.15`
 
-Redraws the canvas.
+The vertical distance between the lines of text. The pixels are calculated relative to the font size.
 
 ---
 
-`.autoRedraw = true`
+`.padding = 0.25`
 
-If `false`, changing properties will **not** redraw the canvas.
+The space around the text. The pixels are calculated relative to the font size.
 
-Make use of it if you want to change multiple properties at once. This way you will avoid unnecessary `.redraw()` calls.
-
-```javascript
-texture.autoRedraw = false;
-texture.text = 'Memento Mori';
-texture.fontWeight = 'bold';
-texture.fontSize = 48;
-texture.redraw();
-texture.autoRedraw = true;
-```
-
----
-
-`.imageAspect`
-
-*read-only*
-
-The width of the canvas devided by the height. If the width or the height is 0, the value will be 1.
-
 ## see also
 
 - [THREE.TextSprite](https://github.com/SeregPie/THREE.TextSprite)

THREE.TextTexture.js

@@ -1,1 +0,1 @@
-(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?module.exports=b(require("three")):"function"==typeof define&&define.amd?define(["three"],b):(a.THREE=a.THREE||{},a.THREE.TextTexture=b(a.THREE))})(this,function(a){"use strict";function b(){return document.createElement("canvas")}function c(a){return a===void 0}function d(a,b,c,d,e){return[a,b,c,d+"px",e].join(" ")}function e(a){return a?a.split("\n"):[]}function f(a){return a.reduce(function(a,b){return Math.max(a,b)})}function g(a,c){if(a.length){var d=b().getContext("2d");return d.font=c,f(a.map(function(a){return d.measureText(a).width}))}return 0}var h=function(f){function h(c){void 0===c&&(c={});var d=c.autoRedraw;void 0===d&&(d=!0);var e=c.text;void 0===e&&(e="");var g=c.textAlign;void 0===g&&(g="center");var h=c.textLineHeight;void 0===h&&(h=1.15);var i=c.fontFamily;void 0===i&&(i="sans-serif");var j=c.fontSize;void 0===j&&(j=16);var k=c.fontWeight;void 0===k&&(k="normal");var l=c.fontVariant;void 0===l&&(l="normal");var m=c.fontStyle;void 0===m&&(m="normal");var n=c.fillStyle;void 0===n&&(n="white");var o=c.lineWidth;void 0===o&&(o=0);var p=c.strokeStyle;void 0===p&&(p="black");var q=c.padding;void 0===q&&(q=.25);var r=c.magFilter;void 0===r&&(r=a.LinearFilter);var s=c.minFilter;void 0===s&&(s=a.LinearFilter);var t=c.mapping,u=c.wrapS,v=c.wrapT,w=c.format,x=c.type,y=c.anisotropy;f.call(this,b(),t,u,v,r,s,w,x,y),this.autoRedraw=d,this._text=e,this._textAlign=g,this._textLineHeight=h,this._fontFamily=i,this._fontSize=j,this._fontWeight=k,this._fontVariant=l,this._fontStyle=m,this._fillStyle=n,this._lineWidth=o,this._strokeStyle=p,this._padding=q,this.redraw()}f&&(h.__proto__=f),h.prototype=Object.create(f&&f.prototype),h.prototype.constructor=h;var i={text:{configurable:!0},textAlign:{configurable:!0},textLines:{configurable:!0},textLineHeight:{configurable:!0},textLineHeightInPixels:{configurable:!0},fontFamily:{configurable:!0},fontSize:{configurable:!0},fontWeight:{configurable:!0},fontVariant:{configurable:!0},fontStyle:{configurable:!0},font:{configurable:!0},fillStyle:{configurable:!0},lineWidth:{configurable:!0},lineWidthInPixels:{configurable:!0},strokeStyle:{configurable:!0},textWidthInPixels:{configurable:!0},textHeight:{configurable:!0},textHeightInPixels:{configurable:!0},padding:{configurable:!0},paddingInPixels:{configurable:!0},imageWidthInPixels:{configurable:!0},imageHeight:{configurable:!0},imageHeightInPixels:{configurable:!0},imageAspect:{configurable:!0}};return h.prototype.redraw=function(){var a=this,b=this.image.getContext("2d");if(b.clearRect(0,0,b.canvas.width,b.canvas.height),this.textWidthInPixels&&this.textHeightInPixels){b.canvas.width=this.imageWidthInPixels,b.canvas.height=this.imageHeightInPixels,b.font=this.font,b.textBaseline="middle";var c;switch(this.textAlign){case"left":b.textAlign="left",c=this.paddingInPixels+this.lineWidthInPixels/2;break;case"right":b.textAlign="right",c=this.paddingInPixels+this.lineWidthInPixels/2+this.textWidthInPixels;break;case"center":b.textAlign="center",c=this.paddingInPixels+this.lineWidthInPixels/4+this.textWidthInPixels/2;}var d=this.paddingInPixels+this.lineWidthInPixels/2+this.fontSize/2;b.fillStyle=this.fillStyle,b.miterLimit=1,b.lineWidth=this.lineWidthInPixels,b.strokeStyle=this.strokeStyle,this.textLines.forEach(function(e){a.lineWidth&&b.strokeText(e,c,d),b.fillText(e,c,d),d+=a.textLineHeightInPixels})}else b.canvas.width=b.canvas.height=1;this.needsUpdate=!0},h.prototype._redrawIfAuto=function(){this.autoRedraw&&this.redraw()},i.text.get=function(){return this._text},i.text.set=function(a){this._text!==a&&(this._text=a,this._textLines=void 0,this._textWidthInPixels=void 0,this._redrawIfAuto())},i.textAlign.get=function(){return this._textAlign},i.textAlign.set=function(a){this._textAlign!==a&&(this._textAlign=a,this._redrawIfAuto())},i.textLines.get=function(){return c(this._textLines)&&(this._textLines=e(this.text)),this._textLines},i.textLineHeight.get=function(){return this._textLineHeight},i.textLineHeight.set=function(a){this._textLineHeight!==a&&(this._textLineHeight=a,this._redrawIfAuto())},i.textLineHeightInPixels.get=function(){return this.fontSize*this.textLineHeight},i.fontFamily.get=function(){return this._fontFamily},i.fontFamily.set=function(a){this._fontFamily!==a&&(this._fontFamily=a,this._textWidthInPixels=void 0,this._redrawIfAuto())},i.fontSize.get=function(){return this._fontSize},i.fontSize.set=function(a){this._fontSize!==a&&(this._fontSize=a,this._textWidthInPixels=void 0,this._redrawIfAuto())},i.fontWeight.get=function(){return this._fontWeight},i.fontWeight.set=function(a){this._fontWeight!==a&&(this._fontWeight=a,this._textWidthInPixels=void 0,this._redrawIfAuto())},i.fontVariant.get=function(){return this._fontVariant},i.fontVariant.set=function(a){this._fontVariant!==a&&(this._fontVariant=a,this._textWidthInPixels=void 0,this._redrawIfAuto())},i.fontStyle.get=function(){return this._fontStyle},i.fontStyle.set=function(a){this._fontStyle!==a&&(this._fontStyle=a,this._textWidthInPixels=void 0,this._redrawIfAuto())},i.font.get=function(){return d(this.fontStyle,this.fontVariant,this.fontWeight,this.fontSize,this.fontFamily)},i.fillStyle.get=function(){return this._fillStyle},i.fillStyle.set=function(a){this._fillStyle!==a&&(this._fillStyle=a,this._redrawIfAuto())},i.lineWidth.get=function(){return this._lineWidth},i.lineWidth.set=function(a){this._lineWidth!==a&&(this._lineWidth=a,this._redrawIfAuto())},i.lineWidthInPixels.get=function(){return this._lineWidth*this.fontSize},i.strokeStyle.get=function(){return this._strokeStyle},i.strokeStyle.set=function(a){this._strokeStyle!==a&&(this._strokeStyle=a,this._redrawIfAuto())},i.textWidthInPixels.get=function(){return c(this._textWidthInPixels)&&(this._textWidthInPixels=g(this.textLines,this.font)),this._textWidthInPixels},i.textHeight.get=function(){return this.textLineHeight*(this.textLines.length-1)+1},i.textHeightInPixels.get=function(){return this.textHeight*this.fontSize},i.padding.get=function(){return this._padding},i.padding.set=function(a){this._padding!==a&&(this._padding=a,this._redrawIfAuto())},i.paddingInPixels.get=function(){return this.padding*this.fontSize},i.imageWidthInPixels.get=function(){return this.textWidthInPixels+this.lineWidthInPixels+2*this.paddingInPixels},i.imageHeight.get=function(){return this.textHeight+this.lineWidth+2*this.padding},i.imageHeightInPixels.get=function(){return this.imageHeight*this.fontSize},i.imageAspect.get=function(){return this.image.width&&this.image.height?this.image.width/this.image.height:1},Object.defineProperties(h.prototype,i),h}(a.Texture);return h});
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i(require("three")):"function"==typeof define&&define.amd?define(["three"],i):((t=t||self).THREE=t.THREE||{},t.THREE.TextTexture=i(t.THREE))}(this,function(t){"use strict";function i(){return document.createElement("canvas")}function e(t){return void 0===t}function n(t,e){if(t.length){var n=i().getContext("2d");return n.font=e,t.map(function(t){return n.measureText(t).width}).reduce(function(t,i){return Math.max(t,i)})}return 0}return function(s){function r(e){void 0===e&&(e={});var n=e.align;void 0===n&&(n="center");var r=e.anisotropy,o=e.fillStyle;void 0===o&&(o="#fff");var h=e.fontFamily;void 0===h&&(h="sans-serif");var l=e.fontSize;void 0===l&&(l=16);var a=e.fontStyle;void 0===a&&(a="normal");var f=e.fontVariant;void 0===f&&(f="normal");var d=e.fontWeight;void 0===d&&(d="normal");var g=e.format,u=e.lineSpacing;void 0===u&&(u=.15);var c=e.magFilter;void 0===c&&(c=t.LinearFilter);var x=e.mapping,_=e.minFilter;void 0===_&&(_=t.LinearFilter);var S=e.padding;void 0===S&&(S=.25);var p=e.strokeStyle;void 0===p&&(p="#000");var y=e.strokeWidth;void 0===y&&(y=0);var v=e.text;void 0===v&&(v="");var P,I,W,k=e.type,m=e.wrapS,w=e.wrapT;s.call(this,i(),x,m,w,c,_,g,k,r),this._align=n,this._fillStyle=o,this._fontFamily=h,this._fontSize=l,this._fontStyle=a,this._fontVariant=f,this._fontWeight=d,this._lineSpacing=u,this._padding=S,this._strokeStyle=p,this._strokeWidth=y,this._text=v,this.redraw=(P=this.redrawNow,I=1,function(){clearTimeout(W),W=setTimeout(P.bind(this),I)}),this.redrawNow()}s&&(r.__proto__=s),r.prototype=Object.create(s&&s.prototype),r.prototype.constructor=r;var o={align:{configurable:!0},fillStyle:{configurable:!0},font:{configurable:!0},fontFamily:{configurable:!0},fontSize:{configurable:!0},fontStyle:{configurable:!0},fontVariant:{configurable:!0},fontWeight:{configurable:!0},height:{configurable:!0},heightInPixels:{configurable:!0},lines:{configurable:!0},lineSpacing:{configurable:!0},lineSpacingInPixels:{configurable:!0},padding:{configurable:!0},paddingInPixels:{configurable:!0},strokeStyle:{configurable:!0},strokeWidth:{configurable:!0},strokeWidthInPixels:{configurable:!0},text:{configurable:!0},textHeight:{configurable:!0},textHeightInPixels:{configurable:!0},textWidthInPixels:{configurable:!0},widthInPixels:{configurable:!0}};return o.align.get=function(){return this._align},o.align.set=function(t){this._align!==t&&(this._align=t,this.redraw())},o.fillStyle.get=function(){return this._fillStyle},o.fillStyle.set=function(t){this._fillStyle!==t&&(this._fillStyle=t,this.redraw())},o.font.get=function(){return t=this.fontStyle,i=this.fontVariant,e=this.fontWeight,n=this.fontSize,s=this.fontFamily,[t,i,e,n+"px",s].join(" ");var t,i,e,n,s},o.fontFamily.get=function(){return this._fontFamily},o.fontFamily.set=function(t){this._fontFamily!==t&&(this._fontFamily=t,this._textWidthInPixels=void 0,this.redraw())},o.fontSize.get=function(){return this._fontSize},o.fontSize.set=function(t){this._fontSize!==t&&(this._fontSize=t,this._textWidthInPixels=void 0,this.redraw())},o.fontStyle.get=function(){return this._fontStyle},o.fontStyle.set=function(t){this._fontStyle!==t&&(this._fontStyle=t,this._textWidthInPixels=void 0,this.redraw())},o.fontVariant.get=function(){return this._fontVariant},o.fontVariant.set=function(t){this._fontVariant!==t&&(this._fontVariant=t,this._textWidthInPixels=void 0,this.redraw())},o.fontWeight.get=function(){return this._fontWeight},o.fontWeight.set=function(t){this._fontWeight!==t&&(this._fontWeight=t,this._textWidthInPixels=void 0,this.redraw())},o.height.get=function(){return this.textHeight+this.strokeWidth+2*this.padding},o.heightInPixels.get=function(){return this.height*this.fontSize},o.lines.get=function(){var t;return e(this._lines)&&(this._lines=(t=this.text)?t.split("\n"):[]),this._lines},o.lineSpacing.get=function(){return this._lineSpacing},o.lineSpacing.set=function(t){this._lineSpacing!==t&&(this._lineSpacing=t,this.redraw())},o.lineSpacingInPixels.get=function(){return this.fontSize*this.lineSpacing},o.padding.get=function(){return this._padding},o.padding.set=function(t){this._padding!==t&&(this._padding=t,this.redraw())},o.paddingInPixels.get=function(){return this.padding*this.fontSize},r.prototype.redrawNow=function(){var t=this,i=this.image,e=i.getContext("2d");if(e.clearRect(0,0,i.width,i.height),this.widthInPixels&&this.heightInPixels){var n;switch(i.width=this.widthInPixels,i.height=this.heightInPixels,e.font=this.font,e.textBaseline="middle",this.align){case"left":e.textAlign="left",n=this.paddingInPixels+this.strokeWidthInPixels/2;break;case"right":e.textAlign="right",n=this.paddingInPixels+this.strokeWidthInPixels/2+this.textWidthInPixels;break;case"center":e.textAlign="center",n=this.paddingInPixels+this.strokeWidthInPixels/2+this.textWidthInPixels/2}var s=this.paddingInPixels+this.strokeWidthInPixels/2+this.fontSize/2;e.fillStyle=this.fillStyle,e.miterLimit=1,e.lineWidth=this.strokeWidthInPixels,e.strokeStyle=this.strokeStyle,this.lines.forEach(function(i){t.strokeWidthInPixels&&e.strokeText(i,n,s),e.fillText(i,n,s),s+=t.fontSize+t.lineSpacingInPixels})}else i.width=i.height=1;this.needsUpdate=!0},o.strokeStyle.get=function(){return this._strokeStyle},o.strokeStyle.set=function(t){this._strokeStyle!==t&&(this._strokeStyle=t,this.redraw())},o.strokeWidth.get=function(){return this._strokeWidth},o.strokeWidth.set=function(t){this._strokeWidth!==t&&(this._strokeWidth=t,this.redraw())},o.strokeWidthInPixels.get=function(){return this._strokeWidth*this.fontSize},o.text.get=function(){return this._text},o.text.set=function(t){this._text!==t&&(this._text=t,this._lines=void 0,this._textWidthInPixels=void 0,this.redraw())},o.textHeight.get=function(){return this.lines.length?this.lines.length+this.lineSpacing*(this.lines.length-1):0},o.textHeightInPixels.get=function(){return this.textHeight*this.fontSize},o.textWidthInPixels.get=function(){return e(this._textWidthInPixels)&&(this._textWidthInPixels=n(this.lines,this.font)),this._textWidthInPixels},o.widthInPixels.get=function(){return this.textWidthInPixels+this.strokeWidthInPixels+2*this.paddingInPixels},Object.defineProperties(r.prototype,o),r}(t.Texture)});

No alert changes

Improved metrics

Dev dependency count

3

decreased by-25%

Worsened metrics

Total package byte prevSize

10758

decreased by-14.08%

Lines of code

25

decreased by-3.85%

Number of lines in readme file

173

decreased by-13.93%

No dependency changes