modern-text 0.0.4 → 0.0.5

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 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(i={}){const{view:t=document.createElement("canvas"),pixelRatio:a=window.devicePixelRatio||1,data:o="",style:n}=i;this.view=t,this.context=t.getContext("2d"),this.pixelRatio=a,this.data=o,this.style={...p.defaultStyle,...n},this.update()}measure(i=0,t=0){let a=this._createParagraphs(this.data);a=this._createWrapedParagraphs(a,i);const o=this.context;let n=0;for(let h=a.length,r=0;r<h;r++){const e=a[r];e.relativeX=0,e.relativeY=n,e.width=0,e.height=0;let u=0,s;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=u,c.relativeY=e.relativeY,c.width=g,c.actualBoundingBoxWidth=x,c.data.match(/^\s$/)?c.height=0:c.height=f.fontSize*f.lineHeight,u+=g+f.letterSpacing,s=c,e.height=Math.max(e.height,c.height)}e.width=s?s.relativeX+Math.max(s.width,s.actualBoundingBoxWidth):0,n+=e.height}const l=a.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=a.length,r=0;r<h;r++){const e=a[r];switch(this.style.textAlign){case"center":e.absoluteX=(i-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=i-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}const u=t-l.height;switch(this.style.textBaseline){case"bottom":e.absoluteY=e.relativeY+u,e.fragments.forEach(s=>{s.absoluteY=e.absoluteY+(e.height-s.height),s.fillY=s.absoluteY+s.height});break;case"middle":case"alphabetic":case"ideographic":e.absoluteY=e.relativeY+u/2,e.fragments.forEach(s=>{s.absoluteY=e.absoluteY+(e.height-s.height)/2,s.fillY=s.absoluteY+s.height/2});break;case"top":case"hanging":default:e.absoluteY=e.relativeY,e.fragments.forEach(s=>s.fillY=s.absoluteY=e.absoluteY);break}}return{...l,paragraphs:a}}_createParagraphs(i){const t={width:0,height:0,actualBoundingBoxWidth:0,relativeX:0,relativeY:0,absoluteX:0,absoluteY:0},a=(l={})=>({...t,fragments:[],...l}),o=(l={})=>{const h=[],{width:r,height:e,...u}=this.style;return h.push({fillX:0,fillY:0,...t,...l,style:{...u,...l.style},data:l.data??""}),h},n=[];if(typeof i=="string")n.push(a({fragments:o({data:i})}));else{i=Array.isArray(i)?i:[i];for(const l of i){const h=a();if("fragments"in l){const{fragments:r,...e}=l;for(const u of r){const{data:s,...c}=u;h.fragments.push(...o({data:s,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 a=[],o=i.slice();let n,l;for(;n=o.shift();){const h=n.fragments.slice();let r=0;const e=[];let u=!0;for(;l=h.shift();){const s=l.style;this._setContextStyle(s);let c="",f=!1;for(const d of l.data){const g=this.context.measureText(d).width+(u?0:s.letterSpacing),x=/^[\r\n]$/.test(d);if(x||s.textWrap==="wrap"&&t&&r+g>t){let b=x?c.length+1:c.length;!r&&!b&&(c+=d,b++),c.length&&e.push({...l,text:c}),e.length&&(a.push({...n,fragments:e.slice()}),e.length=0);const w=l.data.substring(b);(w.length||h.length)&&o.unshift({...n,fragments:(w.length?[{...l,data:w}]:[]).concat(h.slice())}),h.length=0,f=!0;break}else r+=g;c+=d}f||e.push({...l}),u=!1}e.length&&a.push({...n,fragments:e})}return a}_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(a=>{a.fragments.forEach(o=>{const n=o.style;switch(n.backgroundColor&&(t.fillStyle=n.backgroundColor,t.fillRect(o.absoluteX,o.absoluteY,o.width,o.height)),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,a.absoluteY+a.height-2),t.lineTo(o.absoluteX+o.width,a.absoluteY+a.height-2),t.stroke();break;case"line-through":t.beginPath(),t.moveTo(o.absoluteX,a.absoluteY+a.height/2),t.lineTo(o.absoluteX+o.width,a.absoluteY+a.height/2),t.stroke();break}})})}_resizeView(i,t){const a=this.view;a.style.width=`${i}px`,a.style.height=`${t}px`,a.dataset.width=String(i),a.dataset.height=String(t),a.width=Math.max(1,Math.floor(i*this.pixelRatio)),a.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:a}=this.style;t==="auto"&&(t=0),a==="auto"&&(a=0);const o=this.measure(t,a);t||(t=o.width),a=Math.max(a,o.height),this._resizeView(t,a);const n=this.pixelRatio;i.scale(n,n),i.clearRect(0,0,i.canvas.width,i.canvas.height),this._draw(o.paragraphs)}}exports.Text=p;

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(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:a=window.devicePixelRatio||1,data:o="",style:n}=i;this.view=t,this.context=t.getContext("2d"),this.pixelRatio=a,this.data=o,this.style={...f.defaultStyle,...n},this.update()}measure(i=0,t=0){let a=this._createParagraphs(this.data);a=this._createWrapedParagraphs(a,i);const o=this.context;let n=0;for(let h=a.length,r=0;r<h;r++){const e=a[r];e.relativeX=0,e.relativeY=n,e.width=0,e.height=0;let d=0,s;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=d,c.relativeY=e.relativeY,c.width=b,c.actualBoundingBoxWidth=w,c.data.match(/^\s$/)?c.height=0:c.height=g.fontSize*g.lineHeight,d+=b+g.letterSpacing,s=c,e.height=Math.max(e.height,c.height)}e.width=s?s.relativeX+Math.max(s.width,s.actualBoundingBoxWidth):0,n+=e.height}const l=a.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=a.length,r=0;r<h;r++){const e=a[r];switch(this.style.textAlign){case"center":e.absoluteX=(i-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=i-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}const d=t-l.height;switch(this.style.textBaseline){case"bottom":e.absoluteY=e.relativeY+d,e.fragments.forEach(s=>{s.absoluteY=e.absoluteY+(e.height-s.height),s.fillY=s.absoluteY+s.height});break;case"middle":case"alphabetic":case"ideographic":e.absoluteY=e.relativeY+d/2,e.fragments.forEach(s=>{s.absoluteY=e.absoluteY+(e.height-s.height)/2,s.fillY=s.absoluteY+s.height/2});break;case"top":case"hanging":default:e.absoluteY=e.relativeY,e.fragments.forEach(s=>s.fillY=s.absoluteY=e.absoluteY);break}}return{...l,paragraphs:a}}_createParagraphs(i){const t={width:0,height:0,actualBoundingBoxWidth:0,relativeX:0,relativeY:0,absoluteX:0,absoluteY:0},a=(l={})=>({...t,fragments:[],...l}),o=(l={})=>{const h=[],{width:r,height:e,...d}=this.style;return h.push({fillX:0,fillY:0,...t,...l,style:{...d,...l.style},data:l.data??""}),h},n=[];if(typeof i=="string")n.push(a({fragments:o({data:i})}));else{i=Array.isArray(i)?i:[i];for(const l of i){const h=a();if("fragments"in l){const{fragments:r,...e}=l;for(const d of r){const{data:s,...c}=d;h.fragments.push(...o({data:s,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 a=[],o=i.slice();let n,l;for(;n=o.shift();){const h=n.fragments.slice();let r=0;const e=[];let d=!0;for(;l=h.shift();){const s=l.style;this._setContextStyle(s);let c="",g=!1;for(const u of l.data){const b=this.context.measureText(u).width+(d?0:s.letterSpacing),w=/^[\r\n]$/.test(u);if(w||s.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&&(a.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}),d=!1}e.length&&a.push({...n,fragments:e})}return a}_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(a=>{a.fragments.forEach(o=>{const n=o.style;switch(n.backgroundColor&&(t.fillStyle=n.backgroundColor,t.fillRect(o.absoluteX,o.absoluteY,o.width,o.height)),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,a.absoluteY+a.height-2),t.lineTo(o.absoluteX+o.width,a.absoluteY+a.height-2),t.stroke();break;case"line-through":t.beginPath(),t.moveTo(o.absoluteX,a.absoluteY+a.height/2),t.lineTo(o.absoluteX+o.width,a.absoluteY+a.height/2),t.stroke();break}})})}_resizeView(i,t){const a=this.view;a.style.width=`${i}px`,a.style.height=`${t}px`,a.dataset.width=String(i),a.dataset.height=String(t),a.width=Math.max(1,Math.floor(i*this.pixelRatio)),a.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:a}=this.style;t==="auto"&&(t=0),a==="auto"&&(a=0);const o=this.measure(t,a);t||(t=o.width),a=Math.max(a,o.height),this._resizeView(t,a);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"})});

package/dist/index.mjs

@@ -24,48 +24,48 @@ class p {
       shadowBlur: 0
     };
   }
-  constructor(a = {}) {
+  constructor(i = {}) {
     const {
       view: t = document.createElement("canvas"),
-      pixelRatio: i = window.devicePixelRatio || 1,
+      pixelRatio: a = window.devicePixelRatio || 1,
       data: o = "",
       style: n
-    } = a;
-    this.view = t, this.context = t.getContext("2d"), this.pixelRatio = i, this.data = o, this.style = {
+    } = i;
+    this.view = t, this.context = t.getContext("2d"), this.pixelRatio = a, 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);
+  measure(i = 0, t = 0) {
+    let a = this._createParagraphs(this.data);
+    a = this._createWrapedParagraphs(a, i);
     const o = this.context;
     let n = 0;
-    for (let h = i.length, r = 0; r < h; r++) {
-      const e = i[r];
+    for (let h = a.length, r = 0; r < h; r++) {
+      const e = a[r];
       e.relativeX = 0, e.relativeY = n, e.width = 0, e.height = 0;
-      let s = 0, u;
+      let d = 0, s;
       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);
+        const u = o.measureText(c.data), g = u.width, x = u.actualBoundingBoxRight + u.actualBoundingBoxLeft;
+        c.relativeX = d, c.relativeY = e.relativeY, c.width = g, c.actualBoundingBoxWidth = x, c.data.match(/^\s$/) ? c.height = 0 : c.height = f.fontSize * f.lineHeight, d += g + f.letterSpacing, s = c, e.height = Math.max(e.height, c.height);
       }
-      e.width = u ? u.relativeX + Math.max(u.width, u.actualBoundingBoxWidth) : 0, n += e.height;
+      e.width = s ? s.relativeX + Math.max(s.width, s.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];
+    const l = a.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 = a.length, r = 0; r < h; r++) {
+      const e = a[r];
       switch (this.style.textAlign) {
         case "center":
-          e.absoluteX = (a - l.width) / 2, e.fragments.forEach((s) => {
+          e.absoluteX = (i - 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) => {
+          e.absoluteX = i - l.width, e.fragments.forEach((s) => {
             s.absoluteX = e.absoluteX + s.relativeX, s.fillX = s.absoluteX + s.width;
           });
           break;
@@ -77,30 +77,30 @@ class p {
           });
           break;
       }
+      const d = t - l.height;
       switch (this.style.textBaseline) {
-        case "top":
-        case "hanging":
-          e.absoluteY = e.relativeY, e.fragments.forEach((s) => {
-            s.absoluteY = e.absoluteY, s.fillY = s.absoluteY;
+        case "bottom":
+          e.absoluteY = e.relativeY + d, e.fragments.forEach((s) => {
+            s.absoluteY = e.absoluteY + (e.height - s.height), s.fillY = s.absoluteY + s.height;
           });
           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;
+          e.absoluteY = e.relativeY + d / 2, e.fragments.forEach((s) => {
+            s.absoluteY = e.absoluteY + (e.height - s.height) / 2, s.fillY = s.absoluteY + s.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;
-          });
+        case "top":
+        case "hanging":
+        default:
+          e.absoluteY = e.relativeY, e.fragments.forEach((s) => s.fillY = s.absoluteY = e.absoluteY);
           break;
       }
     }
-    return { ...l, paragraphs: i };
+    return { ...l, paragraphs: a };
   }
-  _createParagraphs(a) {
+  _createParagraphs(i) {
     const t = {
       width: 0,
       height: 0,
@@ -109,31 +109,31 @@ class p {
       relativeY: 0,
       absoluteX: 0,
       absoluteY: 0
-    }, i = (l = {}) => ({ ...t, fragments: [], ...l }), o = (l = {}) => {
-      const h = [], { width: r, height: e, ...s } = this.style;
+    }, a = (l = {}) => ({ ...t, fragments: [], ...l }), o = (l = {}) => {
+      const h = [], { width: r, height: e, ...d } = this.style;
       return h.push({
         fillX: 0,
         fillY: 0,
         ...t,
         ...l,
         style: {
-          ...s,
+          ...d,
           ...l.style
         },
         data: l.data ?? ""
       }), h;
     }, n = [];
-    if (typeof a == "string")
-      n.push(i({ fragments: o({ data: a }) }));
+    if (typeof i == "string")
+      n.push(a({ fragments: o({ data: i }) }));
     else {
-      a = Array.isArray(a) ? a : [a];
-      for (const l of a) {
-        const h = i();
+      i = Array.isArray(i) ? i : [i];
+      for (const l of i) {
+        const h = a();
         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 } }));
+          for (const d of r) {
+            const { data: s, ...c } = d;
+            h.fragments.push(...o({ data: s, style: { ...e, ...c } }));
           }
         } else if ("data" in l) {
           const { data: r, ...e } = l;
@@ -144,76 +144,76 @@ class p {
     }
     return n;
   }
-  _createWrapedParagraphs(a, t) {
-    const i = [], o = a.slice();
+  _createWrapedParagraphs(i, t) {
+    const a = [], o = i.slice();
     let n, l;
     for (; n = o.shift(); ) {
       const h = n.fragments.slice();
       let r = 0;
       const e = [];
-      let s = !0;
+      let d = !0;
       for (; l = h.shift(); ) {
-        const u = l.style;
-        this._setContextStyle(u);
+        const s = l.style;
+        this._setContextStyle(s);
         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({
+        for (const u of l.data) {
+          const g = this.context.measureText(u).width + (d ? 0 : s.letterSpacing), x = /^[\r\n]$/.test(u);
+          if (x || s.textWrap === "wrap" && t && r + g > t) {
+            let b = x ? c.length + 1 : c.length;
+            !r && !b && (c += u, b++), c.length && e.push({ ...l, text: c }), e.length && (a.push({ ...n, fragments: e.slice() }), e.length = 0);
+            const w = l.data.substring(b);
+            (w.length || h.length) && o.unshift({
               ...n,
-              fragments: (b.length ? [{ ...l, data: b }] : []).concat(h.slice())
+              fragments: (w.length ? [{ ...l, data: w }] : []).concat(h.slice())
             }), h.length = 0, f = !0;
             break;
           } else
             r += g;
-          c += d;
+          c += u;
         }
-        f || e.push({ ...l }), s = !1;
+        f || e.push({ ...l }), d = !1;
       }
-      e.length && i.push({ ...n, fragments: e });
+      e.length && a.push({ ...n, fragments: e });
     }
-    return i;
+    return a;
   }
-  _draw(a) {
+  _draw(i) {
     const t = this.context;
-    a.forEach((i) => {
-      i.fragments.forEach((o) => {
+    this.style.backgroundColor && (t.fillStyle = this.style.backgroundColor, t.fillRect(0, 0, t.canvas.width, t.canvas.height)), i.forEach((a) => {
+      a.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) {
+        switch (n.backgroundColor && (t.fillStyle = n.backgroundColor, t.fillRect(o.absoluteX, o.absoluteY, o.width, o.height)), 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();
+            t.beginPath(), t.moveTo(o.absoluteX, a.absoluteY + a.height - 2), t.lineTo(o.absoluteX + o.width, a.absoluteY + a.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.absoluteX, a.absoluteY + a.height / 2), t.lineTo(o.absoluteX + o.width, a.absoluteY + a.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 a = this.view;
+    a.style.width = `${i}px`, a.style.height = `${t}px`, a.dataset.width = String(i), a.dataset.height = String(t), a.width = Math.max(1, Math.floor(i * this.pixelRatio)), a.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`;
+    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 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 i = this.context;
+    let { width: t, height: a } = this.style;
+    t === "auto" && (t = 0), a === "auto" && (a = 0);
+    const o = this.measure(t, a);
+    t || (t = o.width), a = Math.max(a, o.height), this._resizeView(t, a);
     const n = this.pixelRatio;
-    a.scale(n, n), a.clearRect(0, 0, a.canvas.width, a.canvas.height), this._draw(o.paragraphs);
+    i.scale(n, n), i.clearRect(0, 0, i.canvas.width, i.canvas.height), this._draw(o.paragraphs);
   }
 }
 export {

package/package.json

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

package/types/Text.d.ts

@@ -29,6 +29,7 @@ export interface TextFragment {
 }
 export interface TextFragmentStyle {
     color: string;
+    backgroundColor?: string;
     fontSize: number;
     fontWeight: FontWeight;
     fontFamily: string;