modern-text 0.2.42 → 0.2.44

package/README.md

@@ -21,32 +21,19 @@
 ## Usage
 
 ```ts
-import { Text } from 'modern-text'
+import { renderText } from 'modern-text'
 
-const text = new Text({
+const view = document.createElement('canvas')
+document.body.append(view)
+
+renderText({
+  view,
   style: {
     width: 100,
     height: 200,
     fontSize: 22,
     textDecoration: 'underline',
   },
-  // content: 'paragraph'
-  // content: [
-  //   'paragraph1',
-  //   ['paragraph1', 'paragraph2'],
-  //   { content: 'paragraph2', fontSize: 20 },
-  //   [
-  //     { content: 'fragment1', fontSize: 12 },
-  //     { content: 'fragment2', fontSize: 30 },
-  //   ],
-  //   {
-  //     backgroundColor: 'blue',
-  //     fragments: [
-  //       { content: 'fragment3', color: 'red', fontSize: 12 },
-  //       { content: 'fragment4', color: 'black' },
-  //     ],
-  //   },
-  // ]
   content: [
     {
       letterSpacing: 3,
@@ -59,10 +46,4 @@ const text = new Text({
     { content: 'World!', color: 'black' },
   ],
 })
-
-const view = document.createElement('canvas')
-text.render({ view })
-document.body.append(view) // canvas 2d
-
-console.log(text.measure()) // boundingBox with computed paragraphs
 ```

package/dist/index.cjs

@@ -122,6 +122,14 @@ const set2 = /* @__PURE__ */ new Set([
   "\u2019",
   "\u02DC"
 ]);
+const fsSelectionMap = {
+  1: "italic",
+  32: "bold"
+};
+const macStyleMap = {
+  1: "italic",
+  2: "bold"
+};
 const fontWeightMap = {
   100: -0.2,
   200: -0.1,
@@ -201,17 +209,19 @@ class Character {
     if (!font) {
       return this;
     }
+    this.updateGlyph(font);
     const {
       isVertical,
       content,
-      computedStyle,
+      computedStyle: style,
       baseline,
       inlineBox
-    } = this.updateGlyph(font);
-    const { os2, ascender, descender } = font;
+    } = this;
+    const { os2, head, ascender, descender } = font;
     const typoAscender = os2.sTypoAscender;
+    const fontStyle = fsSelectionMap[os2.fsSelection] ?? macStyleMap[head.macStyle];
     const { left, top } = inlineBox;
-    const { fontSize, fontStyle } = computedStyle;
+    const needsItalic = style.fontStyle === "italic" && fontStyle !== "italic";
     let x = left;
     let y = top + baseline;
     let glyphIndex;
@@ -225,13 +235,13 @@ class Character {
     }
     if (isVertical && !set1.has(content) && (content.codePointAt(0) <= 256 || set2.has(content))) {
       path.addCommands(
-        font.getPathCommands(content, x, top + baseline - (inlineBox.height - inlineBox.width) / 2, fontSize) ?? []
+        font.getPathCommands(content, x, top + baseline - (inlineBox.height - inlineBox.width) / 2, style.fontSize) ?? []
       );
       const point = {
         y: top - (inlineBox.height - inlineBox.width) / 2 + inlineBox.height / 2,
         x: x + inlineBox.width / 2
       };
-      if (fontStyle === "italic") {
+      if (needsItalic) {
         this._italic(
           path,
           isVertical ? {
@@ -244,9 +254,9 @@ class Character {
     } else {
       if (glyphIndex !== void 0) {
         path.addCommands(
-          font.glyphs.get(glyphIndex).getPathCommands(x, y, fontSize)
+          font.glyphs.get(glyphIndex).getPathCommands(x, y, style.fontSize)
         );
-        if (fontStyle === "italic") {
+        if (needsItalic) {
           this._italic(
             path,
             isVertical ? {
@@ -257,9 +267,9 @@ class Character {
         }
       } else {
         path.addCommands(
-          font.getPathCommands(content, x, y, fontSize) ?? []
+          font.getPathCommands(content, x, y, style.fontSize) ?? []
         );
-        if (fontStyle === "italic") {
+        if (needsItalic) {
           this._italic(
             path,
             isVertical ? { x: x + inlineBox.height / 2, y } : void 0
@@ -268,14 +278,14 @@ class Character {
       }
     }
     path.addCommands(this._decoration());
-    const fontWeight = computedStyle.fontWeight ?? 400;
-    if (fontWeight in fontWeightMap) {
-      path.bold(fontWeightMap[fontWeight] * fontSize * 0.05);
+    const fontWeight = style.fontWeight ?? 400;
+    if (fontWeight in fontWeightMap && ((fontWeight === 700 || fontWeight === "bold") && fontStyle !== "bold")) {
+      path.bold(fontWeightMap[fontWeight] * style.fontSize * 0.05);
     }
     path.style = {
-      fill: computedStyle.color,
-      stroke: computedStyle.textStrokeWidth ? computedStyle.textStrokeColor : "none",
-      strokeWidth: computedStyle.textStrokeWidth ? computedStyle.textStrokeWidth * fontSize * 0.03 : 0
+      fill: style.color,
+      stroke: style.textStrokeWidth ? style.textStrokeColor : "none",
+      strokeWidth: style.textStrokeWidth ? style.textStrokeWidth * style.fontSize * 0.03 : 0
     };
     this.path = path;
     this.glyphBox = this.getGlyphBoundingBox();
@@ -453,6 +463,7 @@ class Measurer {
         "fontSize",
         "letterSpacing",
         "textStrokeWidth",
+        "textIndent",
         "shadowOffsetX",
         "shadowOffsetY",
         "shadowBlur"
@@ -778,7 +789,7 @@ function highlight() {
       characters.forEach((character) => {
         const { isVertical, computedStyle: style } = character;
         if (!isNone(style.highlightImage) && character.glyphBox) {
-          if (style.highlightSize !== "1rem" && prevStyle?.highlightImage === style.highlightImage && prevStyle?.highlightSize === style.highlightSize && prevStyle?.highlightStrokeWidth === style.highlightStrokeWidth && prevStyle?.highlightOverflow === style.highlightOverflow && group.length && (isVertical ? group[0].inlineBox.left === character.inlineBox.left : group[0].inlineBox.top === character.inlineBox.top) && group[0].fontSize === character.fontSize) {
+          if (style.highlightSize !== "1rem" && prevStyle?.highlightImage === style.highlightImage && prevStyle?.highlightSize === style.highlightSize && prevStyle?.highlightStrokeWidth === style.highlightStrokeWidth && prevStyle?.highlightOverflow === style.highlightOverflow && group?.length && (isVertical ? group[0].inlineBox.left === character.inlineBox.left : group[0].inlineBox.top === character.inlineBox.top) && group[0].fontSize === character.fontSize) {
             group.push(character);
           } else {
             group = [];
@@ -880,57 +891,50 @@ function listStyle() {
     paths,
     update: (text) => {
       paths.length = 0;
-      const { paragraphs, computedStyle: style, isVertical } = text;
-      let fontSize = text.fontSize;
-      paragraphs.forEach((p) => {
-        p.fragments.forEach((f) => {
-          f.characters.forEach((c) => {
-            fontSize = Math.max(fontSize, c.computedStyle.fontSize);
-          });
-        });
-      });
-      let listStyleSize = style.listStyleSize;
-      let image;
-      if (!isNone(style.listStyleImage)) {
-        image = style.listStyleImage;
-      } else if (!isNone(style.listStyleType)) {
-        const r = fontSize * 0.38 / 2;
-        listStyleSize = listStyleSize === "cover" ? r * 2 : listStyleSize;
-        switch (style.listStyleType) {
-          case "disc":
-            image = `<svg width="${r * 2}" height="${r * 2}" xmlns="http://www.w3.org/2000/svg">
+      const { paragraphs, isVertical, fontSize } = text;
+      const padding = fontSize * 0.45;
+      paragraphs.forEach((paragraph) => {
+        const { computedStyle: style } = paragraph;
+        let listStyleSize = style.listStyleSize;
+        let image;
+        if (!isNone(style.listStyleImage)) {
+          image = style.listStyleImage;
+        } else if (!isNone(style.listStyleType)) {
+          const r = fontSize * 0.38 / 2;
+          listStyleSize = listStyleSize === "cover" ? r * 2 : listStyleSize;
+          switch (style.listStyleType) {
+            case "disc":
+              image = `<svg width="${r * 2}" height="${r * 2}" xmlns="http://www.w3.org/2000/svg">
   <circle cx="${r}" cy="${r}" r="${r}" fill="${style.color}" />
 </svg>`;
-            break;
+              break;
+          }
         }
-      }
-      if (!image) {
-        return;
-      }
-      const padding = fontSize * 0.45;
-      const imagePaths = modernPath2d.parseSvg(image);
-      const imageBox = modernPath2d.getPathsBoundingBox(imagePaths);
-      paragraphs.forEach((paragraph) => {
+        if (!image) {
+          return;
+        }
+        const imagePaths = modernPath2d.parseSvg(image);
+        const imageBox = modernPath2d.getPathsBoundingBox(imagePaths);
         const box = paragraph.lineBox;
-        const cBox = paragraph.fragments[0].inlineBox;
-        if (cBox) {
+        const fBox = paragraph.fragments[0].inlineBox;
+        if (fBox) {
           const m = new modernPath2d.Matrix3();
           if (isVertical) {
-            const scale = parseScale(listStyleSize, style.fontSize, fontSize);
+            const scale = parseScale(listStyleSize, fontSize, fontSize);
             const reScale = fontSize / imageBox.height * scale;
             m.translate(-imageBox.left, -imageBox.top);
             m.rotate(Math.PI / 2);
             m.scale(reScale, reScale);
             m.translate(fontSize / 2 - imageBox.height * reScale / 2, 0);
-            m.translate(box.left + (box.width - fontSize) / 2, cBox.top - padding);
+            m.translate(box.left + (box.width - fontSize) / 2, fBox.top - padding);
           } else {
-            const scale = parseScale(listStyleSize, style.fontSize, fontSize);
+            const scale = parseScale(listStyleSize, fontSize, fontSize);
             const reScale = fontSize / imageBox.height * scale;
             m.translate(-imageBox.left, -imageBox.top);
             m.translate(-imageBox.width, 0);
             m.scale(reScale, reScale);
             m.translate(0, fontSize / 2 - imageBox.height * reScale / 2);
-            m.translate(cBox.left - padding, box.top + (box.height - fontSize) / 2);
+            m.translate(fBox.left - padding, box.top + (box.height - fontSize) / 2);
           }
           paths.push(...imagePaths.map((p) => p.clone().matrix(m)));
         }
@@ -1020,8 +1024,8 @@ function render() {
 }
 function getTransform2D(text, style) {
   const { fontSize, renderBoundingBox } = text;
-  const offsetX = (style.offsetX ?? 0) * fontSize;
-  const offsetY = (style.offsetY ?? 0) * fontSize;
+  const translateX = (style.translateX ?? 0) * fontSize;
+  const translateY = (style.translateY ?? 0) * fontSize;
   const PI_2 = Math.PI * 2;
   const skewX = (style.skewX ?? 0) / 360 * PI_2;
   const skewY = (style.skewY ?? 0) / 360 * PI_2;
@@ -1029,7 +1033,7 @@ function getTransform2D(text, style) {
   const centerX = left + width / 2;
   const centerY = top + height / 2;
   tempM1.identity();
-  tempM2.makeTranslation(offsetX, offsetY);
+  tempM2.makeTranslation(translateX, translateY);
   tempM1.multiply(tempM2);
   tempM2.makeTranslation(centerX, centerY);
   tempM1.multiply(tempM2);
@@ -1049,7 +1053,7 @@ var __publicField = (obj, key, value) => {
 const defaultTextStyles = {
   writingMode: "horizontal-tb",
   verticalAlign: "baseline",
-  lineHeight: 1,
+  lineHeight: 1.2,
   letterSpacing: 0,
   // font
   fontSize: 14,
@@ -1060,21 +1064,16 @@ const defaultTextStyles = {
   // text
   textWrap: "wrap",
   textAlign: "start",
+  textIndent: 0,
   textTransform: "none",
   textOrientation: "mixed",
-  // color
-  color: "#000",
-  backgroundColor: "rgba(0, 0, 0, 0)",
-  // text
   textDecoration: "none",
   // textStroke
   textStrokeWidth: 0,
   textStrokeColor: "#000",
-  // shadow
-  shadowColor: "rgba(0, 0, 0, 0)",
-  shadowOffsetX: 0,
-  shadowOffsetY: 0,
-  shadowBlur: 0,
+  // color
+  color: "#000",
+  backgroundColor: "rgba(0, 0, 0, 0)",
   // listStyle
   listStyleType: "none",
   listStyleImage: "none",
@@ -1085,7 +1084,16 @@ const defaultTextStyles = {
   highlightImage: "none",
   highlightSize: "cover",
   highlightStrokeWidth: "100%",
-  highlightOverflow: "none"
+  highlightOverflow: "none",
+  // shadow
+  shadowColor: "rgba(0, 0, 0, 0)",
+  shadowOffsetX: 0,
+  shadowOffsetY: 0,
+  shadowBlur: 0,
+  translateX: 0,
+  translateY: 0,
+  skewX: 0,
+  skewY: 0
 };
 class Text {
   constructor(options = {}) {
@@ -1123,20 +1131,10 @@ class Text {
   }
   measure(dom = this.measureDom) {
     this.computedStyle = { ...defaultTextStyles, ...this.style };
-    const old = this.paragraphs;
+    const oldParagraphs = this.paragraphs;
+    const oldRenderBoundingBox = this.renderBoundingBox;
     this.paragraphs = this.parser.parse();
     const result = this.measurer.measure(dom);
-    this.paragraphs = old;
-    return result;
-  }
-  requestUpdate() {
-    this.needsUpdate = true;
-    return this;
-  }
-  update() {
-    const { paragraphs, boundingBox } = this.measure();
-    this.paragraphs = paragraphs;
-    this.boundingBox = boundingBox;
     const characters = this.characters;
     characters.forEach((c) => c.update());
     const plugins = [...this.plugins.values()];
@@ -1164,6 +1162,20 @@ class Text {
         return modernPath2d.getPathsBoundingBox(plugin.paths ?? []);
       }).filter(Boolean)
     );
+    result.renderBoundingBox = this.renderBoundingBox;
+    this.paragraphs = oldParagraphs;
+    this.renderBoundingBox = oldRenderBoundingBox;
+    return result;
+  }
+  requestUpdate() {
+    this.needsUpdate = true;
+    return this;
+  }
+  update() {
+    const { paragraphs, boundingBox, renderBoundingBox } = this.measure();
+    this.paragraphs = paragraphs;
+    this.boundingBox = boundingBox;
+    this.renderBoundingBox = renderBoundingBox;
     return this;
   }
   render(options) {
@@ -1195,6 +1207,14 @@ class Text {
   }
 }
 
+function measureText(options) {
+  return new Text(options).measure();
+}
+
+function renderText(options) {
+  return new Text(options).render(options);
+}
+
 exports.Character = Character;
 exports.Fragment = Fragment;
 exports.Measurer = Measurer;
@@ -1209,8 +1229,10 @@ exports.getTransform2D = getTransform2D;
 exports.highlight = highlight;
 exports.isNone = isNone;
 exports.listStyle = listStyle;
+exports.measureText = measureText;
 exports.parseColor = parseColor;
 exports.render = render;
+exports.renderText = renderText;
 exports.setupView = setupView;
 exports.uploadColor = uploadColor;
 exports.uploadColors = uploadColors;

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { BoundingBox, Vector2, Path2D, VectorLike, Matrix3 } from 'modern-path2d';
+import { BoundingBox, Path2D, Vector2, VectorLike, Matrix3 } from 'modern-path2d';
 export * from 'modern-path2d';
 import { Sfnt, GlyphPathCommand } from 'modern-font';
 export * from 'modern-font';
@@ -22,46 +22,49 @@ type HighlightImage = 'none' | string;
 type HighlightSize = 'cover' | Sizeable;
 type HighlightStrokeWidth = Sizeable;
 type HighlightOverflow = 'none' | 'visible' | 'hidden';
-interface TextLayoutStyle {
+interface TextLineStyle {
     writingMode: WritingMode;
-    verticalAlign: VerticalAlign;
+    textWrap: TextWrap;
+    textAlign: TextAlign;
+    textIndent: number;
     lineHeight: number;
+    listStyleType: ListStyleType;
+    listStyleImage: ListStyleImage;
+    listStyleSize: ListStyleSize;
+    listStylePosition: ListStylePosition;
+}
+interface TextInlineStyle {
+    verticalAlign: VerticalAlign;
     letterSpacing: number;
     fontSize: number;
     fontWeight: FontWeight;
     fontFamily: string;
     fontStyle: FontStyle;
     fontKerning?: FontKerning;
-    textWrap: TextWrap;
-    textAlign: TextAlign;
     textTransform: TextTransform;
     textOrientation: TextOrientation;
+    textDecoration: TextDecoration;
+    highlightReferImage: HighlightImage;
+    highlightImage: HighlightImage;
+    highlightSize: HighlightSize;
+    highlightStrokeWidth: HighlightStrokeWidth;
+    highlightOverflow: HighlightOverflow;
 }
 interface TextDrawStyle {
     color: string | CanvasGradient | CanvasPattern;
     backgroundColor: string | CanvasGradient | CanvasPattern;
-    textDecoration: TextDecoration;
     textStrokeWidth: number;
     textStrokeColor: string | CanvasGradient | CanvasPattern;
     shadowColor: string;
     shadowOffsetX: number;
     shadowOffsetY: number;
     shadowBlur: number;
+    translateX: number;
+    translateY: number;
+    skewX: number;
+    skewY: number;
 }
-interface TextListStyle {
-    listStyleType: ListStyleType;
-    listStyleImage: ListStyleImage;
-    listStyleSize: ListStyleSize;
-    listStylePosition: ListStylePosition;
-}
-interface TextHighlightStyle {
-    highlightReferImage: HighlightImage;
-    highlightImage: HighlightImage;
-    highlightSize: HighlightSize;
-    highlightStrokeWidth: HighlightStrokeWidth;
-    highlightOverflow: HighlightOverflow;
-}
-interface TextStyle extends TextLayoutStyle, TextDrawStyle, TextListStyle, TextHighlightStyle {
+interface TextStyle extends TextLineStyle, TextInlineStyle, TextDrawStyle {
 }
 interface FragmentContent extends Partial<TextStyle> {
     content: string;
@@ -72,7 +75,7 @@ interface ParagraphContent extends Partial<TextStyle> {
 type TextContent = string | FragmentContent | ParagraphContent | (string | FragmentContent | ParagraphContent | (string | FragmentContent)[])[];
 
 declare function parseColor(ctx: CanvasRenderingContext2D, source: string | CanvasGradient | CanvasPattern, box: BoundingBox): string | CanvasGradient | CanvasPattern;
-declare function uploadColor(style: Partial<TextDrawStyle>, box: BoundingBox, ctx: CanvasRenderingContext2D): void;
+declare function uploadColor(style: Partial<TextStyle>, box: BoundingBox, ctx: CanvasRenderingContext2D): void;
 interface LinearGradient {
     x0: number;
     y0: number;
@@ -84,6 +87,16 @@ interface LinearGradient {
     }[];
 }
 
+interface DrawShapePathsOptions extends Partial<TextStyle> {
+    ctx: CanvasRenderingContext2D;
+    path: Path2D;
+    fontSize: number;
+    clipRect?: BoundingBox;
+}
+declare function drawPath(options: DrawShapePathsOptions): void;
+
+declare function setupView(ctx: CanvasRenderingContext2D, pixelRatio: number, boundingBox: BoundingBox): void;
+
 declare class Fragment {
     content: string;
     style: Partial<TextStyle>;
@@ -128,7 +141,7 @@ declare class Character {
         max: Vector2;
     } | undefined;
     getGlyphBoundingBox(withStyle?: boolean): BoundingBox | undefined;
-    drawTo(ctx: CanvasRenderingContext2D, config?: Partial<TextEffect>): void;
+    drawTo(ctx: CanvasRenderingContext2D, config?: Partial<TextStyle>): void;
 }
 
 declare class Paragraph {
@@ -170,7 +183,7 @@ interface MeasuredCharacter {
     textHeight: number;
     textWidth: number;
 }
-interface MeasuredResult {
+interface MeasureDomResult {
     paragraphs: Paragraph[];
     boundingBox: BoundingBox;
 }
@@ -197,10 +210,22 @@ declare class Measurer {
         fragments: MeasuredFragment[];
         characters: MeasuredCharacter[];
     };
-    measureDom(dom: HTMLElement): MeasuredResult;
-    measure(dom?: HTMLElement): MeasuredResult;
+    measureDom(dom: HTMLElement): MeasureDomResult;
+    measure(dom?: HTMLElement): MeasureDomResult;
 }
 
+type PromiseLike<T> = T | Promise<T>;
+interface Plugin {
+    name: string;
+    paths?: Path2D[];
+    getBoundingBox?: (text: Text) => BoundingBox | undefined;
+    updateOrder?: number;
+    update?: (text: Text) => PromiseLike<void>;
+    renderOrder?: number;
+    render?: (ctx: CanvasRenderingContext2D, text: Text) => PromiseLike<void>;
+}
+declare function definePlugin(options: Plugin): Plugin;
+
 declare class Parser {
     protected _text: Text;
     constructor(_text: Text);
@@ -215,48 +240,19 @@ interface TextOptions {
     content?: TextContent;
     style?: Partial<TextStyle>;
     measureDom?: HTMLElement;
-    effects?: TextEffect[];
+    effects?: Partial<TextStyle>[];
 }
+type MeasureResult = MeasureDomResult & {
+    renderBoundingBox: BoundingBox;
+};
 declare const defaultTextStyles: TextStyle;
 declare class Text {
     content: TextContent;
     style: Partial<TextStyle>;
-    effects?: TextEffect[];
+    effects?: Partial<TextStyle>[];
     measureDom?: HTMLElement;
     needsUpdate: boolean;
-    computedStyle: {
-        writingMode: WritingMode;
-        verticalAlign: VerticalAlign;
-        lineHeight: number;
-        letterSpacing: number;
-        fontSize: number;
-        fontWeight: FontWeight;
-        fontFamily: string;
-        fontStyle: FontStyle;
-        fontKerning?: FontKerning;
-        textWrap: TextWrap;
-        textAlign: TextAlign;
-        textTransform: TextTransform;
-        textOrientation: TextOrientation;
-        color: string | CanvasGradient | CanvasPattern;
-        backgroundColor: string | CanvasGradient | CanvasPattern;
-        textDecoration: TextDecoration;
-        textStrokeWidth: number;
-        textStrokeColor: string | CanvasGradient | CanvasPattern;
-        shadowColor: string;
-        shadowOffsetX: number;
-        shadowOffsetY: number;
-        shadowBlur: number;
-        listStyleType: ListStyleType;
-        listStyleImage: ListStyleImage;
-        listStyleSize: ListStyleSize;
-        listStylePosition: ListStylePosition;
-        highlightReferImage: HighlightImage;
-        highlightImage: HighlightImage;
-        highlightSize: HighlightSize;
-        highlightStrokeWidth: HighlightStrokeWidth;
-        highlightOverflow: HighlightOverflow;
-    };
+    computedStyle: TextStyle;
     paragraphs: Paragraph[];
     boundingBox: BoundingBox;
     renderBoundingBox: BoundingBox;
@@ -268,50 +264,26 @@ declare class Text {
     get characters(): Character[];
     constructor(options?: TextOptions);
     use(plugin: Plugin): this;
-    measure(dom?: HTMLElement | undefined): MeasuredResult;
+    measure(dom?: HTMLElement | undefined): MeasureResult;
     requestUpdate(): this;
     update(): this;
     render(options: TextRenderOptions): this;
 }
 
-type PromiseLike<T> = T | Promise<T>;
-interface Plugin {
-    name: string;
-    paths?: Path2D[];
-    getBoundingBox?: (text: Text) => BoundingBox | undefined;
-    updateOrder?: number;
-    update?: (text: Text) => PromiseLike<void>;
-    renderOrder?: number;
-    render?: (ctx: CanvasRenderingContext2D, text: Text) => PromiseLike<void>;
-}
-declare function definePlugin(options: Plugin): Plugin;
+declare function uploadColors(ctx: CanvasRenderingContext2D, text: Text): void;
+
+declare function measureText(options: TextOptions): MeasureResult;
 
 declare function highlight(): Plugin;
 
 declare function listStyle(): Plugin;
 
-type TextEffect = Partial<TextDrawStyle & {
-    offsetX: number;
-    offsetY: number;
-    skewX: number;
-    skewY: number;
-}>;
 declare function render(): Plugin;
-declare function getTransform2D(text: Text, style: TextEffect): Matrix3;
+declare function getTransform2D(text: Text, style: Partial<TextStyle>): Matrix3;
 
-interface DrawShapePathsOptions extends Partial<TextEffect> {
-    ctx: CanvasRenderingContext2D;
-    path: Path2D;
-    fontSize: number;
-    clipRect?: BoundingBox;
-}
-declare function drawPath(options: DrawShapePathsOptions): void;
-
-declare function setupView(ctx: CanvasRenderingContext2D, pixelRatio: number, boundingBox: BoundingBox): void;
-
-declare function uploadColors(ctx: CanvasRenderingContext2D, text: Text): void;
+declare function renderText(options: TextOptions & TextRenderOptions): Text;
 
 declare function isNone(val: string | undefined): boolean;
 declare function filterEmpty(val: Record<string, any> | undefined): Record<string, any> | undefined;
 
-export { Character, type DrawShapePathsOptions, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type HighlightImage, type HighlightOverflow, type HighlightSize, type HighlightStrokeWidth, type LinearGradient, type ListStyleImage, type ListStylePosition, type ListStyleSize, type ListStyleType, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, type MeasuredResult, Measurer, Paragraph, type ParagraphContent, Parser, type Plugin, type Sizeable, Text, type TextAlign, type TextContent, type TextDecoration, type TextDrawStyle, type TextEffect, type TextHighlightStyle, type TextLayoutStyle, type TextListStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, highlight, isNone, listStyle, parseColor, render, setupView, uploadColor, uploadColors };
+export { Character, type DrawShapePathsOptions, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type HighlightImage, type HighlightOverflow, type HighlightSize, type HighlightStrokeWidth, type LinearGradient, type ListStyleImage, type ListStylePosition, type ListStyleSize, type ListStyleType, type MeasureDomResult, type MeasureResult, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, Measurer, Paragraph, type ParagraphContent, Parser, type Plugin, type Sizeable, Text, type TextAlign, type TextContent, type TextDecoration, type TextDrawStyle, type TextInlineStyle, type TextLineStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, highlight, isNone, listStyle, measureText, parseColor, render, renderText, setupView, uploadColor, uploadColors };