modern-text 0.2.5 → 0.2.7

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { BoundingBox, Path2D, Point2D, parseSvgToDom, parseSvg, Matrix3 } from 'modern-path2d';
+import { BoundingBox, Path2D, Vector2, parseSvgToDom, parseSvg, Matrix3 } from 'modern-path2d';
 import { fonts, Woff, Ttf } from 'modern-font';
 export * from 'modern-font';
 
@@ -170,9 +170,9 @@ 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);
+    __publicField$4(this, "path", new Path2D());
     // glyph
     __publicField$4(this, "commands", []);
   }
@@ -192,11 +192,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;
@@ -217,84 +220,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;
@@ -309,7 +235,7 @@ class Character {
       baseline,
       glyphHeight,
       glyphWidth
-    } = this._updateGlyph(font);
+    } = this.updateGlyph(font);
     const { os2, ascender, descender } = font;
     const usWinAscent = ascender;
     const usWinDescent = descender;
@@ -367,14 +293,127 @@ class Character {
     }
     commands.push(...this._decoration());
     this.commands = commands;
-    this.path = new Path2D(commands);
+    return this;
+  }
+  updatePath() {
+    this.path?.copy(new Path2D(this.commands));
     return this;
   }
   update() {
-    this.updatePath();
+    this.updateCommands().updatePath();
     return this;
   }
-  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+  _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 = Vector2.MAX, max = Vector2.MIN) {
     let last = { x: 0, y: 0 };
     this.commands.forEach((cmd) => {
       switch (cmd.type) {
@@ -402,6 +441,13 @@ class Character {
     });
     return { min, max };
   }
+  getBoundingBox() {
+    const min = Vector2.MAX;
+    const max = Vector2.MIN;
+    this.getMinMax(min, max);
+    this.path.getMinMax(min, max);
+    return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+  }
   drawTo(ctx, config = {}) {
     drawPaths({
       ctx,
@@ -544,8 +590,8 @@ class Highlighter extends Feature {
     if (!this.paths.length) {
       return new BoundingBox();
     }
-    const min = Point2D.MAX;
-    const max = Point2D.MIN;
+    const min = Vector2.MAX;
+    const max = Vector2.MIN;
     this.paths.forEach((path) => path.getMinMax(min, max));
     return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
   }
@@ -571,7 +617,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();
@@ -579,8 +625,8 @@ class Highlighter extends Feature {
   _parseSvg(url) {
     const svg = parseSvgToDom(url);
     const paths = parseSvg(svg);
-    const min = Point2D.MAX;
-    const max = Point2D.MIN;
+    const min = Vector2.MAX;
+    const max = Vector2.MIN;
     paths.forEach((path) => path.getMinMax(min, max));
     const { x, y, width, height } = new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
     const viewBox = svg.getAttribute("viewBox").split(" ").map(Number);
@@ -1040,14 +1086,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());
+    this._highlighter.highlight();
     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));
+    const min = Vector2.MAX;
+    const max = Vector2.MIN;
+    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.5",
+  "version": "0.2.7",
   "packageManager": "pnpm@9.9.0",
   "description": "Measure and render text in a way that describes the DOM.",
   "author": "wxm",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "modern-font": "^0.1.5",
-    "modern-path2d": "^0.1.7"
+    "modern-path2d": "^0.1.8"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.7.3",