modern-text 0.0.2 → 0.0.4

package/README.md

@@ -28,22 +28,22 @@ const text = new Text({
     width: 100,
     height: 200,
     fontSize: 22,
-    backgroundColor: '#0000FF',
     textDecoration: 'underline',
   },
   data: [
     {
+      letterSpacing: 3,
       fragments: [
-        { data: 'He', style: { color: 'red', fontSize: 12 } },
-        { data: 'llo', style: { color: 'black' } },
+        { data: 'He', color: 'red', fontSize: 12 },
+        { data: 'llo', color: 'black' },
       ],
     },
-    { data: ', ', style: { color: 'grey' } },
-    { data: 'World!', style: { color: 'black' } },
+    { data: ', ', color: 'grey' },
+    { data: 'World!', color: 'black' },
   ],
 })
 
 document.body.append(text.view) // canvas 2d
 
-console.log(text.measure()) // boundingBox with paragraphs
+console.log(text.measure()) // boundingBox with computed paragraphs
 ```

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: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;
+"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;

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,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"})});
+(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"})});

package/dist/index.mjs

@@ -1,14 +1,8 @@
-class X {
-  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,
+class p {
+  static get defaultStyle() {
+    return {
+      width: "auto",
+      height: "auto",
       color: "#000000",
       fontSize: 14,
       fontWeight: "normal",
@@ -27,185 +21,201 @@ class X {
       shadowColor: "#000000",
       shadowOffsetX: 0,
       shadowOffsetY: 0,
-      shadowBlur: 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(t = 0, e = 0) {
-    let a = this._createParagraphs(this.data);
-    a = this._createWrapedParagraphs(a, t);
+  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 = 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);
+    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 = 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);
+        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);
       }
-      s.width = u ? u.relativeX + Math.max(u.width, u.actualBoundingBoxWidth) : 0, n += s.height;
+      e.width = u ? u.relativeX + Math.max(u.width, u.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 });
-    t = t || l.width, e = Math.max(e, l.height);
-    for (let h = a.length, r = 0; r < h; r++) {
-      const s = a[r];
+    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":
-          s.absoluteX = (t - l.width) / 2, s.fragments.forEach((i) => {
-            i.absoluteX = s.absoluteX + i.relativeX, i.fillX = i.absoluteX + i.width / 2;
+          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":
-          s.absoluteX = t - l.width, s.fragments.forEach((i) => {
-            i.absoluteX = s.absoluteX + i.relativeX, i.fillX = i.absoluteX + i.width;
+          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:
-          s.absoluteX = 0, s.fragments.forEach((i) => {
-            i.absoluteX = s.absoluteX + i.relativeX, i.fillX = i.absoluteX;
+          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":
-          s.absoluteY = s.relativeY, s.fragments.forEach((i) => {
-            i.absoluteY = s.absoluteY, i.fillY = i.absoluteY;
+          e.absoluteY = e.relativeY, e.fragments.forEach((s) => {
+            s.absoluteY = e.absoluteY, s.fillY = s.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;
+          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":
-          s.absoluteY = s.relativeY + e - l.height, s.fragments.forEach((i) => {
-            i.absoluteY = s.absoluteY, i.fillY = i.absoluteY + s.height;
+          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: a };
+    return { ...l, paragraphs: i };
   }
-  _createParagraphs(t) {
-    const e = {
+  _createParagraphs(a) {
+    const t = {
       width: 0,
-      actualBoundingBoxWidth: 0,
       height: 0,
+      actualBoundingBoxWidth: 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;
+    }, 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 t == "string")
-      t && n.push(
-        a({
-          fragments: o({ data: t })
-        })
-      );
+    if (typeof a == "string")
+      n.push(i({ fragments: o({ data: a }) }));
     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 })
-          );
+      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(t, e) {
-    const a = [], o = t.slice();
+  _createWrapedParagraphs(a, t) {
+    const i = [], o = a.slice();
     let n, l;
     for (; n = o.shift(); ) {
       const h = n.fragments.slice();
       let r = 0;
-      const s = [];
-      let i = !0;
+      const e = [];
+      let s = !0;
       for (; l = h.shift(); ) {
-        const u = this._getFragmentStyle(l.style);
+        const u = 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({
+          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: (w.length ? [{ ...l, data: w }] : []).concat(h.slice())
+              fragments: (b.length ? [{ ...l, data: b }] : []).concat(h.slice())
             }), h.length = 0, f = !0;
             break;
           } else
             r += g;
           c += d;
         }
-        f || s.push({ ...l }), i = !1;
+        f || e.push({ ...l }), s = !1;
       }
-      s.length && a.push({ ...n, fragments: s });
+      e.length && i.push({ ...n, fragments: e });
     }
-    return a;
+    return i;
   }
-  _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) {
+  _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":
-            e.beginPath(), e.moveTo(o.absoluteX, a.absoluteY + a.height - 2), e.lineTo(o.absoluteX + o.width, a.absoluteY + a.height - 2), e.stroke();
+            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":
-            e.beginPath(), e.moveTo(o.absoluteX, a.absoluteY + a.height / 2), e.lineTo(o.absoluteX + o.width, a.absoluteY + a.height / 2), e.stroke();
+            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;
         }
       });
     });
   }
-  _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 };
+  _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(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`;
+  _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 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 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;
-    t.scale(n, n), t.clearRect(0, 0, t.canvas.width, t.canvas.height), this._draw(o.paragraphs);
+    a.scale(n, n), a.clearRect(0, 0, a.canvas.width, a.canvas.height), this._draw(o.paragraphs);
   }
 }
 export {
-  X as Text
+  p as Text
 };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "modern-text",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "packageManager": "pnpm@8.14.1",
-  "description": "Starter template for TypeScript library",
+  "description": "Text measurement and rendering of canvas 2d",
   "author": "wxm",
   "license": "MIT",
   "homepage": "https://github.com/qq15725/modern-text",

package/types/Text.d.ts

@@ -5,15 +5,6 @@ export type TextWrap = 'wrap' | 'nowrap';
 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 {
-    data?: string;
-    style?: Partial<TextFragmentStyle>;
-    fragments?: Array<TextFragmentWithStyle>;
-}
-export interface TextFragmentWithStyle {
-    data: string;
-    style?: Partial<TextFragmentStyle>;
-}
 export interface TextParagraph {
     width: number;
     height: number;
@@ -25,8 +16,8 @@ export interface TextParagraph {
 }
 export interface TextFragment {
     width: number;
-    actualBoundingBoxWidth: number;
     height: number;
+    actualBoundingBoxWidth: number;
     relativeX: number;
     relativeY: number;
     absoluteX: number;
@@ -34,11 +25,9 @@ export interface TextFragment {
     fillX: number;
     fillY: number;
     data: string;
-    style: Partial<TextFragmentStyle>;
+    style: TextFragmentStyle;
 }
-export interface TextStyle {
-    width: number;
-    height: number;
+export interface TextFragmentStyle {
     color: string;
     fontSize: number;
     fontWeight: FontWeight;
@@ -59,9 +48,21 @@ export interface TextStyle {
     shadowOffsetY: number;
     shadowBlur: number;
 }
-export type TextFragmentStyle = Omit<TextStyle, 'width' | 'height'>;
-export type TextData = string | TextParagraphWithStyle | Array<TextParagraphWithStyle>;
-export interface TextProperties {
+export interface TextStyle extends TextFragmentStyle {
+    width: number | 'auto';
+    height: number | 'auto';
+}
+export interface TextParagraphWithDataAndStyle extends Partial<TextFragmentStyle> {
+    data: string;
+}
+export interface TextParagraphWithFragmentsAndStyle extends Partial<TextFragmentStyle> {
+    fragments: Array<TextFragmentWithStyle>;
+}
+export interface TextFragmentWithStyle extends Partial<TextFragmentStyle> {
+    data: string;
+}
+export type TextData = string | TextParagraphWithDataAndStyle | TextParagraphWithFragmentsAndStyle | Array<TextParagraphWithDataAndStyle | TextParagraphWithFragmentsAndStyle>;
+export interface TextOptions {
     view?: HTMLCanvasElement;
     pixelRatio?: number;
     data?: TextData;
@@ -75,18 +76,18 @@ export interface MeasureResult {
     paragraphs: Array<TextParagraph>;
 }
 export declare class Text {
+    static get defaultStyle(): TextStyle;
     readonly view: HTMLCanvasElement;
     readonly context: CanvasRenderingContext2D;
     pixelRatio: number;
     style: TextStyle;
     data: TextData;
-    constructor(properties?: TextProperties);
+    constructor(options?: TextOptions);
     measure(width?: number, height?: number): MeasureResult;
     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;
-    protected _getFragmentStyle(style?: Partial<TextStyle>): TextStyle;
-    protected _setContextStyle(style: TextStyle): void;
+    protected _resizeView(width: number, height: number): void;
+    protected _setContextStyle(style: TextFragmentStyle): void;
     update(): void;
 }