modern-text 0.3.6 → 0.3.8

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { BoundingBox, Path2D, getPathsBoundingBox, Matrix3, parseSvg, Vector2 } from 'modern-path2d';
 export * from 'modern-path2d';
-import { fonts, Woff, Ttf } from 'modern-font';
+import { Ttf, Woff, fonts } from 'modern-font';
 export * from 'modern-font';
 
 function parseColor(ctx, source, box) {
@@ -174,12 +174,21 @@ class Character {
   get fontHeight() {
     return this.fontSize * this.computedStyle.lineHeight;
   }
-  _getFontSfnt(font) {
-    const _font = font ?? fonts.get(this.computedStyle.fontFamily)?.font;
-    if (_font instanceof Woff || _font instanceof Ttf) {
-      return _font.sfnt;
+  _getFontSfnt(fonts$1) {
+    const fontFamily = this.computedStyle.fontFamily;
+    let sfnt;
+    if (fontFamily) {
+      if (!sfnt) {
+        const font = fonts$1?.[fontFamily];
+        if (font instanceof Ttf || font instanceof Woff) {
+          sfnt = font.sfnt;
+        }
+      }
+      if (!sfnt) {
+        sfnt = fonts.get(fontFamily)?.getSfnt();
+      }
     }
-    return void 0;
+    return sfnt ?? fonts.fallbackFont?.getSfnt();
   }
   updateGlyph(sfnt = this._getFontSfnt()) {
     if (!sfnt) {
@@ -206,8 +215,8 @@ class Character {
     this.centerDiviation = advanceHeight / 2 - baseline;
     return this;
   }
-  update(font) {
-    const sfnt = this._getFontSfnt(font);
+  update(fonts) {
+    const sfnt = this._getFontSfnt(fonts);
     if (!sfnt) {
       return this;
     }
@@ -447,6 +456,10 @@ class Paragraph {
   }
 }
 
+function definePlugin(options) {
+  return options;
+}
+
 class Measurer {
   constructor(_text) {
     this._text = _text;
@@ -642,65 +655,6 @@ class Measurer {
   }
 }
 
-class Parser {
-  constructor(_text) {
-    this._text = _text;
-  }
-  parse() {
-    let { content, computedStyle: style } = this._text;
-    const paragraphs = [];
-    if (typeof content === "string") {
-      const paragraph = new Paragraph({}, style);
-      paragraph.addFragment(content);
-      paragraphs.push(paragraph);
-    } else {
-      content = Array.isArray(content) ? content : [content];
-      for (const p of content) {
-        if (typeof p === "string") {
-          const paragraph = new Paragraph({}, style);
-          paragraph.addFragment(p);
-          paragraphs.push(paragraph);
-        } else if (Array.isArray(p)) {
-          const paragraph = new Paragraph({}, style);
-          p.forEach((f) => {
-            if (typeof f === "string") {
-              paragraph.addFragment(f);
-            } else {
-              const { content: content2, ...fStyle } = f;
-              if (content2 !== void 0) {
-                paragraph.addFragment(content2, fStyle);
-              }
-            }
-          });
-          paragraphs.push(paragraph);
-        } else if ("fragments" in p) {
-          const { fragments, ...pStyle } = p;
-          const paragraph = new Paragraph(pStyle, style);
-          fragments.forEach((f) => {
-            const { content: content2, ...fStyle } = f;
-            if (content2 !== void 0) {
-              paragraph.addFragment(content2, fStyle);
-            }
-          });
-          paragraphs.push(paragraph);
-        } else if ("content" in p) {
-          const { content: pData, ...pStyle } = p;
-          if (pData !== void 0) {
-            const paragraph = new Paragraph(pStyle, style);
-            paragraph.addFragment(pData);
-            paragraphs.push(paragraph);
-          }
-        }
-      }
-    }
-    return paragraphs;
-  }
-}
-
-function definePlugin(options) {
-  return options;
-}
-
 const defaultReferImage = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiIgdmlld0JveD0iMCAwIDcyIDcyIiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMyLjQwMjkgMjhIMzUuMTU5NFYzMy4xNzcxQzM1Ljk4MjEgMzIuMzExNSAzNi45NzEgMzEuODczNyAzOC4wOTQ4IDMxLjg3MzdDMzkuNjY3NiAzMS44NzM3IDQwLjkxNjYgMzIuNDI5NSA0MS44MzkgMzMuNTQzN0w0MS44NDAzIDMzLjU0NTNDNDIuNjcxNyAzNC41NzA1IDQzLjA5MTUgMzUuODU1OSA0My4wOTE1IDM3LjM4NzdDNDMuMDkxNSAzOC45NzYxIDQyLjY3MjkgNDAuMzAyOCA0MS44MTgzIDQxLjMzMDRMNDEuODE3MSA0MS4zMzE4QzQwLjg3MzEgNDIuNDQ2MSAzOS41ODMyIDQzIDM3Ljk3MjEgNDNDMzYuNzQ3NyA0MyAzNS43NDg4IDQyLjY1OTkgMzQuOTk1OCA0MS45NjkzVjQyLjcyNDdIMzIuNDAyOVYyOFpNMzcuNTQyOCAzNC4wOTI0QzM2Ljg1NDkgMzQuMDkyNCAzNi4zMDE0IDM0LjM1NjEgMzUuODQ4NyAzNC45MDA0TDM1Ljg0NTIgMzQuOTA0NkMzNS4zMzU4IDM1LjQ4NTMgMzUuMDc3NiAzNi4yOTc2IDM1LjA3NzYgMzcuMzQ4NFYzNy41MDU3QzM1LjA3NzYgMzguNDY0IDM1LjI3NzIgMzkuMjQ0MyAzNS42OTQzIDM5LjgyNzlDMzYuMTQ0MSA0MC40NTg3IDM2Ljc3MjYgNDAuNzgxMyAzNy42MjQ1IDQwLjc4MTNDMzguNTg3NCA0MC43ODEzIDM5LjI3MDcgNDAuNDUyNyAzOS43MTUyIDM5LjgxMjdDNDAuMDcyOCAzOS4yNjg0IDQwLjI3MzcgMzguNDY3MyA0MC4yNzM3IDM3LjM4NzdDNDAuMjczNyAzNi4zMTA1IDQwLjA1MzMgMzUuNTMxMyAzOS42NzgzIDM1LjAwNzdDMzkuMjM3MSAzNC40MDcxIDM4LjUzNDIgMzQuMDkyNCAzNy41NDI4IDM0LjA5MjRaIiBmaWxsPSIjMjIyNTI5Ii8+PHBhdGggZD0iTTQ5Ljg2MTQgMzEuODczN0M0OC4xNTM1IDMxLjg3MzcgNDYuODAxNiAzMi40MjM5IDQ1LjgzNDggMzMuNTM5MkM0NC45MzcgMzQuNTQ3MiA0NC40OTY2IDM1Ljg1NiA0NC40OTY2IDM3LjQyN0M0NC40OTY2IDM5LjAzNjggNDQuOTM2NyA0MC4zNjU5IDQ1Ljg1NTkgNDEuMzk0M0M0Ni44MDMxIDQyLjQ3MDYgNDguMTM0OCA0MyA0OS44MjA1IDQzQzUxLjIyNiA0MyA1Mi4zODI2IDQyLjY1NjMgNTMuMjQ3OSA0MS45Njk3QzU0LjEzNTkgNDEuMjYxNCA1NC43MDYxIDQwLjE4ODcgNTQuOTU3MyAzOC43NzkxTDU1IDM4LjUzOTdINTIuMjQ4NEw1Mi4yMjU5IDM4LjcyMDFDNTIuMTM3OSAzOS40MjUxIDUxLjg5MjUgMzkuOTI3OCA1MS41MTA5IDQwLjI1NThDNTEuMTI5NSA0MC41ODM1IDUwLjU4MzEgNDAuNzYxNiA0OS44NDA5IDQwLjc2MTZDNDkuMDAwMSA0MC43NjE2IDQ4LjM5NDkgNDAuNDcxNSA0Ny45OTA3IDM5LjkyMzdMNDcuOTg3NCAzOS45MTk0QzQ3LjUzNTYgMzkuMzQwMSA0Ny4zMTQ0IDM4LjUwNjIgNDcuMzE0NCAzNy40MDc0QzQ3LjMxNDQgMzYuMzMyMiA0Ny41NTQ0IDM1LjUxNzcgNDguMDA1OCAzNC45NTY4TDQ4LjAwNzggMzQuOTU0M0M0OC40NTM3IDM0LjM4MjUgNDkuMDYxOCAzNC4xMTIxIDQ5Ljg2MTQgMzQuMTEyMUM1MC41MjMgMzQuMTEyMSA1MS4wNDUxIDM0LjI2MTUgNTEuNDI3MiAzNC41NDA3QzUxLjc4ODQgMzQuODE5NCA1Mi4wNTMgMzUuMjQ0NyA1Mi4xODgxIDM1Ljg1NzFMNTIuMjIzOSAzNi4wMTk0SDU0Ljk1NDhMNTQuOTE3IDM1Ljc4MzVDNTQuNzA2MyAzNC40NjYgNTQuMTUzNiAzMy40NzAxIDUzLjI2MzQgMzIuODAxOUw1My4yNjAyIDMyLjc5OTVDNTIuMzk1MSAzMi4xNzU1IDUxLjI2MjEgMzEuODczNyA0OS44NjE0IDMxLjg3MzdaIiBmaWxsPSIjMjIyNTI5Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNS43NTYxIDI4LjI3NTNIMjIuNzQ0TDE3IDQyLjcyNDdIMjAuMDE0MUwyMS4zNDI5IDM5LjIwNDlIMjcuMTU3MkwyOC40ODYgNDIuNzI0N0gzMS41MDAxTDI1Ljc1NjEgMjguMjc1M1pNMjIuMjEyNSAzNi45MDc2TDI0LjI1OTYgMzEuNDUzOUwyNi4yODg1IDM2LjkwNzZIMjIuMjEyNVoiIGZpbGw9IiMyMjI1MjkiLz48L3N2Zz4=";
 function parseCharsPerRepeat(size, fontSize, total) {
   if (size === "cover") {
@@ -1055,7 +1009,7 @@ const defaultTextStyles = {
   // font
   fontSize: 14,
   fontWeight: "normal",
-  fontFamily: "_fallback",
+  fontFamily: "",
   fontStyle: "normal",
   fontKerning: "normal",
   // text
@@ -1106,15 +1060,15 @@ class Text {
     __publicField(this, "glyphBox", new BoundingBox());
     __publicField(this, "pathBox", new BoundingBox());
     __publicField(this, "boundingBox", new BoundingBox());
-    __publicField(this, "parser", new Parser(this));
     __publicField(this, "measurer", new Measurer(this));
     __publicField(this, "plugins", /* @__PURE__ */ new Map());
-    __publicField(this, "font");
-    const { content = "", style = {}, measureDom, effects } = options;
+    __publicField(this, "fonts");
+    const { content = "", style = {}, measureDom, effects, fonts } = options;
     this.content = content;
     this.style = style;
     this.measureDom = measureDom;
     this.effects = effects;
+    this.fonts = fonts;
     this.use(render()).use(highlight()).use(listStyle());
   }
   get fontSize() {
@@ -1130,6 +1084,56 @@ class Text {
     this.plugins.set(plugin.name, plugin);
     return this;
   }
+  updateParagraphs() {
+    let { content, computedStyle: style } = this;
+    const paragraphs = [];
+    if (typeof content === "string") {
+      const paragraph = new Paragraph({}, style);
+      paragraph.addFragment(content);
+      paragraphs.push(paragraph);
+    } else {
+      content = Array.isArray(content) ? content : [content];
+      for (const p of content) {
+        if (typeof p === "string") {
+          const paragraph = new Paragraph({}, style);
+          paragraph.addFragment(p);
+          paragraphs.push(paragraph);
+        } else if (Array.isArray(p)) {
+          const paragraph = new Paragraph({}, style);
+          p.forEach((f) => {
+            if (typeof f === "string") {
+              paragraph.addFragment(f);
+            } else {
+              const { content: content2, ...fStyle } = f;
+              if (content2 !== void 0) {
+                paragraph.addFragment(content2, fStyle);
+              }
+            }
+          });
+          paragraphs.push(paragraph);
+        } else if ("fragments" in p) {
+          const { fragments, ...pStyle } = p;
+          const paragraph = new Paragraph(pStyle, style);
+          fragments.forEach((f) => {
+            const { content: content2, ...fStyle } = f;
+            if (content2 !== void 0) {
+              paragraph.addFragment(content2, fStyle);
+            }
+          });
+          paragraphs.push(paragraph);
+        } else if ("content" in p) {
+          const { content: pData, ...pStyle } = p;
+          if (pData !== void 0) {
+            const paragraph = new Paragraph(pStyle, style);
+            paragraph.addFragment(pData);
+            paragraphs.push(paragraph);
+          }
+        }
+      }
+    }
+    this.paragraphs = paragraphs;
+    return this;
+  }
   measure(dom = this.measureDom) {
     this.computedStyle = { ...defaultTextStyles, ...this.style };
     const old = {
@@ -1140,12 +1144,12 @@ class Text {
       pathBox: this.pathBox,
       boundingBox: this.boundingBox
     };
-    this.paragraphs = this.parser.parse();
+    this.updateParagraphs();
     const result = this.measurer.measure(dom);
     this.paragraphs = result.paragraphs;
     this.lineBox = result.boundingBox;
     this.characters.forEach((c) => {
-      c.update(this.font);
+      c.update(this.fonts);
     });
     this.rawGlyphBox = this.getGlyphBox();
     const plugins = [...this.plugins.values()];
@@ -1251,4 +1255,4 @@ function renderText(options) {
   return new Text(options).render(options);
 }
 
-export { Character, Fragment, Measurer, Paragraph, Parser, Text, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, highlight, isNone, listStyle, measureText, parseColor, render, renderText, setupView, uploadColor, uploadColors };
+export { Character, Fragment, Measurer, Paragraph, Text, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, highlight, isNone, listStyle, measureText, parseColor, render, renderText, setupView, uploadColor, uploadColors };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-text",
   "type": "module",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "packageManager": "pnpm@9.9.0",
   "description": "Measure and render text in a way that describes the DOM.",
   "author": "wxm",
@@ -57,7 +57,7 @@
     "prepare": "simple-git-hooks"
   },
   "dependencies": {
-    "modern-font": "^0.3.0",
+    "modern-font": "^0.3.1",
     "modern-path2d": "^0.2.5"
   },
   "devDependencies": {