modern-text 0.2.41 → 0.2.43

package/dist/index.mjs

@@ -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"
@@ -880,56 +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 = parseSvg(image);
-      const imageBox = getPathsBoundingBox(imagePaths);
-      paragraphs.forEach((paragraph) => {
+        if (!image) {
+          return;
+        }
+        const imagePaths = parseSvg(image);
+        const imageBox = getPathsBoundingBox(imagePaths);
         const box = paragraph.lineBox;
-        if (box) {
+        const fBox = paragraph.fragments[0].inlineBox;
+        if (fBox) {
           const m = new 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, box.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(box.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)));
         }
@@ -1019,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;
@@ -1028,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);
@@ -1048,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,
@@ -1059,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",
@@ -1084,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 = {}) {
@@ -1122,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()];
@@ -1163,6 +1162,20 @@ class Text {
         return 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) {
@@ -1194,4 +1207,12 @@ class Text {
   }
 }
 
-export { Character, Fragment, Measurer, Paragraph, Parser, Text, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, highlight, isNone, listStyle, parseColor, render, setupView, uploadColor, uploadColors };
+function measureText(options) {
+  return new Text(options).measure();
+}
+
+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 };

package/package.json

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