modern-text 0.0.7 → 0.0.9

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class w{static get defaultStyle(){return{width:"auto",height:"auto",color:"#000000",fontSize:14,fontWeight:"normal",fontFamily:"sans-serif",fontStyle:"normal",fontKerning:"normal",textWrap:"wrap",textAlign:"start",verticalAlign:"baseline",textDecoration:null,textStrokeWidth:0,textStrokeColor:"#000000",direction:"inherit",lineHeight:1,letterSpacing:0,shadowColor:"#000000",shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0}}constructor(o={}){const{view:t=document.createElement("canvas"),pixelRatio:l=window.devicePixelRatio||1,content:e="",style:x}=o;this.view=t,this.context=t.getContext("2d"),this.pixelRatio=l,this.content=e,this.style={...w.defaultStyle,...x},this.update()}measure(){let{width:o}=this.style;o==="auto"&&(o=0);let t=this._createParagraphs(this.content);t=this._createWrapedParagraphs(t,o);const l=this.context;let e=0;for(let h=t.length,s=0;s<h;s++){const i=t[s];i.contentBox.top=e;let c=0,d=null;for(const n of i.fragments){this._setContextStyle({...n.style,textAlign:"left",verticalAlign:"baseline"});const r=l.measureText(n.content);n.inlineBox.left=c,n.inlineBox.top=e,n.inlineBox.width=r.width,n.inlineBox.height=n.style.fontSize*n.style.lineHeight,n.contentBox.left=n.inlineBox.left,n.contentBox.width=n.inlineBox.width,n.contentBox.height=n.style.fontSize,n.contentBox.top=n.inlineBox.top+(n.inlineBox.height-n.contentBox.height)/2,n.textBox.width=r.actualBoundingBoxLeft+r.actualBoundingBoxRight,n.textBox.height=r.actualBoundingBoxAscent+r.actualBoundingBoxDescent,n.textBox.left=n.contentBox.left+(n.contentBox.width-n.textBox.width)/2,n.textBox.top=n.contentBox.top+(n.contentBox.height-n.textBox.height)/2,n.baseline=n.textBox.top+r.actualBoundingBoxAscent,c+=n.contentBox.width+n.style.letterSpacing,i.contentBox.height<n.contentBox.height&&(d=n),i.contentBox.left=Math.min(i.contentBox.left,n.contentBox.left),i.contentBox.top=Math.min(i.contentBox.top,n.contentBox.top),i.contentBox.height=Math.max(i.contentBox.height,n.contentBox.height),i.lineBox.height=Math.max(i.lineBox.height,n.inlineBox.height)}const B=i.fragments[i.fragments.length-1];i.contentBox.width=Math.max(i.contentBox.width,B?B.contentBox.left+Math.max(B.contentBox.width,B.textBox.width):0),i.lineBox.left=0,i.lineBox.top=e,i.lineBox.width=Math.max(o,i.contentBox.width),this._setContextStyle({...(d??i).style,textAlign:"left",verticalAlign:"baseline"});const f=l.measureText("X");i.baseline=i.lineBox.top+(i.lineBox.height-f.actualBoundingBoxAscent+f.actualBoundingBoxDescent)/2+f.actualBoundingBoxAscent,e+=i.lineBox.height}for(let h=t.length,s=0;s<h;s++){const i=t[s];i.fragments.forEach(c=>{const d=c.inlineBox.left,B=c.inlineBox.top,f=i.lineBox.height-c.inlineBox.height;switch(c.style.textAlign){case"end":case"right":c.inlineBox.left+=i.lineBox.width-i.contentBox.width;break;case"center":c.inlineBox.left+=(i.lineBox.width-i.contentBox.width)/2;break;case"start":case"left":default:c.inlineBox.left+=i.lineBox.left;break}switch(c.style.verticalAlign){case"top":c.inlineBox.top=i.lineBox.top;break;case"middle":c.inlineBox.top=i.lineBox.top+f/2;break;case"bottom":c.inlineBox.top=i.lineBox.top+f;break;case"sub":case"text-top":case"text-bottom":break;case"baseline":default:c.inlineBox.height<i.lineBox.height&&(c.inlineBox.top+=i.baseline-c.baseline);break}const n=c.inlineBox.left-d,r=c.inlineBox.top-B;c.contentBox.left+=n,c.contentBox.top+=r,c.textBox.left+=n,c.textBox.top+=r})}const x=t.reduce((h,s)=>(h.left=Math.min(h.left,s.contentBox.left),h.top=Math.min(h.top,s.contentBox.top),h.width=Math.max(h.width,s.contentBox.width),h.height+=s.contentBox.height,h),{left:0,top:0,width:0,height:0});return{lineBox:t.reduce((h,s)=>(h.left=Math.min(h.left,s.lineBox.left),h.top=Math.min(h.top,s.lineBox.top),h.width=Math.max(h.width,s.lineBox.width),h.height+=s.lineBox.height,h),{left:0,top:0,width:0,height:0}),contentBox:x,paragraphs:t}}_createParagraphs(o){const t=(x={})=>{const{width:a,height:h,...s}=this.style;return{contentBox:{left:0,top:0,width:0,height:0},lineBox:{left:0,top:0,width:0,height:0},baseline:0,fragments:[],...x,style:{...s,...x.style}}},l=(x={})=>{const a=[],{width:h,height:s,...i}=this.style;return a.push({contentBox:{left:0,top:0,width:0,height:0},inlineBox:{left:0,top:0,width:0,height:0},textBox:{left:0,top:0,width:0,height:0},baseline:0,...x,style:{...i,...x.style},content:x.content??""}),a},e=[];if(typeof o=="string")e.push(t({fragments:l({content:o})}));else{o=Array.isArray(o)?o:[o];for(const x of o)if("fragments"in x){const{fragments:a,...h}=x,s=t({style:h});for(const i of a){const{content:c,...d}=i;s.fragments.push(...l({content:c,style:{...h,...d}}))}e.push(s)}else if("content"in x){const{content:a,...h}=x,s=t({style:h});s.fragments.push(...l({content:a,style:h})),e.push(s)}}return e}_createWrapedParagraphs(o,t){const l=s=>JSON.parse(JSON.stringify(s)),e=[],x=o.slice();let a,h;for(;a=x.shift();){const s=a.fragments.slice();let i=0;const c=[];for(;h=s.shift();){const d=h.style;this._setContextStyle(d);let B="",f=!1;for(const n of h.content){const r=this.context.measureText(n).width,u=/^[\r\n]$/.test(n);if(u||d.textWrap==="wrap"&&t&&i+r>t){let g=u?B.length+1:B.length;!i&&!g&&(B+=n,g++),B.length&&c.push({...l(h),content:B}),c.length&&(e.push({...l(a),fragments:c.slice()}),c.length=0);const p=h.content.substring(g);(p.length||s.length)&&x.unshift({...l(a),fragments:(p.length?[{...l(h),content:p}]:[]).concat(s.slice())}),s.length=0,f=!0;break}else i+=r;B+=n}f||c.push(l(h))}c.length&&e.push({...l(a),fragments:c})}return e}_draw(o){const t=this.context;this.style.backgroundColor&&(t.fillStyle=this.style.backgroundColor,t.fillRect(0,0,t.canvas.width,t.canvas.height)),o.forEach(l=>{l.style.backgroundColor&&(t.fillStyle=l.style.backgroundColor,t.fillRect(l.lineBox.left,l.lineBox.top,l.lineBox.width,l.lineBox.height))}),o.forEach(l=>{l.fragments.forEach(e=>{switch(e.style.backgroundColor&&(t.fillStyle=e.style.backgroundColor,t.fillRect(e.inlineBox.left,e.inlineBox.top,e.inlineBox.width,e.inlineBox.height)),this._setContextStyle({...e.style,textAlign:"left",verticalAlign:"top"}),e.style.textStrokeWidth&&t.strokeText(e.content,e.contentBox.left,e.contentBox.top),t.fillText(e.content,e.contentBox.left,e.contentBox.top),e.style.textDecoration){case"underline":t.beginPath(),t.moveTo(e.contentBox.left,e.contentBox.top+e.contentBox.height-2),t.lineTo(e.contentBox.left+e.contentBox.width,e.contentBox.top+e.contentBox.height-2),t.stroke();break;case"line-through":t.beginPath(),t.moveTo(e.contentBox.left,e.contentBox.top+e.contentBox.height/2),t.lineTo(e.contentBox.left+e.contentBox.width,e.contentBox.top+e.contentBox.height/2),t.stroke();break}})})}_resizeView(o,t){const l=this.view;l.style.width=`${o}px`,l.style.height=`${t}px`,l.dataset.width=String(o),l.dataset.height=String(t),l.width=Math.max(1,Math.floor(o*this.pixelRatio)),l.height=Math.max(1,Math.floor(t*this.pixelRatio))}_setContextStyle(o){const t=this.context;switch(t.shadowColor=o.shadowColor,t.shadowOffsetX=o.shadowOffsetX,t.shadowOffsetY=o.shadowOffsetY,t.shadowBlur=o.shadowBlur,t.strokeStyle=o.textStrokeColor,t.lineWidth=o.textStrokeWidth,t.fillStyle=o.color,t.direction=o.direction,t.textAlign=o.textAlign,o.verticalAlign){case"baseline":t.textBaseline="alphabetic";break;case"top":case"middle":case"bottom":t.textBaseline=o.verticalAlign;break}t.font=[o.fontStyle,o.fontWeight,`${o.fontSize}px`,o.fontFamily].join(" "),t.fontKerning=o.fontKerning,t.letterSpacing=`${o.letterSpacing}px`}update(){const o=this.context;let{width:t,height:l}=this.style;t==="auto"&&(t=0),l==="auto"&&(l=0);const{lineBox:e,paragraphs:x}=this.measure();t||(t=e.width),l=Math.max(l,e.height),this._resizeView(t,l);const a=this.pixelRatio;o.scale(a,a),o.clearRect(0,0,o.canvas.width,o.canvas.height),this._draw(x)}}exports.Text=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class w{static get defaultStyle(){return{width:"auto",height:"auto",color:"#000000",fontSize:14,fontWeight:"normal",fontFamily:"sans-serif",fontStyle:"normal",fontKerning:"normal",textWrap:"wrap",textAlign:"start",verticalAlign:"baseline",textDecoration:null,textStrokeWidth:0,textStrokeColor:"#000000",direction:"inherit",lineHeight:1,letterSpacing:0,shadowColor:"#000000",shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0}}constructor(n={}){const{view:t=document.createElement("canvas"),pixelRatio:l=window.devicePixelRatio||1,content:e="",style:a}=n;this.view=t,this.context=t.getContext("2d"),this.pixelRatio=l,this.content=e,this.style={...w.defaultStyle,...a},this.update()}measure(){let{width:n}=this.style;n==="auto"&&(n=0);let t=this._createParagraphs(this.content);t=this._createWrapedParagraphs(t,n);const l=this.context;let e=0;for(let h=t.length,c=0;c<h;c++){const i=t[c];i.contentBox.top=e;let s=0,d=null;for(const o of i.fragments){this._setContextStyle({...o.style,textAlign:"center",verticalAlign:"baseline"});const B=l.measureText(o.content),p=B.width,f=o.style.fontSize;o.inlineBox.left=s,o.inlineBox.top=e,o.inlineBox.width=p,o.inlineBox.height=f*o.style.lineHeight,o.contentBox.left=o.inlineBox.left,o.contentBox.width=p,o.contentBox.height=f,o.contentBox.top=o.inlineBox.top+(o.inlineBox.height-o.contentBox.height)/2,o.glyphBox.width=B.actualBoundingBoxLeft+B.actualBoundingBoxRight,o.glyphBox.height=B.actualBoundingBoxAscent+B.actualBoundingBoxDescent,o.glyphBox.left=o.contentBox.left+(o.contentBox.width-o.glyphBox.width)/2,o.glyphBox.top=o.contentBox.top+(o.contentBox.height-o.glyphBox.height)/2,o.centerX=o.glyphBox.left+B.actualBoundingBoxLeft,o.baseline=o.glyphBox.top+B.actualBoundingBoxAscent,s+=o.contentBox.width+o.style.letterSpacing,i.contentBox.height<o.contentBox.height&&(d=o),i.contentBox.left=Math.min(i.contentBox.left,o.contentBox.left),i.contentBox.top=Math.min(i.contentBox.top,o.contentBox.top),i.contentBox.height=Math.max(i.contentBox.height,o.contentBox.height),i.lineBox.height=Math.max(i.lineBox.height,o.inlineBox.height)}const r=i.fragments[i.fragments.length-1];i.contentBox.width=Math.max(i.contentBox.width,r?r.contentBox.left+Math.max(r.contentBox.width,r.glyphBox.width):0),i.lineBox.left=0,i.lineBox.top=e,i.lineBox.width=Math.max(n,i.contentBox.width),this._setContextStyle({...(d??i).style,textAlign:"left",verticalAlign:"baseline"});const g=l.measureText("X");i.baseline=i.lineBox.top+(i.lineBox.height-g.actualBoundingBoxAscent+g.actualBoundingBoxDescent)/2+g.actualBoundingBoxAscent,e+=i.lineBox.height}for(let h=t.length,c=0;c<h;c++){const i=t[c];i.fragments.forEach(s=>{const d=s.inlineBox.left,r=s.inlineBox.top,g=i.lineBox.height-s.inlineBox.height;switch(s.style.textAlign){case"end":case"right":s.inlineBox.left+=i.lineBox.width-i.contentBox.width;break;case"center":s.inlineBox.left+=(i.lineBox.width-i.contentBox.width)/2;break;case"start":case"left":default:s.inlineBox.left+=i.lineBox.left;break}switch(s.style.verticalAlign){case"top":s.inlineBox.top=i.lineBox.top;break;case"middle":s.inlineBox.top=i.lineBox.top+g/2;break;case"bottom":s.inlineBox.top=i.lineBox.top+g;break;case"sub":case"text-top":case"text-bottom":break;case"baseline":default:s.inlineBox.height<i.lineBox.height&&(s.inlineBox.top+=i.baseline-s.baseline);break}const o=s.inlineBox.left-d,B=s.inlineBox.top-r;s.contentBox.left+=o,s.contentBox.top+=B,s.glyphBox.left+=o,s.glyphBox.top+=B,s.baseline+=B,s.centerX+=o})}const a=t.reduce((h,c)=>(h.left=Math.min(h.left,c.contentBox.left),h.top=Math.min(h.top,c.contentBox.top),h.width=Math.max(h.width,c.contentBox.width),h.height+=c.contentBox.height,h),{left:0,top:0,width:0,height:0});return{contentBox:t.reduce((h,c)=>(h.left=Math.min(h.left,c.lineBox.left),h.top=Math.min(h.top,c.lineBox.top),h.width=Math.max(h.width,c.lineBox.width),h.height+=c.lineBox.height,h),{left:0,top:0,width:0,height:0}),actualContentBox:a,paragraphs:t}}_createParagraphs(n){const t=(a={})=>{const{width:x,height:h,...c}=this.style;return{contentBox:{left:0,top:0,width:0,height:0},lineBox:{left:0,top:0,width:0,height:0},baseline:0,fragments:[],...a,style:{...c,...a.style}}},l=(a={})=>{const x=[],{width:h,height:c,...i}=this.style;return x.push({contentBox:{left:0,top:0,width:0,height:0},inlineBox:{left:0,top:0,width:0,height:0},glyphBox:{left:0,top:0,width:0,height:0},centerX:0,baseline:0,...a,style:{...i,...a.style},content:a.content??""}),x},e=[];if(typeof n=="string")e.push(t({fragments:l({content:n})}));else{n=Array.isArray(n)?n:[n];for(const a of n)if("fragments"in a){const{fragments:x,...h}=a,c=t({style:h});for(const i of x){const{content:s,...d}=i;c.fragments.push(...l({content:s,style:{...h,...d}}))}e.push(c)}else if("content"in a){const{content:x,...h}=a,c=t({style:h});c.fragments.push(...l({content:x,style:h})),e.push(c)}}return e}_createWrapedParagraphs(n,t){const l=c=>JSON.parse(JSON.stringify(c)),e=[],a=n.slice();let x,h;for(;x=a.shift();){const c=x.fragments.slice();let i=0;const s=[];for(;h=c.shift();){const d=h.style;this._setContextStyle(d);let r="",g=!1;for(const o of h.content){const B=this.context.measureText(o).width,p=/^[\r\n]$/.test(o);if(p||d.textWrap==="wrap"&&t&&i+B>t){let f=p?r.length+1:r.length;!i&&!f&&(r+=o,f++),r.length&&s.push({...l(h),content:r}),s.length&&(e.push({...l(x),fragments:s.slice()}),s.length=0);const u=h.content.substring(f);(u.length||c.length)&&a.unshift({...l(x),fragments:(u.length?[{...l(h),content:u}]:[]).concat(c.slice())}),c.length=0,g=!0;break}else i+=B;r+=o}g||s.push(l(h))}s.length&&e.push({...l(x),fragments:s})}return e}_draw(n){const t=this.context;this.style.backgroundColor&&(t.fillStyle=this.style.backgroundColor,t.fillRect(0,0,t.canvas.width,t.canvas.height)),n.forEach(l=>{l.style.backgroundColor&&(t.fillStyle=l.style.backgroundColor,t.fillRect(l.lineBox.left,l.lineBox.top,l.lineBox.width,l.lineBox.height))}),n.forEach(l=>{l.fragments.forEach(e=>{switch(e.style.backgroundColor&&(t.fillStyle=e.style.backgroundColor,t.fillRect(e.inlineBox.left,e.inlineBox.top,e.inlineBox.width,e.inlineBox.height)),this._setContextStyle({...e.style,textAlign:"left",verticalAlign:"top"}),e.style.textStrokeWidth&&t.strokeText(e.content,e.contentBox.left,e.contentBox.top),t.fillText(e.content,e.contentBox.left,e.contentBox.top),e.style.textDecoration){case"underline":t.beginPath(),t.moveTo(e.contentBox.left,e.contentBox.top+e.contentBox.height-2),t.lineTo(e.contentBox.left+e.contentBox.width,e.contentBox.top+e.contentBox.height-2),t.stroke();break;case"line-through":t.beginPath(),t.moveTo(e.contentBox.left,e.contentBox.top+e.contentBox.height/2),t.lineTo(e.contentBox.left+e.contentBox.width,e.contentBox.top+e.contentBox.height/2),t.stroke();break}})})}_resizeView(n,t){const l=this.view;l.style.width=`${n}px`,l.style.height=`${t}px`,l.dataset.width=String(n),l.dataset.height=String(t),l.width=Math.max(1,Math.floor(n*this.pixelRatio)),l.height=Math.max(1,Math.floor(t*this.pixelRatio))}_setContextStyle(n){const t=this.context;switch(t.shadowColor=n.shadowColor,t.shadowOffsetX=n.shadowOffsetX,t.shadowOffsetY=n.shadowOffsetY,t.shadowBlur=n.shadowBlur,t.strokeStyle=n.textStrokeColor,t.lineWidth=n.textStrokeWidth,t.fillStyle=n.color,t.direction=n.direction,t.textAlign=n.textAlign,n.verticalAlign){case"baseline":t.textBaseline="alphabetic";break;case"top":case"middle":case"bottom":t.textBaseline=n.verticalAlign;break}t.font=[n.fontStyle,n.fontWeight,`${n.fontSize}px`,n.fontFamily].join(" "),t.fontKerning=n.fontKerning,t.letterSpacing=`${n.letterSpacing}px`}update(){const n=this.context;let{width:t,height:l}=this.style;t==="auto"&&(t=0),l==="auto"&&(l=0);const{contentBox:e,paragraphs:a}=this.measure();t||(t=e.width),l=Math.max(l,e.height),this._resizeView(t,l);const x=this.pixelRatio;n.scale(x,x),n.clearRect(0,0,n.canvas.width,n.canvas.height),this._draw(a)}}exports.Text=w;

package/dist/index.js

@@ -1 +1 @@
-(function(p,g){typeof exports=="object"&&typeof module<"u"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(p=typeof globalThis<"u"?globalThis:p||self,g(p.modernText={}))})(this,function(p){"use strict";class g{static get defaultStyle(){return{width:"auto",height:"auto",color:"#000000",fontSize:14,fontWeight:"normal",fontFamily:"sans-serif",fontStyle:"normal",fontKerning:"normal",textWrap:"wrap",textAlign:"start",verticalAlign:"baseline",textDecoration:null,textStrokeWidth:0,textStrokeColor:"#000000",direction:"inherit",lineHeight:1,letterSpacing:0,shadowColor:"#000000",shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0}}constructor(o={}){const{view:t=document.createElement("canvas"),pixelRatio:l=window.devicePixelRatio||1,content:e="",style:x}=o;this.view=t,this.context=t.getContext("2d"),this.pixelRatio=l,this.content=e,this.style={...g.defaultStyle,...x},this.update()}measure(){let{width:o}=this.style;o==="auto"&&(o=0);let t=this._createParagraphs(this.content);t=this._createWrapedParagraphs(t,o);const l=this.context;let e=0;for(let h=t.length,s=0;s<h;s++){const i=t[s];i.contentBox.top=e;let c=0,r=null;for(const n of i.fragments){this._setContextStyle({...n.style,textAlign:"left",verticalAlign:"baseline"});const d=l.measureText(n.content);n.inlineBox.left=c,n.inlineBox.top=e,n.inlineBox.width=d.width,n.inlineBox.height=n.style.fontSize*n.style.lineHeight,n.contentBox.left=n.inlineBox.left,n.contentBox.width=n.inlineBox.width,n.contentBox.height=n.style.fontSize,n.contentBox.top=n.inlineBox.top+(n.inlineBox.height-n.contentBox.height)/2,n.textBox.width=d.actualBoundingBoxLeft+d.actualBoundingBoxRight,n.textBox.height=d.actualBoundingBoxAscent+d.actualBoundingBoxDescent,n.textBox.left=n.contentBox.left+(n.contentBox.width-n.textBox.width)/2,n.textBox.top=n.contentBox.top+(n.contentBox.height-n.textBox.height)/2,n.baseline=n.textBox.top+d.actualBoundingBoxAscent,c+=n.contentBox.width+n.style.letterSpacing,i.contentBox.height<n.contentBox.height&&(r=n),i.contentBox.left=Math.min(i.contentBox.left,n.contentBox.left),i.contentBox.top=Math.min(i.contentBox.top,n.contentBox.top),i.contentBox.height=Math.max(i.contentBox.height,n.contentBox.height),i.lineBox.height=Math.max(i.lineBox.height,n.inlineBox.height)}const B=i.fragments[i.fragments.length-1];i.contentBox.width=Math.max(i.contentBox.width,B?B.contentBox.left+Math.max(B.contentBox.width,B.textBox.width):0),i.lineBox.left=0,i.lineBox.top=e,i.lineBox.width=Math.max(o,i.contentBox.width),this._setContextStyle({...(r??i).style,textAlign:"left",verticalAlign:"baseline"});const f=l.measureText("X");i.baseline=i.lineBox.top+(i.lineBox.height-f.actualBoundingBoxAscent+f.actualBoundingBoxDescent)/2+f.actualBoundingBoxAscent,e+=i.lineBox.height}for(let h=t.length,s=0;s<h;s++){const i=t[s];i.fragments.forEach(c=>{const r=c.inlineBox.left,B=c.inlineBox.top,f=i.lineBox.height-c.inlineBox.height;switch(c.style.textAlign){case"end":case"right":c.inlineBox.left+=i.lineBox.width-i.contentBox.width;break;case"center":c.inlineBox.left+=(i.lineBox.width-i.contentBox.width)/2;break;case"start":case"left":default:c.inlineBox.left+=i.lineBox.left;break}switch(c.style.verticalAlign){case"top":c.inlineBox.top=i.lineBox.top;break;case"middle":c.inlineBox.top=i.lineBox.top+f/2;break;case"bottom":c.inlineBox.top=i.lineBox.top+f;break;case"sub":case"text-top":case"text-bottom":break;case"baseline":default:c.inlineBox.height<i.lineBox.height&&(c.inlineBox.top+=i.baseline-c.baseline);break}const n=c.inlineBox.left-r,d=c.inlineBox.top-B;c.contentBox.left+=n,c.contentBox.top+=d,c.textBox.left+=n,c.textBox.top+=d})}const x=t.reduce((h,s)=>(h.left=Math.min(h.left,s.contentBox.left),h.top=Math.min(h.top,s.contentBox.top),h.width=Math.max(h.width,s.contentBox.width),h.height+=s.contentBox.height,h),{left:0,top:0,width:0,height:0});return{lineBox:t.reduce((h,s)=>(h.left=Math.min(h.left,s.lineBox.left),h.top=Math.min(h.top,s.lineBox.top),h.width=Math.max(h.width,s.lineBox.width),h.height+=s.lineBox.height,h),{left:0,top:0,width:0,height:0}),contentBox:x,paragraphs:t}}_createParagraphs(o){const t=(x={})=>{const{width:a,height:h,...s}=this.style;return{contentBox:{left:0,top:0,width:0,height:0},lineBox:{left:0,top:0,width:0,height:0},baseline:0,fragments:[],...x,style:{...s,...x.style}}},l=(x={})=>{const a=[],{width:h,height:s,...i}=this.style;return a.push({contentBox:{left:0,top:0,width:0,height:0},inlineBox:{left:0,top:0,width:0,height:0},textBox:{left:0,top:0,width:0,height:0},baseline:0,...x,style:{...i,...x.style},content:x.content??""}),a},e=[];if(typeof o=="string")e.push(t({fragments:l({content:o})}));else{o=Array.isArray(o)?o:[o];for(const x of o)if("fragments"in x){const{fragments:a,...h}=x,s=t({style:h});for(const i of a){const{content:c,...r}=i;s.fragments.push(...l({content:c,style:{...h,...r}}))}e.push(s)}else if("content"in x){const{content:a,...h}=x,s=t({style:h});s.fragments.push(...l({content:a,style:h})),e.push(s)}}return e}_createWrapedParagraphs(o,t){const l=s=>JSON.parse(JSON.stringify(s)),e=[],x=o.slice();let a,h;for(;a=x.shift();){const s=a.fragments.slice();let i=0;const c=[];for(;h=s.shift();){const r=h.style;this._setContextStyle(r);let B="",f=!1;for(const n of h.content){const d=this.context.measureText(n).width,y=/^[\r\n]$/.test(n);if(y||r.textWrap==="wrap"&&t&&i+d>t){let u=y?B.length+1:B.length;!i&&!u&&(B+=n,u++),B.length&&c.push({...l(h),content:B}),c.length&&(e.push({...l(a),fragments:c.slice()}),c.length=0);const w=h.content.substring(u);(w.length||s.length)&&x.unshift({...l(a),fragments:(w.length?[{...l(h),content:w}]:[]).concat(s.slice())}),s.length=0,f=!0;break}else i+=d;B+=n}f||c.push(l(h))}c.length&&e.push({...l(a),fragments:c})}return e}_draw(o){const t=this.context;this.style.backgroundColor&&(t.fillStyle=this.style.backgroundColor,t.fillRect(0,0,t.canvas.width,t.canvas.height)),o.forEach(l=>{l.style.backgroundColor&&(t.fillStyle=l.style.backgroundColor,t.fillRect(l.lineBox.left,l.lineBox.top,l.lineBox.width,l.lineBox.height))}),o.forEach(l=>{l.fragments.forEach(e=>{switch(e.style.backgroundColor&&(t.fillStyle=e.style.backgroundColor,t.fillRect(e.inlineBox.left,e.inlineBox.top,e.inlineBox.width,e.inlineBox.height)),this._setContextStyle({...e.style,textAlign:"left",verticalAlign:"top"}),e.style.textStrokeWidth&&t.strokeText(e.content,e.contentBox.left,e.contentBox.top),t.fillText(e.content,e.contentBox.left,e.contentBox.top),e.style.textDecoration){case"underline":t.beginPath(),t.moveTo(e.contentBox.left,e.contentBox.top+e.contentBox.height-2),t.lineTo(e.contentBox.left+e.contentBox.width,e.contentBox.top+e.contentBox.height-2),t.stroke();break;case"line-through":t.beginPath(),t.moveTo(e.contentBox.left,e.contentBox.top+e.contentBox.height/2),t.lineTo(e.contentBox.left+e.contentBox.width,e.contentBox.top+e.contentBox.height/2),t.stroke();break}})})}_resizeView(o,t){const l=this.view;l.style.width=`${o}px`,l.style.height=`${t}px`,l.dataset.width=String(o),l.dataset.height=String(t),l.width=Math.max(1,Math.floor(o*this.pixelRatio)),l.height=Math.max(1,Math.floor(t*this.pixelRatio))}_setContextStyle(o){const t=this.context;switch(t.shadowColor=o.shadowColor,t.shadowOffsetX=o.shadowOffsetX,t.shadowOffsetY=o.shadowOffsetY,t.shadowBlur=o.shadowBlur,t.strokeStyle=o.textStrokeColor,t.lineWidth=o.textStrokeWidth,t.fillStyle=o.color,t.direction=o.direction,t.textAlign=o.textAlign,o.verticalAlign){case"baseline":t.textBaseline="alphabetic";break;case"top":case"middle":case"bottom":t.textBaseline=o.verticalAlign;break}t.font=[o.fontStyle,o.fontWeight,`${o.fontSize}px`,o.fontFamily].join(" "),t.fontKerning=o.fontKerning,t.letterSpacing=`${o.letterSpacing}px`}update(){const o=this.context;let{width:t,height:l}=this.style;t==="auto"&&(t=0),l==="auto"&&(l=0);const{lineBox:e,paragraphs:x}=this.measure();t||(t=e.width),l=Math.max(l,e.height),this._resizeView(t,l);const a=this.pixelRatio;o.scale(a,a),o.clearRect(0,0,o.canvas.width,o.canvas.height),this._draw(x)}}p.Text=g,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
+(function(p,g){typeof exports=="object"&&typeof module<"u"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(p=typeof globalThis<"u"?globalThis:p||self,g(p.modernText={}))})(this,function(p){"use strict";class g{static get defaultStyle(){return{width:"auto",height:"auto",color:"#000000",fontSize:14,fontWeight:"normal",fontFamily:"sans-serif",fontStyle:"normal",fontKerning:"normal",textWrap:"wrap",textAlign:"start",verticalAlign:"baseline",textDecoration:null,textStrokeWidth:0,textStrokeColor:"#000000",direction:"inherit",lineHeight:1,letterSpacing:0,shadowColor:"#000000",shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0}}constructor(n={}){const{view:t=document.createElement("canvas"),pixelRatio:l=window.devicePixelRatio||1,content:e="",style:a}=n;this.view=t,this.context=t.getContext("2d"),this.pixelRatio=l,this.content=e,this.style={...g.defaultStyle,...a},this.update()}measure(){let{width:n}=this.style;n==="auto"&&(n=0);let t=this._createParagraphs(this.content);t=this._createWrapedParagraphs(t,n);const l=this.context;let e=0;for(let h=t.length,c=0;c<h;c++){const i=t[c];i.contentBox.top=e;let s=0,d=null;for(const o of i.fragments){this._setContextStyle({...o.style,textAlign:"center",verticalAlign:"baseline"});const B=l.measureText(o.content),w=B.width,u=o.style.fontSize;o.inlineBox.left=s,o.inlineBox.top=e,o.inlineBox.width=w,o.inlineBox.height=u*o.style.lineHeight,o.contentBox.left=o.inlineBox.left,o.contentBox.width=w,o.contentBox.height=u,o.contentBox.top=o.inlineBox.top+(o.inlineBox.height-o.contentBox.height)/2,o.glyphBox.width=B.actualBoundingBoxLeft+B.actualBoundingBoxRight,o.glyphBox.height=B.actualBoundingBoxAscent+B.actualBoundingBoxDescent,o.glyphBox.left=o.contentBox.left+(o.contentBox.width-o.glyphBox.width)/2,o.glyphBox.top=o.contentBox.top+(o.contentBox.height-o.glyphBox.height)/2,o.centerX=o.glyphBox.left+B.actualBoundingBoxLeft,o.baseline=o.glyphBox.top+B.actualBoundingBoxAscent,s+=o.contentBox.width+o.style.letterSpacing,i.contentBox.height<o.contentBox.height&&(d=o),i.contentBox.left=Math.min(i.contentBox.left,o.contentBox.left),i.contentBox.top=Math.min(i.contentBox.top,o.contentBox.top),i.contentBox.height=Math.max(i.contentBox.height,o.contentBox.height),i.lineBox.height=Math.max(i.lineBox.height,o.inlineBox.height)}const r=i.fragments[i.fragments.length-1];i.contentBox.width=Math.max(i.contentBox.width,r?r.contentBox.left+Math.max(r.contentBox.width,r.glyphBox.width):0),i.lineBox.left=0,i.lineBox.top=e,i.lineBox.width=Math.max(n,i.contentBox.width),this._setContextStyle({...(d??i).style,textAlign:"left",verticalAlign:"baseline"});const f=l.measureText("X");i.baseline=i.lineBox.top+(i.lineBox.height-f.actualBoundingBoxAscent+f.actualBoundingBoxDescent)/2+f.actualBoundingBoxAscent,e+=i.lineBox.height}for(let h=t.length,c=0;c<h;c++){const i=t[c];i.fragments.forEach(s=>{const d=s.inlineBox.left,r=s.inlineBox.top,f=i.lineBox.height-s.inlineBox.height;switch(s.style.textAlign){case"end":case"right":s.inlineBox.left+=i.lineBox.width-i.contentBox.width;break;case"center":s.inlineBox.left+=(i.lineBox.width-i.contentBox.width)/2;break;case"start":case"left":default:s.inlineBox.left+=i.lineBox.left;break}switch(s.style.verticalAlign){case"top":s.inlineBox.top=i.lineBox.top;break;case"middle":s.inlineBox.top=i.lineBox.top+f/2;break;case"bottom":s.inlineBox.top=i.lineBox.top+f;break;case"sub":case"text-top":case"text-bottom":break;case"baseline":default:s.inlineBox.height<i.lineBox.height&&(s.inlineBox.top+=i.baseline-s.baseline);break}const o=s.inlineBox.left-d,B=s.inlineBox.top-r;s.contentBox.left+=o,s.contentBox.top+=B,s.glyphBox.left+=o,s.glyphBox.top+=B,s.baseline+=B,s.centerX+=o})}const a=t.reduce((h,c)=>(h.left=Math.min(h.left,c.contentBox.left),h.top=Math.min(h.top,c.contentBox.top),h.width=Math.max(h.width,c.contentBox.width),h.height+=c.contentBox.height,h),{left:0,top:0,width:0,height:0});return{contentBox:t.reduce((h,c)=>(h.left=Math.min(h.left,c.lineBox.left),h.top=Math.min(h.top,c.lineBox.top),h.width=Math.max(h.width,c.lineBox.width),h.height+=c.lineBox.height,h),{left:0,top:0,width:0,height:0}),actualContentBox:a,paragraphs:t}}_createParagraphs(n){const t=(a={})=>{const{width:x,height:h,...c}=this.style;return{contentBox:{left:0,top:0,width:0,height:0},lineBox:{left:0,top:0,width:0,height:0},baseline:0,fragments:[],...a,style:{...c,...a.style}}},l=(a={})=>{const x=[],{width:h,height:c,...i}=this.style;return x.push({contentBox:{left:0,top:0,width:0,height:0},inlineBox:{left:0,top:0,width:0,height:0},glyphBox:{left:0,top:0,width:0,height:0},centerX:0,baseline:0,...a,style:{...i,...a.style},content:a.content??""}),x},e=[];if(typeof n=="string")e.push(t({fragments:l({content:n})}));else{n=Array.isArray(n)?n:[n];for(const a of n)if("fragments"in a){const{fragments:x,...h}=a,c=t({style:h});for(const i of x){const{content:s,...d}=i;c.fragments.push(...l({content:s,style:{...h,...d}}))}e.push(c)}else if("content"in a){const{content:x,...h}=a,c=t({style:h});c.fragments.push(...l({content:x,style:h})),e.push(c)}}return e}_createWrapedParagraphs(n,t){const l=c=>JSON.parse(JSON.stringify(c)),e=[],a=n.slice();let x,h;for(;x=a.shift();){const c=x.fragments.slice();let i=0;const s=[];for(;h=c.shift();){const d=h.style;this._setContextStyle(d);let r="",f=!1;for(const o of h.content){const B=this.context.measureText(o).width,w=/^[\r\n]$/.test(o);if(w||d.textWrap==="wrap"&&t&&i+B>t){let u=w?r.length+1:r.length;!i&&!u&&(r+=o,u++),r.length&&s.push({...l(h),content:r}),s.length&&(e.push({...l(x),fragments:s.slice()}),s.length=0);const y=h.content.substring(u);(y.length||c.length)&&a.unshift({...l(x),fragments:(y.length?[{...l(h),content:y}]:[]).concat(c.slice())}),c.length=0,f=!0;break}else i+=B;r+=o}f||s.push(l(h))}s.length&&e.push({...l(x),fragments:s})}return e}_draw(n){const t=this.context;this.style.backgroundColor&&(t.fillStyle=this.style.backgroundColor,t.fillRect(0,0,t.canvas.width,t.canvas.height)),n.forEach(l=>{l.style.backgroundColor&&(t.fillStyle=l.style.backgroundColor,t.fillRect(l.lineBox.left,l.lineBox.top,l.lineBox.width,l.lineBox.height))}),n.forEach(l=>{l.fragments.forEach(e=>{switch(e.style.backgroundColor&&(t.fillStyle=e.style.backgroundColor,t.fillRect(e.inlineBox.left,e.inlineBox.top,e.inlineBox.width,e.inlineBox.height)),this._setContextStyle({...e.style,textAlign:"left",verticalAlign:"top"}),e.style.textStrokeWidth&&t.strokeText(e.content,e.contentBox.left,e.contentBox.top),t.fillText(e.content,e.contentBox.left,e.contentBox.top),e.style.textDecoration){case"underline":t.beginPath(),t.moveTo(e.contentBox.left,e.contentBox.top+e.contentBox.height-2),t.lineTo(e.contentBox.left+e.contentBox.width,e.contentBox.top+e.contentBox.height-2),t.stroke();break;case"line-through":t.beginPath(),t.moveTo(e.contentBox.left,e.contentBox.top+e.contentBox.height/2),t.lineTo(e.contentBox.left+e.contentBox.width,e.contentBox.top+e.contentBox.height/2),t.stroke();break}})})}_resizeView(n,t){const l=this.view;l.style.width=`${n}px`,l.style.height=`${t}px`,l.dataset.width=String(n),l.dataset.height=String(t),l.width=Math.max(1,Math.floor(n*this.pixelRatio)),l.height=Math.max(1,Math.floor(t*this.pixelRatio))}_setContextStyle(n){const t=this.context;switch(t.shadowColor=n.shadowColor,t.shadowOffsetX=n.shadowOffsetX,t.shadowOffsetY=n.shadowOffsetY,t.shadowBlur=n.shadowBlur,t.strokeStyle=n.textStrokeColor,t.lineWidth=n.textStrokeWidth,t.fillStyle=n.color,t.direction=n.direction,t.textAlign=n.textAlign,n.verticalAlign){case"baseline":t.textBaseline="alphabetic";break;case"top":case"middle":case"bottom":t.textBaseline=n.verticalAlign;break}t.font=[n.fontStyle,n.fontWeight,`${n.fontSize}px`,n.fontFamily].join(" "),t.fontKerning=n.fontKerning,t.letterSpacing=`${n.letterSpacing}px`}update(){const n=this.context;let{width:t,height:l}=this.style;t==="auto"&&(t=0),l==="auto"&&(l=0);const{contentBox:e,paragraphs:a}=this.measure();t||(t=e.width),l=Math.max(l,e.height),this._resizeView(t,l);const x=this.pixelRatio;n.scale(x,x),n.clearRect(0,0,n.canvas.width,n.canvas.height),this._draw(a)}}p.Text=g,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});

package/dist/index.mjs

@@ -24,77 +24,77 @@ class u {
       shadowBlur: 0
     };
   }
-  constructor(o = {}) {
+  constructor(n = {}) {
     const {
       view: t = document.createElement("canvas"),
       pixelRatio: l = window.devicePixelRatio || 1,
       content: e = "",
-      style: x
-    } = o;
+      style: a
+    } = n;
     this.view = t, this.context = t.getContext("2d"), this.pixelRatio = l, this.content = e, this.style = {
       ...u.defaultStyle,
-      ...x
+      ...a
     }, this.update();
   }
   measure() {
-    let { width: o } = this.style;
-    o === "auto" && (o = 0);
+    let { width: n } = this.style;
+    n === "auto" && (n = 0);
     let t = this._createParagraphs(this.content);
-    t = this._createWrapedParagraphs(t, o);
+    t = this._createWrapedParagraphs(t, n);
     const l = this.context;
     let e = 0;
-    for (let h = t.length, s = 0; s < h; s++) {
-      const i = t[s];
+    for (let h = t.length, c = 0; c < h; c++) {
+      const i = t[c];
       i.contentBox.top = e;
-      let c = 0, d = null;
-      for (const n of i.fragments) {
+      let s = 0, d = null;
+      for (const o of i.fragments) {
         this._setContextStyle({
-          ...n.style,
-          textAlign: "left",
+          ...o.style,
+          textAlign: "center",
           verticalAlign: "baseline"
         });
-        const r = l.measureText(n.content);
-        n.inlineBox.left = c, n.inlineBox.top = e, n.inlineBox.width = r.width, n.inlineBox.height = n.style.fontSize * n.style.lineHeight, n.contentBox.left = n.inlineBox.left, n.contentBox.width = n.inlineBox.width, n.contentBox.height = n.style.fontSize, n.contentBox.top = n.inlineBox.top + (n.inlineBox.height - n.contentBox.height) / 2, n.textBox.width = r.actualBoundingBoxLeft + r.actualBoundingBoxRight, n.textBox.height = r.actualBoundingBoxAscent + r.actualBoundingBoxDescent, n.textBox.left = n.contentBox.left + (n.contentBox.width - n.textBox.width) / 2, n.textBox.top = n.contentBox.top + (n.contentBox.height - n.textBox.height) / 2, n.baseline = n.textBox.top + r.actualBoundingBoxAscent, c += n.contentBox.width + n.style.letterSpacing, i.contentBox.height < n.contentBox.height && (d = n), i.contentBox.left = Math.min(i.contentBox.left, n.contentBox.left), i.contentBox.top = Math.min(i.contentBox.top, n.contentBox.top), i.contentBox.height = Math.max(i.contentBox.height, n.contentBox.height), i.lineBox.height = Math.max(i.lineBox.height, n.inlineBox.height);
+        const B = l.measureText(o.content), p = B.width, f = o.style.fontSize;
+        o.inlineBox.left = s, o.inlineBox.top = e, o.inlineBox.width = p, o.inlineBox.height = f * o.style.lineHeight, o.contentBox.left = o.inlineBox.left, o.contentBox.width = p, o.contentBox.height = f, o.contentBox.top = o.inlineBox.top + (o.inlineBox.height - o.contentBox.height) / 2, o.glyphBox.width = B.actualBoundingBoxLeft + B.actualBoundingBoxRight, o.glyphBox.height = B.actualBoundingBoxAscent + B.actualBoundingBoxDescent, o.glyphBox.left = o.contentBox.left + (o.contentBox.width - o.glyphBox.width) / 2, o.glyphBox.top = o.contentBox.top + (o.contentBox.height - o.glyphBox.height) / 2, o.centerX = o.glyphBox.left + B.actualBoundingBoxLeft, o.baseline = o.glyphBox.top + B.actualBoundingBoxAscent, s += o.contentBox.width + o.style.letterSpacing, i.contentBox.height < o.contentBox.height && (d = o), i.contentBox.left = Math.min(i.contentBox.left, o.contentBox.left), i.contentBox.top = Math.min(i.contentBox.top, o.contentBox.top), i.contentBox.height = Math.max(i.contentBox.height, o.contentBox.height), i.lineBox.height = Math.max(i.lineBox.height, o.inlineBox.height);
       }
-      const B = i.fragments[i.fragments.length - 1];
+      const r = i.fragments[i.fragments.length - 1];
       i.contentBox.width = Math.max(
         i.contentBox.width,
-        B ? B.contentBox.left + Math.max(B.contentBox.width, B.textBox.width) : 0
-      ), i.lineBox.left = 0, i.lineBox.top = e, i.lineBox.width = Math.max(o, i.contentBox.width), this._setContextStyle({
+        r ? r.contentBox.left + Math.max(r.contentBox.width, r.glyphBox.width) : 0
+      ), i.lineBox.left = 0, i.lineBox.top = e, i.lineBox.width = Math.max(n, i.contentBox.width), this._setContextStyle({
         ...(d ?? i).style,
         textAlign: "left",
         verticalAlign: "baseline"
       });
-      const f = l.measureText("X");
-      i.baseline = i.lineBox.top + (i.lineBox.height - f.actualBoundingBoxAscent + f.actualBoundingBoxDescent) / 2 + f.actualBoundingBoxAscent, e += i.lineBox.height;
+      const g = l.measureText("X");
+      i.baseline = i.lineBox.top + (i.lineBox.height - g.actualBoundingBoxAscent + g.actualBoundingBoxDescent) / 2 + g.actualBoundingBoxAscent, e += i.lineBox.height;
     }
-    for (let h = t.length, s = 0; s < h; s++) {
-      const i = t[s];
-      i.fragments.forEach((c) => {
-        const d = c.inlineBox.left, B = c.inlineBox.top, f = i.lineBox.height - c.inlineBox.height;
-        switch (c.style.textAlign) {
+    for (let h = t.length, c = 0; c < h; c++) {
+      const i = t[c];
+      i.fragments.forEach((s) => {
+        const d = s.inlineBox.left, r = s.inlineBox.top, g = i.lineBox.height - s.inlineBox.height;
+        switch (s.style.textAlign) {
           case "end":
           case "right":
-            c.inlineBox.left += i.lineBox.width - i.contentBox.width;
+            s.inlineBox.left += i.lineBox.width - i.contentBox.width;
             break;
           case "center":
-            c.inlineBox.left += (i.lineBox.width - i.contentBox.width) / 2;
+            s.inlineBox.left += (i.lineBox.width - i.contentBox.width) / 2;
             break;
           case "start":
           case "left":
           default:
-            c.inlineBox.left += i.lineBox.left;
+            s.inlineBox.left += i.lineBox.left;
             break;
         }
-        switch (c.style.verticalAlign) {
+        switch (s.style.verticalAlign) {
           case "top":
-            c.inlineBox.top = i.lineBox.top;
+            s.inlineBox.top = i.lineBox.top;
             break;
           case "middle":
-            c.inlineBox.top = i.lineBox.top + f / 2;
+            s.inlineBox.top = i.lineBox.top + g / 2;
             break;
           case "bottom":
-            c.inlineBox.top = i.lineBox.top + f;
+            s.inlineBox.top = i.lineBox.top + g;
             break;
           case "sub":
           case "text-top":
@@ -102,104 +102,105 @@ class u {
             break;
           case "baseline":
           default:
-            c.inlineBox.height < i.lineBox.height && (c.inlineBox.top += i.baseline - c.baseline);
+            s.inlineBox.height < i.lineBox.height && (s.inlineBox.top += i.baseline - s.baseline);
             break;
         }
-        const n = c.inlineBox.left - d, r = c.inlineBox.top - B;
-        c.contentBox.left += n, c.contentBox.top += r, c.textBox.left += n, c.textBox.top += r;
+        const o = s.inlineBox.left - d, B = s.inlineBox.top - r;
+        s.contentBox.left += o, s.contentBox.top += B, s.glyphBox.left += o, s.glyphBox.top += B, s.baseline += B, s.centerX += o;
       });
     }
-    const x = t.reduce((h, s) => (h.left = Math.min(h.left, s.contentBox.left), h.top = Math.min(h.top, s.contentBox.top), h.width = Math.max(h.width, s.contentBox.width), h.height += s.contentBox.height, h), { left: 0, top: 0, width: 0, height: 0 });
-    return { lineBox: t.reduce((h, s) => (h.left = Math.min(h.left, s.lineBox.left), h.top = Math.min(h.top, s.lineBox.top), h.width = Math.max(h.width, s.lineBox.width), h.height += s.lineBox.height, h), { left: 0, top: 0, width: 0, height: 0 }), contentBox: x, paragraphs: t };
+    const a = t.reduce((h, c) => (h.left = Math.min(h.left, c.contentBox.left), h.top = Math.min(h.top, c.contentBox.top), h.width = Math.max(h.width, c.contentBox.width), h.height += c.contentBox.height, h), { left: 0, top: 0, width: 0, height: 0 });
+    return { contentBox: t.reduce((h, c) => (h.left = Math.min(h.left, c.lineBox.left), h.top = Math.min(h.top, c.lineBox.top), h.width = Math.max(h.width, c.lineBox.width), h.height += c.lineBox.height, h), { left: 0, top: 0, width: 0, height: 0 }), actualContentBox: a, paragraphs: t };
   }
-  _createParagraphs(o) {
-    const t = (x = {}) => {
-      const { width: a, height: h, ...s } = this.style;
+  _createParagraphs(n) {
+    const t = (a = {}) => {
+      const { width: x, height: h, ...c } = this.style;
       return {
         contentBox: { left: 0, top: 0, width: 0, height: 0 },
         lineBox: { left: 0, top: 0, width: 0, height: 0 },
         baseline: 0,
         fragments: [],
-        ...x,
+        ...a,
         style: {
-          ...s,
-          ...x.style
+          ...c,
+          ...a.style
         }
       };
-    }, l = (x = {}) => {
-      const a = [], { width: h, height: s, ...i } = this.style;
-      return a.push({
+    }, l = (a = {}) => {
+      const x = [], { width: h, height: c, ...i } = this.style;
+      return x.push({
         contentBox: { left: 0, top: 0, width: 0, height: 0 },
         inlineBox: { left: 0, top: 0, width: 0, height: 0 },
-        textBox: { left: 0, top: 0, width: 0, height: 0 },
+        glyphBox: { left: 0, top: 0, width: 0, height: 0 },
+        centerX: 0,
         baseline: 0,
-        ...x,
+        ...a,
         style: {
           ...i,
-          ...x.style
+          ...a.style
         },
-        content: x.content ?? ""
-      }), a;
+        content: a.content ?? ""
+      }), x;
     }, e = [];
-    if (typeof o == "string")
-      e.push(t({ fragments: l({ content: o }) }));
+    if (typeof n == "string")
+      e.push(t({ fragments: l({ content: n }) }));
     else {
-      o = Array.isArray(o) ? o : [o];
-      for (const x of o)
-        if ("fragments" in x) {
-          const { fragments: a, ...h } = x, s = t({ style: h });
-          for (const i of a) {
-            const { content: c, ...d } = i;
-            s.fragments.push(...l({ content: c, style: { ...h, ...d } }));
+      n = Array.isArray(n) ? n : [n];
+      for (const a of n)
+        if ("fragments" in a) {
+          const { fragments: x, ...h } = a, c = t({ style: h });
+          for (const i of x) {
+            const { content: s, ...d } = i;
+            c.fragments.push(...l({ content: s, style: { ...h, ...d } }));
           }
-          e.push(s);
-        } else if ("content" in x) {
-          const { content: a, ...h } = x, s = t({ style: h });
-          s.fragments.push(...l({ content: a, style: h })), e.push(s);
+          e.push(c);
+        } else if ("content" in a) {
+          const { content: x, ...h } = a, c = t({ style: h });
+          c.fragments.push(...l({ content: x, style: h })), e.push(c);
         }
     }
     return e;
   }
-  _createWrapedParagraphs(o, t) {
-    const l = (s) => JSON.parse(JSON.stringify(s)), e = [], x = o.slice();
-    let a, h;
-    for (; a = x.shift(); ) {
-      const s = a.fragments.slice();
+  _createWrapedParagraphs(n, t) {
+    const l = (c) => JSON.parse(JSON.stringify(c)), e = [], a = n.slice();
+    let x, h;
+    for (; x = a.shift(); ) {
+      const c = x.fragments.slice();
       let i = 0;
-      const c = [];
-      for (; h = s.shift(); ) {
+      const s = [];
+      for (; h = c.shift(); ) {
         const d = h.style;
         this._setContextStyle(d);
-        let B = "", f = !1;
-        for (const n of h.content) {
-          const r = this.context.measureText(n).width, w = /^[\r\n]$/.test(n);
-          if (w || d.textWrap === "wrap" && t && i + r > t) {
-            let g = w ? B.length + 1 : B.length;
-            !i && !g && (B += n, g++), B.length && c.push({ ...l(h), content: B }), c.length && (e.push({
-              ...l(a),
-              fragments: c.slice()
-            }), c.length = 0);
-            const p = h.content.substring(g);
-            (p.length || s.length) && x.unshift({
-              ...l(a),
-              fragments: (p.length ? [{ ...l(h), content: p }] : []).concat(s.slice())
-            }), s.length = 0, f = !0;
+        let r = "", g = !1;
+        for (const o of h.content) {
+          const B = this.context.measureText(o).width, p = /^[\r\n]$/.test(o);
+          if (p || d.textWrap === "wrap" && t && i + B > t) {
+            let f = p ? r.length + 1 : r.length;
+            !i && !f && (r += o, f++), r.length && s.push({ ...l(h), content: r }), s.length && (e.push({
+              ...l(x),
+              fragments: s.slice()
+            }), s.length = 0);
+            const w = h.content.substring(f);
+            (w.length || c.length) && a.unshift({
+              ...l(x),
+              fragments: (w.length ? [{ ...l(h), content: w }] : []).concat(c.slice())
+            }), c.length = 0, g = !0;
             break;
           } else
-            i += r;
-          B += n;
+            i += B;
+          r += o;
         }
-        f || c.push(l(h));
+        g || s.push(l(h));
       }
-      c.length && e.push({ ...l(a), fragments: c });
+      s.length && e.push({ ...l(x), fragments: s });
     }
     return e;
   }
-  _draw(o) {
+  _draw(n) {
     const t = this.context;
-    this.style.backgroundColor && (t.fillStyle = this.style.backgroundColor, t.fillRect(0, 0, t.canvas.width, t.canvas.height)), o.forEach((l) => {
+    this.style.backgroundColor && (t.fillStyle = this.style.backgroundColor, t.fillRect(0, 0, t.canvas.width, t.canvas.height)), n.forEach((l) => {
       l.style.backgroundColor && (t.fillStyle = l.style.backgroundColor, t.fillRect(l.lineBox.left, l.lineBox.top, l.lineBox.width, l.lineBox.height));
-    }), o.forEach((l) => {
+    }), n.forEach((l) => {
       l.fragments.forEach((e) => {
         switch (e.style.backgroundColor && (t.fillStyle = e.style.backgroundColor, t.fillRect(e.inlineBox.left, e.inlineBox.top, e.inlineBox.width, e.inlineBox.height)), this._setContextStyle({
           ...e.style,
@@ -216,37 +217,37 @@ class u {
       });
     });
   }
-  _resizeView(o, t) {
+  _resizeView(n, t) {
     const l = this.view;
-    l.style.width = `${o}px`, l.style.height = `${t}px`, l.dataset.width = String(o), l.dataset.height = String(t), l.width = Math.max(1, Math.floor(o * this.pixelRatio)), l.height = Math.max(1, Math.floor(t * this.pixelRatio));
+    l.style.width = `${n}px`, l.style.height = `${t}px`, l.dataset.width = String(n), l.dataset.height = String(t), l.width = Math.max(1, Math.floor(n * this.pixelRatio)), l.height = Math.max(1, Math.floor(t * this.pixelRatio));
   }
-  _setContextStyle(o) {
+  _setContextStyle(n) {
     const t = this.context;
-    switch (t.shadowColor = o.shadowColor, t.shadowOffsetX = o.shadowOffsetX, t.shadowOffsetY = o.shadowOffsetY, t.shadowBlur = o.shadowBlur, t.strokeStyle = o.textStrokeColor, t.lineWidth = o.textStrokeWidth, t.fillStyle = o.color, t.direction = o.direction, t.textAlign = o.textAlign, o.verticalAlign) {
+    switch (t.shadowColor = n.shadowColor, t.shadowOffsetX = n.shadowOffsetX, t.shadowOffsetY = n.shadowOffsetY, t.shadowBlur = n.shadowBlur, t.strokeStyle = n.textStrokeColor, t.lineWidth = n.textStrokeWidth, t.fillStyle = n.color, t.direction = n.direction, t.textAlign = n.textAlign, n.verticalAlign) {
       case "baseline":
         t.textBaseline = "alphabetic";
         break;
       case "top":
       case "middle":
       case "bottom":
-        t.textBaseline = o.verticalAlign;
+        t.textBaseline = n.verticalAlign;
         break;
     }
     t.font = [
-      o.fontStyle,
-      o.fontWeight,
-      `${o.fontSize}px`,
-      o.fontFamily
-    ].join(" "), t.fontKerning = o.fontKerning, t.letterSpacing = `${o.letterSpacing}px`;
+      n.fontStyle,
+      n.fontWeight,
+      `${n.fontSize}px`,
+      n.fontFamily
+    ].join(" "), t.fontKerning = n.fontKerning, t.letterSpacing = `${n.letterSpacing}px`;
   }
   update() {
-    const o = this.context;
+    const n = this.context;
     let { width: t, height: l } = this.style;
     t === "auto" && (t = 0), l === "auto" && (l = 0);
-    const { lineBox: e, paragraphs: x } = this.measure();
+    const { contentBox: e, paragraphs: a } = this.measure();
     t || (t = e.width), l = Math.max(l, e.height), this._resizeView(t, l);
-    const a = this.pixelRatio;
-    o.scale(a, a), o.clearRect(0, 0, o.canvas.width, o.canvas.height), this._draw(x);
+    const x = this.pixelRatio;
+    n.scale(x, x), n.clearRect(0, 0, n.canvas.width, n.canvas.height), this._draw(a);
   }
 }
 export {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-text",
   "type": "module",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "packageManager": "pnpm@8.14.1",
   "description": "Text measurement and rendering of canvas 2d",
   "author": "wxm",

package/types/Text.d.ts

@@ -21,7 +21,8 @@ export interface TextParagraph {
 export interface TextFragment {
     contentBox: BoundingBox;
     inlineBox: BoundingBox;
-    textBox: BoundingBox;
+    glyphBox: BoundingBox;
+    centerX: number;
     baseline: number;
     content: string;
     style: TextFragmentStyle;
@@ -68,9 +69,9 @@ export interface TextOptions {
     content?: TextContent;
     style?: Partial<TextStyle>;
 }
-export interface MeasureResult {
+export interface Metrics {
     contentBox: BoundingBox;
-    lineBox: BoundingBox;
+    actualContentBox: BoundingBox;
     paragraphs: Array<TextParagraph>;
 }
 export declare class Text {
@@ -81,7 +82,7 @@ export declare class Text {
     style: TextStyle;
     content: TextContent;
     constructor(options?: TextOptions);
-    measure(): MeasureResult;
+    measure(): Metrics;
     protected _createParagraphs(content: TextContent): Array<TextParagraph>;
     protected _createWrapedParagraphs(paragraphs: Array<TextParagraph>, width: number): Array<TextParagraph>;
     protected _draw(paragraphs: Array<TextParagraph>): void;