modern-text 0.2.3 → 0.2.4

package/dist/index.mjs

@@ -1,5 +1,4 @@
 import { BoundingBox, Path2D, Point2D, parseSvgToDom, parseSvg, Matrix3 } from 'modern-path2d';
-export * from 'modern-path2d';
 import { fonts, Woff, Ttf } from 'modern-font';
 export * from 'modern-font';
 
@@ -184,12 +183,12 @@ class Character {
   get fontSize() {
     return this.computedStyle.fontSize;
   }
-  _updateFont() {
+  _font() {
     const font = fonts.get(this.computedStyle.fontFamily)?.font;
     if (font instanceof Woff || font instanceof Ttf) {
-      this.font = font.sfnt;
+      return font.sfnt;
     }
-    return this;
+    return void 0;
   }
   _updateGlyph(font) {
     const { content, computedStyle, boundingBox, isVertical } = this;
@@ -216,8 +215,85 @@ class Character {
     this.centerPoint = this.glyphBox.getCenterPoint();
     return this;
   }
+  _decoration() {
+    const { isVertical, underlinePosition, yStrikeoutPosition } = this;
+    const { textDecoration, fontSize } = this.computedStyle;
+    const { left, top, width, height } = this.boundingBox;
+    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" }
+      ];
+    }
+  }
+  _transform(commands, cb) {
+    return commands.map((rawCmd) => {
+      const cmd = { ...rawCmd };
+      switch (cmd.type) {
+        case "L":
+        case "M":
+          [cmd.x, cmd.y] = cb(cmd.x, cmd.y);
+          break;
+        case "Q":
+          [cmd.x1, cmd.y1] = cb(cmd.x1, cmd.y1);
+          [cmd.x, cmd.y] = cb(cmd.x, cmd.y);
+          break;
+      }
+      return cmd;
+    });
+  }
+  _italic(commands, startPoint) {
+    const { baseline, glyphWidth } = this;
+    const { left, top } = this.boundingBox;
+    const _startPoint = startPoint || {
+      y: top + baseline,
+      x: left + glyphWidth / 2
+    };
+    return this._transform(commands, (x, y) => {
+      const p = getSkewPoint({ x, y }, _startPoint, -0.24, 0);
+      return [p.x, p.y];
+    });
+  }
+  _rotation90(commands, point) {
+    return this._transform(commands, (x, y) => {
+      const p = getPointPosition({ x, y }, point, 90);
+      return [p.x, p.y];
+    });
+  }
   updatePath() {
-    const font = this._updateFont().font;
+    const font = this._font();
     if (!font) {
       return this;
     }
@@ -230,16 +306,14 @@ class Character {
       computedStyle,
       baseline,
       glyphHeight,
-      glyphWidth,
-      yStrikeoutPosition,
-      underlinePosition
+      glyphWidth
     } = this._updateGlyph(font);
     const { os2, ascender, descender } = font;
     const usWinAscent = ascender;
     const usWinDescent = descender;
     const typoAscender = os2.sTypoAscender;
-    const { left, top, width, height } = boundingBox;
-    const { fontSize, fontStyle, textDecoration } = computedStyle;
+    const { left, top } = boundingBox;
+    const { fontSize, fontStyle } = computedStyle;
     let x = left;
     let y = top + baseline;
     let glyphIndex;
@@ -258,119 +332,74 @@ class Character {
         x: x + glyphWidth / 2
       };
       if (fontStyle === "italic") {
-        setItalic(
+        commands = this._italic(
           commands,
           isVertical ? {
             x: point.x,
             y: top - (glyphHeight - glyphWidth) / 2 + baseline
-          } : null
+          } : void 0
         );
       }
-      set90Rotation(commands, point);
+      commands = this._rotation90(commands, point);
     } else {
       if (glyphIndex !== void 0) {
         commands = font.glyf.glyphs.get(glyphIndex).getPathCommands(x, y, fontSize);
         if (fontStyle === "italic") {
-          setItalic(
+          commands = this._italic(
             commands,
             isVertical ? {
               x: x + glyphWidth / 2,
               y: top + typoAscender / (usWinAscent + Math.abs(usWinDescent)) * glyphHeight
-            } : null
+            } : void 0
           );
         }
       } else {
         commands = font.getPathCommands(content, x, y, fontSize) ?? [];
         if (fontStyle === "italic") {
-          setItalic(
+          commands = this._italic(
             commands,
-            isVertical ? { x: x + glyphHeight / 2, y } : null
+            isVertical ? { x: x + glyphHeight / 2, y } : void 0
           );
         }
       }
     }
-    const lineWidth = 0.1 * fontSize;
-    if (isVertical) {
-      const create = (start, len) => [
-        { type: "M", x: start, y: top },
-        { type: "L", x: start, y: top + height },
-        { type: "L", x: start + len, y: top + height },
-        { type: "L", x: start + len, y: top },
-        { type: "Z" }
-      ];
-      switch (textDecoration) {
-        case "underline":
-          commands.push(...create(left, lineWidth));
-          break;
-        case "line-through":
-          commands.push(...create(left + width / 2, lineWidth));
-          break;
-      }
-    } else {
-      const create = (start, len) => [
-        { type: "M", x: left, y: start },
-        { type: "L", x: left + width, y: start },
-        { type: "L", x: left + width, y: start + len },
-        { type: "L", x: left, y: start + len },
-        { type: "Z" }
-      ];
-      switch (textDecoration) {
-        case "underline":
-          commands.push(...create(top + underlinePosition, lineWidth));
-          break;
-        case "line-through":
-          commands.push(...create(top + yStrikeoutPosition, lineWidth));
-          break;
-      }
-    }
+    commands.push(...this._decoration());
+    this.commands = commands;
     this.path = new Path2D(commands);
     return this;
-    function setItalic(commands2, startPoint) {
-      const _startPoint = startPoint || {
-        y: top + baseline,
-        x: left + glyphWidth / 2
-      };
-      commands2.forEach((command) => {
-        ["", "1", "2"].forEach((arg) => {
-          if (command[`x${arg}`]) {
-            const pos = getSkewPoint(
-              {
-                x: command[`x${arg}`],
-                y: command[`y${arg}`]
-              },
-              _startPoint,
-              -0.24,
-              0
-            );
-            command[`x${arg}`] = pos.x;
-            command[`y${arg}`] = pos.y;
-          }
-        });
-      });
-    }
-    function set90Rotation(commands2, point) {
-      commands2.forEach((command) => {
-        ["", "1", "2"].forEach((arg) => {
-          if (command[`x${arg}`]) {
-            const pos = getPointPosition(
-              {
-                x: command[`x${arg}`],
-                y: command[`y${arg}`]
-              },
-              point,
-              90
-            );
-            command[`x${arg}`] = pos.x;
-            command[`y${arg}`] = pos.y;
-          }
-        });
-      });
-    }
   }
   update() {
     this.updatePath();
     return this;
   }
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    let last = { x: 0, y: 0 };
+    this.commands.forEach((cmd) => {
+      switch (cmd.type) {
+        case "L":
+        case "M":
+          min.x = Math.min(min.x, cmd.x);
+          min.y = Math.min(min.y, cmd.y);
+          max.x = Math.max(max.x, cmd.x);
+          max.y = Math.max(max.y, cmd.y);
+          last = { x: cmd.x, y: cmd.y };
+          break;
+        case "Q": {
+          const x1 = 0.5 * (last.x + cmd.x1);
+          const y1 = 0.5 * (last.y + cmd.y1);
+          const x2 = 0.5 * (last.x + cmd.x);
+          const y2 = 0.5 * (last.y + cmd.y);
+          min.x = Math.min(min.x, last.x, cmd.x, x1, x2);
+          min.y = Math.min(min.y, last.y, cmd.y, y1, y2);
+          max.x = Math.max(max.x, last.x, cmd.x, x1, x2);
+          max.y = Math.max(max.y, last.y, cmd.y, y1, y2);
+          last = { x: cmd.x, y: cmd.y };
+          break;
+        }
+      }
+    });
+    return { min, max };
+  }
   drawTo(ctx, config = {}) {
     drawPaths({
       ctx,
@@ -455,6 +484,7 @@ class Feature {
 
 class Deformer extends Feature {
   deform() {
+    this._text.deformation?.();
   }
 }
 
@@ -994,8 +1024,11 @@ class Text {
   }
   measure(dom = this.measureDom) {
     this.computedStyle = { ...defaultTextStyles, ...this.style };
+    const old = this.paragraphs;
     this.paragraphs = this._parser.parse();
-    return this._measurer.measure(dom);
+    const result = this._measurer.measure(dom);
+    this.paragraphs = old;
+    return result;
   }
   requestUpdate() {
     this.needsUpdate = true;
@@ -1012,7 +1045,7 @@ class Text {
     this._highlighter.highlight();
     const min = Point2D.MAX;
     const max = Point2D.MIN;
-    this.characters.forEach((c) => c.path.getMinMax(min, max));
+    this.characters.forEach((c) => c.getMinMax(min, max));
     this.renderBoundingBox = new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
     return this;
   }

package/package.json

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