modern-text 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-PRESENT wxm
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,49 @@
+<h1 align="center">modern-text</h1>
+
+<p align="center">
+  <a href="https://unpkg.com/modern-text">
+    <img src="https://img.shields.io/bundlephobia/minzip/modern-text" alt="Minzip">
+  </a>
+  <a href="https://www.npmjs.com/package/modern-text">
+    <img src="https://img.shields.io/npm/v/modern-text.svg" alt="Version">
+  </a>
+  <a href="https://www.npmjs.com/package/modern-text">
+    <img src="https://img.shields.io/npm/dm/modern-text" alt="Downloads">
+  </a>
+  <a href="https://github.com/qq15725/modern-text/issues">
+    <img src="https://img.shields.io/github/issues/qq15725/modern-text" alt="Issues">
+  </a>
+  <a href="https://github.com/qq15725/modern-text/blob/main/LICENSE">
+    <img src="https://img.shields.io/npm/l/modern-text.svg" alt="License">
+  </a>
+</p>
+
+## Usage
+
+```ts
+import { Text } from 'modern-text'
+
+const text = new Text({
+  style: {
+    width: 100,
+    height: 200,
+    fontSize: 22,
+    backgroundColor: '#0000FF',
+    textDecoration: 'underline',
+  },
+  content: [
+    {
+      fragments: [
+        { content: 'He', style: { color: 'red', fontSize: 12 } },
+        { content: 'llo', style: { color: 'black' } },
+      ],
+    },
+    { content: ', ', style: { color: 'grey' } },
+    { content: 'World!', style: { color: 'black' } },
+  ],
+})
+
+document.body.append(text.view) // canvas 2d
+
+console.log(text.measure()) // boundingBox with paragraphs
+```

package/dist/index.cjs

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

package/dist/index.js

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

package/dist/index.mjs

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

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "modern-text",
+  "type": "module",
+  "version": "0.0.1",
+  "packageManager": "pnpm@8.14.1",
+  "description": "Starter template for TypeScript library",
+  "author": "wxm",
+  "license": "MIT",
+  "homepage": "https://github.com/qq15725/modern-text",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/qq15725/modern-text.git"
+  },
+  "bugs": {
+    "url": "https://github.com/qq15725/modern-text/issues"
+  },
+  "keywords": [
+    "text",
+    "measure",
+    "canvas-text",
+    "typescript"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "types/index.d.ts",
+  "browser": "dist/index.js",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./types/*",
+        "./types/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "scripts": {
+    "dev": "vite docs",
+    "lint": "eslint src",
+    "test": "vitest",
+    "build": "vite build && tsc --project tsconfig.build.json",
+    "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
+    "release": "bumpp package.json --commit \"release: v%s\" --push --all --tag"
+  },
+  "devDependencies": {
+    "@qq15725/eslint-config": "^1.1.0",
+    "@types/node": "^20.11.5",
+    "bumpp": "^9.3.0",
+    "conventional-changelog-cli": "^4.1.0",
+    "eslint": "^8.56.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vitest": "^1.2.1"
+  }
+}

package/types/Text.d.ts

@@ -0,0 +1,91 @@
+export type FontWeight = 'normal' | 'bold' | 'lighter' | 'bolder' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+export type FontStyle = 'normal' | 'italic' | 'oblique' | `oblique ${string}`;
+export type FontKerning = 'auto' | 'none' | 'normal';
+export type TextWrap = 'wrap' | 'nowrap';
+export type TextAlign = 'center' | 'end' | 'left' | 'right' | 'start';
+export type TextBaseline = 'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top';
+export type TextDecoration = 'underline' | 'line-through';
+export interface TextParagraphWithStyle {
+    content?: string;
+    style?: Partial<TextFragmentStyle>;
+    fragments?: Array<TextFragmentWithStyle>;
+}
+export interface TextFragmentWithStyle {
+    content: string;
+    style?: Partial<TextFragmentStyle>;
+}
+export interface TextParagraph {
+    width: number;
+    height: number;
+    relativeX: number;
+    relativeY: number;
+    absoluteX: number;
+    absoluteY: number;
+    fragments: Array<TextFragment>;
+}
+export interface TextFragment {
+    width: number;
+    actualBoundingBoxWidth: number;
+    height: number;
+    relativeX: number;
+    relativeY: number;
+    absoluteX: number;
+    absoluteY: number;
+    fillX: number;
+    fillY: number;
+    content: string;
+    style: Partial<TextFragmentStyle>;
+}
+export interface TextStyle {
+    width: number;
+    height: number;
+    color: string;
+    fontSize: number;
+    fontWeight: FontWeight;
+    fontFamily: string;
+    fontStyle: FontStyle;
+    fontKerning: FontKerning;
+    textWrap: TextWrap;
+    textAlign: TextAlign;
+    textBaseline: TextBaseline;
+    textDecoration: TextDecoration | null;
+    textStrokeWidth: number;
+    textStrokeColor: string;
+    direction: 'inherit' | 'ltr' | 'rtl';
+    lineHeight: number;
+    letterSpacing: number;
+    shadowColor: string;
+    shadowOffsetX: number;
+    shadowOffsetY: number;
+    shadowBlur: number;
+}
+export type TextFragmentStyle = Omit<TextStyle, 'width' | 'height'>;
+export interface TextProperties {
+    view?: HTMLCanvasElement;
+    pixelRatio?: number;
+    content?: string | Array<TextParagraphWithStyle>;
+    style?: Partial<TextStyle>;
+}
+export interface MeasureResult {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    paragraphs: Array<TextParagraph>;
+}
+export declare class Text {
+    readonly view: HTMLCanvasElement;
+    readonly context: CanvasRenderingContext2D;
+    pixelRatio: number;
+    style: TextStyle;
+    content: string | Array<TextParagraphWithStyle>;
+    constructor(properties?: TextProperties);
+    measure(width?: number, height?: number): MeasureResult;
+    protected _createParagraphs(content: string | TextParagraphWithStyle | Array<TextParagraphWithStyle>): Array<TextParagraph>;
+    protected _createWrapedParagraphs(paragraphs: Array<TextParagraph>, width: number): Array<TextParagraph>;
+    protected _draw(paragraphs: Array<TextParagraph>): void;
+    protected _resizeCanvas(width: number, height: number): void;
+    protected _getFragmentStyle(style?: Partial<TextStyle>): TextStyle;
+    protected _setContextStyle(style: TextStyle): void;
+    update(): void;
+}

package/types/index.d.ts

@@ -0,0 +1 @@
+export * from './Text';