modern-text 0.4.2 → 0.4.4

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { BoundingBox, Path2D, getPathsBoundingBox, Matrix3, parseSvg, Vector2 } from 'modern-path2d';
+import { Path2D, BoundingBox, getPathsBoundingBox, Matrix3, parseSvg, Vector2 } from 'modern-path2d';
 import { fonts } from 'modern-font';
 
 function parseColor(ctx, source, box) {
@@ -146,16 +146,26 @@ class Character {
     this.content = content;
     this.index = index;
     this.parent = parent;
+    __publicField$3(this, "path", new Path2D());
     __publicField$3(this, "lineBox", new BoundingBox());
     __publicField$3(this, "inlineBox", new BoundingBox());
     __publicField$3(this, "glyphBox");
     __publicField$3(this, "underlinePosition", 0);
     __publicField$3(this, "underlineThickness", 0);
-    __publicField$3(this, "yStrikeoutPosition", 0);
-    __publicField$3(this, "yStrikeoutSize", 0);
+    __publicField$3(this, "strikeoutPosition", 0);
+    __publicField$3(this, "strikeoutSize", 0);
+    __publicField$3(this, "ascender", 0);
+    __publicField$3(this, "descender", 0);
+    __publicField$3(this, "typoAscender", 0);
+    __publicField$3(this, "typoDescender", 0);
+    __publicField$3(this, "typoLineGap", 0);
+    __publicField$3(this, "winAscent", 0);
+    __publicField$3(this, "winDescent", 0);
+    __publicField$3(this, "xHeight", 0);
+    __publicField$3(this, "capHeight", 0);
     __publicField$3(this, "baseline", 0);
     __publicField$3(this, "centerDiviation", 0);
-    __publicField$3(this, "path", new Path2D());
+    __publicField$3(this, "fontStyle");
   }
   get center() {
     return this.glyphBox?.center;
@@ -182,25 +192,34 @@ class Character {
     if (!sfnt) {
       return this;
     }
-    const { unitsPerEm, ascender, descender, os2, post } = sfnt;
+    const { hhea, os2, post, head } = sfnt;
+    const unitsPerEm = head.unitsPerEm;
+    const ascender = hhea.ascent;
+    const descender = hhea.descent;
     const { content, computedStyle } = this;
     const { fontSize } = computedStyle;
     const rate = unitsPerEm / fontSize;
     const advanceWidth = sfnt.getAdvanceWidth(content, fontSize);
     const advanceHeight = (ascender + Math.abs(descender)) / rate;
     const baseline = ascender / rate;
-    const yStrikeoutPosition = (ascender - os2.yStrikeoutPosition) / rate;
-    const yStrikeoutSize = os2.yStrikeoutSize / rate;
-    const underlinePosition = (ascender - post.underlinePosition) / rate;
-    const underlineThickness = post.underlineThickness / rate;
     this.inlineBox.width = advanceWidth;
     this.inlineBox.height = advanceHeight;
-    this.underlinePosition = underlinePosition;
-    this.underlineThickness = underlineThickness;
-    this.yStrikeoutPosition = yStrikeoutPosition;
-    this.yStrikeoutSize = yStrikeoutSize;
+    this.underlinePosition = (ascender - post.underlinePosition) / rate;
+    this.underlineThickness = post.underlineThickness / rate;
+    this.strikeoutPosition = (ascender - os2.yStrikeoutPosition) / rate;
+    this.strikeoutSize = os2.yStrikeoutSize / rate;
+    this.ascender = ascender / rate;
+    this.descender = descender / rate;
+    this.typoAscender = os2.sTypoAscender / rate;
+    this.typoDescender = os2.sTypoDescender / rate;
+    this.typoLineGap = os2.sTypoLineGap / rate;
+    this.winAscent = os2.usWinAscent / rate;
+    this.winDescent = os2.usWinDescent / rate;
+    this.xHeight = os2.sxHeight / rate;
+    this.capHeight = os2.sCapHeight / rate;
     this.baseline = baseline;
     this.centerDiviation = advanceHeight / 2 - baseline;
+    this.fontStyle = fsSelectionMap[os2.fsSelection] ?? macStyleMap[head.macStyle];
     return this;
   }
   update(fonts) {
@@ -214,11 +233,12 @@ class Character {
       content,
       computedStyle: style,
       baseline,
-      inlineBox
+      inlineBox,
+      ascender,
+      descender,
+      typoAscender,
+      fontStyle
     } = this;
-    const { os2, head, ascender, descender } = sfnt;
-    const typoAscender = os2.sTypoAscender;
-    const fontStyle = fsSelectionMap[os2.fsSelection] ?? macStyleMap[head.macStyle];
     const { left, top } = inlineBox;
     const needsItalic = style.fontStyle === "italic" && fontStyle !== "italic";
     let x = left;
@@ -276,7 +296,6 @@ class Character {
         }
       }
     }
-    path.addCommands(this._decoration());
     const fontWeight = style.fontWeight ?? 400;
     if (fontWeight in fontWeightMap && ((fontWeight === 700 || fontWeight === "bold") && fontStyle !== "bold")) {
       path.bold(fontWeightMap[fontWeight] * style.fontSize * 0.05);
@@ -290,49 +309,6 @@ class Character {
     this.glyphBox = this.getGlyphBoundingBox();
     return this;
   }
-  _decoration() {
-    const { isVertical, underlinePosition, yStrikeoutPosition } = this;
-    const { textDecoration, fontSize } = this.computedStyle;
-    const { left, top, width, height } = this.inlineBox;
-    const lineWidth = 0.1 * fontSize;
-    let start;
-    switch (textDecoration) {
-      case "underline":
-        if (isVertical) {
-          start = left;
-        } else {
-          start = top + underlinePosition;
-        }
-        break;
-      case "line-through":
-        if (isVertical) {
-          start = left + width / 2;
-        } else {
-          start = top + yStrikeoutPosition;
-        }
-        break;
-      case "none":
-      default:
-        return [];
-    }
-    if (isVertical) {
-      return [
-        { type: "M", x: start, y: top },
-        { type: "L", x: start, y: top + height },
-        { type: "L", x: start + lineWidth, y: top + height },
-        { type: "L", x: start + lineWidth, y: top },
-        { type: "Z" }
-      ];
-    } else {
-      return [
-        { type: "M", x: left, y: start },
-        { type: "L", x: left + width, y: start },
-        { type: "L", x: left + width, y: start + lineWidth },
-        { type: "L", x: left, y: start + lineWidth },
-        { type: "Z" }
-      ];
-    }
-  }
   _italic(path, startPoint) {
     path.skew(-0.24, 0, startPoint || {
       y: this.inlineBox.top + this.baseline,
@@ -674,7 +650,7 @@ function parseStrokeWidthScale(strokeWidth, fontSize, total) {
     return strokeWidth / total;
   }
 }
-function getTransformMatrix(a, b, c, isVertical) {
+function getTransformMatrix(a, b, c, isVertical, type) {
   let scale;
   if (!isVertical) {
     scale = {
@@ -689,10 +665,18 @@ function getTransformMatrix(a, b, c, isVertical) {
   }
   const offset = c.center.add(
     a.center.sub(b.center).scale(scale.x, scale.y)
-  ).sub({
-    x: a.width / 2 * scale.x,
-    y: a.height / 2 * scale.y
-  });
+  );
+  if (type === "line") {
+    offset.sub({
+      x: a.width / 2 * scale.x,
+      y: a.height * scale.y
+    });
+  } else {
+    offset.sub({
+      x: a.width / 2 * scale.x,
+      y: a.height / 2 * scale.y
+    });
+  }
   const m = new Matrix3();
   m.translate(-a.left, -a.top);
   if (isVertical) {
@@ -721,14 +705,13 @@ function highlight() {
     paths,
     update: (text) => {
       paths.length = 0;
-      const { characters } = text;
-      let group;
       const groups = [];
+      let group;
       let prevStyle;
-      characters.forEach((character) => {
-        const { isVertical, computedStyle: style } = character;
+      text.forEachCharacter((character) => {
+        const { isVertical, computedStyle: style, inlineBox, fontSize } = 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 === inlineBox.left : group[0].inlineBox.top === inlineBox.top) && group[0].fontSize === fontSize) {
             group.push(character);
           } else {
             group = [];
@@ -738,15 +721,15 @@ function highlight() {
         }
         prevStyle = style;
       });
-      groups.filter((characters2) => characters2.length).map((characters2) => {
-        const char = characters2[0];
+      groups.filter((characters) => characters.length).map((characters) => {
+        const char = characters[0];
         return {
-          style: char.computedStyle,
-          baseline: char.baseline,
-          box: BoundingBox.from(...characters2.map((c) => c.glyphBox))
+          char,
+          groupBox: BoundingBox.from(...characters.map((c) => c.glyphBox))
         };
       }).forEach((group2) => {
-        const { style, box: groupBox, baseline } = group2;
+        const { char, groupBox } = group2;
+        const style = char.computedStyle;
         const { fontSize, writingMode } = style;
         const isVertical = writingMode.includes("vertical");
         const strokeWidthScale = parseStrokeWidthScale(style.highlightStrokeWidth, fontSize, groupBox.width);
@@ -757,12 +740,21 @@ function highlight() {
         const box = getPathsBoundingBox(svgPaths, true);
         const refBox = getPathsBoundingBox(refPaths, false);
         const unitWidth = charsPerRepeat ? fontSize * charsPerRepeat : isVertical ? groupBox.height : groupBox.width;
-        const unitHeight = baseline * 0.8;
+        let unitHeight;
+        let type;
+        if (box.height / refBox.height > 0.8) {
+          type = "block";
+          unitHeight = groupBox.height;
+        } else {
+          type = "line";
+          unitHeight = char.inlineBox.top - groupBox.top + char.underlinePosition;
+        }
         const transform = getTransformMatrix(
           box,
           refBox,
           new BoundingBox(groupBox.left, groupBox.top, isVertical ? unitHeight : unitWidth, isVertical ? unitWidth : unitHeight),
-          isVertical
+          isVertical,
+          type
         );
         const styleScale = fontSize / box.width * 2;
         const total = Math.ceil(groupBox.width / unitWidth);
@@ -919,7 +911,7 @@ function render() {
       return boxes.length ? BoundingBox.from(...boxes) : void 0;
     },
     render: (ctx, text) => {
-      const { characters, paragraphs, glyphBox, effects, style } = text;
+      const { paragraphs, glyphBox, effects, style } = text;
       function fillBackground(color, box) {
         ctx.fillStyle = color;
         ctx.fillRect(box.left, box.top, box.width, box.height);
@@ -938,7 +930,7 @@ function render() {
           ctx.save();
           const [a, c, e, b, d, f] = getTransform2D(text, style2).transpose().elements;
           ctx.transform(a, b, c, d, e, f);
-          characters.forEach((character) => {
+          text.forEachCharacter((character) => {
             if (character.parent.style?.backgroundColor) {
               fillBackground(character.parent.style.backgroundColor, character.inlineBox);
             }
@@ -983,6 +975,112 @@ function getTransform2D(text, style) {
   return tempM1.clone();
 }
 
+function textDecoration() {
+  const paths = [];
+  return definePlugin({
+    name: "textDecoration",
+    paths,
+    update: (text) => {
+      paths.length = 0;
+      const groups = [];
+      let group;
+      let prevStyle;
+      text.forEachCharacter((character) => {
+        const { computedStyle: style, isVertical, inlineBox, underlinePosition, underlineThickness, strikeoutPosition, strikeoutSize } = character;
+        if (!isNone(style.textDecoration)) {
+          let flag = false;
+          if (prevStyle?.textDecoration === style.textDecoration && prevStyle?.writingMode === style.writingMode && (isVertical ? group[0].inlineBox.left === inlineBox.left : group[0].inlineBox.top === inlineBox.top)) {
+            switch (style.textDecoration) {
+              case "underline":
+                if (group[0].underlinePosition === underlinePosition && group[0].underlineThickness === underlineThickness) {
+                  flag = true;
+                }
+                break;
+              case "line-through":
+                if (group[0].strikeoutPosition === strikeoutPosition && group[0].strikeoutSize === strikeoutSize) {
+                  flag = true;
+                }
+                break;
+            }
+          }
+          if (flag) {
+            group.push(character);
+          } else {
+            group = [];
+            group.push(character);
+            groups.push(group);
+          }
+          prevStyle = style;
+        } else {
+          prevStyle = void 0;
+        }
+      });
+      groups.forEach((group2) => {
+        const { computedStyle: style, isVertical, underlinePosition, underlineThickness, strikeoutPosition, strikeoutSize } = group2[0];
+        const { textDecoration: textDecoration2 } = style;
+        const { left, top, width, height } = BoundingBox.from(...group2.map((c) => c.inlineBox));
+        let strokePosition = isVertical ? left : top;
+        let strokeWidth = 0;
+        switch (textDecoration2) {
+          case "underline":
+            strokePosition += underlinePosition;
+            strokeWidth = underlineThickness * 2;
+            break;
+          case "line-through":
+            strokePosition += strikeoutPosition;
+            strokeWidth = strikeoutSize * 2;
+            break;
+        }
+        strokePosition -= strokeWidth;
+        if (isVertical) {
+          paths.push(new Path2D([
+            { type: "M", x: strokePosition, y: top },
+            { type: "L", x: strokePosition, y: top + height },
+            { type: "L", x: strokePosition + strokeWidth, y: top + height },
+            { type: "L", x: strokePosition + strokeWidth, y: top },
+            { type: "Z" }
+          ]));
+        } else {
+          paths.push(new Path2D([
+            { type: "M", x: left, y: strokePosition },
+            { type: "L", x: left + width, y: strokePosition },
+            { type: "L", x: left + width, y: strokePosition + strokeWidth },
+            { type: "L", x: left, y: strokePosition + strokeWidth },
+            { type: "Z" }
+          ]));
+        }
+      });
+    },
+    render: (ctx, text) => {
+      const { effects, fontSize } = text;
+      if (effects) {
+        effects.forEach((style) => {
+          ctx.save();
+          const [a, c, e, b, d, f] = getTransform2D(text, style).transpose().elements;
+          ctx.transform(a, b, c, d, e, f);
+          paths.forEach((path) => {
+            drawPath({
+              ctx,
+              path,
+              fontSize,
+              ...style
+            });
+          });
+          ctx.restore();
+        });
+      } else {
+        paths.forEach((path) => {
+          drawPath({
+            ctx,
+            path,
+            fontSize
+          });
+        });
+      }
+    }
+  });
+}
+
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -1057,7 +1155,7 @@ class Text {
     this.measureDom = measureDom;
     this.effects = effects;
     this.fonts = fonts;
-    this.use(render()).use(highlight()).use(listStyle());
+    this.use(listStyle()).use(textDecoration()).use(highlight()).use(render());
   }
   get fontSize() {
     return this.computedStyle.fontSize;
@@ -1072,6 +1170,16 @@ class Text {
     this.plugins.set(plugin.name, plugin);
     return this;
   }
+  forEachCharacter(handle) {
+    this.paragraphs.forEach((p, paragraphIndex) => {
+      p.fragments.forEach((f, fragmentIndex) => {
+        f.characters.forEach((c, characterIndex) => {
+          handle(c, { paragraphIndex, fragmentIndex, characterIndex });
+        });
+      });
+    });
+    return this;
+  }
   updateParagraphs() {
     this.computedStyle = { ...defaultTextStyles, ...this.style };
     let { content, computedStyle: style } = this;
@@ -1243,4 +1351,4 @@ function renderText(options) {
   return new Text(options).render(options);
 }
 
-export { Character, Fragment, Measurer, Paragraph, 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, textDecoration, uploadColor, uploadColors };

package/package.json

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