modern-text 0.5.13 → 0.6.0

package/dist/index.cjs

@@ -456,6 +456,9 @@ function filterEmpty(val) {
   }
   return res;
 }
+function needsFetch(source) {
+  return source.startsWith("http://") || source.startsWith("https://") || source.startsWith("blob://");
+}
 
 var __defProp$3 = Object.defineProperty;
 var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -526,9 +529,6 @@ function definePlugin(options) {
 }
 
 class Measurer {
-  constructor(_text) {
-    this._text = _text;
-  }
   _styleToDomStyle(style) {
     const _style = { ...style };
     for (const key in style) {
@@ -560,8 +560,7 @@ class Measurer {
    *   </ul>
    * </section>
    */
-  createDom() {
-    const { paragraphs, computedStyle } = this._text;
+  createDom(paragraphs, rootStyle) {
     const documentFragment = document.createDocumentFragment();
     const dom = document.createElement("section");
     Object.assign(dom.style, {
@@ -569,7 +568,7 @@ class Measurer {
       height: "max-content",
       whiteSpace: "pre-wrap",
       wordBreak: "break-all",
-      ...this._styleToDomStyle(computedStyle),
+      ...this._styleToDomStyle(rootStyle),
       position: "fixed",
       visibility: "hidden"
     });
@@ -664,8 +663,7 @@ class Measurer {
       characters
     };
   }
-  measureDom(dom) {
-    const { paragraphs } = this._text;
+  measureDom(paragraphs, dom) {
     const rect = dom.getBoundingClientRect();
     const measured = this._measureDom(dom);
     measured.paragraphs.forEach((p) => {
@@ -717,12 +715,12 @@ class Measurer {
       boundingBox: new modernPath2d.BoundingBox(0, 0, rect.width, rect.height)
     };
   }
-  measure(dom) {
+  measure(paragraphs, rootStyle, dom) {
     let destory;
     if (!dom) {
-      ({ dom, destory } = this.createDom());
+      ({ dom, destory } = this.createDom(paragraphs, rootStyle));
     }
-    const result = this.measureDom(dom);
+    const result = this.measureDom(paragraphs, dom);
     destory?.();
     return result;
   }
@@ -825,33 +823,74 @@ class EventEmitter {
 function highlight() {
   const paths = [];
   const clipRects = [];
-  const svgStringToSvgPaths = /* @__PURE__ */ new Map();
-  async function getPaths(svg) {
-    let result = svgStringToSvgPaths.get(svg);
-    if (!result) {
-      if (svg.startsWith("http")) {
-        svg = await fetch(svg).then((rep) => rep.text());
+  const loaded = /* @__PURE__ */ new Map();
+  const parsed = /* @__PURE__ */ new Map();
+  async function loadSvg(svg) {
+    if (!loaded.has(svg)) {
+      loaded.set(svg, svg);
+      try {
+        loaded.set(svg, await fetch(svg).then((rep) => rep.text()));
+      } catch (err) {
+        console.warn(err);
+        loaded.delete(svg);
       }
-      const dom = modernPath2d.parseSvgToDom(svg);
+    }
+  }
+  function getPaths(svg) {
+    let result = parsed.get(svg);
+    if (!result) {
+      const dom = modernPath2d.parseSvgToDom(
+        needsFetch(svg) ? loaded.get(svg) ?? svg : svg
+      );
       const paths2 = modernPath2d.parseSvg(dom);
       result = { dom, paths: paths2 };
-      svgStringToSvgPaths.set(svg, result);
+      parsed.set(svg, result);
     }
     return result;
   }
   return definePlugin({
     name: "highlight",
     paths,
-    update: async (text) => {
+    load: async (text) => {
+      const promises = [];
+      text.forEachCharacter((character) => {
+        const { computedStyle: style } = character;
+        const { highlightImage, highlightReferImage } = style;
+        if (needsFetch(highlightImage)) {
+          promises.push(loadSvg(highlightImage));
+        }
+        if (needsFetch(highlightReferImage)) {
+          promises.push(loadSvg(highlightReferImage));
+        }
+      });
+      await Promise.all(promises);
+    },
+    update: (text) => {
       clipRects.length = 0;
       paths.length = 0;
       let groups = [];
       let group;
       let prevStyle;
       text.forEachCharacter((character) => {
-        const { isVertical, computedStyle: style, inlineBox } = character;
-        if (!isNone(style.highlightImage) && character.glyphBox) {
-          if ((!prevStyle || isEqualValue(prevStyle.highlightImage, style.highlightImage) && isEqualValue(prevStyle.highlightColormap, style.highlightColormap) && isEqualValue(prevStyle.highlightLine, style.highlightLine) && isEqualValue(prevStyle.highlightSize, style.highlightSize) && isEqualValue(prevStyle.highlightThickness, style.highlightThickness)) && group?.length && (isVertical ? group[0].inlineBox.left === inlineBox.left : group[0].inlineBox.top === inlineBox.top) && group[0].fontSize === style.fontSize) {
+        const {
+          computedStyle: style
+        } = character;
+        const {
+          highlightImage
+        } = style;
+        if (!isNone(highlightImage)) {
+          const {
+            inlineBox,
+            isVertical
+          } = character;
+          const {
+            fontSize,
+            highlightColormap,
+            highlightLine,
+            highlightSize,
+            highlightThickness
+          } = style;
+          if ((!prevStyle || isEqualValue(prevStyle.highlightImage, highlightImage) && isEqualValue(prevStyle.highlightColormap, highlightColormap) && isEqualValue(prevStyle.highlightLine, highlightLine) && isEqualValue(prevStyle.highlightSize, highlightSize) && isEqualValue(prevStyle.highlightThickness, highlightThickness)) && group?.length && (isVertical ? group[0].inlineBox.left === inlineBox.left : group[0].inlineBox.top === inlineBox.top) && group[0].fontSize === fontSize) {
             group.push(character);
           } else {
             group = [];
@@ -870,8 +909,12 @@ function highlight() {
       for (let i = 0; i < groups.length; i++) {
         const characters = groups[i];
         const char = characters[0];
-        const groupBox = modernPath2d.BoundingBox.from(...characters.map((c) => c.glyphBox));
-        const { computedStyle: style } = char;
+        const groupBox = modernPath2d.BoundingBox.from(
+          ...characters.filter((c) => c.glyphBox).map((c) => c.glyphBox)
+        );
+        const {
+          computedStyle: style
+        } = char;
         const {
           fontSize,
           writingMode,
@@ -885,7 +928,7 @@ function highlight() {
         const isVertical = writingMode.includes("vertical");
         const thickness = parseValueNumber(highlightThickness, { fontSize, total: groupBox.width }) / groupBox.width;
         const colormap = parseColormap(highlightColormap);
-        const { paths: svgPaths, dom: svgDom } = await getPaths(highlightImage);
+        const { paths: svgPaths, dom: svgDom } = getPaths(highlightImage);
         const aBox = modernPath2d.getPathsBoundingBox(svgPaths, true);
         const styleScale = fontSize / aBox.width * 2;
         const cBox = new modernPath2d.BoundingBox().copy(groupBox);
@@ -901,7 +944,7 @@ function highlight() {
           cBox.width = userWidth;
         }
         if (!isNone(highlightReferImage) && isNone(highlightLine)) {
-          const bBox = modernPath2d.getPathsBoundingBox((await getPaths(highlightReferImage)).paths, true);
+          const bBox = modernPath2d.getPathsBoundingBox(getPaths(highlightReferImage).paths, true);
           aBox.copy(bBox);
         } else {
           let line;
@@ -1052,8 +1095,16 @@ function listStyle() {
       const { paragraphs, isVertical, fontSize } = text;
       const padding = fontSize * 0.45;
       paragraphs.forEach((paragraph) => {
-        const { computedStyle: style } = paragraph;
-        const { listStyleImage, listStyleColormap, listStyleSize, listStyleType, color } = style;
+        const {
+          computedStyle: style
+        } = paragraph;
+        const {
+          color,
+          listStyleImage,
+          listStyleColormap,
+          listStyleSize,
+          listStyleType
+        } = style;
         const colormap = parseColormap(listStyleColormap);
         let size = listStyleSize;
         let image;
@@ -1082,18 +1133,10 @@ function listStyle() {
           const m = new modernPath2d.Matrix3();
           if (isVertical) {
             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, fBox.top - padding);
+            m.translate(-imageBox.left, -imageBox.top).rotate(Math.PI / 2).scale(reScale, reScale).translate(fontSize / 2 - imageBox.height * reScale / 2, 0).translate(box.left + (box.width - fontSize) / 2, fBox.top - padding);
           } else {
             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(fBox.left - padding, box.top + (box.height - fontSize) / 2);
+            m.translate(-imageBox.left, -imageBox.top).translate(-imageBox.width, 0).scale(reScale, reScale).translate(0, fontSize / 2 - imageBox.height * reScale / 2).translate(fBox.left - padding, box.top + (box.height - fontSize) / 2);
           }
           paths.push(...imagePaths.map((p) => {
             const path = p.clone();
@@ -1229,11 +1272,24 @@ function textDecoration() {
       let group;
       let prevStyle;
       text.forEachCharacter((character) => {
-        const { computedStyle: style, isVertical, inlineBox, underlinePosition, underlineThickness, strikeoutPosition, strikeoutSize } = character;
-        if (!isNone(style.textDecoration)) {
+        const {
+          computedStyle: style,
+          isVertical,
+          inlineBox,
+          underlinePosition,
+          underlineThickness,
+          strikeoutPosition,
+          strikeoutSize
+        } = character;
+        const {
+          color,
+          textDecoration: textDecoration2,
+          writingMode
+        } = style;
+        if (!isNone(textDecoration2)) {
           let flag = false;
-          if (prevStyle?.textDecoration === style.textDecoration && prevStyle?.writingMode === style.writingMode && prevStyle?.color === style.color && (isVertical ? group[0].inlineBox.left === inlineBox.left : group[0].inlineBox.top === inlineBox.top)) {
-            switch (style.textDecoration) {
+          if (prevStyle?.textDecoration === textDecoration2 && prevStyle?.writingMode === writingMode && prevStyle?.color === color && (isVertical ? group[0].inlineBox.left === inlineBox.left : group[0].inlineBox.top === inlineBox.top)) {
+            switch (textDecoration2) {
               case "underline":
                 if (group[0].underlinePosition === underlinePosition && group[0].underlineThickness === underlineThickness) {
                   flag = true;
@@ -1259,8 +1315,18 @@ function textDecoration() {
         }
       });
       groups.forEach((group2) => {
-        const { computedStyle: style, isVertical, underlinePosition, underlineThickness, strikeoutPosition, strikeoutSize } = group2[0];
-        const { textDecoration: textDecoration2, color } = style;
+        const {
+          computedStyle: style,
+          isVertical,
+          underlinePosition,
+          underlineThickness,
+          strikeoutPosition,
+          strikeoutSize
+        } = group2[0];
+        const {
+          color,
+          textDecoration: textDecoration2
+        } = style;
         const { left, top, width, height } = modernPath2d.BoundingBox.from(...group2.map((c) => c.inlineBox));
         let position = isVertical ? left + width : top;
         const direction = isVertical ? -1 : 1;
@@ -1403,7 +1469,7 @@ class Text extends EventEmitter {
     __publicField(this, "glyphBox", new modernPath2d.BoundingBox());
     __publicField(this, "pathBox", new modernPath2d.BoundingBox());
     __publicField(this, "boundingBox", new modernPath2d.BoundingBox());
-    __publicField(this, "measurer", new Measurer(this));
+    __publicField(this, "measurer", new Measurer());
     __publicField(this, "plugins", /* @__PURE__ */ new Map());
     __publicField(this, "fonts");
     this.debug = options.debug ?? false;
@@ -1437,6 +1503,9 @@ class Text extends EventEmitter {
     });
     return this;
   }
+  async load() {
+    await Promise.all(Array.from(this.plugins.values()).map((p) => p.load?.(this)));
+  }
   updateParagraphs() {
     this.computedStyle = { ...defaultTextStyles, ...this.style };
     let { content, computedStyle: style } = this;
@@ -1488,7 +1557,7 @@ class Text extends EventEmitter {
     this.paragraphs = paragraphs;
     return this;
   }
-  async measure(dom = this.measureDom) {
+  measure(dom = this.measureDom) {
     const old = {
       paragraphs: this.paragraphs,
       lineBox: this.lineBox,
@@ -1498,18 +1567,16 @@ class Text extends EventEmitter {
       boundingBox: this.boundingBox
     };
     this.updateParagraphs();
-    const result = this.measurer.measure(dom);
+    const result = this.measurer.measure(this.paragraphs, this.computedStyle, dom);
     this.paragraphs = result.paragraphs;
     this.lineBox = result.boundingBox;
     this.characters.forEach((c) => {
       c.update(this.fonts);
     });
     this.rawGlyphBox = this.getGlyphBox();
-    const plugins = Array.from(this.plugins.values());
-    plugins.sort((a, b) => (a.updateOrder ?? 0) - (b.updateOrder ?? 0));
-    for (let i = 0; i < plugins.length; i++) {
-      await plugins[i].update?.(this);
-    }
+    Array.from(this.plugins.values()).sort((a, b) => (a.updateOrder ?? 0) - (b.updateOrder ?? 0)).forEach((plugin) => {
+      plugin.update?.(this);
+    });
     this.glyphBox = this.getGlyphBox();
     this.updatePathBox().updateBoundingBox();
     for (const key in old) {
@@ -1565,30 +1632,28 @@ class Text extends EventEmitter {
     this.needsUpdate = true;
     return this;
   }
-  async update() {
-    const result = await this.measure();
+  update() {
+    const result = this.measure();
     for (const key in result) {
       this[key] = result[key];
     }
     this.emit("update", { text: this });
+    return this;
   }
-  async render(options) {
+  render(options) {
     const { view, pixelRatio = 2 } = options;
     const ctx = view.getContext("2d");
     if (!ctx) {
       return;
     }
     if (this.needsUpdate) {
-      await this.update();
+      this.update();
     }
     setupView(ctx, pixelRatio, this.boundingBox);
     uploadColors(ctx, this);
-    const plugins = Array.from(this.plugins.values());
-    plugins.sort((a, b) => (a.renderOrder ?? 0) - (b.renderOrder ?? 0));
-    for (let i = 0; i < plugins.length; i++) {
-      const plugin = plugins[i];
+    Array.from(this.plugins.values()).sort((a, b) => (a.renderOrder ?? 0) - (b.renderOrder ?? 0)).forEach((plugin) => {
       if (plugin.render) {
-        await plugin.render?.(ctx, this);
+        plugin.render?.(ctx, this);
       } else if (plugin.paths) {
         const style = this.computedStyle;
         plugin.paths.forEach((path) => {
@@ -1599,17 +1664,21 @@ class Text extends EventEmitter {
           });
         });
       }
-    }
+    });
     this.emit("render", { text: this, view, pixelRatio });
   }
 }
 
-function measureText(options) {
-  return new Text(options).measure();
+async function measureText(options) {
+  const text = new Text(options);
+  await text.load();
+  return text.measure();
 }
 
-function renderText(options) {
-  return new Text(options).render(options);
+async function renderText(options) {
+  const text = new Text(options);
+  await text.load();
+  text.render(options);
 }
 
 exports.Character = Character;
@@ -1629,6 +1698,7 @@ exports.isEqualValue = isEqualValue;
 exports.isNone = isNone;
 exports.listStyle = listStyle;
 exports.measureText = measureText;
+exports.needsFetch = needsFetch;
 exports.parseColor = parseColor;
 exports.parseColormap = parseColormap;
 exports.parseValueNumber = parseValueNumber;

package/dist/index.d.cts

@@ -121,8 +121,6 @@ interface MeasureDomResult {
     boundingBox: BoundingBox;
 }
 declare class Measurer {
-    protected _text: Text;
-    constructor(_text: Text);
     protected _styleToDomStyle(style: Partial<TextStyle>): Record<string, any>;
     /**
      * <section style="...">
@@ -134,7 +132,7 @@ declare class Measurer {
      *   </ul>
      * </section>
      */
-    createDom(): {
+    createDom(paragraphs: Paragraph[], rootStyle: TextStyle): {
         dom: HTMLElement;
         destory: () => void;
     };
@@ -143,8 +141,8 @@ declare class Measurer {
         fragments: MeasuredFragment[];
         characters: MeasuredCharacter[];
     };
-    measureDom(dom: HTMLElement): MeasureDomResult;
-    measure(dom?: HTMLElement): MeasureDomResult;
+    measureDom(paragraphs: Paragraph[], dom: HTMLElement): MeasureDomResult;
+    measure(paragraphs: Paragraph[], rootStyle: TextStyle, dom?: HTMLElement): MeasureDomResult;
 }
 
 interface TextRenderOptions {
@@ -201,14 +199,15 @@ declare class Text extends EventEmitter<TextEventMap> {
         fragmentIndex: number;
         characterIndex: number;
     }) => void): this;
+    load(): Promise<void>;
     updateParagraphs(): this;
-    measure(dom?: HTMLElement | undefined): Promise<MeasureResult>;
+    measure(dom?: HTMLElement | undefined): MeasureResult;
     getGlyphBox(): BoundingBox;
     updatePathBox(): this;
     updateBoundingBox(): this;
     requestUpdate(): this;
-    update(): Promise<void>;
-    render(options: TextRenderOptions): Promise<void>;
+    update(): this;
+    render(options: TextRenderOptions): void;
 }
 
 type Sizeable = `${number}%` | `${number}rem` | number;
@@ -286,15 +285,15 @@ interface ParagraphContent extends Partial<TextStyle> {
     fragments: FragmentContent[];
 }
 type TextContent = string | FragmentContent | ParagraphContent | (string | FragmentContent | ParagraphContent | (string | FragmentContent)[])[];
-type PromiseLike<T> = T | Promise<T>;
 interface TextPlugin {
     name: string;
     paths?: Path2D[];
     getBoundingBox?: (text: Text) => BoundingBox | undefined;
+    update?: (text: Text) => void;
     updateOrder?: number;
-    update?: (text: Text) => PromiseLike<void>;
+    render?: (ctx: CanvasRenderingContext2D, text: Text) => void;
     renderOrder?: number;
-    render?: (ctx: CanvasRenderingContext2D, text: Text) => PromiseLike<void>;
+    load?: (text: Text) => Promise<void>;
 }
 interface TextOptions {
     debug?: boolean;
@@ -334,6 +333,8 @@ declare function definePlugin(options: TextPlugin): TextPlugin;
 
 declare function measureText(options: TextOptions): Promise<MeasureResult>;
 
+declare function renderText(options: TextOptions & TextRenderOptions): Promise<void>;
+
 declare function highlight(): TextPlugin;
 
 declare function listStyle(): TextPlugin;
@@ -343,8 +344,6 @@ declare function getTransform2D(text: Text, style: Partial<TextStyle>): Matrix3;
 
 declare function textDecoration(): TextPlugin;
 
-declare function renderText(options: TextOptions & TextRenderOptions): Promise<void>;
-
 interface ValueContext {
     total: number;
     fontSize: number;
@@ -356,5 +355,6 @@ declare function isEqualObject(obj1: Record<string, any>, obj2: Record<string, a
 declare function isEqualValue(val1: any, val2: any): boolean;
 declare function hexToRgb(hex: string): string | null;
 declare function filterEmpty(val: Record<string, any> | undefined): Record<string, any> | undefined;
+declare function needsFetch(source: string): boolean;
 
-export { Character, type DrawShapePathsOptions, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type HighlightColormap, type HighlightImage, type HighlightLine, type HighlightReferImage, type HighlightSize, type HighlightThickness, type LinearGradient, type ListStyleColormap, type ListStyleImage, type ListStylePosition, type ListStyleSize, type ListStyleType, type MeasureDomResult, type MeasureResult, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, Measurer, Paragraph, type ParagraphContent, type Sizeable, Text, type TextAlign, type TextContent, type TextDecorationLine, type TextDrawStyle, type TextEventMap, type TextInlineStyle, type TextLineStyle, type TextOptions, type TextOrientation, type TextPlugin, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, hexToRgb, highlight, isEqualObject, isEqualValue, isNone, listStyle, measureText, parseColor, parseColormap, parseValueNumber, render, renderText, setupView, textDecoration, uploadColor, uploadColors };
+export { Character, type DrawShapePathsOptions, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type HighlightColormap, type HighlightImage, type HighlightLine, type HighlightReferImage, type HighlightSize, type HighlightThickness, type LinearGradient, type ListStyleColormap, type ListStyleImage, type ListStylePosition, type ListStyleSize, type ListStyleType, type MeasureDomResult, type MeasureResult, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, Measurer, Paragraph, type ParagraphContent, type Sizeable, Text, type TextAlign, type TextContent, type TextDecorationLine, type TextDrawStyle, type TextEventMap, type TextInlineStyle, type TextLineStyle, type TextOptions, type TextOrientation, type TextPlugin, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, hexToRgb, highlight, isEqualObject, isEqualValue, isNone, listStyle, measureText, needsFetch, parseColor, parseColormap, parseValueNumber, render, renderText, setupView, textDecoration, uploadColor, uploadColors };

package/dist/index.d.mts

@@ -121,8 +121,6 @@ interface MeasureDomResult {
     boundingBox: BoundingBox;
 }
 declare class Measurer {
-    protected _text: Text;
-    constructor(_text: Text);
     protected _styleToDomStyle(style: Partial<TextStyle>): Record<string, any>;
     /**
      * <section style="...">
@@ -134,7 +132,7 @@ declare class Measurer {
      *   </ul>
      * </section>
      */
-    createDom(): {
+    createDom(paragraphs: Paragraph[], rootStyle: TextStyle): {
         dom: HTMLElement;
         destory: () => void;
     };
@@ -143,8 +141,8 @@ declare class Measurer {
         fragments: MeasuredFragment[];
         characters: MeasuredCharacter[];
     };
-    measureDom(dom: HTMLElement): MeasureDomResult;
-    measure(dom?: HTMLElement): MeasureDomResult;
+    measureDom(paragraphs: Paragraph[], dom: HTMLElement): MeasureDomResult;
+    measure(paragraphs: Paragraph[], rootStyle: TextStyle, dom?: HTMLElement): MeasureDomResult;
 }
 
 interface TextRenderOptions {
@@ -201,14 +199,15 @@ declare class Text extends EventEmitter<TextEventMap> {
         fragmentIndex: number;
         characterIndex: number;
     }) => void): this;
+    load(): Promise<void>;
     updateParagraphs(): this;
-    measure(dom?: HTMLElement | undefined): Promise<MeasureResult>;
+    measure(dom?: HTMLElement | undefined): MeasureResult;
     getGlyphBox(): BoundingBox;
     updatePathBox(): this;
     updateBoundingBox(): this;
     requestUpdate(): this;
-    update(): Promise<void>;
-    render(options: TextRenderOptions): Promise<void>;
+    update(): this;
+    render(options: TextRenderOptions): void;
 }
 
 type Sizeable = `${number}%` | `${number}rem` | number;
@@ -286,15 +285,15 @@ interface ParagraphContent extends Partial<TextStyle> {
     fragments: FragmentContent[];
 }
 type TextContent = string | FragmentContent | ParagraphContent | (string | FragmentContent | ParagraphContent | (string | FragmentContent)[])[];
-type PromiseLike<T> = T | Promise<T>;
 interface TextPlugin {
     name: string;
     paths?: Path2D[];
     getBoundingBox?: (text: Text) => BoundingBox | undefined;
+    update?: (text: Text) => void;
     updateOrder?: number;
-    update?: (text: Text) => PromiseLike<void>;
+    render?: (ctx: CanvasRenderingContext2D, text: Text) => void;
     renderOrder?: number;
-    render?: (ctx: CanvasRenderingContext2D, text: Text) => PromiseLike<void>;
+    load?: (text: Text) => Promise<void>;
 }
 interface TextOptions {
     debug?: boolean;
@@ -334,6 +333,8 @@ declare function definePlugin(options: TextPlugin): TextPlugin;
 
 declare function measureText(options: TextOptions): Promise<MeasureResult>;
 
+declare function renderText(options: TextOptions & TextRenderOptions): Promise<void>;
+
 declare function highlight(): TextPlugin;
 
 declare function listStyle(): TextPlugin;
@@ -343,8 +344,6 @@ declare function getTransform2D(text: Text, style: Partial<TextStyle>): Matrix3;
 
 declare function textDecoration(): TextPlugin;
 
-declare function renderText(options: TextOptions & TextRenderOptions): Promise<void>;
-
 interface ValueContext {
     total: number;
     fontSize: number;
@@ -356,5 +355,6 @@ declare function isEqualObject(obj1: Record<string, any>, obj2: Record<string, a
 declare function isEqualValue(val1: any, val2: any): boolean;
 declare function hexToRgb(hex: string): string | null;
 declare function filterEmpty(val: Record<string, any> | undefined): Record<string, any> | undefined;
+declare function needsFetch(source: string): boolean;
 
-export { Character, type DrawShapePathsOptions, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type HighlightColormap, type HighlightImage, type HighlightLine, type HighlightReferImage, type HighlightSize, type HighlightThickness, type LinearGradient, type ListStyleColormap, type ListStyleImage, type ListStylePosition, type ListStyleSize, type ListStyleType, type MeasureDomResult, type MeasureResult, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, Measurer, Paragraph, type ParagraphContent, type Sizeable, Text, type TextAlign, type TextContent, type TextDecorationLine, type TextDrawStyle, type TextEventMap, type TextInlineStyle, type TextLineStyle, type TextOptions, type TextOrientation, type TextPlugin, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, hexToRgb, highlight, isEqualObject, isEqualValue, isNone, listStyle, measureText, parseColor, parseColormap, parseValueNumber, render, renderText, setupView, textDecoration, uploadColor, uploadColors };
+export { Character, type DrawShapePathsOptions, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type HighlightColormap, type HighlightImage, type HighlightLine, type HighlightReferImage, type HighlightSize, type HighlightThickness, type LinearGradient, type ListStyleColormap, type ListStyleImage, type ListStylePosition, type ListStyleSize, type ListStyleType, type MeasureDomResult, type MeasureResult, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, Measurer, Paragraph, type ParagraphContent, type Sizeable, Text, type TextAlign, type TextContent, type TextDecorationLine, type TextDrawStyle, type TextEventMap, type TextInlineStyle, type TextLineStyle, type TextOptions, type TextOrientation, type TextPlugin, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, hexToRgb, highlight, isEqualObject, isEqualValue, isNone, listStyle, measureText, needsFetch, parseColor, parseColormap, parseValueNumber, render, renderText, setupView, textDecoration, uploadColor, uploadColors };

package/dist/index.d.ts

@@ -121,8 +121,6 @@ interface MeasureDomResult {
     boundingBox: BoundingBox;
 }
 declare class Measurer {
-    protected _text: Text;
-    constructor(_text: Text);
     protected _styleToDomStyle(style: Partial<TextStyle>): Record<string, any>;
     /**
      * <section style="...">
@@ -134,7 +132,7 @@ declare class Measurer {
      *   </ul>
      * </section>
      */
-    createDom(): {
+    createDom(paragraphs: Paragraph[], rootStyle: TextStyle): {
         dom: HTMLElement;
         destory: () => void;
     };
@@ -143,8 +141,8 @@ declare class Measurer {
         fragments: MeasuredFragment[];
         characters: MeasuredCharacter[];
     };
-    measureDom(dom: HTMLElement): MeasureDomResult;
-    measure(dom?: HTMLElement): MeasureDomResult;
+    measureDom(paragraphs: Paragraph[], dom: HTMLElement): MeasureDomResult;
+    measure(paragraphs: Paragraph[], rootStyle: TextStyle, dom?: HTMLElement): MeasureDomResult;
 }
 
 interface TextRenderOptions {
@@ -201,14 +199,15 @@ declare class Text extends EventEmitter<TextEventMap> {
         fragmentIndex: number;
         characterIndex: number;
     }) => void): this;
+    load(): Promise<void>;
     updateParagraphs(): this;
-    measure(dom?: HTMLElement | undefined): Promise<MeasureResult>;
+    measure(dom?: HTMLElement | undefined): MeasureResult;
     getGlyphBox(): BoundingBox;
     updatePathBox(): this;
     updateBoundingBox(): this;
     requestUpdate(): this;
-    update(): Promise<void>;
-    render(options: TextRenderOptions): Promise<void>;
+    update(): this;
+    render(options: TextRenderOptions): void;
 }
 
 type Sizeable = `${number}%` | `${number}rem` | number;
@@ -286,15 +285,15 @@ interface ParagraphContent extends Partial<TextStyle> {
     fragments: FragmentContent[];
 }
 type TextContent = string | FragmentContent | ParagraphContent | (string | FragmentContent | ParagraphContent | (string | FragmentContent)[])[];
-type PromiseLike<T> = T | Promise<T>;
 interface TextPlugin {
     name: string;
     paths?: Path2D[];
     getBoundingBox?: (text: Text) => BoundingBox | undefined;
+    update?: (text: Text) => void;
     updateOrder?: number;
-    update?: (text: Text) => PromiseLike<void>;
+    render?: (ctx: CanvasRenderingContext2D, text: Text) => void;
     renderOrder?: number;
-    render?: (ctx: CanvasRenderingContext2D, text: Text) => PromiseLike<void>;
+    load?: (text: Text) => Promise<void>;
 }
 interface TextOptions {
     debug?: boolean;
@@ -334,6 +333,8 @@ declare function definePlugin(options: TextPlugin): TextPlugin;
 
 declare function measureText(options: TextOptions): Promise<MeasureResult>;
 
+declare function renderText(options: TextOptions & TextRenderOptions): Promise<void>;
+
 declare function highlight(): TextPlugin;
 
 declare function listStyle(): TextPlugin;
@@ -343,8 +344,6 @@ declare function getTransform2D(text: Text, style: Partial<TextStyle>): Matrix3;
 
 declare function textDecoration(): TextPlugin;
 
-declare function renderText(options: TextOptions & TextRenderOptions): Promise<void>;
-
 interface ValueContext {
     total: number;
     fontSize: number;
@@ -356,5 +355,6 @@ declare function isEqualObject(obj1: Record<string, any>, obj2: Record<string, a
 declare function isEqualValue(val1: any, val2: any): boolean;
 declare function hexToRgb(hex: string): string | null;
 declare function filterEmpty(val: Record<string, any> | undefined): Record<string, any> | undefined;
+declare function needsFetch(source: string): boolean;
 
-export { Character, type DrawShapePathsOptions, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type HighlightColormap, type HighlightImage, type HighlightLine, type HighlightReferImage, type HighlightSize, type HighlightThickness, type LinearGradient, type ListStyleColormap, type ListStyleImage, type ListStylePosition, type ListStyleSize, type ListStyleType, type MeasureDomResult, type MeasureResult, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, Measurer, Paragraph, type ParagraphContent, type Sizeable, Text, type TextAlign, type TextContent, type TextDecorationLine, type TextDrawStyle, type TextEventMap, type TextInlineStyle, type TextLineStyle, type TextOptions, type TextOrientation, type TextPlugin, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, hexToRgb, highlight, isEqualObject, isEqualValue, isNone, listStyle, measureText, parseColor, parseColormap, parseValueNumber, render, renderText, setupView, textDecoration, uploadColor, uploadColors };
+export { Character, type DrawShapePathsOptions, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type HighlightColormap, type HighlightImage, type HighlightLine, type HighlightReferImage, type HighlightSize, type HighlightThickness, type LinearGradient, type ListStyleColormap, type ListStyleImage, type ListStylePosition, type ListStyleSize, type ListStyleType, type MeasureDomResult, type MeasureResult, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, Measurer, Paragraph, type ParagraphContent, type Sizeable, Text, type TextAlign, type TextContent, type TextDecorationLine, type TextDrawStyle, type TextEventMap, type TextInlineStyle, type TextLineStyle, type TextOptions, type TextOrientation, type TextPlugin, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, hexToRgb, highlight, isEqualObject, isEqualValue, isNone, listStyle, measureText, needsFetch, parseColor, parseColormap, parseValueNumber, render, renderText, setupView, textDecoration, uploadColor, uploadColors };