modern-text 0.3.5 → 0.3.7

package/dist/index.cjs

@@ -174,22 +174,23 @@ 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(fonts) {
+    const fontFamily = this.computedStyle.fontFamily;
+    const _font = fonts?.[fontFamily] ?? 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 +207,12 @@ class Character {
     this.centerDiviation = advanceHeight / 2 - baseline;
     return this;
   }
-  updatePath() {
-    const font = this._font();
-    if (!font) {
+  update(fonts) {
+    const sfnt = this._getFontSfnt(fonts);
+    if (!sfnt) {
       return this;
     }
-    this.updateGlyph(font);
+    this.updateGlyph(sfnt);
     const {
       isVertical,
       content,
@@ -219,7 +220,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 +238,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 +257,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 +270,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 +294,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,11 +1110,13 @@ class Text {
     __publicField(this, "parser", new Parser(this));
     __publicField(this, "measurer", new Measurer(this));
     __publicField(this, "plugins", /* @__PURE__ */ new Map());
-    const { content = "", style = {}, measureDom, effects } = options;
+    __publicField(this, "fonts");
+    const { content = "", style = {}, measureDom, effects, fonts } = options;
     this.content = content;
     this.style = style;
     this.measureDom = measureDom;
     this.effects = effects;
+    this.fonts = fonts;
     this.use(render()).use(highlight()).use(listStyle());
   }
   get fontSize() {
@@ -1133,6 +1132,10 @@ class Text {
     this.plugins.set(plugin.name, plugin);
     return this;
   }
+  updateParagraphs() {
+    this.paragraphs = this.parser.parse();
+    return this;
+  }
   measure(dom = this.measureDom) {
     this.computedStyle = { ...defaultTextStyles, ...this.style };
     const old = {
@@ -1143,12 +1146,12 @@ class Text {
       pathBox: this.pathBox,
       boundingBox: this.boundingBox
     };
-    this.paragraphs = this.parser.parse();
+    this.updateParagraphs();
     const result = this.measurer.measure(dom);
     this.paragraphs = result.paragraphs;
     this.lineBox = result.boundingBox;
     this.characters.forEach((c) => {
-      c.update();
+      c.update(this.fonts);
     });
     this.rawGlyphBox = this.getGlyphBox();
     const plugins = [...this.plugins.values()];

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(fonts?: Record<string, Font>): Sfnt | undefined;
+    updateGlyph(sfnt?: Sfnt | undefined): this;
+    update(fonts?: Record<string, Font>): this;
     protected _decoration(): GlyphPathCommand[];
     protected _italic(path: Path2D, startPoint?: VectorLike): void;
     getGlyphMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
@@ -241,6 +240,7 @@ interface TextOptions {
     style?: Partial<TextStyle>;
     measureDom?: HTMLElement;
     effects?: Partial<TextStyle>[];
+    fonts?: Record<string, Font>;
 }
 interface MeasureResult {
     paragraphs: Paragraph[];
@@ -267,11 +267,13 @@ declare class Text {
     parser: Parser;
     measurer: Measurer;
     plugins: Map<string, Plugin>;
+    fonts?: Record<string, Font>;
     get fontSize(): number;
     get isVertical(): boolean;
     get characters(): Character[];
     constructor(options?: TextOptions);
     use(plugin: Plugin): this;
+    updateParagraphs(): this;
     measure(dom?: HTMLElement | undefined): MeasureResult;
     getGlyphBox(): BoundingBox;
     updatePathBox(): this;

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(fonts?: Record<string, Font>): Sfnt | undefined;
+    updateGlyph(sfnt?: Sfnt | undefined): this;
+    update(fonts?: Record<string, Font>): this;
     protected _decoration(): GlyphPathCommand[];
     protected _italic(path: Path2D, startPoint?: VectorLike): void;
     getGlyphMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
@@ -241,6 +240,7 @@ interface TextOptions {
     style?: Partial<TextStyle>;
     measureDom?: HTMLElement;
     effects?: Partial<TextStyle>[];
+    fonts?: Record<string, Font>;
 }
 interface MeasureResult {
     paragraphs: Paragraph[];
@@ -267,11 +267,13 @@ declare class Text {
     parser: Parser;
     measurer: Measurer;
     plugins: Map<string, Plugin>;
+    fonts?: Record<string, Font>;
     get fontSize(): number;
     get isVertical(): boolean;
     get characters(): Character[];
     constructor(options?: TextOptions);
     use(plugin: Plugin): this;
+    updateParagraphs(): this;
     measure(dom?: HTMLElement | undefined): MeasureResult;
     getGlyphBox(): BoundingBox;
     updatePathBox(): this;

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(fonts?: Record<string, Font>): Sfnt | undefined;
+    updateGlyph(sfnt?: Sfnt | undefined): this;
+    update(fonts?: Record<string, Font>): this;
     protected _decoration(): GlyphPathCommand[];
     protected _italic(path: Path2D, startPoint?: VectorLike): void;
     getGlyphMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
@@ -241,6 +240,7 @@ interface TextOptions {
     style?: Partial<TextStyle>;
     measureDom?: HTMLElement;
     effects?: Partial<TextStyle>[];
+    fonts?: Record<string, Font>;
 }
 interface MeasureResult {
     paragraphs: Paragraph[];
@@ -267,11 +267,13 @@ declare class Text {
     parser: Parser;
     measurer: Measurer;
     plugins: Map<string, Plugin>;
+    fonts?: Record<string, Font>;
     get fontSize(): number;
     get isVertical(): boolean;
     get characters(): Character[];
     constructor(options?: TextOptions);
     use(plugin: Plugin): this;
+    updateParagraphs(): this;
     measure(dom?: HTMLElement | undefined): MeasureResult;
     getGlyphBox(): BoundingBox;
     updatePathBox(): this;