modern-text 0.2.6 → 0.2.8

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { BoundingBox, Point2D, Path2D, 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';
 
@@ -172,8 +172,7 @@ class Character {
     __publicField$4(this, "boundingBox", new BoundingBox());
     __publicField$4(this, "textWidth", 0);
     __publicField$4(this, "textHeight", 0);
-    // glyph
-    __publicField$4(this, "commands", []);
+    __publicField$4(this, "path", new Path2D());
   }
   get computedStyle() {
     return this.parent.computedStyle;
@@ -219,7 +218,7 @@ class Character {
     this.centerPoint = this.glyphBox.getCenterPoint();
     return this;
   }
-  updateCommands() {
+  updatePath() {
     const font = this._font();
     if (!font) {
       return this;
@@ -291,11 +290,11 @@ class Character {
       }
     }
     commands.push(...this._decoration());
-    this.commands = commands;
+    this.path = new Path2D(commands);
     return this;
   }
   update() {
-    this.updateCommands();
+    this.updatePath();
     return this;
   }
   _decoration() {
@@ -375,71 +374,16 @@ class Character {
       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, max) {
+    return this.path.getMinMax(min, max);
   }
-  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 };
+  getBoundingBox() {
+    return this.path.getBoundingBox();
   }
   drawTo(ctx, config = {}) {
     drawPaths({
       ctx,
-      paths: [new Path2D(this.commands)],
+      paths: [this.path],
       fontSize: this.computedStyle.fontSize,
       color: this.computedStyle.color,
       ...config
@@ -578,8 +522,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);
   }
@@ -613,8 +557,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);
@@ -1042,12 +986,12 @@ class Text {
     __publicField(this, "paragraphs", []);
     __publicField(this, "boundingBox", new BoundingBox());
     __publicField(this, "renderBoundingBox", new BoundingBox());
-    __publicField(this, "_parser", new Parser(this));
-    __publicField(this, "_measurer", new Measurer(this));
-    __publicField(this, "_deformer", new Deformer(this));
-    __publicField(this, "_effector", new Effector(this));
-    __publicField(this, "_highlighter", new Highlighter(this));
-    __publicField(this, "_renderer2D", new Renderer2D(this));
+    __publicField(this, "parser", new Parser(this));
+    __publicField(this, "measurer", new Measurer(this));
+    __publicField(this, "deformer", new Deformer(this));
+    __publicField(this, "effector", new Effector(this));
+    __publicField(this, "highlighter", new Highlighter(this));
+    __publicField(this, "renderer2D", new Renderer2D(this));
     const { content = "", style = {}, effects, deformation, measureDom } = options;
     this.content = content;
     this.style = style;
@@ -1061,8 +1005,8 @@ class Text {
   measure(dom = this.measureDom) {
     this.computedStyle = { ...defaultTextStyles, ...this.style };
     const old = this.paragraphs;
-    this.paragraphs = this._parser.parse();
-    const result = this._measurer.measure(dom);
+    this.paragraphs = this.parser.parse();
+    const result = this.measurer.measure(dom);
     this.paragraphs = old;
     return result;
   }
@@ -1076,12 +1020,12 @@ class Text {
     this.boundingBox = boundingBox;
     const characters = this.characters;
     characters.forEach((c) => c.update());
+    this.highlighter.highlight();
     if (this.deformation) {
-      this._deformer.deform();
+      this.deformer.deform();
     }
-    this._highlighter.highlight();
-    const min = Point2D.MAX;
-    const max = Point2D.MIN;
+    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;
@@ -1099,23 +1043,23 @@ class Text {
       this.renderBoundingBox = BoundingBox.from(
         this.boundingBox,
         this.renderBoundingBox,
-        this._effector.getBoundingBox(),
-        this._highlighter.getBoundingBox()
+        this.effector.getBoundingBox(),
+        this.highlighter.getBoundingBox()
       );
     } else {
       this.renderBoundingBox = BoundingBox.from(
         this.boundingBox,
         this.renderBoundingBox,
-        this._highlighter.getBoundingBox()
+        this.highlighter.getBoundingBox()
       );
     }
-    this._renderer2D.setupView({ pixelRatio, ctx });
-    this._renderer2D.uploadColors({ ctx });
-    this._highlighter.draw({ ctx });
+    this.renderer2D.setupView({ pixelRatio, ctx });
+    this.renderer2D.uploadColors({ ctx });
+    this.highlighter.draw({ ctx });
     if (this.effects?.length) {
-      this._effector.draw({ ctx });
+      this.effector.draw({ ctx });
     } else {
-      this._renderer2D.draw({ ctx });
+      this.renderer2D.draw({ ctx });
     }
     return this;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-text",
   "type": "module",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "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",