modern-text 0.5.13 → 0.6.1

package/dist/index.mjs

@@ -454,6 +454,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;
@@ -524,9 +527,6 @@ function definePlugin(options) {
 }
 
 class Measurer {
-  constructor(_text) {
-    this._text = _text;
-  }
   _styleToDomStyle(style) {
     const _style = { ...style };
     for (const key in style) {
@@ -558,8 +558,7 @@ class Measurer {
    *   </ul>
    * </section>
    */
-  createDom() {
-    const { paragraphs, computedStyle } = this._text;
+  createParagraphDom(paragraphs, rootStyle) {
     const documentFragment = document.createDocumentFragment();
     const dom = document.createElement("section");
     Object.assign(dom.style, {
@@ -567,7 +566,7 @@ class Measurer {
       height: "max-content",
       whiteSpace: "pre-wrap",
       wordBreak: "break-all",
-      ...this._styleToDomStyle(computedStyle),
+      ...this._styleToDomStyle(rootStyle),
       position: "fixed",
       visibility: "hidden"
     });
@@ -596,12 +595,41 @@ class Measurer {
       destory: () => dom.parentNode?.removeChild(dom)
     };
   }
-  _measureDom(dom) {
+  measureDomText(text) {
+    const range = document.createRange();
+    range.selectNodeContents(text);
+    const data = text.data ?? "";
+    let offset = 0;
+    return Array.from(data).map((char) => {
+      const start = offset += data.substring(offset).indexOf(char);
+      const end = start + char.length;
+      offset += char.length;
+      range.setStart(text, Math.max(start, 0));
+      range.setEnd(text, end);
+      const rects = range.getClientRects?.() ?? [range.getBoundingClientRect()];
+      let rect = rects[rects.length - 1];
+      if (rects.length > 1 && rect.width < 2) {
+        rect = rects[rects.length - 2];
+      }
+      const content = range.toString();
+      if (content !== "" && rect && rect.width + rect.height !== 0) {
+        return {
+          content,
+          top: rect.top,
+          left: rect.left,
+          height: rect.height,
+          width: rect.width
+        };
+      }
+      return void 0;
+    }).filter(Boolean);
+  }
+  measureDom(dom) {
     const paragraphs = [];
     const fragments = [];
     const characters = [];
-    dom.querySelectorAll("li").forEach((li, paragraphIndex) => {
-      const pBox = li.getBoundingClientRect();
+    dom.querySelectorAll("li").forEach((pDom, paragraphIndex) => {
+      const pBox = pDom.getBoundingClientRect();
       paragraphs.push({
         paragraphIndex,
         left: pBox.left,
@@ -609,8 +637,8 @@ class Measurer {
         width: pBox.width,
         height: pBox.height
       });
-      li.querySelectorAll("span").forEach((span, fragmentIndex) => {
-        const fBox = span.getBoundingClientRect();
+      pDom.querySelectorAll(":scope > *").forEach((fDom, fragmentIndex) => {
+        const fBox = fDom.getBoundingClientRect();
         fragments.push({
           paragraphIndex,
           fragmentIndex,
@@ -619,37 +647,32 @@ class Measurer {
           width: fBox.width,
           height: fBox.height
         });
-        const text = span.firstChild;
-        if (text instanceof window.Text) {
-          const range = document.createRange();
-          range.selectNodeContents(text);
-          const data = text.data ?? "";
-          let offset = 0;
-          Array.from(data).forEach((char, index) => {
-            const start = offset += data.substring(offset).indexOf(char);
-            const end = start + char.length;
-            offset += char.length;
-            range.setStart(text, Math.max(start, 0));
-            range.setEnd(text, end);
-            const rects = range.getClientRects?.() ?? [range.getBoundingClientRect()];
-            let rect = rects[rects.length - 1];
-            if (rects.length > 1 && rect.width < 2) {
-              rect = rects[rects.length - 2];
-            }
-            const content = range.toString();
-            if (content !== "" && rect && rect.width + rect.height !== 0) {
-              characters.push({
-                content,
-                newParagraphIndex: -1,
-                paragraphIndex,
-                fragmentIndex,
-                characterIndex: index,
-                top: rect.top,
-                left: rect.left,
-                height: rect.height,
-                width: rect.width,
-                textWidth: -1,
-                textHeight: -1
+        let characterIndex = 0;
+        if (fDom.firstChild instanceof window.Text) {
+          this.measureDomText(fDom.firstChild).forEach((char) => {
+            characters.push({
+              ...char,
+              newParagraphIndex: -1,
+              paragraphIndex,
+              fragmentIndex,
+              characterIndex: characterIndex++,
+              textWidth: -1,
+              textHeight: -1
+            });
+          });
+        } else {
+          fDom.querySelectorAll(":scope > *").forEach((cDom) => {
+            if (cDom.firstChild instanceof window.Text) {
+              this.measureDomText(cDom.firstChild).forEach((char) => {
+                characters.push({
+                  ...char,
+                  newParagraphIndex: -1,
+                  paragraphIndex,
+                  fragmentIndex,
+                  characterIndex: characterIndex++,
+                  textWidth: -1,
+                  textHeight: -1
+                });
               });
             }
           });
@@ -662,10 +685,9 @@ class Measurer {
       characters
     };
   }
-  measureDom(dom) {
-    const { paragraphs } = this._text;
+  measureParagraphDom(paragraphs, dom) {
     const rect = dom.getBoundingClientRect();
-    const measured = this._measureDom(dom);
+    const measured = this.measureDom(dom);
     measured.paragraphs.forEach((p) => {
       const _p = paragraphs[p.paragraphIndex];
       _p.lineBox.left = p.left - rect.left;
@@ -715,12 +737,12 @@ class Measurer {
       boundingBox: new BoundingBox(0, 0, rect.width, rect.height)
     };
   }
-  measure(dom) {
+  measure(paragraphs, rootStyle, dom) {
     let destory;
     if (!dom) {
-      ({ dom, destory } = this.createDom());
+      ({ dom, destory } = this.createParagraphDom(paragraphs, rootStyle));
     }
-    const result = this.measureDom(dom);
+    const result = this.measureParagraphDom(paragraphs, dom);
     destory?.();
     return result;
   }
@@ -823,33 +845,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 = parseSvgToDom(svg);
+    }
+  }
+  function getPaths(svg) {
+    let result = parsed.get(svg);
+    if (!result) {
+      const dom = parseSvgToDom(
+        needsFetch(svg) ? loaded.get(svg) ?? svg : svg
+      );
       const paths2 = 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 = [];
@@ -868,8 +931,12 @@ function highlight() {
       for (let i = 0; i < groups.length; i++) {
         const characters = groups[i];
         const char = characters[0];
-        const groupBox = BoundingBox.from(...characters.map((c) => c.glyphBox));
-        const { computedStyle: style } = char;
+        const groupBox = BoundingBox.from(
+          ...characters.filter((c) => c.glyphBox).map((c) => c.glyphBox)
+        );
+        const {
+          computedStyle: style
+        } = char;
         const {
           fontSize,
           writingMode,
@@ -883,7 +950,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 = getPathsBoundingBox(svgPaths, true);
         const styleScale = fontSize / aBox.width * 2;
         const cBox = new BoundingBox().copy(groupBox);
@@ -899,7 +966,7 @@ function highlight() {
           cBox.width = userWidth;
         }
         if (!isNone(highlightReferImage) && isNone(highlightLine)) {
-          const bBox = getPathsBoundingBox((await getPaths(highlightReferImage)).paths, true);
+          const bBox = getPathsBoundingBox(getPaths(highlightReferImage).paths, true);
           aBox.copy(bBox);
         } else {
           let line;
@@ -1050,8 +1117,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;
@@ -1080,18 +1155,10 @@ function listStyle() {
           const m = new 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();
@@ -1227,11 +1294,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;
@@ -1257,8 +1337,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 } = BoundingBox.from(...group2.map((c) => c.inlineBox));
         let position = isVertical ? left + width : top;
         const direction = isVertical ? -1 : 1;
@@ -1401,7 +1491,7 @@ class Text extends EventEmitter {
     __publicField(this, "glyphBox", new BoundingBox());
     __publicField(this, "pathBox", new BoundingBox());
     __publicField(this, "boundingBox", new 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;
@@ -1435,6 +1525,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;
@@ -1486,7 +1579,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,
@@ -1496,18 +1589,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) {
@@ -1563,30 +1654,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) => {
@@ -1597,17 +1686,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);
 }
 
-export { Character, Fragment, Measurer, Paragraph, Text, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, hexToRgb, highlight, isEqualObject, isEqualValue, isNone, listStyle, measureText, parseColor, parseColormap, parseValueNumber, render, renderText, setupView, textDecoration, uploadColor, uploadColors };
+export { Character, Fragment, Measurer, Paragraph, Text, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, hexToRgb, highlight, isEqualObject, isEqualValue, isNone, listStyle, measureText, needsFetch, parseColor, parseColormap, parseValueNumber, render, renderText, setupView, textDecoration, uploadColor, uploadColors };

package/package.json

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