modern-text 0.0.6 → 0.0.7

package/dist/index.cjs

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

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

package/dist/index.mjs

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

package/package.json

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

package/types/Text.d.ts

@@ -61,14 +61,16 @@ export interface TextParagraphWithFragmentsAndStyle extends Partial<TextFragment
 export interface TextFragmentWithStyle extends Partial<TextFragmentStyle> {
     content: string;
 }
-export type TextData = string | TextParagraphWithContentAndStyle | TextParagraphWithFragmentsAndStyle | Array<TextParagraphWithContentAndStyle | TextParagraphWithFragmentsAndStyle>;
+export type TextContent = string | TextParagraphWithContentAndStyle | TextParagraphWithFragmentsAndStyle | Array<TextParagraphWithContentAndStyle | TextParagraphWithFragmentsAndStyle>;
 export interface TextOptions {
     view?: HTMLCanvasElement;
     pixelRatio?: number;
-    content?: TextData;
+    content?: TextContent;
     style?: Partial<TextStyle>;
 }
-export interface MeasureResult extends BoundingBox {
+export interface MeasureResult {
+    contentBox: BoundingBox;
+    lineBox: BoundingBox;
     paragraphs: Array<TextParagraph>;
 }
 export declare class Text {
@@ -77,10 +79,10 @@ export declare class Text {
     readonly context: CanvasRenderingContext2D;
     pixelRatio: number;
     style: TextStyle;
-    content: TextData;
+    content: TextContent;
     constructor(options?: TextOptions);
-    measure(width?: number, _height?: number): MeasureResult;
-    protected _createParagraphs(content: TextData): Array<TextParagraph>;
+    measure(): MeasureResult;
+    protected _createParagraphs(content: TextContent): Array<TextParagraph>;
     protected _createWrapedParagraphs(paragraphs: Array<TextParagraph>, width: number): Array<TextParagraph>;
     protected _draw(paragraphs: Array<TextParagraph>): void;
     protected _resizeView(width: number, height: number): void;