modern-text 0.0.4 → 0.0.6

package/README.md

@@ -30,16 +30,16 @@ const text = new Text({
     fontSize: 22,
     textDecoration: 'underline',
   },
-  data: [
+  content: [
     {
       letterSpacing: 3,
       fragments: [
-        { data: 'He', color: 'red', fontSize: 12 },
-        { data: 'llo', color: 'black' },
+        { content: 'He', color: 'red', fontSize: 12 },
+        { content: 'llo', color: 'black' },
       ],
     },
-    { data: ', ', color: 'grey' },
-    { data: 'World!', color: 'black' },
+    { content: ', ', color: 'grey' },
+    { content: 'World!', color: 'black' },
   ],
 })
 

package/dist/index.cjs

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

package/dist/index.js

@@ -1 +1 @@
-(function(x,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(x=typeof globalThis<"u"?globalThis:x||self,f(x.modernText={}))})(this,function(x){"use strict";class f{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",textBaseline:"middle",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:s=window.devicePixelRatio||1,data:o="",style:n}=i;this.view=t,this.context=t.getContext("2d"),this.pixelRatio=s,this.data=o,this.style={...f.defaultStyle,...n},this.update()}measure(i=0,t=0){let s=this._createParagraphs(this.data);s=this._createWrapedParagraphs(s,i);const o=this.context;let n=0;for(let h=s.length,r=0;r<h;r++){const e=s[r];e.relativeX=0,e.relativeY=n,e.width=0,e.height=0;let a=0,d;for(const c of e.fragments){const g=c.style;this._setContextStyle(g);const u=o.measureText(c.data),b=u.width,w=u.actualBoundingBoxRight+u.actualBoundingBoxLeft;c.relativeX=a,c.relativeY=e.relativeY,c.width=b,c.actualBoundingBoxWidth=w,c.height=g.fontSize*g.lineHeight,a+=b+g.letterSpacing,d=c,e.height=Math.max(e.height,c.height)}e.width=d?d.relativeX+Math.max(d.width,d.actualBoundingBoxWidth):0,n+=e.height}const l=s.reduce((h,r)=>(h.x=Math.min(h.x,r.relativeX),h.y=Math.min(h.y,r.relativeY),h.width=Math.max(h.width,r.width),h.height+=r.height,h),{x:0,y:0,width:0,height:0});i=i||l.width,t=Math.max(t,l.height);for(let h=s.length,r=0;r<h;r++){const e=s[r];switch(this.style.textAlign){case"center":e.absoluteX=(i-l.width)/2,e.fragments.forEach(a=>{a.absoluteX=e.absoluteX+a.relativeX,a.fillX=a.absoluteX+a.width/2});break;case"end":case"right":e.absoluteX=i-l.width,e.fragments.forEach(a=>{a.absoluteX=e.absoluteX+a.relativeX,a.fillX=a.absoluteX+a.width});break;case"start":case"left":default:e.absoluteX=0,e.fragments.forEach(a=>{a.absoluteX=e.absoluteX+a.relativeX,a.fillX=a.absoluteX});break}switch(this.style.textBaseline){case"top":case"hanging":e.absoluteY=e.relativeY,e.fragments.forEach(a=>{a.absoluteY=e.absoluteY,a.fillY=a.absoluteY});break;case"middle":case"alphabetic":case"ideographic":e.absoluteY=e.relativeY+(t-l.height)/2,e.fragments.forEach(a=>{a.absoluteY=e.absoluteY,a.fillY=a.absoluteY+e.height/2});break;case"bottom":e.absoluteY=e.relativeY+t-l.height,e.fragments.forEach(a=>{a.absoluteY=e.absoluteY,a.fillY=a.absoluteY+e.height});break}}return{...l,paragraphs:s}}_createParagraphs(i){const t={width:0,height:0,actualBoundingBoxWidth:0,relativeX:0,relativeY:0,absoluteX:0,absoluteY:0},s=(l={})=>({...t,fragments:[],...l}),o=(l={})=>{const h=[],{width:r,height:e,...a}=this.style;return h.push({fillX:0,fillY:0,...t,...l,style:{...a,...l.style},data:l.data??""}),h},n=[];if(typeof i=="string")n.push(s({fragments:o({data:i})}));else{i=Array.isArray(i)?i:[i];for(const l of i){const h=s();if("fragments"in l){const{fragments:r,...e}=l;for(const a of r){const{data:d,...c}=a;h.fragments.push(...o({data:d,style:{...e,...c}}))}}else if("data"in l){const{data:r,...e}=l;h.fragments.push(...o({data:r,style:e}))}n.push(h)}}return n}_createWrapedParagraphs(i,t){const s=[],o=i.slice();let n,l;for(;n=o.shift();){const h=n.fragments.slice();let r=0;const e=[];let a=!0;for(;l=h.shift();){const d=l.style;this._setContextStyle(d);let c="",g=!1;for(const u of l.data){const b=this.context.measureText(u).width+(a?0:d.letterSpacing),w=/^[\r\n]$/.test(u);if(w||d.textWrap==="wrap"&&t&&r+b>t){let p=w?c.length+1:c.length;!r&&!p&&(c+=u,p++),c.length&&e.push({...l,text:c}),e.length&&(s.push({...n,fragments:e.slice()}),e.length=0);const X=l.data.substring(p);(X.length||h.length)&&o.unshift({...n,fragments:(X.length?[{...l,data:X}]:[]).concat(h.slice())}),h.length=0,g=!0;break}else r+=b;c+=u}g||e.push({...l}),a=!1}e.length&&s.push({...n,fragments:e})}return s}_draw(i){const t=this.context;i.forEach(s=>{s.fragments.forEach(o=>{const n=o.style;switch(this._setContextStyle(n),n.textStrokeWidth&&t.strokeText(o.data,o.fillX,o.fillY),t.fillText(o.data,o.fillX,o.fillY),n.textDecoration){case"underline":t.beginPath(),t.moveTo(o.absoluteX,s.absoluteY+s.height-2),t.lineTo(o.absoluteX+o.width,s.absoluteY+s.height-2),t.stroke();break;case"line-through":t.beginPath(),t.moveTo(o.absoluteX,s.absoluteY+s.height/2),t.lineTo(o.absoluteX+o.width,s.absoluteY+s.height/2),t.stroke();break}})})}_resizeView(i,t){const s=this.view;s.style.width=`${i}px`,s.style.height=`${t}px`,s.dataset.width=String(i),s.dataset.height=String(t),s.width=Math.max(1,Math.floor(i*this.pixelRatio)),s.height=Math.max(1,Math.floor(t*this.pixelRatio))}_setContextStyle(i){const t=this.context;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,t.textBaseline=i.textBaseline,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:s}=this.style;t==="auto"&&(t=0),s==="auto"&&(s=0);const o=this.measure(t,s);t||(t=o.width),s=Math.max(s,o.height),this._resizeView(t,s);const n=this.pixelRatio;i.scale(n,n),i.clearRect(0,0,i.canvas.width,i.canvas.height),this._draw(o.paragraphs)}}x.Text=f,Object.defineProperty(x,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(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"})});

package/dist/index.mjs

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

package/package.json

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

package/types/Text.d.ts

@@ -3,32 +3,32 @@ export type FontStyle = 'normal' | 'italic' | 'oblique' | `oblique ${string}`;
 export type FontKerning = 'auto' | 'none' | 'normal';
 export type TextWrap = 'wrap' | 'nowrap';
 export type TextAlign = 'center' | 'end' | 'left' | 'right' | 'start';
-export type TextBaseline = 'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top';
+export type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'sub' | 'text-top' | 'text-bottom';
 export type TextDecoration = 'underline' | 'line-through';
-export interface TextParagraph {
+export interface BoundingBox {
+    left: number;
+    top: number;
     width: number;
     height: number;
-    relativeX: number;
-    relativeY: number;
-    absoluteX: number;
-    absoluteY: number;
+}
+export interface TextParagraph {
+    contentBox: BoundingBox;
+    lineBox: BoundingBox;
+    baseline: number;
     fragments: Array<TextFragment>;
+    style: TextFragmentStyle;
 }
 export interface TextFragment {
-    width: number;
-    height: number;
-    actualBoundingBoxWidth: number;
-    relativeX: number;
-    relativeY: number;
-    absoluteX: number;
-    absoluteY: number;
-    fillX: number;
-    fillY: number;
-    data: string;
+    contentBox: BoundingBox;
+    inlineBox: BoundingBox;
+    textBox: BoundingBox;
+    baseline: number;
+    content: string;
     style: TextFragmentStyle;
 }
 export interface TextFragmentStyle {
     color: string;
+    backgroundColor?: string;
     fontSize: number;
     fontWeight: FontWeight;
     fontFamily: string;
@@ -36,7 +36,7 @@ export interface TextFragmentStyle {
     fontKerning: FontKerning;
     textWrap: TextWrap;
     textAlign: TextAlign;
-    textBaseline: TextBaseline;
+    verticalAlign: VerticalAlign;
     textDecoration: TextDecoration | null;
     textStrokeWidth: number;
     textStrokeColor: string;
@@ -52,27 +52,23 @@ export interface TextStyle extends TextFragmentStyle {
     width: number | 'auto';
     height: number | 'auto';
 }
-export interface TextParagraphWithDataAndStyle extends Partial<TextFragmentStyle> {
-    data: string;
+export interface TextParagraphWithContentAndStyle extends Partial<TextFragmentStyle> {
+    content: string;
 }
 export interface TextParagraphWithFragmentsAndStyle extends Partial<TextFragmentStyle> {
     fragments: Array<TextFragmentWithStyle>;
 }
 export interface TextFragmentWithStyle extends Partial<TextFragmentStyle> {
-    data: string;
+    content: string;
 }
-export type TextData = string | TextParagraphWithDataAndStyle | TextParagraphWithFragmentsAndStyle | Array<TextParagraphWithDataAndStyle | TextParagraphWithFragmentsAndStyle>;
+export type TextData = string | TextParagraphWithContentAndStyle | TextParagraphWithFragmentsAndStyle | Array<TextParagraphWithContentAndStyle | TextParagraphWithFragmentsAndStyle>;
 export interface TextOptions {
     view?: HTMLCanvasElement;
     pixelRatio?: number;
-    data?: TextData;
+    content?: TextData;
     style?: Partial<TextStyle>;
 }
-export interface MeasureResult {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
+export interface MeasureResult extends BoundingBox {
     paragraphs: Array<TextParagraph>;
 }
 export declare class Text {
@@ -81,10 +77,10 @@ export declare class Text {
     readonly context: CanvasRenderingContext2D;
     pixelRatio: number;
     style: TextStyle;
-    data: TextData;
+    content: TextData;
     constructor(options?: TextOptions);
-    measure(width?: number, height?: number): MeasureResult;
-    protected _createParagraphs(data: TextData): Array<TextParagraph>;
+    measure(width?: number, _height?: number): MeasureResult;
+    protected _createParagraphs(content: TextData): Array<TextParagraph>;
     protected _createWrapedParagraphs(paragraphs: Array<TextParagraph>, width: number): Array<TextParagraph>;
     protected _draw(paragraphs: Array<TextParagraph>): void;
     protected _resizeView(width: number, height: number): void;