modern-text 0.1.1 → 0.1.3

package/README.md

@@ -21,9 +21,9 @@
 ## Usage
 
 ```ts
-import { Text } from 'modern-text'
+import { measureText, renderText } from 'modern-text'
 
-const text = new Text({
+const text = {
   style: {
     width: 100,
     height: 200,
@@ -58,9 +58,9 @@ const text = new Text({
     { content: ', ', color: 'grey' },
     { content: 'World!', color: 'black' },
   ],
-})
+}
 
-document.body.append(text.view) // canvas 2d
+document.body.append(renderText(text)) // canvas 2d
 
-console.log(text.measure()) // boundingBox with computed paragraphs
+console.log(measureText(text)) // boundingBox with computed paragraphs
 ```

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function C(k,e,o,n,r){var a;const h=((a=k.match(/linear-gradient\((.+)\)$/))==null?void 0:a[1])??"",s=h.split(",")[0],t=s.includes("deg")?s:"0deg",i=h.replace(t,"").matchAll(/(#|rgba|rgb)(.+?) ([\d.]+?%)/gi),x=(Number(t.replace("deg",""))||0)*Math.PI/180,g=n*Math.sin(x),f=r*Math.cos(x);return{x0:e+n/2-g,y0:o+r/2+f,x1:e+n/2+g,y1:o+r/2-f,stops:Array.from(i).map(c=>{let B=c[2];return B.startsWith("(")?B=B.split(",").length>3?`rgba${B}`:`rgb${B}`:B=`#${B}`,{offset:Number(c[3].replace("%",""))/100,color:B}})}}const u=class u{static get defaultStyle(){return{width:"auto",height:"auto",fontSize:14,fontWeight:"normal",fontFamily:"sans-serif",fontStyle:"normal",fontKerning:"normal",textWrap:"wrap",textAlign:"start",verticalAlign:"baseline",textTransform:"none",textDecoration:null,textStrokeWidth:0,direction:"inherit",lineHeight:1,letterSpacing:0,shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,writingMode:"horizontal-tb"}}constructor(e={}){const{view:o=document.createElement("canvas"),pixelRatio:n=window.devicePixelRatio||1,content:r="",style:h}=e;this.view=o,this.context=o.getContext("2d"),this.pixelRatio=n,this.content=r,this.style={...u.defaultStyle,...h},this.update()}_createBox(e=0,o=0,n=0,r=0){return{left:e,top:o,width:n,height:r,right:e+n,bottom:o+r}}_moveBox(e,o=0,n=0){e.left+=o,e.right+=o,e.top+=n,e.bottom+=n}_updateBoxSize(e){e.width=e.right-e.left,e.height=e.bottom-e.top}_mergeBoxes(e){const o=e.slice(1).reduce((n,r)=>(n.left=Math.min(n.left,r.left),n.top=Math.min(n.top,r.top),n.right=Math.max(n.right,r.right),n.bottom=Math.max(n.bottom,r.bottom),n),{...e[0]});return this._updateBoxSize(o),o}measure(){let{width:e}=this.style;e==="auto"&&(e=0);let o=this._createParagraphs(this.content);o=this._wrapParagraphs(o,e);const n=this.context;let r=0;for(let h=o.length,s=0;s<h;s++){const t=o[s],i=[];let l=0,x=null;for(const a of t.fragments){this._setContextStyle({...a.style,textAlign:"center",verticalAlign:"baseline"});const c=n.measureText(a.content),B=c.width,d=a.style.fontSize;a.inlineBox=this._createBox(l,r,B,d*a.style.lineHeight),a.contentBox=this._createBox(a.inlineBox.left,a.inlineBox.top+(a.inlineBox.height-d)/2,B,d);const p=c.fontBoundingBoxAscent+c.fontBoundingBoxDescent,w=c.actualBoundingBoxLeft+c.actualBoundingBoxRight,y=c.actualBoundingBoxAscent+c.actualBoundingBoxDescent;a.baseline=a.inlineBox.top+(a.inlineBox.height-p)/2+c.fontBoundingBoxAscent,a.glyphBox=this._createBox(a.contentBox.left,a.baseline-c.actualBoundingBoxAscent,w,y),a.centerX=a.glyphBox.left+c.actualBoundingBoxLeft,l+=a.contentBox.width,i.push(a.contentBox),t.contentBox=this._mergeBoxes(i),t.contentBox.height<a.contentBox.height&&(x=a)}t.lineBox=this._mergeBoxes([...t.fragments.map(a=>a.inlineBox),this._createBox(0,r,e)]),this._setContextStyle({...(x??t).style,textAlign:"left",verticalAlign:"baseline"});const g=n.measureText("x"),f=g.fontBoundingBoxAscent+g.fontBoundingBoxDescent;t.xHeight=g.actualBoundingBoxAscent,t.baseline=t.lineBox.top+(t.lineBox.height-f)/2+g.fontBoundingBoxAscent,r+=t.lineBox.height}for(let h=o.length,s=0;s<h;s++){const t=o[s];t.fragments.forEach(i=>{const l=i.inlineBox.left,x=i.inlineBox.top;let g,f=x;switch(i.style.textAlign){case"end":case"right":g=l+(t.lineBox.width-t.contentBox.width);break;case"center":g=l+(t.lineBox.width-t.contentBox.width)/2;break;case"start":case"left":default:g=l+t.lineBox.left;break}switch(i.style.verticalAlign){case"top":f=x+(t.lineBox.top-i.inlineBox.top);break;case"middle":f=t.baseline-t.xHeight/2-i.inlineBox.height/2;break;case"bottom":f=x+(t.lineBox.bottom-i.inlineBox.bottom);break;case"sub":f=x+(t.baseline-i.glyphBox.bottom);break;case"super":f=x+(t.baseline-i.glyphBox.top);break;case"text-top":f=x+(t.glyphBox.top-i.inlineBox.top);break;case"text-bottom":f=x+(t.glyphBox.bottom-i.inlineBox.bottom);break;case"baseline":default:i.inlineBox.height<t.lineBox.height&&(f=x+(t.baseline-i.baseline));break}const a=g-l,c=f-x;this._moveBox(i.inlineBox,a,c),this._moveBox(i.contentBox,a,c),this._moveBox(i.glyphBox,a,c),i.baseline+=c,i.centerX+=a}),t.contentBox=this._mergeBoxes(t.fragments.map(i=>i.contentBox)),t.glyphBox=this._mergeBoxes(t.fragments.map(i=>i.glyphBox))}return{actualContentBox:this._mergeBoxes(o.map(h=>h.contentBox)),contentBox:this._mergeBoxes(o.map(h=>h.lineBox)),glyphBox:this._mergeBoxes(o.map(h=>h.glyphBox)),paragraphs:o}}_createParagraphs(e){const o=new Set(["color","backgroundColor","textStrokeColor","shadowColor"]),n=(...t)=>{const i=t.pop();return t.reduce((l,x)=>{for(const g in x)o.has(g)||(l[g]=x[g]);return l},i)},r=(t={})=>{const{width:i,height:l,...x}=this.style;return{contentBox:this._createBox(),lineBox:this._createBox(),glyphBox:this._createBox(),baseline:0,fragments:[],...t,style:n(x,t.style??{})}},h=(t,i)=>{let l;if(typeof t=="string")l={content:t};else{const{content:B,...d}=t;l={content:B,style:d}}const{width:x,height:g,...f}=this.style,a=n(f,i??{},l.style??{});let c=l.content??"";switch(a.textTransform){case"uppercase":c=c.toUpperCase();break;case"lowercase":c=c.toLowerCase();break}return{contentBox:this._createBox(),inlineBox:this._createBox(),glyphBox:this._createBox(),centerX:0,baseline:0,...l,style:a,content:c}},s=[];if(typeof e=="string")s.push(r({fragments:[h(e)]}));else{e=Array.isArray(e)?e:[e];for(const t of e)if(typeof t=="string")s.push(r({fragments:[h(t)]}));else if(Array.isArray(t))s.push(r({fragments:t.map(i=>h(i))}));else if("fragments"in t){const{fragments:i,...l}=t;s.push(r({style:l,fragments:i.map(x=>h(x,l))}))}else if("content"in t){const{content:i,...l}=t;s.push(r({style:l,fragments:[h(i,l)]}))}}return s}_wrapParagraphs(e,o){var i;const n=l=>JSON.parse(JSON.stringify(l)),r=[],h=e.slice();let s,t;for(;s=h.shift();){const l=s.fragments.slice();let x=0;const g=[];for(;t=l.shift();){const f=t.style,a=(i=f.writingMode)==null?void 0:i.startsWith("vertical");this._setContextStyle(f);let c="",B=!1,d=0,p="";for(const w of t.content){if(p+=w,!a&&u.punctuationRegex.test(t.content[++d]))continue;const y=this.context.measureText(p).width,S=/^[\r\n]$/.test(p);if(S||a||f.textWrap==="wrap"&&o&&x+y>o){let m=S?c.length+1:c.length;!x&&!m&&(c+=p,m+=p.length),c.length&&g.push({...n(t),content:c}),g.length&&(r.push({...n(s),fragments:g.slice()}),g.length=0);const b=t.content.substring(m);(b.length||l.length)&&h.unshift({...n(s),fragments:(b.length?[{...n(t),content:b}]:[]).concat(l.slice())}),l.length=0,B=!0;break}else x+=y;c+=p,p=""}B||g.push(n(t))}g.length&&r.push({...n(s),fragments:g})}return r}_draw(e){const o=this.context,{width:n,height:r}=o.canvas,h={left:0,top:0,width:n,height:r};this.style.backgroundColor&&(o.fillStyle=this._parseColor(this.style.backgroundColor,h),o.fillRect(0,0,n,r)),e.forEach(s=>{s.style.backgroundColor&&(o.fillStyle=this._parseColor(s.style.backgroundColor,s.contentBox),o.fillRect(s.lineBox.left,s.lineBox.top,s.lineBox.width,s.lineBox.height)),s.fragments.forEach(t=>{t.style.backgroundColor&&(o.fillStyle=this._parseColor(t.style.backgroundColor,t.contentBox),o.fillRect(t.inlineBox.left,t.inlineBox.top,t.inlineBox.width,t.inlineBox.height))})}),this._setContextStyle(this.style,h),e.forEach(s=>{this._setContextStyle(s.style,s.contentBox),s.fragments.forEach(t=>{this._setContextStyle({...t.style,textAlign:"left",verticalAlign:"top"},t.contentBox);const{left:i,top:l,width:x,height:g}=t.contentBox;switch(t.style.textStrokeWidth&&o.strokeText(t.content,i,l),o.fillText(t.content,i,l),t.style.textDecoration){case"underline":o.beginPath(),o.moveTo(i,l+g-2),o.lineTo(i+x,l+g-2),o.stroke();break;case"line-through":o.beginPath(),o.moveTo(i,l+g/2),o.lineTo(i+x,l+g/2),o.stroke();break}})})}_resizeView(e,o){const n=this.view;n.style.width=`${e}px`,n.style.height=`${o}px`,n.dataset.width=String(e),n.dataset.height=String(o),n.width=Math.max(1,Math.floor(e*this.pixelRatio)),n.height=Math.max(1,Math.floor(o*this.pixelRatio))}_parseColor(e,o){if(e.startsWith("linear-gradient")){const{x0:n,y0:r,x1:h,y1:s,stops:t}=C(e,o.left,o.top,o.width,o.height),i=this.context.createLinearGradient(n,r,h,s);return t.forEach(l=>i.addColorStop(l.offset,l.color)),i}return e}_setContextStyle(e,o){const n=this.context;switch(e.shadowColor&&(n.shadowColor=e.shadowColor),n.shadowOffsetX=e.shadowOffsetX,n.shadowOffsetY=e.shadowOffsetY,n.shadowBlur=e.shadowBlur,e.textStrokeColor&&o&&(n.strokeStyle=this._parseColor(e.textStrokeColor,o)),n.lineWidth=e.textStrokeWidth,e.color&&o&&(n.fillStyle=this._parseColor(e.color,o)),n.direction=e.direction,n.textAlign=e.textAlign,e.verticalAlign){case"baseline":n.textBaseline="alphabetic";break;case"top":case"middle":case"bottom":n.textBaseline=e.verticalAlign;break}n.font=[e.fontStyle,e.fontWeight,`${e.fontSize}px`,e.fontFamily].join(" "),n.fontKerning=e.fontKerning,n.letterSpacing=`${e.letterSpacing}px`}update(){const e=this.context;let{width:o,height:n}=this.style;o==="auto"&&(o=0),n==="auto"&&(n=0);const{contentBox:r,paragraphs:h}=this.measure();o||(o=r.width),n=Math.max(n,r.height),this._resizeView(o,n);const s=this.pixelRatio;e.scale(s,s),e.clearRect(0,0,e.canvas.width,e.canvas.height),this._draw(h)}};u.punctuationRegex=/[\s\n\t\u200B\u200C\u200D\u200E\u200F.,?!:;"'(){}\[\]<>\/\\|~#\$%\*\+=&^，。？！：；“”‘’（）【】《》……——]/;let _=u;exports.Text=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class y{get left(){return this.x}get top(){return this.y}get right(){return this.x+this.width}get bottom(){return this.y+this.height}constructor({x:t=0,y:h=0,width:s=0,height:n=0}={}){this.x=t,this.y=h,this.width=s,this.height=n}static from(...t){const h=t[0],s=t.slice(1).reduce((n,a)=>(n.x=Math.min(n.x,a.x),n.y=Math.min(n.y,a.y),n.right=Math.max(n.right,a.right),n.bottom=Math.max(n.bottom,a.bottom),n),{x:h.x,y:h.y,right:h.right,bottom:h.bottom});return new y({x:s.x,y:s.y,width:s.right-s.x,height:s.bottom-s.y})}move(t,h){return this.x+=t,this.y+=h,this}clone(){return new y({x:this.x,y:this.y,width:this.width,height:this.height})}}class H{constructor({content:t="",style:h,parent:s,contentBox:n=new y,inlineBox:a=new y,glyphBox:d=new y,centerX:f=0,baseline:w=0}={}){switch(this.content=t,this.style=h,this.parent=s,this.contentBox=n,this.inlineBox=a,this.glyphBox=d,this.centerX=f,this.baseline=w,this.getComputedStyle().textTransform){case"uppercase":this.content=this.content.toUpperCase();break;case"lowercase":this.content=this.content.toLowerCase();break}}getComputedStyle(){var t;return{...(t=this.parent)==null?void 0:t.getComputedStyle(),...this.style}}clone(t){return new H({content:this.content,style:this.style,parent:this.parent,contentBox:this.contentBox.clone(),inlineBox:this.inlineBox.clone(),glyphBox:this.glyphBox.clone(),centerX:this.centerX,baseline:this.baseline,...t})}}class M{constructor({style:t,parent:h,contentBox:s=new y,lineBox:n=new y,glyphBox:a=new y,baseline:d=0,xHeight:f=0,maxCharWidth:w=0,fragments:m=[]}={}){this.style=t,this.parent=h,this.contentBox=s,this.lineBox=n,this.glyphBox=a,this.baseline=d,this.xHeight=f,this.maxCharWidth=w,this.fragments=m}addFragment(t){return this.fragments.push(new H({...t,parent:this})),this}getComputedStyle(){return{...this.parent,...this.style}}clone(t){return new M({style:this.style,parent:this.parent,contentBox:this.contentBox.clone(),lineBox:this.lineBox.clone(),glyphBox:this.glyphBox.clone(),baseline:this.baseline,xHeight:this.xHeight,maxCharWidth:this.maxCharWidth,fragments:this.fragments.map(h=>h.clone()),...t})}}function D(c,t){const h=[];if(typeof c=="string")h.push(new M({parent:t}).addFragment({content:c}));else{c=Array.isArray(c)?c:[c];for(const s of c)if(typeof s=="string")h.push(new M({parent:t}).addFragment({content:s}));else if(Array.isArray(s)){const n=new M({parent:t});s.forEach(a=>{if(typeof a=="string")n.addFragment({content:a});else{const{content:d,...f}=a;n.addFragment({content:d,style:f})}}),h.push(n)}else if("fragments"in s){const{fragments:n,...a}=s,d=new M({style:a,parent:t});n.forEach(f=>{const{content:w,...m}=f;d.addFragment({content:w,style:m})}),h.push(d)}else if("content"in s){const{content:n,...a}=s;h.push(new M({style:a,parent:t}).addFragment({content:n}))}}return h}const Y="OffscreenCanvas"in globalThis;let L;function N(){return L??(L=Y?new OffscreenCanvas(1,1):document.createElement("canvas"))}function T(c,t){switch(t.shadowColor&&(c.shadowColor=t.shadowColor),t.shadowOffsetX!==void 0&&(c.shadowOffsetX=t.shadowOffsetX),t.shadowOffsetY!==void 0&&(c.shadowOffsetY=t.shadowOffsetY),t.shadowBlur!==void 0&&(c.shadowBlur=t.shadowBlur),t.textStrokeColor&&(c.strokeStyle=t.textStrokeColor),t.textStrokeWidth!==void 0&&(c.lineWidth=t.textStrokeWidth),t.color&&(c.fillStyle=t.color),t.direction&&(c.direction=t.direction),t.textAlign&&(c.textAlign=t.textAlign),t.fontKerning&&(c.fontKerning=t.fontKerning),t.verticalAlign){case"baseline":c.textBaseline="alphabetic";break;case"top":case"middle":case"bottom":c.textBaseline=t.verticalAlign;break}(t.fontStyle||t.fontWeight!==void 0||t.fontSize!==void 0||t.fontFamily)&&(c.font=[t.fontStyle||"normal",t.fontWeight||"normal",`${t.fontSize||14}px`,t.fontFamily||"sans-serif"].join(" "))}function E(c,t){const h=N().getContext("2d");return T(h,t),h.measureText(c)}const K=/[\s\n\t\u200B\u200C\u200D\u200E\u200F.,?!:;"'(){}\[\]<>\/\\|~#\$%\*\+=&^，。？！：；“”‘’（）【】《》……——]/;function j(c,t,h){const s=[],n=c.slice();let a,d;for(;a=n.shift();){const f=a.fragments.slice();let w=0;const m=[];for(;d=f.shift();){const p=d.getComputedStyle();let S="",l=!1,o=0,i="";for(const B of d.content){if(a.maxCharWidth=Math.max(a.maxCharWidth,E(B,p).width),i+=B,K.test(d.content[++o]))continue;let r,x;switch(p.writingMode){case"vertical-lr":case"vertical-rl":r=h,x=i.length*p.fontSize;break;case"horizontal-tb":default:r=t,x=E(i,p).width;break}x+=i.length*p.letterSpacing;const u=/^[\r\n]$/.test(i);if(u||p.textWrap==="wrap"&&r&&w+x>r){let e=u?S.length+1:S.length;!w&&!e&&(S+=i,e+=i.length),S.length&&m.push(d.clone({content:S})),m.length&&(s.push(a.clone({fragments:m.slice()})),m.length=0);const b=d.content.substring(e);(b.length||f.length)&&n.unshift(a.clone({maxCharWidth:0,fragments:(b.length?[d.clone({content:b})]:[]).concat(f.slice())})),f.length=0,l=!0;break}else w+=x;S+=i,i=""}l||m.push(d.clone())}m.length&&s.push(a.clone({fragments:m}))}return s}function G(c){return{width:0,height:0,color:null,backgroundColor:null,fontSize:14,fontWeight:"normal",fontFamily:"sans-serif",fontStyle:"normal",fontKerning:"normal",textWrap:"wrap",textAlign:"start",verticalAlign:"baseline",textTransform:"none",textDecoration:null,textStrokeWidth:0,textStrokeColor:null,direction:"inherit",lineHeight:1,letterSpacing:0,shadowColor:null,shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,writingMode:"horizontal-tb",...c}}function R(c){const{content:t}=c,{width:h,height:s,...n}=G(c.style);let a=D(t,n);a=j(a,h,s);const d=a.reduce((o,i)=>o+i.maxCharWidth,0);let f=0,w=0;a.forEach(o=>{const i=[];let B=null,r=f,x=w;o.fragments.forEach((e,b)=>{const g=e.getComputedStyle();switch(g.writingMode){case"vertical-rl":r=d-r;case"vertical-lr":{b||(x=0);const C=e.content.length,k=o.maxCharWidth,v=k*g.lineHeight,A=C*g.fontSize+(C-1)*g.letterSpacing;e.contentBox.x=r+(v-k)/2,e.contentBox.y=x,e.contentBox.width=k,e.contentBox.height=A,e.inlineBox.x=r,e.inlineBox.y=x,e.inlineBox.width=v,e.inlineBox.height=A,e.glyphBox.x=r+(v-k)/2,e.glyphBox.y=x,e.glyphBox.width=k,e.glyphBox.height=A,e.baseline=0,e.centerX=r+v/2,x+=A;break}case"horizontal-tb":{b||(r=0);const{fontBoundingBoxAscent:C,fontBoundingBoxDescent:k,actualBoundingBoxAscent:v,actualBoundingBoxDescent:A,actualBoundingBoxLeft:O,actualBoundingBoxRight:$,width:z}=E(e.content,{...g,textAlign:"center",verticalAlign:"baseline"}),F=g.fontSize,X=F*g.lineHeight,P=x+(X-(C+k))/2+C;e.contentBox.x=r,e.contentBox.y=x+(X-F)/2,e.contentBox.width=z,e.contentBox.height=F,e.inlineBox.x=r,e.inlineBox.y=x,e.inlineBox.width=z,e.inlineBox.height=X,e.glyphBox.x=r,e.glyphBox.y=P-v,e.glyphBox.width=O+$,e.glyphBox.height=v+A,e.baseline=P,e.centerX=r+O,i.push(e.contentBox),o.contentBox=y.from(...i),o.contentBox.height<e.contentBox.height&&(B=e),r+=z;break}}}),o.lineBox=y.from(...o.fragments.map(e=>e.inlineBox)),f+=o.lineBox.width,w+=o.lineBox.height;const u=E("x",{...(B??o).getComputedStyle(),textAlign:"left",verticalAlign:"baseline"});o.xHeight=u.actualBoundingBoxAscent,o.baseline=o.lineBox.y+(o.lineBox.height-(u.fontBoundingBoxAscent+u.fontBoundingBoxDescent))/2+u.fontBoundingBoxAscent});const m=y.from(...a.map(o=>o.lineBox),new y({width:h,height:s})),{width:p,height:S}=m;a.forEach(o=>{o.contentBox=y.from(...o.fragments.map(i=>i.contentBox)),o.glyphBox=y.from(...o.fragments.map(i=>i.glyphBox)),o.fragments.forEach(i=>{const B=i.getComputedStyle(),r=i.inlineBox.x,x=i.inlineBox.y;let u=r,e=x;switch(B.writingMode){case"vertical-rl":case"vertical-lr":switch(B.textAlign){case"end":case"right":e+=S-o.contentBox.height;break;case"center":e+=(S-o.contentBox.height)/2;break}break;case"horizontal-tb":{switch(B.textAlign){case"end":case"right":u+=p-o.contentBox.width;break;case"center":u+=(p-o.contentBox.width)/2;break}switch(B.verticalAlign){case"top":e+=o.lineBox.y-i.inlineBox.y;break;case"middle":e=o.baseline-o.xHeight/2-i.inlineBox.height/2;break;case"bottom":e+=o.lineBox.bottom-i.inlineBox.bottom;break;case"sub":e+=o.baseline-i.glyphBox.bottom;break;case"super":e+=o.baseline-i.glyphBox.y;break;case"text-top":e+=o.glyphBox.y-i.inlineBox.y;break;case"text-bottom":e+=o.glyphBox.bottom-i.inlineBox.bottom;break;case"baseline":default:i.inlineBox.height<o.lineBox.height&&(e+=o.baseline-i.baseline);break}break}}const b=u-r,g=e-x;i.inlineBox.move(b,g),i.contentBox.move(b,g),i.glyphBox.move(b,g),i.baseline+=g,i.centerX+=b}),o.contentBox=y.from(...o.fragments.map(i=>i.contentBox)),o.glyphBox=y.from(...o.fragments.map(i=>i.glyphBox))});const l=y.from(...a.map(o=>o.contentBox));return{box:m,contentBox:l,viewBox:y.from(m,l),glyphBox:y.from(...a.map(o=>o.glyphBox)),paragraphs:a}}function W(c,t,h){if(typeof t=="string"&&t.startsWith("linear-gradient")){const{x0:s,y0:n,x1:a,y1:d,stops:f}=U(t,h.left,h.top,h.width,h.height),w=c.createLinearGradient(s,n,a,d);return f.forEach(m=>w.addColorStop(m.offset,m.color)),w}return t}function U(c,t,h,s,n){var o;const a=((o=c.match(/linear-gradient\((.+)\)$/))==null?void 0:o[1])??"",d=a.split(",")[0],f=d.includes("deg")?d:"0deg",w=a.replace(f,"").matchAll(/(#|rgba|rgb)(.+?) ([\d.]+?%)/gi),p=(Number(f.replace("deg",""))||0)*Math.PI/180,S=s*Math.sin(p),l=n*Math.cos(p);return{x0:t+s/2-S,y0:h+n/2+l,x1:t+s/2+S,y1:h+n/2-l,stops:Array.from(w).map(i=>{let B=i[2];return B.startsWith("(")?B=B.split(",").length>3?`rgba${B}`:`rgb${B}`:B=`#${B}`,{offset:Number(i[3].replace("%",""))/100,color:B}})}}function V(c){const{view:t=document.createElement("canvas"),style:h,pixelRatio:s=1}=c,n={...h},{box:a,viewBox:d,paragraphs:f}=R(c),{x:w,y:m,width:p,height:S}=d,l=t.getContext("2d"),o=-w+p,i=-m+S;t.style.width=`${o}px`,t.style.height=`${i}px`,t.dataset.width=String(a.width),t.dataset.height=String(a.height),t.dataset.pixelRatio=String(s),t.width=Math.max(1,Math.floor(o*s)),t.height=Math.max(1,Math.floor(i*s)),l.scale(s,s),l.clearRect(0,0,t.width,t.height),l.translate(-w,-m);const B=new y({width:p,height:S});return n!=null&&n.color&&(n.color=W(l,n.color,B)),n!=null&&n.backgroundColor&&(n.backgroundColor=W(l,n.backgroundColor,B)),n!=null&&n.textStrokeColor&&(n.textStrokeColor=W(l,n.textStrokeColor,B)),n!=null&&n.backgroundColor&&(l.fillStyle=n.backgroundColor,l.fillRect(0,0,t.width,t.height)),f.forEach(r=>{var x,u,e,b;(x=r.style)!=null&&x.color&&(r.style.color=W(l,r.style.color,r.contentBox)),(u=r.style)!=null&&u.backgroundColor&&(r.style.backgroundColor=W(l,r.style.backgroundColor,r.contentBox)),(e=r.style)!=null&&e.textStrokeColor&&(r.style.textStrokeColor=W(l,r.style.textStrokeColor,r.contentBox)),(b=r.style)!=null&&b.backgroundColor&&(l.fillStyle=r.style.backgroundColor,l.fillRect(r.lineBox.x,r.lineBox.y,r.lineBox.width,r.lineBox.height)),r.fragments.forEach(g=>{var C,k,v,A;(C=g.style)!=null&&C.color&&(g.style.color=W(l,g.style.color,g.contentBox)),(k=g.style)!=null&&k.backgroundColor&&(g.style.backgroundColor=W(l,g.style.backgroundColor,g.contentBox)),(v=g.style)!=null&&v.textStrokeColor&&(g.style.textStrokeColor=W(l,g.style.textStrokeColor,g.contentBox)),(A=g.style)!=null&&A.backgroundColor&&(l.fillStyle=g.style.backgroundColor,l.fillRect(g.inlineBox.x,g.inlineBox.y,g.inlineBox.width,g.inlineBox.height))})}),T(l,n),f.forEach(r=>{r.style&&T(l,r.style),r.fragments.forEach(x=>{T(l,{...x.style,textAlign:"left",verticalAlign:"top"});const{x:u,y:e,width:b,height:g}=x.contentBox,C=x.getComputedStyle();switch(C.writingMode){case"vertical-rl":case"vertical-lr":{let k=0;for(const v of x.content)C.textStrokeWidth&&l.strokeText(v,u,e+k),l.fillText(v,u,e+k),k+=C.fontSize+C.letterSpacing;break}case"horizontal-tb":C.textStrokeWidth&&l.strokeText(x.content,u,e),l.fillText(x.content,u,e);break}switch(C.textDecoration){case"underline":l.beginPath(),l.moveTo(u,e+g-2),l.lineTo(u+b,e+g-2),l.stroke();break;case"line-through":l.beginPath(),l.moveTo(u,e+g/2),l.lineTo(u+b,e+g/2),l.stroke();break}})}),t}exports.measureText=R;exports.renderText=V;

package/dist/index.js

@@ -1 +1 @@
-(function(u,y){typeof exports=="object"&&typeof module<"u"?y(exports):typeof define=="function"&&define.amd?define(["exports"],y):(u=typeof globalThis<"u"?globalThis:u||self,y(u.modernText={}))})(this,function(u){"use strict";function y(A,e,o,n,r){var a;const h=((a=A.match(/linear-gradient\((.+)\)$/))==null?void 0:a[1])??"",s=h.split(",")[0],t=s.includes("deg")?s:"0deg",i=h.replace(t,"").matchAll(/(#|rgba|rgb)(.+?) ([\d.]+?%)/gi),x=(Number(t.replace("deg",""))||0)*Math.PI/180,g=n*Math.sin(x),f=r*Math.cos(x);return{x0:e+n/2-g,y0:o+r/2+f,x1:e+n/2+g,y1:o+r/2-f,stops:Array.from(i).map(c=>{let B=c[2];return B.startsWith("(")?B=B.split(",").length>3?`rgba${B}`:`rgb${B}`:B=`#${B}`,{offset:Number(c[3].replace("%",""))/100,color:B}})}}const w=class w{static get defaultStyle(){return{width:"auto",height:"auto",fontSize:14,fontWeight:"normal",fontFamily:"sans-serif",fontStyle:"normal",fontKerning:"normal",textWrap:"wrap",textAlign:"start",verticalAlign:"baseline",textTransform:"none",textDecoration:null,textStrokeWidth:0,direction:"inherit",lineHeight:1,letterSpacing:0,shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,writingMode:"horizontal-tb"}}constructor(e={}){const{view:o=document.createElement("canvas"),pixelRatio:n=window.devicePixelRatio||1,content:r="",style:h}=e;this.view=o,this.context=o.getContext("2d"),this.pixelRatio=n,this.content=r,this.style={...w.defaultStyle,...h},this.update()}_createBox(e=0,o=0,n=0,r=0){return{left:e,top:o,width:n,height:r,right:e+n,bottom:o+r}}_moveBox(e,o=0,n=0){e.left+=o,e.right+=o,e.top+=n,e.bottom+=n}_updateBoxSize(e){e.width=e.right-e.left,e.height=e.bottom-e.top}_mergeBoxes(e){const o=e.slice(1).reduce((n,r)=>(n.left=Math.min(n.left,r.left),n.top=Math.min(n.top,r.top),n.right=Math.max(n.right,r.right),n.bottom=Math.max(n.bottom,r.bottom),n),{...e[0]});return this._updateBoxSize(o),o}measure(){let{width:e}=this.style;e==="auto"&&(e=0);let o=this._createParagraphs(this.content);o=this._wrapParagraphs(o,e);const n=this.context;let r=0;for(let h=o.length,s=0;s<h;s++){const t=o[s],i=[];let l=0,x=null;for(const a of t.fragments){this._setContextStyle({...a.style,textAlign:"center",verticalAlign:"baseline"});const c=n.measureText(a.content),B=c.width,d=a.style.fontSize;a.inlineBox=this._createBox(l,r,B,d*a.style.lineHeight),a.contentBox=this._createBox(a.inlineBox.left,a.inlineBox.top+(a.inlineBox.height-d)/2,B,d);const p=c.fontBoundingBoxAscent+c.fontBoundingBoxDescent,_=c.actualBoundingBoxLeft+c.actualBoundingBoxRight,m=c.actualBoundingBoxAscent+c.actualBoundingBoxDescent;a.baseline=a.inlineBox.top+(a.inlineBox.height-p)/2+c.fontBoundingBoxAscent,a.glyphBox=this._createBox(a.contentBox.left,a.baseline-c.actualBoundingBoxAscent,_,m),a.centerX=a.glyphBox.left+c.actualBoundingBoxLeft,l+=a.contentBox.width,i.push(a.contentBox),t.contentBox=this._mergeBoxes(i),t.contentBox.height<a.contentBox.height&&(x=a)}t.lineBox=this._mergeBoxes([...t.fragments.map(a=>a.inlineBox),this._createBox(0,r,e)]),this._setContextStyle({...(x??t).style,textAlign:"left",verticalAlign:"baseline"});const g=n.measureText("x"),f=g.fontBoundingBoxAscent+g.fontBoundingBoxDescent;t.xHeight=g.actualBoundingBoxAscent,t.baseline=t.lineBox.top+(t.lineBox.height-f)/2+g.fontBoundingBoxAscent,r+=t.lineBox.height}for(let h=o.length,s=0;s<h;s++){const t=o[s];t.fragments.forEach(i=>{const l=i.inlineBox.left,x=i.inlineBox.top;let g,f=x;switch(i.style.textAlign){case"end":case"right":g=l+(t.lineBox.width-t.contentBox.width);break;case"center":g=l+(t.lineBox.width-t.contentBox.width)/2;break;case"start":case"left":default:g=l+t.lineBox.left;break}switch(i.style.verticalAlign){case"top":f=x+(t.lineBox.top-i.inlineBox.top);break;case"middle":f=t.baseline-t.xHeight/2-i.inlineBox.height/2;break;case"bottom":f=x+(t.lineBox.bottom-i.inlineBox.bottom);break;case"sub":f=x+(t.baseline-i.glyphBox.bottom);break;case"super":f=x+(t.baseline-i.glyphBox.top);break;case"text-top":f=x+(t.glyphBox.top-i.inlineBox.top);break;case"text-bottom":f=x+(t.glyphBox.bottom-i.inlineBox.bottom);break;case"baseline":default:i.inlineBox.height<t.lineBox.height&&(f=x+(t.baseline-i.baseline));break}const a=g-l,c=f-x;this._moveBox(i.inlineBox,a,c),this._moveBox(i.contentBox,a,c),this._moveBox(i.glyphBox,a,c),i.baseline+=c,i.centerX+=a}),t.contentBox=this._mergeBoxes(t.fragments.map(i=>i.contentBox)),t.glyphBox=this._mergeBoxes(t.fragments.map(i=>i.glyphBox))}return{actualContentBox:this._mergeBoxes(o.map(h=>h.contentBox)),contentBox:this._mergeBoxes(o.map(h=>h.lineBox)),glyphBox:this._mergeBoxes(o.map(h=>h.glyphBox)),paragraphs:o}}_createParagraphs(e){const o=new Set(["color","backgroundColor","textStrokeColor","shadowColor"]),n=(...t)=>{const i=t.pop();return t.reduce((l,x)=>{for(const g in x)o.has(g)||(l[g]=x[g]);return l},i)},r=(t={})=>{const{width:i,height:l,...x}=this.style;return{contentBox:this._createBox(),lineBox:this._createBox(),glyphBox:this._createBox(),baseline:0,fragments:[],...t,style:n(x,t.style??{})}},h=(t,i)=>{let l;if(typeof t=="string")l={content:t};else{const{content:B,...d}=t;l={content:B,style:d}}const{width:x,height:g,...f}=this.style,a=n(f,i??{},l.style??{});let c=l.content??"";switch(a.textTransform){case"uppercase":c=c.toUpperCase();break;case"lowercase":c=c.toLowerCase();break}return{contentBox:this._createBox(),inlineBox:this._createBox(),glyphBox:this._createBox(),centerX:0,baseline:0,...l,style:a,content:c}},s=[];if(typeof e=="string")s.push(r({fragments:[h(e)]}));else{e=Array.isArray(e)?e:[e];for(const t of e)if(typeof t=="string")s.push(r({fragments:[h(t)]}));else if(Array.isArray(t))s.push(r({fragments:t.map(i=>h(i))}));else if("fragments"in t){const{fragments:i,...l}=t;s.push(r({style:l,fragments:i.map(x=>h(x,l))}))}else if("content"in t){const{content:i,...l}=t;s.push(r({style:l,fragments:[h(i,l)]}))}}return s}_wrapParagraphs(e,o){var i;const n=l=>JSON.parse(JSON.stringify(l)),r=[],h=e.slice();let s,t;for(;s=h.shift();){const l=s.fragments.slice();let x=0;const g=[];for(;t=l.shift();){const f=t.style,a=(i=f.writingMode)==null?void 0:i.startsWith("vertical");this._setContextStyle(f);let c="",B=!1,d=0,p="";for(const _ of t.content){if(p+=_,!a&&w.punctuationRegex.test(t.content[++d]))continue;const m=this.context.measureText(p).width,C=/^[\r\n]$/.test(p);if(C||a||f.textWrap==="wrap"&&o&&x+m>o){let S=C?c.length+1:c.length;!x&&!S&&(c+=p,S+=p.length),c.length&&g.push({...n(t),content:c}),g.length&&(r.push({...n(s),fragments:g.slice()}),g.length=0);const k=t.content.substring(S);(k.length||l.length)&&h.unshift({...n(s),fragments:(k.length?[{...n(t),content:k}]:[]).concat(l.slice())}),l.length=0,B=!0;break}else x+=m;c+=p,p=""}B||g.push(n(t))}g.length&&r.push({...n(s),fragments:g})}return r}_draw(e){const o=this.context,{width:n,height:r}=o.canvas,h={left:0,top:0,width:n,height:r};this.style.backgroundColor&&(o.fillStyle=this._parseColor(this.style.backgroundColor,h),o.fillRect(0,0,n,r)),e.forEach(s=>{s.style.backgroundColor&&(o.fillStyle=this._parseColor(s.style.backgroundColor,s.contentBox),o.fillRect(s.lineBox.left,s.lineBox.top,s.lineBox.width,s.lineBox.height)),s.fragments.forEach(t=>{t.style.backgroundColor&&(o.fillStyle=this._parseColor(t.style.backgroundColor,t.contentBox),o.fillRect(t.inlineBox.left,t.inlineBox.top,t.inlineBox.width,t.inlineBox.height))})}),this._setContextStyle(this.style,h),e.forEach(s=>{this._setContextStyle(s.style,s.contentBox),s.fragments.forEach(t=>{this._setContextStyle({...t.style,textAlign:"left",verticalAlign:"top"},t.contentBox);const{left:i,top:l,width:x,height:g}=t.contentBox;switch(t.style.textStrokeWidth&&o.strokeText(t.content,i,l),o.fillText(t.content,i,l),t.style.textDecoration){case"underline":o.beginPath(),o.moveTo(i,l+g-2),o.lineTo(i+x,l+g-2),o.stroke();break;case"line-through":o.beginPath(),o.moveTo(i,l+g/2),o.lineTo(i+x,l+g/2),o.stroke();break}})})}_resizeView(e,o){const n=this.view;n.style.width=`${e}px`,n.style.height=`${o}px`,n.dataset.width=String(e),n.dataset.height=String(o),n.width=Math.max(1,Math.floor(e*this.pixelRatio)),n.height=Math.max(1,Math.floor(o*this.pixelRatio))}_parseColor(e,o){if(e.startsWith("linear-gradient")){const{x0:n,y0:r,x1:h,y1:s,stops:t}=y(e,o.left,o.top,o.width,o.height),i=this.context.createLinearGradient(n,r,h,s);return t.forEach(l=>i.addColorStop(l.offset,l.color)),i}return e}_setContextStyle(e,o){const n=this.context;switch(e.shadowColor&&(n.shadowColor=e.shadowColor),n.shadowOffsetX=e.shadowOffsetX,n.shadowOffsetY=e.shadowOffsetY,n.shadowBlur=e.shadowBlur,e.textStrokeColor&&o&&(n.strokeStyle=this._parseColor(e.textStrokeColor,o)),n.lineWidth=e.textStrokeWidth,e.color&&o&&(n.fillStyle=this._parseColor(e.color,o)),n.direction=e.direction,n.textAlign=e.textAlign,e.verticalAlign){case"baseline":n.textBaseline="alphabetic";break;case"top":case"middle":case"bottom":n.textBaseline=e.verticalAlign;break}n.font=[e.fontStyle,e.fontWeight,`${e.fontSize}px`,e.fontFamily].join(" "),n.fontKerning=e.fontKerning,n.letterSpacing=`${e.letterSpacing}px`}update(){const e=this.context;let{width:o,height:n}=this.style;o==="auto"&&(o=0),n==="auto"&&(n=0);const{contentBox:r,paragraphs:h}=this.measure();o||(o=r.width),n=Math.max(n,r.height),this._resizeView(o,n);const s=this.pixelRatio;e.scale(s,s),e.clearRect(0,0,e.canvas.width,e.canvas.height),this._draw(h)}};w.punctuationRegex=/[\s\n\t\u200B\u200C\u200D\u200E\u200F.,?!:;"'(){}\[\]<>\/\\|~#\$%\*\+=&^，。？！：；“”‘’（）【】《》……——]/;let b=w;u.Text=b,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
+(function(T,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(T=typeof globalThis<"u"?globalThis:T||self,f(T.modernText={}))})(this,function(T){"use strict";class f{get left(){return this.x}get top(){return this.y}get right(){return this.x+this.width}get bottom(){return this.y+this.height}constructor({x:t=0,y:h=0,width:l=0,height:n=0}={}){this.x=t,this.y=h,this.width=l,this.height=n}static from(...t){const h=t[0],l=t.slice(1).reduce((n,a)=>(n.x=Math.min(n.x,a.x),n.y=Math.min(n.y,a.y),n.right=Math.max(n.right,a.right),n.bottom=Math.max(n.bottom,a.bottom),n),{x:h.x,y:h.y,right:h.right,bottom:h.bottom});return new f({x:l.x,y:l.y,width:l.right-l.x,height:l.bottom-l.y})}move(t,h){return this.x+=t,this.y+=h,this}clone(){return new f({x:this.x,y:this.y,width:this.width,height:this.height})}}class F{constructor({content:t="",style:h,parent:l,contentBox:n=new f,inlineBox:a=new f,glyphBox:d=new f,centerX:u=0,baseline:w=0}={}){switch(this.content=t,this.style=h,this.parent=l,this.contentBox=n,this.inlineBox=a,this.glyphBox=d,this.centerX=u,this.baseline=w,this.getComputedStyle().textTransform){case"uppercase":this.content=this.content.toUpperCase();break;case"lowercase":this.content=this.content.toLowerCase();break}}getComputedStyle(){var t;return{...(t=this.parent)==null?void 0:t.getComputedStyle(),...this.style}}clone(t){return new F({content:this.content,style:this.style,parent:this.parent,contentBox:this.contentBox.clone(),inlineBox:this.inlineBox.clone(),glyphBox:this.glyphBox.clone(),centerX:this.centerX,baseline:this.baseline,...t})}}class M{constructor({style:t,parent:h,contentBox:l=new f,lineBox:n=new f,glyphBox:a=new f,baseline:d=0,xHeight:u=0,maxCharWidth:w=0,fragments:y=[]}={}){this.style=t,this.parent=h,this.contentBox=l,this.lineBox=n,this.glyphBox=a,this.baseline=d,this.xHeight=u,this.maxCharWidth=w,this.fragments=y}addFragment(t){return this.fragments.push(new F({...t,parent:this})),this}getComputedStyle(){return{...this.parent,...this.style}}clone(t){return new M({style:this.style,parent:this.parent,contentBox:this.contentBox.clone(),lineBox:this.lineBox.clone(),glyphBox:this.glyphBox.clone(),baseline:this.baseline,xHeight:this.xHeight,maxCharWidth:this.maxCharWidth,fragments:this.fragments.map(h=>h.clone()),...t})}}function D(c,t){const h=[];if(typeof c=="string")h.push(new M({parent:t}).addFragment({content:c}));else{c=Array.isArray(c)?c:[c];for(const l of c)if(typeof l=="string")h.push(new M({parent:t}).addFragment({content:l}));else if(Array.isArray(l)){const n=new M({parent:t});l.forEach(a=>{if(typeof a=="string")n.addFragment({content:a});else{const{content:d,...u}=a;n.addFragment({content:d,style:u})}}),h.push(n)}else if("fragments"in l){const{fragments:n,...a}=l,d=new M({style:a,parent:t});n.forEach(u=>{const{content:w,...y}=u;d.addFragment({content:w,style:y})}),h.push(d)}else if("content"in l){const{content:n,...a}=l;h.push(new M({style:a,parent:t}).addFragment({content:n}))}}return h}const Y="OffscreenCanvas"in globalThis;let L;function N(){return L??(L=Y?new OffscreenCanvas(1,1):document.createElement("canvas"))}function E(c,t){switch(t.shadowColor&&(c.shadowColor=t.shadowColor),t.shadowOffsetX!==void 0&&(c.shadowOffsetX=t.shadowOffsetX),t.shadowOffsetY!==void 0&&(c.shadowOffsetY=t.shadowOffsetY),t.shadowBlur!==void 0&&(c.shadowBlur=t.shadowBlur),t.textStrokeColor&&(c.strokeStyle=t.textStrokeColor),t.textStrokeWidth!==void 0&&(c.lineWidth=t.textStrokeWidth),t.color&&(c.fillStyle=t.color),t.direction&&(c.direction=t.direction),t.textAlign&&(c.textAlign=t.textAlign),t.fontKerning&&(c.fontKerning=t.fontKerning),t.verticalAlign){case"baseline":c.textBaseline="alphabetic";break;case"top":case"middle":case"bottom":c.textBaseline=t.verticalAlign;break}(t.fontStyle||t.fontWeight!==void 0||t.fontSize!==void 0||t.fontFamily)&&(c.font=[t.fontStyle||"normal",t.fontWeight||"normal",`${t.fontSize||14}px`,t.fontFamily||"sans-serif"].join(" "))}function z(c,t){const h=N().getContext("2d");return E(h,t),h.measureText(c)}const K=/[\s\n\t\u200B\u200C\u200D\u200E\u200F.,?!:;"'(){}\[\]<>\/\\|~#\$%\*\+=&^，。？！：；“”‘’（）【】《》……——]/;function j(c,t,h){const l=[],n=c.slice();let a,d;for(;a=n.shift();){const u=a.fragments.slice();let w=0;const y=[];for(;d=u.shift();){const p=d.getComputedStyle();let S="",s=!1,o=0,i="";for(const B of d.content){if(a.maxCharWidth=Math.max(a.maxCharWidth,z(B,p).width),i+=B,K.test(d.content[++o]))continue;let r,x;switch(p.writingMode){case"vertical-lr":case"vertical-rl":r=h,x=i.length*p.fontSize;break;case"horizontal-tb":default:r=t,x=z(i,p).width;break}x+=i.length*p.letterSpacing;const m=/^[\r\n]$/.test(i);if(m||p.textWrap==="wrap"&&r&&w+x>r){let e=m?S.length+1:S.length;!w&&!e&&(S+=i,e+=i.length),S.length&&y.push(d.clone({content:S})),y.length&&(l.push(a.clone({fragments:y.slice()})),y.length=0);const b=d.content.substring(e);(b.length||u.length)&&n.unshift(a.clone({maxCharWidth:0,fragments:(b.length?[d.clone({content:b})]:[]).concat(u.slice())})),u.length=0,s=!0;break}else w+=x;S+=i,i=""}s||y.push(d.clone())}y.length&&l.push(a.clone({fragments:y}))}return l}function G(c){return{width:0,height:0,color:null,backgroundColor:null,fontSize:14,fontWeight:"normal",fontFamily:"sans-serif",fontStyle:"normal",fontKerning:"normal",textWrap:"wrap",textAlign:"start",verticalAlign:"baseline",textTransform:"none",textDecoration:null,textStrokeWidth:0,textStrokeColor:null,direction:"inherit",lineHeight:1,letterSpacing:0,shadowColor:null,shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,writingMode:"horizontal-tb",...c}}function P(c){const{content:t}=c,{width:h,height:l,...n}=G(c.style);let a=D(t,n);a=j(a,h,l);const d=a.reduce((o,i)=>o+i.maxCharWidth,0);let u=0,w=0;a.forEach(o=>{const i=[];let B=null,r=u,x=w;o.fragments.forEach((e,b)=>{const g=e.getComputedStyle();switch(g.writingMode){case"vertical-rl":r=d-r;case"vertical-lr":{b||(x=0);const C=e.content.length,k=o.maxCharWidth,v=k*g.lineHeight,W=C*g.fontSize+(C-1)*g.letterSpacing;e.contentBox.x=r+(v-k)/2,e.contentBox.y=x,e.contentBox.width=k,e.contentBox.height=W,e.inlineBox.x=r,e.inlineBox.y=x,e.inlineBox.width=v,e.inlineBox.height=W,e.glyphBox.x=r+(v-k)/2,e.glyphBox.y=x,e.glyphBox.width=k,e.glyphBox.height=W,e.baseline=0,e.centerX=r+v/2,x+=W;break}case"horizontal-tb":{b||(r=0);const{fontBoundingBoxAscent:C,fontBoundingBoxDescent:k,actualBoundingBoxAscent:v,actualBoundingBoxDescent:W,actualBoundingBoxLeft:R,actualBoundingBoxRight:I,width:X}=z(e.content,{...g,textAlign:"center",verticalAlign:"baseline"}),H=g.fontSize,O=H*g.lineHeight,$=x+(O-(C+k))/2+C;e.contentBox.x=r,e.contentBox.y=x+(O-H)/2,e.contentBox.width=X,e.contentBox.height=H,e.inlineBox.x=r,e.inlineBox.y=x,e.inlineBox.width=X,e.inlineBox.height=O,e.glyphBox.x=r,e.glyphBox.y=$-v,e.glyphBox.width=R+I,e.glyphBox.height=v+W,e.baseline=$,e.centerX=r+R,i.push(e.contentBox),o.contentBox=f.from(...i),o.contentBox.height<e.contentBox.height&&(B=e),r+=X;break}}}),o.lineBox=f.from(...o.fragments.map(e=>e.inlineBox)),u+=o.lineBox.width,w+=o.lineBox.height;const m=z("x",{...(B??o).getComputedStyle(),textAlign:"left",verticalAlign:"baseline"});o.xHeight=m.actualBoundingBoxAscent,o.baseline=o.lineBox.y+(o.lineBox.height-(m.fontBoundingBoxAscent+m.fontBoundingBoxDescent))/2+m.fontBoundingBoxAscent});const y=f.from(...a.map(o=>o.lineBox),new f({width:h,height:l})),{width:p,height:S}=y;a.forEach(o=>{o.contentBox=f.from(...o.fragments.map(i=>i.contentBox)),o.glyphBox=f.from(...o.fragments.map(i=>i.glyphBox)),o.fragments.forEach(i=>{const B=i.getComputedStyle(),r=i.inlineBox.x,x=i.inlineBox.y;let m=r,e=x;switch(B.writingMode){case"vertical-rl":case"vertical-lr":switch(B.textAlign){case"end":case"right":e+=S-o.contentBox.height;break;case"center":e+=(S-o.contentBox.height)/2;break}break;case"horizontal-tb":{switch(B.textAlign){case"end":case"right":m+=p-o.contentBox.width;break;case"center":m+=(p-o.contentBox.width)/2;break}switch(B.verticalAlign){case"top":e+=o.lineBox.y-i.inlineBox.y;break;case"middle":e=o.baseline-o.xHeight/2-i.inlineBox.height/2;break;case"bottom":e+=o.lineBox.bottom-i.inlineBox.bottom;break;case"sub":e+=o.baseline-i.glyphBox.bottom;break;case"super":e+=o.baseline-i.glyphBox.y;break;case"text-top":e+=o.glyphBox.y-i.inlineBox.y;break;case"text-bottom":e+=o.glyphBox.bottom-i.inlineBox.bottom;break;case"baseline":default:i.inlineBox.height<o.lineBox.height&&(e+=o.baseline-i.baseline);break}break}}const b=m-r,g=e-x;i.inlineBox.move(b,g),i.contentBox.move(b,g),i.glyphBox.move(b,g),i.baseline+=g,i.centerX+=b}),o.contentBox=f.from(...o.fragments.map(i=>i.contentBox)),o.glyphBox=f.from(...o.fragments.map(i=>i.glyphBox))});const s=f.from(...a.map(o=>o.contentBox));return{box:y,contentBox:s,viewBox:f.from(y,s),glyphBox:f.from(...a.map(o=>o.glyphBox)),paragraphs:a}}function A(c,t,h){if(typeof t=="string"&&t.startsWith("linear-gradient")){const{x0:l,y0:n,x1:a,y1:d,stops:u}=U(t,h.left,h.top,h.width,h.height),w=c.createLinearGradient(l,n,a,d);return u.forEach(y=>w.addColorStop(y.offset,y.color)),w}return t}function U(c,t,h,l,n){var o;const a=((o=c.match(/linear-gradient\((.+)\)$/))==null?void 0:o[1])??"",d=a.split(",")[0],u=d.includes("deg")?d:"0deg",w=a.replace(u,"").matchAll(/(#|rgba|rgb)(.+?) ([\d.]+?%)/gi),p=(Number(u.replace("deg",""))||0)*Math.PI/180,S=l*Math.sin(p),s=n*Math.cos(p);return{x0:t+l/2-S,y0:h+n/2+s,x1:t+l/2+S,y1:h+n/2-s,stops:Array.from(w).map(i=>{let B=i[2];return B.startsWith("(")?B=B.split(",").length>3?`rgba${B}`:`rgb${B}`:B=`#${B}`,{offset:Number(i[3].replace("%",""))/100,color:B}})}}function V(c){const{view:t=document.createElement("canvas"),style:h,pixelRatio:l=1}=c,n={...h},{box:a,viewBox:d,paragraphs:u}=P(c),{x:w,y,width:p,height:S}=d,s=t.getContext("2d"),o=-w+p,i=-y+S;t.style.width=`${o}px`,t.style.height=`${i}px`,t.dataset.width=String(a.width),t.dataset.height=String(a.height),t.dataset.pixelRatio=String(l),t.width=Math.max(1,Math.floor(o*l)),t.height=Math.max(1,Math.floor(i*l)),s.scale(l,l),s.clearRect(0,0,t.width,t.height),s.translate(-w,-y);const B=new f({width:p,height:S});return n!=null&&n.color&&(n.color=A(s,n.color,B)),n!=null&&n.backgroundColor&&(n.backgroundColor=A(s,n.backgroundColor,B)),n!=null&&n.textStrokeColor&&(n.textStrokeColor=A(s,n.textStrokeColor,B)),n!=null&&n.backgroundColor&&(s.fillStyle=n.backgroundColor,s.fillRect(0,0,t.width,t.height)),u.forEach(r=>{var x,m,e,b;(x=r.style)!=null&&x.color&&(r.style.color=A(s,r.style.color,r.contentBox)),(m=r.style)!=null&&m.backgroundColor&&(r.style.backgroundColor=A(s,r.style.backgroundColor,r.contentBox)),(e=r.style)!=null&&e.textStrokeColor&&(r.style.textStrokeColor=A(s,r.style.textStrokeColor,r.contentBox)),(b=r.style)!=null&&b.backgroundColor&&(s.fillStyle=r.style.backgroundColor,s.fillRect(r.lineBox.x,r.lineBox.y,r.lineBox.width,r.lineBox.height)),r.fragments.forEach(g=>{var C,k,v,W;(C=g.style)!=null&&C.color&&(g.style.color=A(s,g.style.color,g.contentBox)),(k=g.style)!=null&&k.backgroundColor&&(g.style.backgroundColor=A(s,g.style.backgroundColor,g.contentBox)),(v=g.style)!=null&&v.textStrokeColor&&(g.style.textStrokeColor=A(s,g.style.textStrokeColor,g.contentBox)),(W=g.style)!=null&&W.backgroundColor&&(s.fillStyle=g.style.backgroundColor,s.fillRect(g.inlineBox.x,g.inlineBox.y,g.inlineBox.width,g.inlineBox.height))})}),E(s,n),u.forEach(r=>{r.style&&E(s,r.style),r.fragments.forEach(x=>{E(s,{...x.style,textAlign:"left",verticalAlign:"top"});const{x:m,y:e,width:b,height:g}=x.contentBox,C=x.getComputedStyle();switch(C.writingMode){case"vertical-rl":case"vertical-lr":{let k=0;for(const v of x.content)C.textStrokeWidth&&s.strokeText(v,m,e+k),s.fillText(v,m,e+k),k+=C.fontSize+C.letterSpacing;break}case"horizontal-tb":C.textStrokeWidth&&s.strokeText(x.content,m,e),s.fillText(x.content,m,e);break}switch(C.textDecoration){case"underline":s.beginPath(),s.moveTo(m,e+g-2),s.lineTo(m+b,e+g-2),s.stroke();break;case"line-through":s.beginPath(),s.moveTo(m,e+g/2),s.lineTo(m+b,e+g/2),s.stroke();break}})}),t}T.measureText=P,T.renderText=V,Object.defineProperty(T,Symbol.toStringTag,{value:"Module"})});

package/dist/index.mjs

@@ -1,361 +1,450 @@
-function C(k, e, o, n, r) {
-  var a;
-  const h = ((a = k.match(/linear-gradient\((.+)\)$/)) == null ? void 0 : a[1]) ?? "", s = h.split(",")[0], t = s.includes("deg") ? s : "0deg", i = h.replace(t, "").matchAll(/(#|rgba|rgb)(.+?) ([\d.]+?%)/gi), x = (Number(t.replace("deg", "")) || 0) * Math.PI / 180, g = n * Math.sin(x), f = r * Math.cos(x);
-  return {
-    x0: e + n / 2 - g,
-    y0: o + r / 2 + f,
-    x1: e + n / 2 + g,
-    y1: o + r / 2 - f,
-    stops: Array.from(i).map((c) => {
-      let B = c[2];
-      return B.startsWith("(") ? B = B.split(",").length > 3 ? `rgba${B}` : `rgb${B}` : B = `#${B}`, {
-        offset: Number(c[3].replace("%", "")) / 100,
-        color: B
-      };
-    })
-  };
+class y {
+  get left() {
+    return this.x;
+  }
+  get top() {
+    return this.y;
+  }
+  get right() {
+    return this.x + this.width;
+  }
+  get bottom() {
+    return this.y + this.height;
+  }
+  constructor({ x: t = 0, y: h = 0, width: s = 0, height: n = 0 } = {}) {
+    this.x = t, this.y = h, this.width = s, this.height = n;
+  }
+  static from(...t) {
+    const h = t[0], s = t.slice(1).reduce((n, a) => (n.x = Math.min(n.x, a.x), n.y = Math.min(n.y, a.y), n.right = Math.max(n.right, a.right), n.bottom = Math.max(n.bottom, a.bottom), n), { x: h.x, y: h.y, right: h.right, bottom: h.bottom });
+    return new y({
+      x: s.x,
+      y: s.y,
+      width: s.right - s.x,
+      height: s.bottom - s.y
+    });
+  }
+  move(t, h) {
+    return this.x += t, this.y += h, this;
+  }
+  clone() {
+    return new y({
+      x: this.x,
+      y: this.y,
+      width: this.width,
+      height: this.height
+    });
+  }
 }
-const u = class u {
-  static get defaultStyle() {
+class H {
+  constructor({
+    content: t = "",
+    style: h,
+    parent: s,
+    contentBox: n = new y(),
+    inlineBox: a = new y(),
+    glyphBox: d = new y(),
+    centerX: f = 0,
+    baseline: w = 0
+  } = {}) {
+    switch (this.content = t, this.style = h, this.parent = s, this.contentBox = n, this.inlineBox = a, this.glyphBox = d, this.centerX = f, this.baseline = w, this.getComputedStyle().textTransform) {
+      case "uppercase":
+        this.content = this.content.toUpperCase();
+        break;
+      case "lowercase":
+        this.content = this.content.toLowerCase();
+        break;
+    }
+  }
+  getComputedStyle() {
+    var t;
     return {
-      width: "auto",
-      height: "auto",
-      fontSize: 14,
-      fontWeight: "normal",
-      fontFamily: "sans-serif",
-      fontStyle: "normal",
-      fontKerning: "normal",
-      textWrap: "wrap",
-      textAlign: "start",
-      verticalAlign: "baseline",
-      textTransform: "none",
-      textDecoration: null,
-      textStrokeWidth: 0,
-      direction: "inherit",
-      lineHeight: 1,
-      letterSpacing: 0,
-      shadowOffsetX: 0,
-      shadowOffsetY: 0,
-      shadowBlur: 0,
-      writingMode: "horizontal-tb"
+      ...(t = this.parent) == null ? void 0 : t.getComputedStyle(),
+      ...this.style
     };
   }
-  constructor(e = {}) {
-    const {
-      view: o = document.createElement("canvas"),
-      pixelRatio: n = window.devicePixelRatio || 1,
-      content: r = "",
-      style: h
-    } = e;
-    this.view = o, this.context = o.getContext("2d"), this.pixelRatio = n, this.content = r, this.style = {
-      ...u.defaultStyle,
-      ...h
-    }, this.update();
+  clone(t) {
+    return new H({
+      content: this.content,
+      style: this.style,
+      parent: this.parent,
+      contentBox: this.contentBox.clone(),
+      inlineBox: this.inlineBox.clone(),
+      glyphBox: this.glyphBox.clone(),
+      centerX: this.centerX,
+      baseline: this.baseline,
+      ...t
+    });
+  }
+}
+class M {
+  constructor({
+    style: t,
+    parent: h,
+    contentBox: s = new y(),
+    lineBox: n = new y(),
+    glyphBox: a = new y(),
+    baseline: d = 0,
+    xHeight: f = 0,
+    maxCharWidth: w = 0,
+    fragments: m = []
+  } = {}) {
+    this.style = t, this.parent = h, this.contentBox = s, this.lineBox = n, this.glyphBox = a, this.baseline = d, this.xHeight = f, this.maxCharWidth = w, this.fragments = m;
+  }
+  addFragment(t) {
+    return this.fragments.push(new H({ ...t, parent: this })), this;
   }
-  _createBox(e = 0, o = 0, n = 0, r = 0) {
+  getComputedStyle() {
     return {
-      left: e,
-      top: o,
-      width: n,
-      height: r,
-      right: e + n,
-      bottom: o + r
+      ...this.parent,
+      ...this.style
     };
   }
-  _moveBox(e, o = 0, n = 0) {
-    e.left += o, e.right += o, e.top += n, e.bottom += n;
+  clone(t) {
+    return new M({
+      style: this.style,
+      parent: this.parent,
+      contentBox: this.contentBox.clone(),
+      lineBox: this.lineBox.clone(),
+      glyphBox: this.glyphBox.clone(),
+      baseline: this.baseline,
+      xHeight: this.xHeight,
+      maxCharWidth: this.maxCharWidth,
+      fragments: this.fragments.map((h) => h.clone()),
+      ...t
+    });
   }
-  _updateBoxSize(e) {
-    e.width = e.right - e.left, e.height = e.bottom - e.top;
+}
+function $(c, t) {
+  const h = [];
+  if (typeof c == "string")
+    h.push(new M({ parent: t }).addFragment({ content: c }));
+  else {
+    c = Array.isArray(c) ? c : [c];
+    for (const s of c)
+      if (typeof s == "string")
+        h.push(new M({ parent: t }).addFragment({ content: s }));
+      else if (Array.isArray(s)) {
+        const n = new M({ parent: t });
+        s.forEach((a) => {
+          if (typeof a == "string")
+            n.addFragment({ content: a });
+          else {
+            const { content: d, ...f } = a;
+            n.addFragment({ content: d, style: f });
+          }
+        }), h.push(n);
+      } else if ("fragments" in s) {
+        const { fragments: n, ...a } = s, d = new M({ style: a, parent: t });
+        n.forEach((f) => {
+          const { content: w, ...m } = f;
+          d.addFragment({ content: w, style: m });
+        }), h.push(d);
+      } else if ("content" in s) {
+        const { content: n, ...a } = s;
+        h.push(new M({ style: a, parent: t }).addFragment({ content: n }));
+      }
   }
-  _mergeBoxes(e) {
-    const o = e.slice(1).reduce((n, r) => (n.left = Math.min(n.left, r.left), n.top = Math.min(n.top, r.top), n.right = Math.max(n.right, r.right), n.bottom = Math.max(n.bottom, r.bottom), n), { ...e[0] });
-    return this._updateBoxSize(o), o;
+  return h;
+}
+const D = "OffscreenCanvas" in globalThis;
+let Y;
+function L() {
+  return Y ?? (Y = D ? new OffscreenCanvas(1, 1) : document.createElement("canvas"));
+}
+function E(c, t) {
+  switch (t.shadowColor && (c.shadowColor = t.shadowColor), t.shadowOffsetX !== void 0 && (c.shadowOffsetX = t.shadowOffsetX), t.shadowOffsetY !== void 0 && (c.shadowOffsetY = t.shadowOffsetY), t.shadowBlur !== void 0 && (c.shadowBlur = t.shadowBlur), t.textStrokeColor && (c.strokeStyle = t.textStrokeColor), t.textStrokeWidth !== void 0 && (c.lineWidth = t.textStrokeWidth), t.color && (c.fillStyle = t.color), t.direction && (c.direction = t.direction), t.textAlign && (c.textAlign = t.textAlign), t.fontKerning && (c.fontKerning = t.fontKerning), t.verticalAlign) {
+    case "baseline":
+      c.textBaseline = "alphabetic";
+      break;
+    case "top":
+    case "middle":
+    case "bottom":
+      c.textBaseline = t.verticalAlign;
+      break;
   }
-  measure() {
-    let { width: e } = this.style;
-    e === "auto" && (e = 0);
-    let o = this._createParagraphs(this.content);
-    o = this._wrapParagraphs(o, e);
-    const n = this.context;
-    let r = 0;
-    for (let h = o.length, s = 0; s < h; s++) {
-      const t = o[s], i = [];
-      let l = 0, x = null;
-      for (const a of t.fragments) {
-        this._setContextStyle({
-          ...a.style,
-          textAlign: "center",
-          verticalAlign: "baseline"
-        });
-        const c = n.measureText(a.content), B = c.width, d = a.style.fontSize;
-        a.inlineBox = this._createBox(
-          l,
-          r,
-          B,
-          d * a.style.lineHeight
-        ), a.contentBox = this._createBox(
-          a.inlineBox.left,
-          a.inlineBox.top + (a.inlineBox.height - d) / 2,
-          B,
-          d
-        );
-        const p = c.fontBoundingBoxAscent + c.fontBoundingBoxDescent, w = c.actualBoundingBoxLeft + c.actualBoundingBoxRight, y = c.actualBoundingBoxAscent + c.actualBoundingBoxDescent;
-        a.baseline = a.inlineBox.top + (a.inlineBox.height - p) / 2 + c.fontBoundingBoxAscent, a.glyphBox = this._createBox(
-          a.contentBox.left,
-          a.baseline - c.actualBoundingBoxAscent,
-          w,
-          y
-        ), a.centerX = a.glyphBox.left + c.actualBoundingBoxLeft, l += a.contentBox.width, i.push(a.contentBox), t.contentBox = this._mergeBoxes(i), t.contentBox.height < a.contentBox.height && (x = a);
-      }
-      t.lineBox = this._mergeBoxes([
-        ...t.fragments.map((a) => a.inlineBox),
-        this._createBox(0, r, e)
-      ]), this._setContextStyle({
-        ...(x ?? t).style,
-        textAlign: "left",
-        verticalAlign: "baseline"
-      });
-      const g = n.measureText("x"), f = g.fontBoundingBoxAscent + g.fontBoundingBoxDescent;
-      t.xHeight = g.actualBoundingBoxAscent, t.baseline = t.lineBox.top + (t.lineBox.height - f) / 2 + g.fontBoundingBoxAscent, r += t.lineBox.height;
-    }
-    for (let h = o.length, s = 0; s < h; s++) {
-      const t = o[s];
-      t.fragments.forEach((i) => {
-        const l = i.inlineBox.left, x = i.inlineBox.top;
-        let g, f = x;
-        switch (i.style.textAlign) {
-          case "end":
-          case "right":
-            g = l + (t.lineBox.width - t.contentBox.width);
-            break;
-          case "center":
-            g = l + (t.lineBox.width - t.contentBox.width) / 2;
-            break;
-          case "start":
-          case "left":
-          default:
-            g = l + t.lineBox.left;
-            break;
-        }
-        switch (i.style.verticalAlign) {
-          case "top":
-            f = x + (t.lineBox.top - i.inlineBox.top);
-            break;
-          case "middle":
-            f = t.baseline - t.xHeight / 2 - i.inlineBox.height / 2;
-            break;
-          case "bottom":
-            f = x + (t.lineBox.bottom - i.inlineBox.bottom);
-            break;
-          case "sub":
-            f = x + (t.baseline - i.glyphBox.bottom);
-            break;
-          case "super":
-            f = x + (t.baseline - i.glyphBox.top);
-            break;
-          case "text-top":
-            f = x + (t.glyphBox.top - i.inlineBox.top);
-            break;
-          case "text-bottom":
-            f = x + (t.glyphBox.bottom - i.inlineBox.bottom);
+  (t.fontStyle || t.fontWeight !== void 0 || t.fontSize !== void 0 || t.fontFamily) && (c.font = [
+    t.fontStyle || "normal",
+    t.fontWeight || "normal",
+    `${t.fontSize || 14}px`,
+    t.fontFamily || "sans-serif"
+  ].join(" "));
+}
+function T(c, t) {
+  const h = L().getContext("2d");
+  return E(h, t), h.measureText(c);
+}
+const N = /[\s\n\t\u200B\u200C\u200D\u200E\u200F.,?!:;"'(){}\[\]<>\/\\|~#\$%\*\+=&^，。？！：；“”‘’（）【】《》……——]/;
+function K(c, t, h) {
+  const s = [], n = c.slice();
+  let a, d;
+  for (; a = n.shift(); ) {
+    const f = a.fragments.slice();
+    let w = 0;
+    const m = [];
+    for (; d = f.shift(); ) {
+      const p = d.getComputedStyle();
+      let C = "", l = !1, o = 0, i = "";
+      for (const B of d.content) {
+        if (a.maxCharWidth = Math.max(a.maxCharWidth, T(B, p).width), i += B, N.test(d.content[++o]))
+          continue;
+        let r, x;
+        switch (p.writingMode) {
+          case "vertical-lr":
+          case "vertical-rl":
+            r = h, x = i.length * p.fontSize;
             break;
-          case "baseline":
+          case "horizontal-tb":
           default:
-            i.inlineBox.height < t.lineBox.height && (f = x + (t.baseline - i.baseline));
+            r = t, x = T(i, p).width;
             break;
         }
-        const a = g - l, c = f - x;
-        this._moveBox(i.inlineBox, a, c), this._moveBox(i.contentBox, a, c), this._moveBox(i.glyphBox, a, c), i.baseline += c, i.centerX += a;
-      }), t.contentBox = this._mergeBoxes(t.fragments.map((i) => i.contentBox)), t.glyphBox = this._mergeBoxes(t.fragments.map((i) => i.glyphBox));
+        x += i.length * p.letterSpacing;
+        const u = /^[\r\n]$/.test(i);
+        if (u || p.textWrap === "wrap" && r && w + x > r) {
+          let e = u ? C.length + 1 : C.length;
+          !w && !e && (C += i, e += i.length), C.length && m.push(d.clone({ content: C })), m.length && (s.push(
+            a.clone({
+              fragments: m.slice()
+            })
+          ), m.length = 0);
+          const b = d.content.substring(e);
+          (b.length || f.length) && n.unshift(
+            a.clone({
+              maxCharWidth: 0,
+              fragments: (b.length ? [d.clone({ content: b })] : []).concat(f.slice())
+            })
+          ), f.length = 0, l = !0;
+          break;
+        } else
+          w += x;
+        C += i, i = "";
+      }
+      l || m.push(d.clone());
     }
-    return {
-      actualContentBox: this._mergeBoxes(o.map((h) => h.contentBox)),
-      contentBox: this._mergeBoxes(o.map((h) => h.lineBox)),
-      glyphBox: this._mergeBoxes(o.map((h) => h.glyphBox)),
-      paragraphs: o
-    };
+    m.length && s.push(a.clone({ fragments: m }));
   }
-  _createParagraphs(e) {
-    const o = /* @__PURE__ */ new Set([
-      "color",
-      "backgroundColor",
-      "textStrokeColor",
-      "shadowColor"
-    ]), n = (...t) => {
-      const i = t.pop();
-      return t.reduce((l, x) => {
-        for (const g in x)
-          o.has(g) || (l[g] = x[g]);
-        return l;
-      }, i);
-    }, r = (t = {}) => {
-      const { width: i, height: l, ...x } = this.style;
-      return {
-        contentBox: this._createBox(),
-        lineBox: this._createBox(),
-        glyphBox: this._createBox(),
-        baseline: 0,
-        fragments: [],
-        ...t,
-        style: n(x, t.style ?? {})
-      };
-    }, h = (t, i) => {
-      let l;
-      if (typeof t == "string")
-        l = { content: t };
-      else {
-        const { content: B, ...d } = t;
-        l = { content: B, style: d };
-      }
-      const { width: x, height: g, ...f } = this.style, a = n(f, i ?? {}, l.style ?? {});
-      let c = l.content ?? "";
-      switch (a.textTransform) {
-        case "uppercase":
-          c = c.toUpperCase();
+  return s;
+}
+function G(c) {
+  return {
+    width: 0,
+    height: 0,
+    color: null,
+    backgroundColor: null,
+    fontSize: 14,
+    fontWeight: "normal",
+    fontFamily: "sans-serif",
+    fontStyle: "normal",
+    fontKerning: "normal",
+    textWrap: "wrap",
+    textAlign: "start",
+    verticalAlign: "baseline",
+    textTransform: "none",
+    textDecoration: null,
+    textStrokeWidth: 0,
+    textStrokeColor: null,
+    direction: "inherit",
+    lineHeight: 1,
+    letterSpacing: 0,
+    shadowColor: null,
+    shadowOffsetX: 0,
+    shadowOffsetY: 0,
+    shadowBlur: 0,
+    writingMode: "horizontal-tb",
+    ...c
+  };
+}
+function U(c) {
+  const { content: t } = c, { width: h, height: s, ...n } = G(c.style);
+  let a = $(t, n);
+  a = K(a, h, s);
+  const d = a.reduce((o, i) => o + i.maxCharWidth, 0);
+  let f = 0, w = 0;
+  a.forEach((o) => {
+    const i = [];
+    let B = null, r = f, x = w;
+    o.fragments.forEach((e, b) => {
+      const g = e.getComputedStyle();
+      switch (g.writingMode) {
+        case "vertical-rl":
+          r = d - r;
+        case "vertical-lr": {
+          b || (x = 0);
+          const S = e.content.length, k = o.maxCharWidth, v = k * g.lineHeight, A = S * g.fontSize + (S - 1) * g.letterSpacing;
+          e.contentBox.x = r + (v - k) / 2, e.contentBox.y = x, e.contentBox.width = k, e.contentBox.height = A, e.inlineBox.x = r, e.inlineBox.y = x, e.inlineBox.width = v, e.inlineBox.height = A, e.glyphBox.x = r + (v - k) / 2, e.glyphBox.y = x, e.glyphBox.width = k, e.glyphBox.height = A, e.baseline = 0, e.centerX = r + v / 2, x += A;
           break;
-        case "lowercase":
-          c = c.toLowerCase();
+        }
+        case "horizontal-tb": {
+          b || (r = 0);
+          const {
+            fontBoundingBoxAscent: S,
+            fontBoundingBoxDescent: k,
+            actualBoundingBoxAscent: v,
+            actualBoundingBoxDescent: A,
+            actualBoundingBoxLeft: O,
+            actualBoundingBoxRight: P,
+            width: z
+          } = T(e.content, {
+            ...g,
+            textAlign: "center",
+            verticalAlign: "baseline"
+          }), F = g.fontSize, X = F * g.lineHeight, R = x + (X - (S + k)) / 2 + S;
+          e.contentBox.x = r, e.contentBox.y = x + (X - F) / 2, e.contentBox.width = z, e.contentBox.height = F, e.inlineBox.x = r, e.inlineBox.y = x, e.inlineBox.width = z, e.inlineBox.height = X, e.glyphBox.x = r, e.glyphBox.y = R - v, e.glyphBox.width = O + P, e.glyphBox.height = v + A, e.baseline = R, e.centerX = r + O, i.push(e.contentBox), o.contentBox = y.from(...i), o.contentBox.height < e.contentBox.height && (B = e), r += z;
           break;
-      }
-      return {
-        contentBox: this._createBox(),
-        inlineBox: this._createBox(),
-        glyphBox: this._createBox(),
-        centerX: 0,
-        baseline: 0,
-        ...l,
-        style: a,
-        content: c
-      };
-    }, s = [];
-    if (typeof e == "string")
-      s.push(r({ fragments: [h(e)] }));
-    else {
-      e = Array.isArray(e) ? e : [e];
-      for (const t of e)
-        if (typeof t == "string")
-          s.push(r({ fragments: [h(t)] }));
-        else if (Array.isArray(t))
-          s.push(r({ fragments: t.map((i) => h(i)) }));
-        else if ("fragments" in t) {
-          const { fragments: i, ...l } = t;
-          s.push(r({
-            style: l,
-            fragments: i.map((x) => h(x, l))
-          }));
-        } else if ("content" in t) {
-          const { content: i, ...l } = t;
-          s.push(r({
-            style: l,
-            fragments: [h(i, l)]
-          }));
         }
-    }
-    return s;
-  }
-  _wrapParagraphs(e, o) {
-    var i;
-    const n = (l) => JSON.parse(JSON.stringify(l)), r = [], h = e.slice();
-    let s, t;
-    for (; s = h.shift(); ) {
-      const l = s.fragments.slice();
-      let x = 0;
-      const g = [];
-      for (; t = l.shift(); ) {
-        const f = t.style, a = (i = f.writingMode) == null ? void 0 : i.startsWith("vertical");
-        this._setContextStyle(f);
-        let c = "", B = !1, d = 0, p = "";
-        for (const w of t.content) {
-          if (p += w, !a && u.punctuationRegex.test(t.content[++d]))
-            continue;
-          const y = this.context.measureText(p).width, _ = /^[\r\n]$/.test(p);
-          if (_ || a || f.textWrap === "wrap" && o && x + y > o) {
-            let m = _ ? c.length + 1 : c.length;
-            !x && !m && (c += p, m += p.length), c.length && g.push({ ...n(t), content: c }), g.length && (r.push({ ...n(s), fragments: g.slice() }), g.length = 0);
-            const b = t.content.substring(m);
-            (b.length || l.length) && h.unshift({
-              ...n(s),
-              fragments: (b.length ? [{ ...n(t), content: b }] : []).concat(l.slice())
-            }), l.length = 0, B = !0;
-            break;
-          } else
-            x += y;
-          c += p, p = "";
+      }
+    }), o.lineBox = y.from(...o.fragments.map((e) => e.inlineBox)), f += o.lineBox.width, w += o.lineBox.height;
+    const u = T("x", {
+      ...(B ?? o).getComputedStyle(),
+      textAlign: "left",
+      verticalAlign: "baseline"
+    });
+    o.xHeight = u.actualBoundingBoxAscent, o.baseline = o.lineBox.y + (o.lineBox.height - (u.fontBoundingBoxAscent + u.fontBoundingBoxDescent)) / 2 + u.fontBoundingBoxAscent;
+  });
+  const m = y.from(
+    ...a.map((o) => o.lineBox),
+    new y({ width: h, height: s })
+  ), { width: p, height: C } = m;
+  a.forEach((o) => {
+    o.contentBox = y.from(...o.fragments.map((i) => i.contentBox)), o.glyphBox = y.from(...o.fragments.map((i) => i.glyphBox)), o.fragments.forEach((i) => {
+      const B = i.getComputedStyle(), r = i.inlineBox.x, x = i.inlineBox.y;
+      let u = r, e = x;
+      switch (B.writingMode) {
+        case "vertical-rl":
+        case "vertical-lr":
+          switch (B.textAlign) {
+            case "end":
+            case "right":
+              e += C - o.contentBox.height;
+              break;
+            case "center":
+              e += (C - o.contentBox.height) / 2;
+              break;
+          }
+          break;
+        case "horizontal-tb": {
+          switch (B.textAlign) {
+            case "end":
+            case "right":
+              u += p - o.contentBox.width;
+              break;
+            case "center":
+              u += (p - o.contentBox.width) / 2;
+              break;
+          }
+          switch (B.verticalAlign) {
+            case "top":
+              e += o.lineBox.y - i.inlineBox.y;
+              break;
+            case "middle":
+              e = o.baseline - o.xHeight / 2 - i.inlineBox.height / 2;
+              break;
+            case "bottom":
+              e += o.lineBox.bottom - i.inlineBox.bottom;
+              break;
+            case "sub":
+              e += o.baseline - i.glyphBox.bottom;
+              break;
+            case "super":
+              e += o.baseline - i.glyphBox.y;
+              break;
+            case "text-top":
+              e += o.glyphBox.y - i.inlineBox.y;
+              break;
+            case "text-bottom":
+              e += o.glyphBox.bottom - i.inlineBox.bottom;
+              break;
+            case "baseline":
+            default:
+              i.inlineBox.height < o.lineBox.height && (e += o.baseline - i.baseline);
+              break;
+          }
+          break;
         }
-        B || g.push(n(t));
       }
-      g.length && r.push({ ...n(s), fragments: g });
-    }
-    return r;
+      const b = u - r, g = e - x;
+      i.inlineBox.move(b, g), i.contentBox.move(b, g), i.glyphBox.move(b, g), i.baseline += g, i.centerX += b;
+    }), o.contentBox = y.from(...o.fragments.map((i) => i.contentBox)), o.glyphBox = y.from(...o.fragments.map((i) => i.glyphBox));
+  });
+  const l = y.from(...a.map((o) => o.contentBox));
+  return {
+    box: m,
+    contentBox: l,
+    viewBox: y.from(m, l),
+    glyphBox: y.from(...a.map((o) => o.glyphBox)),
+    paragraphs: a
+  };
+}
+function W(c, t, h) {
+  if (typeof t == "string" && t.startsWith("linear-gradient")) {
+    const { x0: s, y0: n, x1: a, y1: d, stops: f } = V(t, h.left, h.top, h.width, h.height), w = c.createLinearGradient(s, n, a, d);
+    return f.forEach((m) => w.addColorStop(m.offset, m.color)), w;
   }
-  _draw(e) {
-    const o = this.context, { width: n, height: r } = o.canvas, h = { left: 0, top: 0, width: n, height: r };
-    this.style.backgroundColor && (o.fillStyle = this._parseColor(this.style.backgroundColor, h), o.fillRect(0, 0, n, r)), e.forEach((s) => {
-      s.style.backgroundColor && (o.fillStyle = this._parseColor(s.style.backgroundColor, s.contentBox), o.fillRect(s.lineBox.left, s.lineBox.top, s.lineBox.width, s.lineBox.height)), s.fragments.forEach((t) => {
-        t.style.backgroundColor && (o.fillStyle = this._parseColor(t.style.backgroundColor, t.contentBox), o.fillRect(t.inlineBox.left, t.inlineBox.top, t.inlineBox.width, t.inlineBox.height));
+  return t;
+}
+function V(c, t, h, s, n) {
+  var o;
+  const a = ((o = c.match(/linear-gradient\((.+)\)$/)) == null ? void 0 : o[1]) ?? "", d = a.split(",")[0], f = d.includes("deg") ? d : "0deg", w = a.replace(f, "").matchAll(/(#|rgba|rgb)(.+?) ([\d.]+?%)/gi), p = (Number(f.replace("deg", "")) || 0) * Math.PI / 180, C = s * Math.sin(p), l = n * Math.cos(p);
+  return {
+    x0: t + s / 2 - C,
+    y0: h + n / 2 + l,
+    x1: t + s / 2 + C,
+    y1: h + n / 2 - l,
+    stops: Array.from(w).map((i) => {
+      let B = i[2];
+      return B.startsWith("(") ? B = B.split(",").length > 3 ? `rgba${B}` : `rgb${B}` : B = `#${B}`, {
+        offset: Number(i[3].replace("%", "")) / 100,
+        color: B
+      };
+    })
+  };
+}
+function j(c) {
+  const {
+    view: t = document.createElement("canvas"),
+    style: h,
+    pixelRatio: s = 1
+  } = c, n = { ...h }, { box: a, viewBox: d, paragraphs: f } = U(c), { x: w, y: m, width: p, height: C } = d, l = t.getContext("2d"), o = -w + p, i = -m + C;
+  t.style.width = `${o}px`, t.style.height = `${i}px`, t.dataset.width = String(a.width), t.dataset.height = String(a.height), t.dataset.pixelRatio = String(s), t.width = Math.max(1, Math.floor(o * s)), t.height = Math.max(1, Math.floor(i * s)), l.scale(s, s), l.clearRect(0, 0, t.width, t.height), l.translate(-w, -m);
+  const B = new y({ width: p, height: C });
+  return n != null && n.color && (n.color = W(l, n.color, B)), n != null && n.backgroundColor && (n.backgroundColor = W(l, n.backgroundColor, B)), n != null && n.textStrokeColor && (n.textStrokeColor = W(l, n.textStrokeColor, B)), n != null && n.backgroundColor && (l.fillStyle = n.backgroundColor, l.fillRect(0, 0, t.width, t.height)), f.forEach((r) => {
+    var x, u, e, b;
+    (x = r.style) != null && x.color && (r.style.color = W(l, r.style.color, r.contentBox)), (u = r.style) != null && u.backgroundColor && (r.style.backgroundColor = W(l, r.style.backgroundColor, r.contentBox)), (e = r.style) != null && e.textStrokeColor && (r.style.textStrokeColor = W(l, r.style.textStrokeColor, r.contentBox)), (b = r.style) != null && b.backgroundColor && (l.fillStyle = r.style.backgroundColor, l.fillRect(r.lineBox.x, r.lineBox.y, r.lineBox.width, r.lineBox.height)), r.fragments.forEach((g) => {
+      var S, k, v, A;
+      (S = g.style) != null && S.color && (g.style.color = W(l, g.style.color, g.contentBox)), (k = g.style) != null && k.backgroundColor && (g.style.backgroundColor = W(l, g.style.backgroundColor, g.contentBox)), (v = g.style) != null && v.textStrokeColor && (g.style.textStrokeColor = W(l, g.style.textStrokeColor, g.contentBox)), (A = g.style) != null && A.backgroundColor && (l.fillStyle = g.style.backgroundColor, l.fillRect(g.inlineBox.x, g.inlineBox.y, g.inlineBox.width, g.inlineBox.height));
+    });
+  }), E(l, n), f.forEach((r) => {
+    r.style && E(l, r.style), r.fragments.forEach((x) => {
+      E(l, {
+        ...x.style,
+        textAlign: "left",
+        verticalAlign: "top"
       });
-    }), this._setContextStyle(this.style, h), e.forEach((s) => {
-      this._setContextStyle(s.style, s.contentBox), s.fragments.forEach((t) => {
-        this._setContextStyle({
-          ...t.style,
-          textAlign: "left",
-          verticalAlign: "top"
-        }, t.contentBox);
-        const { left: i, top: l, width: x, height: g } = t.contentBox;
-        switch (t.style.textStrokeWidth && o.strokeText(t.content, i, l), o.fillText(t.content, i, l), t.style.textDecoration) {
-          case "underline":
-            o.beginPath(), o.moveTo(i, l + g - 2), o.lineTo(i + x, l + g - 2), o.stroke();
-            break;
-          case "line-through":
-            o.beginPath(), o.moveTo(i, l + g / 2), o.lineTo(i + x, l + g / 2), o.stroke();
-            break;
+      const { x: u, y: e, width: b, height: g } = x.contentBox, S = x.getComputedStyle();
+      switch (S.writingMode) {
+        case "vertical-rl":
+        case "vertical-lr": {
+          let k = 0;
+          for (const v of x.content)
+            S.textStrokeWidth && l.strokeText(v, u, e + k), l.fillText(v, u, e + k), k += S.fontSize + S.letterSpacing;
+          break;
         }
-      });
+        case "horizontal-tb":
+          S.textStrokeWidth && l.strokeText(x.content, u, e), l.fillText(x.content, u, e);
+          break;
+      }
+      switch (S.textDecoration) {
+        case "underline":
+          l.beginPath(), l.moveTo(u, e + g - 2), l.lineTo(u + b, e + g - 2), l.stroke();
+          break;
+        case "line-through":
+          l.beginPath(), l.moveTo(u, e + g / 2), l.lineTo(u + b, e + g / 2), l.stroke();
+          break;
+      }
     });
-  }
-  _resizeView(e, o) {
-    const n = this.view;
-    n.style.width = `${e}px`, n.style.height = `${o}px`, n.dataset.width = String(e), n.dataset.height = String(o), n.width = Math.max(1, Math.floor(e * this.pixelRatio)), n.height = Math.max(1, Math.floor(o * this.pixelRatio));
-  }
-  _parseColor(e, o) {
-    if (e.startsWith("linear-gradient")) {
-      const { x0: n, y0: r, x1: h, y1: s, stops: t } = C(e, o.left, o.top, o.width, o.height), i = this.context.createLinearGradient(n, r, h, s);
-      return t.forEach((l) => i.addColorStop(l.offset, l.color)), i;
-    }
-    return e;
-  }
-  _setContextStyle(e, o) {
-    const n = this.context;
-    switch (e.shadowColor && (n.shadowColor = e.shadowColor), n.shadowOffsetX = e.shadowOffsetX, n.shadowOffsetY = e.shadowOffsetY, n.shadowBlur = e.shadowBlur, e.textStrokeColor && o && (n.strokeStyle = this._parseColor(e.textStrokeColor, o)), n.lineWidth = e.textStrokeWidth, e.color && o && (n.fillStyle = this._parseColor(e.color, o)), n.direction = e.direction, n.textAlign = e.textAlign, e.verticalAlign) {
-      case "baseline":
-        n.textBaseline = "alphabetic";
-        break;
-      case "top":
-      case "middle":
-      case "bottom":
-        n.textBaseline = e.verticalAlign;
-        break;
-    }
-    n.font = [
-      e.fontStyle,
-      e.fontWeight,
-      `${e.fontSize}px`,
-      e.fontFamily
-    ].join(" "), n.fontKerning = e.fontKerning, n.letterSpacing = `${e.letterSpacing}px`;
-  }
-  update() {
-    const e = this.context;
-    let { width: o, height: n } = this.style;
-    o === "auto" && (o = 0), n === "auto" && (n = 0);
-    const { contentBox: r, paragraphs: h } = this.measure();
-    o || (o = r.width), n = Math.max(n, r.height), this._resizeView(o, n);
-    const s = this.pixelRatio;
-    e.scale(s, s), e.clearRect(0, 0, e.canvas.width, e.canvas.height), this._draw(h);
-  }
-};
-u.punctuationRegex = /[\s\n\t\u200B\u200C\u200D\u200E\u200F.,?!:;"'(){}\[\]<>\/\\|~#\$%\*\+=&^，。？！：；“”‘’（）【】《》……——]/;
-let S = u;
+  }), t;
+}
 export {
-  S as Text
+  U as measureText,
+  j as renderText
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-text",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "packageManager": "pnpm@8.14.1",
   "description": "Measure and render text in a way that describes the DOM.",
   "author": "wxm",
@@ -60,7 +60,7 @@
     "bumpp": "^9.3.0",
     "conventional-changelog-cli": "^4.1.0",
     "eslint": "^8.56.0",
-    "typescript": "^5.3.3",
+    "typescript": "^4.9.5",
     "vite": "^5.0.11",
     "vitest": "^1.2.1"
   }

package/types/bounding-box.d.ts

@@ -0,0 +1,20 @@
+export interface BoundingBoxOptions {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+export declare class BoundingBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    get left(): number;
+    get top(): number;
+    get right(): number;
+    get bottom(): number;
+    constructor({ x, y, width, height }?: BoundingBoxOptions);
+    static from(...boxes: Array<BoundingBox>): BoundingBox;
+    move(tx: number, ty: number): this;
+    clone(): BoundingBox;
+}

package/types/canvas.d.ts

@@ -0,0 +1,4 @@
+import type { TextStyle } from './types';
+export declare function getCurrentCanvas(): OffscreenCanvas | HTMLCanvasElement;
+export declare function setContextStyle(ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D, style: Partial<TextStyle>): void;
+export declare function canvasMeasureText(text: string, style: TextStyle): TextMetrics;

package/types/fragment.d.ts

@@ -0,0 +1,26 @@
+import { BoundingBox } from './bounding-box';
+import type { Paragraph } from './paragraph';
+import type { TextStyle } from './types';
+export interface FragmentOptions {
+    content?: string;
+    style?: Partial<TextStyle>;
+    parent?: Paragraph;
+    contentBox?: BoundingBox;
+    inlineBox?: BoundingBox;
+    glyphBox?: BoundingBox;
+    centerX?: number;
+    baseline?: number;
+}
+export declare class Fragment {
+    content: string;
+    style?: Partial<TextStyle>;
+    parent?: Paragraph;
+    contentBox: BoundingBox;
+    inlineBox: BoundingBox;
+    glyphBox: BoundingBox;
+    centerX: number;
+    baseline: number;
+    constructor({ content, style, parent, contentBox, inlineBox, glyphBox, centerX, baseline, }?: FragmentOptions);
+    getComputedStyle(): TextStyle;
+    clone(options?: Partial<FragmentOptions>): Fragment;
+}

package/types/index.d.ts

@@ -1 +1,3 @@
-export * from './Text';
+export * from './measure-text';
+export * from './render-text';
+export * from './types';

package/types/measure-text.d.ts

@@ -0,0 +1,17 @@
+import { BoundingBox } from './bounding-box';
+import type { TextContent, TextStyle } from './types';
+export interface MeasureTextStyle extends TextStyle {
+    width: number;
+    height: number;
+}
+export interface MeasureTextOptions {
+    content: TextContent;
+    style?: Partial<MeasureTextStyle>;
+}
+export declare function measureText(options: MeasureTextOptions): {
+    box: BoundingBox;
+    contentBox: BoundingBox;
+    viewBox: BoundingBox;
+    glyphBox: BoundingBox;
+    paragraphs: import("./paragraph").Paragraph[];
+};

package/types/paragraph.d.ts

@@ -0,0 +1,30 @@
+import { BoundingBox } from './bounding-box';
+import { Fragment } from './fragment';
+import type { FragmentOptions } from './fragment';
+import type { TextStyle } from './types';
+export interface ParagraphOptions {
+    style?: Partial<TextStyle>;
+    parent?: TextStyle;
+    contentBox?: BoundingBox;
+    lineBox?: BoundingBox;
+    glyphBox?: BoundingBox;
+    baseline?: number;
+    xHeight?: number;
+    maxCharWidth?: number;
+    fragments?: Array<Fragment>;
+}
+export declare class Paragraph {
+    style?: Partial<TextStyle>;
+    parent?: TextStyle;
+    contentBox: BoundingBox;
+    lineBox: BoundingBox;
+    glyphBox: BoundingBox;
+    baseline: number;
+    xHeight: number;
+    maxCharWidth: number;
+    fragments: Array<Fragment>;
+    constructor({ style, parent, contentBox, lineBox, glyphBox, baseline, xHeight, maxCharWidth, fragments, }?: ParagraphOptions);
+    addFragment(options: FragmentOptions): this;
+    getComputedStyle(): TextStyle;
+    clone(options?: Partial<ParagraphOptions>): Paragraph;
+}

package/types/parse-color.d.ts

@@ -0,0 +1,2 @@
+import type { BoundingBox } from './bounding-box';
+export declare function parseColor(ctx: CanvasRenderingContext2D, source: string | CanvasGradient | CanvasPattern, box: BoundingBox): string | CanvasGradient | CanvasPattern;

package/types/parse-paragraphs.d.ts

@@ -0,0 +1,3 @@
+import { Paragraph } from './paragraph';
+import type { TextContent, TextStyle } from './types';
+export declare function parseParagraphs(content: TextContent, style: TextStyle): Array<Paragraph>;

package/types/render-text.d.ts

@@ -0,0 +1,6 @@
+import type { MeasureTextOptions } from './measure-text';
+export interface RenderTextOptions extends MeasureTextOptions {
+    view?: HTMLCanvasElement;
+    pixelRatio?: number;
+}
+export declare function renderText(options: RenderTextOptions): HTMLCanvasElement;

package/types/types.d.ts

@@ -0,0 +1,40 @@
+export type FontWeight = 'normal' | 'bold' | 'lighter' | 'bolder' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+export type FontStyle = 'normal' | 'italic' | 'oblique' | `oblique ${string}`;
+export type FontKerning = 'auto' | 'none' | 'normal';
+export type TextWrap = 'wrap' | 'nowrap';
+export type TextAlign = 'center' | 'end' | 'left' | 'right' | 'start';
+export type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'sub' | 'super' | 'text-top' | 'text-bottom';
+export type TextDecoration = 'underline' | 'line-through';
+export type TextTransform = 'uppercase' | 'lowercase' | 'none';
+export type WritingMode = 'horizontal-tb' | 'vertical-lr' | 'vertical-rl';
+export interface TextStyle {
+    color: string | CanvasGradient | CanvasPattern | null;
+    backgroundColor: string | CanvasGradient | CanvasPattern | null;
+    fontSize: number;
+    fontWeight: FontWeight;
+    fontFamily: string;
+    fontStyle: FontStyle;
+    fontKerning: FontKerning;
+    textWrap: TextWrap;
+    textAlign: TextAlign;
+    verticalAlign: VerticalAlign;
+    textTransform: TextTransform;
+    textDecoration: TextDecoration | null;
+    textStrokeWidth: number;
+    textStrokeColor: string | CanvasGradient | CanvasPattern | null;
+    direction: 'inherit' | 'ltr' | 'rtl';
+    lineHeight: number;
+    letterSpacing: number;
+    shadowColor: string | null;
+    shadowOffsetX: number;
+    shadowOffsetY: number;
+    shadowBlur: number;
+    writingMode: WritingMode;
+}
+export interface FragmentContent extends Partial<TextStyle> {
+    content: string;
+}
+export interface ParagraphContent extends Partial<TextStyle> {
+    fragments: Array<FragmentContent>;
+}
+export type TextContent = string | FragmentContent | ParagraphContent | Array<string | Array<string | FragmentContent> | FragmentContent | ParagraphContent>;

package/types/wrap-paragraphs.d.ts

@@ -0,0 +1,2 @@
+import type { Paragraph } from './paragraph';
+export declare function wrapParagraphs(paragraphs: Array<Paragraph>, width?: number, height?: number): Array<Paragraph>;

package/types/Text.d.ts

@@ -1,107 +0,0 @@
-export type FontWeight = 'normal' | 'bold' | 'lighter' | 'bolder' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-export type FontStyle = 'normal' | 'italic' | 'oblique' | `oblique ${string}`;
-export type FontKerning = 'auto' | 'none' | 'normal';
-export type TextWrap = 'wrap' | 'nowrap';
-export type TextAlign = 'center' | 'end' | 'left' | 'right' | 'start';
-export type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'sub' | 'super' | 'text-top' | 'text-bottom';
-export type TextDecoration = 'underline' | 'line-through';
-export type TextTransform = 'uppercase' | 'lowercase' | 'none';
-export type WritingMode = 'horizontal-tb' | 'vertical-lr' | 'vertical-rl';
-export interface BoundingBox {
-    left: number;
-    right: number;
-    top: number;
-    bottom: number;
-    width: number;
-    height: number;
-}
-export interface TextParagraph {
-    contentBox: BoundingBox;
-    lineBox: BoundingBox;
-    glyphBox: BoundingBox;
-    baseline: number;
-    xHeight: number;
-    fragments: Array<TextFragment>;
-    style: TextFragmentStyle;
-}
-export interface TextFragment {
-    contentBox: BoundingBox;
-    inlineBox: BoundingBox;
-    glyphBox: BoundingBox;
-    centerX: number;
-    baseline: number;
-    content: string;
-    style: TextFragmentStyle;
-}
-export interface TextFragmentStyle {
-    color?: string;
-    backgroundColor?: string;
-    fontSize: number;
-    fontWeight: FontWeight;
-    fontFamily: string;
-    fontStyle: FontStyle;
-    fontKerning: FontKerning;
-    textWrap: TextWrap;
-    textAlign: TextAlign;
-    verticalAlign: VerticalAlign;
-    textTransform: TextTransform;
-    textDecoration: TextDecoration | null;
-    textStrokeWidth: number;
-    textStrokeColor?: string;
-    direction: 'inherit' | 'ltr' | 'rtl';
-    lineHeight: number;
-    letterSpacing: number;
-    shadowColor?: string;
-    shadowOffsetX: number;
-    shadowOffsetY: number;
-    shadowBlur: number;
-    writingMode: WritingMode;
-}
-export interface TextStyle extends TextFragmentStyle {
-    width: number | 'auto';
-    height: number | 'auto';
-}
-export interface TextParagraphWithContentAndStyle extends Partial<TextFragmentStyle> {
-    content: string;
-}
-export interface TextParagraphWithFragmentsAndStyle extends Partial<TextFragmentStyle> {
-    fragments: Array<TextFragmentWithStyle>;
-}
-export interface TextFragmentWithStyle extends Partial<TextFragmentStyle> {
-    content: string;
-}
-export type TextContent = string | TextParagraphWithContentAndStyle | TextParagraphWithFragmentsAndStyle | Array<string | Array<string | TextParagraphWithContentAndStyle> | TextParagraphWithContentAndStyle | TextParagraphWithFragmentsAndStyle>;
-export interface TextOptions {
-    view?: HTMLCanvasElement;
-    pixelRatio?: number;
-    content?: TextContent;
-    style?: Partial<TextStyle>;
-}
-export interface Metrics {
-    contentBox: BoundingBox;
-    glyphBox: BoundingBox;
-    actualContentBox: BoundingBox;
-    paragraphs: Array<TextParagraph>;
-}
-export declare class Text {
-    static punctuationRegex: RegExp;
-    static get defaultStyle(): TextStyle;
-    readonly view: HTMLCanvasElement;
-    readonly context: CanvasRenderingContext2D;
-    pixelRatio: number;
-    style: TextStyle;
-    content: TextContent;
-    constructor(options?: TextOptions);
-    protected _createBox(left?: number, top?: number, width?: number, height?: number): BoundingBox;
-    protected _moveBox(box: BoundingBox, tx?: number, ty?: number): void;
-    protected _updateBoxSize(box: BoundingBox): void;
-    protected _mergeBoxes(boxes: Array<BoundingBox>): BoundingBox;
-    measure(): Metrics;
-    protected _createParagraphs(content: TextContent): Array<TextParagraph>;
-    protected _wrapParagraphs(paragraphs: Array<TextParagraph>, width: number): Array<TextParagraph>;
-    protected _draw(paragraphs: Array<TextParagraph>): void;
-    protected _resizeView(width: number, height: number): void;
-    protected _parseColor(cssColor: string, box: Omit<BoundingBox, 'right' | 'bottom'>): string | CanvasGradient;
-    protected _setContextStyle(style: TextFragmentStyle, box?: Omit<BoundingBox, 'right' | 'bottom'>): void;
-    update(): void;
-}

package/types/utils.d.ts

@@ -1,10 +0,0 @@
-export declare function parseCssLinearGradient(css: string, x: number, y: number, width: number, height: number): {
-    x0: number;
-    y0: number;
-    x1: number;
-    y1: number;
-    stops: {
-        offset: number;
-        color: string;
-    }[];
-};