modern-text 0.2.4 → 0.2.6

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { BoundingBox, Path2D, Point2D, parseSvgToDom, parseSvg, Matrix3 } from 'modern-path2d';
+import { BoundingBox, Point2D, Path2D, parseSvgToDom, parseSvg, Matrix3 } from 'modern-path2d';
 import { fonts, Woff, Ttf } from 'modern-font';
 export * from 'modern-font';
 
@@ -170,9 +170,10 @@ class Character {
     this.index = index;
     this.parent = parent;
     __publicField$4(this, "boundingBox", new BoundingBox());
-    __publicField$4(this, "path", new Path2D());
     __publicField$4(this, "textWidth", 0);
     __publicField$4(this, "textHeight", 0);
+    // glyph
+    __publicField$4(this, "commands", []);
   }
   get computedStyle() {
     return this.parent.computedStyle;
@@ -190,11 +191,14 @@ class Character {
     }
     return void 0;
   }
-  _updateGlyph(font) {
+  updateGlyph(font = this._font()) {
+    if (!font) {
+      return this;
+    }
+    const { unitsPerEm, ascender, descender, os2, post } = font;
     const { content, computedStyle, boundingBox, isVertical } = this;
     const { left, top, height } = boundingBox;
     const { fontSize } = computedStyle;
-    const { unitsPerEm, ascender, descender, os2, post } = font;
     const rate = unitsPerEm / fontSize;
     const glyphWidth = font.getAdvanceWidth(content, fontSize);
     const glyphHeight = (ascender + Math.abs(descender)) / rate;
@@ -215,84 +219,7 @@ 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() {
+  updateCommands() {
     const font = this._font();
     if (!font) {
       return this;
@@ -307,7 +234,7 @@ class Character {
       baseline,
       glyphHeight,
       glyphWidth
-    } = this._updateGlyph(font);
+    } = this.updateGlyph(font);
     const { os2, ascender, descender } = font;
     const usWinAscent = ascender;
     const usWinDescent = descender;
@@ -365,11 +292,120 @@ class Character {
     }
     commands.push(...this._decoration());
     this.commands = commands;
-    this.path = new Path2D(commands);
     return this;
   }
   update() {
-    this.updatePath();
+    this.updateCommands();
+    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" }
+      ];
+    }
+  }
+  _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];
+    });
+  }
+  _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;
+    });
+  }
+  forEachCommand(cb) {
+    const commands = this.commands;
+    const last = { x: 0, y: 0 };
+    const first = { x: 0, y: 0 };
+    let isFirst = true;
+    let doSetFirstPoint = false;
+    for (let i = 0, len = commands.length; i < len; i++) {
+      if (isFirst) {
+        doSetFirstPoint = true;
+        isFirst = false;
+      }
+      let command = commands[i];
+      command = cb(command, i, { last, first }) ?? command;
+      switch (command.type) {
+        case "M":
+        case "L":
+        case "Q":
+          last.x = command.x;
+          last.y = command.y;
+          if (doSetFirstPoint) {
+            first.x = last.x;
+            first.y = last.y;
+          }
+          break;
+        case "Z":
+          last.x = first.x;
+          last.y = first.y;
+          isFirst = true;
+          break;
+      }
+    }
     return this;
   }
   getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
@@ -403,7 +439,7 @@ class Character {
   drawTo(ctx, config = {}) {
     drawPaths({
       ctx,
-      paths: [this.path],
+      paths: [new Path2D(this.commands)],
       fontSize: this.computedStyle.fontSize,
       color: this.computedStyle.color,
       ...config
@@ -569,7 +605,7 @@ class Highlighter extends Feature {
     this.paths = groups.filter((characters2) => characters2.length).map((characters2) => {
       return {
         url: characters2[0].parent.highlight.url,
-        box: BoundingBox.from(...characters2.map((c) => c.glyphBox)),
+        box: BoundingBox.from(...characters2.map((c) => c.boundingBox)),
         baseline: Math.max(...characters2.map((c) => c.baseline))
       };
     }).map((group2) => this._parseGroup(group2, fontSize)).flat();
@@ -1038,14 +1074,15 @@ class Text {
     const { paragraphs, boundingBox } = this.measure();
     this.paragraphs = paragraphs;
     this.boundingBox = boundingBox;
-    this.characters.forEach((c) => c.update());
+    const characters = this.characters;
+    characters.forEach((c) => c.update());
     if (this.deformation) {
       this._deformer.deform();
     }
     this._highlighter.highlight();
     const min = Point2D.MAX;
     const max = Point2D.MIN;
-    this.characters.forEach((c) => c.getMinMax(min, max));
+    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.4",
+  "version": "0.2.6",
   "packageManager": "pnpm@9.9.0",
   "description": "Measure and render text in a way that describes the DOM.",
   "author": "wxm",