modern-text 0.0.1 → 0.0.2

package/README.md

@@ -31,15 +31,15 @@ const text = new Text({
     backgroundColor: '#0000FF',
     textDecoration: 'underline',
   },
-  content: [
+  data: [
     {
       fragments: [
-        { content: 'He', style: { color: 'red', fontSize: 12 } },
-        { content: 'llo', style: { color: 'black' } },
+        { data: 'He', style: { color: 'red', fontSize: 12 } },
+        { data: 'llo', style: { color: 'black' } },
       ],
     },
-    { content: ', ', style: { color: 'grey' } },
-    { content: 'World!', style: { color: 'black' } },
+    { data: ', ', style: { color: 'grey' } },
+    { data: 'World!', style: { color: 'black' } },
   ],
 })
 

package/dist/index.cjs

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

package/dist/index.js

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

package/dist/index.mjs

@@ -2,11 +2,11 @@ class X {
   constructor(t = {}) {
     const {
       view: e = document.createElement("canvas"),
-      pixelRatio: i = window.devicePixelRatio || 1,
-      content: o = "",
+      pixelRatio: a = window.devicePixelRatio || 1,
+      data: o = "",
       style: n
     } = t;
-    this.view = e, this.context = e.getContext("2d"), this.pixelRatio = i, this.content = o, this.style = {
+    this.view = e, this.context = e.getContext("2d"), this.pixelRatio = a, this.data = o, this.style = {
       width: 0,
       height: 0,
       color: "#000000",
@@ -32,68 +32,68 @@ class X {
     }, this.update();
   }
   measure(t = 0, e = 0) {
-    let i = this._createParagraphs(this.content);
-    i = this._createWrapedParagraphs(i, t);
+    let a = this._createParagraphs(this.data);
+    a = this._createWrapedParagraphs(a, t);
     const o = this.context;
     let n = 0;
-    for (let h = i.length, r = 0; r < h; r++) {
-      const s = i[r];
+    for (let h = a.length, r = 0; r < h; r++) {
+      const s = a[r];
       s.relativeX = 0, s.relativeY = n, s.width = 0, s.height = 0;
-      let a = 0, u;
+      let i = 0, u;
       for (const c of s.fragments) {
-        const g = this._getFragmentStyle(c.style);
-        this._setContextStyle(g);
-        const f = o.measureText(c.content), d = f.width, x = f.actualBoundingBoxRight + f.actualBoundingBoxLeft;
-        c.relativeX = a, c.relativeY = s.relativeY, c.width = d, c.actualBoundingBoxWidth = x, c.height = g.fontSize * g.lineHeight, a += d + g.letterSpacing, u = c, s.height = Math.max(s.height, c.height);
+        const f = this._getFragmentStyle(c.style);
+        this._setContextStyle(f);
+        const d = o.measureText(c.data), g = d.width, x = d.actualBoundingBoxRight + d.actualBoundingBoxLeft;
+        c.relativeX = i, c.relativeY = s.relativeY, c.width = g, c.actualBoundingBoxWidth = x, c.height = f.fontSize * f.lineHeight, i += g + f.letterSpacing, u = c, s.height = Math.max(s.height, c.height);
       }
       s.width = u ? u.relativeX + Math.max(u.width, u.actualBoundingBoxWidth) : 0, n += s.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 });
+    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 });
     t = t || l.width, e = Math.max(e, l.height);
-    for (let h = i.length, r = 0; r < h; r++) {
-      const s = i[r];
+    for (let h = a.length, r = 0; r < h; r++) {
+      const s = a[r];
       switch (this.style.textAlign) {
         case "center":
-          s.absoluteX = (t - l.width) / 2, s.fragments.forEach((a) => {
-            a.absoluteX = s.absoluteX + a.relativeX, a.fillX = a.absoluteX + a.width / 2;
+          s.absoluteX = (t - l.width) / 2, s.fragments.forEach((i) => {
+            i.absoluteX = s.absoluteX + i.relativeX, i.fillX = i.absoluteX + i.width / 2;
           });
           break;
         case "end":
         case "right":
-          s.absoluteX = t - l.width, s.fragments.forEach((a) => {
-            a.absoluteX = s.absoluteX + a.relativeX, a.fillX = a.absoluteX + a.width;
+          s.absoluteX = t - l.width, s.fragments.forEach((i) => {
+            i.absoluteX = s.absoluteX + i.relativeX, i.fillX = i.absoluteX + i.width;
           });
           break;
         case "start":
         case "left":
         default:
-          s.absoluteX = 0, s.fragments.forEach((a) => {
-            a.absoluteX = s.absoluteX + a.relativeX, a.fillX = a.absoluteX;
+          s.absoluteX = 0, s.fragments.forEach((i) => {
+            i.absoluteX = s.absoluteX + i.relativeX, i.fillX = i.absoluteX;
           });
           break;
       }
       switch (this.style.textBaseline) {
         case "top":
         case "hanging":
-          s.absoluteY = s.relativeY, s.fragments.forEach((a) => {
-            a.absoluteY = s.absoluteY, a.fillY = a.absoluteY;
+          s.absoluteY = s.relativeY, s.fragments.forEach((i) => {
+            i.absoluteY = s.absoluteY, i.fillY = i.absoluteY;
           });
           break;
         case "middle":
         case "alphabetic":
         case "ideographic":
-          s.absoluteY = s.relativeY + (e - l.height) / 2, s.fragments.forEach((a) => {
-            a.absoluteY = s.absoluteY, a.fillY = a.absoluteY + s.height / 2;
+          s.absoluteY = s.relativeY + (e - l.height) / 2, s.fragments.forEach((i) => {
+            i.absoluteY = s.absoluteY, i.fillY = i.absoluteY + s.height / 2;
           });
           break;
         case "bottom":
-          s.absoluteY = s.relativeY + e - l.height, s.fragments.forEach((a) => {
-            a.absoluteY = s.absoluteY, a.fillY = a.absoluteY + s.height;
+          s.absoluteY = s.relativeY + e - l.height, s.fragments.forEach((i) => {
+            i.absoluteY = s.absoluteY, i.fillY = i.absoluteY + s.height;
           });
           break;
       }
     }
-    return { ...l, paragraphs: i };
+    return { ...l, paragraphs: a };
   }
   _createParagraphs(t) {
     const e = {
@@ -104,28 +104,28 @@ class X {
       relativeY: 0,
       absoluteX: 0,
       absoluteY: 0
-    }, i = (l = {}) => ({ ...e, fragments: [], ...l }), o = (l = {}) => {
-      const h = [], r = l.content ?? "";
-      return h.push({ fillX: 0, fillY: 0, style: {}, ...e, ...l, content: r }), h;
+    }, a = (l = {}) => ({ ...e, fragments: [], ...l }), o = (l = {}) => {
+      const h = [], r = l.data ?? "";
+      return h.push({ fillX: 0, fillY: 0, style: {}, ...e, ...l, data: r }), h;
     }, n = [];
     if (typeof t == "string")
       t && n.push(
-        i({
-          fragments: o({ content: t })
+        a({
+          fragments: o({ data: t })
         })
       );
     else {
       t = Array.isArray(t) ? t : [t];
       for (const l of t) {
-        const h = i();
+        const h = a();
         if (l.fragments)
           for (const r of l.fragments)
             h.fragments.push(
-              ...o({ content: r.content, style: { ...l.style, ...r.style } })
+              ...o({ data: r.data, style: { ...l.style, ...r.style } })
             );
         else
-          l.content && h.fragments.push(
-            ...o({ content: l.content, style: l.style })
+          l.data && h.fragments.push(
+            ...o({ data: l.data, style: l.style })
           );
         n.push(h);
       }
@@ -133,57 +133,57 @@ class X {
     return n;
   }
   _createWrapedParagraphs(t, e) {
-    const i = [], o = t.slice();
+    const a = [], o = t.slice();
     let n, l;
     for (; n = o.shift(); ) {
       const h = n.fragments.slice();
       let r = 0;
       const s = [];
-      let a = !0;
+      let i = !0;
       for (; l = h.shift(); ) {
         const u = this._getFragmentStyle(l.style);
         this._setContextStyle(u);
-        let c = "", g = !1;
-        for (const f of l.content) {
-          const d = this.context.measureText(f).width + (a ? 0 : u.letterSpacing), x = /^[\r\n]$/.test(f);
-          if (x || u.textWrap === "wrap" && e && r + d > e) {
+        let c = "", f = !1;
+        for (const d of l.data) {
+          const g = this.context.measureText(d).width + (i ? 0 : u.letterSpacing), x = /^[\r\n]$/.test(d);
+          if (x || u.textWrap === "wrap" && e && r + g > e) {
             let b = x ? c.length + 1 : c.length;
-            !r && !b && (c += f, b++), c.length && s.push({ ...l, text: c }), s.length && (i.push({ ...n, fragments: s.slice() }), s.length = 0);
-            const w = l.content.substring(b);
+            !r && !b && (c += d, b++), c.length && s.push({ ...l, text: c }), s.length && (a.push({ ...n, fragments: s.slice() }), s.length = 0);
+            const w = l.data.substring(b);
             (w.length || h.length) && o.unshift({
               ...n,
-              fragments: (w.length ? [{ ...l, content: w }] : []).concat(h.slice())
-            }), h.length = 0, g = !0;
+              fragments: (w.length ? [{ ...l, data: w }] : []).concat(h.slice())
+            }), h.length = 0, f = !0;
             break;
           } else
-            r += d;
-          c += f;
+            r += g;
+          c += d;
         }
-        g || s.push({ ...l }), a = !1;
+        f || s.push({ ...l }), i = !1;
       }
-      s.length && i.push({ ...n, fragments: s });
+      s.length && a.push({ ...n, fragments: s });
     }
-    return i;
+    return a;
   }
   _draw(t) {
     const e = this.context;
-    t.forEach((i) => {
-      i.fragments.forEach((o) => {
+    t.forEach((a) => {
+      a.fragments.forEach((o) => {
         const n = this._getFragmentStyle(o.style);
-        switch (this._setContextStyle(n), n.textStrokeWidth && e.strokeText(o.content, o.fillX, o.fillY), e.fillText(o.content, o.fillX, o.fillY), n.textDecoration) {
+        switch (this._setContextStyle(n), n.textStrokeWidth && e.strokeText(o.data, o.fillX, o.fillY), e.fillText(o.data, o.fillX, o.fillY), n.textDecoration) {
           case "underline":
-            e.beginPath(), e.moveTo(o.absoluteX, i.absoluteY + i.height - 2), e.lineTo(o.absoluteX + o.width, i.absoluteY + i.height - 2), e.stroke();
+            e.beginPath(), e.moveTo(o.absoluteX, a.absoluteY + a.height - 2), e.lineTo(o.absoluteX + o.width, a.absoluteY + a.height - 2), e.stroke();
             break;
           case "line-through":
-            e.beginPath(), e.moveTo(o.absoluteX, i.absoluteY + i.height / 2), e.lineTo(o.absoluteX + o.width, i.absoluteY + i.height / 2), e.stroke();
+            e.beginPath(), e.moveTo(o.absoluteX, a.absoluteY + a.height / 2), e.lineTo(o.absoluteX + o.width, a.absoluteY + a.height / 2), e.stroke();
             break;
         }
       });
     });
   }
   _resizeCanvas(t, e) {
-    const i = this.view;
-    i.style.width = `${t}px`, i.style.height = `${e}px`, i.dataset.width = String(t), i.dataset.height = String(e), i.width = Math.max(1, Math.floor(t * this.pixelRatio)), i.height = Math.max(1, Math.floor(e * this.pixelRatio));
+    const a = this.view;
+    a.style.width = `${t}px`, a.style.height = `${e}px`, a.dataset.width = String(t), a.dataset.height = String(e), a.width = Math.max(1, Math.floor(t * this.pixelRatio)), a.height = Math.max(1, Math.floor(e * this.pixelRatio));
   }
   _getFragmentStyle(t = {}) {
     return { ...this.style, ...t };
@@ -199,9 +199,9 @@ class X {
   }
   update() {
     const t = this.context;
-    let { width: e, height: i } = this.style;
-    const o = this.measure(e, i);
-    e || (e = o.width), i = Math.max(i, o.height), this._resizeCanvas(e, i);
+    let { width: e, height: a } = this.style;
+    const o = this.measure(e, a);
+    e || (e = o.width), a = Math.max(a, o.height), this._resizeCanvas(e, a);
     const n = this.pixelRatio;
     t.scale(n, n), t.clearRect(0, 0, t.canvas.width, t.canvas.height), this._draw(o.paragraphs);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-text",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "packageManager": "pnpm@8.14.1",
   "description": "Starter template for TypeScript library",
   "author": "wxm",

package/types/Text.d.ts

@@ -6,12 +6,12 @@ export type TextAlign = 'center' | 'end' | 'left' | 'right' | 'start';
 export type TextBaseline = 'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top';
 export type TextDecoration = 'underline' | 'line-through';
 export interface TextParagraphWithStyle {
-    content?: string;
+    data?: string;
     style?: Partial<TextFragmentStyle>;
     fragments?: Array<TextFragmentWithStyle>;
 }
 export interface TextFragmentWithStyle {
-    content: string;
+    data: string;
     style?: Partial<TextFragmentStyle>;
 }
 export interface TextParagraph {
@@ -33,7 +33,7 @@ export interface TextFragment {
     absoluteY: number;
     fillX: number;
     fillY: number;
-    content: string;
+    data: string;
     style: Partial<TextFragmentStyle>;
 }
 export interface TextStyle {
@@ -60,10 +60,11 @@ export interface TextStyle {
     shadowBlur: number;
 }
 export type TextFragmentStyle = Omit<TextStyle, 'width' | 'height'>;
+export type TextData = string | TextParagraphWithStyle | Array<TextParagraphWithStyle>;
 export interface TextProperties {
     view?: HTMLCanvasElement;
     pixelRatio?: number;
-    content?: string | Array<TextParagraphWithStyle>;
+    data?: TextData;
     style?: Partial<TextStyle>;
 }
 export interface MeasureResult {
@@ -78,10 +79,10 @@ export declare class Text {
     readonly context: CanvasRenderingContext2D;
     pixelRatio: number;
     style: TextStyle;
-    content: string | Array<TextParagraphWithStyle>;
+    data: TextData;
     constructor(properties?: TextProperties);
     measure(width?: number, height?: number): MeasureResult;
-    protected _createParagraphs(content: string | TextParagraphWithStyle | Array<TextParagraphWithStyle>): Array<TextParagraph>;
+    protected _createParagraphs(data: TextData): Array<TextParagraph>;
     protected _createWrapedParagraphs(paragraphs: Array<TextParagraph>, width: number): Array<TextParagraph>;
     protected _draw(paragraphs: Array<TextParagraph>): void;
     protected _resizeCanvas(width: number, height: number): void;