modern-text 0.2.4 → 0.2.6

package/dist/index.cjs

@@ -171,9 +171,10 @@ 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);
+    // glyph
+    __publicField$4(this, "commands", []);
   }
   get computedStyle() {
     return this.parent.computedStyle;
@@ -191,11 +192,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;
@@ -216,84 +220,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;
@@ -308,7 +235,7 @@ class Character {
       baseline,
       glyphHeight,
       glyphWidth
-    } = this._updateGlyph(font);
+    } = this.updateGlyph(font);
     const { os2, ascender, descender } = font;
     const usWinAscent = ascender;
     const usWinDescent = descender;
@@ -366,11 +293,120 @@ class Character {
     }
     commands.push(...this._decoration());
     this.commands = commands;
-    this.path = new modernPath2d.Path2D(commands);
     return this;
   }
   update() {
-    this.updatePath();
+    this.updateCommands();
+    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" }
+      ];
+    }
+  }
+  _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.Point2D.MAX, max = modernPath2d.Point2D.MIN) {
@@ -404,7 +440,7 @@ class Character {
   drawTo(ctx, config = {}) {
     drawPaths({
       ctx,
-      paths: [this.path],
+      paths: [new modernPath2d.Path2D(this.commands)],
       fontSize: this.computedStyle.fontSize,
       color: this.computedStyle.color,
       ...config
@@ -570,7 +606,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();
@@ -1039,14 +1075,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());
     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));
+    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

@@ -12,6 +12,10 @@ type TextAlign = 'center' | 'end' | 'left' | 'right' | 'start';
 type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'sub' | 'super' | 'text-top' | 'text-bottom';
 type TextTransform = 'uppercase' | 'lowercase' | 'none';
 type TextDecoration = 'none' | 'underline' | 'line-through';
+interface PointLike {
+    x: number;
+    y: number;
+}
 interface TextLayoutStyle {
     writingMode: WritingMode;
     textOrientation: TextOrientation;
@@ -97,7 +101,6 @@ declare class Character {
     index: number;
     parent: Fragment;
     boundingBox: BoundingBox;
-    path: Path2D<any>;
     textWidth: number;
     textHeight: number;
     commands: GlyphPathCommand[];
@@ -110,28 +113,23 @@ declare class Character {
     baseline: number;
     centerDiviation: number;
     glyphBox: BoundingBox;
-    centerPoint: {
-        x: number;
-        y: number;
-    };
+    centerPoint: PointLike;
     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;
+    updateGlyph(font?: Sfnt | undefined): this;
+    updateCommands(): this;
+    update(): this;
     protected _decoration(): GlyphPathCommand[];
+    protected _italic(commands: GlyphPathCommand[], startPoint?: PointLike): GlyphPathCommand[];
+    protected _rotation90(commands: GlyphPathCommand[], point: PointLike): 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[];
-    updatePath(): this;
-    update(): this;
+    forEachCommand(cb: (command: GlyphPathCommand, index: number, context: {
+        first: PointLike;
+        last: PointLike;
+    }) => void | GlyphPathCommand): this;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -346,4 +344,4 @@ declare function getPointPosition(point: {
     y: number;
 };
 
-export { Character, Deformer, type DrawShapePathsOptions, type EffectOptions, Effector, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type FragmentHighlight, Highlighter, type LinearGradient, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, type MeasuredResult, Measurer, Paragraph, type ParagraphContent, Parser, Reflector, type Render2dOptions, Renderer2D, Text, type TextAlign, type TextContent, type TextDecoration, type TextDeformation, type TextDrawStyle, type TextEffect, type TextLayoutStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, drawPaths, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };
+export { Character, Deformer, type DrawShapePathsOptions, type EffectOptions, Effector, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type FragmentHighlight, Highlighter, type LinearGradient, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, type MeasuredResult, Measurer, Paragraph, type ParagraphContent, Parser, type PointLike, Reflector, type Render2dOptions, Renderer2D, Text, type TextAlign, type TextContent, type TextDecoration, type TextDeformation, type TextDrawStyle, type TextEffect, type TextLayoutStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, drawPaths, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };

package/dist/index.d.mts

@@ -12,6 +12,10 @@ type TextAlign = 'center' | 'end' | 'left' | 'right' | 'start';
 type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'sub' | 'super' | 'text-top' | 'text-bottom';
 type TextTransform = 'uppercase' | 'lowercase' | 'none';
 type TextDecoration = 'none' | 'underline' | 'line-through';
+interface PointLike {
+    x: number;
+    y: number;
+}
 interface TextLayoutStyle {
     writingMode: WritingMode;
     textOrientation: TextOrientation;
@@ -97,7 +101,6 @@ declare class Character {
     index: number;
     parent: Fragment;
     boundingBox: BoundingBox;
-    path: Path2D<any>;
     textWidth: number;
     textHeight: number;
     commands: GlyphPathCommand[];
@@ -110,28 +113,23 @@ declare class Character {
     baseline: number;
     centerDiviation: number;
     glyphBox: BoundingBox;
-    centerPoint: {
-        x: number;
-        y: number;
-    };
+    centerPoint: PointLike;
     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;
+    updateGlyph(font?: Sfnt | undefined): this;
+    updateCommands(): this;
+    update(): this;
     protected _decoration(): GlyphPathCommand[];
+    protected _italic(commands: GlyphPathCommand[], startPoint?: PointLike): GlyphPathCommand[];
+    protected _rotation90(commands: GlyphPathCommand[], point: PointLike): 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[];
-    updatePath(): this;
-    update(): this;
+    forEachCommand(cb: (command: GlyphPathCommand, index: number, context: {
+        first: PointLike;
+        last: PointLike;
+    }) => void | GlyphPathCommand): this;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -346,4 +344,4 @@ declare function getPointPosition(point: {
     y: number;
 };
 
-export { Character, Deformer, type DrawShapePathsOptions, type EffectOptions, Effector, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type FragmentHighlight, Highlighter, type LinearGradient, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, type MeasuredResult, Measurer, Paragraph, type ParagraphContent, Parser, Reflector, type Render2dOptions, Renderer2D, Text, type TextAlign, type TextContent, type TextDecoration, type TextDeformation, type TextDrawStyle, type TextEffect, type TextLayoutStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, drawPaths, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };
+export { Character, Deformer, type DrawShapePathsOptions, type EffectOptions, Effector, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type FragmentHighlight, Highlighter, type LinearGradient, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, type MeasuredResult, Measurer, Paragraph, type ParagraphContent, Parser, type PointLike, Reflector, type Render2dOptions, Renderer2D, Text, type TextAlign, type TextContent, type TextDecoration, type TextDeformation, type TextDrawStyle, type TextEffect, type TextLayoutStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, drawPaths, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };

package/dist/index.d.ts

@@ -12,6 +12,10 @@ type TextAlign = 'center' | 'end' | 'left' | 'right' | 'start';
 type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'sub' | 'super' | 'text-top' | 'text-bottom';
 type TextTransform = 'uppercase' | 'lowercase' | 'none';
 type TextDecoration = 'none' | 'underline' | 'line-through';
+interface PointLike {
+    x: number;
+    y: number;
+}
 interface TextLayoutStyle {
     writingMode: WritingMode;
     textOrientation: TextOrientation;
@@ -97,7 +101,6 @@ declare class Character {
     index: number;
     parent: Fragment;
     boundingBox: BoundingBox;
-    path: Path2D<any>;
     textWidth: number;
     textHeight: number;
     commands: GlyphPathCommand[];
@@ -110,28 +113,23 @@ declare class Character {
     baseline: number;
     centerDiviation: number;
     glyphBox: BoundingBox;
-    centerPoint: {
-        x: number;
-        y: number;
-    };
+    centerPoint: PointLike;
     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;
+    updateGlyph(font?: Sfnt | undefined): this;
+    updateCommands(): this;
+    update(): this;
     protected _decoration(): GlyphPathCommand[];
+    protected _italic(commands: GlyphPathCommand[], startPoint?: PointLike): GlyphPathCommand[];
+    protected _rotation90(commands: GlyphPathCommand[], point: PointLike): 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[];
-    updatePath(): this;
-    update(): this;
+    forEachCommand(cb: (command: GlyphPathCommand, index: number, context: {
+        first: PointLike;
+        last: PointLike;
+    }) => void | GlyphPathCommand): this;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
@@ -346,4 +344,4 @@ declare function getPointPosition(point: {
     y: number;
 };
 
-export { Character, Deformer, type DrawShapePathsOptions, type EffectOptions, Effector, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type FragmentHighlight, Highlighter, type LinearGradient, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, type MeasuredResult, Measurer, Paragraph, type ParagraphContent, Parser, Reflector, type Render2dOptions, Renderer2D, Text, type TextAlign, type TextContent, type TextDecoration, type TextDeformation, type TextDrawStyle, type TextEffect, type TextLayoutStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, drawPaths, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };
+export { Character, Deformer, type DrawShapePathsOptions, type EffectOptions, Effector, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type FragmentHighlight, Highlighter, type LinearGradient, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, type MeasuredResult, Measurer, Paragraph, type ParagraphContent, Parser, type PointLike, Reflector, type Render2dOptions, Renderer2D, Text, type TextAlign, type TextContent, type TextDecoration, type TextDeformation, type TextDrawStyle, type TextEffect, type TextLayoutStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, drawPaths, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };