modern-text 0.3.4 → 0.3.6

package/dist/index.mjs

@@ -81,8 +81,8 @@ function setupView(ctx, pixelRatio, boundingBox) {
   const view = ctx.canvas;
   view.dataset.viewBox = String(`${left} ${top} ${width} ${height}`);
   view.dataset.pixelRatio = String(pixelRatio);
-  const canvasWidth = width + Math.abs(left);
-  const canvasHeight = height + Math.abs(top);
+  const canvasWidth = width;
+  const canvasHeight = height;
   view.width = Math.max(1, Math.ceil(canvasWidth * pixelRatio));
   view.height = Math.max(1, Math.ceil(canvasHeight * pixelRatio));
   view.style.width = `${canvasWidth}px`;
@@ -174,22 +174,22 @@ class Character {
   get fontHeight() {
     return this.fontSize * this.computedStyle.lineHeight;
   }
-  _font() {
-    const font = fonts.get(this.computedStyle.fontFamily)?.font;
-    if (font instanceof Woff || font instanceof Ttf) {
-      return font.sfnt;
+  _getFontSfnt(font) {
+    const _font = font ?? fonts.get(this.computedStyle.fontFamily)?.font;
+    if (_font instanceof Woff || _font instanceof Ttf) {
+      return _font.sfnt;
     }
     return void 0;
   }
-  updateGlyph(font = this._font()) {
-    if (!font) {
+  updateGlyph(sfnt = this._getFontSfnt()) {
+    if (!sfnt) {
       return this;
     }
-    const { unitsPerEm, ascender, descender, os2, post } = font;
+    const { unitsPerEm, ascender, descender, os2, post } = sfnt;
     const { content, computedStyle } = this;
     const { fontSize } = computedStyle;
     const rate = unitsPerEm / fontSize;
-    const advanceWidth = font.getAdvanceWidth(content, fontSize);
+    const advanceWidth = sfnt.getAdvanceWidth(content, fontSize);
     const advanceHeight = (ascender + Math.abs(descender)) / rate;
     const baseline = ascender / rate;
     const yStrikeoutPosition = (ascender - os2.yStrikeoutPosition) / rate;
@@ -206,12 +206,12 @@ class Character {
     this.centerDiviation = advanceHeight / 2 - baseline;
     return this;
   }
-  updatePath() {
-    const font = this._font();
-    if (!font) {
+  update(font) {
+    const sfnt = this._getFontSfnt(font);
+    if (!sfnt) {
       return this;
     }
-    this.updateGlyph(font);
+    this.updateGlyph(sfnt);
     const {
       isVertical,
       content,
@@ -219,7 +219,7 @@ class Character {
       baseline,
       inlineBox
     } = this;
-    const { os2, head, ascender, descender } = font;
+    const { os2, head, ascender, descender } = sfnt;
     const typoAscender = os2.sTypoAscender;
     const fontStyle = fsSelectionMap[os2.fsSelection] ?? macStyleMap[head.macStyle];
     const { left, top } = inlineBox;
@@ -237,7 +237,7 @@ class Character {
     }
     if (isVertical && !set1.has(content) && (content.codePointAt(0) <= 256 || set2.has(content))) {
       path.addCommands(
-        font.getPathCommands(content, x, top + baseline - (inlineBox.height - inlineBox.width) / 2, style.fontSize) ?? []
+        sfnt.getPathCommands(content, x, top + baseline - (inlineBox.height - inlineBox.width) / 2, style.fontSize) ?? []
       );
       const point = {
         y: top - (inlineBox.height - inlineBox.width) / 2 + inlineBox.height / 2,
@@ -256,7 +256,7 @@ class Character {
     } else {
       if (glyphIndex !== void 0) {
         path.addCommands(
-          font.glyphs.get(glyphIndex).getPathCommands(x, y, style.fontSize)
+          sfnt.glyphs.get(glyphIndex).getPathCommands(x, y, style.fontSize)
         );
         if (needsItalic) {
           this._italic(
@@ -269,7 +269,7 @@ class Character {
         }
       } else {
         path.addCommands(
-          font.getPathCommands(content, x, y, style.fontSize) ?? []
+          sfnt.getPathCommands(content, x, y, style.fontSize) ?? []
         );
         if (needsItalic) {
           this._italic(
@@ -293,10 +293,6 @@ class Character {
     this.glyphBox = this.getGlyphBoundingBox();
     return this;
   }
-  update() {
-    this.updatePath();
-    return this;
-  }
   _decoration() {
     const { isVertical, underlinePosition, yStrikeoutPosition } = this;
     const { textDecoration, fontSize } = this.computedStyle;
@@ -1113,6 +1109,7 @@ class Text {
     __publicField(this, "parser", new Parser(this));
     __publicField(this, "measurer", new Measurer(this));
     __publicField(this, "plugins", /* @__PURE__ */ new Map());
+    __publicField(this, "font");
     const { content = "", style = {}, measureDom, effects } = options;
     this.content = content;
     this.style = style;
@@ -1148,7 +1145,7 @@ class Text {
     this.paragraphs = result.paragraphs;
     this.lineBox = result.boundingBox;
     this.characters.forEach((c) => {
-      c.update();
+      c.update(this.font);
     });
     this.rawGlyphBox = this.getGlyphBox();
     const plugins = [...this.plugins.values()];
@@ -1196,8 +1193,8 @@ class Text {
     const { lineBox, rawGlyphBox, pathBox } = this;
     const left = pathBox.left + lineBox.left - rawGlyphBox.left;
     const top = pathBox.top + lineBox.top - rawGlyphBox.top;
-    const right = pathBox.right + Math.max(0, lineBox.right - rawGlyphBox.right);
-    const bottom = pathBox.bottom + Math.max(0, lineBox.bottom - rawGlyphBox.bottom);
+    const right = pathBox.right + lineBox.right - rawGlyphBox.right;
+    const bottom = pathBox.bottom + lineBox.bottom - rawGlyphBox.bottom;
     this.boundingBox = new BoundingBox(
       left,
       top,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-text",
   "type": "module",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "packageManager": "pnpm@9.9.0",
   "description": "Measure and render text in a way that describes the DOM.",
   "author": "wxm",
@@ -57,7 +57,7 @@
     "prepare": "simple-git-hooks"
   },
   "dependencies": {
-    "modern-font": "^0.2.1",
+    "modern-font": "^0.3.0",
     "modern-path2d": "^0.2.5"
   },
   "devDependencies": {