@pixi/text - npm Package Compare versions

Comparing version 7.0.0-beta.3 to 7.0.0-beta.4

dist/cjs/text.js

 /*!
- * @pixi/text - v7.0.0-beta.3
- * Compiled Thu, 13 Oct 2022 15:35:43 UTC
+ * @pixi/text - v7.0.0-beta.4
+ * Compiled Thu, 20 Oct 2022 19:45:44 UTC
  *
@@ -398,2 +398,5 @@ * @pixi/text is licensed under the MIT License.
 
+const contextSettings = {
+  willReadFrequently: true
+};
 class TextMetrics {
@@ -419,3 +422,3 @@ constructor(text, style, width, height, lines, lineWidths, lineHeight, maxLineWidth, fontProperties) {
     }
-    const context = canvas.getContext("2d");
+    const context = canvas.getContext("2d", contextSettings);
     context.font = font;
@@ -443,3 +446,3 @@ const outputText = wordWrap ? TextMetrics.wordWrap(text, style, canvas) : text;
   static wordWrap(text, style, canvas = TextMetrics._canvas) {
-    const context = canvas.getContext("2d");
+    const context = canvas.getContext("2d", contextSettings);
     let width = 0;
@@ -691,3 +694,3 @@ let line = "";
         const c = new OffscreenCanvas(0, 0);
-        const context = c.getContext("2d");
+        const context = c.getContext("2d", contextSettings);
         if (context?.measureText) {
@@ -708,3 +711,3 @@ TextMetrics.__canvas = c;
     if (!TextMetrics.__context) {
-      TextMetrics.__context = TextMetrics._canvas.getContext("2d");
+      TextMetrics.__context = TextMetrics._canvas.getContext("2d", contextSettings);
     }
@@ -760,3 +763,5 @@ return TextMetrics.__context;
     this.canvas = canvas;
-    this.context = canvas.getContext("2d");
+    this.context = canvas.getContext("2d", {
+      willReadFrequently: true
+    });
     this._resolution = core.settings.RESOLUTION;
@@ -763,0 +768,0 @@ this._autoResolution = true;

dist/cjs/text.min.js

 "use strict";/*!
- * @pixi/text - v7.0.0-beta.3
- * Compiled Thu, 13 Oct 2022 15:35:43 UTC
+ * @pixi/text - v7.0.0-beta.4
+ * Compiled Thu, 20 Oct 2022 19:45:44 UTC
  *
  * @pixi/text is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
- */Object.defineProperty(exports,"__esModule",{value:!0});var z=require("@pixi/sprite"),m=require("@pixi/core"),L=(i=>(i[i.LINEAR_VERTICAL=0]="LINEAR_VERTICAL",i[i.LINEAR_HORIZONTAL=1]="LINEAR_HORIZONTAL",i))(L||{});const W={align:"left",breakWords:!1,dropShadow:!1,dropShadowAlpha:1,dropShadowAngle:Math.PI/6,dropShadowBlur:0,dropShadowColor:"black",dropShadowDistance:5,fill:"black",fillGradientType:L.LINEAR_VERTICAL,fillGradientStops:[],fontFamily:"Arial",fontSize:26,fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",letterSpacing:0,lineHeight:0,lineJoin:"miter",miterLimit:10,padding:0,stroke:"black",strokeThickness:0,textBaseline:"alphabetic",trim:!1,whiteSpace:"pre",wordWrap:!1,wordWrapWidth:100,leading:0},G=["serif","sans-serif","monospace","cursive","fantasy","system-ui"];class D{constructor(t){this.styleID=0,this.reset(),C(this,t,t)}clone(){const t={};return C(t,this,W),new D(t)}reset(){C(this,W,W)}get align(){return this._align}set align(t){this._align!==t&&(this._align=t,this.styleID++)}get breakWords(){return this._breakWords}set breakWords(t){this._breakWords!==t&&(this._breakWords=t,this.styleID++)}get dropShadow(){return this._dropShadow}set dropShadow(t){this._dropShadow!==t&&(this._dropShadow=t,this.styleID++)}get dropShadowAlpha(){return this._dropShadowAlpha}set dropShadowAlpha(t){this._dropShadowAlpha!==t&&(this._dropShadowAlpha=t,this.styleID++)}get dropShadowAngle(){return this._dropShadowAngle}set dropShadowAngle(t){this._dropShadowAngle!==t&&(this._dropShadowAngle=t,this.styleID++)}get dropShadowBlur(){return this._dropShadowBlur}set dropShadowBlur(t){this._dropShadowBlur!==t&&(this._dropShadowBlur=t,this.styleID++)}get dropShadowColor(){return this._dropShadowColor}set dropShadowColor(t){const e=b(t);this._dropShadowColor!==e&&(this._dropShadowColor=e,this.styleID++)}get dropShadowDistance(){return this._dropShadowDistance}set dropShadowDistance(t){this._dropShadowDistance!==t&&(this._dropShadowDistance=t,this.styleID++)}get fill(){return this._fill}set fill(t){const e=b(t);this._fill!==e&&(this._fill=e,this.styleID++)}get fillGradientType(){return this._fillGradientType}set fillGradientType(t){this._fillGradientType!==t&&(this._fillGradientType=t,this.styleID++)}get fillGradientStops(){return this._fillGradientStops}set fillGradientStops(t){F(this._fillGradientStops,t)||(this._fillGradientStops=t,this.styleID++)}get fontFamily(){return this._fontFamily}set fontFamily(t){this.fontFamily!==t&&(this._fontFamily=t,this.styleID++)}get fontSize(){return this._fontSize}set fontSize(t){this._fontSize!==t&&(this._fontSize=t,this.styleID++)}get fontStyle(){return this._fontStyle}set fontStyle(t){this._fontStyle!==t&&(this._fontStyle=t,this.styleID++)}get fontVariant(){return this._fontVariant}set fontVariant(t){this._fontVariant!==t&&(this._fontVariant=t,this.styleID++)}get fontWeight(){return this._fontWeight}set fontWeight(t){this._fontWeight!==t&&(this._fontWeight=t,this.styleID++)}get letterSpacing(){return this._letterSpacing}set letterSpacing(t){this._letterSpacing!==t&&(this._letterSpacing=t,this.styleID++)}get lineHeight(){return this._lineHeight}set lineHeight(t){this._lineHeight!==t&&(this._lineHeight=t,this.styleID++)}get leading(){return this._leading}set leading(t){this._leading!==t&&(this._leading=t,this.styleID++)}get lineJoin(){return this._lineJoin}set lineJoin(t){this._lineJoin!==t&&(this._lineJoin=t,this.styleID++)}get miterLimit(){return this._miterLimit}set miterLimit(t){this._miterLimit!==t&&(this._miterLimit=t,this.styleID++)}get padding(){return this._padding}set padding(t){this._padding!==t&&(this._padding=t,this.styleID++)}get stroke(){return this._stroke}set stroke(t){const e=b(t);this._stroke!==e&&(this._stroke=e,this.styleID++)}get strokeThickness(){return this._strokeThickness}set strokeThickness(t){this._strokeThickness!==t&&(this._strokeThickness=t,this.styleID++)}get textBaseline(){return this._textBaseline}set textBaseline(t){this._textBaseline!==t&&(this._textBaseline=t,this.styleID++)}get trim(){return this._trim}set trim(t){this._trim!==t&&(this._trim=t,this.styleID++)}get whiteSpace(){return this._whiteSpace}set whiteSpace(t){this._whiteSpace!==t&&(this._whiteSpace=t,this.styleID++)}get wordWrap(){return this._wordWrap}set wordWrap(t){this._wordWrap!==t&&(this._wordWrap=t,this.styleID++)}get wordWrapWidth(){return this._wordWrapWidth}set wordWrapWidth(t){this._wordWrapWidth!==t&&(this._wordWrapWidth=t,this.styleID++)}toFontString(){const t=typeof this.fontSize=="number"?`${this.fontSize}px`:this.fontSize;let e=this.fontFamily;Array.isArray(this.fontFamily)||(e=this.fontFamily.split(","));for(let s=e.length-1;s>=0;s--){let h=e[s].trim();!/([\"\'])[^\'\"]+\1/.test(h)&&!G.includes(h)&&(h=`"${h}"`),e[s]=h}return`${this.fontStyle} ${this.fontVariant} ${this.fontWeight} ${t} ${e.join(",")}`}}function R(i){return typeof i=="number"?m.utils.hex2string(i):(typeof i=="string"&&i.startsWith("0x")&&(i=i.replace("0x","#")),i)}function b(i){if(Array.isArray(i)){for(let t=0;t<i.length;++t)i[t]=R(i[t]);return i}else return R(i)}function F(i,t){if(!Array.isArray(i)||!Array.isArray(t)||i.length!==t.length)return!1;for(let e=0;e<i.length;++e)if(i[e]!==t[e])return!1;return!0}function C(i,t,e){for(const s in e)Array.isArray(t[s])?i[s]=t[s].slice():i[s]=t[s]}class n{constructor(t,e,s,h,o,r,l,p,d){this.text=t,this.style=e,this.width=s,this.height=h,this.lines=o,this.lineWidths=r,this.lineHeight=l,this.maxLineWidth=p,this.fontProperties=d}static measureText(t,e,s,h=n._canvas){s=s??e.wordWrap;const o=e.toFontString(),r=n.measureFont(o);r.fontSize===0&&(r.fontSize=e.fontSize,r.ascent=e.fontSize);const l=h.getContext("2d");l.font=o;const p=(s?n.wordWrap(t,e,h):t).split(/(?:\r\n|\r|\n)/),d=new Array(p.length);let f=0;for(let u=0;u<p.length;u++){const _=l.measureText(p[u]).width+(p[u].length-1)*e.letterSpacing;d[u]=_,f=Math.max(f,_)}let c=f+e.strokeThickness;e.dropShadow&&(c+=e.dropShadowDistance);const a=e.lineHeight||r.fontSize+e.strokeThickness;let g=Math.max(a,r.fontSize+e.strokeThickness)+(p.length-1)*(a+e.leading);return e.dropShadow&&(g+=e.dropShadowDistance),new n(t,e,c,g,p,d,a+e.leading,f,r)}static wordWrap(t,e,s=n._canvas){const h=s.getContext("2d");let o=0,r="",l="";const p=Object.create(null),{letterSpacing:d,whiteSpace:f}=e,c=n.collapseSpaces(f),a=n.collapseNewlines(f);let g=!c;const u=e.wordWrapWidth+d,_=n.tokenize(t);for(let k=0;k<_.length;k++){let y=_[k];if(n.isNewline(y)){if(!a){l+=n.addLine(r),g=!c,r="",o=0;continue}y=" "}if(c){const S=n.isBreakingSpace(y),w=n.isBreakingSpace(r[r.length-1]);if(S&&w)continue}const A=n.getFromCache(y,d,p,h);if(A>u)if(r!==""&&(l+=n.addLine(r),r="",o=0),n.canBreakWords(y,e.breakWords)){const S=n.wordWrapSplit(y);for(let w=0;w<S.length;w++){let I=S[w],x=1;for(;S[w+x];){const v=S[w+x],N=I[I.length-1];if(!n.canBreakChars(N,v,y,w,e.breakWords))I+=v;else break;x++}w+=I.length-1;const B=n.getFromCache(I,d,p,h);B+o>u&&(l+=n.addLine(r),g=!1,r="",o=0),r+=I,o+=B}}else{r.length>0&&(l+=n.addLine(r),r="",o=0);const S=k===_.length-1;l+=n.addLine(y,!S),g=!1,r="",o=0}else A+o>u&&(g=!1,l+=n.addLine(r),r="",o=0),(r.length>0||!n.isBreakingSpace(y)||g)&&(r+=y,o+=A)}return l+=n.addLine(r,!1),l}static addLine(t,e=!0){return t=n.trimRight(t),t=e?`${t}
-`:t,t}static getFromCache(t,e,s,h){let o=s[t];if(typeof o!="number"){const r=t.length*e;o=h.measureText(t).width+r,s[t]=o}return o}static collapseSpaces(t){return t==="normal"||t==="pre-line"}static collapseNewlines(t){return t==="normal"}static trimRight(t){if(typeof t!="string")return"";for(let e=t.length-1;e>=0;e--){const s=t[e];if(!n.isBreakingSpace(s))break;t=t.slice(0,-1)}return t}static isNewline(t){return typeof t!="string"?!1:n._newlines.includes(t.charCodeAt(0))}static isBreakingSpace(t,e){return typeof t!="string"?!1:n._breakingSpaces.includes(t.charCodeAt(0))}static tokenize(t){const e=[];let s="";if(typeof t!="string")return e;for(let h=0;h<t.length;h++){const o=t[h],r=t[h+1];if(n.isBreakingSpace(o,r)||n.isNewline(o)){s!==""&&(e.push(s),s=""),e.push(o);continue}s+=o}return s!==""&&e.push(s),e}static canBreakWords(t,e){return e}static canBreakChars(t,e,s,h,o){return!0}static wordWrapSplit(t){return t.split("")}static measureFont(t){if(n._fonts[t])return n._fonts[t];const e={ascent:0,descent:0,fontSize:0},s=n._canvas,h=n._context;h.font=t;const o=n.METRICS_STRING+n.BASELINE_SYMBOL,r=Math.ceil(h.measureText(o).width);let l=Math.ceil(h.measureText(n.BASELINE_SYMBOL).width);const p=Math.ceil(n.HEIGHT_MULTIPLIER*l);l=l*n.BASELINE_MULTIPLIER|0,s.width=r,s.height=p,h.fillStyle="#f00",h.fillRect(0,0,r,p),h.font=t,h.textBaseline="alphabetic",h.fillStyle="#000",h.fillText(o,0,l);const d=h.getImageData(0,0,r,p).data,f=d.length,c=r*4;let a=0,g=0,u=!1;for(a=0;a<l;++a){for(let _=0;_<c;_+=4)if(d[g+_]!==255){u=!0;break}if(!u)g+=c;else break}for(e.ascent=l-a,g=f-c,u=!1,a=p;a>l;--a){for(let _=0;_<c;_+=4)if(d[g+_]!==255){u=!0;break}if(!u)g-=c;else break}return e.descent=a-l,e.fontSize=e.ascent+e.descent,n._fonts[t]=e,e}static clearMetrics(t=""){t?delete n._fonts[t]:n._fonts={}}static get _canvas(){if(!n.__canvas){let t;try{const e=new OffscreenCanvas(0,0);if(e.getContext("2d")?.measureText)return n.__canvas=e,e;t=m.settings.ADAPTER.createCanvas()}catch{t=m.settings.ADAPTER.createCanvas()}t.width=t.height=10,n.__canvas=t}return n.__canvas}static get _context(){return n.__context||(n.__context=n._canvas.getContext("2d")),n.__context}}n._fonts={},n.METRICS_STRING="|\xC9q\xC5",n.BASELINE_SYMBOL="M",n.BASELINE_MULTIPLIER=1.4,n.HEIGHT_MULTIPLIER=2,n._newlines=[10,13],n._breakingSpaces=[9,32,8192,8193,8194,8195,8196,8197,8198,8200,8201,8202,8287,12288];const H={texture:!0,children:!1,baseTexture:!0},E=class extends z.Sprite{constructor(i,t,e){let s=!1;e||(e=m.settings.ADAPTER.createCanvas(),s=!0),e.width=3,e.height=3;const h=m.Texture.from(e);h.orig=new m.Rectangle,h.trim=new m.Rectangle,super(h),this._ownCanvas=s,this.canvas=e,this.context=e.getContext("2d"),this._resolution=m.settings.RESOLUTION,this._autoResolution=!0,this._text=null,this._style=null,this._styleListener=null,this._font="",this.text=i,this.style=t,this.localStyleID=-1}updateText(i){const t=this._style;if(this.localStyleID!==t.styleID&&(this.dirty=!0,this.localStyleID=t.styleID),!this.dirty&&i)return;this._font=this._style.toFontString();const e=this.context,s=n.measureText(this._text||" ",this._style,this._style.wordWrap,this.canvas),h=s.width,o=s.height,r=s.lines,l=s.lineHeight,p=s.lineWidths,d=s.maxLineWidth,f=s.fontProperties;this.canvas.width=Math.ceil(Math.ceil(Math.max(1,h)+t.padding*2)*this._resolution),this.canvas.height=Math.ceil(Math.ceil(Math.max(1,o)+t.padding*2)*this._resolution),e.scale(this._resolution,this._resolution),e.clearRect(0,0,this.canvas.width,this.canvas.height),e.font=this._font,e.lineWidth=t.strokeThickness,e.textBaseline=t.textBaseline,e.lineJoin=t.lineJoin,e.miterLimit=t.miterLimit;let c,a;const g=t.dropShadow?2:1;for(let u=0;u<g;++u){const _=t.dropShadow&&u===0,k=_?Math.ceil(Math.max(1,o)+t.padding*2):0,y=k*this._resolution;if(_){e.fillStyle="black",e.strokeStyle="black";const S=t.dropShadowColor,w=m.utils.hex2rgb(typeof S=="number"?S:m.utils.string2hex(S)),I=t.dropShadowBlur*this._resolution,x=t.dropShadowDistance*this._resolution;e.shadowColor=`rgba(${w[0]*255},${w[1]*255},${w[2]*255},${t.dropShadowAlpha})`,e.shadowBlur=I,e.shadowOffsetX=Math.cos(t.dropShadowAngle)*x,e.shadowOffsetY=Math.sin(t.dropShadowAngle)*x+y}else e.fillStyle=this._generateFillStyle(t,r,s),e.strokeStyle=t.stroke,e.shadowColor="black",e.shadowBlur=0,e.shadowOffsetX=0,e.shadowOffsetY=0;let A=(l-f.fontSize)/2;l-f.fontSize<0&&(A=0);for(let S=0;S<r.length;S++)c=t.strokeThickness/2,a=t.strokeThickness/2+S*l+f.ascent+A,t.align==="right"?c+=d-p[S]:t.align==="center"&&(c+=(d-p[S])/2),t.stroke&&t.strokeThickness&&this.drawLetterSpacing(r[S],c+t.padding,a+t.padding-k,!0),t.fill&&this.drawLetterSpacing(r[S],c+t.padding,a+t.padding-k)}this.updateTexture()}drawLetterSpacing(i,t,e,s=!1){const h=this._style.letterSpacing,o=E.experimentalLetterSpacing&&("letterSpacing"in CanvasRenderingContext2D.prototype||"textLetterSpacing"in CanvasRenderingContext2D.prototype);if(h===0||o){o&&(this.context.letterSpacing=h,this.context.textLetterSpacing=h),s?this.context.strokeText(i,t,e):this.context.fillText(i,t,e);return}let r=t;const l=Array.from?Array.from(i):i.split("");let p=this.context.measureText(i).width,d=0;for(let f=0;f<l.length;++f){const c=l[f];s?this.context.strokeText(c,r,e):this.context.fillText(c,r,e);let a="";for(let g=f+1;g<l.length;++g)a+=l[g];d=this.context.measureText(a).width,r+=p-d+h,p=d}}updateTexture(){const i=this.canvas;if(this._style.trim){const o=m.utils.trimCanvas(i);o.data&&(i.width=o.width,i.height=o.height,this.context.putImageData(o.data,0,0))}const t=this._texture,e=this._style,s=e.trim?0:e.padding,h=t.baseTexture;t.trim.width=t._frame.width=i.width/this._resolution,t.trim.height=t._frame.height=i.height/this._resolution,t.trim.x=-s,t.trim.y=-s,t.orig.width=t._frame.width-s*2,t.orig.height=t._frame.height-s*2,this._onTextureUpdate(),h.setRealSize(i.width,i.height,this._resolution),t.updateUvs(),this.dirty=!1}_render(i){this._autoResolution&&this._resolution!==i.resolution&&(this._resolution=i.resolution,this.dirty=!0),this.updateText(!0),super._render(i)}updateTransform(){this.updateText(!0),super.updateTransform()}getBounds(i,t){return this.updateText(!0),this._textureID===-1&&(i=!1),super.getBounds(i,t)}getLocalBounds(i){return this.updateText(!0),super.getLocalBounds.call(this,i)}_calculateBounds(){this.calculateVertices(),this._bounds.addQuad(this.vertexData)}_generateFillStyle(i,t,e){const s=i.fill;if(Array.isArray(s)){if(s.length===1)return s[0]}else return s;let h;const o=i.dropShadow?i.dropShadowDistance:0,r=i.padding||0,l=this.canvas.width/this._resolution-o-r*2,p=this.canvas.height/this._resolution-o-r*2,d=s.slice(),f=i.fillGradientStops.slice();if(!f.length){const c=d.length+1;for(let a=1;a<c;++a)f.push(a/c)}if(d.unshift(s[0]),f.unshift(0),d.push(s[s.length-1]),f.push(1),i.fillGradientType===L.LINEAR_VERTICAL){h=this.context.createLinearGradient(l/2,r,l/2,p+r);const c=e.fontProperties.fontSize+i.strokeThickness;for(let a=0;a<t.length;a++){const g=e.lineHeight*(a-1)+c,u=e.lineHeight*a;let _=u;a>0&&g>u&&(_=(u+g)/2);const k=u+c,y=e.lineHeight*(a+1);let A=k;a+1<t.length&&y<k&&(A=(k+y)/2);const S=(A-_)/p;for(let w=0;w<d.length;w++){let I=0;typeof f[w]=="number"?I=f[w]:I=w/d.length;let x=Math.min(1,Math.max(0,_/p+I*S));x=Number(x.toFixed(5)),h.addColorStop(x,d[w])}}}else{h=this.context.createLinearGradient(r,p/2,l+r,p/2);const c=d.length+1;let a=1;for(let g=0;g<d.length;g++){let u;typeof f[g]=="number"?u=f[g]:u=a/c,h.addColorStop(u,d[g]),a++}}return h}destroy(i){typeof i=="boolean"&&(i={children:i}),i=Object.assign({},H,i),super.destroy(i),this._ownCanvas&&(this.canvas.height=this.canvas.width=0),this.context=null,this.canvas=null,this._style=null}get width(){return this.updateText(!0),Math.abs(this.scale.x)*this._texture.orig.width}set width(i){this.updateText(!0);const t=m.utils.sign(this.scale.x)||1;this.scale.x=t*i/this._texture.orig.width,this._width=i}get height(){return this.updateText(!0),Math.abs(this.scale.y)*this._texture.orig.height}set height(i){this.updateText(!0);const t=m.utils.sign(this.scale.y)||1;this.scale.y=t*i/this._texture.orig.height,this._height=i}get style(){return this._style}set style(i){i=i||{},i instanceof D?this._style=i:this._style=new D(i),this.localStyleID=-1,this.dirty=!0}get text(){return this._text}set text(i){i=String(i??""),this._text!==i&&(this._text=i,this.dirty=!0)}get resolution(){return this._resolution}set resolution(i){this._autoResolution=!1,this._resolution!==i&&(this._resolution=i,this.dirty=!0)}};let T=E;T.experimentalLetterSpacing=!1,exports.TEXT_GRADIENT=L,exports.Text=T,exports.TextMetrics=n,exports.TextStyle=D;
+ */Object.defineProperty(exports,"__esModule",{value:!0});var F=require("@pixi/sprite"),m=require("@pixi/core"),L=(i=>(i[i.LINEAR_VERTICAL=0]="LINEAR_VERTICAL",i[i.LINEAR_HORIZONTAL=1]="LINEAR_HORIZONTAL",i))(L||{});const b={align:"left",breakWords:!1,dropShadow:!1,dropShadowAlpha:1,dropShadowAngle:Math.PI/6,dropShadowBlur:0,dropShadowColor:"black",dropShadowDistance:5,fill:"black",fillGradientType:L.LINEAR_VERTICAL,fillGradientStops:[],fontFamily:"Arial",fontSize:26,fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",letterSpacing:0,lineHeight:0,lineJoin:"miter",miterLimit:10,padding:0,stroke:"black",strokeThickness:0,textBaseline:"alphabetic",trim:!1,whiteSpace:"pre",wordWrap:!1,wordWrapWidth:100,leading:0},G=["serif","sans-serif","monospace","cursive","fantasy","system-ui"];class D{constructor(t){this.styleID=0,this.reset(),B(this,t,t)}clone(){const t={};return B(t,this,b),new D(t)}reset(){B(this,b,b)}get align(){return this._align}set align(t){this._align!==t&&(this._align=t,this.styleID++)}get breakWords(){return this._breakWords}set breakWords(t){this._breakWords!==t&&(this._breakWords=t,this.styleID++)}get dropShadow(){return this._dropShadow}set dropShadow(t){this._dropShadow!==t&&(this._dropShadow=t,this.styleID++)}get dropShadowAlpha(){return this._dropShadowAlpha}set dropShadowAlpha(t){this._dropShadowAlpha!==t&&(this._dropShadowAlpha=t,this.styleID++)}get dropShadowAngle(){return this._dropShadowAngle}set dropShadowAngle(t){this._dropShadowAngle!==t&&(this._dropShadowAngle=t,this.styleID++)}get dropShadowBlur(){return this._dropShadowBlur}set dropShadowBlur(t){this._dropShadowBlur!==t&&(this._dropShadowBlur=t,this.styleID++)}get dropShadowColor(){return this._dropShadowColor}set dropShadowColor(t){const e=C(t);this._dropShadowColor!==e&&(this._dropShadowColor=e,this.styleID++)}get dropShadowDistance(){return this._dropShadowDistance}set dropShadowDistance(t){this._dropShadowDistance!==t&&(this._dropShadowDistance=t,this.styleID++)}get fill(){return this._fill}set fill(t){const e=C(t);this._fill!==e&&(this._fill=e,this.styleID++)}get fillGradientType(){return this._fillGradientType}set fillGradientType(t){this._fillGradientType!==t&&(this._fillGradientType=t,this.styleID++)}get fillGradientStops(){return this._fillGradientStops}set fillGradientStops(t){H(this._fillGradientStops,t)||(this._fillGradientStops=t,this.styleID++)}get fontFamily(){return this._fontFamily}set fontFamily(t){this.fontFamily!==t&&(this._fontFamily=t,this.styleID++)}get fontSize(){return this._fontSize}set fontSize(t){this._fontSize!==t&&(this._fontSize=t,this.styleID++)}get fontStyle(){return this._fontStyle}set fontStyle(t){this._fontStyle!==t&&(this._fontStyle=t,this.styleID++)}get fontVariant(){return this._fontVariant}set fontVariant(t){this._fontVariant!==t&&(this._fontVariant=t,this.styleID++)}get fontWeight(){return this._fontWeight}set fontWeight(t){this._fontWeight!==t&&(this._fontWeight=t,this.styleID++)}get letterSpacing(){return this._letterSpacing}set letterSpacing(t){this._letterSpacing!==t&&(this._letterSpacing=t,this.styleID++)}get lineHeight(){return this._lineHeight}set lineHeight(t){this._lineHeight!==t&&(this._lineHeight=t,this.styleID++)}get leading(){return this._leading}set leading(t){this._leading!==t&&(this._leading=t,this.styleID++)}get lineJoin(){return this._lineJoin}set lineJoin(t){this._lineJoin!==t&&(this._lineJoin=t,this.styleID++)}get miterLimit(){return this._miterLimit}set miterLimit(t){this._miterLimit!==t&&(this._miterLimit=t,this.styleID++)}get padding(){return this._padding}set padding(t){this._padding!==t&&(this._padding=t,this.styleID++)}get stroke(){return this._stroke}set stroke(t){const e=C(t);this._stroke!==e&&(this._stroke=e,this.styleID++)}get strokeThickness(){return this._strokeThickness}set strokeThickness(t){this._strokeThickness!==t&&(this._strokeThickness=t,this.styleID++)}get textBaseline(){return this._textBaseline}set textBaseline(t){this._textBaseline!==t&&(this._textBaseline=t,this.styleID++)}get trim(){return this._trim}set trim(t){this._trim!==t&&(this._trim=t,this.styleID++)}get whiteSpace(){return this._whiteSpace}set whiteSpace(t){this._whiteSpace!==t&&(this._whiteSpace=t,this.styleID++)}get wordWrap(){return this._wordWrap}set wordWrap(t){this._wordWrap!==t&&(this._wordWrap=t,this.styleID++)}get wordWrapWidth(){return this._wordWrapWidth}set wordWrapWidth(t){this._wordWrapWidth!==t&&(this._wordWrapWidth=t,this.styleID++)}toFontString(){const t=typeof this.fontSize=="number"?`${this.fontSize}px`:this.fontSize;let e=this.fontFamily;Array.isArray(this.fontFamily)||(e=this.fontFamily.split(","));for(let s=e.length-1;s>=0;s--){let h=e[s].trim();!/([\"\'])[^\'\"]+\1/.test(h)&&!G.includes(h)&&(h=`"${h}"`),e[s]=h}return`${this.fontStyle} ${this.fontVariant} ${this.fontWeight} ${t} ${e.join(",")}`}}function E(i){return typeof i=="number"?m.utils.hex2string(i):(typeof i=="string"&&i.startsWith("0x")&&(i=i.replace("0x","#")),i)}function C(i){if(Array.isArray(i)){for(let t=0;t<i.length;++t)i[t]=E(i[t]);return i}else return E(i)}function H(i,t){if(!Array.isArray(i)||!Array.isArray(t)||i.length!==t.length)return!1;for(let e=0;e<i.length;++e)if(i[e]!==t[e])return!1;return!0}function B(i,t,e){for(const s in e)Array.isArray(t[s])?i[s]=t[s].slice():i[s]=t[s]}const W={willReadFrequently:!0};class n{constructor(t,e,s,h,o,r,l,p,d){this.text=t,this.style=e,this.width=s,this.height=h,this.lines=o,this.lineWidths=r,this.lineHeight=l,this.maxLineWidth=p,this.fontProperties=d}static measureText(t,e,s,h=n._canvas){s=s??e.wordWrap;const o=e.toFontString(),r=n.measureFont(o);r.fontSize===0&&(r.fontSize=e.fontSize,r.ascent=e.fontSize);const l=h.getContext("2d",W);l.font=o;const p=(s?n.wordWrap(t,e,h):t).split(/(?:\r\n|\r|\n)/),d=new Array(p.length);let f=0;for(let u=0;u<p.length;u++){const _=l.measureText(p[u]).width+(p[u].length-1)*e.letterSpacing;d[u]=_,f=Math.max(f,_)}let c=f+e.strokeThickness;e.dropShadow&&(c+=e.dropShadowDistance);const a=e.lineHeight||r.fontSize+e.strokeThickness;let g=Math.max(a,r.fontSize+e.strokeThickness)+(p.length-1)*(a+e.leading);return e.dropShadow&&(g+=e.dropShadowDistance),new n(t,e,c,g,p,d,a+e.leading,f,r)}static wordWrap(t,e,s=n._canvas){const h=s.getContext("2d",W);let o=0,r="",l="";const p=Object.create(null),{letterSpacing:d,whiteSpace:f}=e,c=n.collapseSpaces(f),a=n.collapseNewlines(f);let g=!c;const u=e.wordWrapWidth+d,_=n.tokenize(t);for(let k=0;k<_.length;k++){let y=_[k];if(n.isNewline(y)){if(!a){l+=n.addLine(r),g=!c,r="",o=0;continue}y=" "}if(c){const S=n.isBreakingSpace(y),w=n.isBreakingSpace(r[r.length-1]);if(S&&w)continue}const A=n.getFromCache(y,d,p,h);if(A>u)if(r!==""&&(l+=n.addLine(r),r="",o=0),n.canBreakWords(y,e.breakWords)){const S=n.wordWrapSplit(y);for(let w=0;w<S.length;w++){let I=S[w],x=1;for(;S[w+x];){const v=S[w+x],z=I[I.length-1];if(!n.canBreakChars(z,v,y,w,e.breakWords))I+=v;else break;x++}w+=I.length-1;const R=n.getFromCache(I,d,p,h);R+o>u&&(l+=n.addLine(r),g=!1,r="",o=0),r+=I,o+=R}}else{r.length>0&&(l+=n.addLine(r),r="",o=0);const S=k===_.length-1;l+=n.addLine(y,!S),g=!1,r="",o=0}else A+o>u&&(g=!1,l+=n.addLine(r),r="",o=0),(r.length>0||!n.isBreakingSpace(y)||g)&&(r+=y,o+=A)}return l+=n.addLine(r,!1),l}static addLine(t,e=!0){return t=n.trimRight(t),t=e?`${t}
+`:t,t}static getFromCache(t,e,s,h){let o=s[t];if(typeof o!="number"){const r=t.length*e;o=h.measureText(t).width+r,s[t]=o}return o}static collapseSpaces(t){return t==="normal"||t==="pre-line"}static collapseNewlines(t){return t==="normal"}static trimRight(t){if(typeof t!="string")return"";for(let e=t.length-1;e>=0;e--){const s=t[e];if(!n.isBreakingSpace(s))break;t=t.slice(0,-1)}return t}static isNewline(t){return typeof t!="string"?!1:n._newlines.includes(t.charCodeAt(0))}static isBreakingSpace(t,e){return typeof t!="string"?!1:n._breakingSpaces.includes(t.charCodeAt(0))}static tokenize(t){const e=[];let s="";if(typeof t!="string")return e;for(let h=0;h<t.length;h++){const o=t[h],r=t[h+1];if(n.isBreakingSpace(o,r)||n.isNewline(o)){s!==""&&(e.push(s),s=""),e.push(o);continue}s+=o}return s!==""&&e.push(s),e}static canBreakWords(t,e){return e}static canBreakChars(t,e,s,h,o){return!0}static wordWrapSplit(t){return t.split("")}static measureFont(t){if(n._fonts[t])return n._fonts[t];const e={ascent:0,descent:0,fontSize:0},s=n._canvas,h=n._context;h.font=t;const o=n.METRICS_STRING+n.BASELINE_SYMBOL,r=Math.ceil(h.measureText(o).width);let l=Math.ceil(h.measureText(n.BASELINE_SYMBOL).width);const p=Math.ceil(n.HEIGHT_MULTIPLIER*l);l=l*n.BASELINE_MULTIPLIER|0,s.width=r,s.height=p,h.fillStyle="#f00",h.fillRect(0,0,r,p),h.font=t,h.textBaseline="alphabetic",h.fillStyle="#000",h.fillText(o,0,l);const d=h.getImageData(0,0,r,p).data,f=d.length,c=r*4;let a=0,g=0,u=!1;for(a=0;a<l;++a){for(let _=0;_<c;_+=4)if(d[g+_]!==255){u=!0;break}if(!u)g+=c;else break}for(e.ascent=l-a,g=f-c,u=!1,a=p;a>l;--a){for(let _=0;_<c;_+=4)if(d[g+_]!==255){u=!0;break}if(!u)g-=c;else break}return e.descent=a-l,e.fontSize=e.ascent+e.descent,n._fonts[t]=e,e}static clearMetrics(t=""){t?delete n._fonts[t]:n._fonts={}}static get _canvas(){if(!n.__canvas){let t;try{const e=new OffscreenCanvas(0,0);if(e.getContext("2d",W)?.measureText)return n.__canvas=e,e;t=m.settings.ADAPTER.createCanvas()}catch{t=m.settings.ADAPTER.createCanvas()}t.width=t.height=10,n.__canvas=t}return n.__canvas}static get _context(){return n.__context||(n.__context=n._canvas.getContext("2d",W)),n.__context}}n._fonts={},n.METRICS_STRING="|\xC9q\xC5",n.BASELINE_SYMBOL="M",n.BASELINE_MULTIPLIER=1.4,n.HEIGHT_MULTIPLIER=2,n._newlines=[10,13],n._breakingSpaces=[9,32,8192,8193,8194,8195,8196,8197,8198,8200,8201,8202,8287,12288];const O={texture:!0,children:!1,baseTexture:!0},T=class extends F.Sprite{constructor(i,t,e){let s=!1;e||(e=m.settings.ADAPTER.createCanvas(),s=!0),e.width=3,e.height=3;const h=m.Texture.from(e);h.orig=new m.Rectangle,h.trim=new m.Rectangle,super(h),this._ownCanvas=s,this.canvas=e,this.context=e.getContext("2d",{willReadFrequently:!0}),this._resolution=m.settings.RESOLUTION,this._autoResolution=!0,this._text=null,this._style=null,this._styleListener=null,this._font="",this.text=i,this.style=t,this.localStyleID=-1}updateText(i){const t=this._style;if(this.localStyleID!==t.styleID&&(this.dirty=!0,this.localStyleID=t.styleID),!this.dirty&&i)return;this._font=this._style.toFontString();const e=this.context,s=n.measureText(this._text||" ",this._style,this._style.wordWrap,this.canvas),h=s.width,o=s.height,r=s.lines,l=s.lineHeight,p=s.lineWidths,d=s.maxLineWidth,f=s.fontProperties;this.canvas.width=Math.ceil(Math.ceil(Math.max(1,h)+t.padding*2)*this._resolution),this.canvas.height=Math.ceil(Math.ceil(Math.max(1,o)+t.padding*2)*this._resolution),e.scale(this._resolution,this._resolution),e.clearRect(0,0,this.canvas.width,this.canvas.height),e.font=this._font,e.lineWidth=t.strokeThickness,e.textBaseline=t.textBaseline,e.lineJoin=t.lineJoin,e.miterLimit=t.miterLimit;let c,a;const g=t.dropShadow?2:1;for(let u=0;u<g;++u){const _=t.dropShadow&&u===0,k=_?Math.ceil(Math.max(1,o)+t.padding*2):0,y=k*this._resolution;if(_){e.fillStyle="black",e.strokeStyle="black";const S=t.dropShadowColor,w=m.utils.hex2rgb(typeof S=="number"?S:m.utils.string2hex(S)),I=t.dropShadowBlur*this._resolution,x=t.dropShadowDistance*this._resolution;e.shadowColor=`rgba(${w[0]*255},${w[1]*255},${w[2]*255},${t.dropShadowAlpha})`,e.shadowBlur=I,e.shadowOffsetX=Math.cos(t.dropShadowAngle)*x,e.shadowOffsetY=Math.sin(t.dropShadowAngle)*x+y}else e.fillStyle=this._generateFillStyle(t,r,s),e.strokeStyle=t.stroke,e.shadowColor="black",e.shadowBlur=0,e.shadowOffsetX=0,e.shadowOffsetY=0;let A=(l-f.fontSize)/2;l-f.fontSize<0&&(A=0);for(let S=0;S<r.length;S++)c=t.strokeThickness/2,a=t.strokeThickness/2+S*l+f.ascent+A,t.align==="right"?c+=d-p[S]:t.align==="center"&&(c+=(d-p[S])/2),t.stroke&&t.strokeThickness&&this.drawLetterSpacing(r[S],c+t.padding,a+t.padding-k,!0),t.fill&&this.drawLetterSpacing(r[S],c+t.padding,a+t.padding-k)}this.updateTexture()}drawLetterSpacing(i,t,e,s=!1){const h=this._style.letterSpacing,o=T.experimentalLetterSpacing&&("letterSpacing"in CanvasRenderingContext2D.prototype||"textLetterSpacing"in CanvasRenderingContext2D.prototype);if(h===0||o){o&&(this.context.letterSpacing=h,this.context.textLetterSpacing=h),s?this.context.strokeText(i,t,e):this.context.fillText(i,t,e);return}let r=t;const l=Array.from?Array.from(i):i.split("");let p=this.context.measureText(i).width,d=0;for(let f=0;f<l.length;++f){const c=l[f];s?this.context.strokeText(c,r,e):this.context.fillText(c,r,e);let a="";for(let g=f+1;g<l.length;++g)a+=l[g];d=this.context.measureText(a).width,r+=p-d+h,p=d}}updateTexture(){const i=this.canvas;if(this._style.trim){const o=m.utils.trimCanvas(i);o.data&&(i.width=o.width,i.height=o.height,this.context.putImageData(o.data,0,0))}const t=this._texture,e=this._style,s=e.trim?0:e.padding,h=t.baseTexture;t.trim.width=t._frame.width=i.width/this._resolution,t.trim.height=t._frame.height=i.height/this._resolution,t.trim.x=-s,t.trim.y=-s,t.orig.width=t._frame.width-s*2,t.orig.height=t._frame.height-s*2,this._onTextureUpdate(),h.setRealSize(i.width,i.height,this._resolution),t.updateUvs(),this.dirty=!1}_render(i){this._autoResolution&&this._resolution!==i.resolution&&(this._resolution=i.resolution,this.dirty=!0),this.updateText(!0),super._render(i)}updateTransform(){this.updateText(!0),super.updateTransform()}getBounds(i,t){return this.updateText(!0),this._textureID===-1&&(i=!1),super.getBounds(i,t)}getLocalBounds(i){return this.updateText(!0),super.getLocalBounds.call(this,i)}_calculateBounds(){this.calculateVertices(),this._bounds.addQuad(this.vertexData)}_generateFillStyle(i,t,e){const s=i.fill;if(Array.isArray(s)){if(s.length===1)return s[0]}else return s;let h;const o=i.dropShadow?i.dropShadowDistance:0,r=i.padding||0,l=this.canvas.width/this._resolution-o-r*2,p=this.canvas.height/this._resolution-o-r*2,d=s.slice(),f=i.fillGradientStops.slice();if(!f.length){const c=d.length+1;for(let a=1;a<c;++a)f.push(a/c)}if(d.unshift(s[0]),f.unshift(0),d.push(s[s.length-1]),f.push(1),i.fillGradientType===L.LINEAR_VERTICAL){h=this.context.createLinearGradient(l/2,r,l/2,p+r);const c=e.fontProperties.fontSize+i.strokeThickness;for(let a=0;a<t.length;a++){const g=e.lineHeight*(a-1)+c,u=e.lineHeight*a;let _=u;a>0&&g>u&&(_=(u+g)/2);const k=u+c,y=e.lineHeight*(a+1);let A=k;a+1<t.length&&y<k&&(A=(k+y)/2);const S=(A-_)/p;for(let w=0;w<d.length;w++){let I=0;typeof f[w]=="number"?I=f[w]:I=w/d.length;let x=Math.min(1,Math.max(0,_/p+I*S));x=Number(x.toFixed(5)),h.addColorStop(x,d[w])}}}else{h=this.context.createLinearGradient(r,p/2,l+r,p/2);const c=d.length+1;let a=1;for(let g=0;g<d.length;g++){let u;typeof f[g]=="number"?u=f[g]:u=a/c,h.addColorStop(u,d[g]),a++}}return h}destroy(i){typeof i=="boolean"&&(i={children:i}),i=Object.assign({},O,i),super.destroy(i),this._ownCanvas&&(this.canvas.height=this.canvas.width=0),this.context=null,this.canvas=null,this._style=null}get width(){return this.updateText(!0),Math.abs(this.scale.x)*this._texture.orig.width}set width(i){this.updateText(!0);const t=m.utils.sign(this.scale.x)||1;this.scale.x=t*i/this._texture.orig.width,this._width=i}get height(){return this.updateText(!0),Math.abs(this.scale.y)*this._texture.orig.height}set height(i){this.updateText(!0);const t=m.utils.sign(this.scale.y)||1;this.scale.y=t*i/this._texture.orig.height,this._height=i}get style(){return this._style}set style(i){i=i||{},i instanceof D?this._style=i:this._style=new D(i),this.localStyleID=-1,this.dirty=!0}get text(){return this._text}set text(i){i=String(i??""),this._text!==i&&(this._text=i,this.dirty=!0)}get resolution(){return this._resolution}set resolution(i){this._autoResolution=!1,this._resolution!==i&&(this._resolution=i,this.dirty=!0)}};let N=T;N.experimentalLetterSpacing=!1,exports.TEXT_GRADIENT=L,exports.Text=N,exports.TextMetrics=n,exports.TextStyle=D;
 //# sourceMappingURL=text.min.js.map

index.d.ts

@@ -71,6 +71,6 @@ import type { ICanvas } from '@pixi/settings';
  * const text = new Text('This is a PixiJS text', {
- *   fontFamily : 'Arial',
- *   fontSize: 24,
- *   fill : 0xff1010,
- *   align : 'center',
+ *     fontFamily: 'Arial',
+ *     fontSize: 24,
+ *     fill: 0xff1010,
+ *     align: 'center',
  * });
@@ -235,9 +235,9 @@ * @memberof PIXI
  * @example
- * import { TextStyle, TextMetrics } from 'pixi.js';
+ * import { TextMetrics, TextStyle } from 'pixi.js';
  *
  * const style = new TextStyle({
- *   fontFamily: 'Arial',
- *   fontSize: 24,
- *   fill: 0xff1010,
- *   align: 'center',
+ *     fontFamily: 'Arial',
+ *     fontSize: 24,
+ *     fill: 0xff1010,
+ *     align: 'center',
  * });
@@ -244,0 +244,0 @@ * const textMetrics = TextMetrics.measureText('Your text', style);

package.json

 {
   "name": "@pixi/text",
-  "version": "7.0.0-beta.3",
+  "version": "7.0.0-beta.4",
   "main": "dist/cjs/text.js",
@@ -42,3 +42,3 @@ "module": "dist/esm/text.mjs",
   ],
-  "gitHead": "8055ae1c16d4c0f8dabda86cafd8e68c356450e8"
+  "gitHead": "a4581e4a49d23afc98fcf726765c9d54e51c3c39"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

597647

increased by0.46%

Lines of code

2972

increased by0.34%

No dependency changes