modern-text 0.3.4 → 0.3.6

package/dist/index.cjs

@@ -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 = modernFont.fonts.get(this.computedStyle.fontFamily)?.font;
-    if (font instanceof modernFont.Woff || font instanceof modernFont.Ttf) {
-      return font.sfnt;
+  _getFontSfnt(font) {
+    const _font = font ?? modernFont.fonts.get(this.computedStyle.fontFamily)?.font;
+    if (_font instanceof modernFont.Woff || _font instanceof modernFont.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 modernPath2d.BoundingBox(
       left,
       top,

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import { BoundingBox, Path2D, Vector2, VectorLike, Matrix3 } from 'modern-path2d';
 export * from 'modern-path2d';
-import { Sfnt, GlyphPathCommand } from 'modern-font';
+import { Font, Sfnt, GlyphPathCommand } from 'modern-font';
 export * from 'modern-font';
 
 type Sizeable = `${number}%` | `${number}rem` | number;
@@ -130,10 +130,9 @@ declare class Character {
     get fontSize(): number;
     get fontHeight(): number;
     constructor(content: string, index: number, parent: Fragment);
-    protected _font(): Sfnt | undefined;
-    updateGlyph(font?: Sfnt | undefined): this;
-    updatePath(): this;
-    update(): this;
+    protected _getFontSfnt(font?: Font): Sfnt | undefined;
+    updateGlyph(sfnt?: Sfnt | undefined): this;
+    update(font?: Font): this;
     protected _decoration(): GlyphPathCommand[];
     protected _italic(path: Path2D, startPoint?: VectorLike): void;
     getGlyphMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
@@ -267,6 +266,7 @@ declare class Text {
     parser: Parser;
     measurer: Measurer;
     plugins: Map<string, Plugin>;
+    font?: Font;
     get fontSize(): number;
     get isVertical(): boolean;
     get characters(): Character[];

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { BoundingBox, Path2D, Vector2, VectorLike, Matrix3 } from 'modern-path2d';
 export * from 'modern-path2d';
-import { Sfnt, GlyphPathCommand } from 'modern-font';
+import { Font, Sfnt, GlyphPathCommand } from 'modern-font';
 export * from 'modern-font';
 
 type Sizeable = `${number}%` | `${number}rem` | number;
@@ -130,10 +130,9 @@ declare class Character {
     get fontSize(): number;
     get fontHeight(): number;
     constructor(content: string, index: number, parent: Fragment);
-    protected _font(): Sfnt | undefined;
-    updateGlyph(font?: Sfnt | undefined): this;
-    updatePath(): this;
-    update(): this;
+    protected _getFontSfnt(font?: Font): Sfnt | undefined;
+    updateGlyph(sfnt?: Sfnt | undefined): this;
+    update(font?: Font): this;
     protected _decoration(): GlyphPathCommand[];
     protected _italic(path: Path2D, startPoint?: VectorLike): void;
     getGlyphMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
@@ -267,6 +266,7 @@ declare class Text {
     parser: Parser;
     measurer: Measurer;
     plugins: Map<string, Plugin>;
+    font?: Font;
     get fontSize(): number;
     get isVertical(): boolean;
     get characters(): Character[];

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { BoundingBox, Path2D, Vector2, VectorLike, Matrix3 } from 'modern-path2d';
 export * from 'modern-path2d';
-import { Sfnt, GlyphPathCommand } from 'modern-font';
+import { Font, Sfnt, GlyphPathCommand } from 'modern-font';
 export * from 'modern-font';
 
 type Sizeable = `${number}%` | `${number}rem` | number;
@@ -130,10 +130,9 @@ declare class Character {
     get fontSize(): number;
     get fontHeight(): number;
     constructor(content: string, index: number, parent: Fragment);
-    protected _font(): Sfnt | undefined;
-    updateGlyph(font?: Sfnt | undefined): this;
-    updatePath(): this;
-    update(): this;
+    protected _getFontSfnt(font?: Font): Sfnt | undefined;
+    updateGlyph(sfnt?: Sfnt | undefined): this;
+    update(font?: Font): this;
     protected _decoration(): GlyphPathCommand[];
     protected _italic(path: Path2D, startPoint?: VectorLike): void;
     getGlyphMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
@@ -267,6 +266,7 @@ declare class Text {
     parser: Parser;
     measurer: Measurer;
     plugins: Map<string, Plugin>;
+    font?: Font;
     get fontSize(): number;
     get isVertical(): boolean;
     get characters(): Character[];