modern-text 0.1.8 → 0.1.10

package/dist/index.cjs

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

package/dist/index.js

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

package/dist/index.mjs

@@ -11,16 +11,16 @@ class u {
   get bottom() {
     return this.y + this.height;
   }
-  constructor({ x: t = 0, y: o = 0, width: h = 0, height: s = 0 } = {}) {
-    this.x = t, this.y = o, this.width = h, this.height = s;
+  constructor({ x: t = 0, y: o = 0, width: l = 0, height: a = 0 } = {}) {
+    this.x = t, this.y = o, this.width = l, this.height = a;
   }
   static from(...t) {
-    const o = t[0], h = t.slice(1).reduce((s, a) => (s.x = Math.min(s.x, a.x), s.y = Math.min(s.y, a.y), s.right = Math.max(s.right, a.right), s.bottom = Math.max(s.bottom, a.bottom), s), { x: o.x, y: o.y, right: o.right, bottom: o.bottom });
+    const o = t[0], l = t.slice(1).reduce((a, g) => (a.x = Math.min(a.x, g.x), a.y = Math.min(a.y, g.y), a.right = Math.max(a.right, g.right), a.bottom = Math.max(a.bottom, g.bottom), a), { x: o.x, y: o.y, right: o.right, bottom: o.bottom });
     return new u({
-      x: h.x,
-      y: h.y,
-      width: h.right - h.x,
-      height: h.bottom - h.y
+      x: l.x,
+      y: l.y,
+      width: l.right - l.x,
+      height: l.bottom - l.y
     });
   }
   move(t, o) {
@@ -35,18 +35,18 @@ class u {
     });
   }
 }
-class $ {
+class Y {
   constructor({
     content: t = "",
     style: o,
-    parent: h,
-    contentBox: s = new u(),
-    inlineBox: a = new u(),
-    glyphBox: g = new u(),
-    centerX: B = 0,
-    baseline: p = 0
+    parent: l,
+    contentBox: a = new u(),
+    inlineBox: g = new u(),
+    glyphBox: c = new u(),
+    centerX: f = 0,
+    baseline: y = 0
   } = {}) {
-    switch (this.content = t, this.style = o, this.parent = h, this.contentBox = s, this.inlineBox = a, this.glyphBox = g, this.centerX = B, this.baseline = p, this.getComputedStyle().textTransform) {
+    switch (this.content = t, this.style = o, this.parent = l, this.contentBox = a, this.inlineBox = g, this.glyphBox = c, this.centerX = f, this.baseline = y, this.getComputedStyle().textTransform) {
       case "uppercase":
         this.content = this.content.toUpperCase();
         break;
@@ -63,7 +63,7 @@ class $ {
     };
   }
   clone(t) {
-    return new $({
+    return new Y({
       content: this.content,
       style: this.style,
       parent: this.parent,
@@ -76,22 +76,22 @@ class $ {
     });
   }
 }
-class W {
+class E {
   constructor({
     style: t,
     parent: o,
-    contentBox: h = new u(),
-    lineBox: s = new u(),
-    glyphBox: a = new u(),
-    baseline: g = 0,
-    xHeight: B = 0,
-    maxCharWidth: p = 0,
-    fragments: m = []
+    contentBox: l = new u(),
+    lineBox: a = new u(),
+    glyphBox: g = new u(),
+    baseline: c = 0,
+    xHeight: f = 0,
+    maxCharWidth: y = 0,
+    fragments: p = []
   } = {}) {
-    this.style = t, this.parent = o, this.contentBox = h, this.lineBox = s, this.glyphBox = a, this.baseline = g, this.xHeight = B, this.maxCharWidth = p, this.fragments = m;
+    this.style = t, this.parent = o, this.contentBox = l, this.lineBox = a, this.glyphBox = g, this.baseline = c, this.xHeight = f, this.maxCharWidth = y, this.fragments = p;
   }
   addFragment(t) {
-    return this.fragments.push(new $({ ...t, parent: this })), this;
+    return this.fragments.push(new Y({ ...t, parent: this })), this;
   }
   getComputedStyle() {
     return {
@@ -100,7 +100,7 @@ class W {
     };
   }
   clone(t) {
-    return new W({
+    return new E({
       style: this.style,
       parent: this.parent,
       contentBox: this.contentBox.clone(),
@@ -114,44 +114,44 @@ class W {
     });
   }
 }
-function G(r, t) {
+function U(r, t) {
   const o = [];
   if (typeof r == "string")
-    o.push(new W({ parent: t }).addFragment({ content: r }));
+    o.push(new E({ parent: t }).addFragment({ content: r }));
   else {
     r = Array.isArray(r) ? r : [r];
-    for (const h of r)
-      if (typeof h == "string")
-        o.push(new W({ parent: t }).addFragment({ content: h }));
-      else if (Array.isArray(h)) {
-        const s = new W({ parent: t });
-        h.forEach((a) => {
-          if (typeof a == "string")
-            s.addFragment({ content: a });
+    for (const l of r)
+      if (typeof l == "string")
+        o.push(new E({ parent: t }).addFragment({ content: l }));
+      else if (Array.isArray(l)) {
+        const a = new E({ parent: t });
+        l.forEach((g) => {
+          if (typeof g == "string")
+            a.addFragment({ content: g });
           else {
-            const { content: g, ...B } = a;
-            s.addFragment({ content: g, style: B });
+            const { content: c, ...f } = g;
+            a.addFragment({ content: c, style: f });
           }
-        }), o.push(s);
-      } else if ("fragments" in h) {
-        const { fragments: s, ...a } = h, g = new W({ style: a, parent: t });
-        s.forEach((B) => {
-          const { content: p, ...m } = B;
-          g.addFragment({ content: p, style: m });
-        }), o.push(g);
-      } else if ("content" in h) {
-        const { content: s, ...a } = h;
-        o.push(new W({ style: a, parent: t }).addFragment({ content: s }));
+        }), o.push(a);
+      } else if ("fragments" in l) {
+        const { fragments: a, ...g } = l, c = new E({ style: g, parent: t });
+        a.forEach((f) => {
+          const { content: y, ...p } = f;
+          c.addFragment({ content: y, style: p });
+        }), o.push(c);
+      } else if ("content" in l) {
+        const { content: a, ...g } = l;
+        o.push(new E({ style: g, parent: t }).addFragment({ content: a }));
       }
   }
   return o;
 }
-const K = "OffscreenCanvas" in globalThis;
-let U;
-function j() {
-  return U ?? (U = K ? new OffscreenCanvas(1, 1) : document.createElement("canvas"));
+const j = "OffscreenCanvas" in globalThis;
+let I;
+function V() {
+  return I ?? (I = j ? new OffscreenCanvas(1, 1) : document.createElement("canvas"));
 }
-function Y(r, t) {
+function D(r, t) {
   switch (t.shadowColor && (r.shadowColor = t.shadowColor), t.shadowOffsetX !== void 0 && (r.shadowOffsetX = t.shadowOffsetX), t.shadowOffsetY !== void 0 && (r.shadowOffsetY = t.shadowOffsetY), t.shadowBlur !== void 0 && (r.shadowBlur = t.shadowBlur), t.textStrokeColor && (r.strokeStyle = t.textStrokeColor), t.textStrokeWidth !== void 0 && (r.lineWidth = t.textStrokeWidth), t.color && (r.fillStyle = t.color), t.textAlign && (r.textAlign = t.textAlign), t.fontKerning && (r.fontKerning = t.fontKerning), t.verticalAlign) {
     case "baseline":
       r.textBaseline = "alphabetic";
@@ -169,66 +169,66 @@ function Y(r, t) {
     t.fontFamily || "sans-serif"
   ].join(" "));
 }
-function z(r, t) {
-  const o = j().getContext("2d");
-  return Y(o, t), o.measureText(r);
+function F(r, t) {
+  const o = V().getContext("2d");
+  return D(o, t), o.measureText(r);
 }
-const I = /[\s\n\t\u200B\u200C\u200D\u200E\u200F.,?!:;"'(){}\[\]<>\/\\|~#\$%\*\+=&^，。？！：；“”‘’（）【】《》……——]/;
-function V(r, t, o) {
-  const h = [], s = r.slice();
-  let a, g;
-  for (; a = s.shift(); ) {
-    const B = a.fragments.slice();
-    let p = 0;
-    const m = [];
-    for (; g = B.shift(); ) {
-      const b = g.getComputedStyle();
-      let y = "", l = !1, v = 0, e = "";
-      for (const i of g.content) {
-        if (a.maxCharWidth = Math.max(
-          a.maxCharWidth,
-          z(i, { ...b, letterSpacing: 0 }).width
-        ), e += i, I.test(g.content[++v]))
+const q = /[\s\n\t\u200B\u200C\u200D\u200E\u200F.,?!:;"'(){}\[\]<>\/\\|~#\$%\*\+=&^，。？！：；“”‘’（）【】《》……——]/;
+function J(r, t, o) {
+  const l = [], a = r.slice();
+  let g, c;
+  for (; g = a.shift(); ) {
+    const f = g.fragments.slice();
+    let y = 0;
+    const p = [];
+    for (; c = f.shift(); ) {
+      const S = c.getComputedStyle();
+      let k = "", h = !1, A = 0, m = "";
+      for (const x of c.content) {
+        if (g.maxCharWidth = Math.max(
+          g.maxCharWidth,
+          F(x, { ...S, letterSpacing: 0 }).width
+        ), m += x, q.test(c.content[++A]))
           continue;
-        let S, c;
-        switch (b.writingMode) {
+        let n, i;
+        switch (S.writingMode) {
           case "vertical-lr":
           case "vertical-rl":
-            S = o, c = e.length * b.fontSize;
+            n = o, i = m.length * S.fontSize;
             break;
           case "horizontal-tb":
           default:
-            S = t, c = z(e, { ...b, letterSpacing: 0 }).width;
+            n = t, i = F(m, { ...S, letterSpacing: 0 }).width;
             break;
         }
-        c += e.length * b.letterSpacing;
-        const f = /^[\r\n]$/.test(e);
-        if (f || b.textWrap === "wrap" && S && p + c > S) {
-          let x = f ? y.length + 1 : y.length;
-          !p && !x && (y += e, x += e.length), y.length && m.push(g.clone({ content: y })), m.length && (h.push(
-            a.clone({
-              fragments: m.slice()
+        i += m.length * S.letterSpacing;
+        const d = /^[\r\n]$/.test(m);
+        if (d || S.textWrap === "wrap" && n && y + i > n) {
+          let s = d ? k.length + 1 : k.length;
+          !y && !s && (k += m, s += m.length), k.length && p.push(c.clone({ content: k })), p.length && (l.push(
+            g.clone({
+              fragments: p.slice()
             })
-          ), m.length = 0);
-          const n = g.content.substring(x);
-          (n.length || B.length) && s.unshift(
-            a.clone({
+          ), p.length = 0);
+          const B = c.content.substring(s);
+          (B.length || f.length) && a.unshift(
+            g.clone({
               maxCharWidth: 0,
-              fragments: (n.length ? [g.clone({ content: n })] : []).concat(B.slice())
+              fragments: (B.length ? [c.clone({ content: B })] : []).concat(f.slice())
             })
-          ), B.length = 0, l = !0;
+          ), f.length = 0, h = !0;
           break;
         } else
-          p += c;
-        y += e, e = "";
+          y += i;
+        k += m, m = "";
       }
-      l || m.push(g.clone());
+      h || p.push(c.clone());
     }
-    m.length && h.push(a.clone({ fragments: m }));
+    p.length && l.push(g.clone({ fragments: p }));
   }
-  return h;
+  return l;
 }
-function q(r) {
+function Q(r) {
   return {
     width: 0,
     height: 0,
@@ -256,213 +256,222 @@ function q(r) {
     ...r
   };
 }
-function J(r) {
-  const { content: t } = r, { width: o, height: h, ...s } = q(r.style);
-  let a = G(t, s);
-  a = V(a, o, h);
-  let g = a.reduce((e, i) => e + i.maxCharWidth * i.getComputedStyle().lineHeight, 0), B = 0, p = 0;
-  a.forEach((e) => {
+function Z(r) {
+  const { content: t, effects: o = [{}] } = r, { width: l, height: a, ...g } = Q(r.style);
+  let c = U(t, g);
+  c = J(c, l, a);
+  let f = c.reduce((n, i) => n + i.maxCharWidth * i.getComputedStyle().lineHeight, 0), y = 0, p = 0;
+  c.forEach((n) => {
     const i = [];
-    let S = null, c = B, f = p;
-    e.fragments.forEach((n, C) => {
-      const d = n.getComputedStyle();
-      switch (d.writingMode) {
+    let d = null, s = y, B = p;
+    n.fragments.forEach((e, w) => {
+      const b = e.getComputedStyle();
+      switch (b.writingMode) {
         case "vertical-rl":
         case "vertical-lr": {
-          const w = e.maxCharWidth, k = w * d.lineHeight;
-          C || (f = 0, d.writingMode === "vertical-rl" && (g -= k, c = g));
-          const A = n.content.length, M = A * d.fontSize + (A - 1) * d.letterSpacing;
-          n.contentBox.x = c + (k - w) / 2, n.contentBox.y = f, n.contentBox.width = w, n.contentBox.height = M, n.inlineBox.x = c, n.inlineBox.y = f, n.inlineBox.width = k, n.inlineBox.height = M, n.glyphBox.x = c + (k - w) / 2, n.glyphBox.y = f, n.glyphBox.width = w, n.glyphBox.height = M, n.baseline = 0, n.centerX = c + k / 2, f += M + d.letterSpacing;
+          const v = n.maxCharWidth, W = v * b.lineHeight;
+          w || (B = 0, b.writingMode === "vertical-rl" && (f -= W, s = f));
+          const M = e.content.length, z = M * b.fontSize + (M - 1) * b.letterSpacing;
+          e.contentBox.x = s + (W - v) / 2, e.contentBox.y = B, e.contentBox.width = v, e.contentBox.height = z, e.inlineBox.x = s, e.inlineBox.y = B, e.inlineBox.width = W, e.inlineBox.height = z, e.glyphBox.x = s + (W - v) / 2, e.glyphBox.y = B, e.glyphBox.width = v, e.glyphBox.height = z, e.baseline = 0, e.centerX = s + W / 2, B += z + b.letterSpacing;
           break;
         }
         case "horizontal-tb": {
-          C || (c = 0);
+          w || (s = 0);
           const {
-            fontBoundingBoxAscent: w,
-            fontBoundingBoxDescent: k,
-            actualBoundingBoxAscent: A,
-            actualBoundingBoxDescent: M,
-            actualBoundingBoxLeft: O,
-            actualBoundingBoxRight: D,
-            width: H
-          } = z(n.content, {
-            ...d,
+            fontBoundingBoxAscent: v,
+            fontBoundingBoxDescent: W,
+            actualBoundingBoxAscent: M,
+            actualBoundingBoxDescent: z,
+            actualBoundingBoxLeft: R,
+            actualBoundingBoxRight: L,
+            width: T
+          } = F(e.content, {
+            ...b,
             textAlign: "center",
             verticalAlign: "baseline"
-          }), F = d.fontSize, T = F * d.lineHeight, P = w + k, L = A + M, N = O + D, R = f + (T - P) / 2 + w;
-          n.contentBox.x = c, n.contentBox.y = f + (T - F) / 2, n.contentBox.width = H, n.contentBox.height = F, n.inlineBox.x = c, n.inlineBox.y = f, n.inlineBox.width = H, n.inlineBox.height = T, n.glyphBox.x = c, n.glyphBox.y = R - A, n.glyphBox.width = N, n.glyphBox.height = L, n.baseline = R, n.centerX = c + O, i.push(n.contentBox), e.contentBox = u.from(...i), e.contentBox.height < n.contentBox.height && (S = n), c += H;
+          }), H = b.fontSize, $ = H * b.lineHeight, N = v + W, G = M + z, K = R + L, P = B + ($ - N) / 2 + v;
+          e.contentBox.x = s, e.contentBox.y = B + ($ - H) / 2, e.contentBox.width = T, e.contentBox.height = H, e.inlineBox.x = s, e.inlineBox.y = B, e.inlineBox.width = T, e.inlineBox.height = $, e.glyphBox.x = s, e.glyphBox.y = P - M, e.glyphBox.width = K, e.glyphBox.height = G, e.baseline = P, e.centerX = s + R, i.push(e.contentBox), n.contentBox = u.from(...i), n.contentBox.height < e.contentBox.height && (d = e), s += T;
           break;
         }
       }
-    }), e.lineBox = u.from(...e.fragments.map((n) => n.inlineBox)), B += e.lineBox.width, p += e.lineBox.height;
-    const x = z("x", {
-      ...(S ?? e).getComputedStyle(),
+    }), n.lineBox = u.from(...n.fragments.map((e) => e.inlineBox)), y += n.lineBox.width, p += n.lineBox.height;
+    const C = F("x", {
+      ...(d ?? n).getComputedStyle(),
       textAlign: "left",
       verticalAlign: "baseline"
     });
-    e.xHeight = x.actualBoundingBoxAscent, e.baseline = e.lineBox.y + (e.lineBox.height - (x.fontBoundingBoxAscent + x.fontBoundingBoxDescent)) / 2 + x.fontBoundingBoxAscent;
+    n.xHeight = C.actualBoundingBoxAscent, n.baseline = n.lineBox.y + (n.lineBox.height - (C.fontBoundingBoxAscent + C.fontBoundingBoxDescent)) / 2 + C.fontBoundingBoxAscent;
   });
-  const m = u.from(
-    ...a.map((e) => e.lineBox),
-    new u({ width: o, height: h })
-  ), { width: b, height: y } = m;
-  a.forEach((e) => {
-    e.contentBox = u.from(...e.fragments.map((i) => i.contentBox)), e.glyphBox = u.from(...e.fragments.map((i) => i.glyphBox)), e.fragments.forEach((i) => {
-      const S = i.getComputedStyle(), c = i.inlineBox.x, f = i.inlineBox.y;
-      let x = c, n = f;
-      switch (S.writingMode) {
+  const S = u.from(
+    ...c.map((n) => n.lineBox),
+    new u({ width: l, height: a })
+  ), { width: k, height: h } = S;
+  c.forEach((n) => {
+    n.contentBox = u.from(...n.fragments.map((i) => i.contentBox)), n.glyphBox = u.from(...n.fragments.map((i) => i.glyphBox)), n.fragments.forEach((i) => {
+      const d = i.getComputedStyle(), s = i.inlineBox.x, B = i.inlineBox.y;
+      let C = s, e = B;
+      switch (d.writingMode) {
         case "vertical-rl":
         case "vertical-lr":
-          switch (S.textAlign) {
+          switch (d.textAlign) {
             case "end":
             case "right":
-              n += y - e.contentBox.height;
+              e += h - n.contentBox.height;
               break;
             case "center":
-              n += (y - e.contentBox.height) / 2;
+              e += (h - n.contentBox.height) / 2;
               break;
           }
           break;
         case "horizontal-tb": {
-          switch (S.textAlign) {
+          switch (d.textAlign) {
             case "end":
             case "right":
-              x += b - e.contentBox.width;
+              C += k - n.contentBox.width;
               break;
             case "center":
-              x += (b - e.contentBox.width) / 2;
+              C += (k - n.contentBox.width) / 2;
               break;
           }
-          switch (S.verticalAlign) {
+          switch (d.verticalAlign) {
             case "top":
-              n += e.lineBox.y - i.inlineBox.y;
+              e += n.lineBox.y - i.inlineBox.y;
               break;
             case "middle":
-              n = e.baseline - e.xHeight / 2 - i.inlineBox.height / 2;
+              e = n.baseline - n.xHeight / 2 - i.inlineBox.height / 2;
               break;
             case "bottom":
-              n += e.lineBox.bottom - i.inlineBox.bottom;
+              e += n.lineBox.bottom - i.inlineBox.bottom;
               break;
             case "sub":
-              n += e.baseline - i.glyphBox.bottom;
+              e += n.baseline - i.glyphBox.bottom;
               break;
             case "super":
-              n += e.baseline - i.glyphBox.y;
+              e += n.baseline - i.glyphBox.y;
               break;
             case "text-top":
-              n += e.glyphBox.y - i.inlineBox.y;
+              e += n.glyphBox.y - i.inlineBox.y;
               break;
             case "text-bottom":
-              n += e.glyphBox.bottom - i.inlineBox.bottom;
+              e += n.glyphBox.bottom - i.inlineBox.bottom;
               break;
             case "baseline":
             default:
-              i.inlineBox.height < e.lineBox.height && (n += e.baseline - i.baseline);
+              i.inlineBox.height < n.lineBox.height && (e += n.baseline - i.baseline);
               break;
           }
           break;
         }
       }
-      const C = x - c, d = n - f;
-      i.inlineBox.move(C, d), i.contentBox.move(C, d), i.glyphBox.move(C, d), i.baseline += d, i.centerX += C;
-    }), e.contentBox = u.from(...e.fragments.map((i) => i.contentBox)), e.glyphBox = u.from(...e.fragments.map((i) => i.glyphBox));
+      const w = C - s, b = e - B;
+      i.inlineBox.move(w, b), i.contentBox.move(w, b), i.glyphBox.move(w, b), i.baseline += b, i.centerX += w;
+    }), n.contentBox = u.from(...n.fragments.map((i) => i.contentBox)), n.glyphBox = u.from(...n.fragments.map((i) => i.glyphBox));
   });
-  const l = u.from(...a.map((e) => e.contentBox)), v = u.from(...a.map((e) => e.glyphBox));
-  return {
-    box: m,
-    contentBox: l,
-    glyphBox: v,
-    paragraphs: a,
-    viewBox: u.from(m, v)
+  const A = u.from(...c.map((n) => n.contentBox)), m = u.from(...c.map((n) => n.glyphBox)), x = [];
+  return c.forEach((n) => {
+    n.fragments.forEach((i) => {
+      const d = i.getComputedStyle();
+      o.forEach((s) => {
+        const B = { ...d, ...s }, { textStrokeWidth: C = 0, offsetX: e = 0, offsetY: w = 0 } = B;
+        if (C || e || w) {
+          const { x: b, y: v, width: W, height: M } = i.contentBox;
+          x.push(new u({
+            x: Math.min(b, b + e - C / 2),
+            y: Math.min(v, v + w - C / 2),
+            width: Math.max(W, W + e + C),
+            height: Math.max(M, M + w + C)
+          }));
+        }
+      });
+    });
+  }), {
+    box: S,
+    contentBox: A,
+    glyphBox: m,
+    paragraphs: c,
+    viewBox: u.from(S, m, ...x)
   };
 }
-function X(r, t, o) {
+function O(r, t, o) {
   if (typeof t == "string" && t.startsWith("linear-gradient")) {
-    const { x0: h, y0: s, x1: a, y1: g, stops: B } = Q(t, o.left, o.top, o.width, o.height), p = r.createLinearGradient(h, s, a, g);
-    return B.forEach((m) => p.addColorStop(m.offset, m.color)), p;
+    const { x0: l, y0: a, x1: g, y1: c, stops: f } = _(t, o.left, o.top, o.width, o.height), y = r.createLinearGradient(l, a, g, c);
+    return f.forEach((p) => y.addColorStop(p.offset, p.color)), y;
   }
   return t;
 }
-function Q(r, t, o, h, s) {
-  var v;
-  const a = ((v = r.match(/linear-gradient\((.+)\)$/)) == null ? void 0 : v[1]) ?? "", g = a.split(",")[0], B = g.includes("deg") ? g : "0deg", p = a.replace(B, "").matchAll(/(#|rgba|rgb)(.+?) ([\d.]+?%)/gi), b = (Number(B.replace("deg", "")) || 0) * Math.PI / 180, y = h * Math.sin(b), l = s * Math.cos(b);
+function _(r, t, o, l, a) {
+  var A;
+  const g = ((A = r.match(/linear-gradient\((.+)\)$/)) == null ? void 0 : A[1]) ?? "", c = g.split(",")[0], f = c.includes("deg") ? c : "0deg", y = g.replace(f, "").matchAll(/(#|rgba|rgb)(.+?) ([\d.]+?%)/gi), S = (Number(f.replace("deg", "")) || 0) * Math.PI / 180, k = l * Math.sin(S), h = a * Math.cos(S);
   return {
-    x0: t + h / 2 - y,
-    y0: o + s / 2 + l,
-    x1: t + h / 2 + y,
-    y1: o + s / 2 - l,
-    stops: Array.from(p).map((e) => {
-      let i = e[2];
-      return i.startsWith("(") ? i = i.split(",").length > 3 ? `rgba${i}` : `rgb${i}` : i = `#${i}`, {
-        offset: Number(e[3].replace("%", "")) / 100,
-        color: i
+    x0: t + l / 2 - k,
+    y0: o + a / 2 + h,
+    x1: t + l / 2 + k,
+    y1: o + a / 2 - h,
+    stops: Array.from(y).map((m) => {
+      let x = m[2];
+      return x.startsWith("(") ? x = x.split(",").length > 3 ? `rgba${x}` : `rgb${x}` : x = `#${x}`, {
+        offset: Number(m[3].replace("%", "")) / 100,
+        color: x
       };
     })
   };
 }
-function E(r, t, o) {
-  o != null && o.color && (o.color = X(r, o.color, t)), o != null && o.backgroundColor && (o.backgroundColor = X(r, o.backgroundColor, t)), o != null && o.textStrokeColor && (o.textStrokeColor = X(r, o.textStrokeColor, t));
+function X(r, t, o) {
+  o != null && o.color && (o.color = O(r, o.color, t)), o != null && o.backgroundColor && (o.backgroundColor = O(r, o.backgroundColor, t)), o != null && o.textStrokeColor && (o.textStrokeColor = O(r, o.textStrokeColor, t));
 }
-function Z(r) {
+function tt(r) {
   const {
     view: t = document.createElement("canvas"),
     style: o,
-    draws: h = [],
-    pixelRatio: s = 1
-  } = r, a = h.length > 0 ? h : [{}], { viewBox: g, paragraphs: B } = J(r), { x: p, y: m, width: b, height: y } = g, l = t.getContext("2d");
-  t.style.width = `${b}px`, t.style.height = `${y}px`, t.dataset.viewbox = `${p} ${m} ${b} ${y}`, t.dataset.pixelRatio = String(s), t.width = Math.max(1, Math.floor(b * s)), t.height = Math.max(1, Math.floor(y * s)), l.scale(s, s), l.clearRect(0, 0, t.width, t.height);
-  const v = { ...o };
-  return E(l, new u({ width: b, height: y }), v), B.forEach((e) => {
-    E(l, e.contentBox, e.style), e.fragments.forEach((i) => {
-      E(l, i.contentBox, i.style);
+    effects: l = [],
+    pixelRatio: a = 1
+  } = r, g = l.length > 0 ? l : [{}], { viewBox: c, paragraphs: f } = Z(r), { x: y, y: p, width: S, height: k } = c, h = t.getContext("2d");
+  t.style.width = `${S}px`, t.style.height = `${k}px`, t.dataset.viewbox = `${y} ${p} ${S} ${k}`, t.dataset.pixelRatio = String(a), t.width = Math.max(1, Math.floor(S * a)), t.height = Math.max(1, Math.floor(k * a)), h.scale(a, a), h.clearRect(0, 0, t.width, t.height);
+  const A = { ...o };
+  return X(h, new u({ width: S, height: k }), A), f.forEach((m) => {
+    X(h, m.contentBox, m.style), m.fragments.forEach((x) => {
+      X(h, x.contentBox, x.style);
     });
-  }), a.forEach((e) => {
-    const i = { ...e };
-    E(l, new u({ width: b, height: y }), i);
-    const S = { ...v, ...i };
-    S != null && S.backgroundColor && (l.fillStyle = S.backgroundColor, l.fillRect(0, 0, t.width, t.height)), B.forEach((c) => {
-      var f;
-      (f = c.style) != null && f.backgroundColor && (l.fillStyle = c.style.backgroundColor, l.fillRect(c.lineBox.x, c.lineBox.y, c.lineBox.width, c.lineBox.height)), c.fragments.forEach((x) => {
-        var n;
-        (n = x.style) != null && n.backgroundColor && (l.fillStyle = x.style.backgroundColor, l.fillRect(x.inlineBox.x, x.inlineBox.y, x.inlineBox.width, x.inlineBox.height));
+  }), g.forEach((m) => {
+    const x = { ...m };
+    X(h, new u({ width: S, height: k }), x);
+    const n = { ...A, ...x };
+    n != null && n.backgroundColor && (h.fillStyle = n.backgroundColor, h.fillRect(0, 0, t.width, t.height)), f.forEach((i) => {
+      var d;
+      (d = i.style) != null && d.backgroundColor && (h.fillStyle = i.style.backgroundColor, h.fillRect(i.lineBox.x, i.lineBox.y, i.lineBox.width, i.lineBox.height)), i.fragments.forEach((s) => {
+        var B;
+        (B = s.style) != null && B.backgroundColor && (h.fillStyle = s.style.backgroundColor, h.fillRect(s.inlineBox.x, s.inlineBox.y, s.inlineBox.width, s.inlineBox.height));
       });
-    }), B.forEach((c) => {
-      c.fragments.forEach((f) => {
-        const x = { ...f.getComputedStyle(), ...i };
-        Y(l, {
-          ...x,
+    }), f.forEach((i) => {
+      i.fragments.forEach((d) => {
+        const s = { ...d.getComputedStyle(), ...x };
+        D(h, {
+          ...s,
           textAlign: "left",
-          verticalAlign: "baseline"
+          verticalAlign: s.writingMode === "horizontal-tb" ? "baseline" : "top"
         });
-        const { width: n, height: C } = f.contentBox;
-        let d = -g.x, w = -g.y;
-        switch (x.writingMode) {
-          case "vertical-rl":
-          case "vertical-lr":
-            d += f.contentBox.x, w += (x.fontSize - c.xHeight) / 2 + c.xHeight + 1;
-            break;
-          case "horizontal-tb":
-            d += f.contentBox.x, w += f.baseline;
-            break;
-        }
-        switch (i.offsetX && (d += i.offsetX), i.offsetY && (w += i.offsetY), x.writingMode) {
+        const { width: B, height: C } = d.contentBox;
+        let e = -c.x, w = -c.y;
+        x.offsetX && (e += x.offsetX), x.offsetY && (w += x.offsetY);
+        const b = w + d.baseline;
+        switch (e += d.contentBox.x, w += d.contentBox.y, s.writingMode) {
           case "vertical-rl":
           case "vertical-lr": {
-            let k = 0;
-            for (const A of f.content)
-              l.fillText(A, d, w + k), x.textStrokeWidth && l.strokeText(A, d, w + k), k += x.fontSize + x.letterSpacing;
+            let v = 0;
+            for (const W of d.content)
+              h.fillText(W, e, w + v), s.textStrokeWidth && h.strokeText(W, e, w + v), v += s.fontSize + s.letterSpacing;
             break;
           }
           case "horizontal-tb":
-            l.fillText(f.content, d, w), x.textStrokeWidth && l.strokeText(f.content, d, w);
+            h.fillText(d.content, e, b), s.textStrokeWidth && h.strokeText(d.content, e, b);
             break;
         }
-        switch (x.textDecoration) {
+        switch (s.textDecoration) {
           case "underline":
-            l.beginPath(), l.moveTo(d, w + C - 2), l.lineTo(d + n, w + C - 2), l.stroke();
+            h.strokeStyle = h.fillStyle, h.lineWidth = s.fontSize / 15, h.beginPath(), h.moveTo(e, w + C), h.lineTo(e + B, w + C), h.stroke();
             break;
           case "line-through":
-            l.beginPath(), l.moveTo(d, w + C / 2), l.lineTo(d + n, w + C / 2), l.stroke();
+            h.strokeStyle = h.fillStyle, h.lineWidth = s.fontSize / 15, h.beginPath(), h.moveTo(e, w + C / 2), h.lineTo(e + B, w + C / 2), h.stroke();
             break;
         }
       });
@@ -470,6 +479,6 @@ function Z(r) {
   }), t;
 }
 export {
-  J as measureText,
-  Z as renderText
+  Z as measureText,
+  tt as renderText
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-text",
   "type": "module",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "packageManager": "pnpm@8.14.1",
   "description": "Measure and render text in a way that describes the DOM.",
   "author": "wxm",

package/types/measure-text.d.ts

@@ -1,5 +1,5 @@
 import { BoundingBox } from './bounding-box';
-import type { TextContent, TextStyle } from './types';
+import type { TextContent, TextEffect, TextStyle } from './types';
 export interface MeasureTextStyle extends TextStyle {
     width: number;
     height: number;
@@ -7,6 +7,7 @@ export interface MeasureTextStyle extends TextStyle {
 export interface MeasureTextOptions {
     content: TextContent;
     style?: Partial<MeasureTextStyle>;
+    effects?: Array<TextEffect>;
 }
 export declare function measureText(options: MeasureTextOptions): {
     box: BoundingBox;

package/types/reg-exp.d.ts

@@ -0,0 +1,2 @@
+export declare const punctuationRe: RegExp;
+export declare const tuOrURe: RegExp;

package/types/render-text.d.ts

@@ -1,12 +1,6 @@
-import type { TextDrawStyle } from './types';
 import type { MeasureTextOptions } from './measure-text';
-export type RenderTextDraws = Array<Partial<TextDrawStyle & {
-    offsetX: number;
-    offsetY: number;
-}>>;
 export interface RenderTextOptions extends MeasureTextOptions {
     view?: HTMLCanvasElement;
-    draws?: RenderTextDraws;
     pixelRatio?: number;
 }
 export declare function renderText(options: RenderTextOptions): HTMLCanvasElement;

package/types/types.d.ts

@@ -32,6 +32,10 @@ export interface TextDrawStyle {
     shadowOffsetY: number;
     shadowBlur: number;
 }
+export type TextEffect = Partial<TextDrawStyle & {
+    offsetX: number;
+    offsetY: number;
+}>;
 export interface TextStyle extends TextLayoutStyle, TextDrawStyle {
 }
 export interface FragmentContent extends Partial<TextStyle> {