modern-text 0.2.5 → 0.2.7

package/dist/index.cjs

@@ -171,9 +171,9 @@ class Character {
     this.index = index;
     this.parent = parent;
     __publicField$4(this, "boundingBox", new modernPath2d.BoundingBox());
-    __publicField$4(this, "path", new modernPath2d.Path2D());
     __publicField$4(this, "textWidth", 0);
     __publicField$4(this, "textHeight", 0);
+    __publicField$4(this, "path", new modernPath2d.Path2D());
     // glyph
     __publicField$4(this, "commands", []);
   }
@@ -193,11 +193,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;
@@ -218,84 +221,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;
@@ -310,7 +236,7 @@ class Character {
       baseline,
       glyphHeight,
       glyphWidth
-    } = this._updateGlyph(font);
+    } = this.updateGlyph(font);
     const { os2, ascender, descender } = font;
     const usWinAscent = ascender;
     const usWinDescent = descender;
@@ -368,14 +294,127 @@ class Character {
     }
     commands.push(...this._decoration());
     this.commands = commands;
-    this.path = new modernPath2d.Path2D(commands);
+    return this;
+  }
+  updatePath() {
+    this.path?.copy(new modernPath2d.Path2D(this.commands));
     return this;
   }
   update() {
-    this.updatePath();
+    this.updateCommands().updatePath();
     return this;
   }
-  getMinMax(min = modernPath2d.Point2D.MAX, max = modernPath2d.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 = modernPath2d.Vector2.MAX, max = modernPath2d.Vector2.MIN) {
     let last = { x: 0, y: 0 };
     this.commands.forEach((cmd) => {
       switch (cmd.type) {
@@ -403,6 +442,13 @@ class Character {
     });
     return { min, max };
   }
+  getBoundingBox() {
+    const min = modernPath2d.Vector2.MAX;
+    const max = modernPath2d.Vector2.MIN;
+    this.getMinMax(min, max);
+    this.path.getMinMax(min, max);
+    return new modernPath2d.BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+  }
   drawTo(ctx, config = {}) {
     drawPaths({
       ctx,
@@ -545,8 +591,8 @@ class Highlighter extends Feature {
     if (!this.paths.length) {
       return new modernPath2d.BoundingBox();
     }
-    const min = modernPath2d.Point2D.MAX;
-    const max = modernPath2d.Point2D.MIN;
+    const min = modernPath2d.Vector2.MAX;
+    const max = modernPath2d.Vector2.MIN;
     this.paths.forEach((path) => path.getMinMax(min, max));
     return new modernPath2d.BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
   }
@@ -572,7 +618,7 @@ class Highlighter extends Feature {
     this.paths = groups.filter((characters2) => characters2.length).map((characters2) => {
       return {
         url: characters2[0].parent.highlight.url,
-        box: modernPath2d.BoundingBox.from(...characters2.map((c) => c.glyphBox)),
+        box: modernPath2d.BoundingBox.from(...characters2.map((c) => c.boundingBox)),
         baseline: Math.max(...characters2.map((c) => c.baseline))
       };
     }).map((group2) => this._parseGroup(group2, fontSize)).flat();
@@ -580,8 +626,8 @@ class Highlighter extends Feature {
   _parseSvg(url) {
     const svg = modernPath2d.parseSvgToDom(url);
     const paths = modernPath2d.parseSvg(svg);
-    const min = modernPath2d.Point2D.MAX;
-    const max = modernPath2d.Point2D.MIN;
+    const min = modernPath2d.Vector2.MAX;
+    const max = modernPath2d.Vector2.MIN;
     paths.forEach((path) => path.getMinMax(min, max));
     const { x, y, width, height } = new modernPath2d.BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
     const viewBox = svg.getAttribute("viewBox").split(" ").map(Number);
@@ -1041,14 +1087,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 = modernPath2d.Point2D.MAX;
-    const max = modernPath2d.Point2D.MIN;
-    this.characters.forEach((c) => c.getMinMax(min, max));
+    const min = modernPath2d.Vector2.MAX;
+    const max = modernPath2d.Vector2.MIN;
+    characters.forEach((c) => c.getMinMax(min, max));
     this.renderBoundingBox = new modernPath2d.BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
     return this;
   }

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { BoundingBox, Path2D, Point2D } from 'modern-path2d';
+import { BoundingBox, Path2D, VectorLike, Vector2 } from 'modern-path2d';
 import { GlyphPathCommand, Sfnt } from 'modern-font';
 export * from 'modern-font';
 
@@ -97,9 +97,9 @@ declare class Character {
     index: number;
     parent: Fragment;
     boundingBox: BoundingBox;
-    path: Path2D<any>;
     textWidth: number;
     textHeight: number;
+    path: Path2D<any>;
     commands: GlyphPathCommand[];
     glyphHeight: number;
     glyphWidth: number;
@@ -110,32 +110,29 @@ declare class Character {
     baseline: number;
     centerDiviation: number;
     glyphBox: BoundingBox;
-    centerPoint: {
-        x: number;
-        y: number;
-    };
+    centerPoint: VectorLike;
     get computedStyle(): TextStyle;
     get isVertical(): boolean;
     get fontSize(): number;
     constructor(content: string, index: number, parent: Fragment);
     protected _font(): Sfnt | undefined;
-    protected _updateGlyph(font: Sfnt): this;
-    protected _decoration(): GlyphPathCommand[];
-    protected _transform(commands: GlyphPathCommand[], cb: (x: number, y: number) => number[]): GlyphPathCommand[];
-    protected _italic(commands: GlyphPathCommand[], startPoint?: {
-        x: number;
-        y: number;
-    }): GlyphPathCommand[];
-    protected _rotation90(commands: GlyphPathCommand[], point: {
-        x: number;
-        y: number;
-    }): GlyphPathCommand[];
+    updateGlyph(font?: Sfnt | undefined): this;
+    updateCommands(): this;
     updatePath(): this;
     update(): this;
-    getMinMax(min?: Point2D, max?: Point2D): {
-        min: Point2D;
-        max: Point2D;
+    protected _decoration(): GlyphPathCommand[];
+    protected _italic(commands: GlyphPathCommand[], startPoint?: VectorLike): GlyphPathCommand[];
+    protected _rotation90(commands: GlyphPathCommand[], point: VectorLike): GlyphPathCommand[];
+    protected _transform(commands: GlyphPathCommand[], cb: (x: number, y: number) => number[]): GlyphPathCommand[];
+    forEachCommand(cb: (command: GlyphPathCommand, index: number, context: {
+        first: VectorLike;
+        last: VectorLike;
+    }) => void | GlyphPathCommand): this;
+    getMinMax(min?: Vector2, max?: Vector2): {
+        min: Vector2;
+        max: Vector2;
     };
+    getBoundingBox(): BoundingBox;
     drawTo(ctx: CanvasRenderingContext2D, config?: Partial<TextEffect>): void;
 }
 

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { BoundingBox, Path2D, Point2D } from 'modern-path2d';
+import { BoundingBox, Path2D, VectorLike, Vector2 } from 'modern-path2d';
 import { GlyphPathCommand, Sfnt } from 'modern-font';
 export * from 'modern-font';
 
@@ -97,9 +97,9 @@ declare class Character {
     index: number;
     parent: Fragment;
     boundingBox: BoundingBox;
-    path: Path2D<any>;
     textWidth: number;
     textHeight: number;
+    path: Path2D<any>;
     commands: GlyphPathCommand[];
     glyphHeight: number;
     glyphWidth: number;
@@ -110,32 +110,29 @@ declare class Character {
     baseline: number;
     centerDiviation: number;
     glyphBox: BoundingBox;
-    centerPoint: {
-        x: number;
-        y: number;
-    };
+    centerPoint: VectorLike;
     get computedStyle(): TextStyle;
     get isVertical(): boolean;
     get fontSize(): number;
     constructor(content: string, index: number, parent: Fragment);
     protected _font(): Sfnt | undefined;
-    protected _updateGlyph(font: Sfnt): this;
-    protected _decoration(): GlyphPathCommand[];
-    protected _transform(commands: GlyphPathCommand[], cb: (x: number, y: number) => number[]): GlyphPathCommand[];
-    protected _italic(commands: GlyphPathCommand[], startPoint?: {
-        x: number;
-        y: number;
-    }): GlyphPathCommand[];
-    protected _rotation90(commands: GlyphPathCommand[], point: {
-        x: number;
-        y: number;
-    }): GlyphPathCommand[];
+    updateGlyph(font?: Sfnt | undefined): this;
+    updateCommands(): this;
     updatePath(): this;
     update(): this;
-    getMinMax(min?: Point2D, max?: Point2D): {
-        min: Point2D;
-        max: Point2D;
+    protected _decoration(): GlyphPathCommand[];
+    protected _italic(commands: GlyphPathCommand[], startPoint?: VectorLike): GlyphPathCommand[];
+    protected _rotation90(commands: GlyphPathCommand[], point: VectorLike): GlyphPathCommand[];
+    protected _transform(commands: GlyphPathCommand[], cb: (x: number, y: number) => number[]): GlyphPathCommand[];
+    forEachCommand(cb: (command: GlyphPathCommand, index: number, context: {
+        first: VectorLike;
+        last: VectorLike;
+    }) => void | GlyphPathCommand): this;
+    getMinMax(min?: Vector2, max?: Vector2): {
+        min: Vector2;
+        max: Vector2;
     };
+    getBoundingBox(): BoundingBox;
     drawTo(ctx: CanvasRenderingContext2D, config?: Partial<TextEffect>): void;
 }
 

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { BoundingBox, Path2D, Point2D } from 'modern-path2d';
+import { BoundingBox, Path2D, VectorLike, Vector2 } from 'modern-path2d';
 import { GlyphPathCommand, Sfnt } from 'modern-font';
 export * from 'modern-font';
 
@@ -97,9 +97,9 @@ declare class Character {
     index: number;
     parent: Fragment;
     boundingBox: BoundingBox;
-    path: Path2D<any>;
     textWidth: number;
     textHeight: number;
+    path: Path2D<any>;
     commands: GlyphPathCommand[];
     glyphHeight: number;
     glyphWidth: number;
@@ -110,32 +110,29 @@ declare class Character {
     baseline: number;
     centerDiviation: number;
     glyphBox: BoundingBox;
-    centerPoint: {
-        x: number;
-        y: number;
-    };
+    centerPoint: VectorLike;
     get computedStyle(): TextStyle;
     get isVertical(): boolean;
     get fontSize(): number;
     constructor(content: string, index: number, parent: Fragment);
     protected _font(): Sfnt | undefined;
-    protected _updateGlyph(font: Sfnt): this;
-    protected _decoration(): GlyphPathCommand[];
-    protected _transform(commands: GlyphPathCommand[], cb: (x: number, y: number) => number[]): GlyphPathCommand[];
-    protected _italic(commands: GlyphPathCommand[], startPoint?: {
-        x: number;
-        y: number;
-    }): GlyphPathCommand[];
-    protected _rotation90(commands: GlyphPathCommand[], point: {
-        x: number;
-        y: number;
-    }): GlyphPathCommand[];
+    updateGlyph(font?: Sfnt | undefined): this;
+    updateCommands(): this;
     updatePath(): this;
     update(): this;
-    getMinMax(min?: Point2D, max?: Point2D): {
-        min: Point2D;
-        max: Point2D;
+    protected _decoration(): GlyphPathCommand[];
+    protected _italic(commands: GlyphPathCommand[], startPoint?: VectorLike): GlyphPathCommand[];
+    protected _rotation90(commands: GlyphPathCommand[], point: VectorLike): GlyphPathCommand[];
+    protected _transform(commands: GlyphPathCommand[], cb: (x: number, y: number) => number[]): GlyphPathCommand[];
+    forEachCommand(cb: (command: GlyphPathCommand, index: number, context: {
+        first: VectorLike;
+        last: VectorLike;
+    }) => void | GlyphPathCommand): this;
+    getMinMax(min?: Vector2, max?: Vector2): {
+        min: Vector2;
+        max: Vector2;
     };
+    getBoundingBox(): BoundingBox;
     drawTo(ctx: CanvasRenderingContext2D, config?: Partial<TextEffect>): void;
 }