modern-text 0.0.10 → 0.0.12

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class w{static get defaultStyle(){return{width:"auto",height:"auto",color:"#000000",fontSize:14,fontWeight:"normal",fontFamily:"sans-serif",fontStyle:"normal",fontKerning:"normal",textWrap:"wrap",textAlign:"start",verticalAlign:"baseline",textDecoration:null,textStrokeWidth:0,textStrokeColor:"#000000",direction:"inherit",lineHeight:1,letterSpacing:0,shadowColor:"#000000",shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0}}constructor(e={}){const{view:t=document.createElement("canvas"),pixelRatio:n=window.devicePixelRatio||1,content:o="",style:h}=e;this.view=t,this.context=t.getContext("2d"),this.pixelRatio=n,this.content=o,this.style={...w.defaultStyle,...h},this.update()}_createBox(e=0,t=0,n=0,o=0){return{left:e,top:t,width:n,height:o,right:e+n,bottom:t+o}}_moveBox(e,t=0,n=0){e.left+=t,e.right+=t,e.top+=n,e.bottom+=n}_updateBoxSize(e){e.width=e.right-e.left,e.height=e.bottom-e.top}_mergeBoxes(e){const t=e.slice(1).reduce((n,o)=>(n.left=Math.min(n.left,o.left),n.top=Math.min(n.top,o.top),n.right=Math.max(n.right,o.right),n.bottom=Math.max(n.bottom,o.bottom),n),{...e[0]});return this._updateBoxSize(t),t}measure(){let{width:e}=this.style;e==="auto"&&(e=0);let t=this._createParagraphs(this.content);t=this._createWrapedParagraphs(t,e);const n=this.context;let o=0;for(let h=t.length,a=0;a<h;a++){const i=t[a],l=[];let x=0,c=null;for(const s of i.fragments){this._setContextStyle({...s.style,textAlign:"center",verticalAlign:"baseline"});const r=n.measureText(s.content),B=r.width,p=s.style.fontSize;s.inlineBox=this._createBox(x,o,B,p*s.style.lineHeight),s.contentBox=this._createBox(s.inlineBox.left,s.inlineBox.top+(s.inlineBox.height-p)/2,B,p);const d=r.actualBoundingBoxLeft+r.actualBoundingBoxRight,f=r.actualBoundingBoxAscent+r.actualBoundingBoxDescent;s.glyphBox=this._createBox(s.contentBox.left+(s.contentBox.width-d)/2,s.contentBox.top+(s.contentBox.height-f)/2,d,f),s.centerX=s.glyphBox.left+r.actualBoundingBoxLeft,s.baseline=s.glyphBox.top+r.actualBoundingBoxAscent,x+=s.contentBox.width+s.style.letterSpacing,l.push(s.contentBox),i.contentBox=this._mergeBoxes(l),i.contentBox.height<s.contentBox.height&&(c=s)}i.lineBox=this._mergeBoxes([...i.fragments.map(s=>s.inlineBox),this._createBox(0,o,e)]),this._setContextStyle({...(c??i).style,textAlign:"left",verticalAlign:"baseline"});const g=n.measureText("X");i.baseline=i.lineBox.top+(i.lineBox.height-g.actualBoundingBoxAscent+g.actualBoundingBoxDescent)/2+g.actualBoundingBoxAscent,o+=i.lineBox.height}for(let h=t.length,a=0;a<h;a++){const i=t[a];i.fragments.forEach(l=>{const x=l.inlineBox.left,c=l.inlineBox.top,g=i.lineBox.height-l.inlineBox.height;let s,r=c;switch(l.style.textAlign){case"end":case"right":s=x+(i.lineBox.width-i.contentBox.width);break;case"center":s=x+(i.lineBox.width-i.contentBox.width)/2;break;case"start":case"left":default:s=x+i.lineBox.left;break}switch(l.style.verticalAlign){case"top":r=c+i.lineBox.top;break;case"middle":r=c+i.lineBox.top+g/2;break;case"bottom":r=c+i.lineBox.top+g;break;case"sub":case"text-top":case"text-bottom":break;case"baseline":default:l.inlineBox.height<i.lineBox.height&&(r=c+(i.baseline-l.baseline));break}const B=s-x,p=r-c;this._moveBox(l.inlineBox,B,p),this._moveBox(l.contentBox,B,p),this._moveBox(l.glyphBox,B,p),l.baseline+=p,l.centerX+=B}),i.contentBox=this._mergeBoxes(i.fragments.map(l=>l.contentBox)),i.glyphBox=this._mergeBoxes(i.fragments.map(l=>l.glyphBox))}return{actualContentBox:this._mergeBoxes(t.map(h=>h.contentBox)),contentBox:this._mergeBoxes(t.map(h=>h.lineBox)),glyphBox:this._mergeBoxes(t.map(h=>h.glyphBox)),paragraphs:t}}_createParagraphs(e){const t=(h={})=>{const{width:a,height:i,...l}=this.style;return{contentBox:this._createBox(),lineBox:this._createBox(),glyphBox:this._createBox(),baseline:0,fragments:[],...h,style:{...l,...h.style}}},n=(h={})=>{const a=[],{width:i,height:l,...x}=this.style;return a.push({contentBox:this._createBox(),inlineBox:this._createBox(),glyphBox:this._createBox(),centerX:0,baseline:0,...h,style:{...x,...h.style},content:h.content??""}),a},o=[];if(typeof e=="string")o.push(t({fragments:n({content:e})}));else{e=Array.isArray(e)?e:[e];for(const h of e)if("fragments"in h){const{fragments:a,...i}=h,l=t({style:i});for(const x of a){const{content:c,...g}=x;l.fragments.push(...n({content:c,style:{...i,...g}}))}o.push(l)}else if("content"in h){const{content:a,...i}=h,l=t({style:i});l.fragments.push(...n({content:a,style:i})),o.push(l)}}return o}_createWrapedParagraphs(e,t){const n=l=>JSON.parse(JSON.stringify(l)),o=[],h=e.slice();let a,i;for(;a=h.shift();){const l=a.fragments.slice();let x=0;const c=[];for(;i=l.shift();){const g=i.style;this._setContextStyle(g);let s="",r=!1;for(const B of i.content){const p=this.context.measureText(B).width,d=/^[\r\n]$/.test(B);if(d||g.textWrap==="wrap"&&t&&x+p>t){let f=d?s.length+1:s.length;!x&&!f&&(s+=B,f++),s.length&&c.push({...n(i),content:s}),c.length&&(o.push({...n(a),fragments:c.slice()}),c.length=0);const u=i.content.substring(f);(u.length||l.length)&&h.unshift({...n(a),fragments:(u.length?[{...n(i),content:u}]:[]).concat(l.slice())}),l.length=0,r=!0;break}else x+=p;s+=B}r||c.push(n(i))}c.length&&o.push({...n(a),fragments:c})}return o}_draw(e){const t=this.context;this.style.backgroundColor&&(t.fillStyle=this.style.backgroundColor,t.fillRect(0,0,t.canvas.width,t.canvas.height)),e.forEach(n=>{n.style.backgroundColor&&(t.fillStyle=n.style.backgroundColor,t.fillRect(n.lineBox.left,n.lineBox.top,n.lineBox.width,n.lineBox.height))}),e.forEach(n=>{n.fragments.forEach(o=>{switch(o.style.backgroundColor&&(t.fillStyle=o.style.backgroundColor,t.fillRect(o.inlineBox.left,o.inlineBox.top,o.inlineBox.width,o.inlineBox.height)),this._setContextStyle({...o.style,textAlign:"left",verticalAlign:"top"}),o.style.textStrokeWidth&&t.strokeText(o.content,o.contentBox.left,o.contentBox.top),t.fillText(o.content,o.contentBox.left,o.contentBox.top),o.style.textDecoration){case"underline":t.beginPath(),t.moveTo(o.contentBox.left,o.contentBox.top+o.contentBox.height-2),t.lineTo(o.contentBox.left+o.contentBox.width,o.contentBox.top+o.contentBox.height-2),t.stroke();break;case"line-through":t.beginPath(),t.moveTo(o.contentBox.left,o.contentBox.top+o.contentBox.height/2),t.lineTo(o.contentBox.left+o.contentBox.width,o.contentBox.top+o.contentBox.height/2),t.stroke();break}})})}_resizeView(e,t){const n=this.view;n.style.width=`${e}px`,n.style.height=`${t}px`,n.dataset.width=String(e),n.dataset.height=String(t),n.width=Math.max(1,Math.floor(e*this.pixelRatio)),n.height=Math.max(1,Math.floor(t*this.pixelRatio))}_setContextStyle(e){const t=this.context;switch(t.shadowColor=e.shadowColor,t.shadowOffsetX=e.shadowOffsetX,t.shadowOffsetY=e.shadowOffsetY,t.shadowBlur=e.shadowBlur,t.strokeStyle=e.textStrokeColor,t.lineWidth=e.textStrokeWidth,t.fillStyle=e.color,t.direction=e.direction,t.textAlign=e.textAlign,e.verticalAlign){case"baseline":t.textBaseline="alphabetic";break;case"top":case"middle":case"bottom":t.textBaseline=e.verticalAlign;break}t.font=[e.fontStyle,e.fontWeight,`${e.fontSize}px`,e.fontFamily].join(" "),t.fontKerning=e.fontKerning,t.letterSpacing=`${e.letterSpacing}px`}update(){const e=this.context;let{width:t,height:n}=this.style;t==="auto"&&(t=0),n==="auto"&&(n=0);const{contentBox:o,paragraphs:h}=this.measure();t||(t=o.width),n=Math.max(n,o.height),this._resizeView(t,n);const a=this.pixelRatio;e.scale(a,a),e.clearRect(0,0,e.canvas.width,e.canvas.height),this._draw(h)}}exports.Text=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=class w{static get defaultStyle(){return{width:"auto",height:"auto",color:"#000000",fontSize:14,fontWeight:"normal",fontFamily:"sans-serif",fontStyle:"normal",fontKerning:"normal",textWrap:"wrap",textAlign:"start",verticalAlign:"baseline",textDecoration:null,textStrokeWidth:0,textStrokeColor:"#000000",direction:"inherit",lineHeight:1,letterSpacing:0,shadowColor:"#000000",shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0}}constructor(e={}){const{view:t=document.createElement("canvas"),pixelRatio:n=window.devicePixelRatio||1,content:o="",style:h}=e;this.view=t,this.context=t.getContext("2d"),this.pixelRatio=n,this.content=o,this.style={...w.defaultStyle,...h},this.update()}_createBox(e=0,t=0,n=0,o=0){return{left:e,top:t,width:n,height:o,right:e+n,bottom:t+o}}_moveBox(e,t=0,n=0){e.left+=t,e.right+=t,e.top+=n,e.bottom+=n}_updateBoxSize(e){e.width=e.right-e.left,e.height=e.bottom-e.top}_mergeBoxes(e){const t=e.slice(1).reduce((n,o)=>(n.left=Math.min(n.left,o.left),n.top=Math.min(n.top,o.top),n.right=Math.max(n.right,o.right),n.bottom=Math.max(n.bottom,o.bottom),n),{...e[0]});return this._updateBoxSize(t),t}measure(){let{width:e}=this.style;e==="auto"&&(e=0);let t=this._createParagraphs(this.content);t=this._createWrapedParagraphs(t,e);const n=this.context;let o=0;for(let h=t.length,a=0;a<h;a++){const i=t[a],l=[];let x=0,c=null;for(const s of i.fragments){this._setContextStyle({...s.style,textAlign:"center",verticalAlign:"baseline"});const r=n.measureText(s.content),B=r.width,p=s.style.fontSize;s.inlineBox=this._createBox(x,o,B,p*s.style.lineHeight),s.contentBox=this._createBox(s.inlineBox.left,s.inlineBox.top+(s.inlineBox.height-p)/2,B,p);const u=n.measureText("X").actualBoundingBoxAscent,d=(s.contentBox.height-u)/2,f=r.actualBoundingBoxLeft+r.actualBoundingBoxRight,_=r.actualBoundingBoxAscent+r.actualBoundingBoxDescent;s.glyphBox=this._createBox(s.contentBox.left+(s.contentBox.width-f)/2,s.contentBox.top+d+(u-r.actualBoundingBoxAscent),f,_),s.centerX=s.glyphBox.left+r.actualBoundingBoxLeft,s.baseline=s.glyphBox.top+r.actualBoundingBoxAscent,x+=s.contentBox.width,l.push(s.contentBox),i.contentBox=this._mergeBoxes(l),i.contentBox.height<s.contentBox.height&&(c=s)}i.lineBox=this._mergeBoxes([...i.fragments.map(s=>s.inlineBox),this._createBox(0,o,e)]),this._setContextStyle({...(c??i).style,textAlign:"left",verticalAlign:"baseline"});const g=n.measureText("X");i.baseline=i.lineBox.top+(i.lineBox.height-g.actualBoundingBoxAscent+g.actualBoundingBoxDescent)/2+g.actualBoundingBoxAscent,o+=i.lineBox.height}for(let h=t.length,a=0;a<h;a++){const i=t[a];i.fragments.forEach(l=>{const x=l.inlineBox.left,c=l.inlineBox.top,g=i.lineBox.height-l.inlineBox.height;let s,r=c;switch(l.style.textAlign){case"end":case"right":s=x+(i.lineBox.width-i.contentBox.width);break;case"center":s=x+(i.lineBox.width-i.contentBox.width)/2;break;case"start":case"left":default:s=x+i.lineBox.left;break}switch(l.style.verticalAlign){case"top":r=c+i.lineBox.top;break;case"middle":r=c+i.lineBox.top+g/2;break;case"bottom":r=c+i.lineBox.top+g;break;case"sub":case"text-top":case"text-bottom":break;case"baseline":default:l.inlineBox.height<i.lineBox.height&&(r=c+(i.baseline-l.baseline));break}const B=s-x,p=r-c;this._moveBox(l.inlineBox,B,p),this._moveBox(l.contentBox,B,p),this._moveBox(l.glyphBox,B,p),l.baseline+=p,l.centerX+=B}),i.contentBox=this._mergeBoxes(i.fragments.map(l=>l.contentBox)),i.glyphBox=this._mergeBoxes(i.fragments.map(l=>l.glyphBox))}return{actualContentBox:this._mergeBoxes(t.map(h=>h.contentBox)),contentBox:this._mergeBoxes(t.map(h=>h.lineBox)),glyphBox:this._mergeBoxes(t.map(h=>h.glyphBox)),paragraphs:t}}_createParagraphs(e){const t=(h={})=>{const{width:a,height:i,...l}=this.style;return{contentBox:this._createBox(),lineBox:this._createBox(),glyphBox:this._createBox(),baseline:0,fragments:[],...h,style:{...l,...h.style}}},n=(h={})=>{const a=[],{width:i,height:l,...x}=this.style;return a.push({contentBox:this._createBox(),inlineBox:this._createBox(),glyphBox:this._createBox(),centerX:0,baseline:0,...h,style:{...x,...h.style},content:h.content??""}),a},o=[];if(typeof e=="string")o.push(t({fragments:n({content:e})}));else{e=Array.isArray(e)?e:[e];for(const h of e)if("fragments"in h){const{fragments:a,...i}=h,l=t({style:i});for(const x of a){const{content:c,...g}=x;l.fragments.push(...n({content:c,style:{...i,...g}}))}o.push(l)}else if("content"in h){const{content:a,...i}=h,l=t({style:i});l.fragments.push(...n({content:a,style:i})),o.push(l)}}return o}_createWrapedParagraphs(e,t){const n=l=>JSON.parse(JSON.stringify(l)),o=[],h=e.slice();let a,i;for(;a=h.shift();){const l=a.fragments.slice();let x=0;const c=[];for(;i=l.shift();){const g=i.style;this._setContextStyle(g);let s="",r=!1;for(const B of i.content){const p=this.context.measureText(B).width,u=/^[\r\n]$/.test(B);if(u||g.textWrap==="wrap"&&t&&x+p>t){let d=u?s.length+1:s.length;!x&&!d&&(s+=B,d++),s.length&&c.push({...n(i),content:s}),c.length&&(o.push({...n(a),fragments:c.slice()}),c.length=0);const f=i.content.substring(d);(f.length||l.length)&&h.unshift({...n(a),fragments:(f.length?[{...n(i),content:f}]:[]).concat(l.slice())}),l.length=0,r=!0;break}else x+=p;s+=B}r||c.push(n(i))}c.length&&o.push({...n(a),fragments:c})}return o}_draw(e){const t=this.context;this.style.backgroundColor&&(t.fillStyle=this.style.backgroundColor,t.fillRect(0,0,t.canvas.width,t.canvas.height)),e.forEach(n=>{n.style.backgroundColor&&(t.fillStyle=n.style.backgroundColor,t.fillRect(n.lineBox.left,n.lineBox.top,n.lineBox.width,n.lineBox.height))}),e.forEach(n=>{n.fragments.forEach(o=>{switch(o.style.backgroundColor&&(t.fillStyle=o.style.backgroundColor,t.fillRect(o.inlineBox.left,o.inlineBox.top,o.inlineBox.width,o.inlineBox.height)),this._setContextStyle({...o.style,textAlign:"left",verticalAlign:"top"}),o.style.textStrokeWidth&&t.strokeText(o.content,o.contentBox.left,o.contentBox.top),t.fillText(o.content,o.contentBox.left,o.contentBox.top),o.style.textDecoration){case"underline":t.beginPath(),t.moveTo(o.contentBox.left,o.contentBox.top+o.contentBox.height-2),t.lineTo(o.contentBox.left+o.contentBox.width,o.contentBox.top+o.contentBox.height-2),t.stroke();break;case"line-through":t.beginPath(),t.moveTo(o.contentBox.left,o.contentBox.top+o.contentBox.height/2),t.lineTo(o.contentBox.left+o.contentBox.width,o.contentBox.top+o.contentBox.height/2),t.stroke();break}})})}_resizeView(e,t){const n=this.view;n.style.width=`${e}px`,n.style.height=`${t}px`,n.dataset.width=String(e),n.dataset.height=String(t),n.width=Math.max(1,Math.floor(e*this.pixelRatio)),n.height=Math.max(1,Math.floor(t*this.pixelRatio))}_setContextStyle(e){const t=this.context;switch(t.shadowColor=e.shadowColor,t.shadowOffsetX=e.shadowOffsetX,t.shadowOffsetY=e.shadowOffsetY,t.shadowBlur=e.shadowBlur,t.strokeStyle=e.textStrokeColor,t.lineWidth=e.textStrokeWidth,t.fillStyle=e.color,t.direction=e.direction,t.textAlign=e.textAlign,e.verticalAlign){case"baseline":t.textBaseline="alphabetic";break;case"top":case"middle":case"bottom":t.textBaseline=e.verticalAlign;break}t.font=[e.fontStyle,e.fontWeight,`${e.fontSize}px`,e.fontFamily].join(" "),t.fontKerning=e.fontKerning,t.letterSpacing=`${e.letterSpacing}px`}update(){const e=this.context;let{width:t,height:n}=this.style;t==="auto"&&(t=0),n==="auto"&&(n=0);const{contentBox:o,paragraphs:h}=this.measure();t||(t=o.width),n=Math.max(n,o.height),this._resizeView(t,n);const a=this.pixelRatio;e.scale(a,a),e.clearRect(0,0,e.canvas.width,e.canvas.height),this._draw(h)}};w.punctuationRegex=/[\s\n\t\u200B\u200C\u200D\u200E\u200F.,?!:;"'(){}\[\]<>\/\\|~#\$%\*\+=&^，。？！：；“”‘’（）【】《》……——]/;let y=w;exports.Text=y;

package/dist/index.js

@@ -1 +1 @@
-(function(d,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(d=typeof globalThis<"u"?globalThis:d||self,p(d.modernText={}))})(this,function(d){"use strict";class p{static get defaultStyle(){return{width:"auto",height:"auto",color:"#000000",fontSize:14,fontWeight:"normal",fontFamily:"sans-serif",fontStyle:"normal",fontKerning:"normal",textWrap:"wrap",textAlign:"start",verticalAlign:"baseline",textDecoration:null,textStrokeWidth:0,textStrokeColor:"#000000",direction:"inherit",lineHeight:1,letterSpacing:0,shadowColor:"#000000",shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0}}constructor(e={}){const{view:t=document.createElement("canvas"),pixelRatio:n=window.devicePixelRatio||1,content:o="",style:h}=e;this.view=t,this.context=t.getContext("2d"),this.pixelRatio=n,this.content=o,this.style={...p.defaultStyle,...h},this.update()}_createBox(e=0,t=0,n=0,o=0){return{left:e,top:t,width:n,height:o,right:e+n,bottom:t+o}}_moveBox(e,t=0,n=0){e.left+=t,e.right+=t,e.top+=n,e.bottom+=n}_updateBoxSize(e){e.width=e.right-e.left,e.height=e.bottom-e.top}_mergeBoxes(e){const t=e.slice(1).reduce((n,o)=>(n.left=Math.min(n.left,o.left),n.top=Math.min(n.top,o.top),n.right=Math.max(n.right,o.right),n.bottom=Math.max(n.bottom,o.bottom),n),{...e[0]});return this._updateBoxSize(t),t}measure(){let{width:e}=this.style;e==="auto"&&(e=0);let t=this._createParagraphs(this.content);t=this._createWrapedParagraphs(t,e);const n=this.context;let o=0;for(let h=t.length,a=0;a<h;a++){const i=t[a],l=[];let x=0,c=null;for(const s of i.fragments){this._setContextStyle({...s.style,textAlign:"center",verticalAlign:"baseline"});const r=n.measureText(s.content),B=r.width,f=s.style.fontSize;s.inlineBox=this._createBox(x,o,B,f*s.style.lineHeight),s.contentBox=this._createBox(s.inlineBox.left,s.inlineBox.top+(s.inlineBox.height-f)/2,B,f);const y=r.actualBoundingBoxLeft+r.actualBoundingBoxRight,u=r.actualBoundingBoxAscent+r.actualBoundingBoxDescent;s.glyphBox=this._createBox(s.contentBox.left+(s.contentBox.width-y)/2,s.contentBox.top+(s.contentBox.height-u)/2,y,u),s.centerX=s.glyphBox.left+r.actualBoundingBoxLeft,s.baseline=s.glyphBox.top+r.actualBoundingBoxAscent,x+=s.contentBox.width+s.style.letterSpacing,l.push(s.contentBox),i.contentBox=this._mergeBoxes(l),i.contentBox.height<s.contentBox.height&&(c=s)}i.lineBox=this._mergeBoxes([...i.fragments.map(s=>s.inlineBox),this._createBox(0,o,e)]),this._setContextStyle({...(c??i).style,textAlign:"left",verticalAlign:"baseline"});const g=n.measureText("X");i.baseline=i.lineBox.top+(i.lineBox.height-g.actualBoundingBoxAscent+g.actualBoundingBoxDescent)/2+g.actualBoundingBoxAscent,o+=i.lineBox.height}for(let h=t.length,a=0;a<h;a++){const i=t[a];i.fragments.forEach(l=>{const x=l.inlineBox.left,c=l.inlineBox.top,g=i.lineBox.height-l.inlineBox.height;let s,r=c;switch(l.style.textAlign){case"end":case"right":s=x+(i.lineBox.width-i.contentBox.width);break;case"center":s=x+(i.lineBox.width-i.contentBox.width)/2;break;case"start":case"left":default:s=x+i.lineBox.left;break}switch(l.style.verticalAlign){case"top":r=c+i.lineBox.top;break;case"middle":r=c+i.lineBox.top+g/2;break;case"bottom":r=c+i.lineBox.top+g;break;case"sub":case"text-top":case"text-bottom":break;case"baseline":default:l.inlineBox.height<i.lineBox.height&&(r=c+(i.baseline-l.baseline));break}const B=s-x,f=r-c;this._moveBox(l.inlineBox,B,f),this._moveBox(l.contentBox,B,f),this._moveBox(l.glyphBox,B,f),l.baseline+=f,l.centerX+=B}),i.contentBox=this._mergeBoxes(i.fragments.map(l=>l.contentBox)),i.glyphBox=this._mergeBoxes(i.fragments.map(l=>l.glyphBox))}return{actualContentBox:this._mergeBoxes(t.map(h=>h.contentBox)),contentBox:this._mergeBoxes(t.map(h=>h.lineBox)),glyphBox:this._mergeBoxes(t.map(h=>h.glyphBox)),paragraphs:t}}_createParagraphs(e){const t=(h={})=>{const{width:a,height:i,...l}=this.style;return{contentBox:this._createBox(),lineBox:this._createBox(),glyphBox:this._createBox(),baseline:0,fragments:[],...h,style:{...l,...h.style}}},n=(h={})=>{const a=[],{width:i,height:l,...x}=this.style;return a.push({contentBox:this._createBox(),inlineBox:this._createBox(),glyphBox:this._createBox(),centerX:0,baseline:0,...h,style:{...x,...h.style},content:h.content??""}),a},o=[];if(typeof e=="string")o.push(t({fragments:n({content:e})}));else{e=Array.isArray(e)?e:[e];for(const h of e)if("fragments"in h){const{fragments:a,...i}=h,l=t({style:i});for(const x of a){const{content:c,...g}=x;l.fragments.push(...n({content:c,style:{...i,...g}}))}o.push(l)}else if("content"in h){const{content:a,...i}=h,l=t({style:i});l.fragments.push(...n({content:a,style:i})),o.push(l)}}return o}_createWrapedParagraphs(e,t){const n=l=>JSON.parse(JSON.stringify(l)),o=[],h=e.slice();let a,i;for(;a=h.shift();){const l=a.fragments.slice();let x=0;const c=[];for(;i=l.shift();){const g=i.style;this._setContextStyle(g);let s="",r=!1;for(const B of i.content){const f=this.context.measureText(B).width,y=/^[\r\n]$/.test(B);if(y||g.textWrap==="wrap"&&t&&x+f>t){let u=y?s.length+1:s.length;!x&&!u&&(s+=B,u++),s.length&&c.push({...n(i),content:s}),c.length&&(o.push({...n(a),fragments:c.slice()}),c.length=0);const w=i.content.substring(u);(w.length||l.length)&&h.unshift({...n(a),fragments:(w.length?[{...n(i),content:w}]:[]).concat(l.slice())}),l.length=0,r=!0;break}else x+=f;s+=B}r||c.push(n(i))}c.length&&o.push({...n(a),fragments:c})}return o}_draw(e){const t=this.context;this.style.backgroundColor&&(t.fillStyle=this.style.backgroundColor,t.fillRect(0,0,t.canvas.width,t.canvas.height)),e.forEach(n=>{n.style.backgroundColor&&(t.fillStyle=n.style.backgroundColor,t.fillRect(n.lineBox.left,n.lineBox.top,n.lineBox.width,n.lineBox.height))}),e.forEach(n=>{n.fragments.forEach(o=>{switch(o.style.backgroundColor&&(t.fillStyle=o.style.backgroundColor,t.fillRect(o.inlineBox.left,o.inlineBox.top,o.inlineBox.width,o.inlineBox.height)),this._setContextStyle({...o.style,textAlign:"left",verticalAlign:"top"}),o.style.textStrokeWidth&&t.strokeText(o.content,o.contentBox.left,o.contentBox.top),t.fillText(o.content,o.contentBox.left,o.contentBox.top),o.style.textDecoration){case"underline":t.beginPath(),t.moveTo(o.contentBox.left,o.contentBox.top+o.contentBox.height-2),t.lineTo(o.contentBox.left+o.contentBox.width,o.contentBox.top+o.contentBox.height-2),t.stroke();break;case"line-through":t.beginPath(),t.moveTo(o.contentBox.left,o.contentBox.top+o.contentBox.height/2),t.lineTo(o.contentBox.left+o.contentBox.width,o.contentBox.top+o.contentBox.height/2),t.stroke();break}})})}_resizeView(e,t){const n=this.view;n.style.width=`${e}px`,n.style.height=`${t}px`,n.dataset.width=String(e),n.dataset.height=String(t),n.width=Math.max(1,Math.floor(e*this.pixelRatio)),n.height=Math.max(1,Math.floor(t*this.pixelRatio))}_setContextStyle(e){const t=this.context;switch(t.shadowColor=e.shadowColor,t.shadowOffsetX=e.shadowOffsetX,t.shadowOffsetY=e.shadowOffsetY,t.shadowBlur=e.shadowBlur,t.strokeStyle=e.textStrokeColor,t.lineWidth=e.textStrokeWidth,t.fillStyle=e.color,t.direction=e.direction,t.textAlign=e.textAlign,e.verticalAlign){case"baseline":t.textBaseline="alphabetic";break;case"top":case"middle":case"bottom":t.textBaseline=e.verticalAlign;break}t.font=[e.fontStyle,e.fontWeight,`${e.fontSize}px`,e.fontFamily].join(" "),t.fontKerning=e.fontKerning,t.letterSpacing=`${e.letterSpacing}px`}update(){const e=this.context;let{width:t,height:n}=this.style;t==="auto"&&(t=0),n==="auto"&&(n=0);const{contentBox:o,paragraphs:h}=this.measure();t||(t=o.width),n=Math.max(n,o.height),this._resizeView(t,n);const a=this.pixelRatio;e.scale(a,a),e.clearRect(0,0,e.canvas.width,e.canvas.height),this._draw(h)}}d.Text=p,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
+(function(d,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(d=typeof globalThis<"u"?globalThis:d||self,p(d.modernText={}))})(this,function(d){"use strict";const _=class _{static get defaultStyle(){return{width:"auto",height:"auto",color:"#000000",fontSize:14,fontWeight:"normal",fontFamily:"sans-serif",fontStyle:"normal",fontKerning:"normal",textWrap:"wrap",textAlign:"start",verticalAlign:"baseline",textDecoration:null,textStrokeWidth:0,textStrokeColor:"#000000",direction:"inherit",lineHeight:1,letterSpacing:0,shadowColor:"#000000",shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0}}constructor(e={}){const{view:t=document.createElement("canvas"),pixelRatio:n=window.devicePixelRatio||1,content:o="",style:h}=e;this.view=t,this.context=t.getContext("2d"),this.pixelRatio=n,this.content=o,this.style={..._.defaultStyle,...h},this.update()}_createBox(e=0,t=0,n=0,o=0){return{left:e,top:t,width:n,height:o,right:e+n,bottom:t+o}}_moveBox(e,t=0,n=0){e.left+=t,e.right+=t,e.top+=n,e.bottom+=n}_updateBoxSize(e){e.width=e.right-e.left,e.height=e.bottom-e.top}_mergeBoxes(e){const t=e.slice(1).reduce((n,o)=>(n.left=Math.min(n.left,o.left),n.top=Math.min(n.top,o.top),n.right=Math.max(n.right,o.right),n.bottom=Math.max(n.bottom,o.bottom),n),{...e[0]});return this._updateBoxSize(t),t}measure(){let{width:e}=this.style;e==="auto"&&(e=0);let t=this._createParagraphs(this.content);t=this._createWrapedParagraphs(t,e);const n=this.context;let o=0;for(let h=t.length,a=0;a<h;a++){const i=t[a],l=[];let x=0,c=null;for(const s of i.fragments){this._setContextStyle({...s.style,textAlign:"center",verticalAlign:"baseline"});const r=n.measureText(s.content),B=r.width,f=s.style.fontSize;s.inlineBox=this._createBox(x,o,B,f*s.style.lineHeight),s.contentBox=this._createBox(s.inlineBox.left,s.inlineBox.top+(s.inlineBox.height-f)/2,B,f);const y=n.measureText("X").actualBoundingBoxAscent,w=(s.contentBox.height-y)/2,u=r.actualBoundingBoxLeft+r.actualBoundingBoxRight,b=r.actualBoundingBoxAscent+r.actualBoundingBoxDescent;s.glyphBox=this._createBox(s.contentBox.left+(s.contentBox.width-u)/2,s.contentBox.top+w+(y-r.actualBoundingBoxAscent),u,b),s.centerX=s.glyphBox.left+r.actualBoundingBoxLeft,s.baseline=s.glyphBox.top+r.actualBoundingBoxAscent,x+=s.contentBox.width,l.push(s.contentBox),i.contentBox=this._mergeBoxes(l),i.contentBox.height<s.contentBox.height&&(c=s)}i.lineBox=this._mergeBoxes([...i.fragments.map(s=>s.inlineBox),this._createBox(0,o,e)]),this._setContextStyle({...(c??i).style,textAlign:"left",verticalAlign:"baseline"});const g=n.measureText("X");i.baseline=i.lineBox.top+(i.lineBox.height-g.actualBoundingBoxAscent+g.actualBoundingBoxDescent)/2+g.actualBoundingBoxAscent,o+=i.lineBox.height}for(let h=t.length,a=0;a<h;a++){const i=t[a];i.fragments.forEach(l=>{const x=l.inlineBox.left,c=l.inlineBox.top,g=i.lineBox.height-l.inlineBox.height;let s,r=c;switch(l.style.textAlign){case"end":case"right":s=x+(i.lineBox.width-i.contentBox.width);break;case"center":s=x+(i.lineBox.width-i.contentBox.width)/2;break;case"start":case"left":default:s=x+i.lineBox.left;break}switch(l.style.verticalAlign){case"top":r=c+i.lineBox.top;break;case"middle":r=c+i.lineBox.top+g/2;break;case"bottom":r=c+i.lineBox.top+g;break;case"sub":case"text-top":case"text-bottom":break;case"baseline":default:l.inlineBox.height<i.lineBox.height&&(r=c+(i.baseline-l.baseline));break}const B=s-x,f=r-c;this._moveBox(l.inlineBox,B,f),this._moveBox(l.contentBox,B,f),this._moveBox(l.glyphBox,B,f),l.baseline+=f,l.centerX+=B}),i.contentBox=this._mergeBoxes(i.fragments.map(l=>l.contentBox)),i.glyphBox=this._mergeBoxes(i.fragments.map(l=>l.glyphBox))}return{actualContentBox:this._mergeBoxes(t.map(h=>h.contentBox)),contentBox:this._mergeBoxes(t.map(h=>h.lineBox)),glyphBox:this._mergeBoxes(t.map(h=>h.glyphBox)),paragraphs:t}}_createParagraphs(e){const t=(h={})=>{const{width:a,height:i,...l}=this.style;return{contentBox:this._createBox(),lineBox:this._createBox(),glyphBox:this._createBox(),baseline:0,fragments:[],...h,style:{...l,...h.style}}},n=(h={})=>{const a=[],{width:i,height:l,...x}=this.style;return a.push({contentBox:this._createBox(),inlineBox:this._createBox(),glyphBox:this._createBox(),centerX:0,baseline:0,...h,style:{...x,...h.style},content:h.content??""}),a},o=[];if(typeof e=="string")o.push(t({fragments:n({content:e})}));else{e=Array.isArray(e)?e:[e];for(const h of e)if("fragments"in h){const{fragments:a,...i}=h,l=t({style:i});for(const x of a){const{content:c,...g}=x;l.fragments.push(...n({content:c,style:{...i,...g}}))}o.push(l)}else if("content"in h){const{content:a,...i}=h,l=t({style:i});l.fragments.push(...n({content:a,style:i})),o.push(l)}}return o}_createWrapedParagraphs(e,t){const n=l=>JSON.parse(JSON.stringify(l)),o=[],h=e.slice();let a,i;for(;a=h.shift();){const l=a.fragments.slice();let x=0;const c=[];for(;i=l.shift();){const g=i.style;this._setContextStyle(g);let s="",r=!1;for(const B of i.content){const f=this.context.measureText(B).width,y=/^[\r\n]$/.test(B);if(y||g.textWrap==="wrap"&&t&&x+f>t){let w=y?s.length+1:s.length;!x&&!w&&(s+=B,w++),s.length&&c.push({...n(i),content:s}),c.length&&(o.push({...n(a),fragments:c.slice()}),c.length=0);const u=i.content.substring(w);(u.length||l.length)&&h.unshift({...n(a),fragments:(u.length?[{...n(i),content:u}]:[]).concat(l.slice())}),l.length=0,r=!0;break}else x+=f;s+=B}r||c.push(n(i))}c.length&&o.push({...n(a),fragments:c})}return o}_draw(e){const t=this.context;this.style.backgroundColor&&(t.fillStyle=this.style.backgroundColor,t.fillRect(0,0,t.canvas.width,t.canvas.height)),e.forEach(n=>{n.style.backgroundColor&&(t.fillStyle=n.style.backgroundColor,t.fillRect(n.lineBox.left,n.lineBox.top,n.lineBox.width,n.lineBox.height))}),e.forEach(n=>{n.fragments.forEach(o=>{switch(o.style.backgroundColor&&(t.fillStyle=o.style.backgroundColor,t.fillRect(o.inlineBox.left,o.inlineBox.top,o.inlineBox.width,o.inlineBox.height)),this._setContextStyle({...o.style,textAlign:"left",verticalAlign:"top"}),o.style.textStrokeWidth&&t.strokeText(o.content,o.contentBox.left,o.contentBox.top),t.fillText(o.content,o.contentBox.left,o.contentBox.top),o.style.textDecoration){case"underline":t.beginPath(),t.moveTo(o.contentBox.left,o.contentBox.top+o.contentBox.height-2),t.lineTo(o.contentBox.left+o.contentBox.width,o.contentBox.top+o.contentBox.height-2),t.stroke();break;case"line-through":t.beginPath(),t.moveTo(o.contentBox.left,o.contentBox.top+o.contentBox.height/2),t.lineTo(o.contentBox.left+o.contentBox.width,o.contentBox.top+o.contentBox.height/2),t.stroke();break}})})}_resizeView(e,t){const n=this.view;n.style.width=`${e}px`,n.style.height=`${t}px`,n.dataset.width=String(e),n.dataset.height=String(t),n.width=Math.max(1,Math.floor(e*this.pixelRatio)),n.height=Math.max(1,Math.floor(t*this.pixelRatio))}_setContextStyle(e){const t=this.context;switch(t.shadowColor=e.shadowColor,t.shadowOffsetX=e.shadowOffsetX,t.shadowOffsetY=e.shadowOffsetY,t.shadowBlur=e.shadowBlur,t.strokeStyle=e.textStrokeColor,t.lineWidth=e.textStrokeWidth,t.fillStyle=e.color,t.direction=e.direction,t.textAlign=e.textAlign,e.verticalAlign){case"baseline":t.textBaseline="alphabetic";break;case"top":case"middle":case"bottom":t.textBaseline=e.verticalAlign;break}t.font=[e.fontStyle,e.fontWeight,`${e.fontSize}px`,e.fontFamily].join(" "),t.fontKerning=e.fontKerning,t.letterSpacing=`${e.letterSpacing}px`}update(){const e=this.context;let{width:t,height:n}=this.style;t==="auto"&&(t=0),n==="auto"&&(n=0);const{contentBox:o,paragraphs:h}=this.measure();t||(t=o.width),n=Math.max(n,o.height),this._resizeView(t,n);const a=this.pixelRatio;e.scale(a,a),e.clearRect(0,0,e.canvas.width,e.canvas.height),this._draw(h)}};_.punctuationRegex=/[\s\n\t\u200B\u200C\u200D\u200E\u200F.,?!:;"'(){}\[\]<>\/\\|~#\$%\*\+=&^，。？！：；“”‘’（）【】《》……——]/;let p=_;d.Text=p,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});

package/dist/index.mjs

@@ -1,4 +1,4 @@
-class w {
+const w = class w {
   static get defaultStyle() {
     return {
       width: "auto",
@@ -84,13 +84,13 @@ class w {
           B,
           p
         );
-        const d = r.actualBoundingBoxLeft + r.actualBoundingBoxRight, f = r.actualBoundingBoxAscent + r.actualBoundingBoxDescent;
+        const u = n.measureText("X").actualBoundingBoxAscent, d = (s.contentBox.height - u) / 2, f = r.actualBoundingBoxLeft + r.actualBoundingBoxRight, _ = r.actualBoundingBoxAscent + r.actualBoundingBoxDescent;
         s.glyphBox = this._createBox(
-          s.contentBox.left + (s.contentBox.width - d) / 2,
-          s.contentBox.top + (s.contentBox.height - f) / 2,
-          d,
-          f
-        ), s.centerX = s.glyphBox.left + r.actualBoundingBoxLeft, s.baseline = s.glyphBox.top + r.actualBoundingBoxAscent, x += s.contentBox.width + s.style.letterSpacing, l.push(s.contentBox), i.contentBox = this._mergeBoxes(l), i.contentBox.height < s.contentBox.height && (c = s);
+          s.contentBox.left + (s.contentBox.width - f) / 2,
+          s.contentBox.top + d + (u - r.actualBoundingBoxAscent),
+          f,
+          _
+        ), s.centerX = s.glyphBox.left + r.actualBoundingBoxLeft, s.baseline = s.glyphBox.top + r.actualBoundingBoxAscent, x += s.contentBox.width, l.push(s.contentBox), i.contentBox = this._mergeBoxes(l), i.contentBox.height < s.contentBox.height && (c = s);
       }
       i.lineBox = this._mergeBoxes([
         ...i.fragments.map((s) => s.inlineBox),
@@ -214,17 +214,17 @@ class w {
         this._setContextStyle(g);
         let s = "", r = !1;
         for (const B of i.content) {
-          const p = this.context.measureText(B).width, d = /^[\r\n]$/.test(B);
-          if (d || g.textWrap === "wrap" && t && x + p > t) {
-            let f = d ? s.length + 1 : s.length;
-            !x && !f && (s += B, f++), s.length && c.push({ ...n(i), content: s }), c.length && (o.push({
+          const p = this.context.measureText(B).width, u = /^[\r\n]$/.test(B);
+          if (u || g.textWrap === "wrap" && t && x + p > t) {
+            let d = u ? s.length + 1 : s.length;
+            !x && !d && (s += B, d++), s.length && c.push({ ...n(i), content: s }), c.length && (o.push({
               ...n(a),
               fragments: c.slice()
             }), c.length = 0);
-            const u = i.content.substring(f);
-            (u.length || l.length) && h.unshift({
+            const f = i.content.substring(d);
+            (f.length || l.length) && h.unshift({
               ...n(a),
-              fragments: (u.length ? [{ ...n(i), content: u }] : []).concat(l.slice())
+              fragments: (f.length ? [{ ...n(i), content: f }] : []).concat(l.slice())
             }), l.length = 0, r = !0;
             break;
           } else
@@ -290,7 +290,9 @@ class w {
     const a = this.pixelRatio;
     e.scale(a, a), e.clearRect(0, 0, e.canvas.width, e.canvas.height), this._draw(h);
   }
-}
+};
+w.punctuationRegex = /[\s\n\t\u200B\u200C\u200D\u200E\u200F.,?!:;"'(){}\[\]<>\/\\|~#\$%\*\+=&^，。？！：；“”‘’（）【】《》……——]/;
+let y = w;
 export {
-  w as Text
+  y as Text
 };

package/package.json

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

package/types/Text.d.ts

@@ -79,6 +79,7 @@ export interface Metrics {
     paragraphs: Array<TextParagraph>;
 }
 export declare class Text {
+    static punctuationRegex: RegExp;
     static get defaultStyle(): TextStyle;
     readonly view: HTMLCanvasElement;
     readonly context: CanvasRenderingContext2D;